diff --git a/.agents/skills/performance-investigation/SKILL.md b/.agents/skills/performance-investigation/SKILL.md
new file mode 100644
index 0000000000..cbc5d81882
--- /dev/null
+++ b/.agents/skills/performance-investigation/SKILL.md
@@ -0,0 +1,70 @@
+---
+name: performance-investigation
+description: Investigate performance regressions and find opportunities for optimization
+---
+
+## Quick start
+
+1. Start from a branch you want to measure (for example `foo`).
+2. Run:
+
+```sh
+pnpm bench:compare main foo
+```
+
+If you pass one branch, `bench:compare` automatically compares it to `main`.
+
+## Where outputs go
+
+- Summary report: `benchmarking/compare/.results/report.txt`
+- Raw benchmark numbers:
+  - `benchmarking/compare/.results/main.json`
+  - `benchmarking/compare/.results/<your-branch>.json`
+- CPU profiles (per benchmark, per branch):
+  - `benchmarking/compare/.profiles/main/*.cpuprofile`
+  - `benchmarking/compare/.profiles/main/*.md`
+  - `benchmarking/compare/.profiles/<your-branch>/*.cpuprofile`
+  - `benchmarking/compare/.profiles/<your-branch>/*.md`
+
+The `.md` files are generated summaries of the CPU profile and are usually the fastest way to inspect hotspots.
+
+## Suggested investigation flow
+
+1. Open `benchmarking/compare/.results/report.txt` and identify largest regressions first.
+2. For each high-delta benchmark, compare:
+   - `benchmarking/compare/.profiles/main/<benchmark>.md`
+   - `benchmarking/compare/.profiles/<branch>/<benchmark>.md`
+3. Look for changes in self/inclusive hotspot share in runtime internals (`runtime.js`, `reactivity/batch.js`, `reactivity/deriveds.js`, `reactivity/sources.js`).
+4. Make one optimization change at a time, then re-run targeted benches before re-running full compare.
+
+## Fast benchmark loops
+
+Run only selected reactivity benchmarks by substring:
+
+```sh
+pnpm bench kairo_mux kairo_deep kairo_broad kairo_triangle
+pnpm bench repeated_deps sbench_create_signals mol_owned
+```
+
+## Tests to run after perf changes
+
+Runtime reactivity regressions are most likely in runes runtime tests:
+
+```sh
+pnpm test runtime-runes
+```
+
+## Helpful script
+
+For quick cpuprofile hotspot deltas between two branches:
+
+```sh
+node benchmarking/compare/profile-diff.mjs kairo_mux_owned main foo
+```
+
+This prints top function sample-share deltas for the selected benchmark.
+
+## Practical gotchas
+
+- `bench:compare` checks out branches while running. Avoid uncommitted changes (or stash them) so branch switching is safe.
+- Each `bench:compare` run rewrites `benchmarking/compare/.results` and `benchmarking/compare/.profiles`.
diff --git a/.changeset/warm-cougars-behave.md b/.changeset/warm-cougars-behave.md
new file mode 100644
index 0000000000..15e32f7436
--- /dev/null
+++ b/.changeset/warm-cougars-behave.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: reject pending async deriveds on discard
diff --git a/.editorconfig b/.editorconfig
index 2f52d9993f..900cdf7cdc 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -4,7 +4,6 @@ root = true
 end_of_line = lf
 insert_final_newline = true
 indent_style = tab
-indent_size = 2
 charset = utf-8
 trim_trailing_whitespace = true
 
diff --git a/.github/workflows/autofix.yml b/.github/workflows/autofix.yml
new file mode 100644
index 0000000000..b6c26e0792
--- /dev/null
+++ b/.github/workflows/autofix.yml
@@ -0,0 +1,69 @@
+name: Autofix Lint
+
+on:
+  issue_comment:
+    types: [created]
+  workflow_dispatch:
+
+permissions: {}
+
+jobs:
+  autofix-lint:
+    permissions:
+      contents: write # to push the generated types commit
+      pull-requests: read # to resolve the PR head ref
+    # prevents this action from running on forks
+    if: |
+      github.repository == 'sveltejs/svelte' &&
+      (
+        github.event_name == 'workflow_dispatch' ||
+        (
+          github.event.issue.pull_request != null &&
+          github.event.comment.body == '/autofix' &&
+          contains(fromJSON('["OWNER", "MEMBER", "COLLABORATOR"]'), github.event.comment.author_association)
+        )
+      )
+    runs-on: ubuntu-latest
+    steps:
+      - name: Get PR ref
+        if: github.event_name != 'workflow_dispatch'
+        id: pr
+        uses: actions/github-script@v8
+        with:
+          script: |
+            const { data: pull } = await github.rest.pulls.get({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              pull_number: context.issue.number
+            });
+            if (pull.head.repo.full_name !== `${context.repo.owner}/${context.repo.repo}`) {
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.issue.number,
+                body: 'Cannot autofix: this PR is from a forked repository. The autofix workflow can only push to branches within this repository.'
+              });
+              core.setFailed('PR is from a fork');
+            }
+            core.setOutput('ref', pull.head.ref);
+      - uses: actions/checkout@v6
+        if: github.event_name == 'workflow_dispatch' || steps.pr.outcome == 'success'
+        with:
+          ref: ${{ github.event_name == 'workflow_dispatch' && github.ref || steps.pr.outputs.ref }}
+      - uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 24
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - name: Build
+        run: pnpm -F svelte build
+      - name: Run prettier
+        run: pnpm format
+      - name: Commit changes
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git add -A
+          git diff --staged --quiet || git commit -m "chore: autofix"
+          git push origin HEAD
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index fbdd1e420c..365717755e 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -12,26 +12,29 @@ env:
 
 jobs:
   Tests:
+    permissions: {}
     runs-on: ${{ matrix.os }}
     timeout-minutes: 15
     strategy:
       matrix:
         include:
-          - node-version: 18
+          # Vitest 4 requires Node 20+, so tests run on 20/22/24. The published
+          # Svelte package still supports Node >=18 (see packages/svelte/package.json).
+          - node-version: 20
             os: windows-latest
-          - node-version: 18
+          - node-version: 20
             os: macOS-latest
-          - node-version: 18
-            os: ubuntu-latest
           - node-version: 20
             os: ubuntu-latest
           - node-version: 22
             os: ubuntu-latest
+          - node-version: 24
+            os: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4
+      - uses: actions/setup-node@v6
         with:
           node-version: ${{ matrix.node-version }}
           cache: pnpm
@@ -40,15 +43,50 @@ jobs:
       - run: pnpm test
         env:
           CI: true
-  Lint:
+  TestNoAsync:
+    permissions: {}
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4
+      - uses: actions/setup-node@v6
+        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
+  TSGo:
+    permissions: {}
     runs-on: ubuntu-latest
     timeout-minutes: 5
     steps:
-      - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 24
+          cache: pnpm
+      - name: install
+        run: pnpm install --frozen-lockfile
+      - name: install tsgo
+        run: cd packages/svelte && pnpm i -D @typescript/native-preview
+      - name: type check
+        run: cd packages/svelte && pnpm check:tsgo
+  Lint:
+    permissions: {}
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4
+      - uses: actions/setup-node@v6
         with:
-          node-version: 18
+          node-version: 24
           cache: pnpm
       - name: install
         run: pnpm install --frozen-lockfile
@@ -59,16 +97,19 @@ jobs:
         run: pnpm lint
       - name: build and check generated types
         if: (${{ success() }} || ${{ failure() }}) # ensures this step runs even if previous steps fail
-        run: pnpm build && { [ "`git status --porcelain=v1`" == "" ] || (echo "Generated types have changed — please regenerate types locally and commit the changes after you have reviewed them"; git diff; exit 1); }
+        run: pnpm build && { [ "`git status --porcelain=v1`" == "" ] || (echo "Generated types have changed — please regenerate types locally with `cd packages/svelte && pnpm generate:types` and commit the changes after you have reviewed them"; git diff; exit 1); }
+      - name: check browser-support docs page is up to date
+        run: '{ [ "`git status --porcelain=v1 documentation/docs/07-misc/.generated/`" == "" ] || (echo "The browser-support docs page is out of date — please regenerate it locally with \`cd packages/svelte && pnpm generate:browser-support\` and commit the changes"; git diff documentation/docs/07-misc/.generated/; exit 1); }'
   Benchmarks:
+    permissions: {}
     runs-on: ubuntu-latest
     timeout-minutes: 15
     steps:
-      - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4
+      - uses: actions/setup-node@v6
         with:
-          node-version: 18
+          node-version: 24
           cache: pnpm
       - run: pnpm install --frozen-lockfile
       - run: pnpm bench
diff --git a/.github/workflows/docs-preview-create-request.yml b/.github/workflows/docs-preview-create-request.yml
deleted file mode 100644
index f57766dc36..0000000000
--- a/.github/workflows/docs-preview-create-request.yml
+++ /dev/null
@@ -1,26 +0,0 @@
-# https://github.com/sveltejs/svelte.dev/blob/main/apps/svelte.dev/scripts/sync-docs/README.md
-name: Docs preview create request
-
-on:
-  pull_request_target:
-    branches:
-      - main
-
-jobs:
-  dispatch:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Repository Dispatch
-        uses: peter-evans/repository-dispatch@v3
-        with:
-          token: ${{ secrets.SYNC_REQUEST_TOKEN }}
-          repository: sveltejs/svelte.dev
-          event-type: docs-preview-create
-          client-payload: |-
-            {
-              "package": "svelte",
-              "repo": "${{ github.repository }}",
-              "owner": "${{ github.event.pull_request.head.repo.owner.login }}",
-              "branch": "${{ github.event.pull_request.head.ref }}",
-              "pr": ${{ github.event.pull_request.number }}
-            }
diff --git a/.github/workflows/docs-preview-delete-request.yml b/.github/workflows/docs-preview-delete-request.yml
deleted file mode 100644
index 4eb0e996a6..0000000000
--- a/.github/workflows/docs-preview-delete-request.yml
+++ /dev/null
@@ -1,27 +0,0 @@
-# https://github.com/sveltejs/svelte.dev/blob/main/apps/svelte.dev/scripts/sync-docs/README.md
-name: Docs preview delete request
-
-on:
-  pull_request_target:
-    branches:
-      - main
-    types: [closed]
-
-jobs:
-  dispatch:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Repository Dispatch
-        uses: peter-evans/repository-dispatch@v3
-        with:
-          token: ${{ secrets.SYNC_REQUEST_TOKEN }}
-          repository: sveltejs/svelte.dev
-          event-type: docs-preview-delete
-          client-payload: |-
-            {
-              "package": "svelte",
-              "repo": "${{ github.repository }}",
-              "owner": "${{ github.event.pull_request.head.repo.owner.login }}",
-              "branch": "${{ github.event.pull_request.head.ref }}",
-              "pr": ${{ github.event.pull_request.number }}
-            }
diff --git a/.github/workflows/ecosystem-ci-trigger.yml b/.github/workflows/ecosystem-ci-trigger.yml
index ce7bf04136..8a6d1bf345 100644
--- a/.github/workflows/ecosystem-ci-trigger.yml
+++ b/.github/workflows/ecosystem-ci-trigger.yml
@@ -4,12 +4,21 @@ on:
   issue_comment:
     types: [created]
 
+permissions: {}
+
 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, post comments
+      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: actions/github-script@v6
+      - name: Check User Permissions
+        uses: actions/github-script@v8
+        id: check-permissions
         with:
           script: |
             const user = context.payload.sender.login
@@ -28,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,
@@ -36,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@v8
         id: get-pr-data
         with:
           script: |
@@ -55,27 +66,65 @@ jobs:
               repo: context.repo.repo,
               pull_number: context.issue.number
             })
+
+            const commentCreatedAt = new Date(context.payload.comment.created_at)
+            const commitPushedAt = new Date(pr.head.repo.pushed_at)
+
+            console.log(`Comment created at: ${commentCreatedAt.toISOString()}`)
+            console.log(`PR last pushed at: ${commitPushedAt.toISOString()}`)
+
+            // Check if any commits were pushed after the comment was created
+            if (commitPushedAt > commentCreatedAt) {
+              const errorMsg = [
+                '⚠️ Security warning: PR was updated after the trigger command was posted.',
+                '',
+                `Comment posted at: ${commentCreatedAt.toISOString()}`,
+                `PR last pushed at: ${commitPushedAt.toISOString()}`,
+                '',
+                'This could indicate an attempt to inject code after approval.',
+                'Please review the latest changes and re-run /ecosystem-ci run if they are acceptable.'
+              ].join('\n')
+
+              core.setFailed(errorMsg)
+
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.issue.number,
+                body: errorMsg
+              })
+
+              throw new Error('PR was pushed to after comment was created')
+            }
+
             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@v8
         id: trigger
         env:
           COMMENT: ${{ github.event.comment.body }}
+          PR_DATA: ${{ steps.get-pr-data.outputs.result }}
         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 }}
+            const prData = JSON.parse(process.env.PR_DATA)
 
             const suite = comment.split('\n')[0].replace(/^\/ecosystem-ci run/, '').trim()
 
@@ -88,6 +137,7 @@ jobs:
                 prNumber: '' + prData.num,
                 branchName: prData.branchName,
                 repo: prData.repo,
+                commit: prData.commit,
                 suite: suite === '' ? '-' : suite
               }
             })
diff --git a/.github/workflows/pkg.pr.new-comment.yml b/.github/workflows/pkg.pr.new-comment.yml
deleted file mode 100644
index 1698a456d3..0000000000
--- a/.github/workflows/pkg.pr.new-comment.yml
+++ /dev/null
@@ -1,112 +0,0 @@
-name: Update pkg.pr.new comment
-
-on:
-  workflow_run:
-    workflows: ['Publish Any Commit']
-    types:
-      - completed
-
-jobs:
-  build:
-    name: 'Update comment'
-    runs-on: ubuntu-latest
-    steps:
-      - name: Download artifact
-        uses: actions/download-artifact@v4
-        with:
-          name: output
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          run-id: ${{ github.event.workflow_run.id }}
-
-      - run: ls -R .
-      - name: 'Post or update comment'
-        uses: actions/github-script@v6
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            const fs = require('fs');
-            const output = JSON.parse(fs.readFileSync('output.json', 'utf8'));
-
-            const bot_comment_identifier = `<!-- pkg.pr.new comment -->`;
-
-            const body = (number) => `${bot_comment_identifier}
-
-            [Playground](https://svelte.dev/playground?version=pr-${number})
-
-            \`\`\`
-            ${output.packages.map((p) => `pnpm add https://pkg.pr.new/${p.name}@${number}`).join('\n')}
-            \`\`\`
-            `;
-
-            async function find_bot_comment(issue_number) {
-              if (!issue_number) return null;
-              const comments = await github.rest.issues.listComments({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                issue_number: issue_number,
-              });
-              return comments.data.find((comment) =>
-                comment.body.includes(bot_comment_identifier)
-              );
-            }
-
-            async function create_or_update_comment(issue_number) {
-              if (!issue_number) {
-                console.log('No issue number provided. Cannot post or update comment.');
-                return;
-              }
-
-              const existing_comment = await find_bot_comment(issue_number);
-              if (existing_comment) {
-                await github.rest.issues.updateComment({
-                  owner: context.repo.owner,
-                  repo: context.repo.repo,
-                  comment_id: existing_comment.id,
-                  body: body(issue_number),
-                });
-              } else {
-                await github.rest.issues.createComment({
-                  issue_number: issue_number,
-                  owner: context.repo.owner,
-                  repo: context.repo.repo,
-                  body: body(issue_number),
-                });
-              }
-            }
-
-            async function log_publish_info() {
-              const svelte_package = output.packages.find(p => p.name === 'svelte');
-              const svelte_sha = svelte_package.url.replace(/^.+@([^@]+)$/, '$1');
-              console.log('\n' + '='.repeat(50));
-              console.log('Publish Information');
-              console.log('='.repeat(50));
-              console.log('\nPublished Packages:');
-              console.log(output.packages.map((p) => `${p.name} - pnpm add https://pkg.pr.new/${p.name}@${p.url.replace(/^.+@([^@]+)$/, '$1')}`).join('\n'));
-              if(svelte_sha){
-                console.log('\nPlayground URL:');
-                console.log(`\nhttps://svelte.dev/playground?version=commit-${svelte_sha}`)
-              }
-              console.log('\n' + '='.repeat(50));
-            }
-
-            if (output.event_name === 'pull_request') {
-              if (output.number) {
-                await create_or_update_comment(output.number);
-              }
-            } else if (output.event_name === 'push') {
-              const pull_requests = await github.rest.pulls.list({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                state: 'open',
-                head: `${context.repo.owner}:${output.ref.replace('refs/heads/', '')}`,
-              });
-
-              if (pull_requests.data.length > 0) {
-                await create_or_update_comment(pull_requests.data[0].number);
-              } else {
-                console.log(
-                  'No open pull request found for this push. Logging publish information to console:'
-                );
-                await log_publish_info();
-              }
-            }
diff --git a/.github/workflows/pkg.pr.new.yml b/.github/workflows/pkg.pr.new.yml
index 4292ec900a..0fcda5a778 100644
--- a/.github/workflows/pkg.pr.new.yml
+++ b/.github/workflows/pkg.pr.new.yml
@@ -1,18 +1,44 @@
-name: Publish Any Commit
-on: [push, pull_request]
+name: pkg.pr.new
+on:
+  pull_request_target:
+    types: [opened, synchronize]
+  push:
+    branches: [main]
+  workflow_dispatch:
+    inputs:
+      sha:
+        description: 'Commit SHA to build'
+        required: true
+        type: string
+      pr:
+        description: 'PR number to comment on'
+        required: true
+        type: number
+
+permissions: {}
 
 jobs:
   build:
+    # Skip pull_request_target events from forks — maintainers can use workflow_dispatch instead
+    if: >
+      github.event_name != 'pull_request_target' ||
+      github.event.pull_request.head.repo.full_name == github.repository
     runs-on: ubuntu-latest
+    # No permissions — this job runs user-controlled code
+    permissions: {}
 
     steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
+      - uses: actions/checkout@v6
+        with:
+          # For pull_request_target, check out the PR head.
+          # For workflow_dispatch, check out the manually specified SHA.
+          # For push, fall back to the push SHA.
+          ref: ${{ github.event.pull_request.head.sha || inputs.sha || github.sha }}
 
-      - run: corepack enable
-      - uses: actions/setup-node@v4
+      - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4
+      - uses: actions/setup-node@v6
         with:
-          node-version: 18.x
+          node-version: 22.x
           cache: pnpm
 
       - name: Install dependencies
@@ -22,21 +48,182 @@ jobs:
         run: pnpm build
 
       - run: pnpx pkg-pr-new publish --comment=off --json output.json --compact --no-template './packages/svelte'
-      - name: Add metadata to output
-        uses: actions/github-script@v6
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            const fs = require('fs');
-            const output = JSON.parse(fs.readFileSync('output.json', 'utf8'));
-            output.number = context.issue.number;
-            output.event_name = context.eventName;
-            output.ref = context.ref;
-            fs.writeFileSync('output.json', JSON.stringify(output), 'utf8');
+
       - name: Upload output
         uses: actions/upload-artifact@v4
         with:
           name: output
           path: ./output.json
 
-      - run: ls -R .
+  # Sanitizes the untrusted output from the build job before it's consumed by
+  # jobs with elevated permissions. This ensures that only known package names
+  # and valid SHA prefixes make it through.
+  sanitize:
+    needs: build
+    runs-on: ubuntu-latest
+
+    permissions: {}
+
+    steps:
+      - name: Download artifact
+        uses: actions/download-artifact@v7
+        with:
+          name: output
+
+      - name: Sanitize output
+        uses: actions/github-script@v8
+        with:
+          script: |
+            const fs = require('fs');
+            const raw = JSON.parse(fs.readFileSync('output.json', 'utf8'));
+
+            const ALLOWED_PACKAGES = new Set(['svelte']);
+            const SHA_PATTERN = /^[0-9a-f]{7}$/;
+
+            const packages = (raw.packages || [])
+              .filter(p => {
+                if (!ALLOWED_PACKAGES.has(p.name)) {
+                  console.log(`Skipping unexpected package: ${JSON.stringify(p.name)}`);
+                  return false;
+                }
+                const sha = p.url?.replace(/^.+@([^@]+)$/, '$1');
+                if (!sha || !SHA_PATTERN.test(sha)) {
+                  console.log(`Skipping package with invalid SHA: ${JSON.stringify(p.url)}`);
+                  return false;
+                }
+                return true;
+              })
+              .map(p => ({
+                name: p.name,
+                sha: p.url.replace(/^.+@([^@]+)$/, '$1'),
+              }));
+
+            fs.writeFileSync('sanitized-output.json', JSON.stringify({ packages }), 'utf8');
+
+      - name: Upload sanitized output
+        uses: actions/upload-artifact@v4
+        with:
+          name: sanitized-output
+          path: ./sanitized-output.json
+
+  comment:
+    needs: sanitize
+    if: github.event_name == 'pull_request_target' || github.event_name == 'workflow_dispatch'
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      pull-requests: write
+
+    steps:
+      - name: Download sanitized artifact
+        uses: actions/download-artifact@v7
+        with:
+          name: sanitized-output
+
+      - name: Resolve PR number
+        id: pr
+        uses: actions/github-script@v8
+        with:
+          script: |
+            if (context.eventName === 'pull_request_target') {
+              core.setOutput('number', context.issue.number);
+              return;
+            }
+
+            // For workflow_dispatch, use the explicitly provided PR number.
+            // We can't use listPullRequestsAssociatedWithCommit because fork
+            // commits don't exist in the base repo, so the API returns nothing.
+            const pr = Number('${{ inputs.pr }}');
+            if (!pr || isNaN(pr)) {
+              core.setFailed('workflow_dispatch requires a valid pr input');
+              return;
+            }
+
+            core.setOutput('number', pr);
+
+      - name: Post or update comment
+        uses: actions/github-script@v8
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const fs = require('fs');
+            const { packages } = JSON.parse(fs.readFileSync('sanitized-output.json', 'utf8'));
+
+            if (packages.length === 0) {
+              console.log('No valid packages found. Skipping comment.');
+              return;
+            }
+
+            const issue_number = parseInt('${{ steps.pr.outputs.number }}', 10);
+
+            const bot_comment_identifier = `<!-- pkg.pr.new comment -->`;
+
+            const body = `${bot_comment_identifier}
+
+            [Playground](https://svelte.dev/playground?version=pr-${issue_number})
+
+            \`\`\`
+            ${packages.map(p => `pnpm add https://pkg.pr.new/${p.name}@${issue_number}`).join('\n')}
+            \`\`\`
+            `;
+
+            const comments = await github.rest.issues.listComments({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number,
+            });
+            const existing = comments.data.find(c => c.body.includes(bot_comment_identifier));
+
+            if (existing) {
+              await github.rest.issues.updateComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                comment_id: existing.id,
+                body,
+              });
+            } else {
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number,
+                body,
+              });
+            }
+
+  log:
+    needs: sanitize
+    if: github.event_name == 'push'
+    runs-on: ubuntu-latest
+
+    permissions: {}
+
+    steps:
+      - name: Download sanitized artifact
+        uses: actions/download-artifact@v7
+        with:
+          name: sanitized-output
+
+      - name: Log publish info
+        uses: actions/github-script@v8
+        with:
+          script: |
+            const fs = require('fs');
+            const { packages } = JSON.parse(fs.readFileSync('sanitized-output.json', 'utf8'));
+
+            if (packages.length === 0) {
+              console.log('No valid packages found.');
+              return;
+            }
+
+            console.log('\n' + '='.repeat(50));
+            console.log('Publish Information');
+            console.log('='.repeat(50));
+            for (const p of packages) {
+              console.log(`${p.name} - pnpm add https://pkg.pr.new/${p.name}@${p.sha}`);
+            }
+            const svelte = packages.find(p => p.name === 'svelte');
+            if (svelte) {
+              console.log(`\nPlayground: https://svelte.dev/playground?version=commit-${svelte.sha}`);
+            }
+            console.log('='.repeat(50));
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index a17f49bbeb..359fcb7eea 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -5,6 +5,11 @@ on:
     branches:
       - main
 
+concurrency:
+  # prevent two release workflows from running at once
+  # race conditions here can result in releases failing
+  group: ${{ github.workflow }}
+
 permissions: {}
 jobs:
   release:
@@ -18,30 +23,29 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
-          node-version: 18.x
+          node-version: 24.x
           cache: pnpm
 
       - name: Install
         run: pnpm install --frozen-lockfile
 
       - name: Build
-        run: pnpm build && { [ "`git status --porcelain=v1`" == "" ] || (echo "Generated types have changed — please regenerate types locally and commit the changes after you have reviewed them"; git diff; exit 1); }
+        run: pnpm build && { [ "`git status --porcelain=v1`" == "" ] || (echo "Generated types have changed — please regenerate types locally with `cd packages/svelte && pnpm generate:types` and commit the changes after you have reviewed them"; git diff; exit 1); }
 
       - name: Create Release Pull Request or Publish to npm
         id: changesets
-        uses: changesets/action@v1
+        uses: changesets/action@6a0a831ff30acef54f2c6aa1cbbc1096b066edaf # v1
         with:
           version: pnpm changeset:version
           publish: pnpm changeset:publish
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_CONFIG_PROVENANCE: true
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/sync-request.yml b/.github/workflows/sync-request.yml
deleted file mode 100644
index de2ce77692..0000000000
--- a/.github/workflows/sync-request.yml
+++ /dev/null
@@ -1,22 +0,0 @@
-# https://github.com/sveltejs/svelte.dev/blob/main/apps/svelte.dev/scripts/sync-docs/README.md
-name: Sync request
-
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  dispatch:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Repository Dispatch
-        uses: peter-evans/repository-dispatch@v3
-        with:
-          token: ${{ secrets.SYNC_REQUEST_TOKEN }}
-          repository: sveltejs/svelte.dev
-          event-type: sync-request
-          client-payload: |-
-            {
-              "package": "svelte"
-            }
diff --git a/.gitignore b/.gitignore
index d503437664..556cae6344 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,5 +22,8 @@ coverage
 .DS_Store
 
 tmp
+packages/svelte/scripts/_baseline/
 
+benchmarking/.profiles
 benchmarking/compare/.results
+benchmarking/compare/.profiles
diff --git a/.prettierignore b/.prettierignore
index d5c124353c..28f447f359 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -7,6 +7,8 @@ packages/**/config/*.js
 
 # packages/svelte
 packages/svelte/messages/**/*.md
+packages/svelte/scripts/_bundle.js
+packages/svelte/scripts/_baseline/*.ts
 packages/svelte/src/compiler/errors.js
 packages/svelte/src/compiler/warnings.js
 packages/svelte/src/internal/client/errors.js
@@ -14,6 +16,7 @@ packages/svelte/src/internal/client/warnings.js
 packages/svelte/src/internal/shared/errors.js
 packages/svelte/src/internal/shared/warnings.js
 packages/svelte/src/internal/server/errors.js
+packages/svelte/src/internal/server/warnings.js
 packages/svelte/tests/migrate/samples/*/output.svelte
 packages/svelte/tests/**/*.svelte
 packages/svelte/tests/**/_expected*
@@ -23,19 +26,15 @@ packages/svelte/tests/**/_output
 packages/svelte/tests/**/shards/*.test.js
 packages/svelte/tests/hydration/samples/*/_expected.html
 packages/svelte/tests/hydration/samples/*/_override.html
+packages/svelte/tests/parser-legacy/samples/*/_actual.json
+packages/svelte/tests/parser-legacy/samples/*/output.json
+packages/svelte/tests/parser-modern/samples/*/_actual.json
+packages/svelte/tests/parser-modern/samples/*/output.json
 packages/svelte/types
 packages/svelte/compiler/index.js
-playgrounds/sandbox/input/**.svelte
-playgrounds/sandbox/output
-
-# 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
+playgrounds/sandbox/dist/*
+playgrounds/sandbox/output/*
+playgrounds/sandbox/src/*
 
 **/node_modules
 **/.svelte-kit
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/.well-known/funding-manifest-urls b/.well-known/funding-manifest-urls
new file mode 100644
index 0000000000..b8ccc27b78
--- /dev/null
+++ b/.well-known/funding-manifest-urls
@@ -0,0 +1,2 @@
+https://svelte.dev/funding.json
+
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000000..7f143248aa
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,11 @@
+# Svelte Coding Agent Guide
+
+This guide is for AI coding agents working in the Svelte monorepo.
+
+**Important:** Read and follow [`CONTRIBUTING.md`](./CONTRIBUTING.md) as well - it contains essential information about testing, code structure, and contribution guidelines that applies here.
+
+When submitting a PR, you **MUST** read [`PULL_REQUEST_TEMPLATE.md`](./.github/PULL_REQUEST_TEMPLATE.md) and fill it out correctly. **DO NOT** submit a PR without running the full test suite.
+
+## Quick Reference
+
+If asked to do a performance investigation, use the `performance-investigation` skill.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index dd7bbb476e..586c6fe6ae 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -9,7 +9,7 @@ The [Open Source Guides](https://opensource.guide/) website has a collection of
 
 ## Get involved
 
-There are many ways to contribute to Svelte, and many of them do not involve writing any code. Here's a few ideas to get started:
+There are many ways to contribute to Svelte, and many of them do not involve writing any code. Here are a few ideas to get started:
 
 - Simply start using Svelte. Go through the [Getting Started](https://svelte.dev/docs#getting-started) guide. Does everything work as expected? If not, we're always looking for improvements. Let us know by [opening an issue](#reporting-new-issues).
 - Look through the [open issues](https://github.com/sveltejs/svelte/issues). A good starting point would be issues tagged [good first issue](https://github.com/sveltejs/svelte/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22). Provide workarounds, ask for clarification, or suggest labels. Help [triage issues](#triaging-issues-and-pull-requests).
@@ -43,7 +43,7 @@ The maintainers meet on the final Saturday of each month. While these meetings a
 
 ### Prioritization
 
-We do our best to review PRs and RFCs as they are sent, but it is difficult to keep up. We welcome help in reviewing PRs, RFCs, and issues. If an item aligns with the current priority on our [roadmap](https://svelte.dev/roadmap), it is more likely to be reviewed quickly. PRs to the most important and active ones repositories get reviewed more quickly while PRs to smaller inactive repos may sit for a bit before we periodically come by and review the pending PRs in a batch.
+We do our best to review PRs and RFCs as they are sent, but it is difficult to keep up. We welcome help in reviewing PRs, RFCs, and issues. If an item aligns with the current priority on our [roadmap](https://svelte.dev/roadmap), it is more likely to be reviewed quickly. PRs to the most important and active repositories get reviewed more quickly while PRs to smaller inactive repos may sit for a bit before we periodically come by and review the pending PRs in a batch.
 
 ## Bugs
 
@@ -51,7 +51,7 @@ We use [GitHub issues](https://github.com/sveltejs/svelte/issues) for our public
 
 If you have questions about using Svelte, contact us on Discord at [svelte.dev/chat](https://svelte.dev/chat), and we will do our best to answer your questions.
 
-If you see anything you'd like to be implemented, create a [feature request issue](https://github.com/sveltejs/svelte/issues/new?template=feature_request.yml)
+If you see anything you'd like to be implemented, create a [feature request issue](https://github.com/sveltejs/svelte/issues/new?template=feature_request.yml).
 
 ### Reporting new issues
 
@@ -62,8 +62,6 @@ When [opening a new issue](https://github.com/sveltejs/svelte/issues/new/choose)
 
 ## Pull requests
 
-> HEADS UP: Svelte 5 will likely change a lot on the compiler. For that reason, please don't open PRs that are large in scope, touch more than a couple of files etc. In other words, bug fixes are fine, but big feature PRs will likely not be merged.
-
 ### Proposing a change
 
 If you would like to request a new feature or enhancement but are not yet thinking about opening a pull request, you can also file an issue with [feature template](https://github.com/sveltejs/svelte/issues/new?template=feature_request.yml).
@@ -92,9 +90,9 @@ A good test plan has the exact commands you ran and their output, provides scree
 
 #### Writing tests
 
-All tests are located in `/test` folder.
+All tests are located in the `/tests` folder.
 
-Test samples are kept in `/test/xxx/samples` folder.
+Test samples are kept in `/tests/xxx/samples` folders.
 
 #### Running tests
 
@@ -103,14 +101,14 @@ Test samples are kept in `/test/xxx/samples` folder.
 1. To run test, run `pnpm test`.
 1. To run a particular test suite, use `pnpm test <suite-name>`, for example:
 
-   ```bash
+   ```sh
    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
+   ```sh
+   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/LICENSE.md b/LICENSE.md
index e2a8b89fa4..f872adf738 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -1,4 +1,4 @@
-Copyright (c) 2016-24 [these people](https://github.com/sveltejs/svelte/graphs/contributors)
+Copyright (c) 2016-2025 [Svelte Contributors](https://github.com/sveltejs/svelte/graphs/contributors)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
diff --git a/README.md b/README.md
index be94cba63c..7ea7164752 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,11 @@
-[![Cybernetically enhanced web apps: Svelte](https://sveltejs.github.io/assets/banner.png)](https://svelte.dev)
+<a href="https://svelte.dev">
+	<picture>
+		<source media="(prefers-color-scheme: dark)" srcset="assets/banner_dark.png">
+		<img src="assets/banner.png" alt="Svelte - web development for the rest of us" />
+	</picture>
+</a>
 
-[![license](https://img.shields.io/npm/l/svelte.svg)](LICENSE.md) [![Chat](https://img.shields.io/discord/457912077277855764?label=chat&logo=discord)](https://svelte.dev/chat)
+[![License](https://img.shields.io/npm/l/svelte.svg)](LICENSE.md) [![Chat](https://img.shields.io/discord/457912077277855764?label=chat&logo=discord)](https://svelte.dev/chat)
 
 ## What is Svelte?
 
@@ -24,10 +29,6 @@ You may view [our roadmap](https://svelte.dev/roadmap) if you'd like to see what
 
 Please see the [Contributing Guide](CONTRIBUTING.md) and the [`svelte`](packages/svelte) package for information on contributing to Svelte.
 
-### svelte.dev
-
-The source code for https://svelte.dev lives in the [sites](https://github.com/sveltejs/svelte/tree/master/sites/svelte.dev) folder, with all the documentation right [here](https://github.com/sveltejs/svelte/tree/master/documentation). The site is built with [SvelteKit](https://svelte.dev/docs/kit).
-
 ## Is svelte.dev down?
 
 Probably not, but it's possible. If you can't seem to access any `.dev` sites, check out [this SuperUser question and answer](https://superuser.com/q/1413402).
diff --git a/assets/banner.png b/assets/banner.png
new file mode 100644
index 0000000000..3428b278bf
Binary files /dev/null and b/assets/banner.png differ
diff --git a/assets/banner_dark.png b/assets/banner_dark.png
new file mode 100644
index 0000000000..1adba40d8e
Binary files /dev/null and b/assets/banner_dark.png differ
diff --git a/benchmarking/benchmarks/reactivity/index.js b/benchmarking/benchmarks/reactivity/index.js
index 58b3f5cb29..3fe9639376 100644
--- a/benchmarking/benchmarks/reactivity/index.js
+++ b/benchmarking/benchmarks/reactivity/index.js
@@ -1,12 +1,6 @@
-import { kairo_avoidable_owned, kairo_avoidable_unowned } from './kairo/kairo_avoidable.js';
-import { kairo_broad_owned, kairo_broad_unowned } from './kairo/kairo_broad.js';
-import { kairo_deep_owned, kairo_deep_unowned } from './kairo/kairo_deep.js';
-import { kairo_diamond_owned, kairo_diamond_unowned } from './kairo/kairo_diamond.js';
-import { kairo_mux_unowned, kairo_mux_owned } from './kairo/kairo_mux.js';
-import { kairo_repeated_unowned, kairo_repeated_owned } from './kairo/kairo_repeated.js';
-import { kairo_triangle_owned, kairo_triangle_unowned } from './kairo/kairo_triangle.js';
-import { kairo_unstable_owned, kairo_unstable_unowned } from './kairo/kairo_unstable.js';
-import { mol_bench_owned, mol_bench_unowned } from './mol_bench.js';
+import fs from 'node:fs';
+import path from 'node:path';
+import 'svelte/internal/flags/async';
 import {
 	sbench_create_0to1,
 	sbench_create_1000to1,
@@ -19,10 +13,14 @@ import {
 	sbench_create_4to1,
 	sbench_create_signals
 } from './sbench.js';
+import { fileURLToPath } from 'node:url';
+import { create_test } from './util.js';
 
 // This benchmark has been adapted from the js-reactivity-benchmark (https://github.com/milomg/js-reactivity-benchmark)
 // Not all tests are the same, and many parts have been tweaked to capture different data.
 
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+
 export const reactivity_benchmarks = [
 	sbench_create_signals,
 	sbench_create_0to1,
@@ -33,23 +31,16 @@ export const reactivity_benchmarks = [
 	sbench_create_1to2,
 	sbench_create_1to4,
 	sbench_create_1to8,
-	sbench_create_1to1000,
-	kairo_avoidable_owned,
-	kairo_avoidable_unowned,
-	kairo_broad_owned,
-	kairo_broad_unowned,
-	kairo_deep_owned,
-	kairo_deep_unowned,
-	kairo_diamond_owned,
-	kairo_diamond_unowned,
-	kairo_triangle_owned,
-	kairo_triangle_unowned,
-	kairo_mux_owned,
-	kairo_mux_unowned,
-	kairo_repeated_owned,
-	kairo_repeated_unowned,
-	kairo_unstable_owned,
-	kairo_unstable_unowned,
-	mol_bench_owned,
-	mol_bench_unowned
+	sbench_create_1to1000
 ];
+
+for (const file of fs.readdirSync(`${dirname}/tests`)) {
+	if (!file.includes('.bench.')) continue;
+
+	const name = file.replace('.bench.js', '');
+
+	const module = await import(`${dirname}/tests/${file}`);
+	const { owned, unowned } = create_test(name, module.default);
+
+	reactivity_benchmarks.push(owned, unowned);
+}
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_avoidable.js b/benchmarking/benchmarks/reactivity/kairo/kairo_avoidable.js
deleted file mode 100644
index 1237547ebe..0000000000
--- a/benchmarking/benchmarks/reactivity/kairo/kairo_avoidable.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import { assert, fastest_test } from '../../../utils.js';
-import * as $ from 'svelte/internal/client';
-import { busy } from './util.js';
-
-function setup() {
-	let head = $.state(0);
-	let computed1 = $.derived(() => $.get(head));
-	let computed2 = $.derived(() => ($.get(computed1), 0));
-	let computed3 = $.derived(() => (busy(), $.get(computed2) + 1)); // heavy computation
-	let computed4 = $.derived(() => $.get(computed3) + 2);
-	let computed5 = $.derived(() => $.get(computed4) + 3);
-
-	const destroy = $.effect_root(() => {
-		$.render_effect(() => {
-			$.get(computed5);
-			busy(); // heavy side effect
-		});
-	});
-
-	return {
-		destroy,
-		run() {
-			$.flush_sync(() => {
-				$.set(head, 1);
-			});
-			assert($.get(computed5) === 6);
-			for (let i = 0; i < 1000; i++) {
-				$.flush_sync(() => {
-					$.set(head, i);
-				});
-				assert($.get(computed5) === 6);
-			}
-		}
-	};
-}
-
-export async function kairo_avoidable_unowned() {
-	// Do 10 loops to warm up JIT
-	for (let i = 0; i < 10; i++) {
-		const { run, destroy } = setup();
-		run();
-		destroy();
-	}
-
-	const { run, destroy } = setup();
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 100; i++) {
-			run();
-		}
-	});
-
-	destroy();
-
-	return {
-		benchmark: 'kairo_avoidable_unowned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function kairo_avoidable_owned() {
-	let run, destroy;
-
-	const destroy_owned = $.effect_root(() => {
-		// Do 10 loops to warm up JIT
-		for (let i = 0; i < 10; i++) {
-			const { run, destroy } = setup();
-			run();
-			destroy();
-		}
-
-		({ run, destroy } = setup());
-	});
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 100; i++) {
-			run();
-		}
-	});
-
-	// @ts-ignore
-	destroy();
-	destroy_owned();
-
-	return {
-		benchmark: 'kairo_avoidable_owned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_broad.js b/benchmarking/benchmarks/reactivity/kairo/kairo_broad.js
deleted file mode 100644
index 8148a743ea..0000000000
--- a/benchmarking/benchmarks/reactivity/kairo/kairo_broad.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import { assert, fastest_test } from '../../../utils.js';
-import * as $ from 'svelte/internal/client';
-
-function setup() {
-	let head = $.state(0);
-	let last = head;
-	let counter = 0;
-
-	const destroy = $.effect_root(() => {
-		for (let i = 0; i < 50; i++) {
-			let current = $.derived(() => {
-				return $.get(head) + i;
-			});
-			let current2 = $.derived(() => {
-				return $.get(current) + 1;
-			});
-			$.render_effect(() => {
-				$.get(current2);
-				counter++;
-			});
-			last = current2;
-		}
-	});
-
-	return {
-		destroy,
-		run() {
-			$.flush_sync(() => {
-				$.set(head, 1);
-			});
-			counter = 0;
-			for (let i = 0; i < 50; i++) {
-				$.flush_sync(() => {
-					$.set(head, i);
-				});
-				assert($.get(last) === i + 50);
-			}
-			assert(counter === 50 * 50);
-		}
-	};
-}
-
-export async function kairo_broad_unowned() {
-	// Do 10 loops to warm up JIT
-	for (let i = 0; i < 10; i++) {
-		const { run, destroy } = setup();
-		run();
-		destroy();
-	}
-
-	const { run, destroy } = setup();
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 100; i++) {
-			run();
-		}
-	});
-
-	destroy();
-
-	return {
-		benchmark: 'kairo_broad_unowned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function kairo_broad_owned() {
-	let run, destroy;
-
-	const destroy_owned = $.effect_root(() => {
-		// Do 10 loops to warm up JIT
-		for (let i = 0; i < 10; i++) {
-			const { run, destroy } = setup();
-			run();
-			destroy();
-		}
-
-		({ run, destroy } = setup());
-	});
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 100; i++) {
-			run();
-		}
-	});
-
-	// @ts-ignore
-	destroy();
-	destroy_owned();
-
-	return {
-		benchmark: 'kairo_broad_owned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_deep.js b/benchmarking/benchmarks/reactivity/kairo/kairo_deep.js
deleted file mode 100644
index 806042cc72..0000000000
--- a/benchmarking/benchmarks/reactivity/kairo/kairo_deep.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import { assert, fastest_test } from '../../../utils.js';
-import * as $ from 'svelte/internal/client';
-
-let len = 50;
-const iter = 50;
-
-function setup() {
-	let head = $.state(0);
-	let current = head;
-	for (let i = 0; i < len; i++) {
-		let c = current;
-		current = $.derived(() => {
-			return $.get(c) + 1;
-		});
-	}
-	let counter = 0;
-
-	const destroy = $.effect_root(() => {
-		$.render_effect(() => {
-			$.get(current);
-			counter++;
-		});
-	});
-
-	return {
-		destroy,
-		run() {
-			$.flush_sync(() => {
-				$.set(head, 1);
-			});
-			counter = 0;
-			for (let i = 0; i < iter; i++) {
-				$.flush_sync(() => {
-					$.set(head, i);
-				});
-				assert($.get(current) === len + i);
-			}
-			assert(counter === iter);
-		}
-	};
-}
-
-export async function kairo_deep_unowned() {
-	// Do 10 loops to warm up JIT
-	for (let i = 0; i < 10; i++) {
-		const { run, destroy } = setup();
-		run();
-		destroy();
-	}
-
-	const { run, destroy } = setup();
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 100; i++) {
-			run();
-		}
-	});
-
-	destroy();
-
-	return {
-		benchmark: 'kairo_deep_unowned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function kairo_deep_owned() {
-	let run, destroy;
-
-	const destroy_owned = $.effect_root(() => {
-		// Do 10 loops to warm up JIT
-		for (let i = 0; i < 10; i++) {
-			const { run, destroy } = setup();
-			run();
-			destroy();
-		}
-
-		({ run, destroy } = setup());
-	});
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 100; i++) {
-			run();
-		}
-	});
-
-	// @ts-ignore
-	destroy();
-	destroy_owned();
-
-	return {
-		benchmark: 'kairo_deep_owned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_diamond.js b/benchmarking/benchmarks/reactivity/kairo/kairo_diamond.js
deleted file mode 100644
index deb9482de9..0000000000
--- a/benchmarking/benchmarks/reactivity/kairo/kairo_diamond.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import { assert, fastest_test } from '../../../utils.js';
-import * as $ from 'svelte/internal/client';
-
-let width = 5;
-
-function setup() {
-	let head = $.state(0);
-	let current = [];
-	for (let i = 0; i < width; i++) {
-		current.push(
-			$.derived(() => {
-				return $.get(head) + 1;
-			})
-		);
-	}
-	let sum = $.derived(() => {
-		return current.map((x) => $.get(x)).reduce((a, b) => a + b, 0);
-	});
-	let counter = 0;
-
-	const destroy = $.effect_root(() => {
-		$.render_effect(() => {
-			$.get(sum);
-			counter++;
-		});
-	});
-
-	return {
-		destroy,
-		run() {
-			$.flush_sync(() => {
-				$.set(head, 1);
-			});
-			assert($.get(sum) === 2 * width);
-			counter = 0;
-			for (let i = 0; i < 500; i++) {
-				$.flush_sync(() => {
-					$.set(head, i);
-				});
-				assert($.get(sum) === (i + 1) * width);
-			}
-			assert(counter === 500);
-		}
-	};
-}
-
-export async function kairo_diamond_unowned() {
-	// Do 10 loops to warm up JIT
-	for (let i = 0; i < 10; i++) {
-		const { run, destroy } = setup();
-		run();
-		destroy();
-	}
-
-	const { run, destroy } = setup();
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 100; i++) {
-			run();
-		}
-	});
-
-	destroy();
-
-	return {
-		benchmark: 'kairo_diamond_unowned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function kairo_diamond_owned() {
-	let run, destroy;
-
-	const destroy_owned = $.effect_root(() => {
-		// Do 10 loops to warm up JIT
-		for (let i = 0; i < 10; i++) {
-			const { run, destroy } = setup();
-			run();
-			destroy();
-		}
-
-		({ run, destroy } = setup());
-	});
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 100; i++) {
-			run();
-		}
-	});
-
-	// @ts-ignore
-	destroy();
-	destroy_owned();
-
-	return {
-		benchmark: 'kairo_diamond_owned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_mux.js b/benchmarking/benchmarks/reactivity/kairo/kairo_mux.js
deleted file mode 100644
index 8eafacc9eb..0000000000
--- a/benchmarking/benchmarks/reactivity/kairo/kairo_mux.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import { assert, fastest_test } from '../../../utils.js';
-import * as $ from 'svelte/internal/client';
-
-function setup() {
-	let heads = new Array(100).fill(null).map((_) => $.state(0));
-	const mux = $.derived(() => {
-		return Object.fromEntries(heads.map((h) => $.get(h)).entries());
-	});
-	const splited = heads
-		.map((_, index) => $.derived(() => $.get(mux)[index]))
-		.map((x) => $.derived(() => $.get(x) + 1));
-
-	const destroy = $.effect_root(() => {
-		splited.forEach((x) => {
-			$.render_effect(() => {
-				$.get(x);
-			});
-		});
-	});
-
-	return {
-		destroy,
-		run() {
-			for (let i = 0; i < 10; i++) {
-				$.flush_sync(() => {
-					$.set(heads[i], i);
-				});
-				assert($.get(splited[i]) === i + 1);
-			}
-			for (let i = 0; i < 10; i++) {
-				$.flush_sync(() => {
-					$.set(heads[i], i * 2);
-				});
-				assert($.get(splited[i]) === i * 2 + 1);
-			}
-		}
-	};
-}
-
-export async function kairo_mux_unowned() {
-	// Do 10 loops to warm up JIT
-	for (let i = 0; i < 10; i++) {
-		const { run, destroy } = setup();
-		run();
-		destroy();
-	}
-
-	const { run, destroy } = setup();
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 100; i++) {
-			run();
-		}
-	});
-
-	destroy();
-
-	return {
-		benchmark: 'kairo_mux_unowned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function kairo_mux_owned() {
-	let run, destroy;
-
-	const destroy_owned = $.effect_root(() => {
-		// Do 10 loops to warm up JIT
-		for (let i = 0; i < 10; i++) {
-			const { run, destroy } = setup();
-			run();
-			destroy();
-		}
-
-		({ run, destroy } = setup());
-	});
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 100; i++) {
-			run();
-		}
-	});
-
-	// @ts-ignore
-	destroy();
-	destroy_owned();
-
-	return {
-		benchmark: 'kairo_mux_owned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_repeated.js b/benchmarking/benchmarks/reactivity/kairo/kairo_repeated.js
deleted file mode 100644
index 2bddf879c9..0000000000
--- a/benchmarking/benchmarks/reactivity/kairo/kairo_repeated.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import { assert, fastest_test } from '../../../utils.js';
-import * as $ from 'svelte/internal/client';
-
-let size = 30;
-
-function setup() {
-	let head = $.state(0);
-	let current = $.derived(() => {
-		let result = 0;
-		for (let i = 0; i < size; i++) {
-			result += $.get(head);
-		}
-		return result;
-	});
-
-	let counter = 0;
-
-	const destroy = $.effect_root(() => {
-		$.render_effect(() => {
-			$.get(current);
-			counter++;
-		});
-	});
-
-	return {
-		destroy,
-		run() {
-			$.flush_sync(() => {
-				$.set(head, 1);
-			});
-			assert($.get(current) === size);
-			counter = 0;
-			for (let i = 0; i < 100; i++) {
-				$.flush_sync(() => {
-					$.set(head, i);
-				});
-				assert($.get(current) === i * size);
-			}
-			assert(counter === 100);
-		}
-	};
-}
-
-export async function kairo_repeated_unowned() {
-	// Do 10 loops to warm up JIT
-	for (let i = 0; i < 10; i++) {
-		const { run, destroy } = setup();
-		run();
-		destroy();
-	}
-
-	const { run, destroy } = setup();
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 100; i++) {
-			run();
-		}
-	});
-
-	destroy();
-
-	return {
-		benchmark: 'kairo_repeated_unowned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function kairo_repeated_owned() {
-	let run, destroy;
-
-	const destroy_owned = $.effect_root(() => {
-		// Do 10 loops to warm up JIT
-		for (let i = 0; i < 10; i++) {
-			const { run, destroy } = setup();
-			run();
-			destroy();
-		}
-
-		({ run, destroy } = setup());
-	});
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 100; i++) {
-			run();
-		}
-	});
-
-	// @ts-ignore
-	destroy();
-	destroy_owned();
-
-	return {
-		benchmark: 'kairo_repeated_owned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_triangle.js b/benchmarking/benchmarks/reactivity/kairo/kairo_triangle.js
deleted file mode 100644
index 9d99b7815b..0000000000
--- a/benchmarking/benchmarks/reactivity/kairo/kairo_triangle.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import { assert, fastest_test } from '../../../utils.js';
-import * as $ from 'svelte/internal/client';
-
-let width = 10;
-
-function count(number) {
-	return new Array(number)
-		.fill(0)
-		.map((_, i) => i + 1)
-		.reduce((x, y) => x + y, 0);
-}
-
-function setup() {
-	let head = $.state(0);
-	let current = head;
-	let list = [];
-	for (let i = 0; i < width; i++) {
-		let c = current;
-		list.push(current);
-		current = $.derived(() => {
-			return $.get(c) + 1;
-		});
-	}
-	let sum = $.derived(() => {
-		return list.map((x) => $.get(x)).reduce((a, b) => a + b, 0);
-	});
-
-	let counter = 0;
-
-	const destroy = $.effect_root(() => {
-		$.render_effect(() => {
-			$.get(sum);
-			counter++;
-		});
-	});
-
-	return {
-		destroy,
-		run() {
-			const constant = count(width);
-			$.flush_sync(() => {
-				$.set(head, 1);
-			});
-			assert($.get(sum) === constant);
-			counter = 0;
-			for (let i = 0; i < 100; i++) {
-				$.flush_sync(() => {
-					$.set(head, i);
-				});
-				assert($.get(sum) === constant - width + i * width);
-			}
-			assert(counter === 100);
-		}
-	};
-}
-
-export async function kairo_triangle_unowned() {
-	// Do 10 loops to warm up JIT
-	for (let i = 0; i < 10; i++) {
-		const { run, destroy } = setup();
-		run();
-		destroy();
-	}
-
-	const { run, destroy } = setup();
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 100; i++) {
-			run();
-		}
-	});
-
-	destroy();
-
-	return {
-		benchmark: 'kairo_triangle_unowned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function kairo_triangle_owned() {
-	let run, destroy;
-
-	const destroy_owned = $.effect_root(() => {
-		// Do 10 loops to warm up JIT
-		for (let i = 0; i < 10; i++) {
-			const { run, destroy } = setup();
-			run();
-			destroy();
-		}
-
-		({ run, destroy } = setup());
-	});
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 100; i++) {
-			run();
-		}
-	});
-
-	// @ts-ignore
-	destroy();
-	destroy_owned();
-
-	return {
-		benchmark: 'kairo_triangle_owned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
diff --git a/benchmarking/benchmarks/reactivity/kairo/kairo_unstable.js b/benchmarking/benchmarks/reactivity/kairo/kairo_unstable.js
deleted file mode 100644
index c30c007561..0000000000
--- a/benchmarking/benchmarks/reactivity/kairo/kairo_unstable.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import { assert, fastest_test } from '../../../utils.js';
-import * as $ from 'svelte/internal/client';
-
-function setup() {
-	let head = $.state(0);
-	const double = $.derived(() => $.get(head) * 2);
-	const inverse = $.derived(() => -$.get(head));
-	let current = $.derived(() => {
-		let result = 0;
-		for (let i = 0; i < 20; i++) {
-			result += $.get(head) % 2 ? $.get(double) : $.get(inverse);
-		}
-		return result;
-	});
-
-	let counter = 0;
-
-	const destroy = $.effect_root(() => {
-		$.render_effect(() => {
-			$.get(current);
-			counter++;
-		});
-	});
-
-	return {
-		destroy,
-		run() {
-			$.flush_sync(() => {
-				$.set(head, 1);
-			});
-			assert($.get(current) === 40);
-			counter = 0;
-			for (let i = 0; i < 100; i++) {
-				$.flush_sync(() => {
-					$.set(head, i);
-				});
-			}
-			assert(counter === 100);
-		}
-	};
-}
-
-export async function kairo_unstable_unowned() {
-	// Do 10 loops to warm up JIT
-	for (let i = 0; i < 10; i++) {
-		const { run, destroy } = setup();
-		run();
-		destroy();
-	}
-
-	const { run, destroy } = setup();
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 100; i++) {
-			run();
-		}
-	});
-
-	destroy();
-
-	return {
-		benchmark: 'kairo_unstable_unowned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function kairo_unstable_owned() {
-	let run, destroy;
-
-	const destroy_owned = $.effect_root(() => {
-		// Do 10 loops to warm up JIT
-		for (let i = 0; i < 10; i++) {
-			const { run, destroy } = setup();
-			run();
-			destroy();
-		}
-
-		({ run, destroy } = setup());
-	});
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 100; i++) {
-			run();
-		}
-	});
-
-	// @ts-ignore
-	destroy();
-	destroy_owned();
-
-	return {
-		benchmark: 'kairo_unstable_owned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
diff --git a/benchmarking/benchmarks/reactivity/kairo/util.js b/benchmarking/benchmarks/reactivity/kairo/util.js
deleted file mode 100644
index 75e3641ab9..0000000000
--- a/benchmarking/benchmarks/reactivity/kairo/util.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export function busy() {
-	let a = 0;
-	for (let i = 0; i < 1_00; i++) {
-		a++;
-	}
-}
diff --git a/benchmarking/benchmarks/reactivity/sbench.js b/benchmarking/benchmarks/reactivity/sbench.js
index ddeaef2514..e197f970c8 100644
--- a/benchmarking/benchmarks/reactivity/sbench.js
+++ b/benchmarking/benchmarks/reactivity/sbench.js
@@ -1,3 +1,4 @@
+/** @import { Source } from '../../../packages/svelte/src/internal/client/types.js' */
 import { fastest_test } from '../../utils.js';
 import * as $ from '../../../packages/svelte/src/internal/client/index.js';
 
@@ -7,360 +8,177 @@ const COUNT = 1e5;
  * @param {number} n
  * @param {any[]} sources
  */
-function create_data_signals(n, sources) {
+function create_sources(n, sources) {
 	for (let i = 0; i < n; i++) {
 		sources[i] = $.state(i);
 	}
+
 	return sources;
 }
 
 /**
- * @param {number} i
+ * @param {Source<number>} source
  */
-function create_computation_0(i) {
-	$.derived(() => i);
+function create_derived(source) {
+	$.derived(() => $.get(source));
 }
 
 /**
- * @param {any} s1
- */
-function create_computation_1(s1) {
-	$.derived(() => $.get(s1));
-}
-/**
- * @param {any} s1
- * @param {any} s2
+ *
+ * @param {string} label
+ * @param {(n: number, sources: Array<Source<number>>) => void} fn
+ * @param {number} count
+ * @param {number} num_sources
  */
-function create_computation_2(s1, s2) {
-	$.derived(() => $.get(s1) + $.get(s2));
-}
+function create_sbench_test(label, count, num_sources, fn) {
+	return {
+		label,
+		fn: async () => {
+			// Do 3 loops to warm up JIT
+			for (let i = 0; i < 3; i++) {
+				fn(count, create_sources(num_sources, []));
+			}
 
-function create_computation_1000(ss, offset) {
-	$.derived(() => {
-		let sum = 0;
-		for (let i = 0; i < 1000; i++) {
-			sum += $.get(ss[offset + i]);
+			return await fastest_test(10, () => {
+				const destroy = $.effect_root(() => {
+					for (let i = 0; i < 10; i++) {
+						fn(count, create_sources(num_sources, []));
+					}
+				});
+				destroy();
+			});
 		}
-		return sum;
-	});
+	};
 }
 
-/**
- * @param {number} n
- */
-function create_computations_0to1(n) {
-	for (let i = 0; i < n; i++) {
-		create_computation_0(i);
-	}
-}
+export const sbench_create_signals = create_sbench_test(
+	'sbench_create_signals',
+	COUNT,
+	COUNT,
+	create_sources
+);
 
-/**
- * @param {number} n
- * @param {any[]} sources
- */
-function create_computations_1to1(n, sources) {
-	for (let i = 0; i < n; i++) {
-		const source = sources[i];
-		create_computation_1(source);
-	}
-}
-
-/**
- * @param {number} n
- * @param {any[]} sources
- */
-function create_computations_2to1(n, sources) {
+export const sbench_create_0to1 = create_sbench_test('sbench_create_0to1', COUNT, 0, (n) => {
 	for (let i = 0; i < n; i++) {
-		create_computation_2(sources[i * 2], sources[i * 2 + 1]);
+		$.derived(() => i);
 	}
-}
-
-function create_computation_4(s1, s2, s3, s4) {
-	$.derived(() => $.get(s1) + $.get(s2) + $.get(s3) + $.get(s4));
-}
+});
 
-function create_computations_1000to1(n, sources) {
-	for (let i = 0; i < n; i++) {
-		create_computation_1000(sources, i * 1000);
-	}
-}
-
-function create_computations_1to2(n, sources) {
-	for (let i = 0; i < n / 2; i++) {
-		const source = sources[i];
-		create_computation_1(source);
-		create_computation_1(source);
-	}
-}
-
-function create_computations_1to4(n, sources) {
-	for (let i = 0; i < n / 4; i++) {
-		const source = sources[i];
-		create_computation_1(source);
-		create_computation_1(source);
-		create_computation_1(source);
-		create_computation_1(source);
-	}
-}
-
-function create_computations_1to8(n, sources) {
-	for (let i = 0; i < n / 8; i++) {
-		const source = sources[i];
-		create_computation_1(source);
-		create_computation_1(source);
-		create_computation_1(source);
-		create_computation_1(source);
-		create_computation_1(source);
-		create_computation_1(source);
-		create_computation_1(source);
-		create_computation_1(source);
-	}
-}
-
-function create_computations_1to1000(n, sources) {
-	for (let i = 0; i < n / 1000; i++) {
-		const source = sources[i];
-		for (let j = 0; j < 1000; j++) {
-			create_computation_1(source);
+export const sbench_create_1to1 = create_sbench_test(
+	'sbench_create_1to1',
+	COUNT,
+	COUNT,
+	(n, sources) => {
+		for (let i = 0; i < n; i++) {
+			create_derived(sources[i]);
 		}
 	}
-}
-
-function create_computations_4to1(n, sources) {
-	for (let i = 0; i < n; i++) {
-		create_computation_4(
-			sources[i * 4],
-			sources[i * 4 + 1],
-			sources[i * 4 + 2],
-			sources[i * 4 + 3]
-		);
-	}
-}
-
-/**
- * @param {any} fn
- * @param {number} count
- * @param {number} scount
- */
-function bench(fn, count, scount) {
-	let sources = create_data_signals(scount, []);
-
-	fn(count, sources);
-}
-
-export async function sbench_create_signals() {
-	// Do 3 loops to warm up JIT
-	for (let i = 0; i < 3; i++) {
-		bench(create_data_signals, COUNT, COUNT);
-	}
+);
 
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 100; i++) {
-			bench(create_data_signals, COUNT, COUNT);
+export const sbench_create_2to1 = create_sbench_test(
+	'sbench_create_2to1',
+	COUNT / 2,
+	COUNT,
+	(n, sources) => {
+		for (let i = 0; i < n; i++) {
+			$.derived(() => $.get(sources[i * 2]) + $.get(sources[i * 2 + 1]));
 		}
-	});
-
-	return {
-		benchmark: 'sbench_create_signals',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function sbench_create_0to1() {
-	// Do 3 loops to warm up JIT
-	for (let i = 0; i < 3; i++) {
-		bench(create_computations_0to1, COUNT, 0);
-	}
-
-	const { timing } = await fastest_test(10, () => {
-		const destroy = $.effect_root(() => {
-			for (let i = 0; i < 10; i++) {
-				bench(create_computations_0to1, COUNT, 0);
-			}
-		});
-		destroy();
-	});
-
-	return {
-		benchmark: 'sbench_create_0to1',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function sbench_create_1to1() {
-	// Do 3 loops to warm up JIT
-	for (let i = 0; i < 3; i++) {
-		bench(create_computations_1to1, COUNT, COUNT);
 	}
-
-	const { timing } = await fastest_test(10, () => {
-		const destroy = $.effect_root(() => {
-			for (let i = 0; i < 10; i++) {
-				bench(create_computations_1to1, COUNT, COUNT);
-			}
-		});
-		destroy();
-	});
-
-	return {
-		benchmark: 'sbench_create_1to1',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function sbench_create_2to1() {
-	// Do 3 loops to warm up JIT
-	for (let i = 0; i < 3; i++) {
-		bench(create_computations_2to1, COUNT / 2, COUNT);
-	}
-
-	const { timing } = await fastest_test(10, () => {
-		const destroy = $.effect_root(() => {
-			for (let i = 0; i < 10; i++) {
-				bench(create_computations_2to1, COUNT / 2, COUNT);
-			}
-		});
-		destroy();
-	});
-
-	return {
-		benchmark: 'sbench_create_2to1',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function sbench_create_4to1() {
-	// Do 3 loops to warm up JIT
-	for (let i = 0; i < 3; i++) {
-		bench(create_computations_4to1, COUNT / 4, COUNT);
+);
+
+export const sbench_create_4to1 = create_sbench_test(
+	'sbench_create_4to1',
+	COUNT / 4,
+	COUNT,
+	(n, sources) => {
+		for (let i = 0; i < n; i++) {
+			$.derived(
+				() =>
+					$.get(sources[i * 4]) +
+					$.get(sources[i * 4 + 1]) +
+					$.get(sources[i * 4 + 2]) +
+					$.get(sources[i * 4 + 3])
+			);
+		}
 	}
-
-	const { timing } = await fastest_test(10, () => {
-		const destroy = $.effect_root(() => {
-			for (let i = 0; i < 10; i++) {
-				bench(create_computations_4to1, COUNT / 4, COUNT);
-			}
-		});
-		destroy();
-	});
-
-	return {
-		benchmark: 'sbench_create_4to1',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function sbench_create_1000to1() {
-	// Do 3 loops to warm up JIT
-	for (let i = 0; i < 3; i++) {
-		bench(create_computations_1000to1, COUNT / 1000, COUNT);
+);
+
+export const sbench_create_1000to1 = create_sbench_test(
+	'sbench_create_1000to1',
+	COUNT / 1000,
+	COUNT,
+	(n, sources) => {
+		for (let i = 0; i < n; i++) {
+			const offset = i * 1000;
+
+			$.derived(() => {
+				let sum = 0;
+				for (let i = 0; i < 1000; i++) {
+					sum += $.get(sources[offset + i]);
+				}
+				return sum;
+			});
+		}
 	}
-
-	const { timing } = await fastest_test(10, () => {
-		const destroy = $.effect_root(() => {
-			for (let i = 0; i < 10; i++) {
-				bench(create_computations_1000to1, COUNT / 1000, COUNT);
-			}
-		});
-		destroy();
-	});
-
-	return {
-		benchmark: 'sbench_create_1000to1',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function sbench_create_1to2() {
-	// Do 3 loops to warm up JIT
-	for (let i = 0; i < 3; i++) {
-		bench(create_computations_1to2, COUNT, COUNT / 2);
+);
+
+export const sbench_create_1to2 = create_sbench_test(
+	'sbench_create_1to2',
+	COUNT,
+	COUNT / 2,
+	(n, sources) => {
+		for (let i = 0; i < n / 2; i++) {
+			const source = sources[i];
+			create_derived(source);
+			create_derived(source);
+		}
 	}
-
-	const { timing } = await fastest_test(10, () => {
-		const destroy = $.effect_root(() => {
-			for (let i = 0; i < 10; i++) {
-				bench(create_computations_1to2, COUNT, COUNT / 2);
-			}
-		});
-		destroy();
-	});
-
-	return {
-		benchmark: 'sbench_create_1to2',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function sbench_create_1to4() {
-	// Do 3 loops to warm up JIT
-	for (let i = 0; i < 3; i++) {
-		bench(create_computations_1to4, COUNT, COUNT / 4);
+);
+
+export const sbench_create_1to4 = create_sbench_test(
+	'sbench_create_1to4',
+	COUNT,
+	COUNT / 4,
+	(n, sources) => {
+		for (let i = 0; i < n / 4; i++) {
+			const source = sources[i];
+			create_derived(source);
+			create_derived(source);
+			create_derived(source);
+			create_derived(source);
+		}
 	}
-
-	const { timing } = await fastest_test(10, () => {
-		const destroy = $.effect_root(() => {
-			for (let i = 0; i < 10; i++) {
-				bench(create_computations_1to4, COUNT, COUNT / 4);
-			}
-		});
-		destroy();
-	});
-
-	return {
-		benchmark: 'sbench_create_1to4',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function sbench_create_1to8() {
-	// Do 3 loops to warm up JIT
-	for (let i = 0; i < 3; i++) {
-		bench(create_computations_1to8, COUNT, COUNT / 8);
+);
+
+export const sbench_create_1to8 = create_sbench_test(
+	'sbench_create_1to8',
+	COUNT,
+	COUNT / 8,
+	(n, sources) => {
+		for (let i = 0; i < n / 8; i++) {
+			const source = sources[i];
+			create_derived(source);
+			create_derived(source);
+			create_derived(source);
+			create_derived(source);
+			create_derived(source);
+			create_derived(source);
+			create_derived(source);
+			create_derived(source);
+		}
 	}
-
-	const { timing } = await fastest_test(10, () => {
-		const destroy = $.effect_root(() => {
-			for (let i = 0; i < 10; i++) {
-				bench(create_computations_1to8, COUNT, COUNT / 8);
+);
+
+export const sbench_create_1to1000 = create_sbench_test(
+	'sbench_create_1to1000',
+	COUNT,
+	COUNT / 1000,
+	(n, sources) => {
+		for (let i = 0; i < n / 1000; i++) {
+			const source = sources[i];
+			for (let j = 0; j < 1000; j++) {
+				create_derived(source);
 			}
-		});
-		destroy();
-	});
-
-	return {
-		benchmark: 'sbench_create_1to8',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function sbench_create_1to1000() {
-	// Do 3 loops to warm up JIT
-	for (let i = 0; i < 3; i++) {
-		bench(create_computations_1to1000, COUNT, COUNT / 1000);
+		}
 	}
-
-	const { timing } = await fastest_test(10, () => {
-		const destroy = $.effect_root(() => {
-			for (let i = 0; i < 10; i++) {
-				bench(create_computations_1to1000, COUNT, COUNT / 1000);
-			}
-		});
-		destroy();
-	});
-
-	return {
-		benchmark: 'sbench_create_1to1000',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
+);
diff --git a/benchmarking/benchmarks/reactivity/tests/clean_effects.bench.js b/benchmarking/benchmarks/reactivity/tests/clean_effects.bench.js
new file mode 100644
index 0000000000..a617554f1b
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/tests/clean_effects.bench.js
@@ -0,0 +1,32 @@
+import assert from 'node:assert';
+import * as $ from 'svelte/internal/client';
+
+export default () => {
+	const a = $.state(1);
+	const b = $.state(2);
+
+	let total = 0;
+
+	const destroy = $.effect_root(() => {
+		for (let i = 0; i < 1000; i += 1) {
+			$.render_effect(() => {
+				total += $.get(a);
+			});
+		}
+
+		$.render_effect(() => {
+			total += $.get(b);
+		});
+	});
+
+	return {
+		destroy,
+		run() {
+			for (let i = 0; i < 5; i++) {
+				total = 0;
+				$.flush(() => $.set(b, i));
+				assert.equal(total, i);
+			}
+		}
+	};
+};
diff --git a/benchmarking/benchmarks/reactivity/tests/kairo_avoidable.bench.js b/benchmarking/benchmarks/reactivity/tests/kairo_avoidable.bench.js
new file mode 100644
index 0000000000..d4ba858824
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/tests/kairo_avoidable.bench.js
@@ -0,0 +1,35 @@
+import assert from 'node:assert';
+import * as $ from 'svelte/internal/client';
+import { busy } from '../util.js';
+
+export default () => {
+	let head = $.state(0);
+	let computed1 = $.derived(() => $.get(head));
+	let computed2 = $.derived(() => ($.get(computed1), 0));
+	let computed3 = $.derived(() => (busy(), $.get(computed2) + 1)); // heavy computation
+	let computed4 = $.derived(() => $.get(computed3) + 2);
+	let computed5 = $.derived(() => $.get(computed4) + 3);
+
+	const destroy = $.effect_root(() => {
+		$.render_effect(() => {
+			$.get(computed5);
+			busy(); // heavy side effect
+		});
+	});
+
+	return {
+		destroy,
+		run() {
+			$.flush(() => {
+				$.set(head, 1);
+			});
+			assert.equal($.get(computed5), 6);
+			for (let i = 0; i < 1000; i++) {
+				$.flush(() => {
+					$.set(head, i);
+				});
+				assert.equal($.get(computed5), 6);
+			}
+		}
+	};
+};
diff --git a/benchmarking/benchmarks/reactivity/tests/kairo_broad.bench.js b/benchmarking/benchmarks/reactivity/tests/kairo_broad.bench.js
new file mode 100644
index 0000000000..aebae7a898
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/tests/kairo_broad.bench.js
@@ -0,0 +1,41 @@
+import assert from 'node:assert';
+import * as $ from 'svelte/internal/client';
+
+export default () => {
+	let head = $.state(0);
+	let last = head;
+	let counter = 0;
+
+	const destroy = $.effect_root(() => {
+		for (let i = 0; i < 50; i++) {
+			let current = $.derived(() => {
+				return $.get(head) + i;
+			});
+			let current2 = $.derived(() => {
+				return $.get(current) + 1;
+			});
+			$.render_effect(() => {
+				$.get(current2);
+				counter++;
+			});
+			last = current2;
+		}
+	});
+
+	return {
+		destroy,
+		run() {
+			$.flush(() => {
+				$.set(head, 1);
+			});
+			counter = 0;
+			for (let i = 0; i < 50; i++) {
+				$.flush(() => {
+					$.set(head, i);
+				});
+				assert.equal($.get(last), i + 50);
+			}
+			assert.equal(counter, 50 * 50);
+		}
+	};
+};
diff --git a/benchmarking/benchmarks/reactivity/tests/kairo_deep.bench.js b/benchmarking/benchmarks/reactivity/tests/kairo_deep.bench.js
new file mode 100644
index 0000000000..4a361e9bfc
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/tests/kairo_deep.bench.js
@@ -0,0 +1,41 @@
+import assert from 'node:assert';
+import * as $ from 'svelte/internal/client';
+
+let len = 50;
+const iter = 50;
+
+export default () => {
+	let head = $.state(0);
+	let current = head;
+	for (let i = 0; i < len; i++) {
+		let c = current;
+		current = $.derived(() => {
+			return $.get(c) + 1;
+		});
+	}
+	let counter = 0;
+
+	const destroy = $.effect_root(() => {
+		$.render_effect(() => {
+			$.get(current);
+			counter++;
+		});
+	});
+
+	return {
+		destroy,
+		run() {
+			$.flush(() => {
+				$.set(head, 1);
+			});
+			counter = 0;
+			for (let i = 0; i < iter; i++) {
+				$.flush(() => {
+					$.set(head, i);
+				});
+				assert.equal($.get(current), len + i);
+			}
+			assert.equal(counter, iter);
+		}
+	};
+};
diff --git a/benchmarking/benchmarks/reactivity/tests/kairo_diamond.bench.js b/benchmarking/benchmarks/reactivity/tests/kairo_diamond.bench.js
new file mode 100644
index 0000000000..17d9bd85e5
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/tests/kairo_diamond.bench.js
@@ -0,0 +1,45 @@
+import assert from 'node:assert';
+import * as $ from 'svelte/internal/client';
+
+let width = 5;
+
+export default () => {
+	let head = $.state(0);
+	let current = [];
+	for (let i = 0; i < width; i++) {
+		current.push(
+			$.derived(() => {
+				return $.get(head) + 1;
+			})
+		);
+	}
+	let sum = $.derived(() => {
+		return current.map((x) => $.get(x)).reduce((a, b) => a + b, 0);
+	});
+	let counter = 0;
+
+	const destroy = $.effect_root(() => {
+		$.render_effect(() => {
+			$.get(sum);
+			counter++;
+		});
+	});
+
+	return {
+		destroy,
+		run() {
+			$.flush(() => {
+				$.set(head, 1);
+			});
+			assert.equal($.get(sum), 2 * width);
+			counter = 0;
+			for (let i = 0; i < 500; i++) {
+				$.flush(() => {
+					$.set(head, i);
+				});
+				assert.equal($.get(sum), (i + 1) * width);
+			}
+			assert.equal(counter, 500);
+		}
+	};
+};
diff --git a/benchmarking/benchmarks/reactivity/tests/kairo_mux.bench.js b/benchmarking/benchmarks/reactivity/tests/kairo_mux.bench.js
new file mode 100644
index 0000000000..4af6bf7873
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/tests/kairo_mux.bench.js
@@ -0,0 +1,38 @@
+import assert from 'node:assert';
+import * as $ from 'svelte/internal/client';
+
+export default () => {
+	let heads = new Array(100).fill(null).map((_) => $.state(0));
+	const mux = $.derived(() => {
+		return Object.fromEntries(heads.map((h) => $.get(h)).entries());
+	});
+	const splited = heads
+		.map((_, index) => $.derived(() => $.get(mux)[index]))
+		.map((x) => $.derived(() => $.get(x) + 1));
+
+	const destroy = $.effect_root(() => {
+		splited.forEach((x) => {
+			$.render_effect(() => {
+				$.get(x);
+			});
+		});
+	});
+
+	return {
+		destroy,
+		run() {
+			for (let i = 0; i < 10; i++) {
+				$.flush(() => {
+					$.set(heads[i], i);
+				});
+				assert.equal($.get(splited[i]), i + 1);
+			}
+			for (let i = 0; i < 10; i++) {
+				$.flush(() => {
+					$.set(heads[i], i * 2);
+				});
+				assert.equal($.get(splited[i]), i * 2 + 1);
+			}
+		}
+	};
+};
diff --git a/benchmarking/benchmarks/reactivity/tests/kairo_repeated.bench.js b/benchmarking/benchmarks/reactivity/tests/kairo_repeated.bench.js
new file mode 100644
index 0000000000..cab7689fea
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/tests/kairo_repeated.bench.js
@@ -0,0 +1,42 @@
+import assert from 'node:assert';
+import * as $ from 'svelte/internal/client';
+
+let size = 30;
+
+export default () => {
+	let head = $.state(0);
+	let current = $.derived(() => {
+		let result = 0;
+		for (let i = 0; i < size; i++) {
+			result += $.get(head);
+		}
+		return result;
+	});
+
+	let counter = 0;
+
+	const destroy = $.effect_root(() => {
+		$.render_effect(() => {
+			$.get(current);
+			counter++;
+		});
+	});
+
+	return {
+		destroy,
+		run() {
+			$.flush(() => {
+				$.set(head, 1);
+			});
+			assert.equal($.get(current), size);
+			counter = 0;
+			for (let i = 0; i < 100; i++) {
+				$.flush(() => {
+					$.set(head, i);
+				});
+				assert.equal($.get(current), i * size);
+			}
+			assert.equal(counter, 100);
+		}
+	};
+};
diff --git a/benchmarking/benchmarks/reactivity/tests/kairo_triangle.bench.js b/benchmarking/benchmarks/reactivity/tests/kairo_triangle.bench.js
new file mode 100644
index 0000000000..b4b46c0209
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/tests/kairo_triangle.bench.js
@@ -0,0 +1,55 @@
+import assert from 'node:assert';
+import * as $ from 'svelte/internal/client';
+
+let width = 10;
+
+function count(number) {
+	return new Array(number)
+		.fill(0)
+		.map((_, i) => i + 1)
+		.reduce((x, y) => x + y, 0);
+}
+
+export default () => {
+	let head = $.state(0);
+	let current = head;
+	let list = [];
+	for (let i = 0; i < width; i++) {
+		let c = current;
+		list.push(current);
+		current = $.derived(() => {
+			return $.get(c) + 1;
+		});
+	}
+	let sum = $.derived(() => {
+		return list.map((x) => $.get(x)).reduce((a, b) => a + b, 0);
+	});
+
+	let counter = 0;
+
+	const destroy = $.effect_root(() => {
+		$.render_effect(() => {
+			$.get(sum);
+			counter++;
+		});
+	});
+
+	return {
+		destroy,
+		run() {
+			const constant = count(width);
+			$.flush(() => {
+				$.set(head, 1);
+			});
+			assert.equal($.get(sum), constant);
+			counter = 0;
+			for (let i = 0; i < 100; i++) {
+				$.flush(() => {
+					$.set(head, i);
+				});
+				assert.equal($.get(sum), constant - width + i * width);
+			}
+			assert.equal(counter, 100);
+		}
+	};
+};
diff --git a/benchmarking/benchmarks/reactivity/tests/kairo_unstable.bench.js b/benchmarking/benchmarks/reactivity/tests/kairo_unstable.bench.js
new file mode 100644
index 0000000000..e7723fae0d
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/tests/kairo_unstable.bench.js
@@ -0,0 +1,41 @@
+import assert from 'node:assert';
+import * as $ from 'svelte/internal/client';
+
+export default () => {
+	let head = $.state(0);
+	const double = $.derived(() => $.get(head) * 2);
+	const inverse = $.derived(() => -$.get(head));
+	let current = $.derived(() => {
+		let result = 0;
+		for (let i = 0; i < 20; i++) {
+			result += $.get(head) % 2 ? $.get(double) : $.get(inverse);
+		}
+		return result;
+	});
+
+	let counter = 0;
+
+	const destroy = $.effect_root(() => {
+		$.render_effect(() => {
+			$.get(current);
+			counter++;
+		});
+	});
+
+	return {
+		destroy,
+		run() {
+			$.flush(() => {
+				$.set(head, 1);
+			});
+			assert.equal($.get(current), 40);
+			counter = 0;
+			for (let i = 0; i < 100; i++) {
+				$.flush(() => {
+					$.set(head, i);
+				});
+			}
+			assert.equal(counter, 100);
+		}
+	};
+};
diff --git a/benchmarking/benchmarks/reactivity/mol_bench.js b/benchmarking/benchmarks/reactivity/tests/mol.bench.js
similarity index 51%
rename from benchmarking/benchmarks/reactivity/mol_bench.js
rename to benchmarking/benchmarks/reactivity/tests/mol.bench.js
index c9f492f619..e66f0191d1 100644
--- a/benchmarking/benchmarks/reactivity/mol_bench.js
+++ b/benchmarking/benchmarks/reactivity/tests/mol.bench.js
@@ -1,4 +1,4 @@
-import { assert, fastest_test } from '../../utils.js';
+import assert from 'node:assert';
 import * as $ from 'svelte/internal/client';
 
 /**
@@ -18,7 +18,7 @@ function hard(n) {
 
 const numbers = Array.from({ length: 5 }, (_, i) => i);
 
-function setup() {
+export default () => {
 	let res = [];
 	const A = $.state(0);
 	const B = $.state(0);
@@ -51,71 +51,18 @@ function setup() {
 		 */
 		run(i) {
 			res.length = 0;
-			$.flush_sync(() => {
+			$.flush(() => {
 				$.set(B, 1);
 				$.set(A, 1 + i * 2);
 			});
-			$.flush_sync(() => {
+			$.flush(() => {
 				$.set(A, 2 + i * 2);
 				$.set(B, 2);
 			});
-			assert(res[0] === 3198 && res[1] === 1601 && res[2] === 3195 && res[3] === 1598);
+			assert.equal(res[0], 3198);
+			assert.equal(res[1], 1601);
+			assert.equal(res[2], 3195);
+			assert.equal(res[3], 1598);
 		}
 	};
-}
-
-export async function mol_bench_owned() {
-	let run, destroy;
-
-	const destroy_owned = $.effect_root(() => {
-		// Do 10 loops to warm up JIT
-		for (let i = 0; i < 10; i++) {
-			const { run, destroy } = setup();
-			run(0);
-			destroy();
-		}
-
-		({ run, destroy } = setup());
-	});
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 1e4; i++) {
-			run(i);
-		}
-	});
-
-	// @ts-ignore
-	destroy();
-	destroy_owned();
-
-	return {
-		benchmark: 'mol_bench_owned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
-
-export async function mol_bench_unowned() {
-	// Do 10 loops to warm up JIT
-	for (let i = 0; i < 10; i++) {
-		const { run, destroy } = setup();
-		run(0);
-		destroy();
-	}
-
-	const { run, destroy } = setup();
-
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 1e4; i++) {
-			run(i);
-		}
-	});
-
-	destroy();
-
-	return {
-		benchmark: 'mol_bench_unowned',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
-}
+};
diff --git a/benchmarking/benchmarks/reactivity/tests/repeated_deps.bench.js b/benchmarking/benchmarks/reactivity/tests/repeated_deps.bench.js
new file mode 100644
index 0000000000..a8fbcfdbd6
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/tests/repeated_deps.bench.js
@@ -0,0 +1,35 @@
+import assert from 'node:assert';
+import * as $ from 'svelte/internal/client';
+
+const ARRAY_SIZE = 1000;
+
+export default () => {
+	const signals = Array.from({ length: ARRAY_SIZE }, (_, i) => $.state(i));
+	const order = $.state(0);
+
+	// break skipped_deps fast path by changing order of reads
+	const total = $.derived(() => {
+		const ord = $.get(order);
+		let sum = 0;
+		for (let i = 0; i < ARRAY_SIZE; i++) {
+			sum += /** @type {number} */ ($.get(signals[(i + ord) % ARRAY_SIZE]));
+		}
+		return sum;
+	});
+
+	const destroy = $.effect_root(() => {
+		$.render_effect(() => {
+			$.get(total);
+		});
+	});
+
+	return {
+		destroy,
+		run() {
+			for (let i = 0; i < 5; i++) {
+				$.flush(() => $.set(order, i));
+				assert.equal($.get(total), (ARRAY_SIZE * (ARRAY_SIZE - 1)) / 2); // sum of 0..999
+			}
+		}
+	};
+};
diff --git a/benchmarking/benchmarks/reactivity/util.js b/benchmarking/benchmarks/reactivity/util.js
new file mode 100644
index 0000000000..da5e5c51f5
--- /dev/null
+++ b/benchmarking/benchmarks/reactivity/util.js
@@ -0,0 +1,71 @@
+import * as $ from 'svelte/internal/client';
+import { fastest_test } from '../../utils.js';
+
+export function busy() {
+	let a = 0;
+	for (let i = 0; i < 1_00; i++) {
+		a++;
+	}
+}
+
+/**
+ *
+ * @param {string} label
+ * @param {() => { run: (i?: number) => void, destroy: () => void }} setup
+ */
+export function create_test(label, setup) {
+	return {
+		unowned: {
+			label: `${label}_unowned`,
+			fn: async () => {
+				// Do 10 loops to warm up JIT
+				for (let i = 0; i < 10; i++) {
+					const { run, destroy } = setup();
+					run(0);
+					destroy();
+				}
+
+				const { run, destroy } = setup();
+
+				const result = await fastest_test(10, () => {
+					for (let i = 0; i < 1000; i++) {
+						run(i);
+					}
+				});
+
+				destroy();
+
+				return result;
+			}
+		},
+		owned: {
+			label: `${label}_owned`,
+			fn: async () => {
+				let run, destroy;
+
+				const destroy_owned = $.effect_root(() => {
+					// Do 10 loops to warm up JIT
+					for (let i = 0; i < 10; i++) {
+						const { run, destroy } = setup();
+						run(0);
+						destroy();
+					}
+
+					({ run, destroy } = setup());
+				});
+
+				const result = await fastest_test(10, () => {
+					for (let i = 0; i < 1000; i++) {
+						run(i);
+					}
+				});
+
+				// @ts-ignore
+				destroy();
+				destroy_owned();
+
+				return result;
+			}
+		}
+	};
+}
diff --git a/benchmarking/benchmarks/ssr/wrapper/wrapper_bench.js b/benchmarking/benchmarks/ssr/wrapper/wrapper_bench.js
index ba0457b80e..9a8dda617d 100644
--- a/benchmarking/benchmarks/ssr/wrapper/wrapper_bench.js
+++ b/benchmarking/benchmarks/ssr/wrapper/wrapper_bench.js
@@ -1,13 +1,16 @@
+import * as fs from 'node:fs';
+import * as path from 'node:path';
 import { render } from 'svelte/server';
-import { fastest_test, read_file, write } from '../../../utils.js';
+import { fastest_test } from '../../../utils.js';
 import { compile } from 'svelte/compiler';
 
 const dir = `${process.cwd()}/benchmarking/benchmarks/ssr/wrapper`;
 
 async function compile_svelte() {
-	const output = compile(read_file(`${dir}/App.svelte`), {
+	const output = compile(read(`${dir}/App.svelte`), {
 		generate: 'server'
 	});
+
 	write(`${dir}/output/App.js`, output.js.code);
 
 	const module = await import(`${dir}/output/App.js`);
@@ -15,22 +18,39 @@ async function compile_svelte() {
 	return module.default;
 }
 
-export async function wrapper_bench() {
-	const App = await compile_svelte();
-	// Do 3 loops to warm up JIT
-	for (let i = 0; i < 3; i++) {
-		render(App);
-	}
+export const wrapper_bench = {
+	label: 'wrapper_bench',
+	fn: async () => {
+		const App = await compile_svelte();
 
-	const { timing } = await fastest_test(10, () => {
-		for (let i = 0; i < 100; i++) {
+		// Do 3 loops to warm up JIT
+		for (let i = 0; i < 3; i++) {
 			render(App);
 		}
-	});
 
-	return {
-		benchmark: 'wrapper_bench',
-		time: timing.time.toFixed(2),
-		gc_time: timing.gc_time.toFixed(2)
-	};
+		return await fastest_test(10, () => {
+			for (let i = 0; i < 100; i++) {
+				render(App);
+			}
+		});
+	}
+};
+
+/**
+ * @param {string} file
+ */
+function read(file) {
+	return fs.readFileSync(file, 'utf-8').replace(/\r\n/g, '\n');
+}
+
+/**
+ * @param {string} file
+ * @param {string} contents
+ */
+function write(file, contents) {
+	try {
+		fs.mkdirSync(path.dirname(file), { recursive: true });
+	} catch {}
+
+	fs.writeFileSync(file, contents);
 }
diff --git a/benchmarking/compare/generate-report.js b/benchmarking/compare/generate-report.js
new file mode 100644
index 0000000000..a61f58909b
--- /dev/null
+++ b/benchmarking/compare/generate-report.js
@@ -0,0 +1,81 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { pathToFileURL } from 'node:url';
+
+export function generate_report(outdir) {
+	const result_files = fs
+		.readdirSync(outdir)
+		.filter((file) => file.endsWith('.json'))
+		.sort((a, b) => a.localeCompare(b));
+
+	const branches = result_files.map((file) => file.slice(0, -5));
+	const results = result_files.map((file) =>
+		JSON.parse(fs.readFileSync(`${outdir}/${file}`, 'utf-8'))
+	);
+
+	if (results.length === 0) {
+		console.error(`No result files found in ${outdir}`);
+		process.exit(1);
+	}
+
+	const report_file = path.join(outdir, 'report.txt');
+
+	fs.writeFileSync(report_file, '');
+
+	const write = (str) => {
+		fs.appendFileSync(report_file, str + '\n');
+		console.log(str);
+	};
+
+	for (let i = 0; i < branches.length; i += 1) {
+		write(`${char(i)}: ${branches[i]}`);
+	}
+
+	write('');
+
+	for (let i = 0; i < results[0].length; i += 1) {
+		write(`${results[0][i].benchmark}`);
+
+		for (const metric of ['time', 'gc_time']) {
+			const times = results.map((result) => +result[i][metric]);
+			let min = Infinity;
+			let max = -Infinity;
+			let min_index = -1;
+
+			for (let b = 0; b < times.length; b += 1) {
+				const time = times[b];
+
+				if (time < min) {
+					min = time;
+					min_index = b;
+				}
+
+				if (time > max) {
+					max = time;
+				}
+			}
+
+			if (min !== 0) {
+				write(`  ${metric}: fastest is ${char(min_index)} (${branches[min_index]})`);
+				times.forEach((time, b) => {
+					const SIZE = 20;
+					const n = Math.round(SIZE * (time / max));
+
+					write(`    ${char(b)}: ${'◼'.repeat(n)}${' '.repeat(SIZE - n)} ${time.toFixed(2)}ms`);
+				});
+			}
+		}
+
+		write('');
+	}
+}
+
+function char(i) {
+	return String.fromCharCode(97 + i);
+}
+
+if (import.meta.url === pathToFileURL(process.argv[1]).href) {
+	const outdir = path.resolve(process.argv[1], '../.results');
+
+	generate_report(outdir);
+}
diff --git a/benchmarking/compare/index.js b/benchmarking/compare/index.js
index a5fc6d10a9..9064ee7da9 100644
--- a/benchmarking/compare/index.js
+++ b/benchmarking/compare/index.js
@@ -2,7 +2,8 @@ import fs from 'node:fs';
 import path from 'node:path';
 import { execSync, fork } from 'node:child_process';
 import { fileURLToPath } from 'node:url';
-import { benchmarks } from '../benchmarks.js';
+import { safe } from '../utils.js';
+import { generate_report } from './generate-report.js';
 
 // if (execSync('git status --porcelain').toString().trim()) {
 // 	console.error('Working directory is not clean');
@@ -13,39 +14,61 @@ const filename = fileURLToPath(import.meta.url);
 const runner = path.resolve(filename, '../runner.js');
 const outdir = path.resolve(filename, '../.results');
 
-if (fs.existsSync(outdir)) fs.rmSync(outdir, { recursive: true });
-fs.mkdirSync(outdir);
+fs.mkdirSync(outdir, { recursive: true });
 
-const branches = [];
+const requested_branches = [];
+
+let PROFILE_DIR = path.resolve(filename, '../.profiles');
+fs.mkdirSync(PROFILE_DIR, { recursive: true });
 
 for (const arg of process.argv.slice(2)) {
 	if (arg.startsWith('--')) continue;
 	if (arg === filename) continue;
 
-	branches.push(arg);
+	requested_branches.push(arg);
 }
 
-if (branches.length === 0) {
-	branches.push(
+if (requested_branches.length === 0) {
+	requested_branches.push(
 		execSync('git symbolic-ref --short -q HEAD || git rev-parse --short HEAD').toString().trim()
 	);
 }
 
-if (branches.length === 1) {
-	branches.push('main');
+const original_ref = execSync('git symbolic-ref --short -q HEAD || git rev-parse --short HEAD')
+	.toString()
+	.trim();
+
+if (
+	requested_branches.length === 1 &&
+	!requested_branches.includes('main') &&
+	!fs.existsSync(`${outdir}/main.json`)
+) {
+	requested_branches.push('main');
 }
 
 process.on('exit', () => {
-	execSync(`git checkout ${branches[0]}`);
+	execSync(`git checkout ${original_ref}`);
 });
 
-for (const branch of branches) {
+for (const branch of requested_branches) {
 	console.group(`Benchmarking ${branch}`);
 
+	const branch_profile_dir = `${PROFILE_DIR}/${safe(branch)}`;
+	if (fs.existsSync(branch_profile_dir))
+		fs.rmSync(branch_profile_dir, { recursive: true, force: true });
+
+	const branch_result_file = `${outdir}/${branch}.json`;
+	if (fs.existsSync(branch_result_file)) fs.rmSync(branch_result_file, { force: true });
+
 	execSync(`git checkout ${branch}`);
 
 	await new Promise((fulfil, reject) => {
-		const child = fork(runner);
+		const child = fork(runner, [], {
+			env: {
+				...process.env,
+				BENCH_PROFILE_DIR: branch_profile_dir
+			}
+		});
 
 		child.on('message', (results) => {
 			fs.writeFileSync(`${outdir}/${branch}.json`, JSON.stringify(results, null, '  '));
@@ -58,33 +81,8 @@ for (const branch of branches) {
 	console.groupEnd();
 }
 
-const results = branches.map((branch) => {
-	return JSON.parse(fs.readFileSync(`${outdir}/${branch}.json`, 'utf-8'));
-});
-
-for (let i = 0; i < results[0].length; i += 1) {
-	console.group(`${results[0][i].benchmark}`);
-
-	for (const metric of ['time', 'gc_time']) {
-		const times = results.map((result) => +result[i][metric]);
-		let min = Infinity;
-		let min_index = -1;
-
-		for (let b = 0; b < times.length; b += 1) {
-			if (times[b] < min) {
-				min = times[b];
-				min_index = b;
-			}
-		}
-
-		if (min !== 0) {
-			console.group(`${metric}: fastest is ${branches[min_index]}`);
-			times.forEach((time, b) => {
-				console.log(`${branches[b]}: ${time.toFixed(2)}ms (${((time / min) * 100).toFixed(2)}%)`);
-			});
-			console.groupEnd();
-		}
-	}
-
-	console.groupEnd();
+if (PROFILE_DIR !== null) {
+	console.log(`\nCPU profiles written to ${PROFILE_DIR}`);
 }
+
+generate_report(outdir);
diff --git a/benchmarking/compare/profile-diff.mjs b/benchmarking/compare/profile-diff.mjs
new file mode 100644
index 0000000000..c6a9061ab2
--- /dev/null
+++ b/benchmarking/compare/profile-diff.mjs
@@ -0,0 +1,83 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+const [benchmark, baseBranch = 'main', candidateBranch] = process.argv.slice(2);
+
+if (!benchmark || !candidateBranch) {
+	console.error(
+		'Usage: node benchmarking/compare/profile-diff.mjs <benchmark> <base-branch> <candidate-branch>'
+	);
+	process.exit(1);
+}
+
+const root = path.resolve('benchmarking/compare/.profiles');
+
+function safe(name) {
+	return name.replace(/[^a-z0-9._-]+/gi, '_');
+}
+
+function read_profile(branch, bench) {
+	const file = path.join(root, safe(branch), `${bench}.cpuprofile`);
+	const profile = JSON.parse(fs.readFileSync(file, 'utf8'));
+	const nodes = Array.isArray(profile.nodes) ? profile.nodes : [];
+	const samples = Array.isArray(profile.samples) ? profile.samples : [];
+
+	const id_to_node = new Map(nodes.map((node) => [node.id, node]));
+	const self_counts = new Map();
+
+	for (const sample of samples) {
+		if (typeof sample !== 'number') continue;
+		self_counts.set(sample, (self_counts.get(sample) ?? 0) + 1);
+	}
+
+	const total = samples.length || 1;
+	const by_fn = new Map();
+
+	for (const [id, count] of self_counts) {
+		const node = id_to_node.get(id);
+		if (!node || typeof node !== 'object') continue;
+
+		const frame = node.callFrame ?? {};
+		const function_name = frame.functionName || '(anonymous)';
+		const url = frame.url || '';
+		const line = typeof frame.lineNumber === 'number' ? frame.lineNumber + 1 : 0;
+
+		const label = url
+			? `${function_name} @ ${url.replace(/^.*packages\//, 'packages/')}:${line}`
+			: function_name;
+
+		by_fn.set(label, (by_fn.get(label) ?? 0) + count);
+	}
+
+	return { by_fn, total };
+}
+
+const base = read_profile(baseBranch, benchmark);
+const candidate = read_profile(candidateBranch, benchmark);
+
+const keys = new Set([...base.by_fn.keys(), ...candidate.by_fn.keys()]);
+const rows = [...keys]
+	.map((key) => {
+		const base_pct = ((base.by_fn.get(key) ?? 0) * 100) / base.total;
+		const candidate_pct = ((candidate.by_fn.get(key) ?? 0) * 100) / candidate.total;
+		return {
+			key,
+			delta: candidate_pct - base_pct,
+			base_pct,
+			candidate_pct
+		};
+	})
+	.sort((a, b) => Math.abs(b.delta) - Math.abs(a.delta))
+	.slice(0, 20);
+
+console.log(`Benchmark: ${benchmark}`);
+console.log(`Base: ${baseBranch}`);
+console.log(`Candidate: ${candidateBranch}`);
+console.log('');
+
+for (const row of rows) {
+	const sign = row.delta >= 0 ? '+' : '';
+	console.log(
+		`${sign}${row.delta.toFixed(2).padStart(6)}pp  candidate ${row.candidate_pct.toFixed(2).padStart(6)}%  base ${row.base_pct.toFixed(2).padStart(6)}%  ${row.key}`
+	);
+}
diff --git a/benchmarking/compare/runner.js b/benchmarking/compare/runner.js
index 6fa58e2bac..31a8e6b44b 100644
--- a/benchmarking/compare/runner.js
+++ b/benchmarking/compare/runner.js
@@ -1,10 +1,18 @@
-import { benchmarks } from '../benchmarks.js';
+import { reactivity_benchmarks } from '../benchmarks/reactivity/index.js';
+import { with_cpu_profile } from '../utils.js';
 
 const results = [];
-for (const benchmark of benchmarks) {
-	const result = await benchmark();
-	console.error(result.benchmark);
-	results.push(result);
+const PROFILE_DIR = process.env.BENCH_PROFILE_DIR;
+
+for (let i = 0; i < reactivity_benchmarks.length; i += 1) {
+	const benchmark = reactivity_benchmarks[i];
+
+	process.stderr.write(`Running ${i + 1}/${reactivity_benchmarks.length} ${benchmark.label} `);
+	results.push({
+		benchmark: benchmark.label,
+		...(await with_cpu_profile(PROFILE_DIR, benchmark.label, () => benchmark.fn()))
+	});
+	process.stderr.write('\x1b[2K\r');
 }
 
 process.send(results);
diff --git a/benchmarking/run.js b/benchmarking/run.js
index bd96b9c2dc..80e40a5ff1 100644
--- a/benchmarking/run.js
+++ b/benchmarking/run.js
@@ -1,55 +1,94 @@
 import * as $ from '../packages/svelte/src/internal/client/index.js';
 import { reactivity_benchmarks } from './benchmarks/reactivity/index.js';
 import { ssr_benchmarks } from './benchmarks/ssr/index.js';
+import { with_cpu_profile } from './utils.js';
 
-let total_time = 0;
-let total_gc_time = 0;
+// e.g. `pnpm bench kairo` to only run the kairo benchmarks
+const filters = process.argv.slice(2);
+
+const PROFILE_DIR = './benchmarking/.profiles';
 
 const suites = [
-	{ benchmarks: reactivity_benchmarks, name: 'reactivity benchmarks' },
-	{ benchmarks: ssr_benchmarks, name: 'server-side rendering benchmarks' }
-];
+	{
+		benchmarks: reactivity_benchmarks.filter(
+			(b) => filters.length === 0 || filters.some((f) => b.label.includes(f))
+		),
+		name: 'reactivity benchmarks'
+	},
+	{
+		benchmarks: ssr_benchmarks.filter(
+			(b) => filters.length === 0 || filters.some((f) => b.label.includes(f))
+		),
+		name: 'server-side rendering benchmarks'
+	}
+].filter((suite) => suite.benchmarks.length > 0);
+
+if (suites.length === 0) {
+	console.log('No benchmarks matched provided filters');
+	process.exit(1);
+}
+
+const COLUMN_WIDTHS = [25, 9, 9];
+const TOTAL_WIDTH = COLUMN_WIDTHS.reduce((a, b) => a + b);
+
+const pad_right = (str, n) => str + ' '.repeat(n - str.length);
+const pad_left = (str, n) => ' '.repeat(n - str.length) + str;
+
+let total_time = 0;
+let total_gc_time = 0;
 
-// eslint-disable-next-line no-console
-console.log('\x1b[1m', '-- Benchmarking Started --', '\x1b[0m');
 $.push({}, true);
+
 try {
 	for (const { benchmarks, name } of suites) {
 		let suite_time = 0;
 		let suite_gc_time = 0;
-		// eslint-disable-next-line no-console
+
 		console.log(`\nRunning ${name}...\n`);
+		console.log(
+			pad_right('Benchmark', COLUMN_WIDTHS[0]) +
+				pad_left('Time', COLUMN_WIDTHS[1]) +
+				pad_left('GC time', COLUMN_WIDTHS[2])
+		);
+		console.log('='.repeat(TOTAL_WIDTH));
 
 		for (const benchmark of benchmarks) {
-			const results = await benchmark();
-			// eslint-disable-next-line no-console
-			console.log(results);
-			total_time += Number(results.time);
-			total_gc_time += Number(results.gc_time);
-			suite_time += Number(results.time);
-			suite_gc_time += Number(results.gc_time);
+			const results = await with_cpu_profile(PROFILE_DIR, benchmark.label, () => benchmark.fn());
+			console.log(
+				pad_right(benchmark.label, COLUMN_WIDTHS[0]) +
+					pad_left(results.time.toFixed(2), COLUMN_WIDTHS[1]) +
+					pad_left(results.gc_time.toFixed(2), COLUMN_WIDTHS[2])
+			);
+			total_time += results.time;
+			total_gc_time += results.gc_time;
+			suite_time += results.time;
+			suite_gc_time += results.gc_time;
 		}
 
-		console.log(`\nFinished ${name}.\n`);
+		console.log('='.repeat(TOTAL_WIDTH));
+		console.log(
+			pad_right('suite', COLUMN_WIDTHS[0]) +
+				pad_left(suite_time.toFixed(2), COLUMN_WIDTHS[1]) +
+				pad_left(suite_gc_time.toFixed(2), COLUMN_WIDTHS[2])
+		);
+		console.log('='.repeat(TOTAL_WIDTH));
+	}
 
-		// eslint-disable-next-line no-console
-		console.log({
-			suite_time: suite_time.toFixed(2),
-			suite_gc_time: suite_gc_time.toFixed(2)
-		});
+	if (PROFILE_DIR !== null) {
+		console.log(`\nCPU profiles written to ${PROFILE_DIR}`);
 	}
 } catch (e) {
-	// eslint-disable-next-line no-console
-	console.log('\x1b[1m', '\n-- Benchmarking Failed --\n', '\x1b[0m');
 	// eslint-disable-next-line no-console
 	console.error(e);
 	process.exit(1);
 }
+
 $.pop();
-// eslint-disable-next-line no-console
-console.log('\x1b[1m', '\n-- Benchmarking Complete --\n', '\x1b[0m');
-// eslint-disable-next-line no-console
-console.log({
-	total_time: total_time.toFixed(2),
-	total_gc_time: total_gc_time.toFixed(2)
-});
+
+console.log('');
+
+console.log(
+	pad_right('total', COLUMN_WIDTHS[0]) +
+		pad_left(total_time.toFixed(2), COLUMN_WIDTHS[1]) +
+		pad_left(total_gc_time.toFixed(2), COLUMN_WIDTHS[2])
+);
diff --git a/benchmarking/utils.js b/benchmarking/utils.js
index 684d2ee02b..2f4be3c567 100644
--- a/benchmarking/utils.js
+++ b/benchmarking/utils.js
@@ -1,119 +1,333 @@
 import { performance, PerformanceObserver } from 'node:perf_hooks';
+import fs from 'node:fs';
+import path from 'node:path';
+import inspector from 'node:inspector/promises';
 import v8 from 'v8-natives';
-import * as fs from 'node:fs';
-import * as path from 'node:path';
 
 // Credit to https://github.com/milomg/js-reactivity-benchmark for the logic for timing + GC tracking.
 
-class GarbageTrack {
-	track_id = 0;
-	observer = new PerformanceObserver((list) => this.perf_entries.push(...list.getEntries()));
-	perf_entries = [];
-	periods = [];
+async function track(fn) {
+	v8.collectGarbage();
 
-	watch(fn) {
-		this.track_id++;
-		const start = performance.now();
-		const result = fn();
-		const end = performance.now();
-		this.periods.push({ track_id: this.track_id, start, end });
+	/** @type {PerformanceEntry[]} */
+	const entries = [];
 
-		return { result, track_id: this.track_id };
-	}
+	const observer = new PerformanceObserver((list) => entries.push(...list.getEntries()));
+	observer.observe({ entryTypes: ['gc'] });
 
-	/**
-	 * @param {number} track_id
-	 */
-	async gcDuration(track_id) {
-		await promise_delay(10);
+	const start = performance.now();
+	fn();
+	const end = performance.now();
 
-		const period = this.periods.find((period) => period.track_id === track_id);
-		if (!period) {
-			// eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
-			return Promise.reject('no period found');
-		}
+	await new Promise((f) => setTimeout(f, 10));
 
-		const entries = this.perf_entries.filter(
-			(e) => e.startTime >= period.start && e.startTime < period.end
-		);
-		return entries.reduce((t, e) => e.duration + t, 0);
-	}
+	const gc_time = entries
+		.filter((e) => e.startTime >= start && e.startTime < end)
+		.reduce((t, e) => e.duration + t, 0);
 
-	destroy() {
-		this.observer.disconnect();
-	}
+	observer.disconnect();
 
-	constructor() {
-		this.observer.observe({ entryTypes: ['gc'] });
+	return { time: end - start, gc_time };
+}
+
+/**
+ * @param {number} times
+ * @param {() => void} fn
+ */
+export async function fastest_test(times, fn) {
+	/** @type {Array<{ time: number, gc_time: number }>} */
+	const results = [];
+
+	for (let i = 0; i < times; i++) {
+		results.push(await track(fn));
 	}
+
+	return results.reduce((a, b) => (a.time < b.time ? a : b));
 }
 
-function promise_delay(timeout = 0) {
-	return new Promise((resolve) => setTimeout(resolve, timeout));
+export function safe(name) {
+	return name.replace(/[^a-z0-9._-]+/gi, '_');
 }
 
 /**
- * @param {{ (): void; (): any; }} fn
+ * @param {unknown} value
  */
-function run_timed(fn) {
-	const start = performance.now();
-	const result = fn();
-	const time = performance.now() - start;
-	return { result, time };
+function format_markdown_value(value) {
+	if (value === null || value === undefined) return '';
+	if (Array.isArray(value)) return value.map((item) => String(item)).join(', ');
+	if (typeof value === 'object') return JSON.stringify(value);
+	return String(value);
 }
 
 /**
- * @param {() => void} fn
+ * @param {string} text
  */
-async function run_tracked(fn) {
-	v8.collectGarbage();
-	const gc_track = new GarbageTrack();
-	const { result: wrappedResult, track_id } = gc_track.watch(() => run_timed(fn));
-	const gc_time = await gc_track.gcDuration(track_id);
-	const { result, time } = wrappedResult;
-	gc_track.destroy();
-	return { result, timing: { time, gc_time } };
+function escape_markdown_cell(text) {
+	return text.replace(/\\/g, '\\\\').replace(/\|/g, '\\|').replace(/\r?\n/g, ' ');
 }
 
 /**
- * @param {number} times
- * @param {() => void} fn
+ * @param {string} value
  */
-export async function fastest_test(times, fn) {
-	const results = [];
-	for (let i = 0; i < times; i++) {
-		const run = await run_tracked(fn);
-		results.push(run);
+function normalize_profile_url(value) {
+	if (!value) return '';
+
+	if (value.startsWith('file://')) {
+		try {
+			const pathname = decodeURIComponent(new URL(value).pathname);
+			const relative = path.relative(process.cwd(), pathname);
+			if (relative && !relative.startsWith('..') && !path.isAbsolute(relative)) return relative;
+			return pathname;
+		} catch {
+			return value;
+		}
 	}
-	const fastest = results.reduce((a, b) => (a.timing.time < b.timing.time ? a : b));
 
-	return fastest;
+	if (path.isAbsolute(value)) {
+		const relative = path.relative(process.cwd(), value);
+		if (relative && !relative.startsWith('..') && !path.isAbsolute(relative)) return relative;
+	}
+
+	return value;
 }
 
 /**
- * @param {boolean} a
+ * @param {string} function_name
  */
-export function assert(a) {
-	if (!a) {
-		throw new Error('Assertion failed');
-	}
+function is_special_runtime_node(function_name) {
+	return function_name === '(idle)' || function_name === '(garbage collector)';
 }
 
 /**
- * @param {string} file
+ * @param {string} normalized_url
  */
-export function read_file(file) {
-	return fs.readFileSync(file, 'utf-8').replace(/\r\n/g, '\n');
+function is_svelte_source_url(normalized_url) {
+	return normalized_url.startsWith('packages/svelte/');
 }
 
 /**
- * @param {string} file
- * @param {string} contents
+ * @param {Record<string, unknown>} profile
  */
-export function write(file, contents) {
-	try {
-		fs.mkdirSync(path.dirname(file), { recursive: true });
-	} catch {}
+function profile_to_markdown(profile) {
+	/** @type {string[]} */
+	const lines = ['# CPU profile'];
+
+	const metadata = Object.entries(profile).filter(
+		([key]) => key !== 'nodes' && key !== 'samples' && key !== 'timeDeltas'
+	);
+
+	if (metadata.length > 0) {
+		lines.push('', '## Metadata', '| Field | Value |', '| --- | --- |');
+		for (const [key, value] of metadata) {
+			lines.push(
+				`| ${escape_markdown_cell(key)} | ${escape_markdown_cell(format_markdown_value(value))} |`
+			);
+		}
+	}
+
+	const nodes = Array.isArray(profile.nodes) ? profile.nodes : [];
+	const samples = Array.isArray(profile.samples) ? profile.samples : [];
+	const timeDeltas = Array.isArray(profile.timeDeltas) ? profile.timeDeltas : [];
+	/** @type {Set<number>} */
+	const included_node_ids = new Set();
+
+	if (nodes.length > 0) {
+		/** @type {Map<number, Record<string, unknown>>} */
+		const nodes_by_id = new Map();
 
-	fs.writeFileSync(file, contents);
+		/** @type {Map<number, number>} */
+		const parent_by_id = new Map();
+
+		for (const node of nodes) {
+			if (!node || typeof node !== 'object') continue;
+			if (typeof node.id !== 'number') continue;
+			nodes_by_id.set(node.id, node);
+			const children = Array.isArray(node.children) ? node.children : [];
+			for (const child of children) {
+				if (typeof child === 'number') {
+					parent_by_id.set(child, node.id);
+				}
+			}
+
+			const callFrame =
+				node.callFrame && typeof node.callFrame === 'object'
+					? /** @type {Record<string, unknown>} */ (node.callFrame)
+					: /** @type {Record<string, unknown>} */ ({});
+			const functionName =
+				typeof callFrame.functionName === 'string' ? callFrame.functionName : '(anonymous)';
+			const normalizedUrl =
+				typeof callFrame.url === 'string' ? normalize_profile_url(callFrame.url) : '';
+
+			if (is_special_runtime_node(functionName) || is_svelte_source_url(normalizedUrl)) {
+				included_node_ids.add(node.id);
+			}
+		}
+
+		/** @type {Map<number, number>} */
+		const self_sample_count = new Map();
+		for (const sample of samples) {
+			if (typeof sample !== 'number') continue;
+			if (!included_node_ids.has(sample)) continue;
+			self_sample_count.set(sample, (self_sample_count.get(sample) ?? 0) + 1);
+		}
+
+		/** @type {Map<number, number>} */
+		const inclusive_sample_count = new Map();
+		/** @type {Set<number>} */
+		const stack = new Set();
+
+		/** @param {number} node_id */
+		const get_inclusive_count = (node_id) => {
+			const cached = inclusive_sample_count.get(node_id);
+			if (cached !== undefined) return cached;
+			if (stack.has(node_id)) return self_sample_count.get(node_id) ?? 0;
+
+			stack.add(node_id);
+			const node = nodes_by_id.get(node_id);
+			const children = node && Array.isArray(node.children) ? node.children : [];
+			let total = self_sample_count.get(node_id) ?? 0;
+
+			for (const child of children) {
+				if (typeof child !== 'number') continue;
+				total += get_inclusive_count(child);
+			}
+
+			stack.delete(node_id);
+			inclusive_sample_count.set(node_id, total);
+			return total;
+		};
+
+		for (const node_id of included_node_ids) {
+			get_inclusive_count(node_id);
+		}
+
+		const total_samples = [...self_sample_count.values()].reduce((sum, count) => sum + count, 0);
+		if (total_samples > 0) {
+			const hotspot_rows = [...included_node_ids]
+				.map((id) => nodes_by_id.get(id))
+				.filter((node) => !!node)
+				.map((node) => {
+					const id = /** @type {number} */ (node.id);
+					const callFrame =
+						node.callFrame && typeof node.callFrame === 'object'
+							? /** @type {Record<string, unknown>} */ (node.callFrame)
+							: /** @type {Record<string, unknown>} */ ({});
+					const functionName =
+						typeof callFrame.functionName === 'string' && callFrame.functionName.length > 0
+							? callFrame.functionName
+							: '(anonymous)';
+					const selfCount = self_sample_count.get(id) ?? 0;
+					const inclusiveCount = inclusive_sample_count.get(id) ?? selfCount;
+					return { id, functionName, selfCount, inclusiveCount };
+				})
+				.filter((row) => row.selfCount > 0 || row.inclusiveCount > 0)
+				.sort(
+					(a, b) =>
+						b.inclusiveCount - a.inclusiveCount ||
+						b.selfCount - a.selfCount ||
+						String(a.id).localeCompare(String(b.id))
+				)
+				.slice(0, 25);
+
+			if (hotspot_rows.length > 0) {
+				lines.push(
+					'',
+					'## Top hotspots',
+					'| Rank | Node ID | Function | Self samples | Self % | Inclusive samples | Inclusive % |',
+					'| --- | --- | --- | --- | --- | --- | --- |'
+				);
+
+				for (let i = 0; i < hotspot_rows.length; i += 1) {
+					const row = hotspot_rows[i];
+					const selfPct = ((row.selfCount / total_samples) * 100).toFixed(2);
+					const inclusivePct = ((row.inclusiveCount / total_samples) * 100).toFixed(2);
+					lines.push(
+						`| ${i + 1} | ${row.id} | ${escape_markdown_cell(row.functionName)} | ${row.selfCount} | ${selfPct}% | ${row.inclusiveCount} | ${inclusivePct}% |`
+					);
+				}
+			}
+		}
+
+		lines.push(
+			'',
+			'## Nodes',
+			'| ID | Parent ID | Function | URL | Line | Column | Hit count | Children | Deopt reason |',
+			'| --- | --- | --- | --- | --- | --- | --- | --- | --- |'
+		);
+
+		for (const node of nodes) {
+			if (!node || typeof node !== 'object') continue;
+			if (typeof node.id !== 'number') continue;
+			if (!included_node_ids.has(node.id)) continue;
+
+			const callFrame =
+				node.callFrame && typeof node.callFrame === 'object'
+					? /** @type {Record<string, unknown>} */ (node.callFrame)
+					: /** @type {Record<string, unknown>} */ ({});
+
+			const id = typeof node.id === 'number' ? node.id : '';
+			const parentId =
+				typeof id === 'number' && included_node_ids.has(parent_by_id.get(id) ?? NaN)
+					? parent_by_id.get(id) ?? ''
+					: '';
+			const functionName =
+				typeof callFrame.functionName === 'string' && callFrame.functionName.length > 0
+					? callFrame.functionName
+					: '(anonymous)';
+			const url = typeof callFrame.url === 'string' ? normalize_profile_url(callFrame.url) : '';
+			const lineNumber =
+				typeof callFrame.lineNumber === 'number' ? String(callFrame.lineNumber + 1) : '';
+			const columnNumber =
+				typeof callFrame.columnNumber === 'number' ? String(callFrame.columnNumber + 1) : '';
+			const hitCount = typeof node.hitCount === 'number' ? node.hitCount : '';
+			const children = Array.isArray(node.children)
+				? node.children
+						.filter((child) => typeof child === 'number' && included_node_ids.has(child))
+						.join(', ')
+				: '';
+			const deoptReason = typeof node.deoptReason === 'string' ? node.deoptReason : '';
+
+			lines.push(
+				`| ${escape_markdown_cell(String(id))} | ${escape_markdown_cell(String(parentId))} | ${escape_markdown_cell(functionName)} | ${escape_markdown_cell(url)} | ${escape_markdown_cell(lineNumber)} | ${escape_markdown_cell(columnNumber)} | ${escape_markdown_cell(String(hitCount))} | ${escape_markdown_cell(children)} | ${escape_markdown_cell(deoptReason)} |`
+			);
+		}
+	}
+
+	return `${lines.join('\n')}\n`;
+}
+
+/**
+ * @template T
+ * @param {string | null} profile_dir
+ * @param {string} profile_name
+ * @param {() => T | Promise<T>} fn
+ * @returns {Promise<T>}
+ */
+export async function with_cpu_profile(profile_dir, profile_name, fn) {
+	if (profile_dir === null) {
+		return await fn();
+	}
+
+	fs.mkdirSync(profile_dir, { recursive: true });
+
+	const session = new inspector.Session();
+	session.connect();
+
+	await session.post('Profiler.enable');
+	await session.post('Profiler.start');
+
+	try {
+		return await fn();
+	} finally {
+		const { profile } = /** @type {{ profile: object }} */ (await session.post('Profiler.stop'));
+		const safe_profile_name = safe(profile_name);
+		const profile_file = path.join(profile_dir, `${safe_profile_name}.cpuprofile`);
+		const markdown_file = path.join(profile_dir, `${safe_profile_name}.md`);
+		fs.writeFileSync(profile_file, JSON.stringify(profile));
+		fs.writeFileSync(
+			markdown_file,
+			profile_to_markdown(/** @type {Record<string, unknown>} */ (profile))
+		);
+		session.disconnect();
+	}
 }
diff --git a/documentation/docs/01-introduction/02-getting-started.md b/documentation/docs/01-introduction/02-getting-started.md
index e035e6d6df..ecb1055443 100644
--- a/documentation/docs/01-introduction/02-getting-started.md
+++ b/documentation/docs/01-introduction/02-getting-started.md
@@ -2,9 +2,9 @@
 title: Getting started
 ---
 
-We recommend using [SvelteKit](../kit), the official application framework from the Svelte team powered by [Vite](https://vite.dev/):
+We recommend using [SvelteKit](../kit), which lets you [build almost anything](../kit/project-types). It's the official application framework from the Svelte team and powered by [Vite](https://vite.dev/). Create a new project with:
 
-```bash
+```sh
 npx sv create myapp
 cd myapp
 npm install
@@ -15,15 +15,18 @@ Don't worry if you don't know Svelte yet! You can ignore all the nice features S
 
 ## Alternatives to SvelteKit
 
-You can also use Svelte directly with Vite by running `npm create vite@latest` and selecting the `svelte` option. With this, `npm run build` will generate HTML, JS and CSS files inside the `dist` directory using [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte). In most cases, you will probably need to [choose a routing library](faq#Is-there-a-router) as well.
+You can also use Svelte directly with Vite via [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte) by running `npm create vite@latest` and selecting the `svelte` option (or, if working with an existing project, adding the plugin to your `vite.config.js` file). With this, `npm run build` will generate HTML, JS, and CSS files inside the `dist` directory. In most cases, you will probably need to [choose a routing library](/packages#routing) as well.
 
-There are also plugins for [Rollup](https://github.com/sveltejs/rollup-plugin-svelte), [Webpack](https://github.com/sveltejs/svelte-loader) [and a few others](https://sveltesociety.dev/packages?category=build-plugins), but we recommend Vite.
+>[!NOTE] Vite is often used in standalone mode to build [single page apps (SPAs)](../kit/glossary#SPA), which you can also [build with SvelteKit](../kit/single-page-apps).
+
+There are also [plugins for other bundlers](/packages#bundler-plugins), but we recommend Vite.
 
 ## Editor tooling
 
-The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), and there are integrations with various other [editors](https://sveltesociety.dev/resources#editor-support) and tools as well.
+The Svelte team maintains a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), and there are integrations with various other [editors](https://sveltesociety.dev/collection/editor-support-c85c080efc292a34) and tools as well.
+
+You can also check your code from the command line using [`npx sv check`](https://svelte.dev/docs/cli/sv-check).
 
-You can also check your code from the command line using [sv check](https://github.com/sveltejs/cli).
 
 ## Getting help
 
diff --git a/documentation/docs/01-introduction/04-svelte-js-files.md b/documentation/docs/01-introduction/04-svelte-js-files.md
index 0e05484299..1d3e3dd61a 100644
--- a/documentation/docs/01-introduction/04-svelte-js-files.md
+++ b/documentation/docs/01-introduction/04-svelte-js-files.md
@@ -4,7 +4,7 @@ title: .svelte.js and .svelte.ts files
 
 Besides `.svelte` files, Svelte also operates on `.svelte.js` and `.svelte.ts` files.
 
-These behave like any other `.js` or `.ts` module, except that you can use runes. This is useful for creating reusable reactive logic, or sharing reactive state across your app.
+These behave like any other `.js` or `.ts` module, except that you can use runes. This is useful for creating reusable reactive logic, or sharing reactive state across your app (though note that you [cannot export reassigned state]($state#Passing-state-across-modules)).
 
 > [!LEGACY]
 > This is a concept that didn't exist prior to Svelte 5
diff --git a/documentation/docs/01-introduction/xx-props.md b/documentation/docs/01-introduction/xx-props.md
deleted file mode 100644
index cad854d878..0000000000
--- a/documentation/docs/01-introduction/xx-props.md
+++ /dev/null
@@ -1,139 +0,0 @@
----
-title: Public API of a component
----
-
-### Public API of a component
-
-Svelte uses the `$props` rune to declare _properties_ or _props_, which means describing the public interface of the component which becomes accessible to consumers of the component.
-
-> [!NOTE] `$props` is one of several runes, which are special hints for Svelte's compiler to make things reactive.
-
-```svelte
-<script>
-	let { foo, bar, baz } = $props();
-
-	// Values that are passed in as props
-	// are immediately available
-	console.log({ foo, bar, baz });
-</script>
-```
-
-You can specify a fallback value for a prop. It will be used if the component's consumer doesn't specify the prop on the component when instantiating the component, or if the passed value is `undefined` at some point.
-
-```svelte
-<script>
-	let { foo = 'optional default initial value' } = $props();
-</script>
-```
-
-To get all properties, use rest syntax:
-
-```svelte
-<script>
-	let { a, b, c, ...everythingElse } = $props();
-</script>
-```
-
-You can use reserved words as prop names.
-
-```svelte
-<script>
-	// creates a `class` property, even
-	// though it is a reserved word
-	let { class: className } = $props();
-</script>
-```
-
-If you're using TypeScript, you can declare the prop types:
-
-```svelte
-<script lang="ts">
-	interface Props {
-		required: string;
-		optional?: number;
-		[key: string]: unknown;
-	}
-
-	let { required, optional, ...everythingElse }: Props = $props();
-</script>
-```
-
-If you're using JavaScript, you can declare the prop types using JSDoc:
-
-```svelte
-<script>
-	/** @type {{ x: string }} */
-	let { x } = $props();
-
-	// or use @typedef if you want to document the properties:
-
-	/**
-	 * @typedef {Object} MyProps
-	 * @property {string} y Some documentation
-	 */
-
-	/** @type {MyProps} */
-	let { y } = $props();
-</script>
-```
-
-If you export a `const`, `class` or `function`, it is readonly from outside the component.
-
-```svelte
-<script>
-	export const thisIs = 'readonly';
-
-	export function greet(name) {
-		alert(`hello ${name}!`);
-	}
-</script>
-```
-
-Readonly props can be accessed as properties on the element, tied to the component using [`bind:this` syntax](bindings#bind:this).
-
-### Reactive variables
-
-To change component state and trigger a re-render, just assign to a locally declared variable that was declared using the `$state` rune.
-
-Update expressions (`count += 1`) and property assignments (`obj.x = y`) have the same effect.
-
-```svelte
-<script>
-	let count = $state(0);
-
-	function handleClick() {
-		// calling this function will trigger an
-		// update if the markup references `count`
-		count = count + 1;
-	}
-</script>
-```
-
-Svelte's `<script>` blocks are run only when the component is created, so assignments within a `<script>` block are not automatically run again when a prop updates.
-
-```svelte
-<script>
-	let { person } = $props();
-	// this will only set `name` on component creation
-	// it will not update when `person` does
-	let { name } = person;
-</script>
-```
-
-If you'd like to react to changes to a prop, use the `$derived` or `$effect` runes instead.
-
-```svelte
-<script>
-	let count = $state(0);
-
-	let double = $derived(count * 2);
-
-	$effect(() => {
-		if (count > 10) {
-			alert('Too high!');
-		}
-	});
-</script>
-```
-
-For more information on reactivity, read the documentation around runes.
diff --git a/documentation/docs/01-introduction/xx-reactivity-fundamentals.md b/documentation/docs/01-introduction/xx-reactivity-fundamentals.md
deleted file mode 100644
index d5e67ada71..0000000000
--- a/documentation/docs/01-introduction/xx-reactivity-fundamentals.md
+++ /dev/null
@@ -1,144 +0,0 @@
----
-title: Reactivity fundamentals
----
-
-Reactivity is at the heart of interactive UIs. When you click a button, you expect some kind of response. It's your job as a developer to make this happen. It's Svelte's job to make your job as intuitive as possible, by providing a good API to express reactive systems.
-
-## Runes
-
-Svelte 5 uses _runes_, a powerful set of primitives for controlling reactivity inside your Svelte components and inside `.svelte.js` and `.svelte.ts` modules.
-
-Runes are function-like symbols that provide instructions to the Svelte compiler. You don't need to import them from anywhere — when you use Svelte, they're part of the language.
-
-The following sections introduce the most important runes for declare state, derived state and side effects at a high level. For more details refer to the later sections on [state](state) and [side effects](side-effects).
-
-## `$state`
-
-Reactive state is declared with the `$state` rune:
-
-```svelte
-<script>
-	let count = $state(0);
-</script>
-
-<button onclick={() => count++}>
-	clicks: {count}
-</button>
-```
-
-You can also use `$state` in class fields (whether public or private):
-
-```js
-// @errors: 7006 2554
-class Todo {
-	done = $state(false);
-	text = $state();
-
-	constructor(text) {
-		this.text = text;
-	}
-}
-```
-
-> [!LEGACY]
-> In Svelte 4, state was implicitly reactive if the variable was declared at the top level
->
-> ```svelte
-> <script>
-> 	let count = 0;
-> </script>
->
-> <button on:click={() => count++}>
-> 	clicks: {count}
-> </button>
-> ```
-
-## `$derived`
-
-Derived state is declared with the `$derived` rune:
-
-```svelte
-<script>
-	let count = $state(0);
-	let doubled = $derived(count * 2);
-</script>
-
-<button onclick={() => count++}>
-	{doubled}
-</button>
-
-<p>{count} doubled is {doubled}</p>
-```
-
-The expression inside `$derived(...)` should be free of side-effects. Svelte will disallow state changes (e.g. `count++`) inside derived expressions.
-
-As with `$state`, you can mark class fields as `$derived`.
-
-> [!LEGACY]
-> In Svelte 4, you could use reactive statements for this.
->
-> ```svelte
-> <script>
-> 	let count = 0;
-> 	$: doubled = count * 2;
-> </script>
->
-> <button on:click={() => count++}>
-> 	{doubled}
-> </button>
->
-> <p>{count} doubled is {doubled}</p>
-> ```
->
-> This only worked at the top level of a component.
-
-## `$effect`
-
-To run _side-effects_ when the component is mounted to the DOM, and when values change, we can use the `$effect` rune ([demo](/playground/untitled#H4sIAAAAAAAAE31T24rbMBD9lUG7kAQ2sbdlX7xOYNk_aB_rQhRpbAsU2UiTW0P-vbrYubSlYGzmzMzROTPymdVKo2PFjzMzfIusYB99z14YnfoQuD1qQh-7bmdFQEonrOppVZmKNBI49QthCc-OOOH0LZ-9jxnR6c7eUpOnuv6KeT5JFdcqbvbcBcgDz1jXKGg6ncFyBedYR6IzLrAZwiN5vtSxaJA-EzadfJEjKw11C6GR22-BLH8B_wxdByWpvUYtqqal2XB6RVkG1CoHB6U1WJzbnYFDiwb3aGEdDa3Bm1oH12sQLTcNPp7r56m_00mHocSG97_zd7ICUXonA5fwKbPbkE2ZtMJGGVkEdctzQi4QzSwr9prnFYNk5hpmqVuqPQjNnfOJoMF22lUsrq_UfIN6lfSVyvQ7grB3X2mjMZYO3XO9w-U5iLx42qg29md3BP_ni5P4gy9ikTBlHxjLzAtPDlyYZmRdjAbGq7HprEQ7p64v4LU_guu0kvAkhBim3nMplWl8FreQD-CW20aZR0wq12t-KqDWeBywhvexKC3memmDwlHAv9q4Vo2ZK8KtK0CgX7u9J8wXbzdKv-nRnfF_2baTqlYoWUF2h5efl9-n0O6koAMAAA==)):
-
-```svelte
-<script>
-	let size = $state(50);
-	let color = $state('#ff3e00');
-
-	let canvas;
-
-	$effect(() => {
-		const context = canvas.getContext('2d');
-		context.clearRect(0, 0, canvas.width, canvas.height);
-
-		// this will re-run whenever `color` or `size` change
-		context.fillStyle = color;
-		context.fillRect(0, 0, size, size);
-	});
-</script>
-
-<canvas bind:this={canvas} width="100" height="100" />
-```
-
-The function passed to `$effect` will run when the component mounts, and will re-run after any changes to the values it reads that were declared with `$state` or `$derived` (including those passed in with `$props`). Re-runs are batched (i.e. changing `color` and `size` in the same moment won't cause two separate runs), and happen after any DOM updates have been applied.
-
-> [!LEGACY]
-> In Svelte 4, you could use reactive statements for this.
->
-> ```svelte
-> <script>
-> 	let size = 50;
-> 	let color = '#ff3e00';
->
-> 	let canvas;
->
-> 	$: {
-> 		const context = canvas.getContext('2d');
-> 		context.clearRect(0, 0, canvas.width, canvas.height);
->
-> 		// this will re-run whenever `color` or `size` change
-> 		context.fillStyle = color;
-> 		context.fillRect(0, 0, size, size);
-> 	}
-> </script>
->
-> <canvas bind:this={canvas} width="100" height="100" />
-> ```
->
-> This only worked at the top level of a component.
diff --git a/documentation/docs/02-runes/01-what-are-runes.md b/documentation/docs/02-runes/01-what-are-runes.md
index dc163ebdf1..59c371eb49 100644
--- a/documentation/docs/02-runes/01-what-are-runes.md
+++ b/documentation/docs/02-runes/01-what-are-runes.md
@@ -2,7 +2,7 @@
 title: What are runes?
 ---
 
-> [!NOTE] **rune** /ro͞on/ _noun_
+> [!NOTE] **rune** /ruːn/ _noun_
 >
 > A letter or mark used as a mystical or magic symbol.
 
diff --git a/documentation/docs/02-runes/02-$state.md b/documentation/docs/02-runes/02-$state.md
index 77140dc690..b90c71366a 100644
--- a/documentation/docs/02-runes/02-$state.md
+++ b/documentation/docs/02-runes/02-$state.md
@@ -1,5 +1,6 @@
 ---
 title: $state
+tags: rune-state
 ---
 
 The `$state` rune allows you to create _reactive state_, which means that your UI _reacts_ when it changes.
@@ -20,9 +21,7 @@ Unlike other frameworks you may have encountered, there is no API for interactin
 
 If `$state` is used with an array or a simple object, the result is a deeply reactive _state proxy_. [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) allow Svelte to run code when you read or write properties, including via methods like `array.push(...)`, triggering granular updates.
 
-> [!NOTE] Classes like `Set` and `Map` will not be proxied, but Svelte provides reactive implementations for various built-ins like these that can be imported from [`svelte/reactivity`](./svelte-reactivity).
-
-State is proxified recursively until Svelte finds something other than an array or simple object. In a case like this...
+State is proxified recursively until Svelte finds something other than an array or simple object (like a class or an object created with `Object.create`). In a case like this...
 
 ```js
 let todos = $state([
@@ -44,12 +43,7 @@ todos[0].done = !todos[0].done;
 If you push a new object to the array, it will also be proxified:
 
 ```js
-// @filename: ambient.d.ts
-declare global {
-	const todos: Array<{ done: boolean, text: string }>
-}
-
-// @filename: index.js
+let todos = [{ done: false, text: 'add more todos' }];
 // ---cut---
 todos.push({
 	done: false,
@@ -57,7 +51,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:
 
@@ -72,16 +66,15 @@ todos[0].done = !todos[0].done;
 
 ### Classes
 
-You can also use `$state` in class fields (whether public or private):
+Class instances are not proxied. Instead, you can use `$state` in class fields (whether public or private), or as the first assignment to a property immediately inside the `constructor`:
 
 ```js
 // @errors: 7006 2554
 class Todo {
 	done = $state(false);
-	text = $state();
 
 	constructor(text) {
-		this.text = text;
+		this.text = $state(text);
 	}
 
 	reset() {
@@ -115,10 +108,9 @@ You can either use an inline function...
 // @errors: 7006 2554
 class Todo {
 	done = $state(false);
-	text = $state();
 
 	constructor(text) {
-		this.text = text;
+		this.text = $state(text);
 	}
 
 	+++reset = () => {+++
@@ -128,6 +120,10 @@ class Todo {
 }
 ```
 
+### 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`
 
 In cases where you don't want objects and arrays to be deeply reactive you can use `$state.raw`.
@@ -152,6 +148,8 @@ person = {
 
 This can improve performance with large arrays and objects that you weren't planning to mutate anyway, since it avoids the cost of making them reactive. Note that raw state can _contain_ reactive state (for example, a raw array of reactive objects).
 
+As with `$state`, you can declare class fields using `$state.raw`.
+
 ## `$state.snapshot`
 
 To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:
@@ -169,6 +167,23 @@ To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snaps
 
 This is handy when you want to pass some state to an external library or API that doesn't expect a proxy, such as `structuredClone`.
 
+If a value has a `toJSON` method, the snapshot will clone the value returned from `toJSON` instead of the original object.
+
+## `$state.eager`
+
+When state changes, it may not be reflected in the UI immediately if it is used by an `await` expression, because [updates are synchronized](await-expressions#Synchronized-updates).
+
+In some cases, you may want to update the UI as soon as the state changes. For example, you might want to update a navigation bar when the user clicks on a link, so that they get visual feedback while waiting for the new page to load. To do this, use `$state.eager(value)`:
+
+```svelte
+<nav>
+	<a href="/" aria-current={$state.eager(pathname) === '/' ? 'page' : null}>home</a>
+	<a href="/about" aria-current={$state.eager(pathname) === '/about' ? 'page' : null}>about</a>
+</nav>
+```
+
+Use this feature sparingly, and only to provide feedback in response to user action — in general, allowing Svelte to coordinate updates will provide a better user experience.
+
 ## Passing state into functions
 
 JavaScript is a _pass-by-value_ language — when you call a function, the arguments are the _values_ rather than the _variables_. In other words:
@@ -255,3 +270,83 @@ console.log(total.value); // 7
 ```
 
 ...though if you find yourself writing code like that, consider using [classes](#Classes) instead.
+
+## Passing state across modules
+
+You can declare state in `.svelte.js` and `.svelte.ts` files, but you can only _export_ that state if it's not directly reassigned. In other words you can't do this:
+
+```js
+/// file: state.svelte.js
+export let count = $state(0);
+
+export function increment() {
+	count += 1;
+}
+```
+
+That's because every reference to `count` is transformed by the Svelte compiler — the code above is roughly equivalent to this:
+
+```js
+/// file: state.svelte.js (compiler output)
+// @filename: index.ts
+interface Signal<T> {
+	value: T;
+}
+
+interface Svelte {
+	state<T>(value?: T): Signal<T>;
+	get<T>(source: Signal<T>): T;
+	set<T>(source: Signal<T>, value: T): void;
+}
+declare const $: Svelte;
+// ---cut---
+export let count = $.state(0);
+
+export function increment() {
+	$.set(count, $.get(count) + 1);
+}
+```
+
+> [!NOTE] You can see the code Svelte generates by clicking the 'JS Output' tab in the [playground](/playground).
+
+Since the compiler only operates on one file at a time, if another file imports `count` Svelte doesn't know that it needs to wrap each reference in `$.get` and `$.set`:
+
+```js
+// @filename: state.svelte.js
+export let count = 0;
+
+// @filename: index.js
+// ---cut---
+import { count } from './state.svelte.js';
+
+console.log(typeof count); // 'object', not 'number'
+```
+
+This leaves you with two options for sharing state between modules — either don't reassign it...
+
+```js
+// This is allowed — since we're updating
+// `counter.count` rather than `counter`,
+// Svelte doesn't wrap it in `$.state`
+export const counter = $state({
+	count: 0
+});
+
+export function increment() {
+	counter.count += 1;
+}
+```
+
+...or don't directly export it:
+
+```js
+let count = $state(0);
+
+export function getCount() {
+	return count;
+}
+
+export function increment() {
+	count += 1;
+}
+```
diff --git a/documentation/docs/02-runes/03-$derived.md b/documentation/docs/02-runes/03-$derived.md
index 6b38f99746..f85ba90baa 100644
--- a/documentation/docs/02-runes/03-$derived.md
+++ b/documentation/docs/02-runes/03-$derived.md
@@ -1,5 +1,6 @@
 ---
 title: $derived
+tags: rune-derived
 ---
 
 Derived state is declared with the `$derived` rune:
@@ -50,4 +51,96 @@ In essence, `$derived(expression)` is equivalent to `$derived.by(() => expressio
 
 Anything read synchronously inside the `$derived` expression (or `$derived.by` function body) is considered a _dependency_ of the derived state. When the state changes, the derived will be marked as _dirty_ and recalculated when it is next read.
 
+In addition, if an expression contains an [`await`](await-expressions), Svelte transforms it such that any state _after_ the `await` is also tracked — in other words, in a case like this...
+
+```js
+let a = Promise.resolve(1);
+let b = 2;
+// ---cut---
+let total = $derived(await a + b);
+```
+
+...both `a` and `b` are tracked, even though `b` is only read once `a` has resolved, after the initial execution. (This does not apply to `await` in functions that are called by the expression, only the expression itself.)
+
 To exempt a piece of state from being treated as a dependency, use [`untrack`](svelte#untrack).
+
+## Overriding derived values
+
+Derived expressions are recalculated when their dependencies change, but you can temporarily override their values by reassigning them (unless they are declared with `const`). This can be useful for things like _optimistic UI_, where a value is derived from the 'source of truth' (such as data from your server) but you'd like to show immediate feedback to the user:
+
+```svelte
+<script>
+	let { post, like } = $props();
+
+	let likes = $derived(post.likes);
+
+	async function onclick() {
+		// increment the `likes` count immediately...
+		likes += 1;
+
+		// and tell the server, which will eventually update `post`
+		try {
+			await like();
+		} catch {
+			// failed! roll back the change
+			likes -= 1;
+		}
+	}
+</script>
+
+<button {onclick}>🧡 {likes}</button>
+```
+
+> [!NOTE] Prior to Svelte 5.25, deriveds were read-only.
+
+## Deriveds and reactivity
+
+Unlike `$state`, which converts objects and arrays to [deeply reactive proxies]($state#Deep-state), `$derived` values are left as-is. For example, [in a case like this](/playground/untitled#H4sIAAAAAAAAE4VU22rjMBD9lUHd3aaQi9PdstS1A3t5XvpQ2Ic4D7I1iUUV2UjjNMX431eS7TRdSosxgjMzZ45mjt0yzffIYibvy0ojFJWqDKCQVBk2ZVup0LJ43TJ6rn2aBxw-FP2o67k9oCKP5dziW3hRaUJNjoYltjCyplWmM1JIIAn3FlL4ZIkTTtYez6jtj4w8WwyXv9GiIXiQxLVs9pfTMR7EuoSLIuLFbX7Z4930bZo_nBrD1bs834tlfvsBz9_SyX6PZXu9XaL4gOWn4sXjeyzftv4ZWfyxubpzxzg6LfD4MrooxELEosKCUPigQCMPKCZh0OtQE1iSxcsmdHuBvCiHZXALLXiN08EL3RRkaJ_kDVGle0HcSD5TPEeVtj67O4Nrg9aiSNtBY5oODJkrL5QsHtN2cgXp6nSJMWzpWWGasdlsGEMbzi5jPr5KFr0Ep7pdeM2-TCelCddIhDxAobi1jqF3cMaC1RKp64bAW9iFAmXGIHfd4wNXDabtOLN53w8W53VvJoZLh7xk4Rr3CoL-UNoLhWHrT1JQGcM17u96oES5K-kc2XOzkzqGCKL5De79OUTyyrg1zgwXsrEx3ESfx4Bz0M5UjVMHB24mw9SuXtXFoN13fYKOM1tyUT3FbvbWmSWCZX2Er-41u5xPoml45svRahl9Wb9aasbINJixDZwcPTbyTLZSUsAvrg_cPuCR7s782_WU8343Y72Qtlb8OYatwuOQvuN13M_hJKNfxann1v1U_B1KZ_D_mzhzhz24fw85CSz2irtN9w9HshBK7AQAAA==)...
+
+```js
+// @errors: 7005
+let items = $state([ /*...*/ ]);
+
+let index = $state(0);
+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').
+
+If the new value of a derived is referentially identical to its previous value, downstream updates will be skipped. In other words, Svelte will only update the text inside the button when `large` changes, not when `count` changes, even though `large` depends on `count`:
+
+```svelte
+<script>
+	let count = $state(0);
+	let large = $derived(count > 10);
+</script>
+
+<button onclick={() => count++}>
+	{large}
+</button>
+```
diff --git a/documentation/docs/02-runes/04-$effect.md b/documentation/docs/02-runes/04-$effect.md
index b338795220..a13fc7bc46 100644
--- a/documentation/docs/02-runes/04-$effect.md
+++ b/documentation/docs/02-runes/04-$effect.md
@@ -1,16 +1,13 @@
 ---
 title: $effect
+tags: rune-effect
 ---
 
-Effects are what make your application _do things_. When Svelte runs an effect function, it tracks which pieces of state (and derived state) are accessed (unless accessed inside [`untrack`](svelte#untrack)), and re-runs the function when that state later changes.
+Effects are functions that run when state updates, and can be used for things like calling third-party libraries, drawing on `<canvas>` elements, or making network requests. They only run in the browser, not during server-side rendering.
 
-Most of the effects in a Svelte app are created by Svelte itself — they're the bits that update the text in `<h1>hello {name}!</h1>` when `name` changes, for example.
+Generally speaking, you should _not_ update state inside effects, as it will make code more convoluted and will often lead to never-ending update cycles. If you find yourself doing so, see [when not to use `$effect`](#When-not-to-use-$effect) to learn about alternative approaches.
 
-But you can also create your own effects with the `$effect` rune, which is useful when you need to synchronize an external system (whether that's a library, or a `<canvas>` element, or something across a network) with state inside your Svelte app.
-
-> [!NOTE] Avoid overusing `$effect`! When you do too much work in effects, code often becomes difficult to understand and maintain. See [when not to use `$effect`](#When-not-to-use-$effect) to learn about alternative approaches.
-
-Your effects run after the component has been mounted to the DOM, and in a [microtask](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide) after state changes ([demo](/playground/untitled#H4sIAAAAAAAAE31S246bMBD9lZF3pSRSAqTVvrCAVPUP2sdSKY4ZwJJjkD0hSVH-vbINuWxXfQH5zMyZc2ZmZLVUaFn6a2R06ZGlHmBrpvnBvb71fWQHVOSwPbf4GS46TajJspRlVhjZU1HqkhQSWPkHIYdXS5xw-Zas3ueI6FRn7qHFS11_xSRZhIxbFtcDtw7SJb1iXaOg5XIFeQGjzyPRaevYNOGZIJ8qogbpe8CWiy_VzEpTXiQUcvPDkSVrSNZz1UlW1N5eLcqmpdXUvaQ4BmqlhZNUCgxuzFHDqUWNAxrYeUM76AzsnOsdiJbrBp_71lKpn3RRbii-4P3f-IMsRxS-wcDV_bL4PmSdBa2wl7pKnbp8DMgVvJm8ZNskKRkEM_OzyOKQFkgqOYBQ3Nq89Ns0nbIl81vMFN-jKoLMTOr-SOBOJS-Z8f5Y6D1wdcR8dFqvEBdetK-PHwj-z-cH8oHPY54wRJ8Ys7iSQ3Bg3VA9azQbmC9k35kKzYa6PoVtfwbbKVnBixBiGn7Pq0rqJoUtHiCZwAM3jdTPWCVtr_glhVrhecIa3vuksJ_b7TqFs4DPyriSjd5IwoNNQaAmNI-ESfR2p8zimzvN1swdCkvJHPH6-_oX8o1SgcIDAAA=)):
+You can create an effect with the `$effect` rune ([demo](/playground/untitled#H4sIAAAAAAAAE31S246bMBD9lZF3pSRSAqTVvrCAVPUP2sdSKY4ZwJJjkD0hSVH-vbINuWxXfQH5zMyZc2ZmZLVUaFn6a2R06ZGlHmBrpvnBvb71fWQHVOSwPbf4GS46TajJspRlVhjZU1HqkhQSWPkHIYdXS5xw-Zas3ueI6FRn7qHFS11_xSRZhIxbFtcDtw7SJb1iXaOg5XIFeQGjzyPRaevYNOGZIJ8qogbpe8CWiy_VzEpTXiQUcvPDkSVrSNZz1UlW1N5eLcqmpdXUvaQ4BmqlhZNUCgxuzFHDqUWNAxrYeUM76AzsnOsdiJbrBp_71lKpn3RRbii-4P3f-IMsRxS-wcDV_bL4PmSdBa2wl7pKnbp8DMgVvJm8ZNskKRkEM_OzyOKQFkgqOYBQ3Nq89Ns0nbIl81vMFN-jKoLMTOr-SOBOJS-Z8f5Y6D1wdcR8dFqvEBdetK-PHwj-z-cH8oHPY54wRJ8Ys7iSQ3Bg3VA9azQbmC9k35kKzYa6PoVtfwbbKVnBixBiGn7Pq0rqJoUtHiCZwAM3jdTPWCVtr_glhVrhecIa3vuksJ_b7TqFs4DPyriSjd5IwoNNQaAmNI-ESfR2p8zimzvN1swdCkvJHPH6-_oX8o1SgcIDAAA=)):
 
 ```svelte
 <script>
@@ -29,16 +26,26 @@ Your effects run after the component has been mounted to the DOM, and in a [micr
 	});
 </script>
 
-<canvas bind:this={canvas} width="100" height="100" />
+<canvas bind:this={canvas} width="100" height="100"></canvas>
 ```
 
-Re-runs are batched (i.e. changing `color` and `size` in the same moment won't cause two separate runs), and happen after any DOM updates have been applied.
+When Svelte runs an effect function, it tracks which pieces of state (and derived state) are accessed (unless accessed inside [`untrack`](svelte#untrack)), and re-runs the function when that state later changes.
+
+> [!NOTE] If you're having difficulty understanding why your `$effect` is rerunning or is not running see [understanding dependencies](#Understanding-dependencies). Effects are triggered differently than the `$:` blocks you may be used to if coming from Svelte 4.
+
+### Understanding lifecycle
+
+Your effects run after the component has been mounted to the DOM, and in a [microtask](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide) after state changes. Re-runs are batched (i.e. changing `color` and `size` in the same moment won't cause two separate runs), and happen after any DOM updates have been applied.
 
-You can place `$effect` anywhere, not just at the top level of a component, as long as it is called during component initialization (or while a parent effect is active). It is then tied to the lifecycle of the component (or parent effect) and will therefore destroy itself when the component unmounts (or the parent effect is destroyed).
+You can use `$effect` anywhere, not just at the top level of a component, as long as it is called while a parent effect is running.
 
-You can return a function from `$effect`, which will run immediately before the effect re-runs, and before it is destroyed ([demo](/playground/untitled#H4sIAAAAAAAAE42RQY-bMBCF_8rI2kPopiXpMQtIPfbeW6m0xjyKtWaM7CFphPjvFVB2k2oPe7LmzXzyezOjaqxDVKefo5JrD3VaBLVXrLu5-tb3X-IZTmat0hHv6cazgCWqk8qiCbaXouRSHISMH1gop4coWrA7JE9bp7PO2QjjuY5vA8fDYZ3hUh7QNDCy2yWUFzTOUilpSj9aG-linaMKFGACtKCmSwvGGYGeLQvCWbtnMq3m34grajxHoa1JOUXI93_V_Sfz7Oz7Mafj0ypN-zvHm8dSAmQITP_xaUq2IU1GO1dp80I2Uh_82dao92Rl9R8GvgF0QrbrUFstcFeq0PgAkha0LoICPoeB4w1SJUvsZcj4rvcMlvmvGlGCv6J-DeSgw2vabQnJlm55p7nM0rcTctYei3HZxZSl7XHVqkHEM3k2zpqXfFyj393zU05fpyI6f0HI0hUoPoamC9roKDeo2ivBH1EnCQOmX9NfYw2GHrgCAAA=)).
+> [!NOTE] Svelte uses effects internally to represent logic and expressions in your template — this is how `<h1>hello {name}!</h1>` updates when `name` changes.
 
+An effect can return a _teardown function_ which will run immediately before the effect re-runs:
+
+<!-- codeblock:start {"title":"Effect teardown"} -->
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	let count = $state(0);
 	let milliseconds = $state(1000);
@@ -50,7 +57,7 @@ You can return a function from `$effect`, which will run immediately before the
 		}, milliseconds);
 
 		return () => {
-			// if a callback is provided, it will run
+			// if a teardown function is provided, it will run
 			// a) immediately before the effect re-runs
 			// b) when the component is destroyed
 			clearInterval(interval);
@@ -63,10 +70,15 @@ You can return a function from `$effect`, which will run immediately before the
 <button onclick={() => (milliseconds *= 2)}>slower</button>
 <button onclick={() => (milliseconds /= 2)}>faster</button>
 ```
+<!-- codeblock:end -->
+
+Teardown functions also run when the effect is destroyed, which happens when its parent is destroyed (for example, a component is unmounted) or the parent effect re-runs.
 
 ### Understanding dependencies
 
-`$effect` automatically picks up any reactive values (`$state`, `$derived`, `$props`) that are _synchronously_ read inside its function body and registers them as dependencies. When those dependencies change, the `$effect` schedules a rerun.
+`$effect` automatically picks up any reactive values (`$state`, `$derived`, `$props`) that are _synchronously_ read inside its function body (including indirectly, via function calls) and registers them as dependencies. When those dependencies change, the `$effect` schedules a re-run.
+
+If `$state` and `$derived` are used directly inside the `$effect` (for example, during creation of a [reactive class](https://svelte.dev/docs/svelte/$state#Classes)), those values will _not_ be treated as dependencies.
 
 Values that are read _asynchronously_ — after an `await` or inside a `setTimeout`, for example — will not be tracked. Here, the canvas will be repainted when `color` changes, but not when `size` changes ([demo](/playground/untitled#H4sIAAAAAAAAE31T246bMBD9lZF3pWSlBEirfaEQqdo_2PatVIpjBrDkGGQPJGnEv1e2IZfVal-wfHzmzJyZ4cIqqdCy9M-F0blDlnqArZjmB3f72XWRHVCRw_bc4me4aDWhJstSlllhZEfbQhekkMDKfwg5PFvihMvX5OXH_CJa1Zrb0-Kpqr5jkiwC48rieuDWQbqgZ6wqFLRcvkC-hYvnkWi1dWqa8ESQTxFRjfQWsOXiWzmr0sSLhEJu3p1YsoJkNUcdZUnN9dagrBu6FVRQHAM10sJRKgUG16bXcGxQ44AGdt7SDkTDdY02iqLHnJVU6hedlWuIp94JW6Tf8oBt_8GdTxlF0b4n0C35ZLBzXb3mmYn3ae6cOW74zj0YVzDNYXRHFt9mprNgHfZSl6mzml8CMoLvTV6wTZIUDEJv5us2iwMtiJRyAKG4tXnhl8O0yhbML0Wm-B7VNlSSSd31BG7z8oIZZ6dgIffAVY_5xdU9Qrz1Bnx8fCfwtZ7v8Qc9j3nB8PqgmMWlHIID6-bkVaPZwDySfWtKNGtquxQ23Qlsq2QJT0KIqb8dL0up6xQ2eIBkAg_c1FI_YqW0neLnFCqFpwmreedJYT7XX8FVOBfwWRhXstZrSXiwKQjUhOZeMIleb5JZfHWn2Yq5pWEpmR7Hv-N_wEqT8hEEAAA=)):
 
@@ -125,17 +137,35 @@ An effect only reruns when the object it reads changes, not when a property insi
 <p>{state.value} doubled is {derived.value}</p>
 ```
 
-An effect only depends on the values that it read the last time it ran. If `a` is true, changes to `b` will [not cause this effect to rerun](/playground/untitled#H4sIAAAAAAAAE3WQ0WrDMAxFf0U1hTow1vcsMfQ7lj3YjlxEXTvEymC4_vfFC6Ewtidxde8RkrJw5DGJ9j2LoO8oWnGZJvEi-GuqIn2iZ1x1istsa6dLdqaJ1RAG9sigoYdjYs0onfYJm7fdMX85q3dE59CylA30CnJtDWxjSNHjq49XeZqXEChcT9usLUAOpIbHA0yzM78oColGhDVofLS3neZSS6mqOz-XD51ZmGOAGKwne-vztk-956CL0kAJsi7decupf4l658EUZX4I8yTWt93jSI5wFC3PC5aP8g0Aje5DcQEAAA==):
+An effect only depends on the values that it read the last time it ran. This has interesting implications for effects that have conditional code.
+
+For instance, if `condition` is `true` in the code snippet below, the code inside the `if` block will run and `color` will be evaluated. This means that changes to either `condition` or `color` [will cause the effect to re-run](/playground/untitled#H4sIAAAAAAAAE21RQW6DMBD8ytaNBJHaJFLViwNIVZ8RcnBgXVk1xsILTYT4e20TQg89IOPZ2fHM7siMaJBx9tmaWpFqjQNlAKXEihx7YVJpdIyfRkY3G4gB8Pi97cPanRtQU8AuwuF_eNUaQuPlOMtc1SlLRWlKUo1tOwJflUikQHZtA0klzCDc64Imx0ANn8bInV1CDhtHgjClrsftcSXotluLybOUb3g4JJHhOZs5WZpuIS9gjNqkJKQP5e2ClrR4SMdZ13E4xZ8zTPOTJU2A2uE_PQ9COCI926_hTVarIU4hu_REPlBrKq2q73ycrf1N-vS4TMUsulaVg3EtR8H9rFgsg8uUsT1B2F9eshigZHBRpuaD0D3mY8Qm2BfB5N2YyRzdNEYVDy0Ja-WsFjcOUuP1HvFLWA6H3XuHTUSmmDV2--0TXonxsKbp7G9C6R__NONS-MFNvxj_d6mBAgAA).
+
+Conversely, if `condition` is `false`, `color` will not be evaluated, and the effect will _only_ re-run again when `condition` changes.
 
 ```ts
-let a = false;
-let b = false;
+// @filename: ambient.d.ts
+declare module 'canvas-confetti' {
+	interface ConfettiOptions {
+		colors: string[];
+	}
+
+	function confetti(opts?: ConfettiOptions): void;
+	export default confetti;
+}
+
+// @filename: index.js
 // ---cut---
-$effect(() => {
-	console.log('running');
+import confetti from 'canvas-confetti';
+
+let condition = $state(true);
+let color = $state('#ff3e00');
 
-	if (a || b) {
-		console.log('inside if block');
+$effect(() => {
+	if (condition) {
+		confetti({ colors: [color] });
+	} else {
+		confetti();
 	}
 });
 ```
@@ -179,9 +209,11 @@ Apart from the timing, `$effect.pre` works exactly like `$effect`.
 
 ## `$effect.tracking`
 
-The `$effect.tracking` rune is an advanced feature that tells you whether or not the code is running inside a tracking context, such as an effect or inside your template ([demo](/playground/untitled#H4sIAAAAAAAACn3PwYrCMBDG8VeZDYIt2PYeY8Dn2HrIhqkU08nQjItS-u6buAt7UDzmz8ePyaKGMWBS-nNRcmdU-hHUTpGbyuvI3KZvDFLal0v4qvtIgiSZUSb5eWSxPfWSc4oB2xDP1XYk8HHiSHkICeXKeruDDQ4Demlldv4y0rmq6z10HQwuJMxGVv4mVVXDwcJS0jP9u3knynwtoKz1vifT_Z9Jhm0WBCcOTlDD8kyspmML5qNpHg40jc3fFryJ0iWsp_UHgz3180oBAAA=)):
+The `$effect.tracking` rune is an advanced feature that tells you whether or not the code is running inside a tracking context, such as an effect or inside your template:
 
+<!-- codeblock:start {"title":"$effect.tracking()"} -->
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	console.log('in component setup:', $effect.tracking()); // false
 
@@ -192,73 +224,55 @@ The `$effect.tracking` rune is an advanced feature that tells you whether or not
 
 <p>in template: {$effect.tracking()}</p> <!-- true -->
 ```
+<!-- codeblock:end -->
 
-This allows you to (for example) add things like subscriptions without causing memory leaks, by putting them in child effects. Here's a `readable` function that listens to changes from a callback function as long as it's inside a tracking context:
+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).
 
-```ts
-import { tick } from 'svelte';
-
-export default function readable<T>(
-	initial_value: T,
-	start: (callback: (update: (v: T) => T) => T) => () => void
-) {
-	let value = $state(initial_value);
-
-	let subscribers = 0;
-	let stop: null | (() => void) = null;
-
-	return {
-		get value() {
-			// If in a tracking context ...
-			if ($effect.tracking()) {
-				$effect(() => {
-					// ...and there's no subscribers yet...
-					if (subscribers === 0) {
-						// ...invoke the function and listen to changes to update state
-						stop = start((fn) => (value = fn(value)));
-					}
-
-					subscribers++;
-
-					// The return callback is called once a listener unlistens
-					return () => {
-						tick().then(() => {
-							subscribers--;
-							// If it was the last subscriber...
-							if (subscribers === 0) {
-								// ...stop listening to changes
-								stop?.();
-								stop = null;
-							}
-						});
-					};
-				});
-			}
-
-			return value;
-		}
-	};
-}
+## `$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:
+
+<!-- codeblock:start {"title":"$effect.pending"} -->
+```svelte
+<!--- file: App.svelte --->
+<script>
+	let a = $state(1);
+	let b = $state(2);
+
+	async function add(a, b) {
+		await new Promise((f) => setTimeout(f, 500)); // artificial delay
+		return a + b;
+	}
+</script>
+
+<button onclick={() => a++}>a++</button>
+<button onclick={() => b++}>b++</button>
+
+<p>{a} + {b} = {await add(a, b)}</p>
+
+{#if $effect.pending()}
+	<p>pending promises: {$effect.pending()}</p>
+{/if}
 ```
+<!-- codeblock:end -->
 
 ## `$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.
 
-```svelte
-<script>
-	let count = $state(0);
+```js
+const destroy = $effect.root(() => {
+	$effect(() => {
+		// setup
+	});
 
-	const cleanup = $effect.root(() => {
-		$effect(() => {
-			console.log(count);
-		});
+	return () => {
+		// cleanup
+	};
+});
 
-		return () => {
-			console.log('effect root cleanup');
-		};
-	});
-</script>
+// later...
+destroy();
 ```
 
 ## When not to use `$effect`
@@ -288,11 +302,15 @@ In general, `$effect` is best considered something of an escape hatch — useful
 
 > [!NOTE] For things that are more complicated than a simple expression like `count * 2`, you can also use `$derived.by`.
 
-You might be tempted to do something convoluted with effects to link one value to another. The following example shows two inputs for "money spent" and "money left" that are connected to each other. If you update one, the other should update accordingly. Don't use effects for this ([demo](/playground/untitled#H4sIAAAAAAAACpVRy26DMBD8FcvKgUhtoIdeHBwp31F6MGSJkBbHwksEQvx77aWQqooq9bgzOzP7mGTdIHipPiZJowOpGJAv0po2VmfnDv4OSBErjYdneHWzBJaCjcx91TWOToUtCIEE3cig0OIty44r5l1oDtjOkyFIsv3GINQ_CNYyGegd1DVUlCR7oU9iilDUcP8S8roYs9n8p2wdYNVFm4csTx872BxNCcjr5I11fdgonEkXsjP2CoUUZWMv6m6wBz2x7yxaM-iJvWeRsvSbSVeUy5i0uf8vKA78NIeJLSZWv1I8jQjLdyK4XuTSeIdmVKJGGI4LdjVOiezwDu1yG74My8PLCQaSiroe5s_5C2PHrkVGAgAA)):
+If you're using an effect because you want to be able to reassign the derived value (to build an optimistic UI, for example) note that [deriveds can be directly overridden]($derived#Overriding-derived-values) as of Svelte 5.25.
 
+You might be tempted to do something convoluted with effects to link one value to another. The following example shows two inputs for "money spent" and "money left" that are connected to each other. If you update one, the other should update accordingly. Instead of using effects for this...
+
+<!-- codeblock:start {"title":"Setting state in effects (don't do this!)"} -->
 ```svelte
+<!--- file: App.svelte --->
 <script>
-	let total = 100;
+	const total = 100;
 	let spent = $state(0);
 	let left = $state(total);
 
@@ -314,53 +332,29 @@ You might be tempted to do something convoluted with effects to link one value t
 	<input type="range" bind:value={left} max={total} />
 	{left}/{total} left
 </label>
-```
-
-Instead, use callbacks where possible ([demo](/playground/untitled#H4sIAAAAAAAACo1SMW6EMBD8imWluFMSIEUaDiKlvy5lSOHjlhOSMRZeTiDkv8deMEEJRcqdmZ1ZjzzxqpZgePo5cRw18JQA_sSVaPz0rnVk7iDRYxdhYA8vW4Wg0NnwzJRdrfGtUAVKQIYtCsly9pIkp4AZ7cQOezAoEA7JcWUkVBuCdol0dNWrEutWsV5fHfnhPQ5wZJMnCwyejxCh6G6A0V3IHk4zu_jOxzzPBxBld83PTr7xXrb3rUNw8PbiYJ3FP22oTIoLSComq5XuXTeu8LzgnVA3KDgj13wiQ8taRaJ82rzXskYM-URRlsXktejjgNLoo9e4fyf70_8EnwncySX1GuunX6kGRwnzR_BgaPNaGy3FmLJKwrCUeBM6ZUn0Cs2mOlp3vwthQJ5i14P9st9vZqQlsQIAAA==)):
-
-```svelte
-<script>
-	let total = 100;
-	let spent = $state(0);
-	let left = $state(total);
-
-	function updateSpent(e) {
-		spent = +e.target.value;
-		left = total - spent;
-	}
 
-	function updateLeft(e) {
-		left = +e.target.value;
-		spent = total - left;
+<style>
+	label {
+		display: flex;
+		gap: 0.5em;
 	}
-</script>
-
-<label>
-	<input type="range" value={spent} oninput={updateSpent} max={total} />
-	{spent}/{total} spent
-</label>
-
-<label>
-	<input type="range" value={left} oninput={updateLeft} max={total} />
-	{left}/{total} left
-</label>
+</style>
 ```
+<!-- codeblock:end -->
 
-If you need to use bindings, for whatever reason (for example when you want some kind of "writable `$derived`"), consider using getters and setters to synchronise state ([demo](/playground/untitled#H4sIAAAAAAAACpWRwW6DMBBEf8WyekikFOihFwcq9TvqHkyyQUjGsfCCQMj_XnvBNKpy6Qn2DTOD1wu_tRocF18Lx9kCFwT4iRvVxenT2syNoDGyWjl4xi93g2AwxPDSXfrW4oc0EjUgwzsqzSr2VhTnxJwNHwf24lAhHIpjVDZNwy1KS5wlNoGMSg9wOCYksQccerMlv65p51X0p_Xpdt_4YEy9yTkmV3z4MJT579-bUqsaNB2kbI0dwlnCgirJe2UakJzVrbkKaqkWivasU1O1ULxnOVk3JU-Uxti0p_-vKO4no_enbQ_yXhnZn0aHs4b1jiJMK7q2zmo1C3bTMG3LaZQVrMjeoSPgaUtkDxePMCEX2Ie6b_8D4WyJJEwCAAA=)):
+...use `oninput` callbacks or — better still — [function bindings](bind#Function-bindings) where possible:
 
+<!-- codeblock:start {"title":"Setting state with function bindings"} -->
 ```svelte
+<!--- file: App.svelte --->
 <script>
-	let total = 100;
+	const total = 100;
 	let spent = $state(0);
+	let left = $derived(total - spent);
 
-	let left = {
-		get value() {
-			return total - spent;
-		},
-		set value(v) {
-			spent = total - v;
-		}
-	};
++++	function updateLeft(left) {
+		spent = total - left;
+	}+++
 </script>
 
 <label>
@@ -369,9 +363,17 @@ If you need to use bindings, for whatever reason (for example when you want some
 </label>
 
 <label>
-	<input type="range" bind:value={left.value} max={total} />
-	{left.value}/{total} left
+	<input type="range" +++bind:value={() => left, updateLeft}+++ max={total} />
+	{left}/{total} left
 </label>
+
+<style>
+	label {
+		display: flex;
+		gap: 0.5em;
+	}
+</style>
 ```
+<!-- codeblock:end -->
 
 If you absolutely have to update `$state` within an effect and run into an infinite loop because you read and write to the same `$state`, use [untrack](svelte#untrack).
diff --git a/documentation/docs/02-runes/05-$props.md b/documentation/docs/02-runes/05-$props.md
index 58e9b36f8e..3cf67837f6 100644
--- a/documentation/docs/02-runes/05-$props.md
+++ b/documentation/docs/02-runes/05-$props.md
@@ -1,5 +1,6 @@
 ---
 title: $props
+tags: rune-props
 ---
 
 The inputs to a component are referred to as _props_, which is short for _properties_. You pass props to components just like you pass attributes to elements:
@@ -37,7 +38,7 @@ On the other side, inside `MyComponent.svelte`, we can receive props with the `$
 
 ## Fallback values
 
-Destructuring allows us to declare fallback values, which are used if the parent component does not set a given prop:
+Destructuring allows us to declare fallback values, which are used if the parent component does not set a given prop (or the value is `undefined`):
 
 ```js
 let { adjective = 'happy' } = $props();
@@ -63,8 +64,9 @@ let { a, b, c, ...others } = $props();
 
 ## Updating props
 
-References to a prop inside a component update when the prop itself updates — when `count` changes in `App.svelte`, it will also change inside `Child.svelte`. But the child component is able to temporarily override the prop value, which can be useful for unsaved ephemeral state ([demo](/playground/untitled#H4sIAAAAAAAAE6WQ0WrDMAxFf0WIQR0Wmu3VTQJln7HsIfVcZubIxlbGRvC_DzuBraN92qPula50tODZWB1RPi_IX16jLALWSOOUq6P3-_ihLWftNEZ9TVeOWBNHlNhGFYznfqCBzeRdYHh6M_YVzsFNsNs3pdpGd4eBcqPVDMrNxNDBXeSRtXioDgO1zU8ataeZ2RE4Utao924RFXQ9iHXwvoPHKpW1xY4g_Bg0cSVhKS0p560Za95612ZC02ONrD8ZJYdZp_rGQ37ff_mSP86Np2TWZaNNmdcH56P4P67K66_SXoK9pG-5dF5Z9QEAAA==)):
+References to a prop inside a component update when the prop itself updates — when `count` changes in `App.svelte`, it will also change inside `Child.svelte`. But the child component is able to temporarily override the prop value, which can be useful for unsaved ephemeral state:
 
+<!-- codeblock:start {"title":"Temporarily updating props","selected":"Child.svelte"} -->
 ```svelte
 <!--- file: App.svelte --->
 <script>
@@ -90,11 +92,13 @@ References to a prop inside a component update when the prop itself updates —
 	clicks (child): {count}
 </button>
 ```
+<!-- codeblock:end -->
 
 While you can temporarily _reassign_ props, you should not _mutate_ props unless they are [bindable]($bindable).
 
-If the prop is a regular object, the mutation will have no effect ([demo](/playground/untitled#H4sIAAAAAAAAE3WQwU7DMBBEf2W1QmorQgJXk0RC3PkBwiExG9WQrC17U4Es_ztKUkQp9OjxzM7bjcjtSKjwyfKNp1aLORA4b13ADHszUED1HFE-3eyaBcy-Mw_O5eFAg8xa1wb6T9eWhVgCKiyD9sZJ3XAjZnTWCzzuzfAKvbcjbPJieR2jm_uGy-InweXqtd0baaliBG0nFgW3kBIUNWYo9CGoxE-UsgvIpw2_oc9-LmAPJBCPDJCggqvlVtvdH9puErEMlvVg9HsVtzuoaojzkKKAfRuALVDfk5ZZW0fmy05wXcFdwyktlUs-KIinljTXrRVnm7-kL9dYLVbUAQAA)):
+If the prop is a regular object, the mutation will have no effect:
 
+<!-- codeblock:start {"title":"Non-reactive props","selected":"Child.svelte"} -->
 ```svelte
 <!--- file: App.svelte --->
 <script>
@@ -117,9 +121,11 @@ If the prop is a regular object, the mutation will have no effect ([demo](/playg
 	clicks: {object.count}
 </button>
 ```
+<!-- codeblock:end -->
 
-If the prop is a reactive state proxy, however, then mutations _will_ have an effect but you will see an [`ownership_invalid_mutation`](runtime-warnings#Client-warnings-ownership_invalid_mutation) warning, because the component is mutating state that does not 'belong' to it ([demo](/playground/untitled#H4sIAAAAAAAAE3WR0U7DMAxFf8VESBuiauG1WycheOEbKA9p67FA6kSNszJV-XeUZhMw2GN8r-1znUmQ7FGU4pn2UqsOes-SlSGRia3S6ET5Mgk-2OiJBZGdOh6szd0eNcdaIx3-V28NMRI7UYq1awdleVNTzaq3ZmB43CndwXYwPSzyYn4dWxermqJRI4Np3rFlqODasWRcTtAaT1zCHYSbVU3r4nsyrdPMKTUFKDYiE4yfLEoePIbsQpqfy3_nOVMuJIqg0wk1RFg7GOuWfwEbz2wIDLVatR_VtLyBagNTHFIUMCqtoZXeIfAOU1JoUJsR2IC3nWTMjt7GM4yKdyBhlAMpesvhydCC0y_i0ZagHByMh26WzUhXUUxKnpbcVnBfUwhznJnNlac7JkuIURL-2VVfwxflyrWcSQIAAA==)):
+If the prop is a reactive state proxy, however, then mutations _will_ have an effect but you will see an [`ownership_invalid_mutation`](runtime-warnings#Client-warnings-ownership_invalid_mutation) warning, because the component is mutating state that does not 'belong' to it:
 
+<!-- codeblock:start {"title":"Invalid mutation","selected":"Child.svelte"} -->
 ```svelte
 <!--- file: App.svelte --->
 <script>
@@ -146,8 +152,19 @@ If the prop is a reactive state proxy, however, then mutations _will_ have an ef
 	clicks: {object.count}
 </button>
 ```
+<!-- codeblock:end -->
 
-The fallback value of a prop not declared with `$bindable` is left untouched — it is not turned into a reactive state proxy — meaning mutations will not cause updates ([demo](/playground/untitled#H4sIAAAAAAAAE3WQwU7DMBBEf2VkIbUVoYFraCIh7vwA4eC4G9Wta1vxpgJZ_nfkBEQp9OjxzOzTRGHlkUQlXpy9G0gq1idCL43ppDrAD84HUYheGwqieo2CP3y2Z0EU3-En79fhRIaz1slA_-nKWSbLQVRiE9SgPTetbVkfvRsYzztttugHd8RiXU6vr-jisbWb8idhN7O3bEQhmN5ZVDyMlIorcOddv_Eufq4AGmJEuG5PilEjQrnRcoV7JCTUuJlGWq7-YHYjs7NwVhmtDnVcrlA3iLmzLLGTAdaB-j736h68Oxv-JM1I0AFjoG1OzPfX023c1nhobUoT39QeKsRzS8owM8DFTG_pE6dcVl70AQAA))
+The fallback value of a prop not declared with `$bindable` is left untouched — it is not turned into a reactive state proxy — meaning mutations will not cause updates:
+
+<!-- codeblock:start {"title":"Non-reactive fallback props","selected":"Child.svelte"} -->
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<Child />
+```
 
 ```svelte
 <!--- file: Child.svelte --->
@@ -162,6 +179,7 @@ The fallback value of a prop not declared with `$bindable` is left untouched —
 	clicks: {object.count}
 </button>
 ```
+<!-- codeblock:end -->
 
 In summary: don't mutate props. Either use callback props to communicate changes, or — if parent and child should share the same object — use the [`$bindable`]($bindable) rune.
 
@@ -196,4 +214,29 @@ You can, of course, separate the type declaration from the annotation:
 </script>
 ```
 
+> [!NOTE] Interfaces for native DOM elements are provided in the `svelte/elements` module (see [Typing wrapper components](typescript#Typing-wrapper-components))
+
+If your component exposes [snippet](snippet) props like `children`, these should be typed using the `Snippet` interface imported from `'svelte'` — see [Typing snippets](snippet#Typing-snippets) for examples.
+
 Adding types is recommended, as it ensures that people using your component can easily discover which props they should provide.
+
+
+## `$props.id()`
+
+This rune, added in version 5.20.0, generates an ID that is unique to the current component instance. When hydrating a server-rendered component, the value will be consistent between server and client.
+
+This is useful for linking elements via attributes like `for` and `aria-labelledby`.
+
+```svelte
+<script>
+	const uid = $props.id();
+</script>
+
+<form>
+	<label for="{uid}-firstname">First Name: </label>
+	<input id="{uid}-firstname" type="text" />
+
+	<label for="{uid}-lastname">Last Name: </label>
+	<input id="{uid}-lastname" type="text" />
+</form>
+```
diff --git a/documentation/docs/02-runes/06-$bindable.md b/documentation/docs/02-runes/06-$bindable.md
index 14bc8ddbec..3675a56b16 100644
--- a/documentation/docs/02-runes/06-$bindable.md
+++ b/documentation/docs/02-runes/06-$bindable.md
@@ -4,7 +4,7 @@ title: $bindable
 
 Ordinarily, props go one way, from parent to child. This makes it easy to understand how data flows around your app.
 
-In Svelte, component props can be _bound_, which means that data can also flow _up_ from child to parent. This isn't something you should do often, but it can simplify your code if used sparingly and carefully.
+In Svelte, component props can be _bound_, which means that data can also flow _up_ from child to parent. This isn't something you should do often — overuse can make your data flow unpredictable and your components harder to maintain — but it can simplify your code if used sparingly and carefully.
 
 It also means that a state proxy can be _mutated_ in the child.
 
@@ -33,7 +33,7 @@ Now, a component that uses `<FancyInput>` can add the [`bind:`](bind) directive
 
 <!-- prettier-ignore -->
 ```svelte
-/// App.svelte
+/// file: App.svelte
 <script>
 	import FancyInput from './FancyInput.svelte';
 
diff --git a/documentation/docs/02-runes/07-$inspect.md b/documentation/docs/02-runes/07-$inspect.md
index ff3d64757b..00857f3ef4 100644
--- a/documentation/docs/02-runes/07-$inspect.md
+++ b/documentation/docs/02-runes/07-$inspect.md
@@ -1,12 +1,15 @@
 ---
 title: $inspect
+tags: rune-inspect
 ---
 
 > [!NOTE] `$inspect` only works during development. In a production build it becomes a noop.
 
-The `$inspect` rune is roughly equivalent to `console.log`, with the exception that it will re-run whenever its argument changes. `$inspect` tracks reactive state deeply, meaning that updating something inside an object or array using fine-grained reactivity will cause it to re-fire ([demo](/playground/untitled#H4sIAAAAAAAACkWQ0YqDQAxFfyUMhSotdZ-tCvu431AXtGOqQ2NmmMm0LOK_r7Utfby5JzeXTOpiCIPKT5PidkSVq2_n1F7Jn3uIcEMSXHSw0evHpAjaGydVzbUQCmgbWaCETZBWMPlKj29nxBDaHj_edkAiu12JhdkYDg61JGvE_s2nR8gyuBuiJZuDJTyQ7eE-IEOzog1YD80Lb0APLfdYc5F9qnFxjiKWwbImo6_llKRQVs-2u91c_bD2OCJLkT3JZasw7KLA2XCX31qKWE6vIzNk1fKE0XbmYrBTufiI8-_8D2cUWBA_AQAA)):
+The `$inspect` rune is roughly equivalent to `console.log`, with the exception that it will re-run whenever its argument changes. `$inspect` tracks reactive state deeply, meaning that updating something inside an object or array using fine-grained reactivity will cause it to re-fire:
 
+<!-- codeblock:start {"title":"$inspect(...)"} -->
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	let count = $state(0);
 	let message = $state('hello');
@@ -17,12 +20,17 @@ The `$inspect` rune is roughly equivalent to `console.log`, with the exception t
 <button onclick={() => count++}>Increment</button>
 <input bind:value={message} />
 ```
+<!-- codeblock:end -->
+
+On updates, a stack trace will be printed, making it easy to find the origin of a state change (unless you're in the playground, due to technical limitations).
 
 ## $inspect(...).with
 
-`$inspect` returns a property `with`, which you can invoke with a callback, which will then be invoked instead of `console.log`. The first argument to the callback is either `"init"` or `"update"`; subsequent arguments are the values passed to `$inspect` ([demo](/playground/untitled#H4sIAAAAAAAACkVQ24qDMBD9lSEUqlTqPlsj7ON-w7pQG8c2VCchmVSK-O-bKMs-DefKYRYx6BG9qL4XQd2EohKf1opC8Nsm4F84MkbsTXAqMbVXTltuWmp5RAZlAjFIOHjuGLOP_BKVqB00eYuKs82Qn2fNjyxLtcWeyUE2sCRry3qATQIpJRyD7WPVMf9TW-7xFu53dBcoSzAOrsqQNyOe2XUKr0Xi5kcMvdDB2wSYO-I9vKazplV1-T-d6ltgNgSG1KjVUy7ZtmdbdjqtzRcphxMS1-XubOITJtPrQWMvKnYB15_1F7KKadA_AQAA)):
+`$inspect(...)` returns an object with a `with` method, which you can invoke with a callback that will then be invoked instead of `console.log`. The first argument to the callback is either `"init"` or `"update"`; subsequent arguments are the values passed to `$inspect`:
 
+<!-- codeblock:start {"title":"$inspect(...).with(...)"} -->
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	let count = $state(0);
 
@@ -35,13 +43,7 @@ The `$inspect` rune is roughly equivalent to `console.log`, with the exception t
 
 <button onclick={() => count++}>Increment</button>
 ```
-
-A convenient way to find the origin of some change is to pass `console.trace` to `with`:
-
-```js
-// @errors: 2304
-$inspect(stuff).with(console.trace);
-```
+<!-- codeblock:end -->
 
 ## $inspect.trace(...)
 
@@ -52,6 +54,7 @@ This rune, added in 5.14, causes the surrounding function to be _traced_ in deve
 	import { doSomeWork } from './elsewhere';
 
 	$effect(() => {
+		+++// $inspect.trace must be the first statement of a function body+++
 		+++$inspect.trace();+++
 		doSomeWork();
 	});
diff --git a/documentation/docs/02-runes/08-$host.md b/documentation/docs/02-runes/08-$host.md
index 7b5e041e5e..ba6f0a5b5b 100644
--- a/documentation/docs/02-runes/08-$host.md
+++ b/documentation/docs/02-runes/08-$host.md
@@ -2,7 +2,7 @@
 title: $host
 ---
 
-When compiling a component as a custom element, the `$host` rune provides access to the host element, allowing you to (for example) dispatch custom events ([demo](/playground/untitled#H4sIAAAAAAAAE41Ry2rDMBD8FSECtqkTt1fHFpSSL-ix7sFRNkTEXglrnTYY_3uRlDgxTaEHIfYxs7szA9-rBizPPwZOZwM89wmecqxbF70as7InaMjltrWFR3mpkQDJ8pwXVnbKkKiwItUa3RGLVtk7gTHQXRDR2lXda4CY1D0SK9nCUk0QPyfrCovsRoNFe17aQOAwGncgO2gBqRzihJXiQrEs2csYOhQ-7HgKHaLIbpRhhBG-I2eD_8ciM4KnnOCbeE5dD2P6h0Dz0-Yi_arNhPLJXBtSGi2TvSXdbpqwdsXvjuYsC1veabvvUTog2ylrapKH2G2XsMFLS4uDthQnq2t1cwKkGOGLvYU5PvaQxLsxOkPmsm97Io1Mo2yUPF6VnOZFkw1RMoopKLKAE_9gmGxyDFMwMcwN-Bx_ABXQWmOtAgAA)):
+When compiling a component as a [custom element](custom-elements), the `$host` rune provides access to the host element, allowing you to (for example) dispatch custom events ([demo](/playground/untitled#H4sIAAAAAAAAE41Ry2rDMBD8FSECtqkTt1fHFpSSL-ix7sFRNkTEXglrnTYY_3uRlDgxTaEHIfYxs7szA9-rBizPPwZOZwM89wmecqxbF70as7InaMjltrWFR3mpkQDJ8pwXVnbKkKiwItUa3RGLVtk7gTHQXRDR2lXda4CY1D0SK9nCUk0QPyfrCovsRoNFe17aQOAwGncgO2gBqRzihJXiQrEs2csYOhQ-7HgKHaLIbpRhhBG-I2eD_8ciM4KnnOCbeE5dD2P6h0Dz0-Yi_arNhPLJXBtSGi2TvSXdbpqwdsXvjuYsC1veabvvUTog2ylrapKH2G2XsMFLS4uDthQnq2t1cwKkGOGLvYU5PvaQxLsxOkPmsm97Io1Mo2yUPF6VnOZFkw1RMoopKLKAE_9gmGxyDFMwMcwN-Bx_ABXQWmOtAgAA)):
 
 <!-- prettier-ignore -->
 ```svelte
diff --git a/documentation/docs/03-template-syntax/01-basic-markup.md b/documentation/docs/03-template-syntax/01-basic-markup.md
index b41dc187c3..feecfe033e 100644
--- a/documentation/docs/03-template-syntax/01-basic-markup.md
+++ b/documentation/docs/03-template-syntax/01-basic-markup.md
@@ -82,12 +82,14 @@ As with elements, `name={name}` can be replaced with the `{name}` shorthand.
 <Widget foo={bar} answer={42} text="hello" />
 ```
 
+## Spread attributes
+
 _Spread attributes_ allow many attributes or properties to be passed to an element or component at once.
 
-An element or component can have multiple spread attributes, interspersed with regular ones.
+An element or component can have multiple spread attributes, interspersed with regular ones. Order matters — if `things.a` exists it will take precedence over `a="b"`, while `c="d"` would take precedence over `things.c`:
 
 ```svelte
-<Widget {...things} />
+<Widget a="b" {...things} c="d" />
 ```
 
 ## Events
@@ -154,6 +156,8 @@ A JavaScript expression can be included as text by surrounding it with curly bra
 {expression}
 ```
 
+Expressions that are `null` or `undefined` will be omitted; all others are [coerced to strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#string_coercion).
+
 Curly braces can be included in a Svelte template by using their [HTML entity](https://developer.mozilla.org/docs/Glossary/Entity) strings: `&lbrace;`, `&lcub;`, or `&#123;` for `{` and `&rbrace;`, `&rcub;`, or `&#125;` for `}`.
 
 If you're using a regular expression (`RegExp`) [literal notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#literal_notation_and_constructor), you'll need to wrap it in parentheses.
@@ -185,7 +189,7 @@ You can use HTML comments inside components.
 Comments beginning with `svelte-ignore` disable warnings for the next block of markup. Usually, these are accessibility warnings; make sure that you're disabling them for a good reason.
 
 ```svelte
-<!-- svelte-ignore a11y-autofocus -->
+<!-- svelte-ignore a11y_autofocus -->
 <input bind:value={name} autofocus />
 ```
 
diff --git a/documentation/docs/03-template-syntax/02-if.md b/documentation/docs/03-template-syntax/02-if.md
index 1378733e6f..499f6d219c 100644
--- a/documentation/docs/03-template-syntax/02-if.md
+++ b/documentation/docs/03-template-syntax/02-if.md
@@ -1,5 +1,6 @@
 ---
 title: {#if ...}
+tags: template-if
 ---
 
 ```svelte
diff --git a/documentation/docs/03-template-syntax/03-each.md b/documentation/docs/03-template-syntax/03-each.md
index 70666f6a57..9fa699d493 100644
--- a/documentation/docs/03-template-syntax/03-each.md
+++ b/documentation/docs/03-template-syntax/03-each.md
@@ -1,5 +1,6 @@
 ---
 title: {#each ...}
+tags: template-each
 ---
 
 ```svelte
@@ -12,7 +13,9 @@ title: {#each ...}
 {#each expression as name, index}...{/each}
 ```
 
-Iterating over values can be done with an each block. The values in question can be arrays, array-like objects (i.e. anything with a `length` property), or iterables like `Map` and `Set` — in other words, anything that can be used with `Array.from`.
+Iterating over values can be done with an each block. The values in question can be arrays, array-like objects (i.e. anything with a `length` property), or iterables like `Map` and `Set`. (Internally, they are converted to arrays with [`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from).)
+
+If the value is `null` or `undefined`, it is treated the same as an empty array (which will cause [else blocks](#Else-blocks) to be rendered, where applicable).
 
 ```svelte
 <h1>Shopping list</h1>
@@ -43,7 +46,9 @@ An each block can also specify an _index_, equivalent to the second argument in
 {#each expression as name, index (key)}...{/each}
 ```
 
-If a _key_ expression is provided — which must uniquely identify each list item — Svelte will use it to diff the list when data changes, rather than adding or removing items at the end. The key can be any object, but strings and numbers are recommended since they allow identity to persist when the objects themselves change.
+If a _key_ expression is provided — which must uniquely identify each list item — Svelte will use it to intelligently update the list when data changes by inserting, moving and deleting items, rather than adding or removing items at the end and updating the state in the middle.
+
+The key can be any object, but strings and numbers are recommended since they allow identity to persist when the objects themselves change.
 
 ```svelte
 {#each items as item (item.id)}
@@ -84,9 +89,11 @@ You can freely use destructuring and rest patterns in each blocks.
 {#each expression, index}...{/each}
 ```
 
-In case you just want to render something `n` times, you can omit the `as` part ([demo](/playground/untitled#H4sIAAAAAAAAE3WR0W7CMAxFf8XKNAk0WsSeUEaRpn3Guoc0MbQiJFHiMlDVf18SOrZJ48259_jaVgZmxBEZZ28thgCNFV6xBdt1GgPj7wOji0t2EqI-wa_OleGEmpLWiID_6dIaQkMxhm1UdwKpRQhVzWSaVORJNdvWpqbhAYVsYQCNZk8thzWMC_DCHMZk3wPSThNQ088I3mghD9UwSwHwlLE5PMIzVFUFq3G7WUZ2OyUvU3JOuZU332wCXTRmtPy1NgzXZtUFp8WFw9536uWqpbIgPEaDsJBW90cTOHh0KGi2XsBq5-cT6-3nPauxXqHnsHJnCFZ3CvJVkyuCQ0mFF9TZyCQ162WGvteLKfG197Y3iv_pz_fmS68Hxt8iPBPj5HscP8YvCNX7uhYCAAA=)):
+In case you just want to render something `n` times, you can omit the `as` part:
 
+<!-- codeblock:start {"title":"Chess board"} -->
 ```svelte
+<!--- file: App.svelte --->
 <div class="chess-board">
 	{#each { length: 8 }, rank}
 		{#each { length: 8 }, file}
@@ -94,7 +101,22 @@ In case you just want to render something `n` times, you can omit the `as` part
 		{/each}
 	{/each}
 </div>
+
+<style>
+	.chess-board {
+		display: grid;
+		grid-template-columns: repeat(8, 1fr);
+		rows: repeat(8, 1fr);
+		border: 1px solid black;
+		aspect-ratio: 1;
+
+		.black {
+			background: black;
+		}
+	}
+</style>
 ```
+<!-- codeblock:end -->
 
 ## Else blocks
 
diff --git a/documentation/docs/03-template-syntax/04-key.md b/documentation/docs/03-template-syntax/04-key.md
index 10b6ab4358..6c88e28f86 100644
--- a/documentation/docs/03-template-syntax/04-key.md
+++ b/documentation/docs/03-template-syntax/04-key.md
@@ -1,5 +1,6 @@
 ---
 title: {#key ...}
+tags: template-key
 ---
 
 ```svelte
diff --git a/documentation/docs/03-template-syntax/05-await.md b/documentation/docs/03-template-syntax/05-await.md
index 842b3c7e32..aebaf8d33a 100644
--- a/documentation/docs/03-template-syntax/05-await.md
+++ b/documentation/docs/03-template-syntax/05-await.md
@@ -1,5 +1,6 @@
 ---
 title: {#await ...}
+tags: template-await
 ---
 
 ```svelte
diff --git a/documentation/docs/03-template-syntax/06-snippet.md b/documentation/docs/03-template-syntax/06-snippet.md
index c9951d3f34..36058c3560 100644
--- a/documentation/docs/03-template-syntax/06-snippet.md
+++ b/documentation/docs/03-template-syntax/06-snippet.md
@@ -57,9 +57,11 @@ Like function declarations, snippets can have an arbitrary number of parameters,
 
 ## Snippet scope
 
-Snippets can be declared anywhere inside your component. They can reference values declared outside themselves, for example in the `<script>` tag or in `{#each ...}` blocks ([demo](/playground/untitled#H4sIAAAAAAAAE12P0QrCMAxFfyWrwhSEvc8p-h1OcG5RC10bmkyQ0n-3HQPBx3vCPUmCemiDrOpLULYbUdXqTKR2Sj6UA7_RCKbMbvJ9Jg33XpMcW9uKQYEAIzJ3T4QD3LSUDE-PnYA4YET4uOkGMc3W5B3xZrtvbVP9HDas2GqiZHqhMW6Tr9jGbG_oOCMImcUCwrIpFk1FqRyqpRpn0cmjHdAvnrIzuscyq_4nd3dPPD01ukE_NA6qFj9hvMYvGjJADw8BAAA=))...
+Snippets can be declared anywhere inside your component. They can reference values declared outside themselves, for example in the `<script>` tag or in `{#each ...}` blocks...
 
+<!-- codeblock:start {"title":"Snippets"} -->
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	let { message = `it's great to see you!` } = $props();
 </script>
@@ -71,6 +73,7 @@ Snippets can be declared anywhere inside your component. They can reference valu
 {@render hello('alice')}
 {@render hello('bob')}
 ```
+<!-- codeblock:end -->
 
 ...and they are 'visible' to everything in the same lexical scope (i.e. siblings, and children of those siblings):
 
@@ -91,9 +94,11 @@ Snippets can be declared anywhere inside your component. They can reference valu
 {@render x()}
 ```
 
-Snippets can reference themselves and each other ([demo](/playground/untitled#H4sIAAAAAAAAE2WPTQqDMBCFrxLiRqH1Zysi7TlqF1YnENBJSGJLCYGeo5tesUeosfYH3c2bee_jjaWMd6BpfrAU6x5oTvdS0g01V-mFPkNnYNRaDKrxGxto5FKCIaeu1kYwFkauwsoUWtZYPh_3W5FMY4U2mb3egL9kIwY0rbhgiO-sDTgjSEqSTvIDs-jiOP7i_MHuFGAL6p9BtiSbOTl0GtzCuihqE87cqtyam6WRGz_vRcsZh5bmRg3gju4Fptq_kzQBAAA=)):
+Snippets can reference themselves and each other:
 
+<!-- codeblock:start {"title":"Self-referencing snippets"} -->
 ```svelte
+<!--- file: App.svelte --->
 {#snippet blastoff()}
 	<span>🚀</span>
 {/snippet}
@@ -109,12 +114,17 @@ Snippets can reference themselves and each other ([demo](/playground/untitled#H4
 
 {@render countdown(10)}
 ```
+<!-- codeblock:end -->
 
 ## Passing snippets to components
 
-Within the template, snippets are values just like any other. As such, they can be passed to components as props ([demo](/playground/untitled#H4sIAAAAAAAAE3VS247aMBD9lZGpBGwDASRegonaPvQL2qdlH5zYEKvBNvbQLbL875VzAcKyj3PmzJnLGU8UOwqSkd8KJdaCk4TsZS0cyV49wYuJuQiQpGd-N2bu_ooaI1YwJ57hpVYoFDqSEepKKw3mO7VDeTTaIvxiRS1gb_URxvO0ibrS8WanIrHUyiHs7Vmigy28RmyHHmKvDMbMmFq4cQInvGSwTsBYWYoMVhCSB2rBFFPsyl0uruTlR3JZCWvlTXl1Yy_mawiR_rbZKZrellJ-5JQ0RiBUgnFhJ9OGR7HKmwVoilXeIye8DOJGfYCgRlZ3iE876TBsZPX7hPdteO75PC4QaIo8vwNPePmANQ2fMeEFHrLD7rR1jTNkW986E8C3KwfwVr8HSHOSEBT_kGRozyIkn_zQveXDL3rIfPJHtUDwzShJd_Qk3gQCbOGLsdq4yfTRJopRuin3I7nv6kL7ARRjmLdBDG3uv1mhuLA3V2mKtqNEf_oCn8p9aN-WYqH5peP4kWBl1UwJzAEPT9U7K--0fRrrWnPTXpCm1_EVdXjpNmlA8G1hPPyM1fKgMqjFHjctXGjLhZ05w0qpDhksGrybuNEHtJnCalZWsuaTlfq6nPaaBSv_HKw-K57BjzOiVj9ZKQYKzQjZodYFqydYTRN4gPhVzTDO2xnma3HsVWjaLjT8nbfwHy7Q5f2dBAAA)):
+### Explicit props
 
+Within the template, snippets are values just like any other. As such, they can be passed to components as props:
+
+<!-- codeblock:start {"title":"Explicit snippet props"} -->
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	import Table from './Table.svelte';
 
@@ -139,15 +149,65 @@ Within the template, snippets are values just like any other. As such, they can
 	<td>{d.qty * d.price}</td>
 {/snippet}
 
-<Table data={fruits} {header} {row} />
+<Table data={fruits} +++{header} {row}+++ />
+```
+
+```svelte
+<!--- file: Table.svelte --->
+<script>
+	let { data, header, row } = $props();
+</script>
+
+<table>
+	{#if header}
+		<thead>
+			<tr>{@render header()}</tr>
+		</thead>
+	{/if}
+
+	<tbody>
+		{#each data as d}
+			<tr>{@render row(d)}</tr>
+		{/each}
+	</tbody>
+</table>
+
+<style>
+	table {
+		text-align: left;
+		border-spacing: 0;
+	}
+
+	tbody tr:nth-child(2n+1) {
+		background: ButtonFace;
+	}
+
+	table :global(th), table :global(td) {
+		padding: 0.5em;
+	}
+</style>
 ```
+<!-- codeblock:end -->
 
 Think about it like passing content instead of data to a component. The concept is similar to slots in web components.
 
-As an authoring convenience, snippets declared directly _inside_ a component implicitly become props _on_ the component ([demo](/playground/untitled#H4sIAAAAAAAAE3VSTa_aMBD8Kyu_SkAbCA-JSzBR20N_QXt6vIMTO8SqsY29tI2s_PcqTiB8vaPHs7MzuxuIZgdBMvJLo0QlOElIJZXwJHsLBBvb_XUASc7Mb9Yu_B-hsMMK5sUzvDQahUZPMkJ96aTFfKd3KA_WOISfrFACKmcOMFmk8TWUTjY73RFLoz1C5U4SPWzhrcN2GKDrlcGEWauEnyRwxCaDdQLWyVJksII2uaMWTDPNLtzX5YX8-kgua-GcHJVXI3u5WEPb0d83O03TMZSmfRzOkG1Db7mNacOL19JagVALxoWbztq-H8U6j0SaYp2P2BGbOyQ2v8PQIFMXLKRDk177pq0zf6d8bMrzwBdd0pamyPMb-IjNEzS2f86Gz_Dwf-2F9nvNSUJQ_EOSoTuJNvngqK5v4Pas7n4-OCwlEEJcQTIMO-nSQwtb-GSdsX46e9gbRoP9yGQ11I0rEuycunu6PHx1QnPhxm3SFN15MOlYEFJZtf0dUywMbwZOeBGsrKNLYB54-1R9WNqVdki7usim6VmQphf7mnpshiQRhNAXdoOfMyX3OgMlKtz0cGEcF27uLSul3mewjPjgOOoDukxjPS9rqfh0pb-8zs6aBSt_7505aZ7B9xOi0T9YKW4UooVsr0zB1BTrWQJ3EL-oWcZ572GxFoezCk37QLe3897-B2i2U62uBAAA)):
+### Implicit props
+
+As an authoring convenience, snippets declared directly _inside_ a component implicitly become props _on_ the component:
 
+<!-- codeblock:start {"title":"Implicit snippet props"} -->
 ```svelte
-<!-- this is semantically the same as the above -->
+<!--- file: App.svelte --->
+<script>
+	import Table from './Table.svelte';
+
+	const fruits = [
+		{ name: 'apples', qty: 5, price: 2 },
+		{ name: 'bananas', qty: 10, price: 1 },
+		{ name: 'cherries', qty: 20, price: 0.5 }
+	];
+</script>
+
 <Table data={fruits}>
 	{#snippet header()}
 		<th>fruit</th>
@@ -165,10 +225,54 @@ As an authoring convenience, snippets declared directly _inside_ a component imp
 </Table>
 ```
 
-Any content inside the component tags that is _not_ a snippet declaration implicitly becomes part of the `children` snippet ([demo](/playground/untitled#H4sIAAAAAAAAE3WOQQrCMBBFrzIMggql3ddY1Du4si5sOmIwnYRkFKX07lKqglqX8_7_w2uRDw1hjlsWI5ZqTPBoLEXMdy3K3fdZDzB5Ndfep_FKVnpWHSKNce1YiCVijirqYLwUJQOYxrsgsLmIOIZjcA1M02w4n-PpomSVvTclqyEutDX6DA2pZ7_ABIVugrmEC3XJH92P55_G39GodCmWBFrQJ2PrQAwdLGHig_NxNv9xrQa1dhWIawrv1Wzeqawa8953D-8QOmaEAQAA)):
+```svelte
+<!--- file: Table.svelte --->
+<script>
+	let { data, header, row } = $props();
+</script>
+
+<table>
+	{#if header}
+		<thead>
+			<tr>{@render header()}</tr>
+		</thead>
+	{/if}
+
+	<tbody>
+		{#each data as d}
+			<tr>{@render row(d)}</tr>
+		{/each}
+	</tbody>
+</table>
+
+<style>
+	table {
+		text-align: left;
+		border-spacing: 0;
+	}
+
+	tbody tr:nth-child(2n+1) {
+		background: ButtonFace;
+	}
+
+	table :global(th), table :global(td) {
+		padding: 0.5em;
+	}
+</style>
+```
+<!-- codeblock:end -->
+
+### Implicit `children` snippet
 
+Any content inside the component tags that is _not_ a snippet declaration implicitly becomes part of the `children` snippet:
+
+<!-- codeblock:start {"title":"Implicit children snippet","selected":"Button.svelte"} -->
 ```svelte
 <!--- file: App.svelte --->
+<script>
+	import Button from './Button.svelte';
+</script>
+
 <Button>click me</Button>
 ```
 
@@ -181,9 +285,12 @@ Any content inside the component tags that is _not_ a snippet declaration implic
 <!-- result will be <button>click me</button> -->
 <button>{@render children()}</button>
 ```
+<!-- codeblock:end -->
 
 > [!NOTE] Note that you cannot have a prop called `children` if you also have content inside the component — for this reason, you should avoid having props with that name
 
+### Optional snippet props
+
 You can declare snippet props as being optional. You can either use optional chaining to not render anything if the snippet isn't set...
 
 ```svelte
@@ -248,9 +355,21 @@ We can tighten things up further by declaring a generic, so that `data` and `row
 
 ## Exporting snippets
 
-Snippets declared at the top level of a `.svelte` file can be exported from a `<script module>` for use in other components, provided they don't reference any declarations in a non-module `<script>` (whether directly or indirectly, via other snippets) ([demo](/playground/untitled#H4sIAAAAAAAAE3WPwY7CMAxEf8UyB1hRgdhjl13Bga8gHFJipEqtGyUGFUX5dxJUtEB3b9bYM_MckHVLWOKut50TMuC5tpbEY4GnuiGP5T6gXG0-ykLSB8vW2oW_UCNZq7Snv_Rjx0Kc4kpc-6OrrfwoVlK3uQ4CaGMgwsl1LUwXy0f54J9-KV4vf20cNo7YkMu22aqAz4-oOLUI9YKluDPF4h_at-hX5PFyzA1tZ84N3fGpf8YfUU6GvDumLqDKmEqCjjCHUEX4hqDTWCU5PJ6Or38c4g1cPu9tnAEAAA==)):
+Snippets declared at the top level of a `.svelte` file can be exported from a `<script module>` for use in other components, provided they don't reference any declarations in a non-module `<script>` (whether directly or indirectly, via other snippets):
+
+<!-- codeblock:start {"title":"Exported snippets","selected":"snippets.svelte"} -->
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import { add } from './snippets.svelte';
+</script>
+
+{@render add(1, 2)}
+
+```
 
 ```svelte
+<!--- file: snippets.svelte --->
 <script module>
 	export { add };
 </script>
@@ -259,6 +378,7 @@ Snippets declared at the top level of a `.svelte` file can be exported from a `<
 	{a} + {b} = {a + b}
 {/snippet}
 ```
+<!-- codeblock:end -->
 
 > [!NOTE]
 > This requires Svelte 5.5.0 or newer
@@ -269,4 +389,4 @@ Snippets can be created programmatically with the [`createRawSnippet`](svelte#cr
 
 ## Snippets and slots
 
-In Svelte 4, content can be passed to components using [slots](legacy-slots). Snippets are more powerful and flexible, and as such slots are deprecated in Svelte 5.
+In Svelte 4, content can be passed to components using [slots](legacy-slots). Snippets are more powerful and flexible, and so slots have been deprecated in Svelte 5.
diff --git a/documentation/docs/03-template-syntax/08-@html.md b/documentation/docs/03-template-syntax/08-@html.md
index 30456fa666..36b8ad36b3 100644
--- a/documentation/docs/03-template-syntax/08-@html.md
+++ b/documentation/docs/03-template-syntax/08-@html.md
@@ -1,5 +1,6 @@
 ---
 title: {@html ...}
+tags: template-html
 ---
 
 To inject raw HTML into your component, use the `{@html ...}` tag:
@@ -22,7 +23,7 @@ It also will not compile Svelte code.
 
 ## Styling
 
-Content rendered this way is 'invisible' to Svelte and as such will not receive [scoped styles](scoped-styles) — in other words, this will not work, and the `a` and `img` styles will be regarded as unused:
+Content rendered this way is 'invisible' to Svelte and as such will not receive [scoped styles](scoped-styles). In other words, this will not work, and the `a` and `img` styles will be regarded as unused:
 
 <!-- prettier-ignore -->
 ```svelte
diff --git a/documentation/docs/03-template-syntax/09-@attach.md b/documentation/docs/03-template-syntax/09-@attach.md
new file mode 100644
index 0000000000..0087923b15
--- /dev/null
+++ b/documentation/docs/03-template-syntax/09-@attach.md
@@ -0,0 +1,175 @@
+---
+title: {@attach ...}
+tags: attachments
+---
+
+Attachments are functions that run in an [effect]($effect) when an element is mounted to the DOM or when [state]($state) read inside the function updates.
+
+Optionally, they can return a function that is called before the attachment re-runs, or after the element is later removed from the DOM.
+
+> [!NOTE]
+> Attachments are available in Svelte 5.29 and newer.
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	/** @type {import('svelte/attachments').Attachment} */
+	function myAttachment(element) {
+		console.log(element.nodeName); // 'DIV'
+
+		return () => {
+			console.log('cleaning up');
+		};
+	}
+</script>
+
+<div {@attach myAttachment}>...</div>
+```
+
+An element can have any number of attachments.
+
+## Attachment factories
+
+A useful pattern is for a function, such as `tooltip` in this example, to _return_ an attachment ([demo](/playground/untitled#H4sIAAAAAAAAE3VT0XLaMBD8lavbDiaNCUlbHhTItG_5h5AH2T5ArdBppDOEMv73SkbGJGnH47F9t3un3TsfMyO3mInsh2SW1Sa7zlZKo8_E0zHjg42pGAjxBPxp7cTvUHOMldLjv-IVGUbDoUw295VTlh-WZslqa8kxsLL2ACtHWxh175NffnQfAAGikSGxYQGfPEvGfPSIWtOH0TiBVo2pWJEBJtKhQp4YYzjG9JIdcuMM5IZqHMPioY8vOSA997zQoevf4a7heO7cdp34olRiTGr07OhwH1IdoO2A7dLMbwahZq6MbRhKZWqxk7rBxTGVbuHmhCgb5qDgmIx_J6XtHHukHTrYYqx_YpzYng8aO4RYayql7hU-1ZJl0akqHBE_D9KLolwL-Dibzc7iSln9XjtqTF1UpMkJ2EmXR-BgQErsN4pxIJKr0RVO1qrxAqaTO4fbc9bKulZm3cfDY3aZDgvFGErWjmzhN7KmfX5rXyDeX8Pt1mU-hXjdBOrtuB97vK4GPUtmJ41XcRMEGDLD8do0nJ73zhUhSlyRw0t3vPqD8cjfLs-axiFgNBrkUd9Ulp50c-GLxlXAVlJX-ffpZyiSn7H0eLCUySZQcQdXlxj4El0Yv_FZvIKElqqGTruVLhzu7VRKCh22_5toOyxsWqLwwzK-cCbYNdg-hy-p9D7sbiZWUnts_wLUOF3CJgQAAA==)):
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import tippy from 'tippy.js';
+
+	let content = $state('Hello!');
+
+	/**
+	 * @param {string} content
+	 * @returns {import('svelte/attachments').Attachment}
+	 */
+	function tooltip(content) {
+		return (element) => {
+			const tooltip = tippy(element, { content });
+			return tooltip.destroy;
+		};
+	}
+</script>
+
+<input bind:value={content} />
+
+<button {@attach tooltip(content)}>
+	Hover me
+</button>
+```
+
+Since the `tooltip(content)` expression runs inside an [effect]($effect), the attachment will be destroyed and recreated whenever `content` changes. The same thing would happen for any state read _inside_ the attachment function when it first runs. (If this isn't what you want, see [Controlling when attachments re-run](#Controlling-when-attachments-re-run).)
+
+## Inline attachments
+
+Attachments can also be created inline ([demo](/playground/untitled#H4sIAAAAAAAAE71Wf3OaWBT9KoyTTnW3MS-I3dYmnWXVtnRAazRJzbozRSQEApiRhwKO333vuY8m225m_9yZGOT9OPfcc84D943UTfxGr_G7K6Xr3TVeNW7D2M8avT_3DVk-YAoDNF4vNB8e2tnWjyXGlm7mPzfurVPpp5JgGmeZtwkf5PtFupCxLzVvHa832rl2lElX-s2Xm2DZFNqp_hs-rZetd4v07ORpT3qmQHu7MF2td0BZp8k6z_xkvfXP902_pZ2_1_aYWEiqm0kN8I4r79qbdZ6umnq3q_2iNf22F4dE6qt2oimwdpim_uY6XMm7Fuo-IQT_iTD_CeGTHwZ38ieIJUFQRxirR1Xf39Dw0X5z0I72Af4tD61vvPNwWKQnqmfPTbduhsEd2J3vO_oBd3dc6fF2X7umNdWGf0vBRhSS6qoV7cCXfTXWfKmvWG61_si_vfU92Wz-E4RhsLhNIYinsox9QKGVd8-tuACCeKXRX12P-T_eKf7fhTq0Hvt-f3ailtSeoxJHRo1-58NoPe1UiBc1hkL8Yeh45y_vQ3mcuNl9T8s3cXPRWLnS7YWJG_gn2Tb4tUjid8jua-PVl08j_ab8I14mH8Llx0s5Tz5Err4ql52r_GYg0mVy1bEGZuD0ze64b5TWYFiM-16wSuJ4JT5vfVpDcztrcG_YkRU4s6HxufzDWF4XuVeJ1P10IbzBemt3Vp1V2e04ZXfrJd7Wicyd039brRIv_RIVu_nXi7X1cfL2sy66ztToUp1TO7qJ7NlwZ0f30pld5qNSVE5o6PbMojFHjgZB7oSicPpGteyLclQap7SvY0dXtM_LR1NT2JFHey3aaxa0VxCeYJ7RMHemoiCcgPZV9pR7o7kgcOjeGliYk9hjDZx8FAq6enwlTPSZj_vYPw9Il64dXdIY8ZmapzwfEd8-1ZyaxWhqkIZOibXUd-6Upqi1pD4uMicCV1GA_7zi73UN8BaF4sC8peJtMjfmjbHZBFwq5ov50qRaE0l96NZggnW4KqypYRAW-uhSz9ADvklwJF2J-5W0Z5fQPBhDX92R6I_0IFxRgDftge4l4dP-gH1hjD7uqU6fsOEZ9UNrCdPB-nys6uXgY6O3ZMd9sy5T9PghqrWHdjo4jB51CgLiKJaDYYA-7WgYONf1FbjkI-mE3EAfUY_rijfuJ_CVPaR50oe9JF7Q0pI8Dw3osxxYHdYPGbp2CnwHF8KvwJv2wEv0Z3ilQI6U9uwbZxbYJXvEmjjQjjCHkvNLvNg3yhzXQd1olamsT4IRrZmX0MUDpwL7R8zzHj7pSh9hPHFSHjLezKqAST51uC5zmtQ87skDUaneLokT5RbXkPWSYz53Abgjc8_o4KFGUZ-Hgv2Z1l5OTYM9D-HfUD0L-EwxH5wRnIG61gS-khfgY1bq7IAP_DA4l5xRuh9xlm8yGjutc8t-wHtkhWv3hc7aqGwiK5KzgvM5xRkZYn193uEln-su55j1GaIv7oM4iPrsVHiG0Dx7TR9-1lBfqFdwfvSd5LNL5xyZVp5NoHFZ57FkfiF6vKs4k5zvIfrX5xX6MXmt0gM5MTu8DjnhukrHHzTRd3jm0dma0_f_x5cxP9f4jBdqHvmbq2fUjzqcKh2Cp-yWj9ntcHanXmBXxhu7Q--eyjhfNFpaV7zgz4nWEUb7zUOhpevjjf_gu_KZ99pxFlZ-T3sttkmYqrco_26q35v0Ewzv5EZPbnL_8BfduWGMnyyN3q0bZ_7hb_7KG_L4CQAA)):
+
+```svelte
+<!--- file: App.svelte --->
+<canvas
+	width={32}
+	height={32}
+	{@attach (canvas) => {
+		const context = canvas.getContext('2d');
+
+		$effect(() => {
+			context.fillStyle = color;
+			context.fillRect(0, 0, canvas.width, canvas.height);
+		});
+	}}
+></canvas>
+```
+
+> [!NOTE]
+> The nested effect runs whenever `color` changes, while the outer effect (where `canvas.getContext(...)` is called) only runs once, since it doesn't read any reactive state.
+
+## Conditional attachments
+
+Falsy values like `false` or `undefined` are treated as no attachment, enabling conditional usage:
+
+```svelte
+<div {@attach enabled && myAttachment}>...</div>
+```
+
+## Passing attachments to components
+
+When used on a component, `{@attach ...}` will create a prop whose key is a [`Symbol`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol). If the component then [spreads](/tutorial/svelte/spread-props) props onto an element, the element will receive those attachments.
+
+This allows you to create _wrapper components_ that augment elements ([demo](/playground/untitled#H4sIAAAAAAAAE3VUS3ObMBD-KxvajnFqsJM2PhA7TXrKob31FjITAbKtRkiMtDhJPfz3LiAMdpxhGJvdb1_fPnaeYjn3Iu-WIbJ04028lZDcetHDzsO3olbVApI74F1RhHbLJdayhFl-Sp5qhVwhufEWNjWiwJtYxSjyQhsEFEXxBiujcxg1_8O_dnQ9APwsEbVyiHDafjrvDZCgkiO4MLCEzxYZcn90z6XUZ6OxA61KlaIgV6i1pFC-sxjDrlbHaDiWRoGvdMbHsLzp5DES0mJnRxGaRBvcBHb7yFUTCQeunEWYcYtGv12TqgFUDbCK1WLaM6IWQhUlQiJUFm2ZLPly51xXMG0Rjoyd69C7UqqG2nu95QZyXvtvLVpri2-SN4hoLXXCZFfhQ8aQBU1VgdEaH_vSgyBZR_BpPp_vi0tY-rw2ulRZkGqpTQRbZvwa2BPgFC8bgbw31CbjJjAsE6WNYBZeGp7vtQXLMqHWnZx-5kM1TR5ycpkZXQR2wzL94l8Ur1C_3-g168SfQf1MyfRi3LW9fs77emJEw5QV9SREoLTq06tcczq7d6xEUcJX2vAhO1b843XK34e5unZEMBr15ekuKEusluWAF8lXhE2ZTP2r2RcIHJ-163FPKerCgYJLOB9i4GvNwviI5-gAQiFFBk3tBTOU3HFXEk0R8o86WvUD64aINhv5K3oRmpJXkw8uxMG6Hh6JY9X7OwGSqfUy9tDG3sHNoEi0d_d_fv9qndxRU0VClFqo3KVo3U655Hnt1PXB3Qra2Y2QGdEwgTAMCxopsoxOe6SD0gD8movDhT0LAnhqlE8gVCpLWnRoV7OJCkFAwEXitrYL1W7p7pbiE_P7XH6E_rihODm5s52XtiH9Ekaw0VgI9exadWL1uoEYjPtg2672k5szsxbKyWB2fdT0w5Y_0hcT8oXOlRetmLS8-g-6TLXXQgYAAA==)):
+
+```svelte
+<!--- file: Button.svelte --->
+<script>
+	/** @type {import('svelte/elements').HTMLButtonAttributes} */
+	let { children, ...props } = $props();
+</script>
+
+<!-- `props` includes attachments -->
+<button {...props}>
+	{@render children?.()}
+</button>
+```
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import tippy from 'tippy.js';
+	import Button from './Button.svelte';
+
+	let content = $state('Hello!');
+
+	/**
+	 * @param {string} content
+	 * @returns {import('svelte/attachments').Attachment}
+	 */
+	function tooltip(content) {
+		return (element) => {
+			const tooltip = tippy(element, { content });
+			return tooltip.destroy;
+		};
+	}
+</script>
+
+<input bind:value={content} />
+
+<Button {@attach tooltip(content)}>
+	Hover me
+</Button>
+```
+
+## Controlling when attachments re-run
+
+Attachments, unlike [actions](use), are fully reactive: `{@attach foo(bar)}` will re-run on changes to `foo` _or_ `bar` (or any state read inside `foo`):
+
+```js
+// @errors: 7006 2304 2552
+function foo(bar) {
+	return (node) => {
+		veryExpensiveSetupWork(node);
+		update(node, bar);
+	};
+}
+```
+
+In the rare case that this is a problem (for example, if `foo` does expensive and unavoidable setup work) consider passing the data inside a function and reading it in a child effect:
+
+```js
+// @errors: 7006 2304 2552
+function foo(+++getBar+++) {
+	return (node) => {
+		veryExpensiveSetupWork(node);
+
++++		$effect(() => {
+			update(node, getBar());
+		});+++
+	}
+}
+```
+
+## Creating attachments programmatically
+
+To add attachments to an object that will be spread onto a component or element, use [`createAttachmentKey`](svelte-attachments#createAttachmentKey).
+
+## Converting actions to attachments
+
+If you're using a library that only provides actions, you can convert them to attachments with [`fromAction`](svelte-attachments#fromAction), allowing you to (for example) use them with components.
diff --git a/documentation/docs/03-template-syntax/09-@const.md b/documentation/docs/03-template-syntax/10-@const.md
similarity index 55%
rename from documentation/docs/03-template-syntax/09-@const.md
rename to documentation/docs/03-template-syntax/10-@const.md
index f4bde77c23..6f2edc1a37 100644
--- a/documentation/docs/03-template-syntax/09-@const.md
+++ b/documentation/docs/03-template-syntax/10-@const.md
@@ -2,6 +2,8 @@
 title: {@const ...}
 ---
 
+> [!NOTE] `{@const x = y}` is legacy syntax — use [`{const x = $derived(y)}`](declaration-tags) instead
+
 The `{@const ...}` tag defines a local constant.
 
 ```svelte
@@ -11,4 +13,4 @@ The `{@const ...}` tag defines a local constant.
 {/each}
 ```
 
-`{@const}` is only allowed as an immediate child of a block — `{#if ...}`, `{#each ...}`, `{#snippet ...}` and so on — or a `<Component />`.
+`{@const}` is only allowed as an immediate child of a block — `{#if ...}`, `{#each ...}`, `{#snippet ...}` and so on — a `<Component />` or a `<svelte:boundary>`.
diff --git a/documentation/docs/03-template-syntax/10-@debug.md b/documentation/docs/03-template-syntax/11-@debug.md
similarity index 100%
rename from documentation/docs/03-template-syntax/10-@debug.md
rename to documentation/docs/03-template-syntax/11-@debug.md
diff --git a/documentation/docs/03-template-syntax/11-declaration-tags.md b/documentation/docs/03-template-syntax/11-declaration-tags.md
new file mode 100644
index 0000000000..e0edaf6a38
--- /dev/null
+++ b/documentation/docs/03-template-syntax/11-declaration-tags.md
@@ -0,0 +1,72 @@
+---
+title: {let/const ...}
+---
+
+Declaration tags define local variables inside markup with `const` or `let`:
+
+<!-- codeblock:start {"title":"Declaration tags"} -->
+```svelte
+<!--- file: App.svelte --->
+<script>
+	let boxes = [{ width: 10, height: 10 }, { width: 15, height: 15 }];
+</script>
+
+{#each boxes as box}
+	{const area = box.width * box.height}
+	{const label = `${box.width} ⨉ ${box.height} = ${area}`}
+
+	<p>{label}</p>
+{/each}
+```
+<!-- codeblock:end -->
+
+> [!NOTE] Declaration tags are available since Svelte 5.56.
+
+> [!NOTE] The [`{@const ...}`](@const) syntax is considered legacy — use declaration tags instead.
+
+When values should be reactive, you can use `$state` and `$derived`:
+
+<!-- codeblock:start {"title":"Reactive declaration tags"} -->
+```svelte
+<!--- file: App.svelte --->
+<script>
+	let user = $state({ name: 'Svelte' });
+	let editing = $state(false);
+</script>
+
+<p>Hello {user.name}</p>
+<button onclick={() => editing = true}>edit name</button>
+
+{#if editing}
+	{let name = $state(user.name)}
+	{const greeting = $derived(`Hello ${name}`)}
+
+	<hr>
+	<input bind:value={name} />
+	<p>{greeting}</p>
+
+	<button onclick={() => {
+		user.name = name;
+		editing = false;
+	}}>save</button>
+{/if}
+```
+<!-- codeblock:end -->
+
+Declaration tags can be used anywhere inside the component. They can reference values declared outside themselves (for example in the `<script>` tag or in `{#each ...}` blocks) and are 'visible' to everything in the same lexical scope (i.e. siblings, and children of those siblings):
+
+<!-- codeblock:start {"title":"Declaration tag scope"} -->
+```svelte
+<!--- file: App.svelte --->
+{const hello = 'hello'}
+{hello} <!-- 'hello' -->
+<div>
+	{const hello = 'hi'}
+	{hello} <!-- 'hi' -->
+	<div>
+		{hello} <!-- 'hi' -->
+	</div>
+</div>
+{hello} <!-- 'hello' -->
+```
+<!-- codeblock:end -->
diff --git a/documentation/docs/03-template-syntax/11-bind.md b/documentation/docs/03-template-syntax/12-bind.md
similarity index 75%
rename from documentation/docs/03-template-syntax/11-bind.md
rename to documentation/docs/03-template-syntax/12-bind.md
index 90046c8c45..b93f207e71 100644
--- a/documentation/docs/03-template-syntax/11-bind.md
+++ b/documentation/docs/03-template-syntax/12-bind.md
@@ -4,7 +4,7 @@ title: bind:
 
 Data ordinarily flows down, from parent to child. The `bind:` directive allows data to flow the other way, from child to parent.
 
-The general syntax is `bind:property={expression}`, where `expression` is an _lvalue_ (i.e. a variable or an object property). When the expression is an identifier with the same name as the property, we can omit the expression — in other words these are equivalent:
+The general syntax is `bind:property={expression}`, where `expression` is an [_lvalue_](https://press.rebus.community/programmingfundamentals/chapter/lvalue-and-rvalue/) (i.e. a variable or an object property). When the expression is an identifier with the same name as the property, we can omit the expression — in other words these are equivalent:
 
 <!-- prettier-ignore -->
 ```svelte
@@ -54,9 +54,11 @@ A `bind:value` directive on an `<input>` element binds the input's `value` prope
 <p>{message}</p>
 ```
 
-In the case of a numeric input (`type="number"` or `type="range"`), the value will be coerced to a number ([demo](/playground/untitled#H4sIAAAAAAAAE6WPwYoCMQxAfyWEPeyiOOqx2w74Hds9pBql0IllmhGXYf5dKqwiyILsLXnwwsuI-5i4oPkaUX8yo7kCnKNQV7dNzoty4qSVBSr8jG-Poixa0KAt2z5mbb14TaxA4OCtKCm_rz4-f2m403WltrlrYhMFTtcLNkoeFGqZ8yhDF7j3CCHKzpwoDexGmqCL4jwuPUJHZ-dxVcfmyYGe5MAv-La5pbxYFf5Z9Zf_UJXb-sEMquFgJJhBmGyTW5yj8lnRaD_w9D1dAKSSj7zqAQAA)):
+In the case of a numeric input (`type="number"` or `type="range"`), the value will be coerced to a number:
 
+<!-- codeblock:start {"title":"Numeric bindings"} -->
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	let a = $state(1);
 	let b = $state(2);
@@ -74,6 +76,7 @@ In the case of a numeric input (`type="number"` or `type="range"`), the value wi
 
 <p>{a} + {b} = {a + b}</p>
 ```
+<!-- codeblock:end -->
 
 If the input is empty or invalid (in the case of `type="number"`), the value is `undefined`.
 
@@ -95,7 +98,7 @@ Since 5.6.0, if an `<input>` has a `defaultValue` and is part of a form, it will
 
 ## `<input bind:checked>`
 
-Checkbox and radio inputs can be bound with `bind:checked`:
+Checkbox inputs can be bound with `bind:checked`:
 
 ```svelte
 <label>
@@ -117,29 +120,68 @@ Since 5.6.0, if an `<input>` has a `defaultChecked` attribute and is part of a f
 </form>
 ```
 
+> [!NOTE] Use `bind:group` for radio inputs instead of `bind:checked`.
+
+## `<input bind:indeterminate>`
+
+Checkboxes can be in an [indeterminate](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/indeterminate) state, independently of whether they are checked or unchecked:
+
+```svelte
+<script>
+	let checked = $state(false);
+	let indeterminate = $state(true);
+</script>
+
+<form>
+	<input type="checkbox" bind:checked bind:indeterminate>
+
+	{#if indeterminate}
+		waiting...
+	{:else if checked}
+		checked
+	{:else}
+		unchecked
+	{/if}
+</form>
+```
+
 ## `<input bind:group>`
 
-Inputs that work together can use `bind:group`.
+Inputs that work together can use `bind:group`:
 
+<!-- codeblock:start {"title":"bind:group"} -->
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	let tortilla = $state('Plain');
 
-	/** @type {Array<string>} */
+	/** @type {string[]} */
 	let fillings = $state([]);
 </script>
 
+<h1>Customize your burrito</h1>
+
 <!-- grouped radio inputs are mutually exclusive -->
-<input type="radio" bind:group={tortilla} value="Plain" />
-<input type="radio" bind:group={tortilla} value="Whole wheat" />
-<input type="radio" bind:group={tortilla} value="Spinach" />
+<label><input type="radio" bind:group={tortilla} value="Plain" /> Plain</label>
+<label><input type="radio" bind:group={tortilla} value="Whole wheat" /> Whole wheat</label>
+<label><input type="radio" bind:group={tortilla} value="Spinach" /> Spinach</label>
 
 <!-- grouped checkbox inputs populate an array -->
-<input type="checkbox" bind:group={fillings} value="Rice" />
-<input type="checkbox" bind:group={fillings} value="Beans" />
-<input type="checkbox" bind:group={fillings} value="Cheese" />
-<input type="checkbox" bind:group={fillings} value="Guac (extra)" />
+<label><input type="checkbox" bind:group={fillings} value="Rice" /> Rice</label>
+<label><input type="checkbox" bind:group={fillings} value="Beans" /> Beans</label>
+<label><input type="checkbox" bind:group={fillings} value="Cheese" /> Cheese</label>
+<label><input type="checkbox" bind:group={fillings} value="Guac (extra)" /> Guac (extra)</label>
+
+<p>Tortilla: {tortilla}</p>
+<p>Fillings: {fillings.join(', ') || 'None'}</p>
+
+<style>
+	label {
+		display: block;
+	}
+</style>
 ```
+<!-- codeblock:end -->
 
 > [!NOTE] `bind:group` only works if the inputs are in the same Svelte component.
 
@@ -199,7 +241,7 @@ When the value of an `<option>` matches its text content, the attribute can be o
 </select>
 ```
 
-You can give the `<select>` a default value by adding a `selected` attribute to the`<option>` (or options, in the case of `<select multiple>`) that should be initially selected. If the `<select>` is part of a form, it will revert to that selection when the form is reset. Note that for the initial render the value of the binding takes precedence if it's not `undefined`.
+You can give the `<select>` a default value by adding a `selected` attribute to the `<option>` (or options, in the case of `<select multiple>`) that should be initially selected. If the `<select>` is part of a form, it will revert to that selection when the form is reset. Note that for the initial render the value of the binding takes precedence if it's not `undefined`.
 
 ```svelte
 <select bind:value={selected}>
@@ -219,15 +261,15 @@ You can give the `<select>` a default value by adding a `selected` attribute to
 - [`volume`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volume)
 - [`muted`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/muted)
 
-...and seven readonly ones:
+...and six readonly ones:
 
 - [`duration`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/duration)
 - [`buffered`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/buffered)
-- [`paused`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/paused)
 - [`seekable`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seekable)
 - [`seeking`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event)
 - [`ended`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended)
 - [`readyState`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState)
+- [`played`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/played)
 
 ```svelte
 <audio src={clip} bind:duration bind:currentTime bind:paused></audio>
@@ -235,7 +277,7 @@ You can give the `<select>` a default value by adding a `selected` attribute to
 
 ## `<video>`
 
-`<video>` elements have all the same bindings as [#audio] elements, plus readonly [`videoWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/videoWidth) and [`videoHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/videoHeight) bindings.
+`<video>` elements have all the same bindings as [`<audio>`](#audio) elements, plus readonly [`videoWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/videoWidth) and [`videoHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/videoHeight) bindings.
 
 ## `<img>`
 
@@ -255,6 +297,10 @@ You can give the `<select>` a default value by adding a `selected` attribute to
 </details>
 ```
 
+## `window` and `document`
+
+To bind to properties of `window` and `document`, see [`<svelte:window>`](svelte-window) and [`<svelte:document>`](svelte-document).
+
 ## Contenteditable bindings
 
 Elements with the `contenteditable` attribute support the following bindings:
@@ -268,7 +314,7 @@ Elements with the `contenteditable` attribute support the following bindings:
 <!-- for some reason puts the comment and html on same line -->
 <!-- prettier-ignore -->
 ```svelte
-<div contenteditable="true" bind:innerHTML={html} />
+<div contenteditable="true" bind:innerHTML={html}></div>
 ```
 
 ## Dimensions
@@ -279,6 +325,10 @@ All visible elements have the following readonly bindings, measured with a `Resi
 - [`clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight)
 - [`offsetWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth)
 - [`offsetHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight)
+- [`contentRect`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentRect)
+- [`contentBoxSize`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentBoxSize)
+- [`borderBoxSize`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/borderBoxSize)
+- [`devicePixelContentBoxSize`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/devicePixelContentBoxSize)
 
 ```svelte
 <div bind:offsetWidth={width} bind:offsetHeight={height}>
@@ -286,7 +336,7 @@ All visible elements have the following readonly bindings, measured with a `Resi
 </div>
 ```
 
-> [!NOTE] `display: inline` elements do not have a width or height (except for elements with 'intrinsic' dimensions, like `<img>` and `<canvas>`), and cannot be observed with a `ResizeObserver`. You will need to change the `display` style of these elements to something else, such as `inline-block`.
+> [!NOTE] `display: inline` elements do not have a width or height (except for elements with 'intrinsic' dimensions, like `<img>` and `<canvas>`), and cannot be observed with a `ResizeObserver`. You will need to change the `display` style of these elements to something else, such as `inline-block`. Note that CSS transformations do not trigger `ResizeObserver` callbacks.
 
 ## bind:this
 
@@ -308,7 +358,7 @@ To get a reference to a DOM node, use `bind:this`. The value will be `undefined`
 	});
 </script>
 
-<canvas bind:this={canvas} />
+<canvas bind:this={canvas}></canvas>
 ```
 
 Components also support `bind:this`, allowing you to interact with component instances programmatically.
@@ -330,6 +380,8 @@ Components also support `bind:this`, allowing you to interact with component ins
 </script>
 ```
 
+> [!NOTE] In case of using [the function bindings](#Function-bindings), the getter is required to ensure that the correct value is nullified on component or element destruction.
+
 ## bind:_property_ for components
 
 ```svelte
diff --git a/documentation/docs/03-template-syntax/12-use.md b/documentation/docs/03-template-syntax/13-use.md
similarity index 92%
rename from documentation/docs/03-template-syntax/12-use.md
rename to documentation/docs/03-template-syntax/13-use.md
index f3db72a772..5f5321a1c0 100644
--- a/documentation/docs/03-template-syntax/12-use.md
+++ b/documentation/docs/03-template-syntax/13-use.md
@@ -2,6 +2,9 @@
 title: use:
 ---
 
+> [!NOTE]
+> In Svelte 5.29 and newer, consider using [attachments](@attach) instead, as they are more flexible and composable.
+
 Actions are functions that are called when an element is mounted. They are added with the `use:` directive, and will typically use an `$effect` so that they can reset any state when the element is unmounted:
 
 ```svelte
@@ -50,17 +53,16 @@ The `Action` interface receives three optional type arguments — a node type (w
 ```svelte
 <!--- file: App.svelte --->
 <script>
-	import { on } from 'svelte/events';
-
 	/**
 	 * @type {import('svelte/action').Action<
 	 * 	HTMLDivElement,
-	 * 	null,
+	 * 	undefined,
 	 * 	{
 	 * 		onswiperight: (e: CustomEvent) => void;
 	 * 		onswipeleft: (e: CustomEvent) => void;
 	 * 		// ...
-	 * }>}
+	 * 	}
+	 * >}
 	 */
 	function gestures(node) {
 		$effect(() => {
diff --git a/documentation/docs/03-template-syntax/13-transition.md b/documentation/docs/03-template-syntax/14-transition.md
similarity index 99%
rename from documentation/docs/03-template-syntax/13-transition.md
rename to documentation/docs/03-template-syntax/14-transition.md
index 51c11e8b34..9b14b7b25b 100644
--- a/documentation/docs/03-template-syntax/13-transition.md
+++ b/documentation/docs/03-template-syntax/14-transition.md
@@ -1,5 +1,6 @@
 ---
 title: transition:
+tags: transitions
 ---
 
 A _transition_ is triggered by an element entering or leaving the DOM as a result of a state change.
@@ -22,10 +23,6 @@ The `transition:` directive indicates a _bidirectional_ transition, which means
 {/if}
 ```
 
-## Built-in transitions
-
-A selection of built-in transitions can be imported from the [`svelte/transition`](svelte-transition) module.
-
 ## Local vs global
 
 Transitions are local by default. Local transitions only play when the block they belong to is created or destroyed, _not_ when parent blocks are created or destroyed.
@@ -40,6 +37,10 @@ Transitions are local by default. Local transitions only play when the block the
 {/if}
 ```
 
+## Built-in transitions
+
+A selection of built-in transitions can be imported from the [`svelte/transition`](svelte-transition) module.
+
 ## Transition parameters
 
 Transitions can have parameters.
diff --git a/documentation/docs/03-template-syntax/14-in-and-out.md b/documentation/docs/03-template-syntax/15-in-and-out.md
similarity index 97%
rename from documentation/docs/03-template-syntax/14-in-and-out.md
rename to documentation/docs/03-template-syntax/15-in-and-out.md
index f4e37c845e..8adb62bf14 100644
--- a/documentation/docs/03-template-syntax/14-in-and-out.md
+++ b/documentation/docs/03-template-syntax/15-in-and-out.md
@@ -1,5 +1,6 @@
 ---
 title: in: and out:
+tags: transitions
 ---
 
 The `in:` and `out:` directives are identical to [`transition:`](transition), except that the resulting transitions are not bidirectional — an `in` transition will continue to 'play' alongside the `out` transition, rather than reversing, if the block is outroed while the transition is in progress. If an out transition is aborted, transitions will restart from scratch.
@@ -7,7 +8,7 @@ The `in:` and `out:` directives are identical to [`transition:`](transition), ex
 ```svelte
 <script>
   import { fade, fly } from 'svelte/transition';
-  
+
   let visible = $state(false);
 </script>
 
diff --git a/documentation/docs/03-template-syntax/15-animate.md b/documentation/docs/03-template-syntax/16-animate.md
similarity index 100%
rename from documentation/docs/03-template-syntax/15-animate.md
rename to documentation/docs/03-template-syntax/16-animate.md
diff --git a/documentation/docs/03-template-syntax/16-class.md b/documentation/docs/03-template-syntax/16-class.md
deleted file mode 100644
index cecbc7cf20..0000000000
--- a/documentation/docs/03-template-syntax/16-class.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-title: class:
----
-
-The `class:` directive is a convenient way to conditionally set classes on elements, as an alternative to using conditional expressions inside `class` attributes:
-
-```svelte
-<!-- These are equivalent -->
-<div class={isCool ? 'cool' : ''}>...</div>
-<div class:cool={isCool}>...</div>
-```
-
-As with other directives, we can use a shorthand when the name of the class coincides with the value:
-
-```svelte
-<div class:cool>...</div>
-```
-
-Multiple `class:` directives can be added to a single element:
-
-```svelte
-<div class:cool class:lame={!cool} class:potato>...</div>
-```
diff --git a/documentation/docs/03-template-syntax/17-style.md b/documentation/docs/03-template-syntax/17-style.md
index 749376c6e2..6ddb128f4a 100644
--- a/documentation/docs/03-template-syntax/17-style.md
+++ b/documentation/docs/03-template-syntax/17-style.md
@@ -1,5 +1,6 @@
 ---
 title: style:
+tags: template-style
 ---
 
 The `style:` directive provides a shorthand for setting multiple styles on an element.
@@ -34,8 +35,16 @@ To mark a style as important, use the `|important` modifier:
 <div style:color|important="red">...</div>
 ```
 
-When `style:` directives are combined with `style` attributes, the directives will take precedence:
+When `style:` directives are combined with `style` attributes, the directives will take precedence,
+even over `!important` properties:
 
 ```svelte
-<div style="color: blue;" style:color="red">This will be red</div>
+<div style:color="red" style="color: blue">This will be red</div>
+<div style:color="red" style="color: blue !important">This will still be red</div>
+```
+
+You can set CSS custom properties:
+
+```svelte
+<div style:--columns={columns}>...</div>
 ```
diff --git a/documentation/docs/03-template-syntax/18-class.md b/documentation/docs/03-template-syntax/18-class.md
new file mode 100644
index 0000000000..5d7cb3100d
--- /dev/null
+++ b/documentation/docs/03-template-syntax/18-class.md
@@ -0,0 +1,103 @@
+---
+title: class
+tags: template-style
+---
+
+There are two ways to set classes on elements: the `class` attribute, and the `class:` directive.
+
+## Attributes
+
+Primitive values are treated like any other attribute:
+
+```svelte
+<div class={large ? 'large' : 'small'}>...</div>
+```
+
+> [!NOTE]
+> For historical reasons, falsy values (like `false` and `NaN`) are stringified (`class="false"`), though `class={undefined}` (or `null`) cause the attribute to be omitted altogether. In a future version of Svelte, all falsy values will cause `class` to be omitted.
+
+### Objects and arrays
+
+Since Svelte 5.16, `class` can be an object or array, and is converted to a string using [clsx](https://github.com/lukeed/clsx).
+
+If the value is an object, the truthy keys are added:
+
+```svelte
+<script>
+	let { cool } = $props();
+</script>
+
+<!-- results in `class="cool"` if `cool` is truthy,
+     `class="lame"` otherwise -->
+<div class={{ cool, lame: !cool }}>...</div>
+```
+
+If the value is an array, the truthy values are combined:
+
+```svelte
+<!-- if `faded` and `large` are both truthy, results in
+     `class="saturate-0 opacity-50 scale-200"` -->
+<div class={[faded && 'saturate-0 opacity-50', large && 'scale-200']}>...</div>
+```
+
+Note that whether we're using the array or object form, we can set multiple classes simultaneously with a single condition, which is particularly useful if you're using things like Tailwind.
+
+Arrays can contain arrays and objects, and clsx will flatten them. This is useful for combining local classes with props, for example:
+
+```svelte
+<!--- file: Button.svelte --->
+<script>
+	let props = $props();
+</script>
+
+<button {...props} class={['cool-button', props.class]}>
+	{@render props.children?.()}
+</button>
+```
+
+The user of this component has the same flexibility to use a mixture of objects, arrays and strings:
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import Button from './Button.svelte';
+	let useTailwind = $state(false);
+</script>
+
+<Button
+	onclick={() => useTailwind = true}
+	class={{ 'bg-blue-700 sm:w-1/2': useTailwind }}
+>
+	Accept the inevitability of Tailwind
+</Button>
+```
+
+Since Svelte 5.19, Svelte also exposes the `ClassValue` type, which is the type of value that the `class` attribute on elements accept. This is useful if you want to use a type-safe class name in component props:
+
+```svelte
+<script lang="ts">
+	import type { ClassValue } from 'svelte/elements';
+
+	const props: { class: ClassValue } = $props();
+</script>
+
+<div class={['original', props.class]}>...</div>
+```
+
+## The `class:` directive
+
+Prior to Svelte 5.16, the `class:` directive was the most convenient way to set classes on elements conditionally.
+
+```svelte
+<!-- These are equivalent -->
+<div class={{ cool, lame: !cool }}>...</div>
+<div class:cool={cool} class:lame={!cool}>...</div>
+```
+
+As with other directives, we can use a shorthand when the name of the class coincides with the value:
+
+```svelte
+<div class:cool class:lame={!cool}>...</div>
+```
+
+> [!NOTE] Unless you're using an older version of Svelte, consider avoiding `class:`, since the attribute is more powerful and composable.
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..04437f5ee3
--- /dev/null
+++ b/documentation/docs/03-template-syntax/19-await-expressions.md
@@ -0,0 +1,200 @@
+---
+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.
+
+## 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...
+
+<!-- codeblock:start {"title":"Synchronized updates"} -->
+```svelte
+<!--- file: App.svelte --->
+<script>
+	let a = $state(1);
+	let b = $state(2);
+
+	async function add(a, b) {
+		await new Promise((f) => setTimeout(f, 500)); // artificial delay
+		return a + b;
+	}
+</script>
+
+<input type="number" bind:value={a}>
+<input type="number" bind:value={b}>
+
+<p>{a} + {b} = {await add(a, b)}</p>
+```
+<!-- codeblock:end -->
+
+...if you increment `a`, the contents of the `<p>` will _not_ immediately update to read this —
+
+```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(x)}</p>
+<p>{await two(y)}</p>
+```
+
+...both functions will run at the same time, as they are independent expressions, even though they are _visually_ sequential.
+
+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
+/** @param {number} x */
+async function one(x) { return x; }
+/** @param {number} y */
+async function two(y) { return y; }
+let x = $state(1);
+let y = $state(2);
+// ---cut---
+// `b` will not be created until `a` has resolved,
+// but once created they will update independently
+// even if `x` and `y` update simultaneously
+let a = $derived(await one(x));
+let b = $derived(await two(y));
+```
+
+> [!NOTE] If you write code like this, expect Svelte to give you an [`await_waterfall`](runtime-warnings#Client-warnings-await_waterfall) warning
+
+## Indicating loading states
+
+To render placeholder UI, you can wrap content in a `<svelte:boundary>` with a [`pending`](svelte-boundary#Properties-pending) snippet. This will be shown when the boundary is first created, but not for subsequent updates, which are globally coordinated.
+
+After the contents of a boundary have resolved for the first time and have replaced the `pending` snippet, you can detect subsequent async work with [`$effect.pending()`]($effect#$effect.pending). This is what you would use to display a "we're asynchronously validating your input" spinner next to a form field, for example.
+
+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).
+
+## Server-side rendering
+
+Svelte supports asynchronous server-side rendering (SSR) with the `render(...)` API. To use it, simply await the return value:
+
+```js
+/// file: server.js
+import { render } from 'svelte/server';
+import App from './App.svelte';
+
+const { head, body } = +++await+++ render(App);
+```
+
+> [!NOTE] If you're using a framework like SvelteKit, this is done on your behalf.
+
+If a `<svelte:boundary>` with a `pending` snippet is encountered during SSR, that snippet will be rendered while the rest of the content is ignored. All `await` expressions encountered outside boundaries with `pending` snippets will resolve and render their contents prior to `await render(...)` returning.
+
+> [!NOTE] In the future, we plan to add a streaming implementation that renders the content in the background.
+
+## Forking
+
+The [`fork(...)`](svelte#fork) API, added in 5.42, makes it possible to run `await` expressions that you _expect_ to happen in the near future. This is mainly intended for frameworks like SvelteKit to implement preloading when (for example) users signal an intent to navigate.
+
+```svelte
+<script>
+	import { fork } from 'svelte';
+	import Menu from './Menu.svelte';
+
+	let open = $state(false);
+
+	/** @type {import('svelte').Fork | null} */
+	let pending = null;
+
+	function preload() {
+		pending ??= fork(() => {
+			open = true;
+		});
+	}
+
+	function discard() {
+		pending?.discard();
+		pending = null;
+	}
+</script>
+
+<button
+	onfocusin={preload}
+	onfocusout={discard}
+	onpointerenter={preload}
+	onpointerleave={discard}
+	onclick={() => {
+		pending?.commit();
+		pending = null;
+
+		// in case `pending` didn't exist
+		// (if it did, this is a no-op)
+		open = true;
+	}}
+>open menu</button>
+
+{#if open}
+	<!-- any async work inside this component will start
+	     as soon as the fork is created -->
+	<Menu onclose={() => open = false} />
+{/if}
+```
+
+## 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.
+
+## 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/03-template-syntax/xx-control-flow.md b/documentation/docs/03-template-syntax/xx-control-flow.md
deleted file mode 100644
index b73917997b..0000000000
--- a/documentation/docs/03-template-syntax/xx-control-flow.md
+++ /dev/null
@@ -1,111 +0,0 @@
----
-title: Control flow
----
-
-- if
-- each
-- await (or move that into some kind of data loading section?)
-- NOT: key (move into transition section, because that's the common use case)
-
-Svelte augments HTML with control flow blocks to be able to express conditionally rendered content or lists.
-
-The syntax between these blocks is the same:
-
-- `{#` denotes the start of a block
-- `{:` denotes a different branch part of the block. Depending on the block, there can be multiple of these
-- `{/` denotes the end of a block
-
-## {#if ...}
-
-## {#each ...}
-
-```svelte
-<!--- copy: false  --->
-{#each expression as name}...{/each}
-```
-
-```svelte
-<!--- copy: false  --->
-{#each expression as name, index}...{/each}
-```
-
-```svelte
-<!--- copy: false  --->
-{#each expression as name (key)}...{/each}
-```
-
-```svelte
-<!--- copy: false  --->
-{#each expression as name, index (key)}...{/each}
-```
-
-```svelte
-<!--- copy: false  --->
-{#each expression as name}...{:else}...{/each}
-```
-
-Iterating over lists of values can be done with an each block.
-
-```svelte
-<h1>Shopping list</h1>
-<ul>
-	{#each items as item}
-		<li>{item.name} x {item.qty}</li>
-	{/each}
-</ul>
-```
-
-You can use each blocks to iterate over any array or array-like value — that is, any object with a `length` property.
-
-An each block can also specify an _index_, equivalent to the second argument in an `array.map(...)` callback:
-
-```svelte
-{#each items as item, i}
-	<li>{i + 1}: {item.name} x {item.qty}</li>
-{/each}
-```
-
-If a _key_ expression is provided — which must uniquely identify each list item — Svelte will use it to diff the list when data changes, rather than adding or removing items at the end. The key can be any object, but strings and numbers are recommended since they allow identity to persist when the objects themselves change.
-
-```svelte
-{#each items as item (item.id)}
-	<li>{item.name} x {item.qty}</li>
-{/each}
-
-<!-- or with additional index value -->
-{#each items as item, i (item.id)}
-	<li>{i + 1}: {item.name} x {item.qty}</li>
-{/each}
-```
-
-You can freely use destructuring and rest patterns in each blocks.
-
-```svelte
-{#each items as { id, name, qty }, i (id)}
-	<li>{i + 1}: {name} x {qty}</li>
-{/each}
-
-{#each objects as { id, ...rest }}
-	<li><span>{id}</span><MyComponent {...rest} /></li>
-{/each}
-
-{#each items as [id, ...rest]}
-	<li><span>{id}</span><MyComponent values={rest} /></li>
-{/each}
-```
-
-An each block can also have an `{:else}` clause, which is rendered if the list is empty.
-
-```svelte
-{#each todos as todo}
-	<p>{todo.text}</p>
-{:else}
-	<p>No tasks today!</p>
-{/each}
-```
-
-It is possible to iterate over iterables like `Map` or `Set`. Iterables need to be finite and static (they shouldn't change while being iterated over). Under the hood, they are transformed to an array using `Array.from` before being passed off to rendering. If you're writing performance-sensitive code, try to avoid iterables and use regular arrays as they are more performant.
-
-## Other block types
-
-Svelte also provides [`#snippet`](snippets), [`#key`](transitions-and-animations) and [`#await`](data-fetching) blocks. You can find out more about them in their respective sections.
diff --git a/documentation/docs/03-template-syntax/xx-data-fetching.md b/documentation/docs/03-template-syntax/xx-data-fetching.md
deleted file mode 100644
index 4526d51335..0000000000
--- a/documentation/docs/03-template-syntax/xx-data-fetching.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-title: Data fetching
----
-
-Fetching data is a fundamental part of apps interacting with the outside world. Svelte is unopinionated with how you fetch your data. The simplest way would be using the built-in `fetch` method:
-
-```svelte
-<script>
-	let response = $state();
-	fetch('/api/data').then(async (r) => (response = r.json()));
-</script>
-```
-
-While this works, it makes working with promises somewhat unergonomic. Svelte alleviates this problem using the `#await` block.
-
-## {#await ...}
-
-## SvelteKit loaders
-
-Fetching inside your components is great for simple use cases, but it's prone to data loading waterfalls and makes code harder to work with because of the promise handling. SvelteKit solves this problem by providing a opinionated data loading story that is coupled to its router. Learn more about it [in the docs](../kit).
diff --git a/documentation/docs/04-styling/01-scoped-styles.md b/documentation/docs/04-styling/01-scoped-styles.md
index f870d0a5b8..cdfbeab19b 100644
--- a/documentation/docs/04-styling/01-scoped-styles.md
+++ b/documentation/docs/04-styling/01-scoped-styles.md
@@ -1,5 +1,6 @@
 ---
 title: Scoped styles
+tags: styles-scoped
 ---
 
 Svelte components can include a `<style>` element containing CSS that belongs to the component. This CSS is _scoped_ by default, meaning that styles will not apply to any elements on the page outside the component in question.
@@ -33,10 +34,7 @@ If a component defines `@keyframes`, the name is scoped to the component using t
 
 	/* these keyframes are only accessible inside this component */
 	@keyframes bounce {
-		/* ... *.
+		/* ... */
 	}
 </style>
 ```
-
-
-
diff --git a/documentation/docs/04-styling/02-global-styles.md b/documentation/docs/04-styling/02-global-styles.md
index 8e9cf8d0cb..140b976dc5 100644
--- a/documentation/docs/04-styling/02-global-styles.md
+++ b/documentation/docs/04-styling/02-global-styles.md
@@ -1,5 +1,6 @@
 ---
 title: Global styles
+tags: styles-global
 ---
 
 ## :global(...)
diff --git a/documentation/docs/04-styling/03-custom-properties.md b/documentation/docs/04-styling/03-custom-properties.md
index 49984c6ce4..09faee3a98 100644
--- a/documentation/docs/04-styling/03-custom-properties.md
+++ b/documentation/docs/04-styling/03-custom-properties.md
@@ -1,5 +1,6 @@
 ---
 title: Custom properties
+tags: styles-custom-properties
 ---
 
 You can pass CSS custom properties — both static and dynamic — to components:
diff --git a/documentation/docs/05-special-elements/01-svelte-boundary.md b/documentation/docs/05-special-elements/01-svelte-boundary.md
index 15f249a771..e1ad00a50b 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) 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`
+
+This snippet will be shown when the boundary is first created, and will remain visible until all the [`await`](await-expressions) 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>
@@ -80,3 +102,40 @@ If an `onerror` function is provided, it will be called with the same two `error
 ```
 
 If an error occurs inside the `onerror` function (or if you rethrow the error), it will be handled by a parent boundary if such exists.
+
+## Using `transformError`
+
+By default, error boundaries have no effect on the server — if an error occurs during rendering, the render as a whole will fail.
+
+Since 5.51 you can control this behaviour for boundaries with a `failed` snippet, by calling [`render(...)`](imperative-component-api#render) with a `transformError` function.
+
+> [!NOTE] If you're using Svelte via a framework such as SvelteKit, you most likely don't have direct access to the `render(...)` call — the framework must configure `transformError` on your behalf. SvelteKit will add support for this in the near future, via the [`handleError`](../kit/hooks#Shared-hooks-handleError) hook.
+
+The `transformError` function must return a JSON-stringifiable object which will be used to render the `failed` snippet. This object will be serialized and used to hydrate the snippet in the browser:
+
+```js
+// @errors: 1005
+import { render } from 'svelte/server';
+import App from './App.svelte';
+
+const { head, body } = await render(App, {
+	transformError: (error) => {
+		// log the original error, with the stack trace...
+		console.error(error);
+
+		// ...and return a sanitized user-friendly error
+		// to display in the `failed` snippet
+		return {
+			message: 'An error occurred!'
+		};
+	};
+});
+```
+
+If `transformError` throws (or rethrows) an error, `render(...)` as a whole will fail with that error.
+
+> [!NOTE] Errors that occur during server-side rendering can contain sensitive information in the `message` and `stack`. It's recommended to redact these rather than sending them unaltered to the browser.
+
+If the boundary has an `onerror` handler, it will be called upon hydration with the deserialized error object.
+
+The [`mount`](imperative-component-api#mount) and [`hydrate`](imperative-component-api#hydrate) functions also accept a `transformError` option, which defaults to the identity function. As with `render`, this function transforms a render-time error before it is passed to a `failed` snippet or `onerror` handler.
diff --git a/documentation/docs/05-special-elements/03-svelte-document.md b/documentation/docs/05-special-elements/03-svelte-document.md
index 43f02865e6..47c382ee56 100644
--- a/documentation/docs/05-special-elements/03-svelte-document.md
+++ b/documentation/docs/05-special-elements/03-svelte-document.md
@@ -10,12 +10,12 @@ title: <svelte:document>
 <svelte:document bind:prop={value} />
 ```
 
-Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document`, such as `visibilitychange`, which don't fire on `window`. It also lets you use [actions](use) on `document`.
+Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document`, such as `visibilitychange`, which don't fire on `window`. It also lets you use [attachments](@attach) on `document`.
 
 As with `<svelte:window>`, this element may only appear the top level of your component and must never be inside a block or element.
 
 ```svelte
-<svelte:document onvisibilitychange={handleVisibilityChange} use:someAction />
+<svelte:document onvisibilitychange={handleVisibilityChange} {@attach someAttachment} />
 ```
 
 You can also bind to the following properties:
diff --git a/documentation/docs/05-special-elements/04-svelte-body.md b/documentation/docs/05-special-elements/04-svelte-body.md
index d6536b0b74..c6828b98f7 100644
--- a/documentation/docs/05-special-elements/04-svelte-body.md
+++ b/documentation/docs/05-special-elements/04-svelte-body.md
@@ -8,7 +8,7 @@ title: <svelte:body>
 
 Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document.body`, such as `mouseenter` and `mouseleave`, which don't fire on `window`. It also lets you use [actions](use) on the `<body>` element.
 
-As with `<svelte:window>` and `<svelte:document>`, this element may only appear the top level of your component and must never be inside a block or element.
+As with `<svelte:window>` and `<svelte:document>`, this element may only appear at the top level of your component and must never be inside a block or element.
 
 ```svelte
 <svelte:body onmouseenter={handleMouseenter} onmouseleave={handleMouseleave} use:someAction />
diff --git a/documentation/docs/05-special-elements/07-svelte-options.md b/documentation/docs/05-special-elements/07-svelte-options.md
index d29042e278..a2e47aa04f 100644
--- a/documentation/docs/05-special-elements/07-svelte-options.md
+++ b/documentation/docs/05-special-elements/07-svelte-options.md
@@ -12,7 +12,7 @@ The `<svelte:options>` element provides a place to specify per-component compile
 - `runes={false}` — forces a component into _legacy mode_
 - `namespace="..."` — the namespace where this component will be used, can be "html" (the default), "svg" or "mathml"
 - `customElement={...}` — the [options](custom-elements#Component-options) to use when compiling this component as a custom element. If a string is passed, it is used as the `tag` option
-- `css="injected"` — the component will inject its styles inline: During server side rendering, it's injected as a `<style>` tag in the `head`, during client side rendering, it's loaded via JavaScript
+- `css="injected"` — the component will inject its styles inline: During server-side rendering, it's injected as a `<style>` tag in the `head`, during client side rendering, it's loaded via JavaScript
 
 > [!LEGACY] Deprecated options
 > Svelte 4 also included the following options. They are deprecated in Svelte 5 and non-functional in runes mode.
diff --git a/documentation/docs/06-runtime/02-context.md b/documentation/docs/06-runtime/02-context.md
index 30799215b6..439272df8f 100644
--- a/documentation/docs/06-runtime/02-context.md
+++ b/documentation/docs/06-runtime/02-context.md
@@ -2,129 +2,224 @@
 title: Context
 ---
 
-<!-- - get/set/hasContext
-- how to use, best practises (like encapsulating them) -->
+Context allows components to access values owned by parent components without passing them down as props (potentially through many layers of intermediate components, known as 'prop-drilling').
 
-Most state is component-level state that lives as long as its component lives. There's also section-wide or app-wide state however, which also needs to be handled somehow.
+By creating a `[get, set]` pair of functions with `createContext`, you can set the context in a parent component and get it in a child component:
 
-The easiest way to do that is to create global state and just import that.
+<!-- codeblock:start {"title":"Context","selected":"context.ts"} -->
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import Parent from './Parent.svelte';
+	import Child from './Child.svelte';
+</script>
 
-```ts
-/// file: state.svelte.js
-export const myGlobalState = $state({
-	user: {
-		/* ... */
-	}
-	/* ... */
-});
+<Parent>
+	<Child />
+</Parent>
 ```
 
 ```svelte
-<!--- file: App.svelte --->
+<!--- file: Parent.svelte --->
 <script>
-	import { myGlobalState } from './state.svelte.js';
-	// ...
+	import { setUserContext } from './context';
+
+	let { children } = $props();
+
+	setUserContext({ name: 'world' });
+</script>
+
+{@render children()}
+```
+
+```svelte
+<!--- file: Child.svelte --->
+<script>
+	import { getUserContext } from './context';
+
+	const user = getUserContext();
 </script>
+
+<h1>hello {user.name}, inside Child.svelte</h1>
 ```
 
-This has a few drawbacks though:
+```ts
+/// file: context.ts
+import { createContext } from 'svelte';
 
-- it only safely works when your global state is only used client-side - for example, when you're building a single page application that does not render any of your components on the server. If your state ends up being managed and updated on the server, it could end up being shared between sessions and/or users, causing bugs
-- it may give the false impression that certain state is global when in reality it should only used in a certain part of your app
+interface User {
+	name: string;
+}
 
-To solve these drawbacks, Svelte provides a few `context` primitives which alleviate these problems.
+export const [getUserContext, setUserContext] = createContext<User>();
+```
+<!-- codeblock:end -->
+
+> [!NOTE] `createContext` was added in version 5.40. If you are using an earlier version of Svelte, you must use `setContext` and `getContext` instead.
+
+This is particularly useful when `Parent.svelte` is not directly aware of `Child.svelte`, but instead renders it as part of a `children` [snippet](snippet) as shown above.
 
-## Setting and getting context
+## `setContext` and `getContext`
 
-To associate an arbitrary object with the current component, use `setContext`.
+As an alternative to `createContext`, you can use `setContext` and `getContext` directly. The parent component sets context with `setContext(key, value)`...
 
 ```svelte
+<!--- file: Parent.svelte --->
 <script>
 	import { setContext } from 'svelte';
 
-	setContext('key', value);
+	setContext('my-context', 'hello from Parent.svelte');
 </script>
 ```
 
-The context is then available to children of the component (including slotted content) with `getContext`.
+...and the child retrieves it with `getContext`:
 
 ```svelte
+<!--- file: Child.svelte --->
 <script>
 	import { getContext } from 'svelte';
 
-	const value = getContext('key');
+	const message = getContext('my-context');
 </script>
+
+<h1>{message}, inside Child.svelte</h1>
 ```
 
-`setContext` and `getContext` solve the above problems:
+The key (`'my-context'`, in the example above) and the context itself can be any JavaScript value.
+
+> [!NOTE] `createContext` is preferred since it provides better type safety and makes it unnecessary to use keys.
 
-- the state is not global, it's scoped to the component. That way it's safe to render your components on the server and not leak state
-- it's clear that the state is not global but rather scoped to a specific component tree and therefore can't be used in other parts of your app
+In addition to [`setContext`](svelte#setContext) and [`getContext`](svelte#getContext), Svelte exposes [`hasContext`](svelte#hasContext) and [`getAllContexts`](svelte#getAllContexts) functions.
 
-> [!NOTE] `setContext`/`getContext` must be called during component initialisation.
+## Using context with state
 
-Context is not inherently reactive. If you need reactive values in context then you can pass a `$state` object into context, whose properties _will_ be reactive.
+You can store reactive state in context...
 
+<!-- codeblock:start {"title":"Context with state"} -->
 ```svelte
-<!--- file: Parent.svelte --->
+<!--- file: App.svelte --->
 <script>
-	import { setContext } from 'svelte';
+	import { setCounter } from './context.ts';
+	import Child from './Child.svelte';
 
-	let value = $state({ count: 0 });
-	setContext('counter', value);
+	let counter = $state({
+		count: 0
+	});
+
+	setCounter(counter);
 </script>
 
-<button onclick={() => value.count++}>increment</button>
+<button onclick={() => counter.count += 1}>
+	increment
+</button>
+
+<Child />
+<Child />
+<Child />
+
+<button onclick={() => counter.count = 0}>
+	reset
+</button>
 ```
 
 ```svelte
 <!--- file: Child.svelte --->
 <script>
-	import { getContext } from 'svelte';
+	import { getCounter } from './context.ts';
 
-	const value = getContext('counter');
+	const counter = getCounter();
 </script>
 
-<p>Count is {value.count}</p>
+<p>{counter.count}</p>
 ```
 
-To check whether a given `key` has been set in the context of a parent component, use `hasContext`.
+```ts
+/// file: context.ts
+import { createContext } from 'svelte';
 
-```svelte
-<script>
-	import { hasContext } from 'svelte';
+interface Counter {
+	count: number;
+}
 
-	if (hasContext('key')) {
-		// do something
-	}
-</script>
+export const [getCounter, setCounter] = createContext<Counter>();
 ```
+<!-- codeblock:end -->
 
-You can also retrieve the whole context map that belongs to the closest parent component using `getAllContexts`. This is useful, for example, if you programmatically create a component and want to pass the existing context to it.
+...though note that if you _reassign_ `counter` instead of updating it, you will 'break the link' — in other words instead of this...
 
 ```svelte
-<script>
-	import { getAllContexts } from 'svelte';
+<button onclick={() => counter = { count: 0 } }>
+	reset
+</button>
+```
 
-	const contexts = getAllContexts();
-</script>
+...you must do this:
+
+```svelte
+<button onclick={() => +++counter.count = 0+++}>
+	reset
+</button>
 ```
 
-## Encapsulating context interactions
+Svelte will warn you if you get it wrong.
 
-The above methods are very unopinionated about how to use them. When your app grows in scale, it's worthwhile to encapsulate setting and getting the context into functions and properly type them.
+Similarly, to pass primitive values through context, use functions as described in [Passing state into functions]($state#Passing-state-into-functions).
 
-```ts
-// @errors: 2304
-import { getContext, setContext } from 'svelte';
+## Component testing
 
-let userKey = Symbol('user');
+When writing [component tests](testing#Unit-and-component-tests-with-Vitest-Component-testing), it can be useful to create a wrapper component that sets the context in order to check the behaviour of a component that uses it. As of version 5.49, you can do this sort of thing:
 
-export function setUserContext(user: User) {
-	setContext(userKey, user);
-}
+```js
+import { mount, unmount } from 'svelte';
+import { expect, test } from 'vitest';
+import { setUserContext } from './context';
+import MyComponent from './MyComponent.svelte';
 
-export function getUserContext(): User {
-	return getContext(userKey) as User;
-}
+test('MyComponent', () => {
+	function Wrapper(...args) {
+		setUserContext({ name: 'Bob' });
+		return MyComponent(...args);
+	}
+
+	const component = mount(Wrapper, {
+		target: document.body
+	});
+
+	expect(document.body.innerHTML).toBe('<h1>Hello Bob!</h1>');
+
+	unmount(component);
+});
 ```
+
+This approach also works with [`hydrate`](imperative-component-api#hydrate) and [`render`](imperative-component-api#render).
+
+## Replacing global state
+
+When you have state shared by many different components, you might be tempted to put it in its own module and just import it wherever it's needed:
+
+```js
+/// file: state.svelte.js
+export const myGlobalState = $state({
+	user: {
+		// ...
+	}
+	// ...
+});
+```
+
+In many cases this is perfectly fine, but there is a risk: if you mutate the state during server-side rendering (which is discouraged, but entirely possible!)...
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import { myGlobalState } from './state.svelte.js';
+
+	let { data } = $props();
+
+	if (data.user) {
+		myGlobalState.user = data.user;
+	}
+</script>
+```
+
+...then the data may be accessible by the _next_ user. Context solves this problem because it is not shared between requests.
diff --git a/documentation/docs/06-runtime/03-lifecycle-hooks.md b/documentation/docs/06-runtime/03-lifecycle-hooks.md
index a3dbe04b00..95e1c260c1 100644
--- a/documentation/docs/06-runtime/03-lifecycle-hooks.md
+++ b/documentation/docs/06-runtime/03-lifecycle-hooks.md
@@ -41,12 +41,10 @@ If a function is returned from `onMount`, it will be called when the component i
 </script>
 ```
 
-> [!NOTE] This behaviour will only work when the function passed to `onMount` _synchronously_ returns a value. `async` functions always return a `Promise`, and as such cannot _synchronously_ return a function.
+> [!NOTE] This behaviour will only work when the function passed to `onMount` is _synchronous_. `async` functions always return a `Promise`.
 
 ## `onDestroy`
 
-> EXPORT_SNIPPET: svelte#onDestroy
-
 Schedules a callback to run immediately before the component is unmounted.
 
 Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the only one that runs inside a server-side component.
@@ -96,7 +94,7 @@ Svelte 4 contained hooks that ran before and after the component as a whole was
 </script>
 ```
 
-Instead of `beforeUpdate` use `$effect.pre` and instead of `afterUpdate` use `$effect` instead - these runes offer more granular control and only react to the changes you're actually interested in.
+Instead of `beforeUpdate` use `$effect.pre` and instead of `afterUpdate` use `$effect` instead — these runes offer more granular control and only react to the changes you're actually interested in.
 
 ### Chat window example
 
@@ -149,7 +147,7 @@ With runes, we can use `$effect.pre`, which behaves the same as `$effect` but ru
 	}
 
 	function toggle() {
-		toggleValue = !toggleValue;
+		theme = theme === 'dark' ? 'light' : 'dark';
 	}
 </script>
 
diff --git a/documentation/docs/06-runtime/05-hydratable.md b/documentation/docs/06-runtime/05-hydratable.md
new file mode 100644
index 0000000000..f8d5130581
--- /dev/null
+++ b/documentation/docs/06-runtime/05-hydratable.md
@@ -0,0 +1,123 @@
+---
+title: Hydratable data
+---
+
+In Svelte, when you want to render asynchronous content data on the server, you can simply `await` it. This is great! However, it comes with a pitfall: when hydrating that content on the client, Svelte has to redo the asynchronous work, which blocks hydration for however long it takes:
+
+```svelte
+<script>
+  import { getUser } from 'my-database-library';
+
+  // This will get the user on the server, render the user's name into the h1,
+  // and then, during hydration on the client, it will get the user _again_,
+  // blocking hydration until it's done.
+  const user = await getUser();
+</script>
+
+<h1>{user.name}</h1>
+```
+
+That's silly, though. If we've already done the hard work of getting the data on the server, we don't want to get it again during hydration on the client. `hydratable` is a low-level API built to solve this problem. You probably won't need this very often — it will be used behind the scenes by whatever datafetching library you use. For example, it powers [remote functions in SvelteKit](/docs/kit/remote-functions).
+
+To fix the example above:
+
+```svelte
+<script>
+  import { hydratable } from 'svelte';
+  import { getUser } from 'my-database-library';
+
+  // During server rendering, this will serialize and stash the result of `getUser`, associating
+  // it with the provided key and baking it into the `head` content. During hydration, it will
+  // look for the serialized version, returning it instead of running `getUser`. After hydration
+  // is done, if it's called again, it'll simply invoke `getUser`.
+  const user = await hydratable('user', () => getUser());
+</script>
+
+<h1>{user.name}</h1>
+```
+
+This API can also be used to provide access to random or time-based values that are stable between server rendering and hydration. For example, to get a random number that doesn't update on hydration:
+
+```ts
+import { hydratable } from 'svelte';
+const rand = hydratable('random', () => Math.random());
+```
+
+If you're a library author, be sure to prefix the keys of your `hydratable` values with the name of your library so that your keys don't conflict with other libraries.
+
+## Serialization
+
+All data returned from a `hydratable` function must be serializable. But this doesn't mean you're limited to JSON — Svelte uses [`devalue`](https://npmjs.com/package/devalue), which can serialize all sorts of things including `Map`, `Set`, `URL`, and `BigInt`. Check the documentation page for a full list. In addition to these, thanks to some Svelte magic, you can also fearlessly use promises:
+
+```svelte
+<script>
+  import { hydratable } from 'svelte';
+  const promises = hydratable('random', () => {
+    return {
+      one: Promise.resolve(1),
+      two: Promise.resolve(2)
+    }
+  });
+</script>
+
+{await promises.one}
+{await promises.two}
+```
+
+## CSP
+
+`hydratable` adds an inline `<script>` block to the `head` returned from `render`. If you're using [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) (CSP), this script will likely fail to run. You can provide a `nonce` to `render`:
+
+```js
+/// file: server.js
+import { render } from 'svelte/server';
+import App from './App.svelte';
+// ---cut---
+const nonce = crypto.randomUUID();
+
+const { head, body } = await render(App, {
+	csp: { nonce }
+});
+```
+
+This will add the `nonce` to the script block, on the assumption that you will later add the same nonce to the CSP header of the document that contains it:
+
+```js
+/// file: server.js
+let response = new Response();
+let nonce = 'xyz123';
+// ---cut---
+response.headers.set(
+  'Content-Security-Policy',
+  `script-src 'nonce-${nonce}'`
+ );
+```
+
+It's essential that a `nonce` — which, British slang definition aside, means 'number used once' — is only used when dynamically server rendering an individual response.
+
+If instead you are generating static HTML ahead of time, you must use hashes instead:
+
+```js
+/// file: server.js
+import { render } from 'svelte/server';
+import App from './App.svelte';
+// ---cut---
+const { head, body, hashes } = await render(App, {
+	csp: { hash: true }
+});
+```
+
+`hashes.script` will be an array of strings like `["sha256-abcd123"]`. As with `nonce`, the hashes should be used in your CSP header:
+
+```js
+/// file: server.js
+let response = new Response();
+let hashes = { script: ['sha256-xyz123'] };
+// ---cut---
+response.headers.set(
+  'Content-Security-Policy',
+  `script-src ${hashes.script.map((hash) => `'${hash}'`).join(' ')}`
+ );
+```
+
+We recommend using `nonce` over hash if you can, as `hash` will interfere with streaming SSR in the future.
diff --git a/documentation/docs/07-misc/.generated/browser-support-features.md b/documentation/docs/07-misc/.generated/browser-support-features.md
new file mode 100644
index 0000000000..1ed6da9e61
--- /dev/null
+++ b/documentation/docs/07-misc/.generated/browser-support-features.md
@@ -0,0 +1,7 @@
+<!-- generated in ../../../../../packages/svelte/scripts/generate-browser-support.ts. do not edit -->
+
+| Feature | Chrome/Edge | Firefox | Safari |
+| - | - | - | - |
+| [`$state.snapshot`](/docs/svelte/$state#$state.snapshot) | 98 | 94 | 15.4 |
+| [`bind:devicePixelContentBoxSize`](/docs/svelte/bind#Dimensions) | <span style="color: var(--sk-fg-4)">—</span> | 93 | not supported |
+| [`flip` from `svelte/animate`](/docs/svelte/svelte-animate#flip) | <span style="color: var(--sk-fg-4)">—</span> | 126 | <span style="color: var(--sk-fg-4)">—</span> |
diff --git a/documentation/docs/07-misc/.generated/browser-support.md b/documentation/docs/07-misc/.generated/browser-support.md
new file mode 100644
index 0000000000..1e8b962856
--- /dev/null
+++ b/documentation/docs/07-misc/.generated/browser-support.md
@@ -0,0 +1,15 @@
+<!-- generated in ../../../../../packages/svelte/scripts/generate-browser-support.ts. do not edit -->
+
+| Browser | Minimum version |
+| - | - |
+| Chrome/Edge | 87 |
+| Firefox | 83 |
+| Safari | 14 |
+| Opera | 73 |
+| Opera (Android) | 62 |
+| Samsung Internet | 14.0 |
+| Android WebView | 87 |
+| Internet Explorer | not supported |
+
+
+> [!NOTE] This equates to a <a href="https://web-platform-dx.github.io/baseline/">Baseline</a> target of 2020.
\ No newline at end of file
diff --git a/documentation/docs/07-misc/01-best-practices.md b/documentation/docs/07-misc/01-best-practices.md
new file mode 100644
index 0000000000..e2cb72828f
--- /dev/null
+++ b/documentation/docs/07-misc/01-best-practices.md
@@ -0,0 +1,185 @@
+---
+title: Best practices
+skill: true
+name: svelte-core-bestpractices
+description: Guidance on writing fast, robust, modern Svelte code. Load this skill whenever in a Svelte project and asked to write/edit or analyze a Svelte component or module. Covers reactivity, event handling, styling, integration with libraries and more.
+---
+
+<!-- llm-ignore-start -->
+This document outlines some best practices that will help you write fast, robust Svelte apps. It is also available as a `svelte-core-bestpractices` skill for your agents.
+<!-- llm-ignore-end -->
+
+## `$state`
+
+Only use the `$state` rune for variables that should be _reactive_ — in other words, variables that cause an `$effect`, `$derived` or template expression to update. Everything else can be a normal variable.
+
+Objects and arrays (`$state({...})` or `$state([...])`) are made deeply reactive, meaning mutation will trigger updates. This has a trade-off: in exchange for fine-grained reactivity, the objects must be proxied, which has performance overhead. In cases where you're dealing with large objects that are only ever reassigned (rather than mutated), use `$state.raw` instead. This is often the case with API responses, for example.
+
+## `$derived`
+
+To compute something from state, use `$derived` rather than `$effect`:
+
+```js
+// @errors: 2451
+let num = 0;
+// ---cut---
+// do this
+let square = $derived(num * num);
+
+// don't do this
+let square;
+
+$effect(() => {
+	square = num * num;
+});
+```
+
+> [!NOTE] `$derived` is given an expression, _not_ a function. If you need to use a function (because the expression is complex, for example) use `$derived.by`.
+
+Deriveds are writable — you can assign to them, just like `$state`, except that they will re-evaluate when their expression changes.
+
+If the derived expression is an object or array, it will be returned as-is — it is _not_ made deeply reactive. You can, however, use `$state` inside `$derived.by` in the rare cases that you need this.
+
+## `$effect`
+
+Effects are an escape hatch and should mostly be avoided. In particular, avoid updating state inside effects.
+
+- If you need to sync state to an external library such as D3, it is often neater to use [`{@attach ...}`](@attach)
+- If you need to run some code in response to user interaction, put the code directly in an event handler or use a [function binding](bind#Function-bindings) as appropriate
+- If you need to log values for debugging purposes, use [`$inspect`]($inspect)
+- If you need to observe something external to Svelte, use [`createSubscriber`](svelte-reactivity#createSubscriber)
+
+Never wrap the contents of an effect in `if (browser) {...}` or similar — effects do not run on the server.
+
+## `$props`
+
+Treat props as though they will change. For example, values that depend on props should usually use `$derived`:
+
+```js
+// @errors: 2451
+let { type } = $props();
+
+// do this
+let color = $derived(type === 'danger' ? 'red' : 'green');
+
+// don't do this — `color` will not update if `type` changes
+let color = type === 'danger' ? 'red' : 'green';
+```
+
+## `$inspect.trace`
+
+`$inspect.trace` is a debugging tool for reactivity. If something is not updating properly or running more than it should you can add `$inspect.trace(label)` as the first line of an `$effect` or `$derived.by` (or any function they call) to trace their dependencies and discover which one triggered an update.
+
+## Events
+
+Any element attribute starting with `on` is treated as an event listener:
+
+```svelte
+<button onclick={() => {...}}>click me</button>
+
+<!-- attribute shorthand also works -->
+<button {onclick}>...</button>
+
+<!-- so do spread attributes -->
+<button {...props}>...</button>
+```
+
+If you need to attach listeners to `window` or `document` you can use `<svelte:window>` and `<svelte:document>`:
+
+```svelte
+<svelte:window onkeydown={...} />
+<svelte:document onvisibilitychange={...} />
+```
+
+Avoid using `onMount` or `$effect` for this.
+
+## Snippets
+
+[Snippets](snippet) are a way to define reusable chunks of markup that can be instantiated with the [`{@render ...}`](@render) tag, or passed to components as props. They must be declared within the template.
+
+```svelte
+{#snippet greeting(name)}
+  <p>hello {name}!</p>
+{/snippet}
+
+{@render greeting('world')}
+```
+
+> [!NOTE] Snippets declared at the top level of a component (i.e. not inside elements or blocks) can be referenced inside `<script>`. A snippet that doesn't reference component state is also available in a `<script module>`, in which case it can be exported for use by other components.
+
+## Each blocks
+
+Prefer to use [keyed each blocks](each#Keyed-each-blocks) — this improves performance by allowing Svelte to surgically insert or remove items rather than updating the DOM belonging to existing items.
+
+> [!NOTE] The key _must_ uniquely identify the object. Do not use the index as a key.
+
+Avoid destructuring if you need to mutate the item (with something like `bind:value={item.count}`, for example).
+
+## Using JavaScript variables in CSS
+
+If you have a JS variable that you want to use inside CSS you can set a CSS custom property with the `style:` directive.
+
+```svelte
+<div style:--columns={columns}>...</div>
+```
+
+You can then reference `var(--columns)` inside the component's `<style>`.
+
+## Styling child components
+
+The CSS in a component's `<style>` is scoped to that component. If a parent component needs to control the child's styles, the preferred way is to use CSS custom properties:
+
+```svelte
+<!-- Parent.svelte -->
+<Child --color="red" />
+
+<!-- Child.svelte -->
+<h1>Hello</h1>
+
+<style>
+	h1 {
+		color: var(--color);
+	}
+</style>
+```
+
+If this is impossible (for example, the child component comes from a library) you can use `:global` to override styles:
+
+```svelte
+<div>
+	<Child />
+</div>
+
+<style>
+	div :global {
+		h1 {
+			color: red;
+		}
+	}
+</style>
+```
+
+## Context
+
+Consider using context instead of declaring state in a shared module. This will scope the state to the part of the app that needs it, and eliminate the possibility of it leaking between users when server-side rendering.
+
+Use `createContext` rather than `setContext` and `getContext`, as it provides type safety.
+
+## Async Svelte
+
+If using version 5.36 or higher, you can use [await expressions](await-expressions) and [hydratable](hydratable) to use promises directly inside components. Note that these require the `experimental.async` option to be enabled in `svelte.config.js` as they are not yet considered fully stable.
+
+## Avoid legacy features
+
+Always use runes mode for new code, and avoid features that have more modern replacements:
+
+- use `$state` instead of implicit reactivity (e.g. `let count = 0; count += 1`)
+- use `$derived` and `$effect` instead of `$:` assignments and statements (but only use effects when there is no better solution)
+- use `$props` instead of `export let`, `$$props` and `$$restProps`
+- use `onclick={...}` instead of `on:click={...}`
+- use `{#snippet ...}` and `{@render ...}` instead of `<slot>` and `$$slots` and `<svelte:fragment>`
+- use `<DynamicComponent>` instead of `<svelte:component this={DynamicComponent}>`
+- use `import Self from './ThisComponent.svelte'` and `<Self>` instead of `<svelte:self>`
+- use classes with `$state` fields to share reactivity between components, instead of using stores
+- use `{@attach ...}` instead of `use:action`
+- use clsx-style arrays and objects in `class` attributes, instead of the `class:` directive
diff --git a/documentation/docs/07-misc/02-testing.md b/documentation/docs/07-misc/02-testing.md
index c8774e341f..0ad82a19b5 100644
--- a/documentation/docs/07-misc/02-testing.md
+++ b/documentation/docs/07-misc/02-testing.md
@@ -4,13 +4,13 @@ title: Testing
 
 Testing helps you write and maintain your code and guard against regressions. Testing frameworks help you with that, allowing you to describe assertions or expectations about how your code should behave. Svelte is unopinionated about which testing framework you use — you can write unit tests, integration tests, and end-to-end tests using solutions like [Vitest](https://vitest.dev/), [Jasmine](https://jasmine.github.io/), [Cypress](https://www.cypress.io/) and [Playwright](https://playwright.dev/).
 
-## Unit and integration testing using Vitest
+## Unit and component tests with Vitest
 
-Unit tests allow you to test small isolated parts of your code. Integration tests allow you to test parts of your application to see if they work together. If you're using Vite (including via SvelteKit), we recommend using [Vitest](https://vitest.dev/).
+Unit tests allow you to test small isolated parts of your code. Integration tests allow you to test parts of your application to see if they work together. If you're using Vite (including via SvelteKit), we recommend using [Vitest](https://vitest.dev/). You can use the Svelte CLI to [setup Vitest](/docs/cli/vitest) either during project creation or later on.
 
-To get started, install Vitest:
+To setup Vitest manually, first install it:
 
-```bash
+```sh
 npm install -D vitest
 ```
 
@@ -38,9 +38,24 @@ You can now write unit tests for code inside your `.js/.ts` files:
 
 ```js
 /// file: multiplier.svelte.test.js
+// @filename: multiplier.svelte.ts
+export function multiplier(initial: number, k: number) {
+	let count = $state(initial);
+
+	return {
+		get value() {
+			return count * k;
+		},
+		set: (c: number) => {
+			count = c;
+		}
+	};
+}
+// @filename: multiplier.svelte.test.js
+// ---cut---
 import { flushSync } from 'svelte';
 import { expect, test } from 'vitest';
-import { multiplier } from './multiplier.js';
+import { multiplier } from './multiplier.svelte.js';
 
 test('Multiplier', () => {
 	let double = multiplier(0, 2);
@@ -53,12 +68,43 @@ test('Multiplier', () => {
 });
 ```
 
+```js
+/// file: multiplier.svelte.js
+/**
+ * @param {number} initial
+ * @param {number} k
+ */
+export function multiplier(initial, k) {
+	let count = $state(initial);
+
+	return {
+		get value() {
+			return count * k;
+		},
+		/** @param {number} c */
+		set: (c) => {
+			count = c;
+		}
+	};
+}
+```
+
 ### Using runes inside your test files
 
-It is possible to use runes inside your test files. First ensure your bundler knows to route the file through the Svelte compiler before running the test by adding `.svelte` to the filename (e.g `multiplier.svelte.test.js`). After that, you can use runes inside your tests.
+Since Vitest processes your test files the same way as your source files, you can use runes inside your tests as long as the filename includes `.svelte`:
 
 ```js
 /// file: multiplier.svelte.test.js
+// @filename: multiplier.svelte.ts
+export function multiplier(getCount: () => number, k: number) {
+	return {
+		get value() {
+			return getCount() * k;
+		}
+	};
+}
+// @filename: multiplier.svelte.test.js
+// ---cut---
 import { flushSync } from 'svelte';
 import { expect, test } from 'vitest';
 import { multiplier } from './multiplier.svelte.js';
@@ -75,10 +121,29 @@ test('Multiplier', () => {
 });
 ```
 
+```js
+/// file: multiplier.svelte.js
+/**
+ * @param {() => number} getCount
+ * @param {number} k
+ */
+export function multiplier(getCount, k) {
+	return {
+		get value() {
+			return getCount() * k;
+		}
+	};
+}
+```
+
 If the code being tested uses effects, you need to wrap the test inside `$effect.root`:
 
 ```js
 /// file: logger.svelte.test.js
+// @filename: logger.svelte.ts
+export function logger(fn: () => void) {}
+// @filename: logger.svelte.test.js
+// ---cut---
 import { flushSync } from 'svelte';
 import { expect, test } from 'vitest';
 import { logger } from './logger.svelte.js';
@@ -93,27 +158,44 @@ test('Effect', () => {
 		// effects normally run after a microtask,
 		// use flushSync to execute all pending effects synchronously
 		flushSync();
-		expect(log.value).toEqual([0]);
+		expect(log).toEqual([0]);
 
 		count = 1;
 		flushSync();
 
-		expect(log.value).toEqual([0, 1]);
+		expect(log).toEqual([0, 1]);
 	});
 
 	cleanup();
 });
 ```
 
+```js
+/// file: logger.svelte.js
+/**
+ * @param {() => any} getValue
+ */
+export function logger(getValue) {
+	/** @type {any[]} */
+	let log = [];
+
+	$effect(() => {
+		log.push(getValue());
+	});
+
+	return log;
+}
+```
+
 ### Component testing
 
-It is possible to test your components in isolation using Vitest.
+It is possible to test your components in isolation, which allows you to render them in a browser (real or simulated), simulate behavior, and make assertions, without spinning up your whole app.
 
-> [!NOTE] Before writing component tests, think about whether you actually need to test the component, or if it's more about the logic _inside_ the component. If so, consider extracting out that logic to test it in isolation, without the overhead of a component
+> [!NOTE] Before writing component tests, think about whether you actually need to test the component, or if it's more about the logic _inside_ the component. If so, consider extracting out that logic to test it in isolation, without the overhead of a component.
 
 To get started, install jsdom (a library that shims DOM APIs):
 
-```bash
+```sh
 npm install -D jsdom
 ```
 
@@ -128,7 +210,7 @@ export default defineConfig({
 		/* ... */
 	],
 	test: {
-		// If you are testing components client-side, you need to setup a DOM environment.
+		// If you are testing components client-side, you need to set up a DOM environment.
 		// If not all your files should have this environment, you can use a
 		// `// @vitest-environment jsdom` comment at the top of the test files instead.
 		environment: 'jsdom'
@@ -160,7 +242,7 @@ test('Component', () => {
 	expect(document.body.innerHTML).toBe('<button>0</button>');
 
 	// Click the button, then flush the changes so you can synchronously write expectations
-	document.body.querySelector('button').click();
+	document.body.querySelector('button')?.click();
 	flushSync();
 
 	expect(document.body.innerHTML).toBe('<button>1</button>');
@@ -173,6 +255,7 @@ test('Component', () => {
 While the process is very straightforward, it is also low level and somewhat brittle, as the precise structure of your component may change frequently. Tools like [@testing-library/svelte](https://testing-library.com/docs/svelte-testing-library/intro/) can help streamline your tests. The above test could be rewritten like this:
 
 ```js
+// @errors: 2339
 /// file: component.test.js
 import { render, screen } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
@@ -193,13 +276,55 @@ test('Component', async () => {
 
 When writing component tests that involve two-way bindings, context or snippet props, it's best to create a wrapper component for your specific test and interact with that. `@testing-library/svelte` contains some [examples](https://testing-library.com/docs/svelte-testing-library/example).
 
-## E2E tests using Playwright
+## Component tests with Storybook
+
+[Storybook](https://storybook.js.org) is a tool for developing and documenting UI components, and it can also be used to test your components. They're run with Vitest's browser mode, which renders your components in a real browser for the most realistic testing environment.
+
+To get started, first install Storybook ([using Svelte's CLI](/docs/cli/storybook)) in your project via `npx sv add storybook` and choose the recommended configuration that includes testing features. If you're already using Storybook, and for more information on Storybook's testing capabilities, follow the [Storybook testing docs](https://storybook.js.org/docs/writing-tests?renderer=svelte) to get started.
+
+You can create stories for component variations and test interactions with the [play function](https://storybook.js.org/docs/writing-tests/interaction-testing?renderer=svelte#writing-interaction-tests), which allows you to simulate behavior and make assertions using the Testing Library and Vitest APIs. Here's an example of two stories that can be tested, one that renders an empty LoginForm component and one that simulates a user filling out the form:
+
+```svelte
+/// file: LoginForm.stories.svelte
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { expect, fn } from 'storybook/test';
+
+	import LoginForm from './LoginForm.svelte';
+
+	const { Story } = defineMeta({
+		component: LoginForm,
+		args: {
+			// Pass a mock function to the `onSubmit` prop
+			onSubmit: fn(),
+		}
+	});
+</script>
+
+<Story name="Empty Form" />
+
+<Story
+	name="Filled Form"
+	play={async ({ args, canvas, userEvent }) => {
+		// Simulate a user filling out the form
+		await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+		await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
+		await userEvent.click(canvas.getByRole('button'));
+
+		// Run assertions
+		await expect(args.onSubmit).toHaveBeenCalledTimes(1);
+		await expect(canvas.getByText('You’re in!')).toBeInTheDocument();
+	}}
+/>
+```
+
+## End-to-end tests with Playwright
 
 E2E (short for 'end to end') tests allow you to test your full application through the eyes of the user. This section uses [Playwright](https://playwright.dev/) as an example, but you can also use other solutions like [Cypress](https://www.cypress.io/) or [NightwatchJS](https://nightwatchjs.org/).
 
-To get started with Playwright, either install it via [the VS Code extension](https://playwright.dev/docs/getting-started-vscode), or install it from the command line using `npm init playwright`. It is also part of the setup CLI when you run `npx sv create`.
+You can use the Svelte CLI to [setup Playwright](/docs/cli/playwright) either during project creation or later on. You can also [set it up with `npm init playwright`](https://playwright.dev/docs/intro). Additionally, you may also want to install an IDE plugin such as [the VS Code extension](https://playwright.dev/docs/getting-started-vscode) to be able to execute tests from inside your IDE.
 
-After you've done that, you should have a `tests` folder and a Playwright config. You may need to adjust that config to tell Playwright what to do before running the tests - mainly starting your application at a certain port:
+If you've run `npm init playwright` or are not using Vite, you may need to adjust the Playwright config to tell Playwright what to do before running the tests — mainly starting your application at a certain port. For example:
 
 ```js
 /// file: playwright.config.js
diff --git a/documentation/docs/07-misc/03-typescript.md b/documentation/docs/07-misc/03-typescript.md
index fbf8817069..b7f49f9c6f 100644
--- a/documentation/docs/07-misc/03-typescript.md
+++ b/documentation/docs/07-misc/03-typescript.md
@@ -40,22 +40,9 @@ If you want to use one of these features, you need to setup up a `script` prepro
 
 To use non-type-only TypeScript features within Svelte components, you need to add a preprocessor that will turn TypeScript into JavaScript.
 
-```ts
-/// file: svelte.config.js
-// @noErrors
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+### Using Vite
 
-const config = {
-	// Note the additional `{ script: true }`
-	preprocess: vitePreprocess({ script: true })
-};
-
-export default config;
-```
-
-### Using SvelteKit or Vite
-
-The easiest way to get started is scaffolding a new SvelteKit project by typing `npx sv create`, following the prompts and choosing the TypeScript option.
+If you're using SvelteKit, or Vite _without_ SvelteKit, you can use `vitePreprocess` from `@sveltejs/vite-plugin-svelte` in your config file:
 
 ```ts
 /// file: svelte.config.js
@@ -63,19 +50,16 @@ The easiest way to get started is scaffolding a new SvelteKit project by typing
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 const config = {
-	preprocess: vitePreprocess()
+	// Note the additional `{ script: true }`
+	preprocess: vitePreprocess({ script: true })
 };
 
 export default config;
 ```
 
-If you don't need or want all the features SvelteKit has to offer, you can scaffold a Svelte-flavoured Vite project instead by typing `npm create vite@latest` and selecting the `svelte-ts` option.
+### Using other build tools
 
-In both cases, a `svelte.config.js` with `vitePreprocess` will be added. Vite/SvelteKit will read from this config file.
-
-### Other build tools
-
-If you're using tools like Rollup or Webpack instead, install their respective Svelte plugins. For Rollup that's [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) and for Webpack that's [svelte-loader](https://github.com/sveltejs/svelte-loader). For both, you need to install `typescript` and `svelte-preprocess` and add the preprocessor to the plugin config (see the respective READMEs for more info). If you're starting a new project, you can also use the [rollup](https://github.com/sveltejs/template) or [webpack](https://github.com/sveltejs/template-webpack) template to scaffold the setup from a script.
+If you're using tools like Rollup (via [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte)) or Webpack (via [svelte-loader](https://github.com/sveltejs/svelte-loader)) instead, install `typescript` and `svelte-preprocess` and add the preprocessor to the plugin config. See the respective plugin READMEs for more info.
 
 > [!NOTE] If you're starting a new project, we recommend using SvelteKit or Vite instead
 
@@ -83,9 +67,9 @@ If you're using tools like Rollup or Webpack instead, install their respective S
 
 When using TypeScript, make sure your `tsconfig.json` is setup correctly.
 
-- Use a [`target`](https://www.typescriptlang.org/tsconfig/#target) of at least `ES2022`, or a `target` of at least `ES2015` alongside [`useDefineForClassFields`](https://www.typescriptlang.org/tsconfig/#useDefineForClassFields). This ensures that rune declarations on class fields are not messed with, which would break the Svelte compiler
+- Use a [`target`](https://www.typescriptlang.org/tsconfig/#target) of at least `ES2015` so classes are not compiled to functions
 - Set [`verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) to `true` so that imports are left as-is
-- Set [`isolatedModules`](https://www.typescriptlang.org/tsconfig/#isolatedModules) to `true` so that each file is looked at in isolation. TypeScript has a few features which require cross-file analysis and compilation, which the Svelte compiler and tooling like Vite don't do. 
+- Set [`isolatedModules`](https://www.typescriptlang.org/tsconfig/#isolatedModules) to `true` so that each file is looked at in isolation. TypeScript has a few features which require cross-file analysis and compilation, which the Svelte compiler and tooling like Vite don't do.
 
 ## Typing `$props`
 
@@ -254,39 +238,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 +263,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/07-misc/04-custom-elements.md b/documentation/docs/07-misc/04-custom-elements.md
index 71c66f7edc..4c2cb3aca3 100644
--- a/documentation/docs/07-misc/04-custom-elements.md
+++ b/documentation/docs/07-misc/04-custom-elements.md
@@ -4,7 +4,7 @@ title: Custom elements
 
 <!-- - [basically what we have today](https://svelte.dev/docs/custom-elements-api) -->
 
-Svelte components can also be compiled to custom elements (aka web components) using the `customElement: true` compiler option. You should specify a tag name for the component using the `<svelte:options>` [element](svelte-options).
+Svelte components can also be compiled to custom elements (aka web components) using the `customElement: true` compiler option. You should specify a tag name for the component using the `<svelte:options>` [element](svelte-options). Within the custom element you can access the host element via the [`$host`](https://svelte.dev/docs/svelte/$host) rune.
 
 ```svelte
 <svelte:options customElement="my-element" />
@@ -66,7 +66,10 @@ The inner Svelte component is destroyed in the next tick after the `disconnected
 When constructing a custom element, you can tailor several aspects by defining `customElement` as an object within `<svelte:options>` since Svelte 4. This object may contain the following properties:
 
 - `tag: string`: an optional `tag` property for the custom element's name. If set, a custom element with this tag name will be defined with the document's `customElements` registry upon importing this component.
-- `shadow`: an optional property that can be set to `"none"` to forgo shadow root creation. Note that styles are then no longer encapsulated, and you can't use slots
+- `shadow`: an optional property to modify shadow root properties. It accepts the following values:
+  - `"none"`: No shadow root is created. Note that styles are then no longer encapsulated, and you can't use slots.
+  - `"open"`: Shadow root is created with the `mode: "open"` option.
+  - [`ShadowRootInit`](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options): You can pass a settings object that will be passed to `attachShadow()` when shadow root is created.
 - `props`: an optional property to modify certain details and behaviors of your component's properties. It offers the following settings:
   - `attribute: string`: To update a custom element's prop, you have two alternatives: either set the property on the custom element's reference as illustrated above or use an HTML attribute. For the latter, the default attribute name is the lowercase property name. Modify this by assigning `attribute: "<desired name>"`.
   - `reflect: boolean`: By default, updated prop values do not reflect back to the DOM. To enable this behavior, set `reflect: true`.
@@ -78,7 +81,11 @@ When constructing a custom element, you can tailor several aspects by defining `
 <svelte:options
 	customElement={{
 		tag: 'custom-element',
-		shadow: 'none',
+		shadow: {
+			mode: import.meta.env.DEV ? 'open' : 'closed',
+			clonable: true,
+			// ...
+		},
 		props: {
 			name: { reflect: true, type: 'Number', attribute: 'element-index' }
 		},
@@ -114,6 +121,8 @@ When constructing a custom element, you can tailor several aspects by defining `
 ...
 ```
 
+> [!NOTE] While Typescript is supported in the `extend` function, it is subject to limitations: you need to set `lang="ts"` on one of the scripts AND you can only use [erasable syntax](https://www.typescriptlang.org/tsconfig/#erasableSyntaxOnly) in it. They are not processed by script preprocessors.
+
 ## Caveats and limitations
 
 Custom elements can be a useful way to package components for consumption in a non-Svelte app, as they will work with vanilla HTML and JavaScript as well as [most frameworks](https://custom-elements-everywhere.com/). There are, however, some important differences to be aware of:
@@ -125,3 +134,4 @@ Custom elements can be a useful way to package components for consumption in a n
 - The deprecated `let:` directive has no effect, because custom elements do not have a way to pass data to the parent component that fills the slot
 - Polyfills are required to support older browsers
 - You can use Svelte's context feature between regular Svelte components within a custom element, but you can't use them across custom elements. In other words, you can't use `setContext` on a parent custom element and read that with `getContext` in a child custom element.
+- Don't declare properties or attributes starting with `on`, as their usage will be interpreted as an event listener. In other words, Svelte treats `<custom-element oneworld={true}></custom-element>` as `customElement.addEventListener('eworld', true)` (and not as `customElement.oneworld = true`)
diff --git a/documentation/docs/07-misc/05-browser-support.md b/documentation/docs/07-misc/05-browser-support.md
new file mode 100644
index 0000000000..735f3126de
--- /dev/null
+++ b/documentation/docs/07-misc/05-browser-support.md
@@ -0,0 +1,15 @@
+---
+title: Browser support
+---
+
+The table below shows the minimum browser versions Svelte is expected to work in, derived from the browser APIs used by Svelte's internal code.
+
+@include .generated/browser-support.md
+
+This table only covers Svelte itself. It does not include [SvelteKit](/docs/kit), other Svelte libraries, or your own code.
+
+## Exceptions
+
+A few Svelte features require a higher minimum browser version. You'll only need to take the following table into consideration if you use these specific features.
+
+@include .generated/browser-support-features.md
diff --git a/documentation/docs/07-misc/06-v4-migration-guide.md b/documentation/docs/07-misc/06-v4-migration-guide.md
index 484931f20a..dbb1cac215 100644
--- a/documentation/docs/07-misc/06-v4-migration-guide.md
+++ b/documentation/docs/07-misc/06-v4-migration-guide.md
@@ -137,7 +137,7 @@ Transitions are now local by default to prevent confusion around page navigation
 {/if}
 ```
 
-To make transitions global, add the `|global` modifier - then they will play when _any_ control flow block above is created/destroyed. The migration script will do this automatically for you. ([#6686](https://github.com/sveltejs/svelte/issues/6686))
+To make transitions global, add the `|global` modifier — then they will play when _any_ control flow block above is created/destroyed. The migration script will do this automatically for you. ([#6686](https://github.com/sveltejs/svelte/issues/6686))
 
 ## Default slot bindings
 
@@ -150,10 +150,10 @@ Default slot bindings are no longer exposed to named slots and vice versa:
 
 <Nested let:count>
 	<p>
-		count in default slot - is available: {count}
+		count in default slot — is available: {count}
 	</p>
 	<p slot="bar">
-		count in bar slot - is not available: {count}
+		count in bar slot — is not available: {count}
 	</p>
 </Nested>
 ```
diff --git a/documentation/docs/07-misc/07-v5-migration-guide.md b/documentation/docs/07-misc/07-v5-migration-guide.md
index 09ea84f26c..9b1f2dec63 100644
--- a/documentation/docs/07-misc/07-v5-migration-guide.md
+++ b/documentation/docs/07-misc/07-v5-migration-guide.md
@@ -4,35 +4,35 @@ title: Svelte 5 migration guide
 
 Version 5 comes with an overhauled syntax and reactivity system. While it may look different at first, you'll soon notice many similarities. This guide goes over the changes in detail and shows you how to upgrade. Along with it, we also provide information on _why_ we did these changes.
 
-You don't have to migrate to the new syntax right away - Svelte 5 still supports the old Svelte 4 syntax, and you can mix and match components using the new syntax with components using the old and vice versa. We expect many people to be able to upgrade with only a few lines of code changed initially. There's also a [migration script](#Migration-script) that helps you with many of these steps automatically.
+You don't have to migrate to the new syntax right away — Svelte 5 still supports the old Svelte 4 syntax, and you can mix and match components using the new syntax with components using the old and vice versa. We expect many people to be able to upgrade with only a few lines of code changed initially. There's also a [migration script](#Migration-script) that helps you with many of these steps automatically.
 
 ## Reactivity syntax changes
 
 At the heart of Svelte 5 is the new runes API. Runes are basically compiler instructions that inform Svelte about reactivity. Syntactically, runes are functions starting with a dollar-sign.
 
-### let -> $state
+### let → $state
 
 In Svelte 4, a `let` declaration at the top level of a component was implicitly reactive. In Svelte 5, things are more explicit: a variable is reactive when created using the `$state` rune. Let's migrate the counter to runes mode by wrapping the counter in `$state`:
 
 ```svelte
 <script>
-	let count = +++$state(+++0+++)+++;
+	let count = +++$state(0)+++;
 </script>
 ```
 
 Nothing else changes. `count` is still the number itself, and you read and write directly to it, without a wrapper like `.value` or `getCount()`.
 
 > [!DETAILS] Why we did this
-> `let` being implicitly reactive at the top level worked great, but it meant that reactivity was constrained - a `let` declaration anywhere else was not reactive. This forced you to resort to using stores when refactoring code out of the top level of components for reuse. This meant you had to learn an entirely separate reactivity model, and the result often wasn't as nice to work with. Because reactivity is more explicit in Svelte 5, you can keep using the same API outside the top level of components. Head to [the tutorial](/tutorial) to learn more.
+> `let` being implicitly reactive at the top level worked great, but it meant that reactivity was constrained — a `let` declaration anywhere else was not reactive. This forced you to resort to using stores when refactoring code out of the top level of components for reuse. This meant you had to learn an entirely separate reactivity model, and the result often wasn't as nice to work with. Because reactivity is more explicit in Svelte 5, you can keep using the same API outside the top level of components. Head to [the tutorial](/tutorial) to learn more.
 
-### $: -> $derived/$effect
+### $: → $derived/$effect
 
 In Svelte 4, a `$:` statement at the top level of a component could be used to declare a derivation, i.e. state that is entirely defined through a computation of other state. In Svelte 5, this is achieved using the `$derived` rune:
 
 ```svelte
 <script>
-	let count = +++$state(+++0+++)+++;
-	---$:--- +++const+++ double = +++$derived(+++count * 2+++)+++;
+	let count = $state(0);
+	---$:--- +++const+++ double = +++$derived(count * 2)+++;
 </script>
 ```
 
@@ -42,7 +42,8 @@ A `$:` statement could also be used to create side effects. In Svelte 5, this is
 
 ```svelte
 <script>
-	let count = +++$state(+++0+++)+++;
+	let count = $state(0);
+
 	---$:---+++$effect(() =>+++ {
 		if (count > 5) {
 			alert('Count is too high!');
@@ -51,6 +52,8 @@ A `$:` statement could also be used to create side effects. In Svelte 5, this is
 </script>
 ```
 
+Note that [when `$effect` runs is different]($effect#Understanding-dependencies) than when `$:` runs.
+
 > [!DETAILS] Why we did this
 > `$:` was a great shorthand and easy to get started with: you could slap a `$:` in front of most code and it would somehow work. This intuitiveness was also its drawback the more complicated your code became, because it wasn't as easy to reason about. Was the intent of the code to create a derivation, or a side effect? With `$derived` and `$effect`, you have a bit more up-front decision making to do (spoiler alert: 90% of the time you want `$derived`), but future-you and other developers on your team will have an easier time.
 >
@@ -71,14 +74,14 @@ A `$:` statement could also be used to create side effects. In Svelte 5, this is
 > - executing dependencies as needed and therefore being immune to ordering problems
 > - being TypeScript-friendly
 
-### export let -> $props
+### export let → $props
 
 In Svelte 4, properties of a component were declared using `export let`. Each property was one declaration. In Svelte 5, all properties are declared through the `$props` rune, through destructuring:
 
 ```svelte
 <script>
-	---export let optional = 'unset';
-	export let required;---
+	---export let optional = 'unset';---
+	---export let required;---
 	+++let { optional = 'unset', required } = $props();+++
 </script>
 ```
@@ -103,8 +106,8 @@ In Svelte 5, the `$props` rune makes this straightforward without any additional
 
 ```svelte
 <script>
-	---let klass = '';
-	export { klass as class};---
+	---let klass = '';---
+	---export { klass as class};---
 	+++let { class: klass, ...rest } = $props();+++
 </script>
 <button class={klass} {...---$$restProps---+++rest+++}>click me</button>
@@ -117,7 +120,7 @@ In Svelte 5, the `$props` rune makes this straightforward without any additional
 
 ## Event changes
 
-Event handlers have been given a facelift in Svelte 5. Whereas in Svelte 4 we use the `on:` directive to attach an event listener to an element, in Svelte 5 they are properties like any other (in other words - remove the colon):
+Event handlers have been given a facelift in Svelte 5. Whereas in Svelte 4 we use the `on:` directive to attach an event listener to an element, in Svelte 5 they are properties like any other (in other words — remove the colon):
 
 ```svelte
 <script>
@@ -151,7 +154,7 @@ Since they're just properties, you can use the normal shorthand syntax...
 
 In Svelte 4, components could emit events by creating a dispatcher with `createEventDispatcher`.
 
-This function is deprecated in Svelte 5. Instead, components should accept _callback props_ - which means you then pass functions as properties to these components:
+This function is deprecated in Svelte 5. Instead, components should accept _callback props_ — which means you then pass functions as properties to these components:
 
 ```svelte
 <!--- file: App.svelte --->
@@ -190,9 +193,9 @@ This function is deprecated in Svelte 5. Instead, components should accept _call
 ```svelte
 <!--- file: Pump.svelte --->
 <script>
-    ---import { createEventDispatcher } from 'svelte';
-    const dispatch = createEventDispatcher();
-    ---
+	---import { createEventDispatcher } from 'svelte';---
+	---const dispatch = createEventDispatcher();---
+
 	+++let { inflate, deflate } = $props();+++
 	let power = $state(5);
 </script>
@@ -242,7 +245,7 @@ In Svelte 4, you can add event modifiers to handlers:
 <button on:click|once|preventDefault={handler}>...</button>
 ```
 
-Modifiers are specific to `on:` and as such do not work with modern event handlers. Adding things like `event.preventDefault()` inside the handler itself is preferable, since all the logic lives in one place rather than being split between handler and modifiers.
+Modifiers are specific to `on:` and so do not work with modern event handlers. Adding things like `event.preventDefault()` inside the handler itself is preferable, since all the logic lives in one place rather than being split between handler and modifiers.
 
 Since event handlers are just functions, you can create your own wrappers as necessary:
 
@@ -321,7 +324,7 @@ When spreading props, local event handlers must go _after_ the spread, or they r
 >
 > It was always possible to use component callback props, but because you had to listen to DOM events using `on:`, it made sense to use `createEventDispatcher` for component events due to syntactical consistency. Now that we have event attributes (`onclick`), it's the other way around: Callback props are now the more sensible thing to do.
 >
-> The removal of event modifiers is arguably one of the changes that seems like a step back for those who've liked the shorthand syntax of event modifiers. Given that they are not used that frequently, we traded a smaller surface area for more explicitness. Modifiers also were inconsistent, because most of them were only useable on DOM elements.
+> The removal of event modifiers is arguably one of the changes that seems like a step back for those who've liked the shorthand syntax of event modifiers. Given that they are not used that frequently, we traded a smaller surface area for more explicitness. Modifiers also were inconsistent, because most of them were only usable on DOM elements.
 >
 > Multiple listeners for the same event are also no longer possible, but it was something of an anti-pattern anyway, since it impedes readability: if there are many attributes, it becomes harder to spot that there are two handlers unless they are right next to each other. It also implies that the two handlers are independent, when in fact something like `event.stopImmediatePropagation()` inside `one` would prevent `two` from being called.
 >
@@ -337,9 +340,33 @@ When spreading props, local event handlers must go _after_ the spread, or they r
 
 ## Snippets instead of slots
 
-In Svelte 4, content can be passed to components using slots. Svelte 5 replaces them with snippets which are more powerful and flexible, and as such slots are deprecated in Svelte 5.
+In Svelte 4, content can be passed to components using slots. Svelte 5 replaces them with snippets, which are more powerful and flexible, and so slots are deprecated in Svelte 5.
+
+They continue to work, however, and you can pass snippets to a component that uses slots:
+
+```svelte
+<!--- file: Child.svelte --->
+<slot />
+<hr />
+<slot name="foo" message="hello" />
+```
+
+```svelte
+<!--- file: Parent.svelte --->
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<Child>
+	default child content
 
-They continue to work, however, and you can mix and match snippets and slots in your components.
+	{#snippet foo({ message })}
+		message from child: {message}
+	{/snippet}
+</Child>
+```
+
+(The reverse is not true — you cannot pass slotted content to a component that uses [`{@render ...}`](/docs/svelte/@render) tags.)
 
 When using custom elements, you should still use `<slot />` like before. In a future version, when Svelte removes its internal version of slots, it will leave those slots as-is, i.e. output a regular DOM tag instead of transforming it.
 
@@ -435,16 +462,16 @@ In Svelte 4, you would pass data to a `<slot />` and then retrieve it with `let:
 
 ## Migration script
 
-By now you should have a pretty good understanding of the before/after and how the old syntax relates to the new syntax. It probably also became clear that a lot of these migrations are rather technical and repetitive - something you don't want to do by hand.
+By now you should have a pretty good understanding of the before/after and how the old syntax relates to the new syntax. It probably also became clear that a lot of these migrations are rather technical and repetitive — something you don't want to do by hand.
 
 We thought the same, which is why we provide a migration script to do most of the migration automatically. You can upgrade your project by using `npx sv migrate svelte-5`. This will do the following things:
 
 - bump core dependencies in your `package.json`
-- migrate to runes (`let` -> `$state` etc)
-- migrate to event attributes for DOM elements (`on:click` -> `onclick`)
-- migrate slot creations to render tags (`<slot />` -> `{@render children()}`)
-- migrate slot usages to snippets (`<div slot="x">...</div>` -> `{#snippet x()}<div>...</div>{/snippet}`)
-- migrate obvious component creations (`new Component(...)` -> `mount(Component, ...)`)
+- migrate to runes (`let` → `$state` etc)
+- migrate to event attributes for DOM elements (`on:click` → `onclick`)
+- migrate slot creations to render tags (`<slot />` → `{@render children()}`)
+- migrate slot usages to snippets (`<div slot="x">...</div>` → `{#snippet x()}<div>...</div>{/snippet}`)
+- migrate obvious component creations (`new Component(...)` → `mount(Component, ...)`)
 
 You can also migrate a single component in VS Code through the `Migrate Component to Svelte 5 Syntax` command, or in our Playground through the `Migrate` button.
 
@@ -572,7 +599,7 @@ Note that `mount` and `hydrate` are _not_ synchronous, so things like `onMount`
 
 ### Server API changes
 
-Similarly, components no longer have a `render` method when compiled for server side rendering. Instead, pass the function to `render` from `svelte/server`:
+Similarly, components no longer have a `render` method when compiled for server-side rendering. Instead, pass the function to `render` from `svelte/server`:
 
 ```js
 +++import { render } from 'svelte/server';+++
@@ -597,28 +624,57 @@ export declare const MyComponent: Component<{
 
 To declare that a component of a certain type is required:
 
+```js
+import { ComponentA, ComponentB } from 'component-library';
+---import type { SvelteComponent } from 'svelte';---
++++import type { Component } from 'svelte';+++
+
+---let C: typeof SvelteComponent<{ foo: string }> = $state(---
++++let C: Component<{ foo: string }> = $state(+++
+	Math.random() ? ComponentA : ComponentB
+);
+```
+
+The two utility types `ComponentEvents` and `ComponentType` are also deprecated. `ComponentEvents` is obsolete because events are defined as callback props now, and `ComponentType` is obsolete because the new `Component` type is the component type already (i.e. `ComponentType<SvelteComponent<{ prop: string }>>` is equivalent to `Component<{ prop: string }>`).
+
+### bind:this changes
+
+Because components are no longer classes, using `bind:this` no longer returns a class instance with `$set`, `$on` and `$destroy` methods on it. It only returns the instance exports (`export function/const`) and, if you're using the `accessors` option, a getter/setter-pair for each property.
+
+## `<svelte:component>` is no longer necessary
+
+In Svelte 4, components are _static_ — if you render `<Thing>`, and the value of `Thing` changes, [nothing happens](/playground/7f1fa24f0ab44c1089dcbb03568f8dfa?version=4.2.18). To make it dynamic you had to use `<svelte:component>`.
+
+This is no longer true in Svelte 5:
+
 ```svelte
-<script lang="ts">
-	import type { ---SvelteComponent--- +++Component+++ } from 'svelte';
-	import {
-		ComponentA,
-		ComponentB
-	} from 'component-library';
+<script>
+	import A from './A.svelte';
+	import B from './B.svelte';
 
-	---let component: typeof SvelteComponent<{ foo: string }>---
-	+++let component: Component<{ foo: string }>+++ = $state(
-		Math.random() ? ComponentA : ComponentB
-	);
+	let Thing = $state();
 </script>
 
-<svelte:component this={component} foo="bar" />
+<select bind:value={Thing}>
+	<option value={A}>A</option>
+	<option value={B}>B</option>
+</select>
+
+<!-- these are equivalent -->
+<Thing />
+<svelte:component this={Thing} />
 ```
+While migrating, keep in mind that your component's name should be capitalized (`Thing`) to distinguish it from elements, unless using dot notation.
 
-The two utility types `ComponentEvents` and `ComponentType` are also deprecated. `ComponentEvents` is obsolete because events are defined as callback props now, and `ComponentType` is obsolete because the new `Component` type is the component type already (e.g. `ComponentType<SvelteComponent<{ prop: string }>>` == `Component<{ prop: string }>`).
+### Dot notation indicates a component
 
-### bind:this changes
+In Svelte 4, `<foo.bar>` would create an element with a tag name of `"foo.bar"`. In Svelte 5, `foo.bar` is treated as a component instead. This is particularly useful inside `each` blocks:
 
-Because components are no longer classes, using `bind:this` no longer returns a class instance with `$set`, `$on` and `$destroy` methods on it. It only returns the instance exports (`export function/const`) and, if you're using the `accessors` option, a getter/setter-pair for each property.
+```svelte
+{#each items as item}
+	<item.component {...item.props} />
+{/each}
+```
 
 ## Whitespace handling changed
 
@@ -626,6 +682,24 @@ Previously, Svelte employed a very complicated algorithm to determine if whitesp
 
 - Whitespace between nodes is collapsed to one whitespace
 - Whitespace at the start and end of a tag is removed completely
+
+  This new behavior is slightly different from native HTML rendering. For example, `<p>foo<span> - bar</span></p>` will render:
+
+  - `foo - bar` in HTML
+  - `foo- bar` in Svelte 5
+
+  You can reintroduce the missing space by moving it outside the `<span>`...
+
+  ```svelte
+  <p>foo <span>- bar</span></p>
+  ```
+
+  ...or, if necessary for styling reasons, including it as an expression:
+
+  ```svelte
+  <p>foo<span>{' '}- bar</span></p>
+  ```
+
 - Certain exceptions apply such as keeping whitespace inside `pre` tags
 
 As before, you can disable whitespace trimming by setting the `preserveWhitespace` option in your compiler settings or on a per-component basis in `<svelte:options>`.
@@ -653,16 +727,6 @@ The `legacy` compiler option, which generated bulkier but IE-friendly code, no l
 
 Content inside component tags becomes a snippet prop called `children`. You cannot have a separate prop by that name.
 
-## Dot notation indicates a component
-
-In Svelte 4, `<foo.bar>` would create an element with a tag name of `"foo.bar"`. In Svelte 5, `foo.bar` is treated as a component instead. This is particularly useful inside `each` blocks:
-
-```svelte
-{#each items as item}
-	<item.component {...item.props} />
-{/each}
-```
-
 ## Breaking changes in runes mode
 
 Some breaking changes only apply once your component is in runes mode.
@@ -679,54 +743,62 @@ If a bindable property has a default value (e.g. `let { foo = $bindable('bar') }
 
 ### `accessors` option is ignored
 
-Setting the `accessors` option to `true` makes properties of a component directly accessible on the component instance. In runes mode, properties are never accessible on the component instance. You can use component exports instead if you need to expose them.
+Setting the `accessors` option to `true` makes properties of a component directly accessible on the component instance.
 
-### `immutable` option is ignored
-
-Setting the `immutable` option has no effect in runes mode. This concept is replaced by how `$state` and its variations work.
+```svelte
+<svelte:options accessors={true} />
 
-### Classes are no longer "auto-reactive"
+<script>
+	// available via componentInstance.name
+	export let name;
+</script>
+```
 
-In Svelte 4, doing the following triggered reactivity:
+In runes mode, properties are never accessible on the component instance. You can use component exports instead if you need to expose them.
 
 ```svelte
 <script>
-	let foo = new Foo();
+	let { name } = $props();
+	// available via componentInstance.getName()
+	export const getName = () => name;
 </script>
+```
 
-<button on:click={() => (foo.value = 1)}>{foo.value}</button
->
+Alternatively, if the place where they are instantiated is under your control, you can also make use of runes inside `.js/.ts` files by adjusting their ending to include `.svelte`, i.e. `.svelte.js` or `.svelte.ts`, and then use `$state`:
+
+```js
++++import { mount } from 'svelte';+++
+import App from './App.svelte'
+
+---const app = new App({ target: document.getElementById("app"), props: { foo: 'bar' } });
+app.foo = 'baz'---
++++const props = $state({ foo: 'bar' });
+const app = mount(App, { target: document.getElementById("app"), props });
+props.foo = 'baz';+++
 ```
 
-This is because the Svelte compiler treated the assignment to `foo.value` as an instruction to update anything that referenced `foo`. In Svelte 5, reactivity is determined at runtime rather than compile time, so you should define `value` as a reactive `$state` field on the `Foo` class. Wrapping `new Foo()` with `$state(...)` will have no effect — only vanilla objects and arrays are made deeply reactive.
+### `immutable` option is ignored
 
-### `<svelte:component>` is no longer necessary
+Setting the `immutable` option has no effect in runes mode. This concept is replaced by how `$state` and its variations work.
 
-In Svelte 4, components are _static_ — if you render `<Thing>`, and the value of `Thing` changes, [nothing happens](/playground/7f1fa24f0ab44c1089dcbb03568f8dfa?version=4.2.18). To make it dynamic you must use `<svelte:component>`.
+### Classes are no longer "auto-reactive"
 
-This is no longer true in Svelte 5:
+In Svelte 4, doing the following triggered reactivity:
 
 ```svelte
 <script>
-	import A from './A.svelte';
-	import B from './B.svelte';
-
-	let Thing = $state();
+	let foo = new Foo();
 </script>
 
-<select bind:value={Thing}>
-	<option value={A}>A</option>
-	<option value={B}>B</option>
-</select>
-
-<!-- these are equivalent -->
-<Thing />
-<svelte:component this={Thing} />
+<button on:click={() => (foo.value = 1)}>{foo.value}</button
+>
 ```
 
-### Touch and wheel events are passive
+This is because the Svelte compiler treated the assignment to `foo.value` as an instruction to update anything that referenced `foo`. In Svelte 5, reactivity is determined at runtime rather than compile time, so you should define `value` as a reactive `$state` field on the `Foo` class. Wrapping `new Foo()` with `$state(...)` will have no effect — only vanilla objects and arrays are made deeply reactive.
+
+### Touch events are passive
 
-When using `onwheel`, `onmousewheel`, `ontouchstart` and `ontouchmove` event attributes, the handlers are [passive](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#using_passive_listeners) to align with browser defaults. This greatly improves responsiveness by allowing the browser to scroll the document immediately, rather than waiting to see if the event handler calls `event.preventDefault()`.
+When using `ontouchstart` and `ontouchmove` event attributes, the handlers are [passive](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#using_passive_listeners) to align with browser defaults. This greatly improves responsiveness by allowing the browser to scroll the document immediately, rather than waiting to see if the event handler calls `event.preventDefault()`.
 
 In the very rare cases that you need to prevent these event defaults, you should use [`on`](/docs/svelte/svelte-events#on) instead (for example inside an action).
 
@@ -749,7 +821,7 @@ Note that Svelte 5 will also warn if you have a single expression wrapped in quo
 
 ### HTML structure is stricter
 
-In Svelte 4, you were allowed to write HTML code that would be repaired by the browser when server side rendering it. For example you could write this...
+In Svelte 4, you were allowed to write HTML code that would be repaired by the browser when server-side rendering it. For example you could write this...
 
 ```svelte
 <table>
@@ -779,9 +851,9 @@ Svelte 5 is more strict about the HTML structure and will throw a compiler error
 
 Assignments to destructured parts of a `@const` declaration are no longer allowed. It was an oversight that this was ever allowed.
 
-### :is(...) and :where(...) are scoped
+### :is(...), :has(...), and :where(...) are scoped
 
-Previously, Svelte did not analyse selectors inside `:is(...)` and `:where(...)`, effectively treating them as global. Svelte 5 analyses them in the context of the current component. As such, some selectors may now be treated as unused if they were relying on this treatment. To fix this, use `:global(...)` inside the `:is(...)/:where(...)` selectors.
+Previously, Svelte did not analyse selectors inside `:is(...)`, `:has(...)`, and `:where(...)`, effectively treating them as global. Svelte 5 analyses them in the context of the current component. Some selectors may now therefore be treated as unused if they were relying on this treatment. To fix this, use `:global(...)` inside the `:is(...)/:has(...)/:where(...)` selectors.
 
 When using Tailwind's `@apply` directive, add a `:global` selector to preserve rules that use Tailwind-generated `:is(...)` selectors:
 
@@ -910,7 +982,7 @@ Since these mismatches are extremely rare, Svelte 5 assumes that the values are
 
 ### Hydration works differently
 
-Svelte 5 makes use of comments during server side rendering which are used for more robust and efficient hydration on the client. As such, you shouldn't remove comments from your HTML output if you intend to hydrate it, and if you manually authored HTML to be hydrated by a Svelte component, you need to adjust that HTML to include said comments at the correct positions.
+Svelte 5 makes use of comments during server-side rendering which are used for more robust and efficient hydration on the client. You therefore should not remove comments from your HTML output if you intend to hydrate it, and if you manually authored HTML to be hydrated by a Svelte component, you need to adjust that HTML to include said comments at the correct positions.
 
 ### `onevent` attributes are delegated
 
diff --git a/documentation/docs/07-misc/99-faq.md b/documentation/docs/07-misc/99-faq.md
index b56c27af86..035629e5ae 100644
--- a/documentation/docs/07-misc/99-faq.md
+++ b/documentation/docs/07-misc/99-faq.md
@@ -18,7 +18,7 @@ There are online forums and chats which are a great place for discussion about b
 
 ## Are there any third-party resources?
 
-Svelte Society maintains a [list of books and videos](https://sveltesociety.dev/resources).
+Svelte Society maintains a [list of books and videos](https://sveltesociety.dev/collection/a-list-of-books-and-courses-ac01dd10363184fa).
 
 ## How can I get VS Code to syntax-highlight my .svelte files?
 
@@ -46,7 +46,7 @@ It will show up on hover.
 - You can use markdown here.
 - You can also use code blocks here.
 - Usage:
-  ```tsx
+  ```svelte
   <main name="Arethra">
   ```
 -->
@@ -65,11 +65,11 @@ There will be a blog post about this eventually, but in the meantime, check out
 
 ## Is there a UI component library?
 
-There are several UI component libraries as well as standalone components. Find them under the [design systems section of the components page](https://sveltesociety.dev/packages?category=design-system) on the Svelte Society website.
+There are several [UI component libraries](/packages#component-libraries) as well as standalone components listed on [the packages page](/packages).
 
 ## How do I test Svelte apps?
 
-How your application is structured and where logic is defined will determine the best way to ensure it is properly tested. It is important to note that not all logic belongs within a component - this includes concerns such as data transformation, cross-component state management, and logging, among others. Remember that the Svelte library has its own test suite, so you do not need to write tests to validate implementation details provided by Svelte.
+How your application is structured and where logic is defined will determine the best way to ensure it is properly tested. It is important to note that not all logic belongs within a component — this includes concerns such as data transformation, cross-component state management, and logging, among others. Remember that the Svelte library has its own test suite, so you do not need to write tests to validate implementation details provided by Svelte.
 
 A Svelte application will typically have three different types of tests: Unit, Component, and End-to-End (E2E).
 
@@ -81,32 +81,25 @@ _End-to-End Tests_: To ensure your users are able to interact with your applicat
 
 Some resources for getting started with testing:
 
+- [Svelte docs on testing](/docs/svelte/testing)
+- [Setup Vitest using the Svelte CLI](/docs/cli/vitest)
 - [Svelte Testing Library](https://testing-library.com/docs/svelte-testing-library/example/)
 - [Svelte Component Testing in Cypress](https://docs.cypress.io/guides/component-testing/svelte/overview)
-- [Example using vitest](https://github.com/vitest-dev/vitest/tree/main/examples/sveltekit)
 - [Example using uvu test runner with JSDOM](https://github.com/lukeed/uvu/tree/master/examples/svelte)
 - [Test Svelte components using Vitest & Playwright](https://davipon.hashnode.dev/test-svelte-component-using-vitest-playwright)
 - [Component testing with WebdriverIO](https://webdriver.io/docs/component-testing/svelte)
 
 ## Is there a router?
 
-The official routing library is [SvelteKit](/docs/kit). SvelteKit provides a filesystem router, server-side rendering (SSR), and hot module reloading (HMR) in one easy-to-use package. It shares similarities with Next.js for React.
+The official routing library is [SvelteKit](/docs/kit). SvelteKit provides a filesystem router, server-side rendering (SSR), and hot module reloading (HMR) in one easy-to-use package. It shares similarities with Next.js for React and Nuxt.js for Vue. SvelteKit also supports hash-based routing for client-side applications.
 
-However, you can use any router library. A lot of people use [page.js](https://github.com/visionmedia/page.js). There's also [navaid](https://github.com/lukeed/navaid), which is very similar. And [universal-router](https://github.com/kriasoft/universal-router), which is isomorphic with child routes, but without built-in history support.
-
-If you prefer a declarative HTML approach, there's the isomorphic [svelte-routing](https://github.com/EmilTholin/svelte-routing) library and a fork of it called [svelte-navigator](https://github.com/mefechoel/svelte-navigator) containing some additional functionality.
-
-If you need hash-based routing on the client side, check out [svelte-spa-router](https://github.com/ItalyPaleAle/svelte-spa-router) or [abstract-state-router](https://github.com/TehShrike/abstract-state-router/).
-
-[Routify](https://routify.dev) is another filesystem-based router, similar to SvelteKit's router. Version 3 supports Svelte's native SSR.
-
-You can see a [community-maintained list of routers on sveltesociety.dev](https://sveltesociety.dev/packages?category=routers).
+However, you can use any router library. A sampling of available routers are highlighted [on the packages page](/packages#routing).
 
 ## How do I write a mobile app with Svelte?
 
 While most mobile apps are written without using JavaScript, if you'd like to leverage your existing Svelte components and knowledge of Svelte when building mobile apps, you can turn a [SvelteKit SPA](https://kit.svelte.dev/docs/single-page-apps) into a mobile app with [Tauri](https://v2.tauri.app/start/frontend/sveltekit/) or [Capacitor](https://capacitorjs.com/solution/svelte). Mobile features like the camera, geolocation, and push notifications are available via plugins for both platforms.
 
-Svelte Native was an option available for Svelte 4, but note that Svelte 5 does not currently support it. Svelte Native lets you write NativeScript apps using Svelte components that contain [NativeScript UI components](https://docs.nativescript.org/ui/) rather than DOM elements, which may be familiar for users coming from React Native.
+Some work has been completed towards [custom renderer support in Svelte 5](https://github.com/sveltejs/svelte/issues/15470), but this feature is not yet available. The custom rendering API would support additional mobile frameworks like Lynx JS and Svelte Native. Svelte Native was an option available for Svelte 4, but Svelte 5 does not currently support it. Svelte Native lets you write NativeScript apps using Svelte components that contain [NativeScript UI components](https://docs.nativescript.org/ui/) rather than DOM elements, which may be familiar for users coming from React Native.
 
 ## Can I tell Svelte not to remove my unused styles?
 
diff --git a/documentation/docs/07-misc/xx-reactivity-indepth.md b/documentation/docs/07-misc/xx-reactivity-indepth.md
deleted file mode 100644
index b40072552f..0000000000
--- a/documentation/docs/07-misc/xx-reactivity-indepth.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Reactivity in depth
----
-
-- how to think about Runes ("just JavaScript" with added reactivity, what this means for keeping reactivity alive across boundaries)
-- signals
diff --git a/documentation/docs/98-reference/.generated/client-errors.md b/documentation/docs/98-reference/.generated/client-errors.md
index 90c9c1f9d1..2ab442afc3 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
 
 ```
@@ -21,15 +33,19 @@ A component is attempting to bind to a non-bindable property `%key%` belonging t
 ### component_api_changed
 
 ```
-%parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more information
+Calling `%method%` on a component instance (of %component%) is no longer valid in Svelte 5
 ```
 
+See the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.
+
 ### component_api_invalid_new
 
 ```
-Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more information
+Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working.
 ```
 
+See the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.
+
 ### derived_references_self
 
 ```
@@ -46,6 +62,14 @@ Keyed each block has duplicate key at indexes %a% and %b%
 Keyed each block has duplicate key `%value%` at indexes %a% and %b%
 ```
 
+### each_key_volatile
+
+```
+Keyed each block has key that is not idempotent — the key for item at index %index% was `%a%` but is now `%b%`. Keys must be the same each time for a given item
+```
+
+The key expression in a keyed each block must return the same value when called multiple times for the same item. Using expressions like `[item.a, item.b]` creates a new array each time, which will never be equal to itself. Instead, use a primitive value or create a stable key like `item.a + '-' + item.b`.
+
 ### effect_in_teardown
 
 ```
@@ -64,10 +88,105 @@ 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)
 ```
 
+Effects can only be created while a parent effect is running. This means that they cannot, for example, be created inside an event handler or after an `await` expression (unless the `await` occurs directly inside a component's `<script>` tag, and not inside an async function).
+
+In very rare cases, it is appropriate to use [`$effect.root`]($effect#$effect.root) so that you can create effects outside the normal component lifecycle.
+
+### 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.
+
+### fork_discarded
+
+```
+Cannot commit a fork that was already discarded
+```
+
+### fork_timing
+
+```
+Cannot create a fork inside an effect or when state changes are pending
+```
+
+### get_abort_signal_outside_reaction
+
+```
+`getAbortSignal()` can only be called inside an effect or derived
+```
+
+### hydratable_missing_but_required
+
+```
+Expected to find a hydratable with key `%key%` during hydration, but did not.
+```
+
+This can happen if you render a hydratable on the client that was not rendered on the server, and means that it was forced to fall back to running its function blockingly during hydration. This is bad for performance, as it blocks hydration until the asynchronous work completes.
+
+```svelte
+<script>
+  import { hydratable } from 'svelte';
+
+	if (BROWSER) {
+		// bad! nothing can become interactive until this asynchronous work is done
+		await hydratable('foo', get_slow_random_number);
+	}
+</script>
 ```
 
 ### hydration_failed
@@ -106,6 +225,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
 
 ```
@@ -118,14 +245,59 @@ Property descriptors defined on `$state` objects must contain `value` and always
 Cannot set prototype of `$state` object
 ```
 
-### state_unsafe_local_read
+### state_unsafe_mutation
 
 ```
-Reading state that was created inside the same derived is forbidden. Consider using `untrack` to read locally created state
+Updating state inside `$derived(...)`, `$inspect(...)` or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
 ```
 
-### state_unsafe_mutation
+This error occurs when state is updated while evaluating a `$derived`. You might encounter it while trying to 'derive' two pieces of state in one go:
+
+```svelte
+<script>
+	let count = $state(0);
+
+	let even = $state(true);
+
+	let odd = $derived.by(() => {
+		even = count % 2 === 0;
+		return !even;
+	});
+</script>
+
+<button onclick={() => count++}>{count}</button>
+
+<p>{count} is even: {even}</p>
+<p>{count} is odd: {odd}</p>
+```
+
+This is forbidden because it introduces instability: if `<p>{count} is even: {even}</p>` is updated before `odd` is recalculated, `even` will be stale. In most cases the solution is to make everything derived:
+
+```js
+let count = 0;
+// ---cut---
+let even = $derived(count % 2 === 0);
+let odd = $derived(!even);
+```
+
+If side-effects are unavoidable, use [`$effect`]($effect) instead.
+
+### svelte_boundary_reset_onerror
 
 ```
-Updating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
+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 06ca578b76..73c97c253c 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
 
 ```
@@ -52,7 +132,15 @@ Your `console.%method%` contained `$state` proxies. Consider using `$inspect(...
 
 When logging a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), browser devtools will log the proxy itself rather than the value it represents. In the case of Svelte, the 'target' of a `$state` proxy might not resemble its current value, which can be confusing.
 
-The easiest way to log a value as it changes over time is to use the [`$inspect`](https://svelte.dev/docs/svelte/$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](https://svelte.dev/docs/svelte/$state#$state.snapshot) to take a snapshot of the current value.
+The easiest way to log a value as it changes over time is to use the [`$inspect`](/docs/svelte/$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](/docs/svelte/$state#$state.snapshot) to take a snapshot of the current value.
+
+### derived_inert
+
+```
+Reading a derived belonging to a now-destroyed effect may result in stale values
+```
+
+A `$derived` value created inside an effect will stop updating when the effect is destroyed. You should create the `$derived` outside the effect, or inside an `$effect.root`.
 
 ### event_handler_invalid
 
@@ -60,6 +148,25 @@ The easiest way to log a value as it changes over time is to use the [`$inspect`
 %handler% should be a function. Did you mean to %suggestion%?
 ```
 
+### hydratable_missing_but_expected
+
+```
+Expected to find a hydratable with key `%key%` during hydration, but did not.
+```
+
+This can happen if you render a hydratable on the client that was not rendered on the server, and means that it was forced to fall back to running its function blockingly during hydration. This is bad for performance, as it blocks hydration until the asynchronous work completes.
+
+```svelte
+<script>
+  import { hydratable } from 'svelte';
+
+	if (BROWSER) {
+		// bad! nothing can become interactive until this asynchronous work is done
+		await hydratable('foo', get_slow_random_number);
+	}
+</script>
+```
+
 ### hydration_attribute_changed
 
 ```
@@ -138,7 +245,7 @@ Hydration failed because the initial UI does not match what was rendered on the
 
 This warning is thrown when Svelte encounters an error while hydrating the HTML from the server. During hydration, Svelte walks the DOM, expecting a certain structure. If that structure is different (for example because the HTML was repaired by the DOM because of invalid HTML), then Svelte will run into issues, resulting in this warning.
 
-During development, this error is often preceeded by a `console.error` detailing the offending HTML, which needs fixing.
+During development, this error is often preceded by a `console.error` detailing the offending HTML, which needs fixing.
 
 ### invalid_raw_snippet_render
 
@@ -161,7 +268,7 @@ Tried to unmount a component that was not mounted
 ### ownership_invalid_binding
 
 ```
-%parent% passed a value to %child% with `bind:`, but the value is owned by %owner%. Consider creating a binding between %owner% and %parent%
+%parent% passed property `%prop%` to %child% with `bind:`, but its parent component %owner% did not declare `%prop%` as a binding. Consider creating a binding between %owner% and %parent% (e.g. `bind:%prop%={...}` instead of `%prop%={...}`)
 ```
 
 Consider three components `GrandParent`, `Parent` and `Child`. If you do `<GrandParent bind:value>`, inside `GrandParent` pass on the variable via `<Parent {value} />` (note the missing `bind:`) and then do `<Child bind:value>` inside `Parent`, this warning is thrown.
@@ -171,11 +278,7 @@ To fix it, `bind:` to the value instead of just passing a property (i.e. in this
 ### ownership_invalid_mutation
 
 ```
-Mutating a value outside the component that created it is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
-```
-
-```
-%component% mutated a value owned by %owner%. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
+Mutating unbound props (`%name%`, at %location%) is strongly discouraged. Consider using `bind:%prop%={...}` in %parent% (or using a callback) instead
 ```
 
 Consider the following code:
@@ -204,6 +307,19 @@ Consider the following code:
 
 To fix it, either create callback props to communicate changes, or mark `person` as [`$bindable`]($bindable).
 
+### select_multiple_invalid_value
+
+```
+The `value` property of a `<select multiple>` element should be an array, but it received a non-array value. The selection will be kept as is.
+```
+
+When using `<select multiple value={...}>`, Svelte will mark all selected `<option>` elements as selected by iterating over the array passed to `value`. If `value` is not an array, Svelte will emit this warning and keep the selected options as they are.
+
+To silence the warning, ensure that `value`:
+
+- is an array for an explicit selection
+- is `null` or `undefined` to keep the selection as is
+
 ### state_proxy_equality_mismatch
 
 ```
@@ -222,3 +338,62 @@ 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.
+
+### state_proxy_unmount
+
+```
+Tried to unmount a state proxy, rather than a component
+```
+
+`unmount` was called with a state proxy:
+
+```js
+import { mount, unmount } from 'svelte';
+import Component from './Component.svelte';
+let target = document.body;
+// ---cut---
+let component = $state(mount(Component, { target }));
+
+// later...
+unmount(component);
+```
+
+Avoid using `$state` here. If `component` _does_ need to be reactive for some reason, use `$state.raw` instead.
+
+### 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%`
+```
+
+The [slide](/docs/svelte/svelte-transition#slide) transition works by animating the `height` of the element, which requires a `display` style like `block`, `flex` or `grid`. It does not work for:
+
+- `display: inline` (which is the default for elements like `<span>`), and its variants like `inline-block`, `inline-flex` and `inline-grid`
+- `display: table` and `table-[name]`, which are the defaults for elements like `<table>` and `<tr>`
+- `display: contents`
diff --git a/documentation/docs/98-reference/.generated/compile-errors.md b/documentation/docs/98-reference/.generated/compile-errors.md
index 298363f78d..0d25173711 100644
--- a/documentation/docs/98-reference/.generated/compile-errors.md
+++ b/documentation/docs/98-reference/.generated/compile-errors.md
@@ -63,9 +63,29 @@ Event attribute must be a JavaScript expression, not a string
 ### attribute_invalid_sequence_expression
 
 ```
-Sequence expressions are not allowed as attribute/directive values in runes mode, unless wrapped in parentheses
+Comma-separated expressions are not allowed as attribute/directive values in runes mode, unless wrapped in parentheses
 ```
 
+An attribute value cannot be a comma-separated sequence of expressions — in other words this is disallowed:
+
+```svelte
+<div class={size, color}>...</div>
+```
+
+Instead, make sure that the attribute value contains a single expression. In the example above it's likely that this was intended (see the [class documentation](class) for more details):
+
+```svelte
+<div class={[size, color]}>...</div>
+```
+
+If you _do_ need to use the comma operator for some reason, wrap the sequence in parentheses:
+
+```svelte
+<div class={(size, color)}>...</div>
+```
+
+Note that this will evaluate to `color`, ignoring `size`.
+
 ### attribute_invalid_type
 
 ```
@@ -84,6 +104,12 @@ Attribute values containing `{...}` must be enclosed in quote marks, unless the
 `bind:group` can only bind to an Identifier or MemberExpression
 ```
 
+### bind_group_invalid_snippet_parameter
+
+```
+Cannot `bind:group` to a snippet parameter
+```
+
 ### bind_invalid_expression
 
 ```
@@ -187,7 +213,52 @@ Cyclical dependency detected: %cycle%
 ### const_tag_invalid_placement
 
 ```
-`{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>` or `<Component>`
+`{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>`, `<svelte:boundary>` or `<Component>`
+```
+
+### const_tag_invalid_reference
+
+```
+The `{@const %name% = ...}` declaration is not available in this snippet
+```
+
+The following is an error:
+
+```svelte
+<svelte:boundary>
+    {@const foo = 'bar'}
+
+    {#snippet failed()}
+        {foo}
+    {/snippet}
+</svelte:boundary>
+```
+
+Here, `foo` is not available inside `failed`. The top level code inside `<svelte:boundary>` becomes part of the implicit `children` snippet, in other words the above code is equivalent to this:
+
+```svelte
+<svelte:boundary>
+    {#snippet children()}
+        {@const foo = 'bar'}
+    {/snippet}
+
+    {#snippet failed()}
+        {foo}
+    {/snippet}
+</svelte:boundary>
+```
+
+The same applies to components:
+
+```svelte
+<Component>
+    {@const foo = 'bar'}
+
+    {#snippet someProp()}
+        <!-- error -->
+        {foo}
+    {/snippet}
+</Component>
 ```
 
 ### constant_assignment
@@ -229,7 +300,31 @@ A top-level `:global {...}` block can only contain rules, not declarations
 ### css_global_block_invalid_list
 
 ```
-A `:global` selector cannot be part of a selector list with more than one item
+A `:global` selector cannot be part of a selector list with entries that don't contain `:global`
+```
+
+The following CSS is invalid:
+
+```css
+:global, x {
+    y {
+        color: red;
+    }
+}
+```
+
+This is mixing a `:global` block, which means "everything in here is unscoped", with a scoped selector (`x` in this case). As a result it's not possible to transform the inner selector (`y` in this case) into something that satisfies both requirements. You therefore have to split this up into two selectors:
+
+```css
+:global {
+    y {
+        color: red;
+    }
+}
+
+x y {
+    color: red;
+}
 ```
 
 ### css_global_block_invalid_modifier
@@ -244,6 +339,12 @@ A `:global` selector cannot modify an existing selector
 A `:global` selector can only be modified if it is a descendant of other selectors
 ```
 
+### css_global_block_invalid_placement
+
+```
+A `:global` selector cannot be inside a pseudoclass
+```
+
 ### css_global_invalid_placement
 
 ```
@@ -295,7 +396,19 @@ Invalid selector
 ### declaration_duplicate_module_import
 
 ```
-Cannot declare a variable with the same name as an import inside `<script module>`
+Cannot declare a variable with the same name as an import from `<script module>`
+```
+
+### declaration_tag_invalid_type
+
+```
+Declaration tags must be `let` or `const` declarations
+```
+
+### declaration_tag_no_legacy_mode
+
+```
+Declaration tags cannot be used in legacy mode
 ```
 
 ### derived_invalid_export
@@ -328,10 +441,54 @@ The $ name is reserved, and cannot be used for variables and imports
 The $ prefix is reserved, and cannot be used for variables and imports
 ```
 
+### duplicate_class_field
+
+```
+`%name%` has already been declared
+```
+
 ### each_item_invalid_assignment
 
 ```
-Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`)
+Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`, or `bind:value={array[i]}` instead of `bind:value={entry}`)
+```
+
+In legacy mode, it was possible to reassign or bind to the each block argument itself:
+
+```svelte
+<script>
+	let array = [1, 2, 3];
+</script>
+
+{#each array as entry}
+	<!-- reassignment -->
+	<button on:click={() => entry = 4}>change</button>
+
+	<!-- binding -->
+	<input bind:value={entry}>
+{/each}
+```
+
+This turned out to be buggy and unpredictable, particularly when working with derived values (such as `array.map(...)`), and as such is forbidden in runes mode. You can achieve the same outcome by using the index instead:
+
+```svelte
+<script>
+	let array = $state([1, 2, 3]);
+</script>
+
+{#each array as entry, i}
+	<!-- reassignment -->
+	<button onclick={() => array[i] = 4}>change</button>
+
+	<!-- binding -->
+	<input bind:value={array[i]}>
+{/each}
+```
+
+### each_key_without_as
+
+```
+An `{#each ...}` block without an `as` clause cannot have a key
 ```
 
 ### effect_invalid_placement
@@ -400,6 +557,12 @@ Expected an identifier
 Expected identifier or destructure pattern
 ```
 
+### expected_tag
+
+```
+Expected 'html', 'render', 'attach', 'const', or 'debug'
+```
+
 ### expected_token
 
 ```
@@ -412,6 +575,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
 
 ```
@@ -430,6 +599,12 @@ Expected whitespace
 `$host()` can only be used inside custom element component instances
 ```
 
+### illegal_await_expression
+
+```
+`use:`, `transition:` and `animate:` directives, attachments and bindings do not support await expressions
+```
+
 ### illegal_element_attribute
 
 ```
@@ -466,6 +641,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
 
 ```
@@ -541,7 +722,13 @@ Unrecognised compiler option %keypath%
 ### props_duplicate
 
 ```
-Cannot use `$props()` more than once
+Cannot use `%rune%()` more than once
+```
+
+### props_id_invalid_placement
+
+```
+`$props.id()` can only be used at the top level of components as a variable declaration initializer
 ```
 
 ### props_illegal_name
@@ -616,6 +803,12 @@ Cannot access a computed property of a rune
 `%name%` is not a valid rune
 ```
 
+### rune_invalid_spread
+
+```
+`%rune%` cannot be called with a spread argument
+```
+
 ### rune_invalid_usage
 
 ```
@@ -766,6 +959,38 @@ Cannot reassign or bind to snippet parameter
 This snippet is shadowing the prop `%prop%` with the same name
 ```
 
+### state_field_duplicate
+
+```
+`%name%` has already been declared on this class
+```
+
+An assignment to a class field that uses a `$state` or `$derived` rune is considered a _state field declaration_. The declaration can happen in the class body...
+
+```js
+class Counter {
+	count = $state(0);
+}
+```
+
+...or inside the constructor...
+
+```js
+class Counter {
+	constructor() {
+		this.count = $state(0);
+	}
+}
+```
+
+...but it can only happen once.
+
+### state_field_invalid_assignment
+
+```
+Cannot assign to a state field before its declaration
+```
+
 ### state_invalid_export
 
 ```
@@ -775,7 +1000,7 @@ Cannot export state from a module if it is reassigned. Either export a function
 ### state_invalid_placement
 
 ```
-`%rune%(...)` can only be used as a variable declaration initializer or a class field
+`%rune%(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.
 ```
 
 ### store_invalid_scoped_subscription
@@ -909,7 +1134,7 @@ Value must be %list%, if specified
 ### svelte_options_invalid_customelement
 
 ```
-"customElement" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: "open" | "none"; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }
+"customElement" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: "open" | "none" | `ShadowRootInit`; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }
 ```
 
 ### svelte_options_invalid_customelement_props
@@ -921,9 +1146,11 @@ Value must be %list%, if specified
 ### svelte_options_invalid_customelement_shadow
 
 ```
-"shadow" must be either "open" or "none"
+"shadow" must be either "open", "none" or `ShadowRootInit` object.
 ```
 
+See https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options for more information on valid shadow root constructor options
+
 ### svelte_options_invalid_tagname
 
 ```
@@ -1012,6 +1239,12 @@ Unexpected end of input
 '%word%' is a reserved word in JavaScript and cannot be used here
 ```
 
+### unterminated_string_constant
+
+```
+Unterminated string constant
+```
+
 ### void_element_invalid_content
 
 ```
diff --git a/documentation/docs/98-reference/.generated/compile-warnings.md b/documentation/docs/98-reference/.generated/compile-warnings.md
index f6f2585df2..f372a010a5 100644
--- a/documentation/docs/98-reference/.generated/compile-warnings.md
+++ b/documentation/docs/98-reference/.generated/compile-warnings.md
@@ -62,7 +62,7 @@ Enforce that `autofocus` is not used on elements. Autofocusing elements can caus
 ### a11y_click_events_have_key_events
 
 ```
-Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type="button">` or `<a>` might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details
+Visible, non-interactive element `<%element%>` with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type="button">` or `<a>` might be more appropriate
 ```
 
 Enforce that visible, non-interactive elements with an `onclick` event are accompanied by a keyboard event handler.
@@ -81,7 +81,7 @@ Coding for the keyboard is important for users with physical disabilities who ca
 ### a11y_consider_explicit_label
 
 ```
-Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute
+Buttons and links should either contain text or have an `aria-label`, `aria-labelledby` or `title` attribute
 ```
 
 ### a11y_distracting_elements
@@ -586,6 +586,14 @@ Attributes should not contain ':' characters to prevent ambiguity with Svelte di
 Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes
 ```
 
+### bidirectional_control_characters
+
+```
+A bidirectional control character was detected in your code. These characters can be used to alter the visual direction of your code and could have unintended consequences
+```
+
+Bidirectional control characters can alter the direction in which text appears to be in. For example, via control characters, you can make `defabc` look like `abcdef`. As a result, if you were to unknowingly copy and paste some code that has these control characters, they may alter the behavior of your code in ways you did not intend. See [trojansource.codes](https://trojansource.codes/) for more information.
+
 ### bind_invalid_each_rest
 
 ```
@@ -624,12 +632,63 @@ In some situations a selector may target an element that is not 'visible' to the
 </style>
 ```
 
+### custom_element_props_identifier
+
+```
+Using a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option.
+```
+
+### element_implicitly_closed
+
+```
+This element is implicitly closed by the following `%tag%`, which can cause an unexpected DOM structure. Add an explicit `%closing%` to avoid surprises.
+```
+
+In HTML, some elements are implicitly closed by another element. For example, you cannot nest a `<p>` inside another `<p>`:
+
+```html
+<!-- this HTML... -->
+<p><p>hello</p>
+
+<!-- results in this DOM structure -->
+<p></p>
+<p>hello</p>
+```
+
+Similarly, a parent element's closing tag will implicitly close all child elements, even if the `</` was a typo and you meant to create a _new_ element. To avoid ambiguity, it's always a good idea to have an explicit closing tag.
+
 ### element_invalid_self_closing_tag
 
 ```
 Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...></%name%>` rather than `<%name% ... />`
 ```
 
+In HTML, there's [no such thing as a self-closing tag](https://jakearchibald.com/2023/against-self-closing-tags-in-html/). While this _looks_ like a self-contained element with some text next to it...
+
+```html
+<div>
+	<span class="icon" /> some text!
+</div>
+```
+
+...a spec-compliant HTML parser (such as a browser) will in fact parse it like this, with the text _inside_ the icon:
+
+```html
+<div>
+	<span class="icon"> some text! </span>
+</div>
+```
+
+Some templating languages (including Svelte) will 'fix' HTML by turning `<span />` into `<span></span>`. Others adhere to the spec. Both result in ambiguity and confusion when copy-pasting code between different contexts, so Svelte prompts you to resolve the ambiguity directly by having an explicit closing tag.
+
+To automate this, run the dedicated migration:
+
+```sh
+npx sv migrate self-closing-tags
+```
+
+In a future version of Svelte, self-closing tags may be upgraded from a warning to an error.
+
 ### event_directive_deprecated
 
 ```
@@ -783,7 +842,7 @@ Reassignments of module-level declarations will not cause reactive statements to
 ### script_unknown_attribute
 
 ```
-Unrecognized attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it
+Unrecognised attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it
 ```
 
 ### slot_element_deprecated
@@ -797,15 +856,16 @@ See [the migration guide](v5-migration-guide#Snippets-instead-of-slots) for more
 ### state_referenced_locally
 
 ```
-State referenced in its own scope will never update. Did you mean to reference it inside a closure?
+This reference only captures the initial value of `%name%`. Did you mean to reference it inside a %type% instead?
 ```
 
 This warning is thrown when the compiler detects the following:
+
 - A reactive variable is declared
-- the variable is reassigned
-- the variable is referenced inside the same scope it is declared and it is a non-reactive context
+- ...and later reassigned...
+- ...and referenced in the same scope
 
-In this case, the state reassignment will not be noticed by whatever you passed it to. For example, if you pass the state to a function, that function will not notice the updates:
+This 'breaks the link' to the original state declaration. For example, if you pass the state to a function, the function loses access to the state once it is reassigned:
 
 ```svelte
 <!--- file: Parent.svelte --->
diff --git a/documentation/docs/98-reference/.generated/server-errors.md b/documentation/docs/98-reference/.generated/server-errors.md
index c3e8b53c31..5e11c1c8c4 100644
--- a/documentation/docs/98-reference/.generated/server-errors.md
+++ b/documentation/docs/98-reference/.generated/server-errors.md
@@ -1,5 +1,80 @@
 <!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->
 
+### async_local_storage_unavailable
+
+```
+The node API `AsyncLocalStorage` is not available, but is required to use async server rendering.
+```
+
+Some platforms require configuration flags to enable this API. Consult your platform's documentation.
+
+### await_invalid
+
+```
+Encountered asynchronous work while rendering synchronously.
+```
+
+You (or the framework you're using) called [`render(...)`](svelte-server#render) with a component containing an `await` expression. Either `await` the result of `render` or wrap the `await` (or the component containing it) in a [`<svelte:boundary>`](svelte-boundary) with a `pending` snippet.
+
+### dynamic_element_invalid_tag
+
+```
+`<svelte:element this="%tag%">` is not a valid element name — the element will not be rendered
+```
+
+The value passed to the `this` prop of `<svelte:element>` must be a valid HTML element, SVG element, MathML element, or custom element name. A value containing invalid characters (such as whitespace or special characters) was provided, which could be a security risk. Ensure only valid tag names are passed.
+
+### html_deprecated
+
+```
+The `html` property of server render results has been deprecated. Use `body` instead.
+```
+
+### hydratable_clobbering
+
+```
+Attempted to set `hydratable` with key `%key%` twice with different values.
+
+%stack%
+```
+
+This error occurs when using `hydratable` multiple times with the same key. To avoid this, you can:
+- Ensure all invocations with the same key result in the same value
+- Update the keys to make both instances unique
+
+```svelte
+<script>
+  import { hydratable } from 'svelte';
+
+  // which one should "win" and be serialized in the rendered response?
+  const one = hydratable('not-unique', () => 1);
+  const two = hydratable('not-unique', () => 2);
+</script>
+```
+
+### hydratable_serialization_failed
+
+```
+Failed to serialize `hydratable` data for key `%key%`.
+
+`hydratable` can serialize anything [`uneval` from `devalue`](https://npmjs.com/package/uneval) can, plus Promises.
+
+Cause:
+%stack%
+```
+
+### invalid_csp
+
+```
+`csp.nonce` was set while `csp.hash` was `true`. These options cannot be used simultaneously.
+```
+
+### invalid_id_prefix
+
+```
+The `idPrefix` option cannot include `--`.
+```
+
 ### lifecycle_function_unavailable
 
 ```
@@ -7,3 +82,11 @@
 ```
 
 Certain methods such as `mount` cannot be invoked while running in a server context. Avoid calling them eagerly, i.e. not during render.
+
+### server_context_required
+
+```
+Could not resolve `render` context.
+```
+
+Certain functions such as `hydratable` cannot be invoked outside of a `render(...)` call, such as at the top level of a module.
diff --git a/documentation/docs/98-reference/.generated/server-warnings.md b/documentation/docs/98-reference/.generated/server-warnings.md
new file mode 100644
index 0000000000..c4a7fbefef
--- /dev/null
+++ b/documentation/docs/98-reference/.generated/server-warnings.md
@@ -0,0 +1,34 @@
+<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->
+
+### unresolved_hydratable
+
+```
+A `hydratable` value with key `%key%` was created, but at least part of it was not used during the render.
+
+The `hydratable` was initialized in:
+%stack%
+```
+
+The most likely cause of this is creating a `hydratable` in the `script` block of your component and then `await`ing
+the result inside a `svelte:boundary` with a `pending` snippet:
+
+```svelte
+<script>
+  import { hydratable } from 'svelte';
+	import { getUser } from '$lib/get-user.js';
+
+	const user = hydratable('user', getUser);
+</script>
+
+<svelte:boundary>
+	<h1>{(await user).name}</h1>
+
+	{#snippet pending()}
+		<div>Loading...</div>
+	{/snippet}
+</svelte:boundary>
+```
+
+Consider inlining the `hydratable` call inside the boundary so that it's not called on the server.
+
+Note that this can also happen when a `hydratable` contains multiple promises and some but not all of them have been used.
diff --git a/documentation/docs/98-reference/.generated/shared-errors.md b/documentation/docs/98-reference/.generated/shared-errors.md
index 0102aafcbc..739bd58b35 100644
--- a/documentation/docs/98-reference/.generated/shared-errors.md
+++ b/documentation/docs/98-reference/.generated/shared-errors.md
@@ -1,5 +1,11 @@
 <!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->
 
+### experimental_async_required
+
+```
+Cannot use `%name%(...)` unless the `experimental.async` compiler option is `true`
+```
+
 ### invalid_default_snippet
 
 ```
@@ -30,6 +36,18 @@ This error would be thrown in a setup like this:
 
 Here, `List.svelte` is using `{@render children(item)` which means it expects `Parent.svelte` to use snippets. Instead, `Parent.svelte` uses the deprecated `let:` directive. This combination of APIs is incompatible, hence the error.
 
+### invalid_snippet_arguments
+
+```
+A snippet function was passed invalid arguments. Snippets should only be instantiated via `{@render ...}`
+```
+
+### invariant_violation
+
+```
+An invariant violation occurred, meaning Svelte's internal assumptions were flawed. This is a bug in Svelte, not your app — please open an issue at https://github.com/sveltejs/svelte, citing the following message: "%message%"
+```
+
 ### lifecycle_outside_component
 
 ```
@@ -54,6 +72,51 @@ Certain lifecycle methods can only be used during component initialisation. To f
 <button onclick={handleClick}>click me</button>
 ```
 
+### missing_context
+
+```
+Context was not set in a parent component
+```
+
+The [`createContext()`](svelte#createContext) utility returns a `[get, set]` pair of functions. `get` will throw an error if `set` was not used to set the context in a parent component.
+
+### snippet_without_render_tag
+
+```
+Attempted to render a snippet without a `{@render}` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change `{snippet}` to `{@render snippet()}`.
+```
+
+A component throwing this error will look something like this (`children` is not being rendered):
+
+```svelte
+<script>
+    let { children } = $props();
+</script>
+
+{children}
+```
+
+...or like this (a parent component is passing a snippet where a non-snippet value is expected):
+
+```svelte
+<!--- file: Parent.svelte --->
+<ChildComponent>
+  {#snippet label()}
+    <span>Hi!</span>
+  {/snippet}
+</ChildComponent>
+```
+
+```svelte
+<!--- file: Child.svelte --->
+<script>
+  let { label } = $props();
+</script>
+
+<!-- This component doesn't expect a snippet, but the parent provided one -->
+<p>{label}</p>
+```
+
 ### store_invalid_shape
 
 ```
diff --git a/documentation/docs/98-reference/21-svelte-action.md b/documentation/docs/98-reference/21-svelte-action.md
index 53423ec409..ef3ebfbf70 100644
--- a/documentation/docs/98-reference/21-svelte-action.md
+++ b/documentation/docs/98-reference/21-svelte-action.md
@@ -2,4 +2,6 @@
 title: svelte/action
 ---
 
+This module provides types for [actions](use), which have been superseded by [attachments](@attach).
+
 > MODULE: svelte/action
diff --git a/documentation/docs/98-reference/21-svelte-attachments.md b/documentation/docs/98-reference/21-svelte-attachments.md
new file mode 100644
index 0000000000..c414d3bbca
--- /dev/null
+++ b/documentation/docs/98-reference/21-svelte-attachments.md
@@ -0,0 +1,6 @@
+---
+title: svelte/attachments
+tags: attachments
+---
+
+> MODULE: svelte/attachments
diff --git a/documentation/docs/98-reference/21-svelte-reactivity.md b/documentation/docs/98-reference/21-svelte-reactivity.md
index 6857c1dba8..8070331f48 100644
--- a/documentation/docs/98-reference/21-svelte-reactivity.md
+++ b/documentation/docs/98-reference/21-svelte-reactivity.md
@@ -2,24 +2,6 @@
 title: svelte/reactivity
 ---
 
-Svelte provides reactive versions of various built-ins like `SvelteMap`, `SvelteSet` and `SvelteURL`. These can be imported from `svelte/reactivity` and used just like their native counterparts.
-
-```svelte
-<script>
-	import { SvelteURL } from 'svelte/reactivity';
-
-	const url = new SvelteURL('https://example.com/path');
-</script>
-
-<!-- changes to these... -->
-<input bind:value={url.protocol} />
-<input bind:value={url.hostname} />
-<input bind:value={url.pathname} />
-
-<hr />
-
-<!-- will update `href` and vice versa -->
-<input bind:value={url.href} />
-```
+Svelte provides reactive versions of various built-ins like [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) and [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) that can be used just like their native counterparts, as well as a handful of additional utilities for handling reactivity.
 
 > MODULE: svelte/reactivity
diff --git a/documentation/docs/98-reference/21-svelte-transition.md b/documentation/docs/98-reference/21-svelte-transition.md
index 396bc0aebf..e2ff6dbd0e 100644
--- a/documentation/docs/98-reference/21-svelte-transition.md
+++ b/documentation/docs/98-reference/21-svelte-transition.md
@@ -1,5 +1,6 @@
 ---
 title: svelte/transition
+tags: transitions
 ---
 
 > MODULE: svelte/transition
diff --git a/documentation/docs/99-legacy/10-legacy-on.md b/documentation/docs/99-legacy/10-legacy-on.md
index f2ee694cc1..ba084a228b 100644
--- a/documentation/docs/99-legacy/10-legacy-on.md
+++ b/documentation/docs/99-legacy/10-legacy-on.md
@@ -43,7 +43,7 @@ The following modifiers are available:
 
 - `preventDefault` — calls `event.preventDefault()` before running the handler
 - `stopPropagation` — calls `event.stopPropagation()`, preventing the event reaching the next element
-- `stopImmediatePropagation` - calls `event.stopImmediatePropagation()`, preventing other listeners of the same event from being fired.
+- `stopImmediatePropagation` — calls `event.stopImmediatePropagation()`, preventing other listeners of the same event from being fired.
 - `passive` — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so)
 - `nonpassive` — explicitly set `passive: false`
 - `capture` — fires the handler during the _capture_ phase instead of the _bubbling_ phase
diff --git a/documentation/docs/99-legacy/30-legacy-svelte-component.md b/documentation/docs/99-legacy/30-legacy-svelte-component.md
index 5d385a9c02..a0407e58bf 100644
--- a/documentation/docs/99-legacy/30-legacy-svelte-component.md
+++ b/documentation/docs/99-legacy/30-legacy-svelte-component.md
@@ -2,7 +2,7 @@
 title: <svelte:component>
 ---
 
-In runes mode, `<MyComponent>` will re-render if the value of `MyComponent` changes.
+In runes mode, `<MyComponent>` will re-render if the value of `MyComponent` changes. See the [Svelte 5 migration guide](/docs/svelte/v5-migration-guide#svelte:component-is-no-longer-necessary) for an example.
 
 In legacy mode, it won't — we must use `<svelte:component>`, which destroys and recreates the component instance when the value of its `this` expression changes:
 
diff --git a/eslint.config.js b/eslint.config.js
index d6c977a36a..c573ce8fba 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -33,7 +33,7 @@ const no_compiler_imports = {
 	}
 };
 
-/** @type {import('eslint').Linter.FlatConfig[]} */
+/** @type {import('eslint').Linter.Config[]} */
 export default [
 	...svelte_config,
 	{
@@ -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'
 		}
 	},
 	{
@@ -87,10 +89,13 @@ export default [
 			'**/*.d.ts',
 			'**/tests',
 			'packages/svelte/scripts/process-messages/templates/*.js',
+			'packages/svelte/scripts/_bundle.js',
+			'packages/svelte/scripts/_baseline/**',
 			'packages/svelte/src/compiler/errors.js',
 			'packages/svelte/src/internal/client/errors.js',
 			'packages/svelte/src/internal/client/warnings.js',
 			'packages/svelte/src/internal/shared/warnings.js',
+			'packages/svelte/src/internal/server/warnings.js',
 			'packages/svelte/compiler/index.js',
 			// stuff we don't want to lint
 			'benchmarking/**',
@@ -98,13 +103,10 @@ export default [
 			'playgrounds/sandbox/**',
 			// exclude top level config files
 			'*.config.js',
+			'vitest-xhtml-environment.ts',
 			// 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 57dc4cdebe..0d2fbc7fd6 100644
--- a/package.json
+++ b/package.json
@@ -5,9 +5,9 @@
   "private": true,
   "type": "module",
   "license": "MIT",
-  "packageManager": "pnpm@9.4.0",
+  "packageManager": "pnpm@10.4.0",
   "engines": {
-    "pnpm": "^9.0.0"
+    "pnpm": ">=9.0.0"
   },
   "repository": {
     "type": "git",
@@ -15,35 +15,35 @@
   },
   "scripts": {
     "build": "pnpm -r --filter=./packages/* build",
-    "build:sites": "pnpm -r --filter=./sites/* build",
-    "preview-site": "npm run build --prefix sites/svelte-5-preview",
     "check": "cd packages/svelte && pnpm build && cd ../../ && pnpm -r check",
     "lint": "eslint && prettier --check .",
     "format": "prettier --write .",
     "test": "vitest run",
-    "test-output": "vitest run --coverage --reporter=json --outputFile=sites/svelte-5-preview/src/routes/status/results.json",
     "changeset:version": "changeset version && pnpm -r generate:version && git add --all",
     "changeset:publish": "changeset publish",
-    "bench": "node --allow-natives-syntax ./benchmarking/run.js",
-    "bench:compare": "node --allow-natives-syntax ./benchmarking/compare/index.js",
-    "bench:debug": "node --allow-natives-syntax --inspect-brk ./benchmarking/run.js"
+    "bench": "NODE_ENV=production node --allow-natives-syntax ./benchmarking/run.js",
+    "bench:compare": "NODE_ENV=production node --allow-natives-syntax ./benchmarking/compare/index.js",
+    "bench:debug": "NODE_ENV=production node --allow-natives-syntax --inspect-brk ./benchmarking/run.js"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.8",
-    "@sveltejs/eslint-config": "^8.1.0",
+    "@changesets/cli": "^2.29.8",
+    "@eslint/js": "^10.0.0",
+    "@sveltejs/eslint-config": "^9.0.0",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@types/node": "^20.11.5",
-    "@vitest/coverage-v8": "^2.0.5",
-    "eslint": "^9.9.1",
-    "eslint-plugin-lube": "^0.4.3",
+    "@types/picomatch": "^4.0.2",
+    "@vitest/coverage-v8": "^4.1.7",
+    "eslint": "^10.0.0",
+    "eslint-plugin-lube": "^0.5.1",
+    "eslint-plugin-svelte": "^3.15.0",
     "jsdom": "25.0.1",
-    "playwright": "^1.46.1",
+    "playwright": "^1.60.0",
     "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.2.0",
+    "typescript-eslint": "^8.56.0",
     "v8-natives": "^1.2.5",
-    "vitest": "^2.0.5"
+    "vitest": "^4.1.7"
   }
 }
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 09e21aec84..a8a94bc691 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,2640 @@
 # svelte
 
+## 5.56.1
+
+### Patch Changes
+
+- fix: error at compile time on duplicate snippet/declaration tag definitions ([#18351](https://github.com/sveltejs/svelte/pull/18351))
+
+- fix: parse declaration tag contents more robustly ([#18353](https://github.com/sveltejs/svelte/pull/18353))
+
+- fix: correctly transform references to earlier declarators in a declaration tag (e.g. `{let a = $state(0), b = $derived(a * 2)}`) ([#18348](https://github.com/sveltejs/svelte/pull/18348))
+
+- fix: avoid spurious `state_referenced_locally` warnings for `$derived` declarations in declaration tags ([#18348](https://github.com/sveltejs/svelte/pull/18348))
+
+- fix: tolerate whitespace before `let`/`const` in declaration tags ([#18348](https://github.com/sveltejs/svelte/pull/18348))
+
+- fix: prevent infinite loop when a tag's expression ends with a trailing `/` at the end of the input ([#18350](https://github.com/sveltejs/svelte/pull/18350))
+
+- fix: more robust parsing of declaration tags with regards to `type` ([#18330](https://github.com/sveltejs/svelte/pull/18330))
+
+- fix: preserve newlines in spread input values when the `type` attribute is applied after `value` ([#18345](https://github.com/sveltejs/svelte/pull/18345))
+
+- fix: update `SvelteURLSearchParams` when setting duplicate keys to the same joined value ([#18336](https://github.com/sveltejs/svelte/pull/18336))
+
+- fix: check references for blockers on server, too ([#18352](https://github.com/sveltejs/svelte/pull/18352))
+
+## 5.56.0
+
+### Minor Changes
+
+- feat: allow declarations in the template ([#18282](https://github.com/sveltejs/svelte/pull/18282))
+
+### Patch Changes
+
+- perf: use `createElement` instead of `createElementNS` for HTML elements ([#18262](https://github.com/sveltejs/svelte/pull/18262))
+
+- perf: store `current_sources` as a `Set` for O(1) membership checks ([#18278](https://github.com/sveltejs/svelte/pull/18278))
+
+- perf: deduplicate identical hoisted templates within a component ([#18320](https://github.com/sveltejs/svelte/pull/18320))
+
+- perf: hoist `rest_props` exclude list as a module-scope `Set` ([#18252](https://github.com/sveltejs/svelte/pull/18252))
+
+## 5.55.10
+
+### Patch Changes
+
+- fix: unlink errored and otherwise finished batch ([#18264](https://github.com/sveltejs/svelte/pull/18264))
+
+- perf: walk composedPath() directly in delegated event propagation ([#18268](https://github.com/sveltejs/svelte/pull/18268))
+
+- fix: transfer effects when merging batches ([#18254](https://github.com/sveltejs/svelte/pull/18254))
+
+- fix: allow `$derived(await ...)` in disconnected effect roots ([#18273](https://github.com/sveltejs/svelte/pull/18273))
+
+- fix: remove temporary raw-text hydration markers ([#18269](https://github.com/sveltejs/svelte/pull/18269))
+
+- fix: propagate async `@const` blockers through closure references so template expressions like `{(() => host)()}` correctly wait for the awaited value ([#18309](https://github.com/sveltejs/svelte/pull/18309))
+
+- fix: properly unlink batches ([#18298](https://github.com/sveltejs/svelte/pull/18298))
+
+- fix: settle discarded batch ([#18290](https://github.com/sveltejs/svelte/pull/18290))
+
+- fix: declare `let:` directives before `{@const}` declarations on slotted elements ([#18271](https://github.com/sveltejs/svelte/pull/18271))
+
+- fix: resume outro-ed branches if they were kept around ([#18291](https://github.com/sveltejs/svelte/pull/18291))
+
+- fix: avoid waterfall-warning when async resolves to same value ([#18297](https://github.com/sveltejs/svelte/pull/18297))
+
+- fix: correctly coordinate component-level effects inside async blocks ([#18260](https://github.com/sveltejs/svelte/pull/18260))
+
+- fix: make unnecessary commit work less likely ([#18263](https://github.com/sveltejs/svelte/pull/18263))
+
+- chore: add tag name to `a11y_click_events_have_key_events` warning ([#18272](https://github.com/sveltejs/svelte/pull/18272))
+
+- fix: catch rejected promises while merging/committing ([#18266](https://github.com/sveltejs/svelte/pull/18266))
+
+## 5.55.9
+
+### Patch Changes
+
+- fix: don't unset batch when calling `{#await ...}` promise ([#18243](https://github.com/sveltejs/svelte/pull/18243))
+
+- fix: promise-ify `{#await await ...}` expressions on the server and correctly hydrate them on the client ([#18243](https://github.com/sveltejs/svelte/pull/18243))
+
+- fix: deduplicate dependencies that are added outside the init/update cycle ([#18243](https://github.com/sveltejs/svelte/pull/18243))
+
+- fix: avoid false-positive batch invariant error ([#18246](https://github.com/sveltejs/svelte/pull/18246))
+
+- fix: inline primitive constants in attribute values during SSR ([#18232](https://github.com/sveltejs/svelte/pull/18232))
+
+## 5.55.8
+
+### Patch Changes
+
+- fix(print): handle `svelte:body` and fix keyframe percentage double-printing ([#18234](https://github.com/sveltejs/svelte/pull/18234))
+
+- fix: execute uninitialized derived even if it's destroyed ([#18228](https://github.com/sveltejs/svelte/pull/18228))
+
+- fix: use named symbols everywhere ([#18238](https://github.com/sveltejs/svelte/pull/18238))
+
+- fix: don't run teardown effects when deriveds are unfreezed ([#18227](https://github.com/sveltejs/svelte/pull/18227))
+
+- fix: unset context synchronously in `run` ([#18236](https://github.com/sveltejs/svelte/pull/18236))
+
+## 5.55.7
+
+### Patch Changes
+
+- fix: prevent XSS on `hydratable` from user contents ([`a16ebc67bbcf8f708360195687e1b2719463e1a4`](https://github.com/sveltejs/svelte/commit/a16ebc67bbcf8f708360195687e1b2719463e1a4))
+
+- chore: bump devalue ([#18219](https://github.com/sveltejs/svelte/pull/18219))
+
+- fix: disallow empty attribute names during SSR ([`547853e2406a2147ad7fb5ffeba95b01bd9642da`](https://github.com/sveltejs/svelte/commit/547853e2406a2147ad7fb5ffeba95b01bd9642da))
+
+- fix: harden regex ([`d2375e2ebcab5c88feb5652f1a9d621b8f06b259`](https://github.com/sveltejs/svelte/commit/d2375e2ebcab5c88feb5652f1a9d621b8f06b259))
+
+- fix: move Svelte runtime properties to symbols ([`e1cbbd96441e82c9eb8a23a2903c0d06d3cda991`](https://github.com/sveltejs/svelte/commit/e1cbbd96441e82c9eb8a23a2903c0d06d3cda991))
+
+## 5.55.6
+
+### Patch Changes
+
+- fix: leave stale promises to wait for a later resolution, instead of rejecting ([#18180](https://github.com/sveltejs/svelte/pull/18180))
+
+- fix: keep dependencies of `$state.eager/pending` ([#18218](https://github.com/sveltejs/svelte/pull/18218))
+
+- fix: reapply context after transforming error during SSR ([#18099](https://github.com/sveltejs/svelte/pull/18099))
+
+- fix: don't rebase just-created batches ([#18117](https://github.com/sveltejs/svelte/pull/18117))
+
+- chore: allow `null` for `pending` in typings ([#18201](https://github.com/sveltejs/svelte/pull/18201))
+
+- fix: flush eager effects in production ([#18107](https://github.com/sveltejs/svelte/pull/18107))
+
+- fix: rethrow error of failed iterable after calling `return()` ([#18169](https://github.com/sveltejs/svelte/pull/18169))
+
+- fix: account for proxified instance when updating `bind:this` ([#18147](https://github.com/sveltejs/svelte/pull/18147))
+
+- fix: ensure scheduled batch is flushed if not obsolete ([#18131](https://github.com/sveltejs/svelte/pull/18131))
+
+- fix: resolve stale deriveds with latest value ([#18167](https://github.com/sveltejs/svelte/pull/18167))
+
+- chore: remove unnecessary `increment_pending` calls ([#18183](https://github.com/sveltejs/svelte/pull/18183))
+
+- fix: correctly compile component member expressions for SSR ([#18192](https://github.com/sveltejs/svelte/pull/18192))
+
+- fix: reset `source.updated` stack traces after `flush` ([#18196](https://github.com/sveltejs/svelte/pull/18196))
+
+- fix: replacing async 'blocking' strategy with 'merging' ([#18205](https://github.com/sveltejs/svelte/pull/18205))
+
+- fix: allow `@debug` tags to reference awaited variables ([#18138](https://github.com/sveltejs/svelte/pull/18138))
+
+- fix: re-run fallback props if dependencies update ([#18146](https://github.com/sveltejs/svelte/pull/18146))
+
+- fix: abort running obsolete async branches ([#18118](https://github.com/sveltejs/svelte/pull/18118))
+
+- fix: ignore comments when reading CSS values ([#18153](https://github.com/sveltejs/svelte/pull/18153))
+
+- fix: wrap `Promise.all` in `save` during SSR ([#18178](https://github.com/sveltejs/svelte/pull/18178))
+
+- fix: ignore false-positive errors of `$inspect` dependencies ([#18106](https://github.com/sveltejs/svelte/pull/18106))
+
+## 5.55.5
+
+### Patch Changes
+
+- fix: don't mark deriveds while an effect is updating ([#18124](https://github.com/sveltejs/svelte/pull/18124))
+
+- fix: do not dispatch introstart event with animation of animate directive ([#18122](https://github.com/sveltejs/svelte/pull/18122))
+
+## 5.55.4
+
+### Patch Changes
+
+- fix: never mark a child effect root as inert ([#18111](https://github.com/sveltejs/svelte/pull/18111))
+
+- fix: reset context after waiting on blockers of `@const` expressions ([#18100](https://github.com/sveltejs/svelte/pull/18100))
+
+- fix: keep flushing new eager effects ([#18102](https://github.com/sveltejs/svelte/pull/18102))
+
+## 5.55.3
+
+### Patch Changes
+
+- fix: ensure proper HMR updates for dynamic components ([#18079](https://github.com/sveltejs/svelte/pull/18079))
+
+- fix: correctly calculate `@const` blockers ([#18039](https://github.com/sveltejs/svelte/pull/18039))
+
+- fix: freeze deriveds once their containing effects are destroyed ([#17921](https://github.com/sveltejs/svelte/pull/17921))
+
+- fix: defer error boundary rendering in forks ([#18076](https://github.com/sveltejs/svelte/pull/18076))
+
+- fix: avoid false positives for reactivity loss warning ([#18088](https://github.com/sveltejs/svelte/pull/18088))
+
+## 5.55.2
+
+### Patch Changes
+
+- fix: invalidate `@const` tags based on visible references in legacy mode ([#18041](https://github.com/sveltejs/svelte/pull/18041))
+
+- fix: handle parens in template expressions more robustly ([#18075](https://github.com/sveltejs/svelte/pull/18075))
+
+- fix: disallow `--` in `idPrefix` ([#18038](https://github.com/sveltejs/svelte/pull/18038))
+
+- fix: correct types for `ontoggle` on `<details>` elements ([#18063](https://github.com/sveltejs/svelte/pull/18063))
+
+- fix: don't override `$destroy/set/on` instance methods in dev mode ([#18034](https://github.com/sveltejs/svelte/pull/18034))
+
+- fix: unskip branches of earlier batches after commit ([#18048](https://github.com/sveltejs/svelte/pull/18048))
+
+- fix: never set derived.v inside fork ([#18037](https://github.com/sveltejs/svelte/pull/18037))
+
+- fix: skip rebase logic in non-async mode ([#18040](https://github.com/sveltejs/svelte/pull/18040))
+
+- fix: don't reset status of uninitialized deriveds ([#18054](https://github.com/sveltejs/svelte/pull/18054))
+
+## 5.55.1
+
+### Patch Changes
+
+- fix: correctly handle bindings on the server ([#18009](https://github.com/sveltejs/svelte/pull/18009))
+
+- fix: prevent hydration error on async `{@html ...}` ([#17999](https://github.com/sveltejs/svelte/pull/17999))
+
+- fix: cleanup `superTypeParameters` in `ClassDeclarations`/`ClassExpression` ([#18015](https://github.com/sveltejs/svelte/pull/18015))
+
+- fix: improve duplicate module import error message ([#18016](https://github.com/sveltejs/svelte/pull/18016))
+
+- fix: reschedule new effects in prior batches ([#18021](https://github.com/sveltejs/svelte/pull/18021))
+
+## 5.55.0
+
+### Minor Changes
+
+- feat: export TweenOptions, SpringOptions, SpringUpdateOptions and Updater from svelte/motion ([#17967](https://github.com/sveltejs/svelte/pull/17967))
+
+### Patch Changes
+
+- fix: ensure HMR wrapper forwards correct start/end nodes to active effect ([#17985](https://github.com/sveltejs/svelte/pull/17985))
+
+## 5.54.1
+
+### Patch Changes
+
+- fix: hydration comments during hmr ([#17975](https://github.com/sveltejs/svelte/pull/17975))
+
+- fix: null out `effect.b` in `destroy_effect` ([#17980](https://github.com/sveltejs/svelte/pull/17980))
+
+- fix: group sync statements ([#17977](https://github.com/sveltejs/svelte/pull/17977))
+
+- fix: defer batch resolution until earlier intersecting batches have committed ([#17162](https://github.com/sveltejs/svelte/pull/17162))
+
+- fix: properly invoke `iterator.return()` during reactivity loss check ([#17966](https://github.com/sveltejs/svelte/pull/17966))
+
+- fix: remove trailing semicolon from {@const} tag printer ([#17962](https://github.com/sveltejs/svelte/pull/17962))
+
+## 5.54.0
+
+### Minor Changes
+
+- feat: allow `css`, `runes`, `customElement` compiler options to be functions ([#17951](https://github.com/sveltejs/svelte/pull/17951))
+
+### Patch Changes
+
+- fix: reinstate reactivity loss tracking ([#17801](https://github.com/sveltejs/svelte/pull/17801))
+
+## 5.53.13
+
+### Patch Changes
+
+- fix: ensure `$inspect` after top level await doesn't break builds ([#17943](https://github.com/sveltejs/svelte/pull/17943))
+
+- fix: resume inert effects when they come from offscreen ([#17942](https://github.com/sveltejs/svelte/pull/17942))
+
+- fix: don't eagerly access not-yet-initialized functions in template ([#17938](https://github.com/sveltejs/svelte/pull/17938))
+
+- fix: discard batches made obsolete by commit ([#17934](https://github.com/sveltejs/svelte/pull/17934))
+
+- fix: ensure "is standalone child" is correctly reset ([#17944](https://github.com/sveltejs/svelte/pull/17944))
+
+- fix: remove nodes in boundary when work is pending and HMR is active ([#17932](https://github.com/sveltejs/svelte/pull/17932))
+
+## 5.53.12
+
+### Patch Changes
+
+- fix: update `select.__value` on `change` ([#17745](https://github.com/sveltejs/svelte/pull/17745))
+
+- chore: add `invariant` helper for debugging ([#17929](https://github.com/sveltejs/svelte/pull/17929))
+
+- fix: ensure deriveds values are correct across batches ([#17917](https://github.com/sveltejs/svelte/pull/17917))
+
+- fix: handle async RHS in `assignment_value_stale` ([#17925](https://github.com/sveltejs/svelte/pull/17925))
+
+- fix: avoid traversing clean roots ([#17928](https://github.com/sveltejs/svelte/pull/17928))
+
+## 5.53.11
+
+### Patch Changes
+
+- fix: remove `untrack` circular dependency ([#17910](https://github.com/sveltejs/svelte/pull/17910))
+
+- fix: recover from errors that leave a corrupted effect tree ([#17888](https://github.com/sveltejs/svelte/pull/17888))
+
+- fix: properly lazily evaluate RHS when checking for `assignment_value_stale` ([#17906](https://github.com/sveltejs/svelte/pull/17906))
+
+- fix: resolve boundary in correct batch when hydrating ([#17914](https://github.com/sveltejs/svelte/pull/17914))
+
+- chore: rebase batches after process, not during ([#17900](https://github.com/sveltejs/svelte/pull/17900))
+
+## 5.53.10
+
+### Patch Changes
+
+- fix: re-process batch if new root effects were scheduled ([#17895](https://github.com/sveltejs/svelte/pull/17895))
+
+## 5.53.9
+
+### Patch Changes
+
+- fix: better `bind:this` cleanup timing ([#17885](https://github.com/sveltejs/svelte/pull/17885))
+
+## 5.53.8
+
+### Patch Changes
+
+- fix: `{@html}` no longer duplicates content inside `contenteditable` elements ([#17853](https://github.com/sveltejs/svelte/pull/17853))
+
+- fix: don't access inert block effects ([#17882](https://github.com/sveltejs/svelte/pull/17882))
+
+- fix: handle asnyc updates within pending boundary ([#17873](https://github.com/sveltejs/svelte/pull/17873))
+
+- perf: avoid re-traversing the effect tree after `$:` assignments ([#17848](https://github.com/sveltejs/svelte/pull/17848))
+
+- chore: simplify scheduling logic ([#17805](https://github.com/sveltejs/svelte/pull/17805))
+
+## 5.53.7
+
+### Patch Changes
+
+- fix: correctly add \_\_svelte_meta after else-if chains ([#17830](https://github.com/sveltejs/svelte/pull/17830))
+
+- perf: cache element interactivity and source line splitting in compiler ([#17839](https://github.com/sveltejs/svelte/pull/17839))
+
+- chore: avoid rescheduling effects during branch commit ([#17837](https://github.com/sveltejs/svelte/pull/17837))
+
+- perf: optimize CSS selector pruning ([#17846](https://github.com/sveltejs/svelte/pull/17846))
+
+- fix: preserve original boundary errors when keyed each rows are removed during async updates ([#17843](https://github.com/sveltejs/svelte/pull/17843))
+
+- perf: avoid O(n²) name scanning in scope `generate` and `unique` ([#17844](https://github.com/sveltejs/svelte/pull/17844))
+
+- fix: preserve each items that are needed by pending batches ([#17819](https://github.com/sveltejs/svelte/pull/17819))
+
+## 5.53.6
+
+### Patch Changes
+
+- perf: optimize parser hot paths for faster compilation ([#17811](https://github.com/sveltejs/svelte/pull/17811))
+
+- fix: `SvelteMap` incorrectly handles keys with `undefined` values ([#17826](https://github.com/sveltejs/svelte/pull/17826))
+
+- fix: SvelteURL `search` setter now returns the normalized value, matching native URL behavior ([#17828](https://github.com/sveltejs/svelte/pull/17828))
+
+- fix: visit synthetic value node during ssr ([#17824](https://github.com/sveltejs/svelte/pull/17824))
+
+- fix: always case insensitive event handlers during ssr ([#17822](https://github.com/sveltejs/svelte/pull/17822))
+
+- chore: more efficient effect scheduling ([#17808](https://github.com/sveltejs/svelte/pull/17808))
+
+- perf: optimize compiler analysis phase ([#17823](https://github.com/sveltejs/svelte/pull/17823))
+
+- fix: skip redundant batch.apply ([#17816](https://github.com/sveltejs/svelte/pull/17816))
+
+- chore: null out current_batch before committing branches ([#17809](https://github.com/sveltejs/svelte/pull/17809))
+
+## 5.53.5
+
+### Patch Changes
+
+- fix: escape `innerText` and `textContent` bindings of `contenteditable` ([`0df5abcae223058ceb95491470372065fb87951d`](https://github.com/sveltejs/svelte/commit/0df5abcae223058ceb95491470372065fb87951d))
+
+- fix: sanitize `transformError` values prior to embedding in HTML comments ([`0298e979371bb583855c9810db79a70a551d22b9`](https://github.com/sveltejs/svelte/commit/0298e979371bb583855c9810db79a70a551d22b9))
+
+## 5.53.4
+
+### Patch Changes
+
+- fix: set server context after async transformError ([#17799](https://github.com/sveltejs/svelte/pull/17799))
+
+- fix: hydrate if blocks correctly ([#17784](https://github.com/sveltejs/svelte/pull/17784))
+
+- fix: handle default parameters scope leaks ([#17788](https://github.com/sveltejs/svelte/pull/17788))
+
+- fix: prevent flushed effects from running again ([#17787](https://github.com/sveltejs/svelte/pull/17787))
+
+## 5.53.3
+
+### Patch Changes
+
+- fix: render `:catch` of `#await` block with correct key ([#17769](https://github.com/sveltejs/svelte/pull/17769))
+
+- chore: pin aria-query@5.3.1 ([#17772](https://github.com/sveltejs/svelte/pull/17772))
+
+- fix: make string coercion consistent to `toString` ([#17774](https://github.com/sveltejs/svelte/pull/17774))
+
+## 5.53.2
+
+### Patch Changes
+
+- fix: update expressions on server deriveds ([#17767](https://github.com/sveltejs/svelte/pull/17767))
+
+- fix: further obfuscate `node:crypto` import from overzealous static analysis ([#17763](https://github.com/sveltejs/svelte/pull/17763))
+
+## 5.53.1
+
+### Patch Changes
+
+- fix: handle shadowed function names correctly ([#17753](https://github.com/sveltejs/svelte/pull/17753))
+
+## 5.53.0
+
+### Minor Changes
+
+- feat: allow comments in tags ([#17671](https://github.com/sveltejs/svelte/pull/17671))
+
+- feat: allow error boundaries to work on the server ([#17672](https://github.com/sveltejs/svelte/pull/17672))
+
+### Patch Changes
+
+- fix: use TrustedHTML to test for customizable `<select>` support, where necessary ([#17743](https://github.com/sveltejs/svelte/pull/17743))
+
+- fix: ensure head effects are kept in the effect tree ([#17746](https://github.com/sveltejs/svelte/pull/17746))
+
+- chore: deactivate current_batch by default in unset_context ([#17738](https://github.com/sveltejs/svelte/pull/17738))
+
+## 5.52.0
+
+### Minor Changes
+
+- feat: support TrustedHTML in `{@html}` expressions ([#17701](https://github.com/sveltejs/svelte/pull/17701))
+
+### Patch Changes
+
+- fix: repair dynamic component truthy/falsy hydration mismatches ([#17737](https://github.com/sveltejs/svelte/pull/17737))
+
+- fix: re-run non-render-bound deriveds on the server ([#17674](https://github.com/sveltejs/svelte/pull/17674))
+
+## 5.51.5
+
+### Patch Changes
+
+- fix: check to make sure `svelte:element` tags are valid during SSR ([`73098bb26c6f06e7fd1b0746d817d2c5ee90755f`](https://github.com/sveltejs/svelte/commit/73098bb26c6f06e7fd1b0746d817d2c5ee90755f))
+
+- fix: misc option escaping and backwards compatibility ([#17741](https://github.com/sveltejs/svelte/pull/17741))
+
+- fix: strip event handlers during SSR ([`a0c7f289156e9fafaeaf5ca14af6c06fe9b9eae5`](https://github.com/sveltejs/svelte/commit/a0c7f289156e9fafaeaf5ca14af6c06fe9b9eae5))
+
+- fix: replace usage of `for in` with `for of Object.keys` ([`f89c7ddd7eebaa1ef3cc540400bec2c9140b330c`](https://github.com/sveltejs/svelte/commit/f89c7ddd7eebaa1ef3cc540400bec2c9140b330c))
+
+- fix: always escape option body in SSR ([`f7c80da18c215e3727c2a611b0b8744cc6e504c5`](https://github.com/sveltejs/svelte/commit/f7c80da18c215e3727c2a611b0b8744cc6e504c5))
+
+- chore: upgrade `devalue` ([#17739](https://github.com/sveltejs/svelte/pull/17739))
+
+## 5.51.4
+
+### Patch Changes
+
+- chore: proactively defer effects in pending boundary ([#17734](https://github.com/sveltejs/svelte/pull/17734))
+
+- fix: detect and error on non-idempotent each block keys in dev mode ([#17732](https://github.com/sveltejs/svelte/pull/17732))
+
+## 5.51.3
+
+### Patch Changes
+
+- fix: prevent event delegation logic conflicting between svelte instances ([#17728](https://github.com/sveltejs/svelte/pull/17728))
+
+- fix: treat CSS attribute selectors as case-insensitive for HTML enumerated attributes ([#17712](https://github.com/sveltejs/svelte/pull/17712))
+
+- fix: locate Rollup annontaion friendly to JS downgraders ([#17724](https://github.com/sveltejs/svelte/pull/17724))
+
+- fix: run effects in pending snippets ([#17719](https://github.com/sveltejs/svelte/pull/17719))
+
+## 5.51.2
+
+### Patch Changes
+
+- fix: take async into consideration for dev delegated handlers ([#17710](https://github.com/sveltejs/svelte/pull/17710))
+
+- fix: emit state_referenced_locally warning for non-destructured props ([#17708](https://github.com/sveltejs/svelte/pull/17708))
+
+## 5.51.1
+
+### Patch Changes
+
+- fix: don't crash on undefined `document.contentType` ([#17707](https://github.com/sveltejs/svelte/pull/17707))
+
+- fix: use symbols for encapsulated event delegation ([#17703](https://github.com/sveltejs/svelte/pull/17703))
+
+## 5.51.0
+
+### Minor Changes
+
+- feat: Use `TrustedTypes` for HTML handling where supported ([#16271](https://github.com/sveltejs/svelte/pull/16271))
+
+### Patch Changes
+
+- fix: sanitize template-literal-special-characters in SSR attribute values ([#17692](https://github.com/sveltejs/svelte/pull/17692))
+
+- fix: follow-up formatting in `print()` — flush block-level elements into separate sequences ([#17699](https://github.com/sveltejs/svelte/pull/17699))
+
+- fix: preserve delegated event handlers as long as one or more root components are using them ([#17695](https://github.com/sveltejs/svelte/pull/17695))
+
+## 5.50.3
+
+### Patch Changes
+
+- fix: take into account `nodeName` case sensitivity on XHTML pages ([#17689](https://github.com/sveltejs/svelte/pull/17689))
+
+- fix: render `multiple` and `selected` attributes as empty strings for XHTML compliance ([#17689](https://github.com/sveltejs/svelte/pull/17689))
+
+- fix: always lowercase HTML elements, for XHTML compliance ([#17664](https://github.com/sveltejs/svelte/pull/17664))
+
+- fix: freeze effects-inside-deriveds when disconnecting, unfreeze on reconnect ([#17682](https://github.com/sveltejs/svelte/pull/17682))
+
+- fix: propagate `$effect` errors to `<svelte:boundary>` ([#17684](https://github.com/sveltejs/svelte/pull/17684))
+
+## 5.50.2
+
+### Patch Changes
+
+- fix: resolve `effect_update_depth_exceeded` when using `bind:value` on `<select>` with derived state in legacy mode ([#17645](https://github.com/sveltejs/svelte/pull/17645))
+
+- fix: don't swallow `DOMException` when `media.play()` fails in `bind:paused` ([#17656](https://github.com/sveltejs/svelte/pull/17656))
+
+- chore: provide proper public type for `parseCss` result ([#17654](https://github.com/sveltejs/svelte/pull/17654))
+
+- fix: robustify blocker calculation ([#17676](https://github.com/sveltejs/svelte/pull/17676))
+
+- fix: reduce if block nesting ([#17662](https://github.com/sveltejs/svelte/pull/17662))
+
+## 5.50.1
+
+### Patch Changes
+
+- fix: render boolean attribute values as empty strings for XHTML compliance ([#17648](https://github.com/sveltejs/svelte/pull/17648))
+
+- fix: prevent async render tag hydration mismatches ([#17652](https://github.com/sveltejs/svelte/pull/17652))
+
+## 5.50.0
+
+### Minor Changes
+
+- feat: allow use of createContext when instantiating components programmatically ([#17575](https://github.com/sveltejs/svelte/pull/17575))
+
+### Patch Changes
+
+- fix: ensure infinite effect loops are cleared after flushing ([#17601](https://github.com/sveltejs/svelte/pull/17601))
+
+- fix: allow `{#key NaN}` ([#17642](https://github.com/sveltejs/svelte/pull/17642))
+
+- fix: detect store in each block expression regardless of AST shape ([#17636](https://github.com/sveltejs/svelte/pull/17636))
+
+- fix: treat `<menu>` like `<ul>`/`<ol>` for a11y role checks ([#17638](https://github.com/sveltejs/svelte/pull/17638))
+
+- fix: add vite-ignore comment inside dynamic crypto import ([#17623](https://github.com/sveltejs/svelte/pull/17623))
+
+- chore: wrap JSDoc URLs in `@see` and `@link` tags ([#17617](https://github.com/sveltejs/svelte/pull/17617))
+
+- fix: properly hydrate already-resolved async blocks ([#17641](https://github.com/sveltejs/svelte/pull/17641))
+
+- fix: emit `each_key_duplicate` error in production ([#16724](https://github.com/sveltejs/svelte/pull/16724))
+
+- fix: exit resolved async blocks on correct node when hydrating ([#17640](https://github.com/sveltejs/svelte/pull/17640))
+
+## 5.49.2
+
+### Patch Changes
+
+- chore: remove SvelteKit data attributes from elements.d.ts ([#17613](https://github.com/sveltejs/svelte/pull/17613))
+
+- fix: avoid erroneous async derived expressions for blocks ([#17604](https://github.com/sveltejs/svelte/pull/17604))
+
+- fix: avoid Cloudflare warnings about not having the "node:crypto" module ([#17612](https://github.com/sveltejs/svelte/pull/17612))
+
+- fix: reschedule effects inside unskipped branches ([#17604](https://github.com/sveltejs/svelte/pull/17604))
+
+## 5.49.1
+
+### Patch Changes
+
+- fix: merge consecutive large text nodes ([#17587](https://github.com/sveltejs/svelte/pull/17587))
+
+- fix: only create async functions in SSR output when necessary ([#17593](https://github.com/sveltejs/svelte/pull/17593))
+
+- fix: properly separate multiline html blocks from each other in `print()` ([#17319](https://github.com/sveltejs/svelte/pull/17319))
+
+- fix: prevent unhandled exceptions arising from dangling promises in <script> ([#17591](https://github.com/sveltejs/svelte/pull/17591))
+
+## 5.49.0
+
+### Minor Changes
+
+- feat: allow passing `ShadowRootInit` object to custom element `shadow` option ([#17088](https://github.com/sveltejs/svelte/pull/17088))
+
+### Patch Changes
+
+- fix: throw for unset `createContext` get on the server ([#17580](https://github.com/sveltejs/svelte/pull/17580))
+
+- fix: reset effects inside skipped branches ([#17581](https://github.com/sveltejs/svelte/pull/17581))
+
+- fix: preserve old dependencies when updating reaction inside fork ([#17579](https://github.com/sveltejs/svelte/pull/17579))
+
+- fix: more conservative assignment_value_stale warnings ([#17574](https://github.com/sveltejs/svelte/pull/17574))
+
+- fix: disregard `popover` elements when determining whether an element has content ([#17367](https://github.com/sveltejs/svelte/pull/17367))
+
+- fix: fire introstart/outrostart events after delay, if specified ([#17567](https://github.com/sveltejs/svelte/pull/17567))
+
+- fix: increment signal versions when discarding forks ([#17577](https://github.com/sveltejs/svelte/pull/17577))
+
+## 5.48.5
+
+### Patch Changes
+
+- fix: run boundary `onerror` callbacks in a microtask, in case they result in the boundary's destruction ([#17561](https://github.com/sveltejs/svelte/pull/17561))
+
+- fix: prevent unintended exports from namespaces ([#17562](https://github.com/sveltejs/svelte/pull/17562))
+
+- fix: each block breaking with effects interspersed among items ([#17550](https://github.com/sveltejs/svelte/pull/17550))
+
+## 5.48.4
+
+### Patch Changes
+
+- fix: avoid duplicating escaped characters in CSS AST ([#17554](https://github.com/sveltejs/svelte/pull/17554))
+
+## 5.48.3
+
+### Patch Changes
+
+- fix: hydration failing with settled async blocks ([#17539](https://github.com/sveltejs/svelte/pull/17539))
+
+- fix: add pointer and touch events to a11y_no_static_element_interactions warning ([#17551](https://github.com/sveltejs/svelte/pull/17551))
+
+- fix: handle false dynamic components in SSR ([#17542](https://github.com/sveltejs/svelte/pull/17542))
+
+- fix: avoid unnecessary block effect re-runs after async work completes ([#17535](https://github.com/sveltejs/svelte/pull/17535))
+
+- fix: avoid using dev-mode array.includes wrapper on internal array checks ([#17536](https://github.com/sveltejs/svelte/pull/17536))
+
+## 5.48.2
+
+### Patch Changes
+
+- fix: export `wait` function from internal client index ([#17530](https://github.com/sveltejs/svelte/pull/17530))
+
+## 5.48.1
+
+### Patch Changes
+
+- fix: hoist snippets above const in same block ([#17516](https://github.com/sveltejs/svelte/pull/17516))
+
+- fix: properly hydrate await in `{@html}` ([#17528](https://github.com/sveltejs/svelte/pull/17528))
+
+- fix: batch resolution of async work ([#17511](https://github.com/sveltejs/svelte/pull/17511))
+
+- fix: account for empty statements when visiting in transform async ([#17524](https://github.com/sveltejs/svelte/pull/17524))
+
+- fix: avoid async overhead for already settled promises ([#17461](https://github.com/sveltejs/svelte/pull/17461))
+
+- fix: better code generation for const tags with async dependencies ([#17518](https://github.com/sveltejs/svelte/pull/17518))
+
+## 5.48.0
+
+### Minor Changes
+
+- feat: export `parseCss` from `svelte/compiler` ([#17496](https://github.com/sveltejs/svelte/pull/17496))
+
+### Patch Changes
+
+- fix: handle non-string values in `svelte:element` `this` attribute ([#17499](https://github.com/sveltejs/svelte/pull/17499))
+
+- fix: faster deduplication of dependencies ([#17503](https://github.com/sveltejs/svelte/pull/17503))
+
+## 5.47.1
+
+### Patch Changes
+
+- fix: trigger `selectedcontent` reactivity ([#17486](https://github.com/sveltejs/svelte/pull/17486))
+
+## 5.47.0
+
+### Minor Changes
+
+- feat: customizable `<select>` elements ([#17429](https://github.com/sveltejs/svelte/pull/17429))
+
+### Patch Changes
+
+- fix: mark subtree of svelte boundary as dynamic ([#17468](https://github.com/sveltejs/svelte/pull/17468))
+
+- fix: don't reset static elements with debug/snippets ([#17477](https://github.com/sveltejs/svelte/pull/17477))
+
+## 5.46.4
+
+### Patch Changes
+
+- fix: use `devalue.uneval` to serialize `hydratable` keys ([`ef81048e238844b729942441541d6dcfe6c8ccca`](https://github.com/sveltejs/svelte/commit/ef81048e238844b729942441541d6dcfe6c8ccca))
+
+## 5.46.3
+
+### Patch Changes
+
+- fix: reconnect clean deriveds when they are read in a reactive context ([#17362](https://github.com/sveltejs/svelte/pull/17362))
+
+- fix: don't transform references of function declarations in legacy mode ([#17431](https://github.com/sveltejs/svelte/pull/17431))
+
+- fix: notify deriveds of changes to sources inside forks ([#17437](https://github.com/sveltejs/svelte/pull/17437))
+
+- fix: always reconnect deriveds in get, when appropriate ([#17451](https://github.com/sveltejs/svelte/pull/17451))
+
+- fix: prevent derives without dependencies from ever re-running ([`286b40c4526ce9970cb81ddd5e65b93b722fe468`](https://github.com/sveltejs/svelte/commit/286b40c4526ce9970cb81ddd5e65b93b722fe468))
+
+- fix: correctly update writable deriveds inside forks ([#17437](https://github.com/sveltejs/svelte/pull/17437))
+
+- fix: remove `$inspect` calls after await expressions when compiling for production server code ([#17407](https://github.com/sveltejs/svelte/pull/17407))
+
+- fix: clear batch between runs ([#17424](https://github.com/sveltejs/svelte/pull/17424))
+
+- fix: adjust `loc` property of `Program` nodes created from `<script>` elements ([#17428](https://github.com/sveltejs/svelte/pull/17428))
+
+- fix: don't revert source to UNINITIALIZED state when time travelling ([#17409](https://github.com/sveltejs/svelte/pull/17409))
+
+## 5.46.2
+
+### Notice
+
+Not published due to CI issue
+
+## 5.46.1
+
+### Patch Changes
+
+- fix: type `currentTarget` in `on` function ([#17370](https://github.com/sveltejs/svelte/pull/17370))
+
+- fix: skip static optimisation for stateless deriveds after `await` ([#17389](https://github.com/sveltejs/svelte/pull/17389))
+
+- fix: prevent infinite loop when HMRing a component with an `await` ([#17380](https://github.com/sveltejs/svelte/pull/17380))
+
+## 5.46.0
+
+### Minor Changes
+
+- feat: Add `csp` option to `render(...)`, and emit hashes when using `hydratable` ([#17338](https://github.com/sveltejs/svelte/pull/17338))
+
+## 5.45.10
+
+### Patch Changes
+
+- fix: race condition when importing `AsyncLocalStorage` ([#17350](https://github.com/sveltejs/svelte/pull/17350))
+
+## 5.45.9
+
+### Patch Changes
+
+- fix: correctly reschedule deferred effects when reviving a batch after async work ([#17332](https://github.com/sveltejs/svelte/pull/17332))
+
+- fix: correctly print `!doctype` during `print` ([#17341](https://github.com/sveltejs/svelte/pull/17341))
+
+## 5.45.8
+
+### Patch Changes
+
+- fix: set AST `root.start` to `0` and `root.end` to `template.length` ([#17125](https://github.com/sveltejs/svelte/pull/17125))
+
+- fix: prevent erroneous `state_referenced_locally` warnings on prop fallbacks ([#17329](https://github.com/sveltejs/svelte/pull/17329))
+
+## 5.45.7
+
+### Patch Changes
+
+- fix: Add `<textarea wrap="off">` as a valid attribute value ([#17326](https://github.com/sveltejs/svelte/pull/17326))
+
+- fix: add more css selectors to `print()` ([#17330](https://github.com/sveltejs/svelte/pull/17330))
+
+- fix: don't crash on `hydratable` serialization failure ([#17315](https://github.com/sveltejs/svelte/pull/17315))
+
+## 5.45.6
+
+### Patch Changes
+
+- fix: don't issue a11y warning for `<video>` without captions if it has no `src` ([#17311](https://github.com/sveltejs/svelte/pull/17311))
+
+- fix: add `srcObject` to permitted `<audio>`/`<video>` attributes ([#17310](https://github.com/sveltejs/svelte/pull/17310))
+
+## 5.45.5
+
+### Patch Changes
+
+- fix: correctly reconcile each blocks after outroing branches are resumed ([#17258](https://github.com/sveltejs/svelte/pull/17258))
+
+- fix: destroy each items after siblings are resumed ([#17258](https://github.com/sveltejs/svelte/pull/17258))
+
+## 5.45.4
+
+### Patch Changes
+
+- chore: move DOM-related effect properties to `effect.nodes` ([#17293](https://github.com/sveltejs/svelte/pull/17293))
+
+- fix: allow `$props.id()` to occur after an `await` ([#17285](https://github.com/sveltejs/svelte/pull/17285))
+
+- fix: keep reactions up to date even when read outside of effect ([#17295](https://github.com/sveltejs/svelte/pull/17295))
+
+## 5.45.3
+
+### Patch Changes
+
+- add props to state_referenced_locally ([#17266](https://github.com/sveltejs/svelte/pull/17266))
+
+- fix: preserve node locations for better sourcemaps ([#17269](https://github.com/sveltejs/svelte/pull/17269))
+
+- fix: handle cross-realm Promises in `hydratable` ([#17284](https://github.com/sveltejs/svelte/pull/17284))
+
+## 5.45.2
+
+### Patch Changes
+
+- fix: array destructuring after await ([#17254](https://github.com/sveltejs/svelte/pull/17254))
+
+- fix: throw on invalid `{@tag}`s ([#17256](https://github.com/sveltejs/svelte/pull/17256))
+
+## 5.45.1
+
+### Patch Changes
+
+- fix: link offscreen items and last effect in each block correctly ([#17240](https://github.com/sveltejs/svelte/pull/17240))
+
+## 5.45.0
+
+### Minor Changes
+
+- feat: add `print(...)` function ([#16188](https://github.com/sveltejs/svelte/pull/16188))
+
+## 5.44.1
+
+### Patch Changes
+
+- fix: await blockers before initialising const ([#17226](https://github.com/sveltejs/svelte/pull/17226))
+
+- fix: link offscreen items and last effect in each block correctly ([#17244](https://github.com/sveltejs/svelte/pull/17244))
+
+- fix: generate correct code for simple destructurings ([#17237](https://github.com/sveltejs/svelte/pull/17237))
+
+- fix: ensure each block animations don't mess with transitions ([#17238](https://github.com/sveltejs/svelte/pull/17238))
+
+## 5.44.0
+
+### Minor Changes
+
+- feat: `hydratable` API ([#17154](https://github.com/sveltejs/svelte/pull/17154))
+
+## 5.43.15
+
+### Patch Changes
+
+- fix: don't execute attachments and attribute effects eagerly ([#17208](https://github.com/sveltejs/svelte/pull/17208))
+
+- chore: lift "flushSync cannot be called in effects" restriction ([#17139](https://github.com/sveltejs/svelte/pull/17139))
+
+- fix: store forked derived values ([#17212](https://github.com/sveltejs/svelte/pull/17212))
+
+## 5.43.14
+
+### Patch Changes
+
+- fix: correctly migrate named self closing slots ([#17199](https://github.com/sveltejs/svelte/pull/17199))
+
+- fix: error at compile time instead of at runtime on await expressions inside bindings/transitions/animations/attachments ([#17198](https://github.com/sveltejs/svelte/pull/17198))
+
+- fix: take async blockers into account for bindings/transitions/animations/attachments ([#17198](https://github.com/sveltejs/svelte/pull/17198))
+
+## 5.43.13
+
+### Patch Changes
+
+- fix: don't set derived values during time traveling ([#17200](https://github.com/sveltejs/svelte/pull/17200))
+
+## 5.43.12
+
+### Patch Changes
+
+- fix: maintain correct linked list of effects when updating each blocks ([#17191](https://github.com/sveltejs/svelte/pull/17191))
+
+## 5.43.11
+
+### Patch Changes
+
+- perf: don't use tracing overeager during dev ([#17183](https://github.com/sveltejs/svelte/pull/17183))
+
+- fix: don't cancel transition of already outroing elements ([#17186](https://github.com/sveltejs/svelte/pull/17186))
+
+## 5.43.10
+
+### Patch Changes
+
+- fix: avoid other batches running with queued root effects of main batch ([#17145](https://github.com/sveltejs/svelte/pull/17145))
+
+## 5.43.9
+
+### Patch Changes
+
+- fix: correctly handle functions when determining async blockers ([#17137](https://github.com/sveltejs/svelte/pull/17137))
+
+- fix: keep deriveds reactive after their original parent effect was destroyed ([#17171](https://github.com/sveltejs/svelte/pull/17171))
+
+- fix: ensure eager effects don't break reactions chain ([#17138](https://github.com/sveltejs/svelte/pull/17138))
+
+- fix: ensure async `@const` in boundary hydrates correctly ([#17165](https://github.com/sveltejs/svelte/pull/17165))
+
+- fix: take blockers into account when creating `#await` blocks ([#17137](https://github.com/sveltejs/svelte/pull/17137))
+
+- fix: parallelize async `@const`s in the template ([#17165](https://github.com/sveltejs/svelte/pull/17165))
+
+## 5.43.8
+
+### Patch Changes
+
+- fix: each block losing reactivity when items removed while promise pending ([#17150](https://github.com/sveltejs/svelte/pull/17150))
+
+## 5.43.7
+
+### Patch Changes
+
+- fix: properly defer document title until async work is complete ([#17158](https://github.com/sveltejs/svelte/pull/17158))
+
+- fix: ensure deferred effects can be rescheduled later on ([#17147](https://github.com/sveltejs/svelte/pull/17147))
+
+- fix: take blockers of components into account ([#17153](https://github.com/sveltejs/svelte/pull/17153))
+
+## 5.43.6
+
+### Patch Changes
+
+- fix: don't deactivate other batches ([#17132](https://github.com/sveltejs/svelte/pull/17132))
+
+## 5.43.5
+
+### Patch Changes
+
+- fix: ensure async static props/attributes are awaited ([#17120](https://github.com/sveltejs/svelte/pull/17120))
+
+- fix: wait on dependencies of async bindings ([#17120](https://github.com/sveltejs/svelte/pull/17120))
+
+- fix: await dependencies of style directives ([#17120](https://github.com/sveltejs/svelte/pull/17120))
+
+## 5.43.4
+
+### Patch Changes
+
+- chore: simplify connection/disconnection logic ([#17105](https://github.com/sveltejs/svelte/pull/17105))
+
+- fix: reconnect deriveds to effect tree when time-travelling ([#17105](https://github.com/sveltejs/svelte/pull/17105))
+
+## 5.43.3
+
+### Patch Changes
+
+- fix: ensure fork always accesses correct values ([#17098](https://github.com/sveltejs/svelte/pull/17098))
+
+- fix: change title only after any pending work has completed ([#17061](https://github.com/sveltejs/svelte/pull/17061))
+
+- fix: preserve symbols when creating derived rest properties ([#17096](https://github.com/sveltejs/svelte/pull/17096))
+
+## 5.43.2
+
+### Patch Changes
+
+- fix: treat each blocks with async dependencies as uncontrolled ([#17077](https://github.com/sveltejs/svelte/pull/17077))
+
+## 5.43.1
+
+### Patch Changes
+
+- fix: transform `$bindable` after `await` expressions ([#17066](https://github.com/sveltejs/svelte/pull/17066))
+
+## 5.43.0
+
+### Minor Changes
+
+- feat: out-of-order rendering ([#17038](https://github.com/sveltejs/svelte/pull/17038))
+
+### Patch Changes
+
+- fix: settle batch after DOM updates ([#17054](https://github.com/sveltejs/svelte/pull/17054))
+
+## 5.42.3
+
+### Patch Changes
+
+- fix: handle `<svelte:head>` rendered asynchronously ([#17052](https://github.com/sveltejs/svelte/pull/17052))
+
+- fix: don't restore batch in `#await` ([#17051](https://github.com/sveltejs/svelte/pull/17051))
+
+## 5.42.2
+
+### Patch Changes
+
+- fix: better error message for global variable assignments ([#17036](https://github.com/sveltejs/svelte/pull/17036))
+
+- chore: tweak memoizer logic ([#17042](https://github.com/sveltejs/svelte/pull/17042))
+
+## 5.42.1
+
+### Patch Changes
+
+- fix: ignore fork `discard()` after `commit()` ([#17034](https://github.com/sveltejs/svelte/pull/17034))
+
+## 5.42.0
+
+### Minor Changes
+
+- feat: experimental `fork` API ([#17004](https://github.com/sveltejs/svelte/pull/17004))
+
+### Patch Changes
+
+- fix: always allow `setContext` before first await in component ([#17031](https://github.com/sveltejs/svelte/pull/17031))
+
+- fix: less confusing names for inspect errors ([#17026](https://github.com/sveltejs/svelte/pull/17026))
+
+## 5.41.4
+
+### Patch Changes
+
+- fix: take into account static blocks when determining transition locality ([#17018](https://github.com/sveltejs/svelte/pull/17018))
+
+- fix: coordinate mount of snippets with await expressions ([#17021](https://github.com/sveltejs/svelte/pull/17021))
+
+- fix: better optimization of await expressions ([#17025](https://github.com/sveltejs/svelte/pull/17025))
+
+- fix: flush pending changes after rendering `failed` snippet ([#16995](https://github.com/sveltejs/svelte/pull/16995))
+
+## 5.41.3
+
+### Patch Changes
+
+- chore: exclude vite optimized deps from stack traces ([#17008](https://github.com/sveltejs/svelte/pull/17008))
+
+- perf: skip repeatedly traversing the same derived ([#17016](https://github.com/sveltejs/svelte/pull/17016))
+
+## 5.41.2
+
+### Patch Changes
+
+- fix: keep batches alive until all async work is complete ([#16971](https://github.com/sveltejs/svelte/pull/16971))
+
+- fix: don't preserve reactivity context across function boundaries ([#17002](https://github.com/sveltejs/svelte/pull/17002))
+
+- fix: make `$inspect` logs come from the callsite ([#17001](https://github.com/sveltejs/svelte/pull/17001))
+
+- fix: ensure guards (eg. if, each, key) run before their contents ([#16930](https://github.com/sveltejs/svelte/pull/16930))
+
+## 5.41.1
+
+### Patch Changes
+
+- fix: place `let:` declarations before `{@const}` declarations ([#16985](https://github.com/sveltejs/svelte/pull/16985))
+
+- fix: improve `each_key_without_as` error ([#16983](https://github.com/sveltejs/svelte/pull/16983))
+
+- chore: centralise branch management ([#16977](https://github.com/sveltejs/svelte/pull/16977))
+
+## 5.41.0
+
+### Minor Changes
+
+- feat: add `$state.eager(value)` rune ([#16849](https://github.com/sveltejs/svelte/pull/16849))
+
+### Patch Changes
+
+- fix: preserve `<select>` state while focused ([#16958](https://github.com/sveltejs/svelte/pull/16958))
+
+- chore: run boundary async effects in the context of the current batch ([#16968](https://github.com/sveltejs/svelte/pull/16968))
+
+- fix: error if `each` block has `key` but no `as` clause ([#16966](https://github.com/sveltejs/svelte/pull/16966))
+
+## 5.40.2
+
+### Patch Changes
+
+- fix: add hydration markers in `pending` branch of SSR boundary ([#16965](https://github.com/sveltejs/svelte/pull/16965))
+
+## 5.40.1
+
+### Patch Changes
+
+- chore: Remove sync-in-async warning for server rendering ([#16949](https://github.com/sveltejs/svelte/pull/16949))
+
+## 5.40.0
+
+### Minor Changes
+
+- feat: add `createContext` utility for type-safe context ([#16948](https://github.com/sveltejs/svelte/pull/16948))
+
+### Patch Changes
+
+- chore: simplify `batch.apply()` ([#16945](https://github.com/sveltejs/svelte/pull/16945))
+
+- fix: don't rerun async effects unnecessarily ([#16944](https://github.com/sveltejs/svelte/pull/16944))
+
+## 5.39.13
+
+### Patch Changes
+
+- fix: add missing type for `fr` attribute for `radialGradient` tags in svg ([#16943](https://github.com/sveltejs/svelte/pull/16943))
+
+- fix: unset context on stale promises ([#16935](https://github.com/sveltejs/svelte/pull/16935))
+
+## 5.39.12
+
+### Patch Changes
+
+- fix: better input cursor restoration for `bind:value` ([#16925](https://github.com/sveltejs/svelte/pull/16925))
+
+- fix: track the user's getter of `bind:this` ([#16916](https://github.com/sveltejs/svelte/pull/16916))
+
+- fix: generate correct SSR code for the case where `pending` is an attribute ([#16919](https://github.com/sveltejs/svelte/pull/16919))
+
+- fix: generate correct code for `each` blocks with async body ([#16923](https://github.com/sveltejs/svelte/pull/16923))
+
+## 5.39.11
+
+### Patch Changes
+
+- fix: flush batches whenever an async value resolves ([#16912](https://github.com/sveltejs/svelte/pull/16912))
+
+## 5.39.10
+
+### Patch Changes
+
+- fix: hydrate each blocks inside element correctly ([#16908](https://github.com/sveltejs/svelte/pull/16908))
+
+- fix: allow await in if block consequent and alternate ([#16890](https://github.com/sveltejs/svelte/pull/16890))
+
+- fix: don't replace rest props with `$$props` for excluded props ([#16898](https://github.com/sveltejs/svelte/pull/16898))
+
+- fix: correctly transform `$derived` private fields on server ([#16894](https://github.com/sveltejs/svelte/pull/16894))
+
+- fix: add `UNKNOWN` evaluation value before breaking for `binding.initial===SnippetBlock` ([#16910](https://github.com/sveltejs/svelte/pull/16910))
+
+## 5.39.9
+
+### Patch Changes
+
+- fix: flush when pending boundaries resolve ([#16897](https://github.com/sveltejs/svelte/pull/16897))
+
+## 5.39.8
+
+### Patch Changes
+
+- fix: check boundary `pending` attribute at runtime on server ([#16855](https://github.com/sveltejs/svelte/pull/16855))
+
+- fix: preserve tuple type in `$state.snapshot` ([#16864](https://github.com/sveltejs/svelte/pull/16864))
+
+- fix: allow await in svelte:boundary without pending ([#16857](https://github.com/sveltejs/svelte/pull/16857))
+
+- fix: update `bind:checked` error message to clarify usage with radio inputs ([#16874](https://github.com/sveltejs/svelte/pull/16874))
+
+## 5.39.7
+
+### Patch Changes
+
+- chore: simplify batch logic ([#16847](https://github.com/sveltejs/svelte/pull/16847))
+
+- fix: rebase pending batches when other batches are committed ([#16866](https://github.com/sveltejs/svelte/pull/16866))
+
+- fix: wrap async `children` in `$$renderer.async` ([#16862](https://github.com/sveltejs/svelte/pull/16862))
+
+- fix: silence label warning for buttons and anchor tags with title attributes ([#16872](https://github.com/sveltejs/svelte/pull/16872))
+
+- fix: coerce nullish `<title>` to empty string ([#16863](https://github.com/sveltejs/svelte/pull/16863))
+
+## 5.39.6
+
+### Patch Changes
+
+- fix: depend on reads of deriveds created within reaction (async mode) ([#16823](https://github.com/sveltejs/svelte/pull/16823))
+
+- fix: SSR regression of processing attributes of `<select>` and `<option>` ([#16821](https://github.com/sveltejs/svelte/pull/16821))
+
+- fix: async `class:` + spread attributes were compiled into sync server-side code ([#16834](https://github.com/sveltejs/svelte/pull/16834))
+
+- fix: ensure tick resolves within a macrotask ([#16825](https://github.com/sveltejs/svelte/pull/16825))
+
+## 5.39.5
+
+### Patch Changes
+
+- fix: allow `{@html await ...}` and snippets with async content on the server ([#16817](https://github.com/sveltejs/svelte/pull/16817))
+
+- fix: use nginx SSI-compatible comments for `$props.id()` ([#16820](https://github.com/sveltejs/svelte/pull/16820))
+
+## 5.39.4
+
+### Patch Changes
+
+- fix: restore hydration state after `await` in `<script>` ([#16806](https://github.com/sveltejs/svelte/pull/16806))
+
+## 5.39.3
+
+### Patch Changes
+
+- fix: remove outer hydration markers ([#16800](https://github.com/sveltejs/svelte/pull/16800))
+
+- fix: async hydration ([#16797](https://github.com/sveltejs/svelte/pull/16797))
+
+## 5.39.2
+
+### Patch Changes
+
+- fix: preserve SSR context when block expressions contain `await` ([#16791](https://github.com/sveltejs/svelte/pull/16791))
+
+- chore: bump some devDependencies ([#16787](https://github.com/sveltejs/svelte/pull/16787))
+
+## 5.39.1
+
+### Patch Changes
+
+- fix: issue `state_proxy_unmount` warning when unmounting a state proxy ([#16747](https://github.com/sveltejs/svelte/pull/16747))
+
+- fix: add `then` to class component `render` output ([#16783](https://github.com/sveltejs/svelte/pull/16783))
+
+## 5.39.0
+
+### Minor Changes
+
+- feat: experimental async SSR ([#16748](https://github.com/sveltejs/svelte/pull/16748))
+
+### Patch Changes
+
+- fix: correctly SSR hidden="until-found" ([#16773](https://github.com/sveltejs/svelte/pull/16773))
+
+## 5.38.10
+
+### Patch Changes
+
+- fix: flush effects scheduled during boundary's pending phase ([#16738](https://github.com/sveltejs/svelte/pull/16738))
+
+## 5.38.9
+
+### Patch Changes
+
+- chore: generate CSS hash using the filename ([#16740](https://github.com/sveltejs/svelte/pull/16740))
+
+- fix: correctly analyze `<object.property>` components ([#16711](https://github.com/sveltejs/svelte/pull/16711))
+
+- fix: clean up scheduling system ([#16741](https://github.com/sveltejs/svelte/pull/16741))
+
+- fix: transform input defaults from spread ([#16481](https://github.com/sveltejs/svelte/pull/16481))
+
+- fix: don't destroy contents of `svelte:boundary` unless the boundary is an error boundary ([#16746](https://github.com/sveltejs/svelte/pull/16746))
+
+## 5.38.8
+
+### Patch Changes
+
+- fix: send `$effect.pending` count to the correct boundary ([#16732](https://github.com/sveltejs/svelte/pull/16732))
+
+## 5.38.7
+
+### Patch Changes
+
+- fix: replace `undefined` with `void(0)` in CallExpressions ([#16693](https://github.com/sveltejs/svelte/pull/16693))
+
+- fix: ensure batch exists when resetting a failed boundary ([#16698](https://github.com/sveltejs/svelte/pull/16698))
+
+- fix: place store setup inside async body ([#16687](https://github.com/sveltejs/svelte/pull/16687))
+
+## 5.38.6
+
+### Patch Changes
+
+- fix: don't fail on `flushSync` while flushing effects ([#16674](https://github.com/sveltejs/svelte/pull/16674))
+
+## 5.38.5
+
+### Patch Changes
+
+- fix: ensure async deriveds always get dependencies from thennable ([#16672](https://github.com/sveltejs/svelte/pull/16672))
+
+## 5.38.4
+
+### Patch Changes
+
+- fix: place instance-level snippets inside async body ([#16666](https://github.com/sveltejs/svelte/pull/16666))
+
+- fix: Add check for builtin custom elements in `set_custom_element_data` ([#16592](https://github.com/sveltejs/svelte/pull/16592))
+
+- fix: restore batch along with effect context ([#16668](https://github.com/sveltejs/svelte/pull/16668))
+
+- fix: wait until changes propagate before updating input selection state ([#16649](https://github.com/sveltejs/svelte/pull/16649))
+
+- fix: add "Accept-CH" as valid value for `http-equiv` ([#16671](https://github.com/sveltejs/svelte/pull/16671))
+
+## 5.38.3
+
+### Patch Changes
+
+- fix: ensure correct order of template effect values ([#16655](https://github.com/sveltejs/svelte/pull/16655))
+
+- fix: allow async `{@const}` in more places ([#16643](https://github.com/sveltejs/svelte/pull/16643))
+
+- fix: properly catch top level await errors ([#16619](https://github.com/sveltejs/svelte/pull/16619))
+
+- perf: prune effects without dependencies ([#16625](https://github.com/sveltejs/svelte/pull/16625))
+
+- fix: only emit `for_await_track_reactivity_loss` in async mode ([#16644](https://github.com/sveltejs/svelte/pull/16644))
+
+## 5.38.2
+
+### Patch Changes
+
+- perf: run blocks eagerly during flush instead of aborting ([#16631](https://github.com/sveltejs/svelte/pull/16631))
+
+- fix: don't clone non-proxies in `$inspect` ([#16617](https://github.com/sveltejs/svelte/pull/16617))
+
+- fix: avoid recursion error when tagging circular references ([#16622](https://github.com/sveltejs/svelte/pull/16622))
+
+## 5.38.1
+
+### Patch Changes
+
+- fix: wrap `abort` in `without_reactive_context` ([#16570](https://github.com/sveltejs/svelte/pull/16570))
+
+- fix: add `hint` as a possible value for `popover` attribute ([#16581](https://github.com/sveltejs/svelte/pull/16581))
+
+- fix: skip effects inside dynamic component that is about to be destroyed ([#16601](https://github.com/sveltejs/svelte/pull/16601))
+
+## 5.38.0
+
+### Minor Changes
+
+- feat: allow `await` inside `@const` declarations ([#16542](https://github.com/sveltejs/svelte/pull/16542))
+
+### Patch Changes
+
+- fix: remount at any hydration error ([#16248](https://github.com/sveltejs/svelte/pull/16248))
+
+- chore: emit `await_reactivity_loss` in `for await` loops ([#16521](https://github.com/sveltejs/svelte/pull/16521))
+
+- fix: emit `snippet_invalid_export` instead of `undefined_export` for exported snippets ([#16539](https://github.com/sveltejs/svelte/pull/16539))
+
+## 5.37.3
+
+### Patch Changes
+
+- fix: reset attribute cache after setting corresponding property ([#16543](https://github.com/sveltejs/svelte/pull/16543))
+
+## 5.37.2
+
+### Patch Changes
+
+- fix: double event processing in firefox due to event object being garbage collected ([#16527](https://github.com/sveltejs/svelte/pull/16527))
+
+- fix: add bindable dimension attributes types to SVG and MathML elements ([#16525](https://github.com/sveltejs/svelte/pull/16525))
+
+- fix: correctly differentiate static fields before emitting `duplicate_class_field` ([#16526](https://github.com/sveltejs/svelte/pull/16526))
+
+- fix: prevent last_propagated_event from being DCE'd ([#16538](https://github.com/sveltejs/svelte/pull/16538))
+
+## 5.37.1
+
+### Patch Changes
+
+- chore: remove some todos ([#16515](https://github.com/sveltejs/svelte/pull/16515))
+
+- fix: allow await expressions inside `{#await ...}` argument ([#16514](https://github.com/sveltejs/svelte/pull/16514))
+
+- fix: `append_styles` in an effect to make them available on mount ([#16509](https://github.com/sveltejs/svelte/pull/16509))
+
+- chore: remove `parser.template_untrimmed` ([#16511](https://github.com/sveltejs/svelte/pull/16511))
+
+- fix: always inject styles when compiling as a custom element ([#16509](https://github.com/sveltejs/svelte/pull/16509))
+
+## 5.37.0
+
+### Minor Changes
+
+- feat: ignore component options in `compileModule` ([#16362](https://github.com/sveltejs/svelte/pull/16362))
+
+### Patch Changes
+
+- fix: always mark props as stateful ([#16504](https://github.com/sveltejs/svelte/pull/16504))
+
+## 5.36.17
+
+### Patch Changes
+
+- fix: throw on duplicate class field declarations ([#16502](https://github.com/sveltejs/svelte/pull/16502))
+
+- fix: add types for `part` attribute to svg attributes ([#16499](https://github.com/sveltejs/svelte/pull/16499))
+
+## 5.36.16
+
+### Patch Changes
+
+- fix: don't update a focused input with values from its own past ([#16491](https://github.com/sveltejs/svelte/pull/16491))
+
+- fix: don't destroy effect roots created inside of deriveds ([#16492](https://github.com/sveltejs/svelte/pull/16492))
+
+## 5.36.15
+
+### Patch Changes
+
+- fix: preserve dirty status of deferred effects ([#16487](https://github.com/sveltejs/svelte/pull/16487))
+
+## 5.36.14
+
+### Patch Changes
+
+- fix: keep input in sync when binding updated via effect ([#16482](https://github.com/sveltejs/svelte/pull/16482))
+
+- fix: rename form accept-charset attribute ([#16478](https://github.com/sveltejs/svelte/pull/16478))
+
+- fix: prevent infinite async loop ([#16482](https://github.com/sveltejs/svelte/pull/16482))
+
+- fix: exclude derived writes from effect abort and rescheduling ([#16482](https://github.com/sveltejs/svelte/pull/16482))
+
+## 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
+
+- fix: associate sources in Spring/Tween/SvelteMap/SvelteSet with correct reaction ([#16325](https://github.com/sveltejs/svelte/pull/16325))
+
+- fix: re-evaluate derived props during teardown ([#16278](https://github.com/sveltejs/svelte/pull/16278))
+
+## 5.35.4
+
+### Patch Changes
+
+- fix: abort and reschedule effect processing after state change in user effect ([#16280](https://github.com/sveltejs/svelte/pull/16280))
+
+## 5.35.3
+
+### Patch Changes
+
+- fix: account for mounting when `select_option` in `attribute_effect` ([#16309](https://github.com/sveltejs/svelte/pull/16309))
+
+- fix: do not proxify the value assigned to a derived ([#16302](https://github.com/sveltejs/svelte/pull/16302))
+
+## 5.35.2
+
+### Patch Changes
+
+- fix: bump esrap ([#16295](https://github.com/sveltejs/svelte/pull/16295))
+
+## 5.35.1
+
+### Patch Changes
+
+- feat: add parent hierarchy to `__svelte_meta` objects ([#16255](https://github.com/sveltejs/svelte/pull/16255))
+
+## 5.35.0
+
+### Minor Changes
+
+- feat: add `getAbortSignal()` ([#16266](https://github.com/sveltejs/svelte/pull/16266))
+
+### Patch Changes
+
+- chore: simplify props ([#16270](https://github.com/sveltejs/svelte/pull/16270))
+
+## 5.34.9
+
+### Patch Changes
+
+- fix: ensure unowned deriveds can add themselves as reactions while connected ([#16249](https://github.com/sveltejs/svelte/pull/16249))
+
+## 5.34.8
+
+### Patch Changes
+
+- fix: untrack `$inspect.with` and add check for unsafe mutation ([#16209](https://github.com/sveltejs/svelte/pull/16209))
+
+- fix: use fine grained for template if the component is not explicitly in legacy mode ([#16232](https://github.com/sveltejs/svelte/pull/16232))
+
+- lift unsafe_state_mutation constraints for SvelteSet, SvelteMap, SvelteDate, SvelteURL and SvelteURLSearchParams created inside the derived ([#16221](https://github.com/sveltejs/svelte/pull/16221))
+
+## 5.34.7
+
+### Patch Changes
+
+- fix: address css class matching regression ([#16204](https://github.com/sveltejs/svelte/pull/16204))
+
+## 5.34.6
+
+### Patch Changes
+
+- fix: match class and style directives against attribute selector ([#16179](https://github.com/sveltejs/svelte/pull/16179))
+
+## 5.34.5
+
+### Patch Changes
+
+- fix: keep spread non-delegated event handlers up to date ([#16180](https://github.com/sveltejs/svelte/pull/16180))
+
+- fix: remove undefined attributes on hydration ([#16178](https://github.com/sveltejs/svelte/pull/16178))
+
+- fix: ensure sources within nested effects still register correctly ([#16193](https://github.com/sveltejs/svelte/pull/16193))
+
+- fix: avoid shadowing a variable in dynamic components ([#16185](https://github.com/sveltejs/svelte/pull/16185))
+
+## 5.34.4
+
+### Patch Changes
+
+- fix: don't set state withing `with_parent` in proxy ([#16176](https://github.com/sveltejs/svelte/pull/16176))
+
+- fix: use compiler-driven reactivity in legacy mode template expressions ([#16100](https://github.com/sveltejs/svelte/pull/16100))
+
+## 5.34.3
+
+### Patch Changes
+
+- fix: don't eagerly execute deriveds on resume ([#16150](https://github.com/sveltejs/svelte/pull/16150))
+
+- fix: prevent memory leaking signals in legacy mode ([#16145](https://github.com/sveltejs/svelte/pull/16145))
+
+- fix: don't define `error.message` if it's not configurable ([#16149](https://github.com/sveltejs/svelte/pull/16149))
+
+## 5.34.2
+
+### Patch Changes
+
+- fix: add missing typings for some dimension bindings ([#16142](https://github.com/sveltejs/svelte/pull/16142))
+
+- fix: prune typescript class field declarations ([#16154](https://github.com/sveltejs/svelte/pull/16154))
+
+## 5.34.1
+
+### Patch Changes
+
+- fix: correctly tag private class state fields ([#16132](https://github.com/sveltejs/svelte/pull/16132))
+
+## 5.34.0
+
+### Minor Changes
+
+- feat: add source name logging to `$inspect.trace` ([#16060](https://github.com/sveltejs/svelte/pull/16060))
+
+### Patch Changes
+
+- fix: add `command` and `commandfor` to `HTMLButtonAttributes` ([#16117](https://github.com/sveltejs/svelte/pull/16117))
+
+- fix: better `$inspect.trace()` output ([#16131](https://github.com/sveltejs/svelte/pull/16131))
+
+- fix: properly hydrate dynamic css props components and remove element removal ([#16118](https://github.com/sveltejs/svelte/pull/16118))
+
+## 5.33.19
+
+### Patch Changes
+
+- fix: reset `is_flushing` if `flushSync` is called and there's no scheduled effect ([#16119](https://github.com/sveltejs/svelte/pull/16119))
+
+## 5.33.18
+
+### Patch Changes
+
+- chore: bump `esrap` dependency ([#16106](https://github.com/sveltejs/svelte/pull/16106))
+
+- fix: destructuring state in ssr ([#16102](https://github.com/sveltejs/svelte/pull/16102))
+
+## 5.33.17
+
+### Patch Changes
+
+- chore: update acorn parser `ecmaVersion` to parse import attributes ([#16098](https://github.com/sveltejs/svelte/pull/16098))
+
+## 5.33.16
+
+### Patch Changes
+
+- fix: visit expression when destructuring state declarations ([#16081](https://github.com/sveltejs/svelte/pull/16081))
+
+- fix: move xmlns attribute from SVGAttributes to to DOMAttributes ([#16080](https://github.com/sveltejs/svelte/pull/16080))
+
+## 5.33.15
+
+### Patch Changes
+
+- fix: invoke parent boundary of deriveds that throw ([#16091](https://github.com/sveltejs/svelte/pull/16091))
+
+## 5.33.14
+
+### Patch Changes
+
+- Revert "feat: enable TS autocomplete for Svelte HTML element definitions" ([#16063](https://github.com/sveltejs/svelte/pull/16063))
+
+- fix: destructuring snippet arguments ([#16068](https://github.com/sveltejs/svelte/pull/16068))
+
+## 5.33.13
+
+### Patch Changes
+
+- fix: avoid recursion error in `EachBlock` visitor ([#16058](https://github.com/sveltejs/svelte/pull/16058))
+
+## 5.33.12
+
+### Patch Changes
+
+- fix: correctly transform reassignments to class fields in SSR mode ([#16051](https://github.com/sveltejs/svelte/pull/16051))
+
+## 5.33.11
+
+### Patch Changes
+
+- fix: treat transitive dependencies of each blocks as mutable in legacy mode if item is mutated ([#16038](https://github.com/sveltejs/svelte/pull/16038))
+
+## 5.33.10
+
+### Patch Changes
+
+- fix: use `fill: 'forwards'` on transition animations to prevent flicker ([#16035](https://github.com/sveltejs/svelte/pull/16035))
+
+## 5.33.9
+
+### Patch Changes
+
+- fix: put expressions in effects unless known to be static ([#15792](https://github.com/sveltejs/svelte/pull/15792))
+
+## 5.33.8
+
+### Patch Changes
+
+- fix: only `select_option` if `'value'` is in `next` ([#16032](https://github.com/sveltejs/svelte/pull/16032))
+
+## 5.33.7
+
+### Patch Changes
+
+- fix: `bind:value` to select with stores ([#16028](https://github.com/sveltejs/svelte/pull/16028))
+
+## 5.33.6
+
+### Patch Changes
+
+- fix: falsy attachments on components ([#16021](https://github.com/sveltejs/svelte/pull/16021))
+
+- fix: correctly mark <option> elements as selected during SSR ([#16017](https://github.com/sveltejs/svelte/pull/16017))
+
+## 5.33.5
+
+### Patch Changes
+
+- fix: handle derived destructured iterators ([#16015](https://github.com/sveltejs/svelte/pull/16015))
+
+- fix: avoid rerunning attachments when unrelated spread attributes change ([#15961](https://github.com/sveltejs/svelte/pull/15961))
+
+## 5.33.4
+
+### Patch Changes
+
+- fix: narrow `defaultChecked` to boolean ([#16009](https://github.com/sveltejs/svelte/pull/16009))
+
+- fix: warn when using rest or identifier in custom elements without props option ([#16003](https://github.com/sveltejs/svelte/pull/16003))
+
+## 5.33.3
+
+### Patch Changes
+
+- fix: allow using typescript in `customElement.extend` option ([#16001](https://github.com/sveltejs/svelte/pull/16001))
+
+- fix: cleanup event handlers on media elements ([#16005](https://github.com/sveltejs/svelte/pull/16005))
+
+## 5.33.2
+
+### Patch Changes
+
+- fix: correctly parse escaped unicode characters in css selector ([#15976](https://github.com/sveltejs/svelte/pull/15976))
+
+- fix: don't mark deriveds as clean if updating during teardown ([#15997](https://github.com/sveltejs/svelte/pull/15997))
+
+## 5.33.1
+
+### Patch Changes
+
+- fix: make deriveds on the server lazy again ([#15964](https://github.com/sveltejs/svelte/pull/15964))
+
+## 5.33.0
+
+### Minor Changes
+
+- feat: XHTML compliance ([#15538](https://github.com/sveltejs/svelte/pull/15538))
+
+- feat: add `fragments: 'html' | 'tree'` option for wider CSP compliance ([#15538](https://github.com/sveltejs/svelte/pull/15538))
+
+## 5.32.2
+
+### Patch Changes
+
+- chore: simplify `<pre>` cleaning ([#15980](https://github.com/sveltejs/svelte/pull/15980))
+
+- fix: attach `__svelte_meta` correctly to elements following a CSS wrapper ([#15982](https://github.com/sveltejs/svelte/pull/15982))
+
+- fix: import untrack directly from client in `svelte/attachments` ([#15974](https://github.com/sveltejs/svelte/pull/15974))
+
+## 5.32.1
+
+### Patch Changes
+
+- Warn when an invalid `<select multiple>` value is given ([#14816](https://github.com/sveltejs/svelte/pull/14816))
+
+## 5.32.0
+
+### Minor Changes
+
+- feat: warn on implicitly closed tags ([#15932](https://github.com/sveltejs/svelte/pull/15932))
+
+- feat: attachments `fromAction` utility ([#15933](https://github.com/sveltejs/svelte/pull/15933))
+
+### Patch Changes
+
+- fix: only re-run directly applied attachment if it changed ([#15962](https://github.com/sveltejs/svelte/pull/15962))
+
+## 5.31.1
+
+### Patch Changes
+
+- fix: avoid auto-parenthesis for special-keywords-only `MediaQuery` ([#15937](https://github.com/sveltejs/svelte/pull/15937))
+
+## 5.31.0
+
+### Minor Changes
+
+- feat: allow state fields to be declared inside class constructors ([#15820](https://github.com/sveltejs/svelte/pull/15820))
+
+### Patch Changes
+
+- fix: Add missing `AttachTag` in `Tag` union type inside the `AST` namespace from `"svelte/compiler"` ([#15946](https://github.com/sveltejs/svelte/pull/15946))
+
+## 5.30.2
+
+### Patch Changes
+
+- fix: falsy attachments types ([#15939](https://github.com/sveltejs/svelte/pull/15939))
+
+- fix: handle more hydration mismatches ([#15851](https://github.com/sveltejs/svelte/pull/15851))
+
+## 5.30.1
+
+### Patch Changes
+
+- fix: add `typeParams` to `SnippetBlock` for legacy parser ([#15921](https://github.com/sveltejs/svelte/pull/15921))
+
+## 5.30.0
+
+### Minor Changes
+
+- feat: allow generics on snippets ([#15915](https://github.com/sveltejs/svelte/pull/15915))
+
+## 5.29.0
+
+### Minor Changes
+
+- feat: attachments ([#15000](https://github.com/sveltejs/svelte/pull/15000))
+
+## 5.28.7
+
+### Patch Changes
+
+- fix: remove unncessary guards that require CSP privilege when removing event attributes ([#15846](https://github.com/sveltejs/svelte/pull/15846))
+
+- fix: rewrite destructuring logic to handle iterators ([#15813](https://github.com/sveltejs/svelte/pull/15813))
+
+## 5.28.6
+
+### Patch Changes
+
+- fix: use `transform.read` for `ownership_validator.mutation` array ([#15848](https://github.com/sveltejs/svelte/pull/15848))
+
+- fix: don't redeclare `$slots` ([#15849](https://github.com/sveltejs/svelte/pull/15849))
+
+## 5.28.5
+
+### Patch Changes
+
+- fix: proxify the value in assignment shorthands to the private field ([#15862](https://github.com/sveltejs/svelte/pull/15862))
+
+- fix: more frequently update `bind:buffered` to actual value ([#15874](https://github.com/sveltejs/svelte/pull/15874))
+
+## 5.28.4
+
+### Patch Changes
+
+- fix: treat nullish expression as empty string ([#15901](https://github.com/sveltejs/svelte/pull/15901))
+
+- fix: prevent invalid BigInt calls from blowing up at compile time ([#15900](https://github.com/sveltejs/svelte/pull/15900))
+
+- fix: warn on bidirectional control characters ([#15893](https://github.com/sveltejs/svelte/pull/15893))
+
+- fix: emit right error for a shadowed invalid rune ([#15892](https://github.com/sveltejs/svelte/pull/15892))
+
+## 5.28.3
+
+### Patch Changes
+
+- chore: avoid microtasks when flushing sync ([#15895](https://github.com/sveltejs/svelte/pull/15895))
+
+- fix: improve error message for migration errors when slot would be renamed ([#15841](https://github.com/sveltejs/svelte/pull/15841))
+
+- fix: allow characters in the supplementary special-purpose plane ([#15823](https://github.com/sveltejs/svelte/pull/15823))
+
+## 5.28.2
+
+### Patch Changes
+
+- fix: don't mark selector lists inside `:global` with multiple items as unused ([#15817](https://github.com/sveltejs/svelte/pull/15817))
+
+## 5.28.1
+
+### Patch Changes
+
+- fix: ensure `<svelte:boundary>` properly removes error content in production mode ([#15793](https://github.com/sveltejs/svelte/pull/15793))
+
+- fix: `update_version` after `delete` if `source` is `undefined` and `prop` in `target` ([#15796](https://github.com/sveltejs/svelte/pull/15796))
+
+- fix: emit error on wrong placement of the `:global` block selector ([#15794](https://github.com/sveltejs/svelte/pull/15794))
+
+## 5.28.0
+
+### Minor Changes
+
+- feat: partially evaluate more expressions ([#15781](https://github.com/sveltejs/svelte/pull/15781))
+
+## 5.27.3
+
+### Patch Changes
+
+- fix: use function declaration for snippets in server output to avoid TDZ violation ([#15789](https://github.com/sveltejs/svelte/pull/15789))
+
+## 5.27.2
+
+### Patch Changes
+
+- chore: use pkg.imports for common modules ([#15787](https://github.com/sveltejs/svelte/pull/15787))
+
+## 5.27.1
+
+### Patch Changes
+
+- chore: default params for html blocks ([#15778](https://github.com/sveltejs/svelte/pull/15778))
+
+- fix: correct suggested type for custom events without detail ([#15763](https://github.com/sveltejs/svelte/pull/15763))
+
+- fix: Throw on unrendered snippets in `dev` ([#15766](https://github.com/sveltejs/svelte/pull/15766))
+
+- fix: avoid unnecessary read version increments ([#15777](https://github.com/sveltejs/svelte/pull/15777))
+
+## 5.27.0
+
+### Minor Changes
+
+- feat: partially evaluate certain expressions ([#15494](https://github.com/sveltejs/svelte/pull/15494))
+
+### Patch Changes
+
+- fix: relax `:global` selector list validation ([#15762](https://github.com/sveltejs/svelte/pull/15762))
+
+## 5.26.3
+
+### Patch Changes
+
+- fix: correctly validate head snippets on the server ([#15755](https://github.com/sveltejs/svelte/pull/15755))
+
+- fix: ignore mutation validation for props that are not proxies in more cases ([#15759](https://github.com/sveltejs/svelte/pull/15759))
+
+- fix: allow self-closing tags within math namespace ([#15761](https://github.com/sveltejs/svelte/pull/15761))
+
+## 5.26.2
+
+### Patch Changes
+
+- fix: correctly validate `undefined` snippet params with default value ([#15750](https://github.com/sveltejs/svelte/pull/15750))
+
+## 5.26.1
+
+### Patch Changes
+
+- fix: update `state_referenced_locally` message ([#15733](https://github.com/sveltejs/svelte/pull/15733))
+
+## 5.26.0
+
+### Minor Changes
+
+- feat: add `css.hasGlobal` to `compile` output ([#15450](https://github.com/sveltejs/svelte/pull/15450))
+
+### Patch Changes
+
+- fix: add snippet argument validation in dev ([#15521](https://github.com/sveltejs/svelte/pull/15521))
+
+## 5.25.12
+
+### Patch Changes
+
+- fix: improve internal_set versioning mechanic ([#15724](https://github.com/sveltejs/svelte/pull/15724))
+
+- fix: don't transform reassigned state in labeled statement in `$derived` ([#15725](https://github.com/sveltejs/svelte/pull/15725))
+
+## 5.25.11
+
+### Patch Changes
+
+- fix: handle hydration mismatches in await blocks ([#15708](https://github.com/sveltejs/svelte/pull/15708))
+
+- fix: prevent ownership warnings if the fallback of a bindable is used ([#15720](https://github.com/sveltejs/svelte/pull/15720))
+
+## 5.25.10
+
+### Patch Changes
+
+- fix: set deriveds as `CLEAN` if they are assigned to ([#15592](https://github.com/sveltejs/svelte/pull/15592))
+
+- fix: better scope `:global()` with nesting selector `&` ([#15671](https://github.com/sveltejs/svelte/pull/15671))
+
+## 5.25.9
+
+### Patch Changes
+
+- fix: allow `$.state` and `$.derived` to be treeshaken ([#15702](https://github.com/sveltejs/svelte/pull/15702))
+
+- fix: rework binding ownership validation ([#15678](https://github.com/sveltejs/svelte/pull/15678))
+
+## 5.25.8
+
+### Patch Changes
+
+- fix: address untracked_writes memory leak ([#15694](https://github.com/sveltejs/svelte/pull/15694))
+
+## 5.25.7
+
+### Patch Changes
+
+- fix: ensure clearing of old values happens independent of root flushes ([#15664](https://github.com/sveltejs/svelte/pull/15664))
+
+## 5.25.6
+
+### Patch Changes
+
+- fix: ignore generic type arguments while creating AST ([#15659](https://github.com/sveltejs/svelte/pull/15659))
+
+- fix: better consider component and its snippets during css pruning ([#15630](https://github.com/sveltejs/svelte/pull/15630))
+
+## 5.25.5
+
+### Patch Changes
+
+- fix: add setters to `$derived` class properties ([#15628](https://github.com/sveltejs/svelte/pull/15628))
+
+- fix: silence assignment warning on more function bindings ([#15644](https://github.com/sveltejs/svelte/pull/15644))
+
+- fix: make sure CSS is preserved during SSR with bindings ([#15645](https://github.com/sveltejs/svelte/pull/15645))
+
+## 5.25.4
+
+### Patch Changes
+
+- fix: support TS type assertions ([#15642](https://github.com/sveltejs/svelte/pull/15642))
+
+- fix: ensure `undefined` class still applies scoping class, if necessary ([#15643](https://github.com/sveltejs/svelte/pull/15643))
+
+## 5.25.3
+
+### Patch Changes
+
+- fix: prevent state runes from being called with spread ([#15585](https://github.com/sveltejs/svelte/pull/15585))
+
+## 5.25.2
+
+### Patch Changes
+
+- feat: migrate reassigned deriveds to `$derived` ([#15581](https://github.com/sveltejs/svelte/pull/15581))
+
+## 5.25.1
+
+### Patch Changes
+
+- fix: prevent dev server from throwing errors when attempting to retrieve the proxied value of an iframe's contentWindow ([#15577](https://github.com/sveltejs/svelte/pull/15577))
+
+## 5.25.0
+
+### Minor Changes
+
+- feat: make deriveds writable ([#15570](https://github.com/sveltejs/svelte/pull/15570))
+
+## 5.24.1
+
+### Patch Changes
+
+- fix: use `get` in constructor for deriveds ([#15300](https://github.com/sveltejs/svelte/pull/15300))
+
+- fix: ensure toStore root effect is connected to correct parent effect ([#15574](https://github.com/sveltejs/svelte/pull/15574))
+
+## 5.24.0
+
+### Minor Changes
+
+- feat: allow state created in deriveds/effects to be written/read locally without self-invalidation ([#15553](https://github.com/sveltejs/svelte/pull/15553))
+
+### Patch Changes
+
+- fix: check if DOM prototypes are extensible ([#15569](https://github.com/sveltejs/svelte/pull/15569))
+
+- Keep inlined trailing JSDoc comments of properties when running svelte-migrate ([#15567](https://github.com/sveltejs/svelte/pull/15567))
+
+- fix: simplify set calls for proxyable values ([#15548](https://github.com/sveltejs/svelte/pull/15548))
+
+- fix: don't depend on deriveds created inside the current reaction ([#15564](https://github.com/sveltejs/svelte/pull/15564))
+
+## 5.23.2
+
+### Patch Changes
+
+- fix: don't hoist listeners that access non hoistable snippets ([#15534](https://github.com/sveltejs/svelte/pull/15534))
+
+## 5.23.1
+
+### Patch Changes
+
+- fix: invalidate parent effects when child effects update parent dependencies ([#15506](https://github.com/sveltejs/svelte/pull/15506))
+
+- fix: correctly match `:has()` selector during css pruning ([#15277](https://github.com/sveltejs/svelte/pull/15277))
+
+- fix: replace `undefined` with `void 0` to avoid edge case ([#15511](https://github.com/sveltejs/svelte/pull/15511))
+
+- fix: allow global-like pseudo-selectors refinement ([#15313](https://github.com/sveltejs/svelte/pull/15313))
+
+- chore: don't distribute unused types definitions ([#15473](https://github.com/sveltejs/svelte/pull/15473))
+
+- fix: add `files` and `group` to HTMLInputAttributes in elements.d.ts ([#15492](https://github.com/sveltejs/svelte/pull/15492))
+
+- fix: throw rune_invalid_arguments_length when $state.raw() is used with more than 1 arg ([#15516](https://github.com/sveltejs/svelte/pull/15516))
+
+## 5.23.0
+
+### Minor Changes
+
+- fix: make values consistent between effects and their cleanup functions ([#15469](https://github.com/sveltejs/svelte/pull/15469))
+
+## 5.22.6
+
+### Patch Changes
+
+- fix: skip `log_if_contains_state` if only logging literals ([#15468](https://github.com/sveltejs/svelte/pull/15468))
+
+- fix: Add `closedby` property to HTMLDialogAttributes type ([#15458](https://github.com/sveltejs/svelte/pull/15458))
+
+- fix: null and warnings for local handlers ([#15460](https://github.com/sveltejs/svelte/pull/15460))
+
+## 5.22.5
+
+### Patch Changes
+
+- fix: memoize `clsx` calls ([#15456](https://github.com/sveltejs/svelte/pull/15456))
+
+- fix: respect `svelte-ignore hydration_attribute_changed` on elements with spread attributes ([#15443](https://github.com/sveltejs/svelte/pull/15443))
+
+- fix: always use `setAttribute` when setting `style` ([#15323](https://github.com/sveltejs/svelte/pull/15323))
+
+- fix: make `style:` directive and CSS handling more robust ([#15418](https://github.com/sveltejs/svelte/pull/15418))
+
+## 5.22.4
+
+### Patch Changes
+
+- fix: never deduplicate expressions in templates ([#15451](https://github.com/sveltejs/svelte/pull/15451))
+
+## 5.22.3
+
+### Patch Changes
+
+- fix: run effect roots in tree order ([#15446](https://github.com/sveltejs/svelte/pull/15446))
+
+## 5.22.2
+
+### Patch Changes
+
+- fix: correctly set `is_updating` before flushing root effects ([#15442](https://github.com/sveltejs/svelte/pull/15442))
+
+## 5.22.1
+
+### Patch Changes
+
+- chore: switch acorn-typescript plugin ([#15393](https://github.com/sveltejs/svelte/pull/15393))
+
+## 5.22.0
+
+### Minor Changes
+
+- feat: Add `idPrefix` option to `render` ([#15428](https://github.com/sveltejs/svelte/pull/15428))
+
+### Patch Changes
+
+- fix: make dialog element and role interactive ([#15429](https://github.com/sveltejs/svelte/pull/15429))
+
+## 5.21.0
+
+### Minor Changes
+
+- chore: Reduce hydration comment for {:else if} ([#15250](https://github.com/sveltejs/svelte/pull/15250))
+
+### Patch Changes
+
+- fix: disallow `bind:group` to snippet parameters ([#15401](https://github.com/sveltejs/svelte/pull/15401))
+
+## 5.20.5
+
+### Patch Changes
+
+- fix: allow double hyphen css selector names ([#15384](https://github.com/sveltejs/svelte/pull/15384))
+
+- fix: class:directive not working with $restProps #15386 ([#15389](https://github.com/sveltejs/svelte/pull/15389))
+  fix: spread add an useless cssHash on non-scoped element
+
+- fix: catch error on @const tag in svelte:boundary in DEV mode ([#15369](https://github.com/sveltejs/svelte/pull/15369))
+
+- fix: allow for duplicate `var` declarations ([#15382](https://github.com/sveltejs/svelte/pull/15382))
+
+- fix : bug "$0 is not defined" on svelte:element with a function call on class ([#15396](https://github.com/sveltejs/svelte/pull/15396))
+
+## 5.20.4
+
+### Patch Changes
+
+- fix: update types and inline docs for flushSync ([#15348](https://github.com/sveltejs/svelte/pull/15348))
+
+## 5.20.3
+
+### Patch Changes
+
+- fix: allow `@const` inside `#key` ([#15377](https://github.com/sveltejs/svelte/pull/15377))
+
+- fix: remove unnecessary `?? ''` on some expressions ([#15287](https://github.com/sveltejs/svelte/pull/15287))
+
+- fix: correctly override class attributes with class directives ([#15352](https://github.com/sveltejs/svelte/pull/15352))
+
+## 5.20.2
+
+### Patch Changes
+
+- chore: remove unused `options.uid` in `render` ([#15302](https://github.com/sveltejs/svelte/pull/15302))
+
+- fix: do not warn for `binding_property_non_reactive` if binding is a store in an each ([#15318](https://github.com/sveltejs/svelte/pull/15318))
+
+- fix: prevent writable store value from becoming a proxy when reassigning using $-prefix ([#15283](https://github.com/sveltejs/svelte/pull/15283))
+
+- fix: `muted` reactive without `bind` and select/autofocus attributes working with function calls ([#15326](https://github.com/sveltejs/svelte/pull/15326))
+
+- fix: ensure input elements and elements with `dir` attribute are marked as non-static ([#15259](https://github.com/sveltejs/svelte/pull/15259))
+
+- fix: fire delegated events on target even it was disabled in the meantime ([#15319](https://github.com/sveltejs/svelte/pull/15319))
+
+## 5.20.1
+
+### Patch Changes
+
+- fix: ensure AST analysis on `svelte.js` modules succeeds ([#15297](https://github.com/sveltejs/svelte/pull/15297))
+
+- fix: ignore typescript abstract methods ([#15267](https://github.com/sveltejs/svelte/pull/15267))
+
+- fix: correctly ssr component in `svelte:head` with `$props.id()` or `css='injected'` ([#15291](https://github.com/sveltejs/svelte/pull/15291))
+
+## 5.20.0
+
+### Minor Changes
+
+- feat: SSR-safe ID generation with `$props.id()` ([#15185](https://github.com/sveltejs/svelte/pull/15185))
+
+### Patch Changes
+
+- fix: take private and public into account for `constant_assignment` of derived state ([#15276](https://github.com/sveltejs/svelte/pull/15276))
+
+- fix: value/checked not correctly set using spread ([#15239](https://github.com/sveltejs/svelte/pull/15239))
+
+- chore: tweak effect self invalidation logic, run transition dispatches without reactive context ([#15275](https://github.com/sveltejs/svelte/pull/15275))
+
+- fix: use `importNode` to clone templates for Firefox ([#15272](https://github.com/sveltejs/svelte/pull/15272))
+
+- fix: recurse into `$derived` for ownership validation ([#15166](https://github.com/sveltejs/svelte/pull/15166))
+
+## 5.19.10
+
+### Patch Changes
+
+- fix: when re-connecting unowned deriveds, remove their unowned flag ([#15255](https://github.com/sveltejs/svelte/pull/15255))
+
+- fix: allow mutation of private derived state ([#15228](https://github.com/sveltejs/svelte/pull/15228))
+
+## 5.19.9
+
+### Patch Changes
+
+- fix: ensure unowned derived dependencies are not duplicated when reactions are skipped ([#15232](https://github.com/sveltejs/svelte/pull/15232))
+
+- fix: hydrate `href` that is part of spread attributes ([#15226](https://github.com/sveltejs/svelte/pull/15226))
+
+## 5.19.8
+
+### Patch Changes
+
+- fix: properly set `value` property of custom elements ([#15206](https://github.com/sveltejs/svelte/pull/15206))
+
+- fix: ensure custom element updates don't run in hydration mode ([#15217](https://github.com/sveltejs/svelte/pull/15217))
+
+- fix: ensure tracking returns true, even if in unowned ([#15214](https://github.com/sveltejs/svelte/pull/15214))
+
+## 5.19.7
+
+### Patch Changes
+
+- chore: remove unused code from signal logic ([#15195](https://github.com/sveltejs/svelte/pull/15195))
+
+- fix: encounter svelte:element in blocks as sibling during pruning css ([#15165](https://github.com/sveltejs/svelte/pull/15165))
+
+## 5.19.6
+
+### Patch Changes
+
+- fix: do not prune selectors like `:global(.foo):has(.scoped)` ([#15140](https://github.com/sveltejs/svelte/pull/15140))
+
+- fix: don't error on slot prop inside block inside other component ([#15148](https://github.com/sveltejs/svelte/pull/15148))
+
+- fix: ensure reactions are correctly attached for unowned deriveds ([#15158](https://github.com/sveltejs/svelte/pull/15158))
+
+- fix: silence a11y attribute warnings when spread attributes present ([#15150](https://github.com/sveltejs/svelte/pull/15150))
+
+- fix: prevent false-positive ownership validations due to hot reload ([#15154](https://github.com/sveltejs/svelte/pull/15154))
+
+- fix: widen ownership when calling setContext ([#15153](https://github.com/sveltejs/svelte/pull/15153))
+
+## 5.19.5
+
+### Patch Changes
+
+- fix: improve derived connection to ownership graph ([#15137](https://github.com/sveltejs/svelte/pull/15137))
+
+- fix: correctly look for sibling elements inside blocks and components when pruning CSS ([#15106](https://github.com/sveltejs/svelte/pull/15106))
+
+## 5.19.4
+
+### Patch Changes
+
+- fix: Add `bind:focused` property to `HTMLAttributes` type ([#15122](https://github.com/sveltejs/svelte/pull/15122))
+
+- fix: lazily connect derievds (in deriveds) to their parent ([#15129](https://github.com/sveltejs/svelte/pull/15129))
+
+- fix: disallow $state/$derived in const tags ([#15115](https://github.com/sveltejs/svelte/pull/15115))
+
+## 5.19.3
+
+### Patch Changes
+
+- fix: don't throw for `undefined` non delegated event handlers ([#15087](https://github.com/sveltejs/svelte/pull/15087))
+
+- fix: consistently set value to blank string when value attribute is undefined ([#15057](https://github.com/sveltejs/svelte/pull/15057))
+
+- fix: optimise || expressions in template ([#15092](https://github.com/sveltejs/svelte/pull/15092))
+
+- fix: correctly handle `novalidate` attribute casing ([#15083](https://github.com/sveltejs/svelte/pull/15083))
+
+- fix: expand boolean attribute support ([#15095](https://github.com/sveltejs/svelte/pull/15095))
+
+- fix: avoid double deriveds in component props ([#15089](https://github.com/sveltejs/svelte/pull/15089))
+
+- fix: add check for `is` attribute to correctly detect custom elements ([#15086](https://github.com/sveltejs/svelte/pull/15086))
+
+## 5.19.2
+
+### Patch Changes
+
+- fix: address regression with untrack ([#15079](https://github.com/sveltejs/svelte/pull/15079))
+
+## 5.19.1
+
+### Patch Changes
+
+- fix: omit unnecessary nullish coallescing in template expressions ([#15056](https://github.com/sveltejs/svelte/pull/15056))
+
+- fix: more efficient template effect grouping ([#15050](https://github.com/sveltejs/svelte/pull/15050))
+
+- fix: ensure untrack correctly retains the active reaction ([#15065](https://github.com/sveltejs/svelte/pull/15065))
+
+- fix: initialize `files` bind on hydration ([#15059](https://github.com/sveltejs/svelte/pull/15059))
+
+## 5.19.0
+
+### Minor Changes
+
+- feat: Expose `ClassValue` from `svelte/elements` ([#15035](https://github.com/sveltejs/svelte/pull/15035))
+
+### Patch Changes
+
+- fix: create fewer deriveds for concatenated strings ([#15041](https://github.com/sveltejs/svelte/pull/15041))
+
+- fix: correctly parse leading comments in function binding ([#15020](https://github.com/sveltejs/svelte/pull/15020))
+
+## 5.18.0
+
+### Minor Changes
+
+- feat: allow `<template>` elements to contain any child ([#15007](https://github.com/sveltejs/svelte/pull/15007))
+
+### Patch Changes
+
+- fix: ensure resume effects are scheduled in topological order ([#15012](https://github.com/sveltejs/svelte/pull/15012))
+
+- fix: bump esrap ([#15015](https://github.com/sveltejs/svelte/pull/15015))
+
+- fix: remove listener on `bind_current_time` teardown ([#15013](https://github.com/sveltejs/svelte/pull/15013))
+
+## 5.17.5
+
+### Patch Changes
+
+- feat: allow const tag inside `svelte:boundary` ([#14993](https://github.com/sveltejs/svelte/pull/14993))
+
+- fix: ensure signal write invalidation within effects is consistent ([#14989](https://github.com/sveltejs/svelte/pull/14989))
+
+## 5.17.4
+
+### Patch Changes
+
+- fix: never consider inert boundary effects ([#14999](https://github.com/sveltejs/svelte/pull/14999))
+
+- fix: store access on component destroy ([#14968](https://github.com/sveltejs/svelte/pull/14968))
+
+- fix: correctly transform `pre` with no content ([#14973](https://github.com/sveltejs/svelte/pull/14973))
+
+- fix: wrap each block expression in derived to encapsulate effects ([#14967](https://github.com/sveltejs/svelte/pull/14967))
+
+## 5.17.3
+
+### Patch Changes
+
+- fix: reset dependency read versions after reaction execution ([#14964](https://github.com/sveltejs/svelte/pull/14964))
+
+## 5.17.2
+
+### Patch Changes
+
+- fix: account for parent scale when animating elements ([#14957](https://github.com/sveltejs/svelte/pull/14957))
+
+- fix: apply `overflow: hidden` style when transitioning elements, where necessary ([#14930](https://github.com/sveltejs/svelte/pull/14930))
+
+- fix: properly add owners to function bindings ([#14962](https://github.com/sveltejs/svelte/pull/14962))
+
+## 5.17.1
+
+### Patch Changes
+
+- fix: remove bindable prop validation ([#14946](https://github.com/sveltejs/svelte/pull/14946))
+
+- chore: tweak "invalid assignment" compiler error message ([#14955](https://github.com/sveltejs/svelte/pull/14955))
+
+- fix: silence false-positive stale value warning ([#14958](https://github.com/sveltejs/svelte/pull/14958))
+
+## 5.17.0
+
+### Minor Changes
+
+- feat: allow non-numeric values to be tweened by snapping immediately to new value ([#14941](https://github.com/sveltejs/svelte/pull/14941))
+
+### Patch Changes
+
+- fix: handle default values in object destructuring within "each" blocks when using characters like "}" and "]" ([#14554](https://github.com/sveltejs/svelte/pull/14554))
+
+- fix: account for min-width/height in `slide` transition ([#14942](https://github.com/sveltejs/svelte/pull/14942))
+
+- fix: prevent long delays causing erratic spring behaviour ([#14940](https://github.com/sveltejs/svelte/pull/14940))
+
+- feat: warn on using `slide` transition with table elements ([#14936](https://github.com/sveltejs/svelte/pull/14936))
+
+- chore: improve signal performance by reducing duplicate deps ([#14945](https://github.com/sveltejs/svelte/pull/14945))
+
+## 5.16.6
+
+### Patch Changes
+
+- fix: Make Tween duration 0 set current to target immediately ([#14937](https://github.com/sveltejs/svelte/pull/14937))
+
+- fix: guard against `customElements` being unavailable in browser extension contexts ([#14933](https://github.com/sveltejs/svelte/pull/14933))
+
+- fix: treat `inert` as a boolean attribute ([#14935](https://github.com/sveltejs/svelte/pull/14935))
+
+- fix: remove leading newline from `<pre>` contents ([#14922](https://github.com/sveltejs/svelte/pull/14922))
+
+## 5.16.5
+
+### Patch Changes
+
+- fix: inherit correct namespace for `<title>` elements ([#14817](https://github.com/sveltejs/svelte/pull/14817))
+
+- fix: don't throw `bind_invalid_export` if there's also a bindable prop with the same name ([#14813](https://github.com/sveltejs/svelte/pull/14813))
+
+## 5.16.4
+
+### Patch Changes
+
+- fix: use cached indexOf array prototype method internally ([#14912](https://github.com/sveltejs/svelte/pull/14912))
+
+- fix: make Tween work with continuous target changes ([#14895](https://github.com/sveltejs/svelte/pull/14895))
+
+## 5.16.3
+
+### Patch Changes
+
+- fix: correctly parse `each` with loose parser ([#14887](https://github.com/sveltejs/svelte/pull/14887))
+
+- fix: apply `clsx` logic to custom element `class` attributes ([#14907](https://github.com/sveltejs/svelte/pull/14907))
+
+## 5.16.2
+
+### Patch Changes
+
+- fix: ensure disconnected deriveds correctly connect again ([#14899](https://github.com/sveltejs/svelte/pull/14899))
+
+- fix: correctly highlight sources reassigned inside `trace` ([#14811](https://github.com/sveltejs/svelte/pull/14811))
+
+## 5.16.1
+
+### Patch Changes
+
+- fix: ensure unowned deriveds correctly get re-linked to the graph ([#14855](https://github.com/sveltejs/svelte/pull/14855))
+
+- fix: ensure $inspect.trace works correctly with null values ([#14853](https://github.com/sveltejs/svelte/pull/14853))
+
+## 5.16.0
+
+### Minor Changes
+
+- feat: allow `class` attribute to be an object or array, using `clsx` ([#14714](https://github.com/sveltejs/svelte/pull/14714))
+
+### Patch Changes
+
+- fix: don't include keyframes in global scope in the keyframes to rename ([#14822](https://github.com/sveltejs/svelte/pull/14822))
+
+## 5.15.0
+
+### Minor Changes
+
+- feat: add "worker" exports condition to better support bundling for worker-based environments ([#14779](https://github.com/sveltejs/svelte/pull/14779))
+
+## 5.14.6
+
+### Patch Changes
+
+- fix: treeshake `$inspect.trace` code if unused in modules ([#14774](https://github.com/sveltejs/svelte/pull/14774))
+
+- fix: Improve typescript DX for $inspect, $props, $bindable, and $host ([#14777](https://github.com/sveltejs/svelte/pull/14777))
+
+## 5.14.5
+
+### Patch Changes
+
+- fix: bump esrap dependency ([#14765](https://github.com/sveltejs/svelte/pull/14765))
+
+- fix: ensure svg namespace for `<a>` elements is correct ([#14756](https://github.com/sveltejs/svelte/pull/14756))
+
+- fix: treeshake `$inspect.trace` code if unused ([#14770](https://github.com/sveltejs/svelte/pull/14770))
+
+## 5.14.4
+
+### Patch Changes
+
+- fix: remove implements from class declarations ([#14749](https://github.com/sveltejs/svelte/pull/14749))
+
+- fix: remove unwanted properties from both replaced and unreplaced nodes ([#14744](https://github.com/sveltejs/svelte/pull/14744))
+
+## 5.14.3
+
+### Patch Changes
+
+- fix: bump esrap, prevent malformed AST ([#14742](https://github.com/sveltejs/svelte/pull/14742))
+
+- fix: compare array contents for equality mismatch detections, not the arrays themselves ([#14738](https://github.com/sveltejs/svelte/pull/14738))
+
+## 5.14.2
+
+### Patch Changes
+
+- fix: correctly highlight first rerun of `$inspect.trace` ([#14734](https://github.com/sveltejs/svelte/pull/14734))
+
+- chore: more loose parser improvements ([#14733](https://github.com/sveltejs/svelte/pull/14733))
+
+## 5.14.1
+
+### Patch Changes
+
+- fix: improve unowned derived performance ([#14724](https://github.com/sveltejs/svelte/pull/14724))
+
 ## 5.14.0
 
 ### Minor Changes
diff --git a/packages/svelte/README.md b/packages/svelte/README.md
index 23e35fd4a7..026bc0d81d 100644
--- a/packages/svelte/README.md
+++ b/packages/svelte/README.md
@@ -1,4 +1,9 @@
-[![Cybernetically enhanced web apps: Svelte](https://sveltejs.github.io/assets/banner.png)](https://svelte.dev)
+<a href="https://svelte.dev">
+	<picture>
+		<source media="(prefers-color-scheme: dark)" srcset="../../assets/banner_dark.png">
+		<img src="../../assets/banner.png" alt="Svelte - web development for the rest of us" />
+	</picture>
+</a>
 
 [![npm version](https://img.shields.io/npm/v/svelte.svg)](https://www.npmjs.com/package/svelte) [![license](https://img.shields.io/npm/l/svelte.svg)](LICENSE.md) [![Chat](https://img.shields.io/discord/457912077277855764?label=chat&logo=discord)](https://svelte.dev/chat)
 
@@ -14,7 +19,7 @@ You can play around with Svelte in the [tutorial](https://svelte.dev/tutorial),
 
 When you're ready to build a full-fledge application, we recommend using [SvelteKit](https://svelte.dev/docs/kit):
 
-```bash
+```sh
 npx sv create my-app
 cd my-app
 npm install
@@ -25,7 +30,7 @@ See [the SvelteKit documentation](https://svelte.dev/docs/kit) to learn more.
 
 ## Changelog
 
-[The Changelog for this package is available on GitHub](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md).
+[The Changelog for this package is available on GitHub](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md).
 
 ## Supporting Svelte
 
diff --git a/packages/svelte/elements.d.ts b/packages/svelte/elements.d.ts
index 8800b65172..daa40635b6 100644
--- a/packages/svelte/elements.d.ts
+++ b/packages/svelte/elements.d.ts
@@ -31,6 +31,8 @@
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
+import type { Attachment } from 'svelte/attachments';
+
 // Note: We also allow `null` as a valid value because Svelte treats this the same as `undefined`
 
 type Booleanish = boolean | 'true' | 'false';
@@ -461,6 +463,16 @@ export interface DOMAttributes<T extends EventTarget> {
 	'on:fullscreenerror'?: EventHandler<Event, T> | undefined | null;
 	onfullscreenerror?: EventHandler<Event, T> | undefined | null;
 	onfullscreenerrorcapture?: EventHandler<Event, T> | undefined | null;
+
+	// Dimensions
+	readonly 'bind:contentRect'?: DOMRectReadOnly | undefined | null;
+	readonly 'bind:contentBoxSize'?: Array<ResizeObserverSize> | undefined | null;
+	readonly 'bind:borderBoxSize'?: Array<ResizeObserverSize> | undefined | null;
+	readonly 'bind:devicePixelContentBoxSize'?: Array<ResizeObserverSize> | undefined | null;
+	readonly 'bind:clientWidth'?: number | undefined | null;
+	readonly 'bind:clientHeight'?: number | undefined | null;
+
+	xmlns?: string | undefined | null;
 }
 
 // All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/
@@ -741,7 +753,7 @@ export interface HTMLAttributes<T extends EventTarget> extends AriaAttributes, D
 	accesskey?: string | undefined | null;
 	autocapitalize?: 'characters' | 'off' | 'on' | 'none' | 'sentences' | 'words' | undefined | null;
 	autofocus?: boolean | undefined | null;
-	class?: string | undefined | null;
+	class?: ClassValue | undefined | null;
 	contenteditable?: Booleanish | 'inherit' | 'plaintext-only' | undefined | null;
 	contextmenu?: string | undefined | null;
 	dir?: 'ltr' | 'rtl' | 'auto' | undefined | null;
@@ -769,7 +781,7 @@ export interface HTMLAttributes<T extends EventTarget> extends AriaAttributes, D
 	title?: string | undefined | null;
 	translate?: 'yes' | 'no' | '' | undefined | null;
 	inert?: boolean | undefined | null;
-	popover?: 'auto' | 'manual' | '' | undefined | null;
+	popover?: 'auto' | 'manual' | 'hint' | '' | undefined | null;
 	writingsuggestions?: Booleanish | undefined | null;
 
 	// Unknown
@@ -835,30 +847,15 @@ export interface HTMLAttributes<T extends EventTarget> extends AriaAttributes, D
 	 */
 	'bind:innerText'?: string | undefined | null;
 
-	readonly 'bind:contentRect'?: DOMRectReadOnly | undefined | null;
-	readonly 'bind:contentBoxSize'?: Array<ResizeObserverSize> | undefined | null;
-	readonly 'bind:borderBoxSize'?: Array<ResizeObserverSize> | undefined | null;
-	readonly 'bind:devicePixelContentBoxSize'?: Array<ResizeObserverSize> | undefined | null;
-
-	// SvelteKit
-	'data-sveltekit-keepfocus'?: true | '' | 'off' | undefined | null;
-	'data-sveltekit-noscroll'?: true | '' | 'off' | undefined | null;
-	'data-sveltekit-preload-code'?:
-		| true
-		| ''
-		| 'eager'
-		| 'viewport'
-		| 'hover'
-		| 'tap'
-		| 'off'
-		| undefined
-		| null;
-	'data-sveltekit-preload-data'?: true | '' | 'hover' | 'tap' | 'off' | undefined | null;
-	'data-sveltekit-reload'?: true | '' | 'off' | undefined | null;
-	'data-sveltekit-replacestate'?: true | '' | 'off' | undefined | null;
+	readonly 'bind:focused'?: boolean | undefined | null;
+	readonly 'bind:offsetWidth'?: number | undefined | null;
+	readonly 'bind:offsetHeight'?: number | undefined | null;
 
 	// allow any data- attribute
 	[key: `data-${string}`]: any;
+
+	// allow any attachment and falsy values (by using false we prevent the usage of booleans values by themselves)
+	[key: symbol]: Attachment<T> | false | undefined | null;
 }
 
 export type HTMLAttributeAnchorTarget = '_self' | '_blank' | '_parent' | '_top' | (string & {});
@@ -918,6 +915,17 @@ export interface HTMLButtonAttributes extends HTMLAttributes<HTMLButtonElement>
 	value?: string | string[] | number | undefined | null;
 	popovertarget?: string | undefined | null;
 	popovertargetaction?: 'toggle' | 'show' | 'hide' | undefined | null;
+	command?:
+		| 'show-modal'
+		| 'close'
+		| 'request-close'
+		| 'show-popover'
+		| 'hide-popover'
+		| 'toggle-popover'
+		| (string & {})
+		| undefined
+		| null;
+	commandfor?: string | undefined | null;
 }
 
 export interface HTMLCanvasAttributes extends HTMLAttributes<HTMLCanvasElement> {
@@ -944,9 +952,9 @@ export interface HTMLDetailsAttributes extends HTMLAttributes<HTMLDetailsElement
 
 	'bind:open'?: boolean | undefined | null;
 
-	'on:toggle'?: EventHandler<Event, HTMLDetailsElement> | undefined | null;
-	ontoggle?: EventHandler<Event, HTMLDetailsElement> | undefined | null;
-	ontogglecapture?: EventHandler<Event, HTMLDetailsElement> | undefined | null;
+	'on:toggle'?: ToggleEventHandler<HTMLDetailsElement> | undefined | null;
+	ontoggle?: ToggleEventHandler<HTMLDetailsElement> | undefined | null;
+	ontogglecapture?: ToggleEventHandler<HTMLDetailsElement> | undefined | null;
 }
 
 export interface HTMLDelAttributes extends HTMLAttributes<HTMLModElement> {
@@ -956,6 +964,7 @@ export interface HTMLDelAttributes extends HTMLAttributes<HTMLModElement> {
 
 export interface HTMLDialogAttributes extends HTMLAttributes<HTMLDialogElement> {
 	open?: boolean | undefined | null;
+	closedby?: 'any' | 'closerequest' | 'none' | undefined | null;
 }
 
 export interface HTMLEmbedAttributes extends HTMLAttributes<HTMLEmbedElement> {
@@ -972,7 +981,7 @@ export interface HTMLFieldsetAttributes extends HTMLAttributes<HTMLFieldSetEleme
 }
 
 export interface HTMLFormAttributes extends HTMLAttributes<HTMLFormElement> {
-	acceptcharset?: string | undefined | null;
+	'accept-charset'?: 'utf-8' | (string & {}) | undefined | null;
 	action?: string | undefined | null;
 	autocomplete?: AutoFillBase | undefined | null;
 	enctype?:
@@ -1074,6 +1083,7 @@ export interface HTMLInputAttributes extends HTMLAttributes<HTMLInputElement> {
 	checked?: boolean | undefined | null;
 	dirname?: string | undefined | null;
 	disabled?: boolean | undefined | null;
+	files?: FileList | undefined | null;
 	form?: string | undefined | null;
 	formaction?: string | undefined | null;
 	formenctype?:
@@ -1085,6 +1095,7 @@ export interface HTMLInputAttributes extends HTMLAttributes<HTMLInputElement> {
 	formmethod?: 'dialog' | 'get' | 'post' | 'DIALOG' | 'GET' | 'POST' | undefined | null;
 	formnovalidate?: boolean | undefined | null;
 	formtarget?: string | undefined | null;
+	group?: any | undefined | null;
 	height?: number | string | undefined | null;
 	indeterminate?: boolean | undefined | null;
 	list?: string | undefined | null;
@@ -1106,8 +1117,8 @@ export interface HTMLInputAttributes extends HTMLAttributes<HTMLInputElement> {
 	// needs both casing variants because language tools does lowercase names of non-shorthand attributes
 	defaultValue?: any;
 	defaultvalue?: any;
-	defaultChecked?: any;
-	defaultchecked?: any;
+	defaultChecked?: boolean | undefined | null;
+	defaultchecked?: boolean | undefined | null;
 	width?: number | string | undefined | null;
 	webkitdirectory?: boolean | undefined | null;
 
@@ -1211,6 +1222,7 @@ export interface HTMLMediaAttributes<T extends HTMLMediaElement> extends HTMLAtt
 	playsinline?: boolean | undefined | null;
 	preload?: 'auto' | 'none' | 'metadata' | '' | undefined | null;
 	src?: string | undefined | null;
+	srcobject?: MediaStream | MediaSource | File | Blob;
 	/**
 	 * a value between 0 and 1
 	 */
@@ -1240,6 +1252,7 @@ export interface HTMLMetaAttributes extends HTMLAttributes<HTMLMetaElement> {
 	charset?: string | undefined | null;
 	content?: string | undefined | null;
 	'http-equiv'?:
+		| 'accept-ch'
 		| 'content-security-policy'
 		| 'content-type'
 		| 'default-style'
@@ -1392,7 +1405,7 @@ export interface HTMLTextareaAttributes extends HTMLAttributes<HTMLTextAreaEleme
 	// needs both casing variants because language tools does lowercase names of non-shorthand attributes
 	defaultValue?: string | string[] | number | undefined | null;
 	defaultvalue?: string | string[] | number | undefined | null;
-	wrap?: 'hard' | 'soft' | undefined | null;
+	wrap?: 'hard' | 'soft' | 'off' | undefined | null;
 
 	'on:change'?: ChangeEventHandler<HTMLTextAreaElement> | undefined | null;
 	onchange?: ChangeEventHandler<HTMLTextAreaElement> | undefined | null;
@@ -1522,11 +1535,12 @@ export interface SvelteWindowAttributes extends HTMLAttributes<Window> {
 export interface SVGAttributes<T extends EventTarget> extends AriaAttributes, DOMAttributes<T> {
 	// Attributes which also defined in HTMLAttributes
 	className?: string | undefined | null;
-	class?: string | undefined | null;
+	class?: ClassValue | undefined | null;
 	color?: string | undefined | null;
 	height?: number | string | undefined | null;
 	id?: string | undefined | null;
 	lang?: string | undefined | null;
+	part?: string | undefined | null;
 	max?: number | string | undefined | null;
 	media?: string | undefined | null;
 	// On the `textPath` element
@@ -1628,6 +1642,7 @@ export interface SVGAttributes<T extends EventTarget> extends AriaAttributes, DO
 	'font-variant'?: number | string | undefined | null;
 	'font-weight'?: number | string | undefined | null;
 	format?: number | string | undefined | null;
+	fr?: number | string | undefined | null;
 	from?: number | string | undefined | null;
 	fx?: number | string | undefined | null;
 	fy?: number | string | undefined | null;
@@ -1800,7 +1815,6 @@ export interface SVGAttributes<T extends EventTarget> extends AriaAttributes, DO
 	'xlink:type'?: string | undefined | null;
 	'xml:base'?: string | undefined | null;
 	'xml:lang'?: string | undefined | null;
-	xmlns?: string | undefined | null;
 	'xmlns:xlink'?: string | undefined | null;
 	'xml:space'?: string | undefined | null;
 	y1?: number | string | undefined | null;
@@ -2031,7 +2045,7 @@ export interface SvelteHTMLElements {
 			| undefined
 			| {
 					tag?: string;
-					shadow?: 'open' | 'none' | undefined;
+					shadow?: 'open' | 'none' | ShadowRootInit | undefined;
 					props?:
 						| Record<
 								string,
@@ -2053,9 +2067,12 @@ export interface SvelteHTMLElements {
 	};
 	'svelte:head': { [name: string]: any };
 	'svelte:boundary': {
-		onerror?: (error: unknown, reset: () => void) => void;
-		failed?: import('svelte').Snippet<[error: unknown, reset: () => void]>;
+		onerror?: ((error: unknown, reset: () => void) => void) | null | undefined;
+		failed?: import('svelte').Snippet<[error: unknown, reset: () => void]> | null | undefined;
+		pending?: import('svelte').Snippet | null | undefined;
 	};
 
 	[name: string]: { [name: string]: any };
 }
+
+export type ClassValue = string | import('clsx').ClassArray | import('clsx').ClassDictionary;
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 517b028fa2..3b00d1516b 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
@@ -12,11 +22,15 @@
 
 ## component_api_changed
 
-> %parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more information
+> Calling `%method%` on a component instance (of %component%) is no longer valid in Svelte 5
+
+See the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.
 
 ## component_api_invalid_new
 
-> Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more information
+> Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working.
+
+See the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.
 
 ## derived_references_self
 
@@ -28,6 +42,12 @@
 
 > Keyed each block has duplicate key `%value%` at indexes %a% and %b%
 
+## each_key_volatile
+
+> Keyed each block has key that is not idempotent — the key for item at index %index% was `%a%` but is now `%b%`. Keys must be the same each time for a given item
+
+The key expression in a keyed each block must return the same value when called multiple times for the same item. Using expressions like `[item.a, item.b]` creates a new array each time, which will never be equal to itself. Instead, use a primitive value or create a stable key like `item.a + '-' + item.b`.
+
 ## effect_in_teardown
 
 > `%rune%` cannot be used inside an effect cleanup function
@@ -40,9 +60,92 @@
 
 > `%rune%` can only be used inside an effect (e.g. during component initialisation)
 
+Effects can only be created while a parent effect is running. This means that they cannot, for example, be created inside an event handler or after an `await` expression (unless the `await` occurs directly inside a component's `<script>` tag, and not inside an async function).
+
+In very rare cases, it is appropriate to use [`$effect.root`]($effect#$effect.root) so that you can create effects outside the normal component lifecycle.
+
+## 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.
+
+## fork_discarded
+
+> Cannot commit a fork that was already discarded
+
+## fork_timing
+
+> Cannot create a fork inside an effect or when state changes are pending
+
+## get_abort_signal_outside_reaction
+
+> `getAbortSignal()` can only be called inside an effect or derived
+
+## hydratable_missing_but_required
+
+> Expected to find a hydratable with key `%key%` during hydration, but did not.
+
+This can happen if you render a hydratable on the client that was not rendered on the server, and means that it was forced to fall back to running its function blockingly during hydration. This is bad for performance, as it blocks hydration until the asynchronous work completes.
+
+```svelte
+<script>
+  import { hydratable } from 'svelte';
+
+	if (BROWSER) {
+		// bad! nothing can become interactive until this asynchronous work is done
+		await hydratable('foo', get_slow_random_number);
+	}
+</script>
+```
 
 ## hydration_failed
 
@@ -68,6 +171,12 @@
 
 > 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`.
@@ -76,10 +185,55 @@
 
 > Cannot set prototype of `$state` object
 
-## state_unsafe_local_read
+## state_unsafe_mutation
+
+> Updating state inside `$derived(...)`, `$inspect(...)` or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
 
-> Reading state that was created inside the same derived is forbidden. Consider using `untrack` to read locally created state
+This error occurs when state is updated while evaluating a `$derived`. You might encounter it while trying to 'derive' two pieces of state in one go:
 
-## state_unsafe_mutation
+```svelte
+<script>
+	let count = $state(0);
+
+	let even = $state(true);
+
+	let odd = $derived.by(() => {
+		even = count % 2 === 0;
+		return !even;
+	});
+</script>
+
+<button onclick={() => count++}>{count}</button>
+
+<p>{count} is even: {even}</p>
+<p>{count} is odd: {odd}</p>
+```
+
+This is forbidden because it introduces instability: if `<p>{count} is even: {even}</p>` is updated before `odd` is recalculated, `even` will be stale. In most cases the solution is to make everything derived:
+
+```js
+let count = 0;
+// ---cut---
+let even = $derived(count % 2 === 0);
+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();
+}}>
 
-> Updating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
+</svelte:boundary>
+```
diff --git a/packages/svelte/messages/client-warnings/warnings.md b/packages/svelte/messages/client-warnings/warnings.md
index 543be71080..58d00f3933 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
@@ -42,12 +118,35 @@ function add() {
 
 When logging a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), browser devtools will log the proxy itself rather than the value it represents. In the case of Svelte, the 'target' of a `$state` proxy might not resemble its current value, which can be confusing.
 
-The easiest way to log a value as it changes over time is to use the [`$inspect`](https://svelte.dev/docs/svelte/$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](https://svelte.dev/docs/svelte/$state#$state.snapshot) to take a snapshot of the current value.
+The easiest way to log a value as it changes over time is to use the [`$inspect`](/docs/svelte/$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](/docs/svelte/$state#$state.snapshot) to take a snapshot of the current value.
+
+## derived_inert
+
+> Reading a derived belonging to a now-destroyed effect may result in stale values
+
+A `$derived` value created inside an effect will stop updating when the effect is destroyed. You should create the `$derived` outside the effect, or inside an `$effect.root`.
 
 ## event_handler_invalid
 
 > %handler% should be a function. Did you mean to %suggestion%?
 
+## hydratable_missing_but_expected
+
+> Expected to find a hydratable with key `%key%` during hydration, but did not.
+
+This can happen if you render a hydratable on the client that was not rendered on the server, and means that it was forced to fall back to running its function blockingly during hydration. This is bad for performance, as it blocks hydration until the asynchronous work completes.
+
+```svelte
+<script>
+  import { hydratable } from 'svelte';
+
+	if (BROWSER) {
+		// bad! nothing can become interactive until this asynchronous work is done
+		await hydratable('foo', get_slow_random_number);
+	}
+</script>
+```
+
 ## hydration_attribute_changed
 
 > The `%attribute%` attribute on `%html%` changed its value between server and client renders. The client value, `%value%`, will be ignored in favour of the server value
@@ -116,7 +215,7 @@ To fix this, either silence the warning with a [`svelte-ignore`](basic-markup#Co
 
 This warning is thrown when Svelte encounters an error while hydrating the HTML from the server. During hydration, Svelte walks the DOM, expecting a certain structure. If that structure is different (for example because the HTML was repaired by the DOM because of invalid HTML), then Svelte will run into issues, resulting in this warning.
 
-During development, this error is often preceeded by a `console.error` detailing the offending HTML, which needs fixing.
+During development, this error is often preceded by a `console.error` detailing the offending HTML, which needs fixing.
 
 ## invalid_raw_snippet_render
 
@@ -132,7 +231,7 @@ During development, this error is often preceeded by a `console.error` detailing
 
 ## ownership_invalid_binding
 
-> %parent% passed a value to %child% with `bind:`, but the value is owned by %owner%. Consider creating a binding between %owner% and %parent%
+> %parent% passed property `%prop%` to %child% with `bind:`, but its parent component %owner% did not declare `%prop%` as a binding. Consider creating a binding between %owner% and %parent% (e.g. `bind:%prop%={...}` instead of `%prop%={...}`)
 
 Consider three components `GrandParent`, `Parent` and `Child`. If you do `<GrandParent bind:value>`, inside `GrandParent` pass on the variable via `<Parent {value} />` (note the missing `bind:`) and then do `<Child bind:value>` inside `Parent`, this warning is thrown.
 
@@ -140,9 +239,7 @@ To fix it, `bind:` to the value instead of just passing a property (i.e. in this
 
 ## ownership_invalid_mutation
 
-> Mutating a value outside the component that created it is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
-
-> %component% mutated a value owned by %owner%. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
+> Mutating unbound props (`%name%`, at %location%) is strongly discouraged. Consider using `bind:%prop%={...}` in %parent% (or using a callback) instead
 
 Consider the following code:
 
@@ -170,6 +267,17 @@ Consider the following code:
 
 To fix it, either create callback props to communicate changes, or mark `person` as [`$bindable`]($bindable).
 
+## select_multiple_invalid_value
+
+> The `value` property of a `<select multiple>` element should be an array, but it received a non-array value. The selection will be kept as is.
+
+When using `<select multiple value={...}>`, Svelte will mark all selected `<option>` elements as selected by iterating over the array passed to `value`. If `value` is not an array, Svelte will emit this warning and keep the selected options as they are.
+
+To silence the warning, ensure that `value`:
+
+- is an array for an explicit selection
+- is `null` or `undefined` to keep the selection as is
+
 ## state_proxy_equality_mismatch
 
 > Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results
@@ -186,3 +294,56 @@ To fix it, either create callback props to communicate changes, or mark `person`
 ```
 
 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.
+
+## state_proxy_unmount
+
+> Tried to unmount a state proxy, rather than a component
+
+`unmount` was called with a state proxy:
+
+```js
+import { mount, unmount } from 'svelte';
+import Component from './Component.svelte';
+let target = document.body;
+// ---cut---
+let component = $state(mount(Component, { target }));
+
+// later...
+unmount(component);
+```
+
+Avoid using `$state` here. If `component` _does_ need to be reactive for some reason, use `$state.raw` instead.
+
+## 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%`
+
+The [slide](/docs/svelte/svelte-transition#slide) transition works by animating the `height` of the element, which requires a `display` style like `block`, `flex` or `grid`. It does not work for:
+
+- `display: inline` (which is the default for elements like `<span>`), and its variants like `inline-block`, `inline-flex` and `inline-grid`
+- `display: table` and `table-[name]`, which are the defaults for elements like `<table>` and `<tr>`
+- `display: contents`
diff --git a/packages/svelte/messages/compile-errors/script.md b/packages/svelte/messages/compile-errors/script.md
index fa851cec89..743fe31fde 100644
--- a/packages/svelte/messages/compile-errors/script.md
+++ b/packages/svelte/messages/compile-errors/script.md
@@ -16,7 +16,7 @@
 
 ## declaration_duplicate_module_import
 
-> Cannot declare a variable with the same name as an import inside `<script module>`
+> Cannot declare a variable with the same name as an import from `<script module>`
 
 ## derived_invalid_export
 
@@ -30,14 +30,54 @@
 
 > The $ prefix is reserved, and cannot be used for variables and imports
 
+## duplicate_class_field
+
+> `%name%` has already been declared
+
 ## each_item_invalid_assignment
 
-> Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`)
+> Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`, or `bind:value={array[i]}` instead of `bind:value={entry}`)
+
+In legacy mode, it was possible to reassign or bind to the each block argument itself:
+
+```svelte
+<script>
+	let array = [1, 2, 3];
+</script>
+
+{#each array as entry}
+	<!-- reassignment -->
+	<button on:click={() => entry = 4}>change</button>
+
+	<!-- binding -->
+	<input bind:value={entry}>
+{/each}
+```
+
+This turned out to be buggy and unpredictable, particularly when working with derived values (such as `array.map(...)`), and as such is forbidden in runes mode. You can achieve the same outcome by using the index instead:
+
+```svelte
+<script>
+	let array = $state([1, 2, 3]);
+</script>
+
+{#each array as entry, i}
+	<!-- reassignment -->
+	<button onclick={() => array[i] = 4}>change</button>
+
+	<!-- binding -->
+	<input bind:value={array[i]}>
+{/each}
+```
 
 ## effect_invalid_placement
 
 > `$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
@@ -66,6 +106,10 @@
 
 > 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
@@ -88,7 +132,11 @@
 
 ## props_duplicate
 
-> Cannot use `$props()` more than once
+> Cannot use `%rune%()` more than once
+
+## props_id_invalid_placement
+
+> `$props.id()` can only be used at the top level of components as a variable declaration initializer
 
 ## props_illegal_name
 
@@ -126,6 +174,10 @@
 
 > `%name%` is not a valid rune
 
+## rune_invalid_spread
+
+> `%rune%` cannot be called with a spread argument
+
 ## rune_invalid_usage
 
 > Cannot use `%rune%` rune in non-runes mode
@@ -172,13 +224,41 @@ It's possible to export a snippet from a `<script module>` block, but only if it
 
 > Cannot reassign or bind to snippet parameter
 
+## state_field_duplicate
+
+> `%name%` has already been declared on this class
+
+An assignment to a class field that uses a `$state` or `$derived` rune is considered a _state field declaration_. The declaration can happen in the class body...
+
+```js
+class Counter {
+	count = $state(0);
+}
+```
+
+...or inside the constructor...
+
+```js
+class Counter {
+	constructor() {
+		this.count = $state(0);
+	}
+}
+```
+
+...but it can only happen once.
+
+## state_field_invalid_assignment
+
+> Cannot assign to a state field before its declaration
+
 ## state_invalid_export
 
 > Cannot export state from a module if it is reassigned. Either export a function returning the state value or only mutate the state value's properties
 
 ## state_invalid_placement
 
-> `%rune%(...)` can only be used as a variable declaration initializer or a class field
+> `%rune%(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.
 
 ## store_invalid_scoped_subscription
 
diff --git a/packages/svelte/messages/compile-errors/style.md b/packages/svelte/messages/compile-errors/style.md
index 1e1ab45e8c..272efbccce 100644
--- a/packages/svelte/messages/compile-errors/style.md
+++ b/packages/svelte/messages/compile-errors/style.md
@@ -16,7 +16,31 @@
 
 ## css_global_block_invalid_list
 
-> A `:global` selector cannot be part of a selector list with more than one item
+> A `:global` selector cannot be part of a selector list with entries that don't contain `:global`
+
+The following CSS is invalid:
+
+```css
+:global, x {
+    y {
+        color: red;
+    }
+}
+```
+
+This is mixing a `:global` block, which means "everything in here is unscoped", with a scoped selector (`x` in this case). As a result it's not possible to transform the inner selector (`y` in this case) into something that satisfies both requirements. You therefore have to split this up into two selectors:
+
+```css
+:global {
+    y {
+        color: red;
+    }
+}
+
+x y {
+    color: red;
+}
+```
 
 ## css_global_block_invalid_modifier
 
@@ -26,6 +50,10 @@
 
 > A `:global` selector can only be modified if it is a descendant of other selectors
 
+## css_global_block_invalid_placement
+
+> A `:global` selector cannot be inside a pseudoclass
+
 ## css_global_invalid_placement
 
 > `:global(...)` can be at the start or end of a selector sequence, but not in the middle
diff --git a/packages/svelte/messages/compile-errors/template.md b/packages/svelte/messages/compile-errors/template.md
index 02961b61fc..6d1ae6ccbf 100644
--- a/packages/svelte/messages/compile-errors/template.md
+++ b/packages/svelte/messages/compile-errors/template.md
@@ -40,7 +40,27 @@
 
 ## attribute_invalid_sequence_expression
 
-> Sequence expressions are not allowed as attribute/directive values in runes mode, unless wrapped in parentheses
+> Comma-separated expressions are not allowed as attribute/directive values in runes mode, unless wrapped in parentheses
+
+An attribute value cannot be a comma-separated sequence of expressions — in other words this is disallowed:
+
+```svelte
+<div class={size, color}>...</div>
+```
+
+Instead, make sure that the attribute value contains a single expression. In the example above it's likely that this was intended (see the [class documentation](class) for more details):
+
+```svelte
+<div class={[size, color]}>...</div>
+```
+
+If you _do_ need to use the comma operator for some reason, wrap the sequence in parentheses:
+
+```svelte
+<div class={(size, color)}>...</div>
+```
+
+Note that this will evaluate to `color`, ignoring `size`.
 
 ## attribute_invalid_type
 
@@ -54,6 +74,10 @@
 
 > `bind:group` can only bind to an Identifier or MemberExpression
 
+## bind_group_invalid_snippet_parameter
+
+> Cannot `bind:group` to a snippet parameter
+
 ## bind_invalid_expression
 
 > Can only bind to an Identifier or MemberExpression or a `{get, set}` pair
@@ -118,12 +142,63 @@
 
 ## const_tag_invalid_placement
 
-> `{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>` or `<Component>`
+> `{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>`, `<svelte:boundary>` or `<Component>`
+
+## const_tag_invalid_reference
+
+> The `{@const %name% = ...}` declaration is not available in this snippet
+
+The following is an error:
+
+```svelte
+<svelte:boundary>
+    {@const foo = 'bar'}
+
+    {#snippet failed()}
+        {foo}
+    {/snippet}
+</svelte:boundary>
+```
+
+Here, `foo` is not available inside `failed`. The top level code inside `<svelte:boundary>` becomes part of the implicit `children` snippet, in other words the above code is equivalent to this:
+
+```svelte
+<svelte:boundary>
+    {#snippet children()}
+        {@const foo = 'bar'}
+    {/snippet}
+
+    {#snippet failed()}
+        {foo}
+    {/snippet}
+</svelte:boundary>
+```
+
+The same applies to components:
+
+```svelte
+<Component>
+    {@const foo = 'bar'}
+
+    {#snippet someProp()}
+        <!-- error -->
+        {foo}
+    {/snippet}
+</Component>
+```
 
 ## debug_tag_invalid_arguments
 
 > {@debug ...} arguments must be identifiers, not arbitrary expressions
 
+## declaration_tag_invalid_type
+
+> Declaration tags must be `let` or `const` declarations
+
+## declaration_tag_no_legacy_mode
+
+> Declaration tags cannot be used in legacy mode
+
 ## directive_invalid_value
 
 > Directive value must be a JavaScript expression enclosed in curly braces
@@ -132,6 +207,10 @@
 
 > `%type%` name cannot be empty
 
+## each_key_without_as
+
+> An `{#each ...}` block without an `as` clause cannot have a key
+
 ## element_invalid_closing_tag
 
 > `</%name%>` attempted to close an element that was not open
@@ -172,6 +251,10 @@
 
 > Expected identifier or destructure pattern
 
+## expected_tag
+
+> Expected 'html', 'render', 'attach', 'const', or 'debug'
+
 ## expected_token
 
 > Expected token %token%
@@ -180,6 +263,10 @@
 
 > Expected whitespace
 
+## illegal_await_expression
+
+> `use:`, `transition:` and `animate:` directives, attachments and bindings do not support await expressions
+
 ## illegal_element_attribute
 
 > `<%name%>` does not support non-event attributes or spread attributes
@@ -352,7 +439,7 @@ HTML restricts where certain elements can appear. In case of a violation the bro
 
 ## svelte_options_invalid_customelement
 
-> "customElement" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: "open" | "none"; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }
+> "customElement" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: "open" | "none" | `ShadowRootInit`; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }
 
 ## svelte_options_invalid_customelement_props
 
@@ -360,7 +447,9 @@ HTML restricts where certain elements can appear. In case of a violation the bro
 
 ## svelte_options_invalid_customelement_shadow
 
-> "shadow" must be either "open" or "none"
+> "shadow" must be either "open", "none" or `ShadowRootInit` object.
+
+See https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options for more information on valid shadow root constructor options
 
 ## svelte_options_invalid_tagname
 
@@ -418,6 +507,10 @@ See https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-ele
 
 > '%word%' is a reserved word in JavaScript and cannot be used here
 
+## unterminated_string_constant
+
+> Unterminated string constant
+
 ## void_element_invalid_content
 
 > Void elements cannot have children or closing tags
diff --git a/packages/svelte/messages/compile-warnings/a11y.md b/packages/svelte/messages/compile-warnings/a11y.md
index 938c0a103d..1f48ef0dd5 100644
--- a/packages/svelte/messages/compile-warnings/a11y.md
+++ b/packages/svelte/messages/compile-warnings/a11y.md
@@ -49,7 +49,7 @@ Enforce that `autofocus` is not used on elements. Autofocusing elements can caus
 
 ## a11y_click_events_have_key_events
 
-> Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type="button">` or `<a>` might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details
+> Visible, non-interactive element `<%element%>` with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type="button">` or `<a>` might be more appropriate
 
 Enforce that visible, non-interactive elements with an `onclick` event are accompanied by a keyboard event handler.
 
@@ -66,7 +66,7 @@ Coding for the keyboard is important for users with physical disabilities who ca
 
 ## a11y_consider_explicit_label
 
-> Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute
+> Buttons and links should either contain text or have an `aria-label`, `aria-labelledby` or `title` attribute
 
 ## a11y_distracting_elements
 
diff --git a/packages/svelte/messages/compile-warnings/misc.md b/packages/svelte/messages/compile-warnings/misc.md
index 3b977db1be..29343dd28a 100644
--- a/packages/svelte/messages/compile-warnings/misc.md
+++ b/packages/svelte/messages/compile-warnings/misc.md
@@ -1,3 +1,9 @@
+## bidirectional_control_characters
+
+> A bidirectional control character was detected in your code. These characters can be used to alter the visual direction of your code and could have unintended consequences
+
+Bidirectional control characters can alter the direction in which text appears to be in. For example, via control characters, you can make `defabc` look like `abcdef`. As a result, if you were to unknowingly copy and paste some code that has these control characters, they may alter the behavior of your code in ways you did not intend. See [trojansource.codes](https://trojansource.codes/) for more information.
+
 ## legacy_code
 
 > `%code%` is no longer valid — please use `%suggestion%` instead
diff --git a/packages/svelte/messages/compile-warnings/script.md b/packages/svelte/messages/compile-warnings/script.md
index 8c32fb7082..26bd0c9027 100644
--- a/packages/svelte/messages/compile-warnings/script.md
+++ b/packages/svelte/messages/compile-warnings/script.md
@@ -1,3 +1,7 @@
+## custom_element_props_identifier
+
+> Using a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option.
+
 ## export_let_unused
 
 > Component has unused export property '%name%'. If it is for external reference only, please consider using `export const %name%`
@@ -54,14 +58,15 @@ To fix this, wrap your variable declaration with `$state`.
 
 ## state_referenced_locally
 
-> State referenced in its own scope will never update. Did you mean to reference it inside a closure?
+> This reference only captures the initial value of `%name%`. Did you mean to reference it inside a %type% instead?
 
 This warning is thrown when the compiler detects the following:
+
 - A reactive variable is declared
-- the variable is reassigned
-- the variable is referenced inside the same scope it is declared and it is a non-reactive context
+- ...and later reassigned...
+- ...and referenced in the same scope
 
-In this case, the state reassignment will not be noticed by whatever you passed it to. For example, if you pass the state to a function, that function will not notice the updates:
+This 'breaks the link' to the original state declaration. For example, if you pass the state to a function, the function loses access to the state once it is reassigned:
 
 ```svelte
 <!--- file: Parent.svelte --->
diff --git a/packages/svelte/messages/compile-warnings/template.md b/packages/svelte/messages/compile-warnings/template.md
index 33e635bdb2..f1e32a6d18 100644
--- a/packages/svelte/messages/compile-warnings/template.md
+++ b/packages/svelte/messages/compile-warnings/template.md
@@ -30,10 +30,53 @@
 
 > `<%name%>` will be treated as an HTML element unless it begins with a capital letter
 
+## element_implicitly_closed
+
+> This element is implicitly closed by the following `%tag%`, which can cause an unexpected DOM structure. Add an explicit `%closing%` to avoid surprises.
+
+In HTML, some elements are implicitly closed by another element. For example, you cannot nest a `<p>` inside another `<p>`:
+
+```html
+<!-- this HTML... -->
+<p><p>hello</p>
+
+<!-- results in this DOM structure -->
+<p></p>
+<p>hello</p>
+```
+
+Similarly, a parent element's closing tag will implicitly close all child elements, even if the `</` was a typo and you meant to create a _new_ element. To avoid ambiguity, it's always a good idea to have an explicit closing tag.
+
 ## element_invalid_self_closing_tag
 
 > Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...></%name%>` rather than `<%name% ... />`
 
+In HTML, there's [no such thing as a self-closing tag](https://jakearchibald.com/2023/against-self-closing-tags-in-html/). While this _looks_ like a self-contained element with some text next to it...
+
+```html
+<div>
+	<span class="icon" /> some text!
+</div>
+```
+
+...a spec-compliant HTML parser (such as a browser) will in fact parse it like this, with the text _inside_ the icon:
+
+```html
+<div>
+	<span class="icon"> some text! </span>
+</div>
+```
+
+Some templating languages (including Svelte) will 'fix' HTML by turning `<span />` into `<span></span>`. Others adhere to the spec. Both result in ambiguity and confusion when copy-pasting code between different contexts, so Svelte prompts you to resolve the ambiguity directly by having an explicit closing tag.
+
+To automate this, run the dedicated migration:
+
+```sh
+npx sv migrate self-closing-tags
+```
+
+In a future version of Svelte, self-closing tags may be upgraded from a warning to an error.
+
 ## event_directive_deprecated
 
 > Using `on:%name%` to listen to the %name% event is deprecated. Use the event attribute `on%name%` instead
@@ -64,7 +107,7 @@ This code will work when the component is rendered on the client (which is why t
 
 ## script_unknown_attribute
 
-> Unrecognized attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it
+> Unrecognised attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it
 
 ## slot_element_deprecated
 
diff --git a/packages/svelte/messages/server-errors/errors.md b/packages/svelte/messages/server-errors/errors.md
new file mode 100644
index 0000000000..fe7f811787
--- /dev/null
+++ b/packages/svelte/messages/server-errors/errors.md
@@ -0,0 +1,70 @@
+## async_local_storage_unavailable
+
+> The node API `AsyncLocalStorage` is not available, but is required to use async server rendering.
+
+Some platforms require configuration flags to enable this API. Consult your platform's documentation.
+
+## await_invalid
+
+> Encountered asynchronous work while rendering synchronously.
+
+You (or the framework you're using) called [`render(...)`](svelte-server#render) with a component containing an `await` expression. Either `await` the result of `render` or wrap the `await` (or the component containing it) in a [`<svelte:boundary>`](svelte-boundary) with a `pending` snippet.
+
+## dynamic_element_invalid_tag
+
+> `<svelte:element this="%tag%">` is not a valid element name — the element will not be rendered
+
+The value passed to the `this` prop of `<svelte:element>` must be a valid HTML element, SVG element, MathML element, or custom element name. A value containing invalid characters (such as whitespace or special characters) was provided, which could be a security risk. Ensure only valid tag names are passed.
+
+## html_deprecated
+
+> The `html` property of server render results has been deprecated. Use `body` instead.
+
+## hydratable_clobbering
+
+> Attempted to set `hydratable` with key `%key%` twice with different values.
+>
+> %stack%
+
+This error occurs when using `hydratable` multiple times with the same key. To avoid this, you can:
+- Ensure all invocations with the same key result in the same value
+- Update the keys to make both instances unique
+
+```svelte
+<script>
+  import { hydratable } from 'svelte';
+
+  // which one should "win" and be serialized in the rendered response?
+  const one = hydratable('not-unique', () => 1);
+  const two = hydratable('not-unique', () => 2);
+</script>
+```
+
+## hydratable_serialization_failed
+
+> Failed to serialize `hydratable` data for key `%key%`.
+>
+> `hydratable` can serialize anything [`uneval` from `devalue`](https://npmjs.com/package/uneval) can, plus Promises.
+>
+> Cause:
+> %stack%
+
+## invalid_csp
+
+> `csp.nonce` was set while `csp.hash` was `true`. These options cannot be used simultaneously.
+
+## invalid_id_prefix
+
+> The `idPrefix` option cannot include `--`.
+
+## lifecycle_function_unavailable
+
+> `%name%(...)` is not available on the server
+
+Certain methods such as `mount` cannot be invoked while running in a server context. Avoid calling them eagerly, i.e. not during render.
+
+## server_context_required
+
+> Could not resolve `render` context.
+
+Certain functions such as `hydratable` cannot be invoked outside of a `render(...)` call, such as at the top level of a module.
diff --git a/packages/svelte/messages/server-errors/lifecycle.md b/packages/svelte/messages/server-errors/lifecycle.md
deleted file mode 100644
index c3acdedf3d..0000000000
--- a/packages/svelte/messages/server-errors/lifecycle.md
+++ /dev/null
@@ -1,5 +0,0 @@
-## lifecycle_function_unavailable
-
-> `%name%(...)` is not available on the server
-
-Certain methods such as `mount` cannot be invoked while running in a server context. Avoid calling them eagerly, i.e. not during render.
diff --git a/packages/svelte/messages/server-warnings/warnings.md b/packages/svelte/messages/server-warnings/warnings.md
new file mode 100644
index 0000000000..89e1c9d718
--- /dev/null
+++ b/packages/svelte/messages/server-warnings/warnings.md
@@ -0,0 +1,30 @@
+## unresolved_hydratable
+
+> A `hydratable` value with key `%key%` was created, but at least part of it was not used during the render.
+>
+> The `hydratable` was initialized in:
+> %stack%
+
+The most likely cause of this is creating a `hydratable` in the `script` block of your component and then `await`ing
+the result inside a `svelte:boundary` with a `pending` snippet:
+
+```svelte
+<script>
+  import { hydratable } from 'svelte';
+	import { getUser } from '$lib/get-user.js';
+
+	const user = hydratable('user', getUser);
+</script>
+
+<svelte:boundary>
+	<h1>{(await user).name}</h1>
+
+	{#snippet pending()}
+		<div>Loading...</div>
+	{/snippet}
+</svelte:boundary>
+```
+
+Consider inlining the `hydratable` call inside the boundary so that it's not called on the server.
+
+Note that this can also happen when a `hydratable` contains multiple promises and some but not all of them have been used.
diff --git a/packages/svelte/messages/shared-errors/errors.md b/packages/svelte/messages/shared-errors/errors.md
index 8b4c61303a..3ff474768e 100644
--- a/packages/svelte/messages/shared-errors/errors.md
+++ b/packages/svelte/messages/shared-errors/errors.md
@@ -1,3 +1,7 @@
+## experimental_async_required
+
+> Cannot use `%name%(...)` unless the `experimental.async` compiler option is `true`
+
 ## invalid_default_snippet
 
 > Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead
@@ -26,6 +30,14 @@ This error would be thrown in a setup like this:
 
 Here, `List.svelte` is using `{@render children(item)` which means it expects `Parent.svelte` to use snippets. Instead, `Parent.svelte` uses the deprecated `let:` directive. This combination of APIs is incompatible, hence the error.
 
+## invalid_snippet_arguments
+
+> A snippet function was passed invalid arguments. Snippets should only be instantiated via `{@render ...}`
+
+## invariant_violation
+
+> An invariant violation occurred, meaning Svelte's internal assumptions were flawed. This is a bug in Svelte, not your app — please open an issue at https://github.com/sveltejs/svelte, citing the following message: "%message%"
+
 ## lifecycle_outside_component
 
 > `%name%(...)` can only be used during component initialisation
@@ -48,6 +60,47 @@ Certain lifecycle methods can only be used during component initialisation. To f
 <button onclick={handleClick}>click me</button>
 ```
 
+## missing_context
+
+> Context was not set in a parent component
+
+The [`createContext()`](svelte#createContext) utility returns a `[get, set]` pair of functions. `get` will throw an error if `set` was not used to set the context in a parent component.
+
+## snippet_without_render_tag
+
+> Attempted to render a snippet without a `{@render}` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change `{snippet}` to `{@render snippet()}`.
+
+A component throwing this error will look something like this (`children` is not being rendered):
+
+```svelte
+<script>
+    let { children } = $props();
+</script>
+
+{children}
+```
+
+...or like this (a parent component is passing a snippet where a non-snippet value is expected):
+
+```svelte
+<!--- file: Parent.svelte --->
+<ChildComponent>
+  {#snippet label()}
+    <span>Hi!</span>
+  {/snippet}
+</ChildComponent>
+```
+
+```svelte
+<!--- file: Child.svelte --->
+<script>
+  let { label } = $props();
+</script>
+
+<!-- This component doesn't expect a snippet, but the parent provided one -->
+<p>{label}</p>
+```
+
 ## store_invalid_shape
 
 > `%name%` is not a store with a `subscribe` method
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 27e78e681e..b7e370dc7d 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,18 +2,19 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.14.0",
+  "version": "5.56.1",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
     "node": ">=18"
   },
   "files": [
+    "*.d.ts",
     "src",
     "!src/**/*.test.*",
+    "!src/**/*.d.ts",
     "types",
     "compiler",
-    "*.d.ts",
     "README.md"
   ],
   "module": "src/index-client.js",
@@ -21,6 +22,7 @@
   "exports": {
     ".": {
       "types": "./types/index.d.ts",
+      "worker": "./src/index-server.js",
       "browser": "./src/index-client.js",
       "default": "./src/index-server.js"
     },
@@ -32,6 +34,10 @@
       "types": "./types/index.d.ts",
       "default": "./src/animate/index.js"
     },
+    "./attachments": {
+      "types": "./types/index.d.ts",
+      "default": "./src/attachments/index.js"
+    },
     "./compiler": {
       "types": "./types/index.d.ts",
       "require": "./compiler/index.js",
@@ -53,14 +59,21 @@
     "./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"
     },
+    "./internal/flags/tracing": {
+      "default": "./src/internal/flags/tracing.js"
+    },
     "./internal/server": {
       "default": "./src/internal/server/index.js"
     },
     "./legacy": {
       "types": "./types/index.d.ts",
+      "worker": "./src/legacy/legacy-server.js",
       "browser": "./src/legacy/legacy-client.js",
       "default": "./src/legacy/legacy-server.js"
     },
@@ -70,6 +83,7 @@
     },
     "./reactivity": {
       "types": "./types/index.d.ts",
+      "worker": "./src/reactivity/index-server.js",
       "browser": "./src/reactivity/index-client.js",
       "default": "./src/reactivity/index-server.js"
     },
@@ -83,6 +97,7 @@
     },
     "./store": {
       "types": "./types/index.d.ts",
+      "worker": "./src/store/index-server.js",
       "browser": "./src/store/index-client.js",
       "default": "./src/store/index-server.js"
     },
@@ -95,6 +110,17 @@
       "default": "./src/events/index.js"
     }
   },
+  "imports": {
+    "#client": "./src/internal/client/types.d.ts",
+    "#client/constants": "./src/internal/client/constants.js",
+    "#compiler": {
+      "types": "./src/compiler/private.d.ts",
+      "default": "./src/compiler/index.js"
+    },
+    "#compiler/builders": "./src/compiler/utils/builders.js",
+    "#server": "./src/internal/server/types.d.ts",
+    "#shared": "./src/internal/shared/types.d.ts"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/sveltejs/svelte.git",
@@ -112,42 +138,50 @@
     "templating"
   ],
   "scripts": {
-    "build": "node scripts/process-messages && rollup -c && pnpm generate:types && node scripts/check-treeshakeability.js",
-    "dev": "node scripts/process-messages && rollup -cw",
+    "build": "rollup -c && pnpm generate && node scripts/check-treeshakeability.js",
+    "dev": "node scripts/process-messages -w & rollup -cw",
     "check": "tsc --project tsconfig.runtime.json && tsc && cd ./tests/types && tsc",
+    "check:tsgo": "tsgo --project tsconfig.runtime.json --skipLibCheck && tsgo --skipLibCheck",
     "check:watch": "tsc --watch",
+    "generate": "node scripts/process-messages && node ./scripts/generate-types.js && pnpm generate:browser-support",
     "generate:version": "node ./scripts/generate-version.js",
     "generate:types": "node ./scripts/generate-types.js && tsc -p tsconfig.generated.json",
+    "generate:browser-support": "node ./scripts/generate-browser-support.ts",
     "prepublishOnly": "pnpm build",
     "knip": "pnpm dlx knip"
   },
   "devDependencies": {
     "@jridgewell/trace-mapping": "^0.3.25",
-    "@playwright/test": "^1.46.1",
+    "@playwright/test": "^1.60.0",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-virtual": "^3.0.2",
     "@types/aria-query": "^5.0.4",
     "@types/node": "^20.11.5",
-    "dts-buddy": "^0.5.3",
-    "esbuild": "^0.21.5",
-    "rollup": "^4.22.4",
+    "baseline-browser-mapping": "^2.10.32",
+    "dts-buddy": "^0.5.5",
+    "esbuild": "^0.25.10",
+    "rollup": "^4.59.0",
     "source-map": "^0.7.4",
-    "tiny-glob": "^0.2.9",
+    "tinyglobby": "^0.2.12",
     "typescript": "^5.5.4",
-    "vitest": "^2.0.5"
+    "vitest": "^4.1.7",
+    "web-features": "^3.29.0"
   },
   "dependencies": {
-    "@ampproject/remapping": "^2.3.0",
+    "@jridgewell/remapping": "^2.3.4",
     "@jridgewell/sourcemap-codec": "^1.5.0",
+    "@sveltejs/acorn-typescript": "^1.0.10",
     "@types/estree": "^1.0.5",
+    "@types/trusted-types": "^2.0.7",
     "acorn": "^8.12.1",
-    "acorn-typescript": "^1.4.13",
-    "aria-query": "^5.3.1",
+    "aria-query": "5.3.1",
     "axobject-query": "^4.1.0",
+    "clsx": "^2.1.1",
+    "devalue": "^5.8.1",
     "esm-env": "^1.2.1",
-    "esrap": "^1.2.3",
+    "esrap": "^2.2.9",
     "is-reference": "^3.0.3",
     "locate-character": "^3.0.0",
     "magic-string": "^0.30.11",
diff --git a/packages/svelte/scripts/browser-support.detector.js b/packages/svelte/scripts/browser-support.detector.js
new file mode 100644
index 0000000000..17cdfc55f7
--- /dev/null
+++ b/packages/svelte/scripts/browser-support.detector.js
@@ -0,0 +1,417 @@
+import ts from 'typescript';
+import { features } from 'web-features';
+
+/**
+ * Maps compat-key suffixes under `javascript.operators` and
+ * `javascript.statements` (and a few other `javascript.*` subtrees) to
+ * detection callbacks. The callback receives a TS AST node and returns
+ * true if that node represents the operator or statement.
+ *
+ * @type {Record<string, (node: ts.Node) => boolean>}
+ */
+const SYNTAX_PREDICATES = {
+	nullish_coalescing: (node) =>
+		ts.isBinaryExpression(node) && node.operatorToken.kind === ts.SyntaxKind.QuestionQuestionToken,
+	nullish_coalescing_assignment: (node) =>
+		ts.isBinaryExpression(node) &&
+		node.operatorToken.kind === ts.SyntaxKind.QuestionQuestionEqualsToken,
+	logical_or_assignment: (node) =>
+		ts.isBinaryExpression(node) && node.operatorToken.kind === ts.SyntaxKind.BarBarEqualsToken,
+	logical_and_assignment: (node) =>
+		ts.isBinaryExpression(node) &&
+		node.operatorToken.kind === ts.SyntaxKind.AmpersandAmpersandEqualsToken,
+	optional_chaining: (node) =>
+		(ts.isPropertyAccessExpression(node) ||
+			ts.isElementAccessExpression(node) ||
+			ts.isCallExpression(node)) &&
+		node.questionDotToken !== undefined,
+	spread: (node) => ts.isSpreadElement(node) || ts.isSpreadAssignment(node),
+	destructuring: (node) => ts.isObjectBindingPattern(node) || ts.isArrayBindingPattern(node),
+	arrow_functions: (node) => ts.isArrowFunction(node),
+	try_catch_optional_binding: (node) =>
+		ts.isCatchClause(node) && node.variableDeclaration === undefined,
+	async_iteration: (node) => ts.isForOfStatement(node) && node.awaitModifier !== undefined,
+	for_await: (node) => ts.isForOfStatement(node) && node.awaitModifier !== undefined,
+	private_class_fields: (node) => ts.isPrivateIdentifier(node),
+	async_generator_function: (node) =>
+		(ts.isFunctionDeclaration(node) ||
+			ts.isFunctionExpression(node) ||
+			ts.isMethodDeclaration(node)) &&
+		node.asteriskToken !== undefined &&
+		(node.modifiers?.some((m) => m.kind === ts.SyntaxKind.AsyncKeyword) ?? false),
+	generator_function: (node) =>
+		(ts.isFunctionDeclaration(node) ||
+			ts.isFunctionExpression(node) ||
+			ts.isMethodDeclaration(node)) &&
+		node.asteriskToken !== undefined &&
+		!(node.modifiers?.some((m) => m.kind === ts.SyntaxKind.AsyncKeyword) ?? false),
+	async_function: (node) =>
+		(ts.isFunctionDeclaration(node) ||
+			ts.isFunctionExpression(node) ||
+			ts.isArrowFunction(node) ||
+			ts.isMethodDeclaration(node)) &&
+		(node.modifiers?.some((m) => m.kind === ts.SyntaxKind.AsyncKeyword) ?? false) &&
+		node.asteriskToken === undefined,
+	classes: (node) => ts.isClassDeclaration(node) || ts.isClassExpression(node),
+	let_const: (node) =>
+		ts.isVariableDeclarationList(node) &&
+		((node.flags & ts.NodeFlags.Let) !== 0 || (node.flags & ts.NodeFlags.Const) !== 0),
+	template_literals: (node) =>
+		ts.isTemplateExpression(node) || ts.isNoSubstitutionTemplateLiteral(node)
+};
+
+/**
+ * Walk `web-features` once and partition every `compat_features` path
+ * into the lookup tables the AST walker uses.
+ */
+function build_detection_maps() {
+	/** @type {Map<string, string>} identifier name → feature_id */
+	const globals = new Map();
+	/** @type {Map<string, Map<string, string>>} type → member → feature_id */
+	const members = new Map();
+	/** @type {Map<string, string>} string-literal value → feature_id */
+	const string_literals = new Map();
+	/** @type {Array<{ predicate: (n: ts.Node) => boolean, feature_id: string }>} */
+	const syntax_predicates = [];
+
+	const add_member = (
+		/** @type {string} */ type,
+		/** @type {string} */ member,
+		/** @type {string} */ feature_id
+	) => {
+		let by_member = members.get(type);
+		if (!by_member) {
+			by_member = new Map();
+			members.set(type, by_member);
+		}
+		// Only set if not already present — the first feature claiming a
+		// (type, member) pair wins. (Multiple features can map to the same
+		// pair via duplicated compat paths; we just need any.)
+		if (!by_member.has(member)) by_member.set(member, feature_id);
+	};
+
+	for (const [feature_id, feature] of Object.entries(features)) {
+		if (!('compat_features' in feature) || !feature.compat_features) continue;
+		for (const path of feature.compat_features) {
+			const parts = path.split('.');
+
+			// `api.X` → global identifier (constructor or function), e.g.
+			// `api.ResizeObserver`, `api.structuredClone`.
+			if (parts[0] === 'api' && parts.length === 2) {
+				globals.set(parts[1], feature_id);
+				continue;
+			}
+
+			// `api.X.Y` → member access on type X. E.g.
+			// `api.HTMLElement.inert`, `api.ResizeObserverEntry.contentBoxSize`.
+			if (parts[0] === 'api' && parts.length === 3) {
+				add_member(parts[1], parts[2], feature_id);
+				continue;
+			}
+
+			// `javascript.builtins.X` → global like Promise, Symbol, Proxy.
+			if (parts[0] === 'javascript' && parts[1] === 'builtins' && parts.length === 3) {
+				globals.set(parts[2], feature_id);
+				continue;
+			}
+
+			// `javascript.builtins.X.Y` → method/property on type X.
+			// We also accept the `ArrayConstructor`-style mapping for static
+			// methods: when the AST walker sees `Array.from(...)`, the
+			// receiver type's symbol name is `ArrayConstructor`, not `Array`.
+			if (parts[0] === 'javascript' && parts[1] === 'builtins' && parts.length === 4) {
+				add_member(parts[2], parts[3], feature_id);
+				add_member(`${parts[2]}Constructor`, parts[3], feature_id);
+				continue;
+			}
+
+			// `javascript.*` syntax: try the second segment first (covers
+			// `javascript.operators.X` and `javascript.statements.X`), then
+			// the last segment (covers `javascript.classes.private_class_fields`
+			// and similar).
+			if (parts[0] === 'javascript' && parts.length >= 3) {
+				const candidates = [parts[2], parts[parts.length - 1]];
+				for (const key of candidates) {
+					if (Object.hasOwn(SYNTAX_PREDICATES, key)) {
+						syntax_predicates.push({ predicate: SYNTAX_PREDICATES[key], feature_id });
+						break;
+					}
+				}
+				continue;
+			}
+		}
+	}
+
+	return { globals, members, string_literals, syntax_predicates };
+}
+
+const MAPS = build_detection_maps();
+
+/**
+ * Versions and friendly names for synthetic feature IDs registered via
+ * `register_extra_rules` — APIs the type-aware walker can see but that
+ * `web-features` doesn't (yet) catalogue. `versions_for_feature` consults
+ * this map before falling back to `web-features` lookups.
+ *
+ * @type {Map<string, { name: string, versions: Record<string, string | null>, baseline_year: number | null }>}
+ */
+const EXTRA_FEATURE_INFO = new Map();
+
+/**
+ * Register additional detection rules for APIs the `web-features` dataset
+ * doesn't track yet. Two rule shapes are accepted:
+ *
+ *   - **Member access**: `{ receiver_type, member, ... }` — flags
+ *     `expr.member` when `expr`'s type resolves to `receiver_type`.
+ *     Equivalent to a `api.X.Y` rule auto-derived from web-features.
+ *
+ *   - **String literal**: `{ string_literal, ... }` — flags any
+ *     occurrence of the literal value in source. Used for API options
+ *     that are string-typed (e.g. `{ box: 'device-pixel-content-box' }`).
+ *     The walker can be tightened later with a contextual-type check if
+ *     false positives ever surface; for now an exact match is enough
+ *     (these strings are too specific to occur incidentally).
+ *
+ * Each rule contributes its `feature_id`, per-browser versions,
+ * baseline year, and display name to the shared lookup tables.
+ *
+ * @param {Array<{
+ *   feature_id: string,
+ *   name: string,
+ *   baseline_year: number,
+ *   versions: Record<string, string | null>,
+ *   receiver_type?: string,
+ *   member?: string,
+ *   string_literal?: string
+ * }>} rules
+ */
+export function register_extra_rules(rules) {
+	for (const rule of rules) {
+		if (rule.receiver_type && rule.member) {
+			let by_member = MAPS.members.get(rule.receiver_type);
+			if (!by_member) {
+				by_member = new Map();
+				MAPS.members.set(rule.receiver_type, by_member);
+			}
+			// Don't overwrite an existing web-features rule; that's canonical.
+			if (!by_member.has(rule.member)) {
+				by_member.set(rule.member, rule.feature_id);
+			}
+		} else if (rule.string_literal) {
+			if (!MAPS.string_literals.has(rule.string_literal)) {
+				MAPS.string_literals.set(rule.string_literal, rule.feature_id);
+			}
+		}
+		EXTRA_FEATURE_INFO.set(rule.feature_id, {
+			name: rule.name,
+			baseline_year: rule.baseline_year,
+			versions: rule.versions
+		});
+	}
+}
+
+/**
+ * Compile bundle files into a single `ts.Program` so type-checking is
+ * amortised across all of them.
+ *
+ * @param {string[]} files
+ */
+function build_program(files) {
+	const program = ts.createProgram(files, {
+		allowJs: true,
+		checkJs: false,
+		target: ts.ScriptTarget.ESNext,
+		module: ts.ModuleKind.ESNext,
+		moduleResolution: ts.ModuleResolutionKind.Bundler,
+		lib: ['lib.esnext.d.ts', 'lib.dom.d.ts', 'lib.dom.iterable.d.ts'],
+		strict: false,
+		noEmit: true,
+		skipLibCheck: true,
+		isolatedModules: true,
+		noErrorTruncation: true
+	});
+	const checker = program.getTypeChecker();
+	return { program, checker };
+}
+
+/**
+ * Collect the names of a type and its base types so a `member` lookup
+ * keyed on (say) `HTMLElement` matches a receiver typed as
+ * `HTMLDivElement`. Also includes the apparent type to catch primitives
+ * (`'foo'` apparent-types to `String`).
+ *
+ * @param {ts.Type} type
+ * @param {ts.TypeChecker} checker
+ */
+function get_type_names(type, checker) {
+	const names = new Set();
+	const constituents = type.isUnionOrIntersection() ? type.types : [type];
+	for (const t of constituents) {
+		const symbol = t.getSymbol() ?? t.aliasSymbol;
+		if (symbol) names.add(symbol.getName());
+		for (const base of t.getBaseTypes?.() ?? []) {
+			const base_symbol = base.getSymbol() ?? base.aliasSymbol;
+			if (base_symbol) names.add(base_symbol.getName());
+		}
+		const apparent = checker.getApparentType(t);
+		if (apparent && apparent !== t) {
+			const apparent_symbol = apparent.getSymbol() ?? apparent.aliasSymbol;
+			if (apparent_symbol) names.add(apparent_symbol.getName());
+		}
+	}
+	return names;
+}
+
+/**
+ * Cheap test for whether a symbol refers to a global binding (declared
+ * in a lib.d.ts or ambient module) rather than a user-defined local.
+ *
+ * @param {ts.Symbol | undefined} symbol
+ */
+function is_global_binding(symbol) {
+	if (!symbol) return true; // unresolved → assume global
+	const declarations = symbol.getDeclarations() ?? [];
+	if (declarations.length === 0) return true;
+	for (const decl of declarations) {
+		const file_name = decl.getSourceFile().fileName;
+		if (file_name.includes('/lib.') && file_name.endsWith('.d.ts')) return true;
+	}
+	return false;
+}
+
+/**
+ * Walk a TS source file emitting feature IDs as they're discovered.
+ *
+ * @param {ts.SourceFile} source
+ * @param {ts.TypeChecker | null} checker
+ *   When `null`, type-aware checks (member access) are skipped. Used for
+ *   the compiler-output fixtures which are parsed without a Program.
+ * @param {(feature_id: string) => void} emit
+ */
+function walk_source(source, checker, emit) {
+	/** @param {ts.Node} node */
+	function visit(node) {
+		// Syntax predicates run regardless of whether we have a checker.
+		for (const { predicate, feature_id } of MAPS.syntax_predicates) {
+			if (predicate(node)) emit(feature_id);
+		}
+
+		// Global identifier detection.
+		if (
+			ts.isIdentifier(node) &&
+			!(ts.isPropertyAccessExpression(node.parent) && node.parent.name === node) &&
+			!ts.isPropertyAssignment(node.parent) &&
+			!ts.isMethodDeclaration(node.parent) &&
+			!ts.isPropertySignature(node.parent)
+		) {
+			const feature_id = MAPS.globals.get(node.text);
+			if (feature_id) {
+				if (!checker || is_global_binding(checker.getSymbolAtLocation(node))) {
+					emit(feature_id);
+				}
+			}
+		}
+
+		// String-literal detection. The walker matches by value alone;
+		// false positives are theoretically possible but the literal
+		// values we care about (e.g. `'device-pixel-content-box'`) are
+		// distinctive enough that one hasn't been observed.
+		if (ts.isStringLiteral(node) || ts.isNoSubstitutionTemplateLiteral(node)) {
+			const feature_id = MAPS.string_literals.get(node.text);
+			if (feature_id) emit(feature_id);
+		}
+
+		// Member access detection (requires the checker).
+		if (checker && ts.isPropertyAccessExpression(node)) {
+			const member_name = node.name.text;
+			const receiver_type = checker.getTypeAtLocation(node.expression);
+			const type_names = get_type_names(receiver_type, checker);
+			for (const type_name of type_names) {
+				const by_member = MAPS.members.get(type_name);
+				if (!by_member) continue;
+				const feature_id = by_member.get(member_name);
+				if (feature_id) {
+					emit(feature_id);
+					break;
+				}
+			}
+		}
+
+		ts.forEachChild(node, visit);
+	}
+
+	visit(source);
+}
+
+/**
+ * Detect features used in a set of bundle files. Returns the union of
+ * web-features IDs flagged across all files.
+ *
+ * @param {string[]} bundle_files Absolute paths to JS/TS files.
+ * @returns {Set<string>}
+ */
+export function detect_features(bundle_files) {
+	const { program, checker } = build_program(bundle_files);
+	const flagged = new Set();
+	for (const file of bundle_files) {
+		const source = program.getSourceFile(file);
+		if (!source) continue;
+		walk_source(source, checker, (id) => flagged.add(id));
+	}
+	return flagged;
+}
+
+/**
+ * Detect features used in a single in-memory source string. No type
+ * checker (so member-based rules silently skip) — useful for the
+ * compiler-output fixtures, where syntax-level detection is sufficient.
+ *
+ * @param {string} source_text
+ * @returns {Set<string>}
+ */
+export function detect_features_in_text(source_text) {
+	const source = ts.createSourceFile(
+		'fixture.js',
+		source_text,
+		ts.ScriptTarget.ESNext,
+		true,
+		ts.ScriptKind.JS
+	);
+	const flagged = new Set();
+	walk_source(source, null, (id) => flagged.add(id));
+	return flagged;
+}
+
+/**
+ * Per-browser minimum versions for a feature ID. Consults
+ * supplemental rules first (from `register_extra_rules`), then falls
+ * back to `web-features`. Returns null when neither has data.
+ *
+ * @param {string} feature_id
+ */
+export function versions_for_feature(feature_id) {
+	const extra = EXTRA_FEATURE_INFO.get(feature_id);
+	if (extra) return extra.versions;
+	const feature = features[feature_id];
+	if (!feature || !('status' in feature)) return null;
+	return /** @type {Record<string, string> | null} */ (
+		/** @type {unknown} */ (feature.status.support)
+	);
+}
+
+/**
+ * Baseline year for a feature. Returns `null` for features without a
+ * Baseline date (limited availability, supplemental rules without a
+ * year, or absent from the dataset).
+ *
+ * @param {string} feature_id
+ */
+export function baseline_year_for_feature(feature_id) {
+	const extra = EXTRA_FEATURE_INFO.get(feature_id);
+	if (extra) return extra.baseline_year;
+	const feature = features[feature_id];
+	if (!feature || !('status' in feature)) return null;
+	const status = /** @type {{ baseline_low_date?: string }} */ (feature.status);
+	if (!status.baseline_low_date) return null;
+	return Number(status.baseline_low_date.slice(0, 4));
+}
diff --git a/packages/svelte/scripts/check-treeshakeability.js b/packages/svelte/scripts/check-treeshakeability.js
index 1b50111b87..e883496fe2 100644
--- a/packages/svelte/scripts/check-treeshakeability.js
+++ b/packages/svelte/scripts/check-treeshakeability.js
@@ -58,6 +58,7 @@ for (const key in pkg.exports) {
 	if (key === './internal') continue;
 	if (key === './internal/disclose-version') continue;
 	if (key === './internal/flags/legacy') continue;
+	if (key === './internal/flags/tracing') continue;
 
 	for (const type of ['browser', 'default']) {
 		if (!pkg.exports[key][type]) continue;
@@ -91,6 +92,7 @@ const bundle = await bundle_code(
 </script>
 
 <svelte:head><title>hi</title></svelte:head>
+<input bind:value={foo} />
 
 <a href={foo} class={foo}>a</a>
 <a {...foo}>a</a>
@@ -116,27 +118,40 @@ const bundle = await bundle_code(
 	).js.code
 );
 
-if (!bundle.includes('hydrate_node') && !bundle.includes('hydrate_next')) {
-	// eslint-disable-next-line no-console
-	console.error(`✅ Hydration code treeshakeable`);
-} else {
-	failed = true;
-	// eslint-disable-next-line no-console
-	console.error(`❌ Hydration code not treeshakeable`);
-}
+/**
+ * @param {string} case_name
+ * @param {string[]} strings
+ */
+function check_bundle(case_name, ...strings) {
+	for (const string of strings) {
+		const index = bundle.indexOf(string);
+		if (index >= 0) {
+			// eslint-disable-next-line no-console
+			console.error(`❌ ${case_name} not treeshakeable`);
+			failed = true;
 
-if (!bundle.includes('component_context.l')) {
-	// eslint-disable-next-line no-console
-	console.error(`✅ Legacy code treeshakeable`);
-} else {
-	failed = true;
+			let lines = bundle.slice(index - 500, index + 500).split('\n');
+			const target_line = lines.findIndex((line) => line.includes(string));
+			// mark the failed line
+			lines = lines
+				.map((line, i) => (i === target_line ? `> ${line}` : `| ${line}`))
+				.slice(target_line - 5, target_line + 6);
+			// eslint-disable-next-line no-console
+			console.error('The first failed line:\n' + lines.join('\n'));
+			return;
+		}
+	}
 	// eslint-disable-next-line no-console
-	console.error(`❌ Legacy code not treeshakeable`);
+	console.error(`✅ ${case_name} treeshakeable`);
 }
 
+check_bundle('Hydration code', 'hydrate_node', 'hydrate_next');
+check_bundle('Legacy code', 'component_context.l');
+check_bundle('$inspect.trace', `'CreatedAt'`);
+
 if (failed) {
 	// eslint-disable-next-line no-console
-	console.error(bundle);
+	console.error('Full bundle at', path.resolve('scripts/_bundle.js'));
 	fs.writeFileSync('scripts/_bundle.js', bundle);
 }
 
diff --git a/packages/svelte/scripts/generate-browser-support.ts b/packages/svelte/scripts/generate-browser-support.ts
new file mode 100644
index 0000000000..0a35a29413
--- /dev/null
+++ b/packages/svelte/scripts/generate-browser-support.ts
@@ -0,0 +1,877 @@
+/* eslint-disable no-console */
+// Regenerates `documentation/docs/07-misc/05-browser-support.md`.
+//
+// Pipeline:
+//   1. Bundle each runtime entry point with rollup using production export
+//      conditions, then walk the resulting JS with TypeScript's compiler
+//      API + TypeChecker. The walker (see `browser-support.detector.js`)
+//      flags any web-features ID the runtime references.
+//   2. Verify each entry in `BEHAVIORAL_IGNORE` is still flagged by the
+//      detector — if not, the entry can be removed.
+//   3. Enumerate every user-facing feature (each `bind:*`, every public
+//      subpackage export, every rune from the compiler's `RUNES` array,
+//      and the handful of directives that need their own fixtures). For
+//      each: compile, bundle, walk. If the bundle requires browser
+//      versions newer than the runtime floor, emit a row in the
+//      conditional-features table. Blind-spot regexes pick up APIs the
+//      AST walker can't see (string-literal constructor options,
+//      `getComputedStyle(...).zoom` reads).
+//   4. Translate floors into concrete browser versions via `web-features`
+//      data (exact per-feature versions), falling back to
+//      `baseline-browser-mapping` for year-only resolution.
+
+import fs from 'node:fs';
+import path from 'node:path';
+import process from 'node:process';
+import { fileURLToPath } from 'node:url';
+import { rollup, type OutputChunk } from 'rollup';
+import virtual from '@rollup/plugin-virtual';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import { getCompatibleVersions } from 'baseline-browser-mapping';
+import {
+	detect_features,
+	detect_features_in_text,
+	versions_for_feature,
+	baseline_year_for_feature,
+	register_extra_rules
+} from './browser-support.detector.js';
+import { binding_properties } from '../src/compiler/phases/bindings.js';
+import { RUNES } from '../src/utils.js';
+import { compile as svelte_compile } from '../src/compiler/index.js';
+
+type BindingProperty = import('../src/compiler/phases/bindings.js').BindingProperty;
+type PackageExport = string | { browser?: string; default?: string };
+type CompilerFixture = { filename: string; code: string };
+type Feature = { name: string; source: string; kind: 'svelte' | 'js' };
+type BrowserVersions = Record<string, string | null>;
+type RuntimeFloor = number | 'newly';
+type ConditionalRow = {
+	name: string;
+	doc_link: string | null;
+	versions: BrowserVersions;
+	baseline_year: RuntimeFloor;
+};
+
+const doc_links: Record<string, string | null> = {
+	'`$state.snapshot`': '/docs/svelte/$state#$state.snapshot',
+	'`bind:devicePixelContentBoxSize`': '/docs/svelte/bind#Dimensions',
+	'`flip` from `svelte/animate`': '/docs/svelte/svelte-animate#flip'
+};
+
+// Supplemental detection rules for APIs `web-features` doesn't track
+// yet. Each rule is checked with full TS type-aware precision — the
+// only reason it lives here instead of being auto-derived is that no
+// compat key in `web-features` covers the API.
+register_extra_rules([
+	{
+		// `getComputedStyle(current).zoom` walk in `svelte/animate`'s
+		// `flip` fallback path. Firefox didn't expose `.zoom` on
+		// `CSSStyleDeclaration` until v126 (May 2024) — pre-126 the read
+		// yields an empty string, breaking the animation math. No entry
+		// for it exists in `web-features` (CSS `zoom` is an IDL accessor
+		// without its own Baseline feature record).
+		receiver_type: 'CSSStyleDeclaration',
+		member: 'zoom',
+		feature_id: 'extra:css-zoom-read',
+		name: 'CSS zoom property reads (getComputedStyle(...).zoom)',
+		baseline_year: 2024,
+		versions: { firefox: '126' }
+	},
+	{
+		// `box: 'device-pixel-content-box'` in `bind_resize_observer`
+		// (size.js). The TS DOM lib declares the option value as part of
+		// the `ResizeObserverBoxOptions` union — we could check the
+		// contextual type, but matching the literal value is enough since
+		// the string is too specific to occur incidentally. Per MDN BCD:
+		//   - constructor option: Chrome 84, Firefox 93, Safari 15.4
+		//   - `ResizeObserverEntry.devicePixelContentBoxSize`: Safari NOT
+		//     SUPPORTED (`version_added: false`)
+		// Safari therefore silently accepts the option from 15.4 onwards
+		// but never exposes the matching entry property, so the binding
+		// reads `undefined` on any Safari.
+		string_literal: 'device-pixel-content-box',
+		feature_id: 'extra:device-pixel-content-box',
+		name: 'ResizeObserver `box: device-pixel-content-box` option + `entry.devicePixelContentBoxSize`',
+		baseline_year: 2023,
+		versions: {
+			chrome: '84',
+			edge: '84',
+			firefox: '93',
+			safari: null,
+			safari_ios: null
+		}
+	}
+]);
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const pkg_dir = path.resolve(__dirname, '..');
+const repo_root = path.resolve(pkg_dir, '..', '..');
+const docs_dir = path.join(repo_root, 'documentation/docs/07-misc/.generated');
+const snapshot_dir = path.join(pkg_dir, 'tests/snapshot/samples');
+const tmp_dir = path.join(__dirname, '_baseline');
+
+const pkg = JSON.parse(fs.readFileSync(path.join(pkg_dir, 'package.json'), 'utf-8')) as {
+	exports: Record<string, PackageExport>;
+};
+
+/**
+ * Suppressions that should NEVER affect the floor regardless of whether
+ * the runtime currently uses the API. Two reasons an entry belongs here:
+ *
+ *   - The `web-features` dataset misclassifies the API (e.g.
+ *     `devicepixelratio` is marked Baseline `false` because Safari is
+ *     missing from its `support` map, but the property has shipped in
+ *     every Safari for over a decade).
+ *   - Svelte feature-detects the API at runtime with `?.` and degrades
+ *     gracefully when it's unavailable. Example: `trusted-types` in
+ *     `src/internal/client/dom/reconciler.js`.
+ *
+ * These are exempt from the staleness check.
+ */
+const SAFE_TO_IGNORE = new Set(['devicepixelratio', 'trusted-types']);
+
+/**
+ * Suppressions for features that DO live in the runtime but are reached
+ * only via a specific code path documented in the per-feature table on
+ * the docs page.
+ */
+const BEHAVIORAL_IGNORE = new Set([
+	'structured-clone',
+	'extra:css-zoom-read',
+	'extra:device-pixel-content-box'
+]);
+
+/** Aggregate ignore set — used for the headline floor. */
+const AGGREGATE_IGNORE = new Set([...SAFE_TO_IGNORE, ...BEHAVIORAL_IGNORE]);
+
+/**
+ * Subpaths in `pkg.exports` whose runtime is Node-only. Can't be derived
+ * from the exports map alone — `./compiler` has a `require:` field that
+ * hints at CJS, but `./server` and `./internal/server` are plain `default`
+ * entries indistinguishable from a browser module.
+ */
+const NODE_ONLY_EXPORTS = new Set(['./compiler', './server', './internal/server']);
+
+/**
+ * Every subpath in `pkg.exports` that ships browser JS. Type-only entries
+ * (`./action`, `./elements`) and the `./package.json` re-export filter out
+ * naturally on the `.js` check; only Node-only subpaths need an explicit
+ * exception, so new browser exports are picked up automatically.
+ */
+function browser_subpaths(): string[] {
+	const subpaths: string[] = [];
+	for (const [subpath, conditions] of Object.entries(pkg.exports)) {
+		if (NODE_ONLY_EXPORTS.has(subpath)) continue;
+		if (typeof conditions !== 'object' || conditions === null) continue;
+		const file = conditions.browser ?? conditions.default;
+		if (typeof file !== 'string' || !file.endsWith('.js')) continue;
+		subpaths.push(subpath);
+	}
+	return subpaths;
+}
+
+/**
+ * `.` → `svelte`, `./animate` → `svelte/animate`, etc.
+ */
+function importee_for(subpath: string): string {
+	return subpath === '.' ? 'svelte' : `svelte${subpath.slice(1)}`;
+}
+
+/**
+ * True if a subpath represents a public, user-facing subpackage whose
+ * named exports should each get their own per-feature fixture. Excludes
+ * the main entry (covered by the aggregate scan), the `./legacy` shim,
+ * and everything under `./internal/`.
+ */
+function is_public_subpackage(subpath: string): boolean {
+	return subpath !== '.' && subpath !== './legacy' && !subpath.startsWith('./internal');
+}
+
+/**
+ * For each public subpackage, dynamically import the module and return
+ * its named exports. Driven entirely by `pkg.exports`, so a new
+ * subpackage is picked up the next time the script runs.
+ */
+async function enumerate_subpackage_exports(): Promise<Record<string, string[]>> {
+	const result: Record<string, string[]> = {};
+	for (const subpath of browser_subpaths()) {
+		if (!is_public_subpackage(subpath)) continue;
+		const module_id = importee_for(subpath);
+		try {
+			const ns = await import(module_id);
+			const names = Object.keys(ns)
+				.filter((k) => k !== 'default')
+				.sort();
+			if (names.length > 0) result[module_id] = names;
+		} catch (err) {
+			const message = err instanceof Error ? err.message : String(err);
+			console.warn(`  (could not enumerate ${module_id}: ${message.split('\n')[0]})`);
+		}
+	}
+	return result;
+}
+
+const rune_fixtures: Record<(typeof RUNES)[number], string> = {
+	$state: `<script>let v = $state(0); console.log(v);</script>`,
+	'$state.raw': `<script>let v = $state.raw({}); console.log(v);</script>`,
+	'$state.eager': `<script>let v = $state.eager(0); console.log(v);</script>`,
+	'$state.snapshot': `<script>const v = $state({}); const snap = $state.snapshot(v); console.log(snap);</script>`,
+	$derived: `<script>let a = $state(0); let d = $derived(a + 1); console.log(d);</script>`,
+	'$derived.by': `<script>let a = $state(0); let d = $derived.by(() => a + 1); console.log(d);</script>`,
+	$props: `<script>let { x } = $props(); console.log(x);</script>`,
+	'$props.id': `<script>const id = $props.id(); console.log(id);</script>`,
+	$bindable: `<script>let { v = $bindable() } = $props(); console.log(v);</script>`,
+	$effect: `<script>$effect(() => { console.log('e'); });</script>`,
+	'$effect.pre': `<script>$effect.pre(() => { console.log('p'); });</script>`,
+	'$effect.tracking': `<script>$effect(() => { console.log($effect.tracking()); });</script>`,
+	'$effect.root': `<script>const stop = $effect.root(() => () => {}); stop();</script>`,
+	'$effect.pending': `<script>$effect(() => { console.log($effect.pending()); });</script>`,
+	$inspect: `<script>let v = $state(0); $inspect(v);</script>`,
+	'$inspect().with': `<script>let v = $state(0); $inspect(v).with(() => {});</script>`,
+	'$inspect.trace': `<script>$effect(() => { $inspect.trace(); });</script>`,
+	$host: `<svelte:options customElement="x-y" />\n<script>const h = $host(); console.log(h);</script>`
+};
+
+function rune_fixture(rune: (typeof RUNES)[number]): string {
+	if (!Object.hasOwn(rune_fixtures, rune)) {
+		throw new Error(`Fixture missing for ${rune}`);
+	}
+
+	return rune_fixtures[rune];
+}
+
+/**
+ * Compiled-fixture sources for directives. Bindings are covered by the
+ * `binding_properties` enumeration; transitions, animate, actions, and
+ * `@attach` need explicit fixtures because they require accompanying
+ * imports or surrounding markup.
+ */
+const TESTED_DIRECTIVES = [
+	{
+		name: '`transition:` / `in:` / `out:`',
+		source: `<script>import { fade } from 'svelte/transition'; let show = $state(false);</script>{#if show}<div transition:fade></div>{/if}`
+	},
+	{
+		name: '`animate:`',
+		source: `<script>const flip = () => {}; let items = $state([1,2,3]);</script>{#each items as item (item)}<div animate:flip>{item}</div>{/each}`
+	},
+	{
+		name: '`use:` actions',
+		source: `<script>function action(node){return {destroy(){}}}</script><div use:action></div>`
+	},
+	{
+		name: '`@attach`',
+		source: `<script>const attachment = (node) => () => {};</script><div {@attach attachment}></div>`
+	},
+	{
+		name: '`{@html ...}`',
+		source: `<script>let html = $state('<b>x</b>');</script>{@html html}`
+	},
+	{
+		name: 'Custom elements (`<svelte:options customElement>`)',
+		source: `<svelte:options customElement="my-el" />\n<div></div>`
+	}
+];
+
+/**
+ * Filesystem-safe identifier for an importee like `svelte/internal/client`.
+ */
+function safe_name(importee: string): string {
+	return importee.replace(/[^a-z0-9]+/gi, '_');
+}
+
+/**
+ * Bundle an entry the way users receive it, so we scan the same code the
+ * browser does. Mirrors `check-treeshakeability.js`.
+ *
+ * `entry_code` is virtual module source: typically `export * from
+ * 'svelte/...'` for a runtime entry, or compiled fixture JS for a per-feature
+ * scan. `silent` suppresses rollup's circular-dependency warnings — used for
+ * fixture bundles where they're known and noisy.
+ */
+async function bundle(entry_code: string, options: { silent?: boolean } = {}): Promise<string> {
+	const built = await rollup({
+		input: '__entry__',
+		plugins: [
+			virtual({ __entry__: entry_code }),
+			{
+				name: 'resolve-svelte',
+				resolveId(id: string) {
+					if (id.startsWith('svelte')) {
+						const entry = pkg.exports[id.replace('svelte', '.')];
+						if (!entry) return;
+						if (typeof entry === 'string') return path.resolve(pkg_dir, entry);
+						const file = entry.browser ?? entry.default;
+						if (file) return path.resolve(pkg_dir, file);
+					}
+				}
+			},
+			nodeResolve({ exportConditions: ['production', 'import', 'browser', 'default'] })
+		],
+		// Treat optional peers / Node-only branches as external so we only scan
+		// code that actually runs in the browser.
+		external: ['esm-env'],
+		onwarn: options.silent
+			? () => {}
+			: (warning, handler) => {
+					if (warning.code === 'CIRCULAR_DEPENDENCY') return;
+					handler(warning);
+				}
+	});
+
+	const { output } = await built.generate({ format: 'esm' });
+	await built.close();
+
+	return output
+		.filter((chunk): chunk is OutputChunk => chunk.type === 'chunk')
+		.map((chunk) => chunk.code)
+		.join('\n');
+}
+
+/**
+ * Read every compiler-emitted client file from the snapshot tests. These
+ * fixtures cover the full range of patterns the compiler emits — bindings,
+ * transitions, `<svelte:element>`, async derived, hydration markers, etc.
+ */
+function load_compiler_output_fixtures(): CompilerFixture[] {
+	const fixtures: CompilerFixture[] = [];
+
+	for (const sample of fs.readdirSync(snapshot_dir)) {
+		const client_dir = path.join(snapshot_dir, sample, '_expected/client');
+		if (!fs.existsSync(client_dir)) continue;
+
+		for (const file of fs.readdirSync(client_dir)) {
+			if (!file.endsWith('.js')) continue;
+			fixtures.push({
+				filename: `${sample}/${file}`,
+				code: fs.readFileSync(path.join(client_dir, file), 'utf-8')
+			});
+		}
+	}
+
+	return fixtures;
+}
+
+/**
+ * Combine per-feature version data into a single Record. Takes the max
+ * (strictest) version per browser across the input feature IDs.
+ *
+ * `null` propagates as "not supported" — if any contributing feature
+ * marks a browser unsupported, the merged record does too.
+ *
+ * Returns `null` if NONE of the IDs have versions in `web-features` or
+ * supplemental rules, so callers can fall back to year-based mapping.
+ */
+function versions_from_features(ids: Iterable<string>): BrowserVersions | null {
+	const merged: BrowserVersions = {};
+	let any_found = false;
+
+	for (const id of ids) {
+		const support = versions_for_feature(id);
+		if (!support) continue;
+		any_found = true;
+		for (const [browser, version] of Object.entries(support)) {
+			const current = merged[browser];
+			// `null` means "not supported"; propagate it directly.
+			if (version === null) {
+				merged[browser] = null;
+				continue;
+			}
+			if (current === null) continue; // already known unsupported
+			if (current === undefined || Number(version) > Number(current)) {
+				merged[browser] = version;
+			}
+		}
+	}
+
+	return any_found ? merged : null;
+}
+
+/**
+ * Highest baseline year among `detected`, and the set of feature IDs that
+ * drove it. Used both for the aggregate runtime floor and for per-fixture
+ * scans — the two differ only in their ignore set.
+ */
+function compute_floor(
+	detected: Iterable<string>,
+	ignore: Set<string>
+): { year: number; drivers: Set<string> } {
+	let year = 0;
+	const drivers = new Set<string>();
+	for (const id of detected) {
+		if (ignore.has(id)) continue;
+		const y = baseline_year_for_feature(id);
+		if (!y) continue;
+		if (y > year) {
+			year = y;
+			drivers.clear();
+		}
+		if (y === year) drivers.add(id);
+	}
+	return { year, drivers };
+}
+
+/**
+ * Run the TS-based detector across the runtime bundles and the compiler-
+ * output fixtures, then compute the highest baseline year among the
+ * detected features (after subtracting `AGGREGATE_IGNORE`).
+ *
+ * `runtime_files` are absolute paths to runtime bundle files. Returns the
+ * minimum Baseline year the combined code satisfies.
+ */
+function find_minimum_target(
+	runtime_files: string[],
+	compiler_fixtures: CompilerFixture[]
+): number {
+	// Type-aware walk over the runtime bundles.
+	const detected = detect_features(runtime_files);
+
+	// Syntax-only walk over the compiler-output fixtures (text only, no
+	// program context; the bare TS source-file parser handles the syntax
+	// features the compiler emits).
+	for (const fixture of compiler_fixtures) {
+		for (const id of detect_features_in_text(fixture.code)) detected.add(id);
+	}
+
+	const { year, drivers } = compute_floor(detected, AGGREGATE_IGNORE);
+	// Floor at 2015 so the docs never claim a pre-ES6 target if every
+	// detected feature happens to lack a Baseline year.
+	const final_year = Math.max(year, 2015);
+
+	console.log(`  → ${final_year} (features that drove the floor:)`);
+	for (const id of [...drivers].sort()) {
+		console.log(`    - ${id}`);
+	}
+
+	return final_year;
+}
+
+/**
+ * Verify every entry in `BEHAVIORAL_IGNORE` is actually used by the
+ * runtime. Without this, a behavioural suppression can outlive the API
+ * it suppresses — the comment stays in the config pointing at code that
+ * no longer exists.
+ *
+ * `SAFE_TO_IGNORE` entries are exempt: they're safe to carry regardless
+ * of whether the runtime currently uses the API.
+ */
+function validate_ignore_features(runtime_files: string[]): void {
+	if (BEHAVIORAL_IGNORE.size === 0) return;
+	const detected = detect_features(runtime_files);
+	const stale = [...BEHAVIORAL_IGNORE].filter((id) => !detected.has(id));
+	if (stale.length > 0) {
+		throw new Error(
+			`BEHAVIORAL_IGNORE contains entries that the detector does not flag — ` +
+				`they can be removed:\n` +
+				stale.map((id) => `  - ${id}`).join('\n') +
+				`\n\nEdit \`packages/svelte/scripts/generate-browser-support.js\` ` +
+				`and delete the stale entries. If the API was removed from the runtime ` +
+				`as part of this change, that is exactly the intended signal.`
+		);
+	}
+}
+
+/**
+ * Build the full list of user-facing features to test for conditional
+ * floor bumps. Each feature gets a self-contained fixture, compiled and
+ * bundled like real user code, then scanned. If the bundle's floor
+ * exceeds the runtime floor, a row is auto-emitted in the docs.
+ *
+ * `subpackage_exports` maps subpath → list of exported symbols, produced by
+ * `enumerate_subpackage_exports`. Passed in rather than computed here so the
+ * dynamic-import discovery can happen once in `main`.
+ */
+function enumerate_features(subpackage_exports: Record<string, string[]>): Feature[] {
+	const features: Feature[] = [];
+
+	// Every `bind:*` accepted by the compiler. Element selection respects
+	// the `valid_elements` constraint declared in `binding_properties`.
+	for (const [name, props] of Object.entries(binding_properties)) {
+		const fixture = binding_fixture(name, props);
+		if (fixture) {
+			features.push({
+				name: `\`bind:${name}\``,
+				kind: 'svelte',
+				source: fixture
+			});
+		}
+	}
+
+	for (const [module, exports] of Object.entries(subpackage_exports)) {
+		for (const exp of exports) {
+			features.push({
+				name: `\`${exp}\` from \`${module}\``,
+				kind: 'js',
+				source: `import { ${exp} } from '${module}'; export const _ = ${exp};`
+			});
+		}
+	}
+
+	for (const rune of RUNES) {
+		features.push({
+			name: `\`${rune}\``,
+			kind: 'svelte',
+			source: rune_fixture(rune)
+		});
+	}
+
+	for (const directive of TESTED_DIRECTIVES) {
+		features.push({ name: directive.name, kind: 'svelte', source: directive.source });
+	}
+
+	return features;
+}
+
+/**
+ * Produce the `.svelte` source for a single binding fixture. Returns
+ * `null` for bindings the compiler treats as elements rather than
+ * properties (none currently, but defensive).
+ */
+function binding_fixture(name: string, props: BindingProperty): string {
+	// Map declared `valid_elements` to a concrete element + minimal attrs
+	// so the compiler accepts the binding.
+	const tag = (props.valid_elements ?? ['div'])[0];
+
+	const reactive = `let v = $state();`;
+
+	if (tag === 'svelte:window') {
+		return `<script>${reactive}</script><svelte:window bind:${name}={v} />`;
+	}
+	if (tag === 'svelte:document') {
+		return `<script>${reactive}</script><svelte:document bind:${name}={v} />`;
+	}
+	if (tag === 'input') {
+		// `bind:checked` and `bind:group` require type="checkbox" | "radio"
+		const type =
+			name === 'checked' || name === 'indeterminate'
+				? ' type="checkbox"'
+				: name === 'group'
+					? ' type="radio" value="a"'
+					: name === 'files'
+						? ' type="file"'
+						: '';
+		return `<script>${reactive}</script><input${type} bind:${name}={v} />`;
+	}
+	if (tag === 'details') {
+		return `<script>${reactive}</script><details bind:${name}={v}><summary>x</summary></details>`;
+	}
+
+	return `<script>${reactive}</script><${tag} bind:${name}={v}></${tag}>`;
+}
+
+/**
+ * Compile a `.svelte` fixture to JS (no-op for `.js` fixtures), then
+ * bundle the result through the shared `bundle` helper. Fixtures are tiny
+ * so circular-dep warnings from the Svelte runtime are silenced.
+ */
+async function bundle_fixture(feature: Feature): Promise<string> {
+	const entry_code =
+		feature.kind === 'svelte'
+			? svelte_compile(feature.source, {
+					generate: 'client',
+					filename: 'Fixture.svelte',
+					dev: false
+				}).js.code
+			: feature.source;
+	return bundle(entry_code, { silent: true });
+}
+
+/**
+ * Detect features in a single fixture bundle and report the per-fixture
+ * floor year along with the IDs that drove it. Used for the per-feature
+ * conditional table.
+ *
+ * `fixture_file` is the absolute path to the `.ts` bundle.
+ */
+function scan_fixture(fixture_file: string): {
+	year: number;
+	driving_ids: string[];
+} {
+	const { year, drivers } = compute_floor(detect_features([fixture_file]), SAFE_TO_IGNORE);
+
+	return {
+		year,
+		driving_ids: [...drivers]
+	};
+}
+
+/**
+ * Iterate every feature, bundle its fixture, scan it. Return the rows
+ * that need to appear in the conditional-features table.
+ */
+async function find_all_conditional_features(
+	runtime_floor: RuntimeFloor,
+	subpackage_exports: Record<string, string[]>
+): Promise<ConditionalRow[]> {
+	const runtime_year = typeof runtime_floor === 'number' ? runtime_floor : Infinity;
+	const features = enumerate_features(subpackage_exports);
+	const rows: ConditionalRow[] = [];
+
+	const missing_doc_links: string[] = [];
+
+	for (let i = 0; i < features.length; i++) {
+		const feature = features[i];
+		process.stdout.write(`\r  ${i + 1}/${features.length}  ${feature.name}`.padEnd(80));
+
+		let bundle_code;
+		try {
+			bundle_code = await bundle_fixture(feature);
+		} catch {
+			continue; // some fixtures (rare element combos) may fail to compile
+		}
+
+		// Write the bundle so the type-aware scanner can resolve its types.
+		const fixture_file = path.join(tmp_dir, `fixture_${i}.ts`);
+		fs.writeFileSync(fixture_file, bundle_code);
+
+		const scanned = scan_fixture(fixture_file);
+		const final_year = scanned.year;
+
+		// Skip features at or below the runtime floor — they don't need a row.
+		if (final_year <= runtime_year || final_year === 0) continue;
+
+		// Use exact per-feature versions where available (from web-features
+		// or supplemental rules), falling back to the conservative year
+		// mapping only if no feature has explicit version data.
+		let versions = versions_from_features(scanned.driving_ids);
+		if (!versions) {
+			try {
+				versions = browser_versions_for(final_year);
+			} catch {
+				continue;
+			}
+		}
+
+		let doc_link = doc_links[feature.name];
+		if (doc_link === undefined) {
+			doc_link = null;
+			missing_doc_links.push(feature.name);
+		}
+
+		rows.push({
+			name: feature.name,
+			doc_link,
+			versions,
+			baseline_year: final_year
+		});
+	}
+	process.stdout.write('\n');
+
+	if (missing_doc_links.length) {
+		throw new Error(`Missing documentation url for some features.
+Add them to the \`doc_links\` map in \`scripts/generate-browser-support.ts\`, or add an explicit \`null\` if they don't have a documentation url.
+${missing_doc_links.map((name) => `  - "${name}"`).join('\n')}`);
+	}
+
+	return rows;
+}
+
+function render_conditional_table(features: ConditionalRow[], runtime_floor: RuntimeFloor): string {
+	if (features.length === 0) {
+		return '_No features currently require browser versions newer than the runtime floor._';
+	}
+	features.sort((a, b) => a.name.localeCompare(b.name));
+
+	const browsers = [
+		['chrome', 'Chrome/Edge'],
+		['firefox', 'Firefox'],
+		['safari', 'Safari']
+	] as const;
+
+	const floor_versions = browser_versions_for(runtime_floor);
+
+	const rows: string[][] = [];
+	for (const row of features) {
+		const name_cell = row.doc_link ? `[${row.name}](${row.doc_link})` : row.name;
+		const versions = browsers.map(([key]) => {
+			const v = row.versions[key];
+			if (v === null) return 'not supported';
+			if (v === undefined) return '<span style="color: var(--sk-fg-4)">—</span>';
+			const floor_v = floor_versions[key];
+			if (floor_v && Number(v) <= Number(floor_v))
+				return '<span style="color: var(--sk-fg-4)">—</span>';
+
+			return v;
+		});
+		rows.push([name_cell, ...versions]);
+	}
+
+	return render_markdown_table(['Feature', ...browsers.map(([, label]) => `${label}`)], rows);
+}
+
+function browser_versions_for(target: RuntimeFloor): Record<string, string> {
+	// `targetYear` returns the minimum versions in which every feature that
+	// reached Baseline by the end of that year is supported. If the lint
+	// search fell through to `'newly'`, we use the current year — that gives
+	// the most recent Newly-available cutoff, which is the strongest
+	// statement `baseline-browser-mapping` is able to make.
+	const target_year = typeof target === 'number' ? target : new Date().getFullYear();
+
+	const versions = getCompatibleVersions({
+		targetYear: target_year,
+		includeDownstreamBrowsers: true
+	});
+
+	// The core Baseline browsers plus the downstream browsers worth listing
+	// in the docs. Downstream browsers come from `baseline-browser-mapping`'s
+	// dataset and represent the highest-traffic Chromium derivatives; the
+	// long tail (UC, QQ, Yandex, in-app Facebook/Instagram browsers, etc.)
+	// is omitted to keep the table focused.
+	const visible_browsers = new Set([
+		'chrome',
+		'chrome_android',
+		'edge',
+		'firefox',
+		'firefox_android',
+		'safari',
+		'safari_ios',
+		'opera',
+		'opera_android',
+		'samsunginternet_android',
+		'webview_android'
+	]);
+
+	const suffixes = ['_android', '_ios'];
+
+	const lookup: Record<string, string> = {};
+	outer: for (const { browser, version } of versions) {
+		if (visible_browsers.has(browser)) {
+			for (const suffix of suffixes) {
+				// skip e.g. 'Chrome (Android)' if it matches Chrome
+				if (browser.endsWith(suffix) && version === lookup[browser.replace(suffix, '')]) {
+					continue outer;
+				}
+			}
+
+			lookup[browser] = version;
+		}
+	}
+
+	return lookup;
+}
+
+const BROWSER = {
+	chrome: 'Chrome',
+	edge: 'Edge',
+	firefox: 'Firefox',
+	safari: 'Safari',
+	opera: 'Opera',
+	samsung_internet: 'Samsung Internet',
+	webview_android: 'Android WebView',
+	internet_explorer: 'Internet Explorer'
+};
+
+function render_browser_table(versions: Record<string, string>, target: RuntimeFloor): string {
+	const rows: Array<[string, string]> = [
+		[BROWSER.chrome, versions.chrome],
+		[`${BROWSER.chrome} (Android)`, versions.chrome_android]
+	];
+
+	if (versions.chrome === versions.edge) {
+		rows[0][0] += `/${BROWSER.edge}`;
+	} else {
+		rows.push([BROWSER.edge, versions.edge]);
+	}
+
+	rows.push(
+		[BROWSER.firefox, versions.firefox],
+		[`${BROWSER.firefox} (Android)`, versions.firefox_android],
+		[BROWSER.safari, versions.safari],
+		[`${BROWSER.safari} (iOS)`, versions.safari_ios],
+		[BROWSER.opera, versions.opera],
+		[`${BROWSER.opera} (Android)`, versions.opera_android],
+		[BROWSER.samsung_internet, versions.samsunginternet_android],
+		[BROWSER.webview_android, versions.webview_android],
+		[BROWSER.internet_explorer, 'not supported']
+	);
+
+	const target_label = target === 'newly' ? '"newly available"' : target;
+
+	return (
+		render_markdown_table(
+			['Browser', 'Minimum version'],
+			rows.filter(([, version]) => version !== undefined)
+		) +
+		`\n\n> [!NOTE] This equates to a <a href="https://web-platform-dx.github.io/baseline/">Baseline</a> target of ${target_label}.`
+	);
+}
+
+function render_markdown_table(headers: string[], rows: string[][]): string {
+	return `| ${headers.join(' | ')} |
+| ${headers.map(() => '-').join(' | ')} |
+${rows.map((row) => `| ${row.join(' | ')} |`).join('\n')}
+`;
+}
+
+async function main() {
+	console.log('Preparing scratch directory…');
+	// Wipe and recreate so stale bundles can't leak into the next scan.
+	fs.rmSync(tmp_dir, { recursive: true, force: true });
+	fs.mkdirSync(tmp_dir, { recursive: true });
+
+	try {
+		console.log('Bundling runtime entries…');
+		const runtime_files: string[] = [];
+		for (const importee of browser_subpaths().map(importee_for)) {
+			// `import * as` + re-export keeps default and named exports
+			// alive, so flag modules (only a default export) don't produce
+			// empty chunks but their code still ends up in the scan.
+			const code = await bundle(`import * as __ns from '${importee}'; export default __ns;`);
+			const file = path.join(tmp_dir, `${safe_name(importee)}.ts`);
+			fs.writeFileSync(file, code);
+			runtime_files.push(file);
+		}
+
+		console.log('Loading compiler-output fixtures…');
+		const compiler_fixtures = load_compiler_output_fixtures();
+		console.log(`  (${compiler_fixtures.length} fixtures found)`);
+
+		console.log('Searching for the minimum Baseline target (type-aware)…');
+		const target = find_minimum_target(runtime_files, compiler_fixtures);
+
+		console.log('Checking BEHAVIORAL_IGNORE for stale entries…');
+		validate_ignore_features(runtime_files);
+		console.log('  no stale entries');
+
+		console.log('Enumerating subpackage exports…');
+		const subpackage_exports = await enumerate_subpackage_exports();
+		const total_exports = Object.values(subpackage_exports).reduce((n, list) => n + list.length, 0);
+		console.log(
+			`  ${total_exports} export(s) across ${Object.keys(subpackage_exports).length} subpackage(s)`
+		);
+
+		console.log('Scanning per-feature fixtures for conditional requirements…');
+		const conditional_rows = await find_all_conditional_features(target, subpackage_exports);
+		console.log(
+			`  ${conditional_rows.length} feature(s) require browsers newer than the runtime floor`
+		);
+
+		console.log('Resolving browser versions…');
+		const versions = browser_versions_for(target);
+
+		console.log('Rewriting docs page…');
+		generate('browser-support.md', render_browser_table(versions, target));
+		generate('browser-support-features.md', render_conditional_table(conditional_rows, target));
+
+		console.log('Done.');
+	} finally {
+		fs.rmSync(tmp_dir, { recursive: true, force: true });
+	}
+}
+
+function generate(file: string, content: string): void {
+	const filename = path.join(docs_dir, file);
+
+	try {
+		fs.mkdirSync(path.dirname(file), { recursive: true });
+	} catch {}
+
+	const backlink = path.relative(filename, fileURLToPath(import.meta.url));
+
+	fs.writeFileSync(filename, `<!-- generated in ${backlink}. do not edit -->\n\n${content}`);
+}
+
+main().catch((err) => {
+	console.error(err);
+	process.exit(1);
+});
diff --git a/packages/svelte/scripts/generate-types.js b/packages/svelte/scripts/generate-types.js
index 16bbf52a2e..0ee6004d4a 100644
--- a/packages/svelte/scripts/generate-types.js
+++ b/packages/svelte/scripts/generate-types.js
@@ -24,12 +24,20 @@ await createBundle({
 	output: `${dir}/types/index.d.ts`,
 	compilerOptions: {
 		// so that types/properties with `@internal` (and its dependencies) are removed from the output
-		stripInternal: true
+		stripInternal: true,
+		paths: Object.fromEntries(
+			Object.entries(pkg.imports).map(
+				/** @param {[string,any]} import */ ([key, value]) => {
+					return [key, [value.types ?? value.default ?? value]];
+				}
+			)
+		)
 	},
 	modules: {
 		[pkg.name]: `${dir}/src/index.d.ts`,
 		[`${pkg.name}/action`]: `${dir}/src/action/public.d.ts`,
 		[`${pkg.name}/animate`]: `${dir}/src/animate/public.d.ts`,
+		[`${pkg.name}/attachments`]: `${dir}/src/attachments/public.d.ts`,
 		[`${pkg.name}/compiler`]: `${dir}/src/compiler/public.d.ts`,
 		[`${pkg.name}/easing`]: `${dir}/src/easing/index.js`,
 		[`${pkg.name}/legacy`]: `${dir}/src/legacy/legacy-client.js`,
@@ -46,6 +54,8 @@ await createBundle({
 	}
 });
 
+fs.appendFileSync(`${dir}/types/index.d.ts`, '\n');
+
 const types = fs.readFileSync(`${dir}/types/index.d.ts`, 'utf-8');
 
 const bad_links = [...types.matchAll(/\]\((\/[^)]+)\)/g)];
diff --git a/packages/svelte/scripts/generate-version.js b/packages/svelte/scripts/generate-version.js
index 1c392efef4..3eeeb437dd 100644
--- a/packages/svelte/scripts/generate-version.js
+++ b/packages/svelte/scripts/generate-version.js
@@ -8,8 +8,6 @@ fs.writeFileSync(
 
 /**
  * The current version, as set in package.json.
- *
- * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
 export const VERSION = '${pkg.version}';
diff --git a/packages/svelte/scripts/process-messages/index.js b/packages/svelte/scripts/process-messages/index.js
index bbe257498e..c8d7418db4 100644
--- a/packages/svelte/scripts/process-messages/index.js
+++ b/packages/svelte/scripts/process-messages/index.js
@@ -1,274 +1,355 @@
+/** @import { Node } from 'esrap/languages/ts' */
+/** @import * as ESTree from 'estree' */
+/** @import { AST } from 'svelte/compiler' */
+
 // @ts-check
+import process from 'node:process';
 import fs from 'node:fs';
 import * as acorn from 'acorn';
 import { walk } from 'zimmerframe';
 import * as esrap from 'esrap';
-
-/** @type {Record<string, Record<string, { messages: string[], details: string | null }>>} */
-const messages = {};
-const seen = new Set();
+import ts from 'esrap/languages/ts';
 
 const DIR = '../../documentation/docs/98-reference/.generated';
-fs.rmSync(DIR, { force: true, recursive: true });
-fs.mkdirSync(DIR);
 
-for (const category of fs.readdirSync('messages')) {
-	if (category.startsWith('.')) continue;
+const watch = process.argv.includes('-w');
 
-	messages[category] = {};
+function run() {
+	/** @type {Record<string, Record<string, { messages: string[], details: string | null }>>} */
+	const messages = {};
+	const seen = new Set();
 
-	for (const file of fs.readdirSync(`messages/${category}`)) {
-		if (!file.endsWith('.md')) continue;
+	fs.rmSync(DIR, { force: true, recursive: true });
+	fs.mkdirSync(DIR);
 
-		const markdown = fs
-			.readFileSync(`messages/${category}/${file}`, 'utf-8')
-			.replace(/\r\n/g, '\n');
+	for (const category of fs.readdirSync('messages')) {
+		if (category.startsWith('.')) continue;
 
-		const sorted = [];
+		messages[category] = {};
 
-		for (const match of markdown.matchAll(/## ([\w]+)\n\n([^]+?)(?=$|\n\n## )/g)) {
-			const [_, code, text] = match;
+		for (const file of fs.readdirSync(`messages/${category}`)) {
+			if (!file.endsWith('.md')) continue;
 
-			if (seen.has(code)) {
-				throw new Error(`Duplicate message code ${category}/${code}`);
-			}
+			const markdown = fs
+				.readFileSync(`messages/${category}/${file}`, 'utf-8')
+				.replace(/\r\n/g, '\n');
 
-			sorted.push({ code, _ });
+			const sorted = [];
 
-			const sections = text.trim().split('\n\n');
-			const details = [];
+			for (const match of markdown.matchAll(/## ([\w]+)\n\n([^]+?)(?=$|\n\n## )/g)) {
+				const [_, code, text] = match;
 
-			while (!sections[sections.length - 1].startsWith('> ')) {
-				details.unshift(/** @type {string} */ (sections.pop()));
-			}
+				if (seen.has(code)) {
+					throw new Error(`Duplicate message code ${category}/${code}`);
+				}
+
+				sorted.push({ code, _ });
+
+				const sections = text.trim().split('\n\n');
+				const details = [];
 
-			if (sections.length === 0) {
-				throw new Error('No message text');
+				while (!sections[sections.length - 1].startsWith('> ')) {
+					details.unshift(/** @type {string} */ (sections.pop()));
+				}
+
+				if (sections.length === 0) {
+					throw new Error('No message text');
+				}
+
+				seen.add(code);
+				messages[category][code] = {
+					messages: sections.map((section) => section.replace(/^> /gm, '').replace(/^>\n/gm, '\n')),
+					details: details.join('\n\n')
+				};
 			}
 
-			seen.add(code);
-			messages[category][code] = {
-				messages: sections.map((section) => section.replace(/^> /gm, '').replace(/^>\n/gm, '\n')),
-				details: details.join('\n\n')
-			};
+			sorted.sort((a, b) => (a.code < b.code ? -1 : 1));
+
+			fs.writeFileSync(
+				`messages/${category}/${file}`,
+				sorted.map((x) => x._.trim()).join('\n\n') + '\n'
+			);
 		}
 
-		sorted.sort((a, b) => (a.code < b.code ? -1 : 1));
 		fs.writeFileSync(
-			`messages/${category}/${file}`,
-			sorted.map((x) => x._.trim()).join('\n\n') + '\n'
+			`${DIR}/${category}.md`,
+			'<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->\n\n' +
+				Object.entries(messages[category])
+					.map(([code, { messages, details }]) => {
+						const chunks = [
+							`### ${code}`,
+							...messages.map((message) => '```\n' + message + '\n```')
+						];
+
+						if (details) {
+							chunks.push(details);
+						}
+
+						return chunks.join('\n\n');
+					})
+					.sort()
+					.join('\n\n') +
+				'\n'
 		);
 	}
 
-	fs.writeFileSync(
-		`${DIR}/${category}.md`,
-		'<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->\n\n' +
-			Object.entries(messages[category])
-				.map(([code, { messages, details }]) => {
-					const chunks = [`### ${code}`, ...messages.map((message) => '```\n' + message + '\n```')];
+	/**
+	 * @param {string} name
+	 * @param {string} dest
+	 */
+	function transform(name, dest) {
+		const source = fs
+			.readFileSync(new URL(`./templates/${name}.js`, import.meta.url), 'utf-8')
+			.replace(/\r\n/g, '\n');
 
-					if (details) {
-						chunks.push(details);
-					}
+		/** @type {AST.JSComment[]} */
+		const comments = [];
 
-					return chunks.join('\n\n');
+		let ast = /** @type {ESTree.Node} */ (
+			/** @type {unknown} */ (
+				acorn.parse(source, {
+					ecmaVersion: 'latest',
+					sourceType: 'module',
+					locations: true,
+					onComment: comments
 				})
-				.sort()
-				.join('\n\n') +
-			'\n'
-	);
-}
+			)
+		);
 
-/**
- * @param {string} name
- * @param {string} dest
- */
-function transform(name, dest) {
-	const source = fs
-		.readFileSync(new URL(`./templates/${name}.js`, import.meta.url), 'utf-8')
-		.replace(/\r\n/g, '\n');
+		comments.forEach((comment) => {
+			if (comment.type === 'Block') {
+				comment.value = comment.value.replace(/^\t+/gm, '');
+			}
+		});
 
-	/**
-	 * @type {Array<{
-	 * 	type: string;
-	 * 	value: string;
-	 * 	start: number;
-	 * 	end: number
-	 * }>}
-	 */
-	const comments = [];
+		ast = walk(ast, null, {
+			Identifier(node, context) {
+				if (node.name === 'CODES') {
+					/** @type {ESTree.ArrayExpression} */
+					const array = {
+						type: 'ArrayExpression',
+						elements: Object.keys(messages[name]).map((code) => ({
+							type: 'Literal',
+							value: code
+						}))
+					};
 
-	let ast = acorn.parse(source, {
-		ecmaVersion: 'latest',
-		sourceType: 'module',
-		onComment: (block, value, start, end) => {
-			if (block && /\n/.test(value)) {
-				let a = start;
-				while (a > 0 && source[a - 1] !== '\n') a -= 1;
+					return array;
+				}
+			}
+		});
 
-				let b = a;
-				while (/[ \t]/.test(source[b])) b += 1;
+		const body = /** @type {ESTree.Program} */ (ast).body;
 
-				const indentation = source.slice(a, b);
-				value = value.replace(new RegExp(`^${indentation}`, 'gm'), '');
+		const category = messages[name];
+
+		// find the `export function CODE` node
+		const index = body.findIndex((node) => {
+			if (
+				node.type === 'ExportNamedDeclaration' &&
+				node.declaration &&
+				node.declaration.type === 'FunctionDeclaration'
+			) {
+				return node.declaration.id.name === 'CODE';
 			}
+		});
 
-			comments.push({ type: block ? 'Block' : 'Line', value, start, end });
-		}
-	});
+		if (index === -1) throw new Error(`missing export function CODE in ${name}.js`);
 
-	ast = walk(ast, null, {
-		_(node, { next }) {
-			let comment;
+		const template_node = body[index];
+		body.splice(index, 1);
 
-			while (comments[0] && comments[0].start < node.start) {
-				comment = comments.shift();
-				// @ts-expect-error
-				(node.leadingComments ||= []).push(comment);
-			}
+		const jsdoc = /** @type {AST.JSComment} */ (
+			comments.findLast((comment) => comment.start < /** @type {number} */ (template_node.start))
+		);
 
-			next();
+		const printed = esrap.print(
+			/** @type {Node} */ (ast),
+			ts({
+				comments: comments.filter((comment) => comment !== jsdoc)
+			})
+		);
 
-			if (comments[0]) {
-				const slice = source.slice(node.end, comments[0].start);
+		for (const code in category) {
+			const { messages } = category[code];
+			/** @type {string[]} */
+			const vars = [];
 
-				if (/^[,) \t]*$/.test(slice)) {
-					// @ts-expect-error
-					node.trailingComments = [comments.shift()];
+			const group = messages.map((text, i) => {
+				for (const match of text.matchAll(/%(\w+)%/g)) {
+					const name = match[1];
+					if (!vars.includes(name)) {
+						vars.push(match[1]);
+					}
 				}
-			}
-		},
-		// @ts-expect-error
-		Identifier(node, context) {
-			if (node.name === 'CODES') {
+
 				return {
-					type: 'ArrayExpression',
-					elements: Object.keys(messages[name]).map((code) => ({
-						type: 'Literal',
-						value: code
-					}))
+					text,
+					vars: vars.slice()
 				};
-			}
-		}
-	});
+			});
 
-	if (comments.length > 0) {
-		// @ts-expect-error
-		(ast.trailingComments ||= []).push(...comments);
-	}
+			/** @type {ESTree.Expression} */
+			let message = { type: 'Literal', value: '' };
+			let prev_vars;
 
-	const category = messages[name];
+			for (let i = 0; i < group.length; i += 1) {
+				const { text, vars } = group[i];
 
-	// find the `export function CODE` node
-	const index = ast.body.findIndex((node) => {
-		if (
-			node.type === 'ExportNamedDeclaration' &&
-			node.declaration &&
-			node.declaration.type === 'FunctionDeclaration'
-		) {
-			return node.declaration.id.name === 'CODE';
-		}
-	});
+				if (vars.length === 0) {
+					message = {
+						type: 'Literal',
+						value: text
+					};
+					prev_vars = vars;
+					continue;
+				}
 
-	if (index === -1) throw new Error(`missing export function CODE in ${name}.js`);
+				const parts = text.split(/(%\w+%)/);
 
-	const template_node = ast.body[index];
-	ast.body.splice(index, 1);
+				/** @type {ESTree.Expression[]} */
+				const expressions = [];
 
-	for (const code in category) {
-		const { messages } = category[code];
-		/** @type {string[]} */
-		const vars = [];
+				/** @type {ESTree.TemplateElement[]} */
+				const quasis = [];
 
-		const group = messages.map((text, i) => {
-			for (const match of text.matchAll(/%(\w+)%/g)) {
-				const name = match[1];
-				if (!vars.includes(name)) {
-					vars.push(match[1]);
+				for (let i = 0; i < parts.length; i += 1) {
+					const part = parts[i];
+					if (i % 2 === 0) {
+						const str = part.replace(/(`|\${)/g, '\\$1');
+						quasis.push({
+							type: 'TemplateElement',
+							value: { raw: str, cooked: str },
+							tail: i === parts.length - 1
+						});
+					} else {
+						expressions.push({
+							type: 'Identifier',
+							name: part.slice(1, -1)
+						});
+					}
 				}
-			}
-
-			return {
-				text,
-				vars: vars.slice()
-			};
-		});
-
-		/** @type {import('estree').Expression} */
-		let message = { type: 'Literal', value: '' };
-		let prev_vars;
 
-		for (let i = 0; i < group.length; i += 1) {
-			const { text, vars } = group[i];
-
-			if (vars.length === 0) {
-				message = {
-					type: 'Literal',
-					value: text
+				/** @type {ESTree.Expression} */
+				const expression = {
+					type: 'TemplateLiteral',
+					expressions,
+					quasis
 				};
-				prev_vars = vars;
-				continue;
-			}
 
-			const parts = text.split(/(%\w+%)/);
-
-			/** @type {import('estree').Expression[]} */
-			const expressions = [];
-
-			/** @type {import('estree').TemplateElement[]} */
-			const quasis = [];
+				if (prev_vars) {
+					if (vars.length === prev_vars.length) {
+						throw new Error('Message overloads must have new parameters');
+					}
 
-			for (let i = 0; i < parts.length; i += 1) {
-				const part = parts[i];
-				if (i % 2 === 0) {
-					const str = part.replace(/(`|\${)/g, '\\$1');
-					quasis.push({
-						type: 'TemplateElement',
-						value: { raw: str, cooked: str },
-						tail: i === parts.length - 1
-					});
+					message = {
+						type: 'ConditionalExpression',
+						test: {
+							type: 'Identifier',
+							name: vars[prev_vars.length]
+						},
+						consequent: expression,
+						alternate: message
+					};
 				} else {
-					expressions.push({
-						type: 'Identifier',
-						name: part.slice(1, -1)
-					});
+					message = expression;
 				}
+
+				prev_vars = vars;
 			}
 
-			/** @type {import('estree').Expression} */
-			const expression = {
-				type: 'TemplateLiteral',
-				expressions,
-				quasis
-			};
+			const clone = /** @type {ESTree.Statement} */ (
+				walk(/** @type {ESTree.Node} */ (template_node), null, {
+					FunctionDeclaration(node, context) {
+						if (node.id.name !== 'CODE') return;
 
-			if (prev_vars) {
-				if (vars.length === prev_vars.length) {
-					throw new Error('Message overloads must have new parameters');
-				}
+						const params = [];
 
-				message = {
-					type: 'ConditionalExpression',
-					test: {
-						type: 'Identifier',
-						name: vars[prev_vars.length]
-					},
-					consequent: expression,
-					alternate: message
-				};
-			} else {
-				message = expression;
-			}
+						for (const param of node.params) {
+							if (param.type === 'Identifier' && param.name === 'PARAMETER') {
+								params.push(...vars.map((name) => ({ type: 'Identifier', name })));
+							} else {
+								params.push(param);
+							}
+						}
 
-			prev_vars = vars;
-		}
+						return /** @type {ESTree.FunctionDeclaration} */ ({
+							.../** @type {ESTree.FunctionDeclaration} */ (context.next()),
+							params,
+							id: {
+								...node.id,
+								name: code
+							}
+						});
+					},
+					TemplateLiteral(node, context) {
+						/** @type {ESTree.TemplateElement} */
+						let quasi = {
+							type: 'TemplateElement',
+							value: {
+								...node.quasis[0].value
+							},
+							tail: node.quasis[0].tail
+						};
+
+						/** @type {ESTree.TemplateLiteral} */
+						let out = {
+							type: 'TemplateLiteral',
+							quasis: [quasi],
+							expressions: []
+						};
+
+						for (let i = 0; i < node.expressions.length; i += 1) {
+							const q = structuredClone(node.quasis[i + 1]);
+							const e = node.expressions[i];
+
+							if (e.type === 'Literal' && e.value === 'CODE') {
+								quasi.value.raw += code + q.value.raw;
+								continue;
+							}
+
+							if (e.type === 'Identifier' && e.name === 'MESSAGE') {
+								if (message.type === 'Literal') {
+									const str = /** @type {string} */ (message.value).replace(/(`|\${)/g, '\\$1');
+									quasi.value.raw += str + q.value.raw;
+									continue;
+								}
+
+								if (message.type === 'TemplateLiteral') {
+									const m = structuredClone(message);
+									quasi.value.raw += m.quasis[0].value.raw;
+									out.quasis.push(...m.quasis.slice(1));
+									out.expressions.push(...m.expressions);
+									quasi = m.quasis[m.quasis.length - 1];
+									quasi.value.raw += q.value.raw;
+									continue;
+								}
+							}
+
+							out.quasis.push((quasi = q));
+							out.expressions.push(/** @type {ESTree.Expression} */ (context.visit(e)));
+						}
 
-		const clone = walk(/** @type {import('estree').Node} */ (template_node), null, {
-			// @ts-expect-error Block is a block comment, which is not recognised
-			Block(node, context) {
-				if (!node.value.includes('PARAMETER')) return;
+						return out;
+					},
+					Literal(node) {
+						if (node.value === 'CODE') {
+							return {
+								type: 'Literal',
+								value: code
+							};
+						}
+					},
+					Identifier(node) {
+						if (node.name !== 'MESSAGE') return;
+						return message;
+					}
+				})
+			);
 
-				const value = /** @type {string} */ (node.value)
+			const jsdoc_clone = {
+				...jsdoc,
+				value: /** @type {string} */ (jsdoc.value)
 					.split('\n')
 					.map((line) => {
 						if (line === ' * MESSAGE') {
@@ -293,118 +374,56 @@ function transform(name, dest) {
 						return line;
 					})
 					.filter((x) => x !== '')
-					.join('\n');
-
-				if (value !== node.value) {
-					return { ...node, value };
-				}
-			},
-			FunctionDeclaration(node, context) {
-				if (node.id.name !== 'CODE') return;
-
-				const params = [];
-
-				for (const param of node.params) {
-					if (param.type === 'Identifier' && param.name === 'PARAMETER') {
-						params.push(...vars.map((name) => ({ type: 'Identifier', name })));
-					} else {
-						params.push(param);
-					}
-				}
-
-				return /** @type {import('estree').FunctionDeclaration} */ ({
-					.../** @type {import('estree').FunctionDeclaration} */ (context.next()),
-					params,
-					id: {
-						...node.id,
-						name: code
-					}
-				});
-			},
-			TemplateLiteral(node, context) {
-				/** @type {import('estree').TemplateElement} */
-				let quasi = {
-					type: 'TemplateElement',
-					value: {
-						...node.quasis[0].value
-					},
-					tail: node.quasis[0].tail
-				};
-
-				/** @type {import('estree').TemplateLiteral} */
-				let out = {
-					type: 'TemplateLiteral',
-					quasis: [quasi],
-					expressions: []
-				};
+					.join('\n')
+			};
 
-				for (let i = 0; i < node.expressions.length; i += 1) {
-					const q = structuredClone(node.quasis[i + 1]);
-					const e = node.expressions[i];
+			const block = esrap.print(
+				/** @type {ESTree.Program} */ ({ ...ast, body: [clone] }),
+				ts({ comments: [jsdoc_clone] })
+			).code;
 
-					if (e.type === 'Literal' && e.value === 'CODE') {
-						quasi.value.raw += code + q.value.raw;
-						continue;
-					}
+			printed.code += `\n\n${block}`;
 
-					if (e.type === 'Identifier' && e.name === 'MESSAGE') {
-						if (message.type === 'Literal') {
-							const str = /** @type {string} */ (message.value).replace(/(`|\${)/g, '\\$1');
-							quasi.value.raw += str + q.value.raw;
-							continue;
-						}
-
-						if (message.type === 'TemplateLiteral') {
-							const m = structuredClone(message);
-							quasi.value.raw += m.quasis[0].value.raw;
-							out.quasis.push(...m.quasis.slice(1));
-							out.expressions.push(...m.expressions);
-							quasi = m.quasis[m.quasis.length - 1];
-							quasi.value.raw += q.value.raw;
-							continue;
-						}
-					}
-
-					out.quasis.push((quasi = q));
-					out.expressions.push(/** @type {import('estree').Expression} */ (context.visit(e)));
-				}
-
-				return out;
-			},
-			Literal(node) {
-				if (node.value === 'CODE') {
-					return {
-						type: 'Literal',
-						value: code
-					};
-				}
-			},
-			Identifier(node) {
-				if (node.name !== 'MESSAGE') return;
-				return message;
-			}
-		});
+			body.push(clone);
+		}
 
-		// @ts-expect-error
-		ast.body.push(clone);
+		fs.writeFileSync(
+			dest,
+			`/* This file is generated by scripts/process-messages/index.js. Do not edit! */\n\n` +
+				printed.code,
+			'utf-8'
+		);
 	}
 
-	// @ts-expect-error
-	const module = esrap.print(ast);
+	transform('compile-errors', 'src/compiler/errors.js');
+	transform('compile-warnings', 'src/compiler/warnings.js');
 
-	fs.writeFileSync(
-		dest,
-		`/* This file is generated by scripts/process-messages/index.js. Do not edit! */\n\n` +
-			module.code,
-		'utf-8'
-	);
+	transform('client-warnings', 'src/internal/client/warnings.js');
+	transform('client-errors', 'src/internal/client/errors.js');
+	transform('server-warnings', 'src/internal/server/warnings.js');
+	transform('server-errors', 'src/internal/server/errors.js');
+	transform('shared-errors', 'src/internal/shared/errors.js');
+	transform('shared-warnings', 'src/internal/shared/warnings.js');
 }
 
-transform('compile-errors', 'src/compiler/errors.js');
-transform('compile-warnings', 'src/compiler/warnings.js');
+if (watch) {
+	let running = false;
+	let timeout;
+
+	fs.watch('messages', { recursive: true }, (type, file) => {
+		if (running) {
+			timeout ??= setTimeout(() => {
+				running = false;
+				timeout = null;
+			});
+		} else {
+			running = true;
+
+			// eslint-disable-next-line no-console
+			console.log('Regenerating messages...');
+			run();
+		}
+	});
+}
 
-transform('client-warnings', 'src/internal/client/warnings.js');
-transform('client-errors', 'src/internal/client/errors.js');
-transform('server-errors', 'src/internal/server/errors.js');
-transform('shared-errors', 'src/internal/shared/errors.js');
-transform('shared-warnings', 'src/internal/shared/warnings.js');
+run();
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/scripts/process-messages/templates/server-warnings.js b/packages/svelte/scripts/process-messages/templates/server-warnings.js
new file mode 100644
index 0000000000..8a9b87b760
--- /dev/null
+++ b/packages/svelte/scripts/process-messages/templates/server-warnings.js
@@ -0,0 +1,20 @@
+import { DEV } from 'esm-env';
+
+var bold = 'font-weight: bold';
+var normal = 'font-weight: normal';
+
+/**
+ * MESSAGE
+ * @param {string} PARAMETER
+ */
+export function CODE(PARAMETER) {
+	if (DEV) {
+		console.warn(
+			`%c[svelte] ${'CODE'}\n%c${MESSAGE}\nhttps://svelte.dev/e/${'CODE'}`,
+			bold,
+			normal
+		);
+	} else {
+		console.warn(`https://svelte.dev/e/${'CODE'}`);
+	}
+}
diff --git a/packages/svelte/src/ambient.d.ts b/packages/svelte/src/ambient.d.ts
index 4e98eb82eb..bbbc86c997 100644
--- a/packages/svelte/src/ambient.d.ts
+++ b/packages/svelte/src/ambient.d.ts
@@ -16,7 +16,7 @@ declare module '*.svelte' {
  * let count = $state(0);
  * ```
  *
- * https://svelte.dev/docs/svelte/$state
+ * @see {@link https://svelte.dev/docs/svelte/$state Documentation}
  *
  * @param initial The initial value
  */
@@ -85,20 +85,34 @@ declare namespace $state {
 			? NonReactive<T>
 			: T extends { toJSON(): infer R }
 				? R
-				: T extends Array<infer U>
-					? Array<Snapshot<U>>
-					: T extends object
-						? T extends { [key: string]: any }
-							? { [K in keyof T]: Snapshot<T[K]> }
-							: never
-						: never;
+				: T extends readonly unknown[]
+					? { [K in keyof T]: Snapshot<T[K]> }
+					: T extends Array<infer U>
+						? Array<Snapshot<U>>
+						: T extends object
+							? T extends { [key: string]: any }
+								? { [K in keyof T]: Snapshot<T[K]> }
+								: never
+							: never;
 
+	/**
+	 * Returns the latest `value`, even if the rest of the UI is suspending
+	 * while async work (such as data loading) completes.
+	 *
+	 * ```svelte
+	 * <nav>
+	 *   <a href="/" aria-current={$state.eager(pathname) === '/' ? 'page' : null}>home</a>
+	 *   <a href="/about" aria-current={$state.eager(pathname) === '/about' ? 'page' : null}>about</a>
+	 * </nav>
+	 * ```
+	 */
+	export function eager<T>(value: T): T;
 	/**
 	 * Declares state that is _not_ made deeply reactive — instead of mutating it,
 	 * you must reassign it.
 	 *
 	 * Example:
-	 * ```ts
+	 * ```svelte
 	 * <script>
 	 *   let items = $state.raw([0]);
 	 *
@@ -107,12 +121,12 @@ declare namespace $state {
 	 *   };
 	 * </script>
 	 *
-	 * <button on:click={addItem}>
+	 * <button onclick={addItem}>
 	 *   {items.join(', ')}
 	 * </button>
 	 * ```
 	 *
-	 * https://svelte.dev/docs/svelte/$state#$state.raw
+	 * @see {@link https://svelte.dev/docs/svelte/$state#$state.raw Documentation}
 	 *
 	 * @param initial The initial value
 	 */
@@ -122,7 +136,7 @@ declare namespace $state {
 	 * To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:
 	 *
 	 * Example:
-	 * ```ts
+	 * ```svelte
 	 * <script>
 	 *   let counter = $state({ count: 0 });
 	 *
@@ -133,7 +147,9 @@ declare namespace $state {
 	 * </script>
 	 * ```
 	 *
-	 * https://svelte.dev/docs/svelte/$state#$state.snapshot
+	 * If `state` has a `toJSON` method, the snapshot will clone the value returned from `toJSON` instead of the original object.
+	 *
+	 * @see {@link https://svelte.dev/docs/svelte/$state#$state.snapshot Documentation}
 	 *
 	 * @param state The value to snapshot
 	 */
@@ -159,6 +175,9 @@ declare namespace $state {
 	export const prototype: never;
 	/** @deprecated */
 	export const toString: never;
+
+	// needed to keep private stuff private
+	export {};
 }
 
 /**
@@ -170,7 +189,7 @@ declare namespace $state {
  * let double = $derived(count * 2);
  * ```
  *
- * https://svelte.dev/docs/svelte/$derived
+ * @see {@link https://svelte.dev/docs/svelte/$derived Documentation}
  *
  * @param expression The derived state expression
  */
@@ -192,7 +211,7 @@ declare namespace $derived {
 	 * });
 	 * ```
 	 *
-	 * https://svelte.dev/docs/svelte/$derived#$derived.by
+	 * @see {@link https://svelte.dev/docs/svelte/$derived#$derived.by Documentation}
 	 */
 	export function by<T>(fn: () => T): T;
 
@@ -216,6 +235,9 @@ declare namespace $derived {
 	export const prototype: never;
 	/** @deprecated */
 	export const toString: never;
+
+	// needed to keep private stuff private
+	export {};
 }
 
 /**
@@ -229,9 +251,9 @@ declare namespace $derived {
  *
  * If you return a function from the effect, it will be called right before the effect is run again, or when the component is unmounted.
  *
- * Does not run during server side rendering.
+ * Does not run during server-side rendering.
  *
- * https://svelte.dev/docs/svelte/$effect
+ * @see {@link https://svelte.dev/docs/svelte/$effect Documentation}
  * @param fn The function to execute
  */
 declare function $effect(fn: () => void | (() => void)): void;
@@ -248,13 +270,20 @@ declare namespace $effect {
 	 *
 	 * If you return a function from the effect, it will be called right before the effect is run again, or when the component is unmounted.
 	 *
-	 * Does not run during server side rendering.
+	 * Does not run during server-side rendering.
 	 *
-	 * https://svelte.dev/docs/svelte/$effect#$effect.pre
+	 * @see {@link https://svelte.dev/docs/svelte/$effect#$effect.pre Documentation}
 	 * @param fn The function to execute
 	 */
 	export function pre(fn: () => void | (() => void)): void;
 
+	/**
+	 * Returns the number of promises that are pending in the current boundary, not including child boundaries.
+	 *
+	 * @see {@link https://svelte.dev/docs/svelte/$effect#$effect.pending Documentation}
+	 */
+	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.
 	 *
@@ -273,7 +302,7 @@ declare namespace $effect {
 	 *
 	 * This allows you to (for example) add things like subscriptions without causing memory leaks, by putting them in child effects.
 	 *
-	 * https://svelte.dev/docs/svelte/$effect#$effect.tracking
+	 * @see {@link https://svelte.dev/docs/svelte/$effect#$effect.tracking Documentation}
 	 */
 	export function tracking(): boolean;
 
@@ -288,20 +317,20 @@ 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>
 	 *
 	 * <button onclick={() => cleanup()}>cleanup</button>
 	 * ```
 	 *
-	 * https://svelte.dev/docs/svelte/$effect#$effect.root
+	 * @see {@link https://svelte.dev/docs/svelte/$effect#$effect.root Documentation}
 	 */
 	export function root(fn: () => void | (() => void)): () => void;
 
@@ -325,6 +354,9 @@ declare namespace $effect {
 	export const prototype: never;
 	/** @deprecated */
 	export const toString: never;
+
+	// needed to keep private stuff private
+	export {};
 }
 
 /**
@@ -334,10 +366,45 @@ declare namespace $effect {
  * let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
  * ```
  *
- * https://svelte.dev/docs/svelte/$props
+ * @see {@link https://svelte.dev/docs/svelte/$props Documentation}
  */
 declare function $props(): any;
 
+declare namespace $props {
+	/**
+	 * Generates an ID that is unique to the current component instance. When hydrating a server-rendered component,
+	 * the value will be consistent between server and client.
+	 *
+	 * This is useful for linking elements via attributes like `for` and `aria-labelledby`.
+	 * @since 5.20.0
+	 */
+	export function id(): string;
+
+	// prevent intellisense from being unhelpful
+	/** @deprecated */
+	export const apply: never;
+	/** @deprecated */
+	// @ts-ignore
+	export const arguments: never;
+	/** @deprecated */
+	export const bind: never;
+	/** @deprecated */
+	export const call: never;
+	/** @deprecated */
+	export const caller: never;
+	/** @deprecated */
+	export const length: never;
+	/** @deprecated */
+	export const name: never;
+	/** @deprecated */
+	export const prototype: never;
+	/** @deprecated */
+	export const toString: never;
+
+	// needed to keep private stuff private
+	export {};
+}
+
 /**
  * Declares a prop as bindable, meaning the parent component can use `bind:propName={value}` to bind to it.
  *
@@ -345,10 +412,36 @@ declare function $props(): any;
  * let { propName = $bindable() }: { propName: boolean } = $props();
  * ```
  *
- * https://svelte.dev/docs/svelte/$bindable
+ * @see {@link https://svelte.dev/docs/svelte/$bindable Documentation}
  */
 declare function $bindable<T>(fallback?: T): T;
 
+declare namespace $bindable {
+	// prevent intellisense from being unhelpful
+	/** @deprecated */
+	export const apply: never;
+	/** @deprecated */
+	// @ts-ignore
+	export const arguments: never;
+	/** @deprecated */
+	export const bind: never;
+	/** @deprecated */
+	export const call: never;
+	/** @deprecated */
+	export const caller: never;
+	/** @deprecated */
+	export const length: never;
+	/** @deprecated */
+	export const name: never;
+	/** @deprecated */
+	export const prototype: never;
+	/** @deprecated */
+	export const toString: never;
+
+	// needed to keep private stuff private
+	export {};
+}
+
 /**
  * Inspects one or more values whenever they, or the properties they contain, change. Example:
  *
@@ -365,7 +458,7 @@ declare function $bindable<T>(fallback?: T): T;
  * $inspect(x, y).with(() => { debugger; });
  * ```
  *
- * https://svelte.dev/docs/svelte/$inspect
+ * @see {@link https://svelte.dev/docs/svelte/$inspect Documentation}
  */
 declare function $inspect<T extends any[]>(
 	...values: T
@@ -387,7 +480,31 @@ declare namespace $inspect {
 	 *   });
 	 * </script>
 	 */
-	export function trace(name: string): void;
+	export function trace(name?: string): void;
+
+	// prevent intellisense from being unhelpful
+	/** @deprecated */
+	export const apply: never;
+	/** @deprecated */
+	// @ts-ignore
+	export const arguments: never;
+	/** @deprecated */
+	export const bind: never;
+	/** @deprecated */
+	export const call: never;
+	/** @deprecated */
+	export const caller: never;
+	/** @deprecated */
+	export const length: never;
+	/** @deprecated */
+	export const name: never;
+	/** @deprecated */
+	export const prototype: never;
+	/** @deprecated */
+	export const toString: never;
+
+	// needed to keep private stuff private
+	export {};
 }
 
 /**
@@ -407,6 +524,32 @@ declare namespace $inspect {
  *
  * Only available inside custom element components, and only on the client-side.
  *
- * https://svelte.dev/docs/svelte/$host
+ * @see {@link https://svelte.dev/docs/svelte/$host Documentation}
  */
 declare function $host<El extends HTMLElement = HTMLElement>(): El;
+
+declare namespace $host {
+	// prevent intellisense from being unhelpful
+	/** @deprecated */
+	export const apply: never;
+	/** @deprecated */
+	// @ts-ignore
+	export const arguments: never;
+	/** @deprecated */
+	export const bind: never;
+	/** @deprecated */
+	export const call: never;
+	/** @deprecated */
+	export const caller: never;
+	/** @deprecated */
+	export const length: never;
+	/** @deprecated */
+	export const name: never;
+	/** @deprecated */
+	export const prototype: never;
+	/** @deprecated */
+	export const toString: never;
+
+	// needed to keep private stuff private
+	export {};
+}
diff --git a/packages/svelte/src/animate/index.js b/packages/svelte/src/animate/index.js
index fbf2ac83e2..2ce7708bc7 100644
--- a/packages/svelte/src/animate/index.js
+++ b/packages/svelte/src/animate/index.js
@@ -11,18 +11,37 @@ import { cubicOut } from '../easing/index.js';
  * @returns {AnimationConfig}
  */
 export function flip(node, { from, to }, params = {}) {
+	var { delay = 0, duration = (d) => Math.sqrt(d) * 120, easing = cubicOut } = params;
+
 	var style = getComputedStyle(node);
-	var zoom = get_zoom(node); // https://drafts.csswg.org/css-viewport/#effective-zoom
 
+	// find the transform origin, expressed as a pair of values between 0 and 1
 	var transform = style.transform === 'none' ? '' : style.transform;
 	var [ox, oy] = style.transformOrigin.split(' ').map(parseFloat);
+	ox /= node.clientWidth;
+	oy /= node.clientHeight;
+
+	// calculate effect of parent transforms and zoom
+	var zoom = get_zoom(node); // https://drafts.csswg.org/css-viewport/#effective-zoom
+	var sx = node.clientWidth / to.width / zoom;
+	var sy = node.clientHeight / to.height / zoom;
+
+	// find the starting position of the transform origin
+	var fx = from.left + from.width * ox;
+	var fy = from.top + from.height * oy;
+
+	// find the ending position of the transform origin
+	var tx = to.left + to.width * ox;
+	var ty = to.top + to.height * oy;
+
+	// find the translation at the start of the transform
+	var dx = (fx - tx) * sx;
+	var dy = (fy - ty) * sy;
+
+	// find the relative scale at the start of the transform
 	var dsx = from.width / to.width;
 	var dsy = from.height / to.height;
 
-	var dx = (from.left + dsx * ox - (to.left + ox)) / zoom;
-	var dy = (from.top + dsy * oy - (to.top + oy)) / zoom;
-	var { delay = 0, duration = (d) => Math.sqrt(d) * 120, easing = cubicOut } = params;
-
 	return {
 		delay,
 		duration: typeof duration === 'function' ? duration(Math.sqrt(dx * dx + dy * dy)) : duration,
@@ -32,7 +51,8 @@ export function flip(node, { from, to }, params = {}) {
 			var y = u * dy;
 			var sx = t + u * dsx;
 			var sy = t + u * dsy;
-			return `transform: ${transform} scale(${sx}, ${sy}) translate(${x}px, ${y}px);`;
+
+			return `transform: ${transform} translate(${x}px, ${y}px) scale(${sx}, ${sy});`;
 		}
 	};
 }
diff --git a/packages/svelte/src/attachments/index.js b/packages/svelte/src/attachments/index.js
new file mode 100644
index 0000000000..b9fde9b6d9
--- /dev/null
+++ b/packages/svelte/src/attachments/index.js
@@ -0,0 +1,113 @@
+/** @import { Action, ActionReturn } from '../action/public' */
+/** @import { Attachment } from './public' */
+import { noop, render_effect } from 'svelte/internal/client';
+import { ATTACHMENT_KEY } from '../constants.js';
+import { untrack } from '../index-client.js';
+import { teardown } from '../internal/client/reactivity/effects.js';
+
+/**
+ * Creates an object key that will be recognised as an attachment when the object is spread onto an element,
+ * as a programmatic alternative to using `{@attach ...}`. This can be useful for library authors, though
+ * is generally not needed when building an app.
+ *
+ * ```svelte
+ * <script>
+ * 	import { createAttachmentKey } from 'svelte/attachments';
+ *
+ * 	const props = {
+ * 		class: 'cool',
+ * 		onclick: () => alert('clicked'),
+ * 		[createAttachmentKey()]: (node) => {
+ * 			node.textContent = 'attached!';
+ * 		}
+ * 	};
+ * </script>
+ *
+ * <button {...props}>click me</button>
+ * ```
+ * @since 5.29
+ */
+export function createAttachmentKey() {
+	return Symbol(ATTACHMENT_KEY);
+}
+
+/**
+ * Converts an [action](https://svelte.dev/docs/svelte/use) into an [attachment](https://svelte.dev/docs/svelte/@attach) keeping the same behavior.
+ * It's useful if you want to start using attachments on components but you have actions provided by a library.
+ *
+ * Note that the second argument, if provided, must be a function that _returns_ the argument to the
+ * action function, not the argument itself.
+ *
+ * ```svelte
+ * <!-- with an action -->
+ * <div use:foo={bar}>...</div>
+ *
+ * <!-- with an attachment -->
+ * <div {@attach fromAction(foo, () => bar)}>...</div>
+ * ```
+ * @template {EventTarget} E
+ * @template {unknown} T
+ * @overload
+ * @param {Action<E, T> | ((element: E, arg: T) => void | ActionReturn<T>)} action The action function
+ * @param {() => T} fn A function that returns the argument for the action
+ * @returns {Attachment<E>}
+ */
+/**
+ * Converts an [action](https://svelte.dev/docs/svelte/use) into an [attachment](https://svelte.dev/docs/svelte/@attach) keeping the same behavior.
+ * It's useful if you want to start using attachments on components but you have actions provided by a library.
+ *
+ * Note that the second argument, if provided, must be a function that _returns_ the argument to the
+ * action function, not the argument itself.
+ *
+ * ```svelte
+ * <!-- with an action -->
+ * <div use:foo={bar}>...</div>
+ *
+ * <!-- with an attachment -->
+ * <div {@attach fromAction(foo, () => bar)}>...</div>
+ * ```
+ * @template {EventTarget} E
+ * @overload
+ * @param {Action<E, void> | ((element: E) => void | ActionReturn<void>)} action The action function
+ * @returns {Attachment<E>}
+ */
+/**
+ * Converts an [action](https://svelte.dev/docs/svelte/use) into an [attachment](https://svelte.dev/docs/svelte/@attach) keeping the same behavior.
+ * It's useful if you want to start using attachments on components but you have actions provided by a library.
+ *
+ * Note that the second argument, if provided, must be a function that _returns_ the argument to the
+ * action function, not the argument itself.
+ *
+ * ```svelte
+ * <!-- with an action -->
+ * <div use:foo={bar}>...</div>
+ *
+ * <!-- with an attachment -->
+ * <div {@attach fromAction(foo, () => bar)}>...</div>
+ * ```
+ *
+ * @template {EventTarget} E
+ * @template {unknown} T
+ * @param {Action<E, T> | ((element: E, arg: T) => void | ActionReturn<T>)} action The action function
+ * @param {() => T} fn A function that returns the argument for the action
+ * @returns {Attachment<E>}
+ * @since 5.32
+ */
+export function fromAction(action, fn = /** @type {() => T} */ (noop)) {
+	return (element) => {
+		const { update, destroy } = untrack(() => action(element, fn()) ?? {});
+
+		if (update) {
+			var ran = false;
+			render_effect(() => {
+				const arg = fn();
+				if (ran) update(arg);
+			});
+			ran = true;
+		}
+
+		if (destroy) {
+			teardown(destroy);
+		}
+	};
+}
diff --git a/packages/svelte/src/attachments/public.d.ts b/packages/svelte/src/attachments/public.d.ts
new file mode 100644
index 0000000000..caf1342d0a
--- /dev/null
+++ b/packages/svelte/src/attachments/public.d.ts
@@ -0,0 +1,12 @@
+/**
+ * An [attachment](https://svelte.dev/docs/svelte/@attach) is a function that runs when an element is mounted
+ * to the DOM, and optionally returns a function that is called when the element is later removed.
+ *
+ * It can be attached to an element with an `{@attach ...}` tag, or by spreading an object containing
+ * a property created with [`createAttachmentKey`](https://svelte.dev/docs/svelte/svelte-attachments#createAttachmentKey).
+ */
+export interface Attachment<T extends EventTarget = Element> {
+	(element: T): void | (() => void);
+}
+
+export * from './index.js';
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index 9ea13e811e..ccb7fe833e 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -15,10 +15,12 @@ class InternalCompileError extends Error {
 	constructor(code, message, position) {
 		super(message);
 		this.stack = ''; // avoid unnecessary noise; don't set it as a class property or it becomes enumerable
+
 		// We want to extend from Error so that various bundler plugins properly handle it.
 		// But we also want to share the same object shape with that of warnings, therefore
 		// we create an instance of the shared class an copy over its properties.
 		this.#diagnostic = new CompileDiagnostic(code, message, position);
+
 		Object.assign(this, this.#diagnostic);
 		this.name = 'CompileError';
 	}
@@ -52,7 +54,7 @@ function e(node, code, message) {
  * @returns {never}
  */
 export function options_invalid_value(node, details) {
-	e(node, "options_invalid_value", `Invalid compiler option: ${details}\nhttps://svelte.dev/e/options_invalid_value`);
+	e(node, 'options_invalid_value', `Invalid compiler option: ${details}\nhttps://svelte.dev/e/options_invalid_value`);
 }
 
 /**
@@ -62,7 +64,7 @@ export function options_invalid_value(node, details) {
  * @returns {never}
  */
 export function options_removed(node, details) {
-	e(node, "options_removed", `Invalid compiler option: ${details}\nhttps://svelte.dev/e/options_removed`);
+	e(node, 'options_removed', `Invalid compiler option: ${details}\nhttps://svelte.dev/e/options_removed`);
 }
 
 /**
@@ -72,7 +74,7 @@ export function options_removed(node, details) {
  * @returns {never}
  */
 export function options_unrecognised(node, keypath) {
-	e(node, "options_unrecognised", `Unrecognised compiler option ${keypath}\nhttps://svelte.dev/e/options_unrecognised`);
+	e(node, 'options_unrecognised', `Unrecognised compiler option ${keypath}\nhttps://svelte.dev/e/options_unrecognised`);
 }
 
 /**
@@ -81,7 +83,7 @@ export function options_unrecognised(node, keypath) {
  * @returns {never}
  */
 export function bindable_invalid_location(node) {
-	e(node, "bindable_invalid_location", `\`$bindable()\` can only be used inside a \`$props()\` declaration\nhttps://svelte.dev/e/bindable_invalid_location`);
+	e(node, 'bindable_invalid_location', `\`$bindable()\` can only be used inside a \`$props()\` declaration\nhttps://svelte.dev/e/bindable_invalid_location`);
 }
 
 /**
@@ -91,7 +93,7 @@ export function bindable_invalid_location(node) {
  * @returns {never}
  */
 export function constant_assignment(node, thing) {
-	e(node, "constant_assignment", `Cannot assign to ${thing}\nhttps://svelte.dev/e/constant_assignment`);
+	e(node, 'constant_assignment', `Cannot assign to ${thing}\nhttps://svelte.dev/e/constant_assignment`);
 }
 
 /**
@@ -101,7 +103,7 @@ export function constant_assignment(node, thing) {
  * @returns {never}
  */
 export function constant_binding(node, thing) {
-	e(node, "constant_binding", `Cannot bind to ${thing}\nhttps://svelte.dev/e/constant_binding`);
+	e(node, 'constant_binding', `Cannot bind to ${thing}\nhttps://svelte.dev/e/constant_binding`);
 }
 
 /**
@@ -111,16 +113,16 @@ export function constant_binding(node, thing) {
  * @returns {never}
  */
 export function declaration_duplicate(node, name) {
-	e(node, "declaration_duplicate", `\`${name}\` has already been declared\nhttps://svelte.dev/e/declaration_duplicate`);
+	e(node, 'declaration_duplicate', `\`${name}\` has already been declared\nhttps://svelte.dev/e/declaration_duplicate`);
 }
 
 /**
- * Cannot declare a variable with the same name as an import inside `<script module>`
+ * Cannot declare a variable with the same name as an import from `<script module>`
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function declaration_duplicate_module_import(node) {
-	e(node, "declaration_duplicate_module_import", `Cannot declare a variable with the same name as an import inside \`<script module>\`\nhttps://svelte.dev/e/declaration_duplicate_module_import`);
+	e(node, 'declaration_duplicate_module_import', `Cannot declare a variable with the same name as an import from \`<script module>\`\nhttps://svelte.dev/e/declaration_duplicate_module_import`);
 }
 
 /**
@@ -129,7 +131,7 @@ export function declaration_duplicate_module_import(node) {
  * @returns {never}
  */
 export function derived_invalid_export(node) {
-	e(node, "derived_invalid_export", `Cannot export derived state from a module. To expose the current derived value, export a function returning its value\nhttps://svelte.dev/e/derived_invalid_export`);
+	e(node, 'derived_invalid_export', `Cannot export derived state from a module. To expose the current derived value, export a function returning its value\nhttps://svelte.dev/e/derived_invalid_export`);
 }
 
 /**
@@ -138,7 +140,7 @@ export function derived_invalid_export(node) {
  * @returns {never}
  */
 export function dollar_binding_invalid(node) {
-	e(node, "dollar_binding_invalid", `The $ name is reserved, and cannot be used for variables and imports\nhttps://svelte.dev/e/dollar_binding_invalid`);
+	e(node, 'dollar_binding_invalid', `The $ name is reserved, and cannot be used for variables and imports\nhttps://svelte.dev/e/dollar_binding_invalid`);
 }
 
 /**
@@ -147,16 +149,26 @@ export function dollar_binding_invalid(node) {
  * @returns {never}
  */
 export function dollar_prefix_invalid(node) {
-	e(node, "dollar_prefix_invalid", `The $ prefix is reserved, and cannot be used for variables and imports\nhttps://svelte.dev/e/dollar_prefix_invalid`);
+	e(node, 'dollar_prefix_invalid', `The $ prefix is reserved, and cannot be used for variables and imports\nhttps://svelte.dev/e/dollar_prefix_invalid`);
 }
 
 /**
- * Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`)
+ * `%name%` has already been declared
+ * @param {null | number | NodeLike} node
+ * @param {string} name
+ * @returns {never}
+ */
+export function duplicate_class_field(node, name) {
+	e(node, 'duplicate_class_field', `\`${name}\` has already been declared\nhttps://svelte.dev/e/duplicate_class_field`);
+}
+
+/**
+ * Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`, or `bind:value={array[i]}` instead of `bind:value={entry}`)
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function each_item_invalid_assignment(node) {
-	e(node, "each_item_invalid_assignment", `Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. \`array[i] = value\` instead of \`entry = value\`)\nhttps://svelte.dev/e/each_item_invalid_assignment`);
+	e(node, 'each_item_invalid_assignment', `Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. \`array[i] = value\` instead of \`entry = value\`, or \`bind:value={array[i]}\` instead of \`bind:value={entry}\`)\nhttps://svelte.dev/e/each_item_invalid_assignment`);
 }
 
 /**
@@ -165,7 +177,16 @@ export function each_item_invalid_assignment(node) {
  * @returns {never}
  */
 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`);
+	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`);
 }
 
 /**
@@ -175,7 +196,7 @@ export function effect_invalid_placement(node) {
  * @returns {never}
  */
 export function export_undefined(node, name) {
-	e(node, "export_undefined", `\`${name}\` is not defined\nhttps://svelte.dev/e/export_undefined`);
+	e(node, 'export_undefined', `\`${name}\` is not defined\nhttps://svelte.dev/e/export_undefined`);
 }
 
 /**
@@ -185,7 +206,7 @@ export function export_undefined(node, name) {
  * @returns {never}
  */
 export function global_reference_invalid(node, name) {
-	e(node, "global_reference_invalid", `\`${name}\` is an illegal variable name. To reference a global variable called \`${name}\`, use \`globalThis.${name}\`\nhttps://svelte.dev/e/global_reference_invalid`);
+	e(node, 'global_reference_invalid', `\`${name}\` is an illegal variable name. To reference a global variable called \`${name}\`, use \`globalThis.${name}\`\nhttps://svelte.dev/e/global_reference_invalid`);
 }
 
 /**
@@ -194,7 +215,7 @@ export function global_reference_invalid(node, name) {
  * @returns {never}
  */
 export function host_invalid_placement(node) {
-	e(node, "host_invalid_placement", `\`$host()\` can only be used inside custom element component instances\nhttps://svelte.dev/e/host_invalid_placement`);
+	e(node, 'host_invalid_placement', `\`$host()\` can only be used inside custom element component instances\nhttps://svelte.dev/e/host_invalid_placement`);
 }
 
 /**
@@ -203,7 +224,7 @@ export function host_invalid_placement(node) {
  * @returns {never}
  */
 export function import_svelte_internal_forbidden(node) {
-	e(node, "import_svelte_internal_forbidden", `Imports of \`svelte/internal/*\` are forbidden. It contains private runtime code which is subject to change without notice. If you're importing from \`svelte/internal/*\` to work around a limitation of Svelte, please open an issue at https://github.com/sveltejs/svelte and explain your use case\nhttps://svelte.dev/e/import_svelte_internal_forbidden`);
+	e(node, 'import_svelte_internal_forbidden', `Imports of \`svelte/internal/*\` are forbidden. It contains private runtime code which is subject to change without notice. If you're importing from \`svelte/internal/*\` to work around a limitation of Svelte, please open an issue at https://github.com/sveltejs/svelte and explain your use case\nhttps://svelte.dev/e/import_svelte_internal_forbidden`);
 }
 
 /**
@@ -212,7 +233,7 @@ export function import_svelte_internal_forbidden(node) {
  * @returns {never}
  */
 export function inspect_trace_generator(node) {
-	e(node, "inspect_trace_generator", `\`$inspect.trace(...)\` cannot be used inside a generator function\nhttps://svelte.dev/e/inspect_trace_generator`);
+	e(node, 'inspect_trace_generator', `\`$inspect.trace(...)\` cannot be used inside a generator function\nhttps://svelte.dev/e/inspect_trace_generator`);
 }
 
 /**
@@ -221,7 +242,7 @@ export function inspect_trace_generator(node) {
  * @returns {never}
  */
 export function inspect_trace_invalid_placement(node) {
-	e(node, "inspect_trace_invalid_placement", `\`$inspect.trace(...)\` must be the first statement of a function body\nhttps://svelte.dev/e/inspect_trace_invalid_placement`);
+	e(node, 'inspect_trace_invalid_placement', `\`$inspect.trace(...)\` must be the first statement of a function body\nhttps://svelte.dev/e/inspect_trace_invalid_placement`);
 }
 
 /**
@@ -230,7 +251,16 @@ export function inspect_trace_invalid_placement(node) {
  * @returns {never}
  */
 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`);
+	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`);
 }
 
 /**
@@ -239,7 +269,7 @@ export function invalid_arguments_usage(node) {
  * @returns {never}
  */
 export function legacy_export_invalid(node) {
-	e(node, "legacy_export_invalid", `Cannot use \`export let\` in runes mode — use \`$props()\` instead\nhttps://svelte.dev/e/legacy_export_invalid`);
+	e(node, 'legacy_export_invalid', `Cannot use \`export let\` in runes mode — use \`$props()\` instead\nhttps://svelte.dev/e/legacy_export_invalid`);
 }
 
 /**
@@ -248,7 +278,7 @@ export function legacy_export_invalid(node) {
  * @returns {never}
  */
 export function legacy_props_invalid(node) {
-	e(node, "legacy_props_invalid", `Cannot use \`$$props\` in runes mode\nhttps://svelte.dev/e/legacy_props_invalid`);
+	e(node, 'legacy_props_invalid', `Cannot use \`$$props\` in runes mode\nhttps://svelte.dev/e/legacy_props_invalid`);
 }
 
 /**
@@ -257,7 +287,7 @@ export function legacy_props_invalid(node) {
  * @returns {never}
  */
 export function legacy_reactive_statement_invalid(node) {
-	e(node, "legacy_reactive_statement_invalid", `\`$:\` is not allowed in runes mode, use \`$derived\` or \`$effect\` instead\nhttps://svelte.dev/e/legacy_reactive_statement_invalid`);
+	e(node, 'legacy_reactive_statement_invalid', `\`$:\` is not allowed in runes mode, use \`$derived\` or \`$effect\` instead\nhttps://svelte.dev/e/legacy_reactive_statement_invalid`);
 }
 
 /**
@@ -266,7 +296,7 @@ export function legacy_reactive_statement_invalid(node) {
  * @returns {never}
  */
 export function legacy_rest_props_invalid(node) {
-	e(node, "legacy_rest_props_invalid", `Cannot use \`$$restProps\` in runes mode\nhttps://svelte.dev/e/legacy_rest_props_invalid`);
+	e(node, 'legacy_rest_props_invalid', `Cannot use \`$$restProps\` in runes mode\nhttps://svelte.dev/e/legacy_rest_props_invalid`);
 }
 
 /**
@@ -275,16 +305,26 @@ export function legacy_rest_props_invalid(node) {
  * @returns {never}
  */
 export function module_illegal_default_export(node) {
-	e(node, "module_illegal_default_export", `A component cannot have a default export\nhttps://svelte.dev/e/module_illegal_default_export`);
+	e(node, 'module_illegal_default_export', `A component cannot have a default export\nhttps://svelte.dev/e/module_illegal_default_export`);
+}
+
+/**
+ * Cannot use `%rune%()` more than once
+ * @param {null | number | NodeLike} node
+ * @param {string} rune
+ * @returns {never}
+ */
+export function props_duplicate(node, rune) {
+	e(node, 'props_duplicate', `Cannot use \`${rune}()\` more than once\nhttps://svelte.dev/e/props_duplicate`);
 }
 
 /**
- * Cannot use `$props()` more than once
+ * `$props.id()` can only be used at the top level of components as a variable declaration initializer
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
-export function props_duplicate(node) {
-	e(node, "props_duplicate", `Cannot use \`$props()\` more than once\nhttps://svelte.dev/e/props_duplicate`);
+export function props_id_invalid_placement(node) {
+	e(node, 'props_id_invalid_placement', `\`$props.id()\` can only be used at the top level of components as a variable declaration initializer\nhttps://svelte.dev/e/props_id_invalid_placement`);
 }
 
 /**
@@ -293,7 +333,7 @@ export function props_duplicate(node) {
  * @returns {never}
  */
 export function props_illegal_name(node) {
-	e(node, "props_illegal_name", `Declaring or accessing a prop starting with \`$$\` is illegal (they are reserved for Svelte internals)\nhttps://svelte.dev/e/props_illegal_name`);
+	e(node, 'props_illegal_name', `Declaring or accessing a prop starting with \`$$\` is illegal (they are reserved for Svelte internals)\nhttps://svelte.dev/e/props_illegal_name`);
 }
 
 /**
@@ -302,7 +342,7 @@ export function props_illegal_name(node) {
  * @returns {never}
  */
 export function props_invalid_identifier(node) {
-	e(node, "props_invalid_identifier", `\`$props()\` can only be used with an object destructuring pattern\nhttps://svelte.dev/e/props_invalid_identifier`);
+	e(node, 'props_invalid_identifier', `\`$props()\` can only be used with an object destructuring pattern\nhttps://svelte.dev/e/props_invalid_identifier`);
 }
 
 /**
@@ -311,7 +351,7 @@ export function props_invalid_identifier(node) {
  * @returns {never}
  */
 export function props_invalid_pattern(node) {
-	e(node, "props_invalid_pattern", `\`$props()\` assignment must not contain nested properties or computed keys\nhttps://svelte.dev/e/props_invalid_pattern`);
+	e(node, 'props_invalid_pattern', `\`$props()\` assignment must not contain nested properties or computed keys\nhttps://svelte.dev/e/props_invalid_pattern`);
 }
 
 /**
@@ -320,7 +360,7 @@ export function props_invalid_pattern(node) {
  * @returns {never}
  */
 export function props_invalid_placement(node) {
-	e(node, "props_invalid_placement", `\`$props()\` can only be used at the top level of components as a variable declaration initializer\nhttps://svelte.dev/e/props_invalid_placement`);
+	e(node, 'props_invalid_placement', `\`$props()\` can only be used at the top level of components as a variable declaration initializer\nhttps://svelte.dev/e/props_invalid_placement`);
 }
 
 /**
@@ -330,7 +370,7 @@ export function props_invalid_placement(node) {
  * @returns {never}
  */
 export function reactive_declaration_cycle(node, cycle) {
-	e(node, "reactive_declaration_cycle", `Cyclical dependency detected: ${cycle}\nhttps://svelte.dev/e/reactive_declaration_cycle`);
+	e(node, 'reactive_declaration_cycle', `Cyclical dependency detected: ${cycle}\nhttps://svelte.dev/e/reactive_declaration_cycle`);
 }
 
 /**
@@ -340,7 +380,7 @@ export function reactive_declaration_cycle(node, cycle) {
  * @returns {never}
  */
 export function rune_invalid_arguments(node, rune) {
-	e(node, "rune_invalid_arguments", `\`${rune}\` cannot be called with arguments\nhttps://svelte.dev/e/rune_invalid_arguments`);
+	e(node, 'rune_invalid_arguments', `\`${rune}\` cannot be called with arguments\nhttps://svelte.dev/e/rune_invalid_arguments`);
 }
 
 /**
@@ -351,7 +391,7 @@ export function rune_invalid_arguments(node, rune) {
  * @returns {never}
  */
 export function rune_invalid_arguments_length(node, rune, args) {
-	e(node, "rune_invalid_arguments_length", `\`${rune}\` must be called with ${args}\nhttps://svelte.dev/e/rune_invalid_arguments_length`);
+	e(node, 'rune_invalid_arguments_length', `\`${rune}\` must be called with ${args}\nhttps://svelte.dev/e/rune_invalid_arguments_length`);
 }
 
 /**
@@ -360,7 +400,7 @@ export function rune_invalid_arguments_length(node, rune, args) {
  * @returns {never}
  */
 export function rune_invalid_computed_property(node) {
-	e(node, "rune_invalid_computed_property", `Cannot access a computed property of a rune\nhttps://svelte.dev/e/rune_invalid_computed_property`);
+	e(node, 'rune_invalid_computed_property', `Cannot access a computed property of a rune\nhttps://svelte.dev/e/rune_invalid_computed_property`);
 }
 
 /**
@@ -370,7 +410,17 @@ export function rune_invalid_computed_property(node) {
  * @returns {never}
  */
 export function rune_invalid_name(node, name) {
-	e(node, "rune_invalid_name", `\`${name}\` is not a valid rune\nhttps://svelte.dev/e/rune_invalid_name`);
+	e(node, 'rune_invalid_name', `\`${name}\` is not a valid rune\nhttps://svelte.dev/e/rune_invalid_name`);
+}
+
+/**
+ * `%rune%` cannot be called with a spread argument
+ * @param {null | number | NodeLike} node
+ * @param {string} rune
+ * @returns {never}
+ */
+export function rune_invalid_spread(node, rune) {
+	e(node, 'rune_invalid_spread', `\`${rune}\` cannot be called with a spread argument\nhttps://svelte.dev/e/rune_invalid_spread`);
 }
 
 /**
@@ -380,7 +430,7 @@ export function rune_invalid_name(node, name) {
  * @returns {never}
  */
 export function rune_invalid_usage(node, rune) {
-	e(node, "rune_invalid_usage", `Cannot use \`${rune}\` rune in non-runes mode\nhttps://svelte.dev/e/rune_invalid_usage`);
+	e(node, 'rune_invalid_usage', `Cannot use \`${rune}\` rune in non-runes mode\nhttps://svelte.dev/e/rune_invalid_usage`);
 }
 
 /**
@@ -389,7 +439,7 @@ export function rune_invalid_usage(node, rune) {
  * @returns {never}
  */
 export function rune_missing_parentheses(node) {
-	e(node, "rune_missing_parentheses", `Cannot use rune without parentheses\nhttps://svelte.dev/e/rune_missing_parentheses`);
+	e(node, 'rune_missing_parentheses', `Cannot use rune without parentheses\nhttps://svelte.dev/e/rune_missing_parentheses`);
 }
 
 /**
@@ -399,7 +449,7 @@ export function rune_missing_parentheses(node) {
  * @returns {never}
  */
 export function rune_removed(node, name) {
-	e(node, "rune_removed", `The \`${name}\` rune has been removed\nhttps://svelte.dev/e/rune_removed`);
+	e(node, 'rune_removed', `The \`${name}\` rune has been removed\nhttps://svelte.dev/e/rune_removed`);
 }
 
 /**
@@ -410,7 +460,7 @@ export function rune_removed(node, name) {
  * @returns {never}
  */
 export function rune_renamed(node, name, replacement) {
-	e(node, "rune_renamed", `\`${name}\` is now \`${replacement}\`\nhttps://svelte.dev/e/rune_renamed`);
+	e(node, 'rune_renamed', `\`${name}\` is now \`${replacement}\`\nhttps://svelte.dev/e/rune_renamed`);
 }
 
 /**
@@ -420,7 +470,7 @@ export function rune_renamed(node, name, replacement) {
  * @returns {never}
  */
 export function runes_mode_invalid_import(node, name) {
-	e(node, "runes_mode_invalid_import", `${name} cannot be used in runes mode\nhttps://svelte.dev/e/runes_mode_invalid_import`);
+	e(node, 'runes_mode_invalid_import', `${name} cannot be used in runes mode\nhttps://svelte.dev/e/runes_mode_invalid_import`);
 }
 
 /**
@@ -429,7 +479,7 @@ export function runes_mode_invalid_import(node, name) {
  * @returns {never}
  */
 export function snippet_invalid_export(node) {
-	e(node, "snippet_invalid_export", `An exported snippet can only reference things declared in a \`<script module>\`, or other exportable snippets\nhttps://svelte.dev/e/snippet_invalid_export`);
+	e(node, 'snippet_invalid_export', `An exported snippet can only reference things declared in a \`<script module>\`, or other exportable snippets\nhttps://svelte.dev/e/snippet_invalid_export`);
 }
 
 /**
@@ -438,7 +488,26 @@ export function snippet_invalid_export(node) {
  * @returns {never}
  */
 export function snippet_parameter_assignment(node) {
-	e(node, "snippet_parameter_assignment", `Cannot reassign or bind to snippet parameter\nhttps://svelte.dev/e/snippet_parameter_assignment`);
+	e(node, 'snippet_parameter_assignment', `Cannot reassign or bind to snippet parameter\nhttps://svelte.dev/e/snippet_parameter_assignment`);
+}
+
+/**
+ * `%name%` has already been declared on this class
+ * @param {null | number | NodeLike} node
+ * @param {string} name
+ * @returns {never}
+ */
+export function state_field_duplicate(node, name) {
+	e(node, 'state_field_duplicate', `\`${name}\` has already been declared on this class\nhttps://svelte.dev/e/state_field_duplicate`);
+}
+
+/**
+ * Cannot assign to a state field before its declaration
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function state_field_invalid_assignment(node) {
+	e(node, 'state_field_invalid_assignment', `Cannot assign to a state field before its declaration\nhttps://svelte.dev/e/state_field_invalid_assignment`);
 }
 
 /**
@@ -447,17 +516,17 @@ export function snippet_parameter_assignment(node) {
  * @returns {never}
  */
 export function state_invalid_export(node) {
-	e(node, "state_invalid_export", `Cannot export state from a module if it is reassigned. Either export a function returning the state value or only mutate the state value's properties\nhttps://svelte.dev/e/state_invalid_export`);
+	e(node, 'state_invalid_export', `Cannot export state from a module if it is reassigned. Either export a function returning the state value or only mutate the state value's properties\nhttps://svelte.dev/e/state_invalid_export`);
 }
 
 /**
- * `%rune%(...)` can only be used as a variable declaration initializer or a class field
+ * `%rune%(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.
  * @param {null | number | NodeLike} node
  * @param {string} rune
  * @returns {never}
  */
 export function state_invalid_placement(node, rune) {
-	e(node, "state_invalid_placement", `\`${rune}(...)\` can only be used as a variable declaration initializer or a class field\nhttps://svelte.dev/e/state_invalid_placement`);
+	e(node, 'state_invalid_placement', `\`${rune}(...)\` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.\nhttps://svelte.dev/e/state_invalid_placement`);
 }
 
 /**
@@ -466,7 +535,7 @@ export function state_invalid_placement(node, rune) {
  * @returns {never}
  */
 export function store_invalid_scoped_subscription(node) {
-	e(node, "store_invalid_scoped_subscription", `Cannot subscribe to stores that are not declared at the top level of the component\nhttps://svelte.dev/e/store_invalid_scoped_subscription`);
+	e(node, 'store_invalid_scoped_subscription', `Cannot subscribe to stores that are not declared at the top level of the component\nhttps://svelte.dev/e/store_invalid_scoped_subscription`);
 }
 
 /**
@@ -475,7 +544,7 @@ export function store_invalid_scoped_subscription(node) {
  * @returns {never}
  */
 export function store_invalid_subscription(node) {
-	e(node, "store_invalid_subscription", `Cannot reference store value inside \`<script module>\`\nhttps://svelte.dev/e/store_invalid_subscription`);
+	e(node, 'store_invalid_subscription', `Cannot reference store value inside \`<script module>\`\nhttps://svelte.dev/e/store_invalid_subscription`);
 }
 
 /**
@@ -484,7 +553,7 @@ export function store_invalid_subscription(node) {
  * @returns {never}
  */
 export function store_invalid_subscription_module(node) {
-	e(node, "store_invalid_subscription_module", `Cannot reference store value outside a \`.svelte\` file\nhttps://svelte.dev/e/store_invalid_subscription_module`);
+	e(node, 'store_invalid_subscription_module', `Cannot reference store value outside a \`.svelte\` file\nhttps://svelte.dev/e/store_invalid_subscription_module`);
 }
 
 /**
@@ -494,7 +563,7 @@ export function store_invalid_subscription_module(node) {
  * @returns {never}
  */
 export function typescript_invalid_feature(node, feature) {
-	e(node, "typescript_invalid_feature", `TypeScript language features like ${feature} are not natively supported, and their use is generally discouraged. Outside of \`<script>\` tags, these features are not supported. For use within \`<script>\` tags, you will need to use a preprocessor to convert it to JavaScript before it gets passed to the Svelte compiler. If you are using \`vitePreprocess\`, make sure to specifically enable preprocessing script tags (\`vitePreprocess({ script: true })\`)\nhttps://svelte.dev/e/typescript_invalid_feature`);
+	e(node, 'typescript_invalid_feature', `TypeScript language features like ${feature} are not natively supported, and their use is generally discouraged. Outside of \`<script>\` tags, these features are not supported. For use within \`<script>\` tags, you will need to use a preprocessor to convert it to JavaScript before it gets passed to the Svelte compiler. If you are using \`vitePreprocess\`, make sure to specifically enable preprocessing script tags (\`vitePreprocess({ script: true })\`)\nhttps://svelte.dev/e/typescript_invalid_feature`);
 }
 
 /**
@@ -503,7 +572,7 @@ export function typescript_invalid_feature(node, feature) {
  * @returns {never}
  */
 export function css_empty_declaration(node) {
-	e(node, "css_empty_declaration", `Declaration cannot be empty\nhttps://svelte.dev/e/css_empty_declaration`);
+	e(node, 'css_empty_declaration', `Declaration cannot be empty\nhttps://svelte.dev/e/css_empty_declaration`);
 }
 
 /**
@@ -512,7 +581,7 @@ export function css_empty_declaration(node) {
  * @returns {never}
  */
 export function css_expected_identifier(node) {
-	e(node, "css_expected_identifier", `Expected a valid CSS identifier\nhttps://svelte.dev/e/css_expected_identifier`);
+	e(node, 'css_expected_identifier', `Expected a valid CSS identifier\nhttps://svelte.dev/e/css_expected_identifier`);
 }
 
 /**
@@ -522,7 +591,7 @@ export function css_expected_identifier(node) {
  * @returns {never}
  */
 export function css_global_block_invalid_combinator(node, name) {
-	e(node, "css_global_block_invalid_combinator", `A \`:global\` selector cannot follow a \`${name}\` combinator\nhttps://svelte.dev/e/css_global_block_invalid_combinator`);
+	e(node, 'css_global_block_invalid_combinator', `A \`:global\` selector cannot follow a \`${name}\` combinator\nhttps://svelte.dev/e/css_global_block_invalid_combinator`);
 }
 
 /**
@@ -531,16 +600,16 @@ export function css_global_block_invalid_combinator(node, name) {
  * @returns {never}
  */
 export function css_global_block_invalid_declaration(node) {
-	e(node, "css_global_block_invalid_declaration", `A top-level \`:global {...}\` block can only contain rules, not declarations\nhttps://svelte.dev/e/css_global_block_invalid_declaration`);
+	e(node, 'css_global_block_invalid_declaration', `A top-level \`:global {...}\` block can only contain rules, not declarations\nhttps://svelte.dev/e/css_global_block_invalid_declaration`);
 }
 
 /**
- * A `:global` selector cannot be part of a selector list with more than one item
+ * A `:global` selector cannot be part of a selector list with entries that don't contain `:global`
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function css_global_block_invalid_list(node) {
-	e(node, "css_global_block_invalid_list", `A \`:global\` selector cannot be part of a selector list with more than one item\nhttps://svelte.dev/e/css_global_block_invalid_list`);
+	e(node, 'css_global_block_invalid_list', `A \`:global\` selector cannot be part of a selector list with entries that don't contain \`:global\`\nhttps://svelte.dev/e/css_global_block_invalid_list`);
 }
 
 /**
@@ -549,7 +618,7 @@ export function css_global_block_invalid_list(node) {
  * @returns {never}
  */
 export function css_global_block_invalid_modifier(node) {
-	e(node, "css_global_block_invalid_modifier", `A \`:global\` selector cannot modify an existing selector\nhttps://svelte.dev/e/css_global_block_invalid_modifier`);
+	e(node, 'css_global_block_invalid_modifier', `A \`:global\` selector cannot modify an existing selector\nhttps://svelte.dev/e/css_global_block_invalid_modifier`);
 }
 
 /**
@@ -558,7 +627,16 @@ export function css_global_block_invalid_modifier(node) {
  * @returns {never}
  */
 export function css_global_block_invalid_modifier_start(node) {
-	e(node, "css_global_block_invalid_modifier_start", `A \`:global\` selector can only be modified if it is a descendant of other selectors\nhttps://svelte.dev/e/css_global_block_invalid_modifier_start`);
+	e(node, 'css_global_block_invalid_modifier_start', `A \`:global\` selector can only be modified if it is a descendant of other selectors\nhttps://svelte.dev/e/css_global_block_invalid_modifier_start`);
+}
+
+/**
+ * A `:global` selector cannot be inside a pseudoclass
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function css_global_block_invalid_placement(node) {
+	e(node, 'css_global_block_invalid_placement', `A \`:global\` selector cannot be inside a pseudoclass\nhttps://svelte.dev/e/css_global_block_invalid_placement`);
 }
 
 /**
@@ -567,7 +645,7 @@ export function css_global_block_invalid_modifier_start(node) {
  * @returns {never}
  */
 export function css_global_invalid_placement(node) {
-	e(node, "css_global_invalid_placement", `\`:global(...)\` can be at the start or end of a selector sequence, but not in the middle\nhttps://svelte.dev/e/css_global_invalid_placement`);
+	e(node, 'css_global_invalid_placement', `\`:global(...)\` can be at the start or end of a selector sequence, but not in the middle\nhttps://svelte.dev/e/css_global_invalid_placement`);
 }
 
 /**
@@ -576,7 +654,7 @@ export function css_global_invalid_placement(node) {
  * @returns {never}
  */
 export function css_global_invalid_selector(node) {
-	e(node, "css_global_invalid_selector", `\`:global(...)\` must contain exactly one selector\nhttps://svelte.dev/e/css_global_invalid_selector`);
+	e(node, 'css_global_invalid_selector', `\`:global(...)\` must contain exactly one selector\nhttps://svelte.dev/e/css_global_invalid_selector`);
 }
 
 /**
@@ -585,7 +663,7 @@ export function css_global_invalid_selector(node) {
  * @returns {never}
  */
 export function css_global_invalid_selector_list(node) {
-	e(node, "css_global_invalid_selector_list", `\`:global(...)\` must not contain type or universal selectors when used in a compound selector\nhttps://svelte.dev/e/css_global_invalid_selector_list`);
+	e(node, 'css_global_invalid_selector_list', `\`:global(...)\` must not contain type or universal selectors when used in a compound selector\nhttps://svelte.dev/e/css_global_invalid_selector_list`);
 }
 
 /**
@@ -594,7 +672,7 @@ export function css_global_invalid_selector_list(node) {
  * @returns {never}
  */
 export function css_nesting_selector_invalid_placement(node) {
-	e(node, "css_nesting_selector_invalid_placement", `Nesting selectors can only be used inside a rule or as the first selector inside a lone \`:global(...)\`\nhttps://svelte.dev/e/css_nesting_selector_invalid_placement`);
+	e(node, 'css_nesting_selector_invalid_placement', `Nesting selectors can only be used inside a rule or as the first selector inside a lone \`:global(...)\`\nhttps://svelte.dev/e/css_nesting_selector_invalid_placement`);
 }
 
 /**
@@ -603,7 +681,7 @@ export function css_nesting_selector_invalid_placement(node) {
  * @returns {never}
  */
 export function css_selector_invalid(node) {
-	e(node, "css_selector_invalid", `Invalid selector\nhttps://svelte.dev/e/css_selector_invalid`);
+	e(node, 'css_selector_invalid', `Invalid selector\nhttps://svelte.dev/e/css_selector_invalid`);
 }
 
 /**
@@ -612,7 +690,7 @@ export function css_selector_invalid(node) {
  * @returns {never}
  */
 export function css_type_selector_invalid_placement(node) {
-	e(node, "css_type_selector_invalid_placement", `\`:global(...)\` must not be followed by a type selector\nhttps://svelte.dev/e/css_type_selector_invalid_placement`);
+	e(node, 'css_type_selector_invalid_placement', `\`:global(...)\` must not be followed by a type selector\nhttps://svelte.dev/e/css_type_selector_invalid_placement`);
 }
 
 /**
@@ -621,7 +699,7 @@ export function css_type_selector_invalid_placement(node) {
  * @returns {never}
  */
 export function animation_duplicate(node) {
-	e(node, "animation_duplicate", `An element can only have one 'animate' directive\nhttps://svelte.dev/e/animation_duplicate`);
+	e(node, 'animation_duplicate', `An element can only have one 'animate' directive\nhttps://svelte.dev/e/animation_duplicate`);
 }
 
 /**
@@ -630,7 +708,7 @@ export function animation_duplicate(node) {
  * @returns {never}
  */
 export function animation_invalid_placement(node) {
-	e(node, "animation_invalid_placement", `An element that uses the \`animate:\` directive must be the only child of a keyed \`{#each ...}\` block\nhttps://svelte.dev/e/animation_invalid_placement`);
+	e(node, 'animation_invalid_placement', `An element that uses the \`animate:\` directive must be the only child of a keyed \`{#each ...}\` block\nhttps://svelte.dev/e/animation_invalid_placement`);
 }
 
 /**
@@ -639,7 +717,7 @@ export function animation_invalid_placement(node) {
  * @returns {never}
  */
 export function animation_missing_key(node) {
-	e(node, "animation_missing_key", `An element that uses the \`animate:\` directive must be the only child of a keyed \`{#each ...}\` block. Did you forget to add a key to your each block?\nhttps://svelte.dev/e/animation_missing_key`);
+	e(node, 'animation_missing_key', `An element that uses the \`animate:\` directive must be the only child of a keyed \`{#each ...}\` block. Did you forget to add a key to your each block?\nhttps://svelte.dev/e/animation_missing_key`);
 }
 
 /**
@@ -648,7 +726,7 @@ export function animation_missing_key(node) {
  * @returns {never}
  */
 export function attribute_contenteditable_dynamic(node) {
-	e(node, "attribute_contenteditable_dynamic", `'contenteditable' attribute cannot be dynamic if element uses two-way binding\nhttps://svelte.dev/e/attribute_contenteditable_dynamic`);
+	e(node, 'attribute_contenteditable_dynamic', `'contenteditable' attribute cannot be dynamic if element uses two-way binding\nhttps://svelte.dev/e/attribute_contenteditable_dynamic`);
 }
 
 /**
@@ -657,7 +735,7 @@ export function attribute_contenteditable_dynamic(node) {
  * @returns {never}
  */
 export function attribute_contenteditable_missing(node) {
-	e(node, "attribute_contenteditable_missing", `'contenteditable' attribute is required for textContent, innerHTML and innerText two-way bindings\nhttps://svelte.dev/e/attribute_contenteditable_missing`);
+	e(node, 'attribute_contenteditable_missing', `'contenteditable' attribute is required for textContent, innerHTML and innerText two-way bindings\nhttps://svelte.dev/e/attribute_contenteditable_missing`);
 }
 
 /**
@@ -666,7 +744,7 @@ export function attribute_contenteditable_missing(node) {
  * @returns {never}
  */
 export function attribute_duplicate(node) {
-	e(node, "attribute_duplicate", `Attributes need to be unique\nhttps://svelte.dev/e/attribute_duplicate`);
+	e(node, 'attribute_duplicate', `Attributes need to be unique\nhttps://svelte.dev/e/attribute_duplicate`);
 }
 
 /**
@@ -675,7 +753,7 @@ export function attribute_duplicate(node) {
  * @returns {never}
  */
 export function attribute_empty_shorthand(node) {
-	e(node, "attribute_empty_shorthand", `Attribute shorthand cannot be empty\nhttps://svelte.dev/e/attribute_empty_shorthand`);
+	e(node, 'attribute_empty_shorthand', `Attribute shorthand cannot be empty\nhttps://svelte.dev/e/attribute_empty_shorthand`);
 }
 
 /**
@@ -684,7 +762,7 @@ export function attribute_empty_shorthand(node) {
  * @returns {never}
  */
 export function attribute_invalid_event_handler(node) {
-	e(node, "attribute_invalid_event_handler", `Event attribute must be a JavaScript expression, not a string\nhttps://svelte.dev/e/attribute_invalid_event_handler`);
+	e(node, 'attribute_invalid_event_handler', `Event attribute must be a JavaScript expression, not a string\nhttps://svelte.dev/e/attribute_invalid_event_handler`);
 }
 
 /**
@@ -693,7 +771,7 @@ export function attribute_invalid_event_handler(node) {
  * @returns {never}
  */
 export function attribute_invalid_multiple(node) {
-	e(node, "attribute_invalid_multiple", `'multiple' attribute must be static if select uses two-way binding\nhttps://svelte.dev/e/attribute_invalid_multiple`);
+	e(node, 'attribute_invalid_multiple', `'multiple' attribute must be static if select uses two-way binding\nhttps://svelte.dev/e/attribute_invalid_multiple`);
 }
 
 /**
@@ -703,16 +781,16 @@ export function attribute_invalid_multiple(node) {
  * @returns {never}
  */
 export function attribute_invalid_name(node, name) {
-	e(node, "attribute_invalid_name", `'${name}' is not a valid attribute name\nhttps://svelte.dev/e/attribute_invalid_name`);
+	e(node, 'attribute_invalid_name', `'${name}' is not a valid attribute name\nhttps://svelte.dev/e/attribute_invalid_name`);
 }
 
 /**
- * Sequence expressions are not allowed as attribute/directive values in runes mode, unless wrapped in parentheses
+ * Comma-separated expressions are not allowed as attribute/directive values in runes mode, unless wrapped in parentheses
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function attribute_invalid_sequence_expression(node) {
-	e(node, "attribute_invalid_sequence_expression", `Sequence expressions are not allowed as attribute/directive values in runes mode, unless wrapped in parentheses\nhttps://svelte.dev/e/attribute_invalid_sequence_expression`);
+	e(node, 'attribute_invalid_sequence_expression', `Comma-separated expressions are not allowed as attribute/directive values in runes mode, unless wrapped in parentheses\nhttps://svelte.dev/e/attribute_invalid_sequence_expression`);
 }
 
 /**
@@ -721,7 +799,7 @@ export function attribute_invalid_sequence_expression(node) {
  * @returns {never}
  */
 export function attribute_invalid_type(node) {
-	e(node, "attribute_invalid_type", `'type' attribute must be a static text value if input uses two-way binding\nhttps://svelte.dev/e/attribute_invalid_type`);
+	e(node, 'attribute_invalid_type', `'type' attribute must be a static text value if input uses two-way binding\nhttps://svelte.dev/e/attribute_invalid_type`);
 }
 
 /**
@@ -730,7 +808,7 @@ export function attribute_invalid_type(node) {
  * @returns {never}
  */
 export function attribute_unquoted_sequence(node) {
-	e(node, "attribute_unquoted_sequence", `Attribute values containing \`{...}\` must be enclosed in quote marks, unless the value only contains the expression\nhttps://svelte.dev/e/attribute_unquoted_sequence`);
+	e(node, 'attribute_unquoted_sequence', `Attribute values containing \`{...}\` must be enclosed in quote marks, unless the value only contains the expression\nhttps://svelte.dev/e/attribute_unquoted_sequence`);
 }
 
 /**
@@ -739,7 +817,16 @@ export function attribute_unquoted_sequence(node) {
  * @returns {never}
  */
 export function bind_group_invalid_expression(node) {
-	e(node, "bind_group_invalid_expression", `\`bind:group\` can only bind to an Identifier or MemberExpression\nhttps://svelte.dev/e/bind_group_invalid_expression`);
+	e(node, 'bind_group_invalid_expression', `\`bind:group\` can only bind to an Identifier or MemberExpression\nhttps://svelte.dev/e/bind_group_invalid_expression`);
+}
+
+/**
+ * Cannot `bind:group` to a snippet parameter
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function bind_group_invalid_snippet_parameter(node) {
+	e(node, 'bind_group_invalid_snippet_parameter', `Cannot \`bind:group\` to a snippet parameter\nhttps://svelte.dev/e/bind_group_invalid_snippet_parameter`);
 }
 
 /**
@@ -748,7 +835,7 @@ export function bind_group_invalid_expression(node) {
  * @returns {never}
  */
 export function bind_invalid_expression(node) {
-	e(node, "bind_invalid_expression", `Can only bind to an Identifier or MemberExpression or a \`{get, set}\` pair\nhttps://svelte.dev/e/bind_invalid_expression`);
+	e(node, 'bind_invalid_expression', `Can only bind to an Identifier or MemberExpression or a \`{get, set}\` pair\nhttps://svelte.dev/e/bind_invalid_expression`);
 }
 
 /**
@@ -759,7 +846,9 @@ export function bind_invalid_expression(node) {
  * @returns {never}
  */
 export function bind_invalid_name(node, name, explanation) {
-	e(node, "bind_invalid_name", `${explanation ? `\`bind:${name}\` is not a valid binding. ${explanation}` : `\`bind:${name}\` is not a valid binding`}\nhttps://svelte.dev/e/bind_invalid_name`);
+	e(node, 'bind_invalid_name', `${explanation
+		? `\`bind:${name}\` is not a valid binding. ${explanation}`
+		: `\`bind:${name}\` is not a valid binding`}\nhttps://svelte.dev/e/bind_invalid_name`);
 }
 
 /**
@@ -769,7 +858,7 @@ export function bind_invalid_name(node, name, explanation) {
  * @returns {never}
  */
 export function bind_invalid_parens(node, name) {
-	e(node, "bind_invalid_parens", `\`bind:${name}={get, set}\` must not have surrounding parentheses\nhttps://svelte.dev/e/bind_invalid_parens`);
+	e(node, 'bind_invalid_parens', `\`bind:${name}={get, set}\` must not have surrounding parentheses\nhttps://svelte.dev/e/bind_invalid_parens`);
 }
 
 /**
@@ -780,7 +869,7 @@ export function bind_invalid_parens(node, name) {
  * @returns {never}
  */
 export function bind_invalid_target(node, name, elements) {
-	e(node, "bind_invalid_target", `\`bind:${name}\` can only be used with ${elements}\nhttps://svelte.dev/e/bind_invalid_target`);
+	e(node, 'bind_invalid_target', `\`bind:${name}\` can only be used with ${elements}\nhttps://svelte.dev/e/bind_invalid_target`);
 }
 
 /**
@@ -789,7 +878,7 @@ export function bind_invalid_target(node, name, elements) {
  * @returns {never}
  */
 export function bind_invalid_value(node) {
-	e(node, "bind_invalid_value", `Can only bind to state or props\nhttps://svelte.dev/e/bind_invalid_value`);
+	e(node, 'bind_invalid_value', `Can only bind to state or props\nhttps://svelte.dev/e/bind_invalid_value`);
 }
 
 /**
@@ -799,7 +888,7 @@ export function bind_invalid_value(node) {
  * @returns {never}
  */
 export function block_duplicate_clause(node, name) {
-	e(node, "block_duplicate_clause", `${name} cannot appear more than once within a block\nhttps://svelte.dev/e/block_duplicate_clause`);
+	e(node, 'block_duplicate_clause', `${name} cannot appear more than once within a block\nhttps://svelte.dev/e/block_duplicate_clause`);
 }
 
 /**
@@ -808,7 +897,7 @@ export function block_duplicate_clause(node, name) {
  * @returns {never}
  */
 export function block_invalid_continuation_placement(node) {
-	e(node, "block_invalid_continuation_placement", `{:...} block is invalid at this position (did you forget to close the preceding element or block?)\nhttps://svelte.dev/e/block_invalid_continuation_placement`);
+	e(node, 'block_invalid_continuation_placement', `{:...} block is invalid at this position (did you forget to close the preceding element or block?)\nhttps://svelte.dev/e/block_invalid_continuation_placement`);
 }
 
 /**
@@ -817,7 +906,7 @@ export function block_invalid_continuation_placement(node) {
  * @returns {never}
  */
 export function block_invalid_elseif(node) {
-	e(node, "block_invalid_elseif", `'elseif' should be 'else if'\nhttps://svelte.dev/e/block_invalid_elseif`);
+	e(node, 'block_invalid_elseif', `'elseif' should be 'else if'\nhttps://svelte.dev/e/block_invalid_elseif`);
 }
 
 /**
@@ -828,7 +917,7 @@ export function block_invalid_elseif(node) {
  * @returns {never}
  */
 export function block_invalid_placement(node, name, location) {
-	e(node, "block_invalid_placement", `{#${name} ...} block cannot be ${location}\nhttps://svelte.dev/e/block_invalid_placement`);
+	e(node, 'block_invalid_placement', `{#${name} ...} block cannot be ${location}\nhttps://svelte.dev/e/block_invalid_placement`);
 }
 
 /**
@@ -837,7 +926,7 @@ export function block_invalid_placement(node, name, location) {
  * @returns {never}
  */
 export function block_unclosed(node) {
-	e(node, "block_unclosed", `Block was left open\nhttps://svelte.dev/e/block_unclosed`);
+	e(node, 'block_unclosed', `Block was left open\nhttps://svelte.dev/e/block_unclosed`);
 }
 
 /**
@@ -847,7 +936,7 @@ export function block_unclosed(node) {
  * @returns {never}
  */
 export function block_unexpected_character(node, character) {
-	e(node, "block_unexpected_character", `Expected a \`${character}\` character immediately following the opening bracket\nhttps://svelte.dev/e/block_unexpected_character`);
+	e(node, 'block_unexpected_character', `Expected a \`${character}\` character immediately following the opening bracket\nhttps://svelte.dev/e/block_unexpected_character`);
 }
 
 /**
@@ -856,7 +945,7 @@ export function block_unexpected_character(node, character) {
  * @returns {never}
  */
 export function block_unexpected_close(node) {
-	e(node, "block_unexpected_close", `Unexpected block closing tag\nhttps://svelte.dev/e/block_unexpected_close`);
+	e(node, 'block_unexpected_close', `Unexpected block closing tag\nhttps://svelte.dev/e/block_unexpected_close`);
 }
 
 /**
@@ -865,7 +954,7 @@ export function block_unexpected_close(node) {
  * @returns {never}
  */
 export function component_invalid_directive(node) {
-	e(node, "component_invalid_directive", `This type of directive is not valid on components\nhttps://svelte.dev/e/component_invalid_directive`);
+	e(node, 'component_invalid_directive', `This type of directive is not valid on components\nhttps://svelte.dev/e/component_invalid_directive`);
 }
 
 /**
@@ -875,7 +964,7 @@ export function component_invalid_directive(node) {
  * @returns {never}
  */
 export function const_tag_cycle(node, cycle) {
-	e(node, "const_tag_cycle", `Cyclical dependency detected: ${cycle}\nhttps://svelte.dev/e/const_tag_cycle`);
+	e(node, 'const_tag_cycle', `Cyclical dependency detected: ${cycle}\nhttps://svelte.dev/e/const_tag_cycle`);
 }
 
 /**
@@ -884,16 +973,26 @@ export function const_tag_cycle(node, cycle) {
  * @returns {never}
  */
 export function const_tag_invalid_expression(node) {
-	e(node, "const_tag_invalid_expression", `{@const ...} must consist of a single variable declaration\nhttps://svelte.dev/e/const_tag_invalid_expression`);
+	e(node, 'const_tag_invalid_expression', `{@const ...} must consist of a single variable declaration\nhttps://svelte.dev/e/const_tag_invalid_expression`);
 }
 
 /**
- * `{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>` or `<Component>`
+ * `{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>`, `<svelte:boundary>` or `<Component>`
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function const_tag_invalid_placement(node) {
-	e(node, "const_tag_invalid_placement", `\`{@const}\` must be the immediate child of \`{#snippet}\`, \`{#if}\`, \`{:else if}\`, \`{:else}\`, \`{#each}\`, \`{:then}\`, \`{:catch}\`, \`<svelte:fragment>\` or \`<Component>\`\nhttps://svelte.dev/e/const_tag_invalid_placement`);
+	e(node, 'const_tag_invalid_placement', `\`{@const}\` must be the immediate child of \`{#snippet}\`, \`{#if}\`, \`{:else if}\`, \`{:else}\`, \`{#each}\`, \`{:then}\`, \`{:catch}\`, \`<svelte:fragment>\`, \`<svelte:boundary>\` or \`<Component>\`\nhttps://svelte.dev/e/const_tag_invalid_placement`);
+}
+
+/**
+ * The `{@const %name% = ...}` declaration is not available in this snippet
+ * @param {null | number | NodeLike} node
+ * @param {string} name
+ * @returns {never}
+ */
+export function const_tag_invalid_reference(node, name) {
+	e(node, 'const_tag_invalid_reference', `The \`{@const ${name} = ...}\` declaration is not available in this snippet\nhttps://svelte.dev/e/const_tag_invalid_reference`);
 }
 
 /**
@@ -902,7 +1001,25 @@ export function const_tag_invalid_placement(node) {
  * @returns {never}
  */
 export function debug_tag_invalid_arguments(node) {
-	e(node, "debug_tag_invalid_arguments", `{@debug ...} arguments must be identifiers, not arbitrary expressions\nhttps://svelte.dev/e/debug_tag_invalid_arguments`);
+	e(node, 'debug_tag_invalid_arguments', `{@debug ...} arguments must be identifiers, not arbitrary expressions\nhttps://svelte.dev/e/debug_tag_invalid_arguments`);
+}
+
+/**
+ * Declaration tags must be `let` or `const` declarations
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function declaration_tag_invalid_type(node) {
+	e(node, 'declaration_tag_invalid_type', `Declaration tags must be \`let\` or \`const\` declarations\nhttps://svelte.dev/e/declaration_tag_invalid_type`);
+}
+
+/**
+ * Declaration tags cannot be used in legacy mode
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function declaration_tag_no_legacy_mode(node) {
+	e(node, 'declaration_tag_no_legacy_mode', `Declaration tags cannot be used in legacy mode\nhttps://svelte.dev/e/declaration_tag_no_legacy_mode`);
 }
 
 /**
@@ -911,7 +1028,7 @@ export function debug_tag_invalid_arguments(node) {
  * @returns {never}
  */
 export function directive_invalid_value(node) {
-	e(node, "directive_invalid_value", `Directive value must be a JavaScript expression enclosed in curly braces\nhttps://svelte.dev/e/directive_invalid_value`);
+	e(node, 'directive_invalid_value', `Directive value must be a JavaScript expression enclosed in curly braces\nhttps://svelte.dev/e/directive_invalid_value`);
 }
 
 /**
@@ -921,7 +1038,16 @@ export function directive_invalid_value(node) {
  * @returns {never}
  */
 export function directive_missing_name(node, type) {
-	e(node, "directive_missing_name", `\`${type}\` name cannot be empty\nhttps://svelte.dev/e/directive_missing_name`);
+	e(node, 'directive_missing_name', `\`${type}\` name cannot be empty\nhttps://svelte.dev/e/directive_missing_name`);
+}
+
+/**
+ * An `{#each ...}` block without an `as` clause cannot have a key
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function each_key_without_as(node) {
+	e(node, 'each_key_without_as', `An \`{#each ...}\` block without an \`as\` clause cannot have a key\nhttps://svelte.dev/e/each_key_without_as`);
 }
 
 /**
@@ -931,7 +1057,7 @@ export function directive_missing_name(node, type) {
  * @returns {never}
  */
 export function element_invalid_closing_tag(node, name) {
-	e(node, "element_invalid_closing_tag", `\`</${name}>\` attempted to close an element that was not open\nhttps://svelte.dev/e/element_invalid_closing_tag`);
+	e(node, 'element_invalid_closing_tag', `\`</${name}>\` attempted to close an element that was not open\nhttps://svelte.dev/e/element_invalid_closing_tag`);
 }
 
 /**
@@ -942,7 +1068,7 @@ export function element_invalid_closing_tag(node, name) {
  * @returns {never}
  */
 export function element_invalid_closing_tag_autoclosed(node, name, reason) {
-	e(node, "element_invalid_closing_tag_autoclosed", `\`</${name}>\` attempted to close element that was already automatically closed by \`<${reason}>\` (cannot nest \`<${reason}>\` inside \`<${name}>\`)\nhttps://svelte.dev/e/element_invalid_closing_tag_autoclosed`);
+	e(node, 'element_invalid_closing_tag_autoclosed', `\`</${name}>\` attempted to close element that was already automatically closed by \`<${reason}>\` (cannot nest \`<${reason}>\` inside \`<${name}>\`)\nhttps://svelte.dev/e/element_invalid_closing_tag_autoclosed`);
 }
 
 /**
@@ -952,7 +1078,7 @@ export function element_invalid_closing_tag_autoclosed(node, name, reason) {
  * @returns {never}
  */
 export function element_unclosed(node, name) {
-	e(node, "element_unclosed", `\`<${name}>\` was left open\nhttps://svelte.dev/e/element_unclosed`);
+	e(node, 'element_unclosed', `\`<${name}>\` was left open\nhttps://svelte.dev/e/element_unclosed`);
 }
 
 /**
@@ -961,7 +1087,7 @@ export function element_unclosed(node, name) {
  * @returns {never}
  */
 export function event_handler_invalid_component_modifier(node) {
-	e(node, "event_handler_invalid_component_modifier", `Event modifiers other than 'once' can only be used on DOM elements\nhttps://svelte.dev/e/event_handler_invalid_component_modifier`);
+	e(node, 'event_handler_invalid_component_modifier', `Event modifiers other than 'once' can only be used on DOM elements\nhttps://svelte.dev/e/event_handler_invalid_component_modifier`);
 }
 
 /**
@@ -971,7 +1097,7 @@ export function event_handler_invalid_component_modifier(node) {
  * @returns {never}
  */
 export function event_handler_invalid_modifier(node, list) {
-	e(node, "event_handler_invalid_modifier", `Valid event modifiers are ${list}\nhttps://svelte.dev/e/event_handler_invalid_modifier`);
+	e(node, 'event_handler_invalid_modifier', `Valid event modifiers are ${list}\nhttps://svelte.dev/e/event_handler_invalid_modifier`);
 }
 
 /**
@@ -982,7 +1108,7 @@ export function event_handler_invalid_modifier(node, list) {
  * @returns {never}
  */
 export function event_handler_invalid_modifier_combination(node, modifier1, modifier2) {
-	e(node, "event_handler_invalid_modifier_combination", `The '${modifier1}' and '${modifier2}' modifiers cannot be used together\nhttps://svelte.dev/e/event_handler_invalid_modifier_combination`);
+	e(node, 'event_handler_invalid_modifier_combination', `The '${modifier1}' and '${modifier2}' modifiers cannot be used together\nhttps://svelte.dev/e/event_handler_invalid_modifier_combination`);
 }
 
 /**
@@ -991,7 +1117,7 @@ export function event_handler_invalid_modifier_combination(node, modifier1, modi
  * @returns {never}
  */
 export function expected_attribute_value(node) {
-	e(node, "expected_attribute_value", `Expected attribute value\nhttps://svelte.dev/e/expected_attribute_value`);
+	e(node, 'expected_attribute_value', `Expected attribute value\nhttps://svelte.dev/e/expected_attribute_value`);
 }
 
 /**
@@ -1000,7 +1126,7 @@ export function expected_attribute_value(node) {
  * @returns {never}
  */
 export function expected_block_type(node) {
-	e(node, "expected_block_type", `Expected 'if', 'each', 'await', 'key' or 'snippet'\nhttps://svelte.dev/e/expected_block_type`);
+	e(node, 'expected_block_type', `Expected 'if', 'each', 'await', 'key' or 'snippet'\nhttps://svelte.dev/e/expected_block_type`);
 }
 
 /**
@@ -1009,7 +1135,7 @@ export function expected_block_type(node) {
  * @returns {never}
  */
 export function expected_identifier(node) {
-	e(node, "expected_identifier", `Expected an identifier\nhttps://svelte.dev/e/expected_identifier`);
+	e(node, 'expected_identifier', `Expected an identifier\nhttps://svelte.dev/e/expected_identifier`);
 }
 
 /**
@@ -1018,7 +1144,16 @@ export function expected_identifier(node) {
  * @returns {never}
  */
 export function expected_pattern(node) {
-	e(node, "expected_pattern", `Expected identifier or destructure pattern\nhttps://svelte.dev/e/expected_pattern`);
+	e(node, 'expected_pattern', `Expected identifier or destructure pattern\nhttps://svelte.dev/e/expected_pattern`);
+}
+
+/**
+ * Expected 'html', 'render', 'attach', 'const', or 'debug'
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function expected_tag(node) {
+	e(node, 'expected_tag', `Expected 'html', 'render', 'attach', 'const', or 'debug'\nhttps://svelte.dev/e/expected_tag`);
 }
 
 /**
@@ -1028,7 +1163,7 @@ export function expected_pattern(node) {
  * @returns {never}
  */
 export function expected_token(node, token) {
-	e(node, "expected_token", `Expected token ${token}\nhttps://svelte.dev/e/expected_token`);
+	e(node, 'expected_token', `Expected token ${token}\nhttps://svelte.dev/e/expected_token`);
 }
 
 /**
@@ -1037,7 +1172,16 @@ export function expected_token(node, token) {
  * @returns {never}
  */
 export function expected_whitespace(node) {
-	e(node, "expected_whitespace", `Expected whitespace\nhttps://svelte.dev/e/expected_whitespace`);
+	e(node, 'expected_whitespace', `Expected whitespace\nhttps://svelte.dev/e/expected_whitespace`);
+}
+
+/**
+ * `use:`, `transition:` and `animate:` directives, attachments and bindings do not support await expressions
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function illegal_await_expression(node) {
+	e(node, 'illegal_await_expression', `\`use:\`, \`transition:\` and \`animate:\` directives, attachments and bindings do not support await expressions\nhttps://svelte.dev/e/illegal_await_expression`);
 }
 
 /**
@@ -1047,7 +1191,7 @@ export function expected_whitespace(node) {
  * @returns {never}
  */
 export function illegal_element_attribute(node, name) {
-	e(node, "illegal_element_attribute", `\`<${name}>\` does not support non-event attributes or spread attributes\nhttps://svelte.dev/e/illegal_element_attribute`);
+	e(node, 'illegal_element_attribute', `\`<${name}>\` does not support non-event attributes or spread attributes\nhttps://svelte.dev/e/illegal_element_attribute`);
 }
 
 /**
@@ -1057,7 +1201,7 @@ export function illegal_element_attribute(node, name) {
  * @returns {never}
  */
 export function js_parse_error(node, message) {
-	e(node, "js_parse_error", `${message}\nhttps://svelte.dev/e/js_parse_error`);
+	e(node, 'js_parse_error', `${message}\nhttps://svelte.dev/e/js_parse_error`);
 }
 
 /**
@@ -1066,7 +1210,7 @@ export function js_parse_error(node, message) {
  * @returns {never}
  */
 export function let_directive_invalid_placement(node) {
-	e(node, "let_directive_invalid_placement", `\`let:\` directive at invalid position\nhttps://svelte.dev/e/let_directive_invalid_placement`);
+	e(node, 'let_directive_invalid_placement', `\`let:\` directive at invalid position\nhttps://svelte.dev/e/let_directive_invalid_placement`);
 }
 
 /**
@@ -1076,7 +1220,7 @@ export function let_directive_invalid_placement(node) {
  * @returns {never}
  */
 export function mixed_event_handler_syntaxes(node, name) {
-	e(node, "mixed_event_handler_syntaxes", `Mixing old (on:${name}) and new syntaxes for event handling is not allowed. Use only the on${name} syntax\nhttps://svelte.dev/e/mixed_event_handler_syntaxes`);
+	e(node, 'mixed_event_handler_syntaxes', `Mixing old (on:${name}) and new syntaxes for event handling is not allowed. Use only the on${name} syntax\nhttps://svelte.dev/e/mixed_event_handler_syntaxes`);
 }
 
 /**
@@ -1086,7 +1230,7 @@ export function mixed_event_handler_syntaxes(node, name) {
  * @returns {never}
  */
 export function node_invalid_placement(node, message) {
-	e(node, "node_invalid_placement", `${message}. The browser will 'repair' the HTML (by moving, removing, or inserting elements) which breaks Svelte's assumptions about the structure of your components.\nhttps://svelte.dev/e/node_invalid_placement`);
+	e(node, 'node_invalid_placement', `${message}. The browser will 'repair' the HTML (by moving, removing, or inserting elements) which breaks Svelte's assumptions about the structure of your components.\nhttps://svelte.dev/e/node_invalid_placement`);
 }
 
 /**
@@ -1095,7 +1239,7 @@ export function node_invalid_placement(node, message) {
  * @returns {never}
  */
 export function render_tag_invalid_call_expression(node) {
-	e(node, "render_tag_invalid_call_expression", `Calling a snippet function using apply, bind or call is not allowed\nhttps://svelte.dev/e/render_tag_invalid_call_expression`);
+	e(node, 'render_tag_invalid_call_expression', `Calling a snippet function using apply, bind or call is not allowed\nhttps://svelte.dev/e/render_tag_invalid_call_expression`);
 }
 
 /**
@@ -1104,7 +1248,7 @@ export function render_tag_invalid_call_expression(node) {
  * @returns {never}
  */
 export function render_tag_invalid_expression(node) {
-	e(node, "render_tag_invalid_expression", `\`{@render ...}\` tags can only contain call expressions\nhttps://svelte.dev/e/render_tag_invalid_expression`);
+	e(node, 'render_tag_invalid_expression', `\`{@render ...}\` tags can only contain call expressions\nhttps://svelte.dev/e/render_tag_invalid_expression`);
 }
 
 /**
@@ -1113,7 +1257,7 @@ export function render_tag_invalid_expression(node) {
  * @returns {never}
  */
 export function render_tag_invalid_spread_argument(node) {
-	e(node, "render_tag_invalid_spread_argument", `cannot use spread arguments in \`{@render ...}\` tags\nhttps://svelte.dev/e/render_tag_invalid_spread_argument`);
+	e(node, 'render_tag_invalid_spread_argument', `cannot use spread arguments in \`{@render ...}\` tags\nhttps://svelte.dev/e/render_tag_invalid_spread_argument`);
 }
 
 /**
@@ -1122,7 +1266,7 @@ export function render_tag_invalid_spread_argument(node) {
  * @returns {never}
  */
 export function script_duplicate(node) {
-	e(node, "script_duplicate", `A component can have a single top-level \`<script>\` element and/or a single top-level \`<script module>\` element\nhttps://svelte.dev/e/script_duplicate`);
+	e(node, 'script_duplicate', `A component can have a single top-level \`<script>\` element and/or a single top-level \`<script module>\` element\nhttps://svelte.dev/e/script_duplicate`);
 }
 
 /**
@@ -1132,7 +1276,7 @@ export function script_duplicate(node) {
  * @returns {never}
  */
 export function script_invalid_attribute_value(node, name) {
-	e(node, "script_invalid_attribute_value", `If the \`${name}\` attribute is supplied, it must be a boolean attribute\nhttps://svelte.dev/e/script_invalid_attribute_value`);
+	e(node, 'script_invalid_attribute_value', `If the \`${name}\` attribute is supplied, it must be a boolean attribute\nhttps://svelte.dev/e/script_invalid_attribute_value`);
 }
 
 /**
@@ -1141,7 +1285,7 @@ export function script_invalid_attribute_value(node, name) {
  * @returns {never}
  */
 export function script_invalid_context(node) {
-	e(node, "script_invalid_context", `If the context attribute is supplied, its value must be "module"\nhttps://svelte.dev/e/script_invalid_context`);
+	e(node, 'script_invalid_context', `If the context attribute is supplied, its value must be "module"\nhttps://svelte.dev/e/script_invalid_context`);
 }
 
 /**
@@ -1151,7 +1295,7 @@ export function script_invalid_context(node) {
  * @returns {never}
  */
 export function script_reserved_attribute(node, name) {
-	e(node, "script_reserved_attribute", `The \`${name}\` attribute is reserved and cannot be used\nhttps://svelte.dev/e/script_reserved_attribute`);
+	e(node, 'script_reserved_attribute', `The \`${name}\` attribute is reserved and cannot be used\nhttps://svelte.dev/e/script_reserved_attribute`);
 }
 
 /**
@@ -1162,7 +1306,7 @@ export function script_reserved_attribute(node, name) {
  * @returns {never}
  */
 export function slot_attribute_duplicate(node, name, component) {
-	e(node, "slot_attribute_duplicate", `Duplicate slot name '${name}' in <${component}>\nhttps://svelte.dev/e/slot_attribute_duplicate`);
+	e(node, 'slot_attribute_duplicate', `Duplicate slot name '${name}' in <${component}>\nhttps://svelte.dev/e/slot_attribute_duplicate`);
 }
 
 /**
@@ -1171,7 +1315,7 @@ export function slot_attribute_duplicate(node, name, component) {
  * @returns {never}
  */
 export function slot_attribute_invalid(node) {
-	e(node, "slot_attribute_invalid", `slot attribute must be a static value\nhttps://svelte.dev/e/slot_attribute_invalid`);
+	e(node, 'slot_attribute_invalid', `slot attribute must be a static value\nhttps://svelte.dev/e/slot_attribute_invalid`);
 }
 
 /**
@@ -1180,7 +1324,7 @@ export function slot_attribute_invalid(node) {
  * @returns {never}
  */
 export function slot_attribute_invalid_placement(node) {
-	e(node, "slot_attribute_invalid_placement", `Element with a slot='...' attribute must be a child of a component or a descendant of a custom element\nhttps://svelte.dev/e/slot_attribute_invalid_placement`);
+	e(node, 'slot_attribute_invalid_placement', `Element with a slot='...' attribute must be a child of a component or a descendant of a custom element\nhttps://svelte.dev/e/slot_attribute_invalid_placement`);
 }
 
 /**
@@ -1189,7 +1333,7 @@ export function slot_attribute_invalid_placement(node) {
  * @returns {never}
  */
 export function slot_default_duplicate(node) {
-	e(node, "slot_default_duplicate", `Found default slot content alongside an explicit slot="default"\nhttps://svelte.dev/e/slot_default_duplicate`);
+	e(node, 'slot_default_duplicate', `Found default slot content alongside an explicit slot="default"\nhttps://svelte.dev/e/slot_default_duplicate`);
 }
 
 /**
@@ -1198,7 +1342,7 @@ export function slot_default_duplicate(node) {
  * @returns {never}
  */
 export function slot_element_invalid_attribute(node) {
-	e(node, "slot_element_invalid_attribute", `\`<slot>\` can only receive attributes and (optionally) let directives\nhttps://svelte.dev/e/slot_element_invalid_attribute`);
+	e(node, 'slot_element_invalid_attribute', `\`<slot>\` can only receive attributes and (optionally) let directives\nhttps://svelte.dev/e/slot_element_invalid_attribute`);
 }
 
 /**
@@ -1207,7 +1351,7 @@ export function slot_element_invalid_attribute(node) {
  * @returns {never}
  */
 export function slot_element_invalid_name(node) {
-	e(node, "slot_element_invalid_name", `slot attribute must be a static value\nhttps://svelte.dev/e/slot_element_invalid_name`);
+	e(node, 'slot_element_invalid_name', `slot attribute must be a static value\nhttps://svelte.dev/e/slot_element_invalid_name`);
 }
 
 /**
@@ -1216,7 +1360,7 @@ export function slot_element_invalid_name(node) {
  * @returns {never}
  */
 export function slot_element_invalid_name_default(node) {
-	e(node, "slot_element_invalid_name_default", `\`default\` is a reserved word — it cannot be used as a slot name\nhttps://svelte.dev/e/slot_element_invalid_name_default`);
+	e(node, 'slot_element_invalid_name_default', `\`default\` is a reserved word — it cannot be used as a slot name\nhttps://svelte.dev/e/slot_element_invalid_name_default`);
 }
 
 /**
@@ -1225,7 +1369,7 @@ export function slot_element_invalid_name_default(node) {
  * @returns {never}
  */
 export function slot_snippet_conflict(node) {
-	e(node, "slot_snippet_conflict", `Cannot use \`<slot>\` syntax and \`{@render ...}\` tags in the same component. Migrate towards \`{@render ...}\` tags completely\nhttps://svelte.dev/e/slot_snippet_conflict`);
+	e(node, 'slot_snippet_conflict', `Cannot use \`<slot>\` syntax and \`{@render ...}\` tags in the same component. Migrate towards \`{@render ...}\` tags completely\nhttps://svelte.dev/e/slot_snippet_conflict`);
 }
 
 /**
@@ -1234,7 +1378,7 @@ export function slot_snippet_conflict(node) {
  * @returns {never}
  */
 export function snippet_conflict(node) {
-	e(node, "snippet_conflict", `Cannot use explicit children snippet at the same time as implicit children content. Remove either the non-whitespace content or the children snippet block\nhttps://svelte.dev/e/snippet_conflict`);
+	e(node, 'snippet_conflict', `Cannot use explicit children snippet at the same time as implicit children content. Remove either the non-whitespace content or the children snippet block\nhttps://svelte.dev/e/snippet_conflict`);
 }
 
 /**
@@ -1243,7 +1387,7 @@ export function snippet_conflict(node) {
  * @returns {never}
  */
 export function snippet_invalid_rest_parameter(node) {
-	e(node, "snippet_invalid_rest_parameter", `Snippets do not support rest parameters; use an array instead\nhttps://svelte.dev/e/snippet_invalid_rest_parameter`);
+	e(node, 'snippet_invalid_rest_parameter', `Snippets do not support rest parameters; use an array instead\nhttps://svelte.dev/e/snippet_invalid_rest_parameter`);
 }
 
 /**
@@ -1253,7 +1397,7 @@ export function snippet_invalid_rest_parameter(node) {
  * @returns {never}
  */
 export function snippet_shadowing_prop(node, prop) {
-	e(node, "snippet_shadowing_prop", `This snippet is shadowing the prop \`${prop}\` with the same name\nhttps://svelte.dev/e/snippet_shadowing_prop`);
+	e(node, 'snippet_shadowing_prop', `This snippet is shadowing the prop \`${prop}\` with the same name\nhttps://svelte.dev/e/snippet_shadowing_prop`);
 }
 
 /**
@@ -1262,7 +1406,7 @@ export function snippet_shadowing_prop(node, prop) {
  * @returns {never}
  */
 export function style_directive_invalid_modifier(node) {
-	e(node, "style_directive_invalid_modifier", `\`style:\` directive can only use the \`important\` modifier\nhttps://svelte.dev/e/style_directive_invalid_modifier`);
+	e(node, 'style_directive_invalid_modifier', `\`style:\` directive can only use the \`important\` modifier\nhttps://svelte.dev/e/style_directive_invalid_modifier`);
 }
 
 /**
@@ -1271,7 +1415,7 @@ export function style_directive_invalid_modifier(node) {
  * @returns {never}
  */
 export function style_duplicate(node) {
-	e(node, "style_duplicate", `A component can have a single top-level \`<style>\` element\nhttps://svelte.dev/e/style_duplicate`);
+	e(node, 'style_duplicate', `A component can have a single top-level \`<style>\` element\nhttps://svelte.dev/e/style_duplicate`);
 }
 
 /**
@@ -1280,7 +1424,7 @@ export function style_duplicate(node) {
  * @returns {never}
  */
 export function svelte_body_illegal_attribute(node) {
-	e(node, "svelte_body_illegal_attribute", `\`<svelte:body>\` does not support non-event attributes or spread attributes\nhttps://svelte.dev/e/svelte_body_illegal_attribute`);
+	e(node, 'svelte_body_illegal_attribute', `\`<svelte:body>\` does not support non-event attributes or spread attributes\nhttps://svelte.dev/e/svelte_body_illegal_attribute`);
 }
 
 /**
@@ -1289,7 +1433,7 @@ export function svelte_body_illegal_attribute(node) {
  * @returns {never}
  */
 export function svelte_boundary_invalid_attribute(node) {
-	e(node, "svelte_boundary_invalid_attribute", `Valid attributes on \`<svelte:boundary>\` are \`onerror\` and \`failed\`\nhttps://svelte.dev/e/svelte_boundary_invalid_attribute`);
+	e(node, 'svelte_boundary_invalid_attribute', `Valid attributes on \`<svelte:boundary>\` are \`onerror\` and \`failed\`\nhttps://svelte.dev/e/svelte_boundary_invalid_attribute`);
 }
 
 /**
@@ -1298,7 +1442,7 @@ export function svelte_boundary_invalid_attribute(node) {
  * @returns {never}
  */
 export function svelte_boundary_invalid_attribute_value(node) {
-	e(node, "svelte_boundary_invalid_attribute_value", `Attribute value must be a non-string expression\nhttps://svelte.dev/e/svelte_boundary_invalid_attribute_value`);
+	e(node, 'svelte_boundary_invalid_attribute_value', `Attribute value must be a non-string expression\nhttps://svelte.dev/e/svelte_boundary_invalid_attribute_value`);
 }
 
 /**
@@ -1307,7 +1451,7 @@ export function svelte_boundary_invalid_attribute_value(node) {
  * @returns {never}
  */
 export function svelte_component_invalid_this(node) {
-	e(node, "svelte_component_invalid_this", `Invalid component definition — must be an \`{expression}\`\nhttps://svelte.dev/e/svelte_component_invalid_this`);
+	e(node, 'svelte_component_invalid_this', `Invalid component definition — must be an \`{expression}\`\nhttps://svelte.dev/e/svelte_component_invalid_this`);
 }
 
 /**
@@ -1316,7 +1460,7 @@ export function svelte_component_invalid_this(node) {
  * @returns {never}
  */
 export function svelte_component_missing_this(node) {
-	e(node, "svelte_component_missing_this", `\`<svelte:component>\` must have a 'this' attribute\nhttps://svelte.dev/e/svelte_component_missing_this`);
+	e(node, 'svelte_component_missing_this', `\`<svelte:component>\` must have a 'this' attribute\nhttps://svelte.dev/e/svelte_component_missing_this`);
 }
 
 /**
@@ -1325,7 +1469,7 @@ export function svelte_component_missing_this(node) {
  * @returns {never}
  */
 export function svelte_element_missing_this(node) {
-	e(node, "svelte_element_missing_this", `\`<svelte:element>\` must have a 'this' attribute with a value\nhttps://svelte.dev/e/svelte_element_missing_this`);
+	e(node, 'svelte_element_missing_this', `\`<svelte:element>\` must have a 'this' attribute with a value\nhttps://svelte.dev/e/svelte_element_missing_this`);
 }
 
 /**
@@ -1334,7 +1478,7 @@ export function svelte_element_missing_this(node) {
  * @returns {never}
  */
 export function svelte_fragment_invalid_attribute(node) {
-	e(node, "svelte_fragment_invalid_attribute", `\`<svelte:fragment>\` can only have a slot attribute and (optionally) a let: directive\nhttps://svelte.dev/e/svelte_fragment_invalid_attribute`);
+	e(node, 'svelte_fragment_invalid_attribute', `\`<svelte:fragment>\` can only have a slot attribute and (optionally) a let: directive\nhttps://svelte.dev/e/svelte_fragment_invalid_attribute`);
 }
 
 /**
@@ -1343,7 +1487,7 @@ export function svelte_fragment_invalid_attribute(node) {
  * @returns {never}
  */
 export function svelte_fragment_invalid_placement(node) {
-	e(node, "svelte_fragment_invalid_placement", `\`<svelte:fragment>\` must be the direct child of a component\nhttps://svelte.dev/e/svelte_fragment_invalid_placement`);
+	e(node, 'svelte_fragment_invalid_placement', `\`<svelte:fragment>\` must be the direct child of a component\nhttps://svelte.dev/e/svelte_fragment_invalid_placement`);
 }
 
 /**
@@ -1352,7 +1496,7 @@ export function svelte_fragment_invalid_placement(node) {
  * @returns {never}
  */
 export function svelte_head_illegal_attribute(node) {
-	e(node, "svelte_head_illegal_attribute", `\`<svelte:head>\` cannot have attributes nor directives\nhttps://svelte.dev/e/svelte_head_illegal_attribute`);
+	e(node, 'svelte_head_illegal_attribute', `\`<svelte:head>\` cannot have attributes nor directives\nhttps://svelte.dev/e/svelte_head_illegal_attribute`);
 }
 
 /**
@@ -1362,7 +1506,7 @@ export function svelte_head_illegal_attribute(node) {
  * @returns {never}
  */
 export function svelte_meta_duplicate(node, name) {
-	e(node, "svelte_meta_duplicate", `A component can only have one \`<${name}>\` element\nhttps://svelte.dev/e/svelte_meta_duplicate`);
+	e(node, 'svelte_meta_duplicate', `A component can only have one \`<${name}>\` element\nhttps://svelte.dev/e/svelte_meta_duplicate`);
 }
 
 /**
@@ -1372,7 +1516,7 @@ export function svelte_meta_duplicate(node, name) {
  * @returns {never}
  */
 export function svelte_meta_invalid_content(node, name) {
-	e(node, "svelte_meta_invalid_content", `<${name}> cannot have children\nhttps://svelte.dev/e/svelte_meta_invalid_content`);
+	e(node, 'svelte_meta_invalid_content', `<${name}> cannot have children\nhttps://svelte.dev/e/svelte_meta_invalid_content`);
 }
 
 /**
@@ -1382,7 +1526,7 @@ export function svelte_meta_invalid_content(node, name) {
  * @returns {never}
  */
 export function svelte_meta_invalid_placement(node, name) {
-	e(node, "svelte_meta_invalid_placement", `\`<${name}>\` tags cannot be inside elements or blocks\nhttps://svelte.dev/e/svelte_meta_invalid_placement`);
+	e(node, 'svelte_meta_invalid_placement', `\`<${name}>\` tags cannot be inside elements or blocks\nhttps://svelte.dev/e/svelte_meta_invalid_placement`);
 }
 
 /**
@@ -1392,7 +1536,7 @@ export function svelte_meta_invalid_placement(node, name) {
  * @returns {never}
  */
 export function svelte_meta_invalid_tag(node, list) {
-	e(node, "svelte_meta_invalid_tag", `Valid \`<svelte:...>\` tag names are ${list}\nhttps://svelte.dev/e/svelte_meta_invalid_tag`);
+	e(node, 'svelte_meta_invalid_tag', `Valid \`<svelte:...>\` tag names are ${list}\nhttps://svelte.dev/e/svelte_meta_invalid_tag`);
 }
 
 /**
@@ -1401,7 +1545,7 @@ export function svelte_meta_invalid_tag(node, list) {
  * @returns {never}
  */
 export function svelte_options_deprecated_tag(node) {
-	e(node, "svelte_options_deprecated_tag", `"tag" option is deprecated — use "customElement" instead\nhttps://svelte.dev/e/svelte_options_deprecated_tag`);
+	e(node, 'svelte_options_deprecated_tag', `"tag" option is deprecated — use "customElement" instead\nhttps://svelte.dev/e/svelte_options_deprecated_tag`);
 }
 
 /**
@@ -1410,7 +1554,7 @@ export function svelte_options_deprecated_tag(node) {
  * @returns {never}
  */
 export function svelte_options_invalid_attribute(node) {
-	e(node, "svelte_options_invalid_attribute", `\`<svelte:options>\` can only receive static attributes\nhttps://svelte.dev/e/svelte_options_invalid_attribute`);
+	e(node, 'svelte_options_invalid_attribute', `\`<svelte:options>\` can only receive static attributes\nhttps://svelte.dev/e/svelte_options_invalid_attribute`);
 }
 
 /**
@@ -1420,16 +1564,16 @@ export function svelte_options_invalid_attribute(node) {
  * @returns {never}
  */
 export function svelte_options_invalid_attribute_value(node, list) {
-	e(node, "svelte_options_invalid_attribute_value", `Value must be ${list}, if specified\nhttps://svelte.dev/e/svelte_options_invalid_attribute_value`);
+	e(node, 'svelte_options_invalid_attribute_value', `Value must be ${list}, if specified\nhttps://svelte.dev/e/svelte_options_invalid_attribute_value`);
 }
 
 /**
- * "customElement" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: "open" | "none"; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }
+ * "customElement" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: "open" | "none" | `ShadowRootInit`; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function svelte_options_invalid_customelement(node) {
-	e(node, "svelte_options_invalid_customelement", `"customElement" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: "open" | "none"; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }\nhttps://svelte.dev/e/svelte_options_invalid_customelement`);
+	e(node, 'svelte_options_invalid_customelement', `"customElement" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: "open" | "none" | \`ShadowRootInit\`; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }\nhttps://svelte.dev/e/svelte_options_invalid_customelement`);
 }
 
 /**
@@ -1438,16 +1582,16 @@ export function svelte_options_invalid_customelement(node) {
  * @returns {never}
  */
 export function svelte_options_invalid_customelement_props(node) {
-	e(node, "svelte_options_invalid_customelement_props", `"props" must be a statically analyzable object literal of the form "{ [key: string]: { attribute?: string; reflect?: boolean; type?: "String" | "Boolean" | "Number" | "Array" | "Object" }"\nhttps://svelte.dev/e/svelte_options_invalid_customelement_props`);
+	e(node, 'svelte_options_invalid_customelement_props', `"props" must be a statically analyzable object literal of the form "{ [key: string]: { attribute?: string; reflect?: boolean; type?: "String" | "Boolean" | "Number" | "Array" | "Object" }"\nhttps://svelte.dev/e/svelte_options_invalid_customelement_props`);
 }
 
 /**
- * "shadow" must be either "open" or "none"
+ * "shadow" must be either "open", "none" or `ShadowRootInit` object.
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function svelte_options_invalid_customelement_shadow(node) {
-	e(node, "svelte_options_invalid_customelement_shadow", `"shadow" must be either "open" or "none"\nhttps://svelte.dev/e/svelte_options_invalid_customelement_shadow`);
+	e(node, 'svelte_options_invalid_customelement_shadow', `"shadow" must be either "open", "none" or \`ShadowRootInit\` object.\nhttps://svelte.dev/e/svelte_options_invalid_customelement_shadow`);
 }
 
 /**
@@ -1456,7 +1600,7 @@ export function svelte_options_invalid_customelement_shadow(node) {
  * @returns {never}
  */
 export function svelte_options_invalid_tagname(node) {
-	e(node, "svelte_options_invalid_tagname", `Tag name must be lowercase and hyphenated\nhttps://svelte.dev/e/svelte_options_invalid_tagname`);
+	e(node, 'svelte_options_invalid_tagname', `Tag name must be lowercase and hyphenated\nhttps://svelte.dev/e/svelte_options_invalid_tagname`);
 }
 
 /**
@@ -1465,7 +1609,7 @@ export function svelte_options_invalid_tagname(node) {
  * @returns {never}
  */
 export function svelte_options_reserved_tagname(node) {
-	e(node, "svelte_options_reserved_tagname", `Tag name is reserved\nhttps://svelte.dev/e/svelte_options_reserved_tagname`);
+	e(node, 'svelte_options_reserved_tagname', `Tag name is reserved\nhttps://svelte.dev/e/svelte_options_reserved_tagname`);
 }
 
 /**
@@ -1475,7 +1619,7 @@ export function svelte_options_reserved_tagname(node) {
  * @returns {never}
  */
 export function svelte_options_unknown_attribute(node, name) {
-	e(node, "svelte_options_unknown_attribute", `\`<svelte:options>\` unknown attribute '${name}'\nhttps://svelte.dev/e/svelte_options_unknown_attribute`);
+	e(node, 'svelte_options_unknown_attribute', `\`<svelte:options>\` unknown attribute '${name}'\nhttps://svelte.dev/e/svelte_options_unknown_attribute`);
 }
 
 /**
@@ -1484,7 +1628,7 @@ export function svelte_options_unknown_attribute(node, name) {
  * @returns {never}
  */
 export function svelte_self_invalid_placement(node) {
-	e(node, "svelte_self_invalid_placement", `\`<svelte:self>\` components can only exist inside \`{#if}\` blocks, \`{#each}\` blocks, \`{#snippet}\` blocks or slots passed to components\nhttps://svelte.dev/e/svelte_self_invalid_placement`);
+	e(node, 'svelte_self_invalid_placement', `\`<svelte:self>\` components can only exist inside \`{#if}\` blocks, \`{#each}\` blocks, \`{#snippet}\` blocks or slots passed to components\nhttps://svelte.dev/e/svelte_self_invalid_placement`);
 }
 
 /**
@@ -1493,7 +1637,7 @@ export function svelte_self_invalid_placement(node) {
  * @returns {never}
  */
 export function tag_invalid_name(node) {
-	e(node, "tag_invalid_name", `Expected a valid element or component name. Components must have a valid variable name or dot notation expression\nhttps://svelte.dev/e/tag_invalid_name`);
+	e(node, 'tag_invalid_name', `Expected a valid element or component name. Components must have a valid variable name or dot notation expression\nhttps://svelte.dev/e/tag_invalid_name`);
 }
 
 /**
@@ -1504,7 +1648,7 @@ export function tag_invalid_name(node) {
  * @returns {never}
  */
 export function tag_invalid_placement(node, name, location) {
-	e(node, "tag_invalid_placement", `{@${name} ...} tag cannot be ${location}\nhttps://svelte.dev/e/tag_invalid_placement`);
+	e(node, 'tag_invalid_placement', `{@${name} ...} tag cannot be ${location}\nhttps://svelte.dev/e/tag_invalid_placement`);
 }
 
 /**
@@ -1513,7 +1657,7 @@ export function tag_invalid_placement(node, name, location) {
  * @returns {never}
  */
 export function textarea_invalid_content(node) {
-	e(node, "textarea_invalid_content", `A \`<textarea>\` can have either a value attribute or (equivalently) child content, but not both\nhttps://svelte.dev/e/textarea_invalid_content`);
+	e(node, 'textarea_invalid_content', `A \`<textarea>\` can have either a value attribute or (equivalently) child content, but not both\nhttps://svelte.dev/e/textarea_invalid_content`);
 }
 
 /**
@@ -1522,7 +1666,7 @@ export function textarea_invalid_content(node) {
  * @returns {never}
  */
 export function title_illegal_attribute(node) {
-	e(node, "title_illegal_attribute", `\`<title>\` cannot have attributes nor directives\nhttps://svelte.dev/e/title_illegal_attribute`);
+	e(node, 'title_illegal_attribute', `\`<title>\` cannot have attributes nor directives\nhttps://svelte.dev/e/title_illegal_attribute`);
 }
 
 /**
@@ -1531,7 +1675,7 @@ export function title_illegal_attribute(node) {
  * @returns {never}
  */
 export function title_invalid_content(node) {
-	e(node, "title_invalid_content", `\`<title>\` can only contain text and {tags}\nhttps://svelte.dev/e/title_invalid_content`);
+	e(node, 'title_invalid_content', `\`<title>\` can only contain text and {tags}\nhttps://svelte.dev/e/title_invalid_content`);
 }
 
 /**
@@ -1542,7 +1686,7 @@ export function title_invalid_content(node) {
  * @returns {never}
  */
 export function transition_conflict(node, type, existing) {
-	e(node, "transition_conflict", `Cannot use \`${type}:\` alongside existing \`${existing}:\` directive\nhttps://svelte.dev/e/transition_conflict`);
+	e(node, 'transition_conflict', `Cannot use \`${type}:\` alongside existing \`${existing}:\` directive\nhttps://svelte.dev/e/transition_conflict`);
 }
 
 /**
@@ -1552,7 +1696,7 @@ export function transition_conflict(node, type, existing) {
  * @returns {never}
  */
 export function transition_duplicate(node, type) {
-	e(node, "transition_duplicate", `Cannot use multiple \`${type}:\` directives on a single element\nhttps://svelte.dev/e/transition_duplicate`);
+	e(node, 'transition_duplicate', `Cannot use multiple \`${type}:\` directives on a single element\nhttps://svelte.dev/e/transition_duplicate`);
 }
 
 /**
@@ -1561,7 +1705,7 @@ export function transition_duplicate(node, type) {
  * @returns {never}
  */
 export function unexpected_eof(node) {
-	e(node, "unexpected_eof", `Unexpected end of input\nhttps://svelte.dev/e/unexpected_eof`);
+	e(node, 'unexpected_eof', `Unexpected end of input\nhttps://svelte.dev/e/unexpected_eof`);
 }
 
 /**
@@ -1571,7 +1715,16 @@ export function unexpected_eof(node) {
  * @returns {never}
  */
 export function unexpected_reserved_word(node, word) {
-	e(node, "unexpected_reserved_word", `'${word}' is a reserved word in JavaScript and cannot be used here\nhttps://svelte.dev/e/unexpected_reserved_word`);
+	e(node, 'unexpected_reserved_word', `'${word}' is a reserved word in JavaScript and cannot be used here\nhttps://svelte.dev/e/unexpected_reserved_word`);
+}
+
+/**
+ * Unterminated string constant
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function unterminated_string_constant(node) {
+	e(node, 'unterminated_string_constant', `Unterminated string constant\nhttps://svelte.dev/e/unterminated_string_constant`);
 }
 
 /**
@@ -1580,5 +1733,5 @@ export function unexpected_reserved_word(node, word) {
  * @returns {never}
  */
 export function void_element_invalid_content(node) {
-	e(node, "void_element_invalid_content", `Void elements cannot have children or closing tags\nhttps://svelte.dev/e/void_element_invalid_content`);
+	e(node, 'void_element_invalid_content', `Void elements cannot have children or closing tags\nhttps://svelte.dev/e/void_element_invalid_content`);
 }
\ No newline at end of file
diff --git a/packages/svelte/src/compiler/index.js b/packages/svelte/src/compiler/index.js
index 42427dd9c4..1d822514b9 100644
--- a/packages/svelte/src/compiler/index.js
+++ b/packages/svelte/src/compiler/index.js
@@ -3,14 +3,15 @@
 /** @import { AST } from './public.js' */
 import { walk as zimmerframe_walk } from 'zimmerframe';
 import { convert } from './legacy.js';
-import { parse as parse_acorn } from './phases/1-parse/acorn.js';
-import { parse as _parse } from './phases/1-parse/index.js';
+import { parse as _parse, Parser } from './phases/1-parse/index.js';
 import { remove_typescript_nodes } from './phases/1-parse/remove_typescript_nodes.js';
+import { parse_stylesheet } from './phases/1-parse/read/style.js';
 import { analyze_component, analyze_module } from './phases/2-analyze/index.js';
 import { transform_component, transform_module } from './phases/3-transform/index.js';
 import { validate_component_options, validate_module_options } from './validate-options.js';
 import * as state from './state.js';
 export { default as preprocess } from './preprocess/index.js';
+export { print } from './print/index.js';
 
 /**
  * `compile` converts your `.svelte` source code into a JavaScript module that exports a component
@@ -21,9 +22,9 @@ export { default as preprocess } from './preprocess/index.js';
  */
 export function compile(source, options) {
 	source = remove_bom(source);
-	state.reset_warning_filter(options.warningFilter);
+	state.reset({ warning: options.warningFilter, filename: options.filename });
+
 	const validated = validate_component_options(options, '');
-	state.reset(source, validated);
 
 	let parsed = _parse(source);
 
@@ -33,7 +34,9 @@ export function compile(source, options) {
 	const combined_options = {
 		...validated,
 		...parsed_options,
-		customElementOptions
+		customElementOptions,
+		css: 'css' in parsed_options ? () => parsed_options.css ?? 'external' : validated.css,
+		runes: 'runes' in parsed_options ? () => parsed_options.runes : validated.runes
 	};
 
 	if (parsed.metadata.ts) {
@@ -43,6 +46,11 @@ export function compile(source, options) {
 			instance: parsed.instance && remove_typescript_nodes(parsed.instance),
 			module: parsed.module && remove_typescript_nodes(parsed.module)
 		};
+		if (combined_options.customElementOptions?.extend) {
+			combined_options.customElementOptions.extend = remove_typescript_nodes(
+				combined_options.customElementOptions?.extend
+			);
+		}
 	}
 
 	const analysis = analyze_component(parsed, source, combined_options);
@@ -60,11 +68,10 @@ export function compile(source, options) {
  */
 export function compileModule(source, options) {
 	source = remove_bom(source);
-	state.reset_warning_filter(options.warningFilter);
+	state.reset({ warning: options.warningFilter, filename: options.filename });
 	const validated = validate_module_options(options, '');
-	state.reset(source, validated);
 
-	const analysis = analyze_module(parse_acorn(source, false), validated);
+	const analysis = analyze_module(source, validated);
 	return transform_module(analysis, source, validated);
 }
 
@@ -92,6 +99,7 @@ export function compileModule(source, options) {
  * @returns {Record<string, any>}
  */
 
+// TODO 6.0 remove unused `filename`
 /**
  * The parse function parses a component, returning only its abstract syntax tree.
  *
@@ -100,19 +108,43 @@ export function compileModule(source, options) {
  *
  * The `loose` option, available since 5.13.0, tries to always return an AST even if the input will not successfully compile.
  *
+ * The `filename` option is unused and will be removed in Svelte 6.0.
+ *
  * @param {string} source
  * @param {{ filename?: string; rootDir?: string; modern?: boolean; loose?: boolean }} [options]
  * @returns {AST.Root | LegacyRoot}
  */
-export function parse(source, { filename, rootDir, modern, loose } = {}) {
+export function parse(source, { modern, loose } = {}) {
 	source = remove_bom(source);
-	state.reset_warning_filter(() => false);
-	state.reset(source, { filename: filename ?? '(unknown)', rootDir });
+	state.reset({ warning: () => false, filename: undefined });
 
 	const ast = _parse(source, loose);
 	return to_public_ast(source, ast, modern);
 }
 
+/**
+ * The parseCss function parses a CSS stylesheet, returning its abstract syntax tree.
+ *
+ * @param {string} source The CSS source code
+ * @returns {AST.CSS.StyleSheetFile}
+ */
+export function parseCss(source) {
+	source = remove_bom(source);
+	state.reset({ warning: () => false, filename: undefined });
+
+	state.set_source(source);
+
+	const parser = Parser.forCss(source);
+	const children = parse_stylesheet(parser);
+
+	return {
+		type: 'StyleSheetFile',
+		start: 0,
+		end: source.length,
+		children
+	};
+}
+
 /**
  * @param {string} source
  * @param {AST.Root} ast
diff --git a/packages/svelte/src/compiler/legacy.js b/packages/svelte/src/compiler/legacy.js
index e3f88c8f1d..c51cd8434b 100644
--- a/packages/svelte/src/compiler/legacy.js
+++ b/packages/svelte/src/compiler/legacy.js
@@ -55,7 +55,9 @@ export function convert(source, ast) {
 
 				// Insert svelte:options back into the root nodes
 				if (/** @type {any} */ (options)?.__raw__) {
-					let idx = node.fragment.nodes.findIndex((node) => options.end <= node.start);
+					let idx = node.fragment.nodes.findIndex(
+						(node) => /** @type {any} */ (options).end <= node.start
+					);
 					if (idx === -1) {
 						idx = node.fragment.nodes.length;
 					}
@@ -99,7 +101,12 @@ export function convert(source, ast) {
 					},
 					instance,
 					module,
-					css: ast.css ? visit(ast.css) : undefined
+					css: ast.css ? visit(ast.css) : undefined,
+					// put it on _comments not comments because the latter is checked by prettier and then fails
+					// if we don't adjust stuff accordingly in our prettier plugin, and so it would be kind of an
+					// indirect breaking change for people updating their Svelte version but not their prettier plugin version.
+					// We can keep it as comments for the modern AST because the modern AST is not used in the plugin yet.
+					_comments: ast.comments?.length > 0 ? ast.comments : undefined
 				};
 			},
 			AnimateDirective(node) {
@@ -255,6 +262,10 @@ export function convert(source, ast) {
 				};
 			},
 			// @ts-ignore
+			DeclarationTag(node) {
+				return node;
+			},
+			// @ts-ignore
 			KeyBlock(node, { visit }) {
 				remove_surrounding_whitespace_nodes(node.fragment.nodes);
 				return {
@@ -378,7 +389,8 @@ export function convert(source, ast) {
 					end: node.end,
 					expression: node.expression,
 					parameters: node.parameters,
-					children: node.body.nodes.map((child) => visit(child))
+					children: node.body.nodes.map((child) => visit(child)),
+					typeParams: node.typeParams
 				};
 			},
 			// @ts-expect-error
@@ -450,6 +462,7 @@ export function convert(source, ast) {
 			SpreadAttribute(node) {
 				return { ...node, type: 'Spread' };
 			},
+			// @ts-ignore
 			StyleSheet(node, context) {
 				return {
 					...node,
diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js
index 1bb7a69a20..0370155c12 100644
--- a/packages/svelte/src/compiler/migrate/index.js
+++ b/packages/svelte/src/compiler/migrate/index.js
@@ -1,7 +1,7 @@
 /** @import { VariableDeclarator, Node, Identifier, AssignmentExpression, LabeledStatement, ExpressionStatement } from 'estree' */
 /** @import { Visitors } from 'zimmerframe' */
 /** @import { ComponentAnalysis } from '../phases/types.js' */
-/** @import { Scope, ScopeRoot } from '../phases/scope.js' */
+/** @import { Scope } from '../phases/scope.js' */
 /** @import { AST, Binding, ValidatedCompileOptions } from '#compiler' */
 import MagicString from 'magic-string';
 import { walk } from 'zimmerframe';
@@ -9,7 +9,7 @@ import { parse } from '../phases/1-parse/index.js';
 import { regex_valid_component_name } from '../phases/1-parse/state/element.js';
 import { analyze_component } from '../phases/2-analyze/index.js';
 import { get_rune } from '../phases/scope.js';
-import { reset, reset_warning_filter } from '../state.js';
+import { reset, UNKNOWN_FILENAME } from '../state.js';
 import {
 	extract_identifiers,
 	extract_all_identifiers_from_expression,
@@ -134,8 +134,7 @@ export function migrate(source, { filename, use_ts } = {}) {
 			return start + style_placeholder + end;
 		});
 
-		reset_warning_filter(() => false);
-		reset(source, { filename: filename ?? '(unknown)' });
+		reset({ warning: () => false, filename });
 
 		let parsed = parse(source);
 
@@ -146,7 +145,12 @@ export function migrate(source, { filename, use_ts } = {}) {
 			...validate_component_options({}, ''),
 			...parsed_options,
 			customElementOptions,
-			filename: filename ?? '(unknown)'
+			filename: filename ?? UNKNOWN_FILENAME,
+			css: 'css' in parsed_options ? () => parsed_options.css ?? 'external' : () => 'external',
+			runes: 'runes' in parsed_options ? () => parsed_options.runes : () => undefined,
+			experimental: {
+				async: true
+			}
 		};
 
 		const str = new MagicString(source);
@@ -602,16 +606,16 @@ const instance_script = {
 						'Encountered an export declaration pattern that is not supported for automigration.'
 					);
 					// Turn export let into props. It's really really weird because export let { x: foo, z: [bar]} = ..
-					// means that foo and bar are the props (i.e. the leafs are the prop names), not x and z.
-					// const tmp = state.scope.generate('tmp');
-					// const paths = extract_paths(declarator.id);
+					// means that foo and bar are the props (i.e. the leaves are the prop names), not x and z.
+					// const tmp = b.id(state.scope.generate('tmp'));
+					// const paths = extract_paths(declarator.id, tmp);
 					// state.props_pre.push(
-					// 	b.declaration('const', b.id(tmp), visit(declarator.init!) as Expression)
+					// 	b.declaration('const', tmp, visit(declarator.init!) as Expression)
 					// );
 					// for (const path of paths) {
 					// 	const name = (path.node as Identifier).name;
 					// 	const binding = state.scope.get(name)!;
-					// 	const value = path.expression!(b.id(tmp));
+					// 	const value = path.expression;
 					// 	if (binding.kind === 'bindable_prop' || binding.kind === 'rest_prop') {
 					// 		state.props.push({
 					// 			local: name,
@@ -944,54 +948,53 @@ const instance_script = {
 			node.body.type === 'ExpressionStatement' &&
 			node.body.expression.type === 'AssignmentExpression'
 		) {
-			const ids = extract_identifiers(node.body.expression.left);
-			const [, expression_ids] = extract_all_identifiers_from_expression(
-				node.body.expression.right
-			);
-			const bindings = ids.map((id) => state.scope.get(id.name));
-			const reassigned_bindings = bindings.filter((b) => b?.reassigned);
+			const { left, right } = node.body.expression;
 
-			if (
-				reassigned_bindings.length === 0 &&
-				!bindings.some((b) => b?.kind === 'store_sub') &&
-				node.body.expression.left.type !== 'MemberExpression'
-			) {
-				let { start, end } = /** @type {{ start: number, end: number }} */ (
-					node.body.expression.right
-				);
+			const ids = extract_identifiers(left);
+			const [, expression_ids] = extract_all_identifiers_from_expression(right);
+			const bindings = ids.map((id) => /** @type {Binding} */ (state.scope.get(id.name)));
 
-				check_rune_binding('derived');
+			if (bindings.every((b) => b.kind === 'legacy_reactive')) {
+				if (
+					right.type !== 'Literal' &&
+					bindings.every((b) => b.kind !== 'store_sub') &&
+					left.type !== 'MemberExpression'
+				) {
+					let { start, end } = /** @type {{ start: number, end: number }} */ (right);
 
-				// $derived
-				state.str.update(
-					/** @type {number} */ (node.start),
-					/** @type {number} */ (node.body.expression.start),
-					'let '
-				);
+					check_rune_binding('derived');
 
-				if (node.body.expression.right.type === 'SequenceExpression') {
-					while (state.str.original[start] !== '(') start -= 1;
-					while (state.str.original[end - 1] !== ')') end += 1;
-				}
+					// $derived
+					state.str.update(
+						/** @type {number} */ (node.start),
+						/** @type {number} */ (node.body.expression.start),
+						'let '
+					);
+
+					if (right.type === 'SequenceExpression') {
+						while (state.str.original[start] !== '(') start -= 1;
+						while (state.str.original[end - 1] !== ')') end += 1;
+					}
 
-				state.str.prependRight(start, `$derived(`);
+					state.str.prependRight(start, `$derived(`);
 
-				// in a case like `$: ({ a } = b())`, there's already a trailing parenthesis.
-				// otherwise, we need to add one
-				if (state.str.original[/** @type {number} */ (node.body.start)] !== '(') {
-					state.str.appendLeft(end, `)`);
+					// in a case like `$: ({ a } = b())`, there's already a trailing parenthesis.
+					// otherwise, we need to add one
+					if (state.str.original[/** @type {number} */ (node.body.start)] !== '(') {
+						state.str.appendLeft(end, `)`);
+					}
+
+					return;
 				}
 
-				return;
-			} else {
-				for (const binding of reassigned_bindings) {
-					if (binding && (ids.includes(binding.node) || expression_ids.length === 0)) {
+				for (const binding of bindings) {
+					if (binding.reassigned && (ids.includes(binding.node) || expression_ids.length === 0)) {
 						check_rune_binding('state');
 						const init =
 							binding.kind === 'state'
 								? ' = $state()'
 								: expression_ids.length === 0
-									? ` = $state(${state.str.original.substring(/** @type {number} */ (node.body.expression.right.start), node.body.expression.right.end)})`
+									? ` = $state(${state.str.original.substring(/** @type {number} */ (right.start), right.end)})`
 									: '';
 						// implicitly-declared variable which we need to make explicit
 						state.str.prependLeft(
@@ -1000,7 +1003,8 @@ const instance_script = {
 						);
 					}
 				}
-				if (expression_ids.length === 0 && !bindings.some((b) => b?.kind === 'store_sub')) {
+
+				if (expression_ids.length === 0 && bindings.every((b) => b.kind !== 'store_sub')) {
 					state.str.remove(/** @type {number} */ (node.start), /** @type {number} */ (node.end));
 					return;
 				}
@@ -1056,8 +1060,6 @@ const template = {
 		handle_identifier(node, state, path);
 	},
 	RegularElement(node, { state, path, next }) {
-		migrate_slot_usage(node, path, state);
-		handle_events(node, state);
 		// Strip off any namespace from the beginning of the node name.
 		const node_name = node.name.replace(/[a-zA-Z-]*:/g, '');
 
@@ -1065,8 +1067,12 @@ const template = {
 			let trimmed_position = node.end - 2;
 			while (state.str.original.charAt(trimmed_position - 1) === ' ') trimmed_position--;
 			state.str.remove(trimmed_position, node.end - 1);
-			state.str.appendRight(node.end, `</${node.name}>`);
+			state.str.appendLeft(node.end, `</${node.name}>`);
 		}
+
+		migrate_slot_usage(node, path, state);
+		handle_events(node, state);
+
 		next();
 	},
 	SvelteSelf(node, { state, next }) {
@@ -1307,7 +1313,7 @@ const template = {
 			name = state.scope.generate(slot_name);
 			if (name !== slot_name) {
 				throw new MigrationError(
-					'This migration would change the name of a slot making the component unusable'
+					`This migration would change the name of a slot (${slot_name} to ${name}) making the component unusable`
 				);
 			}
 		}
@@ -1592,7 +1598,6 @@ function extract_type_and_comment(declarator, state, path) {
 	const comment_start = /** @type {any} */ (comment_node)?.start;
 	const comment_end = /** @type {any} */ (comment_node)?.end;
 	let comment = comment_node && str.original.substring(comment_start, comment_end);
-
 	if (comment_node) {
 		str.update(comment_start, comment_end, '');
 	}
@@ -1673,6 +1678,11 @@ function extract_type_and_comment(declarator, state, path) {
 		state.has_type_or_fallback = true;
 		const match = /@type {(.+)}/.exec(comment_node.value);
 		if (match) {
+			// try to find JSDoc comments after a hyphen `-`
+			const jsdoc_comment = /@type {.+} (?:\w+|\[.*?\]) - (.+)/.exec(comment_node.value);
+			if (jsdoc_comment) {
+				cleaned_comment += jsdoc_comment[1]?.trim();
+			}
 			return {
 				type: match[1],
 				comment: cleaned_comment,
@@ -1693,7 +1703,6 @@ function extract_type_and_comment(declarator, state, path) {
 			};
 		}
 	}
-
 	return {
 		type: 'any',
 		comment: state.uses_ts ? comment : cleaned_comment,
@@ -1702,14 +1711,14 @@ function extract_type_and_comment(declarator, state, path) {
 }
 
 // Ensure modifiers are applied in the same order as Svelte 4
-const modifier_order = [
+const modifier_order = /** @type {const} */ ([
 	'preventDefault',
 	'stopPropagation',
 	'stopImmediatePropagation',
 	'self',
 	'trusted',
 	'once'
-];
+]);
 
 /**
  * @param {AST.RegularElement | AST.SvelteElement | AST.SvelteWindow | AST.SvelteDocument | AST.SvelteBody} element
@@ -1805,7 +1814,7 @@ function handle_events(element, state) {
 }
 
 /**
- * Returns start and end of the node. If the start is preceeded with white-space-only before a line break,
+ * Returns start and end of the node. If the start is preceded with white-space-only before a line break,
  * the start will be the start of the line.
  * @param {string} source
  * @param {LabeledStatement} node
@@ -1877,7 +1886,7 @@ function handle_identifier(node, state, path) {
 				let new_name = state.scope.generate(name);
 				if (new_name !== name) {
 					throw new MigrationError(
-						'This migration would change the name of a slot making the component unusable'
+						`This migration would change the name of a slot (${name} to ${new_name}) making the component unusable`
 					);
 				}
 			}
diff --git a/packages/svelte/src/compiler/phases/1-parse/acorn.js b/packages/svelte/src/compiler/phases/1-parse/acorn.js
index 6c106e0a84..fb60c228c5 100644
--- a/packages/svelte/src/compiler/phases/1-parse/acorn.js
+++ b/packages/svelte/src/compiler/phases/1-parse/acorn.js
@@ -1,22 +1,37 @@
-/** @import { Comment, Program } from 'estree' */
-/** @import { Node } from 'acorn' */
+/** @import { Comment, Program, Statement } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { Parser } from './index.js' */
 import * as acorn from 'acorn';
 import { walk } from 'zimmerframe';
-import { tsPlugin } from 'acorn-typescript';
-import { locator } from '../../state.js';
+import { tsPlugin } from '@sveltejs/acorn-typescript';
+import * as e from '../../errors.js';
 
-const ParserWithTS = acorn.Parser.extend(tsPlugin({ allowSatisfies: true }));
+const JSParser = acorn.Parser;
+const TSParser = JSParser.extend(tsPlugin());
+
+/**
+ * @typedef {Comment & {
+ *   start: number;
+ *   end: number;
+ * }} CommentWithLocation
+ */
 
 /**
  * @param {string} source
+ * @param {AST.JSComment[]} comments
  * @param {boolean} typescript
  * @param {boolean} [is_script]
  */
-export function parse(source, typescript, is_script) {
-	const parser = typescript ? ParserWithTS : acorn.Parser;
-	const { onComment, add_comments } = get_comment_handlers(source);
-	// @ts-ignore
-	const parse_statement = parser.prototype.parseStatement;
+export function parse(source, comments, typescript, is_script) {
+	const acorn = typescript ? TSParser : JSParser;
+
+	const { onComment, add_comments } = get_comment_handlers(
+		source,
+		/** @type {CommentWithLocation[]} */ (comments)
+	);
+
+	// @ts-expect-error
+	const parse_statement = acorn.prototype.parseStatement;
 
 	// If we're dealing with a <script> then it might contain an export
 	// for something that doesn't exist directly inside but is inside the
@@ -24,7 +39,7 @@ export function parse(source, typescript, is_script) {
 	// an error in these cases
 	if (is_script) {
 		// @ts-ignore
-		parser.prototype.parseStatement = function (...args) {
+		acorn.prototype.parseStatement = function (...args) {
 			const v = parse_statement.call(this, ...args);
 			// @ts-ignore
 			this.undefinedExports = {};
@@ -32,49 +47,107 @@ export function parse(source, typescript, is_script) {
 		};
 	}
 
-	let ast;
-
 	try {
-		ast = parser.parse(source, {
+		const ast = acorn.parse(source, {
 			onComment,
 			sourceType: 'module',
-			ecmaVersion: 13,
+			ecmaVersion: 16,
 			locations: true
 		});
+
+		add_comments(ast);
+
+		return /** @type {Program} */ (ast);
+	} catch (err) {
+		// TODO the `return` in necessary for TS<7 due to a bug; otherwise
+		// the `finally` block is regarded as unreachable
+		return handle_parse_error(err);
 	} finally {
 		if (is_script) {
-			// @ts-ignore
-			parser.prototype.parseStatement = parse_statement;
+			// @ts-expect-error
+			acorn.prototype.parseStatement = parse_statement;
 		}
 	}
+}
 
-	if (typescript) amend(source, ast);
-	add_comments(ast);
+/**
+ * @param {Parser} parser
+ * @param {string} source
+ * @param {number} index
+ * @returns {acorn.Expression & { leadingComments?: CommentWithLocation[]; trailingComments?: CommentWithLocation[]; }}
+ */
+export function parse_expression_at(parser, source, index) {
+	const acorn = parser.ts ? TSParser : JSParser;
 
-	return /** @type {Program} */ (ast);
+	const { onComment, add_comments } = get_comment_handlers(source, parser.root.comments, index);
+
+	try {
+		const ast = acorn.parseExpressionAt(source, index, {
+			onComment,
+			sourceType: 'module',
+			ecmaVersion: 16,
+			locations: true,
+			preserveParens: true
+		});
+
+		add_comments(ast);
+
+		return ast;
+	} catch (e) {
+		handle_parse_error(e);
+	}
 }
 
 /**
+ * @param {Parser} parser
  * @param {string} source
- * @param {boolean} typescript
  * @param {number} index
- * @returns {acorn.Expression & { leadingComments?: CommentWithLocation[]; trailingComments?: CommentWithLocation[]; }}
+ * @returns {Statement}
  */
-export function parse_expression_at(source, typescript, index) {
-	const parser = typescript ? ParserWithTS : acorn.Parser;
-	const { onComment, add_comments } = get_comment_handlers(source);
-
-	const ast = parser.parseExpressionAt(source, index, {
-		onComment,
-		sourceType: 'module',
-		ecmaVersion: 13,
-		locations: true
-	});
+export function parse_statement_at(parser, source, index) {
+	// cast to `any`: acorn's Parser constructor and parseStatement/nextToken aren't in its public types
+	const acorn = /** @type {any} */ (parser.ts ? TSParser : JSParser);
+	const { onComment, add_comments } = get_comment_handlers(source, parser.root.comments, index);
+
+	try {
+		// This is like parseExpressionAt but for statements
+		const p = new acorn(
+			{ onComment, sourceType: 'module', ecmaVersion: 16, locations: true },
+			source,
+			index
+		);
+		p.nextToken();
+		const statement = /** @type {Statement} */ (p.parseStatement(null, true, Object.create(null)));
+		add_comments(/** @type {acorn.Node} */ (statement));
+		return statement;
+	} catch (err) {
+		// A statement that runs to the end of the source (e.g. an unterminated declaration tag)
+		// is an EOF, not a stray token; preserve the friendlier `unexpected_eof` diagnostic.
+		if (/** @type {any} */ (err).pos === source.length) e.unexpected_eof(source.length);
+		handle_parse_error(err);
+	}
+}
 
-	if (typescript) amend(source, ast);
-	add_comments(ast);
+const regex_position_indicator = / \(\d+:\d+\)$/;
 
-	return ast;
+/**
+ * @param {any} err
+ * @returns {never}
+ */
+function handle_parse_error(err) {
+	e.js_parse_error(err.pos, err.message.replace(regex_position_indicator, ''));
+}
+
+/**
+ * @param {acorn.Expression} node
+ * @returns {acorn.Expression}
+ */
+export function remove_parens(node) {
+	return walk(node, null, {
+		ParenthesizedExpression(node, context) {
+			return context.visit(node.expression);
+		}
+	});
 }
 
 /**
@@ -82,26 +155,20 @@ export function parse_expression_at(source, typescript, index) {
  * to add them after the fact. They are needed in order to support `svelte-ignore` comments
  * in JS code and so that `prettier-plugin-svelte` doesn't remove all comments when formatting.
  * @param {string} source
+ * @param {CommentWithLocation[]} comments
+ * @param {number} index
  */
-function get_comment_handlers(source) {
-	/**
-	 * @typedef {Comment & {
-	 *   start: number;
-	 *   end: number;
-	 * }} CommentWithLocation
-	 */
-
-	/** @type {CommentWithLocation[]} */
-	const comments = [];
-
+function get_comment_handlers(source, comments, index = 0) {
 	return {
 		/**
 		 * @param {boolean} block
 		 * @param {string} value
 		 * @param {number} start
 		 * @param {number} end
+		 * @param {import('acorn').Position} [start_loc]
+		 * @param {import('acorn').Position} [end_loc]
 		 */
-		onComment: (block, value, start, end) => {
+		onComment: (block, value, start, end, start_loc, end_loc) => {
 			if (block && /\n/.test(value)) {
 				let a = start;
 				while (a > 0 && source[a - 1] !== '\n') a -= 1;
@@ -113,13 +180,26 @@ function get_comment_handlers(source) {
 				value = value.replace(new RegExp(`^${indentation}`, 'gm'), '');
 			}
 
-			comments.push({ type: block ? 'Block' : 'Line', value, start, end });
+			comments.push({
+				type: block ? 'Block' : 'Line',
+				value,
+				start,
+				end,
+				loc: {
+					start: /** @type {import('acorn').Position} */ (start_loc),
+					end: /** @type {import('acorn').Position} */ (end_loc)
+				}
+			});
 		},
 
 		/** @param {acorn.Node & { leadingComments?: CommentWithLocation[]; trailingComments?: CommentWithLocation[]; }} ast */
 		add_comments(ast) {
 			if (comments.length === 0) return;
 
+			comments = comments
+				.filter((comment) => comment.start >= index)
+				.map(({ type, value, start, end }) => ({ type, value, start, end }));
+
 			walk(ast, null, {
 				_(node, { next, path }) {
 					let comment;
@@ -173,42 +253,3 @@ function get_comment_handlers(source) {
 		}
 	};
 }
-
-/**
- * Tidy up some stuff left behind by acorn-typescript
- * @param {string} source
- * @param {Node} node
- */
-function amend(source, node) {
-	return walk(node, null, {
-		_(node, context) {
-			// @ts-expect-error
-			delete node.loc.start.index;
-			// @ts-expect-error
-			delete node.loc.end.index;
-
-			if (typeof node.loc?.end === 'number') {
-				const loc = locator(node.loc.end);
-				if (loc) {
-					node.loc.end = {
-						line: loc.line,
-						column: loc.column
-					};
-				}
-			}
-
-			if (
-				/** @type {any} */ (node).typeAnnotation &&
-				(node.end === undefined || node.end < node.start)
-			) {
-				// i think there might be a bug in acorn-typescript that prevents
-				// `end` from being assigned when there's a type annotation
-				let end = /** @type {any} */ (node).typeAnnotation.start;
-				while (/\s/.test(source[end - 1])) end -= 1;
-				node.end = end;
-			}
-
-			context.next();
-		}
-	});
-}
diff --git a/packages/svelte/src/compiler/phases/1-parse/ambient.d.ts b/packages/svelte/src/compiler/phases/1-parse/ambient.d.ts
deleted file mode 100644
index 8243dd0a42..0000000000
--- a/packages/svelte/src/compiler/phases/1-parse/ambient.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-// Silence the acorn typescript errors through this ambient type definition + tsconfig.json path alias
-// That way we can omit `"skipLibCheck": true` and catch other errors in our d.ts files
-declare module 'acorn-typescript';
diff --git a/packages/svelte/src/compiler/phases/1-parse/index.js b/packages/svelte/src/compiler/phases/1-parse/index.js
index 390919f5cd..02d1629c99 100644
--- a/packages/svelte/src/compiler/phases/1-parse/index.js
+++ b/packages/svelte/src/compiler/phases/1-parse/index.js
@@ -1,16 +1,34 @@
 /** @import { AST } from '#compiler' */
+/** @import { Location } from 'locate-character' */
+/** @import * as ESTree from 'estree' */
 // @ts-expect-error acorn type definitions are borked in the release we use
 import { isIdentifierStart, isIdentifierChar } from 'acorn';
 import fragment from './state/fragment.js';
-import { regex_whitespace } from '../patterns.js';
-import full_char_code_at from './utils/full_char_code_at.js';
 import * as e from '../../errors.js';
 import { create_fragment } from './utils/create.js';
 import read_options from './read/options.js';
 import { is_reserved } from '../../../utils.js';
 import { disallow_children } from '../2-analyze/visitors/shared/special-element.js';
-
-const regex_position_indicator = / \(\d+:\d+\)$/;
+import * as state from '../../state.js';
+
+/** @param {number} cc */
+function is_whitespace(cc) {
+	// fast path for common whitespace
+	if (cc === 32 || (cc <= 13 && cc >= 9)) return true;
+	// rare whitespace — \u00a0, \u1680, \u2000-\u200a, \u2028, \u2029, \u202f, \u205f, \u3000, \ufeff
+	if (cc < 160) return false;
+	return (
+		cc === 160 ||
+		cc === 5760 ||
+		(cc >= 8192 && cc <= 8202) ||
+		cc === 8232 ||
+		cc === 8233 ||
+		cc === 8239 ||
+		cc === 8287 ||
+		cc === 12288 ||
+		cc === 65279
+	);
+}
 
 const regex_lang_attribute =
 	/<!--[^]*?-->|<script\s+(?:[^>]*|(?:[^=>'"/]+=(?:"[^"]*"|'[^']*'|[^>\s]+)\s+)*)lang=(["'])?([^"' >]+)\1[^>]*>/g;
@@ -22,12 +40,6 @@ export class Parser {
 	 */
 	template;
 
-	/**
-	 * @readonly
-	 * @type {string}
-	 */
-	template_untrimmed;
-
 	/**
 	 * Whether or not we're in loose parsing mode, in which
 	 * case we try to continue parsing as much as possible
@@ -38,6 +50,20 @@ export class Parser {
 	/** */
 	index = 0;
 
+	/**
+	 * Creates a minimal parser instance for CSS-only parsing.
+	 * Skips Svelte component parsing setup.
+	 * @param {string} source
+	 * @returns {Parser}
+	 */
+	static forCss(source) {
+		const parser = Object.create(Parser.prototype);
+		parser.template = source;
+		parser.index = 0;
+		parser.loose = false;
+		return parser;
+	}
+
 	/** Whether we're parsing in TypeScript mode */
 	ts = false;
 
@@ -66,7 +92,6 @@ export class Parser {
 		}
 
 		this.loose = loose;
-		this.template_untrimmed = template;
 		this.template = template.trimEnd();
 
 		let match_lang;
@@ -88,6 +113,7 @@ export class Parser {
 			type: 'Root',
 			fragment: create_fragment(),
 			options: null,
+			comments: [],
 			metadata: {
 				ts: this.ts
 			}
@@ -121,21 +147,8 @@ export class Parser {
 			e.unexpected_eof(this.index);
 		}
 
-		if (this.root.fragment.nodes.length) {
-			let start = /** @type {number} */ (this.root.fragment.nodes[0].start);
-			while (regex_whitespace.test(template[start])) start += 1;
-
-			let end = /** @type {number} */ (
-				this.root.fragment.nodes[this.root.fragment.nodes.length - 1].end
-			);
-			while (regex_whitespace.test(template[end - 1])) end -= 1;
-
-			this.root.start = start;
-			this.root.end = end;
-		} else {
-			// @ts-ignore
-			this.root.start = this.root.end = null;
-		}
+		this.root.start = 0;
+		this.root.end = template.length;
 
 		const options_index = this.root.fragment.nodes.findIndex(
 			/** @param {any} thing */
@@ -160,14 +173,6 @@ export class Parser {
 		return this.stack[this.stack.length - 1];
 	}
 
-	/**
-	 * @param {any} err
-	 * @returns {never}
-	 */
-	acorn_error(err) {
-		e.js_parse_error(err.pos, err.message.replace(regex_position_indicator, ''));
-	}
-
 	/**
 	 * @param {string} str
 	 * @param {boolean} required
@@ -194,22 +199,26 @@ export class Parser {
 			return this.template[this.index] === str;
 		}
 
-		return this.template.slice(this.index, this.index + length) === str;
+		return this.template.startsWith(str, this.index);
 	}
 
 	/**
 	 * Match a regex at the current index
-	 * @param {RegExp} pattern  Should have a ^ anchor at the start so the regex doesn't search past the beginning, resulting in worse performance
+	 * @param {RegExp} pattern  Should have the sticky (`y`) flag so that it only matches at the current index
 	 */
 	match_regex(pattern) {
-		const match = pattern.exec(this.template.slice(this.index));
-		if (!match || match.index !== 0) return null;
+		pattern.lastIndex = this.index;
+		const match = pattern.exec(this.template);
+		if (!match || match.index !== this.index) return null;
 
 		return match[0];
 	}
 
 	allow_whitespace() {
-		while (this.index < this.template.length && regex_whitespace.test(this.template[this.index])) {
+		while (
+			this.index < this.template.length &&
+			is_whitespace(this.template.charCodeAt(this.index))
+		) {
 			this.index++;
 		}
 	}
@@ -224,31 +233,45 @@ export class Parser {
 		return result;
 	}
 
-	/** @param {any} allow_reserved */
-	read_identifier(allow_reserved = false) {
+	/**
+	 * @returns {ESTree.Identifier & { start: number, end: number, loc: { start: Location, end: Location } }}
+	 */
+	read_identifier() {
 		const start = this.index;
+		let end = start;
+		let name = '';
 
-		let i = this.index;
-
-		const code = full_char_code_at(this.template, i);
-		if (!isIdentifierStart(code, true)) return null;
+		const code = /** @type {number} */ (this.template.codePointAt(this.index));
 
-		i += code <= 0xffff ? 1 : 2;
+		if (isIdentifierStart(code, true)) {
+			let i = this.index;
+			end += code <= 0xffff ? 1 : 2;
 
-		while (i < this.template.length) {
-			const code = full_char_code_at(this.template, i);
+			while (end < this.template.length) {
+				const code = /** @type {number} */ (this.template.codePointAt(end));
 
-			if (!isIdentifierChar(code, true)) break;
-			i += code <= 0xffff ? 1 : 2;
-		}
+				if (!isIdentifierChar(code, true)) break;
+				end += code <= 0xffff ? 1 : 2;
+			}
 
-		const identifier = this.template.slice(this.index, (this.index = i));
+			name = this.template.slice(start, end);
+			this.index = end;
 
-		if (!allow_reserved && is_reserved(identifier)) {
-			e.unexpected_reserved_word(start, identifier);
+			if (is_reserved(name)) {
+				e.unexpected_reserved_word(start, name);
+			}
 		}
 
-		return identifier;
+		return {
+			type: 'Identifier',
+			name,
+			start,
+			end,
+			loc: {
+				start: state.locator(start),
+				end: state.locator(end)
+			}
+		};
 	}
 
 	/** @param {RegExp} pattern */
@@ -271,7 +294,7 @@ export class Parser {
 	}
 
 	require_whitespace() {
-		if (!regex_whitespace.test(this.template[this.index])) {
+		if (!is_whitespace(this.template.charCodeAt(this.index))) {
 			e.expected_whitespace(this.index);
 		}
 
@@ -279,7 +302,10 @@ export class Parser {
 	}
 
 	pop() {
-		this.fragments.pop();
+		const fragment = this.fragments.pop();
+		if (fragment?.metadata.transparent && fragment.nodes.some((n) => n.type === 'DeclarationTag')) {
+			fragment.metadata.transparent = false;
+		}
 		return this.stack.pop();
 	}
 
@@ -300,6 +326,8 @@ export class Parser {
  * @returns {AST.Root}
  */
 export function parse(template, loose = false) {
+	state.set_source(template);
+
 	const parser = new Parser(template, loose);
 	return parser.root;
 }
diff --git a/packages/svelte/src/compiler/phases/1-parse/read/context.js b/packages/svelte/src/compiler/phases/1-parse/read/context.js
index e408b5024f..cdb239ef5b 100644
--- a/packages/svelte/src/compiler/phases/1-parse/read/context.js
+++ b/packages/svelte/src/compiler/phases/1-parse/read/context.js
@@ -1,19 +1,9 @@
-/** @import { Location } from 'locate-character' */
 /** @import { Pattern } from 'estree' */
 /** @import { Parser } from '../index.js' */
-// @ts-expect-error acorn type definitions are borked in the release we use
-import { isIdentifierStart } from 'acorn';
-import full_char_code_at from '../utils/full_char_code_at.js';
-import {
-	is_bracket_open,
-	is_bracket_close,
-	is_bracket_pair,
-	get_bracket_close
-} from '../utils/bracket.js';
-import { parse_expression_at } from '../acorn.js';
+import { match_bracket } from '../utils/bracket.js';
+import { parse_expression_at, remove_parens } from '../acorn.js';
 import { regex_not_newline_characters } from '../../patterns.js';
 import * as e from '../../../errors.js';
-import { locator } from '../../../state.js';
 
 /**
  * @param {Parser} parser
@@ -23,78 +13,54 @@ export default function read_pattern(parser) {
 	const start = parser.index;
 	let i = parser.index;
 
-	const code = full_char_code_at(parser.template, i);
-	if (isIdentifierStart(code, true)) {
-		const name = /** @type {string} */ (parser.read_identifier());
+	const id = parser.read_identifier();
+
+	if (id.name !== '') {
 		const annotation = read_type_annotation(parser);
 
 		return {
-			type: 'Identifier',
-			name,
-			start,
-			loc: {
-				start: /** @type {Location} */ (locator(start)),
-				end: /** @type {Location} */ (locator(parser.index))
-			},
-			end: parser.index,
+			...id,
 			typeAnnotation: annotation
 		};
 	}
 
-	if (!is_bracket_open(code)) {
-		e.expected_pattern(i);
-	}
+	const char = parser.template[i];
 
-	const bracket_stack = [code];
-	i += code <= 0xffff ? 1 : 2;
-
-	while (i < parser.template.length) {
-		const code = full_char_code_at(parser.template, i);
-		if (is_bracket_open(code)) {
-			bracket_stack.push(code);
-		} else if (is_bracket_close(code)) {
-			const popped = /** @type {number} */ (bracket_stack.pop());
-			if (!is_bracket_pair(popped, code)) {
-				e.expected_token(i, String.fromCharCode(/** @type {number} */ (get_bracket_close(popped))));
-			}
-			if (bracket_stack.length === 0) {
-				i += code <= 0xffff ? 1 : 2;
-				break;
-			}
-		}
-		i += code <= 0xffff ? 1 : 2;
+	if (char !== '{' && char !== '[') {
+		e.expected_pattern(i);
 	}
 
+	i = match_bracket(parser, start);
 	parser.index = i;
 
 	const pattern_string = parser.template.slice(start, i);
-	try {
-		// the length of the `space_with_newline` has to be start - 1
-		// because we added a `(` in front of the pattern_string,
-		// which shifted the entire string to right by 1
-		// so we offset it by removing 1 character in the `space_with_newline`
-		// to achieve that, we remove the 1st space encountered,
-		// so it will not affect the `column` of the node
-		let space_with_newline = parser.template
-			.slice(0, start)
-			.replace(regex_not_newline_characters, ' ');
-		const first_space = space_with_newline.indexOf(' ');
-		space_with_newline =
-			space_with_newline.slice(0, first_space) + space_with_newline.slice(first_space + 1);
-
-		const expression = /** @type {any} */ (
-			parse_expression_at(`${space_with_newline}(${pattern_string} = 1)`, parser.ts, start - 1)
-		).left;
-
-		expression.typeAnnotation = read_type_annotation(parser);
-		if (expression.typeAnnotation) {
-			expression.end = expression.typeAnnotation.end;
-		}
-
-		return expression;
-	} catch (error) {
-		parser.acorn_error(error);
+
+	// the length of the `space_with_newline` has to be start - 1
+	// because we added a `(` in front of the pattern_string,
+	// which shifted the entire string to right by 1
+	// so we offset it by removing 1 character in the `space_with_newline`
+	// to achieve that, we remove the 1st space encountered,
+	// so it will not affect the `column` of the node
+	let space_with_newline = parser.template
+		.slice(0, start)
+		.replace(regex_not_newline_characters, ' ');
+	const first_space = space_with_newline.indexOf(' ');
+	space_with_newline =
+		space_with_newline.slice(0, first_space) + space_with_newline.slice(first_space + 1);
+
+	/** @type {any} */
+	let expression = remove_parens(
+		parse_expression_at(parser, `${space_with_newline}(${pattern_string} = 1)`, start - 1)
+	);
+
+	expression = expression.left;
+
+	expression.typeAnnotation = read_type_annotation(parser);
+	if (expression.typeAnnotation) {
+		expression.end = expression.typeAnnotation.end;
 	}
+
+	return expression;
 }
 
 /**
@@ -120,13 +86,13 @@ function read_type_annotation(parser) {
 		// parameters as part of a sequence expression instead, and will then error on optional
 		// parameters (`?:`). Therefore replace that sequence with something that will not error.
 		parser.template.slice(parser.index).replace(/\?\s*:/g, ':');
-	let expression = parse_expression_at(template, parser.ts, a);
+	let expression = remove_parens(parse_expression_at(parser, template, a));
 
 	// `foo: bar = baz` gets mangled — fix it
 	if (expression.type === 'AssignmentExpression') {
 		let b = expression.right.start;
 		while (template[b] !== '=') b -= 1;
-		expression = parse_expression_at(template.slice(0, b), parser.ts, a);
+		expression = remove_parens(parse_expression_at(parser, template.slice(0, b), a));
 	}
 
 	// `array as item: string, index` becomes `string, index`, which is mistaken as a sequence expression - fix that
diff --git a/packages/svelte/src/compiler/phases/1-parse/read/expression.js b/packages/svelte/src/compiler/phases/1-parse/read/expression.js
index 021bd95a6e..1c8f097c2f 100644
--- a/packages/svelte/src/compiler/phases/1-parse/read/expression.js
+++ b/packages/svelte/src/compiler/phases/1-parse/read/expression.js
@@ -1,61 +1,59 @@
 /** @import { Expression } from 'estree' */
 /** @import { Parser } from '../index.js' */
-import { parse_expression_at } from '../acorn.js';
+import { parse_expression_at, remove_parens } from '../acorn.js';
 import { regex_whitespace } from '../../patterns.js';
 import * as e from '../../../errors.js';
 import { find_matching_bracket } from '../utils/bracket.js';
 
 /**
  * @param {Parser} parser
+ * @param {string} [opening_token]
+ * @returns {Expression | undefined}
+ */
+export function get_loose_identifier(parser, opening_token) {
+	// Find the next } and treat it as the end of the expression
+	const end = find_matching_bracket(parser.template, parser.index, opening_token ?? '{');
+	if (end) {
+		const start = parser.index;
+		parser.index = end;
+		// We don't know what the expression is and signal this by returning an empty identifier
+		return {
+			type: 'Identifier',
+			start,
+			end,
+			name: ''
+		};
+	}
+}
+
+/**
+ * @param {Parser} parser
+ * @param {string} [opening_token]
+ * @param {boolean} [disallow_loose]
  * @returns {Expression}
  */
-export default function read_expression(parser) {
+export default function read_expression(parser, opening_token, disallow_loose) {
 	try {
-		const node = parse_expression_at(parser.template, parser.ts, parser.index);
-
-		let num_parens = 0;
-
-		for (let i = parser.index; i < /** @type {number} */ (node.start); i += 1) {
-			if (parser.template[i] === '(') num_parens += 1;
-		}
+		const node = parse_expression_at(parser, parser.template, parser.index);
 
 		let index = /** @type {number} */ (node.end);
-		if (node.trailingComments !== undefined && node.trailingComments.length > 0) {
-			index = node.trailingComments.at(-1).end;
-		}
-
-		while (num_parens > 0) {
-			const char = parser.template[index];
 
-			if (char === ')') {
-				num_parens -= 1;
-			} else if (!regex_whitespace.test(char)) {
-				e.expected_token(index, ')');
-			}
-
-			index += 1;
-		}
+		const last_comment = parser.root.comments.at(-1);
+		if (last_comment && last_comment.end > index) index = last_comment.end;
 
 		parser.index = index;
 
-		return /** @type {Expression} */ (node);
+		return /** @type {Expression} */ (remove_parens(node));
 	} catch (err) {
-		if (parser.loose) {
-			// Find the next } and treat it as the end of the expression
-			const end = find_matching_bracket(parser.template, parser.index, '{');
-			if (end) {
-				const start = parser.index;
-				parser.index = end;
-				// We don't know what the expression is and signal this by returning an empty identifier
-				return {
-					type: 'Identifier',
-					start,
-					end,
-					name: ''
-				};
+		// If we are in an each loop we need the error to be thrown in cases like
+		// `as { y = z }` so we still throw and handle the error there
+		if (parser.loose && !disallow_loose) {
+			const expression = get_loose_identifier(parser, opening_token);
+			if (expression) {
+				return expression;
 			}
 		}
 
-		parser.acorn_error(err);
+		throw err;
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/1-parse/read/options.js b/packages/svelte/src/compiler/phases/1-parse/read/options.js
index a36e101468..2677fb3b61 100644
--- a/packages/svelte/src/compiler/phases/1-parse/read/options.js
+++ b/packages/svelte/src/compiler/phases/1-parse/read/options.js
@@ -133,11 +133,13 @@ export default function read_options(node) {
 
 				const shadow = properties.find(([name]) => name === 'shadow')?.[1];
 				if (shadow) {
-					const shadowdom = shadow?.value;
-					if (shadowdom !== 'open' && shadowdom !== 'none') {
-						e.svelte_options_invalid_customelement_shadow(shadow);
+					if (shadow.type === 'Literal' && (shadow.value === 'open' || shadow.value === 'none')) {
+						ce.shadow = shadow.value;
+					} else if (shadow.type === 'ObjectExpression') {
+						ce.shadow = shadow;
+					} else {
+						e.svelte_options_invalid_customelement_shadow(attribute);
 					}
-					ce.shadow = shadowdom;
 				}
 
 				const extend = properties.find(([name]) => name === 'extend')?.[1];
diff --git a/packages/svelte/src/compiler/phases/1-parse/read/script.js b/packages/svelte/src/compiler/phases/1-parse/read/script.js
index 9d9ed3a1ef..4472ce61c3 100644
--- a/packages/svelte/src/compiler/phases/1-parse/read/script.js
+++ b/packages/svelte/src/compiler/phases/1-parse/read/script.js
@@ -6,9 +6,10 @@ import { regex_not_newline_characters } from '../../patterns.js';
 import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
 import { is_text_attribute } from '../../../utils/ast.js';
+import { locator } from '../../../state.js';
 
 const regex_closing_script_tag = /<\/script\s*>/;
-const regex_starts_with_closing_script_tag = /^<\/script\s*>/;
+const regex_starts_with_closing_script_tag = /<\/script\s*>/y;
 
 const RESERVED_ATTRIBUTES = ['server', 'client', 'worker', 'test', 'default'];
 const ALLOWED_ATTRIBUTES = ['context', 'generics', 'lang', 'module'];
@@ -16,7 +17,7 @@ const ALLOWED_ATTRIBUTES = ['context', 'generics', 'lang', 'module'];
 /**
  * @param {Parser} parser
  * @param {number} start
- * @param {Array<AST.Attribute | AST.SpreadAttribute | AST.Directive>} attributes
+ * @param {Array<AST.Attribute | AST.SpreadAttribute | AST.Directive | AST.AttachTag>} attributes
  * @returns {AST.Script}
  */
 export function read_script(parser, start, attributes) {
@@ -30,18 +31,17 @@ export function read_script(parser, start, attributes) {
 		parser.template.slice(0, script_start).replace(regex_not_newline_characters, ' ') + data;
 	parser.read(regex_starts_with_closing_script_tag);
 
-	/** @type {Program} */
-	let ast;
+	const ast = acorn.parse(source, parser.root.comments, parser.ts, true);
 
-	try {
-		ast = acorn.parse(source, parser.ts, true);
-	} catch (err) {
-		parser.acorn_error(err);
-	}
-
-	// TODO is this necessary?
 	ast.start = script_start;
 
+	if (ast.loc) {
+		// Acorn always uses `0` as the start of a `Program`, but for sourcemap purposes
+		// we need it to be the start of the `<script>` contents
+		({ line: ast.loc.start.line, column: ast.loc.start.column } = locator(start));
+		({ line: ast.loc.end.line, column: ast.loc.end.column } = locator(parser.index));
+	}
+
 	/** @type {'default' | 'module'} */
 	let context = 'default';
 
diff --git a/packages/svelte/src/compiler/phases/1-parse/read/style.js b/packages/svelte/src/compiler/phases/1-parse/read/style.js
index 29e8a0e541..160e5da277 100644
--- a/packages/svelte/src/compiler/phases/1-parse/read/style.js
+++ b/packages/svelte/src/compiler/phases/1-parse/read/style.js
@@ -2,31 +2,33 @@
 /** @import { Parser } from '../index.js' */
 import * as e from '../../../errors.js';
 
-const REGEX_MATCHER = /^[~^$*|]?=/;
+const REGEX_MATCHER = /[~^$*|]?=/y;
 const REGEX_CLOSING_BRACKET = /[\s\]]/;
-const REGEX_ATTRIBUTE_FLAGS = /^[a-zA-Z]+/; // only `i` and `s` are valid today, but make it future-proof
-const REGEX_COMBINATOR = /^(\+|~|>|\|\|)/;
-const REGEX_PERCENTAGE = /^\d+(\.\d+)?%/;
+const REGEX_ATTRIBUTE_FLAGS = /[a-zA-Z]+/y; // only `i` and `s` are valid today, but make it future-proof
+const REGEX_COMBINATOR = /(\+|~|>|\|\|)/y;
+const REGEX_PERCENTAGE = /\d+(\.\d+)?%/y;
 const REGEX_NTH_OF =
-	/^(even|odd|\+?(\d+|\d*n(\s*[+-]\s*\d+)?)|-\d*n(\s*\+\s*\d+))((?=\s*[,)])|\s+of\s+)/;
+	/(even|odd|\+?(\d+|\d*n(\s*[+-]\s*\d+)?)|-\d*n(\s*\+\s*\d+))((?=\s*[,)])|\s+of\s+)/y;
 const REGEX_WHITESPACE_OR_COLON = /[\s:]/;
-const REGEX_LEADING_HYPHEN_OR_DIGIT = /-?\d/;
+const REGEX_LEADING_HYPHEN_OR_DIGIT = /-?\d/y;
 const REGEX_VALID_IDENTIFIER_CHAR = /[a-zA-Z0-9_-]/;
+const REGEX_UNICODE_SEQUENCE = /\\[0-9a-fA-F]{1,6}(\r\n|\s)?/y;
 const REGEX_COMMENT_CLOSE = /\*\//;
 const REGEX_HTML_COMMENT_CLOSE = /-->/;
 
 /**
  * @param {Parser} parser
  * @param {number} start
- * @param {Array<AST.Attribute | AST.SpreadAttribute | AST.Directive>} attributes
+ * @param {Array<AST.Attribute | AST.SpreadAttribute | AST.Directive | AST.AttachTag>} attributes
  * @returns {AST.CSS.StyleSheet}
  */
 export default function read_style(parser, start, attributes) {
 	const content_start = parser.index;
-	const children = read_body(parser, '</style');
+	const children = read_body(parser, (p) => p.match('</style') || p.index >= p.template.length);
 	const content_end = parser.index;
 
-	parser.read(/^<\/style\s*>/);
+	parser.eat('</style', true);
+	parser.read(/\s*>/y);
 
 	return {
 		type: 'StyleSheet',
@@ -45,20 +47,14 @@ export default function read_style(parser, start, attributes) {
 
 /**
  * @param {Parser} parser
- * @param {string} close
- * @returns {any[]}
+ * @param {(parser: Parser) => boolean} finished
+ * @returns {Array<AST.CSS.Rule | AST.CSS.Atrule>}
  */
-function read_body(parser, close) {
+function read_body(parser, finished) {
 	/** @type {Array<AST.CSS.Rule | AST.CSS.Atrule>} */
 	const children = [];
 
-	while (parser.index < parser.template.length) {
-		allow_comment_or_whitespace(parser);
-
-		if (parser.match(close)) {
-			return children;
-		}
-
+	while ((allow_comment_or_whitespace(parser), !finished(parser))) {
 		if (parser.match('@')) {
 			children.push(read_at_rule(parser));
 		} else {
@@ -66,7 +62,7 @@ function read_body(parser, close) {
 		}
 	}
 
-	e.expected_token(parser.template.length, close);
+	return children;
 }
 
 /**
@@ -118,6 +114,7 @@ function read_rule(parser) {
 		metadata: {
 			parent_rule: null,
 			has_local_selectors: false,
+			has_global_selectors: false,
 			is_global_block: false
 		}
 	};
@@ -342,6 +339,7 @@ function read_selector(parser, inside_pseudo_class = false) {
 				children,
 				metadata: {
 					rule: null,
+					is_global: false,
 					used: false
 				}
 			};
@@ -510,8 +508,12 @@ function read_value(parser) {
 		if (escaped) {
 			value += '\\' + char;
 			escaped = false;
+			parser.index++;
+			continue;
 		} else if (char === '\\') {
 			escaped = true;
+			parser.index++;
+			continue;
 		} else if (char === quote_mark) {
 			quote_mark = null;
 		} else if (char === ')') {
@@ -522,6 +524,21 @@ function read_value(parser) {
 			in_url = true;
 		} else if ((char === ';' || char === '{' || char === '}') && !in_url && !quote_mark) {
 			return value.trim();
+		} else if (
+			char === '/' &&
+			!in_url &&
+			!quote_mark &&
+			parser.template[parser.index + 1] === '*'
+		) {
+			parser.index += 2;
+			while (parser.index < parser.template.length) {
+				if (parser.template[parser.index] === '*' && parser.template[parser.index + 1] === '/') {
+					parser.index += 2;
+					break;
+				}
+				parser.index++;
+			}
+			continue;
 		}
 
 		value += char;
@@ -566,7 +583,7 @@ function read_attribute_value(parser) {
 }
 
 /**
- * https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier
+ * @see {@link https://www.w3.org/TR/css-syntax-3/#ident-token-diagram CSS Syntax Module Level 3}
  * @param {Parser} parser
  */
 function read_identifier(parser) {
@@ -574,29 +591,30 @@ function read_identifier(parser) {
 
 	let identifier = '';
 
-	if (parser.match('--') || parser.match_regex(REGEX_LEADING_HYPHEN_OR_DIGIT)) {
+	if (parser.match_regex(REGEX_LEADING_HYPHEN_OR_DIGIT)) {
 		e.css_expected_identifier(start);
 	}
 
-	let escaped = false;
-
 	while (parser.index < parser.template.length) {
 		const char = parser.template[parser.index];
-		if (escaped) {
-			identifier += '\\' + char;
-			escaped = false;
-		} else if (char === '\\') {
-			escaped = true;
+		if (char === '\\') {
+			const sequence = parser.match_regex(REGEX_UNICODE_SEQUENCE);
+			if (sequence) {
+				identifier += String.fromCodePoint(parseInt(sequence.slice(1), 16));
+				parser.index += sequence.length;
+			} else {
+				identifier += '\\' + parser.template[parser.index + 1];
+				parser.index += 2;
+			}
 		} else if (
 			/** @type {number} */ (char.codePointAt(0)) >= 160 ||
 			REGEX_VALID_IDENTIFIER_CHAR.test(char)
 		) {
 			identifier += char;
+			parser.index++;
 		} else {
 			break;
 		}
-
-		parser.index++;
 	}
 
 	if (identifier === '') {
@@ -623,3 +641,12 @@ function allow_comment_or_whitespace(parser) {
 		parser.allow_whitespace();
 	}
 }
+
+/**
+ * Parse standalone CSS content (not wrapped in `<style>`).
+ * @param {Parser} parser
+ * @returns {Array<AST.CSS.Rule | AST.CSS.Atrule>}
+ */
+export function parse_stylesheet(parser) {
+	return read_body(parser, (p) => p.index >= p.template.length);
+}
diff --git a/packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js b/packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js
index b968e95213..438d6fe48f 100644
--- a/packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js
+++ b/packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js
@@ -1,7 +1,7 @@
 /** @import { Context, Visitors } from 'zimmerframe' */
 /** @import { FunctionExpression, FunctionDeclaration } from 'estree' */
 import { walk } from 'zimmerframe';
-import * as b from '../../utils/builders.js';
+import * as b from '#compiler/builders';
 import * as e from '../../errors.js';
 
 /**
@@ -17,6 +17,20 @@ function remove_this_param(node, context) {
 
 /** @type {Visitors<any, null>} */
 const visitors = {
+	_(node, context) {
+		const n = context.next() ?? node;
+
+		// TODO there may come a time when we decide to preserve type annotations.
+		// until that day comes, we just delete them so they don't confuse esrap
+		delete n.typeAnnotation;
+		delete n.typeParameters;
+		delete n.typeArguments;
+		delete n.returnType;
+		delete n.accessibility;
+		delete n.readonly;
+		delete n.definite;
+		delete n.override;
+	},
 	Decorator(node) {
 		e.typescript_invalid_feature(node, 'decorators (related TSC proposal is not stage 4 yet)');
 	},
@@ -78,22 +92,14 @@ const visitors = {
 	TSNonNullExpression(node, context) {
 		return context.visit(node.expression);
 	},
-	TSTypeAnnotation() {
-		// This isn't correct, strictly speaking, and could result in invalid ASTs (like an empty statement within function parameters),
-		// but esrap, our printing tool, just ignores these AST nodes at invalid positions, so it's fine
-		return b.empty;
-	},
 	TSInterfaceDeclaration() {
 		return b.empty;
 	},
 	TSTypeAliasDeclaration() {
 		return b.empty;
 	},
-	TSTypeParameterDeclaration() {
-		return b.empty;
-	},
-	TSTypeParameterInstantiation() {
-		return b.empty;
+	TSTypeAssertion(node, context) {
+		return context.visit(node.expression);
 	},
 	TSEnumDeclaration(node) {
 		e.typescript_invalid_feature(node, 'enums');
@@ -112,10 +118,39 @@ const visitors = {
 	TSDeclareFunction() {
 		return b.empty;
 	},
+	ClassBody(node, context) {
+		const body = [];
+		for (const _child of node.body) {
+			const child = context.visit(_child);
+			if (child.type !== 'PropertyDefinition' || !child.declare) {
+				body.push(child);
+			}
+		}
+		return {
+			...node,
+			body
+		};
+	},
 	ClassDeclaration(node, context) {
 		if (node.declare) {
 			return b.empty;
 		}
+		delete node.abstract;
+		delete node.implements;
+		delete node.superTypeArguments;
+		delete node.superTypeParameters;
+		return context.next();
+	},
+	ClassExpression(node, context) {
+		delete node.implements;
+		delete node.superTypeArguments;
+		delete node.superTypeParameters;
+		return context.next();
+	},
+	MethodDefinition(node, context) {
+		if (node.abstract) {
+			return b.empty;
+		}
 		return context.next();
 	},
 	VariableDeclaration(node, context) {
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 806dcebff6..ba2d22b367 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/element.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/element.js
@@ -1,7 +1,8 @@
-/** @import { Expression } from 'estree' */
+/** @import { Expression, Identifier, SourceLocation } from 'estree' */
+/** @import { Location } from 'locate-character' */
 /** @import { AST } from '#compiler' */
 /** @import { Parser } from '../index.js' */
-import { is_void } from '../../../../utils.js';
+import { is_void, REGEX_VALID_TAG_NAME } from '../../../../utils.js';
 import read_expression from '../read/expression.js';
 import { read_script } from '../read/script.js';
 import read_style from '../read/style.js';
@@ -9,21 +10,32 @@ import { decode_character_references } from '../utils/html.js';
 import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
 import { create_fragment } from '../utils/create.js';
-import { create_attribute, create_expression_metadata, is_element_node } from '../../nodes.js';
+import { create_attribute, ExpressionMetadata, is_element_node } from '../../nodes.js';
 import { get_attribute_expression, is_expression_attribute } from '../../../utils/ast.js';
 import { closing_tag_omitted } from '../../../../html-tree-validation.js';
 import { list } from '../../../utils/string.js';
-import { regex_whitespace } from '../../patterns.js';
+import { locator } from '../../../state.js';
+import * as b from '#compiler/builders';
 
-const regex_invalid_unquoted_attribute_value = /^(\/>|[\s"'=<>`])/;
-const regex_closing_textarea_tag = /^<\/textarea(\s[^>]*)?>/i;
+const regex_invalid_unquoted_attribute_value = /(\/>|[\s"'=<>`])/y;
+const regex_closing_textarea_tag = /<\/textarea(\s[^>]*)?>/iy;
 const regex_closing_comment = /-->/;
 const regex_whitespace_or_slash_or_closing_tag = /(\s|\/|>)/;
 const regex_token_ending_character = /[\s=/>"']/;
-const regex_starts_with_quote_characters = /^["']/;
-const regex_attribute_value = /^(?:"([^"]*)"|'([^'])*'|([^>\s]+))/;
-const regex_valid_element_name =
-	/^(?:![a-zA-Z]+|[a-zA-Z](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?|[a-zA-Z][a-zA-Z0-9]*:[a-zA-Z][a-zA-Z0-9-]*[a-zA-Z0-9])$/;
+const regex_starts_with_quote_characters = /["']/y;
+const regex_attribute_value = /(?:"([^"]*)"|'([^'])*'|([^>\s]+))/y;
+const regex_doctype_name = /^![a-zA-Z]+$/;
+const regex_namespaced_name = /^[a-zA-Z][a-zA-Z0-9]*:[a-zA-Z][a-zA-Z0-9-]*[a-zA-Z0-9]$/;
+
+/** @param {string} name */
+function is_valid_element_name(name) {
+	// DOCTYPE (e.g. !DOCTYPE)
+	if (regex_doctype_name.test(name)) return true;
+	// svelte:* meta tags (e.g. svelte:element, svelte:head)
+	if (regex_namespaced_name.test(name)) return true;
+	// standard HTML/SVG/MathML elements and custom elements
+	return REGEX_VALID_TAG_NAME.test(name);
+}
 export const regex_valid_component_name =
 	// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#identifiers adjusted for our needs
 	// (must start with uppercase letter if no dots, can contain dots)
@@ -69,10 +81,9 @@ export default function element(parser) {
 		return;
 	}
 
-	const is_closing_tag = parser.eat('/');
-	const name = parser.read_until(regex_whitespace_or_slash_or_closing_tag);
+	if (parser.eat('/')) {
+		const name = parser.read_until(regex_whitespace_or_slash_or_closing_tag);
 
-	if (is_closing_tag) {
 		parser.allow_whitespace();
 		parser.eat('>', true);
 
@@ -94,7 +105,16 @@ export default function element(parser) {
 				}
 			}
 
-			if (parent.type !== 'RegularElement' && !parser.loose) {
+			if (parent.type === 'RegularElement') {
+				if (!parser.last_auto_closed_tag || parser.last_auto_closed_tag.tag !== name) {
+					const end = parent.fragment.nodes[0]?.start ?? start;
+					w.element_implicitly_closed(
+						{ start: parent.start, end },
+						`</${name}>`,
+						`</${parent.name}>`
+					);
+				}
+			} else if (!parser.loose) {
 				if (parser.last_auto_closed_tag && parser.last_auto_closed_tag.tag === name) {
 					e.element_invalid_closing_tag_autoclosed(start, name, parser.last_auto_closed_tag.reason);
 				} else {
@@ -118,36 +138,41 @@ export default function element(parser) {
 		return;
 	}
 
-	if (name.startsWith('svelte:') && !meta_tags.has(name)) {
-		const bounds = { start: start + 1, end: start + 1 + name.length };
+	const tag = read_tag(parser, regex_whitespace_or_slash_or_closing_tag);
+
+	if (tag.name.startsWith('svelte:') && !meta_tags.has(tag.name)) {
+		const bounds = { start: start + 1, end: start + 1 + tag.name.length };
 		e.svelte_meta_invalid_tag(bounds, list(Array.from(meta_tags.keys())));
 	}
 
-	if (!regex_valid_element_name.test(name) && !regex_valid_component_name.test(name)) {
-		const bounds = { start: start + 1, end: start + 1 + name.length };
-		e.tag_invalid_name(bounds);
+	if (!is_valid_element_name(tag.name) && !regex_valid_component_name.test(tag.name)) {
+		// <div. -> in the middle of typing -> allow in loose mode
+		if (!parser.loose || !tag.name.endsWith('.')) {
+			const bounds = { start: start + 1, end: start + 1 + tag.name.length };
+			e.tag_invalid_name(bounds);
+		}
 	}
 
-	if (root_only_meta_tags.has(name)) {
-		if (name in parser.meta_tags) {
-			e.svelte_meta_duplicate(start, name);
+	if (root_only_meta_tags.has(tag.name)) {
+		if (tag.name in parser.meta_tags) {
+			e.svelte_meta_duplicate(start, tag.name);
 		}
 
 		if (parent.type !== 'Root') {
-			e.svelte_meta_invalid_placement(start, name);
+			e.svelte_meta_invalid_placement(start, tag.name);
 		}
 
-		parser.meta_tags[name] = true;
+		parser.meta_tags[tag.name] = true;
 	}
 
-	const type = meta_tags.has(name)
-		? meta_tags.get(name)
-		: regex_valid_component_name.test(name)
+	const type = meta_tags.has(tag.name)
+		? meta_tags.get(tag.name)
+		: regex_valid_component_name.test(tag.name) || (parser.loose && tag.name.endsWith('.'))
 			? 'Component'
-			: name === 'title' && parent_is_head(parser.stack)
+			: tag.name === 'title' && parent_is_head(parser.stack)
 				? 'TitleElement'
 				: // TODO Svelte 6/7: once slots are removed in favor of snippets, always keep slot as a regular element
-					name === 'slot' && !parent_is_shadowroot_template(parser.stack)
+					tag.name === 'slot' && !parent_is_shadowroot_template(parser.stack)
 					? 'SlotElement'
 					: 'RegularElement';
 
@@ -158,7 +183,8 @@ export default function element(parser) {
 					type,
 					start,
 					end: -1,
-					name,
+					name: tag.name,
+					name_loc: tag.loc,
 					attributes: [],
 					fragment: create_fragment(true),
 					metadata: {
@@ -166,14 +192,16 @@ export default function element(parser) {
 						mathml: false,
 						scoped: false,
 						has_spread: false,
-						path: []
+						path: [],
+						synthetic_value_node: null
 					}
 				}
 			: /** @type {AST.ElementLike} */ ({
 					type,
 					start,
 					end: -1,
-					name,
+					name: tag.name,
+					name_loc: tag.loc,
 					attributes: [],
 					fragment: create_fragment(true),
 					metadata: {
@@ -183,12 +211,14 @@ export default function element(parser) {
 
 	parser.allow_whitespace();
 
-	if (parent.type === 'RegularElement' && closing_tag_omitted(parent.name, name)) {
+	if (parent.type === 'RegularElement' && closing_tag_omitted(parent.name, tag.name)) {
+		const end = parent.fragment.nodes[0]?.start ?? start;
+		w.element_implicitly_closed({ start: parent.start, end }, `<${tag.name}>`, `</${parent.name}>`);
 		parent.end = start;
 		parser.pop();
 		parser.last_auto_closed_tag = {
 			tag: parent.name,
-			reason: name,
+			reason: tag.name,
 			depth: parser.stack.length
 		};
 	}
@@ -198,7 +228,7 @@ export default function element(parser) {
 
 	const current = parser.current();
 	const is_top_level_script_or_style =
-		(name === 'script' || name === 'style') && current.type === 'Root';
+		(tag.name === 'script' || tag.name === 'style') && current.type === 'Root';
 
 	const read = is_top_level_script_or_style ? read_static_attribute : read_attribute;
 
@@ -229,6 +259,10 @@ export default function element(parser) {
 		parser.allow_whitespace();
 	}
 
+	if (element.type === 'Component') {
+		element.metadata.expression = new ExpressionMetadata();
+	}
+
 	if (element.type === 'SvelteComponent') {
 		const index = element.attributes.findIndex(
 			/** @param {any} attr */
@@ -244,6 +278,7 @@ export default function element(parser) {
 		}
 
 		element.expression = get_attribute_expression(definition);
+		element.metadata.expression = new ExpressionMetadata();
 	}
 
 	if (element.type === 'SvelteElement') {
@@ -282,6 +317,8 @@ export default function element(parser) {
 		} else {
 			element.tag = get_attribute_expression(definition);
 		}
+
+		element.metadata.expression = new ExpressionMetadata();
 	}
 
 	if (is_top_level_script_or_style) {
@@ -304,7 +341,7 @@ export default function element(parser) {
 			}
 		}
 
-		if (name === 'script') {
+		if (tag.name === 'script') {
 			const content = read_script(parser, start, element.attributes);
 			if (prev_comment) {
 				// We take advantage of the fact that the root will never have leadingComments set,
@@ -332,7 +369,7 @@ export default function element(parser) {
 
 	parser.append(element);
 
-	const self_closing = parser.eat('/') || is_void(name);
+	const self_closing = parser.eat('/') || is_void(tag.name);
 	const closed = parser.eat('>', true, false);
 
 	// Loose parsing mode
@@ -355,14 +392,6 @@ export default function element(parser) {
 				// ... or we're followed by whitespace, for example near the end of the template,
 				// which we want to take in so that language tools has more room to work with
 				parser.allow_whitespace();
-				if (parser.index === parser.template.length) {
-					while (
-						parser.index < parser.template_untrimmed.length &&
-						regex_whitespace.test(parser.template_untrimmed[parser.index])
-					) {
-						parser.index++;
-					}
-				}
 			}
 		}
 	}
@@ -370,19 +399,28 @@ export default function element(parser) {
 	if (self_closing || !closed) {
 		// don't push self-closing elements onto the stack
 		element.end = parser.index;
-	} else if (name === 'textarea') {
+	} else if (tag.name === 'textarea') {
 		// special case
 		element.fragment.nodes = read_sequence(
 			parser,
-			() => regex_closing_textarea_tag.test(parser.template.slice(parser.index)),
+			() => {
+				regex_closing_textarea_tag.lastIndex = parser.index;
+				return regex_closing_textarea_tag.test(parser.template);
+			},
 			'inside <textarea>'
 		);
 		parser.read(regex_closing_textarea_tag);
 		element.end = parser.index;
-	} else if (name === 'script' || name === 'style') {
+	} else if (tag.name === 'script' || tag.name === 'style') {
 		// special case
 		const start = parser.index;
-		const data = parser.read_until(new RegExp(`</${name}>`));
+		const close_tag = `</${tag.name}>`;
+		const close_index = parser.template.indexOf(close_tag, parser.index);
+		const data = parser.template.slice(
+			parser.index,
+			close_index === -1 ? parser.template.length : close_index
+		);
+		parser.index = close_index === -1 ? parser.template.length : close_index;
 		const end = parser.index;
 
 		/** @type {AST.Text} */
@@ -395,7 +433,7 @@ export default function element(parser) {
 		};
 
 		element.fragment.nodes.push(node);
-		parser.eat(`</${name}>`, true);
+		parser.eat(`</${tag.name}>`, true);
 		element.end = parser.index;
 	} else {
 		parser.stack.push(element);
@@ -438,8 +476,8 @@ function parent_is_shadowroot_template(stack) {
 function read_static_attribute(parser) {
 	const start = parser.index;
 
-	const name = parser.read_until(regex_token_ending_character);
-	if (!name) return null;
+	const tag = read_tag(parser, regex_token_ending_character);
+	if (!tag.name) return null;
 
 	/** @type {true | Array<AST.Text | AST.ExpressionTag>} */
 	let value = true;
@@ -473,19 +511,49 @@ function read_static_attribute(parser) {
 		e.expected_token(parser.index, '=');
 	}
 
-	return create_attribute(name, start, parser.index, value);
+	return create_attribute(tag.name, tag.loc, start, parser.index, value);
 }
 
 /**
  * @param {Parser} parser
- * @returns {AST.Attribute | AST.SpreadAttribute | AST.Directive | null}
+ * @returns {AST.Attribute | AST.SpreadAttribute | AST.Directive | AST.AttachTag | null}
  */
 function read_attribute(parser) {
+	/** @type {AST.JSComment | null} */
+	// eslint-disable-next-line no-useless-assignment -- it is, in fact, eslint that is useless
+	let comment = null;
+
+	while ((comment = read_comment(parser))) {
+		parser.root.comments.push(comment);
+		parser.allow_whitespace();
+	}
+
 	const start = parser.index;
 
 	if (parser.eat('{')) {
 		parser.allow_whitespace();
 
+		if (parser.eat('@attach')) {
+			parser.require_whitespace();
+
+			const expression = read_expression(parser);
+			parser.allow_whitespace();
+			parser.eat('}', true);
+
+			/** @type {AST.AttachTag} */
+			const attachment = {
+				type: 'AttachTag',
+				start,
+				end: parser.index,
+				expression,
+				metadata: {
+					expression: new ExpressionMetadata()
+				}
+			};
+
+			return attachment;
+		}
+
 		if (parser.eat('...')) {
 			const expression = read_expression(parser);
 
@@ -499,16 +567,15 @@ function read_attribute(parser) {
 				end: parser.index,
 				expression,
 				metadata: {
-					expression: create_expression_metadata()
+					expression: new ExpressionMetadata()
 				}
 			};
 
 			return spread;
 		} else {
-			const value_start = parser.index;
-			let name = parser.read_identifier();
+			const id = parser.read_identifier();
 
-			if (name === null) {
+			if (id.name === '') {
 				if (
 					parser.loose &&
 					(parser.match('#') || parser.match('/') || parser.match('@') || parser.match(':'))
@@ -518,7 +585,6 @@ function read_attribute(parser) {
 					return null;
 				} else if (parser.loose && parser.match('}')) {
 					// Likely in the middle of typing, just created the shorthand
-					name = '';
 				} else {
 					e.attribute_empty_shorthand(start);
 				}
@@ -530,32 +596,28 @@ function read_attribute(parser) {
 			/** @type {AST.ExpressionTag} */
 			const expression = {
 				type: 'ExpressionTag',
-				start: value_start,
-				end: value_start + name.length,
-				expression: {
-					start: value_start,
-					end: value_start + name.length,
-					type: 'Identifier',
-					name
-				},
+				start: id.start,
+				end: id.end,
+				expression: id,
 				metadata: {
-					expression: create_expression_metadata()
+					expression: new ExpressionMetadata()
 				}
 			};
 
-			return create_attribute(name, start, parser.index, expression);
+			return create_attribute(id.name, id.loc, start, parser.index, expression);
 		}
 	}
 
-	const name = parser.read_until(regex_token_ending_character);
-	if (!name) return null;
+	const tag = read_tag(parser, regex_token_ending_character);
+
+	if (!tag.name) return null;
 
 	let end = parser.index;
 
 	parser.allow_whitespace();
 
-	const colon_index = name.indexOf(':');
-	const type = colon_index !== -1 && get_directive_type(name.slice(0, colon_index));
+	const colon_index = tag.name.indexOf(':');
+	const type = colon_index !== -1 && get_directive_type(tag.name.slice(0, colon_index));
 
 	/** @type {true | AST.ExpressionTag | Array<AST.Text | AST.ExpressionTag>} */
 	let value = true;
@@ -584,10 +646,10 @@ function read_attribute(parser) {
 	}
 
 	if (type) {
-		const [directive_name, ...modifiers] = name.slice(colon_index + 1).split('|');
+		const [directive_name, ...modifiers] = tag.name.slice(colon_index + 1).split('|');
 
 		if (directive_name === '') {
-			e.directive_missing_name({ start, end: start + colon_index + 1 }, name);
+			e.directive_missing_name({ start, end: start + colon_index + 1 }, tag.name);
 		}
 
 		if (type === 'StyleDirective') {
@@ -596,10 +658,11 @@ function read_attribute(parser) {
 				end,
 				type,
 				name: directive_name,
+				name_loc: tag.loc,
 				modifiers: /** @type {Array<'important'>} */ (modifiers),
 				value,
 				metadata: {
-					expression: create_expression_metadata()
+					expression: new ExpressionMetadata()
 				}
 			};
 		}
@@ -621,23 +684,23 @@ function read_attribute(parser) {
 			}
 		}
 
-		/** @type {AST.Directive} */
-		const directive = {
+		const directive = /** @type {AST.Directive} */ ({
 			start,
 			end,
 			type,
 			name: directive_name,
+			name_loc: tag.loc,
 			expression,
 			metadata: {
-				expression: create_expression_metadata()
+				expression: new ExpressionMetadata()
 			}
-		};
+		});
 
 		// @ts-expect-error we do this separately from the declaration to avoid upsetting typescript
 		directive.modifiers = modifiers;
 
 		if (directive.type === 'TransitionDirective') {
-			const direction = name.slice(0, colon_index);
+			const direction = tag.name.slice(0, colon_index);
 			directive.intro = direction === 'in' || direction === 'transition';
 			directive.outro = direction === 'out' || direction === 'transition';
 		}
@@ -658,7 +721,51 @@ function read_attribute(parser) {
 		return directive;
 	}
 
-	return create_attribute(name, start, end, value);
+	return create_attribute(tag.name, tag.loc, start, end, value);
+}
+
+/**
+ * @param {Parser} parser
+ * @returns {AST.JSComment | null}
+ */
+function read_comment(parser) {
+	const start = parser.index;
+
+	if (parser.eat('//')) {
+		const value = parser.read_until(/\n/);
+		const end = parser.index;
+
+		return {
+			type: 'Line',
+			start,
+			end,
+			value,
+			loc: {
+				start: locator(start),
+				end: locator(end)
+			}
+		};
+	}
+
+	if (parser.eat('/*')) {
+		const value = parser.read_until(/\*\//);
+
+		parser.eat('*/');
+		const end = parser.index;
+
+		return {
+			type: 'Block',
+			start,
+			end,
+			value,
+			loc: {
+				start: locator(start),
+				end: locator(end)
+			}
+		};
+	}
+
+	return null;
 }
 
 /**
@@ -755,7 +862,8 @@ function read_sequence(parser, done, location) {
 
 	/** @param {number} end */
 	function flush(end) {
-		if (current_chunk.raw) {
+		if (end > current_chunk.start) {
+			current_chunk.raw = parser.template.slice(current_chunk.start, end);
 			current_chunk.data = decode_character_references(current_chunk.raw, true);
 			current_chunk.end = end;
 			chunks.push(current_chunk);
@@ -795,7 +903,7 @@ function read_sequence(parser, done, location) {
 				end: parser.index,
 				expression,
 				metadata: {
-					expression: create_expression_metadata()
+					expression: new ExpressionMetadata()
 				}
 			};
 
@@ -809,7 +917,7 @@ function read_sequence(parser, done, location) {
 				data: ''
 			};
 		} else {
-			current_chunk.raw += parser.template[parser.index++];
+			parser.index++;
 		}
 	}
 
@@ -819,3 +927,25 @@ function read_sequence(parser, done, location) {
 		e.unexpected_eof(parser.template.length);
 	}
 }
+
+/**
+ * @param {Parser} parser
+ * @param {RegExp} regex
+ * @returns {Identifier & { start: number, end: number, loc: SourceLocation }}
+ */
+function read_tag(parser, regex) {
+	const start = parser.index;
+	const name = parser.read_until(regex);
+	const end = parser.index;
+
+	return {
+		type: 'Identifier',
+		name,
+		start,
+		end,
+		loc: {
+			start: locator(start),
+			end: locator(end)
+		}
+	};
+}
diff --git a/packages/svelte/src/compiler/phases/1-parse/state/tag.js b/packages/svelte/src/compiler/phases/1-parse/state/tag.js
index 423ada792c..15c79e0353 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/tag.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/tag.js
@@ -1,15 +1,22 @@
-/** @import { ArrowFunctionExpression, Expression, Identifier, Pattern } from 'estree' */
+/** @import { ArrowFunctionExpression, Expression, Identifier, Pattern, VariableDeclaration } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { Parser } from '../index.js' */
-import read_pattern from '../read/context.js';
-import read_expression from '../read/expression.js';
+import { walk } from 'zimmerframe';
 import * as e from '../../../errors.js';
+import { ExpressionMetadata } from '../../nodes.js';
+import { parse_expression_at, parse_statement_at } from '../acorn.js';
+import read_pattern from '../read/context.js';
+import read_expression, { get_loose_identifier } from '../read/expression.js';
 import { create_fragment } from '../utils/create.js';
-import { walk } from 'zimmerframe';
-import { parse_expression_at } from '../acorn.js';
-import { create_expression_metadata } from '../../nodes.js';
+import { find_matching_bracket, match_bracket } from '../utils/bracket.js';
+
+const regex_whitespace_with_closing_curly_brace = /\s*}/y;
+const regex_supported_declaration = /(?:let|const)\b/y;
+const regex_unsupported_declaration = /(?:var|interface|enum)\b/y;
+// `type` is a contextual keyword; this is just a shape hint, confirmed by parsing.
+const regex_maybe_type_declaration = /type\b/y;
 
-const regex_whitespace_with_closing_curly_brace = /^\s*}/;
+const pointy_bois = { '<': '>' };
 
 /** @param {Parser} parser */
 export default function tag(parser) {
@@ -28,6 +35,20 @@ export default function tag(parser) {
 		}
 	}
 
+	const declaration = read_declaration(parser);
+	if (declaration) {
+		parser.append({
+			type: 'DeclarationTag',
+			start,
+			end: parser.index,
+			declaration: /** @type {VariableDeclaration} */ (declaration),
+			metadata: {
+				expression: new ExpressionMetadata()
+			}
+		});
+		return;
+	}
+
 	const expression = read_expression(parser);
 
 	parser.allow_whitespace();
@@ -39,11 +60,94 @@ export default function tag(parser) {
 		end: parser.index,
 		expression,
 		metadata: {
-			expression: create_expression_metadata()
+			expression: new ExpressionMetadata()
 		}
 	});
 }
 
+/**
+ * @param {Parser} parser
+ * @returns {null | import('estree').VariableDeclaration}
+ */
+function read_declaration(parser) {
+	const start = parser.index;
+
+	const unsupported = parser.match_regex(regex_unsupported_declaration);
+	if (unsupported) {
+		e.declaration_tag_invalid_type({ start, end: start + unsupported.length });
+	}
+
+	if (
+		!parser.match_regex(regex_supported_declaration) &&
+		// `type` is special, since it is not a reserved keyword and can be used
+		// as part of a valid expression. We gotta parse first and then see what it is.
+		!parser.match_regex(regex_maybe_type_declaration)
+	) {
+		return null;
+	}
+
+	const initial_comment_count = parser.root.comments.length;
+
+	/** @type {import('estree').Statement | import('estree').VariableDeclaration} */
+	let declaration;
+	try {
+		declaration = parse_statement_at(parser, parser.template, start);
+	} catch (error) {
+		if (!parser.loose) throw error;
+
+		const end = find_matching_bracket(parser.template, start, '{');
+		if (end === undefined) throw error;
+
+		parser.index = end;
+		const kind = parser.template.startsWith('const', start) ? 'const' : 'let';
+
+		declaration = {
+			type: 'VariableDeclaration',
+			kind,
+			declarations: [
+				{
+					type: 'VariableDeclarator',
+					id: {
+						type: 'Identifier',
+						name: '',
+						start: parser.index,
+						end: parser.index
+					},
+					init: null,
+					start: parser.index,
+					end: parser.index
+				}
+			],
+			start,
+			end
+		};
+	}
+
+	if (declaration.type !== 'VariableDeclaration') {
+		if (declaration.type === 'ExpressionStatement') {
+			parser.root.comments.length = initial_comment_count; // Else they show up duplicated
+			return null;
+		} else {
+			// This is a TSTypeAliasDeclaration
+			e.declaration_tag_invalid_type({
+				start: declaration.start ?? start,
+				end: declaration.end ?? parser.index
+			});
+		}
+	}
+
+	// TODO support using
+	if (declaration.kind !== 'let' && declaration.kind !== 'const') {
+		e.declaration_tag_invalid_type(declaration);
+	}
+
+	parser.index = /** @type {number} */ (declaration.end);
+	parser.allow_whitespace();
+	parser.eat('}', true);
+
+	return declaration;
+}
+
 /** @param {Parser} parser */
 function open(parser) {
 	let start = parser.index - 2;
@@ -60,7 +164,10 @@ function open(parser) {
 			end: -1,
 			test: read_expression(parser),
 			consequent: create_fragment(),
-			alternate: null
+			alternate: null,
+			metadata: {
+				expression: new ExpressionMetadata()
+			}
 		});
 
 		parser.allow_whitespace();
@@ -87,7 +194,7 @@ function open(parser) {
 		// we get a valid expression
 		while (!expression) {
 			try {
-				expression = read_expression(parser);
+				expression = read_expression(parser, undefined, true);
 			} catch (err) {
 				end = /** @type {any} */ (err).position[0] - 2;
 
@@ -95,7 +202,15 @@ function open(parser) {
 					end -= 1;
 				}
 
-				if (end <= start) throw err;
+				if (end <= start) {
+					if (parser.loose) {
+						expression = get_loose_identifier(parser);
+						if (expression) {
+							break;
+						}
+					}
+					throw err;
+				}
 
 				// @ts-expect-error parser.template is meant to be readonly, this is a special case
 				parser.template = template.slice(0, end);
@@ -163,7 +278,7 @@ function open(parser) {
 
 		if (parser.eat(',')) {
 			parser.allow_whitespace();
-			index = parser.read_identifier();
+			index = parser.read_identifier().name;
 			if (!index) {
 				e.expected_identifier(parser.index);
 			}
@@ -174,13 +289,30 @@ function open(parser) {
 		if (parser.eat('(')) {
 			parser.allow_whitespace();
 
-			key = read_expression(parser);
+			key = read_expression(parser, '(');
 			parser.allow_whitespace();
 			parser.eat(')', true);
 			parser.allow_whitespace();
 		}
 
-		parser.eat('}', true);
+		const matches = parser.eat('}', true, false);
+
+		if (!matches) {
+			// Parser may have read the `as` as part of the expression (e.g. in `{#each foo. as x}`)
+			if (parser.template.slice(parser.index - 4, parser.index) === ' as ') {
+				const prev_index = parser.index;
+				context = read_pattern(parser);
+				parser.eat('}', true);
+				expression = {
+					type: 'Identifier',
+					name: '',
+					start: expression.start,
+					end: prev_index - 4
+				};
+			} else {
+				parser.eat('}', true); // rerun to produce the parser error
+			}
+		}
 
 		/** @type {AST.EachBlock} */
 		const block = parser.append({
@@ -216,7 +348,10 @@ function open(parser) {
 			error: null,
 			pending: null,
 			then: null,
-			catch: null
+			catch: null,
+			metadata: {
+				expression: new ExpressionMetadata()
+			}
 		});
 
 		if (parser.eat('then')) {
@@ -246,7 +381,39 @@ function open(parser) {
 			parser.fragments.push(block.pending);
 		}
 
-		parser.eat('}', true);
+		const matches = parser.eat('}', true, false);
+
+		// Parser may have read the `then/catch` as part of the expression (e.g. in `{#await foo. then x}`)
+		if (!matches) {
+			if (parser.template.slice(parser.index - 6, parser.index) === ' then ') {
+				const prev_index = parser.index;
+				block.value = read_pattern(parser);
+				parser.eat('}', true);
+				block.expression = {
+					type: 'Identifier',
+					name: '',
+					start: expression.start,
+					end: prev_index - 6
+				};
+				block.then = block.pending;
+				block.pending = null;
+			} else if (parser.template.slice(parser.index - 7, parser.index) === ' catch ') {
+				const prev_index = parser.index;
+				block.error = read_pattern(parser);
+				parser.eat('}', true);
+				block.expression = {
+					type: 'Identifier',
+					name: '',
+					start: expression.start,
+					end: prev_index - 7
+				};
+				block.catch = block.pending;
+				block.pending = null;
+			} else {
+				parser.eat('}', true); // rerun to produce the parser error
+			}
+		}
+
 		parser.stack.push(block);
 
 		return;
@@ -266,7 +433,10 @@ function open(parser) {
 			start,
 			end: -1,
 			expression,
-			fragment: create_fragment()
+			fragment: create_fragment(),
+			metadata: {
+				expression: new ExpressionMetadata()
+			}
 		});
 
 		parser.stack.push(block);
@@ -278,22 +448,32 @@ function open(parser) {
 	if (parser.eat('snippet')) {
 		parser.require_whitespace();
 
-		const name_start = parser.index;
-		let name = parser.read_identifier();
-		const name_end = parser.index;
+		const id = parser.read_identifier();
 
-		if (name === null) {
-			if (parser.loose) {
-				name = '';
-			} else {
-				e.expected_identifier(parser.index);
-			}
+		if (id.name === '' && !parser.loose) {
+			e.expected_identifier(parser.index);
 		}
 
 		parser.allow_whitespace();
 
 		const params_start = parser.index;
 
+		// snippets could have a generic signature, e.g. `#snippet foo<T>(...)`
+		/** @type {string | undefined} */
+		let type_params;
+
+		// if we match a generic opening
+		if (parser.ts && parser.match('<')) {
+			const start = parser.index;
+			const end = match_bracket(parser, start, pointy_bois);
+
+			type_params = parser.template.slice(start + 1, end - 1);
+
+			parser.index = end;
+		}
+
+		parser.allow_whitespace();
+
 		const matched = parser.eat('(', true, false);
 
 		if (matched) {
@@ -313,7 +493,7 @@ function open(parser) {
 
 		let function_expression = matched
 			? /** @type {ArrowFunctionExpression} */ (
-					parse_expression_at(prelude + `${params} => {}`, parser.ts, params_start)
+					parse_expression_at(parser, prelude + `${params} => {}`, params_start)
 				)
 			: { params: [] };
 
@@ -325,12 +505,8 @@ function open(parser) {
 			type: 'SnippetBlock',
 			start,
 			end: -1,
-			expression: {
-				type: 'Identifier',
-				start: name_start,
-				end: name_end,
-				name
-			},
+			expression: id,
+			typeParams: type_params,
 			parameters: function_expression.params,
 			body: create_fragment(),
 			metadata: {
@@ -384,7 +560,10 @@ function next(parser) {
 				elseif: true,
 				test: expression,
 				consequent: create_fragment(),
-				alternate: null
+				alternate: null,
+				metadata: {
+					expression: new ExpressionMetadata()
+				}
 			});
 
 			parser.stack.push(child);
@@ -547,7 +726,10 @@ function special(parser) {
 			type: 'HtmlTag',
 			start,
 			end: parser.index,
-			expression
+			expression,
+			metadata: {
+				expression: new ExpressionMetadata()
+			}
 		});
 
 		return;
@@ -622,8 +804,12 @@ function special(parser) {
 				declarations: [{ type: 'VariableDeclarator', id, init, start: id.start, end: init.end }],
 				start: start + 2, // start at const, not at @const
 				end: parser.index - 1
+			},
+			metadata: {
+				expression: new ExpressionMetadata()
 			}
 		});
+		return;
 	}
 
 	if (parser.eat('render')) {
@@ -648,11 +834,14 @@ function special(parser) {
 			end: parser.index,
 			expression: /** @type {AST.RenderTag['expression']} */ (expression),
 			metadata: {
+				expression: new ExpressionMetadata(),
 				dynamic: false,
-				args_with_call_expression: new Set(),
+				arguments: [],
 				path: [],
 				snippets: new Set()
 			}
 		});
+		return;
 	}
+	e.expected_tag(parser.index);
 }
diff --git a/packages/svelte/src/compiler/phases/1-parse/state/text.js b/packages/svelte/src/compiler/phases/1-parse/state/text.js
index d0af3a846a..1eab43081d 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/text.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/text.js
@@ -6,12 +6,12 @@ import { decode_character_references } from '../utils/html.js';
 export default function text(parser) {
 	const start = parser.index;
 
-	let data = '';
-
 	while (parser.index < parser.template.length && !parser.match('<') && !parser.match('{')) {
-		data += parser.template[parser.index++];
+		parser.index++;
 	}
 
+	const data = parser.template.slice(start, parser.index);
+
 	/** @type {AST.Text} */
 	parser.append({
 		type: 'Text',
diff --git a/packages/svelte/src/compiler/phases/1-parse/utils/bracket.js b/packages/svelte/src/compiler/phases/1-parse/utils/bracket.js
index 4e02f06de6..47299c9de5 100644
--- a/packages/svelte/src/compiler/phases/1-parse/utils/bracket.js
+++ b/packages/svelte/src/compiler/phases/1-parse/utils/bracket.js
@@ -1,40 +1,5 @@
-import full_char_code_at from './full_char_code_at.js';
-
-const SQUARE_BRACKET_OPEN = '['.charCodeAt(0);
-const SQUARE_BRACKET_CLOSE = ']'.charCodeAt(0);
-const CURLY_BRACKET_OPEN = '{'.charCodeAt(0);
-const CURLY_BRACKET_CLOSE = '}'.charCodeAt(0);
-
-/** @param {number} code */
-export function is_bracket_open(code) {
-	return code === SQUARE_BRACKET_OPEN || code === CURLY_BRACKET_OPEN;
-}
-
-/** @param {number} code */
-export function is_bracket_close(code) {
-	return code === SQUARE_BRACKET_CLOSE || code === CURLY_BRACKET_CLOSE;
-}
-
-/**
- * @param {number} open
- * @param {number} close
- */
-export function is_bracket_pair(open, close) {
-	return (
-		(open === SQUARE_BRACKET_OPEN && close === SQUARE_BRACKET_CLOSE) ||
-		(open === CURLY_BRACKET_OPEN && close === CURLY_BRACKET_CLOSE)
-	);
-}
-
-/** @param {number} open */
-export function get_bracket_close(open) {
-	if (open === SQUARE_BRACKET_OPEN) {
-		return SQUARE_BRACKET_CLOSE;
-	}
-	if (open === CURLY_BRACKET_OPEN) {
-		return CURLY_BRACKET_CLOSE;
-	}
-}
+/** @import { Parser } from '../index.js' */
+import * as e from '../../../errors.js';
 
 /**
  * @param {number} num
@@ -74,7 +39,9 @@ function find_string_end(string, search_start_index, string_start_char) {
  * @returns {number} The index of the end of this regex expression, or `Infinity` if not found.
  */
 function find_regex_end(string, search_start_index) {
-	return find_unescaped_char(string, search_start_index, '/');
+	const slash = find_unescaped_char(string, search_start_index, '/');
+	const eol = find_unescaped_char(string, search_start_index, '\n');
+	return slash < eol ? slash : Infinity;
 }
 
 /**
@@ -127,8 +94,7 @@ function count_leading_backslashes(string, search_start_index) {
  * @returns {number | undefined} The index of the closing bracket, or undefined if not found.
  */
 export function find_matching_bracket(template, index, open) {
-	const open_code = full_char_code_at(open, 0);
-	const close_code = get_bracket_close(open_code);
+	const close = default_brackets[open];
 	let brackets = 1;
 	let i = index;
 	while (brackets > 0 && i < template.length) {
@@ -141,7 +107,11 @@ export function find_matching_bracket(template, index, open) {
 				continue;
 			case '/': {
 				const next_char = template[i + 1];
-				if (!next_char) continue;
+				if (!next_char) {
+					// `/` is the last character; advance past it so we don't loop forever
+					i++;
+					continue;
+				}
 				if (next_char === '/') {
 					i = infinity_if_negative(template.indexOf('\n', i + 1)) + '\n'.length;
 					continue;
@@ -150,14 +120,19 @@ export function find_matching_bracket(template, index, open) {
 					i = infinity_if_negative(template.indexOf('*/', i + 1)) + '*/'.length;
 					continue;
 				}
-				i = find_regex_end(template, i + 1) + '/'.length;
+				const end = find_regex_end(template, i + 1) + '/'.length;
+				if (end === Infinity) {
+					i++;
+				} else {
+					i = end;
+				}
 				continue;
 			}
 			default: {
-				const code = full_char_code_at(template, i);
-				if (code === open_code) {
+				const char = template[i];
+				if (char === open) {
 					brackets++;
-				} else if (code === close_code) {
+				} else if (char === close) {
 					brackets--;
 				}
 				if (brackets === 0) {
@@ -169,3 +144,83 @@ export function find_matching_bracket(template, index, open) {
 	}
 	return undefined;
 }
+
+/** @type {Record<string, string>} */
+const default_brackets = {
+	'{': '}',
+	'(': ')',
+	'[': ']'
+};
+
+const default_close = new Set(Object.values(default_brackets));
+
+/**
+ * @param {Parser} parser
+ * @param {number} start
+ * @param {Record<string, string>} brackets
+ */
+export function match_bracket(parser, start, brackets = default_brackets) {
+	const close = brackets === default_brackets ? default_close : new Set(Object.values(brackets));
+	const bracket_stack = [];
+
+	let i = start;
+
+	while (i < parser.template.length) {
+		let char = parser.template[i++];
+
+		if (char === "'" || char === '"' || char === '`') {
+			i = match_quote(parser, i, char);
+			continue;
+		}
+
+		if (char in brackets) {
+			bracket_stack.push(char);
+		} else if (close.has(char)) {
+			const popped = /** @type {string} */ (bracket_stack.pop());
+			const expected = /** @type {string} */ (brackets[popped]);
+
+			if (char !== expected) {
+				e.expected_token(i - 1, expected);
+			}
+
+			if (bracket_stack.length === 0) {
+				return i;
+			}
+		}
+	}
+
+	e.unexpected_eof(parser.template.length);
+}
+
+/**
+ * @param {Parser} parser
+ * @param {number} start
+ * @param {string} quote
+ */
+function match_quote(parser, start, quote) {
+	let is_escaped = false;
+	let i = start;
+
+	while (i < parser.template.length) {
+		const char = parser.template[i++];
+
+		if (is_escaped) {
+			is_escaped = false;
+			continue;
+		}
+
+		if (char === quote) {
+			return i;
+		}
+
+		if (char === '\\') {
+			is_escaped = true;
+		}
+
+		if (quote === '`' && char === '$' && parser.template[i] === '{') {
+			i = match_bracket(parser, i);
+		}
+	}
+
+	e.unterminated_string_constant(start);
+}
diff --git a/packages/svelte/src/compiler/phases/1-parse/utils/full_char_code_at.js b/packages/svelte/src/compiler/phases/1-parse/utils/full_char_code_at.js
deleted file mode 100644
index 90e6b8def3..0000000000
--- a/packages/svelte/src/compiler/phases/1-parse/utils/full_char_code_at.js
+++ /dev/null
@@ -1,15 +0,0 @@
-// Adapted from https://github.com/acornjs/acorn/blob/6584815dca7440e00de841d1dad152302fdd7ca5/src/tokenize.js
-// Reproduced under MIT License https://github.com/acornjs/acorn/blob/master/LICENSE
-
-/**
- * @param {string} str
- * @param {number} i
- * @returns {number}
- */
-export default function full_char_code_at(str, i) {
-	const code = str.charCodeAt(i);
-	if (code <= 0xd7ff || code >= 0xe000) return code;
-
-	const next = str.charCodeAt(i + 1);
-	return (code << 10) + next - 0x35fdc00;
-}
diff --git a/packages/svelte/src/compiler/phases/1-parse/utils/fuzzymatch.js b/packages/svelte/src/compiler/phases/1-parse/utils/fuzzymatch.js
index cd72d73005..c8cf7f14ff 100644
--- a/packages/svelte/src/compiler/phases/1-parse/utils/fuzzymatch.js
+++ b/packages/svelte/src/compiler/phases/1-parse/utils/fuzzymatch.js
@@ -12,8 +12,8 @@ export default function fuzzymatch(name, names) {
 	return matches && matches[0][0] > 0.7 ? matches[0][1] : null;
 }
 
-// adapted from https://github.com/Glench/fuzzyset.js/blob/master/lib/fuzzyset.js
-// BSD Licensed
+// adapted from https://github.com/Glench/fuzzyset.js/blob/master/lib/fuzzyset.js in 2016
+// BSD Licensed (see https://github.com/Glench/fuzzyset.js/issues/10)
 
 const GRAM_SIZE_LOWER = 2;
 const GRAM_SIZE_UPPER = 3;
@@ -46,10 +46,11 @@ function levenshtein(str1, str2) {
 	/** @type {number[]} */
 	const current = [];
 	let prev = 0;
-	let value = 0;
 
 	for (let i = 0; i <= str2.length; i++) {
 		for (let j = 0; j <= str1.length; j++) {
+			let value;
+
 			if (i && j) {
 				if (str1.charAt(j - 1) === str2.charAt(i - 1)) {
 					value = prev;
diff --git a/packages/svelte/src/compiler/phases/1-parse/utils/html.js b/packages/svelte/src/compiler/phases/1-parse/utils/html.js
index a68acb996f..a0c2a5b06f 100644
--- a/packages/svelte/src/compiler/phases/1-parse/utils/html.js
+++ b/packages/svelte/src/compiler/phases/1-parse/utils/html.js
@@ -72,6 +72,8 @@ const NUL = 0;
 // to replace them ourselves
 //
 // Source: http://en.wikipedia.org/wiki/Character_encodings_in_HTML#Illegal_characters
+// Also see: https://en.wikipedia.org/wiki/Plane_(Unicode)
+// Also see: https://html.spec.whatwg.org/multipage/parsing.html#preprocessing-the-input-stream
 
 /** @param {number} code */
 function validate_code(code) {
@@ -116,5 +118,10 @@ function validate_code(code) {
 		return code;
 	}
 
+	// supplementary special-purpose plane 0xe0000 - 0xe07f and 0xe0100 - 0xe01ef
+	if ((code >= 917504 && code <= 917631) || (code >= 917760 && code <= 917999)) {
+		return code;
+	}
+
 	return NUL;
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js
index b8c88a1023..d6052c9c3e 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js
@@ -7,13 +7,15 @@ import { is_keyframes_node } from '../../css.js';
 import { is_global, is_unscoped_pseudo_class } from './utils.js';
 
 /**
- * @typedef {Visitors<
- *   AST.CSS.Node,
- *   {
- *     keyframes: string[];
- *     rule: AST.CSS.Rule | null;
- *   }
- * >} CssVisitors
+ * @typedef {{
+ *   keyframes: string[];
+ *   rule: AST.CSS.Rule | null;
+ *   analysis: ComponentAnalysis;
+ * }} CssState
+ */
+
+/**
+ * @typedef {Visitors<AST.CSS.Node, CssState>} CssVisitors
  */
 
 /**
@@ -28,12 +30,32 @@ function is_global_block_selector(simple_selector) {
 	);
 }
 
+/**
+ * @param {AST.SvelteNode[]} path
+ */
+function is_unscoped(path) {
+	return path
+		.filter((node) => node.type === 'Rule')
+		.every((node) => node.metadata.has_global_selectors);
+}
+
+/**
+ *
+ * @param {Array<AST.CSS.Node>} path
+ */
+function is_in_global_block(path) {
+	return path.some((node) => node.type === 'Rule' && node.metadata.is_global_block);
+}
+
 /** @type {CssVisitors} */
 const css_visitors = {
 	Atrule(node, context) {
 		if (is_keyframes_node(node)) {
-			if (!node.prelude.startsWith('-global-')) {
+			if (!node.prelude.startsWith('-global-') && !is_in_global_block(context.path)) {
 				context.state.keyframes.push(node.prelude);
+			} else if (node.prelude.startsWith('-global-')) {
+				// we don't check if the block.children.length because the keyframe is still added even if empty
+				context.state.analysis.css.has_global ||= is_unscoped(context.path);
 			}
 		}
 
@@ -46,8 +68,12 @@ const css_visitors = {
 			const global = node.children.find(is_global);
 
 			if (global) {
-				const idx = node.children.indexOf(global);
+				const is_nested = context.path.at(-2)?.type === 'PseudoClassSelector';
+				if (is_nested && !global.selectors[0].args) {
+					e.css_global_block_invalid_placement(global.selectors[0]);
+				}
 
+				const idx = node.children.indexOf(global);
 				if (global.selectors[0].args !== null && idx !== 0 && idx !== node.children.length - 1) {
 					// ensure `:global(...)` is not used in the middle of a selector (but multiple `global(...)` in sequence are ok)
 					for (let i = idx + 1; i < node.children.length; i++) {
@@ -91,10 +117,12 @@ const css_visitors = {
 
 		node.metadata.rule = context.state.rule;
 
-		node.metadata.used ||= node.children.every(
+		node.metadata.is_global = node.children.every(
 			({ metadata }) => metadata.is_global || metadata.is_global_like
 		);
 
+		node.metadata.used ||= node.metadata.is_global;
+
 		if (
 			node.metadata.rule?.metadata.parent_rule &&
 			node.children[0]?.selectors[0]?.type === 'NestingSelector'
@@ -125,7 +153,13 @@ const css_visitors = {
 
 		node.metadata.is_global = node.selectors.length >= 1 && is_global(node);
 
-		if (node.selectors.length === 1) {
+		if (
+			node.selectors.length >= 1 &&
+			node.selectors.every(
+				(selector) =>
+					selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector'
+			)
+		) {
 			const first = node.selectors[0];
 			node.metadata.is_global_like ||=
 				(first.type === 'PseudoClassSelector' && first.name === 'host') ||
@@ -163,10 +197,12 @@ const css_visitors = {
 	Rule(node, context) {
 		node.metadata.parent_rule = context.state.rule;
 
-		node.metadata.is_global_block = node.prelude.children.some((selector) => {
+		// We gotta allow :global x, :global y because CSS preprocessors might generate that from :global { x, y {...} }
+		for (const complex_selector of node.prelude.children) {
 			let is_global_block = false;
 
-			for (const child of selector.children) {
+			for (let selector_idx = 0; selector_idx < complex_selector.children.length; selector_idx++) {
+				const child = complex_selector.children[selector_idx];
 				const idx = child.selectors.findIndex(is_global_block_selector);
 
 				if (is_global_block) {
@@ -174,70 +210,79 @@ const css_visitors = {
 					child.metadata.is_global_like = true;
 				}
 
-				if (idx !== -1) {
-					is_global_block = true;
-					for (let i = idx + 1; i < child.selectors.length; i++) {
-						walk(/** @type {AST.CSS.Node} */ (child.selectors[i]), null, {
-							ComplexSelector(node) {
-								node.metadata.used = true;
-							}
-						});
-					}
-				}
-			}
+				if (idx === 0) {
+					if (
+						child.selectors.length > 1 &&
+						selector_idx === 0 &&
+						node.metadata.parent_rule === null
+					) {
+						e.css_global_block_invalid_modifier_start(child.selectors[1]);
+					} else {
+						// `child` starts with `:global`
+						node.metadata.is_global_block = is_global_block = true;
+
+						for (let i = 1; i < child.selectors.length; i++) {
+							walk(/** @type {AST.CSS.Node} */ (child.selectors[i]), null, {
+								ComplexSelector(node) {
+									node.metadata.used = true;
+								}
+							});
+						}
+
+						if (child.combinator && child.combinator.name !== ' ') {
+							e.css_global_block_invalid_combinator(child, child.combinator.name);
+						}
 
-			return is_global_block;
-		});
+						const declaration = node.block.children.find((child) => child.type === 'Declaration');
+						const is_lone_global =
+							complex_selector.children.length === 1 &&
+							complex_selector.children[0].selectors.length === 1; // just `:global`, not e.g. `:global x`
 
-		if (node.metadata.is_global_block) {
-			if (node.prelude.children.length > 1) {
-				e.css_global_block_invalid_list(node.prelude);
-			}
+						if (is_lone_global && node.prelude.children.length > 1) {
+							// `:global, :global x { z { ... } }` would become `x { z { ... } }` which means `z` is always
+							// constrained by `x`, which is not what the user intended
+							e.css_global_block_invalid_list(node.prelude);
+						}
 
-			const complex_selector = node.prelude.children[0];
-			const global_selector = complex_selector.children.find((r, selector_idx) => {
-				const idx = r.selectors.findIndex(is_global_block_selector);
-				if (idx === 0) {
-					if (r.selectors.length > 1 && selector_idx === 0 && node.metadata.parent_rule === null) {
-						e.css_global_block_invalid_modifier_start(r.selectors[1]);
+						if (
+							declaration &&
+							// :global { color: red; } is invalid, but foo :global { color: red; } is valid
+							node.prelude.children.length === 1 &&
+							is_lone_global
+						) {
+							e.css_global_block_invalid_declaration(declaration);
+						}
 					}
-					return true;
 				} else if (idx !== -1) {
-					e.css_global_block_invalid_modifier(r.selectors[idx]);
+					e.css_global_block_invalid_modifier(child.selectors[idx]);
 				}
-			});
-
-			if (!global_selector) {
-				throw new Error('Internal error: global block without :global selector');
 			}
 
-			if (global_selector.combinator && global_selector.combinator.name !== ' ') {
-				e.css_global_block_invalid_combinator(global_selector, global_selector.combinator.name);
+			if (node.metadata.is_global_block && !is_global_block) {
+				e.css_global_block_invalid_list(node.prelude);
 			}
+		}
 
-			const declaration = node.block.children.find((child) => child.type === 'Declaration');
+		const state = { ...context.state, rule: node };
 
-			if (
-				declaration &&
-				// :global { color: red; } is invalid, but foo :global { color: red; } is valid
-				node.prelude.children.length === 1 &&
-				node.prelude.children[0].children.length === 1 &&
-				node.prelude.children[0].children[0].selectors.length === 1
-			) {
-				e.css_global_block_invalid_declaration(declaration);
-			}
+		// visit selector list first, to populate child selector metadata
+		context.visit(node.prelude, state);
+
+		for (const selector of node.prelude.children) {
+			node.metadata.has_global_selectors ||= selector.metadata.is_global;
+			node.metadata.has_local_selectors ||= !selector.metadata.is_global;
 		}
 
-		context.next({
-			...context.state,
-			rule: node
-		});
+		// if this rule has a ComplexSelector whose RelativeSelector children are all
+		// `:global(...)`, and the rule contains declarations (rather than just
+		// nested rules) then the component as a whole includes global CSS
+		context.state.analysis.css.has_global ||=
+			node.metadata.has_global_selectors &&
+			node.block.children.filter((child) => child.type === 'Declaration').length > 0 &&
+			is_unscoped(context.path);
 
-		node.metadata.has_local_selectors = node.prelude.children.some((selector) => {
-			return selector.children.some(
-				({ metadata }) => !metadata.is_global && !metadata.is_global_like
-			);
-		});
+		// visit block list, so parent rule metadata is populated
+		context.visit(node.block, state);
 	},
 	NestingSelector(node, context) {
 		const rule = /** @type {AST.CSS.Rule} */ (context.state.rule);
@@ -275,5 +320,12 @@ const css_visitors = {
  * @param {ComponentAnalysis} analysis
  */
 export function analyze_css(stylesheet, analysis) {
-	walk(stylesheet, { keyframes: analysis.css.keyframes, rule: null }, css_visitors);
+	/** @type {CssState} */
+	const css_state = {
+		keyframes: analysis.css.keyframes,
+		rule: null,
+		analysis
+	};
+
+	walk(stylesheet, css_state, css_visitors);
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
index 35bc675166..39f485a9f7 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
@@ -1,19 +1,71 @@
 /** @import * as Compiler from '#compiler' */
 import { walk } from 'zimmerframe';
-import { get_parent_rules, get_possible_values, is_outer_global } from './utils.js';
+import {
+	get_parent_rules,
+	get_possible_values,
+	is_outer_global,
+	is_unscoped_pseudo_class
+} from './utils.js';
 import { regex_ends_with_whitespace, regex_starts_with_whitespace } from '../../patterns.js';
 import { get_attribute_chunks, is_text_attribute } from '../../../utils/ast.js';
 
-/** @typedef {NODE_PROBABLY_EXISTS | NODE_DEFINITELY_EXISTS} NodeExistsValue */
+/** @typedef {typeof NODE_PROBABLY_EXISTS | typeof NODE_DEFINITELY_EXISTS} NodeExistsValue */
+/** @typedef {typeof FORWARD | typeof BACKWARD} Direction */
 
 const NODE_PROBABLY_EXISTS = 0;
 const NODE_DEFINITELY_EXISTS = 1;
+const FORWARD = 0;
+const BACKWARD = 1;
 
 const whitelist_attribute_selector = new Map([
 	['details', ['open']],
 	['dialog', ['open']]
 ]);
 
+/**
+ * HTML attributes whose enumerated values are case-insensitive per the HTML spec.
+ * CSS attribute selectors match these values case-insensitively in HTML documents.
+ * @see {@link https://html.spec.whatwg.org/multipage/semantics-other.html#case-sensitivity-of-selectors HTML spec}
+ */
+const case_insensitive_attributes = new Set([
+	'accept-charset',
+	'autocapitalize',
+	'autocomplete',
+	'behavior',
+	'charset',
+	'crossorigin',
+	'decoding',
+	'dir',
+	'direction',
+	'draggable',
+	'enctype',
+	'enterkeyhint',
+	'fetchpriority',
+	'formenctype',
+	'formmethod',
+	'formtarget',
+	'hidden',
+	'http-equiv',
+	'inputmode',
+	'kind',
+	'loading',
+	'method',
+	'preload',
+	'referrerpolicy',
+	'rel',
+	'rev',
+	'role',
+	'rules',
+	'scope',
+	'shape',
+	'spellcheck',
+	'target',
+	'translate',
+	'type',
+	'valign',
+	'wrap'
+]);
+
 /** @type {Compiler.AST.CSS.Combinator} */
 const descendant_combinator = {
 	type: 'Combinator',
@@ -43,6 +95,27 @@ const nesting_selector = {
 	}
 };
 
+/** @type {Compiler.AST.CSS.RelativeSelector} */
+const any_selector = {
+	type: 'RelativeSelector',
+	start: -1,
+	end: -1,
+	combinator: null,
+	selectors: [
+		{
+			type: 'TypeSelector',
+			name: '*',
+			start: -1,
+			end: -1
+		}
+	],
+	metadata: {
+		is_global: false,
+		is_global_like: false,
+		scoped: false
+	}
+};
+
 /**
  * Snippets encountered already (avoids infinite loops)
  * @type {Set<Compiler.AST.SnippetBlock>}
@@ -52,9 +125,9 @@ const seen = new Set();
 /**
  *
  * @param {Compiler.AST.CSS.StyleSheet} stylesheet
- * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element
+ * @param {Iterable<Compiler.AST.RegularElement | Compiler.AST.SvelteElement>} elements
  */
-export function prune(stylesheet, element) {
+export function prune(stylesheet, elements) {
 	walk(/** @type {Compiler.AST.CSS.Node} */ (stylesheet), null, {
 		Rule(node, context) {
 			if (node.metadata.is_global_block) {
@@ -66,16 +139,19 @@ export function prune(stylesheet, element) {
 		ComplexSelector(node) {
 			const selectors = get_relative_selectors(node);
 
-			seen.clear();
+			for (const element of elements) {
+				seen.clear();
 
-			if (
-				apply_selector(
-					selectors,
-					/** @type {Compiler.AST.CSS.Rule} */ (node.metadata.rule),
-					element
-				)
-			) {
-				node.metadata.used = true;
+				if (
+					apply_selector(
+						selectors,
+						/** @type {Compiler.AST.CSS.Rule} */ (node.metadata.rule),
+						element,
+						BACKWARD
+					)
+				) {
+					node.metadata.used = true;
+				}
 			}
 
 			// note: we don't call context.next() here, we only recurse into
@@ -159,16 +235,37 @@ function truncate(node) {
  * @param {Compiler.AST.CSS.RelativeSelector[]} relative_selectors
  * @param {Compiler.AST.CSS.Rule} rule
  * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element
+ * @param {Direction} direction
+ * @param {number} [from]
+ * @param {number} [to]
  * @returns {boolean}
  */
-function apply_selector(relative_selectors, rule, element) {
-	const parent_selectors = relative_selectors.slice();
-	const relative_selector = parent_selectors.pop();
+function apply_selector(
+	relative_selectors,
+	rule,
+	element,
+	direction,
+	from = 0,
+	to = relative_selectors.length
+) {
+	if (from >= to) return false;
+
+	const selector_index = direction === FORWARD ? from : to - 1;
+	const relative_selector = relative_selectors[selector_index];
+	const rest_from = direction === FORWARD ? from + 1 : from;
+	const rest_to = direction === FORWARD ? to : to - 1;
 
 	const matched =
-		!!relative_selector &&
-		relative_selector_might_apply_to_node(relative_selector, rule, element) &&
-		apply_combinator(relative_selector, parent_selectors, rule, element);
+		relative_selector_might_apply_to_node(relative_selector, rule, element, direction) &&
+		apply_combinator(
+			relative_selector,
+			relative_selectors,
+			rest_from,
+			rest_to,
+			rule,
+			element,
+			direction
+		);
 
 	if (matched) {
 		if (!is_outer_global(relative_selector)) {
@@ -183,76 +280,75 @@ function apply_selector(relative_selectors, rule, element) {
 
 /**
  * @param {Compiler.AST.CSS.RelativeSelector} relative_selector
- * @param {Compiler.AST.CSS.RelativeSelector[]} parent_selectors
+ * @param {Compiler.AST.CSS.RelativeSelector[]} relative_selectors
+ * @param {number} from
+ * @param {number} to
  * @param {Compiler.AST.CSS.Rule} rule
  * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.RenderTag | Compiler.AST.Component | Compiler.AST.SvelteComponent | Compiler.AST.SvelteSelf} node
+ * @param {Direction} direction
  * @returns {boolean}
  */
-function apply_combinator(relative_selector, parent_selectors, rule, node) {
-	if (!relative_selector.combinator) return true;
-
-	const name = relative_selector.combinator.name;
-
-	switch (name) {
+function apply_combinator(relative_selector, relative_selectors, from, to, rule, node, direction) {
+	const combinator =
+		direction == FORWARD
+			? from < to
+				? relative_selectors[from].combinator
+				: undefined
+			: relative_selector.combinator;
+	if (!combinator) return true;
+
+	switch (combinator.name) {
 		case ' ':
 		case '>': {
+			const is_adjacent = combinator.name === '>';
+			const parents =
+				direction === FORWARD
+					? get_descendant_elements(node, is_adjacent)
+					: get_ancestor_elements(node, is_adjacent);
 			let parent_matched = false;
 
-			const path = node.metadata.path;
-			let i = path.length;
-
-			while (i--) {
-				const parent = path[i];
-
-				if (parent.type === 'SnippetBlock') {
-					if (seen.has(parent)) {
-						parent_matched = true;
-					} else {
-						seen.add(parent);
-
-						for (const site of parent.metadata.sites) {
-							if (apply_combinator(relative_selector, parent_selectors, rule, site)) {
-								parent_matched = true;
-							}
-						}
-					}
-
-					break;
-				}
-
-				if (parent.type === 'RegularElement' || parent.type === 'SvelteElement') {
-					if (apply_selector(parent_selectors, rule, parent)) {
-						parent_matched = true;
-					}
-
-					if (name === '>') return parent_matched;
+			for (const parent of parents) {
+				if (apply_selector(relative_selectors, rule, parent, direction, from, to)) {
+					parent_matched = true;
 				}
 			}
 
-			return parent_matched || parent_selectors.every((selector) => is_global(selector, rule));
+			return (
+				parent_matched ||
+				(direction === BACKWARD &&
+					(!is_adjacent || parents.length === 0) &&
+					every_is_global(relative_selectors, from, to, rule))
+			);
 		}
 
 		case '+':
 		case '~': {
-			const siblings = get_possible_element_siblings(node, name === '+');
+			const siblings = get_possible_element_siblings(node, direction, combinator.name === '+');
 
 			let sibling_matched = false;
 
 			for (const possible_sibling of siblings.keys()) {
-				if (possible_sibling.type === 'RenderTag' || possible_sibling.type === 'SlotElement') {
+				if (
+					possible_sibling.type === 'RenderTag' ||
+					possible_sibling.type === 'SlotElement' ||
+					possible_sibling.type === 'Component'
+				) {
 					// `{@render foo()}<p>foo</p>` with `:global(.x) + p` is a match
-					if (parent_selectors.length === 1 && parent_selectors[0].metadata.is_global) {
+					if (to - from === 1 && relative_selectors[from].metadata.is_global) {
 						sibling_matched = true;
 					}
-				} else if (apply_selector(parent_selectors, rule, possible_sibling)) {
+				} else if (
+					apply_selector(relative_selectors, rule, possible_sibling, direction, from, to)
+				) {
 					sibling_matched = true;
 				}
 			}
 
 			return (
 				sibling_matched ||
-				(get_element_parent(node) === null &&
-					parent_selectors.every((selector) => is_global(selector, rule)))
+				(direction === BACKWARD &&
+					get_element_parent(node) === null &&
+					every_is_global(relative_selectors, from, to, rule))
 			);
 		}
 
@@ -262,6 +358,20 @@ function apply_combinator(relative_selector, parent_selectors, rule, node) {
 	}
 }
 
+/**
+ * @param {Compiler.AST.CSS.RelativeSelector[]} relative_selectors
+ * @param {number} from
+ * @param {number} to
+ * @param {Compiler.AST.CSS.Rule} rule
+ * @returns {boolean}
+ */
+function every_is_global(relative_selectors, from, to, rule) {
+	for (let i = from; i < to; i++) {
+		if (!is_global(relative_selectors[i], rule)) return false;
+	}
+	return true;
+}
+
 /**
  * Returns `true` if the relative selector is global, meaning
  * it's a `:global(...)` or unscopeable selector, or
@@ -269,20 +379,26 @@ function apply_combinator(relative_selector, parent_selectors, rule, node) {
  * a global selector
  * @param {Compiler.AST.CSS.RelativeSelector} selector
  * @param {Compiler.AST.CSS.Rule} rule
+ * @returns {boolean}
  */
 function is_global(selector, rule) {
 	if (selector.metadata.is_global || selector.metadata.is_global_like) {
 		return true;
 	}
 
+	let explicitly_global = false;
+
 	for (const s of selector.selectors) {
 		/** @type {Compiler.AST.CSS.SelectorList | null} */
 		let selector_list = null;
+		let can_be_global = false;
 		let owner = rule;
 
 		if (s.type === 'PseudoClassSelector') {
 			if ((s.name === 'is' || s.name === 'where') && s.args) {
 				selector_list = s.args;
+			} else {
+				can_be_global = is_unscoped_pseudo_class(s);
 			}
 		}
 
@@ -291,18 +407,19 @@ function is_global(selector, rule) {
 			selector_list = owner.prelude;
 		}
 
-		const has_global_selectors = selector_list?.children.some((complex_selector) => {
+		const has_global_selectors = !!selector_list?.children.some((complex_selector) => {
 			return complex_selector.children.every((relative_selector) =>
 				is_global(relative_selector, owner)
 			);
 		});
+		explicitly_global ||= has_global_selectors;
 
-		if (!has_global_selectors) {
+		if (!has_global_selectors && !can_be_global) {
 			return false;
 		}
 	}
 
-	return true;
+	return explicitly_global || selector.selectors.length === 0;
 }
 
 const regex_backslash_and_following_character = /\\(.)/g;
@@ -313,134 +430,87 @@ const regex_backslash_and_following_character = /\\(.)/g;
  * @param {Compiler.AST.CSS.RelativeSelector} relative_selector
  * @param {Compiler.AST.CSS.Rule} rule
  * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element
+ * @param {Direction} direction
  * @returns {boolean}
  */
-function relative_selector_might_apply_to_node(relative_selector, rule, element) {
-	// Sort :has(...) selectors in one bucket and everything else into another
-	const has_selectors = [];
-	const other_selectors = [];
+function relative_selector_might_apply_to_node(relative_selector, rule, element, direction) {
+	/** @type {boolean | undefined} */
+	let include_self;
 
 	for (const selector of relative_selector.selectors) {
+		// Handle :has(...) selectors inline to avoid allocating temporary arrays
 		if (selector.type === 'PseudoClassSelector' && selector.name === 'has' && selector.args) {
-			has_selectors.push(selector);
-		} else {
-			other_selectors.push(selector);
-		}
-	}
-
-	// If we're called recursively from a :has(...) selector, we're on the way of checking if the other selectors match.
-	// In that case ignore this check (because we just came from this) to avoid an infinite loop.
-	if (has_selectors.length > 0) {
-		/** @type {Array<Compiler.AST.RegularElement | Compiler.AST.SvelteElement>} */
-		const child_elements = [];
-		/** @type {Array<Compiler.AST.RegularElement | Compiler.AST.SvelteElement>} */
-		const descendant_elements = [];
-		/** @type {Array<Compiler.AST.RegularElement | Compiler.AST.SvelteElement>} */
-		let sibling_elements; // do them lazy because it's rarely used and expensive to calculate
-
-		// If this is a :has inside a global selector, we gotta include the element itself, too,
-		// because the global selector might be for an element that's outside the component (e.g. :root).
-		const rules = get_parent_rules(rule);
-		const include_self =
-			rules.some((r) => r.prelude.children.some((c) => c.children.some((s) => is_global(s, r)))) ||
-			rules[rules.length - 1].prelude.children.some((c) =>
-				c.children.some((r) =>
-					r.selectors.some((s) => s.type === 'PseudoClassSelector' && s.name === 'root')
-				)
-			);
-		if (include_self) {
-			child_elements.push(element);
-			descendant_elements.push(element);
-		}
-
-		const seen = new Set();
-
-		/**
-		 * @param {Compiler.AST.SvelteNode} node
-		 * @param {{ is_child: boolean }} state
-		 */
-		function walk_children(node, state) {
-			walk(node, state, {
-				_(node, context) {
-					if (node.type === 'RegularElement' || node.type === 'SvelteElement') {
-						descendant_elements.push(node);
-
-						if (context.state.is_child) {
-							child_elements.push(node);
-							context.state.is_child = false;
-							context.next();
-							context.state.is_child = true;
-						} else {
-							context.next();
-						}
-					} else if (node.type === 'RenderTag') {
-						for (const snippet of node.metadata.snippets) {
-							if (seen.has(snippet)) continue;
-
-							seen.add(snippet);
-							walk_children(snippet.body, context.state);
-						}
-					} else {
-						context.next();
-					}
-				}
-			});
-		}
-
-		walk_children(element.fragment, { is_child: true });
+			// Lazy-compute include_self on first :has encounter
+			if (include_self === undefined) {
+				// If this is a :has inside a global selector, we gotta include the element itself, too,
+				// because the global selector might be for an element that's outside the component,
+				// e.g. :root:has(.scoped), :global(.foo):has(.scoped), or :root { &:has(.scoped) {} }
+				const rules = get_parent_rules(rule);
+				include_self =
+					rules.some((r) =>
+						r.prelude.children.some((c) => c.children.some((s) => is_global(s, r)))
+					) ||
+					rules[rules.length - 1].prelude.children.some((c) =>
+						c.children.some((r) =>
+							r.selectors.some(
+								(s) =>
+									s.type === 'PseudoClassSelector' &&
+									(s.name === 'root' || (s.name === 'global' && s.args))
+							)
+						)
+					);
+			}
 
-		// :has(...) is special in that it means "look downwards in the CSS tree". Since our matching algorithm goes
-		// upwards and back-to-front, we need to first check the selectors inside :has(...), then check the rest of the
-		// selector in a way that is similar to ancestor matching. In a sense, we're treating `.x:has(.y)` as `.x .y`.
-		for (const has_selector of has_selectors) {
-			const complex_selectors = /** @type {Compiler.AST.CSS.SelectorList} */ (has_selector.args)
+			// :has(...) is special in that it means "look downwards in the CSS tree". Since our matching algorithm goes
+			// upwards and back-to-front, we need to first check the selectors inside :has(...), then check the rest of the
+			// selector in a way that is similar to ancestor matching. In a sense, we're treating `.x:has(.y)` as `.x .y`.
+			const complex_selectors = /** @type {Compiler.AST.CSS.SelectorList} */ (selector.args)
 				.children;
 			let matched = false;
 
 			for (const complex_selector of complex_selectors) {
-				const selectors = truncate(complex_selector);
-				const left_most_combinator = selectors[0]?.combinator ?? descendant_combinator;
-				// In .x:has(> y), we want to search for y, ignoring the left-most combinator
-				// (else it would try to walk further up and fail because there are no selectors left)
-				if (selectors.length > 0) {
-					selectors[0] = {
-						...selectors[0],
-						combinator: null
-					};
+				const [first, ...rest] = truncate(complex_selector);
+				// if it was just a :global(...)
+				if (!first) {
+					complex_selector.metadata.used = true;
+					matched = true;
+					continue;
 				}
 
-				const descendants =
-					left_most_combinator.name === '+' || left_most_combinator.name === '~'
-						? (sibling_elements ??= get_following_sibling_elements(element, include_self))
-						: left_most_combinator.name === '>'
-							? child_elements
-							: descendant_elements;
-
-				let selector_matched = false;
-
-				// Iterate over all descendant elements and check if the selector inside :has matches
-				for (const element of descendants) {
-					if (
-						selectors.length === 0 /* is :global(...) */ ||
-						(element.metadata.scoped && selector_matched) ||
-						apply_selector(selectors, rule, element)
-					) {
+				if (include_self) {
+					const selector_including_self = [
+						first.combinator ? { ...first, combinator: null } : first,
+						...rest
+					];
+					if (apply_selector(selector_including_self, rule, element, FORWARD)) {
 						complex_selector.metadata.used = true;
-						selector_matched = matched = true;
+						matched = true;
 					}
 				}
+
+				const selector_excluding_self = [
+					any_selector,
+					first.combinator ? first : { ...first, combinator: descendant_combinator },
+					...rest
+				];
+				if (apply_selector(selector_excluding_self, rule, element, FORWARD)) {
+					complex_selector.metadata.used = true;
+					matched = true;
+				}
 			}
 
 			if (!matched) {
 				return false;
 			}
+
+			continue;
 		}
-	}
 
-	for (const selector of other_selectors) {
 		if (selector.type === 'Percentage' || selector.type === 'Nth') continue;
 
-		const name = selector.name.replace(regex_backslash_and_following_character, '$1');
+		const name = selector.name.includes('\\')
+			? selector.name.replace(regex_backslash_and_following_character, '$1')
+			: selector.name;
 
 		switch (selector.type) {
 			case 'PseudoClassSelector': {
@@ -453,7 +523,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element)
 				) {
 					const args = selector.args;
 					const complex_selector = args.children[0];
-					return apply_selector(complex_selector.children, rule, element);
+					return apply_selector(complex_selector.children, rule, element, BACKWARD);
 				}
 
 				// We came across a :global, everything beyond it is global and therefore a potential match
@@ -502,7 +572,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element)
 						if (is_global) {
 							complex_selector.metadata.used = true;
 							matched = true;
-						} else if (apply_selector(relative, rule, element)) {
+						} else if (apply_selector(relative, rule, element, BACKWARD)) {
 							complex_selector.metadata.used = true;
 							matched = true;
 						} else if (complex_selector.children.length > 1 && (name == 'is' || name == 'where')) {
@@ -538,7 +608,9 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element)
 						selector.name,
 						selector.value && unquote(selector.value),
 						selector.matcher,
-						selector.flags?.includes('i') ?? false
+						(selector.flags?.includes('i') ?? false) ||
+							(!selector.flags?.includes('s') &&
+								case_insensitive_attributes.has(selector.name.toLowerCase()))
 					)
 				) {
 					return false;
@@ -547,12 +619,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element)
 			}
 
 			case 'ClassSelector': {
-				if (
-					!attribute_matches(element, 'class', name, '~=', false) &&
-					!element.attributes.some(
-						(attribute) => attribute.type === 'ClassDirective' && attribute.name === name
-					)
-				) {
+				if (!attribute_matches(element, 'class', name, '~=', false)) {
 					return false;
 				}
 
@@ -586,7 +653,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element)
 
 				for (const complex_selector of parent.prelude.children) {
 					if (
-						apply_selector(get_relative_selectors(complex_selector), parent, element) ||
+						apply_selector(get_relative_selectors(complex_selector), parent, element, direction) ||
 						complex_selector.children.every((s) => is_global(s, parent))
 					) {
 						complex_selector.metadata.used = true;
@@ -607,73 +674,6 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element)
 	return true;
 }
 
-/**
- * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element
- * @param {boolean} include_self
- */
-function get_following_sibling_elements(element, include_self) {
-	const path = element.metadata.path;
-	let i = path.length;
-
-	/** @type {Compiler.AST.SvelteNode} */
-	let start = element;
-	let nodes = /** @type {Compiler.AST.SvelteNode[]} */ (
-		/** @type {Compiler.AST.Fragment} */ (path[0]).nodes
-	);
-
-	// find the set of nodes to walk...
-	while (i--) {
-		const node = path[i];
-
-		if (node.type === 'RegularElement' || node.type === 'SvelteElement') {
-			nodes = node.fragment.nodes;
-			break;
-		}
-
-		if (node.type !== 'Fragment') {
-			start = node;
-		}
-	}
-
-	/** @type {Array<Compiler.AST.RegularElement | Compiler.AST.SvelteElement>} */
-	const siblings = [];
-
-	// ...then walk them, starting from the node after the one
-	// containing the element in question
-
-	const seen = new Set();
-
-	/** @param {Compiler.AST.SvelteNode} node */
-	function get_siblings(node) {
-		walk(node, null, {
-			RegularElement(node) {
-				siblings.push(node);
-			},
-			SvelteElement(node) {
-				siblings.push(node);
-			},
-			RenderTag(node) {
-				for (const snippet of node.metadata.snippets) {
-					if (seen.has(snippet)) continue;
-
-					seen.add(snippet);
-					get_siblings(snippet.body);
-				}
-			}
-		});
-	}
-
-	for (const node of nodes.slice(nodes.indexOf(start) + 1)) {
-		get_siblings(node);
-	}
-
-	if (include_self) {
-		siblings.push(element);
-	}
-
-	return siblings;
-}
-
 /**
  * @param {any} operator
  * @param {any} expected_value
@@ -711,18 +711,37 @@ function test_attribute(operator, expected_value, case_insensitive, value) {
  * @param {boolean} case_insensitive
  */
 function attribute_matches(node, name, expected_value, operator, case_insensitive) {
+	const name_lower = name.toLowerCase();
+
 	for (const attribute of node.attributes) {
 		if (attribute.type === 'SpreadAttribute') return true;
 		if (attribute.type === 'BindDirective' && attribute.name === name) return true;
+		// match attributes against the corresponding directive but bail out on exact matching
+		if (attribute.type === 'StyleDirective' && name_lower === 'style') return true;
+		if (attribute.type === 'ClassDirective' && name_lower === 'class') {
+			if (operator === '~=') {
+				if (attribute.name === expected_value) return true;
+			} else {
+				return true;
+			}
+		}
 
 		if (attribute.type !== 'Attribute') continue;
-		if (attribute.name.toLowerCase() !== name.toLowerCase()) continue;
+		if (attribute.name.toLowerCase() !== name_lower) continue;
 
 		if (attribute.value === true) return operator === null;
 		if (expected_value === null) return true;
 
 		if (is_text_attribute(attribute)) {
-			return test_attribute(operator, expected_value, case_insensitive, attribute.value[0].data);
+			const matches = test_attribute(
+				operator,
+				expected_value,
+				case_insensitive,
+				attribute.value[0].data
+			);
+			// continue if we still may match against a class/style directive
+			if (!matches && (name_lower === 'class' || name_lower === 'style')) continue;
+			return matches;
 		}
 
 		const chunks = get_attribute_chunks(attribute.value);
@@ -731,7 +750,7 @@ function attribute_matches(node, name, expected_value, operator, case_insensitiv
 		/** @type {string[]} */
 		let prev_values = [];
 		for (const chunk of chunks) {
-			const current_possible_values = get_possible_values(chunk);
+			const current_possible_values = get_possible_values(chunk, name_lower === 'class');
 
 			// impossible to find out all combinations
 			if (!current_possible_values) return true;
@@ -784,7 +803,7 @@ function attribute_matches(node, name, expected_value, operator, case_insensitiv
 					prev_values.push(current_possible_value);
 				}
 			});
-			if (prev_values.length < current_possible_values.size) {
+			if (prev_values.length < current_possible_values.length) {
 				prev_values.push(' ');
 			}
 			if (prev_values.length > 20) {
@@ -810,6 +829,144 @@ function unquote(str) {
 	return str;
 }
 
+/**
+ * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.RenderTag | Compiler.AST.Component | Compiler.AST.SvelteComponent | Compiler.AST.SvelteSelf} node
+ * @param {boolean} adjacent_only
+ * @param {Set<Compiler.AST.SnippetBlock>} seen
+ */
+function get_ancestor_elements(node, adjacent_only, seen = new Set()) {
+	/** @type {Array<Compiler.AST.RegularElement | Compiler.AST.SvelteElement>} */
+	const ancestors = [];
+
+	const path = node.metadata.path;
+	let i = path.length;
+
+	while (i--) {
+		const parent = path[i];
+
+		if (parent.type === 'SnippetBlock') {
+			if (!seen.has(parent)) {
+				seen.add(parent);
+
+				for (const site of parent.metadata.sites) {
+					ancestors.push(...get_ancestor_elements(site, adjacent_only, seen));
+				}
+			}
+
+			break;
+		}
+
+		if (parent.type === 'RegularElement' || parent.type === 'SvelteElement') {
+			// Special handling for <option> inside <select>: elements inside <option> should
+			// also be considered descendants of <selectedcontent>, which clones the selected option's content
+			if (parent.type === 'RegularElement' && parent.name === 'option') {
+				const is_direct_child = ancestors.length === 0;
+
+				const select_element = path.findLast(
+					(element, j) => element.type === 'RegularElement' && element.name === 'select' && j < i
+				);
+
+				if (select_element && (!adjacent_only || is_direct_child)) {
+					/** @type {Compiler.AST.RegularElement | null} */
+					let selectedcontent_element = null;
+					walk(select_element, null, {
+						RegularElement(child, context) {
+							if (child.name === 'selectedcontent') {
+								selectedcontent_element = child;
+								context.stop();
+								return;
+							}
+							context.next();
+						}
+					});
+
+					if (adjacent_only && is_direct_child && selectedcontent_element) {
+						return [selectedcontent_element, parent];
+					} else if (selectedcontent_element) {
+						ancestors.push(selectedcontent_element);
+					}
+				}
+			}
+
+			ancestors.push(parent);
+
+			if (adjacent_only) {
+				break;
+			}
+		}
+	}
+
+	return ancestors;
+}
+
+/**
+ * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.RenderTag | Compiler.AST.Component | Compiler.AST.SvelteComponent | Compiler.AST.SvelteSelf} node
+ * @param {boolean} adjacent_only
+ * @param {Set<Compiler.AST.SnippetBlock>} seen
+ */
+function get_descendant_elements(node, adjacent_only, seen = new Set()) {
+	/** @type {Array<Compiler.AST.RegularElement | Compiler.AST.SvelteElement>} */
+	const descendants = [];
+
+	/**
+	 * @param {Compiler.AST.SvelteNode} node
+	 */
+	function walk_children(node) {
+		walk(node, null, {
+			_(node, context) {
+				if (node.type === 'RegularElement' || node.type === 'SvelteElement') {
+					descendants.push(node);
+
+					if (!adjacent_only) {
+						context.next();
+					}
+				} else if (node.type === 'RenderTag') {
+					for (const snippet of node.metadata.snippets) {
+						if (seen.has(snippet)) continue;
+
+						seen.add(snippet);
+						walk_children(snippet.body);
+					}
+				} else {
+					context.next();
+				}
+			}
+		});
+	}
+
+	walk_children(node.type === 'RenderTag' ? node : node.fragment);
+
+	// Special handling for <selectedcontent>: it clones the content of the selected <option>,
+	// so descendants of <option> elements in the same <select> should also be considered descendants
+	if (node.type === 'RegularElement' && node.name === 'selectedcontent') {
+		const path = node.metadata.path;
+		const select_element = path.findLast(
+			(/** @type {Compiler.AST.SvelteNode} */ element) =>
+				element.type === 'RegularElement' && element.name === 'select'
+		);
+
+		if (select_element) {
+			walk(
+				select_element,
+				{ inside_option: false },
+				{
+					_(child, context) {
+						if (child.type === 'RegularElement' && child.name === 'option') {
+							context.next({ inside_option: true });
+						} else if (context.state.inside_option) {
+							walk_children(child);
+						} else {
+							context.next();
+						}
+					}
+				}
+			);
+		}
+	}
+
+	return descendants;
+}
+
 /**
  * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.RenderTag | Compiler.AST.Component | Compiler.AST.SvelteComponent | Compiler.AST.SvelteSelf} node
  * @returns {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | null}
@@ -831,12 +988,13 @@ function get_element_parent(node) {
 
 /**
  * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.RenderTag | Compiler.AST.Component | Compiler.AST.SvelteComponent | Compiler.AST.SvelteSelf} node
+ * @param {Direction} direction
  * @param {boolean} adjacent_only
  * @param {Set<Compiler.AST.SnippetBlock>} seen
- * @returns {Map<Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.SlotElement | Compiler.AST.RenderTag, NodeExistsValue>}
+ * @returns {Map<Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.SlotElement | Compiler.AST.RenderTag | Compiler.AST.Component, NodeExistsValue>}
  */
-function get_possible_element_siblings(node, adjacent_only, seen = new Set()) {
-	/** @type {Map<Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.SlotElement | Compiler.AST.RenderTag, NodeExistsValue>} */
+function get_possible_element_siblings(node, direction, adjacent_only, seen = new Set()) {
+	/** @type {Map<Compiler.AST.RegularElement | Compiler.AST.SvelteElement | Compiler.AST.SlotElement | Compiler.AST.RenderTag | Compiler.AST.Component, NodeExistsValue>} */
 	const result = new Map();
 	const path = node.metadata.path;
 
@@ -847,9 +1005,9 @@ function get_possible_element_siblings(node, adjacent_only, seen = new Set()) {
 
 	while (i--) {
 		const fragment = /** @type {Compiler.AST.Fragment} */ (path[i--]);
-		let j = fragment.nodes.indexOf(current);
+		let j = fragment.nodes.indexOf(current) + (direction === FORWARD ? 1 : -1);
 
-		while (j--) {
+		while (j >= 0 && j < fragment.nodes.length) {
 			const node = fragment.nodes[j];
 
 			if (node.type === 'RegularElement') {
@@ -864,21 +1022,32 @@ function get_possible_element_siblings(node, adjacent_only, seen = new Set()) {
 						return result;
 					}
 				}
-			} else if (is_block(node)) {
-				if (node.type === 'SlotElement') {
+				// Special case: slots, render tags and svelte:element tags could resolve to no siblings,
+				// so we want to continue until we find a definite sibling even with the adjacent-only combinator
+			} else if (is_block(node) || node.type === 'Component') {
+				if (node.type === 'SlotElement' || node.type === 'Component') {
 					result.set(node, NODE_PROBABLY_EXISTS);
 				}
 
-				const possible_last_child = get_possible_last_child(node, adjacent_only);
+				const possible_last_child = get_possible_nested_siblings(node, direction, adjacent_only);
 				add_to_map(possible_last_child, result);
-				if (adjacent_only && has_definite_elements(possible_last_child)) {
+				if (
+					adjacent_only &&
+					node.type !== 'Component' &&
+					has_definite_elements(possible_last_child)
+				) {
 					return result;
 				}
-			} else if (node.type === 'RenderTag' || node.type === 'SvelteElement') {
+			} else if (node.type === 'SvelteElement') {
 				result.set(node, NODE_PROBABLY_EXISTS);
-				// Special case: slots, render tags and svelte:element tags could resolve to no siblings,
-				// so we want to continue until we find a definite sibling even with the adjacent-only combinator
+			} else if (node.type === 'RenderTag') {
+				result.set(node, NODE_PROBABLY_EXISTS);
+				for (const snippet of node.metadata.snippets) {
+					add_to_map(get_possible_nested_siblings(snippet, direction, adjacent_only), result);
+				}
 			}
+
+			j = direction === FORWARD ? j + 1 : j - 1;
 		}
 
 		current = path[i];
@@ -898,7 +1067,7 @@ function get_possible_element_siblings(node, adjacent_only, seen = new Set()) {
 			seen.add(current);
 
 			for (const site of current.metadata.sites) {
-				const siblings = get_possible_element_siblings(site, adjacent_only, seen);
+				const siblings = get_possible_element_siblings(site, direction, adjacent_only, seen);
 				add_to_map(siblings, result);
 
 				if (adjacent_only && current.metadata.sites.size === 1 && has_definite_elements(siblings)) {
@@ -911,7 +1080,7 @@ function get_possible_element_siblings(node, adjacent_only, seen = new Set()) {
 
 		if (current.type === 'EachBlock' && fragment === current.body) {
 			// `{#each ...}<a /><b />{/each}` — `<b>` can be previous sibling of `<a />`
-			add_to_map(get_possible_last_child(current, adjacent_only), result);
+			add_to_map(get_possible_nested_siblings(current, direction, adjacent_only), result);
 		}
 	}
 
@@ -919,13 +1088,13 @@ function get_possible_element_siblings(node, adjacent_only, seen = new Set()) {
 }
 
 /**
- * @param {Compiler.AST.EachBlock | Compiler.AST.IfBlock | Compiler.AST.AwaitBlock | Compiler.AST.KeyBlock | Compiler.AST.SlotElement} node
+ * @param {Compiler.AST.EachBlock | Compiler.AST.IfBlock | Compiler.AST.AwaitBlock | Compiler.AST.KeyBlock | Compiler.AST.SlotElement | Compiler.AST.SnippetBlock | Compiler.AST.Component} node
+ * @param {Direction} direction
  * @param {boolean} adjacent_only
- * @returns {Map<Compiler.AST.RegularElement, NodeExistsValue>}
+ * @param {Set<Compiler.AST.SnippetBlock>} seen
+ * @returns {Map<Compiler.AST.RegularElement | Compiler.AST.SvelteElement, NodeExistsValue>}
  */
-function get_possible_last_child(node, adjacent_only) {
-	/** @typedef {Map<Compiler.AST.RegularElement, NodeExistsValue>} NodeMap */
-
+function get_possible_nested_siblings(node, direction, adjacent_only, seen = new Set()) {
 	/** @type {Array<Compiler.AST.Fragment | undefined | null>} */
 	let fragments = [];
 
@@ -946,12 +1115,24 @@ function get_possible_last_child(node, adjacent_only) {
 		case 'SlotElement':
 			fragments.push(node.fragment);
 			break;
+
+		case 'SnippetBlock':
+			if (seen.has(node)) {
+				return new Map();
+			}
+			seen.add(node);
+			fragments.push(node.body);
+			break;
+
+		case 'Component':
+			fragments.push(node.fragment, ...[...node.metadata.snippets].map((s) => s.body));
+			break;
 	}
 
-	/** @type {NodeMap} */
+	/** @type {Map<Compiler.AST.RegularElement | Compiler.AST.SvelteElement, NodeExistsValue>} NodeMap */
 	const result = new Map();
 
-	let exhaustive = node.type !== 'SlotElement';
+	let exhaustive = node.type !== 'SlotElement' && node.type !== 'SnippetBlock';
 
 	for (const fragment of fragments) {
 		if (fragment == null) {
@@ -959,7 +1140,7 @@ function get_possible_last_child(node, adjacent_only) {
 			continue;
 		}
 
-		const map = loop_child(fragment.nodes, adjacent_only);
+		const map = loop_child(fragment.nodes, direction, adjacent_only, seen);
 		exhaustive &&= has_definite_elements(map);
 
 		add_to_map(map, result);
@@ -989,9 +1170,10 @@ function has_definite_elements(result) {
 }
 
 /**
- * @template T
- * @param {Map<T, NodeExistsValue>} from
- * @param {Map<T, NodeExistsValue>} to
+ * @template T2
+ * @template {T2} T1
+ * @param {Map<T1, NodeExistsValue>} from
+ * @param {Map<T2, NodeExistsValue>} to
  * @returns {void}
  */
 function add_to_map(from, to) {
@@ -1001,27 +1183,28 @@ function add_to_map(from, to) {
 }
 
 /**
- * @param {NodeExistsValue | undefined} exist1
+ * @param {NodeExistsValue} exist1
  * @param {NodeExistsValue | undefined} exist2
  * @returns {NodeExistsValue}
  */
 function higher_existence(exist1, exist2) {
-	// @ts-expect-error TODO figure out if this is a bug
-	if (exist1 === undefined || exist2 === undefined) return exist1 || exist2;
+	if (exist2 === undefined) return exist1;
 	return exist1 > exist2 ? exist1 : exist2;
 }
 
 /**
  * @param {Compiler.AST.SvelteNode[]} children
+ * @param {Direction} direction
  * @param {boolean} adjacent_only
+ * @param {Set<Compiler.AST.SnippetBlock>} seen
  */
-function loop_child(children, adjacent_only) {
-	/** @type {Map<Compiler.AST.RegularElement, NodeExistsValue>} */
+function loop_child(children, direction, adjacent_only, seen) {
+	/** @type {Map<Compiler.AST.RegularElement | Compiler.AST.SvelteElement, NodeExistsValue>} */
 	const result = new Map();
 
-	let i = children.length;
+	let i = direction === FORWARD ? 0 : children.length - 1;
 
-	while (i--) {
+	while (i >= 0 && i < children.length) {
 		const child = children[i];
 
 		if (child.type === 'RegularElement') {
@@ -1029,13 +1212,21 @@ function loop_child(children, adjacent_only) {
 			if (adjacent_only) {
 				break;
 			}
+		} else if (child.type === 'SvelteElement') {
+			result.set(child, NODE_PROBABLY_EXISTS);
+		} else if (child.type === 'RenderTag') {
+			for (const snippet of child.metadata.snippets) {
+				add_to_map(get_possible_nested_siblings(snippet, direction, adjacent_only, seen), result);
+			}
 		} else if (is_block(child)) {
-			const child_result = get_possible_last_child(child, adjacent_only);
+			const child_result = get_possible_nested_siblings(child, direction, adjacent_only, seen);
 			add_to_map(child_result, result);
 			if (adjacent_only && has_definite_elements(child_result)) {
 				break;
 			}
 		}
+
+		i = direction === FORWARD ? i + 1 : i - 1;
 	}
 
 	return result;
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/utils.js b/packages/svelte/src/compiler/phases/2-analyze/css/utils.js
index d3fd71ec39..d7544b55c0 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/utils.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/utils.js
@@ -4,14 +4,74 @@ const UNKNOWN = {};
 
 /**
  * @param {Node} node
+ * @param {boolean} is_class
  * @param {Set<any>} set
+ * @param {boolean} is_nested
  */
-function gather_possible_values(node, set) {
+function gather_possible_values(node, is_class, set, is_nested = false) {
+	if (set.has(UNKNOWN)) {
+		// no point traversing any further
+		return;
+	}
+
 	if (node.type === 'Literal') {
 		set.add(String(node.value));
 	} else if (node.type === 'ConditionalExpression') {
-		gather_possible_values(node.consequent, set);
-		gather_possible_values(node.alternate, set);
+		gather_possible_values(node.consequent, is_class, set, is_nested);
+		gather_possible_values(node.alternate, is_class, set, is_nested);
+	} else if (node.type === 'LogicalExpression') {
+		if (node.operator === '&&') {
+			// && is a special case, because the only way the left
+			// hand value can be included is if it's falsy. this is
+			// a bit of extra work but it's worth it because
+			// `class={[condition && 'blah']}` is common,
+			// and we don't want to deopt on `condition`
+			const left = new Set();
+			gather_possible_values(node.left, is_class, left, is_nested);
+
+			if (left.has(UNKNOWN)) {
+				// add all non-nullish falsy values, unless this is a `class` attribute that
+				// will be processed by cslx, in which case falsy values are removed, unless
+				// they're not inside an array/object (TODO 6.0 remove that last part)
+				if (!is_class || !is_nested) {
+					set.add('');
+					set.add(false);
+					set.add(NaN);
+					set.add(0); // -0 and 0n are also falsy, but stringify to '0'
+				}
+			} else {
+				for (const value of left) {
+					if (!value && value != undefined && (!is_class || !is_nested)) {
+						set.add(value);
+					}
+				}
+			}
+
+			gather_possible_values(node.right, is_class, set, is_nested);
+		} else {
+			gather_possible_values(node.left, is_class, set, is_nested);
+			gather_possible_values(node.right, is_class, set, is_nested);
+		}
+	} else if (is_class && node.type === 'ArrayExpression') {
+		for (const entry of node.elements) {
+			if (entry) {
+				gather_possible_values(entry, is_class, set, true);
+			}
+		}
+	} else if (is_class && node.type === 'ObjectExpression') {
+		for (const property of node.properties) {
+			if (
+				property.type === 'Property' &&
+				!property.computed &&
+				(property.key.type === 'Identifier' || property.key.type === 'Literal')
+			) {
+				set.add(
+					property.key.type === 'Identifier' ? property.key.name : String(property.key.value)
+				);
+			} else {
+				set.add(UNKNOWN);
+			}
+		}
 	} else {
 		set.add(UNKNOWN);
 	}
@@ -19,19 +79,20 @@ function gather_possible_values(node, set) {
 
 /**
  * @param {AST.Text | AST.ExpressionTag} chunk
- * @returns {Set<string> | null}
+ * @param {boolean} is_class
+ * @returns {string[] | null}
  */
-export function get_possible_values(chunk) {
+export function get_possible_values(chunk, is_class) {
 	const values = new Set();
 
 	if (chunk.type === 'Text') {
 		values.add(chunk.data);
 	} else {
-		gather_possible_values(chunk.expression, values);
+		gather_possible_values(chunk.expression, is_class, values);
 	}
 
 	if (values.has(UNKNOWN)) return null;
-	return values;
+	return [...values].map((value) => String(value));
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 1bc23db8ed..6beeadd523 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -1,12 +1,18 @@
-/** @import { Expression, Node, Program } from 'estree' */
+/** @import * as ESTree from 'estree' */
 /** @import { Binding, AST, ValidatedCompileOptions, ValidatedModuleCompileOptions } from '#compiler' */
 /** @import { AnalysisState, Visitors } from './types' */
 /** @import { Analysis, ComponentAnalysis, Js, ReactiveStatement, Template } from '../types' */
 import { walk } from 'zimmerframe';
+import { parse } from '../1-parse/acorn.js';
 import * as e from '../../errors.js';
 import * as w from '../../warnings.js';
-import { extract_identifiers, is_text_attribute } from '../../utils/ast.js';
-import * as b from '../../utils/builders.js';
+import {
+	extract_identifiers,
+	has_await_expression,
+	object,
+	unwrap_pattern
+} from '../../utils/ast.js';
+import * as b from '#compiler/builders';
 import { Scope, ScopeRoot, create_scopes, get_rune, set_scope } from '../scope.js';
 import check_graph_for_cycles from './utils/check_graph_for_cycles.js';
 import { create_attribute, is_custom_element_node } from '../nodes.js';
@@ -15,11 +21,14 @@ import { prune } from './css/css-prune.js';
 import { hash, is_rune } from '../../../utils.js';
 import { warn_unused } from './css/css-warn.js';
 import { extract_svelte_ignore } from '../../utils/extract_svelte_ignore.js';
-import { ignore_map, ignore_stack, pop_ignore, push_ignore } from '../../state.js';
+import { ignore_map, get_ignore_snapshot, pop_ignore, push_ignore } from '../../state.js';
 import { ArrowFunctionExpression } from './visitors/ArrowFunctionExpression.js';
 import { AssignmentExpression } from './visitors/AssignmentExpression.js';
+import { AnimateDirective } from './visitors/AnimateDirective.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';
@@ -27,6 +36,7 @@ import { ClassDeclaration } from './visitors/ClassDeclaration.js';
 import { ClassDirective } from './visitors/ClassDirective.js';
 import { Component } from './visitors/Component.js';
 import { ConstTag } from './visitors/ConstTag.js';
+import { DeclarationTag } from './visitors/DeclarationTag.js';
 import { DebugTag } from './visitors/DebugTag.js';
 import { EachBlock } from './visitors/EachBlock.js';
 import { ExportDefaultDeclaration } from './visitors/ExportDefaultDeclaration.js';
@@ -34,6 +44,7 @@ import { ExportNamedDeclaration } from './visitors/ExportNamedDeclaration.js';
 import { ExportSpecifier } from './visitors/ExportSpecifier.js';
 import { ExpressionStatement } from './visitors/ExpressionStatement.js';
 import { ExpressionTag } from './visitors/ExpressionTag.js';
+import { Fragment } from './visitors/Fragment.js';
 import { FunctionDeclaration } from './visitors/FunctionDeclaration.js';
 import { FunctionExpression } from './visitors/FunctionExpression.js';
 import { HtmlTag } from './visitors/HtmlTag.js';
@@ -43,9 +54,11 @@ import { ImportDeclaration } from './visitors/ImportDeclaration.js';
 import { KeyBlock } from './visitors/KeyBlock.js';
 import { LabeledStatement } from './visitors/LabeledStatement.js';
 import { LetDirective } from './visitors/LetDirective.js';
+import { Literal } from './visitors/Literal.js';
 import { MemberExpression } from './visitors/MemberExpression.js';
 import { NewExpression } from './visitors/NewExpression.js';
 import { OnDirective } from './visitors/OnDirective.js';
+import { PropertyDefinition } from './visitors/PropertyDefinition.js';
 import { RegularElement } from './visitors/RegularElement.js';
 import { RenderTag } from './visitors/RenderTag.js';
 import { SlotElement } from './visitors/SlotElement.js';
@@ -64,6 +77,7 @@ import { SvelteWindow } from './visitors/SvelteWindow.js';
 import { SvelteBoundary } from './visitors/SvelteBoundary.js';
 import { SveltePortal } from './visitors/SveltePortal.js';
 import { TaggedTemplateExpression } from './visitors/TaggedTemplateExpression.js';
+import { TemplateElement } from './visitors/TemplateElement.js';
 import { Text } from './visitors/Text.js';
 import { TitleElement } from './visitors/TitleElement.js';
 import { TransitionDirective } from './visitors/TransitionDirective.js';
@@ -72,6 +86,7 @@ import { UseDirective } from './visitors/UseDirective.js';
 import { VariableDeclarator } from './visitors/VariableDeclarator.js';
 import is_reference from 'is-reference';
 import { mark_subtree_dynamic } from './visitors/shared/fragment.js';
+import * as state from '../../state.js';
 
 /**
  * @type {Visitors}
@@ -121,7 +136,7 @@ const visitors = {
 			push_ignore(ignores);
 		}
 
-		ignore_map.set(node, structuredClone(ignore_stack));
+		ignore_map.set(node, get_ignore_snapshot());
 
 		const scope = state.scopes.get(node);
 		next(scope !== undefined && scope !== state.scope ? { ...state, scope } : state);
@@ -130,10 +145,13 @@ const visitors = {
 			pop_ignore();
 		}
 	},
+	AnimateDirective,
 	ArrowFunctionExpression,
 	AssignmentExpression,
+	AttachTag,
 	Attribute,
 	AwaitBlock,
+	AwaitExpression,
 	BindDirective,
 	CallExpression,
 	ClassBody,
@@ -141,6 +159,7 @@ const visitors = {
 	ClassDirective,
 	Component,
 	ConstTag,
+	DeclarationTag,
 	DebugTag,
 	EachBlock,
 	ExportDefaultDeclaration,
@@ -148,6 +167,7 @@ const visitors = {
 	ExportSpecifier,
 	ExpressionStatement,
 	ExpressionTag,
+	Fragment,
 	FunctionDeclaration,
 	FunctionExpression,
 	HtmlTag,
@@ -157,9 +177,11 @@ const visitors = {
 	KeyBlock,
 	LabeledStatement,
 	LetDirective,
+	Literal,
 	MemberExpression,
 	NewExpression,
 	OnDirective,
+	PropertyDefinition,
 	RegularElement,
 	RenderTag,
 	SlotElement,
@@ -178,6 +200,7 @@ const visitors = {
 	SvelteBoundary,
 	SveltePortal,
 	TaggedTemplateExpression,
+	TemplateElement,
 	Text,
 	TransitionDirective,
 	TitleElement,
@@ -194,7 +217,7 @@ const visitors = {
  * @returns {Js}
  */
 function js(script, root, allow_reactive_declarations, parent) {
-	/** @type {Program} */
+	/** @type {ESTree.Program} */
 	const ast = script?.content ?? {
 		type: 'Program',
 		sourceType: 'module',
@@ -203,9 +226,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 };
 }
 
 /**
@@ -225,12 +253,18 @@ function get_component_name(filename) {
 const RESERVED = ['$$props', '$$restProps', '$$slots'];
 
 /**
- * @param {Program} ast
+ * @param {string} source
  * @param {ValidatedModuleCompileOptions} options
  * @returns {Analysis}
  */
-export function analyze_module(ast, options) {
-	const { scope, scopes } = create_scopes(ast, new ScopeRoot(), false, null);
+export function analyze_module(source, options) {
+	/** @type {AST.JSComment[]} */
+	const comments = [];
+
+	state.set_source(source);
+	const ast = parse(source, comments, false, false);
+
+	const { scope, scopes, has_await } = create_scopes(ast, new ScopeRoot(), false, null);
 
 	for (const [name, references] of scope.references) {
 		if (name[0] !== '$' || RESERVED.includes(name)) continue;
@@ -245,24 +279,51 @@ export function analyze_module(ast, options) {
 		}
 	}
 
+	/** @type {Analysis} */
+	const analysis = {
+		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(),
+		pickled_awaits: new Set()
+	};
+
+	state.adjust({
+		dev: options.dev,
+		rootDir: options.rootDir,
+		runes: true
+	});
+
 	walk(
-		/** @type {Node} */ (ast),
+		/** @type {ESTree.Node} */ (ast),
 		{
 			scope,
 			scopes,
-			// @ts-expect-error TODO
-			analysis: { runes: true }
+			analysis: /** @type {ComponentAnalysis} */ (analysis),
+			state_fields: new Map(),
+			// TODO the following are not needed for modules, but we have to pass them in order to avoid type error,
+			// and reducing the type would result in a lot of tedious type casts elsewhere - find a good solution one day
+			ast_type: /** @type {any} */ (null),
+			component_slots: /** @type {Set<string>} */ (new Set()),
+			expression: null,
+			function_depth: 0,
+			has_props_rune: false,
+			options: /** @type {ValidatedCompileOptions} */ (options),
+			fragment: null,
+			parent_element: null,
+			in_declaration_tag: false,
+			reactive_statement: null,
+			derived_function_depth: -1
 		},
 		visitors
 	);
 
-	return {
-		module: { ast, scope, scopes },
-		name: options.filename,
-		accessors: false,
-		runes: true,
-		immutable: true
-	};
+	return analysis;
 }
 
 /**
@@ -277,13 +338,20 @@ 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 };
 
 	let synthetic_stores_legacy_check = [];
 
+	const runes_option = options.runes?.({ filename: options.filename });
+
 	// create synthetic bindings for store subscriptions
 	for (const [name, references] of module.scope.references) {
 		if (name[0] !== '$' || RESERVED.includes(name)) continue;
@@ -293,12 +361,12 @@ export function analyze_component(root, source, options) {
 
 		const store_name = name.slice(1);
 		const declaration = instance.scope.get(store_name);
-		const init = /** @type {Node | undefined} */ (declaration?.initial);
+		const init = /** @type {ESTree.Node | undefined} */ (declaration?.initial);
 
 		// If we're not in legacy mode through the compiler option, assume the user
 		// is referencing a rune and not a global store.
 		if (
-			options.runes === false ||
+			runes_option === false ||
 			!is_rune(name) ||
 			(declaration !== null &&
 				// const state = $state(0) is valid
@@ -334,7 +402,7 @@ export function analyze_component(root, source, options) {
 				e.store_invalid_scoped_subscription(is_nested_store_subscription_node);
 			}
 
-			if (options.runes !== false) {
+			if (runes_option !== false) {
 				if (declaration === null && /[a-z]/.test(store_name[0])) {
 					e.global_reference_invalid(references[0].node, name);
 				} else if (declaration !== null && is_rune(name)) {
@@ -353,7 +421,7 @@ export function analyze_component(root, source, options) {
 						/** @type {number} */ (node.start) > /** @type {number} */ (module.ast.start) &&
 						/** @type {number} */ (node.end) < /** @type {number} */ (module.ast.end) &&
 						// const state = $state(0) is valid
-						get_rune(/** @type {Node} */ (path.at(-1)), module.scope) === null
+						get_rune(/** @type {ESTree.Node} */ (path.at(-1)), module.scope) === null
 					) {
 						e.store_invalid_subscription(node);
 					}
@@ -385,7 +453,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 =
+		runes_option ??
+		(has_await || instance.has_await || Array.from(module.scope.references.keys()).some(is_rune));
 
 	if (!runes) {
 		for (let check of synthetic_stores_legacy_check) {
@@ -400,34 +470,76 @@ export function analyze_component(root, source, options) {
 		}
 	}
 
+	const custom_element_from_option = options.customElement({ filename: options.filename });
+	const css = options.css({ filename: options.filename });
+	const custom_element = options.customElementOptions ?? custom_element_from_option;
+	const is_custom_element = !!options.customElementOptions || custom_element_from_option;
+
+	const name = module.scope.generate(options.name ?? component_name);
+
+	state.adjust({
+		component_name: name,
+		dev: options.dev,
+		rootDir: options.rootDir,
+		runes
+	});
+
 	// TODO remove all the ?? stuff, we don't need it now that we're validating the config
 	/** @type {ComponentAnalysis} */
 	const analysis = {
-		name: module.scope.generate(options.name ?? component_name),
+		name,
 		root: scope_root,
 		module,
 		instance,
 		template,
+		comments: root.comments,
 		elements: [],
 		runes,
+		// if we are not in runes mode but we have no reserved references ($$props, $$restProps)
+		// and no `export let` we might be in a wannabe runes component that is using runes in an external
+		// module...we need to fallback to the runic behavior
+		maybe_runes:
+			!runes &&
+			// if they explicitly disabled runes, use the legacy behavior
+			runes_option !== false &&
+			![...module.scope.references.keys()].some((name) =>
+				['$$props', '$$restProps'].includes(name)
+			) &&
+			!instance.ast.body.some(
+				(node) =>
+					node.type === 'LabeledStatement' ||
+					(node.type === 'ExportNamedDeclaration' &&
+						((node.declaration &&
+							node.declaration.type === 'VariableDeclaration' &&
+							node.declaration.kind === 'let') ||
+							node.specifiers.some(
+								(specifier) =>
+									specifier.local.type === 'Identifier' &&
+									instance.scope.get(specifier.local.name)?.declaration_kind === 'let'
+							)))
+			),
+		tracing: false,
+		classes: new Map(),
 		immutable: runes || options.immutable,
 		exports: [],
 		uses_props: false,
+		props_id: null,
 		uses_rest_props: false,
 		uses_slots: false,
 		uses_component_bindings: false,
 		uses_render_tags: false,
 		needs_context: false,
+		needs_mutation_validation: false,
 		needs_props: false,
 		event_directive_node: null,
 		uses_event_attributes: false,
-		custom_element: options.customElementOptions ?? options.customElement,
-		inject_styles: options.css === 'injected' || options.customElement,
-		accessors: options.customElement
-			? true
-			: (runes ? false : !!options.accessors) ||
-				// because $set method needs accessors
-				options.compatibility?.componentApi === 4,
+		custom_element,
+		inject_styles: css === 'injected' || is_custom_element,
+		accessors:
+			is_custom_element ||
+			(runes ? false : !!options.accessors) ||
+			// because $set method needs accessors
+			options.compatibility?.componentApi === 4,
 		reactive_statements: new Map(),
 		binding_groups: new Map(),
 		slot_names: new Map(),
@@ -436,17 +548,25 @@ export function analyze_component(root, source, options) {
 			hash: root.css
 				? options.cssHash({
 						css: root.css.content.styles,
-						filename: options.filename,
+						filename: state.filename,
 						name: component_name,
 						hash
 					})
 				: '',
-			keyframes: []
+			keyframes: [],
+			has_global: false
 		},
 		source,
-		undefined_exports: new Map(),
 		snippet_renderers: new Map(),
-		snippets: new Set()
+		snippets: new Set(),
+		async_deriveds: new Set(),
+		pickled_awaits: new Set(),
+		instance_body: {
+			sync: [],
+			async: [],
+			declarations: [],
+			hoisted: []
+		}
 	};
 
 	if (!runes) {
@@ -539,7 +659,7 @@ export function analyze_component(root, source, options) {
 							// @ts-expect-error
 							_: set_scope,
 							Identifier(node, context) {
-								const parent = /** @type {Expression} */ (context.path.at(-1));
+								const parent = /** @type {ESTree.Expression} */ (context.path.at(-1));
 
 								if (is_reference(node, parent)) {
 									const binding = context.state.scope.get(node.name);
@@ -547,10 +667,11 @@ export function analyze_component(root, source, options) {
 									if (
 										binding &&
 										binding.kind === 'normal' &&
-										binding.declaration_kind !== 'import'
+										binding.declaration_kind !== 'import' &&
+										binding.declaration_kind !== 'function'
 									) {
 										binding.kind = 'state';
-										binding.mutated = binding.updated = true;
+										binding.mutated = true;
 									}
 								}
 							}
@@ -569,7 +690,7 @@ export function analyze_component(root, source, options) {
 				w.options_deprecated_accessors(attribute);
 			}
 
-			if (attribute.name === 'customElement' && !options.customElement) {
+			if (attribute.name === 'customElement' && !custom_element_from_option) {
 				w.options_missing_custom_element(attribute);
 			}
 
@@ -579,6 +700,8 @@ export function analyze_component(root, source, options) {
 		}
 	}
 
+	calculate_blockers(instance, analysis);
+
 	if (analysis.runes) {
 		const props_refs = module.scope.references.get('$$props');
 		if (props_refs) {
@@ -598,16 +721,16 @@ export function analyze_component(root, source, options) {
 				analysis,
 				options,
 				ast_type: ast === instance.ast ? 'instance' : ast === template.ast ? 'template' : 'module',
+				fragment: ast === template.ast ? ast : null,
 				parent_element: null,
+				in_declaration_tag: false,
 				has_props_rune: false,
 				component_slots: new Set(),
 				expression: null,
-				render_tag: null,
-				private_derived_state: [],
+				state_fields: new Map(),
 				function_depth: scope.function_depth,
-				instance_scope: instance.scope,
 				reactive_statement: null,
-				reactive_statements: new Map()
+				derived_function_depth: -1
 			};
 
 			walk(/** @type {AST.SvelteNode} */ (ast), state, visitors);
@@ -666,17 +789,17 @@ export function analyze_component(root, source, options) {
 				scopes,
 				analysis,
 				options,
+				fragment: ast === template.ast ? ast : null,
 				parent_element: null,
+				in_declaration_tag: false,
 				has_props_rune: false,
 				ast_type: ast === instance.ast ? 'instance' : ast === template.ast ? 'template' : 'module',
-				instance_scope: instance.scope,
 				reactive_statement: null,
-				reactive_statements: analysis.reactive_statements,
 				component_slots: new Set(),
 				expression: null,
-				render_tag: null,
-				private_derived_state: [],
-				function_depth: scope.function_depth
+				state_fields: new Map(),
+				function_depth: scope.function_depth,
+				derived_function_depth: -1
 			};
 
 			walk(/** @type {AST.SvelteNode} */ (ast), state, visitors);
@@ -703,9 +826,15 @@ export function analyze_component(root, source, options) {
 		if (node.type === 'ExportNamedDeclaration' && node.specifiers !== null && node.source == null) {
 			for (const specifier of node.specifiers) {
 				if (specifier.local.type !== 'Identifier') continue;
-
-				const binding = analysis.module.scope.get(specifier.local.name);
-				if (!binding) e.export_undefined(specifier, specifier.local.name);
+				const name = specifier.local.name;
+				const binding = analysis.module.scope.get(name);
+				if (!binding) {
+					if ([...analysis.snippets].find((snippet) => snippet.expression.name === name)) {
+						e.snippet_invalid_export(specifier);
+					} else {
+						e.export_undefined(specifier, name);
+					}
+				}
 			}
 		}
 	}
@@ -739,9 +868,7 @@ export function analyze_component(root, source, options) {
 		analyze_css(analysis.css.ast, analysis);
 
 		// mark nodes as scoped/unused/empty etc
-		for (const node of analysis.elements) {
-			prune(analysis.css.ast, node);
-		}
+		prune(analysis.css.ast, analysis.elements);
 
 		const { comment } = analysis.css.ast.content;
 		const should_ignore_unused =
@@ -753,71 +880,389 @@ export function analyze_component(root, source, options) {
 		if (!should_ignore_unused) {
 			warn_unused(analysis.css.ast);
 		}
+	}
 
-		outer: for (const node of analysis.elements) {
-			if (node.metadata.scoped) {
-				// Dynamic elements in dom mode always use spread for attributes and therefore shouldn't have a class attribute added to them
-				// TODO this happens during the analysis phase, which shouldn't know anything about client vs server
-				if (node.type === 'SvelteElement' && options.generate === 'client') continue;
+	for (const node of analysis.elements) {
+		if (node.metadata.scoped && is_custom_element_node(node)) {
+			mark_subtree_dynamic(node.metadata.path);
+		}
 
-				/** @type {AST.Attribute | undefined} */
-				let class_attribute = undefined;
+		let has_class = false;
+		let has_style = false;
+		let has_spread = false;
+		let has_class_directive = false;
+		let has_style_directive = false;
+
+		for (const attribute of node.attributes) {
+			// The spread method appends the hash to the end of the class attribute on its own
+			if (attribute.type === 'SpreadAttribute') {
+				has_spread = true;
+				break;
+			} else if (attribute.type === 'Attribute') {
+				has_class ||= attribute.name.toLowerCase() === 'class';
+				has_style ||= attribute.name.toLowerCase() === 'style';
+			} else if (attribute.type === 'ClassDirective') {
+				has_class_directive = true;
+			} else if (attribute.type === 'StyleDirective') {
+				has_style_directive = true;
+			}
+		}
 
-				for (const attribute of node.attributes) {
-					if (attribute.type === 'SpreadAttribute') {
-						// The spread method appends the hash to the end of the class attribute on its own
-						continue outer;
+		// We need an empty class to generate the set_class() or class="" correctly
+		if (!has_spread && !has_class && (node.metadata.scoped || has_class_directive)) {
+			node.attributes.push(
+				create_attribute('class', null, -1, -1, [
+					{
+						type: 'Text',
+						data: '',
+						raw: '',
+						start: -1,
+						end: -1
 					}
+				])
+			);
+		}
 
-					if (attribute.type !== 'Attribute') continue;
-					if (attribute.name.toLowerCase() !== 'class') continue;
+		// We need an empty style to generate the set_style() correctly
+		if (!has_spread && !has_style && has_style_directive) {
+			node.attributes.push(
+				create_attribute('style', null, -1, -1, [
+					{
+						type: 'Text',
+						data: '',
+						raw: '',
+						start: -1,
+						end: -1
+					}
+				])
+			);
+		}
+	}
+
+	// TODO
+	// analysis.stylesheet.warn_on_unused_selectors(analysis);
+
+	return analysis;
+}
 
-					class_attribute = attribute;
+/**
+ * Analyzes the instance's top level statements to calculate which bindings need to wait on which
+ * top level statements. This includes indirect blockers such as functions referencing async top level statements.
+ *
+ * @param {Js} instance
+ * @param {ComponentAnalysis} analysis
+ * @returns {void}
+ */
+function calculate_blockers(instance, analysis) {
+	/**
+	 * @param {ESTree.Node} expression
+	 * @param {Scope} scope
+	 * @param {Set<Binding>} touched
+	 * @param {Set<ESTree.Node>} seen
+	 */
+	const touch = (expression, scope, touched, seen = new Set()) => {
+		if (seen.has(expression)) return;
+		seen.add(expression);
+
+		walk(
+			expression,
+			{ scope },
+			{
+				_(node, context) {
+					const scope = instance.scopes.get(node);
+					if (scope) {
+						context.next({ scope });
+					} else {
+						context.next();
+					}
+				},
+				ImportDeclaration(node) {},
+				Identifier(node, context) {
+					const parent = /** @type {ESTree.Node} */ (context.path.at(-1));
+					if (is_reference(node, parent)) {
+						const binding = context.state.scope.get(node.name);
+						if (binding) {
+							touched.add(binding);
+
+							for (const assignment of binding.assignments) {
+								touch(assignment.value, assignment.scope, touched, seen);
+							}
+						}
+					}
 				}
+			}
+		);
+	};
 
-				if (class_attribute && class_attribute.value !== true) {
-					if (is_text_attribute(class_attribute)) {
-						class_attribute.value[0].data += ` ${analysis.css.hash}`;
+	/**
+	 * @param {ESTree.Node} node
+	 * @param {Set<Binding>} reads
+	 * @param {Set<Binding>} writes
+	 * @param {Scope} scope
+	 */
+	const trace_references = (node, reads, writes, scope) => {
+		/**
+		 * @param {ESTree.Pattern} node
+		 * @param {Scope} scope
+		 */
+		function update(node, scope) {
+			for (const pattern of unwrap_pattern(node)) {
+				const node = object(pattern);
+				if (!node) return;
+
+				const binding = scope.get(node.name);
+				if (!binding) return;
+
+				writes.add(binding);
+			}
+		}
+
+		walk(
+			node,
+			{ scope },
+			{
+				_(node, context) {
+					const scope = instance.scopes.get(node);
+					if (scope) {
+						context.next({ scope });
 					} else {
-						/** @type {AST.Text} */
-						const css_text = {
-							type: 'Text',
-							data: ` ${analysis.css.hash}`,
-							raw: ` ${analysis.css.hash}`,
-							start: -1,
-							end: -1
-						};
-
-						if (Array.isArray(class_attribute.value)) {
-							class_attribute.value.push(css_text);
-						} else {
-							class_attribute.value = [class_attribute.value, css_text];
+						context.next();
+					}
+				},
+				AssignmentExpression(node, context) {
+					update(node.left, context.state.scope);
+				},
+				UpdateExpression(node, context) {
+					update(
+						/** @type {ESTree.Identifier | ESTree.MemberExpression} */ (node.argument),
+						context.state.scope
+					);
+				},
+				CallExpression(node, context) {
+					// for now, assume everything touched by the callee ends up mutating the object
+					// TODO optimise this better
+
+					// special case — no need to peek inside effects as they only run once async work has completed
+					const rune = get_rune(node, context.state.scope);
+					if (rune === '$effect') return;
+
+					/** @type {Set<Binding>} */
+					const touched = new Set();
+					touch(node, context.state.scope, touched);
+
+					for (const b of touched) {
+						writes.add(b);
+					}
+				},
+				Identifier(node, context) {
+					const parent = /** @type {ESTree.Node} */ (context.path.at(-1));
+					if (is_reference(node, parent)) {
+						const binding = context.state.scope.get(node.name);
+						if (binding) {
+							reads.add(binding);
 						}
 					}
+				},
+				ReturnStatement(node, context) {
+					// We have to assume that anything returned from a function, even if it's a function itself,
+					// might be called immediately, so we have to touch all references within it. Example:
+					// function foo() { return () => blocker; } foo(); // blocker is touched
+					if (node.argument) {
+						touch(node.argument, context.state.scope, reads);
+					}
+				},
+				// don't look inside functions until they are called
+				ArrowFunctionExpression(_, context) {},
+				FunctionDeclaration(_, context) {},
+				FunctionExpression(_, context) {}
+			}
+		);
+	};
+
+	let awaited = false;
+
+	/** @type {Array<ESTree.Statement | ESTree.VariableDeclarator>} */
+	let sync_group = [];
+
+	// TODO this should probably be attached to the scope?
+	const promises = b.id('$$promises');
+
+	/**
+	 * @param {ESTree.Identifier} id
+	 * @param {NonNullable<Binding['blocker']>} blocker
+	 */
+	function push_declaration(id, blocker) {
+		analysis.instance_body.declarations.push(id);
+
+		const binding = /** @type {Binding} */ (instance.scope.get(id.name));
+		binding.blocker = blocker;
+	}
+
+	function flush_sync_group() {
+		if (sync_group.length === 0) return;
+
+		analysis.instance_body.async.push({ nodes: sync_group, has_await: false });
+		sync_group = [];
+	}
+
+	/**
+	 * Analysis of blockers for functions is deferred until we know which statements are async/blockers
+	 * @type {Array<ESTree.FunctionDeclaration | ESTree.VariableDeclarator>}
+	 */
+	const functions = [];
+
+	for (let node of instance.ast.body) {
+		if (node.type === 'ImportDeclaration') {
+			analysis.instance_body.hoisted.push(node);
+			continue;
+		}
+
+		if (node.type === 'ExportDefaultDeclaration' || node.type === 'ExportAllDeclaration') {
+			// these can't exist inside `<script>` but TypeScript doesn't know that
+			continue;
+		}
+
+		if (node.type === 'ExportNamedDeclaration') {
+			if (node.declaration) {
+				node = node.declaration;
+			} else {
+				continue;
+			}
+		}
+
+		const has_await = has_await_expression(node);
+		awaited ||= has_await;
+
+		if (node.type === 'FunctionDeclaration') {
+			analysis.instance_body.sync.push(node);
+			functions.push(node);
+		} else if (node.type === 'VariableDeclaration') {
+			for (const declarator of node.declarations) {
+				if (get_rune(declarator.init, instance.scope) === '$props.id') {
+					// special case
+					continue;
+				}
+
+				if (
+					declarator.init?.type === 'ArrowFunctionExpression' ||
+					declarator.init?.type === 'FunctionExpression'
+				) {
+					// One declarator per declaration, makes things simpler. The ternary ensures more accurate source maps in the common case
+					analysis.instance_body.sync.push(
+						node.declarations.length === 1 ? node : b.declaration(node.kind, [declarator])
+					);
+					functions.push(declarator);
+				} else if (!awaited) {
+					// One declarator per declaration, makes things simpler. The ternary ensures more accurate source maps in the common case
+					analysis.instance_body.sync.push(
+						node.declarations.length === 1 ? node : b.declaration(node.kind, [declarator])
+					);
 				} else {
-					node.attributes.push(
-						create_attribute('class', -1, -1, [
-							{
-								type: 'Text',
-								data: analysis.css.hash,
-								raw: analysis.css.hash,
-								start: -1,
-								end: -1
-							}
-						])
+					/** @type {Set<Binding>} */
+					const reads = new Set(); // TODO we're not actually using this yet
+
+					/** @type {Set<Binding>} */
+					const writes = new Set();
+
+					trace_references(declarator, reads, writes, instance.scope);
+
+					// Needs to happen before blocker computation
+					if (has_await) flush_sync_group();
+
+					const blocker = /** @type {NonNullable<Binding['blocker']>} */ (
+						b.member(promises, b.literal(analysis.instance_body.async.length), true)
 					);
-					if (is_custom_element_node(node) && node.attributes.length === 1) {
-						mark_subtree_dynamic(node.metadata.path);
+
+					for (const binding of writes) {
+						binding.blocker = blocker;
+					}
+
+					for (const id of extract_identifiers(declarator.id)) {
+						push_declaration(id, blocker);
+					}
+
+					if (has_await) {
+						// one declarator per declaration, makes things simpler
+						analysis.instance_body.async.push({ nodes: [declarator], has_await: true });
+					} else {
+						sync_group.push(declarator);
 					}
 				}
 			}
+		} else if (awaited) {
+			/** @type {Set<Binding>} */
+			const reads = new Set(); // TODO we're not actually using this yet
+
+			/** @type {Set<Binding>} */
+			const writes = new Set();
+
+			trace_references(node, reads, writes, instance.scope);
+
+			// Needs to happen before blocker computation
+			if (has_await) flush_sync_group();
+
+			const blocker = /** @type {NonNullable<Binding['blocker']>} */ (
+				b.member(promises, b.literal(analysis.instance_body.async.length), true)
+			);
+
+			for (const binding of writes) {
+				binding.blocker = blocker;
+			}
+
+			if (node.type === 'ClassDeclaration') {
+				push_declaration(node.id, blocker);
+			}
+
+			if (has_await) {
+				analysis.instance_body.async.push({ nodes: [node], has_await: true });
+			} else {
+				sync_group.push(node);
+			}
+		} else {
+			analysis.instance_body.sync.push(node);
 		}
 	}
 
-	// TODO
-	// analysis.stylesheet.warn_on_unused_selectors(analysis);
+	flush_sync_group();
+
+	for (const fn of functions) {
+		/** @type {Set<Binding>} */
+		const reads_writes = new Set();
+		const init =
+			fn.type === 'VariableDeclarator'
+				? /** @type {ESTree.FunctionExpression | ESTree.ArrowFunctionExpression} */ (fn.init)
+				: fn;
+
+		trace_references(
+			init.body,
+			reads_writes,
+			reads_writes,
+			/** @type {Scope} */ (instance.scopes.get(init))
+		);
 
-	return analysis;
+		const max = [...reads_writes].reduce((max, binding) => {
+			if (binding.blocker) {
+				let property = /** @type {ESTree.SimpleLiteral & { value: number }} */ (
+					binding.blocker.property
+				);
+
+				return Math.max(property.value, max);
+			}
+
+			return max;
+		}, -1);
+
+		if (max === -1) continue;
+
+		const blocker = b.member(promises, b.literal(max), true);
+		const binding = /** @type {Binding} */ (
+			fn.type === 'FunctionDeclaration'
+				? instance.scope.get(fn.id.name)
+				: instance.scope.get(/** @type {ESTree.Identifier} */ (fn.id).name)
+		);
+
+		binding.blocker = /** @type {typeof binding['blocker']} */ (blocker);
+	}
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/2-analyze/types.d.ts b/packages/svelte/src/compiler/phases/2-analyze/types.d.ts
index b4ca4dc262..bd486a12ca 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/types.d.ts
+++ b/packages/svelte/src/compiler/phases/2-analyze/types.d.ts
@@ -1,7 +1,8 @@
 import type { Scope } from '../scope.js';
 import type { ComponentAnalysis, ReactiveStatement } from '../types.js';
-import type { AST, ExpressionMetadata, ValidatedCompileOptions } from '#compiler';
-import type { LabeledStatement } from 'estree';
+import type { AST, StateField, ValidatedCompileOptions } from '#compiler';
+import type { ExpressionMetadata } from '../nodes.js';
+import type { Identifier } from 'estree';
 
 export interface AnalysisState {
 	scope: Scope;
@@ -9,25 +10,39 @@ export interface AnalysisState {
 	analysis: ComponentAnalysis;
 	options: ValidatedCompileOptions;
 	ast_type: 'instance' | 'template' | 'module';
+	fragment: AST.Fragment | null;
 	/**
 	 * Tag name of the parent element. `null` if the parent is `svelte:element`, `#snippet`, a component or the root.
 	 * Parent doesn't necessarily mean direct path predecessor because there could be `#each`, `#if` etc in-between.
 	 */
 	parent_element: string | null;
+	/** True if inside DeclarationTag */
+	in_declaration_tag: boolean;
 	has_props_rune: boolean;
 	/** Which slots the current parent component has */
 	component_slots: Set<string>;
 	/** Information about the current expression/directive/block value */
 	expression: ExpressionMetadata | null;
-	/** The current {@render ...} tag, if any */
-	render_tag: null | AST.RenderTag;
-	private_derived_state: string[];
+
+	/** Used to analyze class state */
+	state_fields: Map<string, StateField>;
+
 	function_depth: number;
 
 	// legacy stuff
-	instance_scope: Scope;
 	reactive_statement: null | ReactiveStatement;
-	reactive_statements: Map<LabeledStatement, ReactiveStatement>;
+
+	/**
+	 * Set when we're inside a `$derived(...)` expression (but not `$derived.by(...)`) or `@const`
+	 */
+	derived_function_depth: number;
+
+	/** Collected info about async `{@const }`/`{let/const ...}` declarations */
+	async_consts?: {
+		id: Identifier;
+		/** How many `$.run(...)` entries are already allocated in this scope */
+		declaration_count: number;
+	};
 }
 
 export type Context<State extends AnalysisState = AnalysisState> = import('zimmerframe').Context<
diff --git a/packages/svelte/src/compiler/phases/2-analyze/utils/check_graph_for_cycles.js b/packages/svelte/src/compiler/phases/2-analyze/utils/check_graph_for_cycles.js
index 67201d4825..83959248fe 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/utils/check_graph_for_cycles.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/utils/check_graph_for_cycles.js
@@ -14,6 +14,7 @@ export default function check_graph_for_cycles(edges) {
 	}, new Map());
 
 	const visited = new Set();
+	/** @type {Set<T>} */
 	const on_stack = new Set();
 	/** @type {Array<Array<T>>} */
 	const cycles = [];
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/AnimateDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/AnimateDirective.js
new file mode 100644
index 0000000000..3b4f7007be
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/AnimateDirective.js
@@ -0,0 +1,15 @@
+/** @import { Context } from '../types' */
+/** @import { AST } from '#compiler'; */
+import * as e from '../../../errors.js';
+
+/**
+ * @param {AST.AnimateDirective} node
+ * @param {Context} context
+ */
+export function AnimateDirective(node, context) {
+	context.next({ ...context.state, expression: node.metadata.expression });
+
+	if (node.metadata.expression.has_await) {
+		e.illegal_await_expression(node);
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/AssignmentExpression.js
index a64c89cd88..39358f72fc 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/AssignmentExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/AssignmentExpression.js
@@ -8,7 +8,7 @@ import { validate_assignment } from './shared/utils.js';
  * @param {Context} context
  */
 export function AssignmentExpression(node, context) {
-	validate_assignment(node, node.left, context.state);
+	validate_assignment(node, node.left, context);
 
 	if (context.state.reactive_statement) {
 		const id = node.left.type === 'MemberExpression' ? object(node.left) : node.left;
@@ -23,5 +23,9 @@ export function AssignmentExpression(node, context) {
 		}
 	}
 
+	if (context.state.expression) {
+		context.state.expression.has_assignment = true;
+	}
+
 	context.next();
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/AttachTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/AttachTag.js
new file mode 100644
index 0000000000..f9a8c1b69d
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/AttachTag.js
@@ -0,0 +1,17 @@
+/** @import { AST } from '#compiler' */
+/** @import { Context } from '../types' */
+import { mark_subtree_dynamic } from './shared/fragment.js';
+import * as e from '../../../errors.js';
+
+/**
+ * @param {AST.AttachTag} node
+ * @param {Context} context
+ */
+export function AttachTag(node, context) {
+	mark_subtree_dynamic(context.path);
+	context.next({ ...context.state, expression: node.metadata.expression });
+
+	if (node.metadata.expression.has_await) {
+		e.illegal_await_expression(node);
+	}
+}
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 6eb9faca6d..2b7d636606 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
@@ -1,12 +1,7 @@
-/** @import { ArrowFunctionExpression, Expression, FunctionDeclaration, FunctionExpression } from 'estree' */
-/** @import { AST, DelegatedEvent } from '#compiler' */
+/** @import { AST } from '#compiler' */
 /** @import { Context } from '../types' */
-import { cannot_be_set_statically, is_capture_event, is_delegated } from '../../../../utils.js';
-import {
-	get_attribute_chunks,
-	get_attribute_expression,
-	is_event_attribute
-} from '../../../utils/ast.js';
+import { cannot_be_set_statically, can_delegate_event } from '../../../../utils.js';
+import { get_attribute_chunks, is_event_attribute } from '../../../utils/ast.js';
 import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
@@ -23,11 +18,6 @@ export function Attribute(node, context) {
 		if (node.name === 'value' && parent.name === 'option') {
 			mark_subtree_dynamic(context.path);
 		}
-
-		// special case <img loading="lazy" />
-		if (node.name === 'loading' && parent.name === 'img') {
-			mark_subtree_dynamic(context.path);
-		}
 	}
 
 	if (is_event_attribute(node)) {
@@ -38,6 +28,19 @@ export function Attribute(node, context) {
 		mark_subtree_dynamic(context.path);
 	}
 
+	// class={[...]} or class={{...}} or `class={x}` need clsx to resolve the classes
+	if (
+		node.name === 'class' &&
+		!Array.isArray(node.value) &&
+		node.value !== true &&
+		node.value.expression.type !== 'Literal' &&
+		node.value.expression.type !== 'TemplateLiteral' &&
+		node.value.expression.type !== 'BinaryExpression'
+	) {
+		mark_subtree_dynamic(context.path);
+		node.metadata.needs_clsx = true;
+	}
+
 	if (node.value !== true) {
 		for (const chunk of get_attribute_chunks(node.value)) {
 			if (chunk.type !== 'ExpressionTag') continue;
@@ -48,9 +51,6 @@ export function Attribute(node, context) {
 			) {
 				continue;
 			}
-
-			node.metadata.expression.has_state ||= chunk.metadata.expression.has_state;
-			node.metadata.expression.has_call ||= chunk.metadata.expression.has_call;
 		}
 
 		if (is_event_attribute(node)) {
@@ -59,175 +59,8 @@ export function Attribute(node, context) {
 				context.state.analysis.uses_event_attributes = true;
 			}
 
-			const expression = get_attribute_expression(node);
-			const delegated_event = get_delegated_event(node.name.slice(2), expression, context);
-
-			if (delegated_event !== null) {
-				if (delegated_event.hoisted) {
-					delegated_event.function.metadata.hoisted = true;
-				}
-
-				node.metadata.delegated = delegated_event;
-			}
-		}
-	}
-}
-
-/** @type {DelegatedEvent} */
-const unhoisted = { hoisted: false };
-
-/**
- * Checks if given event attribute can be delegated/hoisted and returns the corresponding info if so
- * @param {string} event_name
- * @param {Expression | null} handler
- * @param {Context} context
- * @returns {null | DelegatedEvent}
- */
-function get_delegated_event(event_name, handler, context) {
-	// Handle delegated event handlers. Bail out if not a delegated event.
-	if (!handler || !is_delegated(event_name)) {
-		return null;
-	}
-
-	// If we are not working with a RegularElement, then bail out.
-	const element = context.path.at(-1);
-	if (element?.type !== 'RegularElement') {
-		return null;
-	}
-
-	/** @type {FunctionExpression | FunctionDeclaration | ArrowFunctionExpression | null} */
-	let target_function = null;
-	let binding = null;
-
-	if (element.metadata.has_spread) {
-		// event attribute becomes part of the dynamic spread array
-		return unhoisted;
-	}
-
-	if (handler.type === 'ArrowFunctionExpression' || handler.type === 'FunctionExpression') {
-		target_function = handler;
-	} else if (handler.type === 'Identifier') {
-		binding = context.state.scope.get(handler.name);
-
-		if (context.state.analysis.module.scope.references.has(handler.name)) {
-			// If a binding with the same name is referenced in the module scope (even if not declared there), bail out
-			return unhoisted;
-		}
-
-		if (binding != null) {
-			for (const { path } of binding.references) {
-				const parent = path.at(-1);
-				if (parent === undefined) return unhoisted;
-
-				const grandparent = path.at(-2);
-
-				/** @type {AST.RegularElement | null} */
-				let element = null;
-				/** @type {string | null} */
-				let event_name = null;
-				if (parent.type === 'OnDirective') {
-					element = /** @type {AST.RegularElement} */ (grandparent);
-					event_name = parent.name;
-				} else if (
-					parent.type === 'ExpressionTag' &&
-					grandparent?.type === 'Attribute' &&
-					is_event_attribute(grandparent)
-				) {
-					element = /** @type {AST.RegularElement} */ (path.at(-3));
-					const attribute = /** @type {AST.Attribute} */ (grandparent);
-					event_name = get_attribute_event_name(attribute.name);
-				}
-
-				if (element && event_name) {
-					if (
-						element.type !== 'RegularElement' ||
-						element.metadata.has_spread ||
-						!is_delegated(event_name)
-					) {
-						return unhoisted;
-					}
-				} else if (parent.type !== 'FunctionDeclaration' && parent.type !== 'VariableDeclarator') {
-					return unhoisted;
-				}
-			}
-		}
-
-		// If the binding is exported, bail out
-		if (context.state.analysis.exports.find((node) => node.name === handler.name)) {
-			return unhoisted;
+			node.metadata.delegated =
+				parent?.type === 'RegularElement' && can_delegate_event(node.name.slice(2));
 		}
-
-		if (binding !== null && binding.initial !== null && !binding.updated && !binding.is_called) {
-			const binding_type = binding.initial.type;
-
-			if (
-				binding_type === 'ArrowFunctionExpression' ||
-				binding_type === 'FunctionDeclaration' ||
-				binding_type === 'FunctionExpression'
-			) {
-				target_function = binding.initial;
-			}
-		}
-	}
-
-	// If we can't find a function, or the function has multiple parameters, bail out
-	if (target_function == null || target_function.params.length > 1) {
-		return unhoisted;
-	}
-
-	const visited_references = new Set();
-	const scope = target_function.metadata.scope;
-	for (const [reference] of scope.references) {
-		// Bail out if the arguments keyword is used or $host is referenced
-		if (reference === 'arguments' || reference === '$host') return unhoisted;
-		// Bail out if references a store subscription
-		if (scope.get(`$${reference}`)?.kind === 'store_sub') return unhoisted;
-
-		const binding = scope.get(reference);
-		const local_binding = context.state.scope.get(reference);
-
-		// 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) {
-			return unhoisted;
-		}
-
-		// If we have multiple references to the same store using $ prefix, bail out.
-		if (
-			binding !== null &&
-			binding.kind === 'store_sub' &&
-			visited_references.has(reference.slice(1))
-		) {
-			return unhoisted;
-		}
-
-		// If we reference the index within an each block, then bail out.
-		if (binding !== null && binding.initial?.type === 'EachBlock') return unhoisted;
-
-		if (
-			binding !== null &&
-			// Bail out if the the binding is a rest param
-			(binding.declaration_kind === 'rest_param' ||
-				// Bail out if we reference anything from the EachBlock (for now) that mutates in non-runes mode,
-				(((!context.state.analysis.runes && binding.kind === 'each') ||
-					// or any normal not reactive bindings that are mutated.
-					binding.kind === 'normal') &&
-					binding.updated))
-		) {
-			return unhoisted;
-		}
-		visited_references.add(reference);
-	}
-
-	return { hoisted: true, function: target_function };
-}
-
-/**
- * @param {string} event_name
- */
-function get_attribute_event_name(event_name) {
-	event_name = event_name.slice(2);
-	if (is_capture_event(event_name)) {
-		event_name = event_name.slice(0, -7);
 	}
-	return event_name;
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitBlock.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitBlock.js
index a71f325154..5aa04ba3b9 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitBlock.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitBlock.js
@@ -41,5 +41,8 @@ export function AwaitBlock(node, context) {
 
 	mark_subtree_dynamic(context.path);
 
-	context.next();
+	context.visit(node.expression, { ...context.state, expression: node.metadata.expression });
+	if (node.pending) context.visit(node.pending);
+	if (node.then) context.visit(node.then);
+	if (node.catch) context.visit(node.catch);
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitExpression.js
new file mode 100644
index 0000000000..5a54d62471
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitExpression.js
@@ -0,0 +1,149 @@
+/** @import { AwaitExpression, Expression, SpreadElement, Property } from 'estree' */
+/** @import { Context } from '../types' */
+/** @import { AST } from '#compiler' */
+import * as e from '../../../errors.js';
+
+/**
+ * @param {AwaitExpression} node
+ * @param {Context} context
+ */
+export function AwaitExpression(node, context) {
+	const tla = context.state.ast_type === 'instance' && context.state.function_depth === 1;
+
+	// preserve context for awaits that precede other expressions in template or `$derived(...)`
+	if (
+		is_reactive_expression(
+			context.path,
+			context.state.derived_function_depth === context.state.function_depth
+		) &&
+		!is_last_evaluated_expression(context.path, node)
+	) {
+		context.state.analysis.pickled_awaits.add(node);
+	}
+
+	let suspend = tla;
+
+	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();
+}
+
+/**
+ * @param {AST.SvelteNode[]} path
+ * @param {boolean} in_derived
+ */
+export function is_reactive_expression(path, in_derived) {
+	if (in_derived) return true;
+
+	let i = path.length;
+
+	while (i--) {
+		const parent = path[i];
+
+		if (
+			parent.type === 'ArrowFunctionExpression' ||
+			parent.type === 'FunctionExpression' ||
+			parent.type === 'FunctionDeclaration'
+		) {
+			// No reactive expression found between function and await
+			return false;
+		}
+
+		// @ts-expect-error we could probably use a neater/more robust mechanism
+		if (parent.metadata) {
+			return true;
+		}
+	}
+
+	return false;
+}
+
+/**
+ * @param {AST.SvelteNode[]} path
+ * @param {Expression | SpreadElement | Property} node
+ */
+function is_last_evaluated_expression(path, node) {
+	let i = path.length;
+
+	while (i--) {
+		const parent = path[i];
+
+		if (parent.type === 'ConstTag') {
+			// {@const ...} tags are treated as deriveds and its contents should all get the preserve-reactivity treatment
+			return false;
+		}
+
+		// @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':
+				return false;
+
+			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;
+
+			case 'VariableDeclarator':
+				return true;
+
+			default:
+				return false;
+		}
+
+		node = parent;
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
index b4de1925df..ab541703a0 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
@@ -5,7 +5,7 @@ import {
 	is_text_attribute,
 	object
 } from '../../../utils/ast.js';
-import { validate_no_const_assignment } from './shared/utils.js';
+import { validate_assignment } from './shared/utils.js';
 import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
 import { binding_properties } from '../../bindings.js';
@@ -33,7 +33,7 @@ export function BindDirective(node, context) {
 				e.bind_invalid_target(
 					node,
 					node.name,
-					property.valid_elements.map((valid_element) => `<${valid_element}>`).join(', ')
+					property.valid_elements.map((valid_element) => `\`<${valid_element}>\``).join(', ')
 				);
 			}
 
@@ -67,11 +67,15 @@ export function BindDirective(node, context) {
 					}
 				} else {
 					if (node.name === 'checked' && type?.value[0].data !== 'checkbox') {
-						e.bind_invalid_target(node, node.name, '<input type="checkbox">');
+						e.bind_invalid_target(
+							node,
+							node.name,
+							`\`<input type="checkbox">\`${type?.value[0].data === 'radio' ? ` — for \`<input type="radio">\`, use \`bind:group\`` : ''}`
+						);
 					}
 
 					if (node.name === 'files' && type?.value[0].data !== 'file') {
-						e.bind_invalid_target(node, node.name, '<input type="file">');
+						e.bind_invalid_target(node, node.name, '`<input type="file">`');
 					}
 				}
 			}
@@ -94,7 +98,7 @@ export function BindDirective(node, context) {
 				e.bind_invalid_target(
 					node,
 					node.name,
-					`non-<svg> elements. Use 'clientWidth' for <svg> instead`
+					`non-\`<svg>\` elements. Use \`bind:clientWidth\` for \`<svg>\` instead`
 				);
 			}
 
@@ -132,8 +136,19 @@ export function BindDirective(node, context) {
 		}
 
 		let i = /** @type {number} */ (node.expression.start);
+		let leading_comments_start = /**@type {any}*/ (node.expression.leadingComments?.at(0))?.start;
+		let leading_comments_end = /**@type {any}*/ (node.expression.leadingComments?.at(-1))?.end;
 		while (context.state.analysis.source[--i] !== '{') {
-			if (context.state.analysis.source[i] === '(') {
+			if (
+				context.state.analysis.source[i] === '(' &&
+				// if the parenthesis is in a leading comment we don't need to throw the error
+				!(
+					leading_comments_start &&
+					leading_comments_end &&
+					i <= leading_comments_end &&
+					i >= leading_comments_start
+				)
+			) {
 				e.bind_invalid_parens(node, node.name);
 			}
 		}
@@ -144,10 +159,26 @@ export function BindDirective(node, context) {
 
 		mark_subtree_dynamic(context.path);
 
+		const [get, set] = node.expression.expressions;
+		// We gotta jump across the getter/setter functions to avoid the expression metadata field being reset to null
+		// as we want to collect the functions' blocker/async info
+		context.visit(get.type === 'ArrowFunctionExpression' ? get.body : get, {
+			...context.state,
+			expression: node.metadata.expression
+		});
+		context.visit(set.type === 'ArrowFunctionExpression' ? set.body : set, {
+			...context.state,
+			expression: node.metadata.expression
+		});
+
+		if (node.metadata.expression.has_await) {
+			e.illegal_await_expression(node);
+		}
+
 		return;
 	}
 
-	validate_no_const_assignment(node, node.expression, context.state.scope, true);
+	validate_assignment(node, node.expression, context);
 
 	const assignee = node.expression;
 	const left = object(assignee);
@@ -157,6 +188,7 @@ export function BindDirective(node, context) {
 	}
 
 	const binding = context.state.scope.get(left.name);
+	node.metadata.binding = binding;
 
 	if (assignee.type === 'Identifier') {
 		// reassignment
@@ -173,14 +205,6 @@ export function BindDirective(node, context) {
 		) {
 			e.bind_invalid_value(node.expression);
 		}
-
-		if (context.state.analysis.runes && binding?.kind === 'each') {
-			e.each_item_invalid_assignment(node);
-		}
-
-		if (binding?.kind === 'snippet') {
-			e.snippet_parameter_assignment(node);
-		}
 	}
 
 	if (node.name === 'group') {
@@ -188,6 +212,10 @@ export function BindDirective(node, context) {
 			throw new Error('Cannot find declaration for bind:group');
 		}
 
+		if (binding.kind === 'snippet') {
+			e.bind_group_invalid_snippet_parameter(node);
+		}
+
 		// Traverse the path upwards and find all EachBlocks who are (indirectly) contributing to bind:group,
 		// i.e. one of their declarations is referenced in the binding. This allows group bindings to work
 		// correctly when referencing a variable declared in an EachBlock by using the index of the each block
@@ -235,7 +263,8 @@ export function BindDirective(node, context) {
 
 		node.metadata = {
 			binding_group_name: group_name,
-			parent_each_blocks: each_blocks
+			parent_each_blocks: each_blocks,
+			expression: node.metadata.expression
 		};
 	}
 
@@ -243,5 +272,9 @@ export function BindDirective(node, context) {
 		w.bind_invalid_each_rest(binding.node, binding.node.name);
 	}
 
-	context.next();
+	context.next({ ...context.state, expression: node.metadata.expression });
+
+	if (node.metadata.expression.has_await) {
+		e.illegal_await_expression(node);
+	}
 }
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 6a301726b1..d3524af4db 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
@@ -3,10 +3,11 @@
 /** @import { Context } from '../types' */
 import { get_rune } from '../../scope.js';
 import * as e from '../../../errors.js';
-import { get_parent, unwrap_optional } from '../../../utils/ast.js';
+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 '../../../utils/builders.js';
+import * as b from '#compiler/builders';
+import { ExpressionMetadata } from '../../nodes.js';
 
 /**
  * @param {CallExpression} node
@@ -17,6 +18,14 @@ export function CallExpression(node, context) {
 
 	const rune = get_rune(node, context.state.scope);
 
+	if (rune && rune !== '$inspect') {
+		for (const arg of node.arguments) {
+			if (arg.type === 'SpreadElement') {
+				e.rune_invalid_spread(node, rune);
+			}
+		}
+	}
+
 	switch (rune) {
 		case null:
 			if (!is_safe_identifier(node.callee, context.state.scope)) {
@@ -42,6 +51,9 @@ export function CallExpression(node, context) {
 				e.bindable_invalid_location(node);
 			}
 
+			// We need context in case the bound prop is stale
+			context.state.analysis.needs_context = true;
+
 			break;
 
 		case '$host':
@@ -55,7 +67,7 @@ export function CallExpression(node, context) {
 
 		case '$props':
 			if (context.state.has_props_rune) {
-				e.props_duplicate(node);
+				e.props_duplicate(node, rune);
 			}
 
 			context.state.has_props_rune = true;
@@ -74,24 +86,53 @@ export function CallExpression(node, context) {
 
 			break;
 
+		case '$props.id': {
+			const grand_parent = get_parent(context.path, -2);
+
+			if (context.state.analysis.props_id) {
+				e.props_duplicate(node, rune);
+			}
+
+			if (
+				parent.type !== 'VariableDeclarator' ||
+				parent.id.type !== 'Identifier' ||
+				context.state.ast_type !== 'instance' ||
+				context.state.scope !== context.state.analysis.instance.scope ||
+				grand_parent.type !== 'VariableDeclaration'
+			) {
+				e.props_id_invalid_placement(node);
+			}
+
+			if (node.arguments.length > 0) {
+				e.rune_invalid_arguments(node, rune);
+			}
+
+			context.state.analysis.props_id = parent.id;
+
+			break;
+		}
+
 		case '$state':
 		case '$state.raw':
 		case '$derived':
-		case '$derived.by':
-			if (
-				parent.type !== 'VariableDeclarator' &&
-				!(parent.type === 'PropertyDefinition' && !parent.static && !parent.computed)
-			) {
+		case '$derived.by': {
+			const valid =
+				is_variable_declaration(parent, context) ||
+				is_class_property_definition(parent) ||
+				is_class_property_assignment_at_constructor_root(parent, context);
+
+			if (!valid) {
 				e.state_invalid_placement(node, rune);
 			}
 
 			if ((rune === '$derived' || rune === '$derived.by') && node.arguments.length !== 1) {
 				e.rune_invalid_arguments_length(node, rune, 'exactly one argument');
-			} else if (rune === '$state' && node.arguments.length > 1) {
+			} else if (node.arguments.length > 1) {
 				e.rune_invalid_arguments_length(node, rune, 'zero or one arguments');
 			}
 
 			break;
+		}
 
 		case '$effect':
 		case '$effect.pre':
@@ -123,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');
@@ -171,41 +219,46 @@ export function CallExpression(node, context) {
 
 					context.state.scope.tracing = b.thunk(b.literal(label + ' ' + loc));
 				}
+
+				context.state.analysis.tracing = true;
 			}
 
 			break;
 		}
 
-		case '$state.snapshot':
+		case '$state.eager':
 			if (node.arguments.length !== 1) {
 				e.rune_invalid_arguments_length(node, rune, 'exactly one argument');
 			}
 
 			break;
-	}
 
-	if (context.state.render_tag) {
-		// Find out which of the render tag arguments contains this call expression
-		const arg_idx = unwrap_optional(context.state.render_tag.expression).arguments.findIndex(
-			(arg) => arg === node || context.path.includes(arg)
-		);
+		case '$state.snapshot':
+			if (node.arguments.length !== 1) {
+				e.rune_invalid_arguments_length(node, rune, 'exactly one argument');
+			}
 
-		// -1 if this is the call expression of the render tag itself
-		if (arg_idx !== -1) {
-			context.state.render_tag.metadata.args_with_call_expression.add(arg_idx);
-		}
+			break;
 	}
 
-	if (node.callee.type === 'Identifier') {
-		const binding = context.state.scope.get(node.callee.name);
-
-		if (binding !== null) {
-			binding.is_called = true;
+	// `$inspect(foo)` or `$derived(foo) should not trigger the `static-state-reference` warning
+	if (rune === '$derived') {
+		const expression = new ExpressionMetadata();
+
+		context.next({
+			...context.state,
+			function_depth: context.state.function_depth + 1,
+			derived_function_depth: context.state.function_depth + 1,
+			expression
+		});
+
+		if (expression.has_await) {
+			context.state.analysis.async_deriveds.add(node);
 		}
-	}
 
-	// `$inspect(foo)` or `$derived(foo) should not trigger the `static-state-reference` warning
-	if (rune === '$inspect' || rune === '$derived') {
+		// Tell surrounding declaration tag about metadata for correct calculation of blockers etc
+		if (context.state.in_declaration_tag) context.state.expression?.merge(expression);
+	} else if (rune === '$inspect') {
 		context.next({ ...context.state, function_depth: context.state.function_depth + 1 });
 	} else {
 		context.next();
@@ -250,3 +303,40 @@ function get_function_label(nodes) {
 		return parent.id.name;
 	}
 }
+
+/**
+ * @param {AST.SvelteNode} parent
+ * @param {Context} context
+ */
+function is_variable_declaration(parent, context) {
+	return parent.type === 'VariableDeclarator' && get_parent(context.path, -3).type !== 'ConstTag';
+}
+
+/**
+ * @param {AST.SvelteNode} parent
+ */
+function is_class_property_definition(parent) {
+	return parent.type === 'PropertyDefinition' && !parent.static && !parent.computed;
+}
+
+/**
+ * @param {AST.SvelteNode} node
+ * @param {Context} context
+ */
+function is_class_property_assignment_at_constructor_root(node, context) {
+	if (
+		node.type === 'AssignmentExpression' &&
+		node.operator === '=' &&
+		node.left.type === 'MemberExpression' &&
+		node.left.object.type === 'ThisExpression' &&
+		((node.left.property.type === 'Identifier' && !node.left.computed) ||
+			node.left.property.type === 'PrivateIdentifier' ||
+			node.left.property.type === 'Literal')
+	) {
+		// MethodDefinition (-5) -> FunctionExpression (-4) -> BlockStatement (-3) -> ExpressionStatement (-2) -> AssignmentExpression (-1)
+		const parent = get_parent(context.path, -5);
+		return parent?.type === 'MethodDefinition' && parent.kind === 'constructor';
+	}
+
+	return false;
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ClassBody.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ClassBody.js
index d445af0ebf..dd21637174 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ClassBody.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ClassBody.js
@@ -1,27 +1,156 @@
-/** @import { ClassBody } from 'estree' */
+/** @import { AssignmentExpression, CallExpression, ClassBody, PropertyDefinition, Expression, PrivateIdentifier, MethodDefinition } from 'estree' */
+/** @import { StateField } from '#compiler' */
 /** @import { Context } from '../types' */
+import * as b from '#compiler/builders';
 import { get_rune } from '../../scope.js';
+import * as e from '../../../errors.js';
+import { is_state_creation_rune } from '../../../../utils.js';
+import { get_name } from '../../nodes.js';
+import { regex_invalid_identifier_chars } from '../../patterns.js';
 
 /**
  * @param {ClassBody} node
  * @param {Context} context
  */
 export function ClassBody(node, context) {
+	if (!context.state.analysis.runes) {
+		context.next();
+		return;
+	}
+
 	/** @type {string[]} */
-	const private_derived_state = [];
+	const private_ids = [];
 
-	for (const definition of node.body) {
+	for (const prop of node.body) {
 		if (
-			definition.type === 'PropertyDefinition' &&
-			definition.key.type === 'PrivateIdentifier' &&
-			definition.value?.type === 'CallExpression'
+			(prop.type === 'MethodDefinition' || prop.type === 'PropertyDefinition') &&
+			prop.key.type === 'PrivateIdentifier'
 		) {
-			const rune = get_rune(definition.value, context.state.scope);
-			if (rune === '$derived' || rune === '$derived.by') {
-				private_derived_state.push(definition.key.name);
+			private_ids.push(prop.key.name);
+		}
+	}
+
+	/** @type {Map<string, StateField>} */
+	const state_fields = new Map();
+
+	/** @type {Map<string, Array<MethodDefinition['kind'] | 'prop' | 'assigned_prop'>>} */
+	const fields = new Map();
+
+	context.state.analysis.classes.set(node, state_fields);
+
+	/** @type {MethodDefinition | null} */
+	let constructor = null;
+
+	/**
+	 * @param {PropertyDefinition | AssignmentExpression} node
+	 * @param {Expression | PrivateIdentifier} key
+	 * @param {Expression | null | undefined} value
+	 */
+	function handle(node, key, value) {
+		const name = get_name(key);
+		if (name === null) return;
+
+		const rune = get_rune(value, context.state.scope);
+
+		if (rune && is_state_creation_rune(rune)) {
+			if (state_fields.has(name)) {
+				e.state_field_duplicate(node, name);
+			}
+
+			const _key = (node.type === 'AssignmentExpression' || !node.static ? '' : '@') + name;
+			const field = fields.get(_key);
+
+			// if there's already a method or assigned field, error
+			if (field && !(field.length === 1 && field[0] === 'prop')) {
+				e.duplicate_class_field(node, _key);
+			}
+
+			state_fields.set(name, {
+				node,
+				type: rune,
+				// @ts-expect-error for public state this is filled out in a moment
+				key: key.type === 'PrivateIdentifier' ? key : null,
+				value: /** @type {CallExpression} */ (value)
+			});
+		}
+	}
+
+	for (const child of node.body) {
+		if (child.type === 'PropertyDefinition' && !child.computed && !child.static) {
+			handle(child, child.key, child.value);
+			const key = /** @type {string} */ (get_name(child.key));
+			const field = fields.get(key);
+			if (!field) {
+				fields.set(key, [child.value ? 'assigned_prop' : 'prop']);
+				continue;
+			}
+			e.duplicate_class_field(child, key);
+		}
+
+		if (child.type === 'MethodDefinition') {
+			if (child.kind === 'constructor') {
+				constructor = child;
+			} else if (!child.computed) {
+				const key = (child.static ? '@' : '') + get_name(child.key);
+				const field = fields.get(key);
+				if (!field) {
+					fields.set(key, [child.kind]);
+					continue;
+				}
+				if (
+					field.includes(child.kind) ||
+					field.includes('prop') ||
+					field.includes('assigned_prop')
+				) {
+					e.duplicate_class_field(child, key);
+				}
+				if (child.kind === 'get') {
+					if (field.length === 1 && field[0] === 'set') {
+						field.push('get');
+						continue;
+					}
+				} else if (child.kind === 'set') {
+					if (field.length === 1 && field[0] === 'get') {
+						field.push('set');
+						continue;
+					}
+				} else {
+					field.push(child.kind);
+					continue;
+				}
+				e.duplicate_class_field(child, key);
 			}
 		}
 	}
 
-	context.next({ ...context.state, private_derived_state });
+	if (constructor) {
+		for (const statement of constructor.value.body.body) {
+			if (statement.type !== 'ExpressionStatement') continue;
+			if (statement.expression.type !== 'AssignmentExpression') continue;
+
+			const { left, right } = statement.expression;
+
+			if (left.type !== 'MemberExpression') continue;
+			if (left.object.type !== 'ThisExpression') continue;
+			if (left.computed && left.property.type !== 'Literal') continue;
+
+			handle(statement.expression, left.property, right);
+		}
+	}
+
+	for (const [name, field] of state_fields) {
+		if (name[0] === '#') {
+			continue;
+		}
+
+		let deconflicted = name.replace(regex_invalid_identifier_chars, '_');
+		while (private_ids.includes(deconflicted)) {
+			deconflicted = '_' + deconflicted;
+		}
+
+		private_ids.push(deconflicted);
+		field.key = b.private_id(deconflicted);
+	}
+
+	context.next({ ...context.state, state_fields });
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Component.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Component.js
index 350719dedd..5a4d3fce3f 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Component.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Component.js
@@ -16,5 +16,11 @@ export function Component(node, context) {
 		binding !== null &&
 		(binding.kind !== 'normal' || node.name.includes('.'));
 
+	if (binding) {
+		node.metadata.expression.has_state = node.metadata.dynamic;
+		node.metadata.expression.dependencies.add(binding);
+		node.metadata.expression.references.add(binding);
+	}
+
 	visit_component(node, context);
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ConstTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ConstTag.js
index 214b4bcb9e..64e93d3efe 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ConstTag.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ConstTag.js
@@ -2,6 +2,7 @@
 /** @import { Context } from '../types' */
 import * as e from '../../../errors.js';
 import { validate_opening_tag } from './shared/utils.js';
+import { mark_async_declaration } from './DeclarationTag.js';
 
 /**
  * @param {AST.ConstTag} node
@@ -24,11 +25,24 @@ export function ConstTag(node, context) {
 			grand_parent?.type !== 'EachBlock' &&
 			grand_parent?.type !== 'AwaitBlock' &&
 			grand_parent?.type !== 'SnippetBlock' &&
+			grand_parent?.type !== 'SvelteBoundary' &&
+			grand_parent?.type !== 'KeyBlock' &&
 			((grand_parent?.type !== 'RegularElement' && grand_parent?.type !== 'SvelteElement') ||
 				!grand_parent.attributes.some((a) => a.type === 'Attribute' && a.name === 'slot')))
 	) {
 		e.const_tag_invalid_placement(node);
 	}
 
-	context.next();
+	const declaration = node.declaration.declarations[0];
+
+	context.visit(declaration.id);
+	context.visit(declaration.init, {
+		...context.state,
+		expression: node.metadata.expression,
+		// We're treating this like a $derived under the hood
+		function_depth: context.state.function_depth + 1,
+		derived_function_depth: context.state.function_depth + 1
+	});
+
+	mark_async_declaration(context, node.metadata, [declaration]);
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/DeclarationTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/DeclarationTag.js
new file mode 100644
index 0000000000..52e9480838
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/DeclarationTag.js
@@ -0,0 +1,71 @@
+/** @import { AST } from '#compiler' */
+/** @import { Context } from '../types' */
+import * as b from '#compiler/builders';
+import * as e from '../../../errors.js';
+import { extract_identifiers } from '../../../utils/ast.js';
+
+/**
+ * @param {AST.DeclarationTag} node
+ * @param {Context} context
+ */
+export function DeclarationTag(node, context) {
+	if (!context.state.analysis.runes && !context.state.analysis.maybe_runes) {
+		e.declaration_tag_no_legacy_mode(node);
+	}
+
+	const is_top_level = context.path.length === 1 && context.path[0].type === 'Fragment';
+	if (is_top_level) {
+		const duplicate = node.declaration.declarations
+			.flatMap((declaration) => extract_identifiers(declaration.id))
+			.find((id) => context.state.analysis.instance.scope.declarations.has(id.name));
+		if (duplicate) {
+			e.declaration_duplicate(duplicate, duplicate.name);
+		}
+	}
+
+	context.visit(node.declaration, {
+		...context.state,
+		in_declaration_tag: true,
+		// the declaration lives in the fragment scope, which is one level deeper than the
+		// `function_depth` we're tracking here (`set_scope` doesn't update `function_depth`).
+		// align them so that `state_referenced_locally` warnings are calculated correctly
+		function_depth: context.state.scope.function_depth,
+		expression: node.metadata.expression
+	});
+
+	mark_async_declaration(context, node.metadata, node.declaration.declarations);
+}
+
+/**
+ * @param {Context} context
+ * @param {AST.ConstTag['metadata'] | AST.DeclarationTag['metadata']} metadata
+ * @param {import('estree').VariableDeclarator[]} declarations
+ */
+export function mark_async_declaration(context, metadata, declarations) {
+	const has_await = metadata.expression.has_await;
+	const blockers = [...metadata.expression.dependencies]
+		.map((dep) => dep.blocker)
+		.filter((b) => b !== null && b.object !== context.state.async_consts?.id);
+
+	if (has_await || context.state.async_consts || blockers.length > 0) {
+		const run = (context.state.async_consts ??= {
+			id: context.state.analysis.root.unique('promises'),
+			declaration_count: 0
+		});
+		metadata.promises_id = run.id;
+
+		const bindings = declarations.flatMap((declaration) =>
+			context.state.scope.get_bindings(declaration)
+		);
+
+		// keep the counter in sync with the number of thunks pushed in transform
+		// TODO 6.0 once non-async and non-runes mode is gone investigate making this more robust
+		// via something like the approach in https://github.com/sveltejs/svelte/pull/18032
+		const length = run.declaration_count + (blockers.length > 0 ? 1 : 0);
+		run.declaration_count += blockers.length > 0 ? 2 : 1;
+		const blocker = b.member(run.id, b.literal(length), true);
+		for (const binding of bindings) {
+			binding.blocker = blocker;
+		}
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js
index bd6c936f99..5681966475 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js
@@ -1,7 +1,9 @@
-/** @import { AST } from '#compiler' */
+/** @import { Expression } from 'estree' */
+/** @import { AST, Binding } from '#compiler' */
 /** @import { Context } from '../types' */
 /** @import { Scope } from '../../scope' */
 import * as e from '../../../errors.js';
+import { extract_identifiers } from '../../../utils/ast.js';
 import { mark_subtree_dynamic } from './shared/fragment.js';
 import { validate_block_not_empty, validate_opening_tag } from './shared/utils.js';
 
@@ -27,6 +29,10 @@ export function EachBlock(node, context) {
 			node.key.type !== 'Identifier' || !node.index || node.key.name !== node.index;
 	}
 
+	if (node.metadata.keyed && !node.context) {
+		e.each_key_without_as(/** @type {Expression} */ (node.key));
+	}
+
 	// evaluate expression in parent scope
 	context.visit(node.expression, {
 		...context.state,
@@ -38,5 +44,54 @@ export function EachBlock(node, context) {
 	if (node.key) context.visit(node.key);
 	if (node.fallback) context.visit(node.fallback);
 
+	if (!context.state.analysis.runes) {
+		let mutated =
+			!!node.context &&
+			extract_identifiers(node.context).some((id) => {
+				const binding = context.state.scope.get(id.name);
+				return !!binding?.mutated;
+			});
+
+		// collect transitive dependencies...
+		for (const binding of node.metadata.expression.dependencies) {
+			if (binding.declaration_kind !== 'function') {
+				collect_transitive_dependencies(binding, node.metadata.transitive_deps);
+			}
+		}
+
+		// ...and ensure they are marked as state, so they can be turned
+		// into mutable sources and invalidated
+		if (mutated) {
+			for (const binding of node.metadata.transitive_deps) {
+				if (
+					binding.kind === 'normal' &&
+					(binding.declaration_kind === 'const' ||
+						binding.declaration_kind === 'let' ||
+						binding.declaration_kind === 'var')
+				) {
+					binding.kind = 'state';
+				}
+			}
+		}
+	}
+
 	mark_subtree_dynamic(context.path);
 }
+
+/**
+ * @param {Binding} binding
+ * @param {Set<Binding>} bindings
+ * @returns {void}
+ */
+function collect_transitive_dependencies(binding, bindings) {
+	if (bindings.has(binding)) {
+		return;
+	}
+	bindings.add(binding);
+
+	if (binding.kind === 'legacy_reactive') {
+		for (const dep of binding.legacy_dependencies) {
+			collect_transitive_dependencies(dep, bindings);
+		}
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js
index 547f6ab9c7..5b8d9ba053 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js
@@ -1,7 +1,5 @@
-/** @import { ExportNamedDeclaration, Identifier, Node } from 'estree' */
-/** @import { Binding } from '#compiler' */
+/** @import { ExportNamedDeclaration, Identifier } from 'estree' */
 /** @import { Context } from '../types' */
-/** @import { Scope } from '../../scope' */
 import * as e from '../../../errors.js';
 import { extract_identifiers } from '../../../utils/ast.js';
 
@@ -13,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/ExportSpecifier.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js
index cfb24970de..2a05ffb926 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js
@@ -22,7 +22,7 @@ export function ExportSpecifier(node, context) {
 			});
 
 			const binding = context.state.scope.get(local_name);
-			if (binding) binding.reassigned = binding.updated = true;
+			if (binding) binding.reassigned = true;
 		}
 	} else {
 		validate_export(node, context.state.scope, local_name);
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Fragment.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Fragment.js
new file mode 100644
index 0000000000..def3860175
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Fragment.js
@@ -0,0 +1,10 @@
+/** @import { AST } from '#compiler' */
+/** @import { Context } from '../types.js' */
+
+/**
+ * @param {AST.Fragment} node
+ * @param {Context} context
+ */
+export function Fragment(node, context) {
+	context.next({ ...context.state, fragment: node, async_consts: undefined });
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/HtmlTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/HtmlTag.js
index c89b11ad36..7b0e501760 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/HtmlTag.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/HtmlTag.js
@@ -15,5 +15,5 @@ export function HtmlTag(node, context) {
 	// unfortunately this is necessary in order to fix invalid HTML
 	mark_subtree_dynamic(context.path);
 
-	context.next();
+	context.next({ ...context.state, expression: node.metadata.expression });
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
index 79dccd5a7c..ebb2fc2b67 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -1,5 +1,4 @@
 /** @import { Expression, Identifier } from 'estree' */
-/** @import { EachBlock } from '#compiler' */
 /** @import { Context } from '../types' */
 import is_reference from 'is-reference';
 import { should_proxy } from '../../3-transform/client/utils.js';
@@ -7,6 +6,8 @@ import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
 import { is_rune } from '../../../../utils.js';
 import { mark_subtree_dynamic } from './shared/fragment.js';
+import { get_rune } from '../../scope.js';
+import { is_component_node } from '../../nodes.js';
 
 /**
  * @param {Identifier} node
@@ -39,7 +40,7 @@ export function Identifier(node, context) {
 		if (
 			is_rune(node.name) &&
 			context.state.scope.get(node.name) === null &&
-			context.state.scope.get(node.name.slice(1)) === null
+			context.state.scope.get(node.name.slice(1))?.kind !== 'store_sub'
 		) {
 			/** @type {Expression} */
 			let current = node;
@@ -90,7 +91,14 @@ export function Identifier(node, context) {
 	if (binding) {
 		if (context.state.expression) {
 			context.state.expression.dependencies.add(binding);
-			context.state.expression.has_state ||= binding.kind !== 'normal';
+			context.state.expression.references.add(binding);
+			context.state.expression.has_state ||=
+				binding.kind !== 'static' &&
+				(binding.kind === 'prop' ||
+					binding.kind === 'bindable_prop' ||
+					binding.kind === 'rest_prop' ||
+					!binding.is_function()) &&
+				!context.state.scope.evaluate(node).is_known;
 		}
 
 		if (
@@ -106,12 +114,41 @@ export function Identifier(node, context) {
 						binding.initial.arguments[0].type !== 'SpreadElement' &&
 						!should_proxy(binding.initial.arguments[0], context.state.scope)))) ||
 				binding.kind === 'raw_state' ||
-				binding.kind === 'derived') &&
+				binding.kind === 'derived' ||
+				binding.kind === 'prop' ||
+				binding.kind === 'rest_prop') &&
 			// We're only concerned with reads here
 			(parent.type !== 'AssignmentExpression' || parent.left !== node) &&
 			parent.type !== 'UpdateExpression'
 		) {
-			w.state_referenced_locally(node);
+			let type = 'closure';
+
+			let i = context.path.length;
+			while (i--) {
+				const parent = context.path[i];
+
+				if (
+					parent.type === 'ArrowFunctionExpression' ||
+					parent.type === 'FunctionDeclaration' ||
+					parent.type === 'FunctionExpression'
+				) {
+					break;
+				}
+
+				if (
+					parent.type === 'CallExpression' &&
+					parent.arguments.includes(/** @type {any} */ (context.path[i + 1]))
+				) {
+					const rune = get_rune(parent, context.state.scope);
+
+					if (rune === '$state' || rune === '$state.raw') {
+						type = 'derived';
+						break;
+					}
+				}
+			}
+
+			w.state_referenced_locally(node, node.name, type);
 		}
 
 		if (
@@ -121,5 +158,37 @@ export function Identifier(node, context) {
 		) {
 			w.reactive_declaration_module_script_dependency(node);
 		}
+
+		if (binding.metadata?.is_template_declaration && context.state.options.experimental.async) {
+			let snippet_name;
+
+			// Find out if this references a {@const ...}/{let/const ...} declaration of an implicit children snippet
+			// when it is itself inside a snippet block at the same level. If so, error.
+			for (let i = context.path.length - 1; i >= 0; i--) {
+				const parent = context.path[i];
+				const grand_parent = context.path[i - 1];
+
+				if (parent.type === 'SnippetBlock') {
+					snippet_name = parent.expression.name;
+				} else if (
+					snippet_name &&
+					grand_parent &&
+					parent.type === 'Fragment' &&
+					(is_component_node(grand_parent) ||
+						(grand_parent.type === 'SvelteBoundary' &&
+							(snippet_name === 'failed' || snippet_name === 'pending')))
+				) {
+					if (
+						is_component_node(grand_parent)
+							? grand_parent.metadata.scopes.default === binding.scope
+							: context.state.scopes.get(parent) === binding.scope
+					) {
+						e.const_tag_invalid_reference(node, node.name);
+					} else {
+						break;
+					}
+				}
+			}
+		}
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/IfBlock.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/IfBlock.js
index a65771bcfc..64855abdaf 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/IfBlock.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/IfBlock.js
@@ -17,5 +17,30 @@ export function IfBlock(node, context) {
 
 	mark_subtree_dynamic(context.path);
 
-	context.next();
+	context.visit(node.test, {
+		...context.state,
+		expression: node.metadata.expression
+	});
+
+	context.visit(node.consequent);
+	if (node.alternate) context.visit(node.alternate);
+
+	// Check if we can flatten branches
+	const alt = node.alternate;
+
+	if (alt && alt.nodes.length === 1 && alt.nodes[0].type === 'IfBlock' && alt.nodes[0].elseif) {
+		const elseif = alt.nodes[0];
+
+		// Don't flatten if this else-if has an await expression or new blockers
+		// TODO would be nice to check the await expression itself to see if it's awaiting the same thing as a previous if expression
+		if (
+			!elseif.metadata.expression.has_await &&
+			!elseif.metadata.expression.has_more_blockers_than(node.metadata.expression)
+		) {
+			// Roll the existing flattened branches (if any) into this one, then delete those of the else-if block
+			// to avoid processing them multiple times as we walk down the chain during code transformation.
+			node.metadata.flattened = [elseif, ...(elseif.metadata.flattened ?? [])];
+			elseif.metadata.flattened = undefined;
+		}
+	}
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/KeyBlock.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/KeyBlock.js
index 88bb6a98e7..09e604ea66 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/KeyBlock.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/KeyBlock.js
@@ -16,5 +16,6 @@ export function KeyBlock(node, context) {
 
 	mark_subtree_dynamic(context.path);
 
-	context.next();
+	context.visit(node.expression, { ...context.state, expression: node.metadata.expression });
+	context.visit(node.fragment);
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/LabeledStatement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/LabeledStatement.js
index a63480feaa..514cfae53c 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/LabeledStatement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/LabeledStatement.js
@@ -64,7 +64,7 @@ export function LabeledStatement(node, context) {
 				}
 			}
 
-			context.state.reactive_statements.set(node, reactive_statement);
+			context.state.analysis.reactive_statements.set(node, reactive_statement);
 
 			if (
 				node.body.type === 'ExpressionStatement' &&
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Literal.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Literal.js
new file mode 100644
index 0000000000..58684ba71c
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Literal.js
@@ -0,0 +1,14 @@
+/** @import { Literal } from 'estree' */
+import * as w from '../../../warnings.js';
+import { regex_bidirectional_control_characters } from '../../patterns.js';
+
+/**
+ * @param {Literal} node
+ */
+export function Literal(node) {
+	if (typeof node.value === 'string') {
+		if (regex_bidirectional_control_characters.test(node.value)) {
+			w.bidirectional_control_characters(node);
+		}
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
index 6ea8f238e1..0a3b386198 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
@@ -1,10 +1,7 @@
-/** @import { MemberExpression, Node } from 'estree' */
+/** @import { MemberExpression } from 'estree' */
 /** @import { Context } from '../types' */
 import * as e from '../../../errors.js';
-import * as w from '../../../warnings.js';
-import { object } from '../../../utils/ast.js';
 import { is_pure, is_safe_identifier } from './shared/utils.js';
-import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
  * @param {MemberExpression} node
@@ -18,8 +15,9 @@ export function MemberExpression(node, context) {
 		}
 	}
 
-	if (context.state.expression && !is_pure(node, context)) {
-		context.state.expression.has_state = true;
+	if (context.state.expression) {
+		context.state.expression.has_member_expression = true;
+		context.state.expression.has_state ||= !is_pure(node, context);
 	}
 
 	if (!is_safe_identifier(node, context.state.scope)) {
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/PropertyDefinition.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/PropertyDefinition.js
new file mode 100644
index 0000000000..99d05cb47c
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/PropertyDefinition.js
@@ -0,0 +1,21 @@
+/** @import { PropertyDefinition } from 'estree' */
+/** @import { Context } from '../types' */
+import * as e from '../../../errors.js';
+import { get_name } from '../../nodes.js';
+
+/**
+ * @param {PropertyDefinition} node
+ * @param {Context} context
+ */
+export function PropertyDefinition(node, context) {
+	const name = get_name(node.key);
+	const field = name && context.state.state_fields.get(name);
+
+	if (field && node !== field.node && node.value) {
+		if (/** @type {number} */ (node.start) < /** @type {number} */ (field.node.start)) {
+			e.state_field_invalid_assignment(node);
+		}
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
index 7454ab8103..bc65bd65db 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
@@ -7,11 +7,17 @@ import {
 } from '../../../../html-tree-validation.js';
 import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
-import { create_attribute, is_custom_element_node } from '../../nodes.js';
+import {
+	create_attribute,
+	is_custom_element_node,
+	is_customizable_select_element
+} 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';
+import { object } from '../../../utils/ast.js';
+import { runes } from '../../../state.js';
 
 /**
  * @param {AST.RegularElement} node
@@ -48,8 +54,9 @@ export function RegularElement(node, context) {
 			node.attributes.push(
 				create_attribute(
 					'value',
-					/** @type {AST.Text} */ (node.fragment.nodes.at(0)).start,
-					/** @type {AST.Text} */ (node.fragment.nodes.at(-1)).end,
+					null,
+					-1,
+					-1,
 					// @ts-ignore
 					node.fragment.nodes
 				)
@@ -59,6 +66,34 @@ export function RegularElement(node, context) {
 		}
 	}
 
+	// Special case: `<select bind:value={foo}><option>{bar}</option>`
+	// means we need to invalidate `bar` whenever `foo` is mutated
+	if (node.name === 'select' && !runes) {
+		for (const attribute of node.attributes) {
+			if (
+				attribute.type === 'BindDirective' &&
+				attribute.name === 'value' &&
+				attribute.expression.type !== 'SequenceExpression'
+			) {
+				const identifier = object(attribute.expression);
+				const binding = identifier && context.state.scope.get(identifier.name);
+
+				if (binding) {
+					for (const name of context.state.scope.references.keys()) {
+						if (name === binding.node.name) continue;
+						const indirect = context.state.scope.get(name);
+
+						if (indirect) {
+							binding.legacy_indirect_bindings.add(indirect);
+						}
+					}
+				}
+
+				break;
+			}
+		}
+	}
+
 	// Special case: single expression tag child of option element -> add "fake" attribute
 	// to ensure that value types are the same (else for example numbers would be strings)
 	if (
@@ -70,7 +105,16 @@ export function RegularElement(node, context) {
 		)
 	) {
 		const child = node.fragment.nodes[0];
-		node.attributes.push(create_attribute('value', child.start, child.end, [child]));
+		node.metadata.synthetic_value_node = child;
+	}
+
+	// Special case: <select>, <option> or <optgroup> with rich content needs special hydration handling
+	// We mark the subtree as dynamic so parent elements properly include the child init code
+	if (is_customizable_select_element(node) || node.name === 'selectedcontent') {
+		// Mark the element's own fragment as dynamic so it's not treated as static
+		node.fragment.metadata.dynamic = true;
+		// Also mark ancestor fragments so parents properly include the child init code
+		mark_subtree_dynamic(context.path);
 	}
 
 	const binding = context.state.scope.get(node.name);
@@ -86,7 +130,26 @@ export function RegularElement(node, context) {
 		(attribute) => attribute.type === 'SpreadAttribute'
 	);
 
-	node.metadata.svg = is_svg(node.name);
+	const is_svg_element = () => {
+		if (is_svg(node.name)) {
+			return true;
+		}
+
+		if (node.name === 'a' || node.name === 'title') {
+			let i = context.path.length;
+
+			while (i--) {
+				const ancestor = context.path[i];
+				if (ancestor.type === 'RegularElement') {
+					return ancestor.metadata.svg;
+				}
+			}
+		}
+
+		return false;
+	};
+
+	node.metadata.svg = is_svg_element();
 	node.metadata.mathml = is_mathml(node.name);
 
 	if (is_custom_element_node(node) && node.attributes.length > 0) {
@@ -154,7 +217,8 @@ export function RegularElement(node, context) {
 	if (
 		context.state.analysis.source[node.end - 2] === '/' &&
 		!is_void(node_name) &&
-		!is_svg(node_name)
+		!is_svg(node_name) &&
+		!is_mathml(node_name)
 	) {
 		w.element_invalid_self_closing_tag(node, node.name);
 	}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RenderTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RenderTag.js
index 045224276a..d0c994b7a4 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RenderTag.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RenderTag.js
@@ -5,6 +5,7 @@ import * as e from '../../../errors.js';
 import { validate_opening_tag } from './shared/utils.js';
 import { mark_subtree_dynamic } from './shared/fragment.js';
 import { is_resolved_snippet } from './shared/snippets.js';
+import { ExpressionMetadata } from '../../nodes.js';
 
 /**
  * @param {AST.RenderTag} node
@@ -15,7 +16,8 @@ export function RenderTag(node, context) {
 
 	node.metadata.path = [...context.path];
 
-	const callee = unwrap_optional(node.expression).callee;
+	const expression = unwrap_optional(node.expression);
+	const callee = expression.callee;
 
 	const binding = callee.type === 'Identifier' ? context.state.scope.get(callee.name) : null;
 
@@ -52,5 +54,15 @@ export function RenderTag(node, context) {
 
 	mark_subtree_dynamic(context.path);
 
-	context.next({ ...context.state, render_tag: node });
+	context.visit(callee, { ...context.state, expression: node.metadata.expression });
+
+	for (const arg of expression.arguments) {
+		const metadata = new ExpressionMetadata();
+		node.metadata.arguments.push(metadata);
+
+		context.visit(arg, {
+			...context.state,
+			expression: metadata
+		});
+	}
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SnippetBlock.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SnippetBlock.js
index 2f6bbd785a..7618716ae5 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SnippetBlock.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SnippetBlock.js
@@ -25,24 +25,24 @@ export function SnippetBlock(node, context) {
 
 	context.next({ ...context.state, parent_element: null });
 
-	const can_hoist =
-		context.path.length === 1 &&
-		context.path[0].type === 'Fragment' &&
-		can_hoist_snippet(context.state.scope, context.state.scopes);
-
-	const name = node.expression.name;
-
-	if (can_hoist) {
-		const binding = /** @type {Binding} */ (context.state.scope.get(name));
-		context.state.analysis.module.scope.declarations.set(name, binding);
-	} else {
-		const undefined_export = context.state.analysis.undefined_exports.get(name);
-		if (undefined_export) {
-			e.snippet_invalid_export(undefined_export);
+	const is_top_level = context.path.length === 1 && context.path[0].type === 'Fragment';
+
+	if (is_top_level) {
+		const name = node.expression.name;
+
+		if (context.state.analysis.instance.scope.declarations.has(name)) {
+			e.declaration_duplicate(node.expression, name);
 		}
-	}
 
-	node.metadata.can_hoist = can_hoist;
+		node.metadata.can_hoist =
+			is_top_level && can_hoist_snippet(context.state.scope, context.state.scopes);
+
+		if (node.metadata.can_hoist) {
+			const name = node.expression.name;
+			const binding = /** @type {Binding} */ (context.state.scope.get(name));
+			context.state.analysis.module.scope.declarations.set(name, binding);
+		}
+	}
 
 	const { path } = context;
 	const parent = path.at(-2);
@@ -86,8 +86,13 @@ export function SnippetBlock(node, context) {
 function can_hoist_snippet(scope, scopes, visited = new Set()) {
 	for (const [reference] of scope.references) {
 		const binding = scope.get(reference);
+		if (!binding) continue;
+
+		if (binding.blocker) {
+			return false;
+		}
 
-		if (!binding || binding.scope.function_depth === 0) {
+		if (binding.scope.function_depth === 0) {
 			continue;
 		}
 
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..8f4036cf89 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/StyleDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/StyleDirective.js
@@ -23,6 +23,9 @@ export function StyleDirective(node, context) {
 			if (binding.kind !== 'normal') {
 				node.metadata.expression.has_state = true;
 			}
+			if (binding.blocker) {
+				node.metadata.expression.dependencies.add(binding);
+			}
 		}
 	} else {
 		context.next();
@@ -30,8 +33,7 @@ export function StyleDirective(node, context) {
 		for (const chunk of get_attribute_chunks(node.value)) {
 			if (chunk.type !== 'ExpressionTag') continue;
 
-			node.metadata.expression.has_state ||= chunk.metadata.expression.has_state;
-			node.metadata.expression.has_call ||= chunk.metadata.expression.has_call;
+			node.metadata.expression.merge(chunk.metadata.expression);
 		}
 	}
 }
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..e0014aa7b2 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteBoundary.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteBoundary.js
@@ -1,8 +1,9 @@
 /** @import { AST } from '#compiler' */
 /** @import { Context } from '../types' */
 import * as e from '../../../errors.js';
+import { mark_subtree_dynamic } from './shared/fragment.js';
 
-const valid = ['onerror', 'failed'];
+const valid = ['onerror', 'failed', 'pending'];
 
 /**
  * @param {AST.SvelteBoundary} node
@@ -23,5 +24,7 @@ export function SvelteBoundary(node, context) {
 		}
 	}
 
+	mark_subtree_dynamic(context.path);
+
 	context.next();
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteComponent.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteComponent.js
index 3c7630cb25..18500f6154 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteComponent.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteComponent.js
@@ -12,7 +12,7 @@ export function SvelteComponent(node, context) {
 		w.svelte_component_deprecated(node);
 	}
 
-	context.visit(node.expression);
+	context.visit(node.expression, { ...context.state, expression: node.metadata.expression });
 
 	visit_component(node, context);
 }
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/TaggedTemplateExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/TaggedTemplateExpression.js
index eacb8a342a..881ee5a85e 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/TaggedTemplateExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/TaggedTemplateExpression.js
@@ -1,4 +1,4 @@
-/** @import { TaggedTemplateExpression, VariableDeclarator } from 'estree' */
+/** @import { TaggedTemplateExpression } from 'estree' */
 /** @import { Context } from '../types' */
 import { is_pure } from './shared/utils.js';
 
@@ -12,12 +12,5 @@ export function TaggedTemplateExpression(node, context) {
 		context.state.expression.has_state = true;
 	}
 
-	if (node.tag.type === 'Identifier') {
-		const binding = context.state.scope.get(node.tag.name);
-
-		if (binding !== null) {
-			binding.is_called = true;
-		}
-	}
 	context.next();
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/TemplateElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/TemplateElement.js
new file mode 100644
index 0000000000..978042bbc5
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/TemplateElement.js
@@ -0,0 +1,12 @@
+/** @import { TemplateElement } from 'estree' */
+import * as w from '../../../warnings.js';
+import { regex_bidirectional_control_characters } from '../../patterns.js';
+
+/**
+ * @param {TemplateElement} node
+ */
+export function TemplateElement(node) {
+	if (regex_bidirectional_control_characters.test(node.value.cooked ?? '')) {
+		w.bidirectional_control_characters(node);
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js
index 363a111b7d..a03421e8dd 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js
@@ -1,20 +1,52 @@
 /** @import { AST } from '#compiler' */
 /** @import { Context } from '../types' */
 import { is_tag_valid_with_parent } from '../../../../html-tree-validation.js';
-import { regex_not_whitespace } from '../../patterns.js';
+import { regex_bidirectional_control_characters, regex_not_whitespace } from '../../patterns.js';
 import * as e from '../../../errors.js';
+import * as w from '../../../warnings.js';
+import { extract_svelte_ignore } from '../../../utils/extract_svelte_ignore.js';
 
 /**
  * @param {AST.Text} node
  * @param {Context} context
  */
 export function Text(node, context) {
-	const in_template = context.path.at(-1)?.type === 'Fragment';
+	const parent = /** @type {AST.SvelteNode} */ (context.path.at(-1));
 
-	if (in_template && context.state.parent_element && regex_not_whitespace.test(node.data)) {
+	if (
+		parent.type === 'Fragment' &&
+		context.state.parent_element &&
+		regex_not_whitespace.test(node.data)
+	) {
 		const message = is_tag_valid_with_parent('#text', context.state.parent_element);
 		if (message) {
 			e.node_invalid_placement(node, message);
 		}
 	}
+
+	regex_bidirectional_control_characters.lastIndex = 0;
+	for (const match of node.data.matchAll(regex_bidirectional_control_characters)) {
+		let is_ignored = false;
+
+		// if we have a svelte-ignore comment earlier in the text, bail
+		// (otherwise we can only use svelte-ignore on parent elements/blocks)
+		if (parent.type === 'Fragment') {
+			for (const child of parent.nodes) {
+				if (child === node) break;
+
+				if (child.type === 'Comment') {
+					is_ignored ||= extract_svelte_ignore(
+						child.start + 4,
+						child.data,
+						context.state.analysis.runes
+					).includes('bidirectional_control_characters');
+				}
+			}
+		}
+
+		if (!is_ignored) {
+			let start = match.index + node.start;
+			w.bidirectional_control_characters({ start, end: start + match[0].length });
+		}
+	}
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/TransitionDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/TransitionDirective.js
index c218f741c3..e50e28a04c 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/TransitionDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/TransitionDirective.js
@@ -1,5 +1,6 @@
 /** @import { AST } from '#compiler' */
 /** @import { Context } from '../types' */
+import * as e from '../../../errors.js';
 
 import { mark_subtree_dynamic } from './shared/fragment.js';
 
@@ -10,5 +11,9 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
 export function TransitionDirective(node, context) {
 	mark_subtree_dynamic(context.path);
 
-	context.next();
+	context.next({ ...context.state, expression: node.metadata.expression });
+
+	if (node.metadata.expression.has_await) {
+		e.illegal_await_expression(node);
+	}
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/UpdateExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/UpdateExpression.js
index 741effc67a..ed48e026ac 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/UpdateExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/UpdateExpression.js
@@ -8,7 +8,7 @@ import { validate_assignment } from './shared/utils.js';
  * @param {Context} context
  */
 export function UpdateExpression(node, context) {
-	validate_assignment(node, node.argument, context.state);
+	validate_assignment(node, node.argument, context);
 
 	if (context.state.reactive_statement) {
 		const id = node.argument.type === 'MemberExpression' ? object(node.argument) : node.argument;
@@ -21,5 +21,9 @@ export function UpdateExpression(node, context) {
 		}
 	}
 
+	if (context.state.expression) {
+		context.state.expression.has_assignment = true;
+	}
+
 	context.next();
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/UseDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/UseDirective.js
index 76706ad674..eb340382da 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/UseDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/UseDirective.js
@@ -1,6 +1,7 @@
 /** @import { AST } from '#compiler' */
 /** @import { Context } from '../types' */
 import { mark_subtree_dynamic } from './shared/fragment.js';
+import * as e from '../../../errors.js';
 
 /**
  * @param {AST.UseDirective} node
@@ -8,5 +9,10 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
  */
 export function UseDirective(node, context) {
 	mark_subtree_dynamic(context.path);
-	context.next();
+
+	context.next({ ...context.state, expression: node.metadata.expression });
+
+	if (node.metadata.expression.has_await) {
+		e.illegal_await_expression(node);
+	}
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js
index a7d08d315d..5cf231ad01 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js
@@ -4,8 +4,10 @@
 import { get_rune } from '../../scope.js';
 import { ensure_no_module_import_conflict, validate_identifier_name } from './shared/utils.js';
 import * as e from '../../../errors.js';
+import * as w from '../../../warnings.js';
 import { extract_paths } from '../../../utils/ast.js';
 import { equal } from '../../../utils/assert.js';
+import * as b from '#compiler/builders';
 
 /**
  * @param {VariableDeclarator} node
@@ -17,7 +19,7 @@ export function VariableDeclarator(node, context) {
 	if (context.state.analysis.runes) {
 		const init = node.init;
 		const rune = get_rune(init, context.state.scope);
-		const paths = extract_paths(node.id);
+		const { paths } = extract_paths(node.id, b.id('dummy'));
 
 		for (const path of paths) {
 			validate_identifier_name(context.state.scope.get(/** @type {Identifier} */ (path.node).name));
@@ -44,6 +46,21 @@ export function VariableDeclarator(node, context) {
 								: path.is_rest
 									? 'rest_prop'
 									: 'prop';
+				if (rune === '$props' && binding.kind === 'rest_prop' && node.id.type === 'ObjectPattern') {
+					const { properties } = node.id;
+					/** @type {string[]} */
+					const exclude_props = [];
+					for (const property of properties) {
+						if (property.type === 'RestElement') {
+							continue;
+						}
+						const key = /** @type {Identifier | Literal & { value: string | number }} */ (
+							property.key
+						);
+						exclude_props.push(key.type === 'Identifier' ? key.name : key.value.toString());
+					}
+					(binding.metadata ??= {}).exclude_props = exclude_props;
+				}
 			}
 		}
 
@@ -52,6 +69,19 @@ export function VariableDeclarator(node, context) {
 				e.props_invalid_identifier(node);
 			}
 
+			if (
+				context.state.analysis.custom_element &&
+				context.state.options.customElementOptions?.props == null
+			) {
+				let warn_on;
+				if (
+					node.id.type === 'Identifier' ||
+					(warn_on = node.id.properties.find((p) => p.type === 'RestElement')) != null
+				) {
+					w.custom_element_props_identifier(warn_on ?? node.id);
+				}
+			}
+
 			context.state.analysis.needs_props = true;
 
 			if (node.id.type === 'Identifier') {
@@ -116,5 +146,15 @@ export function VariableDeclarator(node, context) {
 		}
 	}
 
-	context.next();
+	if (node.init && get_rune(node.init, context.state.scope) === '$props') {
+		// prevent erroneous `state_referenced_locally` warnings on prop fallbacks
+		context.visit(node.id, {
+			...context.state,
+			function_depth: context.state.function_depth + 1
+		});
+
+		context.visit(node.init);
+	} else {
+		context.next();
+	}
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js
deleted file mode 100644
index a5ca8463a4..0000000000
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js
+++ /dev/null
@@ -1,1181 +0,0 @@
-/** @import { Context } from '../../types.js' */
-/** @import { AST } from '#compiler' */
-/** @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'))
-		);
-	})
-	.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;
-}
-
-/**
- * @param {AST.RegularElement | AST.SvelteElement} node
- * @param {Context} context
- */
-export function check_element(node, context) {
-	/** @type {Map<string, AST.Attribute>} */
-	const attribute_map = new Map();
-
-	/** @type {Set<string>} */
-	const handlers = new Set();
-
-	/** @type {AST.Attribute[]} */
-	const attributes = [];
-
-	const is_dynamic_element = node.type === 'SvelteElement';
-
-	let has_spread = false;
-	let has_contenteditable_attr = false;
-	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;
-				}
-			}
-		} else if (attribute.type === 'BindDirective' && is_content_editable_binding(attribute.name)) {
-			has_contenteditable_binding = true;
-		}
-	}
-
-	for (const attribute of node.attributes) {
-		if (attribute.type !== 'Attribute') continue;
-
-		const name = attribute.name.toLowerCase();
-		// aria-props
-		if (name.startsWith('aria-')) {
-			if (invisible_elements.includes(node.name)) {
-				// aria-unsupported-elements
-				w.a11y_aria_attributes(attribute, node.name);
-			}
-
-			const type = name.slice(5);
-			if (!aria_attributes.includes(type)) {
-				const match = fuzzymatch(type, aria_attributes);
-				w.a11y_unknown_aria_attribute(attribute, type, match);
-			}
-
-			if (name === 'aria-hidden' && regex_heading_tags.test(node.name)) {
-				w.a11y_hidden(attribute, node.name);
-			}
-
-			// aria-proptypes
-			let value = get_static_value(attribute);
-
-			const schema = aria.get(/** @type {ARIAProperty} */ (name));
-			if (schema !== undefined) {
-				validate_aria_attribute_value(attribute, /** @type {ARIAProperty} */ (name), schema, value);
-			}
-
-			// aria-activedescendant-has-tabindex
-			if (
-				name === 'aria-activedescendant' &&
-				!is_dynamic_element &&
-				!is_interactive_element(node.name, attribute_map) &&
-				!attribute_map.has('tabindex')
-			) {
-				w.a11y_aria_activedescendant_has_tabindex(attribute);
-			}
-		}
-
-		// aria-role
-		if (name === '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') {
-				for (const c_r of value.split(regex_whitespaces)) {
-					const current_role = /** @type {ARIARoleDefinitionKey} current_role */ (c_r);
-
-					if (current_role && is_abstract_role(current_role)) {
-						w.a11y_no_abstract_role(attribute, current_role);
-					} else if (current_role && !aria_roles.includes(current_role)) {
-						const match = fuzzymatch(current_role, aria_roles);
-						w.a11y_unknown_role(attribute, current_role, match);
-					}
-
-					// no-redundant-roles
-					if (
-						current_role === get_implicit_role(node.name, attribute_map) &&
-						// <ul role="list"> is ok because CSS list-style:none removes the semantics and this is a way to bring them back
-						!['ul', 'ol', 'li'].includes(node.name) &&
-						// <a role="link" /> is ok because without href the a tag doesn't have a role of link
-						!(node.name === 'a' && !attribute_map.has('href'))
-					) {
-						w.a11y_no_redundant_roles(attribute, current_role);
-					}
-
-					// Footers and headers are special cases, and should not have redundant roles unless they are the children of sections or articles.
-					const is_parent_section_or_article = is_parent(context.path, ['section', 'article']);
-					if (!is_parent_section_or_article) {
-						const has_nested_redundant_role =
-							current_role === a11y_nested_implicit_semantics.get(node.name);
-						if (has_nested_redundant_role) {
-							w.a11y_no_redundant_roles(attribute, current_role);
-						}
-					}
-
-					// role-has-required-aria-props
-					if (
-						!is_dynamic_element &&
-						!is_semantic_role_element(current_role, node.name, attribute_map)
-					) {
-						const role = roles_map.get(current_role);
-						if (role) {
-							const required_role_props = Object.keys(role.requiredProps);
-							const has_missing_props = required_role_props.some(
-								(prop) => !attributes.find((a) => a.name === prop)
-							);
-							if (has_missing_props) {
-								w.a11y_role_has_required_aria_props(
-									attribute,
-									current_role,
-									list(
-										required_role_props.map((v) => `"${v}"`),
-										'and'
-									)
-								);
-							}
-						}
-					}
-
-					// interactive-supports-focus
-					if (
-						!has_disabled_attribute(attribute_map) &&
-						!is_hidden_from_screen_reader(node.name, attribute_map) &&
-						!is_presentation_role(current_role) &&
-						is_interactive_roles(current_role) &&
-						is_static_element(node.name, attribute_map) &&
-						!attribute_map.get('tabindex')
-					) {
-						const has_interactive_handlers = [...handlers].some((handler) =>
-							a11y_interactive_handlers.includes(handler)
-						);
-						if (has_interactive_handlers) {
-							w.a11y_interactive_supports_focus(node, current_role);
-						}
-					}
-
-					// no-interactive-element-to-noninteractive-role
-					if (
-						is_interactive_element(node.name, attribute_map) &&
-						(is_non_interactive_roles(current_role) || is_presentation_role(current_role))
-					) {
-						w.a11y_no_interactive_element_to_noninteractive_role(node, node.name, current_role);
-					}
-
-					// no-noninteractive-element-to-interactive-role
-					if (
-						is_non_interactive_element(node.name, attribute_map) &&
-						is_interactive_roles(current_role) &&
-						!a11y_non_interactive_element_to_interactive_role_exceptions[node.name]?.includes(
-							current_role
-						)
-					) {
-						w.a11y_no_noninteractive_element_to_interactive_role(node, node.name, current_role);
-					}
-				}
-			}
-		}
-
-		// 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);
-			}
-		}
-	}
-
-	const role = attribute_map.get('role');
-	const role_static_value = /** @type {ARIARoleDefinitionKey} */ (get_static_text_value(role));
-
-	// click-events-have-key-events
-	if (handlers.has('click')) {
-		const is_non_presentation_role =
-			role_static_value !== null && !is_presentation_role(role_static_value);
-		if (
-			!is_dynamic_element &&
-			!is_hidden_from_screen_reader(node.name, attribute_map) &&
-			(!role || is_non_presentation_role) &&
-			!is_interactive_element(node.name, attribute_map) &&
-			!has_spread
-		) {
-			const has_key_event =
-				handlers.has('keydown') || handlers.has('keyup') || handlers.has('keypress');
-			if (!has_key_event) {
-				w.a11y_click_events_have_key_events(node);
-			}
-		}
-	}
-
-	const role_value = /** @type {ARIARoleDefinitionKey} */ (
-		role ? role_static_value : get_implicit_role(node.name, attribute_map)
-	);
-
-	// no-noninteractive-tabindex
-	if (
-		!is_dynamic_element &&
-		!is_interactive_element(node.name, attribute_map) &&
-		!is_interactive_roles(role_static_value)
-	) {
-		const tab_index = attribute_map.get('tabindex');
-		const tab_index_value = get_static_text_value(tab_index);
-		if (tab_index && (tab_index_value === null || Number(tab_index_value) >= 0)) {
-			w.a11y_no_noninteractive_tabindex(node);
-		}
-	}
-
-	// role-supports-aria-props
-	if (typeof role_value === 'string' && roles_map.has(role_value)) {
-		const { props } = /** @type {ARIARoleDefinition} */ (roles_map.get(role_value));
-		const invalid_aria_props = aria.keys().filter((attribute) => !(attribute in props));
-		const is_implicit = role_value && role === undefined;
-		for (const attr of attributes) {
-			if (invalid_aria_props.includes(/** @type {ARIAProperty} */ (attr.name))) {
-				if (is_implicit) {
-					w.a11y_role_supports_aria_props_implicit(attr, attr.name, role_value, node.name);
-				} else {
-					w.a11y_role_supports_aria_props(attr, attr.name, role_value);
-				}
-			}
-		}
-	}
-
-	// no-noninteractive-element-interactions
-	if (
-		!has_contenteditable_attr &&
-		!is_hidden_from_screen_reader(node.name, attribute_map) &&
-		!is_presentation_role(role_static_value) &&
-		((!is_interactive_element(node.name, attribute_map) &&
-			is_non_interactive_roles(role_static_value)) ||
-			(is_non_interactive_element(node.name, attribute_map) && !role))
-	) {
-		const has_interactive_handlers = [...handlers].some((handler) =>
-			a11y_recommended_interactive_handlers.includes(handler)
-		);
-		if (has_interactive_handlers) {
-			w.a11y_no_noninteractive_element_interactions(node, node.name);
-		}
-	}
-
-	// no-static-element-interactions
-	if (
-		(!role || role_static_value !== null) &&
-		!is_hidden_from_screen_reader(node.name, attribute_map) &&
-		!is_presentation_role(role_static_value) &&
-		!is_interactive_element(node.name, attribute_map) &&
-		!is_interactive_roles(role_static_value) &&
-		!is_non_interactive_element(node.name, attribute_map) &&
-		!is_non_interactive_roles(role_static_value) &&
-		!is_abstract_role(role_static_value)
-	) {
-		const interactive_handlers = [...handlers].filter((handler) =>
-			a11y_interactive_handlers.includes(handler)
-		);
-		if (interactive_handlers.length > 0) {
-			w.a11y_no_static_element_interactions(node, node.name, list(interactive_handlers));
-		}
-	}
-
-	if (handlers.has('mouseover') && !handlers.has('focus')) {
-		w.a11y_mouse_events_have_key_events(node, 'mouseover', 'focus');
-	}
-
-	if (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');
-
-	if (node.name === 'a' || node.name === 'button') {
-		const is_hidden = get_static_value(attribute_map.get('aria-hidden')) === 'true';
-
-		if (!is_hidden && !is_labelled && !has_content(node)) {
-			w.a11y_consider_explicit_label(node);
-		}
-	}
-
-	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']);
-			}
-		}
-	} 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 (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 (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) {
-			if (/\b(image|picture|photo)\b/i.test(alt_attribute)) {
-				w.a11y_img_redundant_alt(node);
-			}
-		}
-	}
-
-	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 (!attribute_map.has('for') && !has_input_child(node)) {
-			w.a11y_label_has_associated_control(node);
-		}
-	}
-
-	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') {
-			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);
-		}
-	}
-
-	if (node.name === 'figcaption') {
-		if (!is_parent(context.path, ['figure'])) {
-			w.a11y_figcaption_parent(node);
-		}
-	}
-
-	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]);
-		}
-	}
-
-	if (a11y_distracting_elements.includes(node.name)) {
-		// no-distracting-elements
-		w.a11y_distracting_elements(node, node.name);
-	}
-
-	// Check content
-	if (
-		!is_labelled &&
-		!has_contenteditable_binding &&
-		a11y_required_content.includes(node.name) &&
-		!has_content(node)
-	) {
-		w.a11y_missing_content(node, node.name);
-	}
-}
-
-/**
- * @param {AST.RegularElement | AST.SvelteElement} element
- */
-function has_content(element) {
-	for (const node of element.fragment.nodes) {
-		if (node.type === 'Text') {
-			if (node.data.trim() === '') {
-				continue;
-			}
-		}
-
-		if (node.type === 'RegularElement' || node.type === 'SvelteElement') {
-			if (
-				node.name === 'img' &&
-				node.attributes.some((node) => node.type === 'Attribute' && node.name === 'alt')
-			) {
-				return true;
-			}
-
-			if (!has_content(node)) {
-				continue;
-			}
-		}
-
-		// assume everything else has content — this will result in false positives
-		// (e.g. an empty `{#if ...}{/if}`) but that's probably fine
-		return true;
-	}
-}
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..49099c2cb1
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/constants.js
@@ -0,0 +1,334 @@
+/** @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',
+	// Pointer events
+	'pointerdown',
+	'pointerup',
+	'pointermove',
+	'pointerenter',
+	'pointerleave',
+	'pointerover',
+	'pointerout',
+	'pointercancel',
+	// Touch events
+	'touchstart',
+	'touchend',
+	'touchmove',
+	'touchcancel'
+];
+
+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'],
+	menu: ['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/index.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/index.js
new file mode 100644
index 0000000000..a6e801cf5a
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/index.js
@@ -0,0 +1,954 @@
+/** @import { AST } from '#compiler' */
+/** @import { Context } from '../../../types.js' */
+/** @import { ARIARoleDefinitionKey, ARIARoleRelationConcept, ARIAProperty, ARIAPropertyDefinition, ARIARoleDefinition } from 'aria-query' */
+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
+ * @param {Context} context
+ */
+export function check_element(node, context) {
+	/** @type {Map<string, AST.Attribute>} */
+	const attribute_map = new Map();
+
+	/** @type {Set<string>} */
+	const handlers = new Set();
+
+	/** @type {AST.Attribute[]} */
+	const attributes = [];
+
+	const is_dynamic_element = node.type === 'SvelteElement';
+
+	let has_spread = false;
+	let has_contenteditable_attr = false;
+	let has_contenteditable_binding = false;
+
+	for (const attribute of node.attributes) {
+		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;
+			}
+		}
+	}
+
+	const interactivity = element_interactivity(node.name, attribute_map);
+	const is_interactive = interactivity === ElementInteractivity.Interactive;
+	const is_non_interactive = interactivity === ElementInteractivity.NonInteractive;
+	const is_static = interactivity === ElementInteractivity.Static;
+
+	for (const attribute of node.attributes) {
+		if (attribute.type !== 'Attribute') continue;
+
+		const name = attribute.name.toLowerCase();
+		// aria-props
+		if (name.startsWith('aria-')) {
+			if (invisible_elements.includes(node.name)) {
+				// aria-unsupported-elements
+				w.a11y_aria_attributes(attribute, node.name);
+			}
+
+			const type = name.slice(5);
+			if (!aria_attributes.includes(type)) {
+				const match = fuzzymatch(type, aria_attributes);
+				w.a11y_unknown_aria_attribute(attribute, type, match);
+			}
+
+			if (name === 'aria-hidden' && regex_heading_tags.test(node.name)) {
+				w.a11y_hidden(attribute, node.name);
+			}
+
+			// aria-proptypes
+			let value = get_static_value(attribute);
+
+			const schema = aria.get(/** @type {ARIAProperty} */ (name));
+			if (schema !== undefined) {
+				validate_aria_attribute_value(attribute, /** @type {ARIAProperty} */ (name), schema, value);
+			}
+
+			// aria-activedescendant-has-tabindex
+			if (
+				name === 'aria-activedescendant' &&
+				!is_dynamic_element &&
+				!is_interactive &&
+				!attribute_map.has('tabindex') &&
+				!has_spread
+			) {
+				w.a11y_aria_activedescendant_has_tabindex(attribute);
+			}
+		}
+
+		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') {
+					break;
+				}
+				for (const c_r of value.split(regex_whitespaces)) {
+					const current_role = /** @type {ARIARoleDefinitionKey} current_role */ (c_r);
+
+					if (current_role && is_abstract_role(current_role)) {
+						w.a11y_no_abstract_role(attribute, current_role);
+					} else if (current_role && !aria_roles.includes(current_role)) {
+						const match = fuzzymatch(current_role, aria_roles);
+						w.a11y_unknown_role(attribute, current_role, match);
+					}
+
+					// no-redundant-roles
+					if (
+						current_role === get_implicit_role(node.name, attribute_map) &&
+						// <ul role="list"> is ok because CSS list-style:none removes the semantics and this is a way to bring them back
+						!['ul', 'ol', 'li', 'menu'].includes(node.name) &&
+						// <a role="link" /> is ok because without href the a tag doesn't have a role of link
+						!(node.name === 'a' && !attribute_map.has('href'))
+					) {
+						w.a11y_no_redundant_roles(attribute, current_role);
+					}
+
+					// Footers and headers are special cases, and should not have redundant roles unless they are the children of sections or articles.
+					const is_parent_section_or_article = is_parent(context.path, ['section', 'article']);
+					if (!is_parent_section_or_article) {
+						const has_nested_redundant_role =
+							current_role === a11y_nested_implicit_semantics.get(node.name);
+						if (has_nested_redundant_role) {
+							w.a11y_no_redundant_roles(attribute, current_role);
+						}
+					}
+
+					// role-has-required-aria-props
+					if (
+						!is_dynamic_element &&
+						!is_semantic_role_element(current_role, node.name, attribute_map)
+					) {
+						const role = roles_map.get(current_role);
+						if (role) {
+							const required_role_props = Object.keys(role.requiredProps);
+							const has_missing_props =
+								!has_spread &&
+								required_role_props.some((prop) => !attributes.find((a) => a.name === prop));
+							if (has_missing_props) {
+								w.a11y_role_has_required_aria_props(
+									attribute,
+									current_role,
+									list(
+										required_role_props.map((v) => `"${v}"`),
+										'and'
+									)
+								);
+							}
+						}
+					}
+
+					// interactive-supports-focus
+					if (
+						!has_spread &&
+						!has_disabled_attribute(attribute_map) &&
+						!is_hidden_from_screen_reader(node.name, attribute_map) &&
+						!is_presentation_role(current_role) &&
+						is_interactive_roles(current_role) &&
+						is_static &&
+						!attribute_map.get('tabindex')
+					) {
+						const has_interactive_handlers = [...handlers].some((handler) =>
+							a11y_interactive_handlers.includes(handler)
+						);
+						if (has_interactive_handlers) {
+							w.a11y_interactive_supports_focus(node, current_role);
+						}
+					}
+
+					// no-interactive-element-to-noninteractive-role
+					if (
+						!has_spread &&
+						is_interactive &&
+						(is_non_interactive_roles(current_role) || is_presentation_role(current_role))
+					) {
+						w.a11y_no_interactive_element_to_noninteractive_role(node, node.name, current_role);
+					}
+
+					// no-noninteractive-element-to-interactive-role
+					if (
+						!has_spread &&
+						is_non_interactive &&
+						is_interactive_roles(current_role) &&
+						!a11y_non_interactive_element_to_interactive_role_exceptions[node.name]?.includes(
+							current_role
+						)
+					) {
+						w.a11y_no_noninteractive_element_to_interactive_role(node, node.name, current_role);
+					}
+				}
+				break;
+			}
+			// 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;
+			}
+		}
+	}
+
+	const role = attribute_map.get('role');
+	const role_static_value = /** @type {ARIARoleDefinitionKey} */ (get_static_text_value(role));
+
+	// click-events-have-key-events
+	if (handlers.has('click')) {
+		const is_non_presentation_role =
+			role_static_value !== null && !is_presentation_role(role_static_value);
+		if (
+			!is_dynamic_element &&
+			!is_hidden_from_screen_reader(node.name, attribute_map) &&
+			(!role || is_non_presentation_role) &&
+			!is_interactive &&
+			!has_spread
+		) {
+			const has_key_event =
+				handlers.has('keydown') || handlers.has('keyup') || handlers.has('keypress');
+			if (!has_key_event) {
+				w.a11y_click_events_have_key_events(node, node.name);
+			}
+		}
+	}
+
+	const role_value = /** @type {ARIARoleDefinitionKey} */ (
+		role ? role_static_value : get_implicit_role(node.name, attribute_map)
+	);
+
+	// no-noninteractive-tabindex
+	if (!is_dynamic_element && !is_interactive && !is_interactive_roles(role_static_value)) {
+		const tab_index = attribute_map.get('tabindex');
+		const tab_index_value = get_static_text_value(tab_index);
+		if (tab_index && (tab_index_value === null || Number(tab_index_value) >= 0)) {
+			w.a11y_no_noninteractive_tabindex(node);
+		}
+	}
+
+	// role-supports-aria-props
+	if (typeof role_value === 'string' && roles_map.has(role_value)) {
+		const { props } = /** @type {ARIARoleDefinition} */ (roles_map.get(role_value));
+		const invalid_aria_props = aria.keys().filter((attribute) => !(attribute in props));
+		const is_implicit = role_value && role === undefined;
+		for (const attr of attributes) {
+			if (invalid_aria_props.includes(/** @type {ARIAProperty} */ (attr.name))) {
+				if (is_implicit) {
+					w.a11y_role_supports_aria_props_implicit(attr, attr.name, role_value, node.name);
+				} else {
+					w.a11y_role_supports_aria_props(attr, attr.name, role_value);
+				}
+			}
+		}
+	}
+
+	// no-noninteractive-element-interactions
+	if (
+		!has_spread &&
+		!has_contenteditable_attr &&
+		!is_hidden_from_screen_reader(node.name, attribute_map) &&
+		!is_presentation_role(role_static_value) &&
+		((!is_interactive && is_non_interactive_roles(role_static_value)) ||
+			(is_non_interactive && !role))
+	) {
+		const has_interactive_handlers = [...handlers].some((handler) =>
+			a11y_recommended_interactive_handlers.includes(handler)
+		);
+		if (has_interactive_handlers) {
+			w.a11y_no_noninteractive_element_interactions(node, node.name);
+		}
+	}
+
+	// no-static-element-interactions
+	if (
+		!has_spread &&
+		(!role || role_static_value !== null) &&
+		!is_hidden_from_screen_reader(node.name, attribute_map) &&
+		!is_presentation_role(role_static_value) &&
+		!is_interactive &&
+		!is_interactive_roles(role_static_value) &&
+		!is_non_interactive &&
+		!is_non_interactive_roles(role_static_value) &&
+		!is_abstract_role(role_static_value)
+	) {
+		const interactive_handlers = [...handlers].filter((handler) =>
+			a11y_interactive_handlers.includes(handler)
+		);
+		if (interactive_handlers.length > 0) {
+			w.a11y_no_static_element_interactions(node, node.name, list(interactive_handlers));
+		}
+	}
+
+	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') ||
+		attribute_map.has('title');
+
+	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;
+			}
+
+			if (!attribute_map.has('src')) {
+				// don't warn about missing captions if `<video>` has no `src` —
+				// could e.g. be playing a MediaStream
+				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 {typeof ElementInteractivity[keyof typeof 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 {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
+	}
+	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;
+}
+
+/** @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);
+	}
+}
+
+/**
+ * @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);
+}
+
+/**
+ * @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;
+}
+
+/**
+ * @param {AST.RegularElement | AST.SvelteElement} element
+ */
+function has_content(element) {
+	for (const node of element.fragment.nodes) {
+		if (node.type === 'Text') {
+			if (node.data.trim() === '') {
+				continue;
+			}
+		}
+
+		if (node.type === 'RegularElement' || node.type === 'SvelteElement') {
+			if (node.attributes.some((a) => a.type === 'Attribute' && a.name === 'popover')) {
+				continue;
+			}
+
+			if (
+				node.name === 'img' &&
+				node.attributes.some((node) => node.type === 'Attribute' && node.name === 'alt')
+			) {
+				return true;
+			}
+
+			if (node.name === 'selectedcontent') {
+				return true;
+			}
+
+			if (!has_content(node)) {
+				continue;
+			}
+		}
+
+		// assume everything else has content — this will result in false positives
+		// (e.g. an empty `{#if ...}{/if}`) but that's probably fine
+		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/2-analyze/visitors/shared/attribute.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/attribute.js
index 198e464ac7..19bd7b6e54 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/attribute.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/attribute.js
@@ -80,40 +80,42 @@ export function validate_slot_attribute(context, attribute, is_component = false
 	}
 
 	if (owner) {
-		if (!is_text_attribute(attribute)) {
-			e.slot_attribute_invalid(attribute);
-		}
-
 		if (
 			owner.type === 'Component' ||
 			owner.type === 'SvelteComponent' ||
 			owner.type === 'SvelteSelf'
 		) {
 			if (owner !== parent) {
-				e.slot_attribute_invalid_placement(attribute);
-			}
+				if (!is_component) {
+					e.slot_attribute_invalid_placement(attribute);
+				}
+			} else {
+				if (!is_text_attribute(attribute)) {
+					e.slot_attribute_invalid(attribute);
+				}
 
-			const name = attribute.value[0].data;
+				const name = attribute.value[0].data;
 
-			if (context.state.component_slots.has(name)) {
-				e.slot_attribute_duplicate(attribute, name, owner.name);
-			}
-
-			context.state.component_slots.add(name);
+				if (context.state.component_slots.has(name)) {
+					e.slot_attribute_duplicate(attribute, name, owner.name);
+				}
 
-			if (name === 'default') {
-				for (const node of owner.fragment.nodes) {
-					if (node.type === 'Text' && regex_only_whitespaces.test(node.data)) {
-						continue;
-					}
+				context.state.component_slots.add(name);
 
-					if (node.type === 'RegularElement' || node.type === 'SvelteFragment') {
-						if (node.attributes.some((a) => a.type === 'Attribute' && a.name === 'slot')) {
+				if (name === 'default') {
+					for (const node of owner.fragment.nodes) {
+						if (node.type === 'Text' && regex_only_whitespaces.test(node.data)) {
 							continue;
 						}
-					}
 
-					e.slot_default_duplicate(node);
+						if (node.type === 'RegularElement' || node.type === 'SvelteFragment') {
+							if (node.attributes.some((a) => a.type === 'Attribute' && a.name === 'slot')) {
+								continue;
+							}
+						}
+
+						e.slot_default_duplicate(node);
+					}
 				}
 			}
 		}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js
index 04bf3d2ff3..6d09398fb7 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js
@@ -1,3 +1,4 @@
+/** @import { Expression } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { AnalysisState, Context } from '../../types' */
 import * as e from '../../../../errors.js';
@@ -74,7 +75,8 @@ export function visit_component(node, context) {
 			attribute.type !== 'SpreadAttribute' &&
 			attribute.type !== 'LetDirective' &&
 			attribute.type !== 'OnDirective' &&
-			attribute.type !== 'BindDirective'
+			attribute.type !== 'BindDirective' &&
+			attribute.type !== 'AttachTag'
 		) {
 			e.component_invalid_directive(attribute);
 		}
@@ -91,15 +93,10 @@ export function visit_component(node, context) {
 				validate_attribute(attribute, node);
 
 				if (is_expression_attribute(attribute)) {
-					const expression = get_attribute_expression(attribute);
-					if (expression.type === 'SequenceExpression') {
-						let i = /** @type {number} */ (expression.start);
-						while (--i > 0) {
-							const char = context.state.analysis.source[i];
-							if (char === '(') break; // parenthesized sequence expressions are ok
-							if (char === '{') e.attribute_invalid_sequence_expression(expression);
-						}
-					}
+					disallow_unparenthesized_sequences(
+						get_attribute_expression(attribute),
+						context.state.analysis.source
+					);
 				}
 			}
 
@@ -113,6 +110,10 @@ export function visit_component(node, context) {
 		if (attribute.type === 'BindDirective' && attribute.name !== 'this') {
 			context.state.analysis.uses_component_bindings = true;
 		}
+
+		if (attribute.type === 'AttachTag') {
+			disallow_unparenthesized_sequences(attribute.expression, context.state.analysis.source);
+		}
 	}
 
 	// If the component has a slot attribute — `<Foo slot="whatever" .../>` —
@@ -144,6 +145,7 @@ export function visit_component(node, context) {
 		if (slot_name !== 'default') comments = [];
 	}
 
+	/** @type {Set<string>} */
 	const component_slots = new Set();
 
 	for (const slot_name in nodes) {
@@ -158,3 +160,18 @@ export function visit_component(node, context) {
 		context.visit({ ...node.fragment, nodes: nodes[slot_name] }, state);
 	}
 }
+
+/**
+ * @param {Expression} expression
+ * @param {string} source
+ */
+function disallow_unparenthesized_sequences(expression, source) {
+	if (expression.type === 'SequenceExpression') {
+		let i = /** @type {number} */ (expression.start);
+		while (--i > 0) {
+			const char = source[i];
+			if (char === '(') break; // parenthesized sequence expressions are ok
+			if (char === '{') e.attribute_invalid_sequence_expression(expression);
+		}
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/function.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/function.js
index c6151992bf..7bdb2243f2 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/function.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/function.js
@@ -6,15 +6,19 @@
  * @param {Context} context
  */
 export function visit_function(node, context) {
-	// TODO retire this in favour of a more general solution based on bindings
-	node.metadata = {
-		hoisted: false,
-		hoisted_params: [],
-		scope: context.state.scope
-	};
+	if (context.state.expression) {
+		for (const [name] of context.state.scope.references) {
+			const binding = context.state.scope.get(name);
+
+			if (binding && binding.scope !== context.state.scope) {
+				context.state.expression.references.add(binding);
+			}
+		}
+	}
 
 	context.next({
 		...context.state,
-		function_depth: context.state.function_depth + 1
+		function_depth: context.state.function_depth + 1,
+		expression: null
 	});
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
index e265637c40..35116d715a 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
@@ -1,28 +1,32 @@
-/** @import { AssignmentExpression, Expression, Literal, Node, Pattern, PrivateIdentifier, Super, UpdateExpression, VariableDeclarator } from 'estree' */
+/** @import { AssignmentExpression, Expression, Literal, Node, Pattern, Super, UpdateExpression, VariableDeclarator } from 'estree' */
 /** @import { AST, Binding } from '#compiler' */
 /** @import { AnalysisState, Context } from '../../types' */
 /** @import { Scope } from '../../../scope' */
 /** @import { NodeLike } from '../../../../errors.js' */
 import * as e from '../../../../errors.js';
-import { extract_identifiers } from '../../../../utils/ast.js';
+import { extract_identifiers, get_parent } from '../../../../utils/ast.js';
 import * as w from '../../../../warnings.js';
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import { get_rune } from '../../../scope.js';
+import { get_name } from '../../../nodes.js';
 
 /**
- * @param {AssignmentExpression | UpdateExpression} node
+ * @param {AssignmentExpression | UpdateExpression | AST.BindDirective} node
  * @param {Pattern | Expression} argument
- * @param {AnalysisState} state
+ * @param {Context} context
  */
-export function validate_assignment(node, argument, state) {
-	validate_no_const_assignment(node, argument, state.scope, false);
+export function validate_assignment(node, argument, context) {
+	validate_no_const_assignment(node, argument, context.state.scope, node.type === 'BindDirective');
 
 	if (argument.type === 'Identifier') {
-		const binding = state.scope.get(argument.name);
-
-		if (state.analysis.runes) {
-			if (binding?.kind === 'derived') {
-				e.constant_assignment(node, 'derived state');
+		const binding = context.state.scope.get(argument.name);
+
+		if (context.state.analysis.runes) {
+			if (
+				context.state.analysis.props_id != null &&
+				binding?.node === context.state.analysis.props_id
+			) {
+				e.constant_assignment(node, '$props.id()');
 			}
 
 			if (binding?.kind === 'each') {
@@ -35,19 +39,38 @@ export function validate_assignment(node, argument, state) {
 		}
 	}
 
-	let object = /** @type {Expression | Super} */ (argument);
-
-	/** @type {Expression | PrivateIdentifier | null} */
-	let property = null;
-
-	while (object.type === 'MemberExpression') {
-		property = object.property;
-		object = object.object;
-	}
-
-	if (object.type === 'ThisExpression' && property?.type === 'PrivateIdentifier') {
-		if (state.private_derived_state.includes(property.name)) {
-			e.constant_assignment(node, 'derived state');
+	if (argument.type === 'MemberExpression' && argument.object.type === 'ThisExpression') {
+		const name =
+			argument.computed && argument.property.type !== 'Literal'
+				? null
+				: get_name(argument.property);
+
+		const field = name !== null && context.state.state_fields?.get(name);
+
+		// check we're not assigning to a state field before its declaration in the constructor
+		if (field && field.node.type === 'AssignmentExpression' && node !== field.node) {
+			let i = context.path.length;
+			while (i--) {
+				const parent = context.path[i];
+
+				if (
+					parent.type === 'FunctionDeclaration' ||
+					parent.type === 'FunctionExpression' ||
+					parent.type === 'ArrowFunctionExpression'
+				) {
+					const grandparent = get_parent(context.path, i - 1);
+
+					if (
+						grandparent.type === 'MethodDefinition' &&
+						grandparent.kind === 'constructor' &&
+						/** @type {number} */ (node.start) < /** @type {number} */ (field.node.start)
+					) {
+						e.state_field_invalid_assignment(node);
+					}
+
+					break;
+				}
+			}
 		}
 	}
 }
@@ -74,7 +97,6 @@ export function validate_no_const_assignment(node, argument, scope, is_binding)
 	} else if (argument.type === 'Identifier') {
 		const binding = scope.get(argument.name);
 		if (
-			binding?.kind === 'derived' ||
 			binding?.declaration_kind === 'import' ||
 			(binding?.declaration_kind === 'const' && binding.kind !== 'each')
 		) {
@@ -89,12 +111,7 @@ export function validate_no_const_assignment(node, argument, scope, is_binding)
 			// );
 
 			// TODO have a more specific error message for assignments to things like `{:then foo}`
-			const thing =
-				binding.declaration_kind === 'import'
-					? 'import'
-					: binding.kind === 'derived'
-						? 'derived state'
-						: 'constant';
+			const thing = binding.declaration_kind === 'import' ? 'import' : 'constant';
 
 			if (is_binding) {
 				e.constant_binding(node, thing);
@@ -144,7 +161,6 @@ export function ensure_no_module_import_conflict(node, state) {
 			state.scope === state.analysis.instance.scope &&
 			state.analysis.module.scope.get(id.name)?.declaration_kind === 'import'
 		) {
-			// TODO fix the message here
 			e.declaration_duplicate_module_import(node.id);
 		}
 	}
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 1e72f32fb9..3e8bd9e0bd 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
@@ -3,8 +3,8 @@
 /** @import { ComponentAnalysis, Analysis } from '../../types' */
 /** @import { Visitors, ComponentClientTransformState, ClientTransformState } from './types' */
 import { walk } from 'zimmerframe';
-import * as b from '../../../utils/builders.js';
-import { build_getter, is_state_source } from './utils.js';
+import * as b from '#compiler/builders';
+import { build_getter, get_transform } from './utils.js';
 import { render_stylesheet } from '../css/index.js';
 import { dev, filename } from '../../../state.js';
 import { AnimateDirective } from './visitors/AnimateDirective.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';
@@ -21,17 +22,18 @@ import { ClassBody } from './visitors/ClassBody.js';
 import { Comment } from './visitors/Comment.js';
 import { Component } from './visitors/Component.js';
 import { ConstTag } from './visitors/ConstTag.js';
+import { DeclarationTag } from './visitors/DeclarationTag.js';
 import { DebugTag } from './visitors/DebugTag.js';
 import { EachBlock } from './visitors/EachBlock.js';
 import { ExportNamedDeclaration } from './visitors/ExportNamedDeclaration.js';
 import { ExpressionStatement } from './visitors/ExpressionStatement.js';
+import { ForOfStatement } from './visitors/ForOfStatement.js';
 import { Fragment } from './visitors/Fragment.js';
 import { FunctionDeclaration } from './visitors/FunctionDeclaration.js';
 import { FunctionExpression } from './visitors/FunctionExpression.js';
 import { HtmlTag } from './visitors/HtmlTag.js';
 import { Identifier } from './visitors/Identifier.js';
 import { IfBlock } from './visitors/IfBlock.js';
-import { ImportDeclaration } from './visitors/ImportDeclaration.js';
 import { KeyBlock } from './visitors/KeyBlock.js';
 import { LabeledStatement } from './visitors/LabeledStatement.js';
 import { LetDirective } from './visitors/LetDirective.js';
@@ -57,6 +59,7 @@ import { TitleElement } from './visitors/TitleElement.js';
 import { TransitionDirective } from './visitors/TransitionDirective.js';
 import { UpdateExpression } from './visitors/UpdateExpression.js';
 import { UseDirective } from './visitors/UseDirective.js';
+import { AttachTag } from './visitors/AttachTag.js';
 import { VariableDeclaration } from './visitors/VariableDeclaration.js';
 
 /** @type {Visitors} */
@@ -65,20 +68,7 @@ const visitors = {
 		const scope = state.scopes.get(node);
 
 		if (scope && scope !== state.scope) {
-			const transform = { ...state.transform };
-
-			for (const [name, binding] of scope.declarations) {
-				if (
-					binding.kind === 'normal' ||
-					// Reads of `$state(...)` declarations are not
-					// transformed if they are never reassigned
-					(binding.kind === 'state' && !is_state_source(binding, state.analysis))
-				) {
-					delete transform[name];
-				}
-			}
-
-			next({ ...state, transform, scope });
+			next({ ...state, transform: get_transform(scope, state), scope });
 		} else {
 			next();
 		}
@@ -88,6 +78,7 @@ const visitors = {
 	AssignmentExpression,
 	Attribute,
 	AwaitBlock,
+	AwaitExpression,
 	BinaryExpression,
 	BindDirective,
 	BlockStatement,
@@ -97,17 +88,18 @@ const visitors = {
 	Comment,
 	Component,
 	ConstTag,
+	DeclarationTag,
 	DebugTag,
 	EachBlock,
 	ExportNamedDeclaration,
 	ExpressionStatement,
+	ForOfStatement,
 	Fragment,
 	FunctionDeclaration,
 	FunctionExpression,
 	HtmlTag,
 	Identifier,
 	IfBlock,
-	ImportDeclaration,
 	KeyBlock,
 	LabeledStatement,
 	LetDirective,
@@ -133,6 +125,7 @@ const visitors = {
 	TransitionDirective,
 	UpdateExpression,
 	UseDirective,
+	AttachTag,
 	VariableDeclaration
 };
 
@@ -149,34 +142,33 @@ export function client_component(analysis, options) {
 		scope: analysis.module.scope,
 		scopes: analysis.module.scopes,
 		is_instance: false,
-		hoisted: [b.import_all('$', 'svelte/internal/client')],
+		hoisted: [b.import_all('$', 'svelte/internal/client'), ...analysis.instance_body.hoisted],
+		templates: new Map(),
 		node: /** @type {any} */ (null), // populated by the root node
 		legacy_reactive_imports: [],
 		legacy_reactive_statements: new Map(),
 		metadata: {
-			context: {
-				template_needs_import_node: false,
-				template_contains_script_tag: false
-			},
 			namespace: options.namespace,
 			bound_contenteditable: false
 		},
 		events: new Set(),
 		preserve_whitespace: options.preserveWhitespace,
-		public_state: new Map(),
-		private_state: new Map(),
+		state_fields: new Map(),
 		transform: {},
 		in_constructor: false,
 		instance_level_snippets: [],
 		module_level_snippets: [],
+		is_standalone: false,
 
 		// these are set inside the `Fragment` visitor, and cannot be used until then
-		before_init: /** @type {any} */ (null),
 		init: /** @type {any} */ (null),
+		consts: /** @type {any} */ (null),
+		snippets: /** @type {any} */ (null),
+		let_directives: /** @type {any} */ (null),
 		update: /** @type {any} */ (null),
 		after_update: /** @type {any} */ (null),
 		template: /** @type {any} */ (null),
-		locations: /** @type {any} */ (null)
+		memoizer: /** @type {any} */ (null)
 	};
 
 	const module = /** @type {ESTree.Program} */ (
@@ -212,19 +204,29 @@ 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 = [];
 
+	let needs_store_cleanup = false;
+
 	for (const [name, binding] of analysis.instance.scope.declarations) {
 		if (binding.kind === 'legacy_reactive') {
 			legacy_reactive_declarations.push(
-				b.const(name, b.call('$.mutable_state', undefined, analysis.immutable ? b.true : undefined))
+				b.const(
+					name,
+					b.call('$.mutable_source', undefined, analysis.immutable ? b.true : undefined)
+				)
 			);
 		}
 		if (binding.kind === 'store_sub') {
 			if (store_setup.length === 0) {
-				store_setup.push(b.const('$$stores', b.call('$.setup_stores')));
+				needs_store_cleanup = true;
+				store_init = b.const(
+					b.array_pattern([b.id('$$stores'), b.id('$$cleanup')]),
+					b.call('$.setup_stores')
+				);
 			}
 
 			// We're creating an arrow function that gets the store value which minifies better for two or more references
@@ -301,28 +303,6 @@ export function client_component(analysis, options) {
 			(binding.kind === 'prop' || binding.kind === 'bindable_prop') && !name.startsWith('$$')
 	);
 
-	if (dev && analysis.runes) {
-		const exports = analysis.exports.map(({ name, alias }) => b.literal(alias ?? name));
-		/** @type {ESTree.Literal[]} */
-		const bindable = [];
-		for (const [name, binding] of properties) {
-			if (binding.kind === 'bindable_prop') {
-				bindable.push(b.literal(binding.prop_alias ?? name));
-			}
-		}
-		instance.body.unshift(
-			b.stmt(
-				b.call(
-					'$.validate_prop_bindings',
-					b.id('$$props'),
-					b.array(bindable),
-					b.array(exports),
-					b.id(`${analysis.name}`)
-				)
-			)
-		);
-	}
-
 	if (analysis.accessors) {
 		for (const [name, binding] of properties) {
 			const key = binding.prop_alias ?? name;
@@ -331,7 +311,7 @@ export function client_component(analysis, options) {
 
 			const setter = b.set(key, [
 				b.stmt(b.call(b.id(name), b.id('$$value'))),
-				b.stmt(b.call('$.flush_sync'))
+				b.stmt(b.call('$.flush'))
 			]);
 
 			if (analysis.runes && binding.initial) {
@@ -364,24 +344,57 @@ export function client_component(analysis, options) {
 			)
 		);
 	} else if (dev) {
-		component_returned_object.push(b.spread(b.call(b.id('$.legacy_api'))));
+		component_returned_object.unshift(b.spread(b.call(b.id('$.legacy_api'))));
 	}
 
 	const push_args = [b.id('$$props'), b.literal(analysis.runes)];
 	if (dev) push_args.push(b.id(analysis.name));
 
-	const component_block = b.block([
-		...store_setup,
+	let component_block = b.block([
+		store_init,
 		...legacy_reactive_declarations,
-		...group_binding_declarations,
-		...state.instance_level_snippets,
-		.../** @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)
+		...group_binding_declarations
 	]);
 
+	const should_inject_context =
+		dev ||
+		analysis.needs_context ||
+		analysis.reactive_statements.size > 0 ||
+		component_returned_object.length > 0;
+
+	component_block.body.push(
+		...state.instance_level_snippets,
+		.../** @type {ESTree.Statement[]} */ (instance.body)
+	);
+
+	if (should_inject_context && component_returned_object.length > 0) {
+		component_block.body.push(b.var('$$exports', b.object(component_returned_object)));
+	}
+	component_block.body.unshift(...store_setup);
+
+	if (!analysis.runes && analysis.needs_context) {
+		component_block.body.push(b.stmt(b.call('$.init', analysis.immutable ? b.true : undefined)));
+	}
+
+	component_block.body.push(.../** @type {ESTree.Statement[]} */ (template.body));
+
+	if (analysis.needs_mutation_validation) {
+		component_block.body.unshift(
+			b.var('$$ownership_validator', b.call('$.create_ownership_validator', 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;
+
+	// trick esrap into including comments
+	component_block.loc = instance.loc;
+
 	if (!analysis.runes) {
 		// Bind static exports to props so that people can access them with bind:x
 		for (const { name, alias } of analysis.exports) {
@@ -409,20 +422,29 @@ export function client_component(analysis, options) {
 		);
 	}
 
-	const should_inject_context =
-		dev ||
-		analysis.needs_context ||
-		analysis.reactive_statements.size > 0 ||
-		component_returned_object.length > 0;
-
+	// we want the cleanup function for the stores to run as the very last thing
+	// so that it can effectively clean up the store subscription even after the user effects runs
 	if (should_inject_context) {
 		component_block.body.unshift(b.stmt(b.call('$.push', ...push_args)));
 
-		component_block.body.push(
-			component_returned_object.length > 0
-				? b.return(b.call('$.pop', b.object(component_returned_object)))
-				: b.stmt(b.call('$.pop'))
-		);
+		let to_push;
+
+		if (component_returned_object.length > 0) {
+			let pop_call = b.call('$.pop', b.id('$$exports'));
+			to_push = needs_store_cleanup ? b.var('$$pop', pop_call) : b.return(pop_call);
+		} else {
+			to_push = b.stmt(b.call('$.pop'));
+		}
+
+		component_block.body.push(to_push);
+	}
+
+	if (needs_store_cleanup) {
+		component_block.body.push(b.stmt(b.call('$$cleanup')));
+
+		if (component_returned_object.length > 0) {
+			component_block.body.push(b.return(b.id('$$pop')));
+		}
 	}
 
 	if (analysis.uses_rest_props) {
@@ -466,14 +488,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[]} */
@@ -499,14 +513,9 @@ export function client_component(analysis, options) {
 
 	if (options.hmr) {
 		const id = b.id(analysis.name);
-		const HMR = b.id('$.HMR');
-
-		const existing = b.member(id, HMR, true);
-		const incoming = b.member(b.id('module.default'), HMR, true);
 
 		const accept_fn_body = [
-			b.stmt(b.assignment('=', b.member(incoming, 'source'), b.member(existing, 'source'))),
-			b.stmt(b.call('$.set', b.member(existing, 'source'), b.member(incoming, 'original')))
+			b.stmt(b.call(b.member(b.member(id, b.id('$.HMR'), true), 'update'), b.id('module.default')))
 		];
 
 		if (analysis.css.hash) {
@@ -515,8 +524,7 @@ export function client_component(analysis, options) {
 		}
 
 		const hmr = b.block([
-			b.stmt(b.assignment('=', id, b.call('$.hmr', id, b.thunk(b.member(existing, 'source'))))),
-
+			b.stmt(b.assignment('=', id, b.call('$.hmr', id))),
 			b.stmt(b.call('import.meta.hot.accept', b.arrow([b.id('module')], b.block(accept_fn_body))))
 		]);
 
@@ -532,15 +540,20 @@ export function client_component(analysis, options) {
 				b.assignment('=', b.member(b.id(analysis.name), '$.FILENAME', true), b.literal(filename))
 			)
 		);
+	}
 
-		body.unshift(b.stmt(b.call(b.id('$.mark_module_start'))));
-		body.push(b.stmt(b.call(b.id('$.mark_module_end'), b.id(analysis.name))));
+	if (options.experimental.async) {
+		body.unshift(b.imports([], 'svelte/internal/flags/async'));
 	}
 
 	if (!analysis.runes) {
 		body.unshift(b.imports([], 'svelte/internal/flags/legacy'));
 	}
 
+	if (analysis.tracing) {
+		body.unshift(b.imports([], 'svelte/internal/flags/tracing'));
+	}
+
 	if (options.discloseVersion) {
 		body.unshift(b.imports([], 'svelte/internal/disclose-version'));
 	}
@@ -563,14 +576,20 @@ export function client_component(analysis, options) {
 		component_block.body.unshift(b.stmt(b.call('$.check_target', b.id('new.target'))));
 	}
 
+	if (analysis.props_id) {
+		// need to be placed on first line of the component for hydration
+		component_block.body.unshift(b.const(analysis.props_id, b.call('$.props_id')));
+	}
+
 	if (state.events.size > 0) {
 		body.push(
 			b.stmt(b.call('$.delegate', b.array(Array.from(state.events).map((name) => b.literal(name)))))
 		);
 	}
 
-	if (analysis.custom_element) {
-		const ce = analysis.custom_element;
+	const ce = analysis.custom_element;
+
+	if (ce) {
 		const ce_props = typeof ce === 'boolean' ? {} : ce.props || {};
 
 		/** @type {ESTree.Property[]} */
@@ -592,7 +611,7 @@ export function client_component(analysis, options) {
 				/** @type {ESTree.Property[]} */ (
 					[
 						prop_def.attribute ? b.init('attribute', b.literal(prop_def.attribute)) : undefined,
-						prop_def.reflect ? b.init('reflect', b.literal(true)) : undefined,
+						prop_def.reflect ? b.init('reflect', b.true) : undefined,
 						prop_def.type ? b.init('type', b.literal(prop_def.type)) : undefined
 					].filter(Boolean)
 				)
@@ -612,7 +631,16 @@ export function client_component(analysis, options) {
 		const accessors_str = b.array(
 			analysis.exports.map(({ name, alias }) => b.literal(alias ?? name))
 		);
-		const use_shadow_dom = typeof ce === 'boolean' || ce.shadow !== 'none' ? true : false;
+
+		/** @type {ESTree.ObjectExpression | undefined} */
+		let shadow_root_init;
+		if (typeof ce === 'boolean' || ce.shadow === 'open' || ce.shadow === undefined) {
+			shadow_root_init = b.object([b.init('mode', b.literal('open'))]);
+		} else if (ce.shadow === 'none') {
+			shadow_root_init = undefined;
+		} else {
+			shadow_root_init = ce.shadow;
+		}
 
 		const create_ce = b.call(
 			'$.create_custom_element',
@@ -620,7 +648,7 @@ export function client_component(analysis, options) {
 			b.object(props_str),
 			slots_str,
 			accessors_str,
-			b.literal(use_shadow_dom),
+			shadow_root_init,
 			/** @type {any} */ (typeof ce !== 'boolean' ? ce.extend : undefined)
 		);
 
@@ -659,19 +687,25 @@ export function client_module(analysis, options) {
 		options,
 		scope: analysis.module.scope,
 		scopes: analysis.module.scopes,
-		public_state: new Map(),
-		private_state: new Map(),
+		state_fields: new Map(),
 		transform: {},
-		in_constructor: false
+		in_constructor: false,
+		is_instance: false
 	};
 
 	const module = /** @type {ESTree.Program} */ (
 		walk(/** @type {AST.SvelteNode} */ (analysis.module.ast), state, visitors)
 	);
 
+	const body = [b.import_all('$', 'svelte/internal/client')];
+
+	if (analysis.tracing) {
+		body.push(b.imports([], 'svelte/internal/flags/tracing'));
+	}
+
 	return {
 		type: 'Program',
 		sourceType: 'module',
-		body: [b.import_all('$', 'svelte/internal/client'), ...module.body]
+		body: [...body, ...module.body]
 	};
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-template/fix-attribute-casing.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/fix-attribute-casing.js
new file mode 100644
index 0000000000..ce56c43d7c
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/fix-attribute-casing.js
@@ -0,0 +1,18 @@
+const svg_attributes =
+	'accent-height accumulate additive alignment-baseline allowReorder alphabetic amplitude arabic-form ascent attributeName attributeType autoReverse azimuth baseFrequency baseline-shift baseProfile bbox begin bias by calcMode cap-height class clip clipPathUnits clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering contentScriptType contentStyleType cursor cx cy d decelerate descent diffuseConstant direction display divisor dominant-baseline dur dx dy edgeMode elevation enable-background end exponent externalResourcesRequired fill fill-opacity fill-rule filter filterRes filterUnits flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight format from fr fx fy g1 g2 glyph-name glyph-orientation-horizontal glyph-orientation-vertical glyphRef gradientTransform gradientUnits hanging height href horiz-adv-x horiz-origin-x id ideographic image-rendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLength kerning keyPoints keySplines keyTimes lang lengthAdjust letter-spacing lighting-color limitingConeAngle local marker-end marker-mid marker-start markerHeight markerUnits markerWidth mask maskContentUnits maskUnits mathematical max media method min mode name numOctaves offset onabort onactivate onbegin onclick onend onerror onfocusin onfocusout onload onmousedown onmousemove onmouseout onmouseover onmouseup onrepeat onresize onscroll onunload opacity operator order orient orientation origin overflow overline-position overline-thickness panose-1 paint-order pathLength patternContentUnits patternTransform patternUnits pointer-events points pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits r radius refX refY rendering-intent repeatCount repeatDur requiredExtensions requiredFeatures restart result rotate rx ry scale seed shape-rendering slope spacing specularConstant specularExponent speed spreadMethod startOffset stdDeviation stemh stemv stitchTiles stop-color stop-opacity strikethrough-position strikethrough-thickness string stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width style surfaceScale systemLanguage tabindex tableValues target targetX targetY text-anchor text-decoration text-rendering textLength to transform type u1 u2 underline-position underline-thickness unicode unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical values version vert-adv-y vert-origin-x vert-origin-y viewBox viewTarget visibility width widths word-spacing writing-mode x x-height x1 x2 xChannelSelector xlink:actuate xlink:arcrole xlink:href xlink:role xlink:show xlink:title xlink:type xml:base xml:lang xml:space y y1 y2 yChannelSelector z zoomAndPan'.split(
+		' '
+	);
+
+const svg_attribute_lookup = new Map();
+
+svg_attributes.forEach((name) => {
+	svg_attribute_lookup.set(name.toLowerCase(), name);
+});
+
+/**
+ * @param {string} name
+ */
+export default function fix_attribute_casing(name) {
+	name = name.toLowerCase();
+	return svg_attribute_lookup.get(name) || name;
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js
new file mode 100644
index 0000000000..5fdc88844b
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js
@@ -0,0 +1,104 @@
+/** @import { TemplateLiteral } from 'estree' */
+/** @import { Namespace } from '#compiler' */
+/** @import { ComponentClientTransformState } from '../types.js' */
+/** @import { Node } from './types.js' */
+import { TEMPLATE_USE_MATHML, TEMPLATE_USE_SVG } from '../../../../../constants.js';
+import { dev, locator } from '../../../../state.js';
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {Node[]} nodes
+ */
+function build_locations(nodes) {
+	const array = b.array([]);
+
+	for (const node of nodes) {
+		if (node.type !== 'element') continue;
+
+		const { line, column } = locator(node.start);
+
+		const expression = b.array([b.literal(line), b.literal(column)]);
+		const children = build_locations(node.children);
+
+		if (children.elements.length > 0) {
+			expression.elements.push(children);
+		}
+
+		array.elements.push(expression);
+	}
+
+	return array;
+}
+
+/**
+ * @param {ComponentClientTransformState} state
+ * @param {string} name
+ * @param {number} [flags]
+ */
+export function transform_template(state, name, flags = 0) {
+	const namespace = state.metadata.namespace;
+	const tree = state.options.fragments === 'tree';
+
+	const expression = tree ? state.template.as_tree() : state.template.as_html();
+
+	const key =
+		tree || dev
+			? null
+			: get_template_key(
+					/** @type {TemplateLiteral} */ (expression),
+					state.metadata.namespace,
+					flags
+				);
+
+	if (key !== null) {
+		const existing = state.templates.get(key);
+		if (existing !== undefined) return existing;
+	}
+
+	if (tree) {
+		if (namespace === 'svg') flags |= TEMPLATE_USE_SVG;
+		if (namespace === 'mathml') flags |= TEMPLATE_USE_MATHML;
+	}
+
+	let call = b.call(
+		tree ? `$.from_tree` : `$.from_${namespace}`,
+		expression,
+		flags ? b.literal(flags) : undefined
+	);
+
+	if (state.template.contains_script_tag) {
+		call = b.call(`$.with_script`, call);
+	}
+
+	if (dev) {
+		call = b.call(
+			'$.add_locations',
+			call,
+			b.member(b.id(state.analysis.name), '$.FILENAME', true),
+			build_locations(state.template.nodes)
+		);
+	}
+
+	const id = state.scope.root.unique(name);
+	state.hoisted.push(b.var(id, call));
+
+	if (key !== null) {
+		state.templates.set(key, id);
+	}
+
+	return id;
+}
+
+/**
+ * Returns a stable key for templates that are safe to deduplicate - plain
+ * `$.from_html`/`from_svg`/`from_mathml` factories with literal arguments - or `null`
+ * for anything else. Dev-mode templates are wrapped in `$.add_locations(...)`, which
+ * embeds per-call-site locations, so they never produce a key and are never shared.
+ * @param {TemplateLiteral} template
+ * @param {Namespace} namespace
+ * @param {number} flags
+ * @returns {string | null}
+ */
+function get_template_key(template, namespace, flags) {
+	return `${namespace} ${flags} ${template.quasis[0].value.raw}`;
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-template/template.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/template.js
new file mode 100644
index 0000000000..f546ce4962
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/template.js
@@ -0,0 +1,164 @@
+/** @import { AST } from '#compiler' */
+/** @import { Node, Element } from './types'; */
+import { escape_html } from '../../../../../escaping.js';
+import { is_void } from '../../../../../utils.js';
+import * as b from '#compiler/builders';
+import fix_attribute_casing from './fix-attribute-casing.js';
+import { regex_starts_with_newline } from '../../../patterns.js';
+
+export class Template {
+	/**
+	 * `true` if HTML template contains a `<script>` tag. In this case we need to invoke a special
+	 * template instantiation function (see `create_fragment_with_script_from_html` for more info)
+	 */
+	contains_script_tag = false;
+
+	/** `true` if the HTML template needs to be instantiated with `importNode` */
+	needs_import_node = false;
+
+	/** @type {Node[]} */
+	nodes = [];
+
+	/** @type {Node[][]} */
+	#stack = [this.nodes];
+
+	/** @type {Element | undefined} */
+	#element;
+
+	#fragment = this.nodes;
+
+	/**
+	 * @param {string} name
+	 * @param {number} start
+	 * @param {boolean} is_html
+	 */
+	push_element(name, start, is_html) {
+		this.#element = {
+			type: 'element',
+			name,
+			attributes: {},
+			children: [],
+			is_html,
+			start
+		};
+
+		this.#fragment.push(this.#element);
+
+		this.#fragment = /** @type {Element} */ (this.#element).children;
+		this.#stack.push(this.#fragment);
+	}
+
+	/** @param {string} [data] */
+	push_comment(data) {
+		this.#fragment.push({ type: 'comment', data });
+	}
+
+	/** @param {AST.Text[]} nodes */
+	push_text(nodes) {
+		this.#fragment.push({ type: 'text', nodes });
+	}
+
+	pop_element() {
+		this.#stack.pop();
+		this.#fragment = /** @type {Node[]} */ (this.#stack.at(-1));
+	}
+
+	/**
+	 * @param {string} key
+	 * @param {string | undefined} value
+	 */
+	set_prop(key, value) {
+		/** @type {Element} */ (this.#element).attributes[key] = value;
+	}
+
+	as_html() {
+		return b.template([b.quasi(this.nodes.map(stringify).join(''), true)], []);
+	}
+
+	as_tree() {
+		// if the first item is a comment we need to add another comment for effect.start
+		if (this.nodes[0].type === 'comment') {
+			this.nodes.unshift({ type: 'comment', data: undefined });
+		}
+
+		return b.array(this.nodes.map(objectify));
+	}
+}
+
+/**
+ * @param {Node} item
+ */
+function stringify(item) {
+	if (item.type === 'text') {
+		return item.nodes.map((node) => node.raw).join('');
+	}
+
+	if (item.type === 'comment') {
+		return item.data ? `<!--${item.data}-->` : '<!>';
+	}
+
+	let str = `<${item.name}`;
+
+	for (const key in item.attributes) {
+		const value = item.attributes[key];
+
+		str += ` ${item.is_html ? key.toLowerCase() : key}`;
+		if (value !== undefined) str += `="${escape_html(value, true)}"`;
+	}
+
+	if (is_void(item.name)) {
+		str += '/>'; // XHTML compliance
+	} else {
+		str += `>`;
+		str += item.children.map(stringify).join('');
+		str += `</${item.name}>`;
+	}
+
+	return str;
+}
+
+/** @param {Node} item */
+function objectify(item) {
+	if (item.type === 'text') {
+		return b.literal(item.nodes.map((node) => node.data).join(''));
+	}
+
+	if (item.type === 'comment') {
+		return item.data ? b.array([b.literal(`// ${item.data}`)]) : null;
+	}
+
+	const element = b.array([b.literal(item.name)]);
+
+	const attributes = b.object([]);
+
+	for (const key in item.attributes) {
+		const value = item.attributes[key];
+
+		attributes.properties.push(
+			b.prop(
+				'init',
+				b.key(fix_attribute_casing(key)),
+				value === undefined ? b.void0 : b.literal(value)
+			)
+		);
+	}
+
+	if (attributes.properties.length > 0 || item.children.length > 0) {
+		element.elements.push(attributes.properties.length > 0 ? attributes : b.null);
+	}
+
+	if (item.children.length > 0) {
+		const children = item.children.map(objectify);
+		element.elements.push(...children);
+
+		// special case — strip leading newline from `<pre>` and `<textarea>`
+		if (item.name === 'pre' || item.name === 'textarea') {
+			const first = children[0];
+			if (first?.type === 'Literal') {
+				first.value = /** @type {string} */ (first.value).replace(regex_starts_with_newline, '');
+			}
+		}
+	}
+
+	return element;
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-template/types.d.ts b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/types.d.ts
new file mode 100644
index 0000000000..2ccb4dc5c7
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/types.d.ts
@@ -0,0 +1,23 @@
+import type { AST } from '#compiler';
+
+export interface Element {
+	type: 'element';
+	name: string;
+	attributes: Record<string, string | undefined>;
+	children: Node[];
+	is_html: boolean;
+	/** used for populating __svelte_meta */
+	start: number;
+}
+
+export interface Text {
+	type: 'text';
+	nodes: AST.Text[];
+}
+
+export interface Comment {
+	type: 'comment';
+	data: string | undefined;
+}
+
+export type Node = Element | Text | Comment;
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
index 5c8476de3e..7a95a2d43c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
+++ b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
@@ -3,7 +3,6 @@ import type {
 	Statement,
 	LabeledStatement,
 	Identifier,
-	PrivateIdentifier,
 	Expression,
 	AssignmentExpression,
 	UpdateExpression,
@@ -12,12 +11,10 @@ import type {
 import type { AST, Namespace, ValidatedCompileOptions } from '#compiler';
 import type { TransformState } from '../types.js';
 import type { ComponentAnalysis } from '../../types.js';
-import type { SourceLocation } from '#shared';
+import type { Template } from './transform-template/template.js';
+import type { Memoizer } from './visitors/shared/utils.js';
 
 export interface ClientTransformState extends TransformState {
-	readonly private_state: Map<string, StateField>;
-	readonly public_state: Map<string, StateField>;
-
 	/**
 	 * `true` if the current lexical scope belongs to a class constructor. this allows
 	 * us to rewrite `this.foo` as `this.#foo.value`
@@ -30,7 +27,7 @@ export interface ClientTransformState extends TransformState {
 			/** turn `foo` into e.g. `$.get(foo)` */
 			read: (id: Identifier) => Expression;
 			/** turn `foo = bar` into e.g. `$.set(foo, bar)` */
-			assign?: (node: Identifier, value: Expression) => Expression;
+			assign?: (node: Identifier, value: Expression, proxy?: boolean) => Expression;
 			/** turn `foo.bar = baz` into e.g. `$.mutate(foo, $.get(foo).bar = baz);` */
 			mutate?: (node: Identifier, mutation: AssignmentExpression | UpdateExpression) => Expression;
 			/** turn `foo++` into e.g. `$.update(foo)` */
@@ -43,38 +40,35 @@ export interface ComponentClientTransformState extends ClientTransformState {
 	readonly analysis: ComponentAnalysis;
 	readonly options: ValidatedCompileOptions;
 	readonly hoisted: Array<Statement | ModuleDeclaration>;
+	/** Deduplicates hoisted templates by content, mapping a template key to its hoisted identifier */
+	readonly templates: Map<string, Identifier>;
 	readonly events: Set<string>;
-	readonly is_instance: boolean;
+	readonly store_to_invalidate?: string;
 
-	/** Stuff that happens before the render effect(s) */
-	readonly before_init: Statement[];
 	/** Stuff that happens before the render effect(s) */
 	readonly init: Statement[];
 	/** Stuff that happens inside the render effect */
 	readonly update: Statement[];
 	/** Stuff that happens after the render effect (control blocks, dynamic elements, bindings, actions, etc) */
 	readonly after_update: Statement[];
+	/** Transformed `{#snippets }` declarations */
+	readonly snippets: Statement[];
+	/** Transformed `{@const }` declarations */
+	readonly consts: Statement[];
+	/** Transformed async `{@const }` declarations (if any) and those coming after them */
+	async_consts?: {
+		id: Identifier;
+		thunks: Expression[];
+	};
+	/** Transformed `let:` directives */
+	readonly let_directives: Statement[];
+	/** Memoized expressions */
+	readonly memoizer: Memoizer;
 	/** The HTML template string */
-	readonly template: Array<string | Expression>;
-	readonly locations: SourceLocation[];
+	readonly template: Template;
 	readonly metadata: {
 		namespace: Namespace;
 		bound_contenteditable: boolean;
-		/**
-		 * Stuff that is set within the children of one `Fragment` visitor that is relevant
-		 * to said fragment. Shouldn't be destructured or otherwise spread unless inside the
-		 * `Fragment` visitor to keep the object reference intact (it's also nested
-		 * within `metadata` for this reason).
-		 */
-		context: {
-			/** `true` if the HTML template needs to be instantiated with `importNode` */
-			template_needs_import_node: boolean;
-			/**
-			 * `true` if HTML template contains a `<script>` tag. In this case we need to invoke a special
-			 * template instantiation function (see `create_fragment_with_script_from_html` for more info)
-			 */
-			template_contains_script_tag: boolean;
-		};
 	};
 	readonly preserve_whitespace: boolean;
 
@@ -91,11 +85,9 @@ export interface ComponentClientTransformState extends ClientTransformState {
 	readonly instance_level_snippets: VariableDeclaration[];
 	/** Snippets hoisted to the module */
 	readonly module_level_snippets: VariableDeclaration[];
-}
 
-export interface StateField {
-	kind: 'state' | 'raw_state' | 'derived' | 'derived_by';
-	id: PrivateIdentifier;
+	/** True if the current node is a) a component or render tag and b) the sole child of a block  */
+	readonly is_standalone: boolean;
 }
 
 export type Context = import('zimmerframe').Context<AST.SvelteNode, ClientTransformState>;
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
index c59a5544df..d52b438d92 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
@@ -1,10 +1,10 @@
-/** @import { ArrowFunctionExpression, Expression, FunctionDeclaration, FunctionExpression, Identifier, Pattern, PrivateIdentifier, Statement } from 'estree' */
-/** @import { AST, Binding } from '#compiler' */
-/** @import { ClientTransformState, ComponentClientTransformState, ComponentContext } from './types.js' */
+/** @import { BlockStatement, Expression, Identifier } from 'estree' */
+/** @import { Binding } from '#compiler' */
+/** @import { ClientTransformState, ComponentClientTransformState } from './types.js' */
 /** @import { Analysis } from '../../types.js' */
 /** @import { Scope } from '../../scope.js' */
-import * as b from '../../../utils/builders.js';
-import { extract_identifiers, is_simple_expression } from '../../../utils/ast.js';
+import * as b from '#compiler/builders';
+import { is_simple_expression, save } from '../../../utils/ast.js';
 import {
 	PROPS_IS_LAZY_INITIAL,
 	PROPS_IS_IMMUTABLE,
@@ -12,8 +12,6 @@ import {
 	PROPS_IS_UPDATED,
 	PROPS_IS_BINDABLE
 } from '../../../../constants.js';
-import { dev } from '../../../state.js';
-import { get_value } from './visitors/shared/declarations.js';
 
 /**
  * @param {Binding} binding
@@ -45,109 +43,6 @@ export function build_getter(node, state) {
 	return node;
 }
 
-/**
- * @param {Expression} value
- * @param {Expression} previous
- */
-export function build_proxy_reassignment(value, previous) {
-	return dev ? b.call('$.proxy', value, b.null, previous) : b.call('$.proxy', value);
-}
-
-/**
- * @param {FunctionDeclaration | FunctionExpression | ArrowFunctionExpression} node
- * @param {ComponentContext} context
- * @returns {Pattern[]}
- */
-function get_hoisted_params(node, context) {
-	const scope = context.state.scope;
-
-	/** @type {Identifier[]} */
-	const params = [];
-
-	/**
-	 * We only want to push if it's not already present to avoid name clashing
-	 * @param {Identifier} id
-	 */
-	function push_unique(id) {
-		if (!params.find((param) => param.name === id.name)) {
-			params.push(id);
-		}
-	}
-
-	for (const [reference] of scope.references) {
-		let binding = scope.get(reference);
-
-		if (binding !== null && !scope.declarations.has(reference) && binding.initial !== node) {
-			if (binding.kind === 'store_sub') {
-				// We need both the subscription for getting the value and the store for updating
-				push_unique(b.id(binding.node.name));
-				binding = /** @type {Binding} */ (scope.get(binding.node.name.slice(1)));
-			}
-
-			let expression = context.state.transform[reference]?.read(b.id(binding.node.name));
-
-			if (
-				// If it's a destructured derived binding, then we can extract the derived signal reference and use that.
-				// TODO this code is bad, we need to kill it
-				expression != null &&
-				typeof expression !== 'function' &&
-				expression.type === 'MemberExpression' &&
-				expression.object.type === 'CallExpression' &&
-				expression.object.callee.type === 'Identifier' &&
-				expression.object.callee.name === '$.get' &&
-				expression.object.arguments[0].type === 'Identifier'
-			) {
-				push_unique(b.id(expression.object.arguments[0].name));
-			} else if (
-				// If we are referencing a simple $$props value, then we need to reference the object property instead
-				(binding.kind === 'prop' || binding.kind === 'bindable_prop') &&
-				!is_prop_source(binding, context.state)
-			) {
-				push_unique(b.id('$$props'));
-			} else if (
-				// imports don't need to be hoisted
-				binding.declaration_kind !== 'import'
-			) {
-				// create a copy to remove start/end tags which would mess up source maps
-				push_unique(b.id(binding.node.name));
-				// rest props are often accessed through the $$props object for optimization reasons,
-				// but we can't know if the delegated event handler will use it, so we need to add both as params
-				if (binding.kind === 'rest_prop' && context.state.analysis.runes) {
-					push_unique(b.id('$$props'));
-				}
-			}
-		}
-	}
-	return params;
-}
-
-/**
- * @param {FunctionDeclaration | FunctionExpression | ArrowFunctionExpression} node
- * @param {ComponentContext} context
- * @returns {Pattern[]}
- */
-export function build_hoisted_params(node, context) {
-	const hoisted_params = get_hoisted_params(node, context);
-	node.metadata.hoisted_params = hoisted_params;
-
-	/** @type {Pattern[]} */
-	const params = [];
-
-	if (node.params.length === 0) {
-		if (hoisted_params.length > 0) {
-			// For the event object
-			params.push(b.id(context.state.scope.generate('_')));
-		}
-	} else {
-		for (const param of node.params) {
-			params.push(/** @type {Pattern} */ (context.visit(param)));
-		}
-	}
-
-	params.push(...hoisted_params);
-	return params;
-}
-
 /**
  * @param {Binding} binding
  * @param {ComponentClientTransformState} state
@@ -270,45 +165,38 @@ export function should_proxy(node, scope) {
 }
 
 /**
- * @param {Pattern} node
- * @param {import('zimmerframe').Context<AST.SvelteNode, ComponentClientTransformState>} context
- * @returns {{ id: Pattern, declarations: null | Statement[] }}
+ * Svelte legacy mode should use safe equals in most places, runes mode shouldn't
+ * @param {ComponentClientTransformState} state
+ * @param {Expression | BlockStatement} expression
+ * @param {boolean} [async]
  */
-export function create_derived_block_argument(node, context) {
-	if (node.type === 'Identifier') {
-		context.state.transform[node.name] = { read: get_value };
-		return { id: node, declarations: null };
-	}
-
-	const pattern = /** @type {Pattern} */ (context.visit(node));
-	const identifiers = extract_identifiers(node);
-
-	const id = b.id('$$source');
-	const value = b.id('$$value');
-
-	const block = b.block([
-		b.var(pattern, b.call('$.get', id)),
-		b.return(b.object(identifiers.map((identifier) => b.prop('init', identifier, identifier))))
-	]);
+export function create_derived(state, expression, async = false) {
+	const thunk = b.thunk(expression, async);
 
-	const declarations = [b.var(value, create_derived(context.state, b.thunk(block)))];
-
-	for (const id of identifiers) {
-		context.state.transform[id.name] = { read: get_value };
-
-		declarations.push(
-			b.var(id, create_derived(context.state, b.thunk(b.member(b.call('$.get', value), id))))
-		);
+	if (async) {
+		return save(b.call('$.async_derived', thunk));
+	} else {
+		return b.call(state.analysis.runes ? '$.derived' : '$.derived_safe_equal', thunk);
 	}
-
-	return { id, declarations };
 }
 
 /**
- * Svelte legacy mode should use safe equals in most places, runes mode shouldn't
- * @param {ComponentClientTransformState} state
- * @param {Expression} arg
+ * @param {Scope} scope
+ * @param {ClientTransformState} state
  */
-export function create_derived(state, arg) {
-	return b.call(state.analysis.runes ? '$.derived' : '$.derived_safe_equal', arg);
+export function get_transform(scope, state) {
+	const transform = { ...state.transform };
+
+	for (const [name, binding] of scope.declarations) {
+		if (
+			binding.kind === 'normal' ||
+			// Reads of `$state(...)` declarations are not
+			// transformed if they are never reassigned
+			(binding.kind === 'state' && !is_state_source(binding, state.analysis))
+		) {
+			delete transform[name];
+		}
+	}
+
+	return transform;
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AnimateDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AnimateDirective.js
index 510f32cde5..c1f1991fa0 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AnimateDirective.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AnimateDirective.js
@@ -1,7 +1,7 @@
 /** @import { Expression } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import { parse_directive_name } from './shared/utils.js';
 
 /**
@@ -11,18 +11,28 @@ import { parse_directive_name } from './shared/utils.js';
 export function AnimateDirective(node, context) {
 	const expression =
 		node.expression === null
-			? b.literal(null)
+			? b.null
 			: b.thunk(/** @type {Expression} */ (context.visit(node.expression)));
 
 	// in after_update to ensure it always happens after bind:this
-	context.state.after_update.push(
-		b.stmt(
-			b.call(
-				'$.animation',
-				context.state.node,
-				b.thunk(/** @type {Expression} */ (context.visit(parse_directive_name(node.name)))),
-				expression
-			)
+	let statement = b.stmt(
+		b.call(
+			'$.animation',
+			context.state.node,
+			b.thunk(/** @type {Expression} */ (context.visit(parse_directive_name(node.name)))),
+			expression
 		)
 	);
+
+	if (node.metadata.expression.is_async()) {
+		statement = b.stmt(
+			b.call(
+				'$.run_after_blockers',
+				node.metadata.expression.blockers(),
+				b.thunk(b.block([statement]))
+			)
+		);
+	}
+
+	context.state.after_update.push(statement);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
index 3d8b9aaa96..e66e3408e2 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
@@ -1,16 +1,19 @@
-/** @import { Location } from 'locate-character' */
-/** @import { AssignmentExpression, AssignmentOperator, Expression, Identifier, Literal, MemberExpression, Pattern } from 'estree' */
+/** @import { AssignmentExpression, AssignmentOperator, Expression, Identifier, Pattern } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { Context } from '../types.js' */
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import {
 	build_assignment_value,
 	get_attribute_expression,
-	is_event_attribute
+	is_event_attribute,
+	is_expression_async
 } from '../../../../utils/ast.js';
-import { dev, filename, is_ignored, locate_node, locator } from '../../../../state.js';
-import { build_proxy_reassignment, should_proxy } from '../utils.js';
+import { dev, locate_node } from '../../../../state.js';
+import { build_getter, should_proxy } from '../utils.js';
 import { visit_assignment_expression } from '../../shared/assignments.js';
+import { validate_mutation } from './shared/utils.js';
+import { get_rune } from '../../../scope.js';
+import { get_name } from '../../../nodes.js';
 
 /**
  * @param {AssignmentExpression} node
@@ -21,9 +24,7 @@ export function AssignmentExpression(node, context) {
 		visit_assignment_expression(node, context, build_assignment) ?? context.next()
 	);
 
-	return is_ignored(node, 'ownership_invalid_mutation')
-		? b.call('$.skip_ownership_validation', b.thunk(expression))
-		: expression;
+	return validate_mutation(node, context, expression);
 }
 
 /**
@@ -36,14 +37,6 @@ function is_non_coercive_operator(operator) {
 	return ['=', '||=', '&&=', '??='].includes(operator);
 }
 
-/** @type {Record<string, string>} */
-const callees = {
-	'=': '$.assign',
-	'&&=': '$.assign_and',
-	'||=': '$.assign_or',
-	'??=': '$.assign_nullish'
-};
-
 /**
  * @param {AssignmentOperator} operator
  * @param {Pattern} left
@@ -52,34 +45,51 @@ const callees = {
  * @returns {Expression | null}
  */
 function build_assignment(operator, left, right, context) {
-	// Handle class private/public state assignment cases
-	if (
-		context.state.analysis.runes &&
-		left.type === 'MemberExpression' &&
-		left.property.type === 'PrivateIdentifier'
-	) {
-		const private_state = context.state.private_state.get(left.property.name);
-
-		if (private_state !== undefined) {
-			let value = /** @type {Expression} */ (
-				context.visit(build_assignment_value(operator, left, right))
-			);
-
-			if (
-				private_state.kind === 'state' &&
-				is_non_coercive_operator(operator) &&
-				should_proxy(value, context.state.scope)
-			) {
-				value = build_proxy_reassignment(value, b.member(b.this, private_state.id));
+	if (context.state.analysis.runes && left.type === 'MemberExpression') {
+		const name = get_name(left.property);
+		const field = name && context.state.state_fields.get(name);
+
+		if (field) {
+			// special case — state declaration in class constructor
+			if (field.node.type === 'AssignmentExpression' && left === field.node.left) {
+				const rune = get_rune(right, context.state.scope);
+
+				if (rune) {
+					const child_state = {
+						...context.state,
+						in_constructor: rune !== '$derived' && rune !== '$derived.by'
+					};
+
+					let value = /** @type {Expression} */ (context.visit(right, child_state));
+
+					if (dev) {
+						const declaration = context.path.findLast(
+							(parent) => parent.type === 'ClassDeclaration' || parent.type === 'ClassExpression'
+						);
+						value = b.call(
+							'$.tag',
+							value,
+							b.literal(`${declaration?.id?.name ?? '[class]'}.${name}`)
+						);
+					}
+
+					return b.assignment(operator, b.member(b.this, field.key), value);
+				}
 			}
 
-			if (context.state.in_constructor) {
-				// inside the constructor, we can assign to `this.#foo.v` rather than using `$.set`,
-				// since nothing is tracking the signal at this point
-				return b.assignment(operator, /** @type {Pattern} */ (context.visit(left)), value);
-			}
+			// special case — assignment to private state field
+			if (left.property.type === 'PrivateIdentifier') {
+				let value = /** @type {Expression} */ (
+					context.visit(build_assignment_value(operator, left, right))
+				);
+
+				const needs_proxy =
+					field.type === '$state' &&
+					is_non_coercive_operator(operator) &&
+					should_proxy(value, context.state.scope);
 
-			return b.call('$.set', left, value);
+				return b.call('$.set', left, value, needs_proxy && b.true);
+			}
 		}
 	}
 
@@ -113,24 +123,24 @@ function build_assignment(operator, left, right, context) {
 			context.visit(build_assignment_value(operator, left, right))
 		);
 
-		if (
+		return transform.assign(
+			object,
+			value,
 			!is_primitive &&
-			binding.kind !== 'prop' &&
-			binding.kind !== 'bindable_prop' &&
-			binding.kind !== 'raw_state' &&
-			context.state.analysis.runes &&
-			should_proxy(right, context.state.scope) &&
-			is_non_coercive_operator(operator)
-		) {
-			value = build_proxy_reassignment(value, object);
-		}
-
-		return transform.assign(object, value);
+				binding.kind !== 'prop' &&
+				binding.kind !== 'bindable_prop' &&
+				binding.kind !== 'raw_state' &&
+				binding.kind !== 'derived' &&
+				binding.kind !== 'store_sub' &&
+				context.state.analysis.runes &&
+				should_proxy(right, context.state.scope) &&
+				is_non_coercive_operator(operator)
+		);
 	}
 
 	// mutation
 	if (transform?.mutate) {
-		return transform.mutate(
+		let mutation = transform.mutate(
 			object,
 			b.assignment(
 				operator,
@@ -138,14 +148,36 @@ function build_assignment(operator, left, right, context) {
 				/** @type {Expression} */ (context.visit(right))
 			)
 		);
+
+		if (binding.legacy_indirect_bindings.size > 0) {
+			mutation = b.sequence([
+				mutation,
+				b.call(
+					'$.invalidate_inner_signals',
+					b.arrow(
+						[],
+						b.block(
+							Array.from(binding.legacy_indirect_bindings).map((binding) =>
+								b.stmt(build_getter({ ...binding.node }, context.state))
+							)
+						)
+					)
+				)
+			]);
+		}
+
+		return mutation;
 	}
 
 	// in cases like `(object.items ??= []).push(value)`, we may need to warn
 	// if the value gets proxified, since the proxy _isn't_ the thing that
 	// will be pushed to. we do this by transforming it to something like
-	// `$.assign_nullish(object, 'items', [])`
+	// `$.assign(object, 'items', '??=', () => [])`
 	let should_transform =
-		dev && path.at(-1) !== 'ExpressionStatement' && is_non_coercive_operator(operator);
+		dev &&
+		path.at(-1) !== 'ExpressionStatement' &&
+		is_non_coercive_operator(operator) &&
+		!context.state.scope.evaluate(right).is_primitive;
 
 	// special case — ignore `onclick={() => (...)}`
 	if (
@@ -171,33 +203,38 @@ function build_assignment(operator, left, right, context) {
 
 	// special case — ignore `bind:prop={getter, (v) => (...)}` / `bind:value={x.y}`
 	if (
+		path.at(-1) === 'BindDirective' ||
 		path.at(-1) === 'Component' ||
 		path.at(-1) === 'SvelteComponent' ||
 		(path.at(-1) === 'ArrowFunctionExpression' &&
-			path.at(-2) === 'SequenceExpression' &&
-			(path.at(-3) === 'Component' || path.at(-3) === 'SvelteComponent'))
+			(path.at(-2) === 'BindDirective' ||
+				(path.at(-2) === 'Component' && path.at(-3) === 'Fragment') ||
+				(path.at(-2) === 'SequenceExpression' &&
+					(path.at(-3) === 'Component' ||
+						path.at(-3) === 'SvelteComponent' ||
+						path.at(-3) === 'BindDirective'))))
 	) {
 		should_transform = false;
 	}
 
 	if (left.type === 'MemberExpression' && should_transform) {
-		const callee = callees[operator];
-
-		return /** @type {Expression} */ (
-			context.visit(
-				b.call(
-					callee,
-					/** @type {Expression} */ (left.object),
-					/** @type {Expression} */ (
-						left.computed
-							? left.property
-							: b.literal(/** @type {Identifier} */ (left.property).name)
-					),
-					right,
-					b.literal(locate_node(left))
-				)
-			)
+		const needs_lazy_getter = operator !== '=';
+		const needs_async = needs_lazy_getter && is_expression_async(right);
+		/** @type {Expression} */
+		let e = b.call(
+			needs_async ? '$.assign_async' : '$.assign',
+			/** @type {Expression} */ (left.object),
+			/** @type {Expression} */ (
+				left.computed ? left.property : b.literal(/** @type {Identifier} */ (left.property).name)
+			),
+			b.literal(operator),
+			needs_lazy_getter ? b.arrow([], right, needs_async) : right,
+			b.literal(locate_node(left))
 		);
+		if (needs_async) {
+			e = b.await(e);
+		}
+		return /** @type {Expression} */ (context.visit(e));
 	}
 
 	return null;
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AttachTag.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AttachTag.js
new file mode 100644
index 0000000000..c594a1a1bd
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AttachTag.js
@@ -0,0 +1,26 @@
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '../../../../utils/builders.js';
+import { build_expression } from './shared/utils.js';
+
+/**
+ * @param {AST.AttachTag} node
+ * @param {ComponentContext} context
+ */
+export function AttachTag(node, context) {
+	const expression = build_expression(context, node.expression, node.metadata.expression);
+	let statement = b.stmt(b.call('$.attach', context.state.node, b.thunk(expression)));
+
+	if (node.metadata.expression.is_async()) {
+		statement = b.stmt(
+			b.call(
+				'$.run_after_blockers',
+				node.metadata.expression.blockers(),
+				b.thunk(b.block([statement]))
+			)
+		);
+	}
+
+	context.state.init.push(statement);
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js
index 146f75d405..b8def178f2 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js
@@ -1,18 +1,24 @@
-/** @import { BlockStatement, Expression, Pattern, Statement } from 'estree' */
+/** @import { BlockStatement, Pattern, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
-/** @import { ComponentContext } from '../types' */
-import * as b from '../../../../utils/builders.js';
-import { create_derived_block_argument } from '../utils.js';
+/** @import { ComponentClientTransformState, ComponentContext } from '../types' */
+import { extract_identifiers, is_expression_async } from '../../../../utils/ast.js';
+import * as b from '#compiler/builders';
+import { create_derived } from '../utils.js';
+import { get_value } from './shared/declarations.js';
+import { build_expression, add_svelte_meta } from './shared/utils.js';
 
 /**
  * @param {AST.AwaitBlock} node
  * @param {ComponentContext} context
  */
 export function AwaitBlock(node, context) {
-	context.state.template.push('<!>');
+	context.state.template.push_comment();
 
 	// Visit {#await <expression>} first to ensure that scopes are in the correct order
-	const expression = b.thunk(/** @type {Expression} */ (context.visit(node.expression)));
+	const expression = b.thunk(
+		build_expression(context, node.expression, node.metadata.expression),
+		node.metadata.expression.has_await
+	);
 
 	let then_block;
 	let catch_block;
@@ -50,18 +56,69 @@ export function AwaitBlock(node, context) {
 		catch_block = b.arrow(args, b.block([...declarations, ...block.body]));
 	}
 
-	context.state.init.push(
-		b.stmt(
-			b.call(
-				'$.await',
-				context.state.node,
-				expression,
-				node.pending
-					? b.arrow([b.id('$$anchor')], /** @type {BlockStatement} */ (context.visit(node.pending)))
-					: b.literal(null),
-				then_block,
-				catch_block
-			)
-		)
+	const stmt = add_svelte_meta(
+		b.call(
+			'$.await',
+			context.state.node,
+			expression,
+			node.pending
+				? b.arrow([b.id('$$anchor')], /** @type {BlockStatement} */ (context.visit(node.pending)))
+				: b.null,
+			then_block,
+			catch_block
+		),
+		node,
+		'await'
 	);
+
+	if (node.metadata.expression.has_blockers() || node.metadata.expression.has_await) {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.async',
+					context.state.node,
+					node.metadata.expression.blockers(),
+					b.array([]), // {#await await ...} is special insofar that the await should not be waited on
+					b.arrow([context.state.node], b.block([stmt]))
+				)
+			)
+		);
+	} else {
+		context.state.init.push(stmt);
+	}
+}
+
+/**
+ * @param {Pattern} node
+ * @param {import('zimmerframe').Context<AST.SvelteNode, ComponentClientTransformState>} context
+ * @returns {{ id: Pattern, declarations: null | Statement[] }}
+ */
+function create_derived_block_argument(node, context) {
+	if (node.type === 'Identifier') {
+		context.state.transform[node.name] = { read: get_value };
+		return { id: node, declarations: null };
+	}
+
+	const pattern = /** @type {Pattern} */ (context.visit(node));
+	const identifiers = extract_identifiers(node);
+
+	const id = b.id('$$source');
+	const value = b.id('$$value');
+
+	const block = b.block([
+		b.var(pattern, b.call('$.get', id)),
+		b.return(b.object(identifiers.map((identifier) => b.prop('init', identifier, identifier))))
+	]);
+
+	const declarations = [b.var(value, create_derived(context.state, block))];
+
+	for (const id of identifiers) {
+		context.state.transform[id.name] = { read: get_value };
+
+		declarations.push(
+			b.var(id, create_derived(context.state, b.member(b.call('$.get', value), id)))
+		);
+	}
+
+	return { id, declarations };
 }
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..9fcc33287c
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitExpression.js
@@ -0,0 +1,25 @@
+/** @import { AwaitExpression, Expression } from 'estree' */
+/** @import { Context } from '../types' */
+import { dev, is_ignored } from '../../../../state.js';
+import { save } from '../../../../utils/ast.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));
+
+	if (context.state.analysis.pickled_awaits.has(node)) {
+		return 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 };
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BinaryExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BinaryExpression.js
index c8c54a5a59..18028fa071 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BinaryExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BinaryExpression.js
@@ -1,7 +1,7 @@
 /** @import { Expression, BinaryExpression } from 'estree' */
 /** @import { ComponentContext } from '../types' */
 import { dev } from '../../../../state.js';
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 
 /**
  * @param {BinaryExpression} node
@@ -16,7 +16,7 @@ export function BinaryExpression(node, context) {
 				'$.strict_equals',
 				/** @type {Expression} */ (context.visit(node.left)),
 				/** @type {Expression} */ (context.visit(node.right)),
-				operator === '!==' && b.literal(false)
+				operator === '!==' && b.false
 			);
 		}
 
@@ -25,7 +25,7 @@ export function BinaryExpression(node, context) {
 				'$.equals',
 				/** @type {Expression} */ (context.visit(node.left)),
 				/** @type {Expression} */ (context.visit(node.right)),
-				operator === '!=' && b.literal(false)
+				operator === '!=' && b.false
 			);
 		}
 	}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
index 0a49e89cfe..6838e5006d 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
@@ -3,7 +3,7 @@
 /** @import { ComponentContext } from '../types' */
 import { dev, is_ignored } from '../../../../state.js';
 import { is_text_attribute } from '../../../../utils/ast.js';
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import { binding_properties } from '../../../bindings.js';
 import { build_attribute_value } from './shared/element.js';
 import { build_bind_this, validate_binding } from './shared/utils.js';
@@ -40,22 +40,38 @@ export function BindDirective(node, context) {
 			validate_binding(context.state, node, expression);
 		}
 
-		get = b.thunk(expression);
+		const assignment = /** @type {Expression} */ (
+			context.visit(b.assignment('=', /** @type {Pattern} */ (node.expression), b.id('$$value')))
+		);
 
-		/** @type {Expression | undefined} */
-		set = b.unthunk(
-			b.arrow(
+		if (dev) {
+			// in dev, create named functions, so that `$inspect(...)` delivers
+			// useful stack traces
+			get = b.function(b.id('get', node.name_loc), [], b.block([b.return(expression)]));
+			set = b.function(
+				b.id('set', node.name_loc),
 				[b.id('$$value')],
-				/** @type {Expression} */ (
-					context.visit(
-						b.assignment('=', /** @type {Pattern} */ (node.expression), b.id('$$value'))
+				b.block([b.stmt(assignment)])
+			);
+		} else {
+			// in prod, optimise for brevity
+			get = b.thunk(expression);
+
+			/** @type {Expression | undefined} */
+			set = b.unthunk(
+				b.arrow(
+					[b.id('$$value')],
+					/** @type {Expression} */ (
+						context.visit(
+							b.assignment('=', /** @type {Pattern} */ (node.expression), b.id('$$value'))
+						)
 					)
 				)
-			)
-		);
+			);
 
-		if (get === set) {
-			set = undefined;
+			if (get === set) {
+				set = undefined;
+			}
 		}
 	}
 
@@ -243,18 +259,32 @@ export function BindDirective(node, context) {
 		}
 	}
 
+	const defer =
+		node.name !== 'this' &&
+		parent.type === 'RegularElement' &&
+		parent.attributes.find((a) => a.type === 'UseDirective');
+
+	let statement = defer ? b.stmt(b.call('$.effect', b.thunk(call))) : b.stmt(call);
+
+	if (node.metadata.expression.is_async()) {
+		statement = b.stmt(
+			b.call(
+				'$.run_after_blockers',
+				node.metadata.expression.blockers(),
+				b.thunk(b.block([statement]))
+			)
+		);
+	}
+
 	// Bindings need to happen after attribute updates, therefore after the render effect, and in order with events/actions.
 	// bind:this is a special case as it's one-way and could influence the render effect.
 	if (node.name === 'this') {
-		context.state.init.push(b.stmt(call));
+		context.state.init.push(statement);
 	} else {
-		const has_use =
-			parent.type === 'RegularElement' && parent.attributes.find((a) => a.type === 'UseDirective');
-
-		if (has_use) {
-			context.state.init.push(b.stmt(b.call('$.effect', b.thunk(call))));
+		if (defer) {
+			context.state.init.push(statement);
 		} else {
-			context.state.after_update.push(b.stmt(call));
+			context.state.after_update.push(statement);
 		}
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BlockStatement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BlockStatement.js
index 5bfc8a3ef9..d1c0978a81 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BlockStatement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BlockStatement.js
@@ -1,7 +1,7 @@
-/** @import { ArrowFunctionExpression, BlockStatement, CallExpression, Expression, FunctionDeclaration, FunctionExpression, Statement } from 'estree' */
+/** @import { ArrowFunctionExpression, BlockStatement, Expression, FunctionDeclaration, FunctionExpression, Statement } from 'estree' */
 /** @import { ComponentContext } from '../types' */
 import { add_state_transformers } from './shared/declarations.js';
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 
 /**
  * @param {BlockStatement} node
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BreakStatement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BreakStatement.js
index 66b66c64f2..daa54018c0 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BreakStatement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BreakStatement.js
@@ -1,6 +1,6 @@
 /** @import { BreakStatement } from 'estree' */
 /** @import { ComponentContext } from '../types' */
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 
 /**
  * @param {BreakStatement} node
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 7a3057451a..f69bc5fe6e 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
@@ -1,22 +1,61 @@
 /** @import { CallExpression, Expression } from 'estree' */
 /** @import { Context } from '../types' */
 import { dev, is_ignored } from '../../../../state.js';
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import { get_rune } from '../../../scope.js';
-import { transform_inspect_rune } from '../../utils.js';
+import { should_proxy } from '../utils.js';
+import { get_inspect_args } from '../../utils.js';
 
 /**
  * @param {CallExpression} node
  * @param {Context} context
  */
 export function CallExpression(node, context) {
-	switch (get_rune(node, context.state.scope)) {
+	const rune = get_rune(node, context.state.scope);
+
+	switch (rune) {
 		case '$host':
 			return b.id('$$props.$$host');
 
 		case '$effect.tracking':
 			return b.call('$.effect_tracking');
 
+		// transform state field assignments in constructors
+		case '$state':
+		case '$state.raw': {
+			let arg = node.arguments[0];
+
+			/** @type {Expression | undefined} */
+			let value = undefined;
+
+			if (arg) {
+				value = /** @type {Expression} */ (context.visit(node.arguments[0]));
+
+				if (
+					rune === '$state' &&
+					should_proxy(/** @type {Expression} */ (arg), context.state.scope)
+				) {
+					value = b.call('$.proxy', value);
+				}
+			}
+
+			const callee = b.id('$.state', node.callee.loc);
+			return b.call(callee, value);
+		}
+
+		case '$derived':
+		case '$derived.by': {
+			let fn = /** @type {Expression} */ (context.visit(node.arguments[0]));
+
+			return b.call('$.derived', rune === '$derived' ? b.thunk(fn) : fn);
+		}
+
+		case '$state.eager':
+			return b.call(
+				'$.eager',
+				b.thunk(/** @type {Expression} */ (context.visit(node.arguments[0])))
+			);
+
 		case '$state.snapshot':
 			return b.call(
 				'$.snapshot',
@@ -24,15 +63,29 @@ export function CallExpression(node, context) {
 				is_ignored(node, 'state_snapshot_uncloneable') && b.true
 			);
 
+		case '$effect':
+		case '$effect.pre': {
+			const callee = rune === '$effect' ? '$.user_effect' : '$.user_pre_effect';
+			const func = /** @type {Expression} */ (context.visit(node.arguments[0]));
+
+			const expr = b.call(callee, /** @type {Expression} */ (func));
+			expr.callee.loc = node.callee.loc; // ensure correct mapping
+
+			return expr;
+		}
+
 		case '$effect.root':
 			return b.call(
 				'$.effect_root',
 				.../** @type {Expression[]} */ (node.arguments.map((arg) => context.visit(arg)))
 			);
 
+		case '$effect.pending':
+			return b.call('$.eager', b.thunk(b.call('$.pending')));
+
 		case '$inspect':
 		case '$inspect().with':
-			return transform_inspect_rune(node, context);
+			return transform_inspect_rune(rune, node, context);
 	}
 
 	if (
@@ -44,6 +97,9 @@ export function CallExpression(node, context) {
 		node.callee.property.type === 'Identifier' &&
 		['debug', 'dir', 'error', 'group', 'groupCollapsed', 'info', 'log', 'trace', 'warn'].includes(
 			node.callee.property.name
+		) &&
+		node.arguments.some(
+			(arg) => arg.type === 'SpreadElement' || context.state.scope.evaluate(arg).has_unknown
 		)
 	) {
 		return b.call(
@@ -60,3 +116,21 @@ export function CallExpression(node, context) {
 
 	context.next();
 }
+
+/**
+ * @param {'$inspect' | '$inspect().with'} rune
+ * @param {CallExpression} node
+ * @param {Context} context
+ */
+function transform_inspect_rune(rune, node, context) {
+	if (!dev) return b.empty;
+
+	const { args, inspector } = get_inspect_args(rune, node, context.visit);
+
+	// by passing an arrow function, the log appears to come from the `$inspect` callsite
+	// rather than the `inspect.js` file containing the utility
+	const id = b.id('$$args');
+	const fn = b.arrow([b.rest(id)], b.call(inspector, b.spread(id)));
+
+	return b.call('$.inspect', b.thunk(b.array(args)), fn, rune === '$inspect' && b.true);
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
index 7b3a9a4d0e..5bd9add2a5 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
@@ -1,236 +1,111 @@
-/** @import { ClassBody, Expression, Identifier, Literal, MethodDefinition, PrivateIdentifier, PropertyDefinition } from 'estree' */
-/** @import {  } from '#compiler' */
-/** @import { Context, StateField } from '../types' */
-import { dev, is_ignored } from '../../../../state.js';
-import * as b from '../../../../utils/builders.js';
-import { regex_invalid_identifier_chars } from '../../../patterns.js';
-import { get_rune } from '../../../scope.js';
-import { build_proxy_reassignment, should_proxy } from '../utils.js';
+/** @import { CallExpression, ClassBody, ClassDeclaration, ClassExpression, MethodDefinition, PropertyDefinition, StaticBlock } from 'estree' */
+/** @import { StateField } from '#compiler' */
+/** @import { Context } from '../types' */
+import * as b from '#compiler/builders';
+import { dev } from '../../../../state.js';
+import { get_parent } from '../../../../utils/ast.js';
+import { get_name } from '../../../nodes.js';
 
 /**
  * @param {ClassBody} node
  * @param {Context} context
  */
 export function ClassBody(node, context) {
-	if (!context.state.analysis.runes) {
+	const state_fields = context.state.analysis.classes.get(node);
+
+	if (!state_fields) {
+		// in legacy mode, do nothing
 		context.next();
 		return;
 	}
 
-	/** @type {Map<string, StateField>} */
-	const public_state = new Map();
+	/** @type {Array<MethodDefinition | PropertyDefinition | StaticBlock>} */
+	const body = [];
 
-	/** @type {Map<string, StateField>} */
-	const private_state = new Map();
+	const child_state = { ...context.state, state_fields };
 
-	/** @type {Map<(MethodDefinition|PropertyDefinition)["key"], string>} */
-	const definition_names = new Map();
+	for (const [name, field] of state_fields) {
+		if (name[0] === '#') {
+			continue;
+		}
 
-	/** @type {string[]} */
-	const private_ids = [];
+		// insert backing fields for stuff declared in the constructor
+		if (field.node.type === 'AssignmentExpression') {
+			const member = b.member(b.this, field.key);
 
-	for (const definition of node.body) {
-		if (
-			(definition.type === 'PropertyDefinition' || definition.type === 'MethodDefinition') &&
-			(definition.key.type === 'Identifier' ||
-				definition.key.type === 'PrivateIdentifier' ||
-				definition.key.type === 'Literal')
-		) {
-			const type = definition.key.type;
-			const name = get_name(definition.key, public_state);
-			if (!name) continue;
-
-			// we store the deconflicted name in the map so that we can access it later
-			definition_names.set(definition.key, name);
-
-			const is_private = type === 'PrivateIdentifier';
-			if (is_private) private_ids.push(name);
-
-			if (definition.value?.type === 'CallExpression') {
-				const rune = get_rune(definition.value, context.state.scope);
-				if (
-					rune === '$state' ||
-					rune === '$state.raw' ||
-					rune === '$derived' ||
-					rune === '$derived.by'
-				) {
-					/** @type {StateField} */
-					const field = {
-						kind:
-							rune === '$state'
-								? 'state'
-								: rune === '$state.raw'
-									? 'raw_state'
-									: rune === '$derived.by'
-										? 'derived_by'
-										: 'derived',
-						// @ts-expect-error this is set in the next pass
-						id: is_private ? definition.key : null
-					};
-
-					if (is_private) {
-						private_state.set(name, field);
-					} else {
-						public_state.set(name, field);
-					}
-				}
-			}
+			const should_proxy = field.type === '$state' && true; // TODO
+
+			const key = b.key(name);
+
+			body.push(
+				b.prop_def(field.key, null),
+
+				b.method('get', key, [], [b.return(b.call('$.get', member))]),
+
+				b.method(
+					'set',
+					key,
+					[b.id('value')],
+					[b.stmt(b.call('$.set', member, b.id('value'), should_proxy && b.true))]
+				)
+			);
 		}
 	}
 
-	// each `foo = $state()` needs a backing `#foo` field
-	for (const [name, field] of public_state) {
-		let deconflicted = name;
-		while (private_ids.includes(deconflicted)) {
-			deconflicted = '_' + deconflicted;
+	const declaration = /** @type {ClassDeclaration | ClassExpression} */ (
+		get_parent(context.path, -1)
+	);
+
+	// Replace parts of the class body
+	for (const definition of node.body) {
+		if (definition.type !== 'PropertyDefinition') {
+			body.push(
+				/** @type {MethodDefinition | StaticBlock} */ (context.visit(definition, child_state))
+			);
+			continue;
 		}
 
-		private_ids.push(deconflicted);
-		field.id = b.private_id(deconflicted);
-	}
+		const name = get_name(definition.key);
+		const field = name && /** @type {StateField} */ (state_fields.get(name));
 
-	/** @type {Array<MethodDefinition | PropertyDefinition>} */
-	const body = [];
+		if (!field) {
+			body.push(/** @type {PropertyDefinition} */ (context.visit(definition, child_state)));
+			continue;
+		}
 
-	const child_state = { ...context.state, public_state, private_state };
+		if (name[0] === '#') {
+			let value = definition.value
+				? /** @type {CallExpression} */ (context.visit(definition.value, child_state))
+				: undefined;
 
-	// Replace parts of the class body
-	for (const definition of node.body) {
-		if (
-			definition.type === 'PropertyDefinition' &&
-			(definition.key.type === 'Identifier' ||
-				definition.key.type === 'PrivateIdentifier' ||
-				definition.key.type === 'Literal')
-		) {
-			const name = definition_names.get(definition.key);
-			if (!name) continue;
-
-			const is_private = definition.key.type === 'PrivateIdentifier';
-			const field = (is_private ? private_state : public_state).get(name);
-
-			if (definition.value?.type === 'CallExpression' && field !== undefined) {
-				let value = null;
-
-				if (definition.value.arguments.length > 0) {
-					const init = /** @type {Expression} **/ (
-						context.visit(definition.value.arguments[0], child_state)
-					);
-
-					value =
-						field.kind === 'state'
-							? b.call(
-									'$.state',
-									should_proxy(init, context.state.scope) ? b.call('$.proxy', init) : init
-								)
-							: field.kind === 'raw_state'
-								? b.call('$.state', init)
-								: field.kind === 'derived_by'
-									? b.call('$.derived', init)
-									: b.call('$.derived', b.thunk(init));
-				} else {
-					// if no arguments, we know it's state as `$derived()` is a compile error
-					value = b.call('$.state');
-				}
-
-				if (is_private) {
-					body.push(b.prop_def(field.id, value));
-				} else {
-					// #foo;
-					const member = b.member(b.this, field.id);
-					body.push(b.prop_def(field.id, value));
-
-					// get foo() { return this.#foo; }
-					body.push(b.method('get', definition.key, [], [b.return(b.call('$.get', member))]));
-
-					if (field.kind === 'state') {
-						// set foo(value) { this.#foo = value; }
-						const value = b.id('value');
-						const prev = b.member(b.this, field.id);
-
-						body.push(
-							b.method(
-								'set',
-								definition.key,
-								[value],
-								[b.stmt(b.call('$.set', member, build_proxy_reassignment(value, prev)))]
-							)
-						);
-					}
-
-					if (field.kind === 'raw_state') {
-						// set foo(value) { this.#foo = value; }
-						const value = b.id('value');
-						body.push(
-							b.method('set', definition.key, [value], [b.stmt(b.call('$.set', member, value))])
-						);
-					}
-
-					if (dev && (field.kind === 'derived' || field.kind === 'derived_by')) {
-						body.push(
-							b.method(
-								'set',
-								definition.key,
-								[b.id('_')],
-								[b.throw_error(`Cannot update a derived property ('${name}')`)]
-							)
-						);
-					}
-				}
-				continue;
+			if (dev && field.node === definition) {
+				value = b.call('$.tag', value, b.literal(`${declaration.id?.name ?? '[class]'}.${name}`));
 			}
-		}
 
-		body.push(/** @type {MethodDefinition} **/ (context.visit(definition, child_state)));
-	}
+			body.push(b.prop_def(definition.key, value));
+		} else if (field.node === definition) {
+			let call = /** @type {CallExpression} */ (context.visit(field.value, child_state));
 
-	if (dev && public_state.size > 0) {
-		// add an `[$.ADD_OWNER]` method so that a class with state fields can widen ownership
-		body.push(
-			b.method(
-				'method',
-				b.id('$.ADD_OWNER'),
-				[b.id('owner')],
-				Array.from(public_state)
-					// Only run ownership addition on $state fields.
-					// Theoretically someone could create a `$state` while creating `$state.raw` or inside a `$derived.by`,
-					// but that feels so much of an edge case that it doesn't warrant a perf hit for the common case.
-					.filter(([_, { kind }]) => kind === 'state')
-					.map(([name]) =>
-						b.stmt(
-							b.call(
-								'$.add_owner',
-								b.call('$.get', b.member(b.this, b.private_id(name))),
-								b.id('owner'),
-								b.literal(false),
-								is_ignored(node, 'ownership_invalid_binding') && b.true
-							)
-						)
-					),
-				true
-			)
-		);
-	}
+			if (dev) {
+				call = b.call('$.tag', call, b.literal(`${declaration.id?.name ?? '[class]'}.${name}`));
+			}
+			const member = b.member(b.this, field.key);
+			const should_proxy = field.type === '$state' && true; // TODO
 
-	return { ...node, body };
-}
+			body.push(
+				b.prop_def(field.key, call),
 
-/**
- * @param {Identifier | PrivateIdentifier | Literal} node
- * @param {Map<string, StateField>} public_state
- */
-function get_name(node, public_state) {
-	if (node.type === 'Literal') {
-		let name = node.value?.toString().replace(regex_invalid_identifier_chars, '_');
-
-		// the above could generate conflicts because it has to generate a valid identifier
-		// so stuff like `0` and `1` or `state%` and `state^` will result in the same string
-		// so we have to de-conflict. We can only check `public_state` because private state
-		// can't have literal keys
-		while (name && public_state.has(name)) {
-			name = '_' + name;
+				b.method('get', definition.key, [], [b.return(b.call('$.get', member))]),
+
+				b.method(
+					'set',
+					definition.key,
+					[b.id('value')],
+					[b.stmt(b.call('$.set', member, b.id('value'), should_proxy && b.true))]
+				)
+			);
 		}
-		return name;
-	} else {
-		return node.name;
 	}
+
+	return { ...node, body };
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Comment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Comment.js
index 24011e62aa..21d1619f8a 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Comment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Comment.js
@@ -7,5 +7,5 @@
  */
 export function Comment(node, context) {
 	// We'll only get here if comments are not filtered out, which they are unless preserveComments is true
-	context.state.template.push(`<!--${node.data}-->`);
+	context.state.template.push_comment(node.data);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Component.js
index a10a3da6e3..12c7b2142b 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Component.js
@@ -1,7 +1,5 @@
-/** @import { Expression } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
-import * as b from '../../../../utils/builders.js';
 import { build_component } from './shared/component.js';
 
 /**
@@ -9,24 +7,6 @@ import { build_component } from './shared/component.js';
  * @param {ComponentContext} context
  */
 export function Component(node, context) {
-	if (node.metadata.dynamic) {
-		// Handle dynamic references to what seems like static inline components
-		const component = build_component(node, '$$component', context, b.id('$$anchor'));
-		context.state.init.push(
-			b.stmt(
-				b.call(
-					'$.component',
-					context.state.node,
-					// TODO use untrack here to not update when binding changes?
-					// Would align with Svelte 4 behavior, but it's arguably nicer/expected to update this
-					b.thunk(/** @type {Expression} */ (context.visit(b.member_id(node.name)))),
-					b.arrow([b.id('$$anchor'), b.id('$$component')], b.block([component]))
-				)
-			)
-		);
-		return;
-	}
-
-	const component = build_component(node, node.name, context);
+	const component = build_component(node, node.name, node.name_loc, context);
 	context.state.init.push(component);
 }
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 7e33aea435..d05d7a8ed9 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ConstTag.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ConstTag.js
@@ -1,11 +1,13 @@
-/** @import { Expression, Pattern } from 'estree' */
+/** @import { Expression, Identifier, Pattern, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import { dev } from '../../../../state.js';
 import { extract_identifiers } from '../../../../utils/ast.js';
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import { create_derived } from '../utils.js';
 import { get_value } from './shared/declarations.js';
+import { build_expression } from './shared/utils.js';
+import { add_async_declaration } from './DeclarationTag.js';
 
 /**
  * @param {AST.ConstTag} node
@@ -15,23 +17,17 @@ export function ConstTag(node, context) {
 	const declaration = node.declaration.declarations[0];
 	// TODO we can almost certainly share some code with $derived(...)
 	if (declaration.id.type === 'Identifier') {
-		context.state.init.push(
-			b.const(
-				declaration.id,
-				create_derived(
-					context.state,
-					b.thunk(/** @type {Expression} */ (context.visit(declaration.init)))
-				)
-			)
-		);
+		const init = build_expression(context, declaration.init, node.metadata.expression);
 
-		context.state.transform[declaration.id.name] = { read: get_value };
+		let expression = create_derived(context.state, init, node.metadata.expression.has_await);
 
-		// we need to eagerly evaluate the expression in order to hit any
-		// 'Cannot access x before initialization' errors
 		if (dev) {
-			context.state.init.push(b.stmt(b.call('$.get', declaration.id)));
+			expression = b.call('$.tag', expression, b.literal(declaration.id.name));
 		}
+
+		context.state.transform[declaration.id.name] = { read: get_value };
+
+		add_const_declaration(context, declaration.id, expression, node.metadata);
 	} else {
 		const identifiers = extract_identifiers(declaration.id);
 		const tmp = b.id(context.state.scope.generate('computed_const'));
@@ -44,29 +40,32 @@ export function ConstTag(node, context) {
 			delete transform[node.name];
 		}
 
-		const child_state = { ...context.state, transform };
+		const child_state = /** @type {ComponentContext['state']} */ ({
+			...context.state,
+			transform
+		});
 
 		// TODO optimise the simple `{ x } = y` case — we can just return `y`
 		// instead of destructuring it only to return a new object
-		const fn = b.arrow(
-			[],
-			b.block([
-				b.const(
-					/** @type {Pattern} */ (context.visit(declaration.id, child_state)),
-					/** @type {Expression} */ (context.visit(declaration.init, child_state))
-				),
-				b.return(b.object(identifiers.map((node) => b.prop('init', node, node))))
-			])
+		const init = build_expression(
+			{ ...context, state: child_state },
+			declaration.init,
+			node.metadata.expression
 		);
 
-		context.state.init.push(b.const(tmp, create_derived(context.state, fn)));
+		const block = b.block([
+			b.const(/** @type {Pattern} */ (context.visit(declaration.id, child_state)), init),
+			b.return(b.object(identifiers.map((node) => b.prop('init', node, node))))
+		]);
+
+		let expression = create_derived(context.state, block, node.metadata.expression.has_await);
 
-		// we need to eagerly evaluate the expression in order to hit any
-		// 'Cannot access x before initialization' errors
 		if (dev) {
-			context.state.init.push(b.stmt(b.call('$.get', tmp)));
+			expression = b.call('$.tag', expression, b.literal('[@const]'));
 		}
 
+		add_const_declaration(context, tmp, expression, node.metadata);
+
 		for (const node of identifiers) {
 			context.state.transform[node.name] = {
 				read: (node) => b.member(b.call('$.get', tmp), node)
@@ -74,3 +73,29 @@ export function ConstTag(node, context) {
 		}
 	}
 }
+
+/**
+ * @param {ComponentContext} context
+ * @param {Identifier} id
+ * @param {Expression} expression
+ * @param {AST.ConstTag['metadata']} metadata
+ */
+function add_const_declaration(context, id, expression, metadata) {
+	// we need to eagerly evaluate the expression in order to hit any
+	// 'Cannot access x before initialization' errors
+	const after = dev ? [b.stmt(b.call('$.get', id))] : [];
+
+	if (metadata.promises_id) {
+		add_async_declaration(
+			context,
+			metadata,
+			[id],
+			[b.stmt(b.assignment('=', id, expression))],
+			'let'
+		);
+	} else {
+		const { state } = context;
+		state.consts.push(b.const(id, expression));
+		state.consts.push(...after);
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/DebugTag.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/DebugTag.js
index d2697fd039..01a7e0e872 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/DebugTag.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/DebugTag.js
@@ -1,13 +1,17 @@
 /** @import { Expression} from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 
 /**
  * @param {AST.DebugTag} node
  * @param {ComponentContext} context
  */
 export function DebugTag(node, context) {
+	const blockers = node.identifiers
+		.map((identifier) => context.state.scope.get(identifier.name)?.blocker)
+		.filter((blocker) => blocker != null);
+
 	const object = b.object(
 		node.identifiers.map((identifier) => {
 			const visited = b.call('$.snapshot', /** @type {Expression} */ (context.visit(identifier)));
@@ -20,9 +24,11 @@ export function DebugTag(node, context) {
 		})
 	);
 
-	const call = b.call('console.log', object);
+	const args = [b.thunk(b.block([b.stmt(b.call('console.log', object)), b.debugger]))];
 
-	context.state.init.push(
-		b.stmt(b.call('$.template_effect', b.thunk(b.block([b.stmt(call), b.debugger]))))
-	);
+	if (blockers.length > 0) {
+		args.push(b.array([]), b.array([]), b.array(blockers));
+	}
+
+	context.state.init.push(b.stmt(b.call('$.template_effect', ...args)));
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/DeclarationTag.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/DeclarationTag.js
new file mode 100644
index 0000000000..abec5e828f
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/DeclarationTag.js
@@ -0,0 +1,89 @@
+/** @import { Expression, Identifier, Pattern, Statement, ExpressionStatement, VariableDeclaration } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import { extract_identifiers, has_await_expression } from '../../../../utils/ast.js';
+import * as b from '#compiler/builders';
+import { add_state_transformers } from './shared/declarations.js';
+
+/**
+ * @param {AST.DeclarationTag} node
+ * @param {ComponentContext} context
+ */
+export function DeclarationTag(node, context) {
+	// register the transformers _before_ visiting the declaration, so that
+	// later declarators can reference earlier ones (e.g. `{let a = $state(0), b = $derived(a * 2)}`)
+	add_state_transformers(context);
+	const declaration = /** @type {Statement | undefined} */ (context.visit(node.declaration));
+
+	if (
+		node.metadata.promises_id &&
+		node.declaration.type === 'VariableDeclaration' &&
+		declaration?.type === 'VariableDeclaration'
+	) {
+		const { ids, assignments } = build_async_declaration_parts(declaration);
+		add_async_declaration(context, node.metadata, ids, assignments, declaration.kind);
+	} else {
+		context.state.consts.push(declaration ?? node.declaration);
+	}
+}
+
+/**
+ * @param {VariableDeclaration} declaration
+ */
+export function build_async_declaration_parts(declaration) {
+	const ids = new Map();
+	for (const declarator of declaration.declarations) {
+		for (const id of extract_identifiers(declarator.id)) {
+			ids.set(id.name, id);
+		}
+	}
+
+	const assignments = declaration.declarations
+		.filter((declarator) => declarator.init !== null)
+		.map((declarator) =>
+			b.stmt(
+				b.assignment(
+					'=',
+					/** @type {Pattern} */ (declarator.id),
+					/** @type {Expression} */ (declarator.init)
+				)
+			)
+		);
+
+	return { ids: [...ids.values()], assignments };
+}
+
+/**
+ * @param {ComponentContext} context
+ * @param {AST.ConstTag['metadata'] | AST.DeclarationTag['metadata']} metadata
+ * @param {Identifier[]} ids
+ * @param {ExpressionStatement[]} assignments
+ * @param {VariableDeclaration['kind']} [kind]
+ */
+export function add_async_declaration(context, metadata, ids, assignments, kind = 'let') {
+	const run = (context.state.async_consts ??= {
+		id: /** @type {Identifier} */ (metadata.promises_id),
+		thunks: []
+	});
+
+	for (const id of ids) {
+		context.state.consts.push(kind === 'var' ? b.var(id.name) : b.let(id.name));
+	}
+
+	const blockers = [...metadata.expression.dependencies]
+		.map((dep) => dep.blocker)
+		.filter((b) => b !== null && b.object !== context.state.async_consts?.id);
+
+	if (blockers.length === 1) {
+		run.thunks.push(b.thunk(b.member(/** @type {Expression} */ (blockers[0]), 'promise')));
+	} else if (blockers.length > 0) {
+		run.thunks.push(b.thunk(b.call('$.wait', b.array(blockers))));
+	}
+
+	// keep the number of thunks pushed in sync with analysis phase
+	const has_await =
+		metadata.expression.has_await ||
+		assignments.some((assignment) => has_await_expression(assignment));
+	const body = assignments.length === 1 ? assignments[0].expression : b.block(assignments);
+	run.thunks.push(b.thunk(body, has_await));
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
index 9f70981205..a1371b516a 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
@@ -11,9 +11,9 @@ import {
 } from '../../../../../constants.js';
 import { dev } from '../../../../state.js';
 import { extract_paths, object } from '../../../../utils/ast.js';
-import * as b from '../../../../utils/builders.js';
-import { build_getter } from '../utils.js';
+import * as b from '#compiler/builders';
 import { get_value } from './shared/declarations.js';
+import { build_expression, add_svelte_meta } from './shared/utils.js';
 
 /**
  * @param {AST.EachBlock} node
@@ -24,19 +24,22 @@ export function EachBlock(node, context) {
 
 	// expression should be evaluated in the parent scope, not the scope
 	// created by the each block itself
-	const collection = /** @type {Expression} */ (
-		context.visit(node.expression, {
-			...context.state,
-			scope: /** @type {Scope} */ (context.state.scope.parent)
-		})
+	const parent_scope_state = {
+		...context.state,
+		scope: /** @type {Scope} */ (context.state.scope.parent)
+	};
+
+	const collection = build_expression(
+		{
+			...context,
+			state: parent_scope_state
+		},
+		node.expression,
+		node.metadata.expression
 	);
 
 	if (!each_node_meta.is_controlled) {
-		context.state.template.push('<!>');
-	}
-
-	if (each_node_meta.array_name !== null) {
-		context.state.init.push(b.const(each_node_meta.array_name, b.thunk(collection)));
+		context.state.template.push_comment();
 	}
 
 	let flags = 0;
@@ -98,43 +101,31 @@ export function EachBlock(node, context) {
 	}
 
 	// If the array is a store expression, we need to invalidate it when the array is changed.
-	// This doesn't catch all cases, but all the ones that Svelte 4 catches, too.
 	let store_to_invalidate = '';
-	if (node.expression.type === 'Identifier' || node.expression.type === 'MemberExpression') {
-		const id = object(node.expression);
-		if (id) {
-			const binding = context.state.scope.get(id.name);
-			if (binding?.kind === 'store_sub') {
-				store_to_invalidate = id.name;
-			}
+	for (const binding of node.metadata.expression.dependencies) {
+		if (binding.kind === 'store_sub') {
+			store_to_invalidate = binding.node.name;
+			break;
 		}
 	}
 
-	// Legacy mode: find the parent each blocks which contain the arrays to invalidate
-	const indirect_dependencies = collect_parent_each_blocks(context).flatMap((block) => {
-		const array = /** @type {Expression} */ (context.visit(block.expression));
-		const transitive_dependencies = build_transitive_dependencies(
-			block.metadata.expression.dependencies,
-			context
-		);
-		return [array, ...transitive_dependencies];
-	});
-
-	if (each_node_meta.array_name) {
-		indirect_dependencies.push(b.call(each_node_meta.array_name));
-	} else {
-		indirect_dependencies.push(collection);
+	/** @type {Identifier | null} */
+	let collection_id = null;
 
-		const transitive_dependencies = build_transitive_dependencies(
-			each_node_meta.expression.dependencies,
-			context
-		);
-		indirect_dependencies.push(...transitive_dependencies);
+	// Check if inner scope shadows something from outer scope.
+	// This is necessary because we need access to the array expression of the each block
+	// in the inner scope if bindings are used, in order to invalidate the array.
+	for (const [name] of context.state.scope.declarations) {
+		if (context.state.scope.parent?.get(name) != null) {
+			collection_id = context.state.scope.root.unique('$$array');
+			break;
+		}
 	}
 
 	const child_state = {
 		...context.state,
-		transform: { ...context.state.transform }
+		transform: { ...context.state.transform },
+		store_to_invalidate
 	};
 
 	/** The state used when generating the key function, if necessary */
@@ -171,19 +162,51 @@ export function EachBlock(node, context) {
 	/** @type {Statement[]} */
 	const declarations = [];
 
-	const invalidate = b.call(
-		'$.invalidate_inner_signals',
-		b.thunk(b.sequence(indirect_dependencies))
-	);
-
 	const invalidate_store = store_to_invalidate
 		? b.call('$.invalidate_store', b.id('$$stores'), b.literal(store_to_invalidate))
 		: undefined;
 
 	/** @type {Expression[]} */
 	const sequence = [];
-	if (!context.state.analysis.runes) sequence.push(invalidate);
-	if (invalidate_store) sequence.push(invalidate_store);
+
+	if (!context.state.analysis.runes) {
+		/** @type {Set<Identifier>} */
+		const transitive_deps = new Set();
+
+		if (collection_id) {
+			transitive_deps.add(collection_id);
+			child_state.transform[collection_id.name] = { read: b.call };
+		} else {
+			for (const binding of each_node_meta.transitive_deps) {
+				transitive_deps.add(binding.node);
+			}
+		}
+
+		for (const block of collect_parent_each_blocks(context)) {
+			for (const binding of block.metadata.transitive_deps) {
+				transitive_deps.add(binding.node);
+			}
+		}
+
+		if (transitive_deps.size > 0) {
+			const invalidate = b.call(
+				'$.invalidate_inner_signals',
+				b.thunk(
+					b.sequence(
+						[...transitive_deps].map(
+							(node) => /** @type {Expression} */ (context.visit({ ...node }, child_state))
+						)
+					)
+				)
+			);
+
+			sequence.push(invalidate);
+		}
+	}
+
+	if (invalidate_store) {
+		sequence.push(invalidate_store);
+	}
 
 	if (node.context?.type === 'Identifier') {
 		const binding = /** @type {Binding} */ (context.state.scope.get(node.context.name));
@@ -195,7 +218,7 @@ export function EachBlock(node, context) {
 					// TODO 6.0 this only applies in legacy mode, reassignments are
 					// forbidden in runes mode
 					return b.member(
-						each_node_meta.array_name ? b.call(each_node_meta.array_name) : collection,
+						collection_id ? b.call(collection_id) : collection,
 						(flags & EACH_INDEX_REACTIVE) !== 0 ? get_value(index) : index,
 						true
 					);
@@ -207,7 +230,7 @@ export function EachBlock(node, context) {
 				uses_index = true;
 
 				const left = b.member(
-					each_node_meta.array_name ? b.call(each_node_meta.array_name) : collection,
+					collection_id ? b.call(collection_id) : collection,
 					(flags & EACH_INDEX_REACTIVE) !== 0 ? get_value(index) : index,
 					true
 				);
@@ -224,13 +247,21 @@ export function EachBlock(node, context) {
 	} else if (node.context) {
 		const unwrapped = (flags & EACH_ITEM_REACTIVE) !== 0 ? b.call('$.get', item) : item;
 
-		for (const path of extract_paths(node.context)) {
+		const { inserts, paths } = extract_paths(node.context, unwrapped);
+
+		for (const { id, value } of inserts) {
+			id.name = context.state.scope.generate('$$array');
+			child_state.transform[id.name] = { read: get_value };
+
+			const expression = /** @type {Expression} */ (context.visit(b.thunk(value), child_state));
+			declarations.push(b.var(id, b.call('$.derived', expression)));
+		}
+
+		for (const path of paths) {
 			const name = /** @type {Identifier} */ (path.node).name;
 			const needs_derived = path.has_default_value; // to ensure that default value is only called once
 
-			const fn = b.thunk(
-				/** @type {Expression} */ (context.visit(path.expression?.(unwrapped), child_state))
-			);
+			const fn = b.thunk(/** @type {Expression} */ (context.visit(path.expression, child_state)));
 
 			declarations.push(b.let(path.node, needs_derived ? b.call('$.derived_safe_equal', fn) : fn));
 
@@ -239,7 +270,7 @@ export function EachBlock(node, context) {
 			child_state.transform[name] = {
 				read,
 				assign: (_, value) => {
-					const left = /** @type {Pattern} */ (path.update_expression(unwrapped));
+					const left = /** @type {Pattern} */ (path.update_expression);
 					return b.sequence([b.assignment('=', left, value), ...sequence]);
 				},
 				mutate: (_, mutation) => {
@@ -277,22 +308,22 @@ 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.has_await;
+
+	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);
+	if (collection_id) render_args.push(collection_id);
 
 	/** @type {Expression[]} */
 	const args = [
 		context.state.node,
 		b.literal(flags),
-		each_node_meta.array_name ? each_node_meta.array_name : b.thunk(collection),
+		thunk,
 		key_function,
-		b.arrow(
-			uses_index ? [b.id('$$anchor'), item, index] : [b.id('$$anchor'), item],
-			b.block(declarations.concat(block.body))
-		)
+		b.arrow(render_args, b.block(declarations.concat(block.body)))
 	];
 
 	if (node.fallback) {
@@ -301,7 +332,26 @@ export function EachBlock(node, context) {
 		);
 	}
 
-	context.state.init.push(b.stmt(b.call('$.each', ...args)));
+	const statements = [add_svelte_meta(b.call('$.each', ...args), node, 'each')];
+
+	if (node.metadata.expression.is_async()) {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.async',
+					context.state.node,
+					node.metadata.expression.blockers(),
+					has_await ? b.array([get_collection]) : b.void0,
+					b.arrow(
+						has_await ? [context.state.node, b.id('$$collection')] : [context.state.node],
+						b.block(statements)
+					)
+				)
+			)
+		);
+	} else {
+		context.state.init.push(...statements);
+	}
 }
 
 /**
@@ -310,41 +360,3 @@ export function EachBlock(node, context) {
 function collect_parent_each_blocks(context) {
 	return /** @type {AST.EachBlock[]} */ (context.path.filter((node) => node.type === 'EachBlock'));
 }
-
-/**
- * @param {Set<Binding>} references
- * @param {ComponentContext} context
- */
-function build_transitive_dependencies(references, context) {
-	/** @type {Set<Binding>} */
-	const dependencies = new Set();
-
-	for (const ref of references) {
-		const deps = collect_transitive_dependencies(ref);
-		for (const dep of deps) {
-			dependencies.add(dep);
-		}
-	}
-
-	return [...dependencies].map((dep) => build_getter({ ...dep.node }, context.state));
-}
-
-/**
- * @param {Binding} binding
- * @param {Set<Binding>} seen
- * @returns {Binding[]}
- */
-function collect_transitive_dependencies(binding, seen = new Set()) {
-	if (binding.kind !== 'legacy_reactive') return [];
-
-	for (const dep of binding.legacy_dependencies) {
-		if (!seen.has(dep)) {
-			seen.add(dep);
-			for (const transitive_dep of collect_transitive_dependencies(dep, seen)) {
-				seen.add(transitive_dep);
-			}
-		}
-	}
-
-	return [...seen];
-}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ExportNamedDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ExportNamedDeclaration.js
index cab7f90c3d..16e400d50c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ExportNamedDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ExportNamedDeclaration.js
@@ -1,6 +1,6 @@
 /** @import { ExportNamedDeclaration } from 'estree' */
 /** @import { ComponentContext } from '../types' */
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 
 /**
  * @param {ExportNamedDeclaration} node
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ExpressionStatement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ExpressionStatement.js
index 0424e595be..edffcb585c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ExpressionStatement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ExpressionStatement.js
@@ -1,6 +1,6 @@
-/** @import { Expression, ExpressionStatement } from 'estree' */
+/** @import { ExpressionStatement } from 'estree' */
 /** @import { ComponentContext } from '../types' */
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import { get_rune } from '../../../scope.js';
 
 /**
@@ -11,16 +11,6 @@ export function ExpressionStatement(node, context) {
 	if (node.expression.type === 'CallExpression') {
 		const rune = get_rune(node.expression, context.state.scope);
 
-		if (rune === '$effect' || rune === '$effect.pre') {
-			const callee = rune === '$effect' ? '$.user_effect' : '$.user_pre_effect';
-			const func = /** @type {Expression} */ (context.visit(node.expression.arguments[0]));
-
-			const expr = b.call(callee, /** @type {Expression} */ (func));
-			expr.callee.loc = node.expression.callee.loc; // ensure correct mapping
-
-			return b.stmt(expr);
-		}
-
 		if (rune === '$inspect.trace') {
 			return b.empty;
 		}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ForOfStatement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ForOfStatement.js
new file mode 100644
index 0000000000..8ae67f49d1
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ForOfStatement.js
@@ -0,0 +1,25 @@
+/** @import { Expression, ForOfStatement, Pattern, Statement, VariableDeclaration } from 'estree' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '#compiler/builders';
+import { dev, is_ignored } from '../../../../state.js';
+
+/**
+ * @param {ForOfStatement} node
+ * @param {ComponentContext} context
+ */
+export function ForOfStatement(node, context) {
+	if (
+		node.await &&
+		dev &&
+		!is_ignored(node, 'await_reactivity_loss') &&
+		context.state.options.experimental.async
+	) {
+		const left = /** @type {VariableDeclaration | Pattern} */ (context.visit(node.left));
+		const argument = /** @type {Expression} */ (context.visit(node.right));
+		const body = /** @type {Statement} */ (context.visit(node.body));
+		const right = b.call('$.for_await_track_reactivity_loss', argument);
+		return b.for_of(left, right, body, true);
+	}
+
+	context.next();
+}
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 0e6ea29614..893b1db568 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js
@@ -1,14 +1,13 @@
-/** @import { Expression, Identifier, Statement, TemplateElement } from 'estree' */
-/** @import { AST, Namespace } from '#compiler' */
-/** @import { SourceLocation } from '#shared' */
+/** @import { Expression, Statement } from 'estree' */
+/** @import { AST } from '#compiler' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
+import * as b from '#compiler/builders';
 import { TEMPLATE_FRAGMENT, TEMPLATE_USE_IMPORT_NODE } from '../../../../../constants.js';
-import { dev } from '../../../../state.js';
-import * as b from '../../../../utils/builders.js';
-import { sanitize_template_string } from '../../../../utils/sanitize_template_string.js';
 import { clean_nodes, infer_namespace } from '../../utils.js';
+import { transform_template } from '../transform-template/index.js';
+import { Template } from '../transform-template/template.js';
 import { process_children } from './shared/fragment.js';
-import { build_render_statement } from './shared/utils.js';
+import { build_render_statement, Memoizer } from './shared/utils.js';
 
 /**
  * @param {AST.Fragment} node
@@ -18,7 +17,7 @@ export function Fragment(node, context) {
 	// Creates a new block which looks roughly like this:
 	// ```js
 	// // hoisted:
-	// const block_name = $.template(`...`);
+	// const block_name = $.from_html(`...`);
 	//
 	// // for the main block:
 	// const id = block_name();
@@ -48,9 +47,11 @@ 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');
-
-	const template_name = context.state.scope.root.unique('root'); // TODO infer name from parent
+		(trimmed[0].type === 'SvelteFragment' ||
+			trimmed[0].type === 'TitleElement' ||
+			(trimmed[0].type === 'IfBlock' &&
+				trimmed[0].elseif &&
+				/** @type {AST.IfBlock} */ (parent).metadata.flattened?.includes(trimmed[0])));
 
 	/** @type {Statement[]} */
 	const body = [];
@@ -61,81 +62,48 @@ export function Fragment(node, context) {
 	/** @type {ComponentClientTransformState} */
 	const state = {
 		...context.state,
-		before_init: [],
+		is_standalone,
 		init: [],
+		snippets: [],
+		consts: [],
+		let_directives: [],
 		update: [],
 		after_update: [],
-		template: [],
-		locations: [],
+		memoizer: new Memoizer(),
+		template: new Template(),
 		transform: { ...context.state.transform },
 		metadata: {
-			context: {
-				template_needs_import_node: false,
-				template_contains_script_tag: false
-			},
 			namespace,
 			bound_contenteditable: context.state.metadata.bound_contenteditable
-		}
+		},
+		async_consts: undefined
 	};
 
 	for (const node of hoisted) {
 		context.visit(node, state);
 	}
 
-	if (is_text_first) {
-		// skip over inserted comment
-		body.push(b.stmt(b.call('$.next')));
-	}
-
-	/**
-	 * @param {Identifier} template_name
-	 * @param {Expression[]} args
-	 */
-	const add_template = (template_name, args) => {
-		let call = b.call(get_template_function(namespace, state), ...args);
-		if (dev) {
-			call = b.call(
-				'$.add_locations',
-				call,
-				b.member(b.id(context.state.analysis.name), '$.FILENAME', true),
-				build_locations(state.locations)
-			);
-		}
-
-		context.state.hoisted.push(b.var(template_name, call));
-	};
-
 	if (is_single_element) {
 		const element = /** @type {AST.RegularElement} */ (trimmed[0]);
 
-		const id = b.id(context.state.scope.generate(element.name));
+		const id = b.id(context.state.scope.generate(element.name), element.name_loc);
 
 		context.visit(element, {
 			...state,
 			node: id
 		});
 
-		/** @type {Expression[]} */
-		const args = [join_template(state.template)];
+		let flags = state.template.needs_import_node ? TEMPLATE_USE_IMPORT_NODE : undefined;
 
-		if (state.metadata.context.template_needs_import_node) {
-			args.push(b.literal(TEMPLATE_USE_IMPORT_NODE));
-		}
+		const template_name = transform_template(state, 'root', flags);
 
-		add_template(template_name, args);
-
-		body.push(b.var(id, b.call(template_name)), ...state.before_init, ...state.init);
+		state.init.unshift(b.var(id, b.call(template_name)));
 		close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
 	} else if (is_single_child_not_needing_template) {
 		context.visit(trimmed[0], state);
-		body.push(...state.before_init, ...state.init);
 	} else if (trimmed.length === 1 && trimmed[0].type === 'Text') {
 		const id = b.id(context.state.scope.generate('text'));
-		body.push(
-			b.var(id, b.call('$.text', b.literal(trimmed[0].data))),
-			...state.before_init,
-			...state.init
-		);
+		state.init.unshift(b.var(id, b.call('$.text', b.literal(trimmed[0].data))));
 		close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
 	} else if (trimmed.length > 0) {
 		const id = b.id(context.state.scope.generate('fragment'));
@@ -153,44 +121,54 @@ export function Fragment(node, context) {
 				state
 			});
 
-			body.push(b.var(id, b.call('$.text')), ...state.before_init, ...state.init);
+			state.init.unshift(b.var(id, b.call('$.text')));
 			close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
+		} else if (is_standalone) {
+			// no need to create a template, we can just use the existing block's anchor
+			process_children(trimmed, () => b.id('$$anchor'), false, {
+				...context,
+				state
+			});
 		} else {
-			if (is_standalone) {
-				// no need to create a template, we can just use the existing block's anchor
-				process_children(trimmed, () => b.id('$$anchor'), false, { ...context, state });
-			} else {
-				/** @type {(is_text: boolean) => Expression} */
-				const expression = (is_text) => b.call('$.first_child', id, is_text && b.true);
+			/** @type {(is_text: boolean) => Expression} */
+			const expression = (is_text) => b.call('$.first_child', id, is_text && b.true);
 
-				process_children(trimmed, expression, false, { ...context, state });
+			process_children(trimmed, expression, false, { ...context, state });
 
-				let flags = TEMPLATE_FRAGMENT;
+			let flags = TEMPLATE_FRAGMENT;
 
-				if (state.metadata.context.template_needs_import_node) {
-					flags |= TEMPLATE_USE_IMPORT_NODE;
-				}
-
-				if (state.template.length === 1 && state.template[0] === '<!>') {
-					// special case — we can use `$.comment` instead of creating a unique template
-					body.push(b.var(id, b.call('$.comment')));
-				} else {
-					add_template(template_name, [join_template(state.template), b.literal(flags)]);
+			if (state.template.needs_import_node) {
+				flags |= TEMPLATE_USE_IMPORT_NODE;
+			}
 
-					body.push(b.var(id, b.call(template_name)));
-				}
+			if (state.template.nodes.length === 1 && state.template.nodes[0].type === 'comment') {
+				// special case — we can use `$.comment` instead of creating a unique template
+				state.init.unshift(b.var(id, b.call('$.comment')));
+			} else {
+				const template_name = transform_template(state, 'root', flags);
 
-				close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
+				state.init.unshift(b.var(id, b.call(template_name)));
 			}
 
-			body.push(...state.before_init, ...state.init);
+			close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
 		}
-	} else {
-		body.push(...state.before_init, ...state.init);
 	}
 
+	body.push(...state.snippets, ...state.let_directives, ...state.consts);
+
+	if (state.async_consts && state.async_consts.thunks.length > 0) {
+		body.push(b.var(state.async_consts.id, b.call('$.run', b.array(state.async_consts.thunks))));
+	}
+
+	if (is_text_first) {
+		// skip over inserted comment
+		body.push(b.stmt(b.call('$.next')));
+	}
+
+	body.push(...state.init);
+
 	if (state.update.length > 0) {
-		body.push(build_render_statement(state.update));
+		body.push(build_render_statement(state));
 	}
 
 	body.push(...state.after_update);
@@ -204,86 +182,3 @@ export function Fragment(node, context) {
 
 	return b.block(body);
 }
-
-/**
- * @param {Array<string | Expression>} items
- */
-function join_template(items) {
-	let quasi = b.quasi('');
-	const template = b.template([quasi], []);
-
-	/**
-	 * @param {Expression} expression
-	 */
-	function push(expression) {
-		if (expression.type === 'TemplateLiteral') {
-			for (let i = 0; i < expression.expressions.length; i += 1) {
-				const q = expression.quasis[i];
-				const e = expression.expressions[i];
-
-				quasi.value.cooked += /** @type {string} */ (q.value.cooked);
-				push(e);
-			}
-
-			const last = /** @type {TemplateElement} */ (expression.quasis.at(-1));
-			quasi.value.cooked += /** @type {string} */ (last.value.cooked);
-		} else if (expression.type === 'Literal') {
-			/** @type {string} */ (quasi.value.cooked) += expression.value;
-		} else {
-			template.expressions.push(expression);
-			template.quasis.push((quasi = b.quasi('')));
-		}
-	}
-
-	for (const item of items) {
-		if (typeof item === 'string') {
-			quasi.value.cooked += item;
-		} else {
-			push(item);
-		}
-	}
-
-	for (const quasi of template.quasis) {
-		quasi.value.raw = sanitize_template_string(/** @type {string} */ (quasi.value.cooked));
-	}
-
-	quasi.tail = true;
-
-	return template;
-}
-
-/**
- *
- * @param {Namespace} namespace
- * @param {ComponentClientTransformState} state
- * @returns
- */
-function get_template_function(namespace, state) {
-	const contains_script_tag = state.metadata.context.template_contains_script_tag;
-	return namespace === 'svg'
-		? contains_script_tag
-			? '$.svg_template_with_script'
-			: '$.ns_template'
-		: namespace === 'mathml'
-			? '$.mathml_template'
-			: contains_script_tag
-				? '$.template_with_script'
-				: '$.template';
-}
-
-/**
- * @param {SourceLocation[]} locations
- */
-function build_locations(locations) {
-	return b.array(
-		locations.map((loc) => {
-			const expression = b.array([b.literal(loc[0]), b.literal(loc[1])]);
-
-			if (loc.length === 3) {
-				expression.elements.push(build_locations(loc[2]));
-			}
-
-			return expression;
-		})
-	);
-}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/FunctionDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/FunctionDeclaration.js
index ed8fefc6ba..17327c21d6 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
@@ -1,23 +1,12 @@
 /** @import { FunctionDeclaration } from 'estree' */
 /** @import { ComponentContext } from '../types' */
-import { build_hoisted_params } from '../utils.js';
-import * as b from '../../../../utils/builders.js';
 
 /**
  * @param {FunctionDeclaration} node
  * @param {ComponentContext} context
  */
 export function FunctionDeclaration(node, context) {
-	const state = { ...context.state, in_constructor: false };
-
-	if (node.metadata?.hoisted === true) {
-		const params = build_hoisted_params(node, context);
-		const body = context.visit(node.body, state);
-
-		context.state.hoisted.push(/** @type {FunctionDeclaration} */ ({ ...node, params, body }));
-
-		return b.empty;
-	}
+	const state = { ...context.state, in_constructor: false, in_derived: false };
 
 	context.next(state);
 }
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 32439879de..6c8b7c0354 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/HtmlTag.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/HtmlTag.js
@@ -1,27 +1,60 @@
-/** @import { Expression } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import { is_ignored } from '../../../../state.js';
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
+import { build_expression } from './shared/utils.js';
 
 /**
  * @param {AST.HtmlTag} node
  * @param {ComponentContext} context
  */
 export function HtmlTag(node, context) {
-	context.state.template.push('<!>');
+	const is_controlled = node.metadata.is_controlled;
 
-	// push into init, so that bindings run afterwards, which might trigger another run and override hydration
-	context.state.init.push(
-		b.stmt(
-			b.call(
-				'$.html',
-				context.state.node,
-				b.thunk(/** @type {Expression} */ (context.visit(node.expression))),
-				b.literal(context.state.metadata.namespace === 'svg'),
-				b.literal(context.state.metadata.namespace === 'mathml'),
-				is_ignored(node, 'hydration_html_changed') && b.true
-			)
+	if (!is_controlled) {
+		context.state.template.push_comment();
+	}
+
+	const has_await = node.metadata.expression.has_await;
+	const has_blockers = node.metadata.expression.has_blockers();
+
+	const expression = build_expression(context, node.expression, node.metadata.expression);
+	const html = has_await ? b.call('$.get', b.id('$$html')) : expression;
+
+	// When is_controlled, the parent node already provides the correct namespace,
+	// so is_svg/is_mathml are only needed for the non-controlled path's wrapper element
+	const is_svg = !is_controlled && context.state.metadata.namespace === 'svg';
+	const is_mathml = !is_controlled && context.state.metadata.namespace === 'mathml';
+
+	const statement = b.stmt(
+		b.call(
+			'$.html',
+			context.state.node,
+			b.thunk(html),
+			is_controlled && b.true,
+			is_svg && b.true,
+			is_mathml && b.true,
+			is_ignored(node, 'hydration_html_changed') && b.true
 		)
 	);
+
+	// push into init, so that bindings run afterwards, which might trigger another run and override hydration
+	if (has_await || has_blockers) {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.async',
+					context.state.node,
+					node.metadata.expression.blockers(),
+					has_await ? b.array([b.thunk(expression, true)]) : b.void0,
+					b.arrow(
+						has_await ? [context.state.node, b.id('$$html')] : [context.state.node],
+						b.block([statement])
+					)
+				)
+			)
+		);
+	} else {
+		context.state.init.push(statement);
+	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Identifier.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Identifier.js
index ae62909eff..b43ec7891e 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Identifier.js
@@ -1,7 +1,7 @@
 /** @import { Identifier, Node } from 'estree' */
 /** @import { Context } from '../types' */
 import is_reference from 'is-reference';
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import { build_getter } from '../utils.js';
 
 /**
@@ -32,7 +32,11 @@ export function Identifier(node, context) {
 				grand_parent?.type !== 'AssignmentExpression' &&
 				grand_parent?.type !== 'UpdateExpression'
 			) {
-				return b.id('$$props');
+				const key = /** @type {Identifier} */ (parent.property);
+
+				if (!binding.metadata?.exclude_props?.includes(key.name)) {
+					return b.id('$$props');
+				}
 			}
 		}
 
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 d658f9eaf8..b0cd51ce3f 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
@@ -1,50 +1,84 @@
-/** @import { BlockStatement, Expression } from 'estree' */
+/** @import { BlockStatement, Expression, IfStatement, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
+import { build_expression, add_svelte_meta } from './shared/utils.js';
 
 /**
  * @param {AST.IfBlock} node
  * @param {ComponentContext} context
  */
 export function IfBlock(node, context) {
-	context.state.template.push('<!>');
+	context.state.template.push_comment();
+
+	/** @type {Statement[]} */
 	const statements = [];
 
-	const consequent = /** @type {BlockStatement} */ (context.visit(node.consequent));
-	const consequent_id = context.state.scope.generate('consequent');
+	const has_await = node.metadata.expression.has_await;
+	const has_blockers = node.metadata.expression.has_blockers();
+	const expression = build_expression(context, node.test, node.metadata.expression);
+
+	// Build the if/else-if/else chain
+	let index = 0;
+	/** @type {IfStatement | undefined} */
+	let first_if;
+	/** @type {IfStatement | undefined} */
+	let last_if;
+	/** @type {AST.IfBlock | undefined} */
+	let last_alt;
+
+	for (const branch of [node, ...(node.metadata.flattened ?? [])]) {
+		const consequent = /** @type {BlockStatement} */ (context.visit(branch.consequent));
+		const consequent_id = b.id(context.state.scope.generate('consequent'));
+		statements.push(b.var(consequent_id, b.arrow([b.id('$$anchor')], consequent)));
+
+		// Build the test expression for this branch
+		/** @type {Expression} */
+		let test;
+
+		if (branch.metadata.expression.has_await) {
+			// Top-level condition with await: already resolved by $.async wrapper
+			test = b.call('$.get', b.id('$$condition'));
+		} else {
+			const expression = build_expression(context, branch.test, branch.metadata.expression);
+
+			if (branch.metadata.expression.has_call) {
+				const derived_id = b.id(context.state.scope.generate('d'));
+				statements.push(b.var(derived_id, b.call('$.derived', b.arrow([], expression))));
+				test = b.call('$.get', derived_id);
+			} else {
+				test = expression;
+			}
+		}
 
-	statements.push(b.var(b.id(consequent_id), b.arrow([b.id('$$anchor')], consequent)));
+		const render_call = b.stmt(b.call('$$render', consequent_id, index !== 0 && b.literal(index)));
+		const new_if = b.if(test, render_call);
 
-	let alternate_id;
+		if (last_if) {
+			last_if.alternate = new_if;
+		} else {
+			first_if = new_if;
+		}
 
-	if (node.alternate) {
-		const alternate = /** @type {BlockStatement} */ (context.visit(node.alternate));
-		alternate_id = context.state.scope.generate('alternate');
-		statements.push(b.var(b.id(alternate_id), b.arrow([b.id('$$anchor')], alternate)));
+		last_alt = branch;
+		last_if = new_if;
+		index++;
 	}
 
+	// Handle final alternate (else branch, remaining async chain, or nothing)
+	if (last_if && last_alt?.alternate) {
+		const alternate = /** @type {BlockStatement} */ (context.visit(last_alt.alternate));
+		const alternate_id = b.id(context.state.scope.generate('alternate'));
+		statements.push(b.var(alternate_id, b.arrow([b.id('$$anchor')], alternate)));
+
+		last_if.alternate = b.stmt(b.call('$$render', alternate_id, b.literal(-1)));
+	}
+
+	// Build $.if() arguments
 	/** @type {Expression[]} */
 	const args = [
 		context.state.node,
-		b.arrow(
-			[b.id('$$render')],
-			b.block([
-				b.if(
-					/** @type {Expression} */ (context.visit(node.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),
-									node.alternate ? b.literal(false) : undefined
-								)
-							)
-						: undefined
-				)
-			])
-		)
+		b.arrow([b.id('$$render')], first_if ? b.block([first_if]) : b.block([]))
 	];
 
 	if (node.elseif) {
@@ -68,11 +102,30 @@ 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.literal(true));
+		// should play when `x` or `y` change — both are considered 'local'.
+		// This could also be a non-flattened elseif (because it has an async expression).
+		// In both cases mark as elseif so the runtime uses EFFECT_TRANSPARENT for transitions.
+		args.push(b.true);
 	}
 
-	statements.push(b.stmt(b.call('$.if', ...args)));
+	statements.push(add_svelte_meta(b.call('$.if', ...args), node, 'if'));
 
-	context.state.init.push(b.block(statements));
+	if (has_await || has_blockers) {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.async',
+					context.state.node,
+					node.metadata.expression.blockers(),
+					has_await ? b.array([b.thunk(expression, true)]) : b.void0,
+					b.arrow(
+						has_await ? [context.state.node, b.id('$$condition')] : [context.state.node],
+						b.block(statements)
+					)
+				)
+			)
+		);
+	} else {
+		context.state.init.push(b.block(statements));
+	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ImportDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ImportDeclaration.js
deleted file mode 100644
index 29700246d4..0000000000
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ImportDeclaration.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/** @import { ImportDeclaration } from 'estree' */
-/** @import { ComponentContext } from '../types' */
-import * as b from '../../../../utils/builders.js';
-
-/**
- * @param {ImportDeclaration} node
- * @param {ComponentContext} context
- */
-export function ImportDeclaration(node, context) {
-	if ('hoisted' in context.state) {
-		context.state.hoisted.push(node);
-		return b.empty;
-	}
-
-	context.next();
-}
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 a013827f60..143a4e8edd 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
@@ -1,19 +1,45 @@
 /** @import { Expression } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
+import { build_expression, add_svelte_meta } from './shared/utils.js';
 
 /**
  * @param {AST.KeyBlock} node
  * @param {ComponentContext} context
  */
 export function KeyBlock(node, context) {
-	context.state.template.push('<!>');
+	context.state.template.push_comment();
 
-	const key = /** @type {Expression} */ (context.visit(node.expression));
+	const has_await = node.metadata.expression.has_await;
+	const has_blockers = node.metadata.expression.has_blockers();
+
+	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(
-		b.stmt(b.call('$.key', context.state.node, b.thunk(key), b.arrow([b.id('$$anchor')], body)))
+	const statement = add_svelte_meta(
+		b.call('$.key', context.state.node, key, b.arrow([b.id('$$anchor')], body)),
+		node,
+		'key'
 	);
+
+	if (has_await || has_blockers) {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.async',
+					context.state.node,
+					node.metadata.expression.blockers(),
+					has_await ? b.array([b.thunk(expression, true)]) : b.void0,
+					b.arrow(
+						has_await ? [context.state.node, b.id('$$key')] : [context.state.node],
+						b.block([statement])
+					)
+				)
+			)
+		);
+	} else {
+		context.state.init.push(statement);
+	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/LabeledStatement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/LabeledStatement.js
index 3c8f57f46b..8d24d260c5 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/LabeledStatement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/LabeledStatement.js
@@ -1,9 +1,7 @@
-/** @import { Location } from 'locate-character' */
 /** @import { Expression, LabeledStatement, Statement } from 'estree' */
 /** @import { ReactiveStatement } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
-import { dev, is_ignored, locator } from '../../../../state.js';
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import { build_getter } from '../utils.js';
 
 /**
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/LetDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/LetDirective.js
index e174073a26..c134b4e1e7 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/LetDirective.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/LetDirective.js
@@ -1,7 +1,7 @@
 /** @import { Expression } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import { create_derived } from '../utils.js';
 
 /**
@@ -21,22 +21,24 @@ export function LetDirective(node, context) {
 			};
 		}
 
-		return b.const(
-			name,
-			b.call(
-				'$.derived',
-				b.thunk(
-					b.block([
-						b.let(
-							/** @type {Expression} */ (node.expression).type === 'ObjectExpression'
-								? // @ts-expect-error types don't match, but it can't contain spread elements and the structure is otherwise fine
-									b.object_pattern(node.expression.properties)
-								: // @ts-expect-error types don't match, but it can't contain spread elements and the structure is otherwise fine
-									b.array_pattern(node.expression.elements),
-							b.member(b.id('$$slotProps'), node.name)
-						),
-						b.return(b.object(bindings.map((binding) => b.init(binding.node.name, binding.node))))
-					])
+		context.state.let_directives.push(
+			b.const(
+				name,
+				b.call(
+					'$.derived',
+					b.thunk(
+						b.block([
+							b.let(
+								/** @type {Expression} */ (node.expression).type === 'ObjectExpression'
+									? // @ts-expect-error types don't match, but it can't contain spread elements and the structure is otherwise fine
+										b.object_pattern(node.expression.properties)
+									: // @ts-expect-error types don't match, but it can't contain spread elements and the structure is otherwise fine
+										b.array_pattern(node.expression.elements),
+								b.member(b.id('$$slotProps'), node.name)
+							),
+							b.return(b.object(bindings.map((binding) => b.init(binding.node.name, binding.node))))
+						])
+					)
 				)
 			)
 		);
@@ -46,9 +48,8 @@ export function LetDirective(node, context) {
 			read: (node) => b.call('$.get', node)
 		};
 
-		return b.const(
-			name,
-			create_derived(context.state, b.thunk(b.member(b.id('$$slotProps'), node.name)))
+		context.state.let_directives.push(
+			b.const(name, create_derived(context.state, b.member(b.id('$$slotProps'), node.name)))
 		);
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/MemberExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/MemberExpression.js
index 501ecda555..7e89b0e705 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/MemberExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/MemberExpression.js
@@ -1,6 +1,6 @@
 /** @import { MemberExpression } from 'estree' */
 /** @import { Context } from '../types' */
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 
 /**
  * @param {MemberExpression} node
@@ -9,9 +9,13 @@ import * as b from '../../../../utils/builders.js';
 export function MemberExpression(node, context) {
 	// rewrite `this.#foo` as `this.#foo.v` inside a constructor
 	if (node.property.type === 'PrivateIdentifier') {
-		const field = context.state.private_state.get(node.property.name);
+		const field = context.state.state_fields.get('#' + node.property.name);
+
 		if (field) {
-			return context.state.in_constructor ? b.member(node, 'v') : b.call('$.get', node);
+			return context.state.in_constructor &&
+				(field.type === '$state.raw' || field.type === '$state')
+				? b.member(node, 'v')
+				: b.call('$.get', node);
 		}
 	}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/OnDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/OnDirective.js
index 7c2b1209e9..011d851023 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/OnDirective.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/OnDirective.js
@@ -1,16 +1,16 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import { build_event, build_event_handler } from './shared/events.js';
 
-const modifiers = [
+const modifiers = /** @type {const} */ ([
 	'stopPropagation',
 	'stopImmediatePropagation',
 	'preventDefault',
 	'self',
 	'trusted',
 	'once'
-];
+]);
 
 /**
  * @param {AST.OnDirective} node
@@ -34,5 +34,5 @@ export function OnDirective(node, context) {
 		node.modifiers.includes('passive') ||
 		(node.modifiers.includes('nonpassive') ? false : undefined);
 
-	return build_event(node.name, context.state.node, handler, capture, passive);
+	return build_event(context, node.name, handler, capture, passive, false);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js
index 29403ca6ed..f6352e986c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js
@@ -1,14 +1,15 @@
-/** @import { Expression, ImportDeclaration, MemberExpression, Program } from 'estree' */
+/** @import { Expression, ImportDeclaration, MemberExpression, Node, Program } from 'estree' */
 /** @import { ComponentContext } from '../types' */
 import { build_getter, is_prop_source } from '../utils.js';
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import { add_state_transformers } from './shared/declarations.js';
+import { transform_body } from '../../shared/transform-async.js';
 
 /**
- * @param {Program} _
+ * @param {Program} node
  * @param {ComponentContext} context
  */
-export function Program(_, context) {
+export function Program(node, context) {
 	if (!context.state.analysis.runes) {
 		context.state.transform['$$props'] = {
 			read: (node) => ({ ...node, name: '$$sanitized_props' })
@@ -137,5 +138,16 @@ export function Program(_, context) {
 
 	add_state_transformers(context);
 
+	if (context.state.is_instance) {
+		return {
+			...node,
+			body: transform_body(
+				context.state.analysis.instance_body,
+				b.id('$.run'),
+				(node) => /** @type {Node} */ (context.visit(node))
+			)
+		};
+	}
+
 	context.next();
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index 2c2c287f12..8dcd3c7d6f 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -1,77 +1,63 @@
-/** @import { Expression, ExpressionStatement, Identifier, MemberExpression, ObjectExpression, Statement } from 'estree' */
+/** @import { ArrayExpression, Expression, ExpressionStatement, Identifier, MemberExpression, ObjectExpression } from 'estree' */
 /** @import { AST } from '#compiler' */
-/** @import { SourceLocation } from '#shared' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
 /** @import { Scope } from '../../../scope' */
 import {
 	cannot_be_set_statically,
 	is_boolean_attribute,
 	is_dom_property,
-	is_load_error_element,
-	is_void
+	is_load_error_element
 } from '../../../../../utils.js';
-import { escape_html } from '../../../../../escaping.js';
-import { dev, is_ignored, locator } from '../../../../state.js';
+import { is_ignored } from '../../../../state.js';
 import { is_event_attribute, is_text_attribute } from '../../../../utils/ast.js';
-import * as b from '../../../../utils/builders.js';
-import { is_custom_element_node } from '../../../nodes.js';
+import * as b from '#compiler/builders';
+import {
+	create_attribute,
+	ExpressionMetadata,
+	is_custom_element_node,
+	is_customizable_select_element
+} from '../../../nodes.js';
 import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
-import { build_getter, create_derived } from '../utils.js';
+import { build_getter, get_transform } from '../utils.js';
 import {
 	get_attribute_name,
 	build_attribute_value,
-	build_class_directives,
-	build_style_directives,
-	build_set_attributes
+	build_attribute_effect,
+	build_set_class,
+	build_set_style
 } from './shared/element.js';
-import { process_children } from './shared/fragment.js';
-import {
-	build_render_statement,
-	build_template_chunk,
-	build_update,
-	build_update_assignment
-} from './shared/utils.js';
+import { process_children, is_static_element } from './shared/fragment.js';
+import { build_render_statement, build_template_chunk, Memoizer } from './shared/utils.js';
 import { visit_event_attribute } from './shared/events.js';
+import { Template } from '../transform-template/template.js';
+import { transform_template } from '../transform-template/index.js';
+import { TEMPLATE_FRAGMENT } from '../../../../../constants.js';
 
 /**
  * @param {AST.RegularElement} node
  * @param {ComponentContext} context
  */
 export function RegularElement(node, context) {
-	/** @type {SourceLocation} */
-	let location = [-1, -1];
-
-	if (dev) {
-		const loc = locator(node.start);
-		if (loc) {
-			location[0] = loc.line;
-			location[1] = loc.column;
-			context.state.locations.push(location);
-		}
-	}
+	const is_html = context.state.metadata.namespace === 'html' && node.name !== 'svg';
+	const name = is_html ? node.name.toLowerCase() : node.name;
+	context.state.template.push_element(name, node.start, is_html);
 
-	if (node.name === 'noscript') {
-		context.state.template.push('<noscript></noscript>');
+	if (name === 'noscript') {
+		context.state.template.pop_element();
 		return;
 	}
 
 	const is_custom_element = is_custom_element_node(node);
 
-	if (node.name === 'video' || is_custom_element) {
-		// cloneNode is faster, but it does not instantiate the underlying class of the
-		// custom element until the template is connected to the dom, which would
-		// cause problems when setting properties on the custom element.
-		// Therefore we need to use importNode instead, which doesn't have this caveat.
-		// Additionally, Webkit browsers need importNode for video elements for autoplay
-		// to work correctly.
-		context.state.metadata.context.template_needs_import_node = true;
-	}
-
-	if (node.name === 'script') {
-		context.state.metadata.context.template_contains_script_tag = true;
-	}
+	// cloneNode is faster, but it does not instantiate the underlying class of the
+	// custom element until the template is connected to the dom, which would
+	// cause problems when setting properties on the custom element.
+	// Therefore we need to use importNode instead, which doesn't have this caveat.
+	// Additionally, Webkit browsers need importNode for video elements for autoplay
+	// to work correctly.
+	context.state.template.needs_import_node ||= name === 'video' || is_custom_element;
 
-	context.state.template.push(`<${node.name}`);
+	context.state.template.contains_script_tag ||= name === 'script';
 
 	/** @type {Array<AST.Attribute | AST.SpreadAttribute>} */
 	const attributes = [];
@@ -82,7 +68,7 @@ export function RegularElement(node, context) {
 	/** @type {AST.StyleDirective[]} */
 	const style_directives = [];
 
-	/** @type {Array<AST.AnimateDirective | AST.BindDirective | AST.OnDirective | AST.TransitionDirective | AST.UseDirective>} */
+	/** @type {Array<AST.AnimateDirective | AST.BindDirective | AST.OnDirective | AST.TransitionDirective | AST.UseDirective | AST.AttachTag>} */
 	const other_directives = [];
 
 	/** @type {ExpressionStatement[]} */
@@ -96,6 +82,7 @@ export function RegularElement(node, context) {
 
 	let has_spread = node.metadata.has_spread;
 	let has_use = false;
+	let should_remove_defaults = false;
 
 	for (const attribute of node.attributes) {
 		switch (attribute.type) {
@@ -109,7 +96,7 @@ export function RegularElement(node, context) {
 					const { value } = build_attribute_value(attribute.value, context);
 
 					if (value.type === 'Literal' && typeof value.value === 'string') {
-						context.state.template.push(` is="${escape_html(value.value, true)}"`);
+						context.state.template.set_prop('is', value.value);
 						continue;
 					}
 				}
@@ -129,7 +116,7 @@ export function RegularElement(node, context) {
 
 			case 'LetDirective':
 				// visit let directives before everything else, to set state
-				lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
+				context.visit(attribute, { ...context.state, let_directives: lets });
 				break;
 
 			case 'OnDirective':
@@ -152,6 +139,10 @@ export function RegularElement(node, context) {
 				has_use = true;
 				other_directives.push(attribute);
 				break;
+
+			case 'AttachTag':
+				other_directives.push(attribute);
+				break;
 		}
 	}
 
@@ -172,7 +163,7 @@ export function RegularElement(node, context) {
 		}
 	}
 
-	if (node.name === 'input') {
+	if (name === 'input') {
 		const has_value_attribute = attributes.some(
 			(attribute) =>
 				attribute.type === 'Attribute' &&
@@ -192,11 +183,16 @@ export function RegularElement(node, context) {
 				bindings.has('group') ||
 				(!bindings.has('group') && has_value_attribute))
 		) {
-			context.state.init.push(b.stmt(b.call('$.remove_input_defaults', context.state.node)));
+			if (has_spread) {
+				// remove_input_defaults will be called inside set_attributes
+				should_remove_defaults = true;
+			} else {
+				context.state.init.push(b.stmt(b.call('$.remove_input_defaults', context.state.node)));
+			}
 		}
 	}
 
-	if (node.name === 'textarea') {
+	if (name === 'textarea') {
 		const attribute = lookup.get('value') ?? lookup.get('checked');
 		const needs_content_reset = attribute && !is_text_attribute(attribute);
 
@@ -205,59 +201,26 @@ export function RegularElement(node, context) {
 		}
 	}
 
-	if (node.name === 'select' && bindings.has('value')) {
-		setup_select_synchronization(/** @type {AST.BindDirective} */ (bindings.get('value')), context);
-	}
-
-	// Let bindings first, they can be used on attributes
-	context.state.init.push(...lets);
+	// Let bindings first, they can be used on attributes and `{@const}` declarations
+	context.state.let_directives.push(...lets);
 
 	const node_id = context.state.node;
 
-	// Then do attributes
-	let is_attributes_reactive = has_spread;
+	/** If true, needs `__value` for inputs */
+	const needs_special_value_handling =
+		name === 'option' || name === 'select' || bindings.has('group') || bindings.has('checked');
 
 	if (has_spread) {
-		const attributes_id = b.id(context.state.scope.generate('attributes'));
-
-		build_set_attributes(
+		build_attribute_effect(
 			attributes,
+			class_directives,
+			style_directives,
 			context,
 			node,
 			node_id,
-			attributes_id,
-			(node.metadata.svg || node.metadata.mathml || is_custom_element_node(node)) && b.true,
-			node.name.includes('-') && b.true,
-			context.state
+			should_remove_defaults
 		);
-
-		// If value binding exists, that one takes care of calling $.init_select
-		if (node.name === 'select' && !bindings.has('value')) {
-			context.state.init.push(
-				b.stmt(b.call('$.init_select', node_id, b.thunk(b.member(attributes_id, 'value'))))
-			);
-
-			context.state.update.push(
-				b.if(
-					b.binary('in', b.literal('value'), attributes_id),
-					b.block([
-						// This ensures a one-way street to the DOM in case it's <select {value}>
-						// and not <select bind:value>. We need it in addition to $.init_select
-						// because the select value is not reflected as an attribute, so the
-						// mutation observer wouldn't notice.
-						b.stmt(b.call('$.select_option', node_id, b.member(attributes_id, 'value')))
-					])
-				)
-			);
-		}
 	} else {
-		/** If true, needs `__value` for inputs */
-		const needs_special_value_handling =
-			node.name === 'option' ||
-			node.name === 'select' ||
-			bindings.has('group') ||
-			bindings.has('checked');
-
 		for (const attribute of /** @type {AST.Attribute[]} */ (attributes)) {
 			if (is_event_attribute(attribute)) {
 				visit_event_attribute(attribute, context);
@@ -265,55 +228,61 @@ export function RegularElement(node, context) {
 			}
 
 			if (needs_special_value_handling && attribute.name === 'value') {
-				build_element_special_value_attribute(node.name, node_id, attribute, context);
 				continue;
 			}
 
+			const name = get_attribute_name(node, attribute);
+
 			if (
 				!is_custom_element &&
 				!cannot_be_set_statically(attribute.name) &&
-				(attribute.value === true || is_text_attribute(attribute))
+				(attribute.value === true || is_text_attribute(attribute)) &&
+				(name !== 'class' || class_directives.length === 0) &&
+				(name !== 'style' || style_directives.length === 0)
 			) {
-				const name = get_attribute_name(node, attribute);
-				const value = is_text_attribute(attribute) ? attribute.value[0].data : true;
+				let value = is_text_attribute(attribute) ? attribute.value[0].data : true;
 
-				if (name !== 'class' || value) {
-					context.state.template.push(
-						` ${attribute.name}${
-							is_boolean_attribute(name) && value === true
-								? ''
-								: `="${value === true ? '' : escape_html(value, true)}"`
-						}`
-					);
+				if (name === 'class' && node.metadata.scoped && context.state.analysis.css.hash) {
+					if (value === true || value === '') {
+						value = context.state.analysis.css.hash;
+					} else {
+						value += ' ' + context.state.analysis.css.hash;
+					}
 				}
-				continue;
-			}
 
-			const is = is_custom_element
-				? build_custom_element_attribute_update_assignment(node_id, attribute, context)
-				: build_element_attribute_update_assignment(node, node_id, attribute, attributes, context);
-			if (is) is_attributes_reactive = true;
-		}
-	}
+				if (name !== 'class' || value) {
+					context.state.template.set_prop(attribute.name, value === true ? '' : value);
+				}
+			} else if (name === 'autofocus') {
+				let { value } = build_attribute_value(attribute.value, context);
+				context.state.init.push(b.stmt(b.call('$.autofocus', node_id, value)));
+			} else if (name === 'class') {
+				build_set_class(node, node_id, attribute, class_directives, context, is_html);
+			} else if (name === 'style') {
+				build_set_style(node_id, attribute, style_directives, context);
+			} else if (is_custom_element) {
+				build_custom_element_attribute_update_assignment(node_id, attribute, context);
+			} else {
+				const { value, has_state } = build_attribute_value(
+					attribute.value,
+					context,
+					(value, metadata) => context.state.memoizer.add(value, metadata)
+				);
 
-	// class/style directives must be applied last since they could override class/style attributes
-	build_class_directives(class_directives, node_id, context, is_attributes_reactive);
-	build_style_directives(style_directives, node_id, context, is_attributes_reactive);
+				const update = build_element_attribute_update(node, node_id, name, value, attributes);
 
-	// Apply the src and loading attributes for <img> elements after the element is appended to the document
-	if (node.name === 'img' && (has_spread || lookup.has('loading'))) {
-		context.state.after_update.push(b.stmt(b.call('$.handle_lazy_img', node_id)));
+				(has_state ? context.state.update : context.state.init).push(b.stmt(update));
+			}
+		}
 	}
 
 	if (
-		is_load_error_element(node.name) &&
+		is_load_error_element(name) &&
 		(has_spread || has_use || lookup.has('onload') || lookup.has('onerror'))
 	) {
 		context.state.after_update.push(b.stmt(b.call('$.replay_events', node_id)));
 	}
 
-	context.state.template.push('>');
-
 	const metadata = {
 		...context.state.metadata,
 		namespace: determine_namespace_for_children(node, context.state.metadata.namespace)
@@ -331,14 +300,15 @@ export function RegularElement(node, context) {
 		}
 	}
 
+	const scope = /** @type {Scope} */ (context.state.scopes.get(node.fragment));
+
 	/** @type {ComponentClientTransformState} */
 	const state = {
 		...context.state,
 		metadata,
-		locations: [],
-		scope: /** @type {Scope} */ (context.state.scopes.get(node.fragment)),
-		preserve_whitespace:
-			context.state.preserve_whitespace || node.name === 'pre' || node.name === 'textarea'
+		scope,
+		transform: get_transform(scope, context.state),
+		preserve_whitespace: context.state.preserve_whitespace || name === 'pre' || name === 'textarea'
 	};
 
 	const { hoisted, trimmed } = clean_nodes(
@@ -347,12 +317,23 @@ export function RegularElement(node, context) {
 		context.path,
 		state.metadata.namespace,
 		state,
-		node.name === 'script' || state.preserve_whitespace,
+		name === 'script' || state.preserve_whitespace,
 		state.options.preserveComments
 	);
 
+	const has_declarations = !node.fragment.metadata.transparent;
+
 	/** @type {typeof state} */
-	const child_state = { ...state, init: [], update: [], after_update: [] };
+	const child_state = {
+		...state,
+		init: [],
+		update: [],
+		after_update: [],
+		snippets: [],
+		consts: has_declarations ? [] : state.consts,
+		async_consts: has_declarations ? undefined : state.async_consts,
+		memoizer: has_declarations ? new Memoizer() : state.memoizer
+	};
 
 	for (const node of hoisted) {
 		context.visit(node, child_state);
@@ -364,30 +345,85 @@ 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 &&
+					!node.metadata.expression.has_blockers())
+		) &&
 		trimmed.some((node) => node.type === 'ExpressionTag');
 
 	if (use_text_content) {
-		child_state.init.push(
-			b.stmt(
-				b.assignment(
-					'=',
-					b.member(context.state.node, 'textContent'),
-					build_template_chunk(trimmed, context.visit, child_state).value
-				)
-			)
+		const { value } = build_template_chunk(trimmed, context, child_state);
+		const empty_string = value.type === 'Literal' && value.value === '';
+
+		if (!empty_string) {
+			child_state.init.push(
+				b.stmt(b.assignment('=', b.member(context.state.node, 'textContent'), value))
+			);
+		}
+	} else if (is_customizable_select_element(node)) {
+		// For <option>, <optgroup>, or <select> elements with rich content, we need to branch based on browser support.
+		// Modern browsers preserve rich HTML in options, older browsers strip it to text only.
+		// We create a separate template for the rich content and append it to the element.
+
+		const element_node = context.state.node;
+
+		// Add a hydration marker inside the option element so $.child() has an anchor to find
+		context.state.template.push_comment();
+
+		// Create a separate template for the rich content
+		const fragment_id = b.id(context.state.scope.generate('fragment'));
+		const anchor_id = b.id(context.state.scope.generate('anchor'));
+
+		// Create state with a new template for the rich content
+		/** @type {typeof state} */
+		const select_state = {
+			...state,
+			init: [],
+			update: [],
+			after_update: [],
+			template: new Template()
+		};
+
+		process_children(
+			trimmed,
+			(is_text) => b.call('$.first_child', fragment_id, is_text && b.true),
+			false,
+			{
+				...context,
+				state: select_state
+			}
 		);
+
+		// Transform the template to $.from_html(...) and hoist it (deduplicating identical templates)
+		const template_name = transform_template(select_state, `${name}_content`, TEMPLATE_FRAGMENT);
+
+		// Build the rich content function body
+		// The anchor is the child of the element (a hydration marker during hydration)
+		const body = b.block([
+			b.var(anchor_id, b.call('$.child', element_node)),
+			b.var(fragment_id, b.call(template_name)),
+			...select_state.init,
+			...(select_state.update.length > 0 ? [build_render_statement(select_state)] : []),
+			...select_state.after_update,
+			b.stmt(b.call('$.append', anchor_id, fragment_id))
+		]);
+
+		child_state.init.push(b.stmt(b.call('$.customizable_select', element_node, b.arrow([], body))));
 	} else {
 		/** @type {Expression} */
 		let arg = context.state.node;
 
 		// If `hydrate_node` is set inside the element, we need to reset it
-		// after the element has been hydrated
-		let needs_reset = trimmed.some((node) => node.type !== 'Text');
+		// after the element has been hydrated. We need to check if any child
+		// would actually advance the hydrate_node cursor - static elements don't.
+		let needs_reset = trimmed.some((node) => node.type !== 'Text' && !is_static_element(node));
 
 		// The same applies if it's a `<template>` element, since we need to
 		// set the value of `hydrate_node` to `node.content`
-		if (node.name === 'template') {
+		if (name === 'template') {
 			needs_reset = true;
 			child_state.init.push(b.stmt(b.call('$.hydrate_template', arg)));
 			arg = b.member(arg, 'content');
@@ -403,13 +439,24 @@ export function RegularElement(node, context) {
 		}
 	}
 
-	if (node.fragment.nodes.some((node) => node.type === 'SnippetBlock')) {
+	if (node.fragment.nodes.some((node) => node.type === 'SnippetBlock') || has_declarations) {
+		if (child_state.async_consts && child_state.async_consts.thunks.length > 0) {
+			child_state.consts.push(
+				b.var(
+					child_state.async_consts.id,
+					b.call('$.run', b.array(child_state.async_consts.thunks))
+				)
+			);
+		}
+
 		// Wrap children in `{...}` to avoid declaration conflicts
 		context.state.init.push(
 			b.block([
+				...child_state.snippets,
+				...child_state.consts,
 				...child_state.init,
 				...element_state.init,
-				child_state.update.length > 0 ? build_render_statement(child_state.update) : b.empty,
+				child_state.update.length > 0 ? build_render_statement(child_state) : b.empty,
 				...child_state.after_update,
 				...element_state.after_update
 			])
@@ -423,6 +470,18 @@ export function RegularElement(node, context) {
 		context.state.after_update.push(...element_state.after_update);
 	}
 
+	if (name === 'selectedcontent') {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.selectedcontent',
+					context.state.node,
+					b.arrow([b.id('$$element')], b.assignment('=', context.state.node, b.id('$$element')))
+				)
+			)
+		);
+	}
+
 	if (lookup.has('dir')) {
 		// This fixes an issue with Chromium where updates to text content within an element
 		// does not update the direction when set to auto. If we just re-assign the dir, this fixes it.
@@ -430,75 +489,94 @@ export function RegularElement(node, context) {
 		context.state.update.push(b.stmt(b.assignment('=', dir, dir)));
 	}
 
-	if (state.locations.length > 0) {
-		// @ts-expect-error
-		location.push(state.locations);
+	if (!has_spread && needs_special_value_handling) {
+		if (node.metadata.synthetic_value_node) {
+			const synthetic_node = node.metadata.synthetic_value_node;
+			const synthetic_attribute = create_attribute(
+				'value',
+				null,
+				synthetic_node.start,
+				synthetic_node.end,
+				[synthetic_node]
+			);
+			// this node is an `option` that didn't have a `value` attribute, but had
+			// a single-expression child, so we treat the value of that expression as
+			// the value of the option
+			build_element_special_value_attribute(name, node_id, synthetic_attribute, context, true);
+		} else {
+			for (const attribute of /** @type {AST.Attribute[]} */ (attributes)) {
+				if (attribute.name === 'value') {
+					build_element_special_value_attribute(name, node_id, attribute, context);
+					break;
+				}
+			}
+		}
 	}
 
-	if (!is_void(node.name)) {
-		context.state.template.push(`</${node.name}>`);
-	}
+	context.state.template.pop_element();
 }
 
 /**
- * Special case: if we have a value binding on a select element, we need to set up synchronization
- * between the value binding and inner signals, for indirect updates
- * @param {AST.BindDirective} value_binding
+ * @param {AST.ClassDirective[]} class_directives
  * @param {ComponentContext} context
+ * @param {Memoizer} memoizer
  */
-function setup_select_synchronization(value_binding, context) {
-	if (context.state.analysis.runes) return;
+export function build_class_directives_object(
+	class_directives,
+	context,
+	memoizer = context.state.memoizer
+) {
+	let properties = [];
 
-	let bound = value_binding.expression;
+	const metadata = new ExpressionMetadata();
 
-	if (bound.type === 'SequenceExpression') {
-		return;
-	}
+	for (const d of class_directives) {
+		metadata.merge(d.metadata.expression);
 
-	while (bound.type === 'MemberExpression') {
-		bound = /** @type {Identifier | MemberExpression} */ (bound.object);
+		const expression = /** @type Expression */ (context.visit(d.expression));
+		properties.push(b.init(d.name, expression));
 	}
 
-	/** @type {string[]} */
-	const names = [];
+	const directives = b.object(properties);
 
-	for (const [name, refs] of context.state.scope.references) {
-		if (
-			refs.length > 0 &&
-			// prevent infinite loop
-			name !== bound.name
-		) {
-			names.push(name);
-		}
+	return memoizer.add(directives, metadata);
+}
+
+/**
+ * @param {AST.StyleDirective[]} style_directives
+ * @param {ComponentContext} context
+ * @param {Memoizer} memoizer
+ */
+export function build_style_directives_object(
+	style_directives,
+	context,
+	memoizer = context.state.memoizer
+) {
+	const normal = b.object([]);
+	const important = b.object([]);
+
+	const metadata = new ExpressionMetadata();
+
+	for (const d of style_directives) {
+		metadata.merge(d.metadata.expression);
+
+		const expression =
+			d.value === true
+				? build_getter(b.id(d.name), context.state)
+				: build_attribute_value(d.value, context).value;
+
+		const object = d.modifiers.includes('important') ? important : normal;
+		object.properties.push(b.init(d.name, expression));
 	}
 
-	const invalidator = b.call(
-		'$.invalidate_inner_signals',
-		b.thunk(
-			b.block(
-				names.map((name) => {
-					const serialized = build_getter(b.id(name), context.state);
-					return b.stmt(serialized);
-				})
-			)
-		)
-	);
+	const directives = important.properties.length ? b.array([normal, important]) : normal;
 
-	context.state.init.push(
-		b.stmt(
-			b.call(
-				'$.template_effect',
-				b.thunk(
-					b.block([b.stmt(/** @type {Expression} */ (context.visit(bound))), b.stmt(invalidator)])
-				)
-			)
-		)
-	);
+	return memoizer.add(directives, metadata);
 }
 
 /**
  * Serializes an assignment to an element property by adding relevant statements to either only
- * the init or the the init and update arrays, depending on whether or not the value is dynamic.
+ * the init or the init and update arrays, depending on whether or not the value is dynamic.
  * Resulting code for static looks something like this:
  * ```js
  * element.property = value;
@@ -520,61 +598,29 @@ function setup_select_synchronization(value_binding, context) {
  * Returns true if attribute is deemed reactive, false otherwise.
  * @param {AST.RegularElement} element
  * @param {Identifier} node_id
- * @param {AST.Attribute} attribute
+ * @param {string} name
+ * @param {Expression} value
  * @param {Array<AST.Attribute | AST.SpreadAttribute>} attributes
- * @param {ComponentContext} context
- * @returns {boolean}
  */
-function build_element_attribute_update_assignment(
-	element,
-	node_id,
-	attribute,
-	attributes,
-	context
-) {
-	const state = context.state;
-	const name = get_attribute_name(element, attribute);
-	const is_svg = context.state.metadata.namespace === 'svg' || element.name === 'svg';
-	const is_mathml = context.state.metadata.namespace === 'mathml';
-	let { has_call, value } = build_attribute_value(attribute.value, context);
-
-	if (name === 'autofocus') {
-		state.init.push(b.stmt(b.call('$.autofocus', node_id, value)));
-		return false;
+function build_element_attribute_update(element, node_id, name, value, attributes) {
+	if (name === 'muted') {
+		// Special case for Firefox who needs it set as a property in order to work
+		return b.assignment('=', b.member(node_id, b.id('muted')), value);
 	}
 
-	// Special case for Firefox who needs it set as a property in order to work
-	if (name === 'muted') {
-		state.init.push(b.stmt(b.assignment('=', b.member(node_id, b.id('muted')), value)));
-		return false;
+	if (name === 'value') {
+		return b.call('$.set_value', node_id, value);
 	}
 
-	/** @type {Statement} */
-	let update;
-
-	if (name === 'class') {
-		if (attribute.metadata.expression.has_state && has_call) {
-			// ensure we're not creating a separate template effect for this so that
-			// potential class directives are added to the same effect and therefore always apply
-			const id = b.id(state.scope.generate('class_derived'));
-			state.init.push(b.const(id, create_derived(state, b.thunk(value))));
-			value = b.call('$.get', id);
-			has_call = false;
-		}
-		update = b.stmt(
-			b.call(
-				is_svg ? '$.set_svg_class' : is_mathml ? '$.set_mathml_class' : '$.set_class',
-				node_id,
-				value
-			)
-		);
-	} else if (name === 'value') {
-		update = b.stmt(b.call('$.set_value', node_id, value));
-	} else if (name === 'checked') {
-		update = b.stmt(b.call('$.set_checked', node_id, value));
-	} else if (name === 'selected') {
-		update = b.stmt(b.call('$.set_selected', node_id, value));
-	} else if (
+	if (name === 'checked') {
+		return b.call('$.set_checked', node_id, value);
+	}
+
+	if (name === 'selected') {
+		return b.call('$.set_selected', node_id, value);
+	}
+
+	if (
 		// If we would just set the defaultValue property, it would override the value property,
 		// because it is set in the template which implicitly means it's also setting the default value,
 		// and if one updates the default value while the input is pristine it will also update the
@@ -585,76 +631,49 @@ function build_element_attribute_update_assignment(
 		) ||
 			(element.name === 'textarea' && element.fragment.nodes.length > 0))
 	) {
-		update = b.stmt(b.call('$.set_default_value', node_id, value));
-	} else if (
+		return b.call('$.set_default_value', node_id, value);
+	}
+
+	if (
 		// See defaultValue comment
 		name === 'defaultChecked' &&
 		attributes.some(
 			(attr) => attr.type === 'Attribute' && attr.name === 'checked' && attr.value === true
 		)
 	) {
-		update = b.stmt(b.call('$.set_default_checked', node_id, value));
-	} else if (is_dom_property(name)) {
-		update = b.stmt(b.assignment('=', b.member(node_id, name), value));
-	} else {
-		if (name === 'style' && attribute.metadata.expression.has_state && has_call) {
-			// ensure we're not creating a separate template effect for this so that
-			// potential style directives are added to the same effect and therefore always apply
-			const id = b.id(state.scope.generate('style_derived'));
-			state.init.push(b.const(id, create_derived(state, b.thunk(value))));
-			value = b.call('$.get', id);
-			has_call = false;
-		}
-		const callee = name.startsWith('xlink') ? '$.set_xlink_attribute' : '$.set_attribute';
-		update = b.stmt(
-			b.call(
-				callee,
-				node_id,
-				b.literal(name),
-				value,
-				is_ignored(element, 'hydration_attribute_changed') && b.true
-			)
-		);
+		return b.call('$.set_default_checked', node_id, value);
 	}
 
-	if (attribute.metadata.expression.has_state) {
-		if (has_call) {
-			state.init.push(build_update(update));
-		} else {
-			state.update.push(update);
-		}
-		return true;
-	} else {
-		state.init.push(update);
-		return false;
+	if (is_dom_property(name)) {
+		return b.assignment('=', b.member(node_id, name), value);
 	}
+
+	return b.call(
+		name.startsWith('xlink') ? '$.set_xlink_attribute' : '$.set_attribute',
+		node_id,
+		b.literal(name),
+		value,
+		is_ignored(element, 'hydration_attribute_changed') && b.true
+	);
 }
 
 /**
- * Like `build_element_attribute_update_assignment` but without any special attribute treatment.
+ * Like `build_element_attribute_update` but without any special attribute treatment.
  * @param {Identifier}	node_id
  * @param {AST.Attribute} attribute
  * @param {ComponentContext} context
- * @returns {boolean}
  */
 function build_custom_element_attribute_update_assignment(node_id, attribute, context) {
-	const state = context.state;
-	const name = attribute.name; // don't lowercase, as we set the element's property, which might be case sensitive
-	let { has_call, value } = build_attribute_value(attribute.value, context);
+	const { value, has_state } = build_attribute_value(attribute.value, context);
 
-	const update = b.stmt(b.call('$.set_custom_element_data', node_id, b.literal(name), value));
+	// don't lowercase name, as we set the element's property, which might be case sensitive
+	const call = b.call('$.set_custom_element_data', node_id, b.literal(attribute.name), value);
 
-	if (attribute.metadata.expression.has_state) {
-		if (has_call) {
-			state.init.push(build_update(update));
-		} else {
-			state.update.push(update);
-		}
-		return true;
-	} else {
-		state.init.push(update);
-		return false;
-	}
+	// this is different from other updates — it doesn't get grouped,
+	// because set_custom_element_data may not be idempotent
+	const update = has_state ? b.call('$.template_effect', b.thunk(call)) : call;
+
+	context.state.init.push(b.stmt(update));
 }
 
 /**
@@ -665,59 +684,64 @@ function build_custom_element_attribute_update_assignment(node_id, attribute, co
  * @param {Identifier} node_id
  * @param {AST.Attribute} attribute
  * @param {ComponentContext} context
- * @returns {boolean}
+ * @param {boolean} [synthetic] - true if this should not sync to the DOM
  */
-function build_element_special_value_attribute(element, node_id, attribute, context) {
+function build_element_special_value_attribute(
+	element,
+	node_id,
+	attribute,
+	context,
+	synthetic = false
+) {
 	const state = context.state;
-	const { value } = build_attribute_value(attribute.value, context);
-
-	const inner_assignment = b.assignment(
-		'=',
-		b.member(node_id, 'value'),
-		b.conditional(
-			b.binary('==', b.literal(null), b.assignment('=', b.member(node_id, '__value'), value)),
-			b.literal(''), // render null/undefined values as empty string to support placeholder options
-			value
-		)
-	);
-
 	const is_select_with_value =
 		// attribute.metadata.dynamic would give false negatives because even if the value does not change,
 		// the inner options could still change, so we need to always treat it as reactive
 		element === 'select' && attribute.value !== true && !is_text_attribute(attribute);
 
+	const { value, has_state } = build_attribute_value(attribute.value, context, (value, metadata) =>
+		state.memoizer.add(value, metadata)
+	);
+
+	const evaluated = context.state.scope.evaluate(value);
+	const assignment = b.assignment('=', b.member(node_id, '__value'), value);
+
+	const set_value_assignment = b.assignment(
+		'=',
+		b.member(node_id, 'value'),
+		evaluated.is_defined ? assignment : b.logical('??', assignment, b.literal(''))
+	);
+
 	const update = b.stmt(
 		is_select_with_value
 			? b.sequence([
-					inner_assignment,
+					set_value_assignment,
 					// This ensures a one-way street to the DOM in case it's <select {value}>
 					// and not <select bind:value>. We need it in addition to $.init_select
 					// because the select value is not reflected as an attribute, so the
 					// mutation observer wouldn't notice.
 					b.call('$.select_option', node_id, value)
 				])
-			: inner_assignment
+			: synthetic
+				? assignment
+				: set_value_assignment
 	);
 
-	if (is_select_with_value) {
-		state.init.push(b.stmt(b.call('$.init_select', node_id, b.thunk(value))));
-	}
+	if (has_state) {
+		const id = b.id(state.scope.generate(`${node_id.name}_value`));
 
-	if (attribute.metadata.expression.has_state) {
-		const id = state.scope.generate(`${node_id.name}_value`);
-		build_update_assignment(
-			state,
-			id,
-			// `<option>` is a special case: The value property reflects to the DOM. If the value is set to undefined,
-			// that means the value should be set to the empty string. To be able to do that when the value is
-			// initially undefined, we need to set a value that is guaranteed to be different.
-			element === 'option' ? b.object([]) : undefined,
-			value,
-			update
-		);
-		return true;
+		// `<option>` is a special case: The value property reflects to the DOM. If the value is set to undefined,
+		// that means the value should be set to the empty string. To be able to do that when the value is
+		// initially undefined, we need to set a value that is guaranteed to be different.
+		const init = element === 'option' ? b.object([]) : undefined;
+
+		state.init.push(b.var(id, init));
+		state.update.push(b.if(b.binary('!==', id, b.assignment('=', id, value)), b.block([update])));
 	} else {
 		state.init.push(update);
-		return false;
+	}
+
+	if (is_select_with_value) {
+		state.init.push(b.stmt(b.call('$.init_select', node_id)));
 	}
 }
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 7da987f6cc..5d39cf2216 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,33 +1,47 @@
-/** @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 '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
+import { add_svelte_meta, build_expression, Memoizer } from './shared/utils.js';
 
 /**
  * @param {AST.RenderTag} node
  * @param {ComponentContext} context
  */
 export function RenderTag(node, context) {
-	context.state.template.push('<!>');
-	const callee = unwrap_optional(node.expression).callee;
-	const raw_args = unwrap_optional(node.expression).arguments;
+	context.state.template.push_comment();
+
+	const call = unwrap_optional(node.expression);
 
 	/** @type {Expression[]} */
 	let args = [];
-	for (let i = 0; i < raw_args.length; i++) {
-		const raw = raw_args[i];
-		const arg = /** @type {Expression} */ (context.visit(raw));
-		if (node.metadata.args_with_call_expression.has(i)) {
-			const id = b.id(context.state.scope.generate('render_arg'));
-			context.state.init.push(b.var(id, b.call('$.derived_safe_equal', b.thunk(arg))));
-			args.push(b.thunk(b.call('$.get', id)));
-		} else {
-			args.push(b.thunk(arg));
+
+	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];
+		let expression = build_expression(context, arg, metadata);
+		const memoized = memoizer.add(expression, metadata);
+
+		if (expression !== memoized) {
+			expression = b.call('$.get', memoized);
 		}
+
+		args.push(b.thunk(expression));
 	}
 
-	let snippet_function = /** @type {Expression} */ (context.visit(callee));
+	memoizer.apply();
+
+	/** @type {Statement[]} */
+	const statements = memoizer.deriveds(context.state.analysis.runes);
+
+	let snippet_function = build_expression(
+		context,
+		/** @type {Expression} */ (call.callee),
+		node.metadata.expression
+	);
 
 	if (node.metadata.dynamic) {
 		// If we have a chain expression then ensure a nullish snippet function gets turned into an empty one
@@ -35,18 +49,47 @@ export function RenderTag(node, context) {
 			snippet_function = b.logical('??', snippet_function, b.id('$.noop'));
 		}
 
-		context.state.init.push(
-			b.stmt(b.call('$.snippet', context.state.node, b.thunk(snippet_function), ...args))
+		statements.push(
+			add_svelte_meta(
+				b.call('$.snippet', context.state.node, b.thunk(snippet_function), ...args),
+				node,
+				'render'
+			)
 		);
 	} else {
-		context.state.init.push(
-			b.stmt(
+		statements.push(
+			add_svelte_meta(
 				(node.expression.type === 'CallExpression' ? b.call : b.maybe_call)(
 					snippet_function,
 					context.state.node,
 					...args
+				),
+				node,
+				'render'
+			)
+		);
+	}
+
+	const async_values = memoizer.async_values();
+	const blockers = memoizer.blockers();
+
+	if (async_values || blockers) {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.async',
+					context.state.node,
+					blockers,
+					memoizer.async_values(),
+					b.arrow([context.state.node, ...memoizer.async_ids()], b.block(statements))
 				)
 			)
 		);
+
+		if (context.state.is_standalone) {
+			context.state.init.push(b.stmt(b.call('$.next')));
+		}
+	} 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 86734a07ab..294e5fdfc2 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,8 +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 '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import { build_attribute_value } from './shared/element.js';
+import { Memoizer } from './shared/utils.js';
 
 /**
  * @param {AST.SlotElement} node
@@ -10,7 +11,7 @@ import { build_attribute_value } from './shared/element.js';
  */
 export function SlotElement(node, context) {
 	// <slot {a}>fallback</slot>  -->   $.slot($$slots.default, { get a() { .. } }, () => ...fallback);
-	context.state.template.push('<!>');
+	context.state.template.push_comment();
 
 	/** @type {Property[]} */
 	const props = [];
@@ -21,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');
 
@@ -29,42 +30,65 @@ export function SlotElement(node, context) {
 		if (attribute.type === 'SpreadAttribute') {
 			spreads.push(b.thunk(/** @type {Expression} */ (context.visit(attribute))));
 		} else if (attribute.type === 'Attribute') {
-			const { value } = build_attribute_value(attribute.value, context);
+			const { value, has_state } = build_attribute_value(
+				attribute.value,
+				context,
+				(value, metadata) =>
+					metadata.has_call || metadata.has_await
+						? b.call('$.get', memoizer.add(value, metadata))
+						: value
+			);
 
 			if (attribute.name === 'name') {
 				name = /** @type {Literal} */ (value);
-				is_default = false;
 			} else if (attribute.name !== 'slot') {
-				if (attribute.metadata.expression.has_state) {
+				if (has_state) {
 					props.push(b.get(attribute.name, [b.return(value)]));
 				} else {
 					props.push(b.init(attribute.name, value));
 				}
 			}
 		} else if (attribute.type === 'LetDirective') {
-			lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
+			context.visit(attribute, { ...context.state, let_directives: lets });
 		}
 	}
 
+	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);
 
 	const fallback =
 		node.fragment.nodes.length === 0
-			? b.literal(null)
+			? 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();
+	const blockers = memoizer.blockers();
+
+	if (async_values || blockers) {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.async',
+					context.state.node,
+					blockers,
+					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/SnippetBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
index 7a0d6981b5..6c3a48c5ea 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
@@ -1,9 +1,9 @@
-/** @import { BlockStatement, Expression, Identifier, Pattern, Statement } from 'estree' */
+/** @import { AssignmentPattern, BlockStatement, Expression, Identifier, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import { dev } from '../../../../state.js';
 import { extract_paths } from '../../../../utils/ast.js';
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import { get_value } from './shared/declarations.js';
 
 /**
@@ -12,9 +12,8 @@ import { get_value } from './shared/declarations.js';
  */
 export function SnippetBlock(node, context) {
 	// TODO hoist where possible
-	/** @type {Pattern[]} */
+	/** @type {(Identifier | AssignmentPattern)[]} */
 	const args = [b.id('$$anchor')];
-
 	/** @type {BlockStatement} */
 	let body;
 
@@ -30,12 +29,7 @@ export function SnippetBlock(node, context) {
 		if (!argument) continue;
 
 		if (argument.type === 'Identifier') {
-			args.push({
-				type: 'AssignmentPattern',
-				left: argument,
-				right: b.id('$.noop')
-			});
-
+			args.push(b.assignment_pattern(argument, b.id('$.noop')));
 			transform[argument.name] = { read: b.call };
 
 			continue;
@@ -44,14 +38,21 @@ export function SnippetBlock(node, context) {
 		let arg_alias = `$$arg${i}`;
 		args.push(b.id(arg_alias));
 
-		const paths = extract_paths(argument);
+		const { inserts, paths } = extract_paths(argument, b.maybe_call(b.id(arg_alias)));
+
+		for (const { id, value } of inserts) {
+			id.name = context.state.scope.generate('$$array');
+			transform[id.name] = { read: get_value };
+
+			declarations.push(
+				b.var(id, b.call('$.derived', /** @type {Expression} */ (context.visit(b.thunk(value)))))
+			);
+		}
 
 		for (const path of paths) {
 			const name = /** @type {Identifier} */ (path.node).name;
 			const needs_derived = path.has_default_value; // to ensure that default value is only called once
-			const fn = b.thunk(
-				/** @type {Expression} */ (context.visit(path.expression?.(b.maybe_call(b.id(arg_alias)))))
-			);
+			const fn = b.thunk(/** @type {Expression} */ (context.visit(path.expression, child_state)));
 
 			declarations.push(b.let(path.node, needs_derived ? b.call('$.derived_safe_equal', fn) : fn));
 
@@ -66,18 +67,17 @@ export function SnippetBlock(node, context) {
 			}
 		}
 	}
-
+	const block = /** @type {BlockStatement} */ (context.visit(node.body, child_state)).body;
 	body = b.block([
+		dev ? b.stmt(b.call('$.validate_snippet_args', b.spread(b.id('arguments')))) : b.empty,
 		...declarations,
-		.../** @type {BlockStatement} */ (context.visit(node.body, child_state)).body
+		...block
 	]);
 
-	/** @type {Expression} */
-	let snippet = b.arrow(args, body);
-
-	if (dev) {
-		snippet = b.call('$.wrap_snippet', b.id(context.state.analysis.name), snippet);
-	}
+	// in dev we use a FunctionExpression (not arrow function) so we can use `arguments`
+	let snippet = dev
+		? b.call('$.wrap_snippet', b.id(context.state.analysis.name), b.function(null, args, body))
+		: b.arrow(args, body);
 
 	const declaration = b.const(node.expression, snippet);
 
@@ -89,6 +89,6 @@ export function SnippetBlock(node, context) {
 			context.state.instance_level_snippets.push(declaration);
 		}
 	} else {
-		context.state.init.push(declaration);
+		context.state.snippets.push(declaration);
 	}
 }
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 ef9f6bd798..eaffd15084 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,7 +1,8 @@
-/** @import { BlockStatement, Statement, Expression } from 'estree' */
+/** @import { BlockStatement, Statement, Expression, VariableDeclaration } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
-import * as b from '../../../../utils/builders.js';
+import { dev } from '../../../../state.js';
+import * as b from '#compiler/builders';
 
 /**
  * @param {AST.SvelteBoundary} node
@@ -23,7 +24,7 @@ export function SvelteBoundary(node, context) {
 
 		const expression = /** @type {Expression} */ (context.visit(chunk.expression, context.state));
 
-		if (attribute.metadata.expression.has_state) {
+		if (chunk.metadata.expression.has_state) {
 			props.properties.push(b.get(attribute.name, [b.return(expression)]));
 		} else {
 			props.properties.push(b.init(attribute.name, expression));
@@ -33,29 +34,98 @@ export function SvelteBoundary(node, context) {
 	const nodes = [];
 
 	/** @type {Statement[]} */
-	const snippet_statements = [];
+	const const_tags = [];
 
-	// Capture the `failed` implicit snippet prop
+	/** @type {Statement[]} */
+	const hoisted = [];
+
+	let has_const = false;
+	let has_declaration = false;
+
+	// const tags need to live inside the boundary, but might also be referenced in hoisted snippets.
+	// to resolve this we cheat: we duplicate const tags inside snippets
+	// We'll revert this behavior in the future, it was a mistake to allow this (Component snippets also don't do this).
 	for (const child of node.fragment.nodes) {
-		if (child.type === 'SnippetBlock' && child.expression.name === 'failed') {
-			/** @type {Statement[]} */
-			const init = [];
-			context.visit(child, { ...context.state, init });
-			props.properties.push(b.prop('init', child.expression, child.expression));
-			snippet_statements.push(...init);
-		} else {
-			nodes.push(child);
+		if (child.type === 'ConstTag') {
+			has_const = true;
+			if (!context.state.options.experimental.async) {
+				context.visit(child, {
+					...context.state,
+					consts: const_tags,
+					scope: context.state.scopes.get(node.fragment) ?? context.state.scope
+				});
+			}
+		}
+
+		if (child.type === 'DeclarationTag') {
+			has_declaration = true;
+		}
+	}
+
+	for (const child of node.fragment.nodes) {
+		if (child.type === 'ConstTag') {
+			if (context.state.options.experimental.async) {
+				nodes.push(child);
+			}
+			continue;
+		}
+
+		if (child.type === 'SnippetBlock') {
+			if (
+				context.state.options.experimental.async &&
+				(has_const || has_declaration) &&
+				!['failed', 'pending'].includes(child.expression.name)
+			) {
+				// we can't hoist snippets as they may reference const/declaration tags, so we just keep them in the fragment
+				nodes.push(child);
+			} else {
+				/** @type {Statement[]} */
+				const statements = [];
+
+				context.visit(child, { ...context.state, snippets: statements });
+
+				const snippet = /** @type {VariableDeclaration} */ (statements[0]);
+
+				const snippet_fn = dev
+					? // @ts-expect-error we know this shape is correct
+						snippet.declarations[0].init.arguments[1]
+					: snippet.declarations[0].init;
+
+				if (!context.state.options.experimental.async) {
+					snippet_fn.body.body.unshift(
+						...const_tags.filter((node) => node.type === 'VariableDeclaration')
+					);
+				}
+
+				if (['failed', 'pending'].includes(child.expression.name)) {
+					props.properties.push(b.prop('init', child.expression, child.expression));
+				}
+
+				hoisted.push(snippet);
+			}
+
+			continue;
 		}
+
+		nodes.push(child);
 	}
 
-	const block = /** @type {BlockStatement} */ (context.visit({ ...node.fragment, nodes }));
+	const block = /** @type {BlockStatement} */ (
+		context.visit(
+			{ ...node.fragment, nodes },
+			// Since we're creating a new fragment the reference in scopes can't match, so we gotta attach the right scope manually
+			{ ...context.state, scope: context.state.scopes.get(node.fragment) ?? context.state.scope }
+		)
+	);
+
+	if (!context.state.options.experimental.async) {
+		block.body.unshift(...const_tags);
+	}
 
 	const boundary = b.stmt(
 		b.call('$.boundary', context.state.node, props, b.arrow([b.id('$$anchor')], block))
 	);
 
-	context.state.template.push('<!>');
-	context.state.init.push(
-		snippet_statements.length > 0 ? b.block([...snippet_statements, boundary]) : boundary
-	);
+	context.state.template.push_comment();
+	context.state.init.push(hoisted.length > 0 ? b.block([...hoisted, boundary]) : boundary);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteComponent.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteComponent.js
index 85a4b611c0..d6a0418dd0 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteComponent.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteComponent.js
@@ -1,12 +1,13 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import { build_component } from './shared/component.js';
+import * as b from '#compiler/builders';
 
 /**
  * @param {AST.SvelteComponent} node
  * @param {ComponentContext} context
  */
 export function SvelteComponent(node, context) {
-	const component = build_component(node, '$$component', context);
+	const component = build_component(node, '$$component', null, context);
 	context.state.init.push(component);
 }
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 ba66fe29d6..10024298fa 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
@@ -1,28 +1,23 @@
-/** @import { BlockStatement, Expression, ExpressionStatement, Identifier, ObjectExpression, Statement } from 'estree' */
+/** @import { BlockStatement, Expression, ExpressionStatement, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
-import { dev, is_ignored, locator } from '../../../../state.js';
-import {
-	get_attribute_expression,
-	is_event_attribute,
-	is_text_attribute
-} from '../../../../utils/ast.js';
-import * as b from '../../../../utils/builders.js';
+import { dev, locator } from '../../../../state.js';
+import { is_text_attribute } from '../../../../utils/ast.js';
+import * as b from '#compiler/builders';
 import { determine_namespace_for_children } from '../../utils.js';
 import {
 	build_attribute_value,
-	build_class_directives,
-	build_set_attributes,
-	build_style_directives
+	build_attribute_effect,
+	build_set_class
 } from './shared/element.js';
-import { build_render_statement, build_update } from './shared/utils.js';
+import { build_render_statement, Memoizer } from './shared/utils.js';
 
 /**
  * @param {AST.SvelteElement} node
  * @param {ComponentContext} context
  */
 export function SvelteElement(node, context) {
-	context.state.template.push(`<!>`);
+	context.state.template.push_comment();
 
 	/** @type {Array<AST.Attribute | AST.SpreadAttribute>} */
 	const attributes = [];
@@ -37,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
@@ -49,10 +44,10 @@ export function SvelteElement(node, context) {
 		state: {
 			...context.state,
 			node: element_id,
-			before_init: [],
 			init: [],
 			update: [],
-			after_update: []
+			after_update: [],
+			memoizer: new Memoizer()
 		}
 	};
 
@@ -69,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));
@@ -78,52 +73,36 @@ 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
-
-	// Then do attributes
-	let is_attributes_reactive = false;
-
-	if (attributes.length === 0) {
-		if (context.state.analysis.css.hash) {
-			inner_context.state.init.push(
-				b.stmt(b.call('$.set_class', element_id, b.literal(context.state.analysis.css.hash)))
-			);
-		}
-	} else {
-		const attributes_id = b.id(context.state.scope.generate('attributes'));
-
+	if (
+		attributes.length === 1 &&
+		attributes[0].type === 'Attribute' &&
+		attributes[0].name.toLowerCase() === 'class' &&
+		is_text_attribute(attributes[0])
+	) {
+		build_set_class(node, element_id, attributes[0], class_directives, inner_context, false);
+	} else if (attributes.length) {
 		// Always use spread because we don't know whether the element is a custom element or not,
 		// therefore we need to do the "how to set an attribute" logic at runtime.
-		is_attributes_reactive = build_set_attributes(
+		build_attribute_effect(
 			attributes,
+			class_directives,
+			style_directives,
 			inner_context,
 			node,
-			element_id,
-			attributes_id,
-			b.binary('===', b.member(element_id, 'namespaceURI'), b.id('$.NAMESPACE_SVG')),
-			b.call(b.member(b.member(element_id, 'nodeName'), 'includes'), b.literal('-')),
-			context.state
+			element_id
 		);
 	}
 
-	// class/style directives must be applied last since they could override class/style attributes
-	build_class_directives(class_directives, element_id, inner_context, is_attributes_reactive);
-	build_style_directives(style_directives, element_id, inner_context, is_attributes_reactive);
+	const has_await = node.metadata.expression.has_await;
+	const has_blockers = node.metadata.expression.has_blockers();
 
-	const get_tag = b.thunk(/** @type {Expression} */ (context.visit(node.tag)));
-
-	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;
 	if (inner_context.state.update.length > 0) {
-		inner.push(build_render_statement(inner_context.state.update));
+		inner.push(build_render_statement(inner_context.state));
 	}
 	inner.push(...inner_context.state.after_update);
 	inner.push(
@@ -138,9 +117,16 @@ export function SvelteElement(node, context) {
 		).body
 	);
 
+	if (dev) {
+		statements.push(b.stmt(b.call('$.validate_dynamic_element_tag', get_tag)));
+		if (node.fragment.nodes.length > 0) {
+			statements.push(b.stmt(b.call('$.validate_void_dynamic_element', get_tag)));
+		}
+	}
+
 	const location = dev && locator(node.start);
 
-	context.state.init.push(
+	statements.push(
 		b.stmt(
 			b.call(
 				'$.element',
@@ -153,4 +139,23 @@ export function SvelteElement(node, context) {
 			)
 		)
 	);
+
+	if (has_await || has_blockers) {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.async',
+					context.state.node,
+					node.metadata.expression.blockers(),
+					has_await ? b.array([b.thunk(expression, true)]) : b.void0,
+					b.arrow(
+						has_await ? [context.state.node, b.id('$$tag')] : [context.state.node],
+						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/SvelteFragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteFragment.js
index 65cc170ce5..e3b46a4eef 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteFragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteFragment.js
@@ -9,7 +9,7 @@
 export function SvelteFragment(node, context) {
 	for (const attribute of node.attributes) {
 		if (attribute.type === 'LetDirective') {
-			context.state.init.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
+			context.visit(attribute);
 		}
 	}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteHead.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteHead.js
index 25fcff0631..f57e333a35 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteHead.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteHead.js
@@ -1,7 +1,9 @@
 /** @import { BlockStatement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
+import { hash } from '../../../../../utils.js';
+import { filename } from '../../../../state.js';
 
 /**
  * @param {AST.SvelteHead} node
@@ -12,7 +14,8 @@ export function SvelteHead(node, context) {
 	context.state.init.push(
 		b.stmt(
 			b.call(
-				'$.head',
+				b.id('$.head', node.name_loc),
+				b.literal(hash(filename)),
 				b.arrow([b.id('$$anchor')], /** @type {BlockStatement} */ (context.visit(node.fragment)))
 			)
 		)
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SveltePortal.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SveltePortal.js
index cbb074bd5b..74742e6ba6 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SveltePortal.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SveltePortal.js
@@ -14,7 +14,7 @@ export function SveltePortal(node, context) {
 		(attr) => attr.type === 'Attribute' && attr.name === 'target'
 	);
 
-	context.state.template.push('<!>');
+	context.state.template.push_comment();
 
 	if (target) {
 		const { value, has_state } = build_attribute_value(
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteSelf.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteSelf.js
index 285951499c..3d076177ac 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteSelf.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteSelf.js
@@ -1,5 +1,6 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
+import { component_name } from '../../../../state.js';
 import { build_component } from './shared/component.js';
 
 /**
@@ -7,6 +8,6 @@ import { build_component } from './shared/component.js';
  * @param {ComponentContext} context
  */
 export function SvelteSelf(node, context) {
-	const component = build_component(node, context.state.analysis.name, context);
+	const component = build_component(node, component_name, node.name_loc, context);
 	context.state.init.push(component);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js
index 72cc57b068..d91c387496 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js
@@ -1,24 +1,48 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
-import * as b from '../../../../utils/builders.js';
-import { build_template_chunk } from './shared/utils.js';
+import * as b from '#compiler/builders';
+import { build_template_chunk, Memoizer } from './shared/utils.js';
 
 /**
  * @param {AST.TitleElement} node
  * @param {ComponentContext} context
  */
 export function TitleElement(node, context) {
+	const memoizer = new Memoizer();
 	const { has_state, value } = build_template_chunk(
 		/** @type {any} */ (node.fragment.nodes),
-		context.visit,
-		context.state
+		context,
+		context.state,
+		(value, metadata) => memoizer.add(value, metadata)
 	);
+	const evaluated = context.state.scope.evaluate(value);
 
-	const statement = b.stmt(b.assignment('=', b.id('$.document.title'), value));
+	const statement = b.stmt(
+		b.assignment(
+			'=',
+			b.member(b.id('$.document'), b.id('title', node.name_loc)),
+			evaluated.is_known
+				? b.literal(evaluated.value)
+				: evaluated.is_defined
+					? value
+					: b.logical('??', value, b.literal(''))
+		)
+	);
 
+	// Make sure it only changes the title once async work is done
 	if (has_state) {
-		context.state.update.push(statement);
+		context.state.after_update.push(
+			b.stmt(
+				b.call(
+					'$.deferred_template_effect',
+					b.arrow(memoizer.apply(), b.block([statement])),
+					memoizer.sync_values(),
+					memoizer.async_values(),
+					memoizer.blockers()
+				)
+			)
+		);
 	} else {
-		context.state.init.push(statement);
+		context.state.after_update.push(b.stmt(b.call('$.effect', b.thunk(b.block([statement])))));
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/TransitionDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/TransitionDirective.js
index e331f36472..bab843de02 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/TransitionDirective.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/TransitionDirective.js
@@ -2,7 +2,7 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import { TRANSITION_GLOBAL, TRANSITION_IN, TRANSITION_OUT } from '../../../../../constants.js';
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import { parse_directive_name } from './shared/utils.js';
 
 /**
@@ -25,5 +25,17 @@ export function TransitionDirective(node, context) {
 	}
 
 	// in after_update to ensure it always happens after bind:this
-	context.state.after_update.push(b.stmt(b.call('$.transition', ...args)));
+	let statement = b.stmt(b.call('$.transition', ...args));
+
+	if (node.metadata.expression.is_async()) {
+		statement = b.stmt(
+			b.call(
+				'$.run_after_blockers',
+				node.metadata.expression.blockers(),
+				b.thunk(b.block([statement]))
+			)
+		);
+	}
+
+	context.state.after_update.push(statement);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js
index 13c1b4bc51..66952eb298 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js
@@ -1,8 +1,8 @@
 /** @import { AssignmentExpression, Expression, UpdateExpression } from 'estree' */
 /** @import { Context } from '../types' */
-import { is_ignored } from '../../../../state.js';
 import { object } from '../../../../utils/ast.js';
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
+import { validate_mutation } from './shared/utils.js';
 
 /**
  * @param {UpdateExpression} node
@@ -15,7 +15,7 @@ export function UpdateExpression(node, context) {
 		argument.type === 'MemberExpression' &&
 		argument.object.type === 'ThisExpression' &&
 		argument.property.type === 'PrivateIdentifier' &&
-		context.state.private_state.has(argument.property.name)
+		context.state.state_fields.has('#' + argument.property.name)
 	) {
 		let fn = '$.update';
 		if (node.prefix) fn += '_pre';
@@ -51,7 +51,5 @@ export function UpdateExpression(node, context) {
 		);
 	}
 
-	return is_ignored(node, 'ownership_invalid_mutation')
-		? b.call('$.skip_ownership_validation', b.thunk(update))
-		: update;
+	return validate_mutation(node, context, update);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/UseDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/UseDirective.js
index be9eb2d516..13d3057651 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/UseDirective.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/UseDirective.js
@@ -1,7 +1,7 @@
 /** @import { Expression } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import { parse_directive_name } from './shared/utils.js';
 
 /**
@@ -32,6 +32,18 @@ export function UseDirective(node, context) {
 	}
 
 	// actions need to run after attribute updates in order with bindings/events
-	context.state.init.push(b.stmt(b.call('$.action', ...args)));
+	let statement = b.stmt(b.call('$.action', ...args));
+
+	if (node.metadata.expression.is_async()) {
+		statement = b.stmt(
+			b.call(
+				'$.run_after_blockers',
+				node.metadata.expression.blockers(),
+				b.thunk(b.block([statement]))
+			)
+		);
+	}
+
+	context.state.init.push(statement);
 	context.next();
 }
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 afb90bbec7..b9f4690179 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,13 +1,13 @@
 /** @import { CallExpression, Expression, Identifier, Literal, VariableDeclaration, VariableDeclarator } from 'estree' */
 /** @import { Binding } from '#compiler' */
-/** @import { ComponentClientTransformState, ComponentContext } from '../types' */
-import { dev } from '../../../../state.js';
-import { extract_paths } from '../../../../utils/ast.js';
-import * as b from '../../../../utils/builders.js';
+/** @import { ComponentContext } from '../types' */
+import { dev, is_ignored, locate_node } from '../../../../state.js';
+import { extract_paths, save } from '../../../../utils/ast.js';
+import * as b from '#compiler/builders';
 import * as assert from '../../../../utils/assert.js';
 import { get_rune } from '../../../scope.js';
 import { get_prop_source, is_prop_source, is_state_source, should_proxy } from '../utils.js';
-import { is_hoisted_function } from '../../utils.js';
+import { get_value } from './shared/declarations.js';
 
 /**
  * @param {VariableDeclaration} node
@@ -19,7 +19,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 (
@@ -31,17 +31,15 @@ export function VariableDeclaration(node, context) {
 				rune === '$state.snapshot' ||
 				rune === '$host'
 			) {
-				if (init != null && is_hoisted_function(init)) {
-					context.state.hoisted.push(
-						b.const(declarator.id, /** @type {Expression} */ (context.visit(init)))
-					);
-
-					continue;
-				}
 				declarations.push(/** @type {VariableDeclarator} */ (context.visit(declarator)));
 				continue;
 			}
 
+			if (rune === '$props.id') {
+				// skip
+				continue;
+			}
+
 			if (rune === '$props') {
 				/** @type {string[]} */
 				const seen = ['$$slots', '$$events', '$$legacy'];
@@ -51,8 +49,13 @@ export function VariableDeclaration(node, context) {
 				}
 
 				if (declarator.id.type === 'Identifier') {
+					const exclude_id = context.state.scope.root.unique('rest_excludes');
+					context.state.hoisted.push(
+						b.var(exclude_id, b.new('Set', b.array(seen.map((name) => b.literal(name)))))
+					);
+
 					/** @type {Expression[]} */
-					const args = [b.id('$$props'), b.array(seen.map((name) => b.literal(name)))];
+					const args = [b.id('$$props'), exclude_id];
 
 					if (dev) {
 						// include rest name, so we can provide informative error messages
@@ -84,6 +87,10 @@ export function VariableDeclaration(node, context) {
 								should_proxy(initial, context.state.scope)
 							) {
 								initial = b.call('$.proxy', initial);
+
+								if (dev) {
+									initial = b.call('$.tag_proxy', initial, b.literal(id.name));
+								}
 							}
 
 							if (is_prop_source(binding, context.state)) {
@@ -93,8 +100,13 @@ export function VariableDeclaration(node, context) {
 							}
 						} else {
 							// RestElement
+							const exclude_id = context.state.scope.root.unique('rest_excludes');
+							context.state.hoisted.push(
+								b.var(exclude_id, b.new('Set', b.array(seen.map((name) => b.literal(name)))))
+							);
+
 							/** @type {Expression[]} */
-							const args = [b.id('$$props'), b.array(seen.map((name) => b.literal(name)))];
+							const args = [b.id('$$props'), exclude_id];
 
 							if (dev) {
 								// include rest name, so we can provide informative error messages
@@ -111,8 +123,7 @@ export function VariableDeclaration(node, context) {
 			}
 
 			const args = /** @type {CallExpression} */ (init).arguments;
-			const value =
-				args.length === 0 ? b.id('undefined') : /** @type {Expression} */ (context.visit(args[0]));
+			const value = /** @type {Expression} */ (args[0]) ?? b.void0; // TODO do we need the void 0? can we just omit it altogether?
 
 			if (rune === '$state' || rune === '$state.raw') {
 				/**
@@ -123,26 +134,57 @@ export function VariableDeclaration(node, context) {
 					const binding = /** @type {import('#compiler').Binding} */ (
 						context.state.scope.get(id.name)
 					);
-					if (rune === '$state' && should_proxy(value, context.state.scope)) {
+					const is_state = is_state_source(binding, context.state.analysis);
+					const is_proxy = should_proxy(value, context.state.scope);
+
+					if (rune === '$state' && is_proxy) {
 						value = b.call('$.proxy', value);
+
+						if (dev && !is_state) {
+							value = b.call('$.tag_proxy', value, b.literal(id.name));
+						}
 					}
-					if (is_state_source(binding, context.state.analysis)) {
-						value = b.call('$.state', value);
+
+					if (is_state) {
+						const callee = b.id('$.state', /** @type {CallExpression} */ (init).callee.loc);
+						value = b.call(callee, value);
+
+						if (dev) {
+							value = b.call('$.tag', value, b.literal(id.name));
+						}
 					}
+
 					return value;
 				};
 
 				if (declarator.id.type === 'Identifier') {
+					const expression = /** @type {Expression} */ (context.visit(value));
+
 					declarations.push(
-						b.declarator(declarator.id, create_state_declarator(declarator.id, value))
+						b.declarator(declarator.id, create_state_declarator(declarator.id, expression))
 					);
 				} else {
-					const tmp = context.state.scope.generate('tmp');
-					const paths = extract_paths(declarator.id);
+					const tmp = b.id(context.state.scope.generate('tmp'));
+					const { inserts, paths } = extract_paths(declarator.id, tmp);
+
 					declarations.push(
-						b.declarator(b.id(tmp), value),
+						b.declarator(tmp, /** @type {Expression} */ (context.visit(value))),
+						...inserts.map(({ id, value }) => {
+							id.name = context.state.scope.generate('$$array');
+							context.state.transform[id.name] = { read: get_value };
+
+							const expression = /** @type {Expression} */ (context.visit(b.thunk(value)));
+							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 = path.expression?.(b.id(tmp));
+							const value = /** @type {Expression} */ (context.visit(path.expression));
 							const binding = context.state.scope.get(/** @type {Identifier} */ (path.node).name);
 							return b.declarator(
 								path.node,
@@ -158,40 +200,97 @@ 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') {
-					declarations.push(
-						b.declarator(
-							declarator.id,
-							b.call('$.derived', rune === '$derived.by' ? value : b.thunk(value))
-						)
-					);
-				} else {
-					const bindings = extract_paths(declarator.id);
+					let expression = /** @type {Expression} */ (context.visit(value));
+
+					if (is_async) {
+						const location = dev && !is_ignored(init, 'await_waterfall') && locate_node(init);
+
+						/** @type {Expression} */
+						let call = b.call(
+							'$.async_derived',
+							b.thunk(expression, true),
+							dev && b.literal(declarator.id.name),
+							location ? b.literal(location) : undefined
+						);
+
+						declarations.push(b.declarator(declarator.id, b.await(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));
 
-					/** @type {Identifier} */
-					let id;
 					let rhs = value;
 
-					if (rune === '$derived' && init.arguments[0].type === 'Identifier') {
-						id = init.arguments[0];
-					} else {
-						id = b.id(context.state.scope.generate('$$d'));
+					if (rune !== '$derived' || init.arguments[0].type !== 'Identifier') {
+						const id = b.id(context.state.scope.generate('$$d'));
+
+						/** @type {Expression} */
+						let call = b.call('$.derived', rune === '$derived' ? b.thunk(expression) : expression);
+
 						rhs = b.call('$.get', id);
 
-						declarations.push(
-							b.declarator(id, b.call('$.derived', rune === '$derived.by' ? value : b.thunk(value)))
-						);
+						if (is_async) {
+							const location = dev && !is_ignored(init, 'await_waterfall') && locate_node(init);
+
+							call = b.call(
+								'$.async_derived',
+								b.thunk(expression, true),
+								dev &&
+									b.literal(
+										`[$derived ${declarator.id.type === 'ArrayPattern' ? 'iterable' : 'object'}]`
+									),
+								location ? b.literal(location) : undefined
+							);
+
+							call = b.await(call);
+						}
+
+						declarations.push(b.declarator(id, call));
+					}
+
+					const { inserts, paths } = extract_paths(declarator.id, rhs);
+
+					for (const { id, value } of inserts) {
+						id.name = context.state.scope.generate('$$array');
+						context.state.transform[id.name] = { read: get_value };
+
+						const expression = /** @type {Expression} */ (context.visit(b.thunk(value)));
+						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 (let i = 0; i < bindings.length; i++) {
-						const binding = bindings[i];
+					for (const path of paths) {
+						const expression = /** @type {Expression} */ (context.visit(path.expression));
+						const call = b.call('$.derived', b.thunk(expression));
 						declarations.push(
-							b.declarator(binding.node, b.call('$.derived', b.thunk(binding.expression(rhs))))
+							b.declarator(
+								path.node,
+								dev
+									? b.call('$.tag', call, b.literal(/** @type {Identifier} */ (path.node).name))
+									: call
+							)
 						);
 					}
 				}
+
 				continue;
 			}
 		}
@@ -202,16 +301,6 @@ export function VariableDeclaration(node, context) {
 			const has_props = bindings.some((binding) => binding.kind === 'bindable_prop');
 
 			if (!has_state && !has_props) {
-				const init = declarator.init;
-
-				if (init != null && is_hoisted_function(init)) {
-					context.state.hoisted.push(
-						b.const(declarator.id, /** @type {Expression} */ (context.visit(init)))
-					);
-
-					continue;
-				}
-
 				declarations.push(/** @type {VariableDeclarator} */ (context.visit(declarator)));
 				continue;
 			}
@@ -219,21 +308,30 @@ export function VariableDeclaration(node, context) {
 			if (has_props) {
 				if (declarator.id.type !== 'Identifier') {
 					// Turn export let into props. It's really really weird because export let { x: foo, z: [bar]} = ..
-					// means that foo and bar are the props (i.e. the leafs are the prop names), not x and z.
-					const tmp = context.state.scope.generate('tmp');
-					const paths = extract_paths(declarator.id);
+					// means that foo and bar are the props (i.e. the leaves are the prop names), not x and z.
+					const tmp = b.id(context.state.scope.generate('tmp'));
+					const { inserts, paths } = extract_paths(declarator.id, tmp);
 
 					declarations.push(
 						b.declarator(
-							b.id(tmp),
+							tmp,
 							/** @type {Expression} */ (context.visit(/** @type {Expression} */ (declarator.init)))
 						)
 					);
 
+					for (const { id, value } of inserts) {
+						id.name = context.state.scope.generate('$$array');
+						context.state.transform[id.name] = { read: get_value };
+
+						const expression = /** @type {Expression} */ (context.visit(b.thunk(value)));
+						declarations.push(b.declarator(id, b.call('$.derived', expression)));
+					}
+
 					for (const path of paths) {
 						const name = /** @type {Identifier} */ (path.node).name;
 						const binding = /** @type {Binding} */ (context.state.scope.get(name));
-						const value = path.expression?.(b.id(tmp));
+						const value = /** @type {Expression} */ (context.visit(path.expression));
+
 						declarations.push(
 							b.declarator(
 								path.node,
@@ -267,7 +365,7 @@ export function VariableDeclaration(node, context) {
 			declarations.push(
 				...create_state_declarators(
 					declarator,
-					context.state,
+					context,
 					/** @type {Expression} */ (declarator.init && context.visit(declarator.init))
 				)
 			);
@@ -287,30 +385,43 @@ export function VariableDeclaration(node, context) {
 /**
  * Creates the output for a state declaration in legacy mode.
  * @param {VariableDeclarator} declarator
- * @param {ComponentClientTransformState} scope
+ * @param {ComponentContext} context
  * @param {Expression} value
  */
-function create_state_declarators(declarator, { scope, analysis }, value) {
+function create_state_declarators(declarator, context, value) {
+	/**
+	 * @param {Expression} value
+	 * @param {string} name
+	 */
+	const mutable_source = (value, name) => {
+		const call = b.call('$.mutable_source', value, context.state.analysis.immutable && b.true);
+		return dev ? b.call('$.tag', call, b.literal(name)) : call;
+	};
+
 	if (declarator.id.type === 'Identifier') {
-		return [
-			b.declarator(
-				declarator.id,
-				b.call('$.mutable_state', value, analysis.immutable ? b.true : undefined)
-			)
-		];
+		return [b.declarator(declarator.id, mutable_source(value, declarator.id.name))];
 	}
 
-	const tmp = scope.generate('tmp');
-	const paths = extract_paths(declarator.id);
+	const tmp = b.id(context.state.scope.generate('tmp'));
+	const { inserts, paths } = extract_paths(declarator.id, tmp);
+
 	return [
-		b.declarator(b.id(tmp), value),
+		b.declarator(tmp, value),
+		...inserts.map(({ id, value }) => {
+			id.name = context.state.scope.generate('$$array');
+			context.state.transform[id.name] = { read: get_value };
+
+			const expression = /** @type {Expression} */ (context.visit(b.thunk(value)));
+			return b.declarator(id, b.call('$.derived', expression));
+		}),
 		...paths.map((path) => {
-			const value = path.expression?.(b.id(tmp));
-			const binding = scope.get(/** @type {Identifier} */ (path.node).name);
+			const value = /** @type {Expression} */ (context.visit(path.expression));
+			const binding = context.state.scope.get(/** @type {Identifier} */ (path.node).name);
+
 			return b.declarator(
 				path.node,
 				binding?.kind === 'state'
-					? b.call('$.mutable_state', value, analysis.immutable ? b.true : undefined)
+					? mutable_source(value, /** @type {Identifier} */ (path.node).name)
 					: value
 			);
 		})
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 068971145c..216bf08b5c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
@@ -1,11 +1,10 @@
-/** @import { BlockStatement, Expression, ExpressionStatement, Identifier, MemberExpression, Pattern, Property, SequenceExpression, Statement } from 'estree' */
+/** @import { BlockStatement, Expression, ExpressionStatement, Identifier, MemberExpression, Pattern, Property, SequenceExpression, SourceLocation, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../../types.js' */
 import { dev, is_ignored } from '../../../../../state.js';
 import { get_attribute_chunks, object } from '../../../../../utils/ast.js';
-import * as b from '../../../../../utils/builders.js';
-import { create_derived } from '../../utils.js';
-import { build_bind_this, validate_binding } from '../shared/utils.js';
+import * as b from '#compiler/builders';
+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';
@@ -13,13 +12,17 @@ import { determine_slot } from '../../../../../utils/slot.js';
 /**
  * @param {AST.Component | AST.SvelteComponent | AST.SvelteSelf} node
  * @param {string} component_name
+ * @param {SourceLocation | null} loc
  * @param {ComponentContext} context
- * @param {Expression} anchor
  * @returns {Statement}
  */
-export function build_component(node, component_name, context, anchor = context.state.node) {
+export function build_component(node, component_name, loc, context) {
+	/** @type {Expression} */
+	const anchor = context.state.node;
+
 	/** @type {Array<Property[] | Expression>} */
 	const props_and_spreads = [];
+
 	/** @type {Array<() => void>} */
 	const delayed_props = [];
 
@@ -41,6 +44,8 @@ export function build_component(node, component_name, context, anchor = context.
 	/** @type {Record<string, Expression[]>} */
 	const events = {};
 
+	const memoizer = new Memoizer();
+
 	/** @type {Property[]} */
 	const custom_css_props = [];
 
@@ -50,6 +55,15 @@ export function build_component(node, component_name, context, anchor = context.
 	/** @type {ExpressionStatement[]} */
 	const binding_initializers = [];
 
+	const is_component_dynamic =
+		node.type === 'SvelteComponent' || (node.type === 'Component' && node.metadata.dynamic);
+
+	// The variable name used for the component inside $.component()
+	const intermediate_name =
+		node.type === 'Component' && node.metadata.dynamic
+			? context.state.scope.generate(node.name)
+			: '$$component';
+
 	/**
 	 * If this component has a slot property, it is a named slot within another component. In this case
 	 * the slot scope applies to the component itself, too, and not just its children.
@@ -88,7 +102,7 @@ export function build_component(node, component_name, context, anchor = context.
 	if (slot_scope_applies_to_itself) {
 		for (const attribute of node.attributes) {
 			if (attribute.type === 'LetDirective') {
-				lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
+				context.visit(attribute, { ...context.state, let_directives: lets });
 			}
 		}
 	}
@@ -96,7 +110,7 @@ export function build_component(node, component_name, context, anchor = context.
 	for (const attribute of node.attributes) {
 		if (attribute.type === 'LetDirective') {
 			if (!slot_scope_applies_to_itself) {
-				lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute, states.default)));
+				context.visit(attribute, { ...states.default, let_directives: lets });
 			}
 		} else if (attribute.type === 'OnDirective') {
 			if (!attribute.expression) {
@@ -116,23 +130,32 @@ export function build_component(node, component_name, context, anchor = 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);
-				}
+			const memoized_expression = memoizer.add(expression, attribute.metadata.expression);
+			const is_memoized = expression !== memoized_expression;
 
-				props_and_spreads.push(b.thunk(value));
+			if (
+				is_memoized ||
+				attribute.metadata.expression.has_state ||
+				attribute.metadata.expression.has_await
+			) {
+				props_and_spreads.push(
+					b.thunk(is_memoized ? b.call('$.get', memoized_expression) : expression)
+				);
 			} else {
 				props_and_spreads.push(expression);
 			}
 		} else if (attribute.type === 'Attribute') {
 			if (attribute.name.startsWith('--')) {
 				custom_css_props.push(
-					b.init(attribute.name, build_attribute_value(attribute.value, context).value)
+					b.init(
+						attribute.name,
+						build_attribute_value(attribute.value, context, (value, metadata) => {
+							const memoized = memoizer.add(value, metadata);
+
+							// TODO put the derived in the local block
+							return value !== memoized ? b.call('$.get', memoized) : value;
+						}).value
+					)
 				);
 				continue;
 			}
@@ -145,54 +168,61 @@ export function build_component(node, component_name, context, anchor = context.
 				has_children_prop = true;
 			}
 
-			const { value } = build_attribute_value(attribute.value, context);
-
-			if (attribute.metadata.expression.has_state) {
-				let arg = 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.
-				const should_wrap_in_derived = get_attribute_chunks(attribute.value).some((n) => {
-					return (
-						n.type === 'ExpressionTag' &&
-						n.expression.type !== 'Identifier' &&
-						n.expression.type !== 'MemberExpression'
-					);
-				});
-
-				if (should_wrap_in_derived) {
-					const id = b.id(context.state.scope.generate(attribute.name));
-					context.state.init.push(b.var(id, create_derived(context.state, b.thunk(value))));
-					arg = b.call('$.get', id);
+			const { value, has_state } = build_attribute_value(
+				attribute.value,
+				context,
+				(value, metadata) => {
+					// 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 =
+						metadata.has_await ||
+						get_attribute_chunks(attribute.value).some((n) => {
+							return (
+								n.type === 'ExpressionTag' &&
+								n.expression.type !== 'Identifier' &&
+								n.expression.type !== 'MemberExpression'
+							);
+						});
+
+					const memoized = memoizer.add(value, metadata, should_wrap_in_derived);
+
+					return value !== memoized ? b.call('$.get', memoized) : value;
 				}
+			);
 
-				push_prop(b.get(attribute.name, [b.return(arg)]));
+			if (has_state) {
+				push_prop(b.get(attribute.name, [b.return(value)]));
 			} else {
 				push_prop(b.init(attribute.name, value));
 			}
 		} else if (attribute.type === 'BindDirective') {
-			const expression = /** @type {Expression} */ (context.visit(attribute.expression));
+			const expression = /** @type {Expression} */ (
+				context.visit(attribute.expression, { ...context.state, memoizer })
+			);
 
-			if (dev && attribute.name !== 'this' && attribute.expression.type !== 'SequenceExpression') {
-				const left = object(attribute.expression);
-				let binding;
+			// Bindings are a bit special: we don't want to add them to (async) deriveds but we need to check if they have blockers
+			memoizer.check_blockers(attribute.metadata.expression);
 
-				if (left?.type === 'Identifier') {
-					binding = context.state.scope.get(left.name);
-				}
+			if (
+				dev &&
+				attribute.name !== 'this' &&
+				!is_ignored(node, 'ownership_invalid_binding') &&
+				// bind:x={() => x.y, y => x.y = y} will be handled by the assignment expression binding validation
+				attribute.expression.type !== 'SequenceExpression'
+			) {
+				const left = object(attribute.expression);
+				const binding = left && context.state.scope.get(left.name);
 
-				// Only run ownership addition on $state fields.
-				// Theoretically someone could create a `$state` while creating `$state.raw` or inside a `$derived.by`,
-				// but that feels so much of an edge case that it doesn't warrant a perf hit for the common case.
-				if (binding?.kind !== 'derived' && binding?.kind !== 'raw_state') {
+				if (binding?.kind === 'bindable_prop' || binding?.kind === 'prop') {
+					context.state.analysis.needs_mutation_validation = true;
 					binding_initializers.push(
 						b.stmt(
 							b.call(
-								b.id('$.add_owner_effect'),
-								b.thunk(expression),
-								b.id(component_name),
-								is_ignored(node, 'ownership_invalid_binding') && b.true
+								'$$ownership_validator.binding',
+								b.literal(binding.node.name),
+								b.id(is_component_dynamic ? intermediate_name : component_name),
+								b.thunk(expression)
 							)
 						)
 					);
@@ -230,15 +260,9 @@ export function build_component(node, component_name, context, anchor = context.
 						attribute.expression.type === 'Identifier' &&
 						context.state.scope.get(attribute.expression.name)?.kind === 'store_sub';
 
-					// Delay prop pushes so bindings come at the end, to avoid spreads overwriting them
-					if (is_store_sub) {
-						push_prop(
-							b.get(attribute.name, [b.stmt(b.call('$.mark_store_binding')), b.return(expression)]),
-							true
-						);
-					} else {
-						push_prop(b.get(attribute.name, [b.return(expression)]), true);
-					}
+					const get = is_store_sub
+						? b.get(attribute.name, [b.stmt(b.call('$.mark_store_binding')), b.return(expression)])
+						: b.get(attribute.name, [b.return(expression)]);
 
 					const assignment = b.assignment(
 						'=',
@@ -246,12 +270,37 @@ export function build_component(node, component_name, context, anchor = context.
 						b.id('$$value')
 					);
 
-					push_prop(
-						b.set(attribute.name, [b.stmt(/** @type {Expression} */ (context.visit(assignment)))]),
-						true
-					);
+					const set = b.set(attribute.name, [
+						b.stmt(/** @type {Expression} */ (context.visit(assignment)))
+					]);
+
+					get.key.loc = attribute.name_loc;
+					set.key.loc = attribute.name_loc;
+
+					// Delay prop pushes so bindings come at the end, to avoid spreads overwriting them
+					push_prop(get, true);
+					push_prop(set, true);
 				}
 			}
+		} else if (attribute.type === 'AttachTag') {
+			const evaluated = context.state.scope.evaluate(attribute.expression);
+
+			let expression = /** @type {Expression} */ (context.visit(attribute.expression));
+
+			if (attribute.metadata.expression.has_state) {
+				expression = b.arrow(
+					[b.id('$$node')],
+					b.call(
+						evaluated.is_function ? expression : b.logical('||', expression, b.id('$.noop')),
+						b.id('$$node')
+					)
+				);
+			}
+
+			// TODO also support await expressions here?
+			memoizer.check_blockers(attribute.metadata.expression);
+
+			push_prop(b.prop('init', b.call('$.attachment'), expression, true));
 		}
 	}
 
@@ -284,7 +333,7 @@ export function build_component(node, component_name, context, anchor = context.
 			// can be used as props without creating conflicts
 			context.visit(child, {
 				...context.state,
-				init: snippet_declarations
+				snippets: snippet_declarations
 			});
 
 			push_prop(b.prop('init', child.expression, child.expression));
@@ -386,16 +435,17 @@ export function build_component(node, component_name, context, anchor = context.
 
 	/** @param {Expression} node_id */
 	let fn = (node_id) => {
-		return b.call(
-			// TODO We can remove this ternary once we remove legacy mode, since in runes mode dynamic components
-			// will be handled separately through the `$.component` function, and then the component name will
-			// always be referenced through just the identifier here.
-			node.type === 'SvelteComponent'
-				? component_name
-				: /** @type {Expression} */ (context.visit(b.member_id(component_name))),
-			node_id,
-			props_expression
-		);
+		// TODO We can remove this ternary once we remove legacy mode, since in runes mode dynamic components
+		// will be handled separately through the `$.component` function, and then the component name will
+		// always be referenced through just the identifier here.
+		const callee = is_component_dynamic
+			? b.id(intermediate_name)
+			: /** @type {Expression} */ (context.visit(b.member_id(component_name)));
+
+		// line up the `Foo` in `Foo(...)` and `<Foo>` for usable stack traces
+		callee.loc = loc;
+
+		return b.call(callee, node_id, props_expression);
 	};
 
 	if (bind_this !== null) {
@@ -406,18 +456,27 @@ export function build_component(node, component_name, context, anchor = context.
 		};
 	}
 
-	const statements = [...snippet_declarations];
+	if (node.type !== 'SvelteSelf') {
+		// Component name itself could be blocked on async values
+		memoizer.check_blockers(node.metadata.expression);
+	}
+
+	let statements = [...snippet_declarations, ...memoizer.deriveds(context.state.analysis.runes)];
 
-	if (node.type === 'SvelteComponent') {
+	if (is_component_dynamic) {
 		const prev = fn;
 
 		fn = (node_id) => {
 			return b.call(
 				'$.component',
 				node_id,
-				b.thunk(/** @type {Expression} */ (context.visit(node.expression))),
+				b.thunk(
+					/** @type {Expression} */ (
+						context.visit(node.type === 'Component' ? b.member_id(component_name) : node.expression)
+					)
+				),
 				b.arrow(
-					[b.id('$$anchor'), b.id(component_name)],
+					[b.id('$$anchor'), b.id(intermediate_name)],
 					b.block([...binding_initializers, b.stmt(prev(b.id('$$anchor')))])
 				)
 			);
@@ -427,11 +486,17 @@ export function build_component(node, component_name, context, anchor = context.
 	}
 
 	if (Object.keys(custom_css_props).length > 0) {
-		context.state.template.push(
-			context.state.metadata.namespace === 'svg'
-				? '<g><!></g>'
-				: '<svelte-css-wrapper style="display: contents"><!></svelte-css-wrapper>'
-		);
+		if (context.state.metadata.namespace === 'svg') {
+			// this boils down to <g><!></g>
+			context.state.template.push_element('g', node.start, false);
+		} else {
+			// this boils down to <svelte-css-wrapper style='display: contents'><!></svelte-css-wrapper>
+			context.state.template.push_element('svelte-css-wrapper', node.start, false);
+			context.state.template.set_prop('style', 'display: contents');
+		}
+
+		context.state.template.push_comment();
+		context.state.template.pop_element();
 
 		statements.push(
 			b.stmt(b.call('$.css_props', anchor, b.thunk(b.object(custom_css_props)))),
@@ -439,8 +504,32 @@ export function build_component(node, component_name, context, anchor = context.
 			b.stmt(b.call('$.reset', anchor))
 		);
 	} else {
-		context.state.template.push('<!>');
-		statements.push(b.stmt(fn(anchor)));
+		context.state.template.push_comment();
+
+		statements.push(add_svelte_meta(fn(anchor), node, 'component', { componentTag: node.name }));
+	}
+
+	memoizer.apply();
+
+	const async_values = memoizer.async_values();
+	const blockers = memoizer.blockers();
+
+	if (async_values || blockers) {
+		statements = [
+			b.stmt(
+				b.call(
+					'$.async',
+					anchor,
+					blockers,
+					async_values,
+					b.arrow([b.id('$$anchor'), ...memoizer.async_ids()], b.block(statements))
+				)
+			)
+		];
+
+		if (context.state.is_standalone) {
+			statements.push(b.stmt(b.call('$.next')));
+		}
 	}
 
 	return statements.length > 1 ? b.block(statements) : statements[0];
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js
index 0bd8c352f6..f6bb26daac 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js
@@ -1,7 +1,7 @@
 /** @import { Identifier } from 'estree' */
 /** @import { ComponentContext, Context } from '../../types' */
 import { is_state_source } from '../../utils.js';
-import * as b from '../../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 
 /**
  * Turns `foo` into `$.get(foo)`
@@ -24,8 +24,8 @@ export function add_state_transformers(context) {
 		) {
 			context.state.transform[name] = {
 				read: binding.declaration_kind === 'var' ? (node) => b.call('$.safe_get', node) : get_value,
-				assign: (node, value) => {
-					let call = b.call('$.set', node, value);
+				assign: (node, value, proxy = false) => {
+					let call = b.call('$.set', node, value, proxy && b.true);
 
 					if (context.state.scope.get(`$${node.name}`)?.kind === 'store_sub') {
 						call = b.call('$.store_unsub', call, b.literal(`$${node.name}`), b.id('$$stores'));
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 1b0737e31e..58ed88855f 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,41 +1,43 @@
 /** @import { Expression, Identifier, ObjectExpression } from 'estree' */
-/** @import { AST, Namespace } from '#compiler' */
-/** @import { ComponentClientTransformState, ComponentContext } from '../../types' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../../types' */
+import { escape_html } from '../../../../../../escaping.js';
 import { normalize_attribute } from '../../../../../../utils.js';
 import { is_ignored } from '../../../../../state.js';
-import { get_attribute_expression, is_event_attribute } from '../../../../../utils/ast.js';
-import * as b from '../../../../../utils/builders.js';
-import { build_getter, create_derived } from '../../utils.js';
-import { build_template_chunk, build_update } from './utils.js';
+import { is_event_attribute } from '../../../../../utils/ast.js';
+import * as b from '#compiler/builders';
+import { build_class_directives_object, build_style_directives_object } from '../RegularElement.js';
+import { build_expression, build_template_chunk, Memoizer } from './utils.js';
+import { ExpressionMetadata } from '../../../../nodes.js';
 
 /**
  * @param {Array<AST.Attribute | AST.SpreadAttribute>} attributes
+ * @param {AST.ClassDirective[]} class_directives
+ * @param {AST.StyleDirective[]} style_directives
  * @param {ComponentContext} context
  * @param {AST.RegularElement | AST.SvelteElement} element
  * @param {Identifier} element_id
- * @param {Identifier} attributes_id
- * @param {false | Expression} preserve_attribute_case
- * @param {false | Expression} is_custom_element
- * @param {ComponentClientTransformState} state
+ * @param {boolean} [should_remove_defaults]
  */
-export function build_set_attributes(
+export function build_attribute_effect(
 	attributes,
+	class_directives,
+	style_directives,
 	context,
 	element,
 	element_id,
-	attributes_id,
-	preserve_attribute_case,
-	is_custom_element,
-	state
+	should_remove_defaults = false
 ) {
-	let has_state = false;
-
 	/** @type {ObjectExpression['properties']} */
 	const values = [];
 
+	const memoizer = new Memoizer();
+
 	for (const attribute of attributes) {
 		if (attribute.type === 'Attribute') {
-			const { value } = build_attribute_value(attribute.value, context);
+			const { value } = build_attribute_value(attribute.value, context, (value, metadata) =>
+				memoizer.add(value, metadata)
+			);
 
 			if (
 				is_event_attribute(attribute) &&
@@ -48,169 +50,214 @@ export function build_set_attributes(
 			} else {
 				values.push(b.init(attribute.name, value));
 			}
-
-			has_state ||= attribute.metadata.expression.has_state;
 		} else {
-			// objects could contain reactive getters -> play it safe and always assume spread attributes are reactive
-			has_state = true;
-
 			let value = /** @type {Expression} */ (context.visit(attribute));
 
-			if (attribute.metadata.expression.has_call) {
-				const id = b.id(state.scope.generate('spread_with_call'));
-				state.init.push(b.const(id, create_derived(state, b.thunk(value))));
-				value = b.call('$.get', id);
-			}
+			value = memoizer.add(value, attribute.metadata.expression);
+
 			values.push(b.spread(value));
 		}
 	}
 
-	const call = b.call(
-		'$.set_attributes',
-		element_id,
-		has_state ? attributes_id : b.literal(null),
-		b.object(values),
-		context.state.analysis.css.hash !== '' && b.literal(context.state.analysis.css.hash),
-		preserve_attribute_case,
-		is_custom_element,
-		is_ignored(element, 'hydration_attribute_changed') && b.true
-	);
+	if (class_directives.length) {
+		values.push(
+			b.prop(
+				'init',
+				b.array([b.id('$.CLASS')]),
+				build_class_directives_object(class_directives, context, memoizer)
+			)
+		);
+	}
 
-	if (has_state) {
-		context.state.init.push(b.let(attributes_id));
-		const update = b.stmt(b.assignment('=', attributes_id, call));
-		context.state.update.push(update);
-		return true;
+	if (style_directives.length) {
+		values.push(
+			b.prop(
+				'init',
+				b.array([b.id('$.STYLE')]),
+				build_style_directives_object(style_directives, context, memoizer)
+			)
+		);
 	}
 
-	context.state.init.push(b.stmt(call));
-	return false;
+	const ids = memoizer.apply();
+
+	context.state.init.push(
+		b.stmt(
+			b.call(
+				'$.attribute_effect',
+				element_id,
+				b.arrow(ids, b.object(values)),
+				memoizer.sync_values(),
+				memoizer.async_values(),
+				memoizer.blockers(),
+				element.metadata.scoped &&
+					context.state.analysis.css.hash !== '' &&
+					b.literal(context.state.analysis.css.hash),
+				should_remove_defaults && b.true,
+				is_ignored(element, 'hydration_attribute_changed') && b.true
+			)
+		)
+	);
 }
 
 /**
- * Serializes each style directive into something like `$.set_style(element, style_property, value)`
- * and adds it either to init or update, depending on whether or not the value or the attributes are dynamic.
- * @param {AST.StyleDirective[]} style_directives
- * @param {Identifier} element_id
+ * @param {AST.Attribute['value']} value
  * @param {ComponentContext} context
- * @param {boolean} is_attributes_reactive
+ * @param {(value: Expression, metadata: ExpressionMetadata) => Expression} memoize
+ * @returns {{ value: Expression, has_state: boolean }}
  */
-export function build_style_directives(
-	style_directives,
-	element_id,
-	context,
-	is_attributes_reactive
-) {
-	const state = context.state;
+export function build_attribute_value(value, context, memoize = (value) => value) {
+	if (value === true) {
+		return { value: b.true, has_state: false };
+	}
 
-	for (const directive of style_directives) {
-		const { has_state, has_call } = directive.metadata.expression;
+	if (!Array.isArray(value) || value.length === 1) {
+		const chunk = Array.isArray(value) ? value[0] : value;
 
-		let value =
-			directive.value === true
-				? build_getter({ name: directive.name, type: 'Identifier' }, context.state)
-				: build_attribute_value(directive.value, context).value;
+		if (chunk.type === 'Text') {
+			return { value: b.literal(chunk.data), has_state: false };
+		}
 
-		if (has_call) {
-			const id = b.id(state.scope.generate('style_directive'));
+		let expression = build_expression(context, chunk.expression, chunk.metadata.expression);
 
-			state.init.push(b.const(id, create_derived(state, b.thunk(value))));
-			value = b.call('$.get', id);
-		}
+		return {
+			value: memoize(expression, chunk.metadata.expression),
+			has_state: chunk.metadata.expression.has_state || chunk.metadata.expression.is_async()
+		};
+	}
 
-		const update = b.stmt(
-			b.call(
-				'$.set_style',
-				element_id,
-				b.literal(directive.name),
-				value,
-				/** @type {Expression} */ (directive.modifiers.includes('important') ? b.true : undefined)
-			)
-		);
+	return build_template_chunk(value, context, context.state, memoize);
+}
 
-		if (!is_attributes_reactive && has_call) {
-			state.init.push(build_update(update));
-		} else if (is_attributes_reactive || has_state || has_call) {
-			state.update.push(update);
-		} else {
-			state.init.push(update);
-		}
+/**
+ * @param {AST.RegularElement | AST.SvelteElement} element
+ * @param {AST.Attribute} attribute
+ */
+export function get_attribute_name(element, attribute) {
+	if (!element.metadata.svg && !element.metadata.mathml) {
+		return normalize_attribute(attribute.name);
 	}
+
+	return attribute.name;
 }
 
 /**
- * Serializes each class directive into something like `$.class_toogle(element, class_name, value)`
- * and adds it either to init or update, depending on whether or not the value or the attributes are dynamic.
+ * @param {AST.RegularElement | AST.SvelteElement} element
+ * @param {Identifier} node_id
+ * @param {AST.Attribute} attribute
  * @param {AST.ClassDirective[]} class_directives
- * @param {Identifier} element_id
  * @param {ComponentContext} context
- * @param {boolean} is_attributes_reactive
+ * @param {boolean} is_html
  */
-export function build_class_directives(
-	class_directives,
-	element_id,
-	context,
-	is_attributes_reactive
-) {
-	const state = context.state;
-	for (const directive of class_directives) {
-		const { has_state, has_call } = directive.metadata.expression;
-		let value = /** @type {Expression} */ (context.visit(directive.expression));
+export function build_set_class(element, node_id, attribute, class_directives, context, is_html) {
+	let { value, has_state } = build_attribute_value(attribute.value, context, (value, metadata) => {
+		if (attribute.metadata.needs_clsx) {
+			value = b.call('$.clsx', value);
+		}
 
-		if (has_call) {
-			const id = b.id(state.scope.generate('class_directive'));
+		return context.state.memoizer.add(value, metadata);
+	});
 
-			state.init.push(b.const(id, create_derived(state, b.thunk(value))));
-			value = b.call('$.get', id);
-		}
+	/** @type {Identifier | undefined} */
+	let previous_id;
+
+	/** @type {ObjectExpression | Identifier | undefined} */
+	let prev;
 
-		const update = b.stmt(b.call('$.toggle_class', element_id, b.literal(directive.name), value));
+	/** @type {Expression | undefined} */
+	let next;
 
-		if (!is_attributes_reactive && has_call) {
-			state.init.push(build_update(update));
-		} else if (is_attributes_reactive || has_state || has_call) {
-			state.update.push(update);
+	if (class_directives.length) {
+		next = build_class_directives_object(class_directives, context);
+		has_state ||= class_directives.some(
+			(d) => d.metadata.expression.has_state || d.metadata.expression.is_async()
+		);
+
+		if (has_state) {
+			previous_id = b.id(context.state.scope.generate('classes'));
+			context.state.init.push(b.declaration('let', [b.declarator(previous_id)]));
+			prev = previous_id;
 		} else {
-			state.init.push(update);
+			prev = b.object([]);
 		}
 	}
-}
 
-/**
- * @param {AST.Attribute['value']} value
- * @param {ComponentContext} context
- * @returns {{ value: Expression, has_state: boolean, has_call: boolean }}
- */
-export function build_attribute_value(value, context) {
-	if (value === true) {
-		return { has_state: false, has_call: false, value: b.literal(true) };
+	/** @type {Expression | undefined} */
+	let css_hash;
+
+	if (element.metadata.scoped && context.state.analysis.css.hash) {
+		if (value.type === 'Literal' && (value.value === '' || value.value === null)) {
+			value = b.literal(context.state.analysis.css.hash);
+		} else if (value.type === 'Literal' && typeof value.value === 'string') {
+			value = b.literal(escape_html(value.value, true) + ' ' + context.state.analysis.css.hash);
+		} else {
+			css_hash = b.literal(context.state.analysis.css.hash);
+		}
 	}
 
-	if (!Array.isArray(value) || value.length === 1) {
-		const chunk = Array.isArray(value) ? value[0] : value;
+	if (!css_hash && next) {
+		css_hash = b.null;
+	}
 
-		if (chunk.type === 'Text') {
-			return { has_state: false, has_call: false, value: b.literal(chunk.data) };
-		}
+	/** @type {Expression} */
+	let set_class = b.call(
+		'$.set_class',
+		node_id,
+		is_html ? b.literal(1) : b.literal(0),
+		value,
+		css_hash,
+		prev,
+		next
+	);
 
-		return {
-			has_state: chunk.metadata.expression.has_state,
-			has_call: chunk.metadata.expression.has_call,
-			value: /** @type {Expression} */ (context.visit(chunk.expression))
-		};
+	if (previous_id) {
+		set_class = b.assignment('=', previous_id, set_class);
 	}
 
-	return build_template_chunk(value, context.visit, context.state);
+	(has_state ? context.state.update : context.state.init).push(b.stmt(set_class));
 }
 
 /**
- * @param {AST.RegularElement | AST.SvelteElement} element
+ * @param {Identifier} node_id
  * @param {AST.Attribute} attribute
+ * @param {AST.StyleDirective[]} style_directives
+ * @param {ComponentContext} context
  */
-export function get_attribute_name(element, attribute) {
-	if (!element.metadata.svg && !element.metadata.mathml) {
-		return normalize_attribute(attribute.name);
+export function build_set_style(node_id, attribute, style_directives, context) {
+	let { value, has_state } = build_attribute_value(attribute.value, context, (value, metadata) =>
+		context.state.memoizer.add(value, metadata)
+	);
+
+	/** @type {Identifier | undefined} */
+	let previous_id;
+
+	/** @type {ObjectExpression | Identifier | undefined} */
+	let prev;
+
+	/** @type {Expression | undefined} */
+	let next;
+
+	if (style_directives.length) {
+		next = build_style_directives_object(style_directives, context);
+		has_state ||= style_directives.some(
+			(d) => d.metadata.expression.has_state || d.metadata.expression.is_async()
+		);
+
+		if (has_state) {
+			previous_id = b.id(context.state.scope.generate('styles'));
+			context.state.init.push(b.declaration('let', [b.declarator(previous_id)]));
+			prev = previous_id;
+		} else {
+			prev = b.object([]);
+		}
 	}
 
-	return attribute.name;
+	/** @type {Expression} */
+	let set_style = b.call('$.set_style', node_id, value, prev, next);
+
+	if (previous_id) {
+		set_style = b.assignment('=', previous_id, set_style);
+	}
+
+	(has_state ? context.state.update : context.state.init).push(b.stmt(set_style));
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/events.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/events.js
index f23f7548ec..f01bf08694 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/events.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/events.js
@@ -1,9 +1,10 @@
 /** @import { Expression } from 'estree' */
-/** @import { AST, ExpressionMetadata } from '#compiler' */
+/** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../../types' */
 import { is_capture_event, is_passive_event } from '../../../../../../utils.js';
 import { dev, locator } from '../../../../../state.js';
-import * as b from '../../../../../utils/builders.js';
+import * as b from '#compiler/builders';
+import { ExpressionMetadata } from '../../../../nodes.js';
 
 /**
  * @param {AST.Attribute} node
@@ -26,73 +27,59 @@ export function visit_event_attribute(node, context) {
 	let handler = build_event_handler(tag.expression, tag.metadata.expression, context);
 
 	if (node.metadata.delegated) {
-		let delegated_assignment;
+		context.state.events.add(event_name);
+	}
 
-		if (!context.state.events.has(event_name)) {
-			context.state.events.add(event_name);
-		}
+	const statement = b.stmt(
+		build_event(
+			context,
+			event_name,
+			handler,
+			capture,
+			is_passive_event(event_name) ? true : undefined,
+			node.metadata.delegated
+		)
+	);
 
-		// Hoist function if we can, otherwise we leave the function as is
-		if (node.metadata.delegated.hoisted) {
-			if (node.metadata.delegated.function === tag.expression) {
-				const func_name = context.state.scope.root.unique('on_' + event_name);
-				context.state.hoisted.push(b.var(func_name, handler));
-				handler = func_name;
-			}
-
-			const hoisted_params = /** @type {Expression[]} */ (
-				node.metadata.delegated.function.metadata.hoisted_params
-			);
-
-			// When we hoist a function we assign an array with the function and all
-			// hoisted closure params.
-			const args = [handler, ...hoisted_params];
-			delegated_assignment = b.array(args);
-		} else {
-			delegated_assignment = handler;
-		}
+	const type = /** @type {AST.SvelteNode} */ (context.path.at(-1)).type;
 
-		context.state.init.push(
-			b.stmt(
-				b.assignment('=', b.member(context.state.node, '__' + event_name), delegated_assignment)
-			)
-		);
+	if (type === 'SvelteDocument' || type === 'SvelteWindow' || type === 'SvelteBody') {
+		// These nodes are above the component tree, and its events should run parent first
+		context.state.init.push(statement);
 	} else {
-		const statement = b.stmt(
-			build_event(
-				event_name,
-				context.state.node,
-				handler,
-				capture,
-				is_passive_event(event_name) ? true : undefined
-			)
-		);
-
-		const type = /** @type {AST.SvelteNode} */ (context.path.at(-1)).type;
-
-		if (type === 'SvelteDocument' || type === 'SvelteWindow' || type === 'SvelteBody') {
-			// These nodes are above the component tree, and its events should run parent first
-			context.state.init.push(statement);
-		} else {
-			context.state.after_update.push(statement);
-		}
+		context.state.after_update.push(statement);
 	}
 }
 
 /**
  * Creates a `$.event(...)` call for non-delegated event handlers
+ * @param {ComponentContext} context
  * @param {string} event_name
- * @param {Expression} node
  * @param {Expression} handler
  * @param {boolean} capture
  * @param {boolean | undefined} passive
+ * @param {boolean | undefined} delegated
  */
-export function build_event(event_name, node, handler, capture, passive) {
+export function build_event(context, event_name, handler, capture, passive, delegated) {
+	let fn = handler;
+
+	if (dev && handler.type === 'ArrowFunctionExpression') {
+		// create a named function for better debugging
+		const name = context.state.scope.generate(event_name);
+
+		fn = b.function(
+			b.id(name),
+			handler.params,
+			handler.body.type === 'BlockStatement' ? handler.body : b.block([b.return(handler.body)]),
+			handler.async
+		);
+	}
+
 	return b.call(
-		'$.event',
+		delegated ? '$.delegated' : '$.event',
 		b.literal(event_name),
-		node,
-		handler,
+		context.state.node,
+		fn,
 		capture && b.true,
 		passive === undefined ? undefined : b.literal(passive)
 	);
@@ -123,11 +110,19 @@ export function build_event_handler(node, metadata, context) {
 	}
 
 	// function declared in the script
-	if (
-		handler.type === 'Identifier' &&
-		context.state.scope.get(handler.name)?.declaration_kind !== 'import'
-	) {
-		return handler;
+	if (handler.type === 'Identifier') {
+		const binding = context.state.scope.get(handler.name);
+
+		if (binding?.is_function()) {
+			return handler;
+		}
+
+		// local variable can be assigned directly
+		// except in dev mode where when need $.apply()
+		// in order to handle warnings.
+		if (!dev && binding?.declaration_kind !== 'import') {
+			return handler;
+		}
 	}
 
 	if (metadata.has_call) {
@@ -155,7 +150,7 @@ export function build_event_handler(node, metadata, context) {
 			b.this,
 			b.id('$$args'),
 			b.id(context.state.analysis.name),
-			loc && b.array([b.literal(loc.line), b.literal(loc.column)]),
+			b.array([b.literal(loc.line), b.literal(loc.column)]),
 			has_side_effects(node) && b.true,
 			remove_parens && b.true
 		);
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
index 7674fd1eb2..f77af74f7e 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
@@ -1,10 +1,11 @@
-/** @import { Expression } from 'estree' */
+/** @import { Expression, Identifier, SourceLocation } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../../types' */
 import { cannot_be_set_statically } from '../../../../../../utils.js';
 import { is_event_attribute, is_text_attribute } from '../../../../../utils/ast.js';
-import * as b from '../../../../../utils/builders.js';
-import { build_template_chunk, build_update } from './utils.js';
+import * as b from '#compiler/builders';
+import { is_custom_element_node } from '../../../../nodes.js';
+import { build_template_chunk } from './utils.js';
 
 /**
  * Processes an array of template nodes, joining sibling text/expression nodes
@@ -15,8 +16,8 @@ import { build_template_chunk, build_update } from './utils.js';
  * @param {boolean} is_element
  * @param {ComponentContext} context
  */
-export function process_children(nodes, initial, is_element, { visit, state }) {
-	const within_bound_contenteditable = state.metadata.bound_contenteditable;
+export function process_children(nodes, initial, is_element, context) {
+	const within_bound_contenteditable = context.state.metadata.bound_contenteditable;
 	let prev = initial;
 	let skipped = 0;
 
@@ -41,14 +42,15 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 	/**
 	 * @param {boolean} is_text
 	 * @param {string} name
+	 * @param {SourceLocation | null} [loc]
 	 */
-	function flush_node(is_text, name) {
+	function flush_node(is_text, name, loc) {
 		const expression = get_node(is_text);
 		let id = expression;
 
 		if (id.type !== 'Identifier') {
-			id = b.id(state.scope.generate(name));
-			state.init.push(b.var(id, expression));
+			id = b.id(context.state.scope.generate(name), loc);
+			context.state.init.push(b.var(id, expression));
 		}
 
 		prev = () => id;
@@ -63,13 +65,13 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 	function flush_sequence(sequence) {
 		if (sequence.every((node) => node.type === 'Text')) {
 			skipped += 1;
-			state.template.push(sequence.map((node) => node.raw).join(''));
+			context.state.template.push_text(sequence);
 			return;
 		}
 
-		state.template.push(' ');
+		context.state.template.push_text([{ type: 'Text', data: ' ', raw: ' ', start: -1, end: -1 }]);
 
-		const { has_state, has_call, value } = build_template_chunk(sequence, visit, state);
+		const { has_state, value } = build_template_chunk(sequence, context);
 
 		// if this is a standalone `{expression}`, make sure we handle the case where
 		// no text node was created because the expression was empty during SSR
@@ -78,12 +80,10 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 
 		const update = b.stmt(b.call('$.set_text', id, value));
 
-		if (has_call && !within_bound_contenteditable) {
-			state.init.push(build_update(update));
-		} else if (has_state && !within_bound_contenteditable) {
-			state.update.push(update);
+		if (has_state && !within_bound_contenteditable) {
+			context.state.update.push(update);
 		} else {
-			state.init.push(b.stmt(b.assignment('=', b.member(id, 'nodeValue'), value)));
+			context.state.init.push(b.stmt(b.assignment('=', b.member(id, 'nodeValue'), value)));
 		}
 	}
 
@@ -96,18 +96,30 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 				sequence = [];
 			}
 
-			let child_state = state;
+			let child_state = context.state;
 
-			if (is_static_element(node, state)) {
+			if (is_static_element(node)) {
 				skipped += 1;
-			} else if (node.type === 'EachBlock' && nodes.length === 1 && is_element) {
+			} else if (
+				(node.type === 'EachBlock' || node.type === 'HtmlTag') &&
+				nodes.length === 1 &&
+				is_element &&
+				// In case it's wrapped in async the async logic will want to skip sibling nodes up until the end, hence we cannot make this controlled
+				// TODO switch this around and instead optimize for elements with a single block child and not require extra comments (neither for async nor normally)
+				!node.metadata.expression.is_async()
+			) {
 				node.metadata.is_controlled = true;
 			} else {
-				const id = flush_node(false, node.type === 'RegularElement' ? node.name : 'node');
-				child_state = { ...state, node: id };
+				const id = flush_node(
+					false,
+					node.type === 'RegularElement' ? node.name : 'node',
+					node.type === 'RegularElement' ? node.name_loc : null
+				);
+
+				child_state = { ...context.state, node: id };
 			}
 
-			visit(node, child_state);
+			context.visit(node, child_state);
 		}
 	}
 
@@ -119,18 +131,17 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 	// traverse to the last (n - 1) one when hydrating
 	if (skipped > 1) {
 		skipped -= 1;
-		state.init.push(b.stmt(b.call('$.next', skipped !== 1 && b.literal(skipped))));
+		context.state.init.push(b.stmt(b.call('$.next', skipped !== 1 && b.literal(skipped))));
 	}
 }
 
 /**
  * @param {AST.SvelteNode} node
- * @param {ComponentContext["state"]} state
  */
-function is_static_element(node, state) {
+export function is_static_element(node) {
 	if (node.type !== 'RegularElement') return false;
 	if (node.fragment.metadata.dynamic) return false;
-	if (node.name.includes('-')) return false; // we're setting all attributes on custom elements through properties
+	if (is_custom_element_node(node)) return false; // we're setting all attributes on custom elements through properties
 
 	for (const attribute of node.attributes) {
 		if (attribute.type !== 'Attribute') {
@@ -145,6 +156,17 @@ function is_static_element(node, state) {
 			return false;
 		}
 
+		if (attribute.name === 'dir') {
+			return false;
+		}
+
+		if (
+			['input', 'textarea'].includes(node.name) &&
+			['value', 'checked'].includes(attribute.name)
+		) {
+			return false;
+		}
+
 		if (node.name === 'option' && attribute.name === 'value') {
 			return false;
 		}
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..3677b30814 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
@@ -1,30 +1,17 @@
 /** @import { ArrowFunctionExpression, FunctionExpression, Node } from 'estree' */
 /** @import { ComponentContext } from '../../types' */
-import { build_hoisted_params } from '../../utils.js';
 
 /**
  * @param {ArrowFunctionExpression | FunctionExpression} node
  * @param {ComponentContext} context
  */
 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));
 		state.in_constructor = parent.type === 'MethodDefinition' && parent.kind === 'constructor';
 	}
 
-	if (metadata?.hoisted === true) {
-		const params = build_hoisted_params(node, context);
-
-		return /** @type {FunctionExpression} */ ({
-			...node,
-			params,
-			body: context.visit(node.body, state)
-		});
-	}
-
 	context.next(state);
 };
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/special_element.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/special_element.js
index 558bc4fee7..c878f2fc07 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/special_element.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/special_element.js
@@ -1,7 +1,7 @@
 /** @import { Expression } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../../types' */
-import * as b from '../../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 
 /**
  *
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 1854baa1e9..51c84dd01c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
@@ -1,80 +1,181 @@
-/** @import { Expression, ExpressionStatement, Identifier, MemberExpression, SequenceExpression, Statement, Super } from 'estree' */
+/** @import { AssignmentExpression, Expression, Identifier, MemberExpression, SequenceExpression, Literal, Super, UpdateExpression, ExpressionStatement } from 'estree' */
 /** @import { AST } from '#compiler' */
-/** @import { ComponentClientTransformState } from '../../types' */
+/** @import { ComponentClientTransformState, ComponentContext, Context } from '../../types' */
 import { walk } from 'zimmerframe';
 import { object } from '../../../../../utils/ast.js';
-import * as b from '../../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import { sanitize_template_string } from '../../../../../utils/sanitize_template_string.js';
 import { regex_is_valid_identifier } from '../../../../patterns.js';
-import { create_derived } from '../../utils.js';
 import is_reference from 'is-reference';
-import { locator } from '../../../../../state.js';
+import { dev, is_ignored, locator, component_name } from '../../../../../state.js';
+import { build_getter } from '../../utils.js';
+import { ExpressionMetadata } from '../../../../nodes.js';
+
+/**
+ * A utility for extracting complex expressions (such as call expressions)
+ * from templates and replacing them with `$0`, `$1` etc
+ */
+export class Memoizer {
+	/** @type {Array<{ id: Identifier, expression: Expression }>} */
+	#sync = [];
+
+	/** @type {Array<{ id: Identifier, expression: Expression }>} */
+	#async = [];
+
+	/** @type {Set<Expression>} */
+	#blockers = new Set();
+
+	/**
+	 * @param {Expression} expression
+	 * @param {ExpressionMetadata} metadata
+	 * @param {boolean} memoize_if_state
+	 */
+	add(expression, metadata, memoize_if_state = false) {
+		this.check_blockers(metadata);
+
+		const should_memoize =
+			metadata.has_call || metadata.has_await || (memoize_if_state && metadata.has_state);
+
+		if (!should_memoize) {
+			// no memoization required
+			return expression;
+		}
+
+		const id = b.id('#'); // filled in later
+
+		(metadata.has_await ? this.#async : this.#sync).push({ id, expression });
+
+		return id;
+	}
+
+	/**
+	 * @param {ExpressionMetadata} metadata
+	 */
+	check_blockers(metadata) {
+		for (const binding of metadata.references) {
+			if (binding.blocker) {
+				this.#blockers.add(binding.blocker);
+			}
+		}
+	}
+
+	apply() {
+		return [...this.#sync, ...this.#async].map((memo, i) => {
+			memo.id.name = `$${i}`;
+			return memo.id;
+		});
+	}
+
+	blockers() {
+		return this.#blockers.size > 0 ? b.array([...this.#blockers]) : undefined;
+	}
+
+	deriveds(runes = true) {
+		return this.#sync.map((memo) =>
+			b.let(memo.id, b.call(runes ? '$.derived' : '$.derived_safe_equal', b.thunk(memo.expression)))
+		);
+	}
+
+	async_ids() {
+		return this.#async.map((memo) => memo.id);
+	}
+
+	async_values() {
+		if (this.#async.length === 0) return;
+		// use `b.arrow` rather than `b.thunk` so that deferred async/template effects
+		// always read live bindings rather than a possibly stale snapshot.
+		return b.array(this.#async.map((memo) => b.arrow([], memo.expression, true)));
+	}
+
+	sync_values() {
+		if (this.#sync.length === 0) return;
+		// use `b.arrow` rather than `b.thunk` so that deferred async/template effects
+		// always read live bindings rather than a possibly stale snapshot.
+		return b.array(this.#sync.map((memo) => b.arrow([], memo.expression)));
+	}
+}
 
 /**
  * @param {Array<AST.Text | AST.ExpressionTag>} values
- * @param {(node: AST.SvelteNode, state: any) => any} visit
+ * @param {ComponentContext} context
  * @param {ComponentClientTransformState} state
- * @returns {{ value: Expression, has_state: boolean, has_call: boolean }}
+ * @param {(value: Expression, metadata: ExpressionMetadata) => Expression} memoize
+ * @returns {{ value: Expression, has_state: boolean }}
  */
-export function build_template_chunk(values, visit, state) {
+export function build_template_chunk(
+	values,
+	context,
+	state = context.state,
+	memoize = (value, metadata) => state.memoizer.add(value, metadata)
+) {
 	/** @type {Expression[]} */
 	const expressions = [];
 
 	let quasi = b.quasi('');
 	const quasis = [quasi];
 
-	let has_call = false;
 	let has_state = false;
-	let contains_multiple_call_expression = false;
-
-	for (const node of values) {
-		if (node.type === 'ExpressionTag') {
-			const metadata = node.metadata.expression;
-
-			contains_multiple_call_expression ||= has_call && metadata.has_call;
-			has_call ||= metadata.has_call;
-			has_state ||= metadata.has_state;
-		}
-	}
+	let has_await = false;
 
 	for (let i = 0; i < values.length; i++) {
 		const node = values[i];
 
 		if (node.type === 'Text') {
 			quasi.value.cooked += node.data;
-		} else if (node.type === 'ExpressionTag' && node.expression.type === 'Literal') {
+		} else if (node.expression.type === 'Literal') {
 			if (node.expression.value != null) {
 				quasi.value.cooked += node.expression.value + '';
 			}
-		} else {
-			if (contains_multiple_call_expression) {
-				const id = b.id(state.scope.generate('stringified_text'));
-				state.init.push(
-					b.const(
-						id,
-						create_derived(
-							state,
-							b.thunk(
-								b.logical(
-									'??',
-									/** @type {Expression} */ (visit(node.expression, state)),
-									b.literal('')
-								)
-							)
-						)
-					)
-				);
-				expressions.push(b.call('$.get', id));
-			} else if (values.length === 1) {
+		} else if (
+			node.expression.type !== 'Identifier' ||
+			node.expression.name !== 'undefined' ||
+			state.scope.get('undefined')
+		) {
+			let value = memoize(
+				build_expression(context, node.expression, node.metadata.expression, state),
+				node.metadata.expression
+			);
+
+			const evaluated = state.scope.evaluate(value);
+
+			has_await ||= node.metadata.expression.has_await || node.metadata.expression.has_blockers();
+			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
 				// extra work in the template_effect (instead we do the work in set_text).
-				return { value: visit(node.expression, state), has_state, has_call };
-			} else {
-				expressions.push(b.logical('??', visit(node.expression, state), b.literal('')));
+				if (evaluated.is_known) {
+					value = b.literal((evaluated.value ?? '') + '');
+				}
+
+				return { value, has_state };
+			}
+
+			if (
+				value.type === 'LogicalExpression' &&
+				value.right.type === 'Literal' &&
+				(value.operator === '??' || value.operator === '||')
+			) {
+				// `foo ?? null` -=> `foo ?? ''`
+				// otherwise leave the expression untouched
+				if (value.right.value === null) {
+					value = { ...value, right: b.literal('') };
+				}
 			}
 
-			quasi = b.quasi('', i + 1 === values.length);
-			quasis.push(quasi);
+			if (evaluated.is_known) {
+				quasi.value.cooked += (evaluated.value ?? '') + '';
+			} else {
+				if (!evaluated.is_defined) {
+					// add `?? ''` where necessary
+					value = b.logical('??', value, b.literal(''));
+				}
+
+				expressions.push(value);
+
+				quasi = b.quasi('', i + 1 === values.length);
+				quasis.push(quasi);
+			}
 		}
 	}
 
@@ -82,28 +183,36 @@ export function build_template_chunk(values, visit, state) {
 		quasi.value.raw = sanitize_template_string(/** @type {string} */ (quasi.value.cooked));
 	}
 
-	const value = b.template(quasis, expressions);
+	const value =
+		expressions.length > 0
+			? b.template(quasis, expressions)
+			: b.literal(/** @type {string} */ (quasi.value.cooked));
 
-	return { value, has_state, has_call };
+	return { value, has_state };
 }
 
 /**
- * @param {Statement} statement
- */
-export function build_update(statement) {
-	const body =
-		statement.type === 'ExpressionStatement' ? statement.expression : b.block([statement]);
-
-	return b.stmt(b.call('$.template_effect', b.thunk(body)));
-}
-
-/**
- * @param {Statement[]} update
+ * @param {ComponentClientTransformState} state
  */
-export function build_render_statement(update) {
-	return update.length === 1
-		? build_update(update[0])
-		: b.stmt(b.call('$.template_effect', b.thunk(b.block(update))));
+export function build_render_statement(state) {
+	const { memoizer } = state;
+
+	const ids = memoizer.apply();
+
+	return b.stmt(
+		b.call(
+			'$.template_effect',
+			b.arrow(
+				ids,
+				state.update.length === 1 && state.update[0].type === 'ExpressionStatement'
+					? state.update[0].expression
+					: b.block(state.update)
+			),
+			memoizer.sync_values(),
+			memoizer.async_values(),
+			memoizer.blockers()
+		)
+	);
 }
 
 /**
@@ -127,20 +236,6 @@ export function parse_directive_name(name) {
 	return expression;
 }
 
-/**
- * @param {ComponentClientTransformState} state
- * @param {string} id
- * @param {Expression | undefined} init
- * @param {Expression} value
- * @param {ExpressionStatement} update
- */
-export function build_update_assignment(state, id, init, value, update) {
-	state.init.push(b.var(id, init));
-	state.update.push(
-		b.if(b.binary('!==', b.id(id), b.assignment('=', b.id(id), value)), b.block([update]))
-	);
-}
-
 /**
  * Serializes `bind:this` for components and elements.
  * @param {Identifier | MemberExpression | SequenceExpression} expression
@@ -148,10 +243,8 @@ export function build_update_assignment(state, id, init, value, update) {
  * @param {import('zimmerframe').Context<AST.SvelteNode, ComponentClientTransformState>} context
  */
 export function build_bind_this(expression, value, { state, visit }) {
-	if (expression.type === 'SequenceExpression') {
-		const [get, set] = /** @type {SequenceExpression} */ (visit(expression)).expressions;
-		return b.call('$.bind_this', value, set, get);
-	}
+	const [getter, setter] =
+		expression.type === 'SequenceExpression' ? expression.expressions : [null, null];
 
 	/** @type {Identifier[]} */
 	const ids = [];
@@ -168,7 +261,7 @@ export function build_bind_this(expression, value, { state, visit }) {
 	// Note that we only do this for each context variables, the consequence is that the value might be stale in
 	// some scenarios where the value is a member expression with changing computed parts or using a combination of multiple
 	// variables, but that was the same case in Svelte 4, too. Once legacy mode is gone completely, we can revisit this.
-	walk(expression, null, {
+	walk(getter ?? expression, null, {
 		Identifier(node, { path }) {
 			if (seen.includes(node.name)) return;
 			seen.push(node.name);
@@ -199,9 +292,17 @@ export function build_bind_this(expression, value, { state, visit }) {
 
 	const child_state = { ...state, transform };
 
-	const get = /** @type {Expression} */ (visit(expression, child_state));
-	const set = /** @type {Expression} */ (
-		visit(b.assignment('=', expression, b.id('$$value')), child_state)
+	let get = /** @type {Expression} */ (visit(getter ?? expression, child_state));
+	let set = /** @type {Expression} */ (
+		visit(
+			setter ??
+				b.assignment(
+					'=',
+					/** @type {Identifier | MemberExpression} */ (expression),
+					b.id('$$value')
+				),
+			child_state
+		)
 	);
 
 	// If we're mutating a property, then it might already be non-existent.
@@ -214,13 +315,25 @@ export function build_bind_this(expression, value, { state, visit }) {
 		node = node.object;
 	}
 
-	return b.call(
-		'$.bind_this',
-		value,
-		b.arrow([b.id('$$value'), ...ids], set),
-		b.arrow([...ids], get),
-		values.length > 0 && b.thunk(b.array(values))
-	);
+	get =
+		get.type === 'ArrowFunctionExpression'
+			? b.arrow([...ids], get.body)
+			: get.type === 'FunctionExpression'
+				? b.function(null, [...ids], get.body)
+				: getter
+					? get
+					: b.arrow([...ids], get);
+
+	set =
+		set.type === 'ArrowFunctionExpression'
+			? b.arrow([set.params[0] ?? b.id('_'), ...ids], set.body)
+			: set.type === 'FunctionExpression'
+				? b.function(null, [set.params[0] ?? b.id('_'), ...ids], set.body)
+				: setter
+					? set
+					: b.arrow([b.id('$$value'), ...ids], set);
+
+	return b.call('$.bind_this', value, set, get, values.length > 0 && b.thunk(b.array(values)));
 }
 
 /**
@@ -239,12 +352,17 @@ export function validate_binding(state, binding, expression) {
 
 	const loc = locator(binding.start);
 
+	const obj = /** @type {Expression} */ (expression.object);
+
 	state.init.push(
 		b.stmt(
 			b.call(
 				'$.validate_binding',
 				b.literal(state.analysis.source.slice(binding.start, binding.end)),
-				b.thunk(/** @type {Expression} */ (expression.object)),
+				binding.metadata.expression.blockers(),
+				b.thunk(
+					state.store_to_invalidate ? b.sequence([b.call('$.mark_store_binding'), obj]) : obj
+				),
 				b.thunk(
 					/** @type {Expression} */ (
 						expression.computed
@@ -252,9 +370,148 @@ export function validate_binding(state, binding, expression) {
 							: b.literal(/** @type {Identifier} */ (expression.property).name)
 					)
 				),
-				loc && b.literal(loc.line),
-				loc && b.literal(loc.column)
+				b.literal(loc.line),
+				b.literal(loc.column)
 			)
 		)
 	);
 }
+
+/**
+ * In dev mode validate mutations to props
+ * @param {AssignmentExpression | UpdateExpression} node
+ * @param {Context} context
+ * @param {Expression} expression
+ */
+export function validate_mutation(node, context, expression) {
+	let left = /** @type {Expression | Super} */ (
+		node.type === 'AssignmentExpression' ? node.left : node.argument
+	);
+
+	if (!dev || left.type !== 'MemberExpression' || is_ignored(node, 'ownership_invalid_mutation')) {
+		return expression;
+	}
+
+	const name = object(left);
+	if (!name) return expression;
+
+	const binding = context.state.scope.get(name.name);
+	if (binding?.kind !== 'prop' && binding?.kind !== 'bindable_prop') return expression;
+
+	const state = /** @type {ComponentClientTransformState} */ (context.state);
+	state.analysis.needs_mutation_validation = true;
+
+	/** @type {Array<Identifier | Literal | Expression>} */
+	const path = [];
+
+	while (left.type === 'MemberExpression') {
+		if (left.property.type === 'Literal') {
+			path.unshift(left.property);
+		} else if (left.property.type === 'Identifier') {
+			const transform = Object.hasOwn(context.state.transform, left.property.name)
+				? context.state.transform[left.property.name]
+				: null;
+			if (left.computed) {
+				path.unshift(transform?.read ? transform.read(left.property) : left.property);
+			} else {
+				path.unshift(b.literal(left.property.name));
+			}
+		} else {
+			return expression;
+		}
+
+		left = left.object;
+	}
+
+	path.unshift(b.literal(name.name));
+
+	const loc = locator(/** @type {number} */ (left.start));
+
+	return b.call(
+		'$$ownership_validator.mutation',
+		b.literal(binding.prop_alias),
+		b.array(path),
+		expression,
+		loc && b.literal(loc.line),
+		loc && b.literal(loc.column)
+	);
+}
+
+/**
+ *
+ * @param {ComponentContext} context
+ * @param {Expression} expression
+ * @param {ExpressionMetadata} metadata
+ */
+export function build_expression(context, expression, metadata, state = context.state) {
+	const value = /** @type {Expression} */ (context.visit(expression, state));
+
+	// Components not explicitly in legacy mode might be expected to be in runes mode (especially since we didn't
+	// adjust this behavior until recently, which broke people's existing components), so we also bail in this case.
+	// Kind of an in-between-mode.
+	if (context.state.analysis.runes || context.state.analysis.maybe_runes) {
+		return value;
+	}
+
+	if (!metadata.has_call && !metadata.has_member_expression && !metadata.has_assignment) {
+		return value;
+	}
+
+	// Legacy reactivity is coarse-grained, looking at the statically visible dependencies. Replicate that here
+	const sequence = b.sequence([]);
+
+	for (const binding of metadata.references) {
+		if (binding.kind === 'normal' && binding.declaration_kind !== 'import') {
+			continue;
+		}
+
+		var getter = build_getter({ ...binding.node }, state);
+
+		if (
+			binding.kind === 'bindable_prop' ||
+			binding.kind === 'template' ||
+			binding.declaration_kind === 'import' ||
+			binding.node.name === '$$props' ||
+			binding.node.name === '$$restProps'
+		) {
+			getter = b.call('$.deep_read_state', getter);
+		}
+
+		sequence.expressions.push(getter);
+	}
+
+	sequence.expressions.push(b.call('$.untrack', b.thunk(value)));
+
+	return sequence;
+}
+
+/**
+ * Wraps a statement/expression with dev stack tracking in dev mode
+ * @param {Expression} expression - The function call to wrap (e.g., $.if, $.each, etc.)
+ * @param {{ start?: number }} node - AST node for location info
+ * @param {'component' | 'if' | 'each' | 'await' | 'key' | 'render'} type - Type of block/component
+ * @param {Record<string, number | string>} [additional] - Any additional properties to add to the dev stack entry
+ * @returns {ExpressionStatement} - Statement with or without dev stack wrapping
+ */
+export function add_svelte_meta(expression, node, type, additional) {
+	if (!dev) {
+		return b.stmt(expression);
+	}
+
+	const location = node.start !== undefined && locator(node.start);
+	if (!location) {
+		return b.stmt(expression);
+	}
+
+	return b.stmt(
+		b.call(
+			'$.add_svelte_meta',
+			b.arrow([], expression),
+			b.literal(type),
+			b.id(component_name),
+			b.literal(location.line),
+			b.literal(location.column),
+			additional && b.object(Object.entries(additional).map(([k, v]) => b.init(k, b.literal(v))))
+		)
+	);
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/css/index.js b/packages/svelte/src/compiler/phases/3-transform/css/index.js
index 5b0dcd5588..92b2706f22 100644
--- a/packages/svelte/src/compiler/phases/3-transform/css/index.js
+++ b/packages/svelte/src/compiler/phases/3-transform/css/index.js
@@ -59,12 +59,13 @@ export function render_stylesheet(source, analysis, options) {
 			// generateMap takes care of calculating source relative to file
 			source: options.filename,
 			file: options.cssOutputFilename || options.filename
-		})
+		}),
+		hasGlobal: analysis.css.has_global
 	};
 
 	merge_with_preprocessor_map(css, options, css.map.sources[0]);
 
-	if (dev && options.css === 'injected' && css.code) {
+	if (dev && analysis.inject_styles && css.code) {
 		css.code += `\n/*# sourceMappingURL=${css.map.toUrl()} */`;
 	}
 
@@ -169,7 +170,11 @@ const visitors = {
 		if (node.metadata.is_global_block) {
 			const selector = node.prelude.children[0];
 
-			if (selector.children.length === 1 && selector.children[0].selectors.length === 1) {
+			if (
+				node.prelude.children.length === 1 &&
+				selector.children.length === 1 &&
+				selector.children[0].selectors.length === 1
+			) {
 				// `:global {...}`
 				if (state.minify) {
 					state.code.remove(node.start, node.block.start + 1);
@@ -191,9 +196,12 @@ const visitors = {
 		next();
 	},
 	SelectorList(node, { state, next, path }) {
+		const parent = path.at(-1);
+
 		// Only add comments if we're not inside a complex selector that itself is unused or a global block
 		if (
-			!is_in_global_block(path) &&
+			(!is_in_global_block(path) ||
+				(node.children.length > 1 && parent?.type === 'Rule' && parent.metadata.is_global_block)) &&
 			!path.find((n) => n.type === 'ComplexSelector' && !n.metadata.used)
 		) {
 			const children = node.children;
@@ -255,7 +263,6 @@ const visitors = {
 
 		// if this selector list belongs to a rule, require a specificity bump for the
 		// first scoped selector but only if we're at the top level
-		let parent = path.at(-1);
 		if (parent?.type === 'Rule') {
 			specificity = { bumped: false };
 
@@ -281,13 +288,24 @@ const visitors = {
 				const global = /** @type {AST.CSS.PseudoClassSelector} */ (relative_selector.selectors[0]);
 				remove_global_pseudo_class(global, relative_selector.combinator, context.state);
 
-				if (
-					node.metadata.rule?.metadata.parent_rule &&
-					global.args === null &&
-					relative_selector.combinator === null
-				) {
-					// div { :global.x { ... } } becomes div { &.x { ... } }
-					context.state.code.prependRight(global.start, '&');
+				const parent_rule = node.metadata.rule?.metadata.parent_rule;
+				if (parent_rule && global.args === null) {
+					if (relative_selector.combinator === null) {
+						// div { :global.x { ... } } becomes div { &.x { ... } }
+						context.state.code.prependRight(global.start, '&');
+					}
+
+					// In case of multiple :global selectors in a selector list we gotta delete the comma, too, but only if
+					// the next selector is used; if it's unused then the comma deletion happens as part of removal of that next selector
+					if (
+						parent_rule.prelude.children.length > 1 &&
+						node.children.length === node.children.findIndex((s) => s === relative_selector) - 1
+					) {
+						const next_selector = parent_rule.prelude.children.find((s) => s.start > global.end);
+						if (next_selector && next_selector.metadata.used) {
+							context.state.code.update(global.end, next_selector.start, '');
+						}
+					}
 				}
 				continue;
 			} else {
@@ -360,7 +378,6 @@ const visitors = {
 };
 
 /**
- *
  * @param {Array<AST.CSS.Node>} path
  */
 function is_in_global_block(path) {
@@ -379,7 +396,9 @@ function remove_global_pseudo_class(selector, combinator, state) {
 			// div :global.x becomes div.x
 			while (/\s/.test(state.code.original[start - 1])) start--;
 		}
-		state.code.remove(start, selector.start + ':global'.length);
+
+		// update(...), not remove(...) because there could be a closing unused comment at the end
+		state.code.update(start, selector.start + ':global'.length, '');
 	} else {
 		state.code
 			.remove(selector.start, selector.start + ':global('.length)
diff --git a/packages/svelte/src/compiler/phases/3-transform/index.js b/packages/svelte/src/compiler/phases/3-transform/index.js
index 8f6597ee12..33665097ab 100644
--- a/packages/svelte/src/compiler/phases/3-transform/index.js
+++ b/packages/svelte/src/compiler/phases/3-transform/index.js
@@ -1,6 +1,8 @@
+/** @import { Node } from 'esrap/languages/ts' */
 /** @import { ValidatedCompileOptions, CompileResult, ValidatedModuleCompileOptions } from '#compiler' */
 /** @import { ComponentAnalysis, Analysis } from '../types' */
 import { print } from 'esrap';
+import ts from 'esrap/languages/ts';
 import { VERSION } from '../../../version.js';
 import { server_component, server_module } from './server/transform-server.js';
 import { client_component, client_module } from './client/transform-client.js';
@@ -33,12 +35,14 @@ export function transform_component(analysis, source, options) {
 			: client_component(analysis, options);
 
 	const js_source_name = get_source_name(options.filename, options.outputFilename, 'input.svelte');
-	const js = print(program, {
+
+	const js = print(/** @type {Node} */ (program), ts({ comments: analysis.comments }), {
 		// include source content; makes it easier/more robust looking up the source map code
 		// (else esrap does return null for source and sourceMapContent which may trip up tooling)
 		sourceMapContent: source,
 		sourceMapSource: js_source_name
 	});
+
 	merge_with_preprocessor_map(js, options, js_source_name);
 
 	const css =
@@ -91,13 +95,19 @@ export function transform_module(analysis, source, options) {
 		];
 	}
 
+	const js = print(/** @type {Node} */ (program), ts({ comments: analysis.comments }), {
+		// include source content; makes it easier/more robust looking up the source map code
+		// (else esrap does return null for source and sourceMapContent which may trip up tooling)
+		sourceMapContent: source,
+		sourceMapSource: get_source_name(options.filename, undefined, 'input.svelte.js')
+	});
+
+	// prepend comment
+	js.code = `/* ${basename} generated by Svelte v${VERSION} */\n${js.code}`;
+	js.map.mappings = ';' + js.map.mappings;
+
 	return {
-		js: print(program, {
-			// include source content; makes it easier/more robust looking up the source map code
-			// (else esrap does return null for source and sourceMapContent which may trip up tooling)
-			sourceMapContent: source,
-			sourceMapSource: get_source_name(options.filename, undefined, 'input.svelte.js')
-		}),
+		js,
 		css: null,
 		metadata: {
 			runes: true
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
index cbe9b116cc..877dfe4dfe 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
@@ -1,19 +1,21 @@
-/** @import { Program, Property, Statement, VariableDeclarator } from 'estree' */
+/** @import * as ESTree from 'estree' */
 /** @import { AST, ValidatedCompileOptions, ValidatedModuleCompileOptions } from '#compiler' */
 /** @import { ComponentServerTransformState, ComponentVisitors, ServerTransformState, Visitors } from './types.js' */
 /** @import { Analysis, ComponentAnalysis } from '../../types.js' */
 import { walk } from 'zimmerframe';
 import { set_scope } from '../../scope.js';
 import { extract_identifiers } from '../../../utils/ast.js';
-import * as b from '../../../utils/builders.js';
-import { dev, filename } from '../../../state.js';
+import * as b from '#compiler/builders';
+import { component_name, 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';
 import { ConstTag } from './visitors/ConstTag.js';
+import { DeclarationTag } from './visitors/DeclarationTag.js';
 import { DebugTag } from './visitors/DebugTag.js';
 import { EachBlock } from './visitors/EachBlock.js';
 import { ExpressionStatement } from './visitors/ExpressionStatement.js';
@@ -24,6 +26,7 @@ import { IfBlock } from './visitors/IfBlock.js';
 import { KeyBlock } from './visitors/KeyBlock.js';
 import { LabeledStatement } from './visitors/LabeledStatement.js';
 import { MemberExpression } from './visitors/MemberExpression.js';
+import { Program } from './visitors/Program.js';
 import { PropertyDefinition } from './visitors/PropertyDefinition.js';
 import { RegularElement } from './visitors/RegularElement.js';
 import { RenderTag } from './visitors/RenderTag.js';
@@ -45,12 +48,14 @@ import { SveltePortal } from './visitors/SveltePortal.js';
 const global_visitors = {
 	_: set_scope,
 	AssignmentExpression,
+	AwaitExpression,
 	CallExpression,
 	ClassBody,
 	ExpressionStatement,
 	Identifier,
 	LabeledStatement,
 	MemberExpression,
+	Program,
 	PropertyDefinition,
 	UpdateExpression,
 	VariableDeclaration
@@ -61,6 +66,7 @@ const template_visitors = {
 	AwaitBlock,
 	Component,
 	ConstTag,
+	DeclarationTag,
 	DebugTag,
 	EachBlock,
 	Fragment,
@@ -85,7 +91,7 @@ const template_visitors = {
 /**
  * @param {ComponentAnalysis} analysis
  * @param {ValidatedCompileOptions} options
- * @returns {Program}
+ * @returns {ESTree.Program}
  */
 export function server_component(analysis, options) {
 	/** @type {ComponentServerTransformState} */
@@ -94,25 +100,26 @@ export function server_component(analysis, options) {
 		options,
 		scope: analysis.module.scope,
 		scopes: analysis.module.scopes,
-		hoisted: [b.import_all('$', 'svelte/internal/server')],
+		hoisted: [b.import_all('$', 'svelte/internal/server'), ...analysis.instance_body.hoisted],
 		legacy_reactive_statements: new Map(),
 		// these are set inside the `Fragment` visitor, and cannot be used until then
 		init: /** @type {any} */ (null),
 		template: /** @type {any} */ (null),
 		namespace: options.namespace,
 		preserve_whitespace: options.preserveWhitespace,
-		private_derived: new Map(),
-		skip_hydration_boundaries: false
+		state_fields: new Map(),
+		is_standalone: false,
+		is_instance: false
 	};
 
-	const module = /** @type {Program} */ (
+	const module = /** @type {ESTree.Program} */ (
 		walk(/** @type {AST.SvelteNode} */ (analysis.module.ast), state, global_visitors)
 	);
 
-	const instance = /** @type {Program} */ (
+	const instance = /** @type {ESTree.Program} */ (
 		walk(
 			/** @type {AST.SvelteNode} */ (analysis.instance.ast),
-			{ ...state, scopes: analysis.instance.scopes },
+			{ ...state, scopes: analysis.instance.scopes, is_instance: true },
 			{
 				...global_visitors,
 				ImportDeclaration(node) {
@@ -130,7 +137,7 @@ export function server_component(analysis, options) {
 		)
 	);
 
-	const template = /** @type {Program} */ (
+	const template = /** @type {ESTree.Program} */ (
 		walk(
 			/** @type {AST.SvelteNode} */ (analysis.template.ast),
 			{ ...state, scopes: analysis.template.scopes },
@@ -139,7 +146,7 @@ export function server_component(analysis, options) {
 		)
 	);
 
-	/** @type {VariableDeclarator[]} */
+	/** @type {ESTree.VariableDeclarator[]} */
 	const legacy_reactive_declarations = [];
 
 	for (const [node] of analysis.reactive_statements) {
@@ -187,25 +194,21 @@ export function server_component(analysis, options) {
 		template.body = [
 			...snippets,
 			b.let('$$settled', b.true),
-			b.let('$$inner_payload'),
-			b.stmt(
-				b.function(
-					b.id('$$render_inner'),
-					[b.id('$$payload')],
-					b.block(/** @type {Statement[]} */ (rest))
-				)
+			b.let('$$inner_renderer'),
+			b.function_declaration(
+				b.id('$$render_inner'),
+				[b.id('$$renderer')],
+				b.block(/** @type {ESTree.Statement[]} */ (rest))
 			),
 			b.do_while(
 				b.unary('!', b.id('$$settled')),
 				b.block([
 					b.stmt(b.assignment('=', b.id('$$settled'), b.true)),
-					b.stmt(
-						b.assignment('=', b.id('$$inner_payload'), b.call('$.copy_payload', b.id('$$payload')))
-					),
-					b.stmt(b.call('$$render_inner', b.id('$$inner_payload')))
+					b.stmt(b.assignment('=', b.id('$$inner_renderer'), b.call('$$renderer.copy'))),
+					b.stmt(b.call('$$render_inner', b.id('$$inner_renderer')))
 				])
 			),
-			b.stmt(b.call('$.assign_payload', b.id('$$payload'), b.id('$$inner_payload')))
+			b.stmt(b.call('$$renderer.subsume', b.id('$$inner_renderer')))
 		];
 	}
 
@@ -222,7 +225,7 @@ export function server_component(analysis, options) {
 
 	// Propagate values of bound props upwards if they're undefined in the parent and have a value.
 	// Don't do this as part of the props retrieval because people could eagerly mutate the prop in the instance script.
-	/** @type {Property[]} */
+	/** @type {ESTree.Property[]} */
 	const props = [];
 
 	for (const [name, binding] of analysis.instance.scope.declarations) {
@@ -241,16 +244,33 @@ export function server_component(analysis, options) {
 		template.body.push(b.stmt(b.call('$.bind_props', b.id('$$props'), b.object(props))));
 	}
 
-	const component_block = b.block([
-		.../** @type {Statement[]} */ (instance.body),
-		.../** @type {Statement[]} */ (template.body)
+	let component_block = b.block([
+		.../** @type {ESTree.Statement[]} */ (instance.body),
+		.../** @type {ESTree.Statement[]} */ (template.body)
 	]);
 
+	// trick esrap into including comments
+	component_block.loc = instance.loc;
+
+	if (analysis.props_id) {
+		// need to be placed on first line of the component for hydration
+		component_block.body.unshift(
+			b.const(analysis.props_id, b.call('$.props_id', b.id('$$renderer')))
+		);
+	}
+
 	let should_inject_context = dev || analysis.needs_context;
 
 	if (should_inject_context) {
-		component_block.body.unshift(b.stmt(b.call('$.push', dev && b.id(analysis.name))));
-		component_block.body.push(b.stmt(b.call('$.pop')));
+		component_block = b.block([
+			b.stmt(
+				b.call(
+					'$$renderer.component',
+					b.arrow([b.id('$$renderer')], component_block, false),
+					dev && b.id(component_name)
+				)
+			)
+		]);
 	}
 
 	if (analysis.uses_rest_props) {
@@ -284,12 +304,12 @@ export function server_component(analysis, options) {
 
 	const body = [...state.hoisted, ...module.body];
 
-	if (analysis.css.ast !== null && options.css === 'injected' && !options.customElement) {
+	if (analysis.css.ast !== null && analysis.inject_styles && !analysis.custom_element) {
 		const hash = b.literal(analysis.css.hash);
 		const code = b.literal(render_stylesheet(analysis.source, analysis, options).code);
 
 		body.push(b.const('$$css', b.object([b.init('hash', hash), b.init('code', code)])));
-		component_block.body.unshift(b.stmt(b.call('$$payload.css.add', b.id('$$css'))));
+		component_block.body.unshift(b.stmt(b.call('$$renderer.global.css.add', b.id('$$css'))));
 	}
 
 	let should_inject_props =
@@ -303,7 +323,7 @@ export function server_component(analysis, options) {
 
 	const component_function = b.function_declaration(
 		b.id(analysis.name),
-		should_inject_props ? [b.id('$$payload'), b.id('$$props')] : [b.id('$$payload')],
+		should_inject_props ? [b.id('$$renderer'), b.id('$$props')] : [b.id('$$renderer')],
 		component_block
 	);
 
@@ -369,6 +389,10 @@ export function server_component(analysis, options) {
 		);
 	}
 
+	if (options.experimental.async) {
+		body.unshift(b.imports([], 'svelte/internal/flags/async'));
+	}
+
 	return {
 		type: 'Program',
 		sourceType: 'module',
@@ -379,7 +403,7 @@ export function server_component(analysis, options) {
 /**
  * @param {Analysis} analysis
  * @param {ValidatedModuleCompileOptions} options
- * @returns {Program}
+ * @returns {ESTree.Program}
  */
 export function server_module(analysis, options) {
 	/** @type {ServerTransformState} */
@@ -392,10 +416,11 @@ export function server_module(analysis, options) {
 		// to be present for `javascript_visitors_legacy` and so is included in module
 		// transform state as well as component transform state
 		legacy_reactive_statements: new Map(),
-		private_derived: new Map()
+		state_fields: new Map(),
+		is_instance: false
 	};
 
-	const module = /** @type {Program} */ (
+	const module = /** @type {ESTree.Program} */ (
 		walk(/** @type {AST.SvelteNode} */ (analysis.module.ast), state, global_visitors)
 	);
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/types.d.ts b/packages/svelte/src/compiler/phases/3-transform/server/types.d.ts
index 971271642c..2863955786 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/types.d.ts
+++ b/packages/svelte/src/compiler/phases/3-transform/server/types.d.ts
@@ -1,13 +1,17 @@
-import type { Expression, Statement, ModuleDeclaration, LabeledStatement } from 'estree';
+import type {
+	Expression,
+	Statement,
+	ModuleDeclaration,
+	LabeledStatement,
+	Identifier
+} from 'estree';
 import type { AST, Namespace, ValidatedCompileOptions } from '#compiler';
 import type { TransformState } from '../types.js';
 import type { ComponentAnalysis } from '../../types.js';
-import type { StateField } from '../client/types.js';
 
 export interface ServerTransformState extends TransformState {
 	/** The $: calls, which will be ordered in the end */
 	readonly legacy_reactive_statements: Map<LabeledStatement, Statement>;
-	readonly private_derived: Map<string, StateField>;
 }
 
 export interface ComponentServerTransformState extends ServerTransformState {
@@ -22,7 +26,13 @@ export interface ComponentServerTransformState extends ServerTransformState {
 	readonly template: Array<Statement | Expression>;
 	readonly namespace: Namespace;
 	readonly preserve_whitespace: boolean;
-	readonly skip_hydration_boundaries: boolean;
+	/** True if the current node is a) a component or render tag and b) the sole child of a block  */
+	readonly is_standalone: boolean;
+	/** Transformed async `{@const }`/`{let/const ...}` declarations (if any) and those coming after them */
+	async_consts?: {
+		id: Identifier;
+		thunks: Expression[];
+	};
 }
 
 export type Context = import('zimmerframe').Context<AST.SvelteNode, ServerTransformState>;
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js
index 6364063b3b..e6a1a86aa8 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js
@@ -1,8 +1,10 @@
 /** @import { AssignmentExpression, AssignmentOperator, Expression, Pattern } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { Context, ServerTransformState } from '../types.js' */
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import { build_assignment_value } from '../../../../utils/ast.js';
+import { get_name } from '../../../nodes.js';
+import { get_rune } from '../../../scope.js';
 import { visit_assignment_expression } from '../../shared/assignments.js';
 
 /**
@@ -22,6 +24,43 @@ export function AssignmentExpression(node, context) {
  * @returns {Expression | null}
  */
 function build_assignment(operator, left, right, context) {
+	if (
+		context.state.analysis.runes &&
+		left.type === 'MemberExpression' &&
+		left.object.type === 'ThisExpression' &&
+		!left.computed
+	) {
+		const name = get_name(left.property);
+		const field = name && context.state.state_fields.get(name);
+
+		// special case — state declaration in class constructor
+		if (field && field.node.type === 'AssignmentExpression' && left === field.node.left) {
+			const rune = get_rune(right, context.state.scope);
+
+			if (rune) {
+				const key =
+					left.property.type === 'PrivateIdentifier' || rune === '$state' || rune === '$state.raw'
+						? left.property
+						: field.key;
+
+				return b.assignment(
+					operator,
+					b.member(b.this, key, key.type === 'Literal'),
+					/** @type {Expression} */ (context.visit(right))
+				);
+			}
+		} else if (
+			field &&
+			(field.type === '$derived' || field.type === '$derived.by') &&
+			left.property.type === 'PrivateIdentifier'
+		) {
+			let value = /** @type {Expression} */ (
+				context.visit(build_assignment_value(operator, left, right))
+			);
+			return b.call(b.member(b.this, name), value);
+		}
+	}
+
 	let object = left;
 
 	while (object.type === 'MemberExpression') {
@@ -29,35 +68,52 @@ function build_assignment(operator, left, right, context) {
 		object = object.object;
 	}
 
-	if (object.type !== 'Identifier' || !is_store_name(object.name)) {
+	if (object.type !== 'Identifier') {
 		return null;
 	}
 
-	const name = object.name.slice(1);
+	if (is_store_name(object.name)) {
+		const name = object.name.slice(1);
 
-	if (!context.state.scope.get(name)) {
-		return null;
+		if (!context.state.scope.get(name)) {
+			return null;
+		}
+
+		if (object === left) {
+			let value = /** @type {Expression} */ (
+				context.visit(build_assignment_value(operator, left, right))
+			);
+
+			return b.call('$.store_set', b.id(name), value);
+		}
+
+		return b.call(
+			'$.store_mutate',
+			b.assignment('??=', b.id('$$store_subs'), b.object([])),
+			b.literal(object.name),
+			b.id(name),
+			b.assignment(
+				operator,
+				/** @type {Pattern} */ (context.visit(left)),
+				/** @type {Expression} */ (context.visit(right))
+			)
+		);
 	}
 
-	if (object === left) {
+	const binding = context.state.scope.get(object.name);
+
+	// TODO 6.0 this won't work perfectly: once a derived is written to, it will
+	// no longer recompute. It might be better to disallow writing to deriveds
+	// on the server, to prevent this bug occurring
+	if (binding?.kind === 'derived' && object === left) {
 		let value = /** @type {Expression} */ (
 			context.visit(build_assignment_value(operator, left, right))
 		);
 
-		return b.call('$.store_set', b.id(name), value);
+		return b.call(binding.node, value);
 	}
 
-	return b.call(
-		'$.store_mutate',
-		b.assignment('??=', b.id('$$store_subs'), b.object([])),
-		b.literal(object.name),
-		b.id(name),
-		b.assignment(
-			operator,
-			/** @type {Pattern} */ (context.visit(left)),
-			/** @type {Expression} */ (context.visit(right))
-		)
-	);
+	return null;
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/AwaitBlock.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/AwaitBlock.js
index 8fc82b8905..ba05ca1357 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/AwaitBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/AwaitBlock.js
@@ -1,33 +1,43 @@
-/** @import { BlockStatement, Expression, Pattern } from 'estree' */
+/** @import { BlockStatement, Expression, Pattern, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
-import * as b from '../../../../utils/builders.js';
-import { empty_comment } from './shared/utils.js';
+import * as b from '#compiler/builders';
+import { block_close, create_child_block } from './shared/utils.js';
 
 /**
  * @param {AST.AwaitBlock} node
  * @param {ComponentContext} context
  */
 export function AwaitBlock(node, context) {
-	context.state.template.push(
-		empty_comment,
-		b.stmt(
-			b.call(
-				'$.await',
-				/** @type {Expression} */ (context.visit(node.expression)),
-				b.thunk(
-					node.pending ? /** @type {BlockStatement} */ (context.visit(node.pending)) : b.block([])
-				),
-				b.arrow(
-					node.value ? [/** @type {Pattern} */ (context.visit(node.value))] : [],
-					node.then ? /** @type {BlockStatement} */ (context.visit(node.then)) : b.block([])
-				),
-				b.arrow(
-					node.error ? [/** @type {Pattern} */ (context.visit(node.error))] : [],
-					node.catch ? /** @type {BlockStatement} */ (context.visit(node.catch)) : b.block([])
-				)
+	let expression = /** @type {Expression} */ (context.visit(node.expression));
+	if (node.metadata.expression.has_await) {
+		// If this is an await expression, turn it into a IIFE so that the result is a promise.
+		// {#await await ...} is special insofar that the await should not be waited on.
+		expression = b.call(b.arrow([], expression, true));
+	}
+
+	/** @type {Statement} */
+	let statement = b.stmt(
+		b.call(
+			'$.await',
+			b.id('$$renderer'),
+			expression,
+			b.thunk(
+				node.pending ? /** @type {BlockStatement} */ (context.visit(node.pending)) : b.block([])
+			),
+			b.arrow(
+				node.value ? [/** @type {Pattern} */ (context.visit(node.value))] : [],
+				node.then ? /** @type {BlockStatement} */ (context.visit(node.then)) : b.block([])
 			)
+		)
+	);
+
+	context.state.template.push(
+		...create_child_block(
+			[statement],
+			node.metadata.expression.blockers(),
+			node.metadata.expression.has_await
 		),
-		empty_comment
+		block_close
 	);
 }
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..820658d950
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/AwaitExpression.js
@@ -0,0 +1,40 @@
+/** @import { AwaitExpression, Expression } from 'estree' */
+/** @import { Context } from '../types' */
+import { save } from '../../../../utils/ast.js';
+
+/**
+ * @param {AwaitExpression} node
+ * @param {Context} context
+ */
+export function AwaitExpression(node, context) {
+	const argument = /** @type {Expression} */ (context.visit(node.argument));
+
+	if (context.state.analysis.pickled_awaits.has(node)) {
+		return save(argument);
+	}
+
+	// we also need to restore context after block expressions
+	let i = context.path.length;
+	while (i--) {
+		const parent = context.path[i];
+
+		if (
+			parent.type === 'ArrowFunctionExpression' ||
+			parent.type === 'FunctionExpression' ||
+			parent.type === 'FunctionDeclaration'
+		) {
+			break;
+		}
+
+		// @ts-ignore
+		if (parent.metadata) {
+			if (parent.type !== 'ExpressionTag' && parent.type !== 'Fragment') {
+				return save(argument);
+			}
+
+			break;
+		}
+	}
+
+	return argument === node.argument ? node : { ...node, argument };
+}
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 386c6b6ff3..8525fb6366 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
@@ -1,9 +1,9 @@
-/** @import { CallExpression, Expression } from 'estree' */
+/** @import { CallExpression, Expression, MemberExpression } from 'estree' */
 /** @import { Context } from '../types.js' */
-import { is_ignored } from '../../../../state.js';
-import * as b from '../../../../utils/builders.js';
+import { dev, is_ignored } from '../../../../state.js';
+import * as b from '#compiler/builders';
 import { get_rune } from '../../../scope.js';
-import { transform_inspect_rune } from '../../utils.js';
+import { get_inspect_args } from '../../utils.js';
 
 /**
  * @param {CallExpression} node
@@ -12,12 +12,19 @@ import { transform_inspect_rune } from '../../utils.js';
 export function CallExpression(node, context) {
 	const rune = get_rune(node, context.state.scope);
 
-	if (rune === '$host') {
-		return b.id('undefined');
+	if (
+		rune === '$host' ||
+		rune === '$effect' ||
+		rune === '$effect.pre' ||
+		rune === '$inspect.trace'
+	) {
+		// we will only encounter `$effect` etc if they are top-level statements in the <script>
+		// following an `await`, otherwise they are removed by the ExpressionStatement visitor
+		return b.void0;
 	}
 
 	if (rune === '$effect.tracking') {
-		return b.literal(false);
+		return b.false;
 	}
 
 	if (rune === '$effect.root') {
@@ -25,6 +32,23 @@ 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;
+	}
+
+	if (rune === '$derived' || rune === '$derived.by') {
+		const fn = /** @type {Expression} */ (context.visit(node.arguments[0]));
+		return b.call('$.derived', rune === '$derived' ? b.thunk(fn) : fn);
+	}
+
+	if (rune === '$state.eager') {
+		return node.arguments[0];
+	}
+
 	if (rune === '$state.snapshot') {
 		return b.call(
 			'$.snapshot',
@@ -34,7 +58,13 @@ export function CallExpression(node, context) {
 	}
 
 	if (rune === '$inspect' || rune === '$inspect().with') {
-		return transform_inspect_rune(node, context);
+		if (!dev) return b.empty;
+
+		const { args, inspector } = get_inspect_args(rune, node, context.visit);
+
+		return rune === '$inspect'
+			? b.call(inspector, b.literal('$inspect('), ...args, b.literal(')'))
+			: b.call(inspector, b.literal('init'), ...args);
 	}
 
 	context.next();
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/ClassBody.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/ClassBody.js
index 365084a284..432d0142cd 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/ClassBody.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/ClassBody.js
@@ -1,120 +1,80 @@
-/** @import { ClassBody, Expression, MethodDefinition, PropertyDefinition } from 'estree' */
+/** @import { CallExpression, ClassBody, MethodDefinition, PropertyDefinition, StaticBlock } from 'estree' */
 /** @import { Context } from '../types.js' */
-/** @import { StateField } from '../../client/types.js' */
-import { dev } from '../../../../state.js';
-import * as b from '../../../../utils/builders.js';
-import { get_rune } from '../../../scope.js';
+import * as b from '#compiler/builders';
+import { get_name } from '../../../nodes.js';
 
 /**
  * @param {ClassBody} node
  * @param {Context} context
  */
 export function ClassBody(node, context) {
-	if (!context.state.analysis.runes) {
+	const state_fields = context.state.analysis.classes.get(node);
+
+	if (!state_fields) {
+		// in legacy mode, do nothing
 		context.next();
 		return;
 	}
 
-	/** @type {Map<string, StateField>} */
-	const public_derived = new Map();
+	/** @type {Array<MethodDefinition | PropertyDefinition | StaticBlock>} */
+	const body = [];
 
-	/** @type {Map<string, StateField>} */
-	const private_derived = new Map();
+	const child_state = { ...context.state, state_fields };
 
-	/** @type {string[]} */
-	const private_ids = [];
+	for (const [name, field] of state_fields) {
+		if (name[0] === '#') {
+			continue;
+		}
 
-	for (const definition of node.body) {
+		// insert backing fields for stuff declared in the constructor
 		if (
-			definition.type === 'PropertyDefinition' &&
-			(definition.key.type === 'Identifier' || definition.key.type === 'PrivateIdentifier')
+			field &&
+			field.node.type === 'AssignmentExpression' &&
+			(field.type === '$derived' || field.type === '$derived.by')
 		) {
-			const { type, name } = definition.key;
-
-			const is_private = type === 'PrivateIdentifier';
-			if (is_private) private_ids.push(name);
-
-			if (definition.value?.type === 'CallExpression') {
-				const rune = get_rune(definition.value, context.state.scope);
-				if (rune === '$derived' || rune === '$derived.by') {
-					/** @type {StateField} */
-					const field = {
-						kind: rune === '$derived.by' ? 'derived_by' : 'derived',
-						// @ts-expect-error this is set in the next pass
-						id: is_private ? definition.key : null
-					};
+			const member = b.member(b.this, field.key);
 
-					if (is_private) {
-						private_derived.set(name, field);
-					} else {
-						public_derived.set(name, field);
-					}
-				}
-			}
+			body.push(
+				b.prop_def(field.key, null),
+				b.method('get', b.key(name), [], [b.return(b.call(member))]),
+				b.method('set', b.key(name), [b.id('$$value')], [b.return(b.call(member, b.id('$$value')))])
+			);
 		}
 	}
 
-	// each `foo = $derived()` needs a backing `#foo` field
-	for (const [name, field] of public_derived) {
-		let deconflicted = name;
-		while (private_ids.includes(deconflicted)) {
-			deconflicted = '_' + deconflicted;
-		}
-
-		private_ids.push(deconflicted);
-		field.id = b.private_id(deconflicted);
-	}
-
-	/** @type {Array<MethodDefinition | PropertyDefinition>} */
-	const body = [];
-
-	const child_state = { ...context.state, private_derived };
-
 	// Replace parts of the class body
 	for (const definition of node.body) {
-		if (
-			definition.type === 'PropertyDefinition' &&
-			(definition.key.type === 'Identifier' || definition.key.type === 'PrivateIdentifier')
-		) {
-			const name = definition.key.name;
-
-			const is_private = definition.key.type === 'PrivateIdentifier';
-			const field = (is_private ? private_derived : public_derived).get(name);
-
-			if (definition.value?.type === 'CallExpression' && field !== undefined) {
-				const init = /** @type {Expression} **/ (
-					context.visit(definition.value.arguments[0], child_state)
-				);
-				const value =
-					field.kind === 'derived_by' ? b.call('$.once', init) : b.call('$.once', b.thunk(init));
-
-				if (is_private) {
-					body.push(b.prop_def(field.id, value));
-				} else {
-					// #foo;
-					const member = b.member(b.this, field.id);
-					body.push(b.prop_def(field.id, value));
-
-					// get foo() { return this.#foo; }
-					body.push(b.method('get', definition.key, [], [b.return(b.call(member))]));
+		if (definition.type !== 'PropertyDefinition') {
+			body.push(
+				/** @type {MethodDefinition | StaticBlock} */ (context.visit(definition, child_state))
+			);
+			continue;
+		}
 
-					if (dev && (field.kind === 'derived' || field.kind === 'derived_by')) {
-						body.push(
-							b.method(
-								'set',
-								definition.key,
-								[b.id('_')],
-								[b.throw_error(`Cannot update a derived property ('${name}')`)]
-							)
-						);
-					}
-				}
+		const name = get_name(definition.key);
+		const field = name && state_fields.get(name);
 
-				continue;
-			}
+		if (!field) {
+			body.push(/** @type {PropertyDefinition} */ (context.visit(definition, child_state)));
+			continue;
 		}
 
-		body.push(/** @type {MethodDefinition} **/ (context.visit(definition, child_state)));
+		if (name[0] === '#' || field.type === '$state' || field.type === '$state.raw') {
+			body.push(/** @type {PropertyDefinition} */ (context.visit(definition, child_state)));
+		} else if (field.node === definition) {
+			// $derived / $derived.by
+			const member = b.member(b.this, field.key);
+
+			body.push(
+				b.prop_def(
+					field.key,
+					/** @type {CallExpression} */ (context.visit(field.value, child_state))
+				),
+
+				b.method('get', definition.key, [], [b.return(b.call(member))]),
+				b.method('set', b.key(name), [b.id('$$value')], [b.return(b.call(member, b.id('$$value')))])
+			);
+		}
 	}
 
 	return { ...node, body };
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/Component.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/Component.js
index 01bf50fafa..ed202edd3b 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/Component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/Component.js
@@ -1,6 +1,7 @@
+/** @import { Expression } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import { build_inline_component } from './shared/component.js';
 
 /**
@@ -8,5 +9,9 @@ import { build_inline_component } from './shared/component.js';
  * @param {ComponentContext} context
  */
 export function Component(node, context) {
-	build_inline_component(node, b.id(node.name), context);
+	build_inline_component(
+		node,
+		/** @type {Expression} */ (context.visit(b.member_id(node.name))),
+		context
+	);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/ConstTag.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/ConstTag.js
index 5f6aea8338..cf56ef6910 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/ConstTag.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/ConstTag.js
@@ -1,7 +1,9 @@
 /** @import { Expression, Pattern } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
+import { extract_identifiers } from '../../../../utils/ast.js';
+import { add_async_declaration } from './DeclarationTag.js';
 
 /**
  * @param {AST.ConstTag} node
@@ -12,5 +14,15 @@ export function ConstTag(node, context) {
 	const id = /** @type {Pattern} */ (context.visit(declaration.id));
 	const init = /** @type {Expression} */ (context.visit(declaration.init));
 
-	context.state.init.push(b.const(id, init));
+	if (node.metadata.promises_id) {
+		add_async_declaration(
+			context,
+			node.metadata,
+			extract_identifiers(id),
+			[b.stmt(b.assignment('=', id, init))],
+			'let'
+		);
+	} else {
+		context.state.init.push(b.const(id, init));
+	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/DebugTag.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/DebugTag.js
index 6fe4e0b82b..3c4af2fe04 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/DebugTag.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/DebugTag.js
@@ -1,24 +1,35 @@
 /** @import { Expression } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
+import { create_child_block } from './shared/utils.js';
 
 /**
  * @param {AST.DebugTag} node
  * @param {ComponentContext} context
  */
 export function DebugTag(node, context) {
+	const blockers = node.identifiers
+		.map((identifier) => context.state.scope.get(identifier.name)?.blocker)
+		.filter((blocker) => blocker != null);
+
 	context.state.template.push(
-		b.stmt(
-			b.call(
-				'console.log',
-				b.object(
-					node.identifiers.map((identifier) =>
-						b.prop('init', identifier, /** @type {Expression} */ (context.visit(identifier)))
+		...create_child_block(
+			[
+				b.stmt(
+					b.call(
+						'console.log',
+						b.object(
+							node.identifiers.map((identifier) =>
+								b.prop('init', identifier, /** @type {Expression} */ (context.visit(identifier)))
+							)
+						)
 					)
-				)
-			)
-		),
-		b.debugger
+				),
+				b.debugger
+			],
+			b.array(blockers),
+			false
+		)
 	);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/DeclarationTag.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/DeclarationTag.js
new file mode 100644
index 0000000000..8338700c0b
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/DeclarationTag.js
@@ -0,0 +1,85 @@
+/** @import { Expression, Identifier, Pattern, Statement, ExpressionStatement, VariableDeclaration } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types.js' */
+import { extract_identifiers, has_await_expression } from '../../../../utils/ast.js';
+import * as b from '#compiler/builders';
+
+/**
+ * @param {AST.DeclarationTag} node
+ * @param {ComponentContext} context
+ */
+export function DeclarationTag(node, context) {
+	const declaration = /** @type {Statement} */ (context.visit(node.declaration));
+
+	if (
+		node.metadata.promises_id &&
+		node.declaration.type === 'VariableDeclaration' &&
+		declaration.type === 'VariableDeclaration'
+	) {
+		const { ids, assignments } = build_async_declaration_parts(declaration);
+		add_async_declaration(context, node.metadata, ids, assignments, declaration.kind);
+	} else {
+		context.state.init.push(declaration);
+	}
+}
+
+/**
+ * @param {VariableDeclaration} declaration
+ */
+export function build_async_declaration_parts(declaration) {
+	const ids = new Map();
+	for (const declarator of declaration.declarations) {
+		for (const id of extract_identifiers(declarator.id)) {
+			ids.set(id.name, id);
+		}
+	}
+
+	const assignments = declaration.declarations
+		.filter((declarator) => declarator.init !== null)
+		.map((declarator) =>
+			b.stmt(
+				b.assignment(
+					'=',
+					/** @type {Pattern} */ (declarator.id),
+					/** @type {Expression} */ (declarator.init)
+				)
+			)
+		);
+
+	return { ids: [...ids.values()], assignments };
+}
+
+/**
+ * @param {ComponentContext} context
+ * @param {AST.ConstTag['metadata'] | AST.DeclarationTag['metadata']} metadata
+ * @param {Identifier[]} ids
+ * @param {ExpressionStatement[]} assignments
+ * @param {VariableDeclaration['kind']} [kind]
+ */
+export function add_async_declaration(context, metadata, ids, assignments, kind = 'let') {
+	const run = (context.state.async_consts ??= {
+		id: /** @type {Identifier} */ (metadata.promises_id),
+		thunks: []
+	});
+
+	for (const id of ids) {
+		context.state.init.push(kind === 'var' ? b.var(id.name) : b.let(id.name));
+	}
+
+	const blockers = [...metadata.expression.dependencies]
+		.map((dep) => dep.blocker)
+		.filter((b) => b !== null && b.object !== context.state.async_consts?.id);
+
+	if (blockers.length === 1) {
+		run.thunks.push(b.thunk(/** @type {Expression} */ (blockers[0])));
+	} else if (blockers.length > 0) {
+		run.thunks.push(b.thunk(b.call('Promise.all', b.array(blockers))));
+	}
+
+	// keep the number of thunks pushed in sync with analysis phase
+	const has_await =
+		metadata.expression.has_await ||
+		assignments.some((assignment) => has_await_expression(assignment));
+	const body = assignments.length === 1 ? assignments[0].expression : b.block(assignments);
+	run.thunks.push(b.thunk(body, has_await));
+}
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 104f1f2405..cb5a61d52f 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
@@ -1,9 +1,8 @@
-/** @import { BlockStatement, Expression, Pattern, Statement } from 'estree' */
+/** @import { BlockStatement, Expression, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
-import { BLOCK_OPEN_ELSE } from '../../../../../internal/server/hydration.js';
-import * as b from '../../../../utils/builders.js';
-import { block_close, block_open } from './shared/utils.js';
+import * as b from '#compiler/builders';
+import { block_close, block_open, block_open_else, create_child_block } from './shared/utils.js';
 
 /**
  * @param {AST.EachBlock} node
@@ -18,7 +17,9 @@ export function EachBlock(node, context) {
 		each_node_meta.contains_group_binding || !node.index ? each_node_meta.index : b.id(node.index);
 
 	const array_id = state.scope.root.unique('each_array');
-	state.init.push(b.const(array_id, b.call('$.ensure_array_like', collection)));
+
+	/** @type {Statement[]} */
+	let statements = [b.const(array_id, b.call('$.ensure_array_like', collection))];
 
 	/** @type {Statement[]} */
 	const each = [];
@@ -31,7 +32,9 @@ export function EachBlock(node, context) {
 		each.push(b.let(node.index, index));
 	}
 
-	each.push(.../** @type {BlockStatement} */ (context.visit(node.body)).body);
+	const new_body = /** @type {BlockStatement} */ (context.visit(node.body)).body;
+
+	if (node.body) each.push(...new_body);
 
 	const for_loop = b.for(
 		b.declaration('let', [
@@ -44,23 +47,30 @@ 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.id('$$renderer.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)))
-		);
+		fallback.body.unshift(b.stmt(b.call(b.id('$$renderer.push'), block_open_else)));
 
-		state.template.push(
+		statements.push(
 			b.if(
 				b.binary('!==', b.member(array_id, 'length'), b.literal(0)),
 				b.block([open, for_loop]),
 				fallback
-			),
-			block_close
+			)
 		);
 	} else {
-		state.template.push(block_open, for_loop, block_close);
+		state.template.push(block_open);
+		statements.push(for_loop);
 	}
+
+	state.template.push(
+		...create_child_block(
+			statements,
+			node.metadata.expression.blockers(),
+			node.metadata.expression.has_await
+		),
+		block_close
+	);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/ExpressionStatement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/ExpressionStatement.js
index 00d0dba5da..f77e19aec2 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/ExpressionStatement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/ExpressionStatement.js
@@ -1,6 +1,6 @@
 /** @import { ExpressionStatement } from 'estree' */
 /** @import { Context } from '../types.js' */
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import { get_rune } from '../../../scope.js';
 
 /**
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/Fragment.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/Fragment.js
index a293b98e7e..a6ff33c7ab 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/Fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/Fragment.js
@@ -1,7 +1,7 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext, ComponentServerTransformState } from '../types.js' */
 import { clean_nodes, infer_namespace } from '../../utils.js';
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import { empty_comment, process_children, build_template } from './shared/utils.js';
 
 /**
@@ -28,7 +28,8 @@ export function Fragment(node, context) {
 		init: [],
 		template: [],
 		namespace,
-		skip_hydration_boundaries: is_standalone
+		is_standalone,
+		async_consts: undefined
 	};
 
 	for (const node of hoisted) {
@@ -42,5 +43,11 @@ export function Fragment(node, context) {
 
 	process_children(trimmed, { ...context, state });
 
+	if (state.async_consts && state.async_consts.thunks.length > 0) {
+		state.init.push(
+			b.var(state.async_consts.id, b.call('$$renderer.run', b.array(state.async_consts.thunks)))
+		);
+	}
+
 	return b.block([...state.init, ...build_template(state.template)]);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/HtmlTag.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/HtmlTag.js
index 0d551a884a..ee790c3e7c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/HtmlTag.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/HtmlTag.js
@@ -1,13 +1,25 @@
 /** @import { Expression } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
+import { create_child_block } from './shared/utils.js';
 
 /**
  * @param {AST.HtmlTag} node
  * @param {ComponentContext} context
  */
 export function HtmlTag(node, context) {
-	const expression = /** @type {Expression} */ (context.visit(node.expression));
-	context.state.template.push(b.call('$.html', expression));
+	const expression = b.call('$.html', /** @type {Expression} */ (context.visit(node.expression)));
+
+	if (node.metadata.expression.is_async()) {
+		context.state.template.push(
+			...create_child_block(
+				[b.stmt(b.call('$$renderer.push', expression))],
+				node.metadata.expression.blockers(),
+				node.metadata.expression.has_await
+			)
+		);
+	} else {
+		context.state.template.push(expression);
+	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/Identifier.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/Identifier.js
index b8c2699d54..460a3411c2 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/Identifier.js
@@ -1,7 +1,7 @@
 /** @import { Identifier, Node } from 'estree' */
 /** @import { Context } from '../types.js' */
 import is_reference from 'is-reference';
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import { build_getter } from './shared/utils.js';
 
 /**
@@ -14,6 +14,11 @@ export function Identifier(node, context) {
 			return b.id('$$sanitized_props');
 		}
 
+		if (node.name.startsWith('$$derived_array')) {
+			// terrible hack, but easier than adding new stuff to `context.state` for now
+			return b.call(node);
+		}
+
 		return build_getter(node, context.state);
 	}
 }
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 4df09aa8b9..2d1a22605c 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
@@ -1,28 +1,48 @@
-/** @import { BlockStatement, Expression } from 'estree' */
+/** @import { BlockStatement, Expression, IfStatement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
-import { BLOCK_OPEN_ELSE } from '../../../../../internal/server/hydration.js';
-import * as b from '../../../../utils/builders.js';
-import { block_close, block_open } from './shared/utils.js';
+import * as b from '#compiler/builders';
+import { block_close, create_child_block } from './shared/utils.js';
 
 /**
  * @param {AST.IfBlock} node
  * @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.call(b.id('$$renderer.push'), b.literal(`<!--[0-->`))));
 
-	const alternate = node.alternate
-		? /** @type {BlockStatement} */ (context.visit(node.alternate))
-		: b.block([]);
+	/** @type {IfStatement} */
+	let if_statement = b.if(/** @type {Expression} */ (context.visit(node.test)), consequent);
 
-	consequent.body.unshift(b.stmt(b.assignment('+=', b.id('$$payload.out'), block_open)));
+	let index = 1;
+	let current_if = if_statement;
+	let alt = node.alternate;
 
-	alternate.body.unshift(
-		b.stmt(b.assignment('+=', b.id('$$payload.out'), b.literal(BLOCK_OPEN_ELSE)))
-	);
+	// Walk the else-if chain, flattening branches
+	for (const elseif of node.metadata.flattened ?? []) {
+		const branch = /** @type {BlockStatement} */ (context.visit(elseif.consequent));
+		branch.body.unshift(b.stmt(b.call(b.id('$$renderer.push'), b.literal(`<!--[${index++}-->`))));
+
+		current_if = current_if.alternate = b.if(
+			/** @type {Expression} */ (context.visit(elseif.test)),
+			branch
+		);
+		alt = elseif.alternate;
+	}
 
-	context.state.template.push(b.if(test, consequent, alternate), block_close);
+	// Handle final else (or remaining async chain)
+	const final_alternate = alt ? /** @type {BlockStatement} */ (context.visit(alt)) : b.block([]);
+
+	final_alternate.body.unshift(b.stmt(b.call(b.id('$$renderer.push'), b.literal(`<!--[-1-->`))));
+	current_if.alternate = final_alternate;
+
+	context.state.template.push(
+		...create_child_block(
+			[if_statement],
+			node.metadata.expression.blockers(),
+			node.metadata.expression.has_await
+		),
+		block_close
+	);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/KeyBlock.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/KeyBlock.js
index f1dc9fa1b4..1396aa8fad 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/KeyBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/KeyBlock.js
@@ -1,16 +1,22 @@
 /** @import { BlockStatement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
-import { empty_comment } from './shared/utils.js';
+import { block_close, block_open, empty_comment } from './shared/utils.js';
 
 /**
  * @param {AST.KeyBlock} node
  * @param {ComponentContext} context
  */
 export function KeyBlock(node, context) {
+	const is_async = node.metadata.expression.is_async();
+
+	if (is_async) context.state.template.push(block_open);
+
 	context.state.template.push(
 		empty_comment,
 		/** @type {BlockStatement} */ (context.visit(node.fragment)),
 		empty_comment
 	);
+
+	if (is_async) context.state.template.push(block_close);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/LabeledStatement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/LabeledStatement.js
index 2b394e94e3..83c828b839 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/LabeledStatement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/LabeledStatement.js
@@ -1,6 +1,6 @@
 /** @import { ExpressionStatement, LabeledStatement } from 'estree' */
 /** @import { Context } from '../types.js' */
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 
 /**
  * @param {LabeledStatement} node
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/MemberExpression.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/MemberExpression.js
index 527c8cf6ed..6326e9efe2 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/MemberExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/MemberExpression.js
@@ -1,20 +1,16 @@
-/** @import { MemberExpression } from 'estree' */
+/** @import { ClassBody, MemberExpression } from 'estree' */
 /** @import { Context } from '../types.js' */
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 
 /**
  * @param {MemberExpression} node
  * @param {Context} context
  */
 export function MemberExpression(node, context) {
-	if (
-		context.state.analysis.runes &&
-		node.object.type === 'ThisExpression' &&
-		node.property.type === 'PrivateIdentifier'
-	) {
-		const field = context.state.private_derived.get(node.property.name);
+	if (context.state.analysis.runes && node.property.type === 'PrivateIdentifier') {
+		const field = context.state.state_fields?.get(`#${node.property.name}`);
 
-		if (field) {
+		if (field?.type === '$derived' || field?.type === '$derived.by') {
 			return b.call(node);
 		}
 	}
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/Program.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/Program.js
new file mode 100644
index 0000000000..6b5227d598
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/Program.js
@@ -0,0 +1,25 @@
+/** @import { Node, Program } from 'estree' */
+/** @import { Context, ComponentServerTransformState } from '../types' */
+import * as b from '#compiler/builders';
+import { transform_body } from '../../shared/transform-async.js';
+
+/**
+ * @param {Program} node
+ * @param {Context} context
+ */
+export function Program(node, context) {
+	if (context.state.is_instance) {
+		const state = /** @type {ComponentServerTransformState} */ (context.state);
+
+		return {
+			...node,
+			body: transform_body(
+				state.analysis.instance_body,
+				b.id('$$renderer.run'),
+				(node) => /** @type {Node} */ (context.visit(node))
+			)
+		};
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/PropertyDefinition.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/PropertyDefinition.js
index 04751a19d1..498f90703c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/PropertyDefinition.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/PropertyDefinition.js
@@ -1,6 +1,6 @@
 /** @import { Expression, PropertyDefinition } from 'estree' */
 /** @import { Context } from '../types.js' */
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import { get_rune } from '../../../scope.js';
 
 /**
@@ -11,7 +11,7 @@ export function PropertyDefinition(node, context) {
 	if (context.state.analysis.runes && node.value != null && node.value.type === 'CallExpression') {
 		const rune = get_rune(node.value, context.state.scope);
 
-		if (rune === '$state' || rune === '$state.raw' || rune === '$derived') {
+		if (rune === '$state' || rune === '$state.raw') {
 			return {
 				...node,
 				value:
@@ -21,13 +21,14 @@ export function PropertyDefinition(node, context) {
 			};
 		}
 
-		if (rune === '$derived.by') {
+		if (rune === '$derived.by' || rune === '$derived') {
+			const fn = /** @type {Expression} */ (context.visit(node.value.arguments[0]));
 			return {
 				...node,
 				value:
 					node.value.arguments.length === 0
 						? null
-						: b.call(/** @type {Expression} */ (context.visit(node.value.arguments[0])))
+						: b.call('$.derived', rune === '$derived' ? b.thunk(fn) : fn)
 			};
 		}
 	}
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
index af50695efa..90c34d7035 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
@@ -1,37 +1,77 @@
-/** @import { Location } from 'locate-character' */
+/** @import { Expression } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext, ComponentServerTransformState } from '../types.js' */
 /** @import { Scope } from '../../../scope.js' */
 import { is_void } from '../../../../../utils.js';
 import { dev, locator } from '../../../../state.js';
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
-import { build_element_attributes } from './shared/element.js';
-import { process_children, build_template } from './shared/utils.js';
+import { build_element_attributes, prepare_element_spread_object } from './shared/element.js';
+import { process_children, build_template, PromiseOptimiser } from './shared/utils.js';
+import { is_customizable_select_element } from '../../../nodes.js';
 
 /**
  * @param {AST.RegularElement} node
  * @param {ComponentContext} context
  */
 export function RegularElement(node, context) {
+	const name = context.state.namespace === 'html' ? node.name.toLowerCase() : node.name;
 	const namespace = determine_namespace_for_children(node, context.state.namespace);
+	const has_child_declarations = !node.fragment.metadata.transparent;
 
 	/** @type {ComponentServerTransformState} */
 	const state = {
 		...context.state,
 		namespace,
+		scope: /** @type {Scope} */ (context.state.scopes.get(node.fragment)),
 		preserve_whitespace:
-			context.state.preserve_whitespace || node.name === 'pre' || node.name === 'textarea'
+			context.state.preserve_whitespace || node.name === 'pre' || node.name === 'textarea',
+		init: [],
+		template: [],
+		async_consts: undefined
 	};
 
-	context.state.template.push(b.literal(`<${node.name}`));
-	const body = build_element_attributes(node, { ...context, state });
-	context.state.template.push(b.literal('>'));
+	/** @type {ComponentServerTransformState} */
+	const attribute_state = { ...state, scope: context.state.scope };
 
-	if ((node.name === 'script' || node.name === 'style') && node.fragment.nodes.length === 1) {
-		context.state.template.push(
+	const node_is_void = is_void(name);
+
+	const optimiser = new PromiseOptimiser();
+
+	// If this element needs special handling (like <select value> / <option>),
+	// avoid calling build_element_attributes here to prevent evaluating/awaiting
+	// attribute expressions twice. We'll handle attributes in the special branch.
+	const is_select_special =
+		name === 'select' &&
+		node.attributes.some(
+			(attribute) =>
+				((attribute.type === 'Attribute' || attribute.type === 'BindDirective') &&
+					attribute.name === 'value') ||
+				attribute.type === 'SpreadAttribute'
+		);
+	const is_option_special = name === 'option';
+	const is_special = is_select_special || is_option_special;
+
+	let body = /** @type {Expression | null} */ (null);
+	if (!is_special) {
+		// only open the tag in the non-special path
+		state.template.push(b.literal(`<${name}`));
+		body = build_element_attributes(
+			node,
+			{ ...context, state: attribute_state },
+			optimiser.transform
+		);
+		state.template.push(b.literal(node_is_void ? '/>' : '>')); // add `/>` for XHTML compliance
+	}
+
+	if ((name === 'script' || name === 'style') && node.fragment.nodes.length === 1) {
+		state.template.push(
 			b.literal(/** @type {AST.Text} */ (node.fragment.nodes[0]).data),
-			b.literal(`</${node.name}>`)
+			b.literal(`</${name}>`)
+		);
+
+		context.state.template.push(
+			...optimiser.render([...state.init, ...build_template(state.template)])
 		);
 
 		return;
@@ -42,10 +82,7 @@ export function RegularElement(node, context) {
 		node.fragment.nodes,
 		context.path,
 		namespace,
-		{
-			...state,
-			scope: /** @type {Scope} */ (state.scopes.get(node.fragment))
-		},
+		state,
 		state.preserve_whitespace,
 		state.options.preserveComments
 	);
@@ -55,13 +92,13 @@ export function RegularElement(node, context) {
 	}
 
 	if (dev) {
-		const location = /** @type {Location} */ (locator(node.start));
+		const location = locator(node.start);
 		state.template.push(
 			b.stmt(
 				b.call(
 					'$.push_element',
-					b.id('$$payload'),
-					b.literal(node.name),
+					b.id('$$renderer'),
+					b.literal(name),
 					b.literal(location.line),
 					b.literal(location.column)
 				)
@@ -69,21 +106,88 @@ export function RegularElement(node, context) {
 		);
 	}
 
-	if (body === null) {
-		process_children(trimmed, { ...context, state });
-	} else {
-		let id = body;
+	if (is_select_special) {
+		const inner_state = { ...state, template: [], init: [] };
+		process_children(trimmed, { ...context, state: inner_state });
 
-		if (body.type !== 'Identifier') {
-			id = b.id(state.scope.generate('$$body'));
-			state.template.push(b.const(id, body));
+		const fn = b.arrow(
+			[b.id('$$renderer')],
+			b.block([...state.init, ...build_template(inner_state.template)])
+		);
+
+		const [attributes, ...rest] = prepare_element_spread_object(node, context, optimiser.transform);
+
+		if (is_customizable_select_element(node)) {
+			rest.push(b.true);
 		}
 
+		const statement = b.stmt(b.call('$$renderer.select', attributes, fn, ...rest));
+
+		context.state.template.push(...optimiser.render([...state.init, statement]));
+
+		return;
+	}
+
+	if (is_option_special) {
+		let body;
+
+		if (node.metadata.synthetic_value_node) {
+			body = optimiser.transform(
+				/** @type {Expression} */ (context.visit(node.metadata.synthetic_value_node.expression)),
+				node.metadata.synthetic_value_node.metadata.expression
+			);
+		} else {
+			const inner_state = { ...state, template: [], init: [] };
+			process_children(trimmed, { ...context, state: inner_state });
+
+			/** @type {import('estree').Statement[]} */
+			const body_statements = [...state.init, ...build_template(inner_state.template)];
+
+			if (dev) {
+				const location = locator(node.start);
+				body_statements.unshift(
+					b.stmt(
+						b.call(
+							'$.push_element',
+							b.id('$$renderer'),
+							b.literal(name),
+							b.literal(location.line),
+							b.literal(location.column)
+						)
+					)
+				);
+				body_statements.push(b.stmt(b.call('$.pop_element')));
+			}
+
+			body = b.arrow([b.id('$$renderer')], b.block(body_statements));
+		}
+
+		const [attributes, ...rest] = prepare_element_spread_object(node, context, optimiser.transform);
+
+		if (is_customizable_select_element(node)) {
+			rest.push(b.true);
+		}
+
+		const statement = b.stmt(b.call('$$renderer.option', attributes, body, ...rest));
+
+		context.state.template.push(...optimiser.render([...state.init, statement]));
+
+		return;
+	}
+
+	if (body !== null) {
 		// if this is a `<textarea>` value or a contenteditable binding, we only add
 		// the body if the attribute/binding is falsy
 		const inner_state = { ...state, template: [], init: [] };
 		process_children(trimmed, { ...context, state: inner_state });
 
+		let id = /** @type {Expression} */ (body);
+
+		if (body.type !== 'Identifier') {
+			id = b.id(state.scope.generate('$$body'));
+			state.template.push(b.const(id, body));
+		}
+
 		// Use the body expression as the body if it's truthy, otherwise use the inner template
 		state.template.push(
 			b.if(
@@ -92,13 +196,38 @@ export function RegularElement(node, context) {
 				b.block([...inner_state.init, ...build_template(inner_state.template)])
 			)
 		);
+	} else {
+		// For optgroup or select with rich content, add hydration marker at the start
+		process_children(trimmed, { ...context, state });
+		if ((name === 'optgroup' || name === 'select') && is_customizable_select_element(node)) {
+			state.template.push(b.literal('<!>'));
+		}
 	}
 
-	if (!is_void(node.name)) {
-		state.template.push(b.literal(`</${node.name}>`));
+	if (!node_is_void) {
+		state.template.push(b.literal(`</${name}>`));
 	}
 
 	if (dev) {
 		state.template.push(b.stmt(b.call('$.pop_element')));
 	}
+
+	if (has_child_declarations && state.async_consts && state.async_consts.thunks.length > 0) {
+		state.init.push(
+			b.var(state.async_consts.id, b.call('$$renderer.run', b.array(state.async_consts.thunks)))
+		);
+	}
+
+	if (has_child_declarations) {
+		context.state.template.push(
+			...optimiser.render([b.block([...state.init, ...build_template(state.template)])])
+		);
+	} else if (optimiser.is_async()) {
+		context.state.template.push(
+			...optimiser.render([...state.init, ...build_template(state.template)])
+		);
+	} else {
+		context.state.init.push(...state.init);
+		context.state.template.push(...state.template);
+	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RenderTag.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RenderTag.js
index ebf8c3be1c..ac671c0188 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RenderTag.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RenderTag.js
@@ -2,34 +2,44 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
 import { unwrap_optional } from '../../../../utils/ast.js';
-import * as b from '../../../../utils/builders.js';
-import { empty_comment } from './shared/utils.js';
+import * as b from '#compiler/builders';
+import { empty_comment, PromiseOptimiser } from './shared/utils.js';
 
 /**
  * @param {AST.RenderTag} node
  * @param {ComponentContext} context
  */
 export function RenderTag(node, context) {
+	const optimiser = new PromiseOptimiser();
+
 	const callee = unwrap_optional(node.expression).callee;
 	const raw_args = unwrap_optional(node.expression).arguments;
 
-	const snippet_function = /** @type {Expression} */ (context.visit(callee));
+	const snippet_function = optimiser.transform(
+		/** @type {Expression} */ (context.visit(callee)),
+		node.metadata.expression
+	);
 
-	const snippet_args = raw_args.map((arg) => {
-		return /** @type {Expression} */ (context.visit(arg));
+	const snippet_args = raw_args.map((arg, i) => {
+		return optimiser.transform(
+			/** @type {Expression} */ (context.visit(arg)),
+			node.metadata.arguments[i]
+		);
 	});
 
-	context.state.template.push(
-		b.stmt(
-			(node.expression.type === 'CallExpression' ? b.call : b.maybe_call)(
-				snippet_function,
-				b.id('$$payload'),
-				...snippet_args
-			)
+	let statement = b.stmt(
+		(node.expression.type === 'CallExpression' ? b.call : b.maybe_call)(
+			snippet_function,
+			b.id('$$renderer'),
+			...snippet_args
 		)
 	);
 
-	if (!context.state.skip_hydration_boundaries) {
+	context.state.template.push(...optimiser.render_block([statement]));
+
+	// If the render tag is wrapped in $.async, that $.async call already contains surrounding markers,
+	// so we don't need to (or rather must not, to avoid hydration mismatches) add our own.
+	if (!optimiser.is_async() && !context.state.is_standalone) {
 		context.state.template.push(empty_comment);
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SlotElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SlotElement.js
index 7ece04ae3d..3cebdf4541 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SlotElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SlotElement.js
@@ -1,8 +1,13 @@
 /** @import { BlockStatement, Expression, Literal, Property } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
-import * as b from '../../../../utils/builders.js';
-import { empty_comment, build_attribute_value } from './shared/utils.js';
+import * as b from '#compiler/builders';
+import {
+	build_attribute_value,
+	PromiseOptimiser,
+	block_open,
+	block_close
+} from './shared/utils.js';
 
 /**
  * @param {AST.SlotElement} node
@@ -15,13 +20,22 @@ export function SlotElement(node, context) {
 	/** @type {Expression[]} */
 	const spreads = [];
 
+	const optimiser = new PromiseOptimiser();
+
 	let name = b.literal('default');
 
 	for (const attribute of node.attributes) {
 		if (attribute.type === 'SpreadAttribute') {
-			spreads.push(/** @type {Expression} */ (context.visit(attribute)));
+			let expression = /** @type {Expression} */ (context.visit(attribute));
+			spreads.push(optimiser.transform(expression, attribute.metadata.expression));
 		} else if (attribute.type === 'Attribute') {
-			const value = build_attribute_value(attribute.value, context, false, true);
+			const value = build_attribute_value(
+				attribute.value,
+				context,
+				optimiser.transform,
+				false,
+				true
+			);
 
 			if (attribute.name === 'name') {
 				name = /** @type {Literal} */ (value);
@@ -38,17 +52,17 @@ export function SlotElement(node, context) {
 
 	const fallback =
 		node.fragment.nodes.length === 0
-			? b.literal(null)
+			? b.null
 			: b.thunk(/** @type {BlockStatement} */ (context.visit(node.fragment)));
 
 	const slot = b.call(
 		'$.slot',
-		b.id('$$payload'),
+		b.id('$$renderer'),
 		b.id('$$props'),
 		name,
 		props_expression,
 		fallback
 	);
 
-	context.state.template.push(empty_comment, b.stmt(slot), empty_comment);
+	context.state.template.push(block_open, ...optimiser.render_block([b.stmt(slot)]), block_close);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SnippetBlock.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SnippetBlock.js
index eb83917927..7ae2a8e037 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SnippetBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SnippetBlock.js
@@ -1,25 +1,29 @@
 /** @import { BlockStatement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
-import * as b from '../../../../utils/builders.js';
+import { dev } from '../../../../state.js';
+import * as b from '#compiler/builders';
 
 /**
  * @param {AST.SnippetBlock} node
  * @param {ComponentContext} context
  */
 export function SnippetBlock(node, context) {
-	const fn = b.function_declaration(
+	let fn = b.function_declaration(
 		node.expression,
-		[b.id('$$payload'), ...node.parameters],
+		[b.id('$$renderer'), ...node.parameters],
 		/** @type {BlockStatement} */ (context.visit(node.body))
 	);
 
 	// @ts-expect-error - TODO remove this hack once $$render_inner for legacy bindings is gone
 	fn.___snippet = true;
 
-	if (node.metadata.can_hoist) {
-		context.state.hoisted.push(fn);
-	} else {
-		context.state.init.push(fn);
+	const statements = node.metadata.can_hoist ? context.state.hoisted : context.state.init;
+
+	if (dev) {
+		fn.body.body.unshift(b.stmt(b.call('$.validate_snippet_args', b.id('$$renderer'))));
+		statements.push(b.stmt(b.call('$.prevent_snippet_stringification', fn.id)));
 	}
+
+	statements.push(fn);
 }
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 0d54feee11..47a07a1312 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
@@ -1,17 +1,139 @@
 /** @import { BlockStatement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
-import { BLOCK_CLOSE, BLOCK_OPEN } from '../../../../../internal/server/hydration.js';
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
+import {
+	block_close,
+	block_open,
+	block_open_else,
+	build_attribute_value,
+	build_template
+} from './shared/utils.js';
 
 /**
  * @param {AST.SvelteBoundary} node
  * @param {ComponentContext} context
  */
 export function SvelteBoundary(node, context) {
+	// Extract the `failed` snippet/attribute
+	const failed_snippet = /** @type {AST.SnippetBlock | undefined} */ (
+		node.fragment.nodes.find(
+			(node) => node.type === 'SnippetBlock' && node.expression.name === 'failed'
+		)
+	);
+	const failed_attribute = /** @type {AST.Attribute} */ (
+		node.attributes.find((node) => node.type === 'Attribute' && node.name === 'failed')
+	);
+
+	// Extract the `pending` snippet/attribute
+	const pending_attribute = /** @type {AST.Attribute} */ (
+		node.attributes.find((node) => node.type === 'Attribute' && node.name === 'pending')
+	);
+	const is_pending_attr_nullish =
+		pending_attribute &&
+		typeof pending_attribute.value === 'object' &&
+		!Array.isArray(pending_attribute.value) &&
+		!context.state.scope.evaluate(pending_attribute.value.expression).is_defined;
+	const pending_snippet = /** @type {AST.SnippetBlock | undefined} */ (
+		node.fragment.nodes.find(
+			(node) => node.type === 'SnippetBlock' && node.expression.name === 'pending'
+		)
+	);
+
+	const children_nodes = node.fragment.nodes.filter(
+		(child) =>
+			!(child.type === 'SnippetBlock' && ['failed', 'pending'].includes(child.expression.name))
+	);
+
+	const children_fragment = { ...node.fragment, nodes: children_nodes };
+	const children_block = /** @type {BlockStatement} */ (
+		context.visit(children_fragment, {
+			...context.state,
+			scope: context.state.scopes.get(node.fragment) ?? context.state.scope
+		})
+	);
+
+	/** @type {BlockStatement} */
+	let children_body;
+
+	if (pending_attribute || pending_snippet) {
+		if (pending_attribute && is_pending_attr_nullish && !pending_snippet) {
+			const { callee, pending_block } = build_pending_attribute_block(pending_attribute, context);
+
+			children_body = b.block([
+				b.if(
+					callee,
+					pending_block,
+					b.block(build_template([block_open, children_block, block_close]))
+				)
+			]);
+		} else {
+			children_body = pending_attribute
+				? build_pending_attribute_block(pending_attribute, context).pending_block
+				: build_pending_snippet_block(/** @type {AST.SnippetBlock} */ (pending_snippet), context);
+		}
+	} else {
+		children_body = b.block(build_template([block_open, children_block, block_close]));
+	}
+
+	// When there's no `failed` snippet/attribute, skip the boundary wrapper entirely
+	// (saves bytes / more performant at runtime)
+	if (!failed_snippet && !failed_attribute) {
+		context.state.template.push(...children_body.body);
+		return;
+	}
+
+	const props = b.object([]);
+	if (failed_attribute && !failed_snippet) {
+		const failed_callee = build_attribute_value(
+			failed_attribute.value,
+			context,
+			(expression) => expression,
+			false,
+			true
+		);
+
+		props.properties.push(b.init('failed', failed_callee));
+	} else if (failed_snippet) {
+		context.visit(failed_snippet, context.state);
+		props.properties.push(b.init('failed', failed_snippet.expression));
+	}
+
 	context.state.template.push(
-		b.literal(BLOCK_OPEN),
-		/** @type {BlockStatement} */ (context.visit(node.fragment)),
-		b.literal(BLOCK_CLOSE)
+		b.stmt(b.call('$$renderer.boundary', props, b.arrow([b.id('$$renderer')], children_body)))
+	);
+}
+
+/**
+ * @param {AST.Attribute} attribute
+ * @param {ComponentContext} context
+ */
+function build_pending_attribute_block(attribute, context) {
+	const callee = build_attribute_value(
+		attribute.value,
+		context,
+		(expression) => expression,
+		false,
+		true
+	);
+	const pending = b.call(callee, b.id('$$renderer'));
+
+	return {
+		callee,
+		pending_block: b.block(build_template([block_open_else, b.stmt(pending), block_close]))
+	};
+}
+
+/**
+ * @param {AST.SnippetBlock} snippet
+ * @param {ComponentContext} context
+ */
+function build_pending_snippet_block(snippet, context) {
+	return b.block(
+		build_template([
+			block_open_else,
+			/** @type {BlockStatement} */ (context.visit(snippet.body)),
+			block_close
+		])
 	);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js
index 9f6faa33c8..398ecc68a2 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js
@@ -1,12 +1,11 @@
-/** @import { Location } from 'locate-character' */
-/** @import { BlockStatement, Expression } from 'estree' */
+/** @import { BlockStatement, Expression, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
 import { dev, locator } from '../../../../state.js';
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import { determine_namespace_for_children } from '../../utils.js';
 import { build_element_attributes } from './shared/element.js';
-import { build_template } from './shared/utils.js';
+import { build_template, create_child_block, PromiseOptimiser } from './shared/utils.js';
 
 /**
  * @param {AST.SvelteElement} node
@@ -24,10 +23,10 @@ export function SvelteElement(node, context) {
 			tag = b.id(tag_id);
 		}
 
+		context.state.init.push(b.stmt(b.call('$.validate_dynamic_element_tag', b.thunk(tag))));
 		if (node.fragment.nodes.length > 0) {
 			context.state.init.push(b.stmt(b.call('$.validate_void_dynamic_element', b.thunk(tag))));
 		}
-		context.state.init.push(b.stmt(b.call('$.validate_dynamic_element_tag', b.thunk(tag))));
 	}
 
 	const state = {
@@ -37,15 +36,20 @@ export function SvelteElement(node, context) {
 		init: []
 	};
 
-	build_element_attributes(node, { ...context, state });
+	const optimiser = new PromiseOptimiser();
+
+	/** @type {Statement[]} */
+	let statements = [];
+
+	build_element_attributes(node, { ...context, state }, optimiser.transform);
 
 	if (dev) {
-		const location = /** @type {Location} */ (locator(node.start));
-		context.state.template.push(
+		const location = locator(node.start);
+		statements.push(
 			b.stmt(
 				b.call(
 					'$.push_element',
-					b.id('$$payload'),
+					b.id('$$renderer'),
 					tag,
 					b.literal(location.line),
 					b.literal(location.column)
@@ -57,19 +61,29 @@ export function SvelteElement(node, context) {
 	const attributes = b.block([...state.init, ...build_template(state.template)]);
 	const children = /** @type {BlockStatement} */ (context.visit(node.fragment, state));
 
-	context.state.template.push(
-		b.stmt(
-			b.call(
-				'$.element',
-				b.id('$$payload'),
-				tag,
-				attributes.body.length > 0 && b.thunk(attributes),
-				children.body.length > 0 && b.thunk(children)
+	statements.push(
+		...optimiser.render([
+			b.stmt(
+				b.call(
+					'$.element',
+					b.id('$$renderer'),
+					tag,
+					attributes.body.length > 0 && b.thunk(attributes),
+					children.body.length > 0 && b.thunk(children)
+				)
 			)
-		)
+		])
 	);
 
 	if (dev) {
-		context.state.template.push(b.stmt(b.call('$.pop_element')));
+		statements.push(b.stmt(b.call('$.pop_element')));
 	}
+
+	context.state.template.push(
+		...create_child_block(
+			statements,
+			node.metadata.expression.blockers(),
+			node.metadata.expression.has_await
+		)
+	);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteHead.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteHead.js
index 7da7d8355c..177ec62416 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteHead.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteHead.js
@@ -1,7 +1,9 @@
 /** @import { BlockStatement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
+import { hash } from '../../../../../utils.js';
+import { filename } from '../../../../state.js';
 
 /**
  * @param {AST.SvelteHead} node
@@ -11,6 +13,13 @@ export function SvelteHead(node, context) {
 	const block = /** @type {BlockStatement} */ (context.visit(node.fragment));
 
 	context.state.template.push(
-		b.stmt(b.call('$.head', b.id('$$payload'), b.arrow([b.id('$$payload')], block)))
+		b.stmt(
+			b.call(
+				'$.head',
+				b.literal(hash(filename)),
+				b.id('$$renderer'),
+				b.arrow([b.id('$$renderer')], block)
+			)
+		)
 	);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SveltePortal.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SveltePortal.js
index 864589be93..970a140135 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SveltePortal.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SveltePortal.js
@@ -15,13 +15,21 @@ export function SveltePortal(node, context) {
 	);
 
 	if (target) {
-		const value = build_attribute_value(/** @type {AST.Attribute} */ (target).value, context);
+		const value = build_attribute_value(
+			/** @type {AST.Attribute} */ (target).value,
+			context,
+			(expression) => expression
+		);
 		const body = /** @type {BlockStatement} */ (context.visit(node.fragment, context.state));
 		context.state.template.push(
-			b.stmt(b.call('$.portal', b.id('$$payload'), value, b.arrow([b.id('$$payload')], body)))
+			b.stmt(b.call('$.portal', b.id('$$renderer'), value, b.arrow([b.id('$$renderer')], body)))
 		);
 	} else {
-		const value = build_attribute_value(/** @type {AST.Attribute} */ (_for).value, context);
-		context.state.template.push(b.stmt(b.call('$.portal_outlet', b.id('$$payload'), value)));
+		const value = build_attribute_value(
+			/** @type {AST.Attribute} */ (_for).value,
+			context,
+			(expression) => expression
+		);
+		context.state.template.push(b.stmt(b.call('$.portal_outlet', b.id('$$renderer'), value)));
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteSelf.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteSelf.js
index fbedcff283..bb0ecb21b2 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteSelf.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteSelf.js
@@ -1,6 +1,6 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import { build_inline_component } from './shared/component.js';
 
 /**
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/TitleElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/TitleElement.js
index 8fd1973453..66f4afc94c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/TitleElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/TitleElement.js
@@ -1,6 +1,6 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import { process_children, build_template } from './shared/utils.js';
 
 /**
@@ -13,5 +13,9 @@ export function TitleElement(node, context) {
 	process_children(node.fragment.nodes, { ...context, state: { ...context.state, template } });
 	template.push(b.literal('</title>'));
 
-	context.state.init.push(...build_template(template, b.id('$$payload.title'), '='));
+	context.state.init.push(
+		b.stmt(
+			b.call('$$renderer.title', b.arrow([b.id('$$renderer')], b.block(build_template(template))))
+		)
+	);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/UpdateExpression.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/UpdateExpression.js
index ae78e14c13..7438ffddce 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/UpdateExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/UpdateExpression.js
@@ -1,6 +1,6 @@
 /** @import { UpdateExpression } from 'estree' */
 /** @import { Context } from '../types.js' */
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 
 /**
  * @param {UpdateExpression} node
@@ -9,17 +9,26 @@ import * as b from '../../../../utils/builders.js';
 export function UpdateExpression(node, context) {
 	const argument = node.argument;
 
-	if (
-		argument.type === 'Identifier' &&
-		context.state.scope.get(argument.name)?.kind === 'store_sub'
-	) {
-		return b.call(
-			node.prefix ? '$.update_store_pre' : '$.update_store',
-			b.assignment('??=', b.id('$$store_subs'), b.object([])),
-			b.literal(argument.name),
-			b.id(argument.name.slice(1)),
-			node.operator === '--' && b.literal(-1)
-		);
+	if (argument.type === 'Identifier') {
+		const binding = context.state.scope.get(argument.name);
+
+		if (binding?.kind === 'store_sub') {
+			return b.call(
+				node.prefix ? '$.update_store_pre' : '$.update_store',
+				b.assignment('??=', b.id('$$store_subs'), b.object([])),
+				b.literal(argument.name),
+				b.id(argument.name.slice(1)),
+				node.operator === '--' && b.literal(-1)
+			);
+		}
+
+		if (binding?.kind === 'derived') {
+			return b.call(
+				node.prefix ? '$.update_derived_pre' : '$.update_derived',
+				binding.node,
+				node.operator === '--' && b.literal(-1)
+			);
+		}
 	}
 
 	return context.next();
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
index 31de811ac7..2c7b14afa5 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
@@ -1,9 +1,10 @@
 /** @import { VariableDeclaration, VariableDeclarator, Expression, CallExpression, Pattern, Identifier } from 'estree' */
 /** @import { Binding } from '#compiler' */
 /** @import { Context } from '../types.js' */
+/** @import { ComponentAnalysis } from '../../../types.js' */
 /** @import { Scope } from '../../../scope.js' */
 import { build_fallback, extract_paths } from '../../../../utils/ast.js';
-import * as b from '../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import { get_rune } from '../../../scope.js';
 import { walk } from 'zimmerframe';
 
@@ -24,6 +25,11 @@ export function VariableDeclaration(node, context) {
 				continue;
 			}
 
+			if (rune === '$props.id') {
+				// skip
+				continue;
+			}
+
 			if (rune === '$props') {
 				let has_rest = false;
 				// remove $bindable() from props declaration
@@ -40,25 +46,31 @@ export function VariableDeclaration(node, context) {
 						) {
 							const right = node.right.arguments.length
 								? /** @type {Expression} */ (context.visit(node.right.arguments[0]))
-								: b.id('undefined');
+								: b.void0;
 							return b.assignment_pattern(node.left, right);
 						}
 					}
 				});
+
+				// if `$$slots` is declared separately, deconflict
+				const slots_name = /** @type {ComponentAnalysis} */ (context.state.analysis).uses_slots
+					? b.id('$$slots_')
+					: b.id('$$slots');
+
 				if (id.type === 'ObjectPattern' && has_rest) {
 					// If a rest pattern is used within an object pattern, we need to ensure we don't expose $$slots or $$events
 					id.properties.splice(
 						id.properties.length - 1,
 						0,
 						// @ts-ignore
-						b.prop('init', b.id('$$slots'), b.id('$$slots')),
+						b.prop('init', b.id('$$slots'), slots_name),
 						b.prop('init', b.id('$$events'), b.id('$$events'))
 					);
 				} else if (id.type === 'Identifier') {
 					// If $props is referenced as an identifier, we need to ensure we don't expose $$slots or $$events as properties
 					// on the identifier reference
 					id = b.object_pattern([
-						b.prop('init', b.id('$$slots'), b.id('$$slots')),
+						b.prop('init', b.id('$$slots'), slots_name),
 						b.prop('init', b.id('$$events'), b.id('$$events')),
 						b.rest(b.id(id.name))
 					]);
@@ -70,13 +82,54 @@ export function VariableDeclaration(node, context) {
 			}
 
 			const args = /** @type {CallExpression} */ (init).arguments;
-			const value =
-				args.length === 0 ? b.id('undefined') : /** @type {Expression} */ (context.visit(args[0]));
+			const value = args.length > 0 ? /** @type {Expression} */ (context.visit(args[0])) : b.void0;
+
+			if (rune === '$derived' || rune === '$derived.by') {
+				const is_async =
+					rune === '$derived' &&
+					context.state.analysis.async_deriveds.has(
+						/** @type {CallExpression} */ (declarator.init)
+					);
+
+				let init = is_async
+					? b.await(b.call('$.async_derived', b.thunk(value, true)))
+					: b.call('$.derived', rune === '$derived' ? b.thunk(value) : value);
+
+				if (declarator.id.type === 'Identifier') {
+					declarations.push(
+						b.declarator(/** @type {Pattern} */ (context.visit(declarator.id)), init)
+					);
+				} else {
+					const call = /** @type {CallExpression} */ (declarator.init);
+
+					let rhs = value;
+
+					if (rune !== '$derived' || call.arguments[0].type !== 'Identifier') {
+						const id = b.id(context.state.scope.generate('$$d'));
+
+						rhs = b.call(id);
+						declarations.push(b.declarator(id, init));
+					}
+
+					const { inserts, paths } = extract_paths(declarator.id, rhs);
+
+					for (const { id, value } of inserts) {
+						id.name = context.state.scope.generate('$$derived_array');
+
+						const expression = /** @type {Expression} */ (context.visit(b.thunk(value)));
+						const call = b.call('$.derived', expression);
+
+						declarations.push(b.declarator(id, call));
+					}
+
+					for (const path of paths) {
+						const expression = /** @type {Expression} */ (context.visit(path.expression));
+						const call = b.call('$.derived', b.thunk(expression));
+
+						declarations.push(b.declarator(path.node, call));
+					}
+				}
 
-			if (rune === '$derived.by') {
-				declarations.push(
-					b.declarator(/** @type {Pattern} */ (context.visit(declarator.id)), b.call(value))
-				);
 				continue;
 			}
 
@@ -85,13 +138,6 @@ export function VariableDeclaration(node, context) {
 				continue;
 			}
 
-			if (rune === '$derived') {
-				declarations.push(
-					b.declarator(/** @type {Pattern} */ (context.visit(declarator.id)), value)
-				);
-				continue;
-			}
-
 			declarations.push(...create_state_declarators(declarator, context.state.scope, value));
 		}
 	} else {
@@ -108,22 +154,30 @@ export function VariableDeclaration(node, context) {
 			if (has_props) {
 				if (declarator.id.type !== 'Identifier') {
 					// Turn export let into props. It's really really weird because export let { x: foo, z: [bar]} = ..
-					// means that foo and bar are the props (i.e. the leafs are the prop names), not x and z.
-					const tmp = context.state.scope.generate('tmp');
-					const paths = extract_paths(declarator.id);
+					// means that foo and bar are the props (i.e. the leaves are the prop names), not x and z.
+					const tmp = b.id(context.state.scope.generate('tmp'));
+					const { inserts, paths } = extract_paths(declarator.id, tmp);
+
 					declarations.push(
 						b.declarator(
-							b.id(tmp),
+							tmp,
 							/** @type {Expression} */ (context.visit(/** @type {Expression} */ (declarator.init)))
 						)
 					);
+
+					for (const { id, value } of inserts) {
+						id.name = context.state.scope.generate('$$array');
+						declarations.push(b.declarator(id, value));
+					}
+
 					for (const path of paths) {
-						const value = path.expression?.(b.id(tmp));
+						const value = path.expression;
 						const name = /** @type {Identifier} */ (path.node).name;
 						const binding = /** @type {Binding} */ (context.state.scope.get(name));
 						const prop = b.member(b.id('$$props'), b.literal(binding.prop_alias ?? name), true);
 						declarations.push(b.declarator(path.node, build_fallback(prop, value)));
 					}
+
 					continue;
 				}
 
@@ -156,6 +210,10 @@ export function VariableDeclaration(node, context) {
 		}
 	}
 
+	if (declarations.length === 0) {
+		return b.empty;
+	}
+
 	return {
 		...node,
 		declarations
@@ -173,12 +231,16 @@ function create_state_declarators(declarator, scope, value) {
 		return [b.declarator(declarator.id, value)];
 	}
 
-	const tmp = scope.generate('tmp');
-	const paths = extract_paths(declarator.id);
+	const tmp = b.id(scope.generate('tmp'));
+	const { paths, inserts } = extract_paths(declarator.id, tmp);
 	return [
-		b.declarator(b.id(tmp), value), // TODO inject declarator for opts, so we can use it below
+		b.declarator(tmp, value), // TODO inject declarator for opts, so we can use it below
+		...inserts.map(({ id, value }) => {
+			id.name = scope.generate('$$array');
+			return b.declarator(id, value);
+		}),
 		...paths.map((path) => {
-			const value = path.expression?.(b.id(tmp));
+			const value = path.expression;
 			return b.declarator(path.node, value);
 		})
 	];
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
index 695161ff9b..b0e086b7ad 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
@@ -1,9 +1,17 @@
 /** @import { BlockStatement, Expression, Pattern, Property, SequenceExpression, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../../types.js' */
-import { empty_comment, build_attribute_value } from './utils.js';
-import * as b from '../../../../../utils/builders.js';
+import {
+	empty_comment,
+	build_attribute_value,
+	PromiseOptimiser,
+	block_open_else,
+	block_open,
+	block_close
+} from './utils.js';
+import * as b from '#compiler/builders';
 import { is_element_node } from '../../../../nodes.js';
+import { dev } from '../../../../../state.js';
 
 /**
  * @param {AST.Component | AST.SvelteComponent | AST.SvelteSelf} node
@@ -71,16 +79,26 @@ export function build_inline_component(node, expression, context) {
 		}
 	}
 
+	const optimiser = new PromiseOptimiser();
+
 	for (const attribute of node.attributes) {
 		if (attribute.type === 'LetDirective') {
 			if (!slot_scope_applies_to_itself) {
 				lets.default.push(attribute);
 			}
 		} else if (attribute.type === 'SpreadAttribute') {
-			props_and_spreads.push(/** @type {Expression} */ (context.visit(attribute)));
+			let expression = /** @type {Expression} */ (context.visit(attribute));
+			props_and_spreads.push(optimiser.transform(expression, attribute.metadata.expression));
 		} else if (attribute.type === 'Attribute') {
+			const value = build_attribute_value(
+				attribute.value,
+				context,
+				optimiser.transform,
+				false,
+				true
+			);
+
 			if (attribute.name.startsWith('--')) {
-				const value = build_attribute_value(attribute.value, context, false, true);
 				custom_css_props.push(b.init(attribute.name, value));
 				continue;
 			}
@@ -89,9 +107,17 @@ export function build_inline_component(node, expression, context) {
 				has_children_prop = true;
 			}
 
-			const value = build_attribute_value(attribute.value, context, false, true);
 			push_prop(b.prop('init', b.key(attribute.name), value));
-		} else if (attribute.type === 'BindDirective' && attribute.name !== 'this') {
+		} else if (attribute.type === 'BindDirective') {
+			// Bindings are a bit special: we don't want to add them to (async) deriveds but we need to check if they have blockers
+			optimiser.check_blockers(attribute.metadata.expression);
+
+			if (attribute.name === 'this') {
+				// bind:this is client-only, but we still need to check for blockers to ensure
+				// the server generates matching hydration markers if the client wraps in $.async
+				continue;
+			}
+
 			if (attribute.expression.type === 'SequenceExpression') {
 				const [get, set] = /** @type {SequenceExpression} */ (context.visit(attribute.expression))
 					.expressions;
@@ -124,6 +150,10 @@ export function build_inline_component(node, expression, context) {
 					true
 				);
 			}
+		} else if (attribute.type === 'AttachTag') {
+			// While we don't run attachments on the server, on the client they might generate a surrounding blocker function which generates
+			// extra comments, and to prevent hydration mismatches we therefore have to account for them here to generate similar comments on the server.
+			optimiser.check_blockers(attribute.metadata.expression);
 		}
 	}
 
@@ -200,7 +230,7 @@ export function build_inline_component(node, expression, context) {
 		if (block.body.length === 0) continue;
 
 		/** @type {Pattern[]} */
-		const params = [b.id('$$payload')];
+		const params = [b.id('$$renderer')];
 
 		if (lets[slot_name].length > 0) {
 			const pattern = b.object_pattern(
@@ -238,7 +268,13 @@ export function build_inline_component(node, expression, context) {
 				)
 			) {
 				// create `children` prop...
-				push_prop(b.prop('init', b.id('children'), slot_fn));
+				push_prop(
+					b.prop(
+						'init',
+						b.id('children'),
+						dev ? b.call('$.prevent_snippet_stringification', slot_fn) : slot_fn
+					)
+				);
 
 				// and `$$slots.default: true` so that `<slot>` on the child works
 				serialized_slots.push(b.init(slot_name, b.true));
@@ -267,44 +303,57 @@ export function build_inline_component(node, expression, context) {
 					b.array(props_and_spreads.map((p) => (Array.isArray(p) ? b.object(p) : p)))
 				);
 
+	const dynamic =
+		node.type === 'SvelteComponent' || (node.type === 'Component' && node.metadata.dynamic);
+
 	/** @type {Statement} */
-	let statement = b.stmt(
-		(node.type === 'SvelteComponent' ? b.maybe_call : b.call)(
+	let statement = b.stmt(b.call(expression, b.id('$$renderer'), props_expression));
+
+	if (dynamic) {
+		statement = b.if(
 			expression,
-			b.id('$$payload'),
-			props_expression
-		)
-	);
+			b.block([
+				b.stmt(b.call('$$renderer.push', block_open)),
+				statement,
+				b.stmt(b.call('$$renderer.push', block_close))
+			]),
+			b.block([
+				b.stmt(b.call('$$renderer.push', block_open_else)),
+				b.stmt(b.call('$$renderer.push', block_close))
+			])
+		);
+	}
 
 	if (snippet_declarations.length > 0) {
 		statement = b.block([...snippet_declarations, statement]);
 	}
 
-	const dynamic =
-		node.type === 'SvelteComponent' || (node.type === 'Component' && node.metadata.dynamic);
-
 	if (custom_css_props.length > 0) {
-		context.state.template.push(
-			b.stmt(
-				b.call(
-					'$.css_props',
-					b.id('$$payload'),
-					b.literal(context.state.namespace === 'svg' ? false : true),
-					b.object(custom_css_props),
-					b.thunk(b.block([statement])),
-					dynamic && b.true
-				)
+		statement = b.stmt(
+			b.call(
+				'$.css_props',
+				b.id('$$renderer'),
+				b.literal(context.state.namespace === 'svg' ? false : true),
+				b.object(custom_css_props),
+				b.thunk(b.block([statement])),
+				dynamic && b.true
 			)
 		);
-	} else {
-		if (dynamic) {
-			context.state.template.push(empty_comment);
-		}
+	}
 
-		context.state.template.push(statement);
+	if (node.type !== 'SvelteSelf') {
+		// Component name itself could be blocked on async values
+		optimiser.check_blockers(node.metadata.expression);
+	}
 
-		if (!context.state.skip_hydration_boundaries) {
-			context.state.template.push(empty_comment);
-		}
+	context.state.template.push(...optimiser.render_block([statement]));
+
+	if (
+		!dynamic &&
+		!optimiser.is_async() &&
+		!context.state.is_standalone &&
+		custom_css_props.length === 0
+	) {
+		context.state.template.push(empty_comment);
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
index 5ebc647571..9c37b2fffe 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
@@ -1,20 +1,13 @@
-/** @import { Expression, Literal } from 'estree' */
-/** @import { AST, Namespace } from '#compiler' */
+/** @import { ArrayExpression, Expression, Literal, ObjectExpression } from 'estree' */
+/** @import { AST } from '#compiler' */
 /** @import { ComponentContext, ComponentServerTransformState } from '../../types.js' */
-import {
-	get_attribute_chunks,
-	is_event_attribute,
-	is_text_attribute
-} from '../../../../../utils/ast.js';
+import { is_event_attribute, is_text_attribute } from '../../../../../utils/ast.js';
 import { binding_properties } from '../../../../bindings.js';
-import {
-	create_attribute,
-	create_expression_metadata,
-	is_custom_element_node
-} from '../../../../nodes.js';
+import { create_attribute, ExpressionMetadata, is_custom_element_node } from '../../../../nodes.js';
 import { regex_starts_with_newline } from '../../../../patterns.js';
-import * as b from '../../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import {
+	ELEMENT_IS_INPUT,
 	ELEMENT_IS_NAMESPACED,
 	ELEMENT_PRESERVE_ATTRIBUTE_CASE
 } from '../../../../../../constants.js';
@@ -24,6 +17,7 @@ import {
 	is_content_editable_binding,
 	is_load_error_element
 } from '../../../../../../utils.js';
+import { escape_html } from '../../../../../../escaping.js';
 
 const WHITESPACE_INSENSITIVE_ATTRIBUTES = ['class', 'style'];
 
@@ -32,8 +26,9 @@ const WHITESPACE_INSENSITIVE_ATTRIBUTES = ['class', 'style'];
  * their output to be the child content instead. In this case, an object is returned.
  * @param {AST.RegularElement | AST.SvelteElement} node
  * @param {import('zimmerframe').Context<AST.SvelteNode, ComponentServerTransformState>} context
+ * @param {(expression: Expression, metadata: ExpressionMetadata) => Expression} transform
  */
-export function build_element_attributes(node, context) {
+export function build_element_attributes(node, context, transform) {
 	/** @type {Array<AST.Attribute | AST.SpreadAttribute>} */
 	const attributes = [];
 
@@ -47,9 +42,6 @@ export function build_element_attributes(node, context) {
 	let content = null;
 
 	let has_spread = false;
-	// Use the index to keep the attributes order which is important for spreading
-	let class_index = -1;
-	let style_index = -1;
 	let events_to_capture = new Set();
 
 	for (const attribute of node.attributes) {
@@ -67,7 +59,8 @@ export function build_element_attributes(node, context) {
 						// also see related code in analysis phase
 						attribute.value[0].data = '\n' + attribute.value[0].data;
 					}
-					content = b.call('$.escape', build_attribute_value(attribute.value, context));
+
+					content = b.call('$.escape', build_attribute_value(attribute.value, context, transform));
 				} else if (node.name !== 'select') {
 					// omit value attribute for select elements, it's irrelevant for the initially selected value and has no
 					// effect on the selected value after the user interacts with the select element (the value _property_ does, but not the attribute)
@@ -85,11 +78,23 @@ export function build_element_attributes(node, context) {
 				// the defaultValue/defaultChecked properties don't exist as attributes
 			} else if (attribute.name !== 'defaultValue' && attribute.name !== 'defaultChecked') {
 				if (attribute.name === 'class') {
-					class_index = attributes.length;
-				} else if (attribute.name === 'style') {
-					style_index = attributes.length;
+					if (attribute.metadata.needs_clsx) {
+						attributes.push({
+							...attribute,
+							value: {
+								.../** @type {AST.ExpressionTag} */ (attribute.value),
+								expression: b.call(
+									'$.clsx',
+									/** @type {AST.ExpressionTag} */ (attribute.value).expression
+								)
+							}
+						});
+					} else {
+						attributes.push(attribute);
+					}
+				} else {
+					attributes.push(attribute);
 				}
-				attributes.push(attribute);
 			}
 		} else if (attribute.type === 'BindDirective') {
 			if (attribute.name === 'value' && node.name === 'select') continue;
@@ -116,9 +121,15 @@ export function build_element_attributes(node, context) {
 				expression = b.call(expression.expressions[0]);
 			}
 
-			if (is_content_editable_binding(attribute.name)) {
+			expression = transform(expression, attribute.metadata.expression);
+
+			if (attribute.name === 'innerHTML') {
+				// innerHTML is the only binding we don't escape
 				content = expression;
-			} else if (attribute.name === 'value' && node.name === 'textarea') {
+			} else if (
+				is_content_editable_binding(attribute.name) ||
+				(attribute.name === 'value' && node.name === 'textarea')
+			) {
 				content = b.call('$.escape', expression);
 			} else if (attribute.name === 'group' && attribute.expression.type !== 'SequenceExpression') {
 				const value_attribute = /** @type {AST.Attribute | undefined} */ (
@@ -135,7 +146,7 @@ export function build_element_attributes(node, context) {
 				);
 
 				attributes.push(
-					create_attribute('checked', -1, -1, [
+					create_attribute('checked', null, -1, -1, [
 						{
 							type: 'ExpressionTag',
 							start: -1,
@@ -143,29 +154,29 @@ export function build_element_attributes(node, context) {
 							expression: is_checkbox
 								? b.call(
 										b.member(attribute.expression, 'includes'),
-										build_attribute_value(value_attribute.value, context)
+										build_attribute_value(value_attribute.value, context, transform)
 									)
 								: b.binary(
 										'===',
 										attribute.expression,
-										build_attribute_value(value_attribute.value, context)
+										build_attribute_value(value_attribute.value, context, transform)
 									),
 							metadata: {
-								expression: create_expression_metadata()
+								expression: new ExpressionMetadata()
 							}
 						}
 					])
 				);
 			} else {
 				attributes.push(
-					create_attribute(attribute.name, -1, -1, [
+					create_attribute(attribute.name, null, -1, -1, [
 						{
 							type: 'ExpressionTag',
 							start: -1,
 							end: -1,
 							expression,
 							metadata: {
-								expression: create_expression_metadata()
+								expression: new ExpressionMetadata()
 							}
 						}
 					])
@@ -194,64 +205,71 @@ export function build_element_attributes(node, context) {
 		}
 	}
 
-	if (class_directives.length > 0 && !has_spread) {
-		const class_attribute = build_class_directives(
-			class_directives,
-			/** @type {AST.Attribute | null} */ (attributes[class_index] ?? null)
-		);
-		if (class_index === -1) {
-			attributes.push(class_attribute);
-		}
-	}
-
-	if (style_directives.length > 0 && !has_spread) {
-		build_style_directives(
+	if (has_spread) {
+		build_element_spread_attributes(
+			node,
+			attributes,
 			style_directives,
-			/** @type {AST.Attribute | null} */ (attributes[style_index] ?? null),
-			context
+			class_directives,
+			context,
+			transform
 		);
-		if (style_index > -1) {
-			attributes.splice(style_index, 1);
-		}
-	}
-
-	if (has_spread) {
-		build_element_spread_attributes(node, attributes, style_directives, class_directives, context);
 	} else {
+		const css_hash = node.metadata.scoped ? context.state.analysis.css.hash : null;
+
 		for (const attribute of /** @type {AST.Attribute[]} */ (attributes)) {
-			if (attribute.value === true || is_text_attribute(attribute)) {
-				const name = get_attribute_name(node, attribute);
-				const literal_value = /** @type {Literal} */ (
+			const name = get_attribute_name(node, attribute);
+			const can_use_literal =
+				(name !== 'class' || class_directives.length === 0) &&
+				(name !== 'style' || style_directives.length === 0);
+
+			if (can_use_literal && (attribute.value === true || is_text_attribute(attribute))) {
+				let literal_value = /** @type {Literal} */ (
 					build_attribute_value(
 						attribute.value,
 						context,
+						transform,
 						WHITESPACE_INSENSITIVE_ATTRIBUTES.includes(name)
 					)
 				).value;
+
+				if (name === 'class' && css_hash) {
+					literal_value = (String(literal_value) + ' ' + css_hash).trim();
+				}
+
 				if (name !== 'class' || literal_value) {
 					context.state.template.push(
-						b.literal(
-							` ${attribute.name}${
-								is_boolean_attribute(name) && literal_value === true
-									? ''
-									: `="${literal_value === true ? '' : String(literal_value)}"`
-							}`
-						)
+						b.literal(` ${name}="${literal_value === true ? '' : String(literal_value)}"`)
 					);
 				}
+
 				continue;
 			}
 
-			const name = get_attribute_name(node, attribute);
 			const value = build_attribute_value(
 				attribute.value,
 				context,
+				transform,
 				WHITESPACE_INSENSITIVE_ATTRIBUTES.includes(name)
 			);
 
-			context.state.template.push(
-				b.call('$.attr', b.literal(name), value, is_boolean_attribute(name) && b.true)
-			);
+			// pre-escape and inline literal attributes :
+			if (can_use_literal && value.type === 'Literal' && typeof value.value === 'string') {
+				if (name === 'class' && css_hash) {
+					value.value = (value.value + ' ' + css_hash).trim();
+				}
+				context.state.template.push(b.literal(` ${name}="${escape_html(value.value, true)}"`));
+			} else if (name === 'class') {
+				context.state.template.push(
+					build_attr_class(class_directives, value, context, css_hash, transform)
+				);
+			} else if (name === 'style') {
+				context.state.template.push(build_attr_style(style_directives, value, context, transform));
+			} else {
+				context.state.template.push(
+					b.call('$.attr', b.literal(name), value, is_boolean_attribute(name) && b.true)
+				);
+			}
 		}
 	}
 
@@ -266,7 +284,7 @@ export function build_element_attributes(node, context) {
 
 /**
  * @param {AST.RegularElement | AST.SvelteElement} element
- * @param {AST.Attribute} attribute
+ * @param {AST.Attribute | AST.BindDirective} attribute
  */
 function get_attribute_name(element, attribute) {
 	let name = attribute.name;
@@ -278,6 +296,47 @@ function get_attribute_name(element, attribute) {
 	return name;
 }
 
+/**
+ * @param {AST.RegularElement | AST.SvelteElement} element
+ * @param {Array<AST.Attribute | AST.SpreadAttribute | AST.BindDirective>} attributes
+ * @param {ComponentContext} context
+ * @param {(expression: Expression, metadata: ExpressionMetadata) => Expression} transform
+ */
+export function build_spread_object(element, attributes, context, transform) {
+	const object = b.object(
+		attributes.map((attribute) => {
+			if (attribute.type === 'Attribute') {
+				const name = get_attribute_name(element, attribute);
+				const value = build_attribute_value(
+					attribute.value,
+					context,
+					transform,
+					WHITESPACE_INSENSITIVE_ATTRIBUTES.includes(name)
+				);
+
+				return b.prop('init', b.key(name), value);
+			} else if (attribute.type === 'BindDirective') {
+				const name = get_attribute_name(element, attribute);
+				const value =
+					attribute.expression.type === 'SequenceExpression'
+						? b.call(attribute.expression.expressions[0])
+						: /** @type {Expression} */ (context.visit(attribute.expression));
+
+				return b.prop('init', b.key(name), value);
+			}
+
+			return b.spread(
+				transform(
+					/** @type {Expression} */ (context.visit(attribute)),
+					attribute.metadata.expression
+				)
+			);
+		})
+	);
+
+	return object;
+}
+
 /**
  *
  * @param {AST.RegularElement | AST.SvelteElement} element
@@ -285,32 +344,106 @@ function get_attribute_name(element, attribute) {
  * @param {AST.StyleDirective[]} style_directives
  * @param {AST.ClassDirective[]} class_directives
  * @param {ComponentContext} context
+ * @param {(expression: Expression, metadata: ExpressionMetadata) => Expression} transform
  */
 function build_element_spread_attributes(
 	element,
 	attributes,
 	style_directives,
 	class_directives,
-	context
+	context,
+	transform
+) {
+	const args = prepare_element_spread(
+		element,
+		/** @type {Array<AST.Attribute | AST.SpreadAttribute | AST.BindDirective>} */ (attributes),
+		style_directives,
+		class_directives,
+		context,
+		transform
+	);
+
+	let call = b.call('$.attributes', ...args);
+
+	context.state.template.push(call);
+}
+
+/**
+ * Prepare args for $.attributes(...): compute object, css_hash, classes, styles and flags.
+ * @param {AST.RegularElement | AST.SvelteElement} element
+ * @param {ComponentContext} context
+ * @param {(expression: Expression, metadata: ExpressionMetadata) => Expression} transform
+ * @returns {[ObjectExpression,Literal | undefined, ObjectExpression | undefined, ObjectExpression | undefined, Literal | undefined]}
+ */
+export function prepare_element_spread_object(element, context, transform) {
+	/** @type {Array<AST.Attribute | AST.SpreadAttribute | AST.BindDirective>} */
+	const select_attributes = [];
+	/** @type {AST.ClassDirective[]} */
+	const class_directives = [];
+	/** @type {AST.StyleDirective[]} */
+	const style_directives = [];
+
+	for (const attribute of element.attributes) {
+		if (
+			attribute.type === 'Attribute' ||
+			attribute.type === 'BindDirective' ||
+			attribute.type === 'SpreadAttribute'
+		) {
+			select_attributes.push(attribute);
+		} else if (attribute.type === 'ClassDirective') {
+			class_directives.push(attribute);
+		} else if (attribute.type === 'StyleDirective') {
+			style_directives.push(attribute);
+		}
+	}
+
+	return prepare_element_spread(
+		element,
+		select_attributes,
+		style_directives,
+		class_directives,
+		context,
+		transform
+	);
+}
+
+/**
+ * Prepare args for $.attributes(...): compute object, css_hash, classes, styles and flags.
+ * @param {AST.RegularElement | AST.SvelteElement} element
+ * @param {Array<AST.Attribute | AST.SpreadAttribute | AST.BindDirective>} attributes
+ * @param {AST.StyleDirective[]} style_directives
+ * @param {AST.ClassDirective[]} class_directives
+ * @param {ComponentContext} context
+ * @param {(expression: Expression, metadata: ExpressionMetadata) => Expression} transform
+ * @returns {[ObjectExpression,Literal | undefined, ObjectExpression | undefined, ObjectExpression | undefined, Literal | undefined]}
+ */
+export function prepare_element_spread(
+	element,
+	attributes,
+	style_directives,
+	class_directives,
+	context,
+	transform
 ) {
+	/** @type {ObjectExpression | undefined} */
 	let classes;
+	/** @type {ObjectExpression | undefined} */
 	let styles;
 	let flags = 0;
 
-	if (class_directives.length > 0 || context.state.analysis.css.hash) {
+	if (class_directives.length) {
 		const properties = class_directives.map((directive) =>
 			b.init(
 				directive.name,
 				directive.expression.type === 'Identifier' && directive.expression.name === directive.name
 					? b.id(directive.name)
-					: /** @type {Expression} */ (context.visit(directive.expression))
+					: transform(
+							/** @type {Expression} */ (context.visit(directive.expression)),
+							directive.metadata.expression
+						)
 			)
 		);
 
-		if (context.state.analysis.css.hash) {
-			properties.unshift(b.init(context.state.analysis.css.hash, b.literal(true)));
-		}
-
 		classes = b.object(properties);
 	}
 
@@ -320,10 +453,9 @@ function build_element_spread_attributes(
 				directive.name,
 				directive.value === true
 					? b.id(directive.name)
-					: build_attribute_value(directive.value, context, true)
+					: build_attribute_value(directive.value, context, transform, true)
 			)
 		);
-
 		styles = b.object(properties);
 	}
 
@@ -331,101 +463,99 @@ function build_element_spread_attributes(
 		flags |= ELEMENT_IS_NAMESPACED | ELEMENT_PRESERVE_ATTRIBUTE_CASE;
 	} else if (is_custom_element_node(element)) {
 		flags |= ELEMENT_PRESERVE_ATTRIBUTE_CASE;
+	} else if (element.type === 'RegularElement' && element.name === 'input') {
+		flags |= ELEMENT_IS_INPUT;
 	}
 
-	const object = b.object(
-		attributes.map((attribute) => {
-			if (attribute.type === 'Attribute') {
-				const name = get_attribute_name(element, attribute);
-				const value = build_attribute_value(
-					attribute.value,
-					context,
-					WHITESPACE_INSENSITIVE_ATTRIBUTES.includes(name)
-				);
-				return b.prop('init', b.key(name), value);
-			}
-
-			return b.spread(/** @type {Expression} */ (context.visit(attribute)));
-		})
-	);
+	const object = build_spread_object(element, attributes, context, transform);
+	const css_hash =
+		element.metadata.scoped && context.state.analysis.css.hash
+			? b.literal(context.state.analysis.css.hash)
+			: undefined;
 
-	const args = [object, classes, styles, flags ? b.literal(flags) : undefined];
-	context.state.template.push(b.call('$.spread_attributes', ...args));
+	return [object, css_hash, classes, styles, flags ? b.literal(flags) : undefined];
 }
 
 /**
  *
  * @param {AST.ClassDirective[]} class_directives
- * @param {AST.Attribute | null} class_attribute
- * @returns
+ * @param {Expression} expression
+ * @param {ComponentContext} context
+ * @param {string | null} hash
+ * @param {(expression: Expression, metadata: ExpressionMetadata) => Expression} transform
  */
-function build_class_directives(class_directives, class_attribute) {
-	const expressions = class_directives.map((directive) =>
-		b.conditional(directive.expression, b.literal(directive.name), b.literal(''))
-	);
-
-	if (class_attribute === null) {
-		class_attribute = create_attribute('class', -1, -1, []);
+function build_attr_class(class_directives, expression, context, hash, transform) {
+	/** @type {ObjectExpression | undefined} */
+	let directives;
+
+	if (class_directives.length) {
+		directives = b.object(
+			class_directives.map((directive) =>
+				b.prop(
+					'init',
+					b.literal(directive.name),
+					transform(
+						/** @type {Expression} */ (context.visit(directive.expression, context.state)),
+						directive.metadata.expression
+					)
+				)
+			)
+		);
 	}
 
-	const chunks = get_attribute_chunks(class_attribute.value);
-	const last = chunks.at(-1);
-
-	if (last?.type === 'Text') {
-		last.data += ' ';
-		last.raw += ' ';
-	} else if (last) {
-		chunks.push({
-			type: 'Text',
-			start: -1,
-			end: -1,
-			data: ' ',
-			raw: ' '
-		});
-	}
+	let css_hash;
 
-	chunks.push({
-		type: 'ExpressionTag',
-		start: -1,
-		end: -1,
-		expression: b.call(
-			b.member(b.call(b.member(b.array(expressions), 'filter'), b.id('Boolean')), b.id('join')),
-			b.literal(' ')
-		),
-		metadata: {
-			expression: create_expression_metadata()
+	if (hash) {
+		if (expression.type === 'Literal' && typeof expression.value === 'string') {
+			expression.value = (expression.value + ' ' + hash).trim();
+		} else {
+			css_hash = b.literal(hash);
 		}
-	});
+	}
 
-	class_attribute.value = chunks;
-	return class_attribute;
+	return b.call('$.attr_class', expression, css_hash, directives);
 }
 
 /**
+ *
  * @param {AST.StyleDirective[]} style_directives
- * @param {AST.Attribute | null} style_attribute
- * @param {ComponentContext} context
+ * @param {Expression} expression
+ * @param {ComponentContext} context,
+ * @param {(expression: Expression, metadata: ExpressionMetadata) => Expression} transform
  */
-function build_style_directives(style_directives, style_attribute, context) {
-	const styles = style_directives.map((directive) => {
-		let value =
-			directive.value === true
-				? b.id(directive.name)
-				: build_attribute_value(directive.value, context, true);
-		if (directive.modifiers.includes('important')) {
-			value = b.binary('+', value, b.literal(' !important'));
+function build_attr_style(style_directives, expression, context, transform) {
+	/** @type {ArrayExpression | ObjectExpression | undefined} */
+	let directives;
+
+	if (style_directives.length) {
+		let normal_properties = [];
+		let important_properties = [];
+
+		for (const directive of style_directives) {
+			const expression =
+				directive.value === true
+					? b.id(directive.name)
+					: build_attribute_value(directive.value, context, transform, true);
+
+			let name = directive.name;
+			if (name[0] !== '-' || name[1] !== '-') {
+				name = name.toLowerCase();
+			}
+
+			const property = b.init(name, expression);
+			if (directive.modifiers.includes('important')) {
+				important_properties.push(property);
+			} else {
+				normal_properties.push(property);
+			}
 		}
-		return b.init(directive.name, value);
-	});
-
-	const arg =
-		style_attribute === null
-			? b.object(styles)
-			: b.call(
-					'$.merge_styles',
-					build_attribute_value(style_attribute.value, context, true),
-					b.object(styles)
-				);
 
-	context.state.template.push(b.call('$.add_styles', arg));
+		if (important_properties.length) {
+			directives = b.array([b.object(normal_properties), b.object(important_properties)]);
+		} else {
+			directives = b.object(normal_properties);
+		}
+	}
+
+	return b.call('$.attr_style', expression, directives);
 }
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 2c6aa2f316..3da6fcf321 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
@@ -1,4 +1,4 @@
-/** @import { AssignmentOperator, Expression, Identifier, Node, Statement, TemplateElement } from 'estree' */
+/** @import { Expression, Identifier, Node, Statement, BlockStatement, ArrayExpression } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext, ServerTransformState } from '../../types.js' */
 
@@ -6,15 +6,21 @@ import { escape_html } from '../../../../../../escaping.js';
 import {
 	BLOCK_CLOSE,
 	BLOCK_OPEN,
+	BLOCK_OPEN_ELSE,
 	EMPTY_COMMENT
 } from '../../../../../../internal/server/hydration.js';
-import * as b from '../../../../../utils/builders.js';
+import * as b from '#compiler/builders';
 import { sanitize_template_string } from '../../../../../utils/sanitize_template_string.js';
 import { regex_whitespaces_strict } from '../../../../patterns.js';
+import { has_await_expression, save } from '../../../../../utils/ast.js';
+import { ExpressionMetadata } from '../../../../nodes.js';
 
 /** Opens an if/each block, so that we can remove nodes in the case of a mismatch */
 export const block_open = b.literal(BLOCK_OPEN);
 
+/** Opens an if/each block, so that we can remove nodes in the case of a mismatch */
+export const block_open_else = b.literal(BLOCK_OPEN_ELSE);
+
 /** Closes an if/each block, so that we can remove nodes in the case of a mismatch. Also serves as an anchor for these blocks */
 export const block_close = b.literal(BLOCK_CLOSE);
 
@@ -32,6 +38,10 @@ export function process_children(nodes, { visit, state }) {
 	let sequence = [];
 
 	function flush() {
+		if (sequence.length === 0) {
+			return;
+		}
+
 		let quasi = b.quasi('', false);
 		const quasis = [quasi];
 
@@ -44,15 +54,17 @@ export function process_children(nodes, { visit, state }) {
 			if (node.type === 'Text' || node.type === 'Comment') {
 				quasi.value.cooked +=
 					node.type === 'Comment' ? `<!--${node.data}-->` : escape_html(node.data);
-			} else if (node.type === 'ExpressionTag' && node.expression.type === 'Literal') {
-				if (node.expression.value != null) {
-					quasi.value.cooked += escape_html(node.expression.value + '');
-				}
 			} else {
-				expressions.push(b.call('$.escape', /** @type {Expression} */ (visit(node.expression))));
+				const evaluated = state.scope.evaluate(node.expression);
 
-				quasi = b.quasi('', i + 1 === sequence.length);
-				quasis.push(quasi);
+				if (evaluated.is_known) {
+					quasi.value.cooked += escape_html((evaluated.value ?? '') + '');
+				} else {
+					expressions.push(b.call('$.escape', /** @type {Expression} */ (visit(node.expression))));
+
+					quasi = b.quasi('', i + 1 === sequence.length);
+					quasis.push(quasi);
+				}
 			}
 		}
 
@@ -61,26 +73,36 @@ export function process_children(nodes, { visit, state }) {
 		}
 
 		state.template.push(b.template(quasis, expressions));
+		sequence = [];
 	}
 
-	for (let i = 0; i < nodes.length; i += 1) {
-		const node = nodes[i];
+	for (const node of nodes) {
+		if (node.type === 'ExpressionTag' && node.metadata.expression.is_async()) {
+			flush();
 
-		if (node.type === 'Text' || node.type === 'Comment' || node.type === 'ExpressionTag') {
-			sequence.push(node);
-		} else {
-			if (sequence.length > 0) {
-				flush();
-				sequence = [];
+			const expression = /** @type {Expression} */ (visit(node.expression));
+
+			let call = b.call(
+				'$$renderer.push',
+				b.thunk(b.call('$.escape', expression), node.metadata.expression.has_await)
+			);
+
+			const blockers = node.metadata.expression.blockers();
+
+			if (blockers.elements.length > 0) {
+				call = b.call('$$renderer.async', blockers, b.arrow([b.id('$$renderer')], call));
 			}
 
+			state.template.push(b.stmt(call));
+		} else if (node.type === 'Text' || node.type === 'Comment' || node.type === 'ExpressionTag') {
+			sequence.push(node);
+		} else {
+			flush();
 			visit(node, { ...state });
 		}
 	}
 
-	if (sequence.length > 0) {
-		flush();
-	}
+	flush();
 }
 
 /**
@@ -93,11 +115,9 @@ function is_statement(node) {
 
 /**
  * @param {Array<Statement | Expression>} template
- * @param {Identifier} out
- * @param {AssignmentOperator} operator
  * @returns {Statement[]}
  */
-export function build_template(template, out = b.id('$$payload.out'), operator = '+=') {
+export function build_template(template) {
 	/** @type {string[]} */
 	let strings = [];
 
@@ -110,9 +130,8 @@ export function build_template(template, out = b.id('$$payload.out'), operator =
 	const flush = () => {
 		statements.push(
 			b.stmt(
-				b.assignment(
-					operator,
-					out,
+				b.call(
+					b.id('$$renderer.push'),
 					b.template(
 						strings.map((cooked, i) => b.quasi(cooked, i === strings.length - 1)),
 						expressions
@@ -120,6 +139,7 @@ export function build_template(template, out = b.id('$$payload.out'), operator =
 				)
 			)
 		);
+
 		strings = [];
 		expressions = [];
 	};
@@ -162,6 +182,7 @@ export function build_template(template, out = b.id('$$payload.out'), operator =
  *
  * @param {AST.Attribute['value']} value
  * @param {ComponentContext} context
+ * @param {(expression: Expression, metadata: ExpressionMetadata) => Expression} transform
  * @param {boolean} trim_whitespace
  * @param {boolean} is_component
  * @returns {Expression}
@@ -169,6 +190,7 @@ export function build_template(template, out = b.id('$$payload.out'), operator =
 export function build_attribute_value(
 	value,
 	context,
+	transform,
 	trim_whitespace = false,
 	is_component = false
 ) {
@@ -187,7 +209,10 @@ export function build_attribute_value(
 			return b.literal(is_component ? data : escape_html(data, true));
 		}
 
-		return /** @type {Expression} */ (context.visit(chunk.expression));
+		return transform(
+			/** @type {Expression} */ (context.visit(chunk.expression)),
+			chunk.metadata.expression
+		);
 	}
 
 	let quasi = b.quasi('', false);
@@ -200,20 +225,39 @@ export function build_attribute_value(
 		const node = value[i];
 
 		if (node.type === 'Text') {
-			quasi.value.raw += trim_whitespace
+			quasi.value.cooked += trim_whitespace
 				? node.data.replace(regex_whitespaces_strict, ' ')
 				: node.data;
 		} else {
-			expressions.push(
-				b.call('$.stringify', /** @type {Expression} */ (context.visit(node.expression)))
-			);
+			const evaluated = context.state.scope.evaluate(node.expression);
 
-			quasi = b.quasi('', i + 1 === value.length);
-			quasis.push(quasi);
+			if (evaluated.is_known) {
+				quasi.value.cooked += (evaluated.value ?? '') + '';
+			} else {
+				const expression = transform(
+					/** @type {Expression} */ (context.visit(node.expression)),
+					node.metadata.expression
+				);
+
+				expressions.push(
+					evaluated.is_string && evaluated.is_defined
+						? expression
+						: b.call('$.stringify', expression)
+				);
+
+				quasi = b.quasi('', i + 1 === value.length);
+				quasis.push(quasi);
+			}
 		}
 	}
 
-	return b.template(quasis, expressions);
+	for (const quasi of quasis) {
+		quasi.value.raw = sanitize_template_string(/** @type {string} */ (quasi.value.cooked));
+	}
+
+	return expressions.length > 0
+		? b.template(quasis, expressions)
+		: b.literal(/** @type {string} */ (quasi.value.cooked));
 }
 
 /**
@@ -239,5 +283,135 @@ export function build_getter(node, state) {
 		);
 	}
 
+	if (binding.kind === 'derived') {
+		return (binding.declaration_kind === 'var' ? b.maybe_call : b.call)(binding.node);
+	}
+
 	return node;
 }
+
+/**
+ * @param {Statement[]} statements
+ * @param {ArrayExpression} blockers
+ * @param {boolean} has_await
+ */
+export function create_child_block(statements, blockers, has_await) {
+	if (blockers.elements.length === 0 && !has_await) {
+		return statements;
+	}
+
+	const fn = b.arrow([b.id('$$renderer')], b.block(statements), has_await);
+
+	return blockers.elements.length > 0
+		? [b.stmt(b.call('$$renderer.async_block', blockers, fn))]
+		: [b.stmt(b.call('$$renderer.child_block', fn))];
+}
+
+/**
+ * A utility for optimising promises in templates. Without it code like
+ * `<Component foo={await fetch()} bar={await other()} />` would be transformed
+ * into two blocking promises, with it it's using `Promise.all` to await them.
+ * It also keeps track of blocking promises, i.e. those that need to be resolved before continuing.
+ */
+export class PromiseOptimiser {
+	/** @type {Expression[]} */
+	expressions = [];
+
+	has_await = false;
+
+	/** @type {Set<Expression>} */
+	#blockers = new Set();
+
+	/**
+	 * @param {Expression} expression
+	 * @param {ExpressionMetadata} metadata
+	 */
+	transform = (expression, metadata) => {
+		this.check_blockers(metadata);
+
+		if (metadata.has_await) {
+			this.has_await = true;
+
+			const length = this.expressions.push(expression);
+			return b.id(`$$${length - 1}`);
+		}
+
+		return expression;
+	};
+
+	/**
+	 * @param {ExpressionMetadata} metadata
+	 */
+	check_blockers(metadata) {
+		for (const binding of metadata.references) {
+			if (binding.blocker) {
+				this.#blockers.add(binding.blocker);
+			}
+		}
+	}
+
+	#apply() {
+		if (this.expressions.length === 0) {
+			return b.empty;
+		}
+
+		if (this.expressions.length === 1) {
+			return b.const('$$0', this.expressions[0]);
+		}
+
+		const promises = b.array(
+			this.expressions.map((expression) => {
+				return expression.type === 'AwaitExpression' && !has_await_expression(expression.argument)
+					? expression.argument
+					: b.call(b.thunk(expression, true));
+			})
+		);
+
+		return b.const(
+			b.array_pattern(this.expressions.map((_, i) => b.id(`$$${i}`))),
+			save(b.call('Promise.all', promises))
+		);
+	}
+
+	blockers() {
+		return b.array([...this.#blockers]);
+	}
+
+	is_async() {
+		return this.expressions.length > 0 || this.#blockers.size > 0;
+	}
+
+	/**
+	 * @param {Statement[]} statements
+	 * @returns {Statement[]}
+	 */
+	render(statements) {
+		if (!this.is_async()) {
+			return statements;
+		}
+
+		const fn = b.arrow(
+			[b.id('$$renderer')],
+			b.block([this.#apply(), ...statements]),
+			this.has_await
+		);
+
+		const blockers = this.blockers();
+
+		return blockers.elements.length > 0
+			? [b.stmt(b.call('$$renderer.async', blockers, fn))]
+			: [b.stmt(b.call('$$renderer.child', fn))];
+	}
+
+	/**
+	 * @param {Statement[]} statements
+	 * @returns {Statement[]}
+	 */
+	render_block(statements) {
+		if (!this.is_async()) {
+			return statements;
+		}
+
+		return create_child_block([this.#apply(), ...statements], this.blockers(), this.has_await);
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/shared/assignments.js b/packages/svelte/src/compiler/phases/3-transform/shared/assignments.js
index e8e02b8f58..4678d88ec5 100644
--- a/packages/svelte/src/compiler/phases/3-transform/shared/assignments.js
+++ b/packages/svelte/src/compiler/phases/3-transform/shared/assignments.js
@@ -1,8 +1,8 @@
-/** @import { AssignmentExpression, AssignmentOperator, Expression, Node, Pattern } from 'estree' */
+/** @import { AssignmentExpression, AssignmentOperator, Expression, Node, Pattern, Statement } from 'estree' */
 /** @import { Context as ClientContext } from '../client/types.js' */
 /** @import { Context as ServerContext } from '../server/types.js' */
 import { extract_paths, is_expression_async } from '../../../utils/ast.js';
-import * as b from '../../../utils/builders.js';
+import * as b from '#compiler/builders';
 
 /**
  * @template {ClientContext | ServerContext} Context
@@ -23,8 +23,14 @@ export function visit_assignment_expression(node, context, build_assignment) {
 
 		let changed = false;
 
-		const assignments = extract_paths(node.left).map((path) => {
-			const value = path.expression?.(rhs);
+		const { inserts, paths } = extract_paths(node.left, rhs);
+
+		for (const { id } of inserts) {
+			id.name = context.state.scope.generate('$$array');
+		}
+
+		const assignments = paths.map((path) => {
+			const value = path.expression;
 
 			let assignment = build_assignment('=', path.node, value, context);
 			if (assignment !== null) changed = true;
@@ -45,22 +51,34 @@ export function visit_assignment_expression(node, context, build_assignment) {
 		}
 
 		const is_standalone = /** @type {Node} */ (context.path.at(-1)).type.endsWith('Statement');
-		const sequence = b.sequence(assignments);
 
-		if (!is_standalone) {
-			// this is part of an expression, we need the sequence to end with the value
-			sequence.expressions.push(rhs);
-		}
+		if (inserts.length > 0 || should_cache) {
+			/** @type {Statement[]} */
+			const statements = [
+				...inserts.map(({ id, value }) => b.var(id, value)),
+				...assignments.map(b.stmt)
+			];
 
-		if (should_cache) {
-			// the right hand side is a complex expression, wrap in an IIFE to cache it
-			const iife = b.arrow([rhs], sequence);
+			if (!is_standalone) {
+				// this is part of an expression, we need the sequence to end with the value
+				statements.push(b.return(rhs));
+			}
 
-			const iife_is_async =
+			const async =
 				is_expression_async(value) ||
 				assignments.some((assignment) => is_expression_async(assignment));
 
-			return iife_is_async ? b.await(b.call(b.async(iife), value)) : b.call(iife, value);
+			const iife = b.arrow([rhs], b.block(statements), async);
+			const call = b.call(iife, value);
+
+			return async ? b.await(call) : call;
+		}
+
+		const sequence = b.sequence(assignments);
+
+		if (!is_standalone) {
+			// this is part of an expression, we need the sequence to end with the value
+			sequence.expressions.push(rhs);
 		}
 
 		return sequence;
diff --git a/packages/svelte/src/compiler/phases/3-transform/shared/transform-async.js b/packages/svelte/src/compiler/phases/3-transform/shared/transform-async.js
new file mode 100644
index 0000000000..ac90f1db4b
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/shared/transform-async.js
@@ -0,0 +1,135 @@
+/** @import * as ESTree from 'estree' */
+/** @import { ComponentAnalysis } from '../../types' */
+import * as b from '#compiler/builders';
+
+/**
+ * Transforms the body of the instance script in such a way that await expressions are made non-blocking as much as possible.
+ *
+ * Example Transformation:
+ * ```js
+ * let x = 1;
+ * let data = await fetch('/api');
+ * let y = data.value;
+ * ```
+ * becomes:
+ * ```js
+ * let x = 1;
+ * var data, y;
+ * var $$promises = $.run([
+ *   () => data = await fetch('/api'),
+ *   () => y = data.value
+ * ]);
+ * ```
+ * where `$$promises` is an array of promises that are resolved in the order they are declared,
+ * and which expressions in the template can await on like `await $$promises[0]` which means they
+ * wouldn't have to wait for e.g. `$$promises[1]` to resolve.
+ *
+ * @param {ComponentAnalysis['instance_body']} instance_body
+ * @param {ESTree.Expression} runner
+ * @param {(node: ESTree.Node) => ESTree.Node} transform
+ * @returns {Array<ESTree.Statement | ESTree.VariableDeclaration>}
+ */
+export function transform_body(instance_body, runner, transform) {
+	// Any sync statements before the first await expression
+	const statements = instance_body.sync.map(
+		(node) => /** @type {ESTree.Statement | ESTree.VariableDeclaration} */ (transform(node))
+	);
+
+	// Declarations for the await expressions (they will assign to them; need to be hoisted to be available in whole instance scope)
+	if (instance_body.declarations.length > 0) {
+		statements.push(
+			b.declaration(
+				'var',
+				instance_body.declarations.map((id) => b.declarator(id))
+			)
+		);
+	}
+
+	// Thunks for the await expressions
+	if (instance_body.async.length > 0) {
+		const thunks = instance_body.async.map((entry) => {
+			/** @type {ESTree.Statement[]} */
+			const entry_statements = [];
+
+			for (const node of entry.nodes) {
+				entry_statements.push(...transform_async_node(node, transform));
+			}
+
+			if (entry_statements.length === 0) {
+				// Keep indices stable for async sequencing while avoiding array holes in run([...]).
+				return b.thunk(b.void0, false);
+			}
+
+			if (entry_statements.length === 1 && entry_statements[0].type === 'ExpressionStatement') {
+				return b.thunk(entry_statements[0].expression, entry.has_await);
+			}
+
+			return b.thunk(b.block(entry_statements), entry.has_await);
+		});
+
+		// TODO get the `$$promises` ID from scope
+		statements.push(b.var('$$promises', b.call(runner, b.array(thunks))));
+	}
+
+	return statements;
+}
+
+/**
+ * @param {ESTree.Statement | ESTree.VariableDeclarator} node
+ * @param {(node: ESTree.Node) => ESTree.Node} transform
+ * @returns {ESTree.Statement[]}
+ */
+function transform_async_node(node, transform) {
+	if (node.type === 'VariableDeclarator') {
+		const visited = /** @type {ESTree.VariableDeclaration | ESTree.EmptyStatement} */ (
+			transform(b.var(node.id, node.init))
+		);
+
+		return visited.type === 'VariableDeclaration'
+			? visited.declarations.map((node) => {
+					if (
+						node.id.type === 'Identifier' &&
+						(node.id.name.startsWith('$$d') || node.id.name.startsWith('$$array'))
+					) {
+						// This intermediate declaration is created in VariableDeclaration.js;
+						// subsequent statements may depend on it.
+						return b.var(node.id, node.init);
+					}
+
+					return b.stmt(b.assignment('=', node.id, node.init ?? b.void0));
+				})
+			: [];
+	}
+
+	if (node.type === 'ClassDeclaration') {
+		return [
+			b.stmt(
+				b.assignment(
+					'=',
+					node.id,
+					/** @type {ESTree.ClassExpression} */ ({ ...node, type: 'ClassExpression' })
+				)
+			)
+		];
+	}
+
+	if (node.type === 'ExpressionStatement') {
+		// The expression may be a $inspect call, which will be transformed into an empty statement.
+		const expression = /** @type {ESTree.Expression | ESTree.EmptyStatement} */ (
+			transform(node.expression)
+		);
+
+		if (expression.type === 'EmptyStatement') {
+			return [];
+		}
+
+		if (expression.type === 'AwaitExpression') {
+			return [b.stmt(expression)];
+		}
+
+		return [b.stmt(b.unary('void', expression))];
+	}
+
+	const statement = /** @type {ESTree.Statement | ESTree.EmptyStatement} */ (transform(node));
+	return statement.type === 'EmptyStatement' ? [] : [statement];
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/types.d.ts b/packages/svelte/src/compiler/phases/3-transform/types.d.ts
index 5d860207dd..8fc03d2d9a 100644
--- a/packages/svelte/src/compiler/phases/3-transform/types.d.ts
+++ b/packages/svelte/src/compiler/phases/3-transform/types.d.ts
@@ -1,5 +1,5 @@
 import type { Scope } from '../scope.js';
-import type { AST, ValidatedModuleCompileOptions } from '#compiler';
+import type { AST, StateField, ValidatedModuleCompileOptions } from '#compiler';
 import type { Analysis } from '../types.js';
 
 export interface TransformState {
@@ -7,4 +7,9 @@ export interface TransformState {
 	readonly options: ValidatedModuleCompileOptions;
 	readonly scope: Scope;
 	readonly scopes: Map<AST.SvelteNode, Scope>;
+
+	/** `true` if we're transforming the contents of `<script>` */
+	readonly is_instance: boolean;
+
+	readonly state_fields: Map<string, StateField>;
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/utils.js b/packages/svelte/src/compiler/phases/3-transform/utils.js
index b53a3110bd..c7fce61ff9 100644
--- a/packages/svelte/src/compiler/phases/3-transform/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/utils.js
@@ -1,35 +1,17 @@
-/** @import { Context } from 'zimmerframe' */
 /** @import { TransformState } from './types.js' */
 /** @import { AST, Binding, Namespace, ValidatedCompileOptions } from '#compiler' */
-/** @import { Node, Expression, CallExpression } from 'estree' */
+/** @import { Node, Expression, CallExpression, MemberExpression } from 'estree' */
 import {
 	regex_ends_with_whitespaces,
 	regex_not_whitespace,
 	regex_starts_with_whitespaces
 } from '../patterns.js';
-import * as b from '../../utils/builders.js';
 import * as e from '../../errors.js';
 import { walk } from 'zimmerframe';
 import { extract_identifiers } from '../../utils/ast.js';
 import check_graph_for_cycles from '../2-analyze/utils/check_graph_for_cycles.js';
 import is_reference from 'is-reference';
 import { set_scope } from '../scope.js';
-import { dev } from '../../state.js';
-
-/**
- * @param {Node} node
- * @returns {boolean}
- */
-export function is_hoisted_function(node) {
-	if (
-		node.type === 'ArrowFunctionExpression' ||
-		node.type === 'FunctionExpression' ||
-		node.type === 'FunctionDeclaration'
-	) {
-		return node.metadata?.hoisted === true;
-	}
-	return false;
-}
 
 /**
  * Match Svelte 4 behaviour by sorting ConstTag nodes in topological order
@@ -170,6 +152,7 @@ export function clean_nodes(
 
 		if (
 			node.type === 'ConstTag' ||
+			node.type === 'DeclarationTag' ||
 			node.type === 'DebugTag' ||
 			node.type === 'SvelteBody' ||
 			node.type === 'SvelteWindow' ||
@@ -270,6 +253,15 @@ export function clean_nodes(
 
 	var first = trimmed[0];
 
+	// if first text node inside a <pre> is a single newline, discard it, because otherwise
+	// the browser will do it for us which could break hydration
+	if (parent.type === 'RegularElement' && parent.name === 'pre' && first?.type === 'Text') {
+		if (first.data === '\n' || first.data === '\r\n') {
+			trimmed.shift();
+			first = trimmed[0];
+		}
+	}
+
 	// Special case: Add a comment if this is a lone script tag. This ensures that our run_scripts logic in template.js
 	// will always be able to call node.replaceWith() on the script tag in order to make it run. If we don't add this
 	// and would still call node.replaceWith() on the script tag, it would be a no-op because the script tag has no parent.
@@ -314,7 +306,7 @@ export function clean_nodes(
 }
 
 /**
- * Infers the namespace for the children of a node that should be used when creating the `$.template(...)`.
+ * Infers the namespace for the children of a node that should be used when creating the fragment
  * @param {Namespace} namespace
  * @param {AST.SvelteNode} parent
  * @param {AST.SvelteNode[]} nodes
@@ -442,30 +434,19 @@ export function determine_namespace_for_children(node, namespace) {
 }
 
 /**
- * @template {TransformState} T
+ * @param {'$inspect' | '$inspect().with'} rune
  * @param {CallExpression} node
- * @param {Context<any, T>} context
+ * @param {(node: AST.SvelteNode) => AST.SvelteNode} visit
  */
-export function transform_inspect_rune(node, context) {
-	const { state, visit } = context;
-	const as_fn = state.options.generate === 'client';
-
-	if (!dev) return b.empty;
-
-	if (node.callee.type === 'MemberExpression') {
-		const raw_inspect_args = /** @type {CallExpression} */ (node.callee.object).arguments;
-		const inspect_args =
-			/** @type {Array<Expression>} */
-			(raw_inspect_args.map((arg) => visit(arg)));
-		const with_arg = /** @type {Expression} */ (visit(node.arguments[0]));
-
-		return b.call(
-			'$.inspect',
-			as_fn ? b.thunk(b.array(inspect_args)) : b.array(inspect_args),
-			with_arg
-		);
-	} else {
-		const arg = node.arguments.map((arg) => /** @type {Expression} */ (visit(arg)));
-		return b.call('$.inspect', as_fn ? b.thunk(b.array(arg)) : b.array(arg));
-	}
+export function get_inspect_args(rune, node, visit) {
+	const call =
+		rune === '$inspect'
+			? node
+			: /** @type {CallExpression} */ (/** @type {MemberExpression} */ (node.callee).object);
+
+	return {
+		args: call.arguments.map((arg) => /** @type {Expression} */ (visit(arg))),
+		inspector:
+			rune === '$inspect' ? 'console.log' : /** @type {Expression} */ (visit(node.arguments[0]))
+	};
 }
diff --git a/packages/svelte/src/compiler/phases/nodes.js b/packages/svelte/src/compiler/phases/nodes.js
index 7aa9fecd3a..da7e73015b 100644
--- a/packages/svelte/src/compiler/phases/nodes.js
+++ b/packages/svelte/src/compiler/phases/nodes.js
@@ -1,4 +1,7 @@
-/** @import { AST, ExpressionMetadata } from '#compiler' */
+/** @import { Expression, PrivateIdentifier, SourceLocation } from 'estree' */
+/** @import { AST, Binding } from '#compiler' */
+import * as b from '#compiler/builders';
+
 /**
  * All nodes that can appear elsewhere than the top level, have attributes and can contain children
  */
@@ -21,42 +24,236 @@ export function is_element_node(node) {
 	return element_nodes.includes(node.type);
 }
 
+/**
+ * Returns true for all component-like nodes
+ * @param {AST.SvelteNode} node
+ * @returns {node is AST.Component |  AST.SvelteComponent | AST.SvelteSelf}
+ */
+export function is_component_node(node) {
+	return ['Component', 'SvelteComponent', 'SvelteSelf'].includes(node.type);
+}
+
 /**
  * @param {AST.RegularElement | AST.SvelteElement} node
- * @returns {node is AST.RegularElement}
+ * @returns {boolean}
  */
 export function is_custom_element_node(node) {
-	return node.type === 'RegularElement' && node.name.includes('-');
+	return (
+		node.type === 'RegularElement' &&
+		(node.name.includes('-') ||
+			node.attributes.some((attr) => attr.type === 'Attribute' && attr.name === 'is'))
+	);
 }
 
 /**
  * @param {string} name
+ * @param {SourceLocation | null} name_loc
  * @param {number} start
  * @param {number} end
  * @param {AST.Attribute['value']} value
  * @returns {AST.Attribute}
  */
-export function create_attribute(name, start, end, value) {
+export function create_attribute(name, name_loc, start, end, value) {
 	return {
 		type: 'Attribute',
 		start,
 		end,
 		name,
+		name_loc,
 		value,
 		metadata: {
-			expression: create_expression_metadata(),
-			delegated: null
+			delegated: false,
+			needs_clsx: false
 		}
 	};
 }
+export class ExpressionMetadata {
+	/** True if the expression references state directly, or _might_ (via member/call expressions) */
+	has_state = false;
+
+	/** True if the expression involves a call expression (often, it will need to be wrapped in a derived) */
+	has_call = false;
+
+	/** True if the expression contains `await` */
+	has_await = false;
+
+	/** True if the expression includes a member expression */
+	has_member_expression = false;
+
+	/** True if the expression includes an assignment or an update */
+	has_assignment = false;
+
+	/**
+	 * All the bindings that are referenced eagerly (not inside functions) in this expression
+	 * @type {Set<Binding>}
+	 */
+	dependencies = new Set();
+
+	/**
+	 * True if the expression references state directly, or _might_ (via member/call expressions)
+	 * @type {Set<Binding>}
+	 */
+	references = new Set();
+
+	/** @type {null | Set<Expression>} */
+	#blockers = null;
+
+	#get_blockers() {
+		if (!this.#blockers) {
+			this.#blockers = new Set();
+
+			for (const r of this.references) {
+				if (r.blocker) this.#blockers.add(r.blocker);
+			}
+		}
+
+		return this.#blockers;
+	}
+
+	blockers() {
+		return b.array([...this.#get_blockers()]);
+	}
+
+	has_blockers() {
+		return this.#get_blockers().size > 0;
+	}
+
+	/**
+	 * @param {ExpressionMetadata} other
+	 */
+	has_more_blockers_than(other) {
+		for (const blocker of this.#get_blockers()) {
+			if (!other.#get_blockers().has(blocker)) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	is_async() {
+		return this.has_await || this.#get_blockers().size > 0;
+	}
+
+	/**
+	 * @param {ExpressionMetadata} source
+	 */
+	merge(source) {
+		this.has_state ||= source.has_state;
+		this.has_call ||= source.has_call;
+		this.has_await ||= source.has_await;
+		this.has_member_expression ||= source.has_member_expression;
+		this.has_assignment ||= source.has_assignment;
+		this.#blockers = null; // so that blockers are recalculated
+
+		for (const r of source.references) this.references.add(r);
+		for (const b of source.dependencies) this.dependencies.add(b);
+	}
+}
 
 /**
- * @returns {ExpressionMetadata}
+ * @param {Expression | PrivateIdentifier} node
  */
-export function create_expression_metadata() {
-	return {
-		dependencies: new Set(),
-		has_state: false,
-		has_call: false
-	};
+export function get_name(node) {
+	if (node.type === 'Literal') return String(node.value);
+	if (node.type === 'PrivateIdentifier') return '#' + node.name;
+	if (node.type === 'Identifier') return node.name;
+
+	return null;
+}
+
+/**
+ * Checks if an <option>, <optgroup>, or <select> element has rich content that requires special hydration handling.
+ * Rich content is anything beyond simple text, expressions, and comments for <option>,
+ * anything beyond <option> children for <optgroup>,
+ * or anything beyond <option>, <optgroup>, and empty text for <select>.
+ * Control flow blocks are recursively checked - they only count as rich content if they contain rich content.
+ * @param {AST.RegularElement} node
+ * @returns {boolean}
+ */
+export function is_customizable_select_element(node) {
+	if (node.name === 'select' || node.name === 'optgroup' || node.name === 'option') {
+		for (const child of find_descendants(node.fragment)) {
+			if (child.type === 'RegularElement') {
+				if (node.name === 'select' && child.name !== 'option' && child.name !== 'optgroup') {
+					return true;
+				}
+
+				if (node.name === 'optgroup' && child.name !== 'option') {
+					return true;
+				}
+
+				if (node.name === 'option') {
+					return true;
+				}
+			}
+
+			// Text nodes directly in <select> or <optgroup> are rich content
+			else if (child.type === 'Text') {
+				if (node.name === 'select' || node.name === 'optgroup') {
+					return true;
+				}
+			}
+
+			// Any non-RegularElement, non-Text node is rich content
+			else {
+				return true;
+			}
+		}
+	}
+
+	return false;
+}
+
+/**
+ * @param {AST.Fragment | null} fragment
+ * @returns {Iterable<AST.SvelteNode>}
+ */
+function* find_descendants(fragment) {
+	if (fragment === null) return;
+
+	for (const node of fragment.nodes) {
+		switch (node.type) {
+			case 'SnippetBlock':
+			case 'DebugTag':
+			case 'ConstTag':
+			case 'DeclarationTag':
+			case 'Comment':
+			case 'ExpressionTag':
+				break;
+
+			case 'Text':
+				if (node.data.trim() !== '') {
+					yield node;
+				}
+				break;
+
+			case 'IfBlock':
+				yield* find_descendants(node.consequent);
+				yield* find_descendants(node.alternate);
+				break;
+
+			case 'EachBlock':
+				yield* find_descendants(node.body);
+				yield* find_descendants(node.fallback ?? null);
+				break;
+
+			case 'KeyBlock':
+				yield* find_descendants(node.fragment);
+				break;
+
+			case 'AwaitBlock':
+				yield* find_descendants(node.pending);
+				yield* find_descendants(node.then);
+				yield* find_descendants(node.catch);
+				break;
+
+			case 'SvelteBoundary':
+				yield* find_descendants(node.fragment);
+				break;
+
+			default:
+				yield node;
+		}
+	}
 }
diff --git a/packages/svelte/src/compiler/phases/patterns.js b/packages/svelte/src/compiler/phases/patterns.js
index bda299de9e..448be7f949 100644
--- a/packages/svelte/src/compiler/phases/patterns.js
+++ b/packages/svelte/src/compiler/phases/patterns.js
@@ -21,3 +21,7 @@ export const regex_invalid_identifier_chars = /(^[^a-zA-Z_$]|[^a-zA-Z0-9_$])/g;
 export const regex_starts_with_vowel = /^[aeiou]/;
 export const regex_heading_tags = /^h[1-6]$/;
 export const regex_illegal_attribute_character = /(^[0-9-.])|[\^$@%&#?!|()[\]{}^*+~;]/;
+export const regex_bidirectional_control_characters =
+	/[\u202a\u202b\u202c\u202d\u202e\u2066\u2067\u2068\u2069]+/g;
+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 3536dd6a18..e3560753b4 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/packages/svelte/src/compiler/phases/scope.js
@@ -1,10 +1,10 @@
-/** @import { ClassDeclaration, Expression, FunctionDeclaration, Identifier, ImportDeclaration, MemberExpression, Node, Pattern, VariableDeclarator } from 'estree' */
+/** @import { BinaryOperator, ClassDeclaration, Expression, FunctionDeclaration, Identifier, ImportDeclaration, MemberExpression, LogicalOperator, Node, Pattern, UnaryOperator, VariableDeclarator, Super, SimpleLiteral, FunctionExpression, ArrowFunctionExpression } from 'estree' */
 /** @import { Context, Visitor } from 'zimmerframe' */
-/** @import { AST, Binding, DeclarationKind } from '#compiler' */
+/** @import { AST, BindingKind, DeclarationKind } from '#compiler' */
 import is_reference from 'is-reference';
 import { walk } from 'zimmerframe';
-import { create_expression_metadata } from './nodes.js';
-import * as b from '../utils/builders.js';
+import { ExpressionMetadata } from './nodes.js';
+import * as b from '#compiler/builders';
 import * as e from '../errors.js';
 import {
 	extract_identifiers,
@@ -16,6 +16,592 @@ import { is_reserved, is_rune } from '../../utils.js';
 import { determine_slot } from '../utils/slot.js';
 import { validate_identifier_name } from './2-analyze/visitors/shared/utils.js';
 
+const UNKNOWN = Symbol('unknown');
+/** Includes `BigInt` */
+const NUMBER = Symbol('number');
+const STRING = Symbol('string');
+const FUNCTION = Symbol('string');
+
+/** @type {Record<string, [type: typeof NUMBER | typeof  STRING | typeof  UNKNOWN, fn?: Function]>} */
+const globals = {
+	BigInt: [NUMBER],
+	'Math.min': [NUMBER, Math.min],
+	'Math.max': [NUMBER, Math.max],
+	'Math.random': [NUMBER],
+	'Math.floor': [NUMBER, Math.floor],
+	// @ts-ignore
+	'Math.f16round': [NUMBER, Math.f16round],
+	'Math.round': [NUMBER, Math.round],
+	'Math.abs': [NUMBER, Math.abs],
+	'Math.acos': [NUMBER, Math.acos],
+	'Math.asin': [NUMBER, Math.asin],
+	'Math.atan': [NUMBER, Math.atan],
+	'Math.atan2': [NUMBER, Math.atan2],
+	'Math.ceil': [NUMBER, Math.ceil],
+	'Math.cos': [NUMBER, Math.cos],
+	'Math.sin': [NUMBER, Math.sin],
+	'Math.tan': [NUMBER, Math.tan],
+	'Math.exp': [NUMBER, Math.exp],
+	'Math.log': [NUMBER, Math.log],
+	'Math.pow': [NUMBER, Math.pow],
+	'Math.sqrt': [NUMBER, Math.sqrt],
+	'Math.clz32': [NUMBER, Math.clz32],
+	'Math.imul': [NUMBER, Math.imul],
+	'Math.sign': [NUMBER, Math.sign],
+	'Math.log10': [NUMBER, Math.log10],
+	'Math.log2': [NUMBER, Math.log2],
+	'Math.log1p': [NUMBER, Math.log1p],
+	'Math.expm1': [NUMBER, Math.expm1],
+	'Math.cosh': [NUMBER, Math.cosh],
+	'Math.sinh': [NUMBER, Math.sinh],
+	'Math.tanh': [NUMBER, Math.tanh],
+	'Math.acosh': [NUMBER, Math.acosh],
+	'Math.asinh': [NUMBER, Math.asinh],
+	'Math.atanh': [NUMBER, Math.atanh],
+	'Math.trunc': [NUMBER, Math.trunc],
+	'Math.fround': [NUMBER, Math.fround],
+	'Math.cbrt': [NUMBER, Math.cbrt],
+	Number: [NUMBER, Number],
+	'Number.isInteger': [NUMBER, Number.isInteger],
+	'Number.isFinite': [NUMBER, Number.isFinite],
+	'Number.isNaN': [NUMBER, Number.isNaN],
+	'Number.isSafeInteger': [NUMBER, Number.isSafeInteger],
+	'Number.parseFloat': [NUMBER, Number.parseFloat],
+	'Number.parseInt': [NUMBER, Number.parseInt],
+	String: [STRING, String],
+	'String.fromCharCode': [STRING, String.fromCharCode],
+	'String.fromCodePoint': [STRING, String.fromCodePoint]
+};
+
+/** @type {Record<string, any>} */
+const global_constants = {
+	'Math.PI': Math.PI,
+	'Math.E': Math.E,
+	'Math.LN10': Math.LN10,
+	'Math.LN2': Math.LN2,
+	'Math.LOG10E': Math.LOG10E,
+	'Math.LOG2E': Math.LOG2E,
+	'Math.SQRT2': Math.SQRT2,
+	'Math.SQRT1_2': Math.SQRT1_2
+};
+
+export class Binding {
+	/** @type {Scope} */
+	scope;
+
+	/** @type {Identifier} */
+	node;
+
+	/** @type {BindingKind} */
+	kind;
+
+	/** @type {DeclarationKind} */
+	declaration_kind;
+
+	/**
+	 * What the value was initialized with.
+	 * For destructured props such as `let { foo = 'bar' } = $props()` this is `'bar'` and not `$props()`
+	 * @type {null | Expression | FunctionDeclaration | ClassDeclaration | ImportDeclaration | AST.EachBlock | AST.SnippetBlock}
+	 */
+	initial = null;
+
+	/** @type {Array<{ node: Identifier; path: AST.SvelteNode[] }>} */
+	references = [];
+
+	/**
+	 * (Re)assignments of this binding. Includes declarations such as `function x() {}`.
+	 * @type {Array<{ value: Expression; scope: Scope }>}
+	 */
+	assignments = [];
+
+	/**
+	 * For `legacy_reactive`: its reactive dependencies
+	 * @type {Binding[]}
+	 */
+	legacy_dependencies = [];
+
+	/**
+	 * Bindings that should be invalidated when this binding is invalidated
+	 * @type {Set<Binding>}
+	 */
+	legacy_indirect_bindings = new Set();
+
+	/**
+	 * Legacy props: the `class` in `{ export klass as class}`. $props(): The `class` in { class: klass } = $props()
+	 * @type {string | null}
+	 */
+	prop_alias = null;
+
+	/**
+	 * Additional metadata, varies per binding type
+	 * @type {null | { inside_rest?: boolean; is_template_declaration?: boolean; exclude_props?: string[] }}
+	 */
+	metadata = null;
+
+	mutated = false;
+	reassigned = false;
+
+	/**
+	 * Instance-level declarations may follow (or contain) a top-level `await`. In these cases,
+	 * any reads that occur in the template must wait for the corresponding promise to resolve
+	 * otherwise the initial value will not have been assigned.
+	 * It is a member expression of the form `$$blockers[n]`.
+	 * TODO the blocker is set during transform which feels a bit grubby
+	 * @type {MemberExpression | null}
+	 */
+	blocker = null;
+
+	/**
+	 *
+	 * @param {Scope} scope
+	 * @param {Identifier} node
+	 * @param {BindingKind} kind
+	 * @param {DeclarationKind} declaration_kind
+	 * @param {Binding['initial']} initial
+	 */
+	constructor(scope, node, kind, declaration_kind, initial) {
+		this.scope = scope;
+		this.node = node;
+		this.initial = initial;
+		this.kind = kind;
+		this.declaration_kind = declaration_kind;
+
+		if (initial) {
+			this.assignments.push({ value: /** @type {Expression} */ (initial), scope });
+		}
+	}
+
+	get updated() {
+		return this.mutated || this.reassigned;
+	}
+
+	/**
+	 * @returns {this is Binding & { initial: ArrowFunctionExpression | FunctionDeclaration | FunctionExpression }}
+	 */
+	is_function() {
+		if (this.updated) {
+			// even if it's reassigned to another function,
+			// we can't use it directly as e.g. an event handler
+			return false;
+		}
+
+		const type = this.initial?.type;
+
+		return (
+			type === 'ArrowFunctionExpression' ||
+			type === 'FunctionExpression' ||
+			type === 'FunctionDeclaration'
+		);
+	}
+}
+
+class Evaluation {
+	/** @type {Set<any>} */
+	values;
+
+	/**
+	 * True if there is exactly one possible value
+	 * @readonly
+	 * @type {boolean}
+	 */
+	is_known = true;
+
+	/**
+	 * True if the possible values contains `UNKNOWN`
+	 * @readonly
+	 * @type {boolean}
+	 */
+	has_unknown = false;
+
+	/**
+	 * True if the value is known to not be null/undefined
+	 * @readonly
+	 * @type {boolean}
+	 */
+	is_defined = true;
+
+	/**
+	 * True if the value is known to be a string
+	 * @readonly
+	 * @type {boolean}
+	 */
+	is_string = true;
+
+	/**
+	 * True if the value is known to be a number
+	 * @readonly
+	 * @type {boolean}
+	 */
+	is_number = true;
+
+	/**
+	 * True if the value is known to be a primitive
+	 * @readonly
+	 * @type {boolean}
+	 */
+	is_primitive = true;
+
+	/**
+	 * True if the value is known to be a function
+	 * @readonly
+	 * @type {boolean}
+	 */
+	is_function = true;
+
+	/**
+	 * @readonly
+	 * @type {any}
+	 */
+	value = undefined;
+
+	/**
+	 *
+	 * @param {Scope} scope
+	 * @param {Expression | FunctionDeclaration} expression
+	 * @param {Set<any>} values
+	 */
+	constructor(scope, expression, values) {
+		current_evaluations.set(expression, this);
+
+		this.values = values;
+
+		switch (expression.type) {
+			case 'Literal': {
+				this.values.add(expression.value);
+				break;
+			}
+
+			case 'Identifier': {
+				const binding = scope.get(expression.name);
+
+				if (binding) {
+					if (
+						binding.initial?.type === 'CallExpression' &&
+						get_rune(binding.initial, scope) === '$props.id'
+					) {
+						this.values.add(STRING);
+						break;
+					}
+
+					const is_prop =
+						binding.kind === 'prop' ||
+						binding.kind === 'rest_prop' ||
+						binding.kind === 'bindable_prop';
+
+					if (binding.initial?.type === 'EachBlock' && binding.initial.index === expression.name) {
+						this.values.add(NUMBER);
+						break;
+					}
+
+					if (binding.initial?.type === 'SnippetBlock') {
+						this.is_defined = true;
+						this.is_known = false;
+						this.values.add(UNKNOWN);
+						break;
+					}
+
+					if (!binding.updated && binding.initial !== null && !is_prop) {
+						binding.scope.evaluate(/** @type {Expression} */ (binding.initial), this.values);
+						break;
+					}
+				} else if (expression.name === 'undefined') {
+					this.values.add(undefined);
+					break;
+				}
+
+				// TODO glean what we can from reassignments
+				// TODO one day, expose props and imports somehow
+
+				this.values.add(UNKNOWN);
+				break;
+			}
+
+			case 'BinaryExpression': {
+				const a = scope.evaluate(/** @type {Expression} */ (expression.left)); // `left` cannot be `PrivateIdentifier` unless operator is `in`
+				const b = scope.evaluate(expression.right);
+
+				if (a.is_known && b.is_known) {
+					this.values.add(binary[expression.operator](a.value, b.value));
+					break;
+				}
+
+				switch (expression.operator) {
+					case '!=':
+					case '!==':
+					case '<':
+					case '<=':
+					case '>':
+					case '>=':
+					case '==':
+					case '===':
+					case 'in':
+					case 'instanceof':
+						this.values.add(true);
+						this.values.add(false);
+						break;
+
+					case '%':
+					case '&':
+					case '*':
+					case '**':
+					case '-':
+					case '/':
+					case '<<':
+					case '>>':
+					case '>>>':
+					case '^':
+					case '|':
+						this.values.add(NUMBER);
+						break;
+
+					case '+':
+						if (a.is_string || b.is_string) {
+							this.values.add(STRING);
+						} else if (a.is_number && b.is_number) {
+							this.values.add(NUMBER);
+						} else {
+							this.values.add(STRING);
+							this.values.add(NUMBER);
+						}
+						break;
+
+					default:
+						this.values.add(UNKNOWN);
+				}
+				break;
+			}
+
+			case 'ConditionalExpression': {
+				const test = scope.evaluate(expression.test);
+				const consequent = scope.evaluate(expression.consequent);
+				const alternate = scope.evaluate(expression.alternate);
+
+				if (test.is_known) {
+					for (const value of (test.value ? consequent : alternate).values) {
+						this.values.add(value);
+					}
+				} else {
+					for (const value of consequent.values) {
+						this.values.add(value);
+					}
+
+					for (const value of alternate.values) {
+						this.values.add(value);
+					}
+				}
+				break;
+			}
+
+			case 'LogicalExpression': {
+				const a = scope.evaluate(expression.left);
+				const b = scope.evaluate(expression.right);
+
+				if (a.is_known) {
+					if (b.is_known) {
+						this.values.add(logical[expression.operator](a.value, b.value));
+						break;
+					}
+
+					if (
+						(expression.operator === '&&' && !a.value) ||
+						(expression.operator === '||' && a.value) ||
+						(expression.operator === '??' && a.value != null)
+					) {
+						this.values.add(a.value);
+					} else {
+						for (const value of b.values) {
+							this.values.add(value);
+						}
+					}
+
+					break;
+				}
+
+				for (const value of a.values) {
+					this.values.add(value);
+				}
+
+				for (const value of b.values) {
+					this.values.add(value);
+				}
+				break;
+			}
+
+			case 'UnaryExpression': {
+				const argument = scope.evaluate(expression.argument);
+
+				if (argument.is_known) {
+					this.values.add(unary[expression.operator](argument.value));
+					break;
+				}
+
+				switch (expression.operator) {
+					case '!':
+					case 'delete':
+						this.values.add(false);
+						this.values.add(true);
+						break;
+
+					case '+':
+					case '-':
+					case '~':
+						this.values.add(NUMBER);
+						break;
+
+					case 'typeof':
+						this.values.add(STRING);
+						break;
+
+					case 'void':
+						this.values.add(undefined);
+						break;
+
+					default:
+						this.values.add(UNKNOWN);
+				}
+				break;
+			}
+
+			case 'CallExpression': {
+				const keypath = get_global_keypath(expression.callee, scope);
+
+				if (keypath) {
+					if (is_rune(keypath)) {
+						const arg = /** @type {Expression | undefined} */ (expression.arguments[0]);
+
+						switch (keypath) {
+							case '$state':
+							case '$state.raw':
+							case '$derived':
+								if (arg) {
+									scope.evaluate(arg, this.values);
+								} else {
+									this.values.add(undefined);
+								}
+								break;
+
+							case '$props.id':
+								this.values.add(STRING);
+								break;
+
+							case '$effect.tracking':
+								this.values.add(false);
+								this.values.add(true);
+								break;
+
+							case '$derived.by':
+								if (arg?.type === 'ArrowFunctionExpression' && arg.body.type !== 'BlockStatement') {
+									scope.evaluate(arg.body, this.values);
+									break;
+								}
+
+								this.values.add(UNKNOWN);
+								break;
+
+							default: {
+								this.values.add(UNKNOWN);
+							}
+						}
+
+						break;
+					}
+
+					if (
+						Object.hasOwn(globals, keypath) &&
+						expression.arguments.every((arg) => arg.type !== 'SpreadElement')
+					) {
+						const [type, fn] = globals[keypath];
+						const values = expression.arguments.map((arg) => scope.evaluate(arg));
+
+						if (fn && values.every((e) => e.is_known)) {
+							this.values.add(fn(...values.map((e) => e.value)));
+						} else {
+							this.values.add(type);
+						}
+
+						break;
+					}
+				}
+
+				this.values.add(UNKNOWN);
+				break;
+			}
+
+			case 'TemplateLiteral': {
+				let result = expression.quasis[0].value.cooked;
+
+				for (let i = 0; i < expression.expressions.length; i += 1) {
+					const e = scope.evaluate(expression.expressions[i]);
+
+					if (e.is_known) {
+						result += e.value + expression.quasis[i + 1].value.cooked;
+					} else {
+						this.values.add(STRING);
+						break;
+					}
+				}
+
+				this.values.add(result);
+				break;
+			}
+
+			case 'MemberExpression': {
+				const keypath = get_global_keypath(expression, scope);
+
+				if (keypath && Object.hasOwn(global_constants, keypath)) {
+					this.values.add(global_constants[keypath]);
+					break;
+				}
+
+				this.values.add(UNKNOWN);
+				break;
+			}
+
+			case 'ArrowFunctionExpression':
+			case 'FunctionExpression':
+			case 'FunctionDeclaration': {
+				this.values.add(FUNCTION);
+				break;
+			}
+
+			default: {
+				this.values.add(UNKNOWN);
+			}
+		}
+
+		for (const value of this.values) {
+			this.value = value; // saves having special logic for `size === 1`
+
+			if (value !== STRING && typeof value !== 'string') {
+				this.is_string = false;
+			}
+
+			if (value !== NUMBER && typeof value !== 'number') {
+				this.is_number = false;
+			}
+
+			if (value !== FUNCTION) {
+				this.is_function = false;
+			}
+
+			if (value == null || value === UNKNOWN) {
+				this.is_defined = false;
+			}
+
+			if (value === UNKNOWN) {
+				this.has_unknown = true;
+				this.is_primitive = false;
+			}
+		}
+
+		if (this.values.size > 1 || typeof this.value === 'symbol') {
+			this.is_known = false;
+		}
+
+		current_evaluations.delete(expression);
+	}
+}
+
 export class Scope {
 	/** @type {ScopeRoot} */
 	root;
@@ -96,26 +682,15 @@ export class Scope {
 		}
 
 		if (this.declarations.has(node.name)) {
-			// This also errors on var/function types, but that's arguably a good thing
-			e.declaration_duplicate(node, node.name);
+			const binding = this.declarations.get(node.name);
+			if (binding && binding.declaration_kind !== 'var' && declaration_kind !== 'var') {
+				// This also errors on function types, but that's arguably a good thing
+				// declaring function twice is also caught by acorn in the parse phase
+				e.declaration_duplicate(node, node.name);
+			}
 		}
 
-		/** @type {Binding} */
-		const binding = {
-			node,
-			references: [],
-			legacy_dependencies: [],
-			initial,
-			reassigned: false,
-			mutated: false,
-			updated: false,
-			scope: this,
-			kind,
-			declaration_kind,
-			is_called: false,
-			prop_alias: null,
-			metadata: null
-		};
+		const binding = new Binding(this, node, kind, declaration_kind, initial);
 
 		validate_identifier_name(binding, this.function_depth);
 
@@ -138,8 +713,18 @@ export class Scope {
 		}
 
 		preferred_name = preferred_name.replace(/[^a-zA-Z0-9_$]/g, '_').replace(/^[0-9]/, '_');
-		let name = preferred_name;
-		let n = 1;
+
+		// Use cached counter to skip names already known to be taken (avoids O(n²) scanning)
+		let n = this.root.next_counter(preferred_name);
+		let name;
+
+		if (n === 0) {
+			name = preferred_name;
+			n = 1;
+		} else {
+			name = `${preferred_name}_${n}`;
+			n++;
+		}
 
 		while (
 			this.references.has(name) ||
@@ -150,6 +735,7 @@ export class Scope {
 			name = `${preferred_name}_${n++}`;
 		}
 
+		this.root.set_counter(preferred_name, n);
 		this.references.set(name, []);
 		this.root.conflicts.add(name);
 		return name;
@@ -206,24 +792,120 @@ export class Scope {
 			this.root.conflicts.add(node.name);
 		}
 	}
+
+	/**
+	 * Does partial evaluation to find an exact value or at least the rough type of the expression.
+	 * Only call this once scope has been fully generated in a first pass,
+	 * else this evaluates on incomplete data and may yield wrong results.
+	 * @param {Expression} expression
+	 * @param {Set<any>} [values]
+	 */
+	evaluate(expression, values = new Set()) {
+		const current = current_evaluations.get(expression);
+		if (current) return current;
+
+		return new Evaluation(this, expression, values);
+	}
 }
 
+/**
+ * Track which expressions are currently being evaluated — this allows
+ * us to prevent cyclical evaluations without passing the map around
+ * @type {Map<Expression | FunctionDeclaration, Evaluation>}
+ */
+const current_evaluations = new Map();
+
+/** @type {Record<BinaryOperator, (left: any, right: any) => any>} */
+const binary = {
+	'!=': (left, right) => left != right,
+	'!==': (left, right) => left !== right,
+	'<': (left, right) => left < right,
+	'<=': (left, right) => left <= right,
+	'>': (left, right) => left > right,
+	'>=': (left, right) => left >= right,
+	'==': (left, right) => left == right,
+	'===': (left, right) => left === right,
+	in: (left, right) => left in right,
+	instanceof: (left, right) => left instanceof right,
+	'%': (left, right) => left % right,
+	'&': (left, right) => left & right,
+	'*': (left, right) => left * right,
+	'**': (left, right) => left ** right,
+	'+': (left, right) => left + right,
+	'-': (left, right) => left - right,
+	'/': (left, right) => left / right,
+	'<<': (left, right) => left << right,
+	'>>': (left, right) => left >> right,
+	'>>>': (left, right) => left >>> right,
+	'^': (left, right) => left ^ right,
+	'|': (left, right) => left | right
+};
+
+/** @type {Record<UnaryOperator, (argument: any) => any>} */
+const unary = {
+	'-': (argument) => -argument,
+	'+': (argument) => +argument,
+	'!': (argument) => !argument,
+	'~': (argument) => ~argument,
+	typeof: (argument) => typeof argument,
+	void: () => undefined,
+	delete: () => true
+};
+
+/** @type {Record<LogicalOperator, (left: any, right: any) => any>} */
+const logical = {
+	'||': (left, right) => left || right,
+	'&&': (left, right) => left && right,
+	'??': (left, right) => left ?? right
+};
+
 export class ScopeRoot {
 	/** @type {Set<string>} */
 	conflicts = new Set();
 
+	/**
+	 * Tracks the next suffix counter per name to avoid O(n) rescanning in generate/unique.
+	 * @type {Map<string, number>}
+	 */
+	#name_counters = new Map();
+
+	/**
+	 * @param {string} name
+	 * @returns {number}
+	 */
+	next_counter(name) {
+		return this.#name_counters.get(name) ?? 0;
+	}
+
+	/**
+	 * @param {string} name
+	 * @param {number} value
+	 */
+	set_counter(name, value) {
+		this.#name_counters.set(name, value);
+	}
+
 	/**
 	 * @param {string} preferred_name
 	 */
 	unique(preferred_name) {
 		preferred_name = preferred_name.replace(/[^a-zA-Z0-9_$]/g, '_');
-		let final_name = preferred_name;
-		let n = 1;
+		let n = this.#name_counters.get(preferred_name) ?? 0;
+		let final_name;
+
+		if (n === 0) {
+			final_name = preferred_name;
+			n = 1;
+		} else {
+			final_name = `${preferred_name}_${n}`;
+			n++;
+		}
 
 		while (this.conflicts.has(final_name)) {
 			final_name = `${preferred_name}_${n++}`;
 		}
 
+		this.#name_counters.set(preferred_name, n);
 		this.conflicts.add(final_name);
 		const id = b.id(final_name);
 		return id;
@@ -253,7 +935,7 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 	/** @type {[Scope, { node: Identifier; path: AST.SvelteNode[] }][]} */
 	const references = [];
 
-	/** @type {[Scope, Pattern | MemberExpression][]} */
+	/** @type {[Scope, Pattern | MemberExpression, Expression][]} */
 	const updates = [];
 
 	/**
@@ -345,7 +1027,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);
@@ -415,7 +1115,7 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 		},
 
 		Component: (node, context) => {
-			context.state.scope.reference(b.id(node.name), context.path);
+			context.state.scope.reference(b.id(node.name.split('.')[0]), context.path);
 			Component(node, context);
 		},
 		SvelteSelf: Component,
@@ -423,12 +1123,13 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 
 		// updates
 		AssignmentExpression(node, { state, next }) {
-			updates.push([state.scope, node.left]);
+			updates.push([state.scope, node.left, node.right]);
 			next();
 		},
 
 		UpdateExpression(node, { state, next }) {
-			updates.push([state.scope, /** @type {Identifier | MemberExpression} */ (node.argument)]);
+			const expression = /** @type {Identifier | MemberExpression} */ (node.argument);
+			updates.push([state.scope, expression, expression]);
 			next();
 		},
 
@@ -439,7 +1140,7 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 		},
 
 		FunctionExpression(node, { state, next }) {
-			const scope = state.scope.child();
+			const scope = state.scope.child(true);
 			scopes.set(node, scope);
 
 			if (node.id) scope.declare(node.id, 'normal', 'function');
@@ -451,7 +1152,7 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 		FunctionDeclaration(node, { state, next }) {
 			if (node.id) state.scope.declare(node.id, 'normal', 'function', node);
 
-			const scope = state.scope.child();
+			const scope = state.scope.child(true);
 			scopes.set(node, scope);
 
 			add_params(scope, node.params);
@@ -459,7 +1160,7 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 		},
 
 		ArrowFunctionExpression(node, { state, next }) {
-			const scope = state.scope.child();
+			const scope = state.scope.child(true);
 			scopes.set(node, scope);
 
 			add_params(scope, node.params);
@@ -477,8 +1178,11 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 				parent?.type === 'FunctionExpression' ||
 				parent?.type === 'ArrowFunctionExpression'
 			) {
-				// We already created a new scope for the function
-				context.next();
+				// The scopes created for the function nodes above handle the function identifier and
+				// parameters, but the block statement itself holds the non-porous function scope
+				const scope = context.state.scope.child();
+				scopes.set(node, scope);
+				context.next({ scope });
 			} else {
 				create_block_scope(node, context);
 			}
@@ -504,6 +1208,7 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 						node.kind,
 						declarator.init
 					);
+					binding.metadata = { is_template_declaration: true };
 					bindings.push(binding);
 				}
 			}
@@ -565,7 +1270,7 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 				const is_keyed =
 					node.key &&
 					(node.key.type !== 'Identifier' || !node.index || node.key.name !== node.index);
-				scope.declare(b.id(node.index), is_keyed ? 'template' : 'normal', 'const', node);
+				scope.declare(b.id(node.index), is_keyed ? 'template' : 'static', 'const', node);
 			}
 			if (node.key) visit(node.key, { scope });
 
@@ -575,24 +1280,15 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 			}
 			if (node.fallback) visit(node.fallback, { scope });
 
-			// Check if inner scope shadows something from outer scope.
-			// This is necessary because we need access to the array expression of the each block
-			// in the inner scope if bindings are used, in order to invalidate the array.
-			let needs_array_deduplication = false;
-			for (const [name] of scope.declarations) {
-				if (state.scope.get(name) !== null) {
-					needs_array_deduplication = true;
-				}
-			}
-
 			node.metadata = {
-				expression: create_expression_metadata(),
+				expression: new ExpressionMetadata(),
 				keyed: false,
 				contains_group_binding: false,
-				array_name: needs_array_deduplication ? state.scope.root.unique('$$array') : null,
 				index: scope.root.unique('$$index'),
 				declarations: scope.declarations,
-				is_controlled: false
+				is_controlled: false,
+				// filled in during analysis
+				transitive_deps: new Set()
 			};
 		},
 
@@ -657,10 +1353,11 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 		},
 
 		BindDirective(node, context) {
-			updates.push([
-				context.state.scope,
-				/** @type {Identifier | MemberExpression} */ (node.expression)
-			]);
+			if (node.expression.type !== 'SequenceExpression') {
+				const expression = /** @type {Identifier | MemberExpression} */ (node.expression);
+				updates.push([context.state.scope, expression, expression]);
+			}
+
 			context.next();
 		},
 
@@ -695,16 +1392,15 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 		scope.reference(node, path);
 	}
 
-	for (const [scope, node] of updates) {
+	for (const [scope, node, value] of updates) {
 		for (const expression of unwrap_pattern(node)) {
 			const left = object(expression);
 			const binding = left && scope.get(left.name);
 
 			if (binding !== null && left !== binding.node) {
-				binding.updated = true;
-
 				if (left === expression) {
 					binding.reassigned = true;
+					binding.assignments.push({ value, scope });
 				} else {
 					binding.mutated = true;
 				}
@@ -713,6 +1409,7 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 	}
 
 	return {
+		has_await,
 		scope,
 		scopes
 	};
@@ -737,7 +1434,19 @@ export function get_rune(node, scope) {
 	if (!node) return null;
 	if (node.type !== 'CallExpression') return null;
 
-	let n = node.callee;
+	const keypath = get_global_keypath(node.callee, scope);
+
+	if (!keypath || !is_rune(keypath)) return null;
+	return keypath;
+}
+
+/**
+ * Returns the name of the rune if the given expression is a `CallExpression` using a rune.
+ * @param {Expression | Super} node
+ * @param {Scope} scope
+ */
+function get_global_keypath(node, scope) {
+	let n = node;
 
 	let joined = '';
 
@@ -755,12 +1464,8 @@ export function get_rune(node, scope) {
 
 	if (n.type !== 'Identifier') return null;
 
-	joined = n.name + joined;
-
-	if (!is_rune(joined)) return null;
-
 	const binding = scope.get(n.name);
 	if (binding !== null) return null; // rune name, but references a variable or store
 
-	return joined;
+	return n.name + joined;
 }
diff --git a/packages/svelte/src/compiler/phases/types.d.ts b/packages/svelte/src/compiler/phases/types.d.ts
index 6a2ea27993..a1a85ce145 100644
--- a/packages/svelte/src/compiler/phases/types.d.ts
+++ b/packages/svelte/src/compiler/phases/types.d.ts
@@ -1,11 +1,27 @@
-import type { AST, Binding } from '#compiler';
-import type { Identifier, LabeledStatement, Node, Program } from 'estree';
+import type { AST, Binding, StateField } from '#compiler';
+import type {
+	AwaitExpression,
+	CallExpression,
+	ClassBody,
+	ClassDeclaration,
+	FunctionDeclaration,
+	Identifier,
+	LabeledStatement,
+	ModuleDeclaration,
+	Pattern,
+	Program,
+	Statement,
+	VariableDeclaration,
+	VariableDeclarator
+} from 'estree';
 import type { Scope, ScopeRoot } from './scope.js';
+import type { ExpressionMetadata } from './nodes.js';
 
 export interface Js {
 	ast: Program;
 	scope: Scope;
 	scopes: Map<AST.SvelteNode, Scope>;
+	has_await: boolean;
 }
 
 export interface Template {
@@ -19,17 +35,37 @@ export interface ReactiveStatement {
 	dependencies: Binding[];
 }
 
+export interface AwaitedDeclaration {
+	id: Identifier;
+	has_await: boolean;
+	pattern: Pattern;
+	metadata: ExpressionMetadata;
+	updated_by: Set<Identifier>;
+}
+
 /**
  * Analysis common to modules and components
  */
 export interface Analysis {
 	module: Js;
+	/** @deprecated use `component_name` from `state.js` instead */
 	name: string; // TODO should this be filename? it's used in `compileModule` as well as `compile`
+	/** @deprecated use `runes` from `state.js` instead */
 	runes: boolean;
 	immutable: boolean;
+	/** True if `$inspect.trace` is used */
+	tracing: boolean;
+	comments: AST.JSComment[];
+
+	classes: Map<ClassBody, Map<string, StateField>>;
 
 	// TODO figure out if we can move this to ComponentAnalysis
 	accessors: boolean;
+
+	/** A set of deriveds that contain `await` expressions */
+	async_deriveds: Set<CallExpression>;
+	/** Awaits needing context preservation */
+	pickled_awaits: Set<AwaitExpression>;
 }
 
 export interface ComponentAnalysis extends Analysis {
@@ -39,9 +75,13 @@ export interface ComponentAnalysis extends Analysis {
 	/** Used for CSS pruning and scoping */
 	elements: Array<AST.RegularElement | AST.SvelteElement>;
 	runes: boolean;
+	maybe_runes: boolean;
+	tracing: boolean;
 	exports: Array<{ name: string; alias: string | null }>;
 	/** Whether the component uses `$$props` */
 	uses_props: boolean;
+	/** The component ID variable name, if any */
+	props_id: Identifier | null;
 	/** Whether the component uses `$$restProps` */
 	uses_rest_props: boolean;
 	/** Whether the component uses `$$slots` */
@@ -49,6 +89,7 @@ export interface ComponentAnalysis extends Analysis {
 	uses_component_bindings: boolean;
 	uses_render_tags: boolean;
 	needs_context: boolean;
+	needs_mutation_validation: boolean;
 	needs_props: boolean;
 	/** Set to the first event directive (on:x) found on a DOM element in the code */
 	event_directive_node: AST.OnDirective | null;
@@ -69,9 +110,10 @@ export interface ComponentAnalysis extends Analysis {
 		ast: AST.CSS.StyleSheet | null;
 		hash: string;
 		keyframes: string[];
+		has_global: boolean;
 	};
+	/** @deprecated use `source` from `state.js` instead */
 	source: string;
-	undefined_exports: Map<string, Node>;
 	/**
 	 * Every render tag/component, and whether it could be definitively resolved or not
 	 */
@@ -83,30 +125,13 @@ export interface ComponentAnalysis extends Analysis {
 	 * Every snippet that is declared locally
 	 */
 	snippets: Set<AST.SnippetBlock>;
-}
-
-declare module 'estree' {
-	interface ArrowFunctionExpression {
-		metadata: {
-			hoisted: boolean;
-			hoisted_params: Pattern[];
-			scope: Scope;
-		};
-	}
-
-	interface FunctionExpression {
-		metadata: {
-			hoisted: boolean;
-			hoisted_params: Pattern[];
-			scope: Scope;
-		};
-	}
-
-	interface FunctionDeclaration {
-		metadata: {
-			hoisted: boolean;
-			hoisted_params: Pattern[];
-			scope: Scope;
-		};
-	}
+	/**
+	 * Pre-transformed `<script>` block
+	 */
+	instance_body: {
+		hoisted: Array<Statement | ModuleDeclaration>;
+		sync: Array<Statement | ModuleDeclaration | VariableDeclaration>;
+		async: Array<{ nodes: Array<Statement | VariableDeclarator>; has_await: boolean }>;
+		declarations: Array<Identifier>;
+	};
 }
diff --git a/packages/svelte/src/compiler/preprocess/index.js b/packages/svelte/src/compiler/preprocess/index.js
index afef898471..429c2dcff1 100644
--- a/packages/svelte/src/compiler/preprocess/index.js
+++ b/packages/svelte/src/compiler/preprocess/index.js
@@ -1,6 +1,6 @@
 /** @import { Processed, Preprocessor, MarkupPreprocessor, PreprocessorGroup } from './public.js' */
 /** @import { SourceUpdate, Source } from './private.js' */
-/** @import { DecodedSourceMap, RawSourceMap } from '@ampproject/remapping' */
+/** @import { DecodedSourceMap, RawSourceMap } from '@jridgewell/remapping' */
 import { getLocator } from 'locate-character';
 import {
 	MappedCode,
@@ -25,7 +25,7 @@ class PreprocessResult {
 
 	// sourcemap_list is sorted in reverse order from last map (index 0) to first map (index -1)
 	// so we use sourcemap_list.unshift() to add new maps
-	// https://github.com/ampproject/remapping#multiple-transformations-of-a-file
+	// https://github.com/jridgewell/sourcemaps/tree/main/packages/remapping#multiple-transformations-of-a-file
 
 	/**
 	 * @default []
diff --git a/packages/svelte/src/compiler/preprocess/private.d.ts b/packages/svelte/src/compiler/preprocess/private.d.ts
index 5d8c5ed44e..2c331cee12 100644
--- a/packages/svelte/src/compiler/preprocess/private.d.ts
+++ b/packages/svelte/src/compiler/preprocess/private.d.ts
@@ -1,4 +1,4 @@
-import { DecodedSourceMap } from '@ampproject/remapping';
+import { DecodedSourceMap } from '@jridgewell/remapping';
 import { Location } from 'locate-character';
 import { MappedCode } from '../utils/mapped_code.js';
 
diff --git a/packages/svelte/src/compiler/print/index.js b/packages/svelte/src/compiler/print/index.js
new file mode 100644
index 0000000000..fbd7e86f12
--- /dev/null
+++ b/packages/svelte/src/compiler/print/index.js
@@ -0,0 +1,963 @@
+/** @import { AST } from '#compiler'; */
+/** @import { Context, Visitors } from 'esrap' */
+import * as esrap from 'esrap';
+import ts from 'esrap/languages/ts';
+import { is_void } from '../../utils.js';
+
+/** Threshold for when content should be formatted on separate lines */
+const LINE_BREAK_THRESHOLD = 50;
+
+/**
+ * `print` converts a Svelte AST node back into Svelte source code.
+ * It is primarily intended for tools that parse and transform components using the compiler’s modern AST representation.
+ *
+ * `print(ast)` requires an AST node produced by parse with modern: true, or any sub-node within that modern AST.
+ * The result contains the generated source and a corresponding source map.
+ * The output is valid Svelte, but formatting details such as whitespace or quoting may differ from the original.
+ * @param {AST.SvelteNode} ast
+ * @param {import('./types.js').Options | undefined} options
+ */
+export function print(ast, options = undefined) {
+	const comments = (ast.type === 'Root' && ast.comments) || [];
+
+	return esrap.print(
+		ast,
+		/** @type {Visitors<AST.SvelteNode>} */ ({
+			...ts({
+				comments,
+				getLeadingComments: options?.getLeadingComments,
+				getTrailingComments: options?.getTrailingComments
+			}),
+			...svelte_visitors(comments),
+			...css_visitors
+		})
+	);
+}
+
+/**
+ * @param {Context} context
+ * @param {AST.SvelteNode} node
+ * @param {boolean} allow_inline
+ */
+function block(context, node, allow_inline = false) {
+	const child_context = context.new();
+	child_context.visit(node);
+
+	if (child_context.empty()) {
+		return;
+	}
+
+	if (allow_inline && !child_context.multiline) {
+		context.append(child_context);
+	} else {
+		context.indent();
+		context.newline();
+		context.append(child_context);
+		context.dedent();
+		context.newline();
+	}
+}
+
+/**
+ * @param {AST.BaseNode} node
+ * @param {AST.BaseElement['attributes']} attributes
+ * @param {Context} context
+ * @param {AST.JSComment[]} comments
+ * @returns {boolean} true if attributes were formatted on multiple lines
+ */
+function attributes(node, attributes, context, comments) {
+	if (attributes.length === 0) {
+		return false;
+	}
+
+	let length = -1;
+
+	let comment_index = comments.findIndex((comment) => comment.start > node.start);
+
+	if (comment_index === -1) {
+		comment_index = comments.length;
+	}
+
+	const separator = context.new();
+
+	const children = attributes.map((attribute) => {
+		const child_context = context.new();
+
+		while (comment_index < comments.length) {
+			const comment = comments[comment_index];
+
+			if (comment.start < attribute.start) {
+				if (comment.type === 'Line') {
+					child_context.write('//' + comment.value);
+					child_context.newline();
+				} else {
+					child_context.write('/*' + comment.value + '*/'); // TODO match indentation?
+					child_context.append(separator);
+				}
+
+				comment_index += 1;
+			} else {
+				break;
+			}
+		}
+
+		child_context.visit(attribute);
+
+		length += child_context.measure() + 1;
+
+		return child_context;
+	});
+
+	let multiline = context.multiline || length > LINE_BREAK_THRESHOLD;
+
+	if (multiline) {
+		separator.newline();
+		context.indent();
+		for (const child of children) {
+			context.newline();
+			context.append(child);
+		}
+		context.dedent();
+		context.newline();
+	} else {
+		separator.write(' ');
+		for (const child of children) {
+			context.write(' ');
+			context.append(child);
+		}
+	}
+
+	return multiline;
+}
+
+/**
+ * @param {AST.BaseElement} node
+ * @param {Context} context
+ * @param {AST.JSComment[]} comments
+ */
+function base_element(node, context, comments) {
+	const child_context = context.new();
+
+	child_context.write('<' + node.name);
+
+	// Handle special Svelte components/elements that need 'this' attribute
+	if (node.type === 'SvelteComponent') {
+		child_context.write(' this={');
+		child_context.visit(/** @type {AST.SvelteComponent} */ (node).expression);
+		child_context.write('}');
+	} else if (node.type === 'SvelteElement') {
+		child_context.write(' this={');
+		child_context.visit(/** @type {AST.SvelteElement} */ (node).tag);
+		child_context.write('}');
+	}
+
+	const multiline_attributes = attributes(node, node.attributes, child_context, comments);
+	const is_doctype_node = node.name.toLowerCase() === '!doctype';
+	const is_self_closing =
+		is_void(node.name) || (node.type === 'Component' && node.fragment.nodes.length === 0);
+
+	if (is_doctype_node) child_context.write(`>`);
+	else if (is_self_closing) {
+		child_context.write(`${multiline_attributes ? '' : ' '}/>`);
+	} else {
+		child_context.write('>');
+		block(child_context, node.fragment, true);
+		child_context.write(`</${node.name}>`);
+	}
+
+	context.append(child_context);
+}
+
+/** @type {Visitors<AST.SvelteNode>} */
+const css_visitors = {
+	Atrule(node, context) {
+		context.write(`@${node.name}`);
+		if (node.prelude) context.write(` ${node.prelude}`);
+
+		if (node.block) {
+			context.write(' ');
+			context.visit(node.block);
+		} else {
+			context.write(';');
+		}
+	},
+
+	AttributeSelector(node, context) {
+		context.write(`[${node.name}`);
+		if (node.matcher) {
+			context.write(node.matcher);
+			context.write(`"${node.value}"`);
+			if (node.flags) {
+				context.write(` ${node.flags}`);
+			}
+		}
+		context.write(']');
+	},
+
+	Block(node, context) {
+		context.write('{');
+
+		if (node.children.length > 0) {
+			context.indent();
+			context.newline();
+
+			let started = false;
+
+			for (const child of node.children) {
+				if (started) {
+					context.newline();
+				}
+
+				context.visit(child);
+
+				started = true;
+			}
+
+			context.dedent();
+			context.newline();
+		}
+
+		context.write('}');
+	},
+
+	ClassSelector(node, context) {
+		context.write(`.${node.name}`);
+	},
+
+	ComplexSelector(node, context) {
+		for (const selector of node.children) {
+			context.visit(selector);
+		}
+	},
+
+	Declaration(node, context) {
+		context.write(`${node.property}: ${node.value};`);
+	},
+
+	IdSelector(node, context) {
+		context.write(`#${node.name}`);
+	},
+
+	NestingSelector(node, context) {
+		context.write('&');
+	},
+
+	Nth(node, context) {
+		context.write(node.value);
+	},
+
+	Percentage(node, context) {
+		context.write(node.value);
+	},
+
+	PseudoClassSelector(node, context) {
+		context.write(`:${node.name}`);
+
+		if (node.args) {
+			context.write('(');
+
+			let started = false;
+
+			for (const arg of node.args.children) {
+				if (started) {
+					context.write(', ');
+				}
+
+				context.visit(arg);
+
+				started = true;
+			}
+
+			context.write(')');
+		}
+	},
+
+	PseudoElementSelector(node, context) {
+		context.write(`::${node.name}`);
+	},
+
+	RelativeSelector(node, context) {
+		if (node.combinator) {
+			if (node.combinator.name === ' ') {
+				context.write(' ');
+			} else {
+				context.write(` ${node.combinator.name} `);
+			}
+		}
+
+		for (const selector of node.selectors) {
+			context.visit(selector);
+		}
+	},
+
+	Rule(node, context) {
+		let started = false;
+
+		for (const selector of node.prelude.children) {
+			if (started) {
+				context.write(',');
+				context.newline();
+			}
+
+			context.visit(selector);
+			started = true;
+		}
+
+		context.write(' ');
+		context.visit(node.block);
+	},
+
+	SelectorList(node, context) {
+		let started = false;
+		for (const selector of node.children) {
+			if (started) {
+				context.write(', ');
+			}
+
+			context.visit(selector);
+			started = true;
+		}
+	},
+
+	TypeSelector(node, context) {
+		context.write(node.name);
+	}
+};
+
+/**
+ * @param {AST.JSComment[]} comments
+ * @returns {Visitors<AST.SvelteNode>}
+ */
+const svelte_visitors = (comments) => ({
+	Root(node, context) {
+		if (node.options) {
+			context.write('<svelte:options');
+
+			for (const attribute of node.options.attributes) {
+				context.write(' ');
+				context.visit(attribute);
+			}
+
+			context.write(' />');
+		}
+
+		let started = false;
+
+		for (const item of [node.module, node.instance, node.fragment, node.css]) {
+			if (!item) continue;
+
+			if (started) {
+				context.margin();
+				context.newline();
+			}
+
+			context.visit(item);
+			started = true;
+		}
+	},
+
+	Script(node, context) {
+		context.write('<script');
+		attributes(node, node.attributes, context, comments);
+		context.write('>');
+		block(context, node.content);
+		context.write('</script>');
+	},
+
+	Fragment(node, context) {
+		/** @type {AST.SvelteNode[][]} */
+		const items = [];
+
+		/** @type {AST.SvelteNode[]} */
+		let sequence = [];
+
+		const flush = () => {
+			items.push(sequence);
+			sequence = [];
+		};
+
+		for (let i = 0; i < node.nodes.length; i += 1) {
+			let child_node = node.nodes[i];
+
+			const prev = node.nodes[i - 1];
+			const next = node.nodes[i + 1];
+
+			if (child_node.type === 'Text') {
+				child_node = { ...child_node }; // always clone, so we can safely mutate
+
+				child_node.data = child_node.data.replace(/[^\S]+/g, ' ');
+
+				// trim fragment
+				if (i === 0) {
+					child_node.data = child_node.data.trimStart();
+				}
+
+				if (i === node.nodes.length - 1) {
+					child_node.data = child_node.data.trimEnd();
+				}
+
+				if (child_node.data === '') {
+					continue;
+				}
+
+				if (child_node.data.startsWith(' ') && prev && prev.type !== 'ExpressionTag') {
+					flush();
+					child_node.data = child_node.data.trimStart();
+				}
+
+				if (child_node.data !== '') {
+					sequence.push({ ...child_node, data: child_node.data });
+
+					if (child_node.data.endsWith(' ') && next && next.type !== 'ExpressionTag') {
+						flush();
+						child_node.data = child_node.data.trimStart();
+					}
+				}
+			} else {
+				const is_block_element =
+					child_node.type === 'RegularElement' ||
+					child_node.type === 'Component' ||
+					child_node.type === 'SvelteBody' ||
+					child_node.type === 'SvelteHead' ||
+					child_node.type === 'SvelteFragment' ||
+					child_node.type === 'SvelteBoundary' ||
+					child_node.type === 'SvelteDocument' ||
+					child_node.type === 'SvelteSelf' ||
+					child_node.type === 'SvelteWindow' ||
+					child_node.type === 'SvelteComponent' ||
+					child_node.type === 'SvelteElement' ||
+					child_node.type === 'SlotElement' ||
+					child_node.type === 'TitleElement';
+
+				if (is_block_element && sequence.length > 0) flush();
+				sequence.push(child_node);
+				if (is_block_element) flush();
+			}
+		}
+
+		flush();
+
+		let multiline = false;
+		let width = 0;
+
+		const child_contexts = items
+			.filter((x) => x.length > 0)
+			.map((sequence) => {
+				const child_context = context.new();
+
+				for (const node of sequence) {
+					child_context.visit(node);
+					multiline ||= child_context.multiline;
+				}
+
+				width += child_context.measure();
+
+				return child_context;
+			});
+
+		multiline ||= width > LINE_BREAK_THRESHOLD;
+
+		for (let i = 0; i < child_contexts.length; i += 1) {
+			const prev = child_contexts[i];
+			const next = child_contexts[i + 1];
+
+			context.append(prev);
+
+			if (next) {
+				if (prev.multiline || next.multiline) {
+					context.margin();
+					context.newline();
+				} else if (multiline) {
+					context.newline();
+				}
+			}
+		}
+	},
+
+	AnimateDirective(node, context) {
+		context.write(`animate:${node.name}`);
+		if (
+			node.expression !== null &&
+			!(node.expression.type === 'Identifier' && node.expression.name === node.name)
+		) {
+			context.write('={');
+			context.visit(node.expression);
+			context.write('}');
+		}
+	},
+
+	AttachTag(node, context) {
+		context.write('{@attach ');
+		context.visit(node.expression);
+		context.write('}');
+	},
+
+	Attribute(node, context) {
+		context.write(node.name);
+
+		if (node.value === true) return;
+
+		context.write('=');
+
+		if (Array.isArray(node.value)) {
+			if (node.value.length > 1 || node.value[0].type === 'Text') {
+				context.write('"');
+			}
+
+			for (const chunk of node.value) {
+				context.visit(chunk);
+			}
+
+			if (node.value.length > 1 || node.value[0].type === 'Text') {
+				context.write('"');
+			}
+		} else {
+			context.visit(node.value);
+		}
+	},
+
+	AwaitBlock(node, context) {
+		context.write(`{#await `);
+		context.visit(node.expression);
+
+		if (node.pending) {
+			context.write('}');
+			block(context, node.pending);
+			context.write('{:');
+		} else {
+			context.write(' ');
+		}
+
+		if (node.then) {
+			context.write(node.value ? 'then ' : 'then');
+			if (node.value) context.visit(node.value);
+			context.write('}');
+
+			block(context, node.then);
+
+			if (node.catch) {
+				context.write('{:');
+			}
+		}
+
+		if (node.catch) {
+			context.write(node.value ? 'catch ' : 'catch');
+			if (node.error) context.visit(node.error);
+			context.write('}');
+
+			block(context, node.catch);
+		}
+
+		context.write('{/await}');
+	},
+
+	BindDirective(node, context) {
+		context.write(`bind:${node.name}`);
+
+		if (node.expression.type === 'Identifier' && node.expression.name === node.name) {
+			// shorthand
+			return;
+		}
+
+		context.write('={');
+
+		if (node.expression.type === 'SequenceExpression') {
+			context.visit(node.expression.expressions[0]);
+			context.write(', ');
+			context.visit(node.expression.expressions[1]);
+		} else {
+			context.visit(node.expression);
+		}
+
+		context.write('}');
+	},
+
+	ClassDirective(node, context) {
+		context.write(`class:${node.name}`);
+		if (
+			node.expression !== null &&
+			!(node.expression.type === 'Identifier' && node.expression.name === node.name)
+		) {
+			context.write('={');
+			context.visit(node.expression);
+			context.write('}');
+		}
+	},
+
+	Comment(node, context) {
+		context.write('<!--' + node.data + '-->');
+	},
+
+	Component(node, context) {
+		base_element(node, context, comments);
+	},
+
+	ConstTag(node, context) {
+		context.write('{@const ');
+		const declarators = node.declaration.declarations;
+		for (let i = 0; i < declarators.length; i++) {
+			if (i > 0) context.write(', ');
+			context.visit(declarators[i]);
+		}
+
+		context.write('}');
+	},
+
+	DeclarationTag(node, context) {
+		context.write('{');
+
+		// This is duplicated from esrap's handling of VariableDeclaration,
+		// which we need to do in order to omit the trailing semicolon that esrap would add.
+		const open = context.new();
+		const join = context.new();
+		const child_context = context.new();
+
+		context.append(child_context);
+
+		child_context.write(`${node.declaration.kind} `);
+		child_context.append(open);
+
+		const declarations = node.declaration.declarations;
+		let first = true;
+
+		for (const d of declarations) {
+			if (!first) child_context.append(join);
+			first = false;
+
+			child_context.visit(d);
+		}
+
+		const length = child_context.measure() + 2 * (declarations.length - 1);
+
+		const multiline = child_context.multiline || (declarations.length > 1 && length > 50);
+
+		if (multiline) {
+			context.multiline = true;
+
+			if (declarations.length > 1) open.indent();
+			join.write(',');
+			join.newline();
+			if (declarations.length > 1) context.dedent();
+		} else {
+			join.write(', ');
+		}
+
+		context.write('}');
+	},
+
+	DebugTag(node, context) {
+		context.write('{@debug ');
+		let started = false;
+		for (const identifier of node.identifiers) {
+			if (started) {
+				context.write(', ');
+			}
+			context.visit(identifier);
+			started = true;
+		}
+		context.write('}');
+	},
+
+	EachBlock(node, context) {
+		context.write('{#each ');
+		context.visit(node.expression);
+
+		if (node.context) {
+			context.write(' as ');
+			context.visit(node.context);
+		}
+
+		if (node.index) {
+			context.write(`, ${node.index}`);
+		}
+
+		if (node.key) {
+			context.write(' (');
+			context.visit(node.key);
+			context.write(')');
+		}
+
+		context.write('}');
+
+		block(context, node.body);
+
+		if (node.fallback) {
+			context.write('{:else}');
+			block(context, node.fallback);
+		}
+
+		context.write('{/each}');
+	},
+
+	ExpressionTag(node, context) {
+		context.write('{');
+		context.visit(node.expression);
+		context.write('}');
+	},
+
+	HtmlTag(node, context) {
+		context.write('{@html ');
+		context.visit(node.expression);
+		context.write('}');
+	},
+
+	IfBlock(node, context) {
+		if (node.elseif) {
+			context.write('{:else if ');
+			context.visit(node.test);
+			context.write('}');
+
+			block(context, node.consequent);
+		} else {
+			context.write('{#if ');
+			context.visit(node.test);
+			context.write('}');
+
+			block(context, node.consequent);
+		}
+
+		if (node.alternate !== null) {
+			if (
+				!(
+					node.alternate.nodes.length === 1 &&
+					node.alternate.nodes[0].type === 'IfBlock' &&
+					node.alternate.nodes[0].elseif
+				)
+			) {
+				context.write('{:else}');
+				block(context, node.alternate);
+			} else {
+				context.visit(node.alternate);
+			}
+		}
+
+		if (!node.elseif) {
+			context.write('{/if}');
+		}
+	},
+
+	KeyBlock(node, context) {
+		context.write('{#key ');
+		context.visit(node.expression);
+		context.write('}');
+		block(context, node.fragment);
+		context.write('{/key}');
+	},
+
+	LetDirective(node, context) {
+		context.write(`let:${node.name}`);
+		if (
+			node.expression !== null &&
+			!(node.expression.type === 'Identifier' && node.expression.name === node.name)
+		) {
+			context.write('={');
+			context.visit(node.expression);
+			context.write('}');
+		}
+	},
+
+	OnDirective(node, context) {
+		context.write(`on:${node.name}`);
+		for (const modifier of node.modifiers) {
+			context.write(`|${modifier}`);
+		}
+		if (
+			node.expression !== null &&
+			!(node.expression.type === 'Identifier' && node.expression.name === node.name)
+		) {
+			context.write('={');
+			context.visit(node.expression);
+			context.write('}');
+		}
+	},
+
+	RegularElement(node, context) {
+		base_element(node, context, comments);
+	},
+
+	RenderTag(node, context) {
+		context.write('{@render ');
+		context.visit(node.expression);
+		context.write('}');
+	},
+
+	SlotElement(node, context) {
+		base_element(node, context, comments);
+	},
+
+	SnippetBlock(node, context) {
+		context.write('{#snippet ');
+		context.visit(node.expression);
+
+		if (node.typeParams) {
+			context.write(`<${node.typeParams}>`);
+		}
+
+		context.write('(');
+
+		for (let i = 0; i < node.parameters.length; i += 1) {
+			if (i > 0) context.write(', ');
+			context.visit(node.parameters[i]);
+		}
+
+		context.write(')}');
+		block(context, node.body);
+		context.write('{/snippet}');
+	},
+
+	SpreadAttribute(node, context) {
+		context.write('{...');
+		context.visit(node.expression);
+		context.write('}');
+	},
+
+	StyleDirective(node, context) {
+		context.write(`style:${node.name}`);
+		for (const modifier of node.modifiers) {
+			context.write(`|${modifier}`);
+		}
+
+		if (node.value === true) {
+			return;
+		}
+
+		context.write('=');
+
+		if (Array.isArray(node.value)) {
+			context.write('"');
+
+			for (const tag of node.value) {
+				context.visit(tag);
+			}
+
+			context.write('"');
+		} else {
+			context.visit(node.value);
+		}
+	},
+
+	StyleSheet(node, context) {
+		context.write('<style');
+		attributes(node, node.attributes, context, comments);
+		context.write('>');
+
+		if (node.children.length > 0) {
+			context.indent();
+			context.newline();
+
+			let started = false;
+
+			for (const child of node.children) {
+				if (started) {
+					context.margin();
+					context.newline();
+				}
+
+				context.visit(child);
+				started = true;
+			}
+
+			context.dedent();
+			context.newline();
+		}
+
+		context.write('</style>');
+	},
+
+	SvelteBody(node, context) {
+		base_element(node, context, comments);
+	},
+
+	SvelteBoundary(node, context) {
+		base_element(node, context, comments);
+	},
+
+	SvelteComponent(node, context) {
+		context.write('<svelte:component');
+
+		context.write(' this={');
+		context.visit(node.expression);
+		context.write('}');
+		attributes(node, node.attributes, context, comments);
+		if (node.fragment && node.fragment.nodes.length > 0) {
+			context.write('>');
+			block(context, node.fragment, true);
+			context.write(`</svelte:component>`);
+		} else {
+			context.write(' />');
+		}
+	},
+
+	SvelteDocument(node, context) {
+		base_element(node, context, comments);
+	},
+
+	SvelteElement(node, context) {
+		context.write('<svelte:element ');
+
+		context.write('this={');
+		context.visit(node.tag);
+		context.write('}');
+		attributes(node, node.attributes, context, comments);
+
+		if (node.fragment && node.fragment.nodes.length > 0) {
+			context.write('>');
+			block(context, node.fragment);
+			context.write(`</svelte:element>`);
+		} else {
+			context.write(' />');
+		}
+	},
+
+	SvelteFragment(node, context) {
+		base_element(node, context, comments);
+	},
+
+	SvelteHead(node, context) {
+		base_element(node, context, comments);
+	},
+
+	SvelteSelf(node, context) {
+		base_element(node, context, comments);
+	},
+
+	SvelteWindow(node, context) {
+		base_element(node, context, comments);
+	},
+
+	Text(node, context) {
+		context.write(node.data);
+	},
+
+	TitleElement(node, context) {
+		base_element(node, context, comments);
+	},
+
+	TransitionDirective(node, context) {
+		const directive = node.intro && node.outro ? 'transition' : node.intro ? 'in' : 'out';
+		context.write(`${directive}:${node.name}`);
+		for (const modifier of node.modifiers) {
+			context.write(`|${modifier}`);
+		}
+		if (
+			node.expression !== null &&
+			!(node.expression.type === 'Identifier' && node.expression.name === node.name)
+		) {
+			context.write('={');
+			context.visit(node.expression);
+			context.write('}');
+		}
+	},
+
+	UseDirective(node, context) {
+		context.write(`use:${node.name}`);
+		if (
+			node.expression !== null &&
+			!(node.expression.type === 'Identifier' && node.expression.name === node.name)
+		) {
+			context.write('={');
+			context.visit(node.expression);
+			context.write('}');
+		}
+	}
+});
diff --git a/packages/svelte/src/compiler/print/types.d.ts b/packages/svelte/src/compiler/print/types.d.ts
new file mode 100644
index 0000000000..d0ff909525
--- /dev/null
+++ b/packages/svelte/src/compiler/print/types.d.ts
@@ -0,0 +1,7 @@
+import 'esrap'; // This import is required to make typescript happy when `skipLibCheck` is enabled
+import type ts from 'esrap/languages/ts';
+
+export type Options = {
+	getLeadingComments?: NonNullable<Parameters<typeof ts>[0]>['getLeadingComments'] | undefined;
+	getTrailingComments?: NonNullable<Parameters<typeof ts>[0]>['getTrailingComments'] | undefined;
+};
diff --git a/packages/svelte/src/compiler/private.d.ts b/packages/svelte/src/compiler/private.d.ts
new file mode 100644
index 0000000000..7ac1089373
--- /dev/null
+++ b/packages/svelte/src/compiler/private.d.ts
@@ -0,0 +1,2 @@
+export * from './types/index';
+export * from './index';
diff --git a/packages/svelte/src/compiler/state.js b/packages/svelte/src/compiler/state.js
index 1db3db917f..5ae001ec50 100644
--- a/packages/svelte/src/compiler/state.js
+++ b/packages/svelte/src/compiler/state.js
@@ -16,25 +16,59 @@ 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.
+ */
+export let component_name = '<unknown>';
+
 /**
  * The original source code
  * @type {string}
  */
 export let source;
 
+/**
+ * The source code split into lines (set by `set_source`)
+ * @type {string[]}
+ */
+export let source_lines = [];
+
 /**
  * True if compiling with `dev: true`
  * @type {boolean}
  */
 export let dev;
 
-export let locator = getLocator('', { offsetLine: 1 });
+export let runes = false;
+
+/** @type {(index: number) => Location} */
+export let locator;
+
+/** @param {string} value */
+export function set_source(value) {
+	source = value;
+	source_lines = source.split('\n');
+
+	const l = getLocator(source, { offsetLine: 1 });
+
+	locator = (i) => {
+		const loc = l(i);
+		if (!loc) throw new Error('An impossible situation occurred');
+
+		return loc;
+	};
+}
 
 /**
  * @param {AST.SvelteNode & { start?: number | undefined }} node
  */
 export function locate_node(node) {
-	const loc = /** @type {Location} */ (locator(/** @type {number} */ (node.start)));
+	const loc = locator(/** @type {number} */ (node.start));
 	return `${sanitize_location(filename)}:${loc?.line}:${loc.column}`;
 }
 
@@ -55,29 +89,43 @@ export let ignore_stack = [];
  */
 export let ignore_map = new Map();
 
+/**
+ * Cached snapshot of the ignore_stack. Only re-created when the stack changes
+ * (i.e. when push_ignore or pop_ignore is called), avoiding a structuredClone
+ * on every node visit during analysis.
+ * @type {Set<string>[] | null}
+ */
+let cached_ignore_snapshot = null;
+
+/**
+ * Returns a snapshot of the current ignore_stack, reusing a cached copy
+ * when the stack hasn't changed since the last call.
+ * @returns {Set<string>[]}
+ */
+export function get_ignore_snapshot() {
+	if (cached_ignore_snapshot === null) {
+		cached_ignore_snapshot = ignore_stack.map((s) => new Set(s));
+	}
+	return cached_ignore_snapshot;
+}
+
 /**
  * @param {string[]} ignores
  */
 export function push_ignore(ignores) {
 	const next = new Set([...(ignore_stack.at(-1) || []), ...ignores]);
 	ignore_stack.push(next);
+	cached_ignore_snapshot = null;
 }
 
 export function pop_ignore() {
 	ignore_stack.pop();
-}
-
-/**
- *
- * @param {(warning: Warning) => boolean} fn
- */
-export function reset_warning_filter(fn = () => true) {
-	warning_filter = fn;
+	cached_ignore_snapshot = null;
 }
 
 /**
  * @param {AST.SvelteNode | NodeLike} node
- * @param {import('../constants.js').IGNORABLE_RUNTIME_WARNINGS[number]} code
+ * @param {typeof import('../constants.js').IGNORABLE_RUNTIME_WARNINGS[number]} code
  * @returns
  */
 export function is_ignored(node, code) {
@@ -85,23 +133,43 @@ export function is_ignored(node, code) {
 }
 
 /**
- * @param {string} _source
- * @param {{ dev?: boolean; filename: string; rootDir?: string }} options
+ * 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 = '';
+	source_lines = [];
+	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;
+ *   component_name?: string;
+ *   rootDir?: string;
+ *   runes: boolean;
+ * }} state
  */
-export function reset(_source, options) {
-	source = _source;
-	const root_dir = options.rootDir?.replace(/\\/g, '/');
-	filename = options.filename.replace(/\\/g, '/');
+export function adjust(state) {
+	const root_dir = state.rootDir?.replace(/\\/g, '/');
 
-	dev = !!options.dev;
+	dev = state.dev;
+	runes = state.runes;
+	component_name = state.component_name ?? UNKNOWN_FILENAME;
 
 	if (typeof root_dir === 'string' && filename.startsWith(root_dir)) {
 		// make filename relative to rootDir
 		filename = filename.replace(root_dir, '').replace(/^[/\\]/, '');
 	}
 
-	locator = getLocator(source, { offsetLine: 1 });
-	warnings = [];
 	ignore_stack = [];
 	ignore_map.clear();
+	cached_ignore_snapshot = null;
 }
diff --git a/packages/svelte/src/compiler/types/css.d.ts b/packages/svelte/src/compiler/types/css.d.ts
index 7b2e6ae5f7..13eb880d83 100644
--- a/packages/svelte/src/compiler/types/css.d.ts
+++ b/packages/svelte/src/compiler/types/css.d.ts
@@ -6,10 +6,17 @@ export namespace _CSS {
 		end: number;
 	}
 
-	export interface StyleSheet extends BaseNode {
+	export interface StyleSheetBase extends BaseNode {
+		children: Array<Atrule | Rule>;
+	}
+
+	export interface StyleSheetFile extends StyleSheetBase {
+		type: 'StyleSheetFile';
+	}
+
+	export interface StyleSheet extends StyleSheetBase {
 		type: 'StyleSheet';
 		attributes: any[]; // TODO
-		children: Array<Atrule | Rule>;
 		content: {
 			start: number;
 			end: number;
@@ -34,6 +41,10 @@ export namespace _CSS {
 		metadata: {
 			parent_rule: null | Rule;
 			has_local_selectors: boolean;
+			/**
+			 * `true` if the rule contains a ComplexSelector whose RelativeSelectors are all global or global-like
+			 */
+			has_global_selectors: boolean;
 			/**
 			 * `true` if the rule contains a `:global` selector, and therefore everything inside should be unscoped
 			 */
@@ -64,6 +75,7 @@ export namespace _CSS {
 		/** @internal */
 		metadata: {
 			rule: null | Rule;
+			is_global: boolean;
 			/** True if this selector applies to an element. For global selectors, this is defined in css-analyze, for others in css-prune while scoping */
 			used: boolean;
 		};
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index b80b717e42..c04466a24d 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -1,14 +1,14 @@
-import type {
-	ClassDeclaration,
-	Expression,
-	FunctionDeclaration,
-	Identifier,
-	ImportDeclaration
-} from 'estree';
 import type { SourceMap } from 'magic-string';
-import type { Scope } from '../phases/scope.js';
+import type { Binding } from '../phases/scope.js';
 import type { AST, Namespace } from './template.js';
 import type { ICompileDiagnostic } from '../utils/compile_diagnostic.js';
+import type { StateCreationRuneName } from '../../utils.js';
+import type {
+	AssignmentExpression,
+	CallExpression,
+	PrivateIdentifier,
+	PropertyDefinition
+} from 'estree';
 
 /** The return value of `compile` from `svelte/compiler` */
 export interface CompileResult {
@@ -25,6 +25,8 @@ export interface CompileResult {
 		code: string;
 		/** A source map */
 		map: SourceMap;
+		/** Whether or not the CSS includes global rules */
+		hasGlobal: boolean;
 	};
 	/**
 	 * An array of warning objects that were generated during compilation. Each warning has several properties:
@@ -71,9 +73,11 @@ export interface CompileOptions extends ModuleCompileOptions {
 	/**
 	 * If `true`, tells the compiler to generate a custom element constructor instead of a regular Svelte component.
 	 *
+	 * You can also pass a function that receives `{ filename }` and returns a boolean.
+	 *
 	 * @default false
 	 */
-	customElement?: boolean;
+	customElement?: boolean | ((options: { filename: string }) => boolean);
 	/**
 	 * If `true`, getters and setters will be created for the component's props. If `false`, they will only be created for readonly exported values (i.e. those declared with `const`, `class` and `function`). If compiling with `customElement: true` this option defaults to `true`.
 	 *
@@ -99,11 +103,13 @@ export interface CompileOptions extends ModuleCompileOptions {
 	 * - `'injected'`: styles will be included in the `head` when using `render(...)`, and injected into the document (if not already present) when the component mounts. For components compiled as custom elements, styles are injected to the shadow root.
 	 * - `'external'`: the CSS will only be returned in the `css` field of the compilation result. Most Svelte bundler plugins will set this to `'external'` and use the CSS that is statically generated for better performance, as it will result in smaller JavaScript bundles and the output can be served as cacheable `.css` files.
 	 * This is always `'injected'` when compiling with `customElement` mode.
+	 *
+	 * You can also pass a function that receives `{ filename }` and returns either `'injected'` or `'external'`.
 	 */
-	css?: 'injected' | 'external';
+	css?: 'injected' | 'external' | ((options: { filename: string }) => 'injected' | 'external');
 	/**
 	 * A function that takes a `{ hash, css, name, filename }` argument and returns the string that is used as a classname for scoped CSS.
-	 * It defaults to returning `svelte-${hash(css)}`.
+	 * It defaults to returning `svelte-${hash(filename ?? css)}`.
 	 *
 	 * @default undefined
 	 */
@@ -120,6 +126,16 @@ export interface CompileOptions extends ModuleCompileOptions {
 	 * @default false
 	 */
 	preserveWhitespace?: boolean;
+	/**
+	 * Which strategy to use when cloning DOM fragments:
+	 *
+	 * - `html` populates a `<template>` with `innerHTML` and clones it. This is faster, but cannot be used if your app's [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) includes [`require-trusted-types-for 'script'`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/require-trusted-types-for)
+	 * - `tree` creates the fragment one element at a time and _then_ clones it. This is slower, but works everywhere
+	 *
+	 * @default 'html'
+	 * @since 5.33
+	 */
+	fragments?: 'html' | 'tree';
 	/**
 	 * Set to `true` to force the compiler into runes mode, even if there are no indications of runes usage.
 	 * Set to `false` to force the compiler into ignoring runes, even if there are indications of runes usage.
@@ -130,7 +146,7 @@ export interface CompileOptions extends ModuleCompileOptions {
 	 * which is likely not what you want. If you're using Vite, consider using [dynamicCompileOptions](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#dynamiccompileoptions) instead.
 	 * @default undefined
 	 */
-	runes?: boolean | undefined;
+	runes?: boolean | undefined | ((options: { filename: string }) => boolean | undefined);
 	/**
 	 *  If `true`, exposes the Svelte major version in the browser by adding it to a `Set` stored in the global `window.__svelte.v`.
 	 *
@@ -212,6 +228,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
@@ -225,102 +252,66 @@ export type ValidatedCompileOptions = ValidatedModuleCompileOptions &
 		Required<CompileOptions>,
 		| keyof ModuleCompileOptions
 		| 'name'
+		| 'customElement'
 		| 'compatibility'
 		| 'outputFilename'
 		| 'cssOutputFilename'
 		| 'sourcemap'
+		| 'css'
 		| 'runes'
 	> & {
 		name: CompileOptions['name'];
+		customElement: (options: { filename: string }) => boolean;
 		outputFilename: CompileOptions['outputFilename'];
 		cssOutputFilename: CompileOptions['cssOutputFilename'];
 		sourcemap: CompileOptions['sourcemap'];
 		compatibility: Required<Required<CompileOptions>['compatibility']>;
-		runes: CompileOptions['runes'];
+		css: (options: { filename: string }) => 'injected' | 'external';
+		runes: (options: { filename: string }) => boolean | undefined;
 		customElementOptions: AST.SvelteOptions['customElement'];
 		hmr: CompileOptions['hmr'];
 	};
 
+export type BindingKind =
+	| 'normal' // A variable that is not in any way special
+	| 'prop' // A normal prop (possibly reassigned or mutated)
+	| 'bindable_prop' // A prop one can `bind:` to (possibly reassigned or mutated)
+	| 'rest_prop' // A rest prop
+	| 'raw_state' // A state variable
+	| 'state' // A deeply reactive state variable
+	| 'derived' // A derived variable
+	| 'each' // An each block parameter
+	| 'snippet' // A snippet parameter
+	| 'store_sub' // A $store value
+	| 'legacy_reactive' // A `$:` declaration
+	| 'template' // A binding declared in the template, e.g. in an `await` block or `const` tag
+	| 'static'; // A binding whose value is known to be static (i.e. each index)
+
 export type DeclarationKind =
 	| 'var'
 	| 'let'
 	| 'const'
+	| 'using'
+	| 'await using'
 	| 'function'
 	| 'import'
 	| 'param'
 	| 'rest_param'
-	| 'synthetic';
-
-export interface Binding {
-	node: Identifier;
-	/**
-	 * - `normal`: A variable that is not in any way special
-	 * - `prop`: A normal prop (possibly reassigned or mutated)
-	 * - `bindable_prop`: A prop one can `bind:` to (possibly reassigned or mutated)
-	 * - `rest_prop`: A rest prop
-	 * - `state`: A state variable
-	 * - `derived`: A derived variable
-	 * - `each`: An each block parameter
-	 * - `snippet`: A snippet parameter
-	 * - `store_sub`: A $store value
-	 * - `legacy_reactive`: A `$:` declaration
-	 * - `template`: A binding declared in the template, e.g. in an `await` block or `const` tag
-	 */
-	kind:
-		| 'normal'
-		| 'prop'
-		| 'bindable_prop'
-		| 'rest_prop'
-		| 'state'
-		| 'raw_state'
-		| 'derived'
-		| 'each'
-		| 'snippet'
-		| 'store_sub'
-		| 'legacy_reactive'
-		| 'template'
-		| 'snippet';
-	declaration_kind: DeclarationKind;
-	/**
-	 * What the value was initialized with.
-	 * For destructured props such as `let { foo = 'bar' } = $props()` this is `'bar'` and not `$props()`
-	 */
-	initial:
-		| null
-		| Expression
-		| FunctionDeclaration
-		| ClassDeclaration
-		| ImportDeclaration
-		| AST.EachBlock
-		| AST.SnippetBlock;
-	is_called: boolean;
-	references: { node: Identifier; path: AST.SvelteNode[] }[];
-	mutated: boolean;
-	reassigned: boolean;
-	/** `true` if mutated _or_ reassigned */
-	updated: boolean;
-	scope: Scope;
-	/** For `legacy_reactive`: its reactive dependencies */
-	legacy_dependencies: Binding[];
-	/** Legacy props: the `class` in `{ export klass as class}`. $props(): The `class` in { class: klass } = $props() */
-	prop_alias: string | null;
-	/** Additional metadata, varies per binding type */
-	metadata: {
-		/** `true` if is (inside) a rest parameter */
-		inside_rest?: boolean;
-	} | null;
-}
+	| 'synthetic'
+	// TODO not yet implemented, but needed for TypeScript reasons
+	| 'using'
+	| 'await using';
 
-export interface ExpressionMetadata {
-	/** All the bindings that are referenced inside this expression */
-	dependencies: Set<Binding>;
-	/** True if the expression references state directly, or _might_ (via member/call expressions) */
-	has_state: boolean;
-	/** True if the expression involves a call expression (often, it will need to be wrapped in a derived) */
-	has_call: boolean;
+export interface StateField {
+	type: StateCreationRuneName;
+	node: PropertyDefinition | AssignmentExpression;
+	key: PrivateIdentifier;
+	value: CallExpression;
 }
 
 export * from './template.js';
 
+export { Binding, Scope } from '../phases/scope.js';
+
 // TODO this chain is a bit weird
 export { ReactiveStatement } from '../phases/types.js';
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index 40da4072ff..c401d389e5 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -1,12 +1,10 @@
-import type { Binding, ExpressionMetadata } from '#compiler';
+import type { Binding } from '#compiler';
 import type {
 	ArrayExpression,
 	ArrowFunctionExpression,
 	VariableDeclaration,
 	VariableDeclarator,
 	Expression,
-	FunctionDeclaration,
-	FunctionExpression,
 	Identifier,
 	MemberExpression,
 	Node,
@@ -15,10 +13,12 @@ import type {
 	Program,
 	ChainExpression,
 	SimpleCallExpression,
-	SequenceExpression
+	SequenceExpression,
+	SourceLocation
 } from 'estree';
 import type { Scope } from '../phases/scope';
 import type { _CSS } from './css';
+import type { ExpressionMetadata } from '../phases/nodes';
 
 /**
  * - `html`    — the default, for e.g. `<div>` or `<span>`
@@ -27,13 +27,6 @@ import type { _CSS } from './css';
  */
 export type Namespace = 'html' | 'svg' | 'mathml';
 
-export type DelegatedEvent =
-	| {
-			hoisted: true;
-			function: ArrowFunctionExpression | FunctionExpression | FunctionDeclaration;
-	  }
-	| { hoisted: false };
-
 export namespace AST {
 	export interface BaseNode {
 		type: string;
@@ -72,6 +65,8 @@ export namespace AST {
 		instance: Script | null;
 		/** The parsed `<script module>` element, if exists */
 		module: Script | null;
+		/** Comments found in <script> and {expressions} */
+		comments: JSComment[];
 		/** @internal */
 		metadata: {
 			/** Whether the component was parsed with typescript */
@@ -92,7 +87,7 @@ export namespace AST {
 		css?: 'injected';
 		customElement?: {
 			tag?: string;
-			shadow?: 'open' | 'none';
+			shadow?: 'open' | 'none' | ObjectExpression | undefined;
 			props?: Record<
 				string,
 				{
@@ -135,6 +130,12 @@ export namespace AST {
 	export interface HtmlTag extends BaseNode {
 		type: 'HtmlTag';
 		expression: Expression;
+		/** @internal */
+		metadata: {
+			expression: ExpressionMetadata;
+			/** If `true`, the `{@html}` block is the only child of its parent element and can use `parent.innerHTML` directly */
+			is_controlled?: boolean;
+		};
 	}
 
 	/** An HTML comment */
@@ -151,6 +152,24 @@ export namespace AST {
 		declaration: VariableDeclaration & {
 			declarations: [VariableDeclarator & { id: Pattern; init: Expression }];
 		};
+		/** @internal */
+		metadata: {
+			expression: ExpressionMetadata;
+			/** If this const tag contains an await expression, or needs to wait on other async, this is set */
+			promises_id?: Identifier;
+		};
+	}
+
+	/** A `{let ...}` or `{const ...}` tag */
+	export interface DeclarationTag extends BaseNode {
+		type: 'DeclarationTag';
+		declaration: VariableDeclaration;
+		/** @internal */
+		metadata: {
+			expression: ExpressionMetadata;
+			/** If this declaration tag contains an await expression, or needs to wait on other async, this is set */
+			promises_id?: Identifier;
+		};
 	}
 
 	/** A `{@debug ...}` tag */
@@ -165,8 +184,9 @@ export namespace AST {
 		expression: SimpleCallExpression | (ChainExpression & { expression: SimpleCallExpression });
 		/** @internal */
 		metadata: {
+			expression: ExpressionMetadata;
 			dynamic: boolean;
-			args_with_call_expression: Set<number>;
+			arguments: ExpressionMetadata[];
 			path: SvelteNode[];
 			/** The set of locally-defined snippets that this render tag could correspond to,
 			 * used for CSS pruning purposes */
@@ -174,17 +194,31 @@ export namespace AST {
 		};
 	}
 
+	/** A `{@attach foo(...)} tag */
+	export interface AttachTag extends BaseNode {
+		type: 'AttachTag';
+		expression: Expression;
+		/** @internal */
+		metadata: {
+			expression: ExpressionMetadata;
+		};
+	}
+
 	/** An `animate:` directive */
-	export interface AnimateDirective extends BaseNode {
+	export interface AnimateDirective extends BaseAttribute {
 		type: 'AnimateDirective';
 		/** The 'x' in `animate:x` */
 		name: string;
 		/** The y in `animate:x={y}` */
 		expression: null | Expression;
+		/** @internal */
+		metadata: {
+			expression: ExpressionMetadata;
+		};
 	}
 
 	/** A `bind:` directive */
-	export interface BindDirective extends BaseNode {
+	export interface BindDirective extends BaseAttribute {
 		type: 'BindDirective';
 		/** The 'x' in `bind:x` */
 		name: string;
@@ -192,13 +226,15 @@ export namespace AST {
 		expression: Identifier | MemberExpression | SequenceExpression;
 		/** @internal */
 		metadata: {
+			binding?: Binding | null;
 			binding_group_name: Identifier;
 			parent_each_blocks: EachBlock[];
+			expression: ExpressionMetadata;
 		};
 	}
 
 	/** A `class:` directive */
-	export interface ClassDirective extends BaseNode {
+	export interface ClassDirective extends BaseAttribute {
 		type: 'ClassDirective';
 		/** The 'x' in `class:x` */
 		name: 'class';
@@ -211,7 +247,7 @@ export namespace AST {
 	}
 
 	/** A `let:` directive */
-	export interface LetDirective extends BaseNode {
+	export interface LetDirective extends BaseAttribute {
 		type: 'LetDirective';
 		/** The 'x' in `let:x` */
 		name: string;
@@ -220,13 +256,23 @@ export namespace AST {
 	}
 
 	/** An `on:` directive */
-	export interface OnDirective extends BaseNode {
+	export interface OnDirective extends BaseAttribute {
 		type: 'OnDirective';
 		/** The 'x' in `on:x` */
 		name: string;
 		/** The 'y' in `on:x={y}` */
 		expression: null | Expression;
-		modifiers: string[]; // TODO specify
+		modifiers: Array<
+			| 'capture'
+			| 'nonpassive'
+			| 'once'
+			| 'passive'
+			| 'preventDefault'
+			| 'self'
+			| 'stopImmediatePropagation'
+			| 'stopPropagation'
+			| 'trusted'
+		>;
 		/** @internal */
 		metadata: {
 			expression: ExpressionMetadata;
@@ -234,7 +280,7 @@ export namespace AST {
 	}
 
 	/** A `style:` directive */
-	export interface StyleDirective extends BaseNode {
+	export interface StyleDirective extends BaseAttribute {
 		type: 'StyleDirective';
 		/** The 'x' in `style:x` */
 		name: string;
@@ -249,7 +295,7 @@ export namespace AST {
 
 	// TODO have separate in/out/transition directives
 	/** A `transition:`, `in:` or `out:` directive */
-	export interface TransitionDirective extends BaseNode {
+	export interface TransitionDirective extends BaseAttribute {
 		type: 'TransitionDirective';
 		/** The 'x' in `transition:x` */
 		name: string;
@@ -260,20 +306,29 @@ export namespace AST {
 		intro: boolean;
 		/** True if this is a `transition:` or `out:` directive */
 		outro: boolean;
+		/** @internal */
+		metadata: {
+			expression: ExpressionMetadata;
+		};
 	}
 
 	/** A `use:` directive */
-	export interface UseDirective extends BaseNode {
+	export interface UseDirective extends BaseAttribute {
 		type: 'UseDirective';
 		/** The 'x' in `use:x` */
 		name: string;
 		/** The 'y' in `use:x={y}` */
 		expression: null | Expression;
+		/** @internal */
+		metadata: {
+			expression: ExpressionMetadata;
+		};
 	}
 
-	interface BaseElement extends BaseNode {
+	export interface BaseElement extends BaseNode {
 		name: string;
-		attributes: Array<Attribute | SpreadAttribute | Directive>;
+		name_loc: SourceLocation;
+		attributes: Array<Attribute | SpreadAttribute | Directive | AttachTag>;
 		fragment: Fragment;
 	}
 
@@ -281,6 +336,7 @@ export namespace AST {
 		type: 'Component';
 		/** @internal */
 		metadata: {
+			expression: ExpressionMetadata;
 			scopes: Record<string, Scope>;
 			dynamic: boolean;
 			/** The set of locally-defined snippets that this component tag could render,
@@ -312,6 +368,8 @@ export namespace AST {
 			has_spread: boolean;
 			scoped: boolean;
 			path: SvelteNode[];
+			/** Synthetic value attribute for <option> with single expression child, used for client-only handling */
+			synthetic_value_node: ExpressionTag | null;
 		};
 	}
 
@@ -326,6 +384,7 @@ export namespace AST {
 		expression: Expression;
 		/** @internal */
 		metadata: {
+			expression: ExpressionMetadata;
 			scopes: Record<string, Scope>;
 			/** The set of locally-defined snippets that this component tag could render,
 			 * used for CSS pruning purposes */
@@ -345,6 +404,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.
@@ -419,8 +479,6 @@ export namespace AST {
 			expression: ExpressionMetadata;
 			keyed: boolean;
 			contains_group_binding: boolean;
-			/** Set if something in the array expression is shadowed within the each block */
-			array_name: Identifier | null;
 			index: Identifier;
 			declarations: Map<string, Binding>;
 			/**
@@ -429,6 +487,11 @@ export namespace AST {
 			 * This saves us from creating an extra comment and insertion being faster.
 			 */
 			is_controlled: boolean;
+			/**
+			 * Bindings this each block transitively depends on. In legacy mode, we
+			 * invalidate these bindings when mutations happen to each block items
+			 */
+			transitive_deps: Set<Binding>;
 		};
 	}
 
@@ -439,6 +502,12 @@ export namespace AST {
 		test: Expression;
 		consequent: Fragment;
 		alternate: Fragment | null;
+		/** @internal */
+		metadata: {
+			/** List of else-if blocks that can be flattened into this if block */
+			flattened?: IfBlock[];
+			expression: ExpressionMetadata;
+		};
 	}
 
 	/** An `{#await ...}` block */
@@ -453,18 +522,27 @@ export namespace AST {
 		pending: Fragment | null;
 		then: Fragment | null;
 		catch: Fragment | null;
+		/** @internal */
+		metadata: {
+			expression: ExpressionMetadata;
+		};
 	}
 
 	export interface KeyBlock extends BaseNode {
 		type: 'KeyBlock';
 		expression: Expression;
 		fragment: Fragment;
+		/** @internal */
+		metadata: {
+			expression: ExpressionMetadata;
+		};
 	}
 
 	export interface SnippetBlock extends BaseNode {
 		type: 'SnippetBlock';
 		expression: Identifier;
 		parameters: Pattern[];
+		typeParams?: string;
 		body: Fragment;
 		/** @internal */
 		metadata: {
@@ -475,18 +553,23 @@ export namespace AST {
 		};
 	}
 
-	export interface Attribute extends BaseNode {
-		type: 'Attribute';
+	export interface BaseAttribute extends BaseNode {
 		name: string;
+		name_loc: SourceLocation | null;
+	}
+
+	export interface Attribute extends BaseAttribute {
+		type: 'Attribute';
 		/**
 		 * Quoted/string values are represented by an array, even if they contain a single expression like `"{x}"`
 		 */
 		value: true | ExpressionTag | Array<Text | ExpressionTag>;
 		/** @internal */
 		metadata: {
-			expression: ExpressionMetadata;
 			/** May be set if this is an event attribute */
-			delegated: null | DelegatedEvent;
+			delegated: boolean;
+			/** May be `true` if this is a `class` attribute that needs `clsx` */
+			needs_clsx: boolean;
 		};
 	}
 
@@ -506,6 +589,17 @@ export namespace AST {
 		attributes: Attribute[];
 	}
 
+	export interface JSComment {
+		type: 'Line' | 'Block';
+		value: string;
+		start: number;
+		end: number;
+		loc: {
+			start: { line: number; column: number };
+			end: { line: number; column: number };
+		};
+	}
+
 	export type AttributeLike = Attribute | SpreadAttribute | Directive;
 
 	export type Directive =
@@ -543,7 +637,14 @@ export namespace AST {
 		| AST.SvelteBoundary
 		| AST.SveltePortal;
 
-	export type Tag = AST.ExpressionTag | AST.HtmlTag | AST.ConstTag | AST.DebugTag | AST.RenderTag;
+	export type Tag =
+		| AST.AttachTag
+		| AST.ConstTag
+		| AST.DeclarationTag
+		| AST.DebugTag
+		| AST.ExpressionTag
+		| AST.HtmlTag
+		| AST.RenderTag;
 
 	export type TemplateNode =
 		| AST.Root
@@ -553,10 +654,11 @@ export namespace AST {
 		| AST.Attribute
 		| AST.SpreadAttribute
 		| Directive
+		| AST.AttachTag
 		| AST.Comment
 		| Block;
 
-	export type SvelteNode = Node | TemplateNode | AST.Fragment | _CSS.Node;
+	export type SvelteNode = Node | TemplateNode | AST.Fragment | _CSS.Node | Script;
 
 	export type { _CSS as CSS };
 }
diff --git a/packages/svelte/src/compiler/utils/ast.js b/packages/svelte/src/compiler/utils/ast.js
index 0a24d2ff0d..75aadd905b 100644
--- a/packages/svelte/src/compiler/utils/ast.js
+++ b/packages/svelte/src/compiler/utils/ast.js
@@ -1,7 +1,7 @@
-/** @import { AST } from '#compiler' */
+/** @import { AST, Scope } from '#compiler' */
 /** @import * as ESTree from 'estree' */
 import { walk } from 'zimmerframe';
-import * as b from '../utils/builders.js';
+import * as b from '#compiler/builders';
 
 /**
  * Gets the left-most identifier of a member expression or identifier.
@@ -227,40 +227,50 @@ export function extract_identifiers_from_destructuring(node, nodes = []) {
  * @property {ESTree.Identifier | ESTree.MemberExpression} node The node the destructuring path end in. Can be a member expression only for assignment expressions
  * @property {boolean} is_rest `true` if this is a `...rest` destructuring
  * @property {boolean} has_default_value `true` if this has a fallback value like `const { foo = 'bar } = ..`
- * @property {(expression: ESTree.Expression) => ESTree.Identifier | ESTree.MemberExpression | ESTree.CallExpression | ESTree.AwaitExpression} expression Returns an expression which walks the path starting at the given expression.
+ * @property {ESTree.Expression} expression The value of the current path
  * This will be a call expression if a rest element or default is involved — e.g. `const { foo: { bar: baz = 42 }, ...rest } = quux` — since we can't represent `baz` or `rest` purely as a path
  * Will be an await expression in case of an async default value (`const { foo = await bar } = ...`)
- * @property {(expression: ESTree.Expression) => ESTree.Identifier | ESTree.MemberExpression | ESTree.CallExpression | ESTree.AwaitExpression} update_expression Like `expression` but without default values.
+ * @property {ESTree.Expression} update_expression Like `expression` but without default values.
  */
 
 /**
  * Extracts all destructured assignments from a pattern.
+ * For each `id` in the returned `inserts`, make sure to adjust the `name`.
  * @param {ESTree.Node} param
- * @returns {DestructuredAssignment[]}
+ * @param {ESTree.Expression} initial
+ * @returns {{ inserts: Array<{ id: ESTree.Identifier, value: ESTree.Expression }>, paths: DestructuredAssignment[] }}
  */
-export function extract_paths(param) {
-	return _extract_paths(
-		[],
-		param,
-		(node) => /** @type {ESTree.Identifier | ESTree.MemberExpression} */ (node),
-		(node) => /** @type {ESTree.Identifier | ESTree.MemberExpression} */ (node),
-		false
-	);
+export function extract_paths(param, initial) {
+	/**
+	 * When dealing with array destructuring patterns (`let [a, b, c] = $derived(blah())`)
+	 * we need an intermediate declaration that creates an array, since `blah()` could
+	 * return a non-array-like iterator
+	 * @type {Array<{ id: ESTree.Identifier, value: ESTree.Expression }>}
+	 */
+	const inserts = [];
+
+	/** @type {DestructuredAssignment[]} */
+	const paths = [];
+
+	_extract_paths(paths, inserts, param, initial, initial, false);
+
+	return { inserts, paths };
 }
 
 /**
- * @param {DestructuredAssignment[]} assignments
+ * @param {DestructuredAssignment[]} paths
+ * @param {Array<{ id: ESTree.Identifier, value: ESTree.Expression }>} inserts
  * @param {ESTree.Node} param
- * @param {DestructuredAssignment['expression']} expression
- * @param {DestructuredAssignment['update_expression']} update_expression
+ * @param {ESTree.Expression} expression
+ * @param {ESTree.Expression} update_expression
  * @param {boolean} has_default_value
  * @returns {DestructuredAssignment[]}
  */
-function _extract_paths(assignments = [], param, expression, update_expression, has_default_value) {
+function _extract_paths(paths, inserts, param, expression, update_expression, has_default_value) {
 	switch (param.type) {
 		case 'Identifier':
 		case 'MemberExpression':
-			assignments.push({
+			paths.push({
 				node: param,
 				is_rest: false,
 				has_default_value,
@@ -272,28 +282,25 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 		case 'ObjectPattern':
 			for (const prop of param.properties) {
 				if (prop.type === 'RestElement') {
-					/** @type {DestructuredAssignment['expression']} */
-					const rest_expression = (object) => {
-						/** @type {ESTree.Expression[]} */
-						const props = [];
-
-						for (const p of param.properties) {
-							if (p.type === 'Property' && p.key.type !== 'PrivateIdentifier') {
-								if (p.key.type === 'Identifier' && !p.computed) {
-									props.push(b.literal(p.key.name));
-								} else if (p.key.type === 'Literal') {
-									props.push(b.literal(String(p.key.value)));
-								} else {
-									props.push(b.call('String', p.key));
-								}
+					/** @type {ESTree.Expression[]} */
+					const props = [];
+
+					for (const p of param.properties) {
+						if (p.type === 'Property' && p.key.type !== 'PrivateIdentifier') {
+							if (p.key.type === 'Identifier' && !p.computed) {
+								props.push(b.literal(p.key.name));
+							} else if (p.key.type === 'Literal') {
+								props.push(b.literal(String(p.key.value)));
+							} else {
+								props.push(b.call('String', p.key));
 							}
 						}
+					}
 
-						return b.call('$.exclude_from_object', expression(object), b.array(props));
-					};
+					const rest_expression = b.call('$.exclude_from_object', expression, b.array(props));
 
 					if (prop.argument.type === 'Identifier') {
-						assignments.push({
+						paths.push({
 							node: prop.argument,
 							is_rest: true,
 							has_default_value,
@@ -302,7 +309,8 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 						});
 					} else {
 						_extract_paths(
-							assignments,
+							paths,
+							inserts,
 							prop.argument,
 							rest_expression,
 							rest_expression,
@@ -310,11 +318,15 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 						);
 					}
 				} else {
-					/** @type {DestructuredAssignment['expression']} */
-					const object_expression = (object) =>
-						b.member(expression(object), prop.key, prop.computed || prop.key.type !== 'Identifier');
+					const object_expression = b.member(
+						expression,
+						prop.key,
+						prop.computed || prop.key.type !== 'Identifier'
+					);
+
 					_extract_paths(
-						assignments,
+						paths,
+						inserts,
 						prop.value,
 						object_expression,
 						object_expression,
@@ -325,16 +337,27 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 
 			break;
 
-		case 'ArrayPattern':
+		case 'ArrayPattern': {
+			// we create an intermediate declaration to convert iterables to arrays if necessary.
+			// the consumer is responsible for setting the name of the identifier
+			const id = b.id('#');
+
+			const value = b.call(
+				'$.to_array',
+				expression,
+				param.elements.at(-1)?.type === 'RestElement' ? undefined : b.literal(param.elements.length)
+			);
+
+			inserts.push({ id, value });
+
 			for (let i = 0; i < param.elements.length; i += 1) {
 				const element = param.elements[i];
 				if (element) {
 					if (element.type === 'RestElement') {
-						/** @type {DestructuredAssignment['expression']} */
-						const rest_expression = (object) =>
-							b.call(b.member(expression(object), 'slice'), b.literal(i));
+						const rest_expression = b.call(b.member(id, 'slice'), b.literal(i));
+
 						if (element.argument.type === 'Identifier') {
-							assignments.push({
+							paths.push({
 								node: element.argument,
 								is_rest: true,
 								has_default_value,
@@ -343,7 +366,8 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 							});
 						} else {
 							_extract_paths(
-								assignments,
+								paths,
+								inserts,
 								element.argument,
 								rest_expression,
 								rest_expression,
@@ -351,10 +375,11 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 							);
 						}
 					} else {
-						/** @type {DestructuredAssignment['expression']} */
-						const array_expression = (object) => b.member(expression(object), b.literal(i), true);
+						const array_expression = b.member(id, b.literal(i), true);
+
 						_extract_paths(
-							assignments,
+							paths,
+							inserts,
 							element,
 							array_expression,
 							array_expression,
@@ -365,13 +390,13 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 			}
 
 			break;
+		}
 
 		case 'AssignmentPattern': {
-			/** @type {DestructuredAssignment['expression']} */
-			const fallback_expression = (object) => build_fallback(expression(object), param.right);
+			const fallback_expression = build_fallback(expression, param.right);
 
 			if (param.left.type === 'Identifier') {
-				assignments.push({
+				paths.push({
 					node: param.left,
 					is_rest: false,
 					has_default_value: true,
@@ -379,14 +404,14 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 					update_expression
 				});
 			} else {
-				_extract_paths(assignments, param.left, fallback_expression, update_expression, true);
+				_extract_paths(paths, inserts, param.left, fallback_expression, update_expression, true);
 			}
 
 			break;
 		}
 	}
 
-	return assignments;
+	return paths;
 }
 
 /**
@@ -580,5 +605,35 @@ export function build_assignment_value(operator, left, right) {
 	return operator === '='
 		? right
 		: // turn something like x += 1 into x = x + 1
-			b.binary(/** @type {ESTree.BinaryOperator} */ (operator.slice(0, -1)), left, right);
+			['||=', '&&=', '??='].includes(operator)
+			? b.logical(/** @type {ESTree.LogicalOperator} */ (operator.slice(0, -1)), left, right)
+			: b.binary(/** @type {ESTree.BinaryOperator} */ (operator.slice(0, -1)), left, right);
+}
+
+/**
+ * @param {ESTree.Node} node
+ */
+export function has_await_expression(node) {
+	let has_await = false;
+
+	walk(node, null, {
+		AwaitExpression(_node, context) {
+			has_await = true;
+			context.stop();
+		},
+		// don't traverse into these
+		FunctionDeclaration() {},
+		FunctionExpression() {},
+		ArrowFunctionExpression() {}
+	});
+
+	return has_await;
+}
+
+/**
+ * Turns `await ...` to `(await $.save(...))()`
+ * @param {ESTree.Expression} expression
+ */
+export function save(expression) {
+	return b.call(b.await(b.call('$.save', expression)));
 }
diff --git a/packages/svelte/src/compiler/utils/builders.js b/packages/svelte/src/compiler/utils/builders.js
index ecb595d74d..1f48f7fd8b 100644
--- a/packages/svelte/src/compiler/utils/builders.js
+++ b/packages/svelte/src/compiler/utils/builders.js
@@ -1,6 +1,8 @@
 /** @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';
+import { has_await_expression } from './ast.js';
 
 /**
  * @param {Array<ESTree.Expression | ESTree.SpreadElement | null>} elements
@@ -30,17 +32,24 @@ 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) {
+	// optimize `async () => await x()`, but not `async () => await x(await y)`
+	if (async && body.type === 'AwaitExpression') {
+		if (!has_await_expression(body.argument)) {
+			return arrow(params, body.argument);
+		}
+	}
+
 	return {
 		type: 'ArrowFunctionExpression',
 		params,
 		body,
 		expression: body.type !== 'BlockStatement',
 		generator: false,
-		async: false,
-		metadata: /** @type {any} */ (null) // should not be used by codegen
+		async
 	};
 }
 
@@ -54,15 +63,6 @@ export function assignment(operator, left, right) {
 	return { type: 'AssignmentExpression', operator, left, right };
 }
 
-/**
- * @template T
- * @param {T & ESTree.BaseFunction} func
- * @returns {T & ESTree.BaseFunction}
- */
-export function async(func) {
-	return { ...func, async: true };
-}
-
 /**
  * @param {ESTree.Expression} argument
  * @returns {ESTree.AwaitExpression}
@@ -89,6 +89,17 @@ export function block(body) {
 	return { type: 'BlockStatement', body };
 }
 
+/**
+ * @param {ESTree.Identifier | null} id
+ * @param {ESTree.ClassBody} body
+ * @param {ESTree.Expression | null} [superClass]
+ * @param {ESTree.Decorator[]} [decorators]
+ * @returns {ESTree.ClassExpression}
+ */
+export function class_expression(id, body, superClass, decorators = []) {
+	return { type: 'ClassExpression', body, superClass, decorators };
+}
+
 /**
  * @param {string} name
  * @param {ESTree.Statement} body
@@ -100,14 +111,14 @@ 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) {
 	if (typeof callee === 'string') callee = id(callee);
 	args = args.slice();
 
-	// replacing missing arguments with `undefined`, unless they're at the end in which case remove them
+	// replacing missing arguments with `void(0)`, unless they're at the end in which case remove them
 	let i = args.length;
 	let popping = true;
 	while (i--) {
@@ -115,7 +126,7 @@ export function call(callee, ...args) {
 			if (popping) {
 				args.pop();
 			} else {
-				args[i] = id('undefined');
+				args[i] = void0;
 			}
 		} else {
 			popping = false;
@@ -154,6 +165,8 @@ export function unary(operator, argument) {
 	return { type: 'UnaryExpression', argument, operator, prefix: true };
 }
 
+export const void0 = unary('void', literal(0));
+
 /**
  * @param {ESTree.Expression} test
  * @param {ESTree.Expression} consequent
@@ -175,7 +188,7 @@ export function logical(operator, left, right) {
 }
 
 /**
- * @param {'const' | 'let' | 'var'} kind
+ * @param {ESTree.VariableDeclaration['kind']} kind
  * @param {ESTree.VariableDeclarator[]} declarations
  * @returns {ESTree.VariableDeclaration}
  */
@@ -189,7 +202,7 @@ export function declaration(kind, declarations) {
 
 /**
  * @param {ESTree.Pattern | string} pattern
- * @param {ESTree.Expression} [init]
+ * @param {ESTree.Expression | null} [init]
  * @returns {ESTree.VariableDeclarator}
  */
 export function declarator(pattern, init) {
@@ -210,21 +223,38 @@ export function export_default(declaration) {
 	return { type: 'ExportDefaultDeclaration', declaration };
 }
 
+/**
+ * @param {ESTree.VariableDeclaration | ESTree.Pattern} left
+ * @param {ESTree.Expression} right
+ * @param {ESTree.Statement} body
+ * @param {boolean} [_await]
+ * @returns {ESTree.ForOfStatement}
+ */
+export function for_of(left, right, body, _await = false) {
+	return {
+		type: 'ForOfStatement',
+		left,
+		right,
+		body,
+		await: _await
+	};
+}
+
 /**
  * @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,
-		metadata: /** @type {any} */ (null) // should not be used by codegen
+		async
 	};
 }
 
@@ -239,10 +269,14 @@ export function get(name, body) {
 
 /**
  * @param {string} name
+ * @param {ESTree.SourceLocation | null} [loc]
  * @returns {ESTree.Identifier}
  */
-export function id(name) {
-	return { type: 'Identifier', name };
+export function id(name, loc) {
+	const node = /** @type {ESTree.Identifier} */ ({ type: 'Identifier', name });
+	if (loc) node.loc = loc;
+
+	return node;
 }
 
 /**
@@ -350,7 +384,14 @@ export function prop(kind, key, value, computed = false) {
  * @returns {ESTree.PropertyDefinition}
  */
 export function prop_def(key, value, computed = false, is_static = false) {
-	return { type: 'PropertyDefinition', key, value, computed, static: is_static };
+	return {
+		type: 'PropertyDefinition',
+		decorators: [],
+		key,
+		value,
+		computed,
+		static: is_static
+	};
 }
 
 /**
@@ -419,19 +460,16 @@ 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) {
 	if (
-		expression.type === 'ArrowFunctionExpression' &&
 		expression.async === false &&
 		expression.body.type === 'CallExpression' &&
 		expression.body.callee.type === 'Identifier' &&
@@ -483,7 +521,7 @@ export function do_while(test, body) {
 
 const true_instance = literal(true);
 const false_instance = literal(false);
-const null_instane = literal(null);
+const null_instance = literal(null);
 
 /** @type {ESTree.DebuggerStatement} */
 const debugger_builder = {
@@ -497,7 +535,7 @@ const this_instance = {
 
 /**
  * @param {string | ESTree.Pattern} pattern
- * @param { ESTree.Expression} [init]
+ * @param {ESTree.Expression | null} [init]
  * @returns {ESTree.VariableDeclaration}
  */
 function let_builder(pattern, init) {
@@ -506,7 +544,7 @@ function let_builder(pattern, init) {
 
 /**
  * @param {string | ESTree.Pattern} pattern
- * @param { ESTree.Expression} init
+ * @param {ESTree.Expression | null} init
  * @returns {ESTree.VariableDeclaration}
  */
 function const_builder(pattern, init) {
@@ -515,7 +553,7 @@ function const_builder(pattern, init) {
 
 /**
  * @param {string | ESTree.Pattern} pattern
- * @param { ESTree.Expression} [init]
+ * @param {ESTree.Expression | null} [init]
  * @returns {ESTree.VariableDeclaration}
  */
 function var_builder(pattern, init) {
@@ -547,6 +585,7 @@ function for_builder(init, test, update, body) {
 export function method(kind, key, params, body, computed = false, is_static = false) {
 	return {
 		type: 'MethodDefinition',
+		decorators: [],
 		key,
 		kind,
 		value: function_builder(null, params, block(body)),
@@ -562,15 +601,14 @@ export function method(kind, key, params, body, computed = false, is_static = fa
  * @param {ESTree.BlockStatement} body
  * @returns {ESTree.FunctionExpression}
  */
-function function_builder(id, params, body) {
+function function_builder(id, params, body, async = false) {
 	return {
 		type: 'FunctionExpression',
 		id,
 		params,
 		body,
 		generator: false,
-		async: false,
-		metadata: /** @type {any} */ (null) // should not be used by codegen
+		async
 	};
 }
 
@@ -592,6 +630,7 @@ function if_builder(test, consequent, alternate) {
 export function import_all(as, source) {
 	return {
 		type: 'ImportDeclaration',
+		attributes: [],
 		source: literal(source),
 		specifiers: [import_namespace(as)]
 	};
@@ -605,6 +644,7 @@ export function import_all(as, source) {
 export function imports(parts, source) {
 	return {
 		type: 'ImportDeclaration',
+		attributes: [],
 		source: literal(source),
 		specifiers: parts.map((p) => ({
 			type: 'ImportSpecifier',
@@ -645,8 +685,9 @@ export {
 	return_builder as return,
 	if_builder as if,
 	this_instance as this,
-	null_instane as null,
-	debugger_builder as debugger
+	null_instance as null,
+	debugger_builder as debugger,
+	new_builder as new
 };
 
 /**
diff --git a/packages/svelte/src/compiler/utils/compile_diagnostic.js b/packages/svelte/src/compiler/utils/compile_diagnostic.js
index db938cf2bd..95d028ee35 100644
--- a/packages/svelte/src/compiler/utils/compile_diagnostic.js
+++ b/packages/svelte/src/compiler/utils/compile_diagnostic.js
@@ -11,12 +11,11 @@ function tabs_to_spaces(str) {
 }
 
 /**
- * @param {string} source
  * @param {number} line
  * @param {number} column
  */
-function get_code_frame(source, line, column) {
-	const lines = source.split('\n');
+function get_code_frame(line, column) {
+	const lines = state.source_lines;
 	const frame_start = Math.max(0, line - 2);
 	const frame_end = Math.min(line + 3, lines.length);
 	const digits = String(frame_end + 1).length;
@@ -61,7 +60,7 @@ export class CompileDiagnostic {
 		this.code = code;
 		this.message = message;
 
-		if (state.filename) {
+		if (state.filename !== state.UNKNOWN_FILENAME) {
 			this.filename = state.filename;
 		}
 
@@ -70,7 +69,7 @@ export class CompileDiagnostic {
 			this.start = state.locator(position[0]);
 			this.end = state.locator(position[1]);
 			if (this.start && this.end) {
-				this.frame = get_code_frame(state.source, this.start.line - 1, this.end.column);
+				this.frame = get_code_frame(this.start.line - 1, this.end.column);
 			}
 		}
 	}
diff --git a/packages/svelte/src/compiler/utils/mapped_code.js b/packages/svelte/src/compiler/utils/mapped_code.js
index 089078af7f..7686ba59c6 100644
--- a/packages/svelte/src/compiler/utils/mapped_code.js
+++ b/packages/svelte/src/compiler/utils/mapped_code.js
@@ -2,8 +2,8 @@
 /** @import { Processed } from '../preprocess/public.js' */
 /** @import { SourceMap } from 'magic-string' */
 /** @import { Source } from '../preprocess/private.js' */
-/** @import { DecodedSourceMap, SourceMapSegment, RawSourceMap } from '@ampproject/remapping' */
-import remapping from '@ampproject/remapping';
+/** @import { DecodedSourceMap, SourceMapSegment, RawSourceMap } from '@jridgewell/remapping' */
+import remapping from '@jridgewell/remapping';
 import { push_array } from './push_array.js';
 
 /**
@@ -398,10 +398,13 @@ export function merge_with_preprocessor_map(result, options, source_name) {
 		// map may contain a different file name. Patch our map beforehand to align sources so merging
 		// with the preprocessor map works correctly.
 		result.map.sources = [file_basename];
-		result.map = apply_preprocessor_sourcemap(
-			file_basename,
+		Object.assign(
 			result.map,
-			/** @type {any} */ (options.sourcemap)
+			apply_preprocessor_sourcemap(
+				file_basename,
+				result.map,
+				/** @type {any} */ (options.sourcemap)
+			)
 		);
 		// After applying the preprocessor map, we need to do the inverse and make the sources
 		// relative to the input file again in case the output code is in a different directory.
diff --git a/packages/svelte/src/compiler/validate-options.js b/packages/svelte/src/compiler/validate-options.js
index ab932ed5bc..f7c56aa33c 100644
--- a/packages/svelte/src/compiler/validate-options.js
+++ b/packages/svelte/src/compiler/validate-options.js
@@ -8,7 +8,7 @@ import * as w from './warnings.js';
  * @typedef {(input: Input, keypath: string) => Required<Output>} Validator
  */
 
-const common = {
+const common_options = {
 	filename: string('(unknown)'),
 
 	// default to process.cwd() where it exists to replicate svelte4 behavior (and make Deno work with this as well)
@@ -41,111 +41,142 @@ const common = {
 		return input;
 	}),
 
-	warningFilter: fun(() => true)
+	warningFilter: fun(() => true),
+
+	experimental: object({
+		async: boolean(false)
+	})
 };
 
-export const validate_module_options =
-	/** @type {Validator<ModuleCompileOptions, ValidatedModuleCompileOptions>} */ (
-		object({
-			...common
-		})
-	);
+const component_options = {
+	accessors: deprecate(w.options_deprecated_accessors, boolean(false)),
+
+	/** @type {Validator<'injected' | 'external' | ((options: { filename: string }) => 'injected' | 'external'), (options: { filename: string }) => 'injected' | 'external'>} */
+	css: parametric(
+		/** @type {(options: { filename: string }) => 'injected' | 'external'} */ (() => 'external'),
+		(input) => {
+			if (input === true || input === false) {
+				throw_error(
+					'The boolean options have been removed from the css option. Use "external" instead of false and "injected" instead of true'
+				);
+			}
+			if (input === 'none') {
+				throw_error(
+					'css: "none" is no longer a valid option. If this was crucial for you, please open an issue on GitHub with your use case.'
+				);
+			}
 
-export const validate_component_options =
-	/** @type {Validator<CompileOptions, ValidatedCompileOptions>} */ (
-		object({
-			...common,
+			if (input !== 'external' && input !== 'injected') {
+				throw_error(`css should be either "external" (default, recommended) or "injected"`);
+			}
 
-			accessors: deprecate(w.options_deprecated_accessors, boolean(false)),
+			return /** @type {'external' | 'injected'} */ (input);
+		}
+	),
 
-			css: validator('external', (input) => {
-				if (input === true || input === false) {
-					throw_error(
-						'The boolean options have been removed from the css option. Use "external" instead of false and "injected" instead of true'
-					);
-				}
-				if (input === 'none') {
-					throw_error(
-						'css: "none" is no longer a valid option. If this was crucial for you, please open an issue on GitHub with your use case.'
-					);
-				}
+	cssHash: fun(({ css, filename, hash }) => {
+		return `svelte-${hash(filename === '(unknown)' ? css : filename ?? css)}`;
+	}),
 
-				if (input !== 'external' && input !== 'injected') {
-					throw_error(`css should be either "external" (default, recommended) or "injected"`);
-				}
+	// TODO this is a sourcemap option, would be good to put under a sourcemap namespace
+	cssOutputFilename: string(undefined),
+
+	/** @type {Validator<boolean | ((options: { filename: string }) => boolean), (options: { filename: string }) => boolean>} */
+	customElement: parametric(
+		/** @type {(options: { filename: string }) => boolean} */ (() => false),
+		(input, keypath) => {
+			if (typeof input !== 'boolean') {
+				throw_error(`${keypath} should be true or false`);
+			}
 
-				return input;
-			}),
+			return /** @type {boolean} */ (input);
+		}
+	),
 
-			cssHash: fun(({ css, hash }) => {
-				return `svelte-${hash(css)}`;
-			}),
+	discloseVersion: boolean(true),
 
-			// TODO this is a sourcemap option, would be good to put under a sourcemap namespace
-			cssOutputFilename: string(undefined),
+	immutable: deprecate(w.options_deprecated_immutable, boolean(false)),
+
+	legacy: removed(
+		'The legacy option has been removed. If you are using this because of legacy.componentApi, use compatibility.componentApi instead'
+	),
 
-			customElement: boolean(false),
+	compatibility: object({
+		componentApi: list([4, 5], 5)
+	}),
 
-			discloseVersion: boolean(true),
+	loopGuardTimeout: warn_removed(w.options_removed_loop_guard_timeout),
 
-			immutable: deprecate(w.options_deprecated_immutable, boolean(false)),
+	name: string(undefined),
 
-			legacy: removed(
-				'The legacy option has been removed. If you are using this because of legacy.componentApi, use compatibility.componentApi instead'
-			),
+	namespace: list(['html', 'mathml', 'svg']),
 
-			compatibility: object({
-				componentApi: list([4, 5], 5)
-			}),
+	modernAst: boolean(false),
 
-			loopGuardTimeout: warn_removed(w.options_removed_loop_guard_timeout),
+	outputFilename: string(undefined),
 
-			name: string(undefined),
+	preserveComments: boolean(false),
 
-			namespace: list(['html', 'mathml', 'svg']),
+	fragments: list(['html', 'tree']),
 
-			modernAst: boolean(false),
+	preserveWhitespace: boolean(false),
 
-			outputFilename: string(undefined),
+	/** @type {Validator<boolean | undefined | (() => boolean | undefined), () => boolean | undefined>} */
+	runes: parametric(() => /** @type {boolean | undefined} */ (undefined)),
 
-			preserveComments: boolean(false),
+	hmr: boolean(false),
 
-			preserveWhitespace: boolean(false),
+	sourcemap: validator(undefined, (input) => {
+		// Source maps can take on a variety of values, including string, JSON, map objects from magic-string and source-map,
+		// so there's no good way to check type validity here
+		return input;
+	}),
 
-			runes: boolean(undefined),
+	enableSourcemap: warn_removed(w.options_removed_enable_sourcemap),
 
-			hmr: boolean(false),
+	hydratable: warn_removed(w.options_removed_hydratable),
 
-			sourcemap: validator(undefined, (input) => {
-				// Source maps can take on a variety of values, including string, JSON, map objects from magic-string and source-map,
-				// so there's no good way to check type validity here
-				return input;
-			}),
+	format: removed(
+		'The format option has been removed in Svelte 4, the compiler only outputs ESM now. Remove "format" from your compiler options. ' +
+			'If you did not set this yourself, bump the version of your bundler plugin (vite-plugin-svelte/rollup-plugin-svelte/svelte-loader)'
+	),
 
-			enableSourcemap: warn_removed(w.options_removed_enable_sourcemap),
-			hydratable: warn_removed(w.options_removed_hydratable),
-			format: removed(
-				'The format option has been removed in Svelte 4, the compiler only outputs ESM now. Remove "format" from your compiler options. ' +
-					'If you did not set this yourself, bump the version of your bundler plugin (vite-plugin-svelte/rollup-plugin-svelte/svelte-loader)'
-			),
-			tag: removed(
-				'The tag option has been removed in Svelte 5. Use `<svelte:options customElement="tag-name" />` inside the component instead. ' +
-					'If that does not solve your use case, please open an issue on GitHub with details.'
-			),
-			sveltePath: removed(
-				'The sveltePath option has been removed in Svelte 5. ' +
-					'If this option was crucial for you, please open an issue on GitHub with your use case.'
-			),
-			// These two were primarily created for svelte-preprocess (https://github.com/sveltejs/svelte/pull/6194),
-			// but with new TypeScript compilation modes strictly separating types it's not necessary anymore
-			errorMode: removed(
-				'The errorMode option has been removed. If you are using this through svelte-preprocess with TypeScript, ' +
-					'use the https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax setting instead'
-			),
-			varsReport: removed(
-				'The vars option has been removed. If you are using this through svelte-preprocess with TypeScript, ' +
-					'use the https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax setting instead'
-			)
+	tag: removed(
+		'The tag option has been removed in Svelte 5. Use `<svelte:options customElement="tag-name" />` inside the component instead. ' +
+			'If that does not solve your use case, please open an issue on GitHub with details.'
+	),
+
+	sveltePath: removed(
+		'The sveltePath option has been removed in Svelte 5. ' +
+			'If this option was crucial for you, please open an issue on GitHub with your use case.'
+	),
+
+	// These two were primarily created for svelte-preprocess (https://github.com/sveltejs/svelte/pull/6194),
+	// but with new TypeScript compilation modes strictly separating types it's not necessary anymore
+	errorMode: removed(
+		'The errorMode option has been removed. If you are using this through svelte-preprocess with TypeScript, ' +
+			'use the https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax setting instead'
+	),
+
+	varsReport: removed(
+		'The vars option has been removed. If you are using this through svelte-preprocess with TypeScript, ' +
+			'use the https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax setting instead'
+	)
+};
+
+export const validate_module_options =
+	/** @type {Validator<ModuleCompileOptions, ValidatedModuleCompileOptions>} */ (
+		object({
+			...common_options,
+			...Object.fromEntries(Object.keys(component_options).map((key) => [key, () => {}]))
+		})
+	);
+
+export const validate_component_options =
+	/** @type {Validator<CompileOptions, ValidatedCompileOptions>} */ (
+		object({
+			...common_options,
+			...component_options
 		})
 	);
 
@@ -239,19 +270,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
@@ -271,20 +289,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}
@@ -329,6 +333,28 @@ function fun(fallback) {
 	});
 }
 
+/**
+ * @template {(...args: any[]) => any} F
+ * @param {F} fallback
+ * @param {(value: unknown, keypath: string) => ReturnType<F>} [normalize]
+ * @returns {Validator}
+ */
+function parametric(fallback, normalize = (value) => /** @type {ReturnType<F>} */ (value)) {
+	return validator(fallback, (input, keypath) => {
+		if (typeof input === 'function') {
+			/** @type {(...args: Parameters<F>) => ReturnType<F>} */
+			const normalized = (...args) => normalize(input(...args), keypath);
+
+			return /** @type {F} */ (/** @type {unknown} */ (normalized));
+		}
+
+		/** @type {(...args: Parameters<F>) => ReturnType<F>} */
+		const normalized = (..._args) => normalize(input, keypath);
+
+		return /** @type {F} */ (/** @type {unknown} */ (normalized));
+	});
+}
+
 /** @param {string} msg */
 function throw_error(msg) {
 	e.options_invalid_value(null, msg);
diff --git a/packages/svelte/src/compiler/warnings.js b/packages/svelte/src/compiler/warnings.js
index b9fffc23a5..98f407671d 100644
--- a/packages/svelte/src/compiler/warnings.js
+++ b/packages/svelte/src/compiler/warnings.js
@@ -1,12 +1,6 @@
 /* This file is generated by scripts/process-messages/index.js. Do not edit! */
 
-import {
-	warnings,
-	ignore_stack,
-	ignore_map,
-	warning_filter
-} from './state.js';
-
+import { warnings, ignore_stack, ignore_map, warning_filter } from './state.js';
 import { CompileDiagnostic } from './utils/compile_diagnostic.js';
 
 /** @typedef {{ start?: number, end?: number }} NodeLike */
@@ -40,88 +34,92 @@ function w(node, code, message) {
 	const warning = new InternalCompileWarning(code, message, node && node.start !== undefined ? [node.start, node.end ?? node.start] : undefined);
 
 	if (!warning_filter(warning)) return;
+
 	warnings.push(warning);
 }
 
 export const codes = [
-	"a11y_accesskey",
-	"a11y_aria_activedescendant_has_tabindex",
-	"a11y_aria_attributes",
-	"a11y_autocomplete_valid",
-	"a11y_autofocus",
-	"a11y_click_events_have_key_events",
-	"a11y_consider_explicit_label",
-	"a11y_distracting_elements",
-	"a11y_figcaption_index",
-	"a11y_figcaption_parent",
-	"a11y_hidden",
-	"a11y_img_redundant_alt",
-	"a11y_incorrect_aria_attribute_type",
-	"a11y_incorrect_aria_attribute_type_boolean",
-	"a11y_incorrect_aria_attribute_type_id",
-	"a11y_incorrect_aria_attribute_type_idlist",
-	"a11y_incorrect_aria_attribute_type_integer",
-	"a11y_incorrect_aria_attribute_type_token",
-	"a11y_incorrect_aria_attribute_type_tokenlist",
-	"a11y_incorrect_aria_attribute_type_tristate",
-	"a11y_interactive_supports_focus",
-	"a11y_invalid_attribute",
-	"a11y_label_has_associated_control",
-	"a11y_media_has_caption",
-	"a11y_misplaced_role",
-	"a11y_misplaced_scope",
-	"a11y_missing_attribute",
-	"a11y_missing_content",
-	"a11y_mouse_events_have_key_events",
-	"a11y_no_abstract_role",
-	"a11y_no_interactive_element_to_noninteractive_role",
-	"a11y_no_noninteractive_element_interactions",
-	"a11y_no_noninteractive_element_to_interactive_role",
-	"a11y_no_noninteractive_tabindex",
-	"a11y_no_redundant_roles",
-	"a11y_no_static_element_interactions",
-	"a11y_positive_tabindex",
-	"a11y_role_has_required_aria_props",
-	"a11y_role_supports_aria_props",
-	"a11y_role_supports_aria_props_implicit",
-	"a11y_unknown_aria_attribute",
-	"a11y_unknown_role",
-	"legacy_code",
-	"unknown_code",
-	"options_deprecated_accessors",
-	"options_deprecated_immutable",
-	"options_missing_custom_element",
-	"options_removed_enable_sourcemap",
-	"options_removed_hydratable",
-	"options_removed_loop_guard_timeout",
-	"options_renamed_ssr_dom",
-	"export_let_unused",
-	"legacy_component_creation",
-	"non_reactive_update",
-	"perf_avoid_inline_class",
-	"perf_avoid_nested_class",
-	"reactive_declaration_invalid_placement",
-	"reactive_declaration_module_script_dependency",
-	"state_referenced_locally",
-	"store_rune_conflict",
-	"css_unused_selector",
-	"attribute_avoid_is",
-	"attribute_global_event_reference",
-	"attribute_illegal_colon",
-	"attribute_invalid_property_name",
-	"attribute_quoted",
-	"bind_invalid_each_rest",
-	"block_empty",
-	"component_name_lowercase",
-	"element_invalid_self_closing_tag",
-	"event_directive_deprecated",
-	"node_invalid_placement_ssr",
-	"script_context_deprecated",
-	"script_unknown_attribute",
-	"slot_element_deprecated",
-	"svelte_component_deprecated",
-	"svelte_element_invalid_this",
-	"svelte_self_deprecated"
+	'a11y_accesskey',
+	'a11y_aria_activedescendant_has_tabindex',
+	'a11y_aria_attributes',
+	'a11y_autocomplete_valid',
+	'a11y_autofocus',
+	'a11y_click_events_have_key_events',
+	'a11y_consider_explicit_label',
+	'a11y_distracting_elements',
+	'a11y_figcaption_index',
+	'a11y_figcaption_parent',
+	'a11y_hidden',
+	'a11y_img_redundant_alt',
+	'a11y_incorrect_aria_attribute_type',
+	'a11y_incorrect_aria_attribute_type_boolean',
+	'a11y_incorrect_aria_attribute_type_id',
+	'a11y_incorrect_aria_attribute_type_idlist',
+	'a11y_incorrect_aria_attribute_type_integer',
+	'a11y_incorrect_aria_attribute_type_token',
+	'a11y_incorrect_aria_attribute_type_tokenlist',
+	'a11y_incorrect_aria_attribute_type_tristate',
+	'a11y_interactive_supports_focus',
+	'a11y_invalid_attribute',
+	'a11y_label_has_associated_control',
+	'a11y_media_has_caption',
+	'a11y_misplaced_role',
+	'a11y_misplaced_scope',
+	'a11y_missing_attribute',
+	'a11y_missing_content',
+	'a11y_mouse_events_have_key_events',
+	'a11y_no_abstract_role',
+	'a11y_no_interactive_element_to_noninteractive_role',
+	'a11y_no_noninteractive_element_interactions',
+	'a11y_no_noninteractive_element_to_interactive_role',
+	'a11y_no_noninteractive_tabindex',
+	'a11y_no_redundant_roles',
+	'a11y_no_static_element_interactions',
+	'a11y_positive_tabindex',
+	'a11y_role_has_required_aria_props',
+	'a11y_role_supports_aria_props',
+	'a11y_role_supports_aria_props_implicit',
+	'a11y_unknown_aria_attribute',
+	'a11y_unknown_role',
+	'bidirectional_control_characters',
+	'legacy_code',
+	'unknown_code',
+	'options_deprecated_accessors',
+	'options_deprecated_immutable',
+	'options_missing_custom_element',
+	'options_removed_enable_sourcemap',
+	'options_removed_hydratable',
+	'options_removed_loop_guard_timeout',
+	'options_renamed_ssr_dom',
+	'custom_element_props_identifier',
+	'export_let_unused',
+	'legacy_component_creation',
+	'non_reactive_update',
+	'perf_avoid_inline_class',
+	'perf_avoid_nested_class',
+	'reactive_declaration_invalid_placement',
+	'reactive_declaration_module_script_dependency',
+	'state_referenced_locally',
+	'store_rune_conflict',
+	'css_unused_selector',
+	'attribute_avoid_is',
+	'attribute_global_event_reference',
+	'attribute_illegal_colon',
+	'attribute_invalid_property_name',
+	'attribute_quoted',
+	'bind_invalid_each_rest',
+	'block_empty',
+	'component_name_lowercase',
+	'element_implicitly_closed',
+	'element_invalid_self_closing_tag',
+	'event_directive_deprecated',
+	'node_invalid_placement_ssr',
+	'script_context_deprecated',
+	'script_unknown_attribute',
+	'slot_element_deprecated',
+	'svelte_component_deprecated',
+	'svelte_element_invalid_this',
+	'svelte_self_deprecated'
 ];
 
 /**
@@ -129,7 +127,7 @@ export const codes = [
  * @param {null | NodeLike} node
  */
 export function a11y_accesskey(node) {
-	w(node, "a11y_accesskey", `Avoid using accesskey\nhttps://svelte.dev/e/a11y_accesskey`);
+	w(node, 'a11y_accesskey', `Avoid using accesskey\nhttps://svelte.dev/e/a11y_accesskey`);
 }
 
 /**
@@ -137,7 +135,7 @@ export function a11y_accesskey(node) {
  * @param {null | NodeLike} node
  */
 export function a11y_aria_activedescendant_has_tabindex(node) {
-	w(node, "a11y_aria_activedescendant_has_tabindex", `An element with an aria-activedescendant attribute should have a tabindex value\nhttps://svelte.dev/e/a11y_aria_activedescendant_has_tabindex`);
+	w(node, 'a11y_aria_activedescendant_has_tabindex', `An element with an aria-activedescendant attribute should have a tabindex value\nhttps://svelte.dev/e/a11y_aria_activedescendant_has_tabindex`);
 }
 
 /**
@@ -146,7 +144,7 @@ export function a11y_aria_activedescendant_has_tabindex(node) {
  * @param {string} name
  */
 export function a11y_aria_attributes(node, name) {
-	w(node, "a11y_aria_attributes", `\`<${name}>\` should not have aria-* attributes\nhttps://svelte.dev/e/a11y_aria_attributes`);
+	w(node, 'a11y_aria_attributes', `\`<${name}>\` should not have aria-* attributes\nhttps://svelte.dev/e/a11y_aria_attributes`);
 }
 
 /**
@@ -156,7 +154,7 @@ export function a11y_aria_attributes(node, name) {
  * @param {string} type
  */
 export function a11y_autocomplete_valid(node, value, type) {
-	w(node, "a11y_autocomplete_valid", `'${value}' is an invalid value for 'autocomplete' on \`<input type="${type}">\`\nhttps://svelte.dev/e/a11y_autocomplete_valid`);
+	w(node, 'a11y_autocomplete_valid', `'${value}' is an invalid value for 'autocomplete' on \`<input type="${type}">\`\nhttps://svelte.dev/e/a11y_autocomplete_valid`);
 }
 
 /**
@@ -164,23 +162,24 @@ export function a11y_autocomplete_valid(node, value, type) {
  * @param {null | NodeLike} node
  */
 export function a11y_autofocus(node) {
-	w(node, "a11y_autofocus", `Avoid using autofocus\nhttps://svelte.dev/e/a11y_autofocus`);
+	w(node, 'a11y_autofocus', `Avoid using autofocus\nhttps://svelte.dev/e/a11y_autofocus`);
 }
 
 /**
- * Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type="button">` or `<a>` might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details
+ * Visible, non-interactive element `<%element%>` with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type="button">` or `<a>` might be more appropriate
  * @param {null | NodeLike} node
+ * @param {string} element
  */
-export function a11y_click_events_have_key_events(node) {
-	w(node, "a11y_click_events_have_key_events", `Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as \`<button type="button">\` or \`<a>\` might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details\nhttps://svelte.dev/e/a11y_click_events_have_key_events`);
+export function a11y_click_events_have_key_events(node, element) {
+	w(node, 'a11y_click_events_have_key_events', `Visible, non-interactive element \`<${element}>\` with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as \`<button type="button">\` or \`<a>\` might be more appropriate\nhttps://svelte.dev/e/a11y_click_events_have_key_events`);
 }
 
 /**
- * Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute
+ * Buttons and links should either contain text or have an `aria-label`, `aria-labelledby` or `title` attribute
  * @param {null | NodeLike} node
  */
 export function a11y_consider_explicit_label(node) {
-	w(node, "a11y_consider_explicit_label", `Buttons and links should either contain text or have an \`aria-label\` or \`aria-labelledby\` attribute\nhttps://svelte.dev/e/a11y_consider_explicit_label`);
+	w(node, 'a11y_consider_explicit_label', `Buttons and links should either contain text or have an \`aria-label\`, \`aria-labelledby\` or \`title\` attribute\nhttps://svelte.dev/e/a11y_consider_explicit_label`);
 }
 
 /**
@@ -189,7 +188,7 @@ export function a11y_consider_explicit_label(node) {
  * @param {string} name
  */
 export function a11y_distracting_elements(node, name) {
-	w(node, "a11y_distracting_elements", `Avoid \`<${name}>\` elements\nhttps://svelte.dev/e/a11y_distracting_elements`);
+	w(node, 'a11y_distracting_elements', `Avoid \`<${name}>\` elements\nhttps://svelte.dev/e/a11y_distracting_elements`);
 }
 
 /**
@@ -197,7 +196,7 @@ export function a11y_distracting_elements(node, name) {
  * @param {null | NodeLike} node
  */
 export function a11y_figcaption_index(node) {
-	w(node, "a11y_figcaption_index", `\`<figcaption>\` must be first or last child of \`<figure>\`\nhttps://svelte.dev/e/a11y_figcaption_index`);
+	w(node, 'a11y_figcaption_index', `\`<figcaption>\` must be first or last child of \`<figure>\`\nhttps://svelte.dev/e/a11y_figcaption_index`);
 }
 
 /**
@@ -205,7 +204,7 @@ export function a11y_figcaption_index(node) {
  * @param {null | NodeLike} node
  */
 export function a11y_figcaption_parent(node) {
-	w(node, "a11y_figcaption_parent", `\`<figcaption>\` must be an immediate child of \`<figure>\`\nhttps://svelte.dev/e/a11y_figcaption_parent`);
+	w(node, 'a11y_figcaption_parent', `\`<figcaption>\` must be an immediate child of \`<figure>\`\nhttps://svelte.dev/e/a11y_figcaption_parent`);
 }
 
 /**
@@ -214,7 +213,7 @@ export function a11y_figcaption_parent(node) {
  * @param {string} name
  */
 export function a11y_hidden(node, name) {
-	w(node, "a11y_hidden", `\`<${name}>\` element should not be hidden\nhttps://svelte.dev/e/a11y_hidden`);
+	w(node, 'a11y_hidden', `\`<${name}>\` element should not be hidden\nhttps://svelte.dev/e/a11y_hidden`);
 }
 
 /**
@@ -222,7 +221,7 @@ export function a11y_hidden(node, name) {
  * @param {null | NodeLike} node
  */
 export function a11y_img_redundant_alt(node) {
-	w(node, "a11y_img_redundant_alt", `Screenreaders already announce \`<img>\` elements as an image\nhttps://svelte.dev/e/a11y_img_redundant_alt`);
+	w(node, 'a11y_img_redundant_alt', `Screenreaders already announce \`<img>\` elements as an image\nhttps://svelte.dev/e/a11y_img_redundant_alt`);
 }
 
 /**
@@ -232,7 +231,7 @@ export function a11y_img_redundant_alt(node) {
  * @param {string} type
  */
 export function a11y_incorrect_aria_attribute_type(node, attribute, type) {
-	w(node, "a11y_incorrect_aria_attribute_type", `The value of '${attribute}' must be a ${type}\nhttps://svelte.dev/e/a11y_incorrect_aria_attribute_type`);
+	w(node, 'a11y_incorrect_aria_attribute_type', `The value of '${attribute}' must be a ${type}\nhttps://svelte.dev/e/a11y_incorrect_aria_attribute_type`);
 }
 
 /**
@@ -241,7 +240,7 @@ export function a11y_incorrect_aria_attribute_type(node, attribute, type) {
  * @param {string} attribute
  */
 export function a11y_incorrect_aria_attribute_type_boolean(node, attribute) {
-	w(node, "a11y_incorrect_aria_attribute_type_boolean", `The value of '${attribute}' must be either 'true' or 'false'. It cannot be empty\nhttps://svelte.dev/e/a11y_incorrect_aria_attribute_type_boolean`);
+	w(node, 'a11y_incorrect_aria_attribute_type_boolean', `The value of '${attribute}' must be either 'true' or 'false'. It cannot be empty\nhttps://svelte.dev/e/a11y_incorrect_aria_attribute_type_boolean`);
 }
 
 /**
@@ -250,7 +249,7 @@ export function a11y_incorrect_aria_attribute_type_boolean(node, attribute) {
  * @param {string} attribute
  */
 export function a11y_incorrect_aria_attribute_type_id(node, attribute) {
-	w(node, "a11y_incorrect_aria_attribute_type_id", `The value of '${attribute}' must be a string that represents a DOM element ID\nhttps://svelte.dev/e/a11y_incorrect_aria_attribute_type_id`);
+	w(node, 'a11y_incorrect_aria_attribute_type_id', `The value of '${attribute}' must be a string that represents a DOM element ID\nhttps://svelte.dev/e/a11y_incorrect_aria_attribute_type_id`);
 }
 
 /**
@@ -259,7 +258,7 @@ export function a11y_incorrect_aria_attribute_type_id(node, attribute) {
  * @param {string} attribute
  */
 export function a11y_incorrect_aria_attribute_type_idlist(node, attribute) {
-	w(node, "a11y_incorrect_aria_attribute_type_idlist", `The value of '${attribute}' must be a space-separated list of strings that represent DOM element IDs\nhttps://svelte.dev/e/a11y_incorrect_aria_attribute_type_idlist`);
+	w(node, 'a11y_incorrect_aria_attribute_type_idlist', `The value of '${attribute}' must be a space-separated list of strings that represent DOM element IDs\nhttps://svelte.dev/e/a11y_incorrect_aria_attribute_type_idlist`);
 }
 
 /**
@@ -268,7 +267,7 @@ export function a11y_incorrect_aria_attribute_type_idlist(node, attribute) {
  * @param {string} attribute
  */
 export function a11y_incorrect_aria_attribute_type_integer(node, attribute) {
-	w(node, "a11y_incorrect_aria_attribute_type_integer", `The value of '${attribute}' must be an integer\nhttps://svelte.dev/e/a11y_incorrect_aria_attribute_type_integer`);
+	w(node, 'a11y_incorrect_aria_attribute_type_integer', `The value of '${attribute}' must be an integer\nhttps://svelte.dev/e/a11y_incorrect_aria_attribute_type_integer`);
 }
 
 /**
@@ -278,7 +277,7 @@ export function a11y_incorrect_aria_attribute_type_integer(node, attribute) {
  * @param {string} values
  */
 export function a11y_incorrect_aria_attribute_type_token(node, attribute, values) {
-	w(node, "a11y_incorrect_aria_attribute_type_token", `The value of '${attribute}' must be exactly one of ${values}\nhttps://svelte.dev/e/a11y_incorrect_aria_attribute_type_token`);
+	w(node, 'a11y_incorrect_aria_attribute_type_token', `The value of '${attribute}' must be exactly one of ${values}\nhttps://svelte.dev/e/a11y_incorrect_aria_attribute_type_token`);
 }
 
 /**
@@ -288,7 +287,7 @@ export function a11y_incorrect_aria_attribute_type_token(node, attribute, values
  * @param {string} values
  */
 export function a11y_incorrect_aria_attribute_type_tokenlist(node, attribute, values) {
-	w(node, "a11y_incorrect_aria_attribute_type_tokenlist", `The value of '${attribute}' must be a space-separated list of one or more of ${values}\nhttps://svelte.dev/e/a11y_incorrect_aria_attribute_type_tokenlist`);
+	w(node, 'a11y_incorrect_aria_attribute_type_tokenlist', `The value of '${attribute}' must be a space-separated list of one or more of ${values}\nhttps://svelte.dev/e/a11y_incorrect_aria_attribute_type_tokenlist`);
 }
 
 /**
@@ -297,7 +296,7 @@ export function a11y_incorrect_aria_attribute_type_tokenlist(node, attribute, va
  * @param {string} attribute
  */
 export function a11y_incorrect_aria_attribute_type_tristate(node, attribute) {
-	w(node, "a11y_incorrect_aria_attribute_type_tristate", `The value of '${attribute}' must be exactly one of true, false, or mixed\nhttps://svelte.dev/e/a11y_incorrect_aria_attribute_type_tristate`);
+	w(node, 'a11y_incorrect_aria_attribute_type_tristate', `The value of '${attribute}' must be exactly one of true, false, or mixed\nhttps://svelte.dev/e/a11y_incorrect_aria_attribute_type_tristate`);
 }
 
 /**
@@ -306,7 +305,7 @@ export function a11y_incorrect_aria_attribute_type_tristate(node, attribute) {
  * @param {string} role
  */
 export function a11y_interactive_supports_focus(node, role) {
-	w(node, "a11y_interactive_supports_focus", `Elements with the '${role}' interactive role must have a tabindex value\nhttps://svelte.dev/e/a11y_interactive_supports_focus`);
+	w(node, 'a11y_interactive_supports_focus', `Elements with the '${role}' interactive role must have a tabindex value\nhttps://svelte.dev/e/a11y_interactive_supports_focus`);
 }
 
 /**
@@ -316,7 +315,7 @@ export function a11y_interactive_supports_focus(node, role) {
  * @param {string} href_attribute
  */
 export function a11y_invalid_attribute(node, href_value, href_attribute) {
-	w(node, "a11y_invalid_attribute", `'${href_value}' is not a valid ${href_attribute} attribute\nhttps://svelte.dev/e/a11y_invalid_attribute`);
+	w(node, 'a11y_invalid_attribute', `'${href_value}' is not a valid ${href_attribute} attribute\nhttps://svelte.dev/e/a11y_invalid_attribute`);
 }
 
 /**
@@ -324,7 +323,7 @@ export function a11y_invalid_attribute(node, href_value, href_attribute) {
  * @param {null | NodeLike} node
  */
 export function a11y_label_has_associated_control(node) {
-	w(node, "a11y_label_has_associated_control", `A form label must be associated with a control\nhttps://svelte.dev/e/a11y_label_has_associated_control`);
+	w(node, 'a11y_label_has_associated_control', `A form label must be associated with a control\nhttps://svelte.dev/e/a11y_label_has_associated_control`);
 }
 
 /**
@@ -332,7 +331,7 @@ export function a11y_label_has_associated_control(node) {
  * @param {null | NodeLike} node
  */
 export function a11y_media_has_caption(node) {
-	w(node, "a11y_media_has_caption", `\`<video>\` elements must have a \`<track kind="captions">\`\nhttps://svelte.dev/e/a11y_media_has_caption`);
+	w(node, 'a11y_media_has_caption', `\`<video>\` elements must have a \`<track kind="captions">\`\nhttps://svelte.dev/e/a11y_media_has_caption`);
 }
 
 /**
@@ -341,7 +340,7 @@ export function a11y_media_has_caption(node) {
  * @param {string} name
  */
 export function a11y_misplaced_role(node, name) {
-	w(node, "a11y_misplaced_role", `\`<${name}>\` should not have role attribute\nhttps://svelte.dev/e/a11y_misplaced_role`);
+	w(node, 'a11y_misplaced_role', `\`<${name}>\` should not have role attribute\nhttps://svelte.dev/e/a11y_misplaced_role`);
 }
 
 /**
@@ -349,7 +348,7 @@ export function a11y_misplaced_role(node, name) {
  * @param {null | NodeLike} node
  */
 export function a11y_misplaced_scope(node) {
-	w(node, "a11y_misplaced_scope", `The scope attribute should only be used with \`<th>\` elements\nhttps://svelte.dev/e/a11y_misplaced_scope`);
+	w(node, 'a11y_misplaced_scope', `The scope attribute should only be used with \`<th>\` elements\nhttps://svelte.dev/e/a11y_misplaced_scope`);
 }
 
 /**
@@ -360,7 +359,7 @@ export function a11y_misplaced_scope(node) {
  * @param {string} sequence
  */
 export function a11y_missing_attribute(node, name, article, sequence) {
-	w(node, "a11y_missing_attribute", `\`<${name}>\` element should have ${article} ${sequence} attribute\nhttps://svelte.dev/e/a11y_missing_attribute`);
+	w(node, 'a11y_missing_attribute', `\`<${name}>\` element should have ${article} ${sequence} attribute\nhttps://svelte.dev/e/a11y_missing_attribute`);
 }
 
 /**
@@ -369,7 +368,7 @@ export function a11y_missing_attribute(node, name, article, sequence) {
  * @param {string} name
  */
 export function a11y_missing_content(node, name) {
-	w(node, "a11y_missing_content", `\`<${name}>\` element should contain text\nhttps://svelte.dev/e/a11y_missing_content`);
+	w(node, 'a11y_missing_content', `\`<${name}>\` element should contain text\nhttps://svelte.dev/e/a11y_missing_content`);
 }
 
 /**
@@ -379,7 +378,7 @@ export function a11y_missing_content(node, name) {
  * @param {string} accompanied_by
  */
 export function a11y_mouse_events_have_key_events(node, event, accompanied_by) {
-	w(node, "a11y_mouse_events_have_key_events", `'${event}' event must be accompanied by '${accompanied_by}' event\nhttps://svelte.dev/e/a11y_mouse_events_have_key_events`);
+	w(node, 'a11y_mouse_events_have_key_events', `'${event}' event must be accompanied by '${accompanied_by}' event\nhttps://svelte.dev/e/a11y_mouse_events_have_key_events`);
 }
 
 /**
@@ -388,7 +387,7 @@ export function a11y_mouse_events_have_key_events(node, event, accompanied_by) {
  * @param {string} role
  */
 export function a11y_no_abstract_role(node, role) {
-	w(node, "a11y_no_abstract_role", `Abstract role '${role}' is forbidden\nhttps://svelte.dev/e/a11y_no_abstract_role`);
+	w(node, 'a11y_no_abstract_role', `Abstract role '${role}' is forbidden\nhttps://svelte.dev/e/a11y_no_abstract_role`);
 }
 
 /**
@@ -398,7 +397,7 @@ export function a11y_no_abstract_role(node, role) {
  * @param {string} role
  */
 export function a11y_no_interactive_element_to_noninteractive_role(node, element, role) {
-	w(node, "a11y_no_interactive_element_to_noninteractive_role", `\`<${element}>\` cannot have role '${role}'\nhttps://svelte.dev/e/a11y_no_interactive_element_to_noninteractive_role`);
+	w(node, 'a11y_no_interactive_element_to_noninteractive_role', `\`<${element}>\` cannot have role '${role}'\nhttps://svelte.dev/e/a11y_no_interactive_element_to_noninteractive_role`);
 }
 
 /**
@@ -407,7 +406,7 @@ export function a11y_no_interactive_element_to_noninteractive_role(node, element
  * @param {string} element
  */
 export function a11y_no_noninteractive_element_interactions(node, element) {
-	w(node, "a11y_no_noninteractive_element_interactions", `Non-interactive element \`<${element}>\` should not be assigned mouse or keyboard event listeners\nhttps://svelte.dev/e/a11y_no_noninteractive_element_interactions`);
+	w(node, 'a11y_no_noninteractive_element_interactions', `Non-interactive element \`<${element}>\` should not be assigned mouse or keyboard event listeners\nhttps://svelte.dev/e/a11y_no_noninteractive_element_interactions`);
 }
 
 /**
@@ -417,7 +416,7 @@ export function a11y_no_noninteractive_element_interactions(node, element) {
  * @param {string} role
  */
 export function a11y_no_noninteractive_element_to_interactive_role(node, element, role) {
-	w(node, "a11y_no_noninteractive_element_to_interactive_role", `Non-interactive element \`<${element}>\` cannot have interactive role '${role}'\nhttps://svelte.dev/e/a11y_no_noninteractive_element_to_interactive_role`);
+	w(node, 'a11y_no_noninteractive_element_to_interactive_role', `Non-interactive element \`<${element}>\` cannot have interactive role '${role}'\nhttps://svelte.dev/e/a11y_no_noninteractive_element_to_interactive_role`);
 }
 
 /**
@@ -425,7 +424,7 @@ export function a11y_no_noninteractive_element_to_interactive_role(node, element
  * @param {null | NodeLike} node
  */
 export function a11y_no_noninteractive_tabindex(node) {
-	w(node, "a11y_no_noninteractive_tabindex", `noninteractive element cannot have nonnegative tabIndex value\nhttps://svelte.dev/e/a11y_no_noninteractive_tabindex`);
+	w(node, 'a11y_no_noninteractive_tabindex', `noninteractive element cannot have nonnegative tabIndex value\nhttps://svelte.dev/e/a11y_no_noninteractive_tabindex`);
 }
 
 /**
@@ -434,7 +433,7 @@ export function a11y_no_noninteractive_tabindex(node) {
  * @param {string} role
  */
 export function a11y_no_redundant_roles(node, role) {
-	w(node, "a11y_no_redundant_roles", `Redundant role '${role}'\nhttps://svelte.dev/e/a11y_no_redundant_roles`);
+	w(node, 'a11y_no_redundant_roles', `Redundant role '${role}'\nhttps://svelte.dev/e/a11y_no_redundant_roles`);
 }
 
 /**
@@ -444,7 +443,7 @@ export function a11y_no_redundant_roles(node, role) {
  * @param {string} handler
  */
 export function a11y_no_static_element_interactions(node, element, handler) {
-	w(node, "a11y_no_static_element_interactions", `\`<${element}>\` with a ${handler} handler must have an ARIA role\nhttps://svelte.dev/e/a11y_no_static_element_interactions`);
+	w(node, 'a11y_no_static_element_interactions', `\`<${element}>\` with a ${handler} handler must have an ARIA role\nhttps://svelte.dev/e/a11y_no_static_element_interactions`);
 }
 
 /**
@@ -452,7 +451,7 @@ export function a11y_no_static_element_interactions(node, element, handler) {
  * @param {null | NodeLike} node
  */
 export function a11y_positive_tabindex(node) {
-	w(node, "a11y_positive_tabindex", `Avoid tabindex values above zero\nhttps://svelte.dev/e/a11y_positive_tabindex`);
+	w(node, 'a11y_positive_tabindex', `Avoid tabindex values above zero\nhttps://svelte.dev/e/a11y_positive_tabindex`);
 }
 
 /**
@@ -462,7 +461,7 @@ export function a11y_positive_tabindex(node) {
  * @param {string} props
  */
 export function a11y_role_has_required_aria_props(node, role, props) {
-	w(node, "a11y_role_has_required_aria_props", `Elements with the ARIA role "${role}" must have the following attributes defined: ${props}\nhttps://svelte.dev/e/a11y_role_has_required_aria_props`);
+	w(node, 'a11y_role_has_required_aria_props', `Elements with the ARIA role "${role}" must have the following attributes defined: ${props}\nhttps://svelte.dev/e/a11y_role_has_required_aria_props`);
 }
 
 /**
@@ -472,7 +471,7 @@ export function a11y_role_has_required_aria_props(node, role, props) {
  * @param {string} role
  */
 export function a11y_role_supports_aria_props(node, attribute, role) {
-	w(node, "a11y_role_supports_aria_props", `The attribute '${attribute}' is not supported by the role '${role}'\nhttps://svelte.dev/e/a11y_role_supports_aria_props`);
+	w(node, 'a11y_role_supports_aria_props', `The attribute '${attribute}' is not supported by the role '${role}'\nhttps://svelte.dev/e/a11y_role_supports_aria_props`);
 }
 
 /**
@@ -483,7 +482,7 @@ export function a11y_role_supports_aria_props(node, attribute, role) {
  * @param {string} name
  */
 export function a11y_role_supports_aria_props_implicit(node, attribute, role, name) {
-	w(node, "a11y_role_supports_aria_props_implicit", `The attribute '${attribute}' is not supported by the role '${role}'. This role is implicit on the element \`<${name}>\`\nhttps://svelte.dev/e/a11y_role_supports_aria_props_implicit`);
+	w(node, 'a11y_role_supports_aria_props_implicit', `The attribute '${attribute}' is not supported by the role '${role}'. This role is implicit on the element \`<${name}>\`\nhttps://svelte.dev/e/a11y_role_supports_aria_props_implicit`);
 }
 
 /**
@@ -493,7 +492,9 @@ export function a11y_role_supports_aria_props_implicit(node, attribute, role, na
  * @param {string | undefined | null} [suggestion]
  */
 export function a11y_unknown_aria_attribute(node, attribute, suggestion) {
-	w(node, "a11y_unknown_aria_attribute", `${suggestion ? `Unknown aria attribute 'aria-${attribute}'. Did you mean '${suggestion}'?` : `Unknown aria attribute 'aria-${attribute}'`}\nhttps://svelte.dev/e/a11y_unknown_aria_attribute`);
+	w(node, 'a11y_unknown_aria_attribute', `${suggestion
+		? `Unknown aria attribute 'aria-${attribute}'. Did you mean '${suggestion}'?`
+		: `Unknown aria attribute 'aria-${attribute}'`}\nhttps://svelte.dev/e/a11y_unknown_aria_attribute`);
 }
 
 /**
@@ -503,7 +504,17 @@ export function a11y_unknown_aria_attribute(node, attribute, suggestion) {
  * @param {string | undefined | null} [suggestion]
  */
 export function a11y_unknown_role(node, role, suggestion) {
-	w(node, "a11y_unknown_role", `${suggestion ? `Unknown role '${role}'. Did you mean '${suggestion}'?` : `Unknown role '${role}'`}\nhttps://svelte.dev/e/a11y_unknown_role`);
+	w(node, 'a11y_unknown_role', `${suggestion
+		? `Unknown role '${role}'. Did you mean '${suggestion}'?`
+		: `Unknown role '${role}'`}\nhttps://svelte.dev/e/a11y_unknown_role`);
+}
+
+/**
+ * A bidirectional control character was detected in your code. These characters can be used to alter the visual direction of your code and could have unintended consequences
+ * @param {null | NodeLike} node
+ */
+export function bidirectional_control_characters(node) {
+	w(node, 'bidirectional_control_characters', `A bidirectional control character was detected in your code. These characters can be used to alter the visual direction of your code and could have unintended consequences\nhttps://svelte.dev/e/bidirectional_control_characters`);
 }
 
 /**
@@ -513,7 +524,7 @@ export function a11y_unknown_role(node, role, suggestion) {
  * @param {string} suggestion
  */
 export function legacy_code(node, code, suggestion) {
-	w(node, "legacy_code", `\`${code}\` is no longer valid — please use \`${suggestion}\` instead\nhttps://svelte.dev/e/legacy_code`);
+	w(node, 'legacy_code', `\`${code}\` is no longer valid — please use \`${suggestion}\` instead\nhttps://svelte.dev/e/legacy_code`);
 }
 
 /**
@@ -523,7 +534,9 @@ export function legacy_code(node, code, suggestion) {
  * @param {string | undefined | null} [suggestion]
  */
 export function unknown_code(node, code, suggestion) {
-	w(node, "unknown_code", `${suggestion ? `\`${code}\` is not a recognised code (did you mean \`${suggestion}\`?)` : `\`${code}\` is not a recognised code`}\nhttps://svelte.dev/e/unknown_code`);
+	w(node, 'unknown_code', `${suggestion
+		? `\`${code}\` is not a recognised code (did you mean \`${suggestion}\`?)`
+		: `\`${code}\` is not a recognised code`}\nhttps://svelte.dev/e/unknown_code`);
 }
 
 /**
@@ -531,7 +544,7 @@ export function unknown_code(node, code, suggestion) {
  * @param {null | NodeLike} node
  */
 export function options_deprecated_accessors(node) {
-	w(node, "options_deprecated_accessors", `The \`accessors\` option has been deprecated. It will have no effect in runes mode\nhttps://svelte.dev/e/options_deprecated_accessors`);
+	w(node, 'options_deprecated_accessors', `The \`accessors\` option has been deprecated. It will have no effect in runes mode\nhttps://svelte.dev/e/options_deprecated_accessors`);
 }
 
 /**
@@ -539,7 +552,7 @@ export function options_deprecated_accessors(node) {
  * @param {null | NodeLike} node
  */
 export function options_deprecated_immutable(node) {
-	w(node, "options_deprecated_immutable", `The \`immutable\` option has been deprecated. It will have no effect in runes mode\nhttps://svelte.dev/e/options_deprecated_immutable`);
+	w(node, 'options_deprecated_immutable', `The \`immutable\` option has been deprecated. It will have no effect in runes mode\nhttps://svelte.dev/e/options_deprecated_immutable`);
 }
 
 /**
@@ -547,7 +560,7 @@ export function options_deprecated_immutable(node) {
  * @param {null | NodeLike} node
  */
 export function options_missing_custom_element(node) {
-	w(node, "options_missing_custom_element", `The \`customElement\` option is used when generating a custom element. Did you forget the \`customElement: true\` compile option?\nhttps://svelte.dev/e/options_missing_custom_element`);
+	w(node, 'options_missing_custom_element', `The \`customElement\` option is used when generating a custom element. Did you forget the \`customElement: true\` compile option?\nhttps://svelte.dev/e/options_missing_custom_element`);
 }
 
 /**
@@ -555,7 +568,7 @@ export function options_missing_custom_element(node) {
  * @param {null | NodeLike} node
  */
 export function options_removed_enable_sourcemap(node) {
-	w(node, "options_removed_enable_sourcemap", `The \`enableSourcemap\` option has been removed. Source maps are always generated now, and tooling can choose to ignore them\nhttps://svelte.dev/e/options_removed_enable_sourcemap`);
+	w(node, 'options_removed_enable_sourcemap', `The \`enableSourcemap\` option has been removed. Source maps are always generated now, and tooling can choose to ignore them\nhttps://svelte.dev/e/options_removed_enable_sourcemap`);
 }
 
 /**
@@ -563,7 +576,7 @@ export function options_removed_enable_sourcemap(node) {
  * @param {null | NodeLike} node
  */
 export function options_removed_hydratable(node) {
-	w(node, "options_removed_hydratable", `The \`hydratable\` option has been removed. Svelte components are always hydratable now\nhttps://svelte.dev/e/options_removed_hydratable`);
+	w(node, 'options_removed_hydratable', `The \`hydratable\` option has been removed. Svelte components are always hydratable now\nhttps://svelte.dev/e/options_removed_hydratable`);
 }
 
 /**
@@ -571,7 +584,7 @@ export function options_removed_hydratable(node) {
  * @param {null | NodeLike} node
  */
 export function options_removed_loop_guard_timeout(node) {
-	w(node, "options_removed_loop_guard_timeout", `The \`loopGuardTimeout\` option has been removed\nhttps://svelte.dev/e/options_removed_loop_guard_timeout`);
+	w(node, 'options_removed_loop_guard_timeout', `The \`loopGuardTimeout\` option has been removed\nhttps://svelte.dev/e/options_removed_loop_guard_timeout`);
 }
 
 /**
@@ -579,7 +592,15 @@ export function options_removed_loop_guard_timeout(node) {
  * @param {null | NodeLike} node
  */
 export function options_renamed_ssr_dom(node) {
-	w(node, "options_renamed_ssr_dom", `\`generate: "dom"\` and \`generate: "ssr"\` options have been renamed to "client" and "server" respectively\nhttps://svelte.dev/e/options_renamed_ssr_dom`);
+	w(node, 'options_renamed_ssr_dom', `\`generate: "dom"\` and \`generate: "ssr"\` options have been renamed to "client" and "server" respectively\nhttps://svelte.dev/e/options_renamed_ssr_dom`);
+}
+
+/**
+ * Using a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option.
+ * @param {null | NodeLike} node
+ */
+export function custom_element_props_identifier(node) {
+	w(node, 'custom_element_props_identifier', `Using a rest element or a non-destructured declaration with \`$props()\` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the \`customElement.props\` option.\nhttps://svelte.dev/e/custom_element_props_identifier`);
 }
 
 /**
@@ -588,7 +609,7 @@ export function options_renamed_ssr_dom(node) {
  * @param {string} name
  */
 export function export_let_unused(node, name) {
-	w(node, "export_let_unused", `Component has unused export property '${name}'. If it is for external reference only, please consider using \`export const ${name}\`\nhttps://svelte.dev/e/export_let_unused`);
+	w(node, 'export_let_unused', `Component has unused export property '${name}'. If it is for external reference only, please consider using \`export const ${name}\`\nhttps://svelte.dev/e/export_let_unused`);
 }
 
 /**
@@ -596,7 +617,7 @@ export function export_let_unused(node, name) {
  * @param {null | NodeLike} node
  */
 export function legacy_component_creation(node) {
-	w(node, "legacy_component_creation", `Svelte 5 components are no longer classes. Instantiate them using \`mount\` or \`hydrate\` (imported from 'svelte') instead.\nhttps://svelte.dev/e/legacy_component_creation`);
+	w(node, 'legacy_component_creation', `Svelte 5 components are no longer classes. Instantiate them using \`mount\` or \`hydrate\` (imported from 'svelte') instead.\nhttps://svelte.dev/e/legacy_component_creation`);
 }
 
 /**
@@ -605,7 +626,7 @@ export function legacy_component_creation(node) {
  * @param {string} name
  */
 export function non_reactive_update(node, name) {
-	w(node, "non_reactive_update", `\`${name}\` is updated, but is not declared with \`$state(...)\`. Changing its value will not correctly trigger updates\nhttps://svelte.dev/e/non_reactive_update`);
+	w(node, 'non_reactive_update', `\`${name}\` is updated, but is not declared with \`$state(...)\`. Changing its value will not correctly trigger updates\nhttps://svelte.dev/e/non_reactive_update`);
 }
 
 /**
@@ -613,7 +634,7 @@ export function non_reactive_update(node, name) {
  * @param {null | NodeLike} node
  */
 export function perf_avoid_inline_class(node) {
-	w(node, "perf_avoid_inline_class", `Avoid 'new class' — instead, declare the class at the top level scope\nhttps://svelte.dev/e/perf_avoid_inline_class`);
+	w(node, 'perf_avoid_inline_class', `Avoid 'new class' — instead, declare the class at the top level scope\nhttps://svelte.dev/e/perf_avoid_inline_class`);
 }
 
 /**
@@ -621,7 +642,7 @@ export function perf_avoid_inline_class(node) {
  * @param {null | NodeLike} node
  */
 export function perf_avoid_nested_class(node) {
-	w(node, "perf_avoid_nested_class", `Avoid declaring classes below the top level scope\nhttps://svelte.dev/e/perf_avoid_nested_class`);
+	w(node, 'perf_avoid_nested_class', `Avoid declaring classes below the top level scope\nhttps://svelte.dev/e/perf_avoid_nested_class`);
 }
 
 /**
@@ -629,7 +650,7 @@ export function perf_avoid_nested_class(node) {
  * @param {null | NodeLike} node
  */
 export function reactive_declaration_invalid_placement(node) {
-	w(node, "reactive_declaration_invalid_placement", `Reactive declarations only exist at the top level of the instance script\nhttps://svelte.dev/e/reactive_declaration_invalid_placement`);
+	w(node, 'reactive_declaration_invalid_placement', `Reactive declarations only exist at the top level of the instance script\nhttps://svelte.dev/e/reactive_declaration_invalid_placement`);
 }
 
 /**
@@ -637,15 +658,17 @@ export function reactive_declaration_invalid_placement(node) {
  * @param {null | NodeLike} node
  */
 export function reactive_declaration_module_script_dependency(node) {
-	w(node, "reactive_declaration_module_script_dependency", `Reassignments of module-level declarations will not cause reactive statements to update\nhttps://svelte.dev/e/reactive_declaration_module_script_dependency`);
+	w(node, 'reactive_declaration_module_script_dependency', `Reassignments of module-level declarations will not cause reactive statements to update\nhttps://svelte.dev/e/reactive_declaration_module_script_dependency`);
 }
 
 /**
- * State referenced in its own scope will never update. Did you mean to reference it inside a closure?
+ * This reference only captures the initial value of `%name%`. Did you mean to reference it inside a %type% instead?
  * @param {null | NodeLike} node
+ * @param {string} name
+ * @param {string} type
  */
-export function state_referenced_locally(node) {
-	w(node, "state_referenced_locally", `State referenced in its own scope will never update. Did you mean to reference it inside a closure?\nhttps://svelte.dev/e/state_referenced_locally`);
+export function state_referenced_locally(node, name, type) {
+	w(node, 'state_referenced_locally', `This reference only captures the initial value of \`${name}\`. Did you mean to reference it inside a ${type} instead?\nhttps://svelte.dev/e/state_referenced_locally`);
 }
 
 /**
@@ -654,7 +677,7 @@ export function state_referenced_locally(node) {
  * @param {string} name
  */
 export function store_rune_conflict(node, name) {
-	w(node, "store_rune_conflict", `It looks like you're using the \`$${name}\` rune, but there is a local binding called \`${name}\`. Referencing a local variable with a \`$\` prefix will create a store subscription. Please rename \`${name}\` to avoid the ambiguity\nhttps://svelte.dev/e/store_rune_conflict`);
+	w(node, 'store_rune_conflict', `It looks like you're using the \`$${name}\` rune, but there is a local binding called \`${name}\`. Referencing a local variable with a \`$\` prefix will create a store subscription. Please rename \`${name}\` to avoid the ambiguity\nhttps://svelte.dev/e/store_rune_conflict`);
 }
 
 /**
@@ -663,7 +686,7 @@ export function store_rune_conflict(node, name) {
  * @param {string} name
  */
 export function css_unused_selector(node, name) {
-	w(node, "css_unused_selector", `Unused CSS selector "${name}"\nhttps://svelte.dev/e/css_unused_selector`);
+	w(node, 'css_unused_selector', `Unused CSS selector "${name}"\nhttps://svelte.dev/e/css_unused_selector`);
 }
 
 /**
@@ -671,7 +694,7 @@ export function css_unused_selector(node, name) {
  * @param {null | NodeLike} node
  */
 export function attribute_avoid_is(node) {
-	w(node, "attribute_avoid_is", `The "is" attribute is not supported cross-browser and should be avoided\nhttps://svelte.dev/e/attribute_avoid_is`);
+	w(node, 'attribute_avoid_is', `The "is" attribute is not supported cross-browser and should be avoided\nhttps://svelte.dev/e/attribute_avoid_is`);
 }
 
 /**
@@ -680,7 +703,7 @@ export function attribute_avoid_is(node) {
  * @param {string} name
  */
 export function attribute_global_event_reference(node, name) {
-	w(node, "attribute_global_event_reference", `You are referencing \`globalThis.${name}\`. Did you forget to declare a variable with that name?\nhttps://svelte.dev/e/attribute_global_event_reference`);
+	w(node, 'attribute_global_event_reference', `You are referencing \`globalThis.${name}\`. Did you forget to declare a variable with that name?\nhttps://svelte.dev/e/attribute_global_event_reference`);
 }
 
 /**
@@ -688,7 +711,7 @@ export function attribute_global_event_reference(node, name) {
  * @param {null | NodeLike} node
  */
 export function attribute_illegal_colon(node) {
-	w(node, "attribute_illegal_colon", `Attributes should not contain ':' characters to prevent ambiguity with Svelte directives\nhttps://svelte.dev/e/attribute_illegal_colon`);
+	w(node, 'attribute_illegal_colon', `Attributes should not contain ':' characters to prevent ambiguity with Svelte directives\nhttps://svelte.dev/e/attribute_illegal_colon`);
 }
 
 /**
@@ -698,7 +721,7 @@ export function attribute_illegal_colon(node) {
  * @param {string} right
  */
 export function attribute_invalid_property_name(node, wrong, right) {
-	w(node, "attribute_invalid_property_name", `'${wrong}' is not a valid HTML attribute. Did you mean '${right}'?\nhttps://svelte.dev/e/attribute_invalid_property_name`);
+	w(node, 'attribute_invalid_property_name', `'${wrong}' is not a valid HTML attribute. Did you mean '${right}'?\nhttps://svelte.dev/e/attribute_invalid_property_name`);
 }
 
 /**
@@ -706,7 +729,7 @@ export function attribute_invalid_property_name(node, wrong, right) {
  * @param {null | NodeLike} node
  */
 export function attribute_quoted(node) {
-	w(node, "attribute_quoted", `Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes\nhttps://svelte.dev/e/attribute_quoted`);
+	w(node, 'attribute_quoted', `Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes\nhttps://svelte.dev/e/attribute_quoted`);
 }
 
 /**
@@ -715,7 +738,7 @@ export function attribute_quoted(node) {
  * @param {string} name
  */
 export function bind_invalid_each_rest(node, name) {
-	w(node, "bind_invalid_each_rest", `The rest operator (...) will create a new object and binding '${name}' with the original object will not work\nhttps://svelte.dev/e/bind_invalid_each_rest`);
+	w(node, 'bind_invalid_each_rest', `The rest operator (...) will create a new object and binding '${name}' with the original object will not work\nhttps://svelte.dev/e/bind_invalid_each_rest`);
 }
 
 /**
@@ -723,7 +746,7 @@ export function bind_invalid_each_rest(node, name) {
  * @param {null | NodeLike} node
  */
 export function block_empty(node) {
-	w(node, "block_empty", `Empty block\nhttps://svelte.dev/e/block_empty`);
+	w(node, 'block_empty', `Empty block\nhttps://svelte.dev/e/block_empty`);
 }
 
 /**
@@ -732,7 +755,17 @@ export function block_empty(node) {
  * @param {string} name
  */
 export function component_name_lowercase(node, name) {
-	w(node, "component_name_lowercase", `\`<${name}>\` will be treated as an HTML element unless it begins with a capital letter\nhttps://svelte.dev/e/component_name_lowercase`);
+	w(node, 'component_name_lowercase', `\`<${name}>\` will be treated as an HTML element unless it begins with a capital letter\nhttps://svelte.dev/e/component_name_lowercase`);
+}
+
+/**
+ * This element is implicitly closed by the following `%tag%`, which can cause an unexpected DOM structure. Add an explicit `%closing%` to avoid surprises.
+ * @param {null | NodeLike} node
+ * @param {string} tag
+ * @param {string} closing
+ */
+export function element_implicitly_closed(node, tag, closing) {
+	w(node, 'element_implicitly_closed', `This element is implicitly closed by the following \`${tag}\`, which can cause an unexpected DOM structure. Add an explicit \`${closing}\` to avoid surprises.\nhttps://svelte.dev/e/element_implicitly_closed`);
 }
 
 /**
@@ -741,7 +774,7 @@ export function component_name_lowercase(node, name) {
  * @param {string} name
  */
 export function element_invalid_self_closing_tag(node, name) {
-	w(node, "element_invalid_self_closing_tag", `Self-closing HTML tags for non-void elements are ambiguous — use \`<${name} ...></${name}>\` rather than \`<${name} ... />\`\nhttps://svelte.dev/e/element_invalid_self_closing_tag`);
+	w(node, 'element_invalid_self_closing_tag', `Self-closing HTML tags for non-void elements are ambiguous — use \`<${name} ...></${name}>\` rather than \`<${name} ... />\`\nhttps://svelte.dev/e/element_invalid_self_closing_tag`);
 }
 
 /**
@@ -750,7 +783,7 @@ export function element_invalid_self_closing_tag(node, name) {
  * @param {string} name
  */
 export function event_directive_deprecated(node, name) {
-	w(node, "event_directive_deprecated", `Using \`on:${name}\` to listen to the ${name} event is deprecated. Use the event attribute \`on${name}\` instead\nhttps://svelte.dev/e/event_directive_deprecated`);
+	w(node, 'event_directive_deprecated', `Using \`on:${name}\` to listen to the ${name} event is deprecated. Use the event attribute \`on${name}\` instead\nhttps://svelte.dev/e/event_directive_deprecated`);
 }
 
 /**
@@ -759,7 +792,7 @@ export function event_directive_deprecated(node, name) {
  * @param {string} message
  */
 export function node_invalid_placement_ssr(node, message) {
-	w(node, "node_invalid_placement_ssr", `${message}. When rendering this component on the server, the resulting HTML will be modified by the browser (by moving, removing, or inserting elements), likely resulting in a \`hydration_mismatch\` warning\nhttps://svelte.dev/e/node_invalid_placement_ssr`);
+	w(node, 'node_invalid_placement_ssr', `${message}. When rendering this component on the server, the resulting HTML will be modified by the browser (by moving, removing, or inserting elements), likely resulting in a \`hydration_mismatch\` warning\nhttps://svelte.dev/e/node_invalid_placement_ssr`);
 }
 
 /**
@@ -767,15 +800,15 @@ export function node_invalid_placement_ssr(node, message) {
  * @param {null | NodeLike} node
  */
 export function script_context_deprecated(node) {
-	w(node, "script_context_deprecated", `\`context="module"\` is deprecated, use the \`module\` attribute instead\nhttps://svelte.dev/e/script_context_deprecated`);
+	w(node, 'script_context_deprecated', `\`context="module"\` is deprecated, use the \`module\` attribute instead\nhttps://svelte.dev/e/script_context_deprecated`);
 }
 
 /**
- * Unrecognized attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it
+ * Unrecognised attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it
  * @param {null | NodeLike} node
  */
 export function script_unknown_attribute(node) {
-	w(node, "script_unknown_attribute", `Unrecognized attribute — should be one of \`generics\`, \`lang\` or \`module\`. If this exists for a preprocessor, ensure that the preprocessor removes it\nhttps://svelte.dev/e/script_unknown_attribute`);
+	w(node, 'script_unknown_attribute', `Unrecognised attribute — should be one of \`generics\`, \`lang\` or \`module\`. If this exists for a preprocessor, ensure that the preprocessor removes it\nhttps://svelte.dev/e/script_unknown_attribute`);
 }
 
 /**
@@ -783,7 +816,7 @@ export function script_unknown_attribute(node) {
  * @param {null | NodeLike} node
  */
 export function slot_element_deprecated(node) {
-	w(node, "slot_element_deprecated", `Using \`<slot>\` to render parent content is deprecated. Use \`{@render ...}\` tags instead\nhttps://svelte.dev/e/slot_element_deprecated`);
+	w(node, 'slot_element_deprecated', `Using \`<slot>\` to render parent content is deprecated. Use \`{@render ...}\` tags instead\nhttps://svelte.dev/e/slot_element_deprecated`);
 }
 
 /**
@@ -791,7 +824,7 @@ export function slot_element_deprecated(node) {
  * @param {null | NodeLike} node
  */
 export function svelte_component_deprecated(node) {
-	w(node, "svelte_component_deprecated", `\`<svelte:component>\` is deprecated in runes mode — components are dynamic by default\nhttps://svelte.dev/e/svelte_component_deprecated`);
+	w(node, 'svelte_component_deprecated', `\`<svelte:component>\` is deprecated in runes mode — components are dynamic by default\nhttps://svelte.dev/e/svelte_component_deprecated`);
 }
 
 /**
@@ -799,7 +832,7 @@ export function svelte_component_deprecated(node) {
  * @param {null | NodeLike} node
  */
 export function svelte_element_invalid_this(node) {
-	w(node, "svelte_element_invalid_this", `\`this\` should be an \`{expression}\`. Using a string attribute value will cause an error in future versions of Svelte\nhttps://svelte.dev/e/svelte_element_invalid_this`);
+	w(node, 'svelte_element_invalid_this', `\`this\` should be an \`{expression}\`. Using a string attribute value will cause an error in future versions of Svelte\nhttps://svelte.dev/e/svelte_element_invalid_this`);
 }
 
 /**
@@ -809,5 +842,5 @@ export function svelte_element_invalid_this(node) {
  * @param {string} basename
  */
 export function svelte_self_deprecated(node, name, basename) {
-	w(node, "svelte_self_deprecated", `\`<svelte:self>\` is deprecated — use self-imports (e.g. \`import ${name} from './${basename}'\`) instead\nhttps://svelte.dev/e/svelte_self_deprecated`);
+	w(node, 'svelte_self_deprecated', `\`<svelte:self>\` is deprecated — use self-imports (e.g. \`import ${name} from './${basename}'\`) instead\nhttps://svelte.dev/e/svelte_self_deprecated`);
 }
\ No newline at end of file
diff --git a/packages/svelte/src/constants.js b/packages/svelte/src/constants.js
index 03fddc5ebd..1e721b7d30 100644
--- a/packages/svelte/src/constants.js
+++ b/packages/svelte/src/constants.js
@@ -17,28 +17,36 @@ export const TRANSITION_GLOBAL = 1 << 2;
 
 export const TEMPLATE_FRAGMENT = 1;
 export const TEMPLATE_USE_IMPORT_NODE = 1 << 1;
+export const TEMPLATE_USE_SVG = 1 << 2;
+export const TEMPLATE_USE_MATHML = 1 << 3;
 
 export const HYDRATION_START = '[';
 /** used to indicate that an `{:else}...` block was rendered */
 export const HYDRATION_START_ELSE = '[!';
+/** used to indicate that a boundary's `failed` snippet was rendered on the server */
+export const HYDRATION_START_FAILED = '[?';
 export const HYDRATION_END = ']';
 export const HYDRATION_ERROR = {};
 
 export const ELEMENT_IS_NAMESPACED = 1;
 export const ELEMENT_PRESERVE_ATTRIBUTE_CASE = 1 << 1;
+export const ELEMENT_IS_INPUT = 1 << 2;
 
-export const UNINITIALIZED = Symbol();
+export const UNINITIALIZED = Symbol('uninitialized');
 
 // Dev-time component properties
 export const FILENAME = Symbol('filename');
 export const HMR = Symbol('hmr');
 
+export const NAMESPACE_HTML = 'http://www.w3.org/1999/xhtml';
 export const NAMESPACE_SVG = 'http://www.w3.org/2000/svg';
 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',
@@ -54,3 +62,5 @@ export const IGNORABLE_RUNTIME_WARNINGS = /** @type {const} */ ([
  * TODO this is currently unused
  */
 export const ELEMENTS_WITHOUT_TEXT = ['audio', 'datalist', 'dl', 'optgroup', 'select', 'video'];
+
+export const ATTACHMENT_KEY = '@attach';
diff --git a/packages/svelte/src/events/public.d.ts b/packages/svelte/src/events/public.d.ts
index ff42e523b3..bf7b20c108 100644
--- a/packages/svelte/src/events/public.d.ts
+++ b/packages/svelte/src/events/public.d.ts
@@ -8,7 +8,7 @@
 export function on<Type extends keyof WindowEventMap>(
 	window: Window,
 	type: Type,
-	handler: (this: Window, event: WindowEventMap[Type]) => any,
+	handler: (this: Window, event: WindowEventMap[Type] & { currentTarget: Window }) => any,
 	options?: AddEventListenerOptions | undefined
 ): () => void;
 /**
@@ -19,7 +19,7 @@ export function on<Type extends keyof WindowEventMap>(
 export function on<Type extends keyof DocumentEventMap>(
 	document: Document,
 	type: Type,
-	handler: (this: Document, event: DocumentEventMap[Type]) => any,
+	handler: (this: Document, event: DocumentEventMap[Type] & { currentTarget: Document }) => any,
 	options?: AddEventListenerOptions | undefined
 ): () => void;
 /**
@@ -30,7 +30,7 @@ export function on<Type extends keyof DocumentEventMap>(
 export function on<Element extends HTMLElement, Type extends keyof HTMLElementEventMap>(
 	element: Element,
 	type: Type,
-	handler: (this: Element, event: HTMLElementEventMap[Type]) => any,
+	handler: (this: Element, event: HTMLElementEventMap[Type] & { currentTarget: Element }) => any,
 	options?: AddEventListenerOptions | undefined
 ): () => void;
 /**
@@ -41,7 +41,7 @@ export function on<Element extends HTMLElement, Type extends keyof HTMLElementEv
 export function on<Element extends MediaQueryList, Type extends keyof MediaQueryListEventMap>(
 	element: Element,
 	type: Type,
-	handler: (this: Element, event: MediaQueryListEventMap[Type]) => any,
+	handler: (this: Element, event: MediaQueryListEventMap[Type] & { currentTarget: Element }) => any,
 	options?: AddEventListenerOptions | undefined
 ): () => void;
 /**
diff --git a/packages/svelte/src/html-tree-validation.js b/packages/svelte/src/html-tree-validation.js
index 98e74b638f..d05cb81a71 100644
--- a/packages/svelte/src/html-tree-validation.js
+++ b/packages/svelte/src/html-tree-validation.js
@@ -80,9 +80,9 @@ export function closing_tag_omitted(current, next) {
  */
 const disallowed_children = {
 	...autoclosing_children,
-	optgroup: { only: ['option', '#text'] },
 	// Strictly speaking, seeing an <option> doesn't mean we're in a <select>, but we assume it here
-	option: { only: ['#text'] },
+	// option or optgroup does not have an `only` restriction because newer browsers support rich HTML content
+	// inside option elements. For older browsers, hydration will handle the mismatch.
 	form: { descendant: ['form'] },
 	a: { descendant: ['a'] },
 	button: { descendant: ['button'] },
@@ -92,8 +92,6 @@ const disallowed_children = {
 	h4: { descendant: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] },
 	h5: { descendant: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] },
 	h6: { descendant: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] },
-	// https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inselect
-	select: { only: ['option', 'optgroup', '#text', 'hr', 'script', 'template'] },
 
 	// https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intd
 	// https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incaption
@@ -186,6 +184,8 @@ export function is_tag_valid_with_ancestor(child_tag, ancestors, child_loc, ance
 export function is_tag_valid_with_parent(child_tag, parent_tag, child_loc, parent_loc) {
 	if (child_tag.includes('-') || parent_tag?.includes('-')) return null; // custom elements can be anything
 
+	if (parent_tag === 'template') return null; // no errors or warning should be thrown in immediate children of template tags
+
 	const disallowed = disallowed_children[parent_tag];
 
 	const child = child_loc ? `\`<${child_tag}>\` (${child_loc})` : `\`<${child_tag}>\``;
diff --git a/packages/svelte/src/index-client.js b/packages/svelte/src/index-client.js
index 332156deb1..5e141570e0 100644
--- a/packages/svelte/src/index-client.js
+++ b/packages/svelte/src/index-client.js
@@ -1,21 +1,88 @@
 /** @import { ComponentContext, ComponentContextLegacy } from '#client' */
 /** @import { EventDispatcher } from './index.js' */
 /** @import { NotFunction } from './internal/types.js' */
-import { component_context, flush_sync, untrack } from './internal/client/runtime.js';
+import { active_reaction, untrack } from './internal/client/runtime.js';
 import { is_array } from './internal/shared/utils.js';
 import { user_effect } from './internal/client/index.js';
 import * as e from './internal/client/errors.js';
-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';
+
+if (DEV) {
+	/**
+	 * @param {string} rune
+	 */
+	function throw_rune_error(rune) {
+		if (!(rune in globalThis)) {
+			// TODO if people start adjusting the "this can contain runes" config through v-p-s more, adjust this message
+			/** @type {any} */
+			let value; // let's hope noone modifies this global, but belts and braces
+			Object.defineProperty(globalThis, rune, {
+				configurable: true,
+				// eslint-disable-next-line getter-return
+				get: () => {
+					if (value !== undefined) {
+						return value;
+					}
+
+					e.rune_outside_svelte(rune);
+				},
+				set: (v) => {
+					value = v;
+				}
+			});
+		}
+	}
+
+	throw_rune_error('$state');
+	throw_rune_error('$effect');
+	throw_rune_error('$derived');
+	throw_rune_error('$inspect');
+	throw_rune_error('$props');
+	throw_rune_error('$bindable');
+}
+
+/**
+ * Returns an [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that aborts when the current [derived](https://svelte.dev/docs/svelte/$derived) or [effect](https://svelte.dev/docs/svelte/$effect) re-runs or is destroyed.
+ *
+ * Must be called while a derived or effect is running.
+ *
+ * ```svelte
+ * <script>
+ * 	import { getAbortSignal } from 'svelte';
+ *
+ * 	let { id } = $props();
+ *
+ * 	async function getData(id) {
+ * 		const response = await fetch(`/items/${id}`, {
+ * 			signal: getAbortSignal()
+ * 		});
+ *
+ * 		return await response.json();
+ * 	}
+ *
+ * 	const data = $derived(await getData(id));
+ * </script>
+ * ```
+ */
+export function getAbortSignal() {
+	if (active_reaction === null) {
+		e.get_abort_signal_outside_reaction();
+	}
+
+	return (active_reaction.ac ??= new AbortController()).signal;
+}
 
 /**
- * The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM.
- * It must be called during the component's initialisation (but doesn't need to live *inside* the component;
- * it can be called from an external module).
+ * `onMount`, like [`$effect`](https://svelte.dev/docs/svelte/$effect), schedules a function to run as soon as the component has been mounted to the DOM.
+ * Unlike `$effect`, the provided function only runs once.
  *
- * If a function is returned _synchronously_ from `onMount`, it will be called when the component is unmounted.
+ * It must be called during the component's initialisation (but doesn't need to live _inside_ the component;
+ * it can be called from an external module). If a function is returned _synchronously_ from `onMount`,
+ * it will be called when the component is unmounted.
  *
- * `onMount` does not run inside [server-side components](https://svelte.dev/docs/svelte/svelte-server#render).
+ * `onMount` functions do not run during [server-side rendering](https://svelte.dev/docs/svelte/svelte-server#render).
  *
  * @template T
  * @param {() => NotFunction<T> | Promise<NotFunction<T>> | (() => any)} fn
@@ -23,7 +90,7 @@ import { legacy_mode_flag } from './internal/flags/index.js';
  */
 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) {
@@ -47,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));
@@ -77,7 +144,7 @@ function create_custom_event(type, detail, { bubbles = false, cancelable = false
  * The event dispatcher can be typed to narrow the allowed event names and the type of the `detail` argument:
  * ```ts
  * const dispatch = createEventDispatcher<{
- *  loaded: never; // does not take a detail argument
+ *  loaded: null; // does not take a detail argument
  *  change: string; // takes a detail argument of type string, which is required
  *  optional: number | null; // takes an optional detail argument of type number
  * }>();
@@ -90,13 +157,17 @@ 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');
 	}
 
+	/**
+	 * @param [detail]
+	 * @param [options]
+	 */
 	return (type, detail, options) => {
 		const events = /** @type {Record<string, Function | Function[]>} */ (
 			active_component_context.s.$$events
-		)?.[/** @type {any} */ (type)];
+		)?.[/** @type {string} */ (type)];
 
 		if (events) {
 			const callbacks = is_array(events) ? events.slice() : [events];
@@ -128,7 +199,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) {
@@ -151,7 +222,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) {
@@ -170,26 +241,17 @@ function init_update_callbacks(context) {
 	return (l.u ??= { a: [], b: [], m: [] });
 }
 
-/**
- * Synchronously flushes any pending state changes and those that result from it.
- * @param {() => void} [fn]
- * @returns {void}
- */
-export function flushSync(fn) {
-	flush_sync(fn);
-}
-
-export { hydrate, mount, unmount } from './internal/client/render.js';
-
+export { flushSync, fork } from './internal/client/reactivity/batch.js';
 export {
+	createContext,
 	getContext,
 	getAllContexts,
 	hasContext,
-	setContext,
-	tick,
-	untrack
-} from './internal/client/runtime.js';
-
+	setContext
+} from './internal/client/context.js';
+export { hydratable } from './internal/client/hydratable.js';
+export { hydrate, mount, unmount } from './internal/client/render.js';
+export { tick, untrack, settled } from './internal/client/runtime.js';
 export { createRawSnippet } from './internal/client/dom/blocks/snippet.js';
 
 export { createPortalKey } from './internal/shared/svelte-portal.js';
diff --git a/packages/svelte/src/index-server.js b/packages/svelte/src/index-server.js
index c91d214344..26bfadfa21 100644
--- a/packages/svelte/src/index-server.js
+++ b/packages/svelte/src/index-server.js
@@ -1,12 +1,12 @@
-/** @import { Component } from '#server' */
-import { current_component } from './internal/server/context.js';
+/** @import { SSRContext } from '#server' */
+/** @import { Renderer } from './internal/server/renderer.js' */
+import { ssr_context } from './internal/server/context.js';
 import { noop } from './internal/shared/utils.js';
 import * as e from './internal/server/errors.js';
 
 /** @param {() => void} fn */
 export function onDestroy(fn) {
-	var context = /** @type {Component} */ (current_component);
-	(context.d ??= []).push(fn);
+	/** @type {Renderer} */ (/** @type {SSRContext} */ (ssr_context).r).on_destroy(fn);
 }
 
 export {
@@ -33,9 +33,25 @@ export function unmount() {
 	e.lifecycle_function_unavailable('unmount');
 }
 
+export function fork() {
+	e.lifecycle_function_unavailable('fork');
+}
+
 export async function tick() {}
 
-export { getAllContexts, getContext, hasContext, setContext } from './internal/server/context.js';
+export async function settled() {}
+
+export { getAbortSignal } from './internal/server/abort-signal.js';
+
+export {
+	createContext,
+	getAllContexts,
+	getContext,
+	hasContext,
+	setContext
+} from './internal/server/context.js';
+
+export { hydratable } from './internal/server/hydratable.js';
 
 export { createRawSnippet } from './internal/server/blocks/snippet.js';
 
diff --git a/packages/svelte/src/index.d.ts b/packages/svelte/src/index.d.ts
index e157ce76e2..7823c8e33e 100644
--- a/packages/svelte/src/index.d.ts
+++ b/packages/svelte/src/index.d.ts
@@ -19,7 +19,9 @@ export interface ComponentConstructorOptions<
 	intro?: boolean;
 	recover?: boolean;
 	sync?: boolean;
+	idPrefix?: string;
 	$$inline?: boolean;
+	transformError?: (error: unknown) => unknown;
 }
 
 /**
@@ -278,7 +280,7 @@ declare const SnippetReturn: unique symbol;
  * ```
  * You can only call a snippet through the `{@render ...}` tag.
  *
- * https://svelte.dev/docs/svelte/snippet
+ * See the [snippet documentation](https://svelte.dev/docs/svelte/snippet) for more info.
  *
  * @template Parameters the parameters that the snippet expects (if any) as a tuple.
  */
@@ -337,6 +339,11 @@ export type MountOptions<Props extends Record<string, any> = Record<string, any>
 	 * @default true
 	 */
 	intro?: boolean;
+	/**
+	 * A function that transforms errors caught by error boundaries before they are passed to the `failed` snippet.
+	 * Defaults to the identity function.
+	 */
+	transformError?: (error: unknown) => unknown | Promise<unknown>;
 } & ({} extends Props
 	? {
 			/**
@@ -351,4 +358,20 @@ export type MountOptions<Props extends Record<string, any> = Record<string, any>
 			props: Props;
 		});
 
+/**
+ * Represents work that is happening off-screen, such as data being preloaded
+ * in anticipation of the user navigating
+ * @since 5.42
+ */
+export interface Fork {
+	/**
+	 * Commit the fork. The promise will resolve once the state change has been applied
+	 */
+	commit(): Promise<void>;
+	/**
+	 * Discard the fork
+	 */
+	discard(): void;
+}
+
 export * from './index-client.js';
diff --git a/packages/svelte/src/internal/client/constants.js b/packages/svelte/src/internal/client/constants.js
index a4840ce4eb..043b50b4b2 100644
--- a/packages/svelte/src/internal/client/constants.js
+++ b/packages/svelte/src/internal/client/constants.js
@@ -1,27 +1,87 @@
+// General flags
 export const DERIVED = 1 << 1;
 export const EFFECT = 1 << 2;
 export const RENDER_EFFECT = 1 << 3;
+/**
+ * An effect that does not destroy its child effects when it reruns.
+ * Runs as part of render effects, i.e. not eagerly as part of tree traversal or effect flushing.
+ */
+export const MANAGED_EFFECT = 1 << 24;
+/**
+ * An effect that does not destroy its child effects when it reruns (like MANAGED_EFFECT).
+ * Runs eagerly as part of tree traversal or effect flushing.
+ */
 export const BLOCK_EFFECT = 1 << 4;
 export const BRANCH_EFFECT = 1 << 5;
 export const ROOT_EFFECT = 1 << 6;
 export const BOUNDARY_EFFECT = 1 << 7;
-export const UNOWNED = 1 << 8;
-export const DISCONNECTED = 1 << 9;
+/**
+ * Indicates that a reaction is connected to an effect root — either it is an effect,
+ * or it is a derived that is depended on by at least one effect. If a derived has
+ * no dependents, we can disconnect it from the graph, allowing it to either be
+ * GC'd or reconnected later if an effect comes to depend on it again
+ */
+export const CONNECTED = 1 << 9;
 export const CLEAN = 1 << 10;
 export const DIRTY = 1 << 11;
 export const MAYBE_DIRTY = 1 << 12;
 export const INERT = 1 << 13;
 export const DESTROYED = 1 << 14;
-export const EFFECT_RAN = 1 << 15;
-/** 'Transparent' effects do not create a transition boundary */
+/** Set once a reaction has run for the first time */
+export const REACTION_RAN = 1 << 15;
+/** Effect is in the process of getting destroyed. Can be observed in child teardown functions */
+export const DESTROYING = 1 << 25;
+
+// Flags exclusive to effects
+/**
+ * 'Transparent' effects do not create a transition boundary.
+ * This is on a block effect 99% of the time but may also be on a branch effect if its parent block effect was pruned
+ */
 export const EFFECT_TRANSPARENT = 1 << 16;
-/** Svelte 4 legacy mode props need to be handled with deriveds and be recognized elsewhere, hence the dedicated flag */
-export const LEGACY_DERIVED_PROP = 1 << 17;
-export const INSPECT_EFFECT = 1 << 18;
-export const HEAD_EFFECT = 1 << 19;
-export const EFFECT_HAS_DERIVED = 1 << 20;
+export const EAGER_EFFECT = 1 << 17;
+export const HEAD_EFFECT = 1 << 18;
+export const EFFECT_PRESERVED = 1 << 19;
+export const USER_EFFECT = 1 << 20;
+export const EFFECT_OFFSCREEN = 1 << 25;
+
+// Flags exclusive to deriveds
+/**
+ * Tells that we marked this derived and its reactions as visited during the "mark as (maybe) dirty"-phase.
+ * Will be lifted during execution of the derived and during checking its dirty state (both are necessary
+ * because a derived might be checked but not executed). This is a pure performance optimization flag and
+ * should not be used for any other purpose!
+ */
+export const WAS_MARKED = 1 << 16;
+
+// 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 STATE_SYMBOL_METADATA = Symbol('$state metadata');
 export const LEGACY_PROPS = Symbol('legacy props');
 export const LOADING_ATTR_SYMBOL = Symbol('');
+export const PROXY_PATH_SYMBOL = Symbol('proxy path');
+export const ATTRIBUTES_CACHE = Symbol('attributes');
+export const CLASS_CACHE = Symbol('class');
+export const STYLE_CACHE = Symbol('style');
+export const TEXT_CACHE = Symbol('text');
+export const FORM_RESET_HANDLER = Symbol('form reset');
+/** An anchor might change, via this symbol on the original anchor we can tell HMR about the updated anchor */
+export const HMR_ANCHOR = Symbol('hmr anchor');
+
+/** allow users to ignore aborted signal errors if `reason.name === 'StaleReactionError` */
+export const STALE_REACTION = new (class StaleReactionError extends Error {
+	name = 'StaleReactionError';
+	message = 'The reaction that called `getAbortSignal()` was re-run or destroyed';
+})();
+
+export const IS_XHTML =
+	// We gotta write it like this because after downleveling the pure comment may end up in the wrong location
+	!!globalThis.document?.contentType &&
+	/* @__PURE__ */ globalThis.document.contentType.includes('xml');
+export const ELEMENT_NODE = 1;
+export const TEXT_NODE = 3;
+export const COMMENT_NODE = 8;
+export const DOCUMENT_FRAGMENT_NODE = 11;
diff --git a/packages/svelte/src/internal/client/context.js b/packages/svelte/src/internal/client/context.js
new file mode 100644
index 0000000000..0baef5c63e
--- /dev/null
+++ b/packages/svelte/src/internal/client/context.js
@@ -0,0 +1,259 @@
+/** @import { ComponentContext, DevStackEntry, Effect } from '#client' */
+import { DEV } from 'esm-env';
+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 } from './constants.js';
+
+/** @type {ComponentContext | null} */
+export let component_context = null;
+
+/** @param {ComponentContext | null} context */
+export function set_component_context(context) {
+	component_context = context;
+}
+
+/** @type {DevStackEntry | null} */
+export let dev_stack = null;
+
+/** @param {DevStackEntry | null} stack */
+export function set_dev_stack(stack) {
+	dev_stack = stack;
+}
+
+/**
+ * Execute a callback with a new dev stack entry
+ * @param {() => any} callback - Function to execute
+ * @param {DevStackEntry['type']} type - Type of block/component
+ * @param {any} component - Component function
+ * @param {number} line - Line number
+ * @param {number} column - Column number
+ * @param {Record<string, any>} [additional] - Any additional properties to add to the dev stack entry
+ * @returns {any}
+ */
+export function add_svelte_meta(callback, type, component, line, column, additional) {
+	const parent = dev_stack;
+
+	dev_stack = {
+		type,
+		file: component[FILENAME],
+		line,
+		column,
+		parent,
+		...additional
+	};
+
+	try {
+		return callback();
+	} finally {
+		dev_stack = parent;
+	}
+}
+
+/**
+ * The current component function. Different from current component context:
+ * ```html
+ * <!-- App.svelte -->
+ * <Foo>
+ *   <Bar /> <!-- context == Foo.svelte, function == App.svelte -->
+ * </Foo>
+ * ```
+ * @type {ComponentContext['function']}
+ */
+export let dev_current_component_function = null;
+
+/** @param {ComponentContext['function']} fn */
+export function set_dev_current_component_function(fn) {
+	dev_current_component_function = fn;
+}
+
+/**
+ * Returns a `[get, set]` pair of functions for working with context in a type-safe way.
+ *
+ * `get` will throw an error if no parent component called `set`.
+ *
+ * @template T
+ * @returns {[() => T, (context: T) => T]}
+ * @since 5.40.0
+ */
+export function createContext() {
+	const key = {};
+
+	return [
+		() => {
+			if (!hasContext(key)) {
+				e.missing_context();
+			}
+
+			return getContext(key);
+		},
+		(context) => setContext(key, context)
+	];
+}
+
+/**
+ * Retrieves the context that belongs to the closest parent component with the specified `key`.
+ * Must be called during component initialisation.
+ *
+ * [`createContext`](https://svelte.dev/docs/svelte/svelte#createContext) is a type-safe alternative.
+ *
+ * @template T
+ * @param {any} key
+ * @returns {T}
+ */
+export function getContext(key) {
+	const context_map = get_or_init_context_map('getContext');
+	const result = /** @type {T} */ (context_map.get(key));
+	return result;
+}
+
+/**
+ * Associates an arbitrary `context` object with the current component and the specified `key`
+ * and returns that object. The context is then available to children of the component
+ * (including slotted content) with `getContext`.
+ *
+ * Like lifecycle functions, this must be called during component initialisation.
+ *
+ * [`createContext`](https://svelte.dev/docs/svelte/svelte#createContext) is a type-safe alternative.
+ *
+ * @template T
+ * @param {any} key
+ * @param {T} context
+ * @returns {T}
+ */
+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 &&
+			// pop() runs synchronously, so this indicates we're setting context after an await
+			!(/** @type {ComponentContext} */ (component_context).i);
+
+		if (!valid) {
+			e.set_context_after_init();
+		}
+	}
+
+	context_map.set(key, context);
+	return context;
+}
+
+/**
+ * Checks whether a given `key` has been set in the context of a parent component.
+ * Must be called during component initialisation.
+ *
+ * @param {any} key
+ * @returns {boolean}
+ */
+export function hasContext(key) {
+	const context_map = get_or_init_context_map('hasContext');
+	return context_map.has(key);
+}
+
+/**
+ * Retrieves the whole context map that belongs to the closest parent component.
+ * Must be called during component initialisation. Useful, for example, if you
+ * programmatically create a component and want to pass the existing context to it.
+ *
+ * @template {Map<any, any>} [T=Map<any, any>]
+ * @returns {T}
+ */
+export function getAllContexts() {
+	const context_map = get_or_init_context_map('getAllContexts');
+	return /** @type {T} */ (context_map);
+}
+
+/**
+ * @param {Record<string, unknown>} props
+ * @param {any} runes
+ * @param {Function} [fn]
+ * @returns {void}
+ */
+export function push(props, runes = false, fn) {
+	component_context = {
+		p: component_context,
+		i: false,
+		c: null,
+		e: null,
+		s: props,
+		x: null,
+		r: /** @type {Effect} */ (active_effect),
+		l: legacy_mode_flag && !runes ? { s: null, u: null, $: [] } : null
+	};
+
+	if (DEV) {
+		// component function
+		component_context.function = fn;
+		dev_current_component_function = fn;
+	}
+}
+
+/**
+ * @template {Record<string, any>} T
+ * @param {T} [component]
+ * @returns {T}
+ */
+export function pop(component) {
+	var context = /** @type {ComponentContext} */ (component_context);
+	var effects = context.e;
+
+	if (effects !== null) {
+		context.e = null;
+
+		for (var fn of effects) {
+			create_user_effect(fn);
+		}
+	}
+
+	if (component !== undefined) {
+		context.x = component;
+	}
+
+	context.i = true;
+
+	component_context = context.p;
+
+	if (DEV) {
+		dev_current_component_function = component_context?.function ?? null;
+	}
+
+	return component ?? /** @type {T} */ ({});
+}
+
+/** @returns {boolean} */
+export function is_runes() {
+	return !legacy_mode_flag || (component_context !== null && component_context.l === null);
+}
+
+/**
+ * @param {string} name
+ * @returns {Map<unknown, unknown>}
+ */
+function get_or_init_context_map(name) {
+	if (component_context === null) {
+		e.lifecycle_outside_component(name);
+	}
+
+	return (component_context.c ??= new Map(get_parent_context(component_context) || undefined));
+}
+
+/**
+ * @param {ComponentContext} component_context
+ * @returns {Map<unknown, unknown> | null}
+ */
+function get_parent_context(component_context) {
+	let parent = component_context.p;
+	while (parent !== null) {
+		const context_map = parent.c;
+		if (context_map !== null) {
+			return context_map;
+		}
+		parent = parent.p;
+	}
+	return null;
+}
diff --git a/packages/svelte/src/internal/client/dev/assign.js b/packages/svelte/src/internal/client/dev/assign.js
index d9ef7497d5..e328543b32 100644
--- a/packages/svelte/src/internal/client/dev/assign.js
+++ b/packages/svelte/src/internal/client/dev/assign.js
@@ -1,3 +1,4 @@
+import { STATE_SYMBOL } from '#client/constants';
 import { sanitize_location } from '../../../utils.js';
 import { untrack } from '../runtime.js';
 import * as w from '../warnings.js';
@@ -10,7 +11,7 @@ import * as w from '../warnings.js';
  * @param {string} location
  */
 function compare(a, b, property, location) {
-	if (a !== b) {
+	if (a !== b && typeof b === 'object' && STATE_SYMBOL in b) {
 		w.assignment_value_stale(property, /** @type {string} */ (sanitize_location(location)));
 	}
 
@@ -20,12 +21,21 @@ function compare(a, b, property, location) {
 /**
  * @param {any} object
  * @param {string} property
- * @param {any} value
+ * @param {string} operator
+ * @param {any} rhs
  * @param {string} location
  */
-export function assign(object, property, value, location) {
+export function assign(object, property, operator, rhs, location) {
 	return compare(
-		(object[property] = value),
+		operator === '='
+			? (object[property] = rhs)
+			: operator === '&&='
+				? (object[property] &&= rhs())
+				: operator === '||='
+					? (object[property] ||= rhs())
+					: operator === '??='
+						? (object[property] ??= rhs())
+						: null,
 		untrack(() => object[property]),
 		property,
 		location
@@ -35,42 +45,21 @@ export function assign(object, property, value, location) {
 /**
  * @param {any} object
  * @param {string} property
- * @param {any} value
+ * @param {string} operator
+ * @param {any} rhs
  * @param {string} location
  */
-export function assign_and(object, property, value, location) {
+export async function assign_async(object, property, operator, rhs, location) {
 	return compare(
-		(object[property] &&= value),
-		untrack(() => object[property]),
-		property,
-		location
-	);
-}
-
-/**
- * @param {any} object
- * @param {string} property
- * @param {any} value
- * @param {string} location
- */
-export function assign_or(object, property, value, location) {
-	return compare(
-		(object[property] ||= value),
-		untrack(() => object[property]),
-		property,
-		location
-	);
-}
-
-/**
- * @param {any} object
- * @param {string} property
- * @param {any} value
- * @param {string} location
- */
-export function assign_nullish(object, property, value, location) {
-	return compare(
-		(object[property] ??= value),
+		operator === '='
+			? (object[property] = await rhs)
+			: operator === '&&='
+				? (object[property] &&= await rhs())
+				: operator === '||='
+					? (object[property] ||= await rhs())
+					: operator === '??='
+						? (object[property] ??= await rhs())
+						: null,
 		untrack(() => object[property]),
 		property,
 		location
diff --git a/packages/svelte/src/internal/client/dev/console-log.js b/packages/svelte/src/internal/client/dev/console-log.js
index a578ecea45..38860eb767 100644
--- a/packages/svelte/src/internal/client/dev/console-log.js
+++ b/packages/svelte/src/internal/client/dev/console-log.js
@@ -1,4 +1,4 @@
-import { STATE_SYMBOL } from '../constants.js';
+import { STATE_SYMBOL } from '#client/constants';
 import { snapshot } from '../../shared/clone.js';
 import * as w from '../warnings.js';
 import { untrack } from '../runtime.js';
@@ -28,7 +28,9 @@ export function log_if_contains_state(method, ...objects) {
 				// eslint-disable-next-line no-console
 				console.log('%c[snapshot]', 'color: grey', ...transformed);
 			}
-		} catch {}
+		} catch {
+			// Errors can occur when trying to snapshot objects with getters that throw or non-enumerable properties.
+		}
 	});
 
 	return objects;
diff --git a/packages/svelte/src/internal/client/dev/debug.js b/packages/svelte/src/internal/client/dev/debug.js
new file mode 100644
index 0000000000..83cc510ae2
--- /dev/null
+++ b/packages/svelte/src/internal/client/dev/debug.js
@@ -0,0 +1,518 @@
+/** @import { Derived, Effect, Value } from '#client' */
+
+import {
+	BLOCK_EFFECT,
+	BOUNDARY_EFFECT,
+	BRANCH_EFFECT,
+	CLEAN,
+	CONNECTED,
+	DERIVED,
+	DIRTY,
+	EFFECT,
+	ASYNC,
+	DESTROYED,
+	INERT,
+	MAYBE_DIRTY,
+	RENDER_EFFECT,
+	ROOT_EFFECT,
+	WAS_MARKED,
+	MANAGED_EFFECT
+} from '#client/constants';
+import { snapshot } from '../../shared/clone.js';
+import { untrack } from '../runtime.js';
+
+/**
+ *
+ * @param {Effect} effect
+ */
+export function root(effect) {
+	while (effect.parent !== null) {
+		effect = effect.parent;
+	}
+
+	return effect;
+}
+
+/**
+ *
+ * @param {Effect} effect
+ * @param {boolean} append_effect
+ * @returns {string}
+ */
+function effect_label(effect, append_effect = false) {
+	const flags = effect.f;
+
+	let label = `(unknown ${append_effect ? 'effect' : ''})`;
+
+	if ((flags & ROOT_EFFECT) !== 0) {
+		label = 'root';
+	} else if ((flags & BOUNDARY_EFFECT) !== 0) {
+		label = 'boundary';
+	} else if ((flags & BLOCK_EFFECT) !== 0) {
+		label = 'block';
+	} else if ((flags & MANAGED_EFFECT) !== 0) {
+		label = 'managed';
+	} else if ((flags & ASYNC) !== 0) {
+		label = 'async';
+	} else if ((flags & BRANCH_EFFECT) !== 0) {
+		label = 'branch';
+	} else if ((flags & RENDER_EFFECT) !== 0) {
+		label = 'render effect';
+	} else if ((flags & EFFECT) !== 0) {
+		label = 'effect';
+	}
+
+	if (append_effect && !label.endsWith('effect')) {
+		label += ' effect';
+	}
+
+	return label;
+}
+
+/**
+ * @param {Effect} effect
+ * @param {Effect[]} highlighted
+ */
+export function log_effect_tree(effect, highlighted = [], depth = 0, is_reachable = true) {
+	const flags = effect.f;
+	let label = effect_label(effect);
+
+	let status =
+		(flags & CLEAN) !== 0 ? 'clean' : (flags & MAYBE_DIRTY) !== 0 ? 'maybe dirty' : 'dirty';
+
+	let styles = [`font-weight: ${status === 'clean' ? 'normal' : 'bold'}`];
+
+	if (status !== 'clean' && !is_reachable) {
+		label = `⚠️ ${label}`;
+		styles.push(`color: red`);
+	}
+
+	if ((flags & INERT) !== 0) {
+		styles.push('font-style: italic');
+	}
+
+	if (highlighted.includes(effect)) {
+		styles.push('background-color: yellow');
+	}
+
+	// eslint-disable-next-line no-console
+	console.group(`%c${label} (${status})`, styles.join('; '));
+
+	if (depth === 0) {
+		const callsite = new Error().stack
+			?.split('\n')[2]
+			.replace(/\s+at (?: \w+\(?)?(.+)\)?/, (m, $1) => $1.replace(/\?[^:]+/, ''));
+
+		// 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) {
+		// eslint-disable-next-line no-console
+		console.groupCollapsed('%cdeps', 'font-weight: normal');
+
+		for (const dep of effect.deps) {
+			log_dep(dep);
+		}
+
+		// eslint-disable-next-line no-console
+		console.groupEnd();
+	}
+
+	if (effect.nodes) {
+		// eslint-disable-next-line no-console
+		console.log(effect.nodes.start);
+
+		if (effect.nodes.start !== effect.nodes.end) {
+			// eslint-disable-next-line no-console
+			console.log(effect.nodes.end);
+		}
+	}
+
+	var child_is_reachable = is_reachable && ((flags & BRANCH_EFFECT) === 0 || (flags & CLEAN) === 0);
+
+	let child = effect.first;
+	while (child !== null) {
+		log_effect_tree(child, highlighted, depth + 1, child_is_reachable);
+		child = child.next;
+	}
+
+	// eslint-disable-next-line no-console
+	console.groupEnd();
+}
+
+/**
+ *
+ * @param {Value} dep
+ */
+function log_dep(dep) {
+	if ((dep.f & DERIVED) !== 0) {
+		const derived = /** @type {Derived} */ (dep);
+
+		// eslint-disable-next-line no-console
+		console.groupCollapsed(
+			`%c$derived %c${dep.label ?? '<unknown>'}`,
+			'font-weight: bold; color: CornflowerBlue',
+			'font-weight: normal',
+			untrack(() => snapshot(derived.v))
+		);
+
+		if (derived.deps) {
+			for (const d of derived.deps) {
+				log_dep(d);
+			}
+		}
+
+		// eslint-disable-next-line no-console
+		console.groupEnd();
+	} else {
+		// eslint-disable-next-line no-console
+		console.log(
+			`%c$state %c${dep.label ?? '<unknown>'}`,
+			'font-weight: bold; color: CornflowerBlue',
+			'font-weight: normal',
+			untrack(() => snapshot(dep.v))
+		);
+	}
+}
+
+/**
+ * Logs all reactions of a source or derived transitively
+ * @param {Derived | Value} signal
+ */
+export function log_reactions(signal) {
+	/** @type {Set<Derived | Value>} */
+	const visited = new Set();
+
+	/**
+	 * Returns an array of flag names that are set on the given flags bitmask
+	 * @param {number} flags
+	 * @returns {string[]}
+	 */
+	function get_derived_flag_names(flags) {
+		/** @type {string[]} */
+		const names = [];
+
+		if ((flags & CLEAN) !== 0) names.push('CLEAN');
+		if ((flags & DIRTY) !== 0) names.push('DIRTY');
+		if ((flags & MAYBE_DIRTY) !== 0) names.push('MAYBE_DIRTY');
+		if ((flags & CONNECTED) !== 0) names.push('CONNECTED');
+		if ((flags & WAS_MARKED) !== 0) names.push('WAS_MARKED');
+		if ((flags & INERT) !== 0) names.push('INERT');
+		if ((flags & DESTROYED) !== 0) names.push('DESTROYED');
+
+		return names;
+	}
+
+	/**
+	 * @param {Derived | Value} d
+	 * @param {number} depth
+	 */
+	function log_derived(d, depth) {
+		const flags = d.f;
+		const flag_names = get_derived_flag_names(flags);
+		const flags_str = flag_names.length > 0 ? `(${flag_names.join(', ')})` : '(no flags)';
+
+		// eslint-disable-next-line no-console
+		console.group(
+			`%c${flags & DERIVED ? '$derived' : '$state'} %c${d.label ?? '<unknown>'} %c${flags_str}`,
+			'font-weight: bold; color: CornflowerBlue',
+			'font-weight: normal; color: inherit',
+			'font-weight: normal; color: gray'
+		);
+
+		// eslint-disable-next-line no-console
+		console.log(untrack(() => snapshot(d.v)));
+
+		if ('fn' in d) {
+			// eslint-disable-next-line no-console
+			console.log('%cfn:', 'font-weight: bold', d.fn);
+		}
+
+		if (d.reactions !== null && d.reactions.length > 0) {
+			// eslint-disable-next-line no-console
+			console.group('%creactions', 'font-weight: bold');
+
+			for (const reaction of d.reactions) {
+				if ((reaction.f & DERIVED) !== 0) {
+					const derived_reaction = /** @type {Derived} */ (reaction);
+
+					if (visited.has(derived_reaction)) {
+						// eslint-disable-next-line no-console
+						console.log(
+							`%c$derived %c${derived_reaction.label ?? '<unknown>'} %c(already seen)`,
+							'font-weight: bold; color: CornflowerBlue',
+							'font-weight: normal; color: inherit',
+							'font-weight: bold; color: orange'
+						);
+					} else {
+						visited.add(derived_reaction);
+						log_derived(derived_reaction, depth + 1);
+					}
+				} else {
+					// It's an effect
+					const label = effect_label(/** @type {Effect} */ (reaction), true);
+					const status = (flags & MAYBE_DIRTY) !== 0 ? 'maybe dirty' : 'dirty';
+
+					// Collect parent statuses
+					/** @type {string[]} */
+					const parent_statuses = [];
+					let show = false;
+					let current = /** @type {Effect} */ (reaction).parent;
+					while (current !== null) {
+						const parent_flags = current.f;
+						if ((parent_flags & (ROOT_EFFECT | BRANCH_EFFECT)) !== 0) {
+							const parent_status = (parent_flags & CLEAN) !== 0 ? 'clean' : 'not clean';
+							if (parent_status === 'clean' && parent_statuses.includes('not clean')) show = true;
+							parent_statuses.push(parent_status);
+						}
+						if (!current.parent) break;
+						current = current.parent;
+					}
+
+					// Check if reaction is reachable from root
+					const seen_effects = new Set();
+					let reachable = false;
+					/**
+					 * @param {Effect | null} effect
+					 */
+					function check_reachable(effect) {
+						if (effect === null || reachable) return;
+						if (effect === reaction) {
+							reachable = true;
+							return;
+						}
+						if (effect.f & DESTROYED) return;
+						if (seen_effects.has(effect)) {
+							throw new Error('');
+						}
+						seen_effects.add(effect);
+						let child = effect.first;
+						while (child !== null) {
+							check_reachable(child);
+							child = child.next;
+						}
+					}
+					try {
+						if (current) check_reachable(current);
+					} catch (e) {
+						// eslint-disable-next-line no-console
+						console.log(
+							`%c⚠️ Circular reference detected in effect tree`,
+							'font-weight: bold; color: red',
+							seen_effects
+						);
+					}
+
+					if (!reachable) {
+						// eslint-disable-next-line no-console
+						console.log(
+							`%c⚠️ Effect is NOT reachable from its parent chain`,
+							'font-weight: bold; color: red'
+						);
+					}
+
+					const parent_status_str = show ? ` (${parent_statuses.join(', ')})` : '';
+
+					// eslint-disable-next-line no-console
+					console.log(
+						`%c${label} (${status})${parent_status_str}`,
+						`font-weight: bold; color: ${parent_status_str ? 'red' : 'green'}`,
+						reaction
+					);
+				}
+			}
+
+			// eslint-disable-next-line no-console
+			console.groupEnd();
+		} else {
+			// eslint-disable-next-line no-console
+			console.log('%cno reactions', 'font-style: italic; color: gray');
+		}
+
+		// eslint-disable-next-line no-console
+		console.groupEnd();
+	}
+
+	// eslint-disable-next-line no-console
+	console.group(`%cDerived Reactions Graph`, 'font-weight: bold; color: purple');
+
+	visited.add(signal);
+	log_derived(signal, 0);
+
+	// eslint-disable-next-line no-console
+	console.groupEnd();
+}
+
+/**
+ * Traverses an effect tree and logs branches where a non-clean branch exists below a clean branch
+ * @param {Effect} effect
+ */
+export function log_inconsistent_branches(effect) {
+	const root_effect = root(effect);
+
+	/**
+	 * @typedef {{
+	 *   effect: Effect,
+	 *   status: 'clean' | 'maybe dirty' | 'dirty',
+	 *   parent_clean: boolean,
+	 *   children: BranchInfo[]
+	 * }} BranchInfo
+	 */
+
+	/**
+	 * Collects branch effects from the tree
+	 * @param {Effect} eff
+	 * @param {boolean} parent_clean - whether any ancestor branch is clean
+	 * @returns {BranchInfo[]}
+	 */
+	function collect_branches(eff, parent_clean) {
+		/** @type {BranchInfo[]} */
+		const branches = [];
+		const flags = eff.f;
+		const is_branch = (flags & BRANCH_EFFECT) !== 0;
+
+		if (is_branch) {
+			const status =
+				(flags & CLEAN) !== 0 ? 'clean' : (flags & MAYBE_DIRTY) !== 0 ? 'maybe dirty' : 'dirty';
+
+			/** @type {BranchInfo[]} */
+			const child_branches = [];
+
+			let child = eff.first;
+			while (child !== null) {
+				child_branches.push(...collect_branches(child, status === 'clean'));
+				child = child.next;
+			}
+
+			branches.push({
+				effect: eff,
+				status,
+				parent_clean,
+				children: child_branches
+			});
+		} else {
+			// Not a branch, continue traversing
+			let child = eff.first;
+			while (child !== null) {
+				branches.push(...collect_branches(child, parent_clean));
+				child = child.next;
+			}
+		}
+
+		return branches;
+	}
+
+	/**
+	 * Checks if a branch tree contains any inconsistencies (non-clean below clean)
+	 * @param {BranchInfo} branch
+	 * @param {boolean} ancestor_clean
+	 * @returns {boolean}
+	 */
+	function has_inconsistency(branch, ancestor_clean) {
+		const is_inconsistent = ancestor_clean && branch.status !== 'clean';
+		if (is_inconsistent) return true;
+
+		const new_ancestor_clean = ancestor_clean || branch.status === 'clean';
+		for (const child of branch.children) {
+			if (has_inconsistency(child, new_ancestor_clean)) return true;
+		}
+		return false;
+	}
+
+	/**
+	 * Logs a branch and its children, but only if there are inconsistencies
+	 * @param {BranchInfo} branch
+	 * @param {boolean} ancestor_clean
+	 * @param {number} depth
+	 */
+	function log_branch(branch, ancestor_clean, depth) {
+		const is_inconsistent = ancestor_clean && branch.status !== 'clean';
+		const new_ancestor_clean = ancestor_clean || branch.status === 'clean';
+
+		// Only log if this branch or any descendant has an inconsistency
+		if (!has_inconsistency(branch, ancestor_clean) && !is_inconsistent) {
+			return;
+		}
+
+		const style = is_inconsistent
+			? 'font-weight: bold; color: red'
+			: branch.status === 'clean'
+				? 'font-weight: normal; color: green'
+				: 'font-weight: bold; color: orange';
+
+		const warning = is_inconsistent ? ' ⚠️ INCONSISTENT' : '';
+
+		// eslint-disable-next-line no-console
+		console.group(`%cbranch (${branch.status})${warning}`, style);
+
+		// eslint-disable-next-line no-console
+		console.log('%ceffect:', 'font-weight: bold', branch.effect);
+
+		if (branch.effect.fn) {
+			// eslint-disable-next-line no-console
+			console.log('%cfn:', 'font-weight: bold', branch.effect.fn);
+		}
+
+		if (branch.effect.deps !== null) {
+			// eslint-disable-next-line no-console
+			console.groupCollapsed('%cdeps', 'font-weight: normal');
+			for (const dep of branch.effect.deps) {
+				log_dep(dep);
+			}
+			// eslint-disable-next-line no-console
+			console.groupEnd();
+		}
+
+		if (is_inconsistent) {
+			log_effect_tree(branch.effect);
+		} else if (branch.children.length > 0) {
+			// eslint-disable-next-line no-console
+			console.group('%cchild branches', 'font-weight: bold');
+			for (const child of branch.children) {
+				log_branch(child, new_ancestor_clean, depth + 1);
+			}
+			// eslint-disable-next-line no-console
+			console.groupEnd();
+		}
+
+		// eslint-disable-next-line no-console
+		console.groupEnd();
+	}
+
+	const branches = collect_branches(root_effect, false);
+
+	// Check if there are any inconsistencies at all
+	let has_any_inconsistency = false;
+	for (const branch of branches) {
+		if (has_inconsistency(branch, false)) {
+			has_any_inconsistency = true;
+			break;
+		}
+	}
+
+	if (!has_any_inconsistency) {
+		// eslint-disable-next-line no-console
+		console.log('%cNo inconsistent branches found', 'font-weight: bold; color: green');
+		return;
+	}
+
+	// eslint-disable-next-line no-console
+	console.group(`%cInconsistent Branches (non-clean below clean)`, 'font-weight: bold; color: red');
+
+	for (const branch of branches) {
+		log_branch(branch, false, 0);
+	}
+
+	// eslint-disable-next-line no-console
+	console.groupEnd();
+
+	return true;
+}
diff --git a/packages/svelte/src/internal/client/dev/elements.js b/packages/svelte/src/internal/client/dev/elements.js
index bf75e6e5cc..df765607a0 100644
--- a/packages/svelte/src/internal/client/dev/elements.js
+++ b/packages/svelte/src/internal/client/dev/elements.js
@@ -1,6 +1,8 @@
-/** @import { SourceLocation } from '#shared' */
-import { HYDRATION_END, HYDRATION_START, HYDRATION_START_ELSE } from '../../../constants.js';
+/** @import { SourceLocation } from '#client' */
+import { COMMENT_NODE, DOCUMENT_FRAGMENT_NODE, ELEMENT_NODE } from '#client/constants';
+import { HYDRATION_END, HYDRATION_START } from '../../../constants.js';
 import { hydrating } from '../dom/hydration.js';
+import { dev_stack } from '../context.js';
 
 /**
  * @param {any} fn
@@ -12,7 +14,7 @@ export function add_locations(fn, filename, locations) {
 	return (/** @type {any[]} */ ...args) => {
 		const dom = fn(...args);
 
-		var node = hydrating ? dom : dom.nodeType === 11 ? dom.firstChild : dom;
+		var node = hydrating ? dom : dom.nodeType === DOCUMENT_FRAGMENT_NODE ? dom.firstChild : dom;
 		assign_locations(node, filename, locations);
 
 		return dom;
@@ -27,6 +29,7 @@ export function add_locations(fn, filename, locations) {
 function assign_location(element, filename, location) {
 	// @ts-expect-error
 	element.__svelte_meta = {
+		parent: dev_stack,
 		loc: { file: filename, line: location[0], column: location[1] }
 	};
 
@@ -45,13 +48,13 @@ function assign_locations(node, filename, locations) {
 	var depth = 0;
 
 	while (node && i < locations.length) {
-		if (hydrating && node.nodeType === 8) {
+		if (hydrating && node.nodeType === COMMENT_NODE) {
 			var comment = /** @type {Comment} */ (node);
-			if (comment.data === HYDRATION_START || comment.data === HYDRATION_START_ELSE) depth += 1;
+			if (comment.data[0] === HYDRATION_START) depth += 1;
 			else if (comment.data[0] === HYDRATION_END) depth -= 1;
 		}
 
-		if (depth === 0 && node.nodeType === 1) {
+		if (depth === 0 && node.nodeType === ELEMENT_NODE) {
 			assign_location(/** @type {Element} */ (node), filename, locations[i++]);
 		}
 
diff --git a/packages/svelte/src/internal/client/dev/equality.js b/packages/svelte/src/internal/client/dev/equality.js
index 170f7baf95..bbc28dc638 100644
--- a/packages/svelte/src/internal/client/dev/equality.js
+++ b/packages/svelte/src/internal/client/dev/equality.js
@@ -17,10 +17,11 @@ export function init_array_prototype_warnings() {
 		const index = indexOf.call(this, item, from_index);
 
 		if (index === -1) {
-			const test = indexOf.call(get_proxied_value(this), get_proxied_value(item), from_index);
-
-			if (test !== -1) {
-				w.state_proxy_equality_mismatch('array.indexOf(...)');
+			for (let i = from_index ?? 0; i < this.length; i += 1) {
+				if (get_proxied_value(this[i]) === item) {
+					w.state_proxy_equality_mismatch('array.indexOf(...)');
+					break;
+				}
 			}
 		}
 
@@ -33,16 +34,11 @@ export function init_array_prototype_warnings() {
 		const index = lastIndexOf.call(this, item, from_index ?? this.length - 1);
 
 		if (index === -1) {
-			// we need to specify this.length - 1 because it's probably using something like
-			// `arguments` inside so passing undefined is different from not passing anything
-			const test = lastIndexOf.call(
-				get_proxied_value(this),
-				get_proxied_value(item),
-				from_index ?? this.length - 1
-			);
-
-			if (test !== -1) {
-				w.state_proxy_equality_mismatch('array.lastIndexOf(...)');
+			for (let i = 0; i <= (from_index ?? this.length - 1); i += 1) {
+				if (get_proxied_value(this[i]) === item) {
+					w.state_proxy_equality_mismatch('array.lastIndexOf(...)');
+					break;
+				}
 			}
 		}
 
@@ -53,10 +49,11 @@ export function init_array_prototype_warnings() {
 		const has = includes.call(this, item, from_index);
 
 		if (!has) {
-			const test = includes.call(get_proxied_value(this), get_proxied_value(item), from_index);
-
-			if (test) {
-				w.state_proxy_equality_mismatch('array.includes(...)');
+			for (let i = 0; i < this.length; i += 1) {
+				if (get_proxied_value(this[i]) === item) {
+					w.state_proxy_equality_mismatch('array.includes(...)');
+					break;
+				}
 			}
 		}
 
diff --git a/packages/svelte/src/internal/client/dev/hmr.js b/packages/svelte/src/internal/client/dev/hmr.js
index ee5e08c0b1..73dba95f9b 100644
--- a/packages/svelte/src/internal/client/dev/hmr.js
+++ b/packages/svelte/src/internal/client/dev/hmr.js
@@ -1,33 +1,37 @@
-/** @import { Source, Effect, TemplateNode } from '#client' */
+/** @import { Effect, TemplateNode } from '#client' */
 import { FILENAME, HMR } from '../../../constants.js';
-import { EFFECT_TRANSPARENT } from '../constants.js';
+import { EFFECT_TRANSPARENT, HMR_ANCHOR } from '#client/constants';
 import { hydrate_node, hydrating } from '../dom/hydration.js';
 import { block, branch, destroy_effect } from '../reactivity/effects.js';
-import { source } from '../reactivity/sources.js';
+import { set, source } from '../reactivity/sources.js';
 import { set_should_intro } from '../render.js';
-import { get } from '../runtime.js';
+import { active_effect, get } from '../runtime.js';
 
 /**
  * @template {(anchor: Comment, props: any) => any} Component
- * @param {Component} original
- * @param {() => Source<Component>} get_source
+ * @param {Component} fn
  */
-export function hmr(original, get_source) {
+export function hmr(fn) {
+	const current = source(fn);
+
 	/**
-	 * @param {TemplateNode} anchor
+	 * @param {TemplateNode} initial_anchor
 	 * @param {any} props
 	 */
-	function wrapper(anchor, props) {
+	function wrapper(initial_anchor, props) {
+		let component = {};
 		let instance = {};
 
 		/** @type {Effect} */
 		let effect;
 
 		let ran = false;
+		let anchor = initial_anchor;
 
 		block(() => {
-			const source = get_source();
-			const component = get(source);
+			if (component === (component = get(current))) {
+				return;
+			}
 
 			if (effect) {
 				// @ts-ignore
@@ -36,20 +40,27 @@ export function hmr(original, get_source) {
 			}
 
 			effect = branch(() => {
+				anchor = /** @type {any} */ (anchor)[HMR_ANCHOR] ?? anchor;
+
 				// when the component is invalidated, replace it without transitions
 				if (ran) set_should_intro(false);
 
 				// preserve getters/setters
-				Object.defineProperties(
-					instance,
-					Object.getOwnPropertyDescriptors(
-						// @ts-expect-error
-						new.target ? new component(anchor, props) : component(anchor, props)
-					)
-				);
+				var result =
+					// @ts-expect-error
+					new.target ? new component(anchor, props) : component(anchor, props);
+				// a component is not guaranteed to return something and we can't invoke getOwnPropertyDescriptors on undefined
+				if (result) {
+					Object.defineProperties(instance, Object.getOwnPropertyDescriptors(result));
+				}
 
 				if (ran) set_should_intro(true);
 			});
+
+			// Forward the nodes from the inner effect to the outer active effect which would
+			// get them if the HMR wrapper wasn't there. Do this inside the block not outside
+			// so that HMR updates to the component will also update the nodes on the active effect.
+			/** @type {Effect} */ (active_effect).nodes = effect.nodes;
 		}, EFFECT_TRANSPARENT);
 
 		ran = true;
@@ -62,16 +73,24 @@ export function hmr(original, get_source) {
 	}
 
 	// @ts-expect-error
-	wrapper[FILENAME] = original[FILENAME];
+	wrapper[FILENAME] = fn[FILENAME];
 
-	// @ts-expect-error
+	// @ts-ignore
 	wrapper[HMR] = {
-		// When we accept an update, we set the original source to the new component
-		original,
-		// The `get_source` parameter reads `wrapper[HMR].source`, but in the `accept`
-		// function we always replace it with `previous[HMR].source`, which in practice
-		// means we only ever update the original
-		source: source(original)
+		fn,
+		current,
+		update: (/** @type {any} */ incoming) => {
+			// This logic ensures that the first version of the component is the one
+			// whose update function and therefore block effect is preserved across updates.
+			// If we don't do this dance and instead just use `incoming` as the new component
+			// and then update, we'll create an ever-growing stack of block effects.
+
+			// Trigger the original block effect
+			set(wrapper[HMR].current, incoming[HMR].fn);
+
+			// Replace the incoming source with the original one
+			incoming[HMR].current = wrapper[HMR].current;
+		}
 	};
 
 	return wrapper;
diff --git a/packages/svelte/src/internal/client/dev/inspect.js b/packages/svelte/src/internal/client/dev/inspect.js
index e13ef470cf..7a8fa0e963 100644
--- a/packages/svelte/src/internal/client/dev/inspect.js
+++ b/packages/svelte/src/internal/client/dev/inspect.js
@@ -1,36 +1,74 @@
 import { UNINITIALIZED } from '../../../constants.js';
 import { snapshot } from '../../shared/clone.js';
-import { inspect_effect, validate_effect } from '../reactivity/effects.js';
+import { eager_effect, render_effect, validate_effect } from '../reactivity/effects.js';
+import { untrack } from '../runtime.js';
+import { get_error } from '../../shared/dev.js';
 
 /**
  * @param {() => any[]} get_value
- * @param {Function} [inspector]
+ * @param {Function} inspector
+ * @param {boolean} show_stack
  */
-// eslint-disable-next-line no-console
-export function inspect(get_value, inspector = console.log) {
+export function inspect(get_value, inspector, show_stack = false) {
 	validate_effect('$inspect');
 
 	let initial = true;
+	let error = /** @type {any} */ (UNINITIALIZED);
 
-	inspect_effect(() => {
-		/** @type {any} */
-		var value = 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)
+	eager_effect(() => {
+		error = 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) {
-			inspector(initial ? 'init' : 'update', ...snapshot(value, true));
-		}
+		var snap = snapshot(value, true, true);
+		untrack(() => {
+			if (show_stack) {
+				inspector(...snap);
+
+				if (!initial) {
+					const stack = get_error('$inspect(...)');
+					if (stack) {
+						// eslint-disable-next-line no-console
+						console.groupCollapsed('stack trace');
+						// eslint-disable-next-line no-console
+						console.log(stack);
+						// eslint-disable-next-line no-console
+						console.groupEnd();
+					}
+				}
+			} else {
+				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/legacy.js b/packages/svelte/src/internal/client/dev/legacy.js
index a1d2fc8823..02428dc824 100644
--- a/packages/svelte/src/internal/client/dev/legacy.js
+++ b/packages/svelte/src/internal/client/dev/legacy.js
@@ -1,7 +1,6 @@
 import * as e from '../errors.js';
-import { component_context } from '../runtime.js';
+import { component_context } from '../context.js';
 import { FILENAME } from '../../../constants.js';
-import { get_component } from './ownership.js';
 
 /** @param {Function & { [FILENAME]: string }} target */
 export function check_target(target) {
@@ -15,9 +14,7 @@ export function legacy_api() {
 
 	/** @param {string} method */
 	function error(method) {
-		// @ts-expect-error
-		const parent = get_component()?.[FILENAME] ?? 'Something';
-		e.component_api_changed(parent, method, component[FILENAME]);
+		e.component_api_changed(method, component[FILENAME]);
 	}
 
 	return {
diff --git a/packages/svelte/src/internal/client/dev/ownership.js b/packages/svelte/src/internal/client/dev/ownership.js
index d113d9ae90..19d2cdb343 100644
--- a/packages/svelte/src/internal/client/dev/ownership.js
+++ b/packages/svelte/src/internal/client/dev/ownership.js
@@ -1,264 +1,81 @@
-/** @import { ProxyMetadata } from '#client' */
 /** @typedef {{ file: string, line: number, column: number }} Location */
 
-import { STATE_SYMBOL_METADATA } from '../constants.js';
-import { render_effect, user_pre_effect } from '../reactivity/effects.js';
-import { dev_current_component_function } from '../runtime.js';
-import { get_prototype_of } from '../../shared/utils.js';
-import * as w from '../warnings.js';
+import { get_descriptor } from '../../shared/utils.js';
+import { LEGACY_PROPS, STATE_SYMBOL } from '#client/constants';
 import { FILENAME } from '../../../constants.js';
-
-/** @type {Record<string, Array<{ start: Location, end: Location, component: Function }>>} */
-const boundaries = {};
-
-const chrome_pattern = /at (?:.+ \()?(.+):(\d+):(\d+)\)?$/;
-const firefox_pattern = /@(.+):(\d+):(\d+)$/;
-
-function get_stack() {
-	const stack = new Error().stack;
-	if (!stack) return null;
-
-	const entries = [];
-
-	for (const line of stack.split('\n')) {
-		let match = chrome_pattern.exec(line) ?? firefox_pattern.exec(line);
-
-		if (match) {
-			entries.push({
-				file: match[1],
-				line: +match[2],
-				column: +match[3]
-			});
-		}
-	}
-
-	return entries;
-}
+import { component_context } from '../context.js';
+import * as w from '../warnings.js';
+import { sanitize_location } from '../../../utils.js';
 
 /**
- * Determines which `.svelte` component is responsible for a given state change
- * @returns {Function | null}
+ * Sets up a validator that
+ * - traverses the path of a prop to find out if it is allowed to be mutated
+ * - checks that the binding chain is not interrupted
+ * @param {Record<string, any>} props
  */
-export function get_component() {
-	// first 4 lines are svelte internals; adjust this number if we change the internal call stack
-	const stack = get_stack()?.slice(4);
-	if (!stack) return null;
-
-	for (let i = 0; i < stack.length; i++) {
-		const entry = stack[i];
-		const modules = boundaries[entry.file];
-		if (!modules) {
-			// If the first entry is not a component, that means the modification very likely happened
-			// within a .svelte.js file, possibly triggered by a component. Since these files are not part
-			// of the bondaries/component context heuristic, we need to bail in this case, else we would
-			// have false positives when the .svelte.ts file provides a state creator function, encapsulating
-			// the state and its mutations, and is being called from a component other than the one who
-			// called the state creator function.
-			if (i === 0) return null;
-			continue;
-		}
-
-		for (const module of modules) {
-			if (module.end == null) {
-				return null;
-			}
-			if (module.start.line < entry.line && module.end.line > entry.line) {
-				return module.component;
+export function create_ownership_validator(props) {
+	const component = component_context?.function;
+	const parent = component_context?.p?.function;
+
+	return {
+		/**
+		 * @param {string} prop
+		 * @param {any[]} path
+		 * @param {any} result
+		 * @param {number} line
+		 * @param {number} column
+		 */
+		mutation: (prop, path, result, line, column) => {
+			const name = path[0];
+			if (is_bound_or_unset(props, name) || !parent) {
+				return result;
 			}
-		}
-	}
-
-	return null;
-}
-
-export const ADD_OWNER = Symbol('ADD_OWNER');
 
-/**
- * Together with `mark_module_end`, this function establishes the boundaries of a `.svelte` file,
- * such that subsequent calls to `get_component` can tell us which component is responsible
- * for a given state change
- */
-export function mark_module_start() {
-	const start = get_stack()?.[2];
-
-	if (start) {
-		(boundaries[start.file] ??= []).push({
-			start,
-			// @ts-expect-error
-			end: null,
-			// @ts-expect-error we add the component at the end, since HMR will overwrite the function
-			component: null
-		});
-	}
-}
-
-/**
- * @param {Function} component
- */
-export function mark_module_end(component) {
-	const end = get_stack()?.[2];
-
-	if (end) {
-		const boundaries_file = boundaries[end.file];
-		const boundary = boundaries_file[boundaries_file.length - 1];
-
-		boundary.end = end;
-		boundary.component = component;
-	}
-}
+			/** @type {any} */
+			let value = props;
 
-/**
- * @param {any} object
- * @param {any} owner
- * @param {boolean} [global]
- * @param {boolean} [skip_warning]
- */
-export function add_owner(object, owner, global = false, skip_warning = false) {
-	if (object && !global) {
-		const component = dev_current_component_function;
-		const metadata = object[STATE_SYMBOL_METADATA];
-		if (metadata && !has_owner(metadata, component)) {
-			let original = get_owner(metadata);
-
-			if (owner[FILENAME] !== component[FILENAME] && !skip_warning) {
-				w.ownership_invalid_binding(component[FILENAME], owner[FILENAME], original[FILENAME]);
+			for (let i = 0; i < path.length - 1; i++) {
+				value = value[path[i]];
+				if (!value?.[STATE_SYMBOL]) {
+					return result;
+				}
 			}
-		}
-	}
-
-	add_owner_to_object(object, owner, new Set());
-}
-
-/**
- * @param {() => unknown} get_object
- * @param {any} Component
- * @param {boolean} [skip_warning]
- */
-export function add_owner_effect(get_object, Component, skip_warning = false) {
-	user_pre_effect(() => {
-		add_owner(get_object(), Component, false, skip_warning);
-	});
-}
-
-/**
- * @param {ProxyMetadata | null} from
- * @param {ProxyMetadata} to
- */
-export function widen_ownership(from, to) {
-	if (to.owners === null) {
-		return;
-	}
 
-	while (from) {
-		if (from.owners === null) {
-			to.owners = null;
-			break;
-		}
-
-		for (const owner of from.owners) {
-			to.owners.add(owner);
-		}
-
-		from = from.parent;
-	}
-}
-
-/**
- * @param {any} object
- * @param {Function} owner
- * @param {Set<any>} seen
- */
-function add_owner_to_object(object, owner, seen) {
-	const metadata = /** @type {ProxyMetadata} */ (object?.[STATE_SYMBOL_METADATA]);
-
-	if (metadata) {
-		// this is a state proxy, add owner directly, if not globally shared
-		if ('owners' in metadata && metadata.owners != null) {
-			metadata.owners.add(owner);
-		}
-	} else if (object && typeof object === 'object') {
-		if (seen.has(object)) return;
-		seen.add(object);
-		if (ADD_OWNER in object && object[ADD_OWNER]) {
-			// this is a class with state fields. we put this in a render effect
-			// so that if state is replaced (e.g. `instance.name = { first, last }`)
-			// the new state is also co-owned by the caller of `getContext`
-			render_effect(() => {
-				object[ADD_OWNER](owner);
-			});
-		} else {
-			var proto = get_prototype_of(object);
-
-			if (proto === Object.prototype) {
-				// recurse until we find a state proxy
-				for (const key in object) {
-					add_owner_to_object(object[key], owner, seen);
-				}
-			} else if (proto === Array.prototype) {
-				// recurse until we find a state proxy
-				for (let i = 0; i < object.length; i += 1) {
-					add_owner_to_object(object[i], owner, seen);
-				}
+			const location = sanitize_location(`${component[FILENAME]}:${line}:${column}`);
+
+			w.ownership_invalid_mutation(name, location, prop, parent[FILENAME]);
+
+			return result;
+		},
+		/**
+		 * @param {any} key
+		 * @param {any} child_component
+		 * @param {() => any} value
+		 */
+		binding: (key, child_component, value) => {
+			if (!is_bound_or_unset(props, key) && parent && value()?.[STATE_SYMBOL]) {
+				w.ownership_invalid_binding(
+					component[FILENAME],
+					key,
+					child_component[FILENAME],
+					parent[FILENAME]
+				);
 			}
 		}
-	}
-}
-
-/**
- * @param {ProxyMetadata} metadata
- * @param {Function} component
- * @returns {boolean}
- */
-function has_owner(metadata, component) {
-	if (metadata.owners === null) {
-		return true;
-	}
-
-	return (
-		metadata.owners.has(component) ||
-		(metadata.parent !== null && has_owner(metadata.parent, component))
-	);
+	};
 }
 
 /**
- * @param {ProxyMetadata} metadata
- * @returns {any}
+ * @param {Record<string, any>} props
+ * @param {string} prop_name
  */
-function get_owner(metadata) {
+function is_bound_or_unset(props, prop_name) {
+	// Can be the case when someone does `mount(Component, props)` with `let props = $state({...})`
+	// or `createClassComponent(Component, props)`
+	const is_entry_props = STATE_SYMBOL in props || LEGACY_PROPS in props;
 	return (
-		metadata?.owners?.values().next().value ??
-		get_owner(/** @type {ProxyMetadata} */ (metadata.parent))
+		!!get_descriptor(props, prop_name)?.set ||
+		(is_entry_props && prop_name in props) ||
+		!(prop_name in props)
 	);
 }
-
-let skip = false;
-
-/**
- * @param {() => any} fn
- */
-export function skip_ownership_validation(fn) {
-	skip = true;
-	fn();
-	skip = false;
-}
-
-/**
- * @param {ProxyMetadata} metadata
- */
-export function check_ownership(metadata) {
-	if (skip) return;
-
-	const component = get_component();
-
-	if (component && !has_owner(metadata, component)) {
-		let original = get_owner(metadata);
-
-		// @ts-expect-error
-		if (original[FILENAME] !== component[FILENAME]) {
-			// @ts-expect-error
-			w.ownership_invalid_mutation(component[FILENAME], original[FILENAME]);
-		} else {
-			w.ownership_invalid_mutation();
-		}
-	}
-}
diff --git a/packages/svelte/src/internal/client/dev/tracing.js b/packages/svelte/src/internal/client/dev/tracing.js
index 1426e9efc9..c6edfde933 100644
--- a/packages/svelte/src/internal/client/dev/tracing.js
+++ b/packages/svelte/src/internal/client/dev/tracing.js
@@ -1,57 +1,45 @@
-/** @import { Derived, Reaction, Signal, Value } from '#client' */
+/** @import { Derived, Reaction, Value } from '#client' */
 import { UNINITIALIZED } from '../../../constants.js';
 import { snapshot } from '../../shared/clone.js';
-import { define_property } from '../../shared/utils.js';
-import { DERIVED, STATE_SYMBOL } from '../constants.js';
+import { DERIVED, ASYNC, PROXY_PATH_SYMBOL, STATE_SYMBOL } from '#client/constants';
 import { effect_tracking } from '../reactivity/effects.js';
-import { active_reaction, captured_signals, set_captured_signals, untrack } from '../runtime.js';
+import { active_reaction, untrack } from '../runtime.js';
 
-/** @type { any } */
+/**
+ * @typedef {{
+ *   traces: Error[];
+ * }} TraceEntry
+ */
+
+/** @type {{ reaction: Reaction | null, entries: Map<Value, TraceEntry> } | null} */
 export let tracing_expressions = null;
 
 /**
- * @param { Value } signal
- * @param { { read: Error[] } } [entry]
+ * @param {Value} signal
+ * @param {TraceEntry} [entry]
  */
 function log_entry(signal, entry) {
-	const debug = signal.debug;
 	const value = signal.v;
 
 	if (value === UNINITIALIZED) {
 		return;
 	}
 
-	if (debug) {
-		var previous_captured_signals = captured_signals;
-		var captured = new Set();
-		set_captured_signals(captured);
-		try {
-			untrack(() => {
-				debug();
-			});
-		} finally {
-			set_captured_signals(previous_captured_signals);
-		}
-		if (captured.size > 0) {
-			for (const dep of captured) {
-				log_entry(dep);
-			}
-			return;
-		}
-	}
-
-	const type = (signal.f & DERIVED) !== 0 ? '$derived' : '$state';
+	const type = get_type(signal);
 	const current_reaction = /** @type {Reaction} */ (active_reaction);
-	const status =
-		signal.version > current_reaction.version || current_reaction.version === 0 ? 'dirty' : 'clean';
+	const dirty = signal.wv > current_reaction.wv || current_reaction.wv === 0;
+	const style = dirty
+		? 'color: CornflowerBlue; font-weight: bold'
+		: 'color: grey; font-weight: normal';
 
 	// eslint-disable-next-line no-console
 	console.groupCollapsed(
-		`%c${type}`,
-		status !== 'clean'
-			? 'color: CornflowerBlue; font-weight: bold'
-			: 'color: grey; font-weight: bold',
-		typeof value === 'object' && STATE_SYMBOL in value ? snapshot(value, true) : value
+		signal.label ? `%c${type}%c ${signal.label}` : `%c${type}%c`,
+		style,
+		dirty ? 'font-weight: normal' : style,
+		typeof value === 'object' && value !== null && STATE_SYMBOL in value
+			? snapshot(value, true)
+			: value
 	);
 
 	if (type === '$derived') {
@@ -66,17 +54,19 @@ function log_entry(signal, entry) {
 		console.log(signal.created);
 	}
 
-	if (signal.updated) {
-		// eslint-disable-next-line no-console
-		console.log(signal.updated);
+	if (dirty && signal.updated) {
+		for (const updated of signal.updated.values()) {
+			if (updated.error) {
+				// eslint-disable-next-line no-console
+				console.log(updated.error);
+			}
+		}
 	}
 
-	const read = entry?.read;
-
-	if (read && read.length > 0) {
-		for (var stack of read) {
+	if (entry) {
+		for (var trace of entry.traces) {
 			// eslint-disable-next-line no-console
-			console.log(stack);
+			console.log(trace);
 		}
 	}
 
@@ -84,6 +74,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
@@ -91,6 +90,7 @@ function log_entry(signal, entry) {
  */
 export function trace(label, fn) {
 	var previously_tracing_expressions = tracing_expressions;
+
 	try {
 		tracing_expressions = { entries: new Map(), reaction: active_reaction };
 
@@ -98,39 +98,32 @@ export function trace(label, fn) {
 		var value = fn();
 		var time = (performance.now() - start).toFixed(2);
 
+		var prefix = untrack(label);
+
 		if (!effect_tracking()) {
 			// eslint-disable-next-line no-console
-			console.log(`${label()} %cran outside of an effect (${time}ms)`, 'color: grey');
+			console.log(`${prefix} %cran outside of an effect (${time}ms)`, 'color: grey');
 		} else if (tracing_expressions.entries.size === 0) {
 			// eslint-disable-next-line no-console
-			console.log(`${label()} %cno reactive dependencies (${time}ms)`, 'color: grey');
+			console.log(`${prefix} %cno reactive dependencies (${time}ms)`, 'color: grey');
 		} else {
 			// eslint-disable-next-line no-console
-			console.group(`${label()} %c(${time}ms)`, 'color: grey');
+			console.group(`${prefix} %c(${time}ms)`, 'color: grey');
 
 			var entries = tracing_expressions.entries;
 
+			untrack(() => {
+				for (const [signal, traces] of entries) {
+					log_entry(signal, traces);
+				}
+			});
+
 			tracing_expressions = null;
 
-			for (const [signal, entry] of entries) {
-				log_entry(signal, entry);
-			}
 			// eslint-disable-next-line no-console
 			console.groupEnd();
 		}
 
-		if (previously_tracing_expressions !== null) {
-			for (const [signal, entry] of tracing_expressions.entries) {
-				var prev_entry = previously_tracing_expressions.get(signal);
-
-				if (prev_entry === undefined) {
-					previously_tracing_expressions.set(signal, entry);
-				} else {
-					prev_entry.read.push(...entry.read);
-				}
-			}
-		}
-
 		return value;
 	} finally {
 		tracing_expressions = previously_tracing_expressions;
@@ -138,43 +131,32 @@ export function trace(label, fn) {
 }
 
 /**
+ * @param {Value} source
  * @param {string} label
  */
-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];
+export function tag(source, label) {
+	source.label = label;
+	tag_proxy(source.v, label);
 
-			if (line === 'Error') {
-				continue;
-			}
-			if (line.includes('validate_each_keys')) {
-				return null;
-			}
-			if (line.includes('svelte/src/internal')) {
-				continue;
-			}
-			new_lines.push(line);
-		}
-
-		if (new_lines.length === 1) {
-			return null;
-		}
+	return source;
+}
 
-		define_property(error, 'stack', {
-			value: new_lines.join('\n')
-		});
+/**
+ * @param {unknown} value
+ * @param {string} label
+ */
+export function tag_proxy(value, label) {
+	// @ts-expect-error
+	value?.[PROXY_PATH_SYMBOL]?.(label);
+	return value;
+}
 
-		define_property(error, 'name', {
-			// 'Error' suffix is required for stack traces to be rendered properly
-			value: `${label}Error`
-		});
-	}
-	return error;
+/**
+ * @param {unknown} value
+ */
+export function label(value) {
+	if (typeof value === 'symbol') return `Symbol(${value.description})`;
+	if (typeof value === 'function') return '<function>';
+	if (typeof value === 'object' && value) return '<object>';
+	return String(value);
 }
diff --git a/packages/svelte/src/internal/client/dev/validation.js b/packages/svelte/src/internal/client/dev/validation.js
new file mode 100644
index 0000000000..60d140c718
--- /dev/null
+++ b/packages/svelte/src/internal/client/dev/validation.js
@@ -0,0 +1,16 @@
+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)) {
+		e.invalid_snippet_arguments();
+	}
+
+	for (let arg of args) {
+		if (typeof arg !== 'function') {
+			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..170529a6b9
--- /dev/null
+++ b/packages/svelte/src/internal/client/dom/blocks/async.js
@@ -0,0 +1,67 @@
+/** @import { Blocker, TemplateNode, Value } from '#client' */
+import { flatten } from '../../reactivity/async.js';
+import { get } from '../../runtime.js';
+import {
+	hydrate_next,
+	hydrate_node,
+	hydrating,
+	set_hydrate_node,
+	set_hydrating,
+	skip_nodes
+} from '../hydration.js';
+
+/**
+ * @param {TemplateNode} node
+ * @param {Blocker[]} blockers
+ * @param {Array<() => Promise<any>>} expressions
+ * @param {(anchor: TemplateNode, ...deriveds: Value[]) => void} fn
+ */
+export function async(node, blockers = [], expressions = [], fn) {
+	var was_hydrating = hydrating;
+	var end = null;
+
+	if (was_hydrating) {
+		hydrate_next();
+		end = skip_nodes(false);
+	}
+
+	if (expressions.length === 0 && blockers.every((b) => b.settled)) {
+		fn(node);
+
+		// This is necessary because it is not guaranteed that the render function will
+		// advance the hydration node to $.async's end marker: it may stop at an inner
+		// block's end marker (in case of an inner if block for example), but it also may
+		// stop at the correct $.async end marker (in case of component child) - hence
+		// we can't just use hydrate_next()
+		// TODO this feels indicative of a bug elsewhere; ideally we wouldn't need
+		// to double-traverse in the already-resolved case
+		if (was_hydrating) {
+			set_hydrate_node(end);
+		}
+
+		return;
+	}
+
+	if (was_hydrating) {
+		var previous_hydrate_node = hydrate_node;
+		set_hydrate_node(end);
+	}
+
+	flatten(blockers, [], expressions, (values) => {
+		if (was_hydrating) {
+			set_hydrating(true);
+			set_hydrate_node(previous_hydrate_node);
+		}
+
+		try {
+			// get values eagerly to avoid creating blocks if they reject
+			for (const d of values) get(d);
+
+			fn(node, ...values);
+		} finally {
+			if (was_hydrating) {
+				set_hydrating(false);
+			}
+		}
+	});
+}
diff --git a/packages/svelte/src/internal/client/dom/blocks/await.js b/packages/svelte/src/internal/client/dom/blocks/await.js
index 62b2e4dd0c..194a7ccc0e 100644
--- a/packages/svelte/src/internal/client/dom/blocks/await.js
+++ b/packages/svelte/src/internal/client/dom/blocks/await.js
@@ -1,29 +1,33 @@
-/** @import { Effect, Source, TemplateNode } from '#client' */
-import { DEV } from 'esm-env';
+/** @import { Source, TemplateNode } from '#client' */
 import { is_promise } from '../../../shared/utils.js';
-import { block, branch, pause_effect, resume_effect } from '../../reactivity/effects.js';
+import { block } from '../../reactivity/effects.js';
 import { internal_set, mutable_source, source } from '../../reactivity/sources.js';
 import {
-	component_context,
-	flush_sync,
-	is_runes,
-	set_active_effect,
-	set_active_reaction,
-	set_component_context,
-	set_dev_current_component_function
-} from '../../runtime.js';
-import { hydrate_next, hydrate_node, hydrating } from '../hydration.js';
+	hydrate_next,
+	hydrating,
+	skip_nodes,
+	set_hydrate_node,
+	set_hydrating,
+	hydrate_node
+} from '../hydration.js';
 import { queue_micro_task } from '../task.js';
-import { UNINITIALIZED } from '../../../../constants.js';
+import { HYDRATION_START_ELSE, UNINITIALIZED } from '../../../../constants.js';
+import { is_runes } from '../../context.js';
+import { Batch, current_batch, flushSync, is_flushing_sync } from '../../reactivity/batch.js';
+import { BranchManager } from './branches.js';
+import { capture, unset_context } from '../../reactivity/async.js';
+import { DEV } from 'esm-env';
 
 const PENDING = 0;
 const THEN = 1;
 const CATCH = 2;
 
+/** @typedef {typeof PENDING | typeof THEN | typeof CATCH} AwaitState */
+
 /**
  * @template V
  * @param {TemplateNode} node
- * @param {(() => Promise<V>)} get_input
+ * @param {(() => any)} get_input
  * @param {null | ((anchor: Node) => void)} pending_fn
  * @param {null | ((anchor: Node, value: Source<V>) => void)} then_fn
  * @param {null | ((anchor: Node, error: unknown) => void)} catch_fn
@@ -34,134 +38,116 @@ export function await_block(node, get_input, pending_fn, then_fn, catch_fn) {
 		hydrate_next();
 	}
 
-	var anchor = node;
 	var runes = is_runes();
-	var active_component_context = component_context;
-
-	/** @type {any} */
-	var component_function = DEV ? component_context?.function : null;
 
-	/** @type {V | Promise<V> | typeof UNINITIALIZED} */
-	var input = UNINITIALIZED;
+	var v = /** @type {V} */ (UNINITIALIZED);
+	var value = runes ? source(v) : mutable_source(v, false, false);
+	var error = runes ? source(v) : mutable_source(v, false, false);
 
-	/** @type {Effect | null} */
-	var pending_effect;
+	if (DEV) {
+		value.label = '{#await ...} value';
+		error.label = '{#await ...} error';
+	}
 
-	/** @type {Effect | null} */
-	var then_effect;
+	var branches = new BranchManager(node);
 
-	/** @type {Effect | null} */
-	var catch_effect;
+	block(() => {
+		var batch = /** @type {Batch} */ (current_batch);
+		var input = get_input();
 
-	var input_source = (runes ? source : mutable_source)(/** @type {V} */ (undefined));
-	var error_source = (runes ? source : mutable_source)(undefined);
-	var resolved = false;
+		var destroyed = false;
 
-	/**
-	 * @param {PENDING | THEN | CATCH} state
-	 * @param {boolean} restore
-	 */
-	function update(state, restore) {
-		resolved = true;
+		/** Whether or not there was a hydration mismatch. Needs to be a `let` or else it isn't treeshaken out */
+		// @ts-ignore coercing `node` to a `Comment` causes TypeScript and Prettier to fight
+		let mismatch = hydrating && is_promise(input) === (node.data === HYDRATION_START_ELSE);
 
-		if (restore) {
-			set_active_effect(effect);
-			set_active_reaction(effect); // TODO do we need both?
-			set_component_context(active_component_context);
-			if (DEV) set_dev_current_component_function(component_function);
+		if (mismatch) {
+			// Hydration mismatch: remove everything inside the anchor and start fresh
+			set_hydrate_node(skip_nodes());
+			set_hydrating(false);
 		}
 
-		try {
-			if (state === PENDING && pending_fn) {
-				if (pending_effect) resume_effect(pending_effect);
-				else pending_effect = branch(() => pending_fn(anchor));
-			}
-
-			if (state === THEN && then_fn) {
-				if (then_effect) resume_effect(then_effect);
-				else then_effect = branch(() => then_fn(anchor, input_source));
-			}
-
-			if (state === CATCH && catch_fn) {
-				if (catch_effect) resume_effect(catch_effect);
-				else catch_effect = branch(() => catch_fn(anchor, error_source));
-			}
-
-			if (state !== PENDING && pending_effect) {
-				pause_effect(pending_effect, () => (pending_effect = null));
-			}
-
-			if (state !== THEN && then_effect) {
-				pause_effect(then_effect, () => (then_effect = null));
-			}
-
-			if (state !== CATCH && catch_effect) {
-				pause_effect(catch_effect, () => (catch_effect = null));
-			}
-		} finally {
-			if (restore) {
-				if (DEV) set_dev_current_component_function(null);
-				set_component_context(null);
-				set_active_reaction(null);
-				set_active_effect(null);
-
-				// without this, the DOM does not update until two ticks after the promise
-				// resolves, which is unexpected behaviour (and somewhat irksome to test)
-				flush_sync();
-			}
-		}
-	}
-
-	var effect = block(() => {
-		if (input === (input = get_input())) return;
-
 		if (is_promise(input)) {
-			var promise = input;
+			var restore = capture();
+			var resolved = false;
+
+			/**
+			 * @param {() => void} fn
+			 */
+			const resolve = (fn) => {
+				if (destroyed) return;
+
+				resolved = true;
+				// We don't want to restore the previous batch here; {#await} blocks don't follow the async logic
+				// we have elsewhere, instead pending/resolve/fail states are each their own batch so to speak.
+				restore(false);
+				// ...but it might still be set here. That means a `save(...)` has restored it — but that batch will
+				// likely already have been committed by the time it resolves, and this resolve should be processed
+				// in a separate batch. We're not using batch.deactivate()/activate() above because get_input()
+				// could write to sources, which would then incorrectly create a new batch or could mess with
+				// async_derived expecting a current_batch to exist.
+				if (current_batch === batch) {
+					batch.deactivate();
+				}
+				// Make sure we have a batch, since the branch manager expects one to exist
+				Batch.ensure();
 
-			resolved = false;
+				try {
+					fn();
+				} finally {
+					unset_context(false);
 
-			promise.then(
-				(value) => {
-					if (promise !== input) return;
-					// we technically could use `set` here since it's on the next microtick
-					// but let's use internal_set for consistency and just to be safe
-					internal_set(input_source, value);
-					update(THEN, true);
+					// without this, the DOM does not update until two ticks after the promise
+					// resolves, which is unexpected behaviour (and somewhat irksome to test)
+					if (!is_flushing_sync) flushSync();
+				}
+			};
+
+			input.then(
+				(v) => {
+					resolve(() => {
+						internal_set(value, v);
+						branches.ensure(THEN, then_fn && ((target) => then_fn(target, value)));
+					});
 				},
-				(error) => {
-					if (promise !== input) return;
-					// we technically could use `set` here since it's on the next microtick
-					// but let's use internal_set for consistency and just to be safe
-					internal_set(error_source, error);
-					update(CATCH, true);
-					if (!catch_fn) {
-						// Rethrow the error if no catch block exists
-						throw error_source.v;
-					}
+				(e) => {
+					resolve(() => {
+						internal_set(error, e);
+						branches.ensure(CATCH, catch_fn && ((target) => catch_fn(target, error)));
+
+						if (!catch_fn) {
+							// Rethrow the error if no catch block exists
+							throw error.v;
+						}
+					});
 				}
 			);
 
 			if (hydrating) {
-				if (pending_fn) {
-					pending_effect = branch(() => pending_fn(anchor));
-				}
+				branches.ensure(PENDING, pending_fn);
 			} else {
 				// Wait a microtask before checking if we should show the pending state as
-				// the promise might have resolved by the next microtask.
+				// the promise might have resolved by then
 				queue_micro_task(() => {
-					if (!resolved) update(PENDING, true);
+					if (!resolved) {
+						resolve(() => {
+							branches.ensure(PENDING, pending_fn);
+						});
+					}
 				});
 			}
 		} else {
-			internal_set(input_source, input);
-			update(THEN, false);
+			internal_set(value, input);
+			branches.ensure(THEN, then_fn && ((target) => then_fn(target, value)));
 		}
 
-		// Set the input to something else, in order to disable the promise callbacks
-		return () => (input = UNINITIALIZED);
-	});
+		if (mismatch) {
+			// continue in hydration mode
+			set_hydrating(true);
+		}
 
-	if (hydrating) {
-		anchor = hydrate_node;
-	}
+		return () => {
+			destroyed = true;
+		};
+	});
 }
diff --git a/packages/svelte/src/internal/client/dom/blocks/boundary.js b/packages/svelte/src/internal/client/dom/blocks/boundary.js
index 7f4f000dce..0c0903ff52 100644
--- a/packages/svelte/src/internal/client/dom/blocks/boundary.js
+++ b/packages/svelte/src/internal/client/dom/blocks/boundary.js
@@ -1,134 +1,537 @@
-/** @import { Effect, TemplateNode, } from '#client' */
-
-import { BOUNDARY_EFFECT, EFFECT_TRANSPARENT } from '../../constants.js';
-import { block, branch, destroy_effect, pause_effect } from '../../reactivity/effects.js';
+/** @import { Effect, Source, TemplateNode, } from '#client' */
+import {
+	BOUNDARY_EFFECT,
+	DIRTY,
+	EFFECT_PRESERVED,
+	EFFECT_TRANSPARENT,
+	MAYBE_DIRTY
+} from '#client/constants';
+import { HYDRATION_START_ELSE, HYDRATION_START_FAILED } from '../../../../constants.js';
+import { component_context, set_component_context } from '../../context.js';
+import { handle_error, invoke_error_boundary } from '../../error-handling.js';
+import {
+	block,
+	branch,
+	destroy_effect,
+	move_effect,
+	pause_effect
+} from '../../reactivity/effects.js';
 import {
 	active_effect,
 	active_reaction,
-	component_context,
-	handle_error,
+	get,
 	set_active_effect,
-	set_active_reaction,
-	set_component_context,
-	reset_is_throwing_error
+	set_active_reaction
 } from '../../runtime.js';
 import {
 	hydrate_next,
 	hydrate_node,
 	hydrating,
 	next,
-	remove_nodes,
+	skip_nodes,
 	set_hydrate_node
 } from '../hydration.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, current_batch } from '../../reactivity/batch.js';
+import { internal_set, source } from '../../reactivity/sources.js';
+import { tag } from '../../dev/tracing.js';
+import { createSubscriber } from '../../../../reactivity/create-subscriber.js';
+import { create_text } from '../operations.js';
+import { defer_effect } from '../../reactivity/utils.js';
 
 /**
- * @param {Effect} boundary
- * @param {() => void} fn
+ * @typedef {{
+ * 	 onerror?: ((error: unknown, reset: () => void) => void) | null;
+ *   failed?: ((anchor: Node, error: () => unknown, reset: () => () => void) => void) | null;
+ *   pending?: ((anchor: Node) => void) | null;
+ * }} BoundaryProps
  */
-function with_boundary(boundary, fn) {
-	var previous_effect = active_effect;
-	var previous_reaction = active_reaction;
-	var previous_ctx = component_context;
-
-	set_active_effect(boundary);
-	set_active_reaction(boundary);
-	set_component_context(boundary.ctx);
-
-	try {
-		fn();
-	} finally {
-		set_active_effect(previous_effect);
-		set_active_reaction(previous_reaction);
-		set_component_context(previous_ctx);
-	}
-}
+
+var flags = EFFECT_TRANSPARENT | EFFECT_PRESERVED;
 
 /**
  * @param {TemplateNode} node
- * @param {{
- * 	 onerror?: (error: unknown, reset: () => void) => void,
- *   failed?: (anchor: Node, error: () => unknown, reset: () => () => void) => void
- * }} props
- * @param {((anchor: Node) => void)} boundary_fn
+ * @param {BoundaryProps} props
+ * @param {((anchor: Node) => void)} children
+ * @param {((error: unknown) => unknown) | undefined} [transform_error]
  * @returns {void}
  */
-export function boundary(node, props, boundary_fn) {
-	var anchor = node;
+export function boundary(node, props, children, transform_error) {
+	new Boundary(node, props, children, transform_error);
+}
+
+export class Boundary {
+	/** @type {Boundary | null} */
+	parent;
+
+	is_pending = false;
+
+	/**
+	 * API-level transformError transform function. Transforms errors before they reach the `failed` snippet.
+	 * Inherited from parent boundary, or defaults to identity.
+	 * @type {(error: unknown) => unknown}
+	 */
+	transform_error;
+
+	/** @type {TemplateNode} */
+	#anchor;
+
+	/** @type {TemplateNode | null} */
+	#hydrate_open = hydrating ? hydrate_node : null;
+
+	/** @type {BoundaryProps} */
+	#props;
+
+	/** @type {((anchor: Node) => void)} */
+	#children;
 
 	/** @type {Effect} */
-	var boundary_effect;
-
-	block(() => {
-		var boundary = /** @type {Effect} */ (active_effect);
-		var hydrate_open = hydrate_node;
-		var is_creating_fallback = false;
-
-		// We re-use the effect's fn property to avoid allocation of an additional field
-		boundary.fn = (/** @type {unknown}} */ error) => {
-			var onerror = props.onerror;
-			let failed = props.failed;
-
-			// If we have nothing to capture the error, or if we hit an error while
-			// rendering the fallback, re-throw for another boundary to handle
-			if ((!onerror && !failed) || is_creating_fallback) {
-				throw error;
+	#effect;
+
+	/** @type {Effect | null} */
+	#main_effect = null;
+
+	/** @type {Effect | null} */
+	#pending_effect = null;
+
+	/** @type {Effect | null} */
+	#failed_effect = null;
+
+	/** @type {DocumentFragment | null} */
+	#offscreen_fragment = null;
+
+	#local_pending_count = 0;
+	#pending_count = 0;
+	#pending_count_update_queued = false;
+
+	/** @type {Set<Effect>} */
+	#dirty_effects = new Set();
+
+	/** @type {Set<Effect>} */
+	#maybe_dirty_effects = new Set();
+
+	/**
+	 * A source containing the number of pending async deriveds/expressions.
+	 * Only created if `$effect.pending()` is used inside the boundary,
+	 * otherwise updating the source results in needless `Batch.ensure()`
+	 * calls followed by no-op flushes
+	 * @type {Source<number> | null}
+	 */
+	#effect_pending = null;
+
+	#effect_pending_subscriber = createSubscriber(() => {
+		this.#effect_pending = source(this.#local_pending_count);
+
+		if (DEV) {
+			tag(this.#effect_pending, '$effect.pending()');
+		}
+
+		return () => {
+			this.#effect_pending = null;
+		};
+	});
+
+	/**
+	 * @param {TemplateNode} node
+	 * @param {BoundaryProps} props
+	 * @param {((anchor: Node) => void)} children
+	 * @param {((error: unknown) => unknown) | undefined} [transform_error]
+	 */
+	constructor(node, props, children, transform_error) {
+		this.#anchor = node;
+		this.#props = props;
+
+		this.#children = (anchor) => {
+			var effect = /** @type {Effect} */ (active_effect);
+
+			effect.b = this;
+			effect.f |= BOUNDARY_EFFECT;
+
+			children(anchor);
+		};
+
+		this.parent = /** @type {Effect} */ (active_effect).b;
+
+		// Inherit transform_error from parent boundary, or use the provided one, or default to identity
+		this.transform_error = transform_error ?? this.parent?.transform_error ?? ((e) => e);
+
+		this.#effect = block(() => {
+			if (hydrating) {
+				const comment = /** @type {Comment} */ (this.#hydrate_open);
+				hydrate_next();
+
+				const server_rendered_pending = comment.data === HYDRATION_START_ELSE;
+				const server_rendered_failed = comment.data.startsWith(HYDRATION_START_FAILED);
+
+				if (server_rendered_failed) {
+					// Server rendered the failed snippet - hydrate it.
+					// The serialized error is embedded in the comment: <!--[?<json>-->
+					const serialized_error = JSON.parse(comment.data.slice(HYDRATION_START_FAILED.length));
+					this.#hydrate_failed_content(serialized_error);
+				} else if (server_rendered_pending) {
+					this.#hydrate_pending_content();
+				} else {
+					this.#hydrate_resolved_content();
+				}
+			} else {
+				this.#render();
 			}
+		}, flags);
+
+		if (hydrating) {
+			this.#anchor = hydrate_node;
+		}
+	}
+
+	#hydrate_resolved_content() {
+		try {
+			this.#main_effect = branch(() => this.#children(this.#anchor));
+		} catch (error) {
+			this.error(error);
+		}
+	}
+
+	/**
+	 * @param {unknown} error The deserialized error from the server's hydration comment
+	 */
+	#hydrate_failed_content(error) {
+		const failed = this.#props.failed;
+		if (!failed) return;
+
+		this.#failed_effect = branch(() => {
+			failed(
+				this.#anchor,
+				() => error,
+				() => () => {}
+			);
+		});
+	}
+
+	#hydrate_pending_content() {
+		const pending = this.#props.pending;
+		if (!pending) return;
+
+		this.is_pending = true;
+		this.#pending_effect = branch(() => pending(this.#anchor));
+
+		queue_micro_task(() => {
+			var fragment = (this.#offscreen_fragment = document.createDocumentFragment());
+			var anchor = create_text();
+
+			fragment.append(anchor);
 
-			var reset = () => {
-				pause_effect(boundary_effect);
+			this.#main_effect = this.#run(() => {
+				return branch(() => this.#children(anchor));
+			});
 
-				with_boundary(boundary, () => {
-					is_creating_fallback = false;
-					boundary_effect = branch(() => boundary_fn(anchor));
-					reset_is_throwing_error();
+			if (this.#pending_count === 0) {
+				this.#anchor.before(fragment);
+				this.#offscreen_fragment = null;
+
+				pause_effect(/** @type {Effect} */ (this.#pending_effect), () => {
+					this.#pending_effect = null;
 				});
-			};
 
-			onerror?.(error, reset);
+				this.#resolve(/** @type {Batch} */ (current_batch));
+			}
+		});
+	}
+
+	#render() {
+		try {
+			this.is_pending = this.has_pending_snippet();
+			this.#pending_count = 0;
+			this.#local_pending_count = 0;
 
-			if (boundary_effect) {
-				destroy_effect(boundary_effect);
-			} else if (hydrating) {
-				set_hydrate_node(hydrate_open);
-				next();
-				set_hydrate_node(remove_nodes());
+			this.#main_effect = branch(() => {
+				this.#children(this.#anchor);
+			});
+
+			if (this.#pending_count > 0) {
+				var fragment = (this.#offscreen_fragment = document.createDocumentFragment());
+				move_effect(this.#main_effect, fragment);
+
+				const pending = /** @type {(anchor: Node) => void} */ (this.#props.pending);
+				this.#pending_effect = branch(() => pending(this.#anchor));
+			} else {
+				this.#resolve(/** @type {Batch} */ (current_batch));
 			}
+		} catch (error) {
+			this.error(error);
+		}
+	}
 
-			if (failed) {
-				// Render the `failed` snippet in a microtask
-				queue_micro_task(() => {
-					with_boundary(boundary, () => {
-						is_creating_fallback = true;
-
-						try {
-							boundary_effect = branch(() => {
-								failed(
-									anchor,
-									() => error,
-									() => reset
-								);
-							});
-						} catch (error) {
-							handle_error(error, boundary, null, boundary.ctx);
-						}
-
-						reset_is_throwing_error();
-						is_creating_fallback = false;
-					});
+	/**
+	 * @param {Batch} batch
+	 */
+	#resolve(batch) {
+		this.is_pending = false;
+
+		// any effects that were previously deferred should be transferred
+		// to the batch, which will flush in the next microtask
+		batch.transfer_effects(this.#dirty_effects, this.#maybe_dirty_effects);
+	}
+
+	/**
+	 * Defer an effect inside a pending boundary until the boundary resolves
+	 * @param {Effect} effect
+	 */
+	defer_effect(effect) {
+		defer_effect(effect, this.#dirty_effects, this.#maybe_dirty_effects);
+	}
+
+	/**
+	 * Returns `false` if the effect exists inside a boundary whose pending snippet is shown
+	 * @returns {boolean}
+	 */
+	is_rendered() {
+		return !this.is_pending && (!this.parent || this.parent.is_rendered());
+	}
+
+	has_pending_snippet() {
+		return !!this.#props.pending;
+	}
+
+	/**
+	 * @template T
+	 * @param {() => T} fn
+	 */
+	#run(fn) {
+		var previous_effect = active_effect;
+		var previous_reaction = active_reaction;
+		var previous_ctx = component_context;
+
+		set_active_effect(this.#effect);
+		set_active_reaction(this.#effect);
+		set_component_context(this.#effect.ctx);
+
+		try {
+			Batch.ensure();
+			return fn();
+		} catch (e) {
+			handle_error(e);
+			return null;
+		} finally {
+			set_active_effect(previous_effect);
+			set_active_reaction(previous_reaction);
+			set_component_context(previous_ctx);
+		}
+	}
+
+	/**
+	 * Updates the pending count associated with the currently visible pending snippet,
+	 * if any, such that we can replace the snippet with content once work is done
+	 * @param {1 | -1} d
+	 * @param {Batch} batch
+	 */
+	#update_pending_count(d, batch) {
+		if (!this.has_pending_snippet()) {
+			if (this.parent) {
+				this.parent.#update_pending_count(d, batch);
+			}
+
+			// if there's no parent, we're in a scope with no pending snippet
+			return;
+		}
+
+		this.#pending_count += d;
+
+		if (this.#pending_count === 0) {
+			this.#resolve(batch);
+
+			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;
+			}
+		}
+	}
+
+	/**
+	 * Update the source that powers `$effect.pending()` inside this boundary,
+	 * and controls when the current `pending` snippet (if any) is removed.
+	 * Do not call from inside the class
+	 * @param {1 | -1} d
+	 * @param {Batch} batch
+	 */
+	update_pending_count(d, batch) {
+		this.#update_pending_count(d, batch);
+
+		this.#local_pending_count += d;
+
+		if (!this.#effect_pending || this.#pending_count_update_queued) return;
+		this.#pending_count_update_queued = true;
+
+		queue_micro_task(() => {
+			this.#pending_count_update_queued = false;
+			if (this.#effect_pending) {
+				internal_set(this.#effect_pending, this.#local_pending_count);
+			}
+		});
+	}
+
+	get_effect_pending() {
+		this.#effect_pending_subscriber();
+		return get(/** @type {Source<number>} */ (this.#effect_pending));
+	}
+
+	/** @param {unknown} error */
+	error(error) {
+		// If we have nothing to capture the error, or if we hit an error while
+		// rendering the fallback, re-throw for another boundary to handle
+		if (!this.#props.onerror && !this.#props.failed) {
+			throw error;
+		}
+
+		if (current_batch?.is_fork) {
+			if (this.#main_effect) current_batch.skip_effect(this.#main_effect);
+			if (this.#pending_effect) current_batch.skip_effect(this.#pending_effect);
+			if (this.#failed_effect) current_batch.skip_effect(this.#failed_effect);
+
+			current_batch.oncommit(() => {
+				this.#handle_error(error);
+			});
+		} else {
+			this.#handle_error(error);
+		}
+	}
+
+	/**
+	 * @param {unknown} error
+	 */
+	#handle_error(error) {
+		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) {
-			hydrate_next();
+			set_hydrate_node(/** @type {TemplateNode} */ (this.#hydrate_open));
+			next();
+			set_hydrate_node(skip_nodes());
 		}
 
-		boundary_effect = branch(() => boundary_fn(anchor));
-		reset_is_throwing_error();
-	}, EFFECT_TRANSPARENT | BOUNDARY_EFFECT);
+		var onerror = this.#props.onerror;
+		let failed = this.#props.failed;
+		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();
+			}
 
-	if (hydrating) {
-		anchor = hydrate_node;
+			if (this.#failed_effect !== null) {
+				pause_effect(this.#failed_effect, () => {
+					this.#failed_effect = null;
+				});
+			}
+
+			this.#run(() => {
+				this.#render();
+			});
+		};
+
+		/** @param {unknown} transformed_error */
+		const handle_error_result = (transformed_error) => {
+			try {
+				calling_on_error = true;
+				onerror?.(transformed_error, reset);
+				calling_on_error = false;
+			} catch (error) {
+				invoke_error_boundary(error, this.#effect && this.#effect.parent);
+			}
+
+			if (failed) {
+				this.#failed_effect = this.#run(() => {
+					try {
+						return branch(() => {
+							// errors in `failed` snippets cause the boundary to error again
+							// TODO Svelte 6: revisit this decision, most likely better to go to parent boundary instead
+							var effect = /** @type {Effect} */ (active_effect);
+
+							effect.b = this;
+							effect.f |= BOUNDARY_EFFECT;
+
+							failed(
+								this.#anchor,
+								() => transformed_error,
+								() => reset
+							);
+						});
+					} catch (error) {
+						invoke_error_boundary(error, /** @type {Effect} */ (this.#effect.parent));
+						return null;
+					}
+				});
+			}
+		};
+
+		queue_micro_task(() => {
+			// Run the error through the API-level transformError transform (e.g. SvelteKit's handleError)
+			/** @type {unknown} */
+			var result;
+			try {
+				result = this.transform_error(error);
+			} catch (e) {
+				invoke_error_boundary(e, this.#effect && this.#effect.parent);
+				return;
+			}
+
+			if (
+				result !== null &&
+				typeof result === 'object' &&
+				typeof (/** @type {any} */ (result).then) === 'function'
+			) {
+				// transformError returned a Promise — wait for it
+				/** @type {any} */ (result).then(
+					handle_error_result,
+					/** @param {unknown} e */
+					(e) => invoke_error_boundary(e, this.#effect && this.#effect.parent)
+				);
+			} else {
+				// Synchronous result — handle immediately
+				handle_error_result(result);
+			}
+		});
+	}
+}
+
+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/branches.js b/packages/svelte/src/internal/client/dom/blocks/branches.js
new file mode 100644
index 0000000000..141b914537
--- /dev/null
+++ b/packages/svelte/src/internal/client/dom/blocks/branches.js
@@ -0,0 +1,238 @@
+/** @import { Effect, TemplateNode } from '#client' */
+import { Batch, current_batch } from '../../reactivity/batch.js';
+import {
+	branch,
+	destroy_effect,
+	move_effect,
+	pause_effect,
+	resume_effect
+} from '../../reactivity/effects.js';
+import { HMR_ANCHOR } from '../../constants.js';
+import { hydrate_node, hydrating } from '../hydration.js';
+import { create_text, should_defer_append } from '../operations.js';
+import { DEV } from 'esm-env';
+
+/**
+ * @typedef {{ effect: Effect, fragment: DocumentFragment }} Branch
+ */
+
+/**
+ * @template Key
+ */
+export class BranchManager {
+	/** @type {TemplateNode} */
+	anchor;
+
+	/** @type {Map<Batch, Key>} */
+	#batches = new Map();
+
+	/**
+	 * Map of keys to effects that are currently rendered in the DOM.
+	 * These effects are visible and actively part of the document tree.
+	 * Example:
+	 * ```
+	 * {#if condition}
+	 * 	foo
+	 * {:else}
+	 * 	bar
+	 * {/if}
+	 * ```
+	 * Can result in the entries `true->Effect` and `false->Effect`
+	 * @type {Map<Key, Effect>}
+	 */
+	#onscreen = new Map();
+
+	/**
+	 * Similar to #onscreen with respect to the keys, but contains branches that are not yet
+	 * in the DOM, because their insertion is deferred.
+	 * @type {Map<Key, Branch>}
+	 */
+	#offscreen = new Map();
+
+	/**
+	 * Keys of effects that are currently outroing
+	 * @type {Set<Key>}
+	 */
+	#outroing = new Set();
+
+	/**
+	 * Whether to pause (i.e. outro) on change, or destroy immediately.
+	 * This is necessary for `<svelte:element>`
+	 */
+	#transition = true;
+
+	/**
+	 * @param {TemplateNode} anchor
+	 * @param {boolean} transition
+	 */
+	constructor(anchor, transition = true) {
+		this.anchor = anchor;
+		this.#transition = transition;
+	}
+
+	/**
+	 * @param {Batch} batch
+	 */
+	#commit = (batch) => {
+		// if this batch was made obsolete, bail
+		if (!this.#batches.has(batch)) return;
+
+		var key = /** @type {Key} */ (this.#batches.get(batch));
+
+		var onscreen = this.#onscreen.get(key);
+
+		if (onscreen) {
+			// effect is already in the DOM — abort any current outro
+			resume_effect(onscreen);
+			this.#outroing.delete(key);
+		} else {
+			// effect is currently offscreen. put it in the DOM
+			var offscreen = this.#offscreen.get(key);
+
+			if (offscreen) {
+				// effect could have been outro'ed before through a prior batch — resume if necessary
+				resume_effect(offscreen.effect);
+				this.#onscreen.set(key, offscreen.effect);
+				this.#offscreen.delete(key);
+
+				if (DEV) {
+					// Tell hmr.js about the anchor it should use for updates,
+					// since the initial one will be removed
+					/** @type {any} */ (offscreen.fragment.lastChild)[HMR_ANCHOR] = this.anchor;
+				}
+
+				// remove the anchor...
+				/** @type {TemplateNode} */ (offscreen.fragment.lastChild).remove();
+
+				// ...and append the fragment
+				this.anchor.before(offscreen.fragment);
+				onscreen = offscreen.effect;
+			}
+		}
+
+		for (const [b, k] of this.#batches) {
+			this.#batches.delete(b);
+
+			if (b === batch) {
+				// keep values for newer batches
+				break;
+			}
+
+			const offscreen = this.#offscreen.get(k);
+
+			if (offscreen) {
+				// for older batches, destroy offscreen effects
+				// as they will never be committed
+				destroy_effect(offscreen.effect);
+				this.#offscreen.delete(k);
+			}
+		}
+
+		// outro/destroy all onscreen effects...
+		for (const [k, effect] of this.#onscreen) {
+			// ...except the one that was just committed
+			//    or those that are already outroing (else the transition is aborted and the effect destroyed right away)
+			if (k === key || this.#outroing.has(k)) continue;
+
+			const on_destroy = () => {
+				const keys = Array.from(this.#batches.values());
+
+				if (keys.includes(k)) {
+					// keep the effect offscreen, as another batch will need it
+					var fragment = document.createDocumentFragment();
+					move_effect(effect, fragment);
+
+					fragment.append(create_text()); // TODO can we avoid this?
+
+					this.#offscreen.set(k, { effect, fragment });
+				} else {
+					destroy_effect(effect);
+				}
+
+				this.#outroing.delete(k);
+				this.#onscreen.delete(k);
+			};
+
+			if (this.#transition || !onscreen) {
+				this.#outroing.add(k);
+				pause_effect(effect, on_destroy, false);
+			} else {
+				on_destroy();
+			}
+		}
+	};
+
+	/**
+	 * @param {Batch} batch
+	 */
+	#discard = (batch) => {
+		this.#batches.delete(batch);
+
+		const keys = Array.from(this.#batches.values());
+
+		for (const [k, branch] of this.#offscreen) {
+			if (!keys.includes(k)) {
+				destroy_effect(branch.effect);
+				this.#offscreen.delete(k);
+			}
+		}
+	};
+
+	/**
+	 *
+	 * @param {any} key
+	 * @param {null | ((target: TemplateNode) => void)} fn
+	 */
+	ensure(key, fn) {
+		var batch = /** @type {Batch} */ (current_batch);
+		var defer = should_defer_append();
+
+		if (fn && !this.#onscreen.has(key) && !this.#offscreen.has(key)) {
+			if (defer) {
+				var fragment = document.createDocumentFragment();
+				var target = create_text();
+
+				fragment.append(target);
+
+				this.#offscreen.set(key, {
+					effect: branch(() => fn(target)),
+					fragment
+				});
+			} else {
+				this.#onscreen.set(
+					key,
+					branch(() => fn(this.anchor))
+				);
+			}
+		}
+
+		this.#batches.set(batch, key);
+
+		if (defer) {
+			for (const [k, effect] of this.#onscreen) {
+				if (k === key) {
+					batch.unskip_effect(effect);
+				} else {
+					batch.skip_effect(effect);
+				}
+			}
+
+			for (const [k, branch] of this.#offscreen) {
+				if (k === key) {
+					batch.unskip_effect(branch.effect);
+				} else {
+					batch.skip_effect(branch.effect);
+				}
+			}
+
+			batch.oncommit(this.#commit);
+			batch.ondiscard(this.#discard);
+		} else {
+			if (hydrating) {
+				this.anchor = hydrate_node;
+			}
+
+			this.#commit(batch);
+		}
+	}
+}
diff --git a/packages/svelte/src/internal/client/dom/blocks/css-props.js b/packages/svelte/src/internal/client/dom/blocks/css-props.js
index 473d35b122..084a5561be 100644
--- a/packages/svelte/src/internal/client/dom/blocks/css-props.js
+++ b/packages/svelte/src/internal/client/dom/blocks/css-props.js
@@ -1,6 +1,5 @@
-/** @import { TemplateNode } from '#client' */
-import { render_effect, teardown } from '../../reactivity/effects.js';
-import { hydrate_node, hydrating, set_hydrate_node } from '../hydration.js';
+import { render_effect } from '../../reactivity/effects.js';
+import { hydrating, set_hydrate_node } from '../hydration.js';
 import { get_first_child } from '../operations.js';
 
 /**
@@ -10,7 +9,7 @@ import { get_first_child } from '../operations.js';
  */
 export function css_props(element, get_styles) {
 	if (hydrating) {
-		set_hydrate_node(/** @type {TemplateNode} */ (get_first_child(element)));
+		set_hydrate_node(get_first_child(element));
 	}
 
 	render_effect(() => {
@@ -26,8 +25,4 @@ export function css_props(element, get_styles) {
 			}
 		}
 	});
-
-	teardown(() => {
-		element.remove();
-	});
 }
diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js
index 9e64055940..2df1d6ffa1 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 { EachItem, EachOutroGroup, EachState, Effect, EffectNodes, MaybeSource, Source, TemplateNode, TransitionManager, Value } from '#client' */
+/** @import { Batch } from '../../reactivity/batch.js'; */
 import {
 	EACH_INDEX_REACTIVE,
 	EACH_IS_ANIMATED,
@@ -12,7 +13,8 @@ import {
 	hydrate_next,
 	hydrate_node,
 	hydrating,
-	remove_nodes,
+	read_hydration_instruction,
+	skip_nodes,
 	set_hydrate_node,
 	set_hydrating
 } from '../hydration.js';
@@ -20,35 +22,31 @@ import {
 	clear_text_content,
 	create_text,
 	get_first_child,
-	get_next_sibling
+	get_next_sibling,
+	should_defer_append
 } from '../operations.js';
 import {
 	block,
 	branch,
 	destroy_effect,
-	run_out_transitions,
-	pause_children,
+	move_effect,
 	pause_effect,
 	resume_effect
 } from '../../reactivity/effects.js';
 import { source, mutable_source, internal_set } from '../../reactivity/sources.js';
 import { array_from, is_array } from '../../../shared/utils.js';
-import { INERT } from '../../constants.js';
+import { BRANCH_EFFECT, COMMENT_NODE, DESTROYED, EFFECT_OFFSCREEN, INERT } from '#client/constants';
 import { queue_micro_task } from '../task.js';
-import { active_effect, active_reaction } from '../../runtime.js';
+import { get } from '../../runtime.js';
 import { DEV } from 'esm-env';
+import { derived_safe_equal } from '../../reactivity/deriveds.js';
+import { current_batch } from '../../reactivity/batch.js';
+import * as e from '../../errors.js';
+import { tag } from '../../dev/tracing.js';
 
-/**
- * The row of a keyed each block that is currently updating. We track this
- * so that `animate:` directives have something to attach themselves to
- * @type {EachItem | null}
- */
-export let current_each_item = null;
-
-/** @param {EachItem | null} item */
-export function set_current_each_item(item) {
-	current_each_item = item;
-}
+// When making substantive changes to this file, validate them with the each block stress test:
+// https://svelte.dev/playground/1972b2cf46564476ad8c8c6405b23b7b
+// This test also exists in this repo, as `packages/svelte/tests/manual/each-stress-test`
 
 /**
  * @param {any} _
@@ -62,44 +60,110 @@ export function index(_, i) {
  * Pause multiple effects simultaneously, and coordinate their
  * subsequent destruction. Used in each blocks
  * @param {EachState} state
- * @param {EachItem[]} items
+ * @param {Effect[]} to_destroy
  * @param {null | Node} controlled_anchor
- * @param {Map<any, EachItem>} items_map
  */
-function pause_effects(state, items, controlled_anchor, items_map) {
+function pause_effects(state, to_destroy, controlled_anchor) {
 	/** @type {TransitionManager[]} */
 	var transitions = [];
-	var length = items.length;
+	var length = to_destroy.length;
+
+	/** @type {EachOutroGroup} */
+	var group;
+	var remaining = to_destroy.length;
 
 	for (var i = 0; i < length; i++) {
-		pause_children(items[i].e, transitions, true);
-	}
+		let effect = to_destroy[i];
 
-	var is_controlled = length > 0 && transitions.length === 0 && controlled_anchor !== null;
-	// If we have a controlled anchor, it means that the each block is inside a single
-	// DOM element, so we can apply a fast-path for clearing the contents of the element.
-	if (is_controlled) {
-		var parent_node = /** @type {Element} */ (
-			/** @type {Element} */ (controlled_anchor).parentNode
+		pause_effect(
+			effect,
+			() => {
+				if (group) {
+					group.pending.delete(effect);
+					group.done.add(effect);
+
+					if (group.pending.size === 0) {
+						var groups = /** @type {Set<EachOutroGroup>} */ (state.outrogroups);
+
+						destroy_effects(state, array_from(group.done));
+						groups.delete(group);
+
+						if (groups.size === 0) {
+							state.outrogroups = null;
+						}
+					}
+				} else {
+					remaining -= 1;
+				}
+			},
+			false
 		);
-		clear_text_content(parent_node);
-		parent_node.append(/** @type {Element} */ (controlled_anchor));
-		items_map.clear();
-		link(state, items[0].prev, items[length - 1].next);
 	}
 
-	run_out_transitions(transitions, () => {
-		for (var i = 0; i < length; i++) {
-			var item = items[i];
-			if (!is_controlled) {
-				items_map.delete(item.k);
-				link(state, item.prev, item.next);
+	if (remaining === 0) {
+		// If we're in a controlled each block (i.e. the block is the only child of an
+		// element), and we are removing all items, _and_ there are no out transitions,
+		// we can use the fast path — emptying the element and replacing the anchor
+		var fast_path = transitions.length === 0 && controlled_anchor !== null;
+
+		if (fast_path) {
+			var anchor = /** @type {Element} */ (controlled_anchor);
+			var parent_node = /** @type {Element} */ (anchor.parentNode);
+
+			clear_text_content(parent_node);
+			parent_node.append(anchor);
+
+			state.items.clear();
+		}
+
+		destroy_effects(state, to_destroy, !fast_path);
+	} else {
+		group = {
+			pending: new Set(to_destroy),
+			done: new Set()
+		};
+
+		(state.outrogroups ??= new Set()).add(group);
+	}
+}
+
+/**
+ * @param {EachState} state
+ * @param {Effect[]} to_destroy
+ * @param {boolean} remove_dom
+ */
+function destroy_effects(state, to_destroy, remove_dom = true) {
+	/** @type {Set<Effect> | undefined} */
+	var preserved_effects;
+
+	// The loop-in-a-loop isn't ideal, but we should only hit this in relatively rare cases
+	if (state.pending.size > 0) {
+		preserved_effects = new Set();
+
+		for (const keys of state.pending.values()) {
+			for (const key of keys) {
+				preserved_effects.add(/** @type {EachItem} */ (state.items.get(key)).e);
 			}
-			destroy_effect(item.e, !is_controlled);
 		}
-	});
+	}
+
+	for (var i = 0; i < to_destroy.length; i++) {
+		var e = to_destroy[i];
+
+		if (preserved_effects?.has(e)) {
+			e.f |= EFFECT_OFFSCREEN;
+
+			const fragment = document.createDocumentFragment();
+			move_effect(e, fragment);
+		} else {
+			destroy_effect(to_destroy[i], remove_dom);
+		}
+	}
 }
 
+/** @type {TemplateNode} */
+var offscreen_anchor;
+
 /**
  * @template V
  * @param {Element | Comment} node The next sibling node, or the parent node if this is a 'controlled' block
@@ -113,8 +177,8 @@ function pause_effects(state, items, controlled_anchor, items_map) {
 export function each(node, flags, get_collection, get_key, render_fn, fallback_fn = null) {
 	var anchor = node;
 
-	/** @type {EachState} */
-	var state = { flags, items: new Map(), first: null };
+	/** @type {Map<any, EachItem>} */
+	var items = new Map();
 
 	var is_controlled = (flags & EACH_IS_CONTROLLED) !== 0;
 
@@ -122,7 +186,7 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 		var parent_node = /** @type {Element} */ (node);
 
 		anchor = hydrating
-			? set_hydrate_node(/** @type {Comment | Text} */ (get_first_child(parent_node)))
+			? set_hydrate_node(get_first_child(parent_node))
 			: parent_node.appendChild(create_text());
 	}
 
@@ -133,35 +197,81 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 	/** @type {Effect | null} */
 	var fallback = null;
 
-	var was_empty = false;
-
-	block(() => {
+	// 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
+	var each_array = derived_safe_equal(() => {
 		var collection = get_collection();
 
-		var array = is_array(collection)
-			? collection
-			: collection == null
-				? []
-				: array_from(collection);
+		return /** @type {V[]} */ (
+			is_array(collection) ? collection : collection == null ? [] : array_from(collection)
+		);
+	});
 
-		var length = array.length;
+	if (DEV) {
+		tag(each_array, '{#each ...}');
+	}
+
+	/** @type {V[]} */
+	var array;
+
+	/** @type {Map<Batch, Set<any>>} */
+	var pending = new Map();
 
-		if (was_empty && length === 0) {
-			// ignore updates if the array is empty,
-			// and it already was empty on previous run
+	var first_run = true;
+
+	/**
+	 * @param {Batch} batch
+	 */
+	function commit(batch) {
+		if ((state.effect.f & DESTROYED) !== 0) {
 			return;
 		}
-		was_empty = length === 0;
+
+		state.pending.delete(batch);
+
+		state.fallback = fallback;
+		reconcile(state, array, anchor, flags, get_key);
+
+		if (fallback !== null) {
+			if (array.length === 0) {
+				if ((fallback.f & EFFECT_OFFSCREEN) === 0) {
+					resume_effect(fallback);
+				} else {
+					fallback.f ^= EFFECT_OFFSCREEN;
+					move(fallback, null, anchor);
+				}
+			} else {
+				pause_effect(fallback, () => {
+					// TODO only null out if no pending batch needs it,
+					// otherwise re-add `fallback.fragment` and move the
+					// effect into it
+					fallback = null;
+				});
+			}
+		}
+	}
+
+	/**
+	 * @param {Batch} batch
+	 */
+	function discard(batch) {
+		state.pending.delete(batch);
+	}
+
+	var effect = block(() => {
+		array = /** @type {V[]} */ (get(each_array));
+		var length = array.length;
 
 		/** `true` if there was a hydration mismatch. Needs to be a `let` or else it isn't treeshaken out */
 		let mismatch = false;
 
 		if (hydrating) {
-			var is_else = /** @type {Comment} */ (anchor).data === HYDRATION_START_ELSE;
+			var is_else = read_hydration_instruction(anchor) === HYDRATION_START_ELSE;
 
 			if (is_else !== (length === 0)) {
 				// hydration mismatch — remove the server-rendered DOM and start over
-				anchor = remove_nodes();
+				anchor = skip_nodes();
 
 				set_hydrate_node(anchor);
 				set_hydrating(false);
@@ -169,77 +279,103 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 			}
 		}
 
-		// this is separate to the previous block because `hydrating` might change
-		if (hydrating) {
-			/** @type {EachItem | null} */
-			var prev = null;
-
-			/** @type {EachItem} */
-			var item;
-
-			for (var i = 0; i < length; i++) {
-				if (
-					hydrate_node.nodeType === 8 &&
-					/** @type {Comment} */ (hydrate_node).data === HYDRATION_END
-				) {
-					// The server rendered fewer items than expected,
-					// so break out and continue appending non-hydrated items
-					anchor = /** @type {Comment} */ (hydrate_node);
-					mismatch = true;
-					set_hydrating(false);
-					break;
+		var keys = new Set();
+		var batch = /** @type {Batch} */ (current_batch);
+		var defer = should_defer_append();
+
+		for (var index = 0; index < length; index += 1) {
+			if (
+				hydrating &&
+				hydrate_node.nodeType === COMMENT_NODE &&
+				/** @type {Comment} */ (hydrate_node).data === HYDRATION_END
+			) {
+				// The server rendered fewer items than expected,
+				// so break out and continue appending non-hydrated items
+				anchor = /** @type {Comment} */ (hydrate_node);
+				mismatch = true;
+				set_hydrating(false);
+			}
+
+			var value = array[index];
+			var key = get_key(value, index);
+
+			if (DEV) {
+				// Check that the key function is idempotent (returns the same value when called twice)
+				var key_again = get_key(value, index);
+				if (key !== key_again) {
+					e.each_key_volatile(String(index), String(key), String(key_again));
 				}
+			}
+
+			var item = first_run ? null : items.get(key);
 
-				var value = array[i];
-				var key = get_key(value, i);
+			if (item) {
+				// update before reconciliation, to trigger any async updates
+				if (item.v) internal_set(item.v, value);
+				if (item.i) internal_set(item.i, index);
+
+				if (defer) {
+					batch.unskip_effect(item.e);
+				}
+			} else {
 				item = create_item(
-					hydrate_node,
-					state,
-					prev,
-					null,
+					items,
+					first_run ? anchor : (offscreen_anchor ??= create_text()),
 					value,
 					key,
-					i,
+					index,
 					render_fn,
 					flags,
 					get_collection
 				);
-				state.items.set(key, item);
 
-				prev = item;
+				if (!first_run) {
+					item.e.f |= EFFECT_OFFSCREEN;
+				}
+
+				items.set(key, item);
 			}
 
-			// remove excess nodes
-			if (length > 0) {
-				set_hydrate_node(remove_nodes());
+			keys.add(key);
+		}
+
+		if (length === 0 && fallback_fn && !fallback) {
+			if (first_run) {
+				fallback = branch(() => fallback_fn(anchor));
+			} else {
+				fallback = branch(() => fallback_fn((offscreen_anchor ??= create_text())));
+				fallback.f |= EFFECT_OFFSCREEN;
 			}
 		}
 
-		if (!hydrating) {
-			var effect = /** @type {Effect} */ (active_reaction);
-			reconcile(
-				array,
-				state,
-				anchor,
-				render_fn,
-				flags,
-				(effect.f & INERT) !== 0,
-				get_key,
-				get_collection
-			);
+		if (length > keys.size) {
+			if (DEV) {
+				validate_each_keys(array, get_key);
+			} else {
+				// in prod, the additional information isn't printed, so don't bother computing it
+				e.each_key_duplicate('', '', '');
+			}
 		}
 
-		if (fallback_fn !== null) {
-			if (length === 0) {
-				if (fallback) {
-					resume_effect(fallback);
-				} else {
-					fallback = branch(() => fallback_fn(anchor));
+		// remove excess nodes
+		if (hydrating && length > 0) {
+			set_hydrate_node(skip_nodes());
+		}
+
+		if (!first_run) {
+			pending.set(batch, keys);
+
+			if (defer) {
+				for (const [key, item] of items) {
+					if (!keys.has(key)) {
+						batch.skip_effect(item.e);
+					}
 				}
-			} else if (fallback !== null) {
-				pause_effect(fallback, () => {
-					fallback = null;
-				});
+
+				batch.oncommit(commit);
+				batch.ondiscard(discard);
+			} else {
+				commit(batch);
 			}
 		}
 
@@ -254,49 +390,61 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 		// that a mutation occurred and it's made the collection MAYBE_DIRTY, so reading the
 		// collection again can provide consistency to the reactive graph again as the deriveds
 		// will now be `CLEAN`.
-		get_collection();
+		get(each_array);
 	});
 
+	/** @type {EachState} */
+	var state = { effect, flags, items, pending, outrogroups: null, fallback };
+
+	first_run = false;
+
 	if (hydrating) {
 		anchor = hydrate_node;
 	}
 }
 
+/**
+ * Skip past any non-branch effects (which could be created with `createSubscriber`, for example) to find the next branch effect
+ * @param {Effect | null} effect
+ * @returns {Effect | null}
+ */
+function skip_to_branch(effect) {
+	while (effect !== null && (effect.f & BRANCH_EFFECT) === 0) {
+		effect = effect.next;
+	}
+	return effect;
+}
+
 /**
  * Add, remove, or reorder items output by an each block as its input changes
  * @template V
- * @param {Array<V>} array
  * @param {EachState} state
+ * @param {Array<V>} array
  * @param {Element | Comment | Text} anchor
- * @param {(anchor: Node, item: MaybeSource<V>, index: number | Source<number>) => void} render_fn
  * @param {number} flags
- * @param {boolean} is_inert
  * @param {(value: V, index: number) => any} get_key
- * @param {() => V[]} get_collection
  * @returns {void}
  */
-function reconcile(array, state, anchor, render_fn, flags, is_inert, get_key, get_collection) {
+function reconcile(state, array, anchor, flags, get_key) {
 	var is_animated = (flags & EACH_IS_ANIMATED) !== 0;
-	var should_update = (flags & (EACH_ITEM_REACTIVE | EACH_INDEX_REACTIVE)) !== 0;
 
 	var length = array.length;
 	var items = state.items;
-	var first = state.first;
-	var current = first;
+	var current = skip_to_branch(state.effect.first);
 
-	/** @type {undefined | Set<EachItem>} */
+	/** @type {undefined | Set<Effect>} */
 	var seen;
 
-	/** @type {EachItem | null} */
+	/** @type {Effect | null} */
 	var prev = null;
 
-	/** @type {undefined | Set<EachItem>} */
+	/** @type {undefined | Set<Effect>} */
 	var to_animate;
 
-	/** @type {EachItem[]} */
+	/** @type {Effect[]} */
 	var matched = [];
 
-	/** @type {EachItem[]} */
+	/** @type {Effect[]} */
 	var stashed = [];
 
 	/** @type {V} */
@@ -305,8 +453,8 @@ function reconcile(array, state, anchor, render_fn, flags, is_inert, get_key, ge
 	/** @type {any} */
 	var key;
 
-	/** @type {EachItem | undefined} */
-	var item;
+	/** @type {Effect | undefined} */
+	var effect;
 
 	/** @type {number} */
 	var i;
@@ -315,11 +463,13 @@ function reconcile(array, state, anchor, render_fn, flags, is_inert, get_key, ge
 		for (i = 0; i < length; i += 1) {
 			value = array[i];
 			key = get_key(value, i);
-			item = items.get(key);
+			effect = /** @type {EachItem} */ (items.get(key)).e;
 
-			if (item !== undefined) {
-				item.a?.measure();
-				(to_animate ??= new Set()).add(item);
+			// offscreen == coming in now, no animation in that case,
+			// else this would happen https://github.com/sveltejs/svelte/issues/17181
+			if ((effect.f & EFFECT_OFFSCREEN) === 0) {
+				effect.nodes?.a?.measure();
+				(to_animate ??= new Set()).add(effect);
 			}
 		}
 	}
@@ -327,47 +477,54 @@ function reconcile(array, state, anchor, render_fn, flags, is_inert, get_key, ge
 	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
-			);
-
-			items.set(key, prev);
 
-			matched = [];
-			stashed = [];
+		effect = /** @type {EachItem} */ (items.get(key)).e;
 
-			current = prev.next;
-			continue;
+		if (state.outrogroups !== null) {
+			for (const group of state.outrogroups) {
+				group.pending.delete(effect);
+				group.done.delete(effect);
+			}
 		}
 
-		if (should_update) {
-			update_item(item, value, i, flags);
+		if ((effect.f & INERT) !== 0) {
+			resume_effect(effect);
+			if (is_animated) {
+				effect.nodes?.a?.unfix();
+				(to_animate ??= new Set()).delete(effect);
+			}
 		}
 
-		if ((item.e.f & INERT) !== 0) {
-			resume_effect(item.e);
-			if (is_animated) {
-				item.a?.unfix();
-				(to_animate ??= new Set()).delete(item);
+		if ((effect.f & EFFECT_OFFSCREEN) !== 0) {
+			effect.f ^= EFFECT_OFFSCREEN;
+
+			if (effect === current) {
+				move(effect, null, anchor);
+			} else {
+				var next = prev ? prev.next : current;
+
+				if (effect === state.effect.last) {
+					state.effect.last = effect.prev;
+				}
+
+				if (effect.prev) effect.prev.next = effect.next;
+				if (effect.next) effect.next.prev = effect.prev;
+				link(state, prev, effect);
+				link(state, effect, next);
+
+				move(effect, next, anchor);
+				prev = effect;
+
+				matched = [];
+				stashed = [];
+
+				current = skip_to_branch(prev.next);
+				continue;
 			}
 		}
 
-		if (item !== current) {
-			if (seen !== undefined && seen.has(item)) {
+		if (effect !== current) {
+			if (seen !== undefined && seen.has(effect)) {
 				if (matched.length < stashed.length) {
 					// more efficient to move later items to the front
 					var start = stashed[0];
@@ -398,14 +555,14 @@ function reconcile(array, state, anchor, render_fn, flags, is_inert, get_key, ge
 					stashed = [];
 				} else {
 					// more efficient to move earlier items to the back
-					seen.delete(item);
-					move(item, current, anchor);
+					seen.delete(effect);
+					move(effect, current, anchor);
 
-					link(state, item.prev, item.next);
-					link(state, item, prev === null ? state.first : prev.next);
-					link(state, prev, item);
+					link(state, effect.prev, effect.next);
+					link(state, effect, prev === null ? state.effect.first : prev.next);
+					link(state, prev, effect);
 
-					prev = item;
+					prev = effect;
 				}
 
 				continue;
@@ -414,37 +571,57 @@ function reconcile(array, state, anchor, render_fn, flags, is_inert, get_key, ge
 			matched = [];
 			stashed = [];
 
-			while (current !== null && current.k !== key) {
-				// If the each block isn't inert and an item has an effect that is already inert,
-				// skip over adding it to our seen Set as the item is already being handled
-				if (is_inert || (current.e.f & INERT) === 0) {
-					(seen ??= new Set()).add(current);
-				}
+			while (current !== null && current !== effect) {
+				(seen ??= new Set()).add(current);
 				stashed.push(current);
-				current = current.next;
+				current = skip_to_branch(current.next);
 			}
 
 			if (current === null) {
 				continue;
 			}
+		}
 
-			item = current;
+		if ((effect.f & EFFECT_OFFSCREEN) === 0) {
+			matched.push(effect);
 		}
 
-		matched.push(item);
-		prev = item;
-		current = item.next;
+		prev = effect;
+		current = skip_to_branch(effect.next);
+	}
+
+	if (state.outrogroups !== null) {
+		for (const group of state.outrogroups) {
+			if (group.pending.size === 0) {
+				destroy_effects(state, array_from(group.done));
+				state.outrogroups?.delete(group);
+			}
+		}
+
+		if (state.outrogroups.size === 0) {
+			state.outrogroups = null;
+		}
 	}
 
 	if (current !== null || seen !== undefined) {
-		var to_destroy = seen === undefined ? [] : array_from(seen);
+		/** @type {Effect[]} */
+		var to_destroy = [];
+
+		if (seen !== undefined) {
+			for (effect of seen) {
+				if ((effect.f & INERT) === 0) {
+					to_destroy.push(effect);
+				}
+			}
+		}
 
 		while (current !== null) {
 			// If the each block isn't inert, then inert effects are currently outroing and will be removed once the transition is finished
-			if (is_inert || (current.e.f & INERT) === 0) {
+			if ((current.f & INERT) === 0 && current !== state.fallback) {
 				to_destroy.push(current);
 			}
-			current = current.next;
+
+			current = skip_to_branch(current.next);
 		}
 
 		var destroy_length = to_destroy.length;
@@ -454,164 +631,142 @@ function reconcile(array, state, anchor, render_fn, flags, is_inert, get_key, ge
 
 			if (is_animated) {
 				for (i = 0; i < destroy_length; i += 1) {
-					to_destroy[i].a?.measure();
+					to_destroy[i].nodes?.a?.measure();
 				}
 
 				for (i = 0; i < destroy_length; i += 1) {
-					to_destroy[i].a?.fix();
+					to_destroy[i].nodes?.a?.fix();
 				}
 			}
 
-			pause_effects(state, to_destroy, controlled_anchor, items);
+			pause_effects(state, to_destroy, controlled_anchor);
 		}
 	}
 
 	if (is_animated) {
 		queue_micro_task(() => {
 			if (to_animate === undefined) return;
-			for (item of to_animate) {
-				item.a?.apply();
+			for (effect of to_animate) {
+				effect.nodes?.a?.apply();
 			}
 		});
 	}
-
-	/** @type {Effect} */ (active_effect).first = state.first && state.first.e;
-	/** @type {Effect} */ (active_effect).last = prev && prev.e;
-}
-
-/**
- * @param {EachItem} item
- * @param {any} value
- * @param {number} index
- * @param {number} type
- * @returns {void}
- */
-function update_item(item, value, index, type) {
-	if ((type & EACH_ITEM_REACTIVE) !== 0) {
-		internal_set(item.v, value);
-	}
-
-	if ((type & EACH_INDEX_REACTIVE) !== 0) {
-		internal_set(/** @type {Value<number>} */ (item.i), index);
-	} else {
-		item.i = index;
-	}
 }
 
 /**
  * @template V
+ * @param {Map<any, EachItem>} items
  * @param {Node} anchor
- * @param {EachState} state
- * @param {EachItem | null} prev
- * @param {EachItem | null} next
  * @param {V} value
  * @param {unknown} key
  * @param {number} index
- * @param {(anchor: Node, item: V | Source<V>, index: number | Value<number>) => void} render_fn
+ * @param {(anchor: Node, item: V | Source<V>, index: number | Value<number>, collection: () => V[]) => void} render_fn
  * @param {number} flags
  * @param {() => V[]} get_collection
  * @returns {EachItem}
  */
-function create_item(
-	anchor,
-	state,
-	prev,
-	next,
-	value,
-	key,
-	index,
-	render_fn,
-	flags,
-	get_collection
-) {
-	var previous_each_item = current_each_item;
-	var reactive = (flags & EACH_ITEM_REACTIVE) !== 0;
-	var mutable = (flags & EACH_ITEM_IMMUTABLE) === 0;
-
-	var v = reactive ? (mutable ? mutable_source(value) : source(value)) : value;
-	var i = (flags & EACH_INDEX_REACTIVE) === 0 ? index : source(index);
-
-	if (DEV && reactive) {
+function create_item(items, anchor, value, key, index, render_fn, flags, get_collection) {
+	var v =
+		(flags & EACH_ITEM_REACTIVE) !== 0
+			? (flags & EACH_ITEM_IMMUTABLE) === 0
+				? mutable_source(value, false, false)
+				: source(value)
+			: null;
+
+	var i = (flags & EACH_INDEX_REACTIVE) !== 0 ? source(index) : null;
+
+	if (DEV && v) {
 		// For tracing purposes, we need to link the source signal we create with the
 		// collection + index so that tracing works as intended
-		/** @type {Value} */ (v).debug = () => {
-			var collection_index = typeof i === 'number' ? index : i.v;
+		v.trace = () => {
 			// eslint-disable-next-line @typescript-eslint/no-unused-expressions
-			get_collection()[collection_index];
+			get_collection()[i?.v ?? index];
 		};
 	}
 
-	/** @type {EachItem} */
-	var item = {
-		i,
+	return {
 		v,
-		k: key,
-		a: null,
-		// @ts-expect-error
-		e: null,
-		prev,
-		next
-	};
-
-	current_each_item = item;
-
-	try {
-		item.e = branch(() => render_fn(anchor, v, i), hydrating);
-
-		item.e.prev = prev && prev.e;
-		item.e.next = next && next.e;
-
-		if (prev === null) {
-			state.first = item;
-		} else {
-			prev.next = item;
-			prev.e.next = item.e;
-		}
-
-		if (next !== null) {
-			next.prev = item;
-			next.e.prev = item.e;
-		}
+		i,
+		e: branch(() => {
+			render_fn(anchor, v ?? value, i ?? index, get_collection);
 
-		return item;
-	} finally {
-		current_each_item = previous_each_item;
-	}
+			return () => {
+				items.delete(key);
+			};
+		})
+	};
 }
 
 /**
- * @param {EachItem} item
- * @param {EachItem | null} next
+ * @param {Effect} effect
+ * @param {Effect | null} next
  * @param {Text | Element | Comment} anchor
  */
-function move(item, next, anchor) {
-	var end = item.next ? /** @type {TemplateNode} */ (item.next.e.nodes_start) : anchor;
+function move(effect, next, anchor) {
+	if (!effect.nodes) return;
 
-	var dest = next ? /** @type {TemplateNode} */ (next.e.nodes_start) : anchor;
-	var node = /** @type {TemplateNode} */ (item.e.nodes_start);
+	var node = effect.nodes.start;
+	var end = effect.nodes.end;
 
-	while (node !== end) {
+	var dest =
+		next && (next.f & EFFECT_OFFSCREEN) === 0
+			? /** @type {EffectNodes} */ (next.nodes).start
+			: anchor;
+
+	while (node !== null) {
 		var next_node = /** @type {TemplateNode} */ (get_next_sibling(node));
 		dest.before(node);
+
+		if (node === end) {
+			return;
+		}
+
 		node = next_node;
 	}
 }
 
 /**
  * @param {EachState} state
- * @param {EachItem | null} prev
- * @param {EachItem | null} next
+ * @param {Effect | null} prev
+ * @param {Effect | null} next
  */
 function link(state, prev, next) {
 	if (prev === null) {
-		state.first = next;
+		state.effect.first = next;
 	} else {
 		prev.next = next;
-		prev.e.next = next && next.e;
 	}
 
-	if (next !== null) {
+	if (next === null) {
+		state.effect.last = prev;
+	} else {
 		next.prev = prev;
-		next.e.prev = prev && prev.e;
+	}
+}
+
+/**
+ * @param {Array<any>} array
+ * @param {(item: any, index: number) => string} key_fn
+ * @returns {void}
+ */
+function validate_each_keys(array, key_fn) {
+	const keys = new Map();
+	const length = array.length;
+
+	for (let i = 0; i < length; i++) {
+		const key = key_fn(array[i], i);
+
+		if (keys.has(key)) {
+			const a = String(keys.get(key));
+			const b = String(i);
+
+			/** @type {string | null} */
+			let k = String(key);
+			if (k.startsWith('[object ')) k = null;
+
+			e.each_key_duplicate(a, b, k);
+		}
+
+		keys.set(key, i);
 	}
 }
diff --git a/packages/svelte/src/internal/client/dom/blocks/html.js b/packages/svelte/src/internal/client/dom/blocks/html.js
index 04ab0aee87..ffe947eb16 100644
--- a/packages/svelte/src/internal/client/dom/blocks/html.js
+++ b/packages/svelte/src/internal/client/dom/blocks/html.js
@@ -1,19 +1,27 @@
 /** @import { Effect, TemplateNode } from '#client' */
-import { FILENAME, HYDRATION_ERROR } from '../../../../constants.js';
-import { block, branch, destroy_effect } from '../../reactivity/effects.js';
+/** @import {} from 'trusted-types' */
+import {
+	FILENAME,
+	HYDRATION_ERROR,
+	NAMESPACE_SVG,
+	NAMESPACE_MATHML
+} from '../../../../constants.js';
+import { remove_effect_dom, template_effect } from '../../reactivity/effects.js';
 import { hydrate_next, hydrate_node, hydrating, set_hydrate_node } from '../hydration.js';
-import { create_fragment_from_html } from '../reconciler.js';
+
 import { assign_nodes } from '../template.js';
 import * as w from '../../warnings.js';
 import { hash, sanitize_location } from '../../../../utils.js';
 import { DEV } from 'esm-env';
-import { dev_current_component_function } from '../../runtime.js';
-import { get_first_child, get_next_sibling } from '../operations.js';
+import { dev_current_component_function } from '../../context.js';
+import { create_element, get_first_child, get_next_sibling } from '../operations.js';
+import { active_effect } from '../../runtime.js';
+import { COMMENT_NODE } from '#client/constants';
 
 /**
  * @param {Element} element
  * @param {string | null} server_hash
- * @param {string} value
+ * @param {string | TrustedHTML} value
  */
 function check_hash(element, server_hash, value) {
 	if (!server_hash || server_hash === hash(String(value ?? ''))) return;
@@ -33,90 +41,120 @@ function check_hash(element, server_hash, value) {
 
 /**
  * @param {Element | Text | Comment} node
- * @param {() => string} get_value
- * @param {boolean} svg
- * @param {boolean} mathml
+ * @param {() => string | TrustedHTML} get_value
+ * @param {boolean} [is_controlled]
+ * @param {boolean} [svg]
+ * @param {boolean} [mathml]
  * @param {boolean} [skip_warning]
  * @returns {void}
  */
-export function html(node, get_value, svg, mathml, skip_warning) {
+export function html(
+	node,
+	get_value,
+	is_controlled = false,
+	svg = false,
+	mathml = false,
+	skip_warning = false
+) {
 	var anchor = node;
 
+	/** @type {string | TrustedHTML} */
 	var value = '';
 
-	/** @type {Effect | undefined} */
-	var effect;
+	if (is_controlled) {
+		var parent_node = /** @type {Element} */ (node);
+
+		if (hydrating) {
+			anchor = set_hydrate_node(get_first_child(parent_node));
+		}
+	}
+
+	template_effect(() => {
+		var effect = /** @type {Effect} */ (active_effect);
 
-	block(() => {
 		if (value === (value = get_value() ?? '')) {
-			if (hydrating) {
-				hydrate_next();
+			if (hydrating) hydrate_next();
+			return;
+		}
+
+		if (is_controlled && !hydrating) {
+			// When @html is the only child, use innerHTML directly.
+			// This also handles contenteditable, where the user may delete the anchor comment.
+			effect.nodes = null;
+			parent_node.innerHTML = /** @type {string} */ (value);
+
+			if (value !== '') {
+				assign_nodes(
+					/** @type {TemplateNode} */ (get_first_child(parent_node)),
+					/** @type {TemplateNode} */ (parent_node.lastChild)
+				);
 			}
+
 			return;
 		}
 
-		if (effect !== undefined) {
-			destroy_effect(effect);
-			effect = undefined;
+		if (effect.nodes !== null) {
+			remove_effect_dom(effect.nodes.start, /** @type {TemplateNode} */ (effect.nodes.end));
+			effect.nodes = null;
 		}
 
 		if (value === '') return;
 
-		effect = branch(() => {
-			if (hydrating) {
-				// We're deliberately not trying to repair mismatches between server and client,
-				// as it's costly and error-prone (and it's an edge case to have a mismatch anyway)
-				var hash = /** @type {Comment} */ (hydrate_node).data;
-				var next = hydrate_next();
-				var last = next;
-
-				while (
-					next !== null &&
-					(next.nodeType !== 8 || /** @type {Comment} */ (next).data !== '')
-				) {
-					last = next;
-					next = /** @type {TemplateNode} */ (get_next_sibling(next));
-				}
-
-				if (next === null) {
-					w.hydration_mismatch();
-					throw HYDRATION_ERROR;
-				}
-
-				if (DEV && !skip_warning) {
-					check_hash(/** @type {Element} */ (next.parentNode), hash, value);
-				}
-
-				assign_nodes(hydrate_node, last);
-				anchor = set_hydrate_node(next);
-				return;
+		if (hydrating) {
+			// We're deliberately not trying to repair mismatches between server and client,
+			// as it's costly and error-prone (and it's an edge case to have a mismatch anyway)
+			var hash = /** @type {Comment} */ (hydrate_node).data;
+
+			/** @type {TemplateNode | null} */
+			var next = hydrate_next();
+			var last = next;
+
+			while (
+				next !== null &&
+				(next.nodeType !== COMMENT_NODE || /** @type {Comment} */ (next).data !== '')
+			) {
+				last = next;
+				next = get_next_sibling(next);
 			}
 
-			var html = value + '';
-			if (svg) html = `<svg>${html}</svg>`;
-			else if (mathml) html = `<math>${html}</math>`;
-
-			// Don't use create_fragment_with_script_from_html here because that would mean script tags are executed.
-			// @html is basically `.innerHTML = ...` and that doesn't execute scripts either due to security reasons.
-			/** @type {DocumentFragment | Element} */
-			var node = create_fragment_from_html(html);
+			if (next === null) {
+				w.hydration_mismatch();
+				throw HYDRATION_ERROR;
+			}
 
-			if (svg || mathml) {
-				node = /** @type {Element} */ (get_first_child(node));
+			if (DEV && !skip_warning) {
+				check_hash(/** @type {Element} */ (next.parentNode), hash, value);
 			}
 
-			assign_nodes(
-				/** @type {TemplateNode} */ (get_first_child(node)),
-				/** @type {TemplateNode} */ (node.lastChild)
-			);
-
-			if (svg || mathml) {
-				while (get_first_child(node)) {
-					anchor.before(/** @type {Node} */ (get_first_child(node)));
-				}
-			} else {
-				anchor.before(node);
+			assign_nodes(hydrate_node, last);
+			anchor = set_hydrate_node(next);
+			return;
+		}
+
+		// Don't use create_fragment_with_script_from_html here because that would mean script tags are executed.
+		// @html is basically `.innerHTML = ...` and that doesn't execute scripts either due to security reasons.
+		// Use a <template>, <svg>, or <math> wrapper depending on context. If value is a TrustedHTML object,
+		// it will be assigned directly to innerHTML without coercion — this allows {@html policy.createHTML(...)} to work.
+		var ns = svg ? NAMESPACE_SVG : mathml ? NAMESPACE_MATHML : undefined;
+		var wrapper = /** @type {HTMLTemplateElement | SVGElement | MathMLElement} */ (
+			create_element(svg ? 'svg' : mathml ? 'math' : 'template', ns)
+		);
+		wrapper.innerHTML = /** @type {any} */ (value);
+
+		/** @type {DocumentFragment | Element} */
+		var node = svg || mathml ? wrapper : /** @type {HTMLTemplateElement} */ (wrapper).content;
+
+		assign_nodes(
+			/** @type {TemplateNode} */ (get_first_child(node)),
+			/** @type {TemplateNode} */ (node.lastChild)
+		);
+
+		if (svg || mathml) {
+			while (get_first_child(node)) {
+				anchor.before(/** @type {TemplateNode} */ (get_first_child(node)));
 			}
-		});
+		} else {
+			anchor.before(node);
+		}
 	});
 }
diff --git a/packages/svelte/src/internal/client/dom/blocks/if.js b/packages/svelte/src/internal/client/dom/blocks/if.js
index 36790c05c1..7d3f9f7fbd 100644
--- a/packages/svelte/src/internal/client/dom/blocks/if.js
+++ b/packages/svelte/src/internal/client/dom/blocks/if.js
@@ -1,111 +1,72 @@
-/** @import { Effect, TemplateNode } from '#client' */
-import { EFFECT_TRANSPARENT } from '../../constants.js';
+/** @import { TemplateNode } from '#client' */
+import { EFFECT_TRANSPARENT } from '#client/constants';
 import {
 	hydrate_next,
-	hydrate_node,
 	hydrating,
-	remove_nodes,
+	read_hydration_instruction,
+	skip_nodes,
 	set_hydrate_node,
-	set_hydrating
+	set_hydrating,
+	hydrate_node
 } from '../hydration.js';
-import { block, branch, pause_effect, resume_effect } from '../../reactivity/effects.js';
-import { HYDRATION_START_ELSE, UNINITIALIZED } from '../../../../constants.js';
+import { block } from '../../reactivity/effects.js';
+import { BranchManager } from './branches.js';
 
 /**
  * @param {TemplateNode} node
- * @param {(branch: (fn: (anchor: Node) => void, flag?: boolean) => void) => void} fn
+ * @param {(branch: (fn: (anchor: Node) => void, key?: number | false) => 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, elseif = false) {
+	/** @type {TemplateNode | undefined} */
+	var marker;
 	if (hydrating) {
+		marker = hydrate_node;
 		hydrate_next();
 	}
 
-	var anchor = node;
-
-	/** @type {Effect | null} */
-	var consequent_effect = null;
-
-	/** @type {Effect | null} */
-	var alternate_effect = null;
-
-	/** @type {UNINITIALIZED | boolean | null} */
-	var condition = UNINITIALIZED;
-
+	var branches = new BranchManager(node);
 	var flags = elseif ? EFFECT_TRANSPARENT : 0;
 
-	var has_branch = false;
-
-	const set_branch = (/** @type {(anchor: Node) => void} */ fn, flag = true) => {
-		has_branch = true;
-		update_branch(flag, fn);
-	};
-
-	const update_branch = (
-		/** @type {boolean | null} */ new_condition,
-		/** @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;
-
+	/**
+	 * @param {number | false} key
+	 * @param {null | ((anchor: Node) => void)} fn
+	 */
+	function update_branch(key, fn) {
 		if (hydrating) {
-			const is_else = /** @type {Comment} */ (anchor).data === HYDRATION_START_ELSE;
+			var data = read_hydration_instruction(/** @type {TemplateNode} */ (marker));
 
-			if (!!condition === is_else) {
+			// "[n" = branch n, "[-1" = else
+			if (key !== parseInt(data.substring(1))) {
 				// Hydration mismatch: remove everything inside the anchor and start fresh.
 				// This could happen with `{#if browser}...{/if}`, for example
-				anchor = remove_nodes();
+				var anchor = skip_nodes();
 
 				set_hydrate_node(anchor);
-				set_hydrating(false);
-				mismatch = true;
-			}
-		}
+				branches.anchor = anchor;
 
-		if (condition) {
-			if (consequent_effect) {
-				resume_effect(consequent_effect);
-			} else if (fn) {
-				consequent_effect = branch(() => fn(anchor));
-			}
-
-			if (alternate_effect) {
-				pause_effect(alternate_effect, () => {
-					alternate_effect = null;
-				});
-			}
-		} else {
-			if (alternate_effect) {
-				resume_effect(alternate_effect);
-			} else if (fn) {
-				alternate_effect = branch(() => fn(anchor));
-			}
+				set_hydrating(false);
+				branches.ensure(key, fn);
+				set_hydrating(true);
 
-			if (consequent_effect) {
-				pause_effect(consequent_effect, () => {
-					consequent_effect = null;
-				});
+				return;
 			}
 		}
 
-		if (mismatch) {
-			// continue in hydration mode
-			set_hydrating(true);
-		}
-	};
+		branches.ensure(key, fn);
+	}
 
 	block(() => {
-		has_branch = false;
-		fn(set_branch);
+		var has_branch = false;
+
+		fn((fn, key = 0) => {
+			has_branch = true;
+			update_branch(key, fn);
+		});
+
 		if (!has_branch) {
-			update_branch(null, null);
+			update_branch(-1, null);
 		}
 	}, flags);
-
-	if (hydrating) {
-		anchor = hydrate_node;
-	}
 }
diff --git a/packages/svelte/src/internal/client/dom/blocks/key.js b/packages/svelte/src/internal/client/dom/blocks/key.js
index 4a8b7b94fc..dd40d8a1b8 100644
--- a/packages/svelte/src/internal/client/dom/blocks/key.js
+++ b/packages/svelte/src/internal/client/dom/blocks/key.js
@@ -1,9 +1,10 @@
-/** @import { Effect, TemplateNode } from '#client' */
-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 '../../runtime.js';
-import { hydrate_next, hydrate_node, hydrating } from '../hydration.js';
+/** @import { TemplateNode } from '#client' */
+import { is_runes } from '../../context.js';
+import { block } from '../../reactivity/effects.js';
+import { hydrate_next, hydrating } from '../hydration.js';
+import { BranchManager } from './branches.js';
+
+const NAN = Symbol('NaN');
 
 /**
  * @template V
@@ -12,32 +13,28 @@ 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();
 	}
 
-	var anchor = node;
-
-	/** @type {V | typeof UNINITIALIZED} */
-	var key = UNINITIALIZED;
-
-	/** @type {Effect} */
-	var effect;
+	var branches = new BranchManager(node);
 
-	var changed = is_runes() ? not_equal : safe_not_equal;
+	var legacy = !is_runes();
 
 	block(() => {
-		if (changed(key, (key = get_key()))) {
-			if (effect) {
-				pause_effect(effect);
-			}
+		var key = get_key();
 
-			effect = branch(() => render_fn(anchor));
+		// NaN !== NaN, hence we do this workaround to not trigger remounts unnecessarily
+		if (key !== key) {
+			key = /** @type {any} */ (NAN);
 		}
-	});
 
-	if (hydrating) {
-		anchor = hydrate_node;
-	}
+		// key blocks in Svelte <5 had stupid semantics
+		if (legacy && key !== null && typeof key === 'object') {
+			key = /** @type {V} */ ({});
+		}
+
+		branches.ensure(key, render_fn);
+	});
 }
diff --git a/packages/svelte/src/internal/client/dom/blocks/snippet.js b/packages/svelte/src/internal/client/dom/blocks/snippet.js
index cec57f83b7..0c4948aca0 100644
--- a/packages/svelte/src/internal/client/dom/blocks/snippet.js
+++ b/packages/svelte/src/internal/client/dom/blocks/snippet.js
@@ -1,12 +1,12 @@
 /** @import { Snippet } from 'svelte' */
-/** @import { Effect, TemplateNode } from '#client' */
+/** @import { TemplateNode } from '#client' */
 /** @import { Getters } from '#shared' */
-import { EFFECT_TRANSPARENT } from '../../constants.js';
-import { branch, block, destroy_effect, teardown } from '../../reactivity/effects.js';
+import { EFFECT_TRANSPARENT, ELEMENT_NODE } from '#client/constants';
+import { block, teardown } from '../../reactivity/effects.js';
 import {
 	dev_current_component_function,
 	set_dev_current_component_function
-} from '../../runtime.js';
+} from '../../context.js';
 import { hydrate_next, hydrate_node, hydrating } from '../hydration.js';
 import { create_fragment_from_html } from '../reconciler.js';
 import { assign_nodes } from '../template.js';
@@ -14,7 +14,8 @@ import * as w from '../../warnings.js';
 import * as e from '../../errors.js';
 import { DEV } from 'esm-env';
 import { get_first_child, get_next_sibling } from '../operations.js';
-import { noop } from '../../../shared/utils.js';
+import { prevent_snippet_stringification } from '../../../shared/validate.js';
+import { BranchManager } from './branches.js';
 
 /**
  * @template {(node: TemplateNode, ...args: any[]) => void} SnippetFn
@@ -24,33 +25,17 @@ import { noop } from '../../../shared/utils.js';
  * @returns {void}
  */
 export function snippet(node, get_snippet, ...args) {
-	var anchor = node;
-
-	/** @type {SnippetFn | null | undefined} */
-	// @ts-ignore
-	var snippet = noop;
-
-	/** @type {Effect | null} */
-	var snippet_effect;
+	var branches = new BranchManager(node);
 
 	block(() => {
-		if (snippet === (snippet = get_snippet())) return;
-
-		if (snippet_effect) {
-			destroy_effect(snippet_effect);
-			snippet_effect = null;
-		}
+		const snippet = get_snippet() ?? null;
 
 		if (DEV && snippet == null) {
 			e.invalid_snippet();
 		}
 
-		snippet_effect = branch(() => /** @type {SnippetFn} */ (snippet)(anchor, ...args));
+		branches.ensure(snippet, snippet && ((anchor) => snippet(anchor, ...args)));
 	}, EFFECT_TRANSPARENT);
-
-	if (hydrating) {
-		anchor = hydrate_node;
-	}
 }
 
 /**
@@ -60,7 +45,7 @@ export function snippet(node, get_snippet, ...args) {
  * @param {(node: TemplateNode, ...args: any[]) => void} fn
  */
 export function wrap_snippet(component, fn) {
-	return (/** @type {TemplateNode} */ node, /** @type {any[]} */ ...args) => {
+	const snippet = (/** @type {TemplateNode} */ node, /** @type {any[]} */ ...args) => {
 		var previous_component_function = dev_current_component_function;
 		set_dev_current_component_function(component);
 
@@ -70,6 +55,10 @@ export function wrap_snippet(component, fn) {
 			set_dev_current_component_function(previous_component_function);
 		}
 	};
+
+	prevent_snippet_stringification(snippet);
+
+	return snippet;
 }
 
 /**
@@ -97,7 +86,7 @@ export function createRawSnippet(fn) {
 			var fragment = create_fragment_from_html(html);
 			element = /** @type {Element} */ (get_first_child(fragment));
 
-			if (DEV && (get_next_sibling(element) !== null || element.nodeType !== 1)) {
+			if (DEV && (get_next_sibling(element) !== null || element.nodeType !== ELEMENT_NODE)) {
 				w.invalid_raw_snippet_render();
 			}
 
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-component.js b/packages/svelte/src/internal/client/dom/blocks/svelte-component.js
index 72157eaa40..0e9434386c 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,17 @@
-/** @import { TemplateNode, Dom, Effect } from '#client' */
-import { EFFECT_TRANSPARENT } from '../../constants.js';
-import { block, branch, pause_effect } from '../../reactivity/effects.js';
-import { hydrate_next, hydrate_node, hydrating } from '../hydration.js';
+/** @import { TemplateNode, Dom } from '#client' */
+import { EFFECT_TRANSPARENT } from '#client/constants';
+import { block } from '../../reactivity/effects.js';
+import {
+	hydrate_next,
+	hydrate_node,
+	hydrating,
+	read_hydration_instruction,
+	set_hydrate_node,
+	set_hydrating,
+	skip_nodes
+} from '../hydration.js';
+import { BranchManager } from './branches.js';
+import { HYDRATION_START, HYDRATION_START_ELSE } from '../../../../constants.js';
 
 /**
  * @template P
@@ -12,32 +22,40 @@ import { hydrate_next, hydrate_node, hydrating } from '../hydration.js';
  * @returns {void}
  */
 export function component(node, get_component, render_fn) {
+	/** @type {TemplateNode | undefined} */
+	var hydration_start_node;
+
 	if (hydrating) {
+		hydration_start_node = hydrate_node;
 		hydrate_next();
 	}
 
-	var anchor = node;
+	var branches = new BranchManager(node);
 
-	/** @type {C} */
-	var component;
+	block(() => {
+		var component = get_component() ?? null;
 
-	/** @type {Effect | null} */
-	var effect;
+		if (hydrating) {
+			var data = read_hydration_instruction(/** @type {TemplateNode} */ (hydration_start_node));
 
-	block(() => {
-		if (component === (component = get_component())) return;
+			var server_had_component = data === HYDRATION_START;
+			var client_has_component = component !== null;
 
-		if (effect) {
-			pause_effect(effect);
-			effect = null;
-		}
+			if (server_had_component !== client_has_component) {
+				// Hydration mismatch: skip the server-rendered nodes and render fresh
+				var anchor = skip_nodes();
+
+				set_hydrate_node(anchor);
+				branches.anchor = anchor;
 
-		if (component) {
-			effect = branch(() => render_fn(anchor, component));
+				set_hydrating(false);
+				branches.ensure(component, component && ((target) => render_fn(target, component)));
+				set_hydrating(true);
+
+				return;
+			}
 		}
-	}, EFFECT_TRANSPARENT);
 
-	if (hydrating) {
-		anchor = hydrate_node;
-	}
+		branches.ensure(component, component && ((target) => render_fn(target, component)));
+	}, EFFECT_TRANSPARENT);
 }
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
index 35d2f223ae..84217c57e3 100644
--- a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
+++ b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
@@ -1,4 +1,4 @@
-/** @import { Effect, TemplateNode } from '#client' */
+/** @import { Effect, EffectNodes, TemplateNode } from '#client' */
 import { FILENAME, NAMESPACE_SVG } from '../../../../constants.js';
 import {
 	hydrate_next,
@@ -7,21 +7,17 @@ import {
 	set_hydrate_node,
 	set_hydrating
 } from '../hydration.js';
-import { create_text, get_first_child } from '../operations.js';
-import {
-	block,
-	branch,
-	destroy_effect,
-	pause_effect,
-	resume_effect
-} from '../../reactivity/effects.js';
+import { create_element, create_text, get_first_child } from '../operations.js';
+import { block, teardown } from '../../reactivity/effects.js';
 import { set_should_intro } from '../../render.js';
-import { current_each_item, set_current_each_item } from './each.js';
-import { component_context, active_effect } from '../../runtime.js';
+import { active_effect } from '../../runtime.js';
+import { component_context, dev_stack } from '../../context.js';
 import { DEV } from 'esm-env';
-import { EFFECT_TRANSPARENT } from '../../constants.js';
+import { EFFECT_TRANSPARENT, ELEMENT_NODE } from '#client/constants';
 import { assign_nodes } from '../template.js';
 import { is_raw_text_element } from '../../../../utils.js';
+import { BranchManager } from './branches.js';
+import { set_animation_effect_override } from '../elements/transitions.js';
 
 /**
  * @param {Comment | Element} node
@@ -41,71 +37,46 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 
 	var filename = DEV && location && component_context?.function[FILENAME];
 
-	/** @type {string | null} */
-	var tag;
-
-	/** @type {string | null} */
-	var current_tag;
-
 	/** @type {null | Element} */
 	var element = null;
 
-	if (hydrating && hydrate_node.nodeType === 1) {
+	if (hydrating && hydrate_node.nodeType === ELEMENT_NODE) {
 		element = /** @type {Element} */ (hydrate_node);
 		hydrate_next();
 	}
 
 	var anchor = /** @type {TemplateNode} */ (hydrating ? hydrate_node : node);
 
-	/** @type {Effect | null} */
-	var effect;
-
 	/**
-	 * The keyed `{#each ...}` item block, if any, that this element is inside.
 	 * We track this so we can set it when changing the element, allowing any
 	 * `animate:` directive to bind itself to the correct block
 	 */
-	var each_item_block = current_each_item;
+	var parent_effect = /** @type {Effect} */ (active_effect);
+
+	var branches = new BranchManager(anchor, false);
 
 	block(() => {
 		const next_tag = get_tag() || null;
-		var ns = get_namespace ? get_namespace() : is_svg || next_tag === 'svg' ? NAMESPACE_SVG : null;
-
-		// Assumption: Noone changes the namespace but not the tag (what would that even mean?)
-		if (next_tag === tag) return;
-
-		// See explanation of `each_item_block` above
-		var previous_each_item = current_each_item;
-		set_current_each_item(each_item_block);
-
-		if (effect) {
-			if (next_tag === null) {
-				// start outro
-				pause_effect(effect, () => {
-					effect = null;
-					current_tag = null;
-				});
-			} else if (next_tag === current_tag) {
-				// same tag as is currently rendered — abort outro
-				resume_effect(effect);
-			} else {
-				// tag is changing — destroy immediately, render contents without intro transitions
-				destroy_effect(effect);
-				set_should_intro(false);
-			}
+		var ns = get_namespace
+			? get_namespace()
+			: is_svg || next_tag === 'svg'
+				? NAMESPACE_SVG
+				: undefined;
+
+		if (next_tag === null) {
+			branches.ensure(null, null);
+			set_should_intro(true);
+			return;
 		}
 
-		if (next_tag && next_tag !== current_tag) {
-			effect = branch(() => {
-				element = hydrating
-					? /** @type {Element} */ (element)
-					: ns
-						? document.createElementNS(ns, next_tag)
-						: document.createElement(next_tag);
+		branches.ensure(next_tag, (anchor) => {
+			if (next_tag) {
+				element = hydrating ? /** @type {Element} */ (element) : create_element(next_tag, ns);
 
 				if (DEV && location) {
 					// @ts-expect-error
 					element.__svelte_meta = {
+						parent: dev_stack,
 						loc: {
 							file: filename,
 							line: location[0],
@@ -117,16 +88,18 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 				assign_nodes(element, element);
 
 				if (render_fn) {
+					var tmp_comment = null;
+
 					if (hydrating && is_raw_text_element(next_tag)) {
-						// prevent hydration glitches
-						element.append(document.createComment(''));
+						// prevent hydration glitches (code just below expects an anchor)
+						element.append((tmp_comment = document.createComment('')));
 					}
 
 					// If hydrating, use the existing ssr comment as the anchor so that the
 					// inner open and close methods can pick up the existing nodes correctly
-					var child_anchor = /** @type {TemplateNode} */ (
-						hydrating ? get_first_child(element) : element.appendChild(create_text())
-					);
+					var child_anchor = hydrating
+						? get_first_child(element)
+						: element.appendChild(create_text());
 
 					if (hydrating) {
 						if (child_anchor === null) {
@@ -136,27 +109,44 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 						}
 					}
 
+					set_animation_effect_override(parent_effect);
+
 					// `child_anchor` is undefined if this is a void element, but we still
 					// need to call `render_fn` in order to run actions etc. If the element
 					// contains children, it's a user error (which is warned on elsewhere)
 					// and the DOM will be silently discarded
 					render_fn(element, child_anchor);
+					tmp_comment?.remove();
+					set_animation_effect_override(null);
 				}
 
 				// we do this after calling `render_fn` so that child effects don't override `nodes.end`
-				/** @type {Effect} */ (active_effect).nodes_end = element;
+				/** @type {Effect & { nodes: EffectNodes }} */ (active_effect).nodes.end = element;
 
 				anchor.before(element);
-			});
-		}
+			}
+
+			if (hydrating) {
+				set_hydrate_node(anchor);
+			}
+		});
 
-		tag = next_tag;
-		if (tag) current_tag = tag;
+		// revert to the default state after the effect has been created
 		set_should_intro(true);
 
-		set_current_each_item(previous_each_item);
+		return () => {
+			if (next_tag) {
+				// if we're in this callback because we're re-running the effect,
+				// disable intros (unless no element is currently displayed)
+				set_should_intro(false);
+			}
+		};
 	}, EFFECT_TRANSPARENT);
 
+	teardown(() => {
+		set_should_intro(true);
+	});
+
 	if (was_hydrating) {
 		set_hydrating(true);
 		set_hydrate_node(anchor);
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-head.js b/packages/svelte/src/internal/client/dom/blocks/svelte-head.js
index e3e3eacad7..5721f7b056 100644
--- a/packages/svelte/src/internal/client/dom/blocks/svelte-head.js
+++ b/packages/svelte/src/internal/client/dom/blocks/svelte-head.js
@@ -1,24 +1,15 @@
 /** @import { TemplateNode } from '#client' */
 import { hydrate_node, hydrating, set_hydrate_node, set_hydrating } from '../hydration.js';
 import { create_text, get_first_child, get_next_sibling } from '../operations.js';
-import { block } from '../../reactivity/effects.js';
-import { HEAD_EFFECT } from '../../constants.js';
-import { HYDRATION_START } from '../../../../constants.js';
-
-/**
- * @type {Node | undefined}
- */
-let head_anchor;
-
-export function reset_head_anchor() {
-	head_anchor = undefined;
-}
+import { block, branch } from '../../reactivity/effects.js';
+import { COMMENT_NODE, HEAD_EFFECT } from '#client/constants';
 
 /**
+ * @param {string} hash
  * @param {(anchor: Node) => void} render_fn
  * @returns {void}
  */
-export function head(render_fn) {
+export function head(hash, render_fn) {
 	// The head function may be called after the first hydration pass and ssr comment nodes may still be present,
 	// therefore we need to skip that when we detect that we're not in hydration mode.
 	let previous_hydrate_node = null;
@@ -30,16 +21,15 @@ export function head(render_fn) {
 	if (hydrating) {
 		previous_hydrate_node = hydrate_node;
 
-		// There might be multiple head blocks in our app, so we need to account for each one needing independent hydration.
-		if (head_anchor === undefined) {
-			head_anchor = /** @type {TemplateNode} */ (get_first_child(document.head));
-		}
+		var head_anchor = get_first_child(document.head);
 
+		// There might be multiple head blocks in our app, and they could have been
+		// rendered in an arbitrary order — find one corresponding to this component
 		while (
 			head_anchor !== null &&
-			(head_anchor.nodeType !== 8 || /** @type {Comment} */ (head_anchor).data !== HYDRATION_START)
+			(head_anchor.nodeType !== COMMENT_NODE || /** @type {Comment} */ (head_anchor).data !== hash)
 		) {
-			head_anchor = /** @type {TemplateNode} */ (get_next_sibling(head_anchor));
+			head_anchor = get_next_sibling(head_anchor);
 		}
 
 		// If we can't find an opening hydration marker, skip hydration (this can happen
@@ -47,7 +37,10 @@ export function head(render_fn) {
 		if (head_anchor === null) {
 			set_hydrating(false);
 		} else {
-			head_anchor = set_hydrate_node(/** @type {TemplateNode} */ (get_next_sibling(head_anchor)));
+			var start = /** @type {TemplateNode} */ (get_next_sibling(head_anchor));
+			head_anchor.remove(); // in case this component is repeated
+
+			set_hydrate_node(start);
 		}
 	}
 
@@ -56,11 +49,13 @@ export function head(render_fn) {
 	}
 
 	try {
-		block(() => render_fn(anchor), HEAD_EFFECT);
+		block(() => {
+			var e = branch(() => render_fn(anchor));
+			e.f |= HEAD_EFFECT;
+		});
 	} finally {
 		if (was_hydrating) {
 			set_hydrating(true);
-			head_anchor = hydrate_node; // so that next head block starts from the correct node
 			set_hydrate_node(/** @type {TemplateNode} */ (previous_hydrate_node));
 		}
 	}
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-portal.js b/packages/svelte/src/internal/client/dom/blocks/svelte-portal.js
index 6f690aa063..1bf1d6c07b 100644
--- a/packages/svelte/src/internal/client/dom/blocks/svelte-portal.js
+++ b/packages/svelte/src/internal/client/dom/blocks/svelte-portal.js
@@ -1,7 +1,7 @@
-/** @import { TemplateNode } from '#client' */
+/** @import { EffectNodes, TemplateNode } from '#client' */
 import { HYDRATION_END, HYDRATION_START, HYDRATION_START_ELSE } from '../../../../constants.js';
 import { PortalKey } from '../../../shared/svelte-portal.js';
-import { block, remove_nodes, render_effect } from '../../reactivity/effects.js';
+import { block, remove_effect_dom, render_effect } from '../../reactivity/effects.js';
 import { hydrate_node, hydrating, set_hydrate_node, set_hydrating } from '../hydration.js';
 import { get_next_sibling } from '../operations.js';
 
@@ -55,10 +55,12 @@ export function portal(target, content) {
 	}
 
 	const portal = portals.get(target);
-	if (!is_dom_node && !portal)
+	if (!is_dom_node && !portal) {
+		// TODO can we lift this restriction?
 		throw new Error(
 			'TODO error code: No portal found for given target. Make sure portal target exists before referencing it'
 		);
+	}
 
 	let previous_hydrating = false;
 	let previous_hydrate_node = null;
@@ -76,6 +78,7 @@ export function portal(target, content) {
 		anchor = portal.anchor;
 	}
 
+	// TODO handle multiple targeting the same portal
 	if (hydrating) {
 		previous_hydrating = true;
 		if (is_dom_node) {
@@ -94,7 +97,8 @@ export function portal(target, content) {
 			// child effects (like this one) don't need to traverse the nodes anymore because they
 			// were already removed by the parent. That's not true in this case because the nodes
 			// are somewhere else, so remove them "manually" here.
-			remove_nodes(effect);
+			const nodes = /** @type {EffectNodes} */ (effect.nodes);
+			remove_effect_dom(nodes.start, /** @type {TemplateNode} */ (nodes.end));
 		};
 	});
 
diff --git a/packages/svelte/src/internal/client/dom/css.js b/packages/svelte/src/internal/client/dom/css.js
index 52be36aa1f..74bf2d49f9 100644
--- a/packages/svelte/src/internal/client/dom/css.js
+++ b/packages/svelte/src/internal/client/dom/css.js
@@ -1,6 +1,7 @@
 import { DEV } from 'esm-env';
-import { queue_micro_task } from './task.js';
 import { register_style } from '../dev/css.js';
+import { effect } from '../reactivity/effects.js';
+import { create_element } from './operations.js';
 
 /**
  * @param {Node} anchor
@@ -8,7 +9,7 @@ import { register_style } from '../dev/css.js';
  */
 export function append_styles(anchor, css) {
 	// Use `queue_micro_task` to ensure `anchor` is in the DOM, otherwise getRootNode() will yield wrong results
-	queue_micro_task(() => {
+	effect(() => {
 		var root = anchor.getRootNode();
 
 		var target = /** @type {ShadowRoot} */ (root).host
@@ -18,7 +19,7 @@ export function append_styles(anchor, css) {
 		// Always querying the DOM is roughly the same perf as additionally checking for presence in a map first assuming
 		// that you'll get cache hits half of the time, so we just always query the dom for simplicity and code savings.
 		if (!target.querySelector('#' + css.hash)) {
-			const style = document.createElement('style');
+			const style = create_element('style');
 			style.id = css.hash;
 			style.textContent = css.code;
 
diff --git a/packages/svelte/src/internal/client/dom/elements/attachments.js b/packages/svelte/src/internal/client/dom/elements/attachments.js
new file mode 100644
index 0000000000..8a3c313ae7
--- /dev/null
+++ b/packages/svelte/src/internal/client/dom/elements/attachments.js
@@ -0,0 +1,33 @@
+/** @import { Effect } from '#client' */
+import { branch, effect, destroy_effect, managed } from '../../reactivity/effects.js';
+
+// TODO in 6.0 or 7.0, when we remove legacy mode, we can simplify this by
+// getting rid of the block/branch stuff and just letting the effect rip.
+// see https://github.com/sveltejs/svelte/pull/15962
+
+/**
+ * @param {Element} node
+ * @param {() => (node: Element) => void} get_fn
+ */
+export function attach(node, get_fn) {
+	/** @type {false | undefined | ((node: Element) => void)} */
+	var fn = undefined;
+
+	/** @type {Effect | null} */
+	var e;
+
+	managed(() => {
+		if (fn !== (fn = get_fn())) {
+			if (e) {
+				destroy_effect(e);
+				e = null;
+			}
+
+			if (fn) {
+				e = branch(() => {
+					effect(() => /** @type {(node: Element) => void} */ (fn)(node));
+				});
+			}
+		}
+	});
+}
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index 9c62d684c1..589685b5f2 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -1,18 +1,45 @@
+/** @import { Blocker, Effect } from '#client' */
 import { DEV } from 'esm-env';
-import { hydrating } from '../hydration.js';
+import { hydrating, set_hydrating } from '../hydration.js';
 import { get_descriptors, get_prototype_of } from '../../../shared/utils.js';
-import { create_event, delegate } from './events.js';
+import { create_event, delegate, delegated, event, event_symbol } from './events.js';
 import { add_form_reset_listener, autofocus } from './misc.js';
 import * as w from '../../warnings.js';
-import { LOADING_ATTR_SYMBOL } from '../../constants.js';
-import { queue_idle_task } from '../task.js';
-import { is_capture_event, is_delegated, normalize_attribute } from '../../../../utils.js';
+import {
+	ATTRIBUTES_CACHE,
+	FORM_RESET_HANDLER,
+	IS_XHTML,
+	LOADING_ATTR_SYMBOL
+} from '#client/constants';
+import { queue_micro_task } from '../task.js';
+import { is_capture_event, can_delegate_event, normalize_attribute } from '../../../../utils.js';
 import {
 	active_effect,
 	active_reaction,
+	get,
 	set_active_effect,
 	set_active_reaction
 } from '../../runtime.js';
+import { attach } from './attachments.js';
+import { clsx } from '../../../shared/attributes.js';
+import { set_class } from './class.js';
+import { set_style } from './style.js';
+import { ATTACHMENT_KEY, NAMESPACE_HTML, UNINITIALIZED } from '../../../../constants.js';
+import { branch, destroy_effect, effect, managed } from '../../reactivity/effects.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');
+
+const IS_CUSTOM_ELEMENT = Symbol('is custom element');
+const IS_HTML = Symbol('is html');
+
+const LINK_TAG = IS_XHTML ? 'link' : 'LINK';
+const INPUT_TAG = IS_XHTML ? 'input' : 'INPUT';
+const OPTION_TAG = IS_XHTML ? 'option' : 'OPTION';
+const SELECT_TAG = IS_XHTML ? 'select' : 'SELECT';
+const PROGRESS_TAG = IS_XHTML ? 'progress' : 'PROGRESS';
 
 /**
  * The value/checked attribute in the template actually corresponds to the defaultValue property, so we need
@@ -47,9 +74,8 @@ export function remove_input_defaults(input) {
 		}
 	};
 
-	// @ts-expect-error
-	input.__on_r = remove_defaults;
-	queue_idle_task(remove_defaults);
+	/** @type {any} */ (input)[FORM_RESET_HANDLER] = remove_defaults;
+	queue_micro_task(remove_defaults);
 	add_form_reset_listener();
 }
 
@@ -58,8 +84,7 @@ export function remove_input_defaults(input) {
  * @param {any} value
  */
 export function set_value(element, value) {
-	// @ts-expect-error
-	var attributes = (element.__attributes ??= {});
+	var attributes = get_attributes(element);
 
 	if (
 		attributes.value ===
@@ -67,14 +92,14 @@ export function set_value(element, value) {
 				// treat null and undefined the same for the initial value
 				value ?? undefined) ||
 		// @ts-expect-error
-		// `progress` elements always need their value set when its `0`
-		(element.value === value && (value !== 0 || element.nodeName !== 'PROGRESS'))
+		// `progress` elements always need their value set when it's `0`
+		(element.value === value && (value !== 0 || element.nodeName !== PROGRESS_TAG))
 	) {
 		return;
 	}
 
 	// @ts-expect-error
-	element.value = value;
+	element.value = value ?? '';
 }
 
 /**
@@ -82,8 +107,7 @@ export function set_value(element, value) {
  * @param {boolean} checked
  */
 export function set_checked(element, checked) {
-	// @ts-expect-error
-	var attributes = (element.__attributes ??= {});
+	var attributes = get_attributes(element);
 
 	if (
 		attributes.checked ===
@@ -146,8 +170,7 @@ export function set_default_value(element, value) {
  * @param {boolean} [skip_warning]
  */
 export function set_attribute(element, attribute, value, skip_warning) {
-	// @ts-expect-error
-	var attributes = (element.__attributes ??= {});
+	var attributes = get_attributes(element);
 
 	if (hydrating) {
 		attributes[attribute] = element.getAttribute(attribute);
@@ -155,7 +178,7 @@ export function set_attribute(element, attribute, value, skip_warning) {
 		if (
 			attribute === 'src' ||
 			attribute === 'srcset' ||
-			(attribute === 'href' && element.nodeName === 'LINK')
+			(attribute === 'href' && element.nodeName === LINK_TAG)
 		) {
 			if (!skip_warning) {
 				check_src_in_dev_hydration(element, attribute, value ?? '');
@@ -171,11 +194,6 @@ export function set_attribute(element, attribute, value, skip_warning) {
 
 	if (attributes[attribute] === (attributes[attribute] = value)) return;
 
-	if (attribute === 'style' && '__styles' in element) {
-		// reset styles to force style: directive to update
-		element.__styles = {};
-	}
-
 	if (attribute === 'loading') {
 		// @ts-expect-error
 		element[LOADING_ATTR_SYMBOL] = value;
@@ -213,16 +231,29 @@ export function set_custom_element_data(node, prop, value) {
 	var previous_reaction = active_reaction;
 	var previous_effect = active_effect;
 
+	// If we're hydrating but the custom element is from Svelte, and it already scaffolded,
+	// then it might run block logic in hydration mode, which we have to prevent.
+	let was_hydrating = hydrating;
+	if (hydrating) {
+		set_hydrating(false);
+	}
+
 	set_active_reaction(null);
 	set_active_effect(null);
+
 	try {
 		if (
+			// `style` should use `set_attribute` rather than the setter
+			prop !== 'style' &&
 			// Don't compute setters for custom elements while they aren't registered yet,
 			// because during their upgrade/instantiation they might add more setters.
 			// Instead, fall back to a simple "an object, then set as property" heuristic.
-			setters_cache.has(node.nodeName) || customElements.get(node.tagName.toLowerCase())
+			(setters_cache.has(node.getAttribute('is') || node.nodeName) ||
+			// customElements may not be available in browser extension contexts
+			!customElements ||
+			customElements.get(node.getAttribute('is') || node.nodeName.toLowerCase())
 				? get_setters(node).includes(prop)
-				: value && typeof value === 'object'
+				: value && typeof value === 'object')
 		) {
 			// @ts-expect-error
 			node[prop] = value;
@@ -235,31 +266,53 @@ export function set_custom_element_data(node, prop, value) {
 	} finally {
 		set_active_reaction(previous_reaction);
 		set_active_effect(previous_effect);
+		if (was_hydrating) {
+			set_hydrating(true);
+		}
 	}
 }
 
 /**
  * Spreads attributes onto a DOM element, taking into account the currently set attributes
  * @param {Element & ElementCSSInlineStyle} element
- * @param {Record<string, any> | undefined} prev
- * @param {Record<string, any>} next New attributes - this function mutates this object
+ * @param {Record<string | symbol, any> | undefined} prev
+ * @param {Record<string | symbol, any>} next New attributes - this function mutates this object
  * @param {string} [css_hash]
- * @param {boolean} [preserve_attribute_case]
- * @param {boolean} [is_custom_element]
+ * @param {boolean} [should_remove_defaults]
  * @param {boolean} [skip_warning]
  * @returns {Record<string, any>}
  */
-export function set_attributes(
+function set_attributes(
 	element,
 	prev,
 	next,
 	css_hash,
-	preserve_attribute_case = false,
-	is_custom_element = false,
+	should_remove_defaults = false,
 	skip_warning = false
 ) {
+	if (hydrating && should_remove_defaults && element.nodeName === INPUT_TAG) {
+		var input = /** @type {HTMLInputElement} */ (element);
+		var attribute = input.type === 'checkbox' ? 'defaultChecked' : 'defaultValue';
+
+		if (!(attribute in next)) {
+			remove_input_defaults(input);
+		}
+	}
+
+	var attributes = get_attributes(element);
+
+	var is_custom_element = attributes[IS_CUSTOM_ELEMENT];
+	var preserve_attribute_case = !attributes[IS_HTML];
+
+	// If we're hydrating but the custom element is from Svelte, and it already scaffolded,
+	// then it might run block logic in hydration mode, which we have to prevent.
+	let is_hydrating_custom_element = hydrating && is_custom_element;
+	if (is_hydrating_custom_element) {
+		set_hydrating(false);
+	}
+
 	var current = prev || {};
-	var is_option_element = element.tagName === 'OPTION';
+	var is_option_element = element.nodeName === OPTION_TAG;
 
 	for (var key in prev) {
 		if (!(key in next)) {
@@ -267,14 +320,26 @@ export function set_attributes(
 		}
 	}
 
-	if (css_hash !== undefined) {
-		next.class = next.class ? next.class + ' ' + css_hash : css_hash;
+	if (next.class) {
+		next.class = clsx(next.class);
+	} else if (css_hash || next[CLASS]) {
+		next.class = null; /* force call to set_class() */
+	}
+
+	if (next[STYLE]) {
+		next.style ??= null; /* force call to set_style() */
 	}
 
 	var setters = get_setters(element);
 
-	// @ts-expect-error
-	var attributes = /** @type {Record<string, unknown>} **/ (element.__attributes ??= {});
+	if (element.nodeName === INPUT_TAG && 'type' in next && ('value' in next || '__value' in next)) {
+		var type = next.type;
+
+		if (type !== current.type || (type === undefined && element.hasAttribute('type'))) {
+			current.type = type;
+			set_attribute(element, 'type', type, skip_warning);
+		}
+	}
 
 	// since key is captured we use const
 	for (const key in next) {
@@ -300,8 +365,27 @@ export function set_attributes(
 			continue;
 		}
 
+		if (key === 'class') {
+			var is_html = element.namespaceURI === 'http://www.w3.org/1999/xhtml';
+			set_class(element, is_html, value, css_hash, prev?.[CLASS], next[CLASS]);
+			current[key] = value;
+			current[CLASS] = next[CLASS];
+			continue;
+		}
+
+		if (key === 'style') {
+			set_style(element, value, prev?.[STYLE], next[STYLE]);
+			current[key] = value;
+			current[STYLE] = next[STYLE];
+			continue;
+		}
+
 		var prev_value = current[key];
-		if (value === prev_value) continue;
+
+		// Skip if value is unchanged, unless it's `undefined` and the element still has the attribute
+		if (value === prev_value && !(value === undefined && element.hasAttribute(key))) {
+			continue;
+		}
 
 		current[key] = value;
 
@@ -313,14 +397,14 @@ export function set_attributes(
 			const opts = {};
 			const event_handle_key = '$$' + key;
 			let event_name = key.slice(2);
-			var delegated = is_delegated(event_name);
+			var is_delegated = can_delegate_event(event_name);
 
 			if (is_capture_event(event_name)) {
 				event_name = event_name.slice(0, -7);
 				opts.capture = true;
 			}
 
-			if (!delegated && prev_value) {
+			if (!is_delegated && prev_value) {
 				// Listening to same event but different handler -> our handle function below takes care of this
 				// If we were to remove and add listeners in this case, it could happen that the event is "swallowed"
 				// (the browser seems to not know yet that a new one exists now) and doesn't reach the handler
@@ -331,33 +415,29 @@ export function set_attributes(
 				current[event_handle_key] = null;
 			}
 
-			if (value != null) {
-				if (!delegated) {
-					/**
-					 * @this {any}
-					 * @param {Event} evt
-					 */
-					function handle(evt) {
-						current[key].call(this, evt);
-					}
-
-					current[event_handle_key] = create_event(event_name, element, handle, opts);
-				} else {
-					// @ts-ignore
-					element[`__${event_name}`] = value;
-					delegate([event_name]);
+			if (is_delegated) {
+				delegated(event_name, element, value);
+				delegate([event_name]);
+			} else if (value != null) {
+				/**
+				 * @this {any}
+				 * @param {Event} evt
+				 */
+				function handle(evt) {
+					current[key].call(this, evt);
 				}
-			} else if (delegated) {
-				// @ts-ignore
-				element[`__${event_name}`] = undefined;
+
+				current[event_handle_key] = create_event(event_name, element, handle, opts);
 			}
-		} else if (key === 'style' && value != null) {
-			element.style.cssText = value + '';
+		} else if (key === 'style') {
+			// avoid using the setter
+			set_attribute(element, key, value);
 		} else if (key === 'autofocus') {
 			autofocus(/** @type {HTMLElement} */ (element), Boolean(value));
-		} else if (key === '__value' || (key === 'value' && value != null)) {
-			// @ts-ignore
-			element.value = element[key] = element.__value = value;
+		} else if (!is_custom_element && (key === '__value' || (key === 'value' && value != null))) {
+			// @ts-ignore We're not running this for custom elements because __value is actually
+			// how Lit stores the current value on the element, and messing with that would break things.
+			element.value = element.__value = value;
 		} else if (key === 'selected' && is_option_element) {
 			set_selected(/** @type {HTMLOptionElement} */ (element), value);
 		} else {
@@ -374,15 +454,18 @@ export function set_attributes(
 				if (name === 'value' || name === 'checked') {
 					// removing value/checked also removes defaultValue/defaultChecked — preserve
 					let input = /** @type {HTMLInputElement} */ (element);
-
+					const use_default = prev === undefined;
 					if (name === 'value') {
-						let prev = input.defaultValue;
+						let previous = input.defaultValue;
 						input.removeAttribute(name);
-						input.defaultValue = prev;
+						input.defaultValue = previous;
+						// @ts-ignore
+						input.value = input.__value = use_default ? previous : null;
 					} else {
-						let prev = input.defaultChecked;
+						let previous = input.defaultChecked;
 						input.removeAttribute(name);
-						input.defaultChecked = prev;
+						input.defaultChecked = previous;
+						input.checked = use_default ? previous : false;
 					}
 				} else {
 					element.removeAttribute(key);
@@ -393,43 +476,138 @@ export function set_attributes(
 			) {
 				// @ts-ignore
 				element[name] = value;
+				// remove it from attributes's cache
+				if (name in attributes) attributes[name] = UNINITIALIZED;
 			} else if (typeof value !== 'function') {
-				if (hydrating && (name === 'src' || name === 'href' || name === 'srcset')) {
-					if (!skip_warning) check_src_in_dev_hydration(element, name, value ?? '');
-				} else {
-					set_attribute(element, name, value);
-				}
+				set_attribute(element, name, value, skip_warning);
 			}
 		}
-		if (key === 'style' && '__styles' in element) {
-			// reset styles to force style: directive to update
-			element.__styles = {};
-		}
+	}
+
+	if (is_hydrating_custom_element) {
+		set_hydrating(true);
 	}
 
 	return current;
 }
 
+/**
+ * @param {Element & ElementCSSInlineStyle} element
+ * @param {(...expressions: any) => Record<string | symbol, any>} fn
+ * @param {Array<() => any>} sync
+ * @param {Array<() => Promise<any>>} async
+ * @param {Blocker[]} blockers
+ * @param {string} [css_hash]
+ * @param {boolean} [should_remove_defaults]
+ * @param {boolean} [skip_warning]
+ */
+export function attribute_effect(
+	element,
+	fn,
+	sync = [],
+	async = [],
+	blockers = [],
+	css_hash,
+	should_remove_defaults = false,
+	skip_warning = false
+) {
+	flatten(blockers, sync, async, (values) => {
+		/** @type {Record<string | symbol, any> | undefined} */
+		var prev = undefined;
+
+		/** @type {Record<symbol, Effect>} */
+		var effects = {};
+
+		var is_select = element.nodeName === SELECT_TAG;
+		var inited = false;
+
+		managed(() => {
+			var next = fn(...values.map(get));
+			/** @type {Record<string | symbol, any>} */
+			var current = set_attributes(
+				element,
+				prev,
+				next,
+				css_hash,
+				should_remove_defaults,
+				skip_warning
+			);
+
+			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(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));
+				}
+
+				current[symbol] = n;
+			}
+
+			prev = current;
+		});
+
+		if (is_select) {
+			var select = /** @type {HTMLSelectElement} */ (element);
+
+			effect(() => {
+				select_option(select, /** @type {Record<string | symbol, any>} */ (prev).value, true);
+				init_select(select);
+			});
+		}
+
+		inited = true;
+	});
+}
+
+/**
+ *
+ * @param {Element} element
+ */
+function get_attributes(element) {
+	return /** @type {Record<string | symbol, unknown>} **/ (
+		/** @type {any} */ (element)[ATTRIBUTES_CACHE] ??= {
+			[IS_CUSTOM_ELEMENT]: element.nodeName.includes('-'),
+			[IS_HTML]: element.namespaceURI === NAMESPACE_HTML
+		}
+	);
+}
+
 /** @type {Map<string, string[]>} */
 var setters_cache = new Map();
 
 /** @param {Element} element */
 function get_setters(element) {
-	var setters = setters_cache.get(element.nodeName);
+	var cache_key = element.getAttribute('is') || element.nodeName;
+	var setters = setters_cache.get(cache_key);
 	if (setters) return setters;
-	setters_cache.set(element.nodeName, (setters = []));
+	setters_cache.set(cache_key, (setters = []));
 
 	var descriptors;
 	var proto = element; // In the case of custom elements there might be setters on the instance
 	var element_proto = Element.prototype;
 
-	// Stop at Element, from there on there's only unnecessary setters we're not interested in
-	// Do not use contructor.name here as that's unreliable in some browser environments
+	// Stop at Element, from there on there's only unnecessary (and dangerous, like innerHTML) setters we're not interested in
+	// Do not use constructor.name here as that's unreliable in some browser environments
 	while (element_proto !== proto) {
 		descriptors = get_descriptors(proto);
 
 		for (var key in descriptors) {
-			if (descriptors[key].set) {
+			if (
+				descriptors[key].set &&
+				// better safe than sorry, we don't want spread attributes to mess with HTML content
+				key !== 'innerHTML' &&
+				key !== 'textContent' &&
+				key !== 'innerText'
+			) {
 				setters.push(key);
 			}
 		}
@@ -495,28 +673,3 @@ function srcset_url_equal(element, srcset) {
 		)
 	);
 }
-
-/**
- * @param {HTMLImageElement} element
- * @returns {void}
- */
-export function handle_lazy_img(element) {
-	// If we're using an image that has a lazy loading attribute, we need to apply
-	// the loading and src after the img element has been appended to the document.
-	// Otherwise the lazy behaviour will not work due to our cloneNode heuristic for
-	// templates.
-	if (!hydrating && element.loading === 'lazy') {
-		var src = element.src;
-		// @ts-expect-error
-		element[LOADING_ATTR_SYMBOL] = null;
-		element.loading = 'eager';
-		element.removeAttribute('src');
-		requestAnimationFrame(() => {
-			// @ts-expect-error
-			if (element[LOADING_ATTR_SYMBOL] !== 'eager') {
-				element.loading = 'lazy';
-			}
-			element.src = src;
-		});
-	}
-}
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 ec123d3968..dadcac369c 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';
@@ -5,7 +6,9 @@ import * as e from '../../../errors.js';
 import { is } from '../../../proxy.js';
 import { queue_micro_task } from '../../task.js';
 import { hydrating } from '../../hydration.js';
-import { is_runes, untrack } from '../../../runtime.js';
+import { tick, untrack } from '../../../runtime.js';
+import { current_batch, previous_batch } from '../../../reactivity/batch.js';
+import { async_mode_flag } from '../../../../flags/index.js';
 
 /**
  * @param {HTMLInputElement} input
@@ -14,9 +17,9 @@ import { is_runes, untrack } from '../../../runtime.js';
  * @returns {void}
  */
 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) => {
+	listen_to_event_and_reset_event(input, 'input', async (is_reset) => {
 		if (DEV && input.type === 'checkbox') {
 			// TODO should this happen in prod too?
 			e.bind_invalid_checkbox_value();
@@ -27,19 +30,35 @@ export function bind_value(input, get, set = get) {
 		value = is_numberlike_input(input) ? to_number(value) : value;
 		set(value);
 
-		// 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())) {
+		if (current_batch !== null) {
+			batches.add(current_batch);
+		}
+
+		// Because `{#each ...}` blocks work by updating sources inside the flush,
+		// we need to wait a tick before checking to see if we should forcibly
+		// update the input and reset the selection state
+		await tick();
+
+		// Respect any validation in accessors
+		if (value !== (value = get())) {
 			var start = input.selectionStart;
 			var end = input.selectionEnd;
+			var length = input.value.length;
 
 			// the value is coerced on assignment
 			input.value = value ?? '';
 
 			// Restore selection
 			if (end !== null) {
-				input.selectionStart = start;
-				input.selectionEnd = Math.min(end, input.value.length);
+				var new_length = input.value.length;
+				// If cursor was at end and new input is longer, move cursor to new end
+				if (start === end && end === length && new_length > length) {
+					input.selectionStart = new_length;
+					input.selectionEnd = new_length;
+				} else {
+					input.selectionStart = start;
+					input.selectionEnd = Math.min(end, new_length);
+				}
 			}
 		}
 	});
@@ -53,6 +72,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(() => {
@@ -63,6 +86,21 @@ export function bind_value(input, get, set = get) {
 
 		var value = get();
 
+		if (input === document.activeElement) {
+			// In sync mode render effects are executed during tree traversal -> needs current_batch
+			// In async mode render effects are flushed once batch resolved, at which point current_batch is null -> needs previous_batch
+			var batch = /** @type {Batch} */ (async_mode_flag ? previous_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>
+			if (batches.has(batch)) {
+				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;
@@ -218,6 +256,7 @@ export function bind_checked(input, get, set = get) {
  * @returns {V[]}
  */
 function get_binding_group_value(group, __value, checked) {
+	/** @type {Set<V>} */
 	var value = new Set();
 
 	for (var i = 0; i < group.length; i += 1) {
@@ -259,6 +298,15 @@ export function bind_files(input, get, set = get) {
 		set(input.files);
 	});
 
+	if (
+		// If we are hydrating and the value has since changed,
+		// then use the updated value from the input instead.
+		hydrating &&
+		input.files
+	) {
+		set(input.files);
+	}
+
 	render_effect(() => {
 		input.files = get();
 	});
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/media.js b/packages/svelte/src/internal/client/dom/elements/bindings/media.js
index 444a1b3439..87da950375 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/media.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/media.js
@@ -1,4 +1,3 @@
-import { hydrating } from '../../hydration.js';
 import { render_effect, effect, teardown } from '../../../reactivity/effects.js';
 import { listen } from './shared.js';
 
@@ -52,7 +51,10 @@ export function bind_current_time(media, get, set = get) {
 		}
 	});
 
-	teardown(() => cancelAnimationFrame(raf_id));
+	teardown(() => {
+		cancelAnimationFrame(raf_id);
+		media.removeEventListener('timeupdate', callback);
+	});
 }
 
 /**
@@ -60,7 +62,23 @@ export function bind_current_time(media, get, set = get) {
  * @param {(array: Array<{ start: number; end: number }>) => void} set
  */
 export function bind_buffered(media, set) {
-	listen(media, ['loadedmetadata', 'progress'], () => set(time_ranges_to_array(media.buffered)));
+	/** @type {{ start: number; end: number; }[]} */
+	var current;
+
+	// `buffered` can update without emitting any event, so we check it on various events.
+	// By specs, `buffered` always returns a new object, so we have to compare deeply.
+	listen(media, ['loadedmetadata', 'progress', 'timeupdate', 'seeking'], () => {
+		var ranges = media.buffered;
+
+		if (
+			!current ||
+			current.length !== ranges.length ||
+			current.some((range, i) => ranges.start(i) !== range.start || ranges.end(i) !== range.end)
+		) {
+			current = time_ranges_to_array(ranges);
+			set(current);
+		}
+	});
 }
 
 /**
@@ -157,8 +175,9 @@ export function bind_paused(media, get, set = get) {
 			if (paused) {
 				media.pause();
 			} else {
-				media.play().catch(() => {
+				media.play().catch((error) => {
 					set((paused = true));
+					throw error;
 				});
 			}
 		}
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/select.js b/packages/svelte/src/internal/client/dom/elements/bindings/select.js
index 32cd160de2..eb26062653 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/select.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/select.js
@@ -1,21 +1,39 @@
-import { effect } from '../../../reactivity/effects.js';
+import { effect, teardown } from '../../../reactivity/effects.js';
 import { listen_to_event_and_reset_event } from './shared.js';
-import { untrack } from '../../../runtime.js';
 import { is } from '../../../proxy.js';
+import { is_array } from '../../../../shared/utils.js';
+import * as w from '../../../warnings.js';
+import { Batch, current_batch, previous_batch } from '../../../reactivity/batch.js';
+import { async_mode_flag } from '../../../../flags/index.js';
 
 /**
  * Selects the correct option(s) (depending on whether this is a multiple select)
  * @template V
  * @param {HTMLSelectElement} select
  * @param {V} value
- * @param {boolean} [mounting]
+ * @param {boolean} mounting
  */
-export function select_option(select, value, mounting) {
+export function select_option(select, value, mounting = false) {
 	if (select.multiple) {
-		return select_options(select, value);
+		// If value is null or undefined, keep the selection as is
+		if (value == undefined) {
+			return;
+		}
+
+		// If not an array, warn and keep the selection as is
+		if (!is_array(value)) {
+			return w.select_multiple_invalid_value();
+		}
+
+		// Otherwise, update the selection
+		for (var option of select.options) {
+			option.selected = value.includes(get_option_value(option));
+		}
+
+		return;
 	}
 
-	for (var option of select.options) {
+	for (option of select.options) {
 		var option_value = get_option_value(option);
 		if (is(option_value, value)) {
 			option.selected = true;
@@ -34,40 +52,29 @@ export function select_option(select, value, mounting) {
  * current selection to the dom when it changes. Such
  * changes could for example occur when options are
  * inside an `#each` block.
- * @template V
  * @param {HTMLSelectElement} select
- * @param {() => V} [get_value]
  */
-export function init_select(select, get_value) {
-	let mounting = true;
-	effect(() => {
-		if (get_value) {
-			select_option(select, untrack(get_value), mounting);
-		}
-		mounting = false;
+export function init_select(select) {
+	var observer = new MutationObserver(() => {
+		// @ts-ignore
+		select_option(select, select.__value);
+		// Deliberately don't update the potential binding value,
+		// the model should be preserved unless explicitly changed
+	});
 
-		var observer = new MutationObserver(() => {
-			// @ts-ignore
-			var value = select.__value;
-			select_option(select, value);
-			// Deliberately don't update the potential binding value,
-			// the model should be preserved unless explicitly changed
-		});
-
-		observer.observe(select, {
-			// Listen to option element changes
-			childList: true,
-			subtree: true, // because of <optgroup>
-			// Listen to option element value attribute changes
-			// (doesn't get notified of select value changes,
-			// because that property is not reflected as an attribute)
-			attributes: true,
-			attributeFilter: ['value']
-		});
-
-		return () => {
-			observer.disconnect();
-		};
+	observer.observe(select, {
+		// Listen to option element changes
+		childList: true,
+		subtree: true, // because of <optgroup>
+		// Listen to option element value attribute changes
+		// (doesn't get notified of select value changes,
+		// because that property is not reflected as an attribute)
+		attributes: true,
+		attributeFilter: ['value']
+	});
+
+	teardown(() => {
+		observer.disconnect();
 	});
 }
 
@@ -78,6 +85,7 @@ export function init_select(select, get_value) {
  * @returns {void}
  */
 export function bind_select_value(select, get, set = get) {
+	var batches = new WeakSet();
 	var mounting = true;
 
 	listen_to_event_and_reset_event(select, 'change', (is_reset) => {
@@ -97,11 +105,34 @@ export function bind_select_value(select, get, set = get) {
 		}
 
 		set(value);
+
+		// @ts-ignore
+		select.__value = value;
+
+		if (current_batch !== null) {
+			batches.add(current_batch);
+		}
 	});
 
 	// Needs to be an effect, not a render_effect, so that in case of each loops the logic runs after the each block has updated
 	effect(() => {
 		var value = get();
+
+		if (select === document.activeElement) {
+			// In sync mode render effects are executed during tree traversal -> needs current_batch
+			// In async mode render effects are flushed once batch resolved, at which point current_batch is null -> needs previous_batch
+			var batch = /** @type {Batch} */ (async_mode_flag ? previous_batch : current_batch);
+
+			// Don't update the <select> if it is focused. We can get here if, for example,
+			// an update is deferred because of async work depending on the select:
+			//
+			// <select bind:value={selected}>...</select>
+			// <p>{await find(selected)}</p>
+			if (batches.has(batch)) {
+				return;
+			}
+		}
+
 		select_option(select, value, mounting);
 
 		// Mounting and value undefined -> take selection from dom
@@ -119,22 +150,9 @@ export function bind_select_value(select, get, set = get) {
 		mounting = false;
 	});
 
-	// don't pass get_value, we already initialize it in the effect above
 	init_select(select);
 }
 
-/**
- * @template V
- * @param {HTMLSelectElement} select
- * @param {V} value
- */
-function select_options(select, value) {
-	for (var option of select.options) {
-		// @ts-ignore
-		option.selected = ~value.indexOf(get_option_value(option));
-	}
-}
-
 /** @param {HTMLOptionElement} option */
 function get_option_value(option) {
 	// __value only exists if the <option> has a value attribute
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/shared.js b/packages/svelte/src/internal/client/dom/elements/bindings/shared.js
index aa083776a5..303890adec 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/shared.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/shared.js
@@ -5,6 +5,7 @@ import {
 	set_active_effect,
 	set_active_reaction
 } from '../../../runtime.js';
+import { FORM_RESET_HANDLER } from '../../../constants.js';
 import { add_form_reset_listener } from '../misc.js';
 
 /**
@@ -58,18 +59,15 @@ export function without_reactive_context(fn) {
  */
 export function listen_to_event_and_reset_event(element, event, handler, on_reset = handler) {
 	element.addEventListener(event, () => without_reactive_context(handler));
-	// @ts-expect-error
-	const prev = element.__on_r;
+	const prev = /** @type {any} */ (element)[FORM_RESET_HANDLER];
 	if (prev) {
 		// special case for checkbox that can have multiple binds (group & checked)
-		// @ts-expect-error
-		element.__on_r = () => {
+		/** @type {any} */ (element)[FORM_RESET_HANDLER] = () => {
 			prev();
 			on_reset(true);
 		};
 	} else {
-		// @ts-expect-error
-		element.__on_r = () => on_reset(true);
+		/** @type {any} */ (element)[FORM_RESET_HANDLER] = () => on_reset(true);
 	}
 
 	add_form_reset_listener();
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/size.js b/packages/svelte/src/internal/client/dom/elements/bindings/size.js
index a76c70aab1..016ee5a547 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/size.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/size.js
@@ -2,9 +2,8 @@ import { effect, teardown } from '../../../reactivity/effects.js';
 import { untrack } from '../../../runtime.js';
 
 /**
- * Resize observer singleton.
- * One listener per element only!
- * https://groups.google.com/a/chromium.org/g/blink-dev/c/z6ienONUb5A/m/F5-VcUZtBAAJ
+ * We create one listener for all elements
+ * @see {@link https://groups.google.com/a/chromium.org/g/blink-dev/c/z6ienONUb5A/m/F5-VcUZtBAAJ Explanation}
  */
 class ResizeObserverSingleton {
 	/** */
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/this.js b/packages/svelte/src/internal/client/dom/elements/bindings/this.js
index 56b0a56e71..52f0c213d3 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/this.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/this.js
@@ -1,7 +1,8 @@
-import { STATE_SYMBOL } from '../../../constants.js';
+/** @import { ComponentContext, Effect } from '#client' */
+import { DESTROYING, STATE_SYMBOL } from '#client/constants';
+import { component_context } from '../../../context.js';
 import { effect, render_effect } from '../../../reactivity/effects.js';
-import { untrack } from '../../../runtime.js';
-import { queue_micro_task } from '../../task.js';
+import { active_effect, untrack } from '../../../runtime.js';
 
 /**
  * @param {any} bound_value
@@ -23,6 +24,9 @@ function is_bound_this(bound_value, element_or_component) {
  * @returns {void}
  */
 export function bind_this(element_or_component = {}, update, get_value, get_parts) {
+	var component_effect = /** @type {ComponentContext} */ (component_context).r;
+	var parent = /** @type {Effect} */ (active_effect);
+
 	effect(() => {
 		/** @type {unknown[]} */
 		var old_parts;
@@ -36,9 +40,9 @@ export function bind_this(element_or_component = {}, update, get_value, get_part
 			parts = get_parts?.() || [];
 
 			untrack(() => {
-				if (element_or_component !== get_value(...parts)) {
+				if (!is_bound_this(get_value(...parts), element_or_component)) {
 					update(element_or_component, ...parts);
-					// If this is an effect rerun (cause: each block context changes), then nullfiy the binding at
+					// If this is an effect rerun (cause: each block context changes), then nullify the binding at
 					// the previous position if it isn't already taken over by a different effect.
 					if (old_parts && is_bound_this(get_value(...old_parts), element_or_component)) {
 						update(null, ...old_parts);
@@ -48,12 +52,25 @@ export function bind_this(element_or_component = {}, update, get_value, get_part
 		});
 
 		return () => {
-			// We cannot use effects in the teardown phase, we we use a microtask instead.
-			queue_micro_task(() => {
+			// When the bind:this effect is destroyed, we go up the effect parent chain until we find the last parent effect that is destroyed,
+			// or the effect containing the component bind:this is in (whichever comes first). That way we can time the nulling of the binding
+			// as close to user/developer expectation as possible.
+			// TODO Svelte 6: Decide if we want to keep this logic or just always null the binding in the component effect's teardown
+			// (which would be simpler, but less intuitive in some cases, and breaks the `ondestroy-before-cleanup` test)
+			let p = parent;
+			while (p !== component_effect && p.parent !== null && p.parent.f & DESTROYING) {
+				p = p.parent;
+			}
+			const teardown = () => {
 				if (parts && is_bound_this(get_value(...parts), element_or_component)) {
 					update(null, ...parts);
 				}
-			});
+			};
+			const original_teardown = p.teardown;
+			p.teardown = () => {
+				teardown();
+				original_teardown?.();
+			};
 		};
 	});
 
diff --git a/packages/svelte/src/internal/client/dom/elements/class.js b/packages/svelte/src/internal/client/dom/elements/class.js
index 22f3da0f44..6478707095 100644
--- a/packages/svelte/src/internal/client/dom/elements/class.js
+++ b/packages/svelte/src/internal/client/dom/elements/class.js
@@ -1,116 +1,50 @@
+import { to_class } from '../../../shared/attributes.js';
+import { CLASS_CACHE } from '../../constants.js';
 import { hydrating } from '../hydration.js';
 
 /**
- * @param {SVGElement} dom
- * @param {string} value
- * @returns {void}
- */
-export function set_svg_class(dom, value) {
-	// @ts-expect-error need to add __className to patched prototype
-	var prev_class_name = dom.__className;
-	var next_class_name = to_class(value);
-
-	if (hydrating && dom.getAttribute('class') === next_class_name) {
-		// In case of hydration don't reset the class as it's already correct.
-		// @ts-expect-error need to add __className to patched prototype
-		dom.__className = next_class_name;
-	} else if (
-		prev_class_name !== next_class_name ||
-		(hydrating && dom.getAttribute('class') !== next_class_name)
-	) {
-		if (next_class_name === '') {
-			dom.removeAttribute('class');
-		} else {
-			dom.setAttribute('class', next_class_name);
-		}
-
-		// @ts-expect-error need to add __className to patched prototype
-		dom.__className = next_class_name;
-	}
-}
-
-/**
- * @param {MathMLElement} dom
- * @param {string} value
- * @returns {void}
+ * @param {Element} dom
+ * @param {boolean | number} is_html
+ * @param {string | null} value
+ * @param {string} [hash]
+ * @param {Record<string, any>} [prev_classes]
+ * @param {Record<string, any>} [next_classes]
+ * @returns {Record<string, boolean> | undefined}
  */
-export function set_mathml_class(dom, value) {
-	// @ts-expect-error need to add __className to patched prototype
-	var prev_class_name = dom.__className;
-	var next_class_name = to_class(value);
+export function set_class(dom, is_html, value, hash, prev_classes, next_classes) {
+	var prev = /** @type {any} */ (dom)[CLASS_CACHE];
 
-	if (hydrating && dom.getAttribute('class') === next_class_name) {
-		// In case of hydration don't reset the class as it's already correct.
-		// @ts-expect-error need to add __className to patched prototype
-		dom.__className = next_class_name;
-	} else if (
-		prev_class_name !== next_class_name ||
-		(hydrating && dom.getAttribute('class') !== next_class_name)
+	if (
+		hydrating ||
+		prev !== value ||
+		prev === undefined // for edge case of `class={undefined}`
 	) {
-		if (next_class_name === '') {
-			dom.removeAttribute('class');
-		} else {
-			dom.setAttribute('class', next_class_name);
+		var next_class_name = to_class(value, hash, next_classes);
+
+		if (!hydrating || next_class_name !== dom.getAttribute('class')) {
+			// Removing the attribute when the value is only an empty string causes
+			// performance issues vs simply making the className an empty string. So
+			// we should only remove the class if the value is nullish
+			// and there no hash/directives :
+			if (next_class_name == null) {
+				dom.removeAttribute('class');
+			} else if (is_html) {
+				dom.className = next_class_name;
+			} else {
+				dom.setAttribute('class', next_class_name);
+			}
 		}
 
-		// @ts-expect-error need to add __className to patched prototype
-		dom.__className = next_class_name;
-	}
-}
-
-/**
- * @param {HTMLElement} dom
- * @param {string} value
- * @returns {void}
- */
-export function set_class(dom, value) {
-	// @ts-expect-error need to add __className to patched prototype
-	var prev_class_name = dom.__className;
-	var next_class_name = to_class(value);
+		/** @type {any} */ (dom)[CLASS_CACHE] = value;
+	} else if (next_classes && prev_classes !== next_classes) {
+		for (var key in next_classes) {
+			var is_present = !!next_classes[key];
 
-	if (hydrating && dom.className === next_class_name) {
-		// In case of hydration don't reset the class as it's already correct.
-		// @ts-expect-error need to add __className to patched prototype
-		dom.__className = next_class_name;
-	} else if (
-		prev_class_name !== next_class_name ||
-		(hydrating && dom.className !== next_class_name)
-	) {
-		// Removing the attribute when the value is only an empty string causes
-		// peformance issues vs simply making the className an empty string. So
-		// we should only remove the class if the the value is nullish.
-		if (value == null) {
-			dom.removeAttribute('class');
-		} else {
-			dom.className = next_class_name;
+			if (prev_classes == null || is_present !== !!prev_classes[key]) {
+				dom.classList.toggle(key, is_present);
+			}
 		}
-
-		// @ts-expect-error need to add __className to patched prototype
-		dom.__className = next_class_name;
 	}
-}
 
-/**
- * @template V
- * @param {V} value
- * @returns {string | V}
- */
-function to_class(value) {
-	return value == null ? '' : value;
-}
-
-/**
- * @param {Element} dom
- * @param {string} class_name
- * @param {boolean} value
- * @returns {void}
- */
-export function toggle_class(dom, class_name, value) {
-	if (value) {
-		if (dom.classList.contains(class_name)) return;
-		dom.classList.add(class_name);
-	} else {
-		if (!dom.classList.contains(class_name)) return;
-		dom.classList.remove(class_name);
-	}
+	return next_classes;
 }
diff --git a/packages/svelte/src/internal/client/dom/elements/custom-element.js b/packages/svelte/src/internal/client/dom/elements/custom-element.js
index 6195b2c561..8316fa7656 100644
--- a/packages/svelte/src/internal/client/dom/elements/custom-element.js
+++ b/packages/svelte/src/internal/client/dom/elements/custom-element.js
@@ -1,7 +1,8 @@
 import { createClassComponent } from '../../../../legacy/legacy-client.js';
-import { destroy_effect, effect_root, render_effect } from '../../reactivity/effects.js';
+import { effect_root, render_effect } from '../../reactivity/effects.js';
 import { append } from '../template.js';
 import { define_property, get_descriptor, object_keys } from '../../../shared/utils.js';
+import { create_element } from '../operations.js';
 
 /**
  * @typedef {Object} CustomElementPropDefinition
@@ -35,18 +36,23 @@ if (typeof HTMLElement === 'function') {
 		$$l_u = new Map();
 		/** @type {any} The managed render effect for reflecting attributes */
 		$$me;
+		/** @type {ShadowRoot | null} The ShadowRoot of the custom element */
+		$$shadowRoot = null;
 
 		/**
 		 * @param {*} $$componentCtor
 		 * @param {*} $$slots
-		 * @param {*} use_shadow_dom
+		 * @param {ShadowRootInit | undefined} shadow_root_init
 		 */
-		constructor($$componentCtor, $$slots, use_shadow_dom) {
+		constructor($$componentCtor, $$slots, shadow_root_init) {
 			super();
 			this.$$ctor = $$componentCtor;
 			this.$$s = $$slots;
-			if (use_shadow_dom) {
-				this.attachShadow({ mode: 'open' });
+
+			if (shadow_root_init) {
+				// We need to store the reference to shadow root, because `closed` shadow root cannot be
+				// accessed with `this.shadowRoot`.
+				this.$$shadowRoot = this.attachShadow(shadow_root_init);
 			}
 		}
 
@@ -98,7 +104,7 @@ if (typeof HTMLElement === 'function') {
 					 * @param {Element} anchor
 					 */
 					return (anchor) => {
-						const slot = document.createElement('slot');
+						const slot = create_element('slot');
 						if (name !== 'default') slot.name = name;
 
 						append(anchor, slot);
@@ -136,7 +142,7 @@ if (typeof HTMLElement === 'function') {
 				}
 				this.$$c = createClassComponent({
 					component: this.$$ctor,
-					target: this.shadowRoot || this,
+					target: this.$$shadowRoot || this,
 					props: {
 						...this.$$d,
 						$$slots,
@@ -277,7 +283,7 @@ function get_custom_elements_slots(element) {
  * @param {Record<string, CustomElementPropDefinition>} props_definition  The props to observe
  * @param {string[]} slots  The slots to create
  * @param {string[]} exports  Explicitly exported values, other than props
- * @param {boolean} use_shadow_dom  Whether to use shadow DOM
+ * @param {ShadowRootInit | undefined} shadow_root_init  Options passed to shadow DOM constructor
  * @param {(ce: new () => HTMLElement) => new () => HTMLElement} [extend]
  */
 export function create_custom_element(
@@ -285,12 +291,12 @@ export function create_custom_element(
 	props_definition,
 	slots,
 	exports,
-	use_shadow_dom,
+	shadow_root_init,
 	extend
 ) {
 	let Class = class extends SvelteElement {
 		constructor() {
-			super(Component, slots, use_shadow_dom);
+			super(Component, slots, shadow_root_init);
 			this.$$p_d = props_definition;
 		}
 		static get observedAttributes() {
diff --git a/packages/svelte/src/internal/client/dom/elements/customizable-select.js b/packages/svelte/src/internal/client/dom/elements/customizable-select.js
new file mode 100644
index 0000000000..04a3cdd191
--- /dev/null
+++ b/packages/svelte/src/internal/client/dom/elements/customizable-select.js
@@ -0,0 +1,99 @@
+import { hydrating, reset, set_hydrate_node, set_hydrating } from '../hydration.js';
+import { create_comment, create_element } from '../operations.js';
+import { create_trusted_html } from '../reconciler.js';
+import { attach } from './attachments.js';
+
+/** @type {boolean | null} */
+let supported = null;
+
+/**
+ * Checks if the browser supports rich HTML content inside `<option>` elements.
+ * Modern browsers preserve HTML elements inside options, while older browsers
+ * strip them during parsing, leaving only text content.
+ * @returns {boolean}
+ */
+function is_supported() {
+	if (supported === null) {
+		var select = create_element('select');
+		select.innerHTML = create_trusted_html('<option><span>t</span></option>');
+		supported = /** @type {Element} */ (select.firstChild)?.firstChild?.nodeType === 1;
+	}
+
+	return supported;
+}
+
+/**
+ *
+ * @param {HTMLElement} element
+ * @param {(new_element: HTMLElement) => void} update_element
+ */
+export function selectedcontent(element, update_element) {
+	// if it's not supported no need for special logic
+	if (!is_supported()) return;
+
+	// we use the attach function directly just to make sure is executed when is mounted to the dom
+	attach(element, () => () => {
+		const select = element.closest('select');
+		if (!select) return;
+
+		const observer = new MutationObserver((entries) => {
+			var selected = false;
+
+			for (const entry of entries) {
+				if (entry.target === element) {
+					// the `<selectedcontent>` already changed, no need to replace it
+					return;
+				}
+
+				// if the changes doesn't include the selected `<option>` we don't need to do anything
+				selected ||= !!entry.target.parentElement?.closest('option')?.selected;
+			}
+
+			if (selected) {
+				// replace the `<selectedcontent>` with a clone
+				element.replaceWith((element = /** @type {HTMLElement} */ (element.cloneNode(true))));
+				update_element(element);
+			}
+		});
+
+		observer.observe(select, {
+			childList: true,
+			characterData: true,
+			subtree: true
+		});
+
+		return () => {
+			observer.disconnect();
+		};
+	});
+}
+
+/**
+ * Handles rich HTML content inside `<option>`, `<optgroup>`, or `<select>` elements with browser-specific branching.
+ * Modern browsers preserve HTML inside options, while older browsers strip it to text only.
+ *
+ * @param {HTMLOptionElement | HTMLOptGroupElement | HTMLSelectElement} element The element to process
+ * @param {() => void} rich_fn Function to process rich HTML content (modern browsers)
+ */
+export function customizable_select(element, rich_fn) {
+	var was_hydrating = hydrating;
+
+	if (!is_supported()) {
+		set_hydrating(false);
+		element.textContent = '';
+		element.append(create_comment(''));
+	}
+
+	try {
+		rich_fn();
+	} finally {
+		if (was_hydrating) {
+			if (hydrating) {
+				reset(element);
+			} else {
+				set_hydrating(true);
+				set_hydrate_node(element);
+			}
+		}
+	}
+}
diff --git a/packages/svelte/src/internal/client/dom/elements/events.js b/packages/svelte/src/internal/client/dom/elements/events.js
index f2038f96ad..45e042a8c6 100644
--- a/packages/svelte/src/internal/client/dom/elements/events.js
+++ b/packages/svelte/src/internal/client/dom/elements/events.js
@@ -1,6 +1,5 @@
-/** @import { Location } from 'locate-character' */
 import { teardown } from '../../reactivity/effects.js';
-import { define_property, is_array } from '../../../shared/utils.js';
+import { define_property } from '../../../shared/utils.js';
 import { hydrating } from '../hydration.js';
 import { queue_micro_task } from '../task.js';
 import { FILENAME } from '../../../../constants.js';
@@ -13,6 +12,12 @@ import {
 } from '../../runtime.js';
 import { without_reactive_context } from './bindings/shared.js';
 
+/**
+ * Used on elements, as a map of event type -> event handler,
+ * and on events themselves to track which element handled an event
+ */
+export const event_symbol = Symbol('events');
+
 /** @type {Set<string>} */
 export const all_registered_events = new Set();
 
@@ -27,12 +32,8 @@ export const root_event_handles = new Set();
 export function replay_events(dom) {
 	if (!hydrating) return;
 
-	if (dom.onload) {
-		dom.removeAttribute('onload');
-	}
-	if (dom.onerror) {
-		dom.removeAttribute('onerror');
-	}
+	dom.removeAttribute('onload');
+	dom.removeAttribute('onerror');
 	// @ts-expect-error
 	const event = dom.__e;
 	if (event !== undefined) {
@@ -49,10 +50,10 @@ export function replay_events(dom) {
 /**
  * @param {string} event_name
  * @param {EventTarget} dom
- * @param {EventListener} handler
- * @param {AddEventListenerOptions} options
+ * @param {EventListener} [handler]
+ * @param {AddEventListenerOptions} [options]
  */
-export function create_event(event_name, dom, handler, options) {
+export function create_event(event_name, dom, handler, options = {}) {
 	/**
 	 * @this {EventTarget}
 	 */
@@ -63,7 +64,7 @@ export function create_event(event_name, dom, handler, options) {
 		}
 		if (!event.cancelBubble) {
 			return without_reactive_context(() => {
-				return handler.call(this, event);
+				return handler?.call(this, event);
 			});
 		}
 	}
@@ -108,8 +109,8 @@ export function on(element, type, handler, options = {}) {
 /**
  * @param {string} event_name
  * @param {Element} dom
- * @param {EventListener} handler
- * @param {boolean} capture
+ * @param {EventListener} [handler]
+ * @param {boolean} [capture]
  * @param {boolean} [passive]
  * @returns {void}
  */
@@ -117,14 +118,32 @@ export function event(event_name, dom, handler, capture, passive) {
 	var options = { capture, passive };
 	var target_handler = create_event(event_name, dom, handler, options);
 
-	// @ts-ignore
-	if (dom === document.body || dom === window || dom === document) {
+	if (
+		dom === document.body ||
+		// @ts-ignore
+		dom === window ||
+		// @ts-ignore
+		dom === document ||
+		// Firefox has quirky behavior, it can happen that we still get "canplay" events when the element is already removed
+		dom instanceof HTMLMediaElement
+	) {
 		teardown(() => {
 			dom.removeEventListener(event_name, target_handler, options);
 		});
 	}
 }
 
+/**
+ * @param {string} event_name
+ * @param {Element} element
+ * @param {EventListener} [handler]
+ * @returns {void}
+ */
+export function delegated(event_name, element, handler) {
+	// @ts-expect-error
+	(element[event_symbol] ??= {})[event_name] = handler;
+}
+
 /**
  * @param {Array<string>} events
  * @returns {void}
@@ -139,6 +158,13 @@ export function delegate(events) {
 	}
 }
 
+// used to store the reference to the currently propagated event
+// to prevent garbage collection between microtasks in Firefox
+// If the event object is GCed too early, the expando __root property
+// set on the event object is lost, causing the event delegation
+// to process the event twice
+let last_propagated_event = null;
+
 /**
  * @this {EventTarget}
  * @param {Event} event
@@ -151,14 +177,19 @@ export function handle_event_propagation(event) {
 	var path = event.composedPath?.() || [];
 	var current_target = /** @type {null | Element} */ (path[0] || event.target);
 
+	last_propagated_event = event;
+
 	// composedPath contains list of nodes the event has propagated through.
-	// We check __root to skip all nodes below it in case this is a
-	// parent of the __root node, which indicates that there's nested
+	// We check `event_symbol` to skip all nodes below it in case this is a
+	// parent of the `event_symbol` node, which indicates that there's nested
 	// mounted apps. In this case we don't want to trigger events multiple times.
 	var path_idx = 0;
 
+	// the `last_propagated_event === event` check is redundant, but
+	// without it the variable will be DCE'd and things will
+	// fail mysteriously in Firefox
 	// @ts-expect-error is added below
-	var handled_at = event.__root;
+	var handled_at = last_propagated_event === event && event[event_symbol];
 
 	if (handled_at) {
 		var at_idx = path.indexOf(handled_at);
@@ -170,7 +201,7 @@ export function handle_event_propagation(event) {
 			// -> ignore, but set handle_at to document/window so that we're resetting the event
 			// chain in case someone manually dispatches the same event object again.
 			// @ts-expect-error
-			event.__root = handler_element;
+			event[event_symbol] = handler_element;
 			return;
 		}
 
@@ -206,9 +237,9 @@ export function handle_event_propagation(event) {
 	});
 
 	// This started because of Chromium issue https://chromestatus.com/feature/5128696823545856,
-	// where removal or moving of of the DOM can cause sync `blur` events to fire, which can cause logic
+	// where removal or moving of the DOM can cause sync `blur` events to fire, which can cause logic
 	// to run inside the current `active_reaction`, which isn't what we want at all. However, on reflection,
-	// it's probably best that all event handled by Svelte have this behaviour, as we don't really want
+	// it's probably best that all events handled by Svelte have this behaviour, as we don't really want
 	// an event handler to run in the context of another reaction or effect.
 	var previous_reaction = active_reaction;
 	var previous_effect = active_effect;
@@ -226,24 +257,20 @@ export function handle_event_propagation(event) {
 		var other_errors = [];
 
 		while (current_target !== null) {
-			/** @type {null | Element} */
-			var parent_element =
-				current_target.assignedSlot ||
-				current_target.parentNode ||
-				/** @type {any} */ (current_target).host ||
-				null;
+			if (current_target === handler_element) break;
 
 			try {
 				// @ts-expect-error
-				var delegated = current_target['__' + event_name];
-
-				if (delegated !== undefined && !(/** @type {any} */ (current_target).disabled)) {
-					if (is_array(delegated)) {
-						var [fn, ...data] = delegated;
-						fn.apply(current_target, [event, ...data]);
-					} else {
-						delegated.call(current_target, event);
-					}
+				var delegated = current_target[event_symbol]?.[event_name];
+
+				if (
+					delegated != null &&
+					(!(/** @type {any} */ (current_target).disabled) ||
+						// DOM could've been updated already by the time this is reached, so we check this as well
+						// -> the target could not have been disabled because it emits the event in the first place
+						event.target === current_target)
+				) {
+					delegated.call(current_target, event);
 				}
 			} catch (error) {
 				if (throw_error) {
@@ -252,10 +279,10 @@ export function handle_event_propagation(event) {
 					throw_error = error;
 				}
 			}
-			if (event.cancelBubble || parent_element === handler_element || parent_element === null) {
-				break;
-			}
-			current_target = parent_element;
+			if (event.cancelBubble) break;
+
+			path_idx++;
+			current_target = path_idx < path.length ? /** @type {Element} */ (path[path_idx]) : null;
 		}
 
 		if (throw_error) {
@@ -269,7 +296,7 @@ export function handle_event_propagation(event) {
 		}
 	} finally {
 		// @ts-expect-error is used above
-		event.__root = handler_element;
+		event[event_symbol] = handler_element;
 		// @ts-ignore remove proxy on currentTarget
 		delete event.currentTarget;
 		set_active_reaction(previous_reaction);
@@ -305,13 +332,11 @@ export function apply(
 		error = e;
 	}
 
-	if (typeof handler === 'function') {
-		handler.apply(element, args);
-	} else if (has_side_effects || handler != null || error) {
+	if (typeof handler !== 'function' && (has_side_effects || handler != null || error)) {
 		const filename = component?.[FILENAME];
 		const location = loc ? ` at ${filename}:${loc[0]}:${loc[1]}` : ` in ${filename}`;
-
-		const event_name = args[0].type;
+		const phase = args[0]?.eventPhase < Event.BUBBLING_PHASE ? 'capture' : '';
+		const event_name = args[0]?.type + phase;
 		const description = `\`${event_name}\` handler${location}`;
 		const suggestion = remove_parens ? 'remove the trailing `()`' : 'add a leading `() =>`';
 
@@ -321,4 +346,5 @@ export function apply(
 			throw error;
 		}
 	}
+	handler?.apply(element, args);
 }
diff --git a/packages/svelte/src/internal/client/dom/elements/misc.js b/packages/svelte/src/internal/client/dom/elements/misc.js
index 61e513903f..ad34ab9c1d 100644
--- a/packages/svelte/src/internal/client/dom/elements/misc.js
+++ b/packages/svelte/src/internal/client/dom/elements/misc.js
@@ -1,6 +1,7 @@
 import { hydrating } from '../hydration.js';
 import { clear_text_content, get_first_child } from '../operations.js';
 import { queue_micro_task } from '../task.js';
+import { FORM_RESET_HANDLER } from '../../constants.js';
 
 /**
  * @param {HTMLElement} dom
@@ -45,13 +46,12 @@ export function add_form_reset_listener() {
 				Promise.resolve().then(() => {
 					if (!evt.defaultPrevented) {
 						for (const e of /**@type {HTMLFormElement} */ (evt.target).elements) {
-							// @ts-expect-error
-							e.__on_r?.();
+							/** @type {any} */ (e)[FORM_RESET_HANDLER]?.();
 						}
 					}
 				});
 			},
-			// In the capture phase to guarantee we get noticed of it (no possiblity of stopPropagation)
+			// In the capture phase to guarantee we get noticed of it (no possibility of stopPropagation)
 			{ capture: true }
 		);
 	}
diff --git a/packages/svelte/src/internal/client/dom/elements/style.js b/packages/svelte/src/internal/client/dom/elements/style.js
index 34531029c9..740c225f29 100644
--- a/packages/svelte/src/internal/client/dom/elements/style.js
+++ b/packages/svelte/src/internal/client/dom/elements/style.js
@@ -1,22 +1,56 @@
+import { to_style } from '../../../shared/attributes.js';
+import { STYLE_CACHE } from '../../constants.js';
+import { hydrating } from '../hydration.js';
+
 /**
- * @param {HTMLElement} dom
- * @param {string} key
- * @param {string} value
- * @param {boolean} [important]
+ * @param {Element & ElementCSSInlineStyle} dom
+ * @param {Record<string, any>} prev
+ * @param {Record<string, any>} next
+ * @param {string} [priority]
  */
-export function set_style(dom, key, value, important) {
-	// @ts-expect-error
-	var styles = (dom.__styles ??= {});
+function update_styles(dom, prev = {}, next, priority) {
+	for (var key in next) {
+		var value = next[key];
 
-	if (styles[key] === value) {
-		return;
+		if (prev[key] !== value) {
+			if (next[key] == null) {
+				dom.style.removeProperty(key);
+			} else {
+				dom.style.setProperty(key, value, priority);
+			}
+		}
 	}
+}
 
-	styles[key] = value;
+/**
+ * @param {Element & ElementCSSInlineStyle} dom
+ * @param {string | null} value
+ * @param {Record<string, any> | [Record<string, any>, Record<string, any>]} [prev_styles]
+ * @param {Record<string, any> | [Record<string, any>, Record<string, any>]} [next_styles]
+ */
+export function set_style(dom, value, prev_styles, next_styles) {
+	var prev = /** @type {any} */ (dom)[STYLE_CACHE];
 
-	if (value == null) {
-		dom.style.removeProperty(key);
-	} else {
-		dom.style.setProperty(key, value, important ? 'important' : '');
+	if (hydrating || prev !== value) {
+		var next_style_attr = to_style(value, next_styles);
+
+		if (!hydrating || next_style_attr !== dom.getAttribute('style')) {
+			if (next_style_attr == null) {
+				dom.removeAttribute('style');
+			} else {
+				dom.style.cssText = next_style_attr;
+			}
+		}
+
+		/** @type {any} */ (dom)[STYLE_CACHE] = value;
+	} else if (next_styles) {
+		if (Array.isArray(next_styles)) {
+			update_styles(dom, prev_styles?.[0], next_styles[0]);
+			update_styles(dom, prev_styles?.[1], next_styles[1], 'important');
+		} else {
+			update_styles(dom, prev_styles, next_styles);
+		}
 	}
+
+	return next_styles;
 }
diff --git a/packages/svelte/src/internal/client/dom/elements/transitions.js b/packages/svelte/src/internal/client/dom/elements/transitions.js
index dee029e88f..7c4d385807 100644
--- a/packages/svelte/src/internal/client/dom/elements/transitions.js
+++ b/packages/svelte/src/internal/client/dom/elements/transitions.js
@@ -1,19 +1,13 @@
-/** @import { AnimateFn, Animation, AnimationConfig, EachItem, Effect, TransitionFn, TransitionManager } from '#client' */
+/** @import { AnimateFn, Animation, AnimationConfig, EachItem, Effect, EffectNodes, TransitionFn, TransitionManager } from '#client' */
 import { noop, is_function } from '../../../shared/utils.js';
 import { effect } from '../../reactivity/effects.js';
-import {
-	active_effect,
-	active_reaction,
-	set_active_effect,
-	set_active_reaction,
-	untrack
-} from '../../runtime.js';
+import { active_effect, untrack } from '../../runtime.js';
 import { loop } from '../../loop.js';
 import { should_intro } from '../../render.js';
-import { current_each_item } from '../blocks/each.js';
 import { TRANSITION_GLOBAL, TRANSITION_IN, TRANSITION_OUT } from '../../../../constants.js';
-import { BLOCK_EFFECT, EFFECT_RAN, EFFECT_TRANSPARENT } from '../../constants.js';
+import { BLOCK_EFFECT, REACTION_RAN, EFFECT_TRANSPARENT } from '#client/constants';
 import { queue_micro_task } from '../task.js';
+import { without_reactive_context } from './bindings/shared.js';
 
 /**
  * @param {Element} element
@@ -21,7 +15,9 @@ import { queue_micro_task } from '../task.js';
  * @returns {void}
  */
 function dispatch_event(element, type) {
-	element.dispatchEvent(new CustomEvent(type));
+	without_reactive_context(() => {
+		element.dispatchEvent(new CustomEvent(type));
+	});
 }
 
 /**
@@ -69,6 +65,14 @@ function css_to_keyframe(css) {
 /** @param {number} t */
 const linear = (t) => t;
 
+/** @type {Effect | null} */
+let animation_effect_override = null;
+
+/** @param {Effect | null} v */
+export function set_animation_effect_override(v) {
+	animation_effect_override = v;
+}
+
 /**
  * Called inside keyed `{#each ...}` blocks (as `$.animation(...)`). This creates an animation manager
  * and attaches it to the block, so that moves can be animated following reconciliation.
@@ -78,7 +82,8 @@ const linear = (t) => t;
  * @param {(() => P) | null} get_params
  */
 export function animation(element, get_fn, get_params) {
-	var item = /** @type {EachItem} */ (current_each_item);
+	var effect = animation_effect_override ?? /** @type {Effect} */ (active_effect);
+	var nodes = /** @type {EffectNodes} */ (effect.nodes);
 
 	/** @type {DOMRect} */
 	var from;
@@ -92,7 +97,7 @@ export function animation(element, get_fn, get_params) {
 	/** @type {null | { position: string, width: string, height: string, transform: string }} */
 	var original_styles = null;
 
-	item.a ??= {
+	nodes.a ??= {
 		element,
 		measure() {
 			from = this.element.getBoundingClientRect();
@@ -110,10 +115,17 @@ export function animation(element, get_fn, get_params) {
 			) {
 				const options = get_fn()(this.element, { from, to }, get_params?.());
 
-				animation = animate(this.element, options, undefined, 1, () => {
-					animation?.abort();
-					animation = undefined;
-				});
+				animation = animate(
+					this.element,
+					options,
+					undefined,
+					1,
+					() => {},
+					() => {
+						animation?.abort();
+						animation = undefined;
+					}
+				);
 			}
 		},
 		fix() {
@@ -164,7 +176,7 @@ export function animation(element, get_fn, get_params) {
 	// when an animation manager already exists, if the tag changes. in that case, we need to
 	// swap out the element rather than creating a new manager, in case it happened at the same
 	// moment as a reconciliation
-	item.a.element = element;
+	nodes.a.element = element;
 }
 
 /**
@@ -192,6 +204,13 @@ export function transition(flags, element, get_fn, get_params) {
 
 	var inert = element.inert;
 
+	/**
+	 * The default overflow style, stashed so we can revert changes during the transition
+	 * that are necessary to work around a Safari <18 bug
+	 * TODO 6.0 remove this, if older versions of Safari have died out enough
+	 */
+	var overflow = element.style.overflow;
+
 	/** @type {Animation | undefined} */
 	var intro;
 
@@ -199,21 +218,14 @@ export function transition(flags, element, get_fn, get_params) {
 	var outro;
 
 	function get_options() {
-		var previous_reaction = active_reaction;
-		var previous_effect = active_effect;
-		set_active_reaction(null);
-		set_active_effect(null);
-		try {
+		return without_reactive_context(() => {
 			// If a transition is still ongoing, we use the existing options rather than generating
 			// new ones. This ensures that reversible transitions reverse smoothly, rather than
 			// jumping to a new spot because (for example) a different `duration` was used
 			return (current_options ??= get_fn()(element, get_params?.() ?? /** @type {P} */ ({}), {
 				direction
 			}));
-		} finally {
-			set_active_reaction(previous_reaction);
-			set_active_effect(previous_effect);
-		}
+		});
 	}
 
 	/** @type {TransitionManager} */
@@ -234,15 +246,24 @@ export function transition(flags, element, get_fn, get_params) {
 				intro?.abort();
 			}
 
-			dispatch_event(element, 'introstart');
-
-			intro = animate(element, get_options(), outro, 1, () => {
-				dispatch_event(element, 'introend');
-
-				// Ensure we cancel the animation to prevent leaking
-				intro?.abort();
-				intro = current_options = undefined;
-			});
+			intro = animate(
+				element,
+				get_options(),
+				outro,
+				1,
+				() => {
+					dispatch_event(element, 'introstart');
+				},
+				() => {
+					dispatch_event(element, 'introend');
+
+					// Ensure we cancel the animation to prevent leaking
+					intro?.abort();
+					intro = current_options = undefined;
+
+					element.style.overflow = overflow;
+				}
+			);
 		},
 		out(fn) {
 			if (!is_outro) {
@@ -253,12 +274,19 @@ export function transition(flags, element, get_fn, get_params) {
 
 			element.inert = true;
 
-			dispatch_event(element, 'outrostart');
-
-			outro = animate(element, get_options(), intro, 0, () => {
-				dispatch_event(element, 'outroend');
-				fn?.();
-			});
+			outro = animate(
+				element,
+				get_options(),
+				intro,
+				0,
+				() => {
+					dispatch_event(element, 'outrostart');
+				},
+				() => {
+					dispatch_event(element, 'outroend');
+					fn?.();
+				}
+			);
 		},
 		stop: () => {
 			intro?.abort();
@@ -266,9 +294,9 @@ export function transition(flags, element, get_fn, get_params) {
 		}
 	};
 
-	var e = /** @type {Effect} */ (active_effect);
+	var e = /** @type {Effect & { nodes: EffectNodes }} */ (active_effect);
 
-	(e.transitions ??= []).push(transition);
+	(e.nodes.t ??= []).push(transition);
 
 	// if this is a local transition, we only want to run it if the parent (branch) effect's
 	// parent (block) effect is where the state change happened. we can determine that by
@@ -286,7 +314,7 @@ export function transition(flags, element, get_fn, get_params) {
 				}
 			}
 
-			run = !block || (block.f & EFFECT_RAN) !== 0;
+			run = !block || (block.f & REACTION_RAN) !== 0;
 		}
 
 		if (run) {
@@ -303,10 +331,11 @@ export function transition(flags, element, get_fn, get_params) {
  * @param {AnimationConfig | ((opts: { direction: 'in' | 'out' }) => AnimationConfig)} options
  * @param {Animation | undefined} counterpart The corresponding intro/outro to this outro/intro
  * @param {number} t2 The target `t` value — `1` for intro, `0` for outro
+ * @param {(() => void)} on_begin Called just before beginning the animation
  * @param {(() => void)} on_finish Called after successfully completing the animation
  * @returns {Animation}
  */
-function animate(element, options, counterpart, t2, on_finish) {
+function animate(element, options, counterpart, t2, on_begin, on_finish) {
 	var is_intro = t2 === 1;
 
 	if (is_function(options)) {
@@ -320,7 +349,7 @@ function animate(element, options, counterpart, t2, on_finish) {
 		queue_micro_task(() => {
 			if (aborted) return;
 			var o = options({ direction: is_intro ? 'in' : 'out' });
-			a = animate(element, o, counterpart, t2, on_finish);
+			a = animate(element, o, counterpart, t2, on_begin, on_finish);
 		});
 
 		// ...but we want to do so without using `async`/`await` everywhere, so
@@ -338,7 +367,8 @@ function animate(element, options, counterpart, t2, on_finish) {
 
 	counterpart?.deactivate();
 
-	if (!options?.duration) {
+	if (!options?.duration && !options?.delay) {
+		on_begin();
 		on_finish();
 
 		return {
@@ -369,9 +399,17 @@ function animate(element, options, counterpart, t2, on_finish) {
 	// create a dummy animation that lasts as long as the delay (but with whatever devtools
 	// multiplier is in effect). in the common case that it is `0`, we keep it anyway so that
 	// the CSS keyframes aren't created until the DOM is updated
-	var animation = element.animate(keyframes, { duration: delay });
+	//
+	// fill forwards to prevent the element from rendering without styles applied
+	// see https://github.com/sveltejs/svelte/issues/14732
+	var animation = element.animate(keyframes, { duration: delay, fill: 'forwards' });
 
 	animation.onfinish = () => {
+		// remove dummy animation from the stack to prevent conflict with main animation
+		animation.cancel();
+
+		on_begin();
+
 		// for bidirectional transitions, we start from the current position,
 		// rather than doing a full intro/outro
 		var t1 = counterpart?.t() ?? 1 - t2;
@@ -382,16 +420,29 @@ function animate(element, options, counterpart, t2, on_finish) {
 		var keyframes = [];
 
 		if (duration > 0) {
+			/**
+			 * Whether or not the CSS includes `overflow: hidden`, in which case we need to
+			 * add it as an inline style to work around a Safari <18 bug
+			 * TODO 6.0 remove this, if possible
+			 */
+			var needs_overflow_hidden = false;
+
 			if (css) {
 				var n = Math.ceil(duration / (1000 / 60)); // `n` must be an integer, or we risk missing the `t2` value
 
 				for (var i = 0; i <= n; i += 1) {
 					var t = t1 + delta * easing(i / n);
-					var styles = css(t, 1 - t);
-					keyframes.push(css_to_keyframe(styles));
+					var styles = css_to_keyframe(css(t, 1 - t));
+					keyframes.push(styles);
+
+					needs_overflow_hidden ||= styles.overflow === 'hidden';
 				}
 			}
 
+			if (needs_overflow_hidden) {
+				/** @type {HTMLElement} */ (element).style.overflow = 'hidden';
+			}
+
 			get_t = () => {
 				var time = /** @type {number} */ (
 					/** @type {globalThis.Animation} */ (animation).currentTime
diff --git a/packages/svelte/src/internal/client/dom/hydration.js b/packages/svelte/src/internal/client/dom/hydration.js
index 8523ff97d5..83833f493d 100644
--- a/packages/svelte/src/internal/client/dom/hydration.js
+++ b/packages/svelte/src/internal/client/dom/hydration.js
@@ -1,5 +1,6 @@
 /** @import { TemplateNode } from '#client' */
 
+import { COMMENT_NODE } from '#client/constants';
 import {
 	HYDRATION_END,
 	HYDRATION_ERROR,
@@ -29,7 +30,7 @@ export function set_hydrating(value) {
  */
 export let hydrate_node;
 
-/** @param {TemplateNode} node */
+/** @param {TemplateNode | null} node */
 export function set_hydrate_node(node) {
 	if (node === null) {
 		w.hydration_mismatch();
@@ -40,7 +41,7 @@ export function set_hydrate_node(node) {
 }
 
 export function hydrate_next() {
-	return set_hydrate_node(/** @type {TemplateNode} */ (get_next_sibling(hydrate_node)));
+	return set_hydrate_node(get_next_sibling(hydrate_node));
 }
 
 /** @param {TemplateNode} node */
@@ -80,26 +81,45 @@ export function next(count = 1) {
 }
 
 /**
- * Removes all nodes starting at `hydrate_node` up until the next hydration end comment
+ * Skips or removes (depending on {@link remove}) all nodes starting at `hydrate_node` up until the next hydration end comment
+ * @param {boolean} remove
  */
-export function remove_nodes() {
+export function skip_nodes(remove = true) {
 	var depth = 0;
 	var node = hydrate_node;
 
 	while (true) {
-		if (node.nodeType === 8) {
+		if (node.nodeType === COMMENT_NODE) {
 			var data = /** @type {Comment} */ (node).data;
 
 			if (data === HYDRATION_END) {
 				if (depth === 0) return node;
 				depth -= 1;
-			} else if (data === HYDRATION_START || data === HYDRATION_START_ELSE) {
+			} else if (
+				data === HYDRATION_START ||
+				data === HYDRATION_START_ELSE ||
+				// "[1", "[2", etc. for if blocks
+				(data[0] === '[' && !isNaN(Number(data.slice(1))))
+			) {
 				depth += 1;
 			}
 		}
 
 		var next = /** @type {TemplateNode} */ (get_next_sibling(node));
-		node.remove();
+		if (remove) node.remove();
 		node = next;
 	}
 }
+
+/**
+ *
+ * @param {TemplateNode} node
+ */
+export function read_hydration_instruction(node) {
+	if (!node || node.nodeType !== COMMENT_NODE) {
+		w.hydration_mismatch();
+		throw HYDRATION_ERROR;
+	}
+
+	return /** @type {Comment} */ (node).data;
+}
diff --git a/packages/svelte/src/internal/client/dom/legacy/event-modifiers.js b/packages/svelte/src/internal/client/dom/legacy/event-modifiers.js
index 918832dfa5..2e5312f1b0 100644
--- a/packages/svelte/src/internal/client/dom/legacy/event-modifiers.js
+++ b/packages/svelte/src/internal/client/dom/legacy/event-modifiers.js
@@ -1,4 +1,3 @@
-/** @import { ActionReturn } from 'svelte/action' */
 import { noop } from '../../../shared/utils.js';
 import { user_pre_effect } from '../../reactivity/effects.js';
 import { on } from '../elements/events.js';
diff --git a/packages/svelte/src/internal/client/dom/legacy/lifecycle.js b/packages/svelte/src/internal/client/dom/legacy/lifecycle.js
index 5ffbacc670..a564712f04 100644
--- a/packages/svelte/src/internal/client/dom/legacy/lifecycle.js
+++ b/packages/svelte/src/internal/client/dom/legacy/lifecycle.js
@@ -1,8 +1,9 @@
 /** @import { ComponentContextLegacy } from '#client' */
 import { run, run_all } from '../../../shared/utils.js';
+import { component_context } from '../../context.js';
 import { derived } from '../../reactivity/deriveds.js';
 import { user_pre_effect, user_effect } from '../../reactivity/effects.js';
-import { component_context, deep_read_state, get, untrack } from '../../runtime.js';
+import { deep_read_state, get, untrack } from '../../runtime.js';
 
 /**
  * Legacy-mode only: Call `onMount` callbacks and set up `beforeUpdate`/`afterUpdate` effects
diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
index 627bf917ee..bc12a0b07e 100644
--- a/packages/svelte/src/internal/client/dom/operations.js
+++ b/packages/svelte/src/internal/client/dom/operations.js
@@ -1,8 +1,20 @@
-/** @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 } from '../../shared/utils.js';
+import { get_descriptor, is_extensible } from '../../shared/utils.js';
+import { active_effect } from '../runtime.js';
+import { async_mode_flag } from '../../flags/index.js';
+import {
+	ATTRIBUTES_CACHE,
+	CLASS_CACHE,
+	REACTION_RAN,
+	STYLE_CACHE,
+	TEXT_CACHE,
+	TEXT_NODE
+} from '#client/constants';
+import { eager_block_effects } from '../reactivity/batch.js';
+import { NAMESPACE_HTML } from '../../../constants.js';
 
 // export these for reference in the compiled code, making global name deduplication unnecessary
 /** @type {Window} */
@@ -11,6 +23,9 @@ export var $window;
 /** @type {Document} */
 export var $document;
 
+/** @type {boolean} */
+export var is_firefox;
+
 /** @type {() => Node | null} */
 var first_child_getter;
 /** @type {() => Node | null} */
@@ -27,29 +42,29 @@ export function init_operations() {
 
 	$window = window;
 	$document = document;
+	is_firefox = /Firefox/.test(navigator.userAgent);
 
 	var element_prototype = Element.prototype;
 	var node_prototype = Node.prototype;
+	var text_prototype = Text.prototype;
 
 	// @ts-ignore
 	first_child_getter = get_descriptor(node_prototype, 'firstChild').get;
 	// @ts-ignore
 	next_sibling_getter = get_descriptor(node_prototype, 'nextSibling').get;
 
-	// the following assignments improve perf of lookups on DOM nodes
-	// @ts-expect-error
-	element_prototype.__click = undefined;
-	// @ts-expect-error
-	element_prototype.__className = '';
-	// @ts-expect-error
-	element_prototype.__attributes = null;
-	// @ts-expect-error
-	element_prototype.__styles = null;
-	// @ts-expect-error
-	element_prototype.__e = undefined;
-
-	// @ts-expect-error
-	Text.prototype.__t = undefined;
+	if (is_extensible(element_prototype)) {
+		// the following assignments improve perf of lookups on DOM nodes
+		/** @type {any} */ (element_prototype)[CLASS_CACHE] = undefined;
+		/** @type {any} */ (element_prototype)[ATTRIBUTES_CACHE] = null;
+		/** @type {any} */ (element_prototype)[STYLE_CACHE] = undefined;
+		// @ts-expect-error
+		element_prototype.__e = undefined;
+	}
+
+	if (is_extensible(text_prototype)) {
+		/** @type {any} */ (text_prototype)[TEXT_CACHE] = undefined;
+	}
 
 	if (DEV) {
 		// @ts-expect-error
@@ -70,21 +85,19 @@ export function create_text(value = '') {
 /**
  * @template {Node} N
  * @param {N} node
- * @returns {Node | null}
  */
 /*@__NO_SIDE_EFFECTS__*/
 export function get_first_child(node) {
-	return first_child_getter.call(node);
+	return /** @type {TemplateNode | null} */ (first_child_getter.call(node));
 }
 
 /**
  * @template {Node} N
  * @param {N} node
- * @returns {Node | null}
  */
 /*@__NO_SIDE_EFFECTS__*/
 export function get_next_sibling(node) {
-	return next_sibling_getter.call(node);
+	return /** @type {TemplateNode | null} */ (next_sibling_getter.call(node));
 }
 
 /**
@@ -92,39 +105,42 @@ export function get_next_sibling(node) {
  * @template {Node} N
  * @param {N} node
  * @param {boolean} is_text
- * @returns {Node | null}
+ * @returns {TemplateNode | null}
  */
 export function child(node, is_text) {
 	if (!hydrating) {
 		return get_first_child(node);
 	}
 
-	var child = /** @type {TemplateNode} */ (get_first_child(hydrate_node));
+	var child = get_first_child(hydrate_node);
 
 	// Child can be null if we have an element with a single child, like `<p>{text}</p>`, where `text` is empty
 	if (child === null) {
 		child = hydrate_node.appendChild(create_text());
-	} else if (is_text && child.nodeType !== 3) {
+	} else if (is_text && child.nodeType !== TEXT_NODE) {
 		var text = create_text();
 		child?.before(text);
 		set_hydrate_node(text);
 		return text;
 	}
 
+	if (is_text) {
+		merge_text_nodes(/** @type {Text} */ (child));
+	}
+
 	set_hydrate_node(child);
 	return child;
 }
 
 /**
  * Don't mark this as side-effect-free, hydration needs to walk all nodes
- * @param {DocumentFragment | TemplateNode[]} fragment
- * @param {boolean} is_text
- * @returns {Node | null}
+ * @param {TemplateNode} node
+ * @param {boolean} [is_text]
+ * @returns {TemplateNode | null}
  */
-export function first_child(fragment, is_text) {
+export function first_child(node, is_text = false) {
 	if (!hydrating) {
-		// when not hydrating, `fragment` is a `DocumentFragment` (the result of calling `open_frag`)
-		var first = /** @type {DocumentFragment} */ (get_first_child(/** @type {Node} */ (fragment)));
+		var first = get_first_child(node);
 
 		// TODO prevent user comments with the empty string when preserveComments is true
 		if (first instanceof Comment && first.data === '') return get_next_sibling(first);
@@ -132,14 +148,18 @@ export function first_child(fragment, is_text) {
 		return first;
 	}
 
-	// if an {expression} is empty during SSR, there might be no
-	// text node to hydrate — we must therefore create one
-	if (is_text && hydrate_node?.nodeType !== 3) {
-		var text = create_text();
+	if (is_text) {
+		// if an {expression} is empty during SSR, there might be no
+		// text node to hydrate — we must therefore create one
+		if (hydrate_node?.nodeType !== TEXT_NODE) {
+			var text = create_text();
 
-		hydrate_node?.before(text);
-		set_hydrate_node(text);
-		return text;
+			hydrate_node?.before(text);
+			set_hydrate_node(text);
+			return text;
+		}
+
+		merge_text_nodes(/** @type {Text} */ (hydrate_node));
 	}
 
 	return hydrate_node;
@@ -150,7 +170,7 @@ export function first_child(fragment, is_text) {
  * @param {TemplateNode} node
  * @param {number} count
  * @param {boolean} is_text
- * @returns {Node | null}
+ * @returns {TemplateNode | null}
  */
 export function sibling(node, count = 1, is_text = false) {
 	let next_sibling = hydrating ? hydrate_node : node;
@@ -165,26 +185,28 @@ export function sibling(node, count = 1, is_text = false) {
 		return next_sibling;
 	}
 
-	var type = next_sibling?.nodeType;
-
-	// if a sibling {expression} is empty during SSR, there might be no
-	// text node to hydrate — we must therefore create one
-	if (is_text && type !== 3) {
-		var text = create_text();
-		// If the next sibling is `null` and we're handling text then it's because
-		// the SSR content was empty for the text, so we need to generate a new text
-		// node and insert it after the last sibling
-		if (next_sibling === null) {
-			last_sibling?.after(text);
-		} else {
-			next_sibling.before(text);
+	if (is_text) {
+		// if a sibling {expression} is empty during SSR, there might be no
+		// text node to hydrate — we must therefore create one
+		if (next_sibling?.nodeType !== TEXT_NODE) {
+			var text = create_text();
+			// If the next sibling is `null` and we're handling text then it's because
+			// the SSR content was empty for the text, so we need to generate a new text
+			// node and insert it after the last sibling
+			if (next_sibling === null) {
+				last_sibling?.after(text);
+			} else {
+				next_sibling.before(text);
+			}
+			set_hydrate_node(text);
+			return text;
 		}
-		set_hydrate_node(text);
-		return text;
+
+		merge_text_nodes(/** @type {Text} */ (next_sibling));
 	}
 
 	set_hydrate_node(next_sibling);
-	return /** @type {TemplateNode} */ (next_sibling);
+	return next_sibling;
 }
 
 /**
@@ -195,3 +217,88 @@ export function sibling(node, count = 1, is_text = false) {
 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;
+	if (eager_block_effects !== null) return false;
+
+	var flags = /** @type {Effect} */ (active_effect).f;
+	return (flags & REACTION_RAN) !== 0;
+}
+
+/**
+ * Branching here is intentional and load-bearing for perf. `createElement(tag)`
+ * hits a fast path in Blink that `createElementNS(NAMESPACE_HTML, tag)` doesn't,
+ * and passing an explicit `undefined` as the trailing options arg measurably
+ * slows both APIs. Funnelling every case through a single `createElementNS(ns,
+ * tag, options)` call would be smaller but slower on the HTML path.
+ *
+ * @template {keyof HTMLElementTagNameMap | string} T
+ * @param {T} tag
+ * @param {string} [namespace]
+ * @param {string} [is]
+ * @returns {T extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[T] : Element}
+ */
+export function create_element(tag, namespace, is) {
+	if (namespace == null || namespace === NAMESPACE_HTML) {
+		return /** @type {T extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[T] : Element} */ (
+			is ? document.createElement(tag, { is }) : document.createElement(tag)
+		);
+	}
+	return /** @type {T extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[T] : Element} */ (
+		is ? document.createElementNS(namespace, tag, { is }) : document.createElementNS(namespace, tag)
+	);
+}
+
+export function create_fragment() {
+	return document.createDocumentFragment();
+}
+
+/**
+ * @param {string} data
+ * @returns
+ */
+export function create_comment(data = '') {
+	return document.createComment(data);
+}
+
+/**
+ * @param {Element} element
+ * @param {string} key
+ * @param {string} value
+ * @returns
+ */
+export function set_attribute(element, key, value = '') {
+	if (key.startsWith('xlink:')) {
+		element.setAttributeNS('http://www.w3.org/1999/xlink', key, value);
+		return;
+	}
+	return element.setAttribute(key, value);
+}
+
+/**
+ * Browsers split text nodes larger than 65536 bytes when parsing.
+ * For hydration to succeed, we need to stitch them back together
+ * @param {Text} text
+ */
+export function merge_text_nodes(text) {
+	if (/** @type {string} */ (text.nodeValue).length < 65536) {
+		return;
+	}
+
+	let next = text.nextSibling;
+
+	while (next !== null && next.nodeType === TEXT_NODE) {
+		next.remove();
+
+		/** @type {string} */ (text.nodeValue) += /** @type {string} */ (next.nodeValue);
+
+		next = text.nextSibling;
+	}
+}
diff --git a/packages/svelte/src/internal/client/dom/reconciler.js b/packages/svelte/src/internal/client/dom/reconciler.js
index 9897e08d53..294cd9c35d 100644
--- a/packages/svelte/src/internal/client/dom/reconciler.js
+++ b/packages/svelte/src/internal/client/dom/reconciler.js
@@ -1,6 +1,25 @@
+import { create_element } from './operations.js';
+
+const policy =
+	// We gotta write it like this because after downleveling the pure comment may end up in the wrong location
+	globalThis?.window?.trustedTypes &&
+	/* @__PURE__ */ globalThis.window.trustedTypes.createPolicy('svelte-trusted-html', {
+		/** @param {string} html */
+		createHTML: (html) => {
+			return html;
+		}
+	});
+
 /** @param {string} html */
+export function create_trusted_html(html) {
+	return /** @type {string} */ (policy?.createHTML(html) ?? html);
+}
+
+/**
+ * @param {string} html
+ */
 export function create_fragment_from_html(html) {
-	var elem = document.createElement('template');
-	elem.innerHTML = html;
+	var elem = create_element('template');
+	elem.innerHTML = create_trusted_html(html.replaceAll('<!>', '<!---->')); // XHTML compliance
 	return elem.content;
 }
diff --git a/packages/svelte/src/internal/client/dom/task.js b/packages/svelte/src/internal/client/dom/task.js
index acb5a5b117..8c51361467 100644
--- a/packages/svelte/src/internal/client/dom/task.js
+++ b/packages/svelte/src/internal/client/dom/task.js
@@ -1,30 +1,12 @@
 import { run_all } from '../../shared/utils.js';
+import { is_flushing_sync } from '../reactivity/batch.js';
 
-// Fallback for when requestIdleCallback is not available
-export const request_idle_callback =
-	typeof requestIdleCallback === 'undefined'
-		? (/** @type {() => void} */ cb) => setTimeout(cb, 1)
-		: requestIdleCallback;
-
-let is_micro_task_queued = false;
-let is_idle_task_queued = false;
-
-/** @type {Array<() => void>} */
-let current_queued_micro_tasks = [];
 /** @type {Array<() => void>} */
-let current_queued_idle_tasks = [];
-
-function process_micro_tasks() {
-	is_micro_task_queued = false;
-	const tasks = current_queued_micro_tasks.slice();
-	current_queued_micro_tasks = [];
-	run_all(tasks);
-}
+let micro_tasks = [];
 
-function process_idle_tasks() {
-	is_idle_task_queued = false;
-	const tasks = current_queued_idle_tasks.slice();
-	current_queued_idle_tasks = [];
+function run_micro_tasks() {
+	var tasks = micro_tasks;
+	micro_tasks = [];
 	run_all(tasks);
 }
 
@@ -32,32 +14,29 @@ function process_idle_tasks() {
  * @param {() => void} fn
  */
 export function queue_micro_task(fn) {
-	if (!is_micro_task_queued) {
-		is_micro_task_queued = true;
-		queueMicrotask(process_micro_tasks);
+	if (micro_tasks.length === 0 && !is_flushing_sync) {
+		var tasks = micro_tasks;
+		queueMicrotask(() => {
+			// If this is false, a flushSync happened in the meantime. Do _not_ run new scheduled microtasks in that case
+			// as the ordering of microtasks would be broken at that point - consider this case:
+			// - queue_micro_task schedules microtask A to flush task X
+			// - synchronously after, flushSync runs, processing task X
+			// - synchronously after, some other microtask B is scheduled, but not through queue_micro_task but for example a Promise.resolve() in user code
+			// - synchronously after, queue_micro_task schedules microtask C to flush task Y
+			// - one tick later, microtask A now resolves, flushing task Y before microtask B, which is incorrect
+			// This if check prevents that race condition (that realistically will only happen in tests)
+			if (tasks === micro_tasks) run_micro_tasks();
+		});
 	}
-	current_queued_micro_tasks.push(fn);
-}
 
-/**
- * @param {() => void} fn
- */
-export function queue_idle_task(fn) {
-	if (!is_idle_task_queued) {
-		is_idle_task_queued = true;
-		request_idle_callback(process_idle_tasks);
-	}
-	current_queued_idle_tasks.push(fn);
+	micro_tasks.push(fn);
 }
 
 /**
  * Synchronously run any queued tasks.
  */
 export function flush_tasks() {
-	if (is_micro_task_queued) {
-		process_micro_tasks();
-	}
-	if (is_idle_task_queued) {
-		process_idle_tasks();
+	while (micro_tasks.length > 0) {
+		run_micro_tasks();
 	}
 }
diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js
index bcbae393ec..a5d0405d0a 100644
--- a/packages/svelte/src/internal/client/dom/template.js
+++ b/packages/svelte/src/internal/client/dom/template.js
@@ -1,9 +1,37 @@
-/** @import { Effect, TemplateNode } from '#client' */
+/** @import { Effect, EffectNodes, TemplateNode } from '#client' */
+/** @import { TemplateStructure } from './types' */
 import { hydrate_next, hydrate_node, hydrating, set_hydrate_node } from './hydration.js';
-import { create_text, get_first_child } from './operations.js';
+import {
+	create_text,
+	get_first_child,
+	get_next_sibling,
+	is_firefox,
+	create_element,
+	create_fragment,
+	create_comment,
+	set_attribute,
+	merge_text_nodes
+} from './operations.js';
 import { create_fragment_from_html } from './reconciler.js';
 import { active_effect } from '../runtime.js';
-import { TEMPLATE_FRAGMENT, TEMPLATE_USE_IMPORT_NODE } from '../../../constants.js';
+import {
+	NAMESPACE_MATHML,
+	NAMESPACE_SVG,
+	TEMPLATE_FRAGMENT,
+	TEMPLATE_USE_IMPORT_NODE,
+	TEMPLATE_USE_MATHML,
+	TEMPLATE_USE_SVG
+} from '../../../constants.js';
+import {
+	COMMENT_NODE,
+	DOCUMENT_FRAGMENT_NODE,
+	IS_XHTML,
+	REACTION_RAN,
+	TEXT_NODE
+} from '#client/constants';
+
+const TEMPLATE_TAG = IS_XHTML ? 'template' : 'TEMPLATE';
+const SCRIPT_TAG = IS_XHTML ? 'script' : 'SCRIPT';
 
 /**
  * @param {TemplateNode} start
@@ -11,9 +39,8 @@ import { TEMPLATE_FRAGMENT, TEMPLATE_USE_IMPORT_NODE } from '../../../constants.
  */
 export function assign_nodes(start, end) {
 	var effect = /** @type {Effect} */ (active_effect);
-	if (effect.nodes_start === null) {
-		effect.nodes_start = start;
-		effect.nodes_end = end;
+	if (effect.nodes === null) {
+		effect.nodes = { start, end, a: null, t: null };
 	}
 }
 
@@ -23,7 +50,7 @@ export function assign_nodes(start, end) {
  * @returns {() => Node | Node[]}
  */
 /*#__NO_SIDE_EFFECTS__*/
-export function template(content, flags) {
+export function from_html(content, flags) {
 	var is_fragment = (flags & TEMPLATE_FRAGMENT) !== 0;
 	var use_import_node = (flags & TEMPLATE_USE_IMPORT_NODE) !== 0;
 
@@ -44,11 +71,11 @@ export function template(content, flags) {
 
 		if (node === undefined) {
 			node = create_fragment_from_html(has_start ? content : '<!>' + content);
-			if (!is_fragment) node = /** @type {Node} */ (get_first_child(node));
+			if (!is_fragment) node = /** @type {TemplateNode} */ (get_first_child(node));
 		}
 
 		var clone = /** @type {TemplateNode} */ (
-			use_import_node ? document.importNode(node, true) : node.cloneNode(true)
+			use_import_node || is_firefox ? document.importNode(node, true) : node.cloneNode(true)
 		);
 
 		if (is_fragment) {
@@ -64,17 +91,6 @@ export function template(content, flags) {
 	};
 }
 
-/**
- * @param {string} content
- * @param {number} flags
- * @returns {() => Node | Node[]}
- */
-/*#__NO_SIDE_EFFECTS__*/
-export function template_with_script(content, flags) {
-	var fn = template(content, flags);
-	return () => run_scripts(/** @type {Element | DocumentFragment} */ (fn()));
-}
-
 /**
  * @param {string} content
  * @param {number} flags
@@ -82,7 +98,7 @@ export function template_with_script(content, flags) {
  * @returns {() => Node | Node[]}
  */
 /*#__NO_SIDE_EFFECTS__*/
-export function ns_template(content, flags, ns = 'svg') {
+function from_namespace(content, flags, ns = 'svg') {
 	/**
 	 * Whether or not the first item is a text/element node. If not, we need to
 	 * create an additional comment node to act as `effect.nodes.start`
@@ -108,7 +124,7 @@ export function ns_template(content, flags, ns = 'svg') {
 			if (is_fragment) {
 				node = document.createDocumentFragment();
 				while (get_first_child(root)) {
-					node.appendChild(/** @type {Node} */ (get_first_child(root)));
+					node.appendChild(/** @type {TemplateNode} */ (get_first_child(root)));
 				}
 			} else {
 				node = /** @type {Element} */ (get_first_child(root));
@@ -133,22 +149,120 @@ export function ns_template(content, flags, ns = 'svg') {
 /**
  * @param {string} content
  * @param {number} flags
- * @returns {() => Node | Node[]}
  */
 /*#__NO_SIDE_EFFECTS__*/
-export function svg_template_with_script(content, flags) {
-	var fn = ns_template(content, flags);
-	return () => run_scripts(/** @type {Element | DocumentFragment} */ (fn()));
+export function from_svg(content, flags) {
+	return from_namespace(content, flags, 'svg');
 }
 
 /**
  * @param {string} content
  * @param {number} flags
+ */
+/*#__NO_SIDE_EFFECTS__*/
+export function from_mathml(content, flags) {
+	return from_namespace(content, flags, 'math');
+}
+
+/**
+ * @param {TemplateStructure[]} structure
+ * @param {typeof NAMESPACE_SVG | typeof NAMESPACE_MATHML | undefined} [ns]
+ */
+function fragment_from_tree(structure, ns) {
+	var fragment = create_fragment();
+
+	for (var item of structure) {
+		if (typeof item === 'string') {
+			fragment.append(create_text(item));
+			continue;
+		}
+
+		// if `preserveComments === true`, comments are represented as `['// <data>']`
+		if (item === undefined || item[0][0] === '/') {
+			fragment.append(create_comment(item ? item[0].slice(3) : ''));
+			continue;
+		}
+
+		const [name, attributes, ...children] = item;
+
+		const namespace = name === 'svg' ? NAMESPACE_SVG : name === 'math' ? NAMESPACE_MATHML : ns;
+
+		var element = create_element(name, namespace, attributes?.is);
+
+		for (var key in attributes) {
+			set_attribute(element, key, attributes[key]);
+		}
+
+		if (children.length > 0) {
+			var target =
+				element.nodeName === TEMPLATE_TAG
+					? /** @type {HTMLTemplateElement} */ (element).content
+					: element;
+
+			target.append(
+				fragment_from_tree(children, element.nodeName === 'foreignObject' ? undefined : namespace)
+			);
+		}
+
+		fragment.append(element);
+	}
+
+	return fragment;
+}
+
+/**
+ * @param {TemplateStructure[]} structure
+ * @param {number} flags
  * @returns {() => Node | Node[]}
  */
 /*#__NO_SIDE_EFFECTS__*/
-export function mathml_template(content, flags) {
-	return ns_template(content, flags, 'math');
+export function from_tree(structure, flags) {
+	var is_fragment = (flags & TEMPLATE_FRAGMENT) !== 0;
+	var use_import_node = (flags & TEMPLATE_USE_IMPORT_NODE) !== 0;
+
+	/** @type {Node} */
+	var node;
+
+	return () => {
+		if (hydrating) {
+			assign_nodes(hydrate_node, null);
+			return hydrate_node;
+		}
+
+		if (node === undefined) {
+			const ns =
+				(flags & TEMPLATE_USE_SVG) !== 0
+					? NAMESPACE_SVG
+					: (flags & TEMPLATE_USE_MATHML) !== 0
+						? NAMESPACE_MATHML
+						: undefined;
+
+			node = fragment_from_tree(structure, ns);
+			if (!is_fragment) node = /** @type {TemplateNode} */ (get_first_child(node));
+		}
+
+		var clone = /** @type {TemplateNode} */ (
+			use_import_node || is_firefox ? document.importNode(node, true) : node.cloneNode(true)
+		);
+
+		if (is_fragment) {
+			var start = /** @type {TemplateNode} */ (get_first_child(clone));
+			var end = /** @type {TemplateNode} */ (clone.lastChild);
+
+			assign_nodes(start, end);
+		} else {
+			assign_nodes(clone, clone);
+		}
+
+		return clone;
+	};
+}
+
+/**
+ * @param {() => Element | DocumentFragment} fn
+ */
+export function with_script(fn) {
+	return () => run_scripts(fn());
 }
 
 /**
@@ -161,15 +275,16 @@ function run_scripts(node) {
 	// scripts were SSR'd, in which case they will run
 	if (hydrating) return node;
 
-	const is_fragment = node.nodeType === 11;
+	const is_fragment = node.nodeType === DOCUMENT_FRAGMENT_NODE;
 	const scripts =
-		/** @type {HTMLElement} */ (node).tagName === 'SCRIPT'
+		/** @type {HTMLElement} */ (node).nodeName === SCRIPT_TAG
 			? [/** @type {HTMLScriptElement} */ (node)]
 			: node.querySelectorAll('script');
-	const effect = /** @type {Effect} */ (active_effect);
+
+	const effect = /** @type {Effect & { nodes: EffectNodes }} */ (active_effect);
 
 	for (const script of scripts) {
-		const clone = document.createElement('script');
+		const clone = create_element('script');
 		for (var attribute of script.attributes) {
 			clone.setAttribute(attribute.name, attribute.value);
 		}
@@ -178,10 +293,10 @@ function run_scripts(node) {
 
 		// The script has changed - if it's at the edges, the effect now points at dead nodes
 		if (is_fragment ? node.firstChild === script : node === script) {
-			effect.nodes_start = clone;
+			effect.nodes.start = clone;
 		}
 		if (is_fragment ? node.lastChild === script : node === script) {
-			effect.nodes_end = clone;
+			effect.nodes.end = clone;
 		}
 
 		script.replaceWith(clone);
@@ -202,16 +317,21 @@ export function text(value = '') {
 
 	var node = hydrate_node;
 
-	if (node.nodeType !== 3) {
+	if (node.nodeType !== TEXT_NODE) {
 		// if an {expression} is empty during SSR, we need to insert an empty text node
 		node.before((node = create_text()));
 		set_hydrate_node(node);
+	} else {
+		merge_text_nodes(/** @type {Text} */ (node));
 	}
 
 	assign_nodes(node, node);
 	return node;
 }
 
+/**
+ * @returns {TemplateNode | DocumentFragment}
+ */
 export function comment() {
 	// we're not delegating to `template` here for performance reasons
 	if (hydrating) {
@@ -237,7 +357,15 @@ export function comment() {
  */
 export function append(anchor, dom) {
 	if (hydrating) {
-		/** @type {Effect} */ (active_effect).nodes_end = hydrate_node;
+		var effect = /** @type {Effect & { nodes: EffectNodes }} */ (active_effect);
+
+		// When hydrating and outer component and an inner component is async, i.e. blocked on a promise,
+		// then by the time the inner resolves we have already advanced to the end of the hydrated nodes
+		// of the parent component. Check for defined for that reason to avoid rewinding the parent's end marker.
+		if ((effect.f & REACTION_RAN) === 0 || effect.nodes.end === null) {
+			effect.nodes.end = hydrate_node;
+		}
+
 		hydrate_next();
 		return;
 	}
@@ -249,3 +377,25 @@ export function append(anchor, dom) {
 
 	anchor.before(/** @type {Node} */ (dom));
 }
+
+/**
+ * Create (or hydrate) an unique UID for the component instance.
+ */
+export function props_id() {
+	if (
+		hydrating &&
+		hydrate_node &&
+		hydrate_node.nodeType === COMMENT_NODE &&
+		hydrate_node.textContent?.startsWith(`$`)
+	) {
+		const id = hydrate_node.textContent.substring(1);
+		hydrate_next();
+		return id;
+	}
+
+	// @ts-expect-error This way we ensure the id is unique even across Svelte runtimes
+	(window.__svelte ??= {}).uid ??= 1;
+
+	// @ts-expect-error
+	return `c${window.__svelte.uid++}`;
+}
diff --git a/packages/svelte/src/internal/client/dom/types.d.ts b/packages/svelte/src/internal/client/dom/types.d.ts
new file mode 100644
index 0000000000..bc3525919b
--- /dev/null
+++ b/packages/svelte/src/internal/client/dom/types.d.ts
@@ -0,0 +1,4 @@
+export type TemplateStructure =
+	| string
+	| undefined
+	| [string, Record<string, string> | undefined, ...TemplateStructure[]];
diff --git a/packages/svelte/src/internal/client/error-handling.js b/packages/svelte/src/internal/client/error-handling.js
new file mode 100644
index 0000000000..5d16759266
--- /dev/null
+++ b/packages/svelte/src/internal/client/error-handling.js
@@ -0,0 +1,118 @@
+/** @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 { ERROR_VALUE, BOUNDARY_EFFECT, REACTION_RAN, EFFECT } from './constants.js';
+import { define_property, get_descriptor } from '../shared/utils.js';
+import { active_effect, active_reaction } from './runtime.js';
+
+const adjustments = new WeakMap();
+
+/**
+ * @param {unknown} error
+ */
+export function handle_error(error) {
+	var effect = active_effect;
+
+	// for unowned deriveds, don't throw until we read the value
+	if (effect === null) {
+		/** @type {Derived} */ (active_reaction).f |= ERROR_VALUE;
+		return error;
+	}
+
+	if (DEV && error instanceof Error && !adjustments.has(error)) {
+		adjustments.set(error, get_adjustments(error, effect));
+	}
+
+	// if the error occurred while creating this subtree, we let it
+	// bubble up until it hits a boundary that can handle it, unless
+	// it's an $effect in which case it doesn't run immediately
+	if ((effect.f & REACTION_RAN) === 0 && (effect.f & EFFECT) === 0) {
+		if (DEV && !effect.parent && error instanceof Error) {
+			apply_adjustments(error);
+		}
+
+		throw error;
+	}
+
+	// otherwise we bubble up the effect tree ourselves
+	invoke_error_boundary(error, effect);
+}
+
+/**
+ * @param {unknown} error
+ * @param {Effect | null} effect
+ */
+export function invoke_error_boundary(error, effect) {
+	while (effect !== null) {
+		if ((effect.f & BOUNDARY_EFFECT) !== 0) {
+			if ((effect.f & REACTION_RAN) === 0) {
+				// we are still creating the boundary effect
+				throw error;
+			}
+
+			try {
+				/** @type {Boundary} */ (effect.b).error(error);
+				return;
+			} catch (e) {
+				error = e;
+			}
+		}
+
+		effect = effect.parent;
+	}
+
+	if (DEV && error instanceof Error) {
+		apply_adjustments(error);
+	}
+
+	throw error;
+}
+
+/**
+ * Add useful information to the error message/stack in development
+ * @param {Error} error
+ * @param {Effect} effect
+ */
+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
+	// or it will throw a different error swallowing the original error
+	if (message_descriptor && !message_descriptor.configurable) return;
+
+	var indent = is_firefox ? '  ' : '\t';
+	var component_stack = `\n${indent}in ${effect.fn?.name || '<unknown>'}`;
+	var context = effect.ctx;
+
+	while (context !== null) {
+		component_stack += `\n${indent}in ${context.function?.[FILENAME].split('/').pop()}`;
+		context = context.p;
+	}
+
+	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
+		});
+
+		define_property(error, 'stack', {
+			value: adjusted.stack
+		});
+	}
+}
diff --git a/packages/svelte/src/internal/client/errors.js b/packages/svelte/src/internal/client/errors.js
index 56c0cc31df..d60c2dd280 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}
@@ -11,6 +29,7 @@ export function bind_invalid_checkbox_value() {
 		const error = new Error(`bind_invalid_checkbox_value\nUsing \`bind:value\` together with a checkbox input is not allowed. Use \`bind:checked\` instead\nhttps://svelte.dev/e/bind_invalid_checkbox_value`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/bind_invalid_checkbox_value`);
@@ -29,6 +48,7 @@ export function bind_invalid_export(component, key, name) {
 		const error = new Error(`bind_invalid_export\nComponent ${component} has an export named \`${key}\` that a consumer component is trying to access using \`bind:${key}\`, which is disallowed. Instead, use \`bind:this\` (e.g. \`<${name} bind:this={component} />\`) and then access the property on the bound component instance (e.g. \`component.${key}\`)\nhttps://svelte.dev/e/bind_invalid_export`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/bind_invalid_export`);
@@ -47,6 +67,7 @@ export function bind_not_bindable(key, component, name) {
 		const error = new Error(`bind_not_bindable\nA component is attempting to bind to a non-bindable property \`${key}\` belonging to ${component} (i.e. \`<${name} bind:${key}={...}>\`). To mark a property as bindable: \`let { ${key} = $bindable() } = $props()\`\nhttps://svelte.dev/e/bind_not_bindable`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/bind_not_bindable`);
@@ -54,17 +75,17 @@ export function bind_not_bindable(key, component, name) {
 }
 
 /**
- * %parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more information
- * @param {string} parent
+ * Calling `%method%` on a component instance (of %component%) is no longer valid in Svelte 5
  * @param {string} method
  * @param {string} component
  * @returns {never}
  */
-export function component_api_changed(parent, method, component) {
+export function component_api_changed(method, component) {
 	if (DEV) {
-		const error = new Error(`component_api_changed\n${parent} called \`${method}\` on an instance of ${component}, which is no longer valid in Svelte 5. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more information\nhttps://svelte.dev/e/component_api_changed`);
+		const error = new Error(`component_api_changed\nCalling \`${method}\` on a component instance (of ${component}) is no longer valid in Svelte 5\nhttps://svelte.dev/e/component_api_changed`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/component_api_changed`);
@@ -72,16 +93,17 @@ export function component_api_changed(parent, method, component) {
 }
 
 /**
- * Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more information
+ * Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working.
  * @param {string} component
  * @param {string} name
  * @returns {never}
  */
 export function component_api_invalid_new(component, name) {
 	if (DEV) {
-		const error = new Error(`component_api_invalid_new\nAttempted to instantiate ${component} with \`new ${name}\`, which is no longer valid in Svelte 5. If this component is not under your control, set the \`compatibility.componentApi\` compiler option to \`4\` to keep it working. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more information\nhttps://svelte.dev/e/component_api_invalid_new`);
+		const error = new Error(`component_api_invalid_new\nAttempted to instantiate ${component} with \`new ${name}\`, which is no longer valid in Svelte 5. If this component is not under your control, set the \`compatibility.componentApi\` compiler option to \`4\` to keep it working.\nhttps://svelte.dev/e/component_api_invalid_new`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/component_api_invalid_new`);
@@ -97,6 +119,7 @@ export function derived_references_self() {
 		const error = new Error(`derived_references_self\nA derived value cannot reference itself recursively\nhttps://svelte.dev/e/derived_references_self`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/derived_references_self`);
@@ -112,15 +135,37 @@ export function derived_references_self() {
  */
 export function each_key_duplicate(a, b, value) {
 	if (DEV) {
-		const error = new Error(`each_key_duplicate\n${value ? `Keyed each block has duplicate key \`${value}\` at indexes ${a} and ${b}` : `Keyed each block has duplicate key at indexes ${a} and ${b}`}\nhttps://svelte.dev/e/each_key_duplicate`);
+		const error = new Error(`each_key_duplicate\n${value
+			? `Keyed each block has duplicate key \`${value}\` at indexes ${a} and ${b}`
+			: `Keyed each block has duplicate key at indexes ${a} and ${b}`}\nhttps://svelte.dev/e/each_key_duplicate`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/each_key_duplicate`);
 	}
 }
 
+/**
+ * Keyed each block has key that is not idempotent — the key for item at index %index% was `%a%` but is now `%b%`. Keys must be the same each time for a given item
+ * @param {string} index
+ * @param {string} a
+ * @param {string} b
+ * @returns {never}
+ */
+export function each_key_volatile(index, a, b) {
+	if (DEV) {
+		const error = new Error(`each_key_volatile\nKeyed each block has key that is not idempotent — the key for item at index ${index} was \`${a}\` but is now \`${b}\`. Keys must be the same each time for a given item\nhttps://svelte.dev/e/each_key_volatile`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/each_key_volatile`);
+	}
+}
+
 /**
  * `%rune%` cannot be used inside an effect cleanup function
  * @param {string} rune
@@ -131,6 +176,7 @@ export function effect_in_teardown(rune) {
 		const error = new Error(`effect_in_teardown\n\`${rune}\` cannot be used inside an effect cleanup function\nhttps://svelte.dev/e/effect_in_teardown`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/effect_in_teardown`);
@@ -146,6 +192,7 @@ export function effect_in_unowned_derived() {
 		const error = new Error(`effect_in_unowned_derived\nEffect cannot be created inside a \`$derived\` value that was not itself created inside an effect\nhttps://svelte.dev/e/effect_in_unowned_derived`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/effect_in_unowned_derived`);
@@ -162,6 +209,7 @@ export function effect_orphan(rune) {
 		const error = new Error(`effect_orphan\n\`${rune}\` can only be used inside an effect (e.g. during component initialisation)\nhttps://svelte.dev/e/effect_orphan`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/effect_orphan`);
@@ -169,20 +217,118 @@ 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';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/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`);
+	}
+}
+
+/**
+ * Cannot commit a fork that was already discarded
+ * @returns {never}
+ */
+export function fork_discarded() {
+	if (DEV) {
+		const error = new Error(`fork_discarded\nCannot commit a fork that was already discarded\nhttps://svelte.dev/e/fork_discarded`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/fork_discarded`);
+	}
+}
+
+/**
+ * Cannot create a fork inside an effect or when state changes are pending
+ * @returns {never}
+ */
+export function fork_timing() {
+	if (DEV) {
+		const error = new Error(`fork_timing\nCannot create a fork inside an effect or when state changes are pending\nhttps://svelte.dev/e/fork_timing`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/fork_timing`);
+	}
+}
+
+/**
+ * `getAbortSignal()` can only be called inside an effect or derived
+ * @returns {never}
+ */
+export function get_abort_signal_outside_reaction() {
+	if (DEV) {
+		const error = new Error(`get_abort_signal_outside_reaction\n\`getAbortSignal()\` can only be called inside an effect or derived\nhttps://svelte.dev/e/get_abort_signal_outside_reaction`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/get_abort_signal_outside_reaction`);
+	}
+}
+
+/**
+ * Expected to find a hydratable with key `%key%` during hydration, but did not.
+ * @param {string} key
+ * @returns {never}
+ */
+export function hydratable_missing_but_required(key) {
+	if (DEV) {
+		const error = new Error(`hydratable_missing_but_required\nExpected to find a hydratable with key \`${key}\` during hydration, but did not.\nhttps://svelte.dev/e/hydratable_missing_but_required`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/hydratable_missing_but_required`);
+	}
+}
+
 /**
  * Failed to hydrate the application
  * @returns {never}
@@ -192,6 +338,7 @@ export function hydration_failed() {
 		const error = new Error(`hydration_failed\nFailed to hydrate the application\nhttps://svelte.dev/e/hydration_failed`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/hydration_failed`);
@@ -207,6 +354,7 @@ export function invalid_snippet() {
 		const error = new Error(`invalid_snippet\nCould not \`{@render}\` snippet due to the expression being \`null\` or \`undefined\`. Consider using optional chaining \`{@render snippet?.()}\`\nhttps://svelte.dev/e/invalid_snippet`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/invalid_snippet`);
@@ -223,6 +371,7 @@ export function lifecycle_legacy_only(name) {
 		const error = new Error(`lifecycle_legacy_only\n\`${name}(...)\` cannot be used in runes mode\nhttps://svelte.dev/e/lifecycle_legacy_only`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/lifecycle_legacy_only`);
@@ -239,6 +388,7 @@ export function props_invalid_value(key) {
 		const error = new Error(`props_invalid_value\nCannot do \`bind:${key}={undefined}\` when \`${key}\` has a fallback value\nhttps://svelte.dev/e/props_invalid_value`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/props_invalid_value`);
@@ -255,6 +405,7 @@ export function props_rest_readonly(property) {
 		const error = new Error(`props_rest_readonly\nRest element properties of \`$props()\` such as \`${property}\` are readonly\nhttps://svelte.dev/e/props_rest_readonly`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/props_rest_readonly`);
@@ -271,12 +422,29 @@ export function rune_outside_svelte(rune) {
 		const error = new Error(`rune_outside_svelte\nThe \`${rune}\` rune is only available inside \`.svelte\` and \`.svelte.js/ts\` files\nhttps://svelte.dev/e/rune_outside_svelte`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/rune_outside_svelte`);
 	}
 }
 
+/**
+ * `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}
@@ -286,6 +454,7 @@ export function state_descriptors_fixed() {
 		const error = new Error(`state_descriptors_fixed\nProperty descriptors defined on \`$state\` objects must contain \`value\` and always be \`enumerable\`, \`configurable\` and \`writable\`.\nhttps://svelte.dev/e/state_descriptors_fixed`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/state_descriptors_fixed`);
@@ -301,6 +470,7 @@ export function state_prototype_fixed() {
 		const error = new Error(`state_prototype_fixed\nCannot set prototype of \`$state\` object\nhttps://svelte.dev/e/state_prototype_fixed`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/state_prototype_fixed`);
@@ -308,31 +478,33 @@ export function state_prototype_fixed() {
 }
 
 /**
- * Reading state that was created inside the same derived is forbidden. Consider using `untrack` to read locally created state
+ * Updating state inside `$derived(...)`, `$inspect(...)` or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
  * @returns {never}
  */
-export function state_unsafe_local_read() {
+export function state_unsafe_mutation() {
 	if (DEV) {
-		const error = new Error(`state_unsafe_local_read\nReading state that was created inside the same derived is forbidden. Consider using \`untrack\` to read locally created state\nhttps://svelte.dev/e/state_unsafe_local_read`);
+		const error = new Error(`state_unsafe_mutation\nUpdating state inside \`$derived(...)\`, \`$inspect(...)\` or a template expression is forbidden. If the value should not be reactive, declare it without \`$state\`\nhttps://svelte.dev/e/state_unsafe_mutation`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
-		throw new Error(`https://svelte.dev/e/state_unsafe_local_read`);
+		throw new Error(`https://svelte.dev/e/state_unsafe_mutation`);
 	}
 }
 
 /**
- * Updating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
+ * A `<svelte:boundary>` `reset` function cannot be called while an error is still being handled
  * @returns {never}
  */
-export function state_unsafe_mutation() {
+export function svelte_boundary_reset_onerror() {
 	if (DEV) {
-		const error = new Error(`state_unsafe_mutation\nUpdating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without \`$state\`\nhttps://svelte.dev/e/state_unsafe_mutation`);
+		const error = new Error(`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/state_unsafe_mutation`);
+		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/hydratable.js b/packages/svelte/src/internal/client/hydratable.js
new file mode 100644
index 0000000000..601b860a48
--- /dev/null
+++ b/packages/svelte/src/internal/client/hydratable.js
@@ -0,0 +1,33 @@
+import { async_mode_flag } from '../flags/index.js';
+import { hydrating } from './dom/hydration.js';
+import * as w from './warnings.js';
+import * as e from './errors.js';
+import { DEV } from 'esm-env';
+
+/**
+ * @template T
+ * @param {string} key
+ * @param {() => T} fn
+ * @returns {T}
+ */
+export function hydratable(key, fn) {
+	if (!async_mode_flag) {
+		e.experimental_async_required('hydratable');
+	}
+
+	if (hydrating) {
+		const store = window.__svelte?.h;
+
+		if (store?.has(key)) {
+			return /** @type {T} */ (store.get(key));
+		}
+
+		if (DEV) {
+			e.hydratable_missing_but_required(key);
+		} else {
+			w.hydratable_missing_but_expected(key);
+		}
+	}
+
+	return fn();
+}
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index b95acb8a6c..00f73c2358 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -1,22 +1,19 @@
+export { createAttachmentKey as attachment } from '../../attachments/index.js';
 export { FILENAME, HMR, NAMESPACE_SVG } from '../../constants.js';
-export { assign, assign_and, assign_or, assign_nullish } from './dev/assign.js';
+export { push, pop, add_svelte_meta } from './context.js';
+export { assign, assign_async } from './dev/assign.js';
 export { cleanup_styles } from './dev/css.js';
 export { add_locations } from './dev/elements.js';
 export { hmr } from './dev/hmr.js';
-export {
-	ADD_OWNER,
-	add_owner,
-	mark_module_start,
-	mark_module_end,
-	add_owner_effect,
-	skip_ownership_validation
-} from './dev/ownership.js';
+export { create_ownership_validator } from './dev/ownership.js';
 export { check_target, legacy_api } from './dev/legacy.js';
-export { trace } from './dev/tracing.js';
+export { trace, tag, tag_proxy } from './dev/tracing.js';
 export { inspect } from './dev/inspect.js';
+export { 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';
@@ -28,22 +25,25 @@ export { portal, portal_outlet } from './dom/blocks/svelte-portal.js';
 export { head } from './dom/blocks/svelte-head.js';
 export { append_styles } from './dom/css.js';
 export { action } from './dom/elements/actions.js';
+export { attach } from './dom/elements/attachments.js';
 export {
 	remove_input_defaults,
 	set_attribute,
-	set_attributes,
+	attribute_effect,
 	set_custom_element_data,
 	set_xlink_attribute,
-	handle_lazy_img,
 	set_value,
 	set_checked,
 	set_selected,
 	set_default_checked,
-	set_default_value
+	set_default_value,
+	CLASS,
+	STYLE
 } from './dom/elements/attributes.js';
-export { set_class, set_svg_class, set_mathml_class, toggle_class } from './dom/elements/class.js';
-export { apply, event, delegate, replay_events } from './dom/elements/events.js';
+export { set_class } from './dom/elements/class.js';
+export { apply, event, delegated, delegate, replay_events } from './dom/elements/events.js';
 export { autofocus, remove_textarea_child } from './dom/elements/misc.js';
+export { customizable_select, selectedcontent } from './dom/elements/customizable-select.js';
 export { set_style } from './dom/elements/style.js';
 export { animation, transition } from './dom/elements/transitions.js';
 export { bind_active_element } from './dom/elements/bindings/document.js';
@@ -91,26 +91,42 @@ export {
 export {
 	append,
 	comment,
-	ns_template,
-	svg_template_with_script,
-	mathml_template,
-	template,
-	template_with_script,
-	text
+	from_html,
+	from_mathml,
+	from_svg,
+	from_tree,
+	text,
+	props_id,
+	with_script
 } from './dom/template.js';
-export { derived, derived_safe_equal } from './reactivity/deriveds.js';
 export {
+	for_await_track_reactivity_loss,
+	run,
+	save,
+	track_reactivity_loss,
+	run_after_blockers,
+	wait
+} from './reactivity/async.js';
+export { eager, flushSync as flush } 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,
 	legacy_pre_effect_reset,
 	render_effect,
 	template_effect,
+	deferred_template_effect,
 	effect,
 	user_effect,
 	user_pre_effect
 } from './reactivity/effects.js';
-export { mutable_state, mutate, set, state } from './reactivity/sources.js';
+export { mutable_source, mutate, set, state, update, update_pre } from './reactivity/sources.js';
 export {
 	prop,
 	rest_props,
@@ -130,28 +146,19 @@ 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,
-	flush_sync,
 	tick,
 	untrack,
-	update,
-	update_pre,
-	exclude_from_object,
-	pop,
-	push,
 	deep_read,
 	deep_read_state,
-	getAllContexts,
-	getContext,
-	setContext,
-	hasContext
+	active_effect
 } from './runtime.js';
-export { validate_binding, validate_each_keys, validate_prop_bindings } from './validate.js';
+export { validate_binding } from './validate.js';
 export { raf } from './timing.js';
 export { proxy } from './proxy.js';
 export { create_custom_element } from './dom/elements/custom-element.js';
@@ -162,14 +169,16 @@ export {
 	$window as window,
 	$document as document
 } from './dom/operations.js';
-export { attr } from '../shared/attributes.js';
+export { attr, clsx } from '../shared/attributes.js';
 export { snapshot } from '../shared/clone.js';
-export { noop, fallback } from '../shared/utils.js';
+export { noop, fallback, to_array, exclude_from_object } from '../shared/utils.js';
 export {
 	invalid_default_snippet,
 	validate_dynamic_element_tag,
 	validate_store,
-	validate_void_dynamic_element
+	validate_void_dynamic_element,
+	prevent_snippet_stringification
 } from '../shared/validate.js';
 export { strict_equals, equals } from './dev/equality.js';
 export { log_if_contains_state } from './dev/console-log.js';
+export { invoke_error_boundary } from './error-handling.js';
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 d74f55866f..51333e597f 100644
--- a/packages/svelte/src/internal/client/proxy.js
+++ b/packages/svelte/src/internal/client/proxy.js
@@ -1,6 +1,13 @@
-/** @import { ProxyMetadata, ProxyStateObject, Source } from '#client' */
+/** @import { Source } from '#client' */
 import { DEV } from 'esm-env';
-import { get, component_context, active_effect } 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,26 +15,29 @@ import {
 	is_array,
 	object_prototype
 } from '../shared/utils.js';
-import { check_ownership, widen_ownership } from './dev/ownership.js';
-import { source, set } from './reactivity/sources.js';
-import { STATE_SYMBOL, STATE_SYMBOL_METADATA } from './constants.js';
+import {
+	state as source,
+	set,
+	increment,
+	flush_eager_effects,
+	set_eager_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';
-import { get_stack } from './dev/tracing.js';
+import { tag } from './dev/tracing.js';
+import { get_error } from '../shared/dev.js';
+import { tracing_mode_flag } from '../flags/index.js';
+
+// TODO move all regexes into shared module?
+const regex_is_valid_identifier = /^[a-zA-Z_$][a-zA-Z_$0-9]*$/;
 
 /**
  * @template T
  * @param {T} value
- * @param {ProxyMetadata | null} [parent]
- * @param {Source<T>} [prev] dev mode only
  * @returns {T}
  */
-export function proxy(value, parent = null, prev) {
-	/** @type {Error | null} */
-	var stack = null;
-	if (DEV) {
-		stack = get_stack('CreatedAt');
-	}
+export function proxy(value) {
 	// if non-proxyable, or is already a proxy, return `value`
 	if (typeof value !== 'object' || value === null || STATE_SYMBOL in value) {
 		return value;
@@ -44,35 +54,60 @@ export function proxy(value, parent = null, prev) {
 	var is_proxied_array = is_array(value);
 	var version = source(0);
 
+	var stack = DEV && tracing_mode_flag ? get_error('created at') : null;
+	var parent_version = update_version;
+
+	/**
+	 * Executes the proxy in the context of the reaction it was originally created in, if any
+	 * @template T
+	 * @param {() => T} fn
+	 */
+	var with_parent = (fn) => {
+		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);
+
+		var result = fn();
+
+		set_active_reaction(reaction);
+		set_update_version(version);
+
+		return result;
+	};
+
 	if (is_proxied_array) {
 		// 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)));
+		}
 	}
 
-	/** @type {ProxyMetadata} */
-	var metadata;
-
-	if (DEV) {
-		metadata = {
-			parent,
-			owners: null
-		};
-
-		if (prev) {
-			// Reuse owners from previous state; necessary because reassignment is not guaranteed to have correct component context.
-			// If no previous proxy exists we play it safe and assume ownerless state
-			// @ts-expect-error
-			const prev_owners = prev.v?.[STATE_SYMBOL_METADATA]?.owners;
-			metadata.owners = prev_owners ? new Set(prev_owners) : null;
-		} else {
-			metadata.owners =
-				parent === null
-					? component_context !== null
-						? new Set([component_context.function])
-						: null
-					: new Set();
+	/** Used in dev for $inspect.trace() */
+	var path = '';
+	let updating = false;
+	/** @param {string} new_path */
+	function update_path(new_path) {
+		if (updating) return;
+		updating = true;
+		path = new_path;
+
+		tag(version, `${path} version`);
+
+		// rename all child sources and child proxies
+		for (const [prop, source] of sources) {
+			tag(source, get_label(path, prop));
 		}
+		updating = false;
 	}
 
 	return new Proxy(/** @type {any} */ (value), {
@@ -89,14 +124,18 @@ export function proxy(value, parent = null, prev) {
 				// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor#invariants
 				e.state_descriptors_fixed();
 			}
-
 			var s = sources.get(prop);
-
 			if (s === undefined) {
-				s = source(descriptor.value, stack);
-				sources.set(prop, s);
+				with_parent(() => {
+					var s = source(descriptor.value, stack);
+					sources.set(prop, s);
+					if (DEV && typeof prop === 'string') {
+						tag(s, get_label(path, prop));
+					}
+					return s;
+				});
 			} else {
-				set(s, proxy(descriptor.value, metadata));
+				set(s, descriptor.value, true);
 			}
 
 			return true;
@@ -107,62 +146,52 @@ export function proxy(value, parent = null, prev) {
 
 			if (s === undefined) {
 				if (prop in target) {
-					sources.set(prop, source(UNINITIALIZED, stack));
-				}
-			} 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);
+					const s = with_parent(() => source(UNINITIALIZED, stack));
+					sources.set(prop, s);
+					increment(version);
 
-					if (Number.isInteger(n) && n < ls.v) {
-						set(ls, n);
+					if (DEV) {
+						tag(s, get_label(path, prop));
 					}
 				}
+			} else {
 				set(s, UNINITIALIZED);
-				update_version(version);
+				increment(version);
 			}
 
 			return true;
 		},
 
 		get(target, prop, receiver) {
-			if (DEV && prop === STATE_SYMBOL_METADATA) {
-				return metadata;
-			}
-
 			if (prop === STATE_SYMBOL) {
 				return value;
 			}
 
+			if (DEV && prop === PROXY_PATH_SYMBOL) {
+				return update_path;
+			}
+
 			var s = sources.get(prop);
 			var exists = prop in target;
 
 			// create a source, but only if it's an own property and not a prototype property
 			if (s === undefined && (!exists || get_descriptor(target, prop)?.writable)) {
-				s = source(proxy(exists ? target[prop] : UNINITIALIZED, metadata), stack);
+				s = with_parent(() => {
+					var p = proxy(exists ? target[prop] : UNINITIALIZED);
+					var s = source(p, stack);
+
+					if (DEV) {
+						tag(s, get_label(path, prop));
+					}
+
+					return s;
+				});
+
 				sources.set(prop, s);
 			}
 
 			if (s !== undefined) {
 				var v = get(s);
-
-				// In case of something like `foo = bar.map(...)`, foo would have ownership
-				// of the array itself, while the individual items would have ownership
-				// of the component that created bar. That means if we later do `foo[0].baz = 42`,
-				// we could get a false-positive ownership violation, since the two proxies
-				// are not connected to each other via the parent metadata relationship.
-				// For this reason, we need to widen the ownership of the children
-				// upon access when we detect they are not connected.
-				if (DEV) {
-					/** @type {ProxyMetadata | undefined} */
-					var prop_metadata = v?.[STATE_SYMBOL_METADATA];
-					if (prop_metadata && prop_metadata?.parent !== metadata) {
-						widen_ownership(metadata, prop_metadata);
-					}
-				}
-
 				return v === UNINITIALIZED ? undefined : v;
 			}
 
@@ -193,10 +222,6 @@ export function proxy(value, parent = null, prev) {
 		},
 
 		has(target, prop) {
-			if (DEV && prop === STATE_SYMBOL_METADATA) {
-				return true;
-			}
-
 			if (prop === STATE_SYMBOL) {
 				return true;
 			}
@@ -209,7 +234,17 @@ export function proxy(value, parent = null, prev) {
 				(active_effect !== null && (!has || get_descriptor(target, prop)?.writable))
 			) {
 				if (s === undefined) {
-					s = source(has ? proxy(target[prop], metadata) : UNINITIALIZED, stack);
+					s = with_parent(() => {
+						var p = has ? proxy(target[prop]) : UNINITIALIZED;
+						var s = source(p, stack);
+
+						if (DEV) {
+							tag(s, get_label(path, prop));
+						}
+
+						return s;
+					});
+
 					sources.set(prop, s);
 				}
 
@@ -233,11 +268,15 @@ export function proxy(value, parent = null, prev) {
 					if (other_s !== undefined) {
 						set(other_s, UNINITIALIZED);
 					} else if (i in target) {
-						// If the item exists in the original, we need to create a uninitialized source,
+						// If the item exists in the original, we need to create an uninitialized source,
 						// else a later read of the property would result in a source being created with
 						// the value of the original item at that index.
-						other_s = source(UNINITIALIZED, stack);
+						other_s = with_parent(() => source(UNINITIALIZED, stack));
 						sources.set(i + '', other_s);
+
+						if (DEV) {
+							tag(other_s, get_label(path, i));
+						}
 					}
 				}
 			}
@@ -248,22 +287,20 @@ export function proxy(value, parent = null, prev) {
 			// object property before writing to that property.
 			if (s === undefined) {
 				if (!has || get_descriptor(target, prop)?.writable) {
-					s = source(undefined, stack);
-					set(s, proxy(value, metadata));
+					s = with_parent(() => source(undefined, stack));
+
+					if (DEV) {
+						tag(s, get_label(path, prop));
+					}
+					set(s, proxy(value));
+
 					sources.set(prop, s);
 				}
 			} else {
 				has = s.v !== UNINITIALIZED;
-				set(s, proxy(value, metadata));
-			}
 
-			if (DEV) {
-				/** @type {ProxyMetadata | undefined} */
-				var prop_metadata = value?.[STATE_SYMBOL_METADATA];
-				if (prop_metadata && prop_metadata?.parent !== metadata) {
-					widen_ownership(metadata, prop_metadata);
-				}
-				check_ownership(metadata);
+				var p = with_parent(() => proxy(value));
+				set(s, p);
 			}
 
 			var descriptor = Reflect.getOwnPropertyDescriptor(target, prop);
@@ -287,7 +324,7 @@ export function proxy(value, parent = null, prev) {
 					}
 				}
 
-				update_version(version);
+				increment(version);
 			}
 
 			return true;
@@ -317,19 +354,31 @@ export function proxy(value, parent = null, prev) {
 }
 
 /**
- * @param {Source<number>} signal
- * @param {1 | -1} [d]
+ * @param {string} path
+ * @param {string | symbol} prop
  */
-function update_version(signal, d = 1) {
-	set(signal, signal.v + d);
+function get_label(path, prop) {
+	if (typeof prop === 'symbol') return `${path}[Symbol(${prop.description ?? ''})]`;
+	if (regex_is_valid_identifier.test(prop)) return `${path}.${prop}`;
+	return /^\d+$/.test(prop) ? `${path}[${prop}]` : `${path}['${prop}']`;
 }
 
 /**
  * @param {any} value
  */
 export function get_proxied_value(value) {
-	if (value !== null && typeof value === 'object' && STATE_SYMBOL in value) {
-		return value[STATE_SYMBOL];
+	try {
+		if (value !== null && typeof value === 'object' && STATE_SYMBOL in value) {
+			return value[STATE_SYMBOL];
+		}
+	} catch {
+		// the above if check can throw an error if the value in question
+		// is the contentWindow of an iframe on another domain, in which
+		// case we want to just return the value (because it's definitely
+		// not a proxied value) so we don't break any JavaScript interacting
+		// with that iframe (such as various payment companies client side
+		// JavaScript libraries interacting with their iframes on the same
+		// domain)
 	}
 
 	return value;
@@ -342,3 +391,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_eager_effects_deferred();
+				var result = value.apply(this, args);
+				flush_eager_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..32d33d6f7a
--- /dev/null
+++ b/packages/svelte/src/internal/client/reactivity/async.js
@@ -0,0 +1,379 @@
+/** @import { Blocker, Effect, Source, Value } from '#client' */
+import { DESTROYED, STALE_REACTION } from '#client/constants';
+import { DEV } from 'esm-env';
+import {
+	component_context,
+	dev_stack,
+	is_runes,
+	set_component_context,
+	set_dev_stack
+} from '../context.js';
+import { 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 { Batch, current_batch } from './batch.js';
+import {
+	async_derived,
+	reactivity_loss_tracker,
+	derived,
+	derived_safe_equal,
+	set_reactivity_loss_tracker
+} from './deriveds.js';
+import { aborted } from './effects.js';
+
+/**
+ * @param {Blocker[]} blockers
+ * @param {Array<() => any>} sync
+ * @param {Array<() => Promise<any>>} async
+ * @param {(values: Value[]) => any} fn
+ */
+export function flatten(blockers, sync, async, fn) {
+	const d = is_runes() ? derived : derived_safe_equal;
+
+	// Filter out already-settled blockers - no need to wait for them
+	var pending = blockers.filter((b) => !b.settled);
+
+	var deriveds = sync.map(d);
+
+	if (DEV) {
+		deriveds.forEach((d, i) => {
+			// TODO this is kinda useful for debugging but a lousy implementation —
+			// maybe the compiler could pass through the template string
+			d.label = sync[i]
+				.toString()
+				.replace('() => ', '')
+				.replaceAll('$.eager(() => ', '$state.eager(')
+				.replace(/\$\.get\((.+?)\)/g, (_, id) => id);
+		});
+	}
+
+	if (async.length === 0 && pending.length === 0) {
+		fn(deriveds);
+		return;
+	}
+
+	var parent = /** @type {Effect} */ (active_effect);
+
+	var restore = capture();
+	var blocker_promise =
+		pending.length === 1
+			? pending[0].promise
+			: pending.length > 1
+				? Promise.all(pending.map((b) => b.promise))
+				: null;
+
+	/**
+	 * @param {Source[]} async
+	 */
+	function finish(async) {
+		if ((parent.f & DESTROYED) !== 0) {
+			return;
+		}
+
+		restore();
+
+		try {
+			fn([...deriveds, ...async]);
+		} catch (error) {
+			invoke_error_boundary(error, parent);
+		}
+
+		unset_context();
+	}
+
+	var decrement_pending = increment_pending();
+
+	// Fast path: blockers but no async expressions
+	if (async.length === 0) {
+		/** @type {Promise<any>} */ (blocker_promise).then(() => finish([])).finally(decrement_pending);
+		return;
+	}
+
+	// Full path: has async expressions
+	function run() {
+		Promise.all(async.map((expression) => async_derived(expression)))
+			.then(finish)
+			.catch((error) => invoke_error_boundary(error, parent))
+			.finally(decrement_pending);
+	}
+
+	if (blocker_promise) {
+		blocker_promise.then(() => {
+			restore();
+			run();
+			unset_context();
+		});
+	} else {
+		run();
+	}
+}
+
+/**
+ * @param {Blocker[]} blockers
+ * @param {(values: Value[]) => any} fn
+ */
+export function run_after_blockers(blockers, fn) {
+	flatten(blockers, [], [], fn);
+}
+
+/**
+ * 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).
+ */
+export function capture() {
+	var previous_effect = /** @type {Effect} */ (active_effect);
+	var previous_reaction = active_reaction;
+	var previous_component_context = component_context;
+	var previous_batch = /** @type {Batch} */ (current_batch);
+
+	if (DEV) {
+		var previous_dev_stack = dev_stack;
+	}
+
+	return function restore(activate_batch = true) {
+		set_active_effect(previous_effect);
+		set_active_reaction(previous_reaction);
+		set_component_context(previous_component_context);
+
+		if (activate_batch && (previous_effect.f & DESTROYED) === 0) {
+			// TODO we only need optional chaining here because `{#await ...}` blocks
+			// are anomalous. Once we retire them we can get rid of it
+			previous_batch?.activate();
+			previous_batch?.apply();
+		}
+
+		if (DEV) {
+			set_reactivity_loss_tracker(null);
+			set_dev_stack(previous_dev_stack);
+		}
+	};
+}
+
+/**
+ * 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 = reactivity_loss_tracker;
+	// Ensure that unrelated reads after an async operation is kicked off don't cause false positives
+	queueMicrotask(() => {
+		if (reactivity_loss_tracker === previous_async_effect) {
+			set_reactivity_loss_tracker(null);
+		}
+	});
+
+	var value = await promise;
+
+	return () => {
+		set_reactivity_loss_tracker(previous_async_effect);
+		// While this can result in false negatives it also guards against the more important
+		// false positives that would occur if this is the last in a chain of async operations,
+		// and the reactivity_loss_tracker would then stay around until the next async operation happens.
+		queueMicrotask(() => {
+			if (reactivity_loss_tracker === previous_async_effect) {
+				set_reactivity_loss_tracker(null);
+			}
+		});
+
+		return value;
+	};
+}
+
+/**
+ * Used in `for await` loops in DEV, so
+ * that we can emit `await_reactivity_loss` warnings
+ * after each `async_iterator` result resolves and
+ * after the `async_iterator` return resolves (if it runs)
+ * @template T
+ * @template TReturn
+ * @param {Iterable<T> | AsyncIterable<T>} iterable
+ * @returns {AsyncGenerator<T, TReturn | undefined>}
+ */
+export async function* for_await_track_reactivity_loss(iterable) {
+	// This is based on the algorithms described in ECMA-262:
+	// ForIn/OfBodyEvaluation
+	// https://tc39.es/ecma262/multipage/ecmascript-language-statements-and-declarations.html#sec-runtime-semantics-forin-div-ofbodyevaluation-lhs-stmt-iterator-lhskind-labelset
+	// AsyncIteratorClose
+	// https://tc39.es/ecma262/multipage/abstract-operations.html#sec-asynciteratorclose
+
+	/** @type {AsyncIterator<T, TReturn>} */
+	// @ts-ignore
+	const iterator = iterable[Symbol.asyncIterator]?.() ?? iterable[Symbol.iterator]?.();
+
+	if (iterator === undefined) {
+		throw new TypeError('value is not async iterable');
+	}
+
+	// eslint-disable-next-line no-useless-assignment
+	let invoke_return = true;
+
+	try {
+		while (true) {
+			const { done, value } = (await track_reactivity_loss(iterator.next()))();
+			if (done) {
+				invoke_return = false;
+				break;
+			}
+			var prev = reactivity_loss_tracker;
+			try {
+				yield value;
+			} catch (e) {
+				set_reactivity_loss_tracker(prev);
+				// If the yield throws, we need to call `return` but not return its value, instead rethrow
+				if (iterator.return !== undefined) {
+					(await track_reactivity_loss(iterator.return()))();
+				}
+				throw e;
+			}
+			set_reactivity_loss_tracker(prev);
+		}
+	} catch (error) {
+		invoke_return = false;
+		throw error;
+	} finally {
+		// If the iterator had an abrupt completion (break) and `return` is defined on the iterator, call it and return the value
+		if (invoke_return && iterator.return !== undefined) {
+			// eslint-disable-next-line no-unsafe-finally
+			return /** @type {TReturn} */ ((await track_reactivity_loss(iterator.return()))().value);
+		}
+	}
+}
+
+export function unset_context(deactivate_batch = true) {
+	set_active_effect(null);
+	set_active_reaction(null);
+	set_component_context(null);
+	if (deactivate_batch) current_batch?.deactivate();
+
+	if (DEV) {
+		set_reactivity_loss_tracker(null);
+		set_dev_stack(null);
+	}
+}
+
+/**
+ * @param {Array<() => void | Promise<void>>} thunks
+ */
+export function run(thunks) {
+	const restore = capture();
+
+	const decrement_pending = increment_pending();
+
+	var active = /** @type {Effect} */ (active_effect);
+
+	/** @type {null | { error: any }} */
+	var errored = null;
+
+	/** @param {any} error */
+	const handle_error = (error) => {
+		errored = { error }; // wrap in object in case a promise rejects with a falsy value
+
+		if (!aborted(active)) {
+			invoke_error_boundary(error, active);
+		}
+	};
+
+	var promise = Promise.resolve(thunks[0]()).catch(handle_error);
+
+	/** @type {Blocker} */
+	var blocker = { promise, settled: false };
+	var blockers = [blocker];
+
+	promise.finally(() => {
+		blocker.settled = true;
+		unset_context();
+	});
+
+	for (const fn of thunks.slice(1)) {
+		promise = promise
+			.then(() => {
+				restore();
+
+				try {
+					if (errored) {
+						throw errored.error;
+					}
+
+					if (aborted(active)) {
+						throw STALE_REACTION;
+					}
+
+					return fn();
+				} finally {
+					// We gotta unset context directly in case the function returns a promise, in which case
+					// unset_context in .finally() would be too late ...
+					unset_context();
+				}
+			})
+			.catch(handle_error);
+
+		const blocker = { promise, settled: false };
+		blockers.push(blocker);
+
+		promise.finally(() => {
+			blocker.settled = true;
+			// ... but we also need it after such a promise has resolved in case it restores our context
+			unset_context();
+		});
+	}
+
+	promise
+		// wait one more tick, so that template effects are
+		// guaranteed to run before `$effect(...)`
+		.then(() => Promise.resolve())
+		.finally(decrement_pending);
+
+	return blockers;
+}
+
+/**
+ * @param {Blocker[]} blockers
+ */
+export function wait(blockers) {
+	return Promise.all(blockers.map((b) => b.promise));
+}
+
+/**
+ * @returns {(skip?: boolean) => void}
+ */
+export function increment_pending() {
+	var effect = /** @type {Effect} */ (active_effect);
+	var boundary = effect.b; // undefined if called outside the render tree, e.g. a standalone $effect.root
+	var batch = /** @type {Batch} */ (current_batch);
+	var blocking = !!boundary?.is_rendered();
+
+	boundary?.update_pending_count(1, batch);
+	batch.increment(blocking, effect);
+
+	return () => {
+		boundary?.update_pending_count(-1, batch);
+		batch.decrement(blocking, effect);
+	};
+}
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..7d14b80519
--- /dev/null
+++ b/packages/svelte/src/internal/client/reactivity/batch.js
@@ -0,0 +1,1448 @@
+/** @import { Fork } from 'svelte' */
+/** @import { Derived, Effect, Reaction, Source, Value } from '#client' */
+import {
+	BLOCK_EFFECT,
+	BRANCH_EFFECT,
+	CLEAN,
+	DESTROYED,
+	DIRTY,
+	EFFECT,
+	ASYNC,
+	INERT,
+	RENDER_EFFECT,
+	ROOT_EFFECT,
+	MAYBE_DIRTY,
+	DERIVED,
+	EAGER_EFFECT,
+	ERROR_VALUE,
+	MANAGED_EFFECT,
+	REACTION_RAN,
+	DESTROYING
+} from '#client/constants';
+import { async_mode_flag } from '../../flags/index.js';
+import { deferred, define_property, includes } from '../../shared/utils.js';
+import {
+	active_effect,
+	active_reaction,
+	get,
+	increment_write_version,
+	is_dirty,
+	update_effect
+} from '../runtime.js';
+import * as e from '../errors.js';
+import { flush_tasks, queue_micro_task } from '../dom/task.js';
+import { DEV } from 'esm-env';
+import { invoke_error_boundary } from '../error-handling.js';
+import { flush_eager_effects, old_values, set_eager_effects, source, update } from './sources.js';
+import { eager_effect, teardown, unlink_effect } from './effects.js';
+import { defer_effect } from './utils.js';
+import { UNINITIALIZED } from '../../../constants.js';
+import { set_signal_status } from './status.js';
+import { legacy_is_updating_store } from './store.js';
+import { invariant } from '../../shared/dev.js';
+import { log_effect_tree } from '../dev/debug.js';
+import { OBSOLETE } from './deriveds.js';
+
+/** @type {Batch | null} */
+let first_batch = null;
+
+/** @type {Batch | null} */
+let last_batch = null;
+
+/** @type {Batch | null} */
+export let current_batch = null;
+
+/**
+ * This is needed to avoid overwriting inputs
+ * @type {Batch | null}
+ */
+export let previous_batch = null;
+
+/**
+ * When time travelling (i.e. working in one batch, while other batches
+ * still have ongoing work), we ignore the real values of affected
+ * signals in favour of their values within the batch
+ * @type {Map<Value, any> | null}
+ */
+export let batch_values = null;
+
+/** @type {Effect | null} */
+let last_scheduled_effect = null;
+
+export let is_flushing_sync = false;
+let is_processing = false;
+
+/**
+ * During traversal, this is an array. Newly created effects are (if not immediately
+ * executed) pushed to this array, rather than going through the scheduling
+ * rigamarole that would cause another turn of the flush loop.
+ * @type {Effect[] | null}
+ */
+export let collected_effects = null;
+
+/**
+ * An array of effects that are marked during traversal as a result of a `set`
+ * (not `internal_set`) call. These will be added to the next batch and
+ * trigger another `batch.process()`
+ * @type {Effect[] | null}
+ * @deprecated when we get rid of legacy mode and stores, we can get rid of this
+ */
+export let legacy_updates = null;
+
+var flush_count = 0;
+
+/** @type {Set<Value>} */
+var source_stacks = new Set();
+
+let uid = 1;
+
+export class Batch {
+	id = uid++;
+
+	/** True as soon as `#process` was called */
+	#started = false;
+
+	linked = true;
+
+	/** @type {Batch | null} */
+	#prev = null;
+
+	/** @type {Batch | null} */
+	#next = null;
+
+	/** @type {Map<Effect, ReturnType<typeof deferred<any>>>} */
+	async_deriveds = new Map();
+
+	/**
+	 * The current values of any signals that are updated in this batch.
+	 * Tuple format: [value, is_derived] (note: is_derived is false for deriveds, too, if they were overridden via assignment)
+	 * They keys of this map are identical to `this.#previous`
+	 * @type {Map<Value, [any, boolean]>}
+	 */
+	current = new Map();
+
+	/**
+	 * The values of any signals (sources and deriveds) that are updated in this batch _before_ those updates took place.
+	 * They keys of this map are identical to `this.#current`
+	 * @type {Map<Value, 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<(batch: Batch) => void>}
+	 */
+	#commit_callbacks = new Set();
+
+	/**
+	 * If a fork is discarded, we need to destroy any effects that are no longer needed
+	 * @type {Set<(batch: Batch) => void>}
+	 */
+	#discard_callbacks = new Set();
+
+	/**
+	 * The number of async effects that are currently in flight
+	 */
+	#pending = 0;
+
+	/**
+	 * Async effects that are currently in flight, _not_ inside a pending boundary
+	 * @type {Map<Effect, number>}
+	 */
+	#blocking_pending = new Map();
+
+	/**
+	 * 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;
+
+	/**
+	 * The root effects that need to be flushed
+	 * @type {Effect[]}
+	 */
+	#roots = [];
+
+	/**
+	 * Effects created while this batch was active.
+	 * @type {Effect[]}
+	 */
+	#new_effects = [];
+
+	/**
+	 * Deferred effects (which run after async work has completed) that are DIRTY
+	 * @type {Set<Effect>}
+	 */
+	#dirty_effects = new Set();
+
+	/**
+	 * Deferred effects that are MAYBE_DIRTY
+	 * @type {Set<Effect>}
+	 */
+	#maybe_dirty_effects = new Set();
+
+	/**
+	 * A map of branches that still exist, but will be destroyed when this batch
+	 * is committed — we skip over these during `process`.
+	 * The value contains child effects that were dirty/maybe_dirty before being reset,
+	 * so they can be rescheduled if the branch survives.
+	 * @type {Map<Effect, { d: Effect[], m: Effect[] }>}
+	 */
+	#skipped_branches = new Map();
+
+	/**
+	 * Inverse of #skipped_branches which we need to tell prior batches to unskip them when committing
+	 * @type {Set<Effect>}
+	 */
+	#unskipped_branches = new Set();
+
+	is_fork = false;
+
+	#decrement_queued = false;
+
+	constructor() {
+		// link batch
+		if (last_batch === null) {
+			first_batch = last_batch = this;
+		} else {
+			last_batch.#next = this;
+			this.#prev = last_batch;
+		}
+
+		last_batch = this;
+	}
+
+	#is_deferred() {
+		if (this.is_fork) return true;
+
+		for (const effect of this.#blocking_pending.keys()) {
+			var e = effect;
+			var skipped = false;
+
+			while (e.parent !== null) {
+				if (this.#skipped_branches.has(e)) {
+					skipped = true;
+					break;
+				}
+
+				e = e.parent;
+			}
+
+			if (!skipped) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	/**
+	 * Add an effect to the #skipped_branches map and reset its children
+	 * @param {Effect} effect
+	 */
+	skip_effect(effect) {
+		if (!this.#skipped_branches.has(effect)) {
+			this.#skipped_branches.set(effect, { d: [], m: [] });
+		}
+		this.#unskipped_branches.delete(effect);
+	}
+
+	/**
+	 * Remove an effect from the #skipped_branches map and reschedule
+	 * any tracked dirty/maybe_dirty child effects
+	 * @param {Effect} effect
+	 * @param {(e: Effect) => void} callback
+	 */
+	unskip_effect(effect, callback = (e) => this.schedule(e)) {
+		var tracked = this.#skipped_branches.get(effect);
+		if (tracked) {
+			this.#skipped_branches.delete(effect);
+
+			for (var e of tracked.d) {
+				set_signal_status(e, DIRTY);
+				callback(e);
+			}
+
+			for (e of tracked.m) {
+				set_signal_status(e, MAYBE_DIRTY);
+				callback(e);
+			}
+		}
+		this.#unskipped_branches.add(effect);
+	}
+
+	#process() {
+		this.#started = true;
+
+		if (flush_count++ > 1000) {
+			this.#unlink();
+			infinite_loop_guard();
+		}
+
+		if (DEV) {
+			// track all the values that were updated during this flush,
+			// so that they can be reset afterwards
+			for (const value of this.current.keys()) {
+				source_stacks.add(value);
+			}
+		}
+
+		// We always reschedule previously-deferred effects, not just when
+		// #is_deferred() is true, because traversing the tree could make
+		// an if block that contains the last blocking pending effect falsy,
+		// causing the block to no longer be deferred.
+		for (const e of this.#dirty_effects) {
+			this.#maybe_dirty_effects.delete(e);
+			set_signal_status(e, DIRTY);
+			this.schedule(e);
+		}
+
+		for (const e of this.#maybe_dirty_effects) {
+			set_signal_status(e, MAYBE_DIRTY);
+			this.schedule(e);
+		}
+
+		const roots = this.#roots;
+		this.#roots = [];
+
+		this.apply();
+
+		/** @type {Effect[]} */
+		var effects = (collected_effects = []);
+
+		/** @type {Effect[]} */
+		var render_effects = [];
+
+		/**
+		 * @type {Effect[]}
+		 * @deprecated when we get rid of legacy mode and stores, we can get rid of this
+		 */
+		var updates = (legacy_updates = []);
+
+		for (const root of roots) {
+			try {
+				this.#traverse(root, effects, render_effects);
+			} catch (e) {
+				reset_all(root);
+				// If there's no async work left, this branch is now dead and needs
+				// to be discarded to not become a zombie that is never cleaned up.
+				// See https://github.com/sveltejs/svelte/issues/18221#issuecomment-4497918414
+				// for a (non-minimal) reproduction that demonstrates a case where this is necessary
+				// to not get follow-up false-positives via "batch has scheduled roots" invariant errors.
+				if (!this.#is_deferred()) this.discard();
+				throw e;
+			}
+		}
+
+		// any writes should take effect in a subsequent batch
+		current_batch = null;
+
+		if (updates.length > 0) {
+			var batch = Batch.ensure();
+			for (const e of updates) {
+				batch.schedule(e);
+			}
+		}
+
+		collected_effects = null;
+		legacy_updates = null;
+
+		// if the batch has outstanding pending work, stash effects and bail
+		if (this.#is_deferred()) {
+			this.#defer_effects(render_effects);
+			this.#defer_effects(effects);
+
+			for (const [e, t] of this.#skipped_branches) {
+				reset_branch(e, t);
+			}
+
+			if (updates.length > 0) {
+				/** @type {Batch} */ (/** @type {unknown} */ (current_batch)).#process();
+			}
+
+			return;
+		}
+
+		const earlier_batch = this.#find_earlier_batch();
+
+		if (earlier_batch) {
+			// If this batch collected deferred effects during traversal, they still need
+			// to run after being merged into the earlier batch.
+			this.#defer_effects(render_effects);
+			this.#defer_effects(effects);
+			earlier_batch.#merge(this);
+			return;
+		}
+
+		// clear effects. Those that are still needed will be rescheduled through unskipping the skipped branches.
+		this.#dirty_effects.clear();
+		this.#maybe_dirty_effects.clear();
+
+		// append/remove branches
+		for (const fn of this.#commit_callbacks) fn(this);
+		this.#commit_callbacks.clear();
+
+		previous_batch = this;
+		flush_queued_effects(render_effects);
+		flush_queued_effects(effects);
+		previous_batch = null;
+
+		this.#deferred?.resolve();
+
+		var next_batch = /** @type {Batch | null} */ (/** @type {unknown} */ (current_batch));
+
+		if (this.#pending === 0 && (this.#roots.length === 0 || next_batch !== null)) {
+			this.#unlink();
+
+			// Order matters here - we need to commit and THEN continue flushing new batches, not the other way around,
+			// else we could start flushing a new batch and then, if it has pending work, rebase it right afterwards, which is wrong.
+			// In sync mode flushSync can cause #commit to wrongfully think that there needs to be a rebase, so we only do it in async mode
+			// TODO fix the underlying cause, otherwise this will likely regress when non-async mode is removed
+			if (async_mode_flag) {
+				this.#commit();
+				// Rebases can activate other batches or null it out, therefore restore the new one here
+				current_batch = next_batch;
+			}
+		}
+
+		// Edge case: During traversal new branches might create effects that run immediately and set state,
+		// causing an effect and therefore a root to be scheduled again. We need to traverse the current batch
+		// once more in that case - most of the time this will just clean up dirty branches.
+		if (this.#roots.length > 0) {
+			if (next_batch !== null) {
+				const batch = next_batch;
+				batch.#roots.push(...this.#roots.filter((r) => !batch.#roots.includes(r)));
+			} else {
+				next_batch = this;
+			}
+		}
+
+		if (next_batch !== null) {
+			next_batch.#process();
+		}
+	}
+
+	/**
+	 * Traverse the effect tree, executing effects or stashing
+	 * them for later execution as appropriate
+	 * @param {Effect} root
+	 * @param {Effect[]} effects
+	 * @param {Effect[]} render_effects
+	 */
+	#traverse(root, effects, render_effects) {
+		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_branches.has(effect);
+
+			if (!skip && effect.fn !== null) {
+				if (is_branch) {
+					effect.f ^= CLEAN;
+				} else if ((flags & EFFECT) !== 0) {
+					effects.push(effect);
+				} else if (async_mode_flag && (flags & (RENDER_EFFECT | MANAGED_EFFECT)) !== 0) {
+					render_effects.push(effect);
+				} else if (is_dirty(effect)) {
+					if ((flags & BLOCK_EFFECT) !== 0) this.#maybe_dirty_effects.add(effect);
+					update_effect(effect);
+				}
+
+				var child = effect.first;
+
+				if (child !== null) {
+					effect = child;
+					continue;
+				}
+			}
+
+			while (effect !== null) {
+				var next = effect.next;
+
+				if (next !== null) {
+					effect = next;
+					break;
+				}
+
+				effect = effect.parent;
+			}
+		}
+	}
+
+	#find_earlier_batch() {
+		var batch = this.#prev;
+
+		while (batch !== null) {
+			if (!batch.is_fork) {
+				// if the batches are connected, break
+				for (const [value, [, is_derived]] of this.current) {
+					if (batch.current.has(value) && !is_derived) {
+						return batch;
+					}
+				}
+			}
+
+			batch = batch.#prev;
+		}
+
+		return null;
+	}
+
+	/**
+	 * @param {Batch} batch
+	 */
+	#merge(batch) {
+		for (const [source, value] of batch.current) {
+			if (!this.previous.has(source) && batch.previous.has(source)) {
+				this.previous.set(source, batch.previous.get(source));
+			}
+
+			this.current.set(source, value);
+		}
+
+		for (const [effect, deferred] of batch.async_deriveds) {
+			const d = this.async_deriveds.get(effect);
+			if (d) deferred.promise.then(d.resolve).catch(d.reject);
+		}
+
+		// Clear them or else those that are still pending might get rejected on discard (after merged-into batch is done).
+		// This can happen when batch Y merged into X and Y has a pending boundary and therefore still-pending async deriveds inside.
+		batch.async_deriveds.clear();
+
+		// Mark is not guaranteed not touch these, so we transfer them
+		this.transfer_effects(batch.#dirty_effects, batch.#maybe_dirty_effects);
+
+		/**
+		 * mark all effects that depend on `batch.current`, except the
+		 * async effects that we just resolved (TODO unless they depend
+		 * on values in this batch that are NOT in the later batch?).
+		 * Through this we also will populate the correct #skipped_branches,
+		 * oncommit callbacks etc, so we don't need to merge them separately.
+		 * @param {Value} value
+		 */
+		const mark = (value) => {
+			var reactions = value.reactions;
+			if (reactions === null) return;
+
+			for (const reaction of reactions) {
+				var flags = reaction.f;
+
+				if ((flags & DERIVED) !== 0) {
+					mark(/** @type {Derived} */ (reaction));
+				} else {
+					var effect = /** @type {Effect} */ (reaction);
+
+					if (flags & (ASYNC | BLOCK_EFFECT) && !this.async_deriveds.has(effect)) {
+						this.#maybe_dirty_effects.delete(effect);
+						set_signal_status(effect, DIRTY);
+						this.schedule(effect);
+					}
+				}
+			}
+		};
+
+		for (const source of this.current.keys()) {
+			mark(source);
+		}
+
+		this.oncommit(() => batch.discard());
+		batch.#unlink();
+
+		current_batch = this;
+		this.#process();
+	}
+
+	/**
+	 * @param {Effect[]} effects
+	 */
+	#defer_effects(effects) {
+		for (var i = 0; i < effects.length; i += 1) {
+			defer_effect(effects[i], this.#dirty_effects, this.#maybe_dirty_effects);
+		}
+	}
+
+	/**
+	 * Associate a change to a given source with the current
+	 * batch, noting its previous and current values
+	 * @param {Value} source
+	 * @param {any} value
+	 * @param {boolean} [is_derived]
+	 */
+	capture(source, value, is_derived = false) {
+		if (source.v !== UNINITIALIZED && !this.previous.has(source)) {
+			this.previous.set(source, source.v);
+		}
+
+		// Don't save errors in `batch_values`, or they won't be thrown in `runtime.js#get`
+		if ((source.f & ERROR_VALUE) === 0) {
+			this.current.set(source, [value, is_derived]);
+			batch_values?.set(source, value);
+		}
+
+		if (!this.is_fork) {
+			source.v = value;
+		}
+	}
+
+	activate() {
+		current_batch = this;
+	}
+
+	deactivate() {
+		current_batch = null;
+		batch_values = null;
+	}
+
+	flush() {
+		try {
+			if (DEV) {
+				source_stacks.clear();
+			}
+
+			is_processing = true;
+			current_batch = this;
+
+			this.#process();
+		} finally {
+			flush_count = 0;
+			last_scheduled_effect = null;
+			collected_effects = null;
+			legacy_updates = null;
+			is_processing = false;
+
+			current_batch = null;
+			batch_values = null;
+
+			old_values.clear();
+
+			if (DEV) {
+				for (const source of source_stacks) {
+					source.updated = null;
+				}
+			}
+		}
+	}
+
+	discard() {
+		for (const fn of this.#discard_callbacks) fn(this);
+		this.#discard_callbacks.clear();
+
+		for (const deferred of this.async_deriveds.values()) {
+			deferred.reject(OBSOLETE);
+		}
+
+		this.#unlink();
+		this.#deferred?.resolve();
+	}
+
+	/**
+	 * @param {Effect} effect
+	 */
+	register_created_effect(effect) {
+		this.#new_effects.push(effect);
+	}
+
+	#commit() {
+		// If there are other pending batches, they now need to be 'rebased' —
+		// in other words, we re-run block/async effects with the newly
+		// committed state, unless the batch in question has a more
+		// recent value for a given source
+		for (let batch = first_batch; batch !== null; batch = batch.#next) {
+			var is_earlier = batch.id < this.id;
+
+			/** @type {Source[]} */
+			var sources = [];
+
+			for (const [source, [value, is_derived]] of this.current) {
+				if (batch.current.has(source)) {
+					var batch_value = /** @type {[any, boolean]} */ (batch.current.get(source))[0]; // faster than destructuring
+
+					if (is_earlier && value !== batch_value) {
+						// bring the value up to date
+						batch.current.set(source, [value, is_derived]);
+					} else {
+						// same value or later batch has more recent value,
+						// no need to re-run these effects
+						continue;
+					}
+				}
+
+				sources.push(source);
+			}
+
+			if (is_earlier) {
+				// TODO do we need to restart these in some cases, instead of
+				// immediately resolving them? Likely not because of how this.apply() works.
+				for (const [effect, deferred] of this.async_deriveds) {
+					const d = batch.async_deriveds.get(effect);
+					if (d) deferred.promise.then(d.resolve).catch(d.reject);
+				}
+			}
+
+			var current = [...batch.current.keys()].filter(
+				(source) => !(/** @type {[any, boolean]} */ (batch.current.get(source))[1])
+			);
+
+			// If not started yet or no sources to update (which is e.g. possible for the very first batch) then bail
+			if (!batch.#started || current.length === 0) continue;
+
+			// Re-run async/block effects that depend on distinct values changed in both batches (ignoring deriveds)
+			var others = current.filter((source) => !this.current.has(source));
+
+			if (others.length === 0) {
+				if (is_earlier) {
+					// this batch is now obsolete and can be discarded
+					batch.discard();
+				}
+			} else if (sources.length > 0) {
+				// The microtask queue can contain the batch already scheduled to run right
+				// after this one is finished, so throwing the invariant would be wrong here.
+				if (DEV && !batch.#decrement_queued) {
+					invariant(batch.#roots.length === 0, 'Batch has scheduled roots');
+				}
+
+				// A batch was unskipped in a later batch -> tell prior batches to unskip it, too
+				if (is_earlier) {
+					for (const unskipped of this.#unskipped_branches) {
+						batch.unskip_effect(unskipped, (e) => {
+							if ((e.f & (BLOCK_EFFECT | ASYNC)) !== 0) {
+								batch.schedule(e);
+							} else {
+								batch.#defer_effects([e]);
+							}
+						});
+					}
+				}
+
+				batch.activate();
+
+				/** @type {Set<Value>} */
+				var marked = new Set();
+
+				/** @type {Map<Reaction, boolean>} */
+				var checked = new Map();
+
+				for (var source of sources) {
+					mark_effects(source, others, marked, checked);
+				}
+
+				checked = new Map();
+				var current_unequal = [...batch.current]
+					.filter(([c, v1]) => {
+						const v2 = this.current.get(c);
+						if (!v2) return true;
+						// Either their values are different or one is a derived but not the other
+						return v2[0] !== v1[0] || v2[1] !== v1[1];
+					})
+					.map(([c]) => c);
+
+				if (current_unequal.length > 0) {
+					for (const effect of this.#new_effects) {
+						if (
+							(effect.f & (DESTROYED | INERT | EAGER_EFFECT)) === 0 &&
+							depends_on(effect, current_unequal, checked)
+						) {
+							if ((effect.f & (ASYNC | BLOCK_EFFECT)) !== 0) {
+								set_signal_status(effect, DIRTY);
+								batch.schedule(effect);
+							} else {
+								batch.#dirty_effects.add(effect);
+							}
+						}
+					}
+				}
+
+				// Only apply and traverse when we know we triggered async work with marking the effects
+				// and know this won't run anyway right afterwards
+				if (batch.#roots.length > 0 && !batch.#decrement_queued) {
+					batch.apply();
+
+					for (var root of batch.#roots) {
+						batch.#traverse(root, [], []);
+					}
+
+					batch.#roots = [];
+				}
+
+				batch.deactivate();
+			}
+		}
+	}
+
+	/**
+	 * @param {boolean} blocking
+	 * @param {Effect} effect
+	 */
+	increment(blocking, effect) {
+		this.#pending += 1;
+
+		if (blocking) {
+			let blocking_pending_count = this.#blocking_pending.get(effect) ?? 0;
+			this.#blocking_pending.set(effect, blocking_pending_count + 1);
+		}
+	}
+
+	/**
+	 * @param {boolean} blocking
+	 * @param {Effect} effect
+	 */
+	decrement(blocking, effect) {
+		this.#pending -= 1;
+
+		if (blocking) {
+			let blocking_pending_count = this.#blocking_pending.get(effect) ?? 0;
+
+			if (blocking_pending_count === 1) {
+				this.#blocking_pending.delete(effect);
+			} else {
+				this.#blocking_pending.set(effect, blocking_pending_count - 1);
+			}
+		}
+
+		if (this.#decrement_queued) return;
+		this.#decrement_queued = true;
+
+		queue_micro_task(() => {
+			this.#decrement_queued = false;
+
+			if (this.linked) {
+				this.flush();
+			}
+		});
+	}
+
+	/**
+	 * @param {Set<Effect>} dirty_effects
+	 * @param {Set<Effect>} maybe_dirty_effects
+	 */
+	transfer_effects(dirty_effects, maybe_dirty_effects) {
+		for (const e of dirty_effects) {
+			this.#dirty_effects.add(e);
+		}
+
+		for (const e of maybe_dirty_effects) {
+			this.#maybe_dirty_effects.add(e);
+		}
+
+		dirty_effects.clear();
+		maybe_dirty_effects.clear();
+	}
+
+	/** @param {(batch: Batch) => void} fn */
+	oncommit(fn) {
+		this.#commit_callbacks.add(fn);
+	}
+
+	/** @param {(batch: Batch) => void} fn */
+	ondiscard(fn) {
+		this.#discard_callbacks.add(fn);
+	}
+
+	settled() {
+		return (this.#deferred ??= deferred()).promise;
+	}
+
+	static ensure() {
+		if (current_batch === null) {
+			const batch = (current_batch = new Batch());
+
+			if (!is_processing && !is_flushing_sync) {
+				queue_micro_task(() => {
+					if (!batch.#started) {
+						batch.flush();
+					}
+				});
+			}
+		}
+
+		return current_batch;
+	}
+
+	apply() {
+		if (!async_mode_flag || (!this.is_fork && this.#prev === null && this.#next === null)) {
+			batch_values = null;
+			return;
+		}
+
+		// if there are multiple batches, we are 'time travelling' —
+		// we need to override values with the ones in this batch...
+		batch_values = new Map();
+		for (const [source, [value]] of this.current) {
+			batch_values.set(source, value);
+		}
+
+		// ...and undo changes belonging to other batches unless they intersect
+		for (let batch = first_batch; batch !== null; batch = batch.#next) {
+			if (batch === this || batch.is_fork) continue;
+
+			// If two batches intersect, the latter batch will be merged into the earlier batch,
+			// and we should treat them as a single set of changes
+			var intersects = false;
+
+			if (batch.id < this.id) {
+				for (const [source, [, is_derived]] of batch.current) {
+					// Derived values don't partake in the intersection mechanism, because a derived could
+					// be triggered in one batch already but not the other one yet, causing a false-positive
+					if (is_derived) continue;
+
+					if (this.current.has(source)) {
+						intersects = true;
+						break;
+					}
+				}
+			}
+
+			// Since the latter batch merges into the earlier (if it resolves before the earlier one),
+			// we treat the earlier values as "already applied". This way we don't need to rerun async
+			// effects of the earlier batch in case they are merged.
+			// As a result you can think of batch_values as having the latest values of all intersecting
+			// batches up until this batch.
+			if (!intersects) {
+				for (const [source, previous] of batch.previous) {
+					if (!batch_values.has(source)) {
+						batch_values.set(source, previous);
+					}
+				}
+			}
+		}
+	}
+
+	/**
+	 *
+	 * @param {Effect} effect
+	 */
+	schedule(effect) {
+		last_scheduled_effect = effect;
+
+		// defer render effects inside a pending boundary
+		// TODO the `REACTION_RAN` check is only necessary because of legacy `$:` effects AFAICT — we can remove later
+		if (
+			effect.b?.is_pending &&
+			(effect.f & (EFFECT | RENDER_EFFECT | MANAGED_EFFECT)) !== 0 &&
+			(effect.f & REACTION_RAN) === 0
+		) {
+			effect.b.defer_effect(effect);
+			return;
+		}
+
+		var e = effect;
+
+		while (e.parent !== null) {
+			e = e.parent;
+			var flags = e.f;
+
+			// if the effect is being scheduled because a parent (each/await/etc) block
+			// updated an internal source, or because a branch is being unskipped,
+			// bail out or we'll cause a second flush
+			if (collected_effects !== null && e === active_effect) {
+				if (async_mode_flag) return;
+
+				// in sync mode, render effects run during traversal. in an extreme edge case
+				// — namely that we're setting a value inside a derived read during traversal —
+				// they can be made dirty after they have already been visited, in which
+				// case we shouldn't bail out. we also shouldn't bail out if we're
+				// updating a store inside a `$:`, since this might invalidate
+				// effects that were already visited
+				if (
+					(active_reaction === null || (active_reaction.f & DERIVED) === 0) &&
+					!legacy_is_updating_store
+				) {
+					return;
+				}
+			}
+
+			if ((flags & (ROOT_EFFECT | BRANCH_EFFECT)) !== 0) {
+				if ((flags & CLEAN) === 0) {
+					// branch is already dirty, bail
+					return;
+				}
+
+				e.f ^= CLEAN;
+			}
+		}
+
+		this.#roots.push(e);
+	}
+
+	#unlink() {
+		// #merge calls #unlink, discard later on does it again - prevent
+		// running it multiple times to not corrupt the linked list
+		if (!this.linked) return;
+
+		var prev = this.#prev;
+		var next = this.#next;
+
+		if (prev === null) {
+			first_batch = next;
+		} else {
+			prev.#next = next;
+		}
+
+		if (next === null) {
+			last_batch = prev;
+		} else {
+			next.#prev = prev;
+		}
+
+		this.linked = false;
+	}
+}
+
+// TODO Svelte@6 think about removing the callback argument.
+/**
+ * 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) {
+	var was_flushing_sync = is_flushing_sync;
+	is_flushing_sync = true;
+
+	try {
+		var result;
+
+		if (fn) {
+			if (current_batch !== null && !current_batch.is_fork) {
+				current_batch.flush();
+			}
+
+			result = fn();
+		}
+
+		while (true) {
+			flush_tasks();
+
+			if (current_batch === null) {
+				return /** @type {T} */ (result);
+			}
+
+			current_batch.flush();
+		}
+	} finally {
+		is_flushing_sync = was_flushing_sync;
+	}
+}
+
+function infinite_loop_guard() {
+	if (DEV) {
+		var updates = new Map();
+
+		for (const source of /** @type {Batch} */ (current_batch).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()) {
+			if (update.error) {
+				// eslint-disable-next-line no-console
+				console.error(update.error);
+			}
+		}
+	}
+
+	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);
+	}
+}
+
+/** @type {Set<Effect> | null} */
+export let eager_block_effects = null;
+
+/**
+ * @param {Array<Effect>} effects
+ * @returns {void}
+ */
+function flush_queued_effects(effects) {
+	var length = effects.length;
+	if (length === 0) return;
+
+	var i = 0;
+
+	while (i < length) {
+		var effect = effects[i++];
+
+		if ((effect.f & (DESTROYED | INERT)) === 0 && is_dirty(effect)) {
+			eager_block_effects = new Set();
+
+			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 === null &&
+				effect.teardown === null &&
+				effect.ac === null
+			) {
+				// remove this effect from the graph
+				unlink_effect(effect);
+			}
+
+			// If update_effect() has a flushSync() in it, we may have flushed another flush_queued_effects(),
+			// which already handled this logic and did set eager_block_effects to null.
+			if (eager_block_effects?.size > 0) {
+				old_values.clear();
+
+				for (const e of eager_block_effects) {
+					// Skip eager effects that have already been unmounted
+					if ((e.f & (DESTROYED | INERT)) !== 0) continue;
+
+					// Run effects in order from ancestor to descendant, else we could run into nullpointers
+					/** @type {Effect[]} */
+					const ordered_effects = [e];
+					let ancestor = e.parent;
+					while (ancestor !== null) {
+						if (eager_block_effects.has(ancestor)) {
+							eager_block_effects.delete(ancestor);
+							ordered_effects.push(ancestor);
+						}
+						ancestor = ancestor.parent;
+					}
+
+					for (let j = ordered_effects.length - 1; j >= 0; j--) {
+						const e = ordered_effects[j];
+						// Skip eager effects that have already been unmounted
+						if ((e.f & (DESTROYED | INERT)) !== 0) continue;
+						update_effect(e);
+					}
+				}
+
+				eager_block_effects.clear();
+			}
+		}
+	}
+
+	eager_block_effects = null;
+}
+
+/**
+ * This is similar to `mark_reactions`, but it only marks async/block effects
+ * depending on `value` and at least one of the other `sources`, so that
+ * these effects can re-run after another batch has been committed
+ * @param {Value} value
+ * @param {Source[]} sources
+ * @param {Set<Value>} marked
+ * @param {Map<Reaction, boolean>} checked
+ */
+function mark_effects(value, sources, marked, checked) {
+	if (marked.has(value)) return;
+	marked.add(value);
+
+	if (value.reactions !== null) {
+		for (const reaction of value.reactions) {
+			const flags = reaction.f;
+
+			if ((flags & DERIVED) !== 0) {
+				mark_effects(/** @type {Derived} */ (reaction), sources, marked, checked);
+			} else if (
+				(flags & (ASYNC | BLOCK_EFFECT)) !== 0 &&
+				(flags & DIRTY) === 0 &&
+				depends_on(reaction, sources, checked)
+			) {
+				set_signal_status(reaction, DIRTY);
+				schedule_effect(/** @type {Effect} */ (reaction));
+			}
+		}
+	}
+}
+
+/**
+ * When committing a fork, we need to trigger eager effects so that
+ * any `$state.eager(...)` expressions update immediately. This
+ * function allows us to discover them
+ * @param {Value} value
+ * @param {Set<Effect>} effects
+ */
+function mark_eager_effects(value, effects) {
+	if (value.reactions === null) return;
+
+	for (const reaction of value.reactions) {
+		const flags = reaction.f;
+
+		if ((flags & DERIVED) !== 0) {
+			mark_eager_effects(/** @type {Derived} */ (reaction), effects);
+		} else if ((flags & EAGER_EFFECT) !== 0) {
+			set_signal_status(reaction, DIRTY);
+			effects.add(/** @type {Effect} */ (reaction));
+		}
+	}
+}
+
+/**
+ * @param {Reaction} reaction
+ * @param {Source[]} sources
+ * @param {Map<Reaction, boolean>} checked
+ */
+function depends_on(reaction, sources, checked) {
+	const depends = checked.get(reaction);
+	if (depends !== undefined) return depends;
+
+	if (reaction.deps !== null) {
+		for (const dep of reaction.deps) {
+			if (includes.call(sources, dep)) {
+				return true;
+			}
+
+			if ((dep.f & DERIVED) !== 0 && depends_on(/** @type {Derived} */ (dep), sources, checked)) {
+				checked.set(/** @type {Derived} */ (dep), true);
+				return true;
+			}
+		}
+	}
+
+	checked.set(reaction, false);
+
+	return false;
+}
+
+/**
+ * @param {Effect} effect
+ * @returns {void}
+ */
+export function schedule_effect(effect) {
+	/** @type {Batch} */ (current_batch).schedule(effect);
+}
+
+/** @type {Source<number>[]} */
+let eager_versions = [];
+
+function eager_flush() {
+	flushSync(() => {
+		const eager = eager_versions;
+		eager_versions = [];
+		for (const version of eager) {
+			update(version);
+		}
+	});
+}
+
+/** @type {Map<Reaction, Source<number>>} */
+var version_map = new Map();
+
+/**
+ * Implementation of `$state.eager(fn())`
+ * @template T
+ * @param {() => T} fn
+ * @returns {T}
+ */
+export function eager(fn) {
+	var initial = true;
+	var value = /** @type {T} */ (undefined);
+
+	if (active_reaction === null) {
+		return fn();
+	}
+
+	let parent = active_reaction;
+
+	let version = version_map.get(parent) ?? source(0);
+	version_map.set(parent, version);
+
+	teardown(() => {
+		if (parent.f & DESTROYING) version_map.delete(parent);
+	});
+
+	get(version);
+
+	eager_effect(() => {
+		if (initial) {
+			// the first time this runs, we create an eager effect
+			// that will run eagerly whenever the expression changes
+			var previous_batch_values = batch_values;
+
+			try {
+				batch_values = null;
+				value = fn();
+			} finally {
+				batch_values = previous_batch_values;
+			}
+
+			return;
+		}
+
+		// the second time this effect runs, it's to schedule a
+		// `version` update. since this will recreate the effect,
+		// we don't need to evaluate the expression here
+		if (eager_versions.length === 0) {
+			queue_micro_task(eager_flush);
+		}
+
+		eager_versions.push(version);
+	});
+
+	initial = false;
+
+	return value;
+}
+
+/**
+ * Mark all the effects inside a skipped branch CLEAN, so that
+ * they can be correctly rescheduled later. Tracks dirty and maybe_dirty
+ * effects so they can be rescheduled if the branch survives.
+ * @param {Effect} effect
+ * @param {{ d: Effect[], m: Effect[] }} tracked
+ */
+function reset_branch(effect, tracked) {
+	// clean branch = nothing dirty inside, no need to traverse further
+	if ((effect.f & BRANCH_EFFECT) !== 0 && (effect.f & CLEAN) !== 0) {
+		return;
+	}
+
+	if ((effect.f & DIRTY) !== 0) {
+		tracked.d.push(effect);
+	} else if ((effect.f & MAYBE_DIRTY) !== 0) {
+		tracked.m.push(effect);
+	}
+
+	set_signal_status(effect, CLEAN);
+
+	var e = effect.first;
+	while (e !== null) {
+		reset_branch(e, tracked);
+		e = e.next;
+	}
+}
+
+/**
+ * Mark an entire effect tree clean following an error
+ * @param {Effect} effect
+ */
+function reset_all(effect) {
+	set_signal_status(effect, CLEAN);
+
+	var e = effect.first;
+	while (e !== null) {
+		reset_all(e);
+		e = e.next;
+	}
+}
+
+/**
+ * Creates a 'fork', in which state changes are evaluated but not applied to the DOM.
+ * This is useful for speculatively loading data (for example) when you suspect that
+ * the user is about to take some action.
+ *
+ * Frameworks like SvelteKit can use this to preload data when the user touches or
+ * hovers over a link, making any subsequent navigation feel instantaneous.
+ *
+ * The `fn` parameter is a synchronous function that modifies some state. The
+ * state changes will be reverted after the fork is initialised, then reapplied
+ * if and when the fork is eventually committed.
+ *
+ * When it becomes clear that a fork will _not_ be committed (e.g. because the
+ * user navigated elsewhere), it must be discarded to avoid leaking memory.
+ *
+ * @param {() => void} fn
+ * @returns {Fork}
+ * @since 5.42
+ */
+export function fork(fn) {
+	if (!async_mode_flag) {
+		e.experimental_async_required('fork');
+	}
+
+	if (current_batch !== null) {
+		e.fork_timing();
+	}
+
+	var batch = Batch.ensure();
+	batch.is_fork = true;
+	batch_values = new Map();
+
+	var committed = false;
+	var settled = batch.settled();
+
+	flushSync(fn);
+
+	return {
+		commit: async () => {
+			if (committed) {
+				await settled;
+				return;
+			}
+
+			if (!batch.linked) {
+				e.fork_discarded();
+			}
+
+			committed = true;
+
+			batch.is_fork = false;
+
+			// apply changes and update write versions so deriveds see the change
+			for (var [source, [value]] of batch.current) {
+				source.v = value;
+				source.wv = increment_write_version();
+			}
+
+			// trigger any `$state.eager(...)` expressions with the new state.
+			// eager effects don't get scheduled like other effects, so we
+			// can't just encounter them during traversal, we need to
+			// proactively flush them
+			// TODO maybe there's a better implementation?
+			flushSync(() => {
+				/** @type {Set<Effect>} */
+				var eager_effects = new Set();
+
+				for (var source of batch.current.keys()) {
+					mark_eager_effects(source, eager_effects);
+				}
+
+				set_eager_effects(eager_effects);
+				flush_eager_effects();
+			});
+
+			batch.flush();
+			await settled;
+		},
+		discard: () => {
+			// cause any MAYBE_DIRTY deriveds to update
+			// if they depend on things thath changed
+			// inside the discarded fork
+			for (var source of batch.current.keys()) {
+				source.wv = increment_write_version();
+			}
+
+			if (!committed && batch.linked) {
+				batch.discard();
+			}
+		}
+	};
+}
+
+/**
+ * Forcibly remove all current batches, to prevent cross-talk between tests
+ */
+export function clear() {
+	first_batch = last_batch = null;
+}
diff --git a/packages/svelte/src/internal/client/reactivity/deriveds.js b/packages/svelte/src/internal/client/reactivity/deriveds.js
index 8c1a3a652b..fd64f3b45d 100644
--- a/packages/svelte/src/internal/client/reactivity/deriveds.js
+++ b/packages/svelte/src/internal/client/reactivity/deriveds.js
@@ -1,30 +1,66 @@
-/** @import { Derived, Effect } from '#client' */
+/** @import { Derived, Effect, Reaction, Source, Value } from '#client' */
+/** @import { Batch } from './batch.js'; */
+/** @import { Boundary } from '../dom/blocks/boundary.js'; */
 import { DEV } from 'esm-env';
 import {
-	CLEAN,
+	ERROR_VALUE,
 	DERIVED,
-	DESTROYED,
 	DIRTY,
-	EFFECT_HAS_DERIVED,
-	MAYBE_DIRTY,
-	UNOWNED
-} from '../constants.js';
+	EFFECT_PRESERVED,
+	STALE_REACTION,
+	ASYNC,
+	WAS_MARKED,
+	DESTROYED,
+	CLEAN,
+	REACTION_RAN,
+	INERT
+} from '#client/constants';
 import {
 	active_reaction,
 	active_effect,
-	remove_reactions,
-	set_signal_status,
-	skip_reaction,
 	update_reaction,
-	increment_version,
+	increment_write_version,
 	set_active_effect,
-	component_context
+	push_reaction_value,
+	is_destroying_effect,
+	update_effect,
+	remove_reactions,
+	skipped_deps,
+	new_deps
 } 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 { get_stack } from '../dev/tracing.js';
+import * as w from '../warnings.js';
+import {
+	async_effect,
+	destroy_effect,
+	destroy_effect_children,
+	effect_tracking,
+	teardown
+} from './effects.js';
+import { eager_effects, internal_set, set_eager_effects, source } from './sources.js';
+import { get_error } from '../../shared/dev.js';
+import { async_mode_flag, tracing_mode_flag } from '../../flags/index.js';
+import { component_context } from '../context.js';
+import { UNINITIALIZED } from '../../../constants.js';
+import { batch_values, current_batch, previous_batch } from './batch.js';
+import { increment_pending, unset_context } from './async.js';
+import { deferred, includes, noop } from '../../shared/utils.js';
+import { set_signal_status, update_derived_status } from './status.js';
+
+/**
+ * This allows us to track 'reactivity loss' that occurs when signals
+ * are read after a non-context-restoring `await`. Dev-only
+ * @type {{ effect: Effect, effect_deps: Set<Value>, warned: boolean } | null}
+ */
+export let reactivity_loss_tracker = null;
+
+/** @param {{ effect: Effect, effect_deps: Set<Value>, warned: boolean } | null} v */
+export function set_reactivity_loss_tracker(v) {
+	reactivity_loss_tracker = v;
+}
+
+export const recent_async_deriveds = new Set();
 
 /**
  * @template V
@@ -35,42 +71,229 @@ import { get_stack } from '../dev/tracing.js';
 export function derived(fn) {
 	var flags = DERIVED | DIRTY;
 
-	if (active_effect === null) {
-		flags |= UNOWNED;
-	} else {
+	if (active_effect !== null) {
 		// Since deriveds are evaluated lazily, any effects created inside them are
 		// created too late to ensure that the parent effect is added to the tree
-		active_effect.f |= EFFECT_HAS_DERIVED;
+		active_effect.f |= EFFECT_PRESERVED;
 	}
 
-	var parent_derived =
-		active_reaction !== null && (active_reaction.f & DERIVED) !== 0
-			? /** @type {Derived} */ (active_reaction)
-			: null;
-
 	/** @type {Derived<V>} */
 	const signal = {
-		children: null,
 		ctx: component_context,
 		deps: null,
+		effects: null,
 		equals,
 		f: flags,
 		fn,
 		reactions: null,
-		v: /** @type {V} */ (null),
-		version: 0,
-		parent: parent_derived ?? active_effect
+		rv: 0,
+		v: /** @type {V} */ (UNINITIALIZED),
+		wv: 0,
+		parent: active_effect,
+		ac: null
 	};
 
-	if (DEV) {
-		signal.created = get_stack('CreatedAt');
+	if (DEV && tracing_mode_flag) {
+		signal.created = get_error('created at');
 	}
 
-	if (parent_derived !== null) {
-		(parent_derived.children ??= []).push(signal);
+	return signal;
+}
+
+export const OBSOLETE = Symbol('obsolete');
+
+/**
+ * @template V
+ * @param {() => V | Promise<V>} fn
+ * @param {string} [label]
+ * @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, label, location) {
+	let parent = /** @type {Effect | null} */ (active_effect);
+
+	if (parent === null) {
+		e.async_derived_orphan();
 	}
 
-	return signal;
+	var promise = /** @type {Promise<V>} */ (/** @type {unknown} */ (undefined));
+	var signal = source(/** @type {V} */ (UNINITIALIZED));
+
+	if (DEV) signal.label = label ?? fn.toString();
+
+	// only suspend in async deriveds created on initialisation
+	var should_suspend = !active_reaction;
+
+	/** @type {Set<ReturnType<typeof deferred<V>>>} */
+	var deferreds = new Set();
+
+	async_effect(() => {
+		var effect = /** @type {Effect} */ (active_effect);
+
+		if (DEV) {
+			reactivity_loss_tracker = { effect, effect_deps: new Set(), warned: false };
+		}
+
+		/** @type {ReturnType<typeof deferred<V>>} */
+		var d = deferred();
+		promise = d.promise;
+
+		try {
+			// If this code is changed at some point, make sure to still access the then property
+			// of fn() to read any signals it might access, so that we track them as dependencies.
+			// We call `unset_context` to undo any `save` calls that happen inside `fn()`
+			Promise.resolve(fn())
+				.then(d.resolve, (e) => {
+					// if the promise was rejected by the user, via `getAbortSignal`, then
+					// wait for a subsequent resolution instead of flushing the batch
+					if (e !== STALE_REACTION) d.reject(e);
+				})
+				.finally(unset_context);
+		} catch (error) {
+			d.reject(error);
+			unset_context();
+		}
+
+		if (DEV) {
+			if (reactivity_loss_tracker) {
+				// Reused deps from previous run (indices 0 to skipped_deps-1)
+				// We deliberately only track direct dependencies of the async expression to encourage
+				// dependencies being directly visible at the point of the expression
+				if (effect.deps !== null) {
+					for (let i = 0; i < skipped_deps; i += 1) {
+						reactivity_loss_tracker.effect_deps.add(effect.deps[i]);
+					}
+				}
+
+				// New deps discovered this run
+				if (new_deps !== null) {
+					for (let i = 0; i < new_deps.length; i += 1) {
+						reactivity_loss_tracker.effect_deps.add(new_deps[i]);
+					}
+				}
+			}
+
+			reactivity_loss_tracker = null;
+		}
+
+		var batch = /** @type {Batch} */ (current_batch);
+
+		if (should_suspend) {
+			// we only increment the batch's pending state for updates, not creation, otherwise
+			// we will decrement to zero before the work that depends on this promise (e.g. a
+			// template effect) has initialized, causing the batch to resolve prematurely
+			if ((effect.f & REACTION_RAN) !== 0) {
+				var decrement_pending = increment_pending();
+			}
+
+			if (
+				// boundary can be null if the async derived is inside an $effect.root not connected to the component render tree
+				parent.b?.is_rendered()
+			) {
+				batch.async_deriveds.get(effect)?.reject(OBSOLETE);
+			} else {
+				// While the boundary is still showing pending, a new run supersedes all older in-flight runs
+				// for this async expression. Cancel eagerly so resolution cannot commit stale values.
+				for (const d of deferreds.values()) {
+					d.reject(OBSOLETE);
+				}
+			}
+
+			deferreds.add(d);
+			batch.async_deriveds.set(effect, d);
+		}
+
+		/**
+		 * @param {any} value
+		 * @param {unknown} error
+		 */
+		const handler = (value, error = undefined) => {
+			if (DEV) {
+				reactivity_loss_tracker = null;
+			}
+
+			decrement_pending?.();
+			deferreds.delete(d);
+
+			if (error === OBSOLETE) return;
+
+			batch.activate();
+
+			if (error) {
+				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;
+				}
+
+				if (DEV && location !== undefined && !signal.equals(value)) {
+					recent_async_deriveds.add(signal);
+
+					setTimeout(() => {
+						if (recent_async_deriveds.has(signal) && (effect.f & DESTROYED) === 0) {
+							w.await_waterfall(/** @type {string} */ (signal.label), location);
+							recent_async_deriveds.delete(signal);
+						}
+					});
+				}
+
+				internal_set(signal, value);
+			}
+
+			batch.deactivate();
+		};
+
+		d.promise.then(handler, (e) => handler(null, e || 'unknown'));
+	});
+
+	teardown(() => {
+		for (const d of deferreds) {
+			d.reject(OBSOLETE);
+		}
+	});
+
+	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
+ * @returns {Derived<V>}
+ */
+/*#__NO_SIDE_EFFECTS__*/
+export function user_derived(fn) {
+	const d = derived(fn);
+
+	if (!async_mode_flag) push_reaction_value(d);
+
+	return d;
 }
 
 /**
@@ -89,19 +312,14 @@ export function derived_safe_equal(fn) {
  * @param {Derived} derived
  * @returns {void}
  */
-function destroy_derived_children(derived) {
-	var children = derived.children;
+export function destroy_derived_effects(derived) {
+	var effects = derived.effects;
 
-	if (children !== null) {
-		derived.children = null;
+	if (effects !== null) {
+		derived.effects = null;
 
-		for (var i = 0; i < children.length; i += 1) {
-			var child = children[i];
-			if ((child.f & DERIVED) !== 0) {
-				destroy_derived(/** @type {Derived} */ (child));
-			} else {
-				destroy_effect(/** @type {Effect} */ (child));
-			}
+		for (var i = 0; i < effects.length; i += 1) {
+			destroy_effect(/** @type {Effect} */ (effects[i]));
 		}
 	}
 }
@@ -113,21 +331,6 @@ function destroy_derived_children(derived) {
  */
 let stack = [];
 
-/**
- * @param {Derived} derived
- * @returns {Effect | null}
- */
-function get_derived_parent_effect(derived) {
-	var parent = derived.parent;
-	while (parent !== null) {
-		if ((parent.f & DERIVED) === 0) {
-			return /** @type {Effect} */ (parent);
-		}
-		parent = parent.parent;
-	}
-	return null;
-}
-
 /**
  * @template T
  * @param {Derived} derived
@@ -136,29 +339,43 @@ function get_derived_parent_effect(derived) {
 export function execute_derived(derived) {
 	var value;
 	var prev_active_effect = active_effect;
+	var parent = derived.parent;
+
+	if (
+		!is_destroying_effect &&
+		parent !== null &&
+		derived.v !== UNINITIALIZED && // if it was never evaluated before, it's guaranteed to fail downstream, so we try to execute instead
+		(parent.f & (DESTROYED | INERT)) !== 0
+	) {
+		w.derived_inert();
+
+		return derived.v;
+	}
 
-	set_active_effect(get_derived_parent_effect(derived));
+	set_active_effect(parent);
 
 	if (DEV) {
-		let prev_inspect_effects = inspect_effects;
-		set_inspect_effects(new Set());
+		let prev_eager_effects = eager_effects;
+		set_eager_effects(new Set());
 		try {
-			if (stack.includes(derived)) {
+			if (includes.call(stack, derived)) {
 				e.derived_references_self();
 			}
 
 			stack.push(derived);
 
-			destroy_derived_children(derived);
+			derived.f &= ~WAS_MARKED;
+			destroy_derived_effects(derived);
 			value = update_reaction(derived);
 		} finally {
 			set_active_effect(prev_active_effect);
-			set_inspect_effects(prev_inspect_effects);
+			set_eager_effects(prev_eager_effects);
 			stack.pop();
 		}
 	} else {
 		try {
-			destroy_derived_children(derived);
+			derived.f &= ~WAS_MARKED;
+			destroy_derived_effects(derived);
 			value = update_reaction(derived);
 		} finally {
 			set_active_effect(prev_active_effect);
@@ -174,25 +391,91 @@ export function execute_derived(derived) {
  */
 export function update_derived(derived) {
 	var value = execute_derived(derived);
-	var status =
-		(skip_reaction || (derived.f & UNOWNED) !== 0) && derived.deps !== null ? MAYBE_DIRTY : CLEAN;
-
-	set_signal_status(derived, status);
 
 	if (!derived.equals(value)) {
-		derived.v = value;
-		derived.version = increment_version();
+		derived.wv = increment_write_version();
+
+		// in a fork, we don't update the underlying value, just `batch_values`.
+		// the underlying value will be updated when the fork is committed.
+		// otherwise, the next time we get here after a 'real world' state
+		// change, `derived.equals` may incorrectly return `true`
+		if (!current_batch?.is_fork || derived.deps === null) {
+			if (current_batch !== null) {
+				// We also write to previous_batch because if it exists, it is a sign that we're
+				// currently in the process of flushing effects. These updates to deriveds may belong
+				// to the previous batch, not the new one (which can already exist if an earlier
+				// effect wrote to a source). This can cause bugs when running batch.#commit() later,
+				// but not adding it to current_batch can, too, so we add it to both.
+				// See https://github.com/sveltejs/svelte/pull/18117 for more details.
+				current_batch.capture(derived, value, true);
+				previous_batch?.capture(derived, value, true);
+			} else {
+				derived.v = value;
+			}
+
+			// deriveds without dependencies should never be recomputed
+			if (derived.deps === null) {
+				set_signal_status(derived, CLEAN);
+				return;
+			}
+		}
+	}
+
+	// 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;
+	}
+
+	// During time traveling we don't want to reset the status so that
+	// traversal of the graph in the other batches still happens
+	if (batch_values !== null) {
+		// only cache the value if we're in a tracking context, otherwise we won't
+		// clear the cache in `mark_reactions` when dependencies are updated
+		if (effect_tracking() || current_batch?.is_fork) {
+			batch_values.set(derived, value);
+		}
+	} else {
+		update_derived_status(derived);
 	}
 }
 
 /**
  * @param {Derived} derived
- * @returns {void}
  */
-export function destroy_derived(derived) {
-	destroy_derived_children(derived);
-	remove_reactions(derived, 0);
-	set_signal_status(derived, DESTROYED);
+export function freeze_derived_effects(derived) {
+	if (derived.effects === null) return;
+
+	for (const e of derived.effects) {
+		// if the effect has a teardown function or abort signal, call it
+		if (e.teardown || e.ac) {
+			e.teardown?.();
+			e.ac?.abort(STALE_REACTION);
 
-	derived.v = derived.children = derived.deps = derived.ctx = derived.reactions = null;
+			// make it a noop so it doesn't get called again if the derived
+			// is unfrozen. we don't set it to `null`, because the existence
+			// of a teardown function is what determines whether the
+			// effect runs again during unfreezing (but not for teardown-only effects)
+			if (e.fn !== null) e.teardown = noop;
+			e.ac = null;
+
+			remove_reactions(e, 0);
+			destroy_effect_children(e);
+		}
+	}
+}
+
+/**
+ * @param {Derived} derived
+ */
+export function unfreeze_derived_effects(derived) {
+	if (derived.effects === null) return;
+
+	for (const e of derived.effects) {
+		// if the effect was previously frozen — indicated by the presence
+		// of a teardown function — unfreeze it
+		if (e.teardown && e.fn !== null) {
+			update_effect(e);
+		}
+	}
 }
diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
index c956745684..c5d195dfae 100644
--- a/packages/svelte/src/internal/client/reactivity/effects.js
+++ b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -1,22 +1,17 @@
-/** @import { ComponentContext, ComponentContextLegacy, Derived, Effect, TemplateNode, TransitionManager } from '#client' */
+/** @import { Blocker, ComponentContext, ComponentContextLegacy, Derived, Effect, TemplateNode, TransitionManager } from '#client' */
 import {
-	check_dirtiness,
-	component_context,
+	is_dirty,
 	active_effect,
 	active_reaction,
-	dev_current_component_function,
 	update_effect,
 	get,
 	is_destroying_effect,
-	is_flushing_effect,
 	remove_reactions,
-	schedule_effect,
 	set_active_reaction,
 	set_is_destroying_effect,
-	set_is_flushing_effect,
-	set_signal_status,
 	untrack,
-	skip_reaction
+	untracking,
+	set_active_effect
 } from '../runtime.js';
 import {
 	DIRTY,
@@ -25,34 +20,41 @@ import {
 	EFFECT,
 	DESTROYED,
 	INERT,
-	EFFECT_RAN,
 	BLOCK_EFFECT,
 	ROOT_EFFECT,
 	EFFECT_TRANSPARENT,
 	DERIVED,
-	UNOWNED,
 	CLEAN,
-	INSPECT_EFFECT,
+	EAGER_EFFECT,
 	HEAD_EFFECT,
 	MAYBE_DIRTY,
-	EFFECT_HAS_DERIVED
-} from '../constants.js';
-import { set } from './sources.js';
+	EFFECT_PRESERVED,
+	STALE_REACTION,
+	USER_EFFECT,
+	ASYNC,
+	CONNECTED,
+	MANAGED_EFFECT,
+	DESTROYING
+} from '#client/constants';
 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 { destroy_derived } from './deriveds.js';
+import { component_context, dev_current_component_function, dev_stack } from '../context.js';
+import { Batch, collected_effects, current_batch } from './batch.js';
+import { flatten } from './async.js';
+import { without_reactive_context } from '../dom/elements/bindings/shared.js';
+import { set_signal_status } from './status.js';
 
 /**
  * @param {'$effect' | '$effect.pre' | '$inspect'} rune
  */
 export function validate_effect(rune) {
-	if (active_effect === null && active_reaction === null) {
-		e.effect_orphan(rune);
-	}
+	if (active_effect === null) {
+		if (active_reaction === null) {
+			e.effect_orphan(rune);
+		}
 
-	if (active_reaction !== null && (active_reaction.f & UNOWNED) !== 0) {
 		e.effect_in_unowned_derived();
 	}
 
@@ -79,80 +81,97 @@ function push_effect(effect, parent_effect) {
 /**
  * @param {number} type
  * @param {null | (() => void | (() => void))} fn
- * @param {boolean} sync
- * @param {boolean} push
  * @returns {Effect}
  */
-function create_effect(type, fn, sync, push = true) {
-	var is_root = (type & ROOT_EFFECT) !== 0;
-	var parent_effect = active_effect;
+function create_effect(type, fn) {
+	var parent = active_effect;
 
 	if (DEV) {
 		// Ensure the parent is never an inspect effect
-		while (parent_effect !== null && (parent_effect.f & INSPECT_EFFECT) !== 0) {
-			parent_effect = parent_effect.parent;
+		while (parent !== null && (parent.f & EAGER_EFFECT) !== 0) {
+			parent = parent.parent;
 		}
 	}
 
+	if (parent !== null && (parent.f & INERT) !== 0) {
+		type |= INERT;
+	}
+
 	/** @type {Effect} */
 	var effect = {
 		ctx: component_context,
 		deps: null,
-		deriveds: null,
-		nodes_start: null,
-		nodes_end: null,
-		f: type | DIRTY,
+		nodes: null,
+		f: type | DIRTY | CONNECTED,
 		first: null,
 		fn,
 		last: null,
 		next: null,
-		parent: is_root ? null : parent_effect,
+		parent,
+		b: parent && parent.b,
 		prev: null,
 		teardown: null,
-		transitions: null,
-		version: 0
+		wv: 0,
+		ac: null
 	};
 
 	if (DEV) {
 		effect.component_function = dev_current_component_function;
 	}
 
-	if (sync) {
-		var previously_flushing_effect = is_flushing_effect;
+	current_batch?.register_created_effect(effect);
 
+	/** @type {Effect | null} */
+	var e = effect;
+
+	if ((type & EFFECT) !== 0) {
+		if (collected_effects !== null) {
+			// created during traversal — collect and run afterwards
+			collected_effects.push(effect);
+		} else {
+			// schedule for later
+			Batch.ensure().schedule(effect);
+		}
+	} else if (fn !== null) {
 		try {
-			set_is_flushing_effect(true);
 			update_effect(effect);
-			effect.f |= EFFECT_RAN;
 		} catch (e) {
 			destroy_effect(effect);
 			throw e;
-		} finally {
-			set_is_flushing_effect(previously_flushing_effect);
 		}
-	} else if (fn !== null) {
-		schedule_effect(effect);
+
+		// if an effect doesn't need to be kept in the tree (because it
+		// won't re-run, has no DOM, and has no teardown etc)
+		// then we skip it and go to its child (if any)
+		if (
+			e.deps === null &&
+			e.teardown === null &&
+			e.nodes === null &&
+			e.first === e.last && // either `null`, or a singular child
+			(e.f & EFFECT_PRESERVED) === 0
+		) {
+			e = e.first;
+			if ((type & BLOCK_EFFECT) !== 0 && (type & EFFECT_TRANSPARENT) !== 0 && e !== null) {
+				e.f |= EFFECT_TRANSPARENT;
+			}
+		}
 	}
 
-	// if an effect has no dependencies, no DOM and no teardown function,
-	// don't bother adding it to the effect tree
-	var inert =
-		sync &&
-		effect.deps === null &&
-		effect.first === null &&
-		effect.nodes_start === null &&
-		effect.teardown === null &&
-		(effect.f & EFFECT_HAS_DERIVED) === 0;
-
-	if (!inert && !is_root && push) {
-		if (parent_effect !== null) {
-			push_effect(effect, parent_effect);
+	if (e !== null) {
+		e.parent = parent;
+
+		if (parent !== null) {
+			push_effect(e, parent);
 		}
 
 		// if we're in a derived, add the effect there too
-		if (active_reaction !== null && (active_reaction.f & DERIVED) !== 0) {
+		if (
+			active_reaction !== null &&
+			(active_reaction.f & DERIVED) !== 0 &&
+			(type & ROOT_EFFECT) === 0
+		) {
 			var derived = /** @type {Derived} */ (active_reaction);
-			(derived.children ??= []).push(effect);
+			(derived.effects ??= []).push(e);
 		}
 	}
 
@@ -164,20 +183,14 @@ function create_effect(type, fn, sync, push = true) {
  * @returns {boolean}
  */
 export function effect_tracking() {
-	if (active_reaction === null) {
-		return false;
-	}
-
-	// If it's skipped, that's because we're inside an unowned
-	// that is not being tracked by another reaction
-	return !skip_reaction;
+	return active_reaction !== null && !untracking;
 }
 
 /**
  * @param {() => void} fn
  */
 export function teardown(fn) {
-	const effect = create_effect(RENDER_EFFECT, null, false);
+	const effect = create_effect(RENDER_EFFECT, null);
 	set_signal_status(effect, CLEAN);
 	effect.teardown = fn;
 	return effect;
@@ -190,33 +203,38 @@ export function teardown(fn) {
 export function user_effect(fn) {
 	validate_effect('$effect');
 
-	// Non-nested `$effect(...)` in a component should be deferred
-	// until the component is mounted
-	var defer =
-		active_effect !== null &&
-		(active_effect.f & BRANCH_EFFECT) !== 0 &&
-		component_context !== null &&
-		!component_context.m;
-
 	if (DEV) {
 		define_property(fn, 'name', {
 			value: '$effect'
 		});
 	}
 
+	// 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 &&
+		component_context !== null &&
+		!component_context.i;
+
 	if (defer) {
+		// Top-level `$effect(...)` in an unmounted component — defer until mount
 		var context = /** @type {ComponentContext} */ (component_context);
-		(context.e ??= []).push({
-			fn,
-			effect: active_effect,
-			reaction: active_reaction
-		});
+		(context.e ??= []).push(fn);
 	} else {
-		var signal = effect(fn);
-		return signal;
+		// Everything else — create immediately
+		return create_user_effect(fn);
 	}
 }
 
+/**
+ * @param {() => void | (() => void)} fn
+ */
+export function create_user_effect(fn) {
+	return create_effect(EFFECT | USER_EFFECT, fn);
+}
+
 /**
  * Internal representation of `$effect.pre(...)`
  * @param {() => void | (() => void)} fn
@@ -229,12 +247,12 @@ export function user_pre_effect(fn) {
 			value: '$effect.pre'
 		});
 	}
-	return render_effect(fn);
+	return create_effect(RENDER_EFFECT | USER_EFFECT, fn);
 }
 
 /** @param {() => void | (() => void)} fn */
-export function inspect_effect(fn) {
-	return create_effect(INSPECT_EFFECT, fn, true);
+export function eager_effect(fn) {
+	return create_effect(EAGER_EFFECT, fn);
 }
 
 /**
@@ -243,7 +261,8 @@ export function inspect_effect(fn) {
  * @returns {() => void}
  */
 export function effect_root(fn) {
-	const effect = create_effect(ROOT_EFFECT, fn, true);
+	Batch.ensure();
+	const effect = create_effect(ROOT_EFFECT | EFFECT_PRESERVED, fn);
 
 	return () => {
 		destroy_effect(effect);
@@ -256,7 +275,8 @@ export function effect_root(fn) {
  * @returns {(options?: { outro?: boolean }) => Promise<void>}
  */
 export function component_root(fn) {
-	const effect = create_effect(ROOT_EFFECT, fn, true);
+	Batch.ensure();
+	const effect = create_effect(ROOT_EFFECT | EFFECT_PRESERVED, fn);
 
 	return (options = {}) => {
 		return new Promise((fulfil) => {
@@ -278,7 +298,7 @@ export function component_root(fn) {
  * @returns {Effect}
  */
 export function effect(fn) {
-	return create_effect(EFFECT, fn, false);
+	return create_effect(EFFECT, fn);
 }
 
 /**
@@ -289,9 +309,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();
@@ -301,8 +322,19 @@ export function legacy_pre_effect(deps, fn) {
 		if (token.ran) return;
 
 		token.ran = true;
-		set(context.l.r2, true);
-		untrack(fn);
+
+		var effect = /** @type {Effect} */ (active_effect);
+
+		// here, we lie: by setting `active_effect` to be the parent branch, any writes
+		// that happen inside `fn` will _not_ cause an unnecessary reschedule, because
+		// the affected effects will be children of `active_effect`. this is safe
+		// because these effects are known to run in the correct order
+		try {
+			set_active_effect(effect.parent);
+			untrack(fn);
+		} finally {
+			set_active_effect(effect);
+		}
 	});
 }
 
@@ -310,26 +342,24 @@ 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
 			// the effects dependencies and correctly ensure each dependency is up-to-date.
-			if ((effect.f & CLEAN) !== 0) {
+			if ((effect.f & CLEAN) !== 0 && effect.deps !== null) {
 				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
 	});
 }
 
@@ -337,21 +367,43 @@ 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);
 }
 
 /**
  * @param {() => void | (() => void)} fn
  * @returns {Effect}
  */
-export function template_effect(fn) {
-	if (DEV) {
-		define_property(fn, 'name', {
-			value: '{expression}'
+export function render_effect(fn, flags = 0) {
+	return create_effect(RENDER_EFFECT | flags, fn);
+}
+
+/**
+ * @param {(...expressions: any) => void | (() => void)} fn
+ * @param {Array<() => any>} sync
+ * @param {Array<() => Promise<any>>} async
+ * @param {Blocker[]} blockers
+ */
+export function template_effect(fn, sync = [], async = [], blockers = []) {
+	flatten(blockers, sync, async, (values) => {
+		create_effect(RENDER_EFFECT, () => {
+			fn(...values.map(get));
 		});
-	}
-	return block(fn);
+	});
+}
+
+/**
+ * Like `template_effect`, but with an effect which is deferred until the batch commits
+ * @param {(...expressions: any) => void | (() => void)} fn
+ * @param {Array<() => any>} sync
+ * @param {Array<() => Promise<any>>} async
+ * @param {Blocker[]} blockers
+ */
+export function deferred_template_effect(fn, sync = [], async = [], blockers = []) {
+	flatten(blockers, sync, async, (values) => {
+		create_effect(EFFECT, () => fn(...values.map(get)));
+	});
 }
 
 /**
@@ -359,15 +411,30 @@ export function template_effect(fn) {
  * @param {number} flags
  */
 export function block(fn, flags = 0) {
-	return create_effect(RENDER_EFFECT | BLOCK_EFFECT | flags, fn, true);
+	var effect = create_effect(BLOCK_EFFECT | flags, fn);
+	if (DEV) {
+		effect.dev_stack = dev_stack;
+	}
+	return effect;
 }
 
 /**
  * @param {(() => void)} fn
- * @param {boolean} [push]
+ * @param {number} flags
  */
-export function branch(fn, push = true) {
-	return create_effect(RENDER_EFFECT | BRANCH_EFFECT, fn, true, push);
+export function managed(fn, flags = 0) {
+	var effect = create_effect(MANAGED_EFFECT | flags, fn);
+	if (DEV) {
+		effect.dev_stack = dev_stack;
+	}
+	return effect;
+}
+
+/**
+ * @param {(() => void)} fn
+ */
+export function branch(fn) {
+	return create_effect(BRANCH_EFFECT | EFFECT_PRESERVED, fn);
 }
 
 /**
@@ -389,22 +456,6 @@ export function execute_effect_teardown(effect) {
 	}
 }
 
-/**
- * @param {Effect} signal
- * @returns {void}
- */
-export function destroy_effect_deriveds(signal) {
-	var deriveds = signal.deriveds;
-
-	if (deriveds !== null) {
-		signal.deriveds = null;
-
-		for (var i = 0; i < deriveds.length; i += 1) {
-			destroy_derived(deriveds[i]);
-		}
-	}
-}
-
 /**
  * @param {Effect} signal
  * @param {boolean} remove_dom
@@ -415,8 +466,23 @@ export function destroy_effect_children(signal, remove_dom = false) {
 	signal.first = signal.last = null;
 
 	while (effect !== null) {
+		const controller = effect.ac;
+
+		if (controller !== null) {
+			without_reactive_context(() => {
+				controller.abort(STALE_REACTION);
+			});
+		}
+
 		var next = effect.next;
-		destroy_effect(effect, remove_dom);
+
+		if ((effect.f & ROOT_EFFECT) !== 0) {
+			// this is now an independent root
+			effect.parent = null;
+		} else {
+			destroy_effect(effect, remove_dom);
+		}
+
 		effect = next;
 	}
 }
@@ -445,17 +511,20 @@ export function destroy_block_effect_children(signal) {
 export function destroy_effect(effect, remove_dom = true) {
 	var removed = false;
 
-	if ((remove_dom || (effect.f & HEAD_EFFECT) !== 0) && effect.nodes_start !== null) {
-		remove_nodes(effect);
+	if (
+		(remove_dom || (effect.f & HEAD_EFFECT) !== 0) &&
+		effect.nodes !== null &&
+		effect.nodes.end !== null
+	) {
+		remove_effect_dom(effect.nodes.start, /** @type {TemplateNode} */ (effect.nodes.end));
 		removed = true;
 	}
 
+	effect.f |= DESTROYING;
 	destroy_effect_children(effect, remove_dom && !removed);
-	destroy_effect_deriveds(effect);
 	remove_reactions(effect, 0);
-	set_signal_status(effect, DESTROYED);
 
-	var transitions = effect.transitions;
+	var transitions = effect.nodes && effect.nodes.t;
 
 	if (transitions !== null) {
 		for (const transition of transitions) {
@@ -465,6 +534,9 @@ export function destroy_effect(effect, remove_dom = true) {
 
 	execute_effect_teardown(effect);
 
+	effect.f ^= DESTROYING;
+	effect.f |= DESTROYED;
+
 	var parent = effect.parent;
 
 	// If the parent doesn't have any children, then skip this work altogether
@@ -484,21 +556,21 @@ export function destroy_effect(effect, remove_dom = true) {
 		effect.ctx =
 		effect.deps =
 		effect.fn =
-		effect.nodes_start =
-		effect.nodes_end =
+		effect.nodes =
+		effect.ac =
+		effect.b =
 			null;
 }
 
 /**
- * @param {Effect} effect
+ *
+ * @param {TemplateNode | null} node
+ * @param {TemplateNode} end
  */
-export function remove_nodes(effect) {
-	var node = /** @type {TemplateNode | null} */ (effect.nodes_start);
-	var end = effect.nodes_end;
-
+export function remove_effect_dom(node, end) {
 	while (node !== null) {
 		/** @type {TemplateNode | null} */
-		var next = node === end ? null : /** @type {TemplateNode} */ (get_next_sibling(node));
+		var next = node === end ? null : get_next_sibling(node);
 
 		node.remove();
 		node = next;
@@ -532,24 +604,19 @@ export function unlink_effect(effect) {
  * A paused effect does not update, and the DOM subtree becomes inert.
  * @param {Effect} effect
  * @param {() => void} [callback]
+ * @param {boolean} [destroy]
  */
-export function pause_effect(effect, callback) {
+export function pause_effect(effect, callback, destroy = true) {
 	/** @type {TransitionManager[]} */
 	var transitions = [];
 
 	pause_children(effect, transitions, true);
 
-	run_out_transitions(transitions, () => {
-		destroy_effect(effect);
+	var fn = () => {
+		if (destroy) destroy_effect(effect);
 		if (callback) callback();
-	});
-}
+	};
 
-/**
- * @param {TransitionManager[]} transitions
- * @param {() => void} fn
- */
-export function run_out_transitions(transitions, fn) {
 	var remaining = transitions.length;
 	if (remaining > 0) {
 		var check = () => --remaining || fn();
@@ -566,12 +633,14 @@ export function run_out_transitions(transitions, fn) {
  * @param {TransitionManager[]} transitions
  * @param {boolean} local
  */
-export function pause_children(effect, transitions, local) {
+function pause_children(effect, transitions, local) {
 	if ((effect.f & INERT) !== 0) return;
 	effect.f ^= INERT;
 
-	if (effect.transitions !== null) {
-		for (const transition of effect.transitions) {
+	var t = effect.nodes && effect.nodes.t;
+
+	if (t !== null) {
+		for (const transition of t) {
 			if (transition.is_global || local) {
 				transitions.push(transition);
 			}
@@ -582,11 +651,22 @@ export function pause_children(effect, transitions, local) {
 
 	while (child !== null) {
 		var sibling = child.next;
-		var transparent = (child.f & EFFECT_TRANSPARENT) !== 0 || (child.f & BRANCH_EFFECT) !== 0;
-		// TODO we don't need to call pause_children recursively with a linked list in place
-		// it's slightly more involved though as we have to account for `transparent` changing
-		// through the tree.
-		pause_children(child, transitions, transparent ? local : false);
+
+		// If this child is a root effect, then it will become an independent root when its parent
+		// is destroyed, it should therefore not become inert nor partake in transitions.
+		if ((child.f & ROOT_EFFECT) === 0) {
+			var transparent =
+				(child.f & EFFECT_TRANSPARENT) !== 0 ||
+				// If this is a branch effect without a block effect parent,
+				// it means the parent block effect was pruned. In that case,
+				// transparency information was transferred to the branch effect.
+				((child.f & BRANCH_EFFECT) !== 0 && (effect.f & BLOCK_EFFECT) !== 0);
+			// TODO we don't need to call pause_children recursively with a linked list in place
+			// it's slightly more involved though as we have to account for `transparent` changing
+			// through the tree.
+			pause_children(child, transitions, transparent ? local : false);
+		}
+
 		child = sibling;
 	}
 }
@@ -606,17 +686,17 @@ export function resume_effect(effect) {
  */
 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,
-	// apply the change now
-	if (check_dirtiness(effect)) {
-		update_effect(effect);
+	// 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);
+		Batch.ensure().schedule(effect); // Assumption: This happens during the commit phase of the batch, causing another flush, but it's safe
 	}
 
-	// Ensure we toggle the flag after possibly updating the effect so that
-	// each block logic can correctly operate on inert items
-	effect.f ^= INERT;
-
 	var child = effect.first;
 
 	while (child !== null) {
@@ -629,11 +709,37 @@ function resume_children(effect, local) {
 		child = sibling;
 	}
 
-	if (effect.transitions !== null) {
-		for (const transition of effect.transitions) {
+	var t = effect.nodes && effect.nodes.t;
+
+	if (t !== null) {
+		for (const transition of t) {
 			if (transition.is_global || local) {
 				transition.in();
 			}
 		}
 	}
 }
+
+export function aborted(effect = /** @type {Effect} */ (active_effect)) {
+	return (effect.f & DESTROYED) !== 0;
+}
+
+/**
+ * @param {Effect} effect
+ * @param {DocumentFragment} fragment
+ */
+export function move_effect(effect, fragment) {
+	if (!effect.nodes) return;
+
+	/** @type {TemplateNode | null} */
+	var node = effect.nodes.start;
+	var end = effect.nodes.end;
+
+	while (node !== null) {
+		/** @type {TemplateNode | null} */
+		var next = node === end ? null : get_next_sibling(node);
+
+		fragment.append(node);
+		node = next;
+	}
+}
diff --git a/packages/svelte/src/internal/client/reactivity/equality.js b/packages/svelte/src/internal/client/reactivity/equality.js
index 37a9994ab8..1041238573 100644
--- a/packages/svelte/src/internal/client/reactivity/equality.js
+++ b/packages/svelte/src/internal/client/reactivity/equality.js
@@ -1,4 +1,5 @@
 /** @import { Equals } from '#client' */
+
 /** @type {Equals} */
 export function equals(value) {
 	return value === this.v;
diff --git a/packages/svelte/src/internal/client/reactivity/props.js b/packages/svelte/src/internal/client/reactivity/props.js
index 8fb13f7e2c..c2f3698809 100644
--- a/packages/svelte/src/internal/client/reactivity/props.js
+++ b/packages/svelte/src/internal/client/reactivity/props.js
@@ -1,4 +1,4 @@
-/** @import { Source } from './types.js' */
+/** @import { Derived, Effect, Source } from './types.js' */
 import { DEV } from 'esm-env';
 import {
 	PROPS_IS_BINDABLE,
@@ -8,28 +8,21 @@ import {
 	PROPS_IS_UPDATED
 } from '../../../constants.js';
 import { get_descriptor, is_function } from '../../shared/utils.js';
-import { mutable_source, set, source } from './sources.js';
+import { set, source, update } from './sources.js';
 import { derived, derived_safe_equal } from './deriveds.js';
 import {
 	active_effect,
 	get,
-	captured_signals,
+	is_destroying_effect,
 	set_active_effect,
-	untrack,
-	update
+	untrack
 } from '../runtime.js';
-import { safe_equals } from './equality.js';
 import * as e from '../errors.js';
-import {
-	BRANCH_EFFECT,
-	LEGACY_DERIVED_PROP,
-	LEGACY_PROPS,
-	ROOT_EFFECT,
-	STATE_SYMBOL
-} from '../constants.js';
+import { DESTROYED, LEGACY_PROPS, STATE_SYMBOL } from '#client/constants';
 import { proxy } from '../proxy.js';
 import { capture_store_binding } from './store.js';
 import { legacy_mode_flag } from '../../flags/index.js';
+import { effect, render_effect } from './effects.js';
 
 /**
  * @param {((value?: number) => number)} fn
@@ -56,11 +49,11 @@ export function update_pre_prop(fn, d = 1) {
 /**
  * The proxy handler for rest props (i.e. `const { x, ...rest } = $props()`).
  * Is passed the full `$$props` object and excludes the named props.
- * @type {ProxyHandler<{ props: Record<string | symbol, unknown>, exclude: Array<string | symbol>, name?: string }>}}
+ * @type {ProxyHandler<{ props: Record<string | symbol, unknown>, exclude: Set<string | symbol>, name?: string }>}}
  */
 const rest_props_handler = {
 	get(target, key) {
-		if (target.exclude.includes(key)) return;
+		if (target.exclude.has(key)) return;
 		return target.props[key];
 	},
 	set(target, key) {
@@ -72,7 +65,7 @@ const rest_props_handler = {
 		return false;
 	},
 	getOwnPropertyDescriptor(target, key) {
-		if (target.exclude.includes(key)) return;
+		if (target.exclude.has(key)) return;
 		if (key in target.props) {
 			return {
 				enumerable: true,
@@ -82,17 +75,17 @@ const rest_props_handler = {
 		}
 	},
 	has(target, key) {
-		if (target.exclude.includes(key)) return false;
+		if (target.exclude.has(key)) return false;
 		return key in target.props;
 	},
 	ownKeys(target) {
-		return Reflect.ownKeys(target.props).filter((key) => !target.exclude.includes(key));
+		return Reflect.ownKeys(target.props).filter((key) => !target.exclude.has(key));
 	}
 };
 
 /**
  * @param {Record<string, unknown>} props
- * @param {string[]} exclude
+ * @param {Set<string>} exclude
  * @param {string} [name]
  * @returns {Record<string, unknown>}
  */
@@ -106,7 +99,7 @@ export function rest_props(props, exclude, name) {
 
 /**
  * The proxy handler for legacy $$restProps and $$props
- * @type {ProxyHandler<{ props: Record<string | symbol, unknown>, exclude: Array<string | symbol>, special: Record<string | symbol, (v?: unknown) => unknown>, version: Source<number> }>}}
+ * @type {ProxyHandler<{ props: Record<string | symbol, unknown>, exclude: Array<string | symbol>, special: Record<string | symbol, (v?: unknown) => unknown>, version: Source<number>, parent_effect: Effect }>}}
  */
 const legacy_rest_props_handler = {
 	get(target, key) {
@@ -116,17 +109,25 @@ const legacy_rest_props_handler = {
 	},
 	set(target, key, value) {
 		if (!(key in target.special)) {
-			// Handle props that can temporarily get out of sync with the parent
-			/** @type {Record<string, (v?: unknown) => unknown>} */
-			target.special[key] = prop(
-				{
-					get [key]() {
-						return target.props[key];
-					}
-				},
-				/** @type {string} */ (key),
-				PROPS_IS_UPDATED
-			);
+			var previous_effect = active_effect;
+
+			try {
+				set_active_effect(target.parent_effect);
+
+				// Handle props that can temporarily get out of sync with the parent
+				/** @type {Record<string, (v?: unknown) => unknown>} */
+				target.special[key] = prop(
+					{
+						get [key]() {
+							return target.props[key];
+						}
+					},
+					/** @type {string} */ (key),
+					PROPS_IS_UPDATED
+				);
+			} finally {
+				set_active_effect(previous_effect);
+			}
 		}
 
 		target.special[key](value);
@@ -165,15 +166,26 @@ const legacy_rest_props_handler = {
  * @returns {Record<string, unknown>}
  */
 export function legacy_rest_props(props, exclude) {
-	return new Proxy({ props, exclude, special: {}, version: source(0) }, legacy_rest_props_handler);
+	return new Proxy(
+		{
+			props,
+			exclude,
+			special: {},
+			version: source(0),
+			// TODO this is only necessary because we need to track component
+			// destruction inside `prop`, because of `bind:this`, but it
+			// seems likely that we can simplify `bind:this` instead
+			parent_effect: /** @type {Effect} */ (active_effect)
+		},
+		legacy_rest_props_handler
+	);
 }
 
 /**
  * The proxy handler for spread props. Handles the incoming array of props
  * that looks like `() => { dynamic: props }, { static: prop }, ..` and wraps
  * them so that the whole thing is passed to the component as the `$$props` argument.
- * @template {Record<string | symbol, unknown>} T
- * @type {ProxyHandler<{ props: Array<T | (() => T)> }>}}
+ * @type {ProxyHandler<{ props: Array<Record<string | symbol, unknown> | (() => Record<string | symbol, unknown>)> }>}}
  */
 const spread_props_handler = {
 	get(target, key) {
@@ -231,9 +243,15 @@ const spread_props_handler = {
 
 		for (let p of target.props) {
 			if (is_function(p)) p = p();
+			if (!p) continue;
+
 			for (const key in p) {
 				if (!keys.includes(key)) keys.push(key);
 			}
+
+			for (const key of Object.getOwnPropertySymbols(p)) {
+				if (!keys.includes(key)) keys.push(key);
+			}
 		}
 
 		return keys;
@@ -248,26 +266,6 @@ export function spread_props(...props) {
 	return new Proxy({ props }, spread_props_handler);
 }
 
-/**
- * @template T
- * @param {() => T} fn
- * @returns {T}
- */
-function with_parent_branch(fn) {
-	var effect = active_effect;
-	var previous_effect = active_effect;
-
-	while (effect !== null && (effect.f & (BRANCH_EFFECT | ROOT_EFFECT)) === 0) {
-		effect = effect.parent;
-	}
-	try {
-		set_active_effect(effect);
-		return fn();
-	} finally {
-		set_active_effect(previous_effect);
-	}
-}
-
 /**
  * This function is responsible for synchronizing a possibly bound prop with the inner component state.
  * It is used whenever the compiler sees that the component writes to the prop, or when it has a default prop_value.
@@ -279,159 +277,160 @@ function with_parent_branch(fn) {
  * @returns {(() => V | ((arg: V) => V) | ((arg: V, mutation: boolean) => V))}
  */
 export function prop(props, key, flags, fallback) {
-	var immutable = (flags & PROPS_IS_IMMUTABLE) !== 0;
 	var runes = !legacy_mode_flag || (flags & PROPS_IS_RUNES) !== 0;
 	var bindable = (flags & PROPS_IS_BINDABLE) !== 0;
 	var lazy = (flags & PROPS_IS_LAZY_INITIAL) !== 0;
-	var is_store_sub = false;
-	var prop_value;
-
-	if (bindable) {
-		[prop_value, is_store_sub] = capture_store_binding(() => /** @type {V} */ (props[key]));
-	} else {
-		prop_value = /** @type {V} */ (props[key]);
-	}
-
-	// Can be the case when someone does `mount(Component, props)` with `let props = $state({...})`
-	// or `createClassComponent(Component, props)`
-	var is_entry_props = STATE_SYMBOL in props || LEGACY_PROPS in props;
-
-	var setter =
-		get_descriptor(props, key)?.set ??
-		(is_entry_props && bindable && key in props ? (v) => (props[key] = v) : undefined);
 
 	var fallback_value = /** @type {V} */ (fallback);
 	var fallback_dirty = true;
-	var fallback_used = false;
+	var fallback_signal = /** @type {Derived<V> | undefined} */ (undefined);
 
 	var get_fallback = () => {
-		fallback_used = true;
+		if (lazy && runes) {
+			fallback_signal ??= derived(/** @type {() => V} */ (fallback));
+			return get(fallback_signal);
+		}
+
 		if (fallback_dirty) {
 			fallback_dirty = false;
-			if (lazy) {
-				fallback_value = untrack(/** @type {() => V} */ (fallback));
-			} else {
-				fallback_value = /** @type {V} */ (fallback);
-			}
+
+			fallback_value = lazy
+				? untrack(/** @type {() => V} */ (fallback))
+				: /** @type {V} */ (fallback);
 		}
 
 		return fallback_value;
 	};
 
-	if (prop_value === undefined && fallback !== undefined) {
-		if (setter && runes) {
-			e.props_invalid_value(key);
-		}
+	/** @type {((v: V) => void) | undefined} */
+	let setter;
 
-		prop_value = get_fallback();
-		if (setter) setter(prop_value);
+	if (bindable) {
+		// Can be the case when someone does `mount(Component, props)` with `let props = $state({...})`
+		// or `createClassComponent(Component, props)`
+		var is_entry_props = STATE_SYMBOL in props || LEGACY_PROPS in props;
+
+		setter =
+			get_descriptor(props, key)?.set ??
+			(is_entry_props && key in props ? (v) => (props[key] = v) : undefined);
+	}
+
+	/** @type {V} */
+	var initial_value;
+	var is_store_sub = false;
+
+	if (bindable) {
+		[initial_value, is_store_sub] = capture_store_binding(() => /** @type {V} */ (props[key]));
+	} else {
+		initial_value = /** @type {V} */ (props[key]);
+	}
+
+	if (initial_value === undefined && fallback !== undefined) {
+		initial_value = get_fallback();
+
+		if (setter) {
+			if (runes) e.props_invalid_value(key);
+			setter(initial_value);
+		}
 	}
 
 	/** @type {() => V} */
 	var getter;
+
 	if (runes) {
 		getter = () => {
 			var value = /** @type {V} */ (props[key]);
 			if (value === undefined) return get_fallback();
 			fallback_dirty = true;
-			fallback_used = false;
 			return value;
 		};
 	} else {
-		// Svelte 4 did not trigger updates when a primitive value was updated to the same value.
-		// Replicate that behavior through using a derived
-		var derived_getter = with_parent_branch(() =>
-			(immutable ? derived : derived_safe_equal)(() => /** @type {V} */ (props[key]))
-		);
-		derived_getter.f |= LEGACY_DERIVED_PROP;
 		getter = () => {
-			var value = get(derived_getter);
-			if (value !== undefined) fallback_value = /** @type {V} */ (undefined);
+			var value = /** @type {V} */ (props[key]);
+
+			if (value !== undefined) {
+				// in legacy mode, we don't revert to the fallback value
+				// if the prop goes from defined to undefined. The easiest
+				// way to model this is to make the fallback undefined
+				// as soon as the prop has a value
+				fallback_value = /** @type {V} */ (undefined);
+			}
+
 			return value === undefined ? fallback_value : value;
 		};
 	}
 
-	// easy mode — prop is never written to
-	if ((flags & PROPS_IS_UPDATED) === 0) {
+	// prop is never written to — we only need a getter
+	if (runes && (flags & PROPS_IS_UPDATED) === 0) {
 		return getter;
 	}
 
-	// intermediate mode — prop is written to, but the parent component had
-	// `bind:foo` which means we can just call `$$props.foo = value` directly
+	// prop is written to, but the parent component had `bind:foo` which
+	// means we can just call `$$props.foo = value` directly
 	if (setter) {
 		var legacy_parent = props.$$legacy;
-		return function (/** @type {any} */ value, /** @type {boolean} */ mutation) {
-			if (arguments.length > 0) {
-				// We don't want to notify if the value was mutated and the parent is in runes mode.
-				// In that case the state proxy (if it exists) should take care of the notification.
-				// If the parent is not in runes mode, we need to notify on mutation, too, that the prop
-				// has changed because the parent will not be able to detect the change otherwise.
-				if (!runes || !mutation || legacy_parent || is_store_sub) {
-					/** @type {Function} */ (setter)(mutation ? getter() : value);
+		return /** @type {() => V} */ (
+			function (/** @type {V} */ value, /** @type {boolean} */ mutation) {
+				if (arguments.length > 0) {
+					// We don't want to notify if the value was mutated and the parent is in runes mode.
+					// In that case the state proxy (if it exists) should take care of the notification.
+					// If the parent is not in runes mode, we need to notify on mutation, too, that the prop
+					// has changed because the parent will not be able to detect the change otherwise.
+					if (!runes || !mutation || legacy_parent || is_store_sub) {
+						/** @type {Function} */ (setter)(mutation ? getter() : value);
+					}
+
+					return value;
 				}
-				return value;
-			} else {
+
 				return getter();
 			}
-		};
+		);
 	}
 
-	// hard mode. this is where it gets ugly — the value in the child should
-	// synchronize with the parent, but it should also be possible to temporarily
-	// set the value to something else locally.
-	var from_child = false;
-	var was_from_child = false;
-
-	// The derived returns the current value. The underlying mutable
-	// source is written to from various places to persist this value.
-	var inner_current_value = mutable_source(prop_value);
-	var current_value = with_parent_branch(() =>
-		derived(() => {
-			var parent_value = getter();
-			var child_value = get(inner_current_value);
-
-			if (from_child) {
-				from_child = false;
-				was_from_child = true;
-				return child_value;
-			}
+	// Either prop is written to, but there's no binding, which means we
+	// create a derived that we can write to locally.
+	// Or we are in legacy mode where we always create a derived to replicate that
+	// Svelte 4 did not trigger updates when a primitive value was updated to the same value.
+	var overridden = false;
 
-			was_from_child = false;
-			return (inner_current_value.v = parent_value);
-		})
-	);
+	var d = ((flags & PROPS_IS_IMMUTABLE) !== 0 ? derived : derived_safe_equal)(() => {
+		overridden = false;
+		return getter();
+	});
 
-	if (!immutable) current_value.equals = safe_equals;
-
-	return function (/** @type {any} */ value, /** @type {boolean} */ mutation) {
-		// legacy nonsense — need to ensure the source is invalidated when necessary
-		// also needed for when handling inspect logic so we can inspect the correct source signal
-		if (captured_signals !== null) {
-			// set this so that we don't reset to the parent value if `d`
-			// is invalidated because of `invalidate_inner_signals` (rather
-			// than because the parent or child value changed)
-			from_child = was_from_child;
-			// invoke getters so that signals are picked up by `invalidate_inner_signals`
-			getter();
-			get(inner_current_value);
-		}
+	if (DEV) {
+		d.label = key;
+	}
+
+	// Capture the initial value if it's bindable
+	if (bindable) get(d);
+
+	var parent_effect = /** @type {Effect} */ (active_effect);
 
-		if (arguments.length > 0) {
-			const new_value = mutation ? get(current_value) : runes && bindable ? proxy(value) : value;
+	return /** @type {() => V} */ (
+		function (/** @type {any} */ value, /** @type {boolean} */ mutation) {
+			if (arguments.length > 0) {
+				const new_value = mutation ? get(d) : runes && bindable ? proxy(value) : value;
+
+				set(d, new_value);
+				overridden = true;
 
-			if (!current_value.equals(new_value)) {
-				from_child = true;
-				set(inner_current_value, new_value);
-				// To ensure the fallback value is consistent when used with proxies, we
-				// update the local fallback_value, but only if the fallback is actively used
-				if (fallback_used && fallback_value !== undefined) {
+				if (fallback_value !== undefined) {
 					fallback_value = new_value;
 				}
-				untrack(() => get(current_value)); // force a synchronisation immediately
+
+				return value;
 			}
 
-			return value;
+			// special case — avoid recalculating the derived if we're in a
+			// teardown function and the prop was overridden locally, or the
+			// component was already destroyed (people could access props in a timeout)
+			if ((is_destroying_effect && overridden) || (parent_effect.f & DESTROYED) !== 0) {
+				return d.v;
+			}
+
+			return get(d);
 		}
-		return get(current_value);
-	};
+	);
 }
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
index 24dd837772..218941ab67 100644
--- a/packages/svelte/src/internal/client/reactivity/sources.js
+++ b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -1,24 +1,19 @@
-/** @import { Derived, Effect, Reaction, Source, Value } from '#client' */
+/** @import { Derived, Effect, Source, Value } from '#client' */
 import { DEV } from 'esm-env';
 import {
-	component_context,
 	active_reaction,
-	new_deps,
 	active_effect,
 	untracked_writes,
 	get,
-	is_runes,
-	schedule_effect,
 	set_untracked_writes,
-	set_signal_status,
 	untrack,
-	increment_version,
+	increment_write_version,
 	update_effect,
-	derived_sources,
-	set_derived_sources,
-	check_dirtiness,
-	set_is_flushing_effect,
-	is_flushing_effect
+	current_sources,
+	is_dirty,
+	untracking,
+	is_destroying_effect,
+	push_reaction_value
 } from '../runtime.js';
 import { equals, safe_equals } from './equality.js';
 import {
@@ -26,22 +21,48 @@ import {
 	DERIVED,
 	DIRTY,
 	BRANCH_EFFECT,
-	INSPECT_EFFECT,
-	UNOWNED,
+	EAGER_EFFECT,
 	MAYBE_DIRTY,
-	BLOCK_EFFECT
-} from '../constants.js';
+	BLOCK_EFFECT,
+	ROOT_EFFECT,
+	ASYNC,
+	WAS_MARKED,
+	CONNECTED,
+	REACTION_IS_UPDATING
+} from '#client/constants';
 import * as e from '../errors.js';
-import { legacy_mode_flag } from '../../flags/index.js';
-import { get_stack } from '../dev/tracing.js';
+import { legacy_mode_flag, tracing_mode_flag } from '../../flags/index.js';
+import { tag_proxy } from '../dev/tracing.js';
+import { get_error } from '../../shared/dev.js';
+import { component_context, is_runes } from '../context.js';
+import {
+	Batch,
+	batch_values,
+	eager_block_effects,
+	schedule_effect,
+	legacy_updates
+} from './batch.js';
+import { proxy } from '../proxy.js';
+import { execute_derived } from './deriveds.js';
+import { set_signal_status, update_derived_status } from './status.js';
 
-export let inspect_effects = new Set();
+/** @type {Set<Effect>} */
+export let eager_effects = new Set();
+
+/** @type {Map<Source, any>} */
+export const old_values = new Map();
 
 /**
  * @param {Set<any>} v
  */
-export function set_inspect_effects(v) {
-	inspect_effects = v;
+export function set_eager_effects(v) {
+	eager_effects = v;
+}
+
+let eager_effects_deferred = false;
+
+export function set_eager_effects_deferred() {
+	eager_effects_deferred = true;
 }
 
 /**
@@ -50,6 +71,7 @@ export function set_inspect_effects(v) {
  * @param {Error | null} [stack]
  * @returns {Source<V>}
  */
+// TODO rename this to `state` throughout the codebase
 export function source(v, stack) {
 	/** @type {Value} */
 	var signal = {
@@ -57,12 +79,15 @@ export function source(v, stack) {
 		v,
 		reactions: null,
 		equals,
-		version: 0
+		rv: 0,
+		wv: 0
 	};
 
-	if (DEV) {
-		signal.created = stack ?? get_stack('CreatedAt');
-		signal.debug = null;
+	if (DEV && tracing_mode_flag) {
+		signal.created = stack ?? get_error('created at');
+		signal.updated = null;
+		signal.set_during_effect = false;
+		signal.trace = null;
 	}
 
 	return signal;
@@ -71,9 +96,15 @@ export function source(v, stack) {
 /**
  * @template V
  * @param {V} v
+ * @param {Error | null} [stack]
  */
-export function state(v) {
-	return push_derived_source(source(v));
+/*#__NO_SIDE_EFFECTS__*/
+export function state(v, stack) {
+	const s = source(v, stack);
+
+	push_reaction_value(s);
+
+	return s;
 }
 
 /**
@@ -83,7 +114,7 @@ export function state(v) {
  * @returns {Source<V>}
  */
 /*#__NO_SIDE_EFFECTS__*/
-export function mutable_source(initial_value, immutable = false) {
+export function mutable_source(initial_value, immutable = false, trackable = true) {
 	const s = source(initial_value);
 	if (!immutable) {
 		s.equals = safe_equals;
@@ -91,40 +122,13 @@ export function mutable_source(initial_value, immutable = false) {
 
 	// bind the signal to the component context, in case we need to
 	// track updates to trigger beforeUpdate/afterUpdate callbacks
-	if (legacy_mode_flag && component_context !== null && component_context.l !== null) {
+	if (legacy_mode_flag && trackable && component_context !== null && component_context.l !== null) {
 		(component_context.l.s ??= []).push(s);
 	}
 
 	return s;
 }
 
-/**
- * @template V
- * @param {V} v
- * @param {boolean} [immutable]
- * @returns {Source<V>}
- */
-export function mutable_state(v, immutable = false) {
-	return push_derived_source(mutable_source(v, immutable));
-}
-
-/**
- * @template V
- * @param {Source<V>} source
- */
-/*#__NO_SIDE_EFFECTS__*/
-function push_derived_source(source) {
-	if (active_reaction !== null && (active_reaction.f & DERIVED) !== 0) {
-		if (derived_sources === null) {
-			set_derived_sources([source]);
-		} else {
-			derived_sources.push(source);
-		}
-	}
-
-	return source;
-}
-
 /**
  * @template V
  * @param {Value<V>} source
@@ -142,94 +146,195 @@ export function mutate(source, value) {
  * @template V
  * @param {Source<V>} source
  * @param {V} value
+ * @param {boolean} [should_proxy]
  * @returns {V}
  */
-export function set(source, value) {
+export function set(source, value, should_proxy = false) {
 	if (
 		active_reaction !== null &&
+		// since we are untracking the function inside `$inspect.with` we need to add this check
+		// to ensure we error if state is set inside an inspect effect
+		(!untracking || (active_reaction.f & EAGER_EFFECT) !== 0) &&
 		is_runes() &&
-		(active_reaction.f & (DERIVED | BLOCK_EFFECT)) !== 0 &&
-		// If the source was created locally within the current derived, then
-		// we allow the mutation.
-		(derived_sources === null || !derived_sources.includes(source))
+		(active_reaction.f & (DERIVED | BLOCK_EFFECT | ASYNC | EAGER_EFFECT)) !== 0 &&
+		(current_sources === null || !current_sources.has(source))
 	) {
 		e.state_unsafe_mutation();
 	}
 
-	return internal_set(source, value);
+	let new_value = should_proxy ? proxy(value) : value;
+
+	if (DEV) {
+		tag_proxy(new_value, /** @type {string} */ (source.label));
+	}
+
+	return internal_set(source, new_value, legacy_updates);
 }
 
 /**
  * @template V
  * @param {Source<V>} source
  * @param {V} value
+ * @param {Effect[] | null} [updated_during_traversal]
  * @returns {V}
  */
-export function internal_set(source, value) {
+export function internal_set(source, value, updated_during_traversal = null) {
 	if (!source.equals(value)) {
-		source.v = value;
-		source.version = increment_version();
+		old_values.set(source, is_destroying_effect ? value : source.v);
+
+		var batch = Batch.ensure();
+		batch.capture(source, value);
 
 		if (DEV) {
-			source.updated = get_stack('UpdatedAt');
+			if (tracing_mode_flag || active_effect !== null) {
+				source.updated ??= new Map();
+
+				// For performance reasons, when not using $inspect.trace, we only start collecting stack traces
+				// after the same source has been updated more than 5 times in the same flush cycle.
+				const count = (source.updated.get('')?.count ?? 0) + 1;
+				source.updated.set('', { error: /** @type {any} */ (null), count });
+
+				if (tracing_mode_flag || count > 5) {
+					const error = get_error('updated at');
+
+					if (error !== null) {
+						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;
+			}
 		}
 
-		mark_reactions(source, DIRTY);
+		if ((source.f & DERIVED) !== 0) {
+			const derived = /** @type {Derived} */ (source);
 
-		// If the current signal is running for the first time, it won't have any
-		// reactions as we only allocate and assign the reactions after the signal
-		// has fully executed. So in the case of ensuring it registers the reaction
+			// if we are assigning to a dirty derived we set it to clean/maybe dirty but we also eagerly execute it to track the dependencies
+			if ((source.f & DIRTY) !== 0) {
+				execute_derived(derived);
+			}
+
+			// During time traveling we don't want to reset the status so that
+			// traversal of the graph in the other batches still happens
+			if (batch_values === null) {
+				update_derived_status(derived);
+			}
+		}
+
+		source.wv = increment_write_version();
+
+		// For debugging, in case you want to know which reactions are being scheduled:
+		// log_reactions(source);
+		mark_reactions(source, DIRTY, updated_during_traversal);
+
+		// It's possible that the current reaction might not have up-to-date dependencies
+		// whilst it's actively running. So in the case of ensuring it registers the reaction
 		// properly for itself, we need to ensure the current effect actually gets
 		// scheduled. i.e: `$effect(() => x++)`
 		if (
 			is_runes() &&
 			active_effect !== null &&
 			(active_effect.f & CLEAN) !== 0 &&
-			(active_effect.f & BRANCH_EFFECT) === 0
+			(active_effect.f & (BRANCH_EFFECT | ROOT_EFFECT)) === 0
 		) {
-			if (new_deps !== null && new_deps.includes(source)) {
-				set_signal_status(active_effect, DIRTY);
-				schedule_effect(active_effect);
+			if (untracked_writes === null) {
+				set_untracked_writes([source]);
 			} else {
-				if (untracked_writes === null) {
-					set_untracked_writes([source]);
-				} else {
-					untracked_writes.push(source);
-				}
+				untracked_writes.push(source);
 			}
 		}
 
-		if (DEV && inspect_effects.size > 0) {
-			const inspects = Array.from(inspect_effects);
-			var previously_flushing_effect = is_flushing_effect;
-			set_is_flushing_effect(true);
-			try {
-				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);
-					}
-				}
-			} finally {
-				set_is_flushing_effect(previously_flushing_effect);
-			}
-			inspect_effects.clear();
+		if (!batch.is_fork && eager_effects.size > 0 && !eager_effects_deferred) {
+			flush_eager_effects();
 		}
 	}
 
 	return value;
 }
 
+export function flush_eager_effects() {
+	eager_effects_deferred = false;
+
+	for (const effect of eager_effects) {
+		// 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);
+		}
+
+		let dirty;
+
+		try {
+			dirty = is_dirty(effect);
+		} catch {
+			// Dirty-checking can evaluate derived dependencies and throw in cases where
+			// parent effects are about to destroy this eager effect. Run the effect so
+			// its own error handling can deal with transient failures.
+			dirty = true;
+		}
+
+		if (dirty) {
+			update_effect(effect);
+		}
+	}
+
+	eager_effects.clear();
+}
+
+/**
+ * @template {number | bigint} T
+ * @param {Source<T>} source
+ * @param {1 | -1} [d]
+ * @returns {T}
+ */
+export function update(source, d = 1) {
+	var value = get(source);
+	var result = d === 1 ? value++ : value--;
+
+	set(source, value);
+
+	// @ts-expect-error
+	return result;
+}
+
+/**
+ * @template {number | bigint} T
+ * @param {Source<T>} source
+ * @param {1 | -1} [d]
+ * @returns {T}
+ */
+export function update_pre(source, d = 1) {
+	var value = get(source);
+
+	// @ts-expect-error
+	// eslint-disable-next-line no-useless-assignment -- `++`/`--` used for return value, not side effect on `value`
+	return set(source, d === 1 ? ++value : --value);
+}
+
+/**
+ * Silently (without using `get`) increment a source
+ * @param {Source<number>} source
+ */
+export function increment(source) {
+	set(source, source.v + 1);
+}
+
 /**
  * @param {Value} signal
  * @param {number} status should be DIRTY or MAYBE_DIRTY
+ * @param {Effect[] | null} updated_during_traversal
  * @returns {void}
  */
-function mark_reactions(signal, status) {
+function mark_reactions(signal, status, updated_during_traversal) {
 	var reactions = signal.reactions;
 	if (reactions === null) return;
 
@@ -240,26 +345,48 @@ 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;
 
-		// Inspect effects need to run immediately, so that the stack trace makes sense
-		if (DEV && (flags & INSPECT_EFFECT) !== 0) {
-			inspect_effects.add(reaction);
-			continue;
+		var not_dirty = (flags & DIRTY) === 0;
+
+		// don't set a DIRTY reaction to MAYBE_DIRTY
+		if (not_dirty) {
+			set_signal_status(reaction, status);
 		}
 
-		set_signal_status(reaction, status);
+		if ((flags & EAGER_EFFECT) !== 0) {
+			// Eager effects need to run immediately:
+			// - for $inspect so that the stack trace makes sense
+			// - for $state.eager because they might be without an effect parent
+			eager_effects.add(/** @type {Effect} */ (reaction));
+		} else if ((flags & DERIVED) !== 0) {
+			var derived = /** @type {Derived} */ (reaction);
+
+			batch_values?.delete(derived);
+
+			if ((flags & WAS_MARKED) === 0) {
+				// Only connected deriveds being executed outside the update cycle can be reliably unmarked right away
+				if (
+					flags & CONNECTED &&
+					(active_effect === null || (active_effect.f & REACTION_IS_UPDATING) === 0)
+				) {
+					reaction.f |= WAS_MARKED;
+				}
+
+				mark_reactions(derived, MAYBE_DIRTY, updated_during_traversal);
+			}
+		} else if (not_dirty) {
+			var effect = /** @type {Effect} */ (reaction);
+
+			if ((flags & BLOCK_EFFECT) !== 0 && eager_block_effects !== null) {
+				eager_block_effects.add(effect);
+			}
 
-		// 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);
+			if (updated_during_traversal !== null) {
+				updated_during_traversal.push(effect);
 			} else {
-				schedule_effect(/** @type {Effect} */ (reaction));
+				schedule_effect(effect);
 			}
 		}
 	}
diff --git a/packages/svelte/src/internal/client/reactivity/status.js b/packages/svelte/src/internal/client/reactivity/status.js
new file mode 100644
index 0000000000..024285e73a
--- /dev/null
+++ b/packages/svelte/src/internal/client/reactivity/status.js
@@ -0,0 +1,25 @@
+/** @import { Derived, Signal } from '#client' */
+import { CLEAN, CONNECTED, DIRTY, MAYBE_DIRTY } from '#client/constants';
+
+const STATUS_MASK = ~(DIRTY | MAYBE_DIRTY | CLEAN);
+
+/**
+ * @param {Signal} signal
+ * @param {number} status
+ */
+export function set_signal_status(signal, status) {
+	signal.f = (signal.f & STATUS_MASK) | status;
+}
+
+/**
+ * Set a derived's status to CLEAN or MAYBE_DIRTY based on its connection state.
+ * @param {Derived} derived
+ */
+export function update_derived_status(derived) {
+	// Only mark as MAYBE_DIRTY if disconnected and has dependencies.
+	if ((derived.f & CONNECTED) !== 0 || derived.deps === null) {
+		set_signal_status(derived, CLEAN);
+	} else {
+		set_signal_status(derived, MAYBE_DIRTY);
+	}
+}
diff --git a/packages/svelte/src/internal/client/reactivity/store.js b/packages/svelte/src/internal/client/reactivity/store.js
index 11eee23e0a..726765b619 100644
--- a/packages/svelte/src/internal/client/reactivity/store.js
+++ b/packages/svelte/src/internal/client/reactivity/store.js
@@ -1,10 +1,18 @@
 /** @import { StoreReferencesContainer } from '#client' */
 /** @import { Store } from '#shared' */
 import { subscribe_to_store } from '../../../store/utils.js';
-import { noop } from '../../shared/utils.js';
+import { get as get_store } from '../../../store/shared/index.js';
+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';
+
+/**
+ * We set this to `true` when updating a store so that we correctly
+ * schedule effects if the update takes place inside a `$:` effect
+ */
+export let legacy_is_updating_store = false;
 
 /**
  * Whether or not the prop currently being read is a store binding, as in
@@ -13,6 +21,8 @@ import { mutable_source, set } from './sources.js';
  */
 let is_store_binding = false;
 
+let IS_UNMOUNTED = Symbol('unmounted');
+
 /**
  * Gets the current value of a store. If the store isn't subscribed to yet, it will create a proxy
  * signal that will be updated when the store is. The store references container is needed to
@@ -30,7 +40,12 @@ export function store_get(store, store_name, stores) {
 		unsubscribe: noop
 	});
 
-	if (entry.store !== store) {
+	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();
 		entry.store = store ?? null;
 
@@ -54,6 +69,13 @@ export function store_get(store, store_name, stores) {
 		}
 	}
 
+	// if the component that setup this stores is already unmounted the source will be out of sync
+	// so we just use the `get` for the stores, less performant but it avoids to create a memory leak
+	// and it will keep the value consistent
+	if (store && IS_UNMOUNTED in stores) {
+		return get_store(store);
+	}
+
 	return get(entry.source);
 }
 
@@ -86,7 +108,7 @@ export function store_unsub(store, store_name, stores) {
  * @returns {V}
  */
 export function store_set(store, value) {
-	store.set(value);
+	update_with_flag(store, value);
 	return value;
 }
 
@@ -103,20 +125,41 @@ export function invalidate_store(stores, store_name) {
 
 /**
  * Unsubscribes from all auto-subscribed stores on destroy
- * @returns {StoreReferencesContainer}
+ * @returns {[StoreReferencesContainer, ()=>void]}
  */
 export function setup_stores() {
 	/** @type {StoreReferencesContainer} */
 	const stores = {};
 
-	teardown(() => {
-		for (var store_name in stores) {
-			const ref = stores[store_name];
-			ref.unsubscribe();
-		}
-	});
+	function cleanup() {
+		teardown(() => {
+			for (var store_name in stores) {
+				const ref = stores[store_name];
+				ref.unsubscribe();
+			}
+			define_property(stores, IS_UNMOUNTED, {
+				enumerable: false,
+				value: true
+			});
+		});
+	}
 
-	return stores;
+	return [stores, cleanup];
+}
+
+/**
+ * @param {Store<V>} store
+ * @param {V} value
+ * @template V
+ */
+function update_with_flag(store, value) {
+	legacy_is_updating_store = true;
+
+	try {
+		store.set(value);
+	} finally {
+		legacy_is_updating_store = false;
+	}
 }
 
 /**
@@ -127,7 +170,7 @@ export function setup_stores() {
  * @template V
  */
 export function store_mutate(store, expression, new_value) {
-	store.set(new_value);
+	update_with_flag(store, new_value);
 	return expression;
 }
 
@@ -138,7 +181,7 @@ export function store_mutate(store, expression, new_value) {
  * @returns {number}
  */
 export function update_store(store, store_value, d = 1) {
-	store.set(store_value + d);
+	update_with_flag(store, store_value + d);
 	return store_value;
 }
 
@@ -150,7 +193,7 @@ export function update_store(store, store_value, d = 1) {
  */
 export function update_pre_store(store, store_value, d = 1) {
 	const value = store_value + d;
-	store.set(value);
+	update_with_flag(store, value);
 	return value;
 }
 
diff --git a/packages/svelte/src/internal/client/reactivity/types.d.ts b/packages/svelte/src/internal/client/reactivity/types.d.ts
index 13e14414b5..0ee8570c3d 100644
--- a/packages/svelte/src/internal/client/reactivity/types.d.ts
+++ b/packages/svelte/src/internal/client/reactivity/types.d.ts
@@ -1,23 +1,44 @@
-import type { ComponentContext, Dom, Equals, TemplateNode, TransitionManager } from '#client';
+import type {
+	AnimationManager,
+	ComponentContext,
+	DevStackEntry,
+	Equals,
+	TemplateNode,
+	TransitionManager
+} from '#client';
+import type { Boundary } from '../dom/blocks/boundary';
 
 export interface Signal {
 	/** Flags bitmask */
 	f: number;
 	/** Write version */
-	version: number;
+	wv: number;
 }
 
 export interface Value<V = unknown> extends Signal {
-	/** Signals that read from this signal */
-	reactions: null | Reaction[];
 	/** Equality function */
 	equals: Equals;
+	/** Signals that read from this signal */
+	reactions: null | Reaction[];
+	/** Read version */
+	rv: number;
 	/** The latest value for this signal */
 	v: V;
-	/** Dev only */
+
+	// dev-only
+	/** A label (e.g. the `foo` in `let foo = $state(...)`) used for `$inspect.trace()` */
+	label?: string;
+	/** An error with a stack trace showing when the source was created */
 	created?: Error | null;
-	updated?: Error | null;
-	debug?: null | (() => void);
+	/** 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
+	 */
+	set_during_effect?: boolean;
+	/** A function that retrieves the underlying source, used for each block item signals */
+	trace?: null | (() => void);
 }
 
 export interface Reaction extends Signal {
@@ -27,15 +48,26 @@ export interface Reaction extends Signal {
 	fn: null | Function;
 	/** Signals that this signal reads from */
 	deps: null | Value[];
+	/** An AbortController that aborts when the signal is destroyed */
+	ac: null | AbortController;
 }
 
 export interface Derived<V = unknown> extends Value<V>, Reaction {
 	/** The derived function */
 	fn: () => V;
-	/** Reactions created inside this signal */
-	children: null | Reaction[];
-	/** Parent effect or derived */
-	parent: Effect | Derived | null;
+	/** Effects created inside this signal. Used to destroy those effects when the derived reruns or is cleaned up */
+	effects: null | Effect[];
+	/** Parent effect */
+	parent: Effect | null;
+}
+
+export interface EffectNodes {
+	start: TemplateNode;
+	end: TemplateNode | null;
+	/** $.animation */
+	a: AnimationManager | null;
+	/** $.transition */
+	t: TransitionManager[] | null;
 }
 
 export interface Effect extends Reaction {
@@ -45,16 +77,11 @@ export interface Effect extends Reaction {
 	 * block is reconciled. In the case of a single text/element node,
 	 * `start` and `end` will be the same.
 	 */
-	nodes_start: null | TemplateNode;
-	nodes_end: null | TemplateNode;
-	/** Reactions created inside this signal */
-	deriveds: null | Derived[];
+	nodes: null | EffectNodes;
 	/** The effect function */
 	fn: null | (() => void | (() => void));
 	/** The teardown function returned from the effect function */
 	teardown: null | (() => void);
-	/** Transition managers created with `$.transition` */
-	transitions: null | TransitionManager[];
 	/** Next sibling child effect created inside the parent signal */
 	prev: null | Effect;
 	/** Next sibling child effect created inside the parent signal */
@@ -65,10 +92,19 @@ export interface Effect extends Reaction {
 	last: null | Effect;
 	/** Parent effect */
 	parent: Effect | null;
+	/** The boundary this effect belongs to */
+	b: Boundary | null;
 	/** Dev only */
 	component_function?: any;
+	/** Dev only. Only set for certain block effects. Contains a reference to the stack that represents the render tree */
+	dev_stack?: DevStackEntry | null;
 }
 
 export type Source<V = unknown> = Value<V>;
 
 export type MaybeSource<T = unknown> = T | Source<T>;
+
+export interface Blocker {
+	promise: Promise<any>;
+	settled: boolean;
+}
diff --git a/packages/svelte/src/internal/client/reactivity/utils.js b/packages/svelte/src/internal/client/reactivity/utils.js
new file mode 100644
index 0000000000..0d27cb8b84
--- /dev/null
+++ b/packages/svelte/src/internal/client/reactivity/utils.js
@@ -0,0 +1,40 @@
+/** @import { Derived, Effect, Value } from '#client' */
+import { CLEAN, DERIVED, DIRTY, MAYBE_DIRTY, WAS_MARKED } from '#client/constants';
+import { set_signal_status } from './status.js';
+
+/**
+ * @param {Value[] | null} deps
+ */
+function clear_marked(deps) {
+	if (deps === null) return;
+
+	for (const dep of deps) {
+		if ((dep.f & DERIVED) === 0 || (dep.f & WAS_MARKED) === 0) {
+			continue;
+		}
+
+		dep.f ^= WAS_MARKED;
+
+		clear_marked(/** @type {Derived} */ (dep).deps);
+	}
+}
+
+/**
+ * @param {Effect} effect
+ * @param {Set<Effect>} dirty_effects
+ * @param {Set<Effect>} maybe_dirty_effects
+ */
+export function defer_effect(effect, dirty_effects, maybe_dirty_effects) {
+	if ((effect.f & DIRTY) !== 0) {
+		dirty_effects.add(effect);
+	} else if ((effect.f & MAYBE_DIRTY) !== 0) {
+		maybe_dirty_effects.add(effect);
+	}
+
+	// Since we're not executing these effects now, we need to clear any WAS_MARKED flags
+	// so that other batches can correctly reach these effects during their own traversal
+	clear_marked(effect.deps);
+
+	// mark as clean so they get scheduled if they depend on pending async state
+	set_signal_status(effect, CLEAN);
+}
diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js
index 767b230131..50832fb3ff 100644
--- a/packages/svelte/src/internal/client/render.js
+++ b/packages/svelte/src/internal/client/render.js
@@ -1,4 +1,4 @@
-/** @import { ComponentContext, Effect, TemplateNode } from '#client' */
+/** @import { ComponentContext, Effect, EffectNodes, TemplateNode } from '#client' */
 /** @import { Component, ComponentType, SvelteComponent, MountOptions } from '../../index.js' */
 import { DEV } from 'esm-env';
 import {
@@ -9,26 +9,22 @@ import {
 	init_operations
 } from './dom/operations.js';
 import { HYDRATION_END, HYDRATION_ERROR, HYDRATION_START } from '../../constants.js';
-import { push, pop, component_context, active_effect } from './runtime.js';
-import { component_root, branch } from './reactivity/effects.js';
-import {
-	hydrate_next,
-	hydrate_node,
-	hydrating,
-	set_hydrate_node,
-	set_hydrating
-} from './dom/hydration.js';
+import { active_effect } from './runtime.js';
+import { push, pop, component_context } from './context.js';
+import { component_root } from './reactivity/effects.js';
+import { hydrate_node, hydrating, set_hydrate_node, set_hydrating } from './dom/hydration.js';
 import { array_from } from '../shared/utils.js';
 import {
 	all_registered_events,
 	handle_event_propagation,
 	root_event_handles
 } from './dom/elements/events.js';
-import { reset_head_anchor } from './dom/blocks/svelte-head.js';
 import * as w from './warnings.js';
 import * as e from './errors.js';
 import { assign_nodes } from './dom/template.js';
 import { is_passive_event } from '../../utils.js';
+import { COMMENT_NODE, STATE_SYMBOL, TEXT_CACHE } from './constants.js';
+import { boundary } from './dom/blocks/boundary.js';
 
 /**
  * This is normally true — block effects should run their intro transitions —
@@ -49,12 +45,11 @@ export function set_should_intro(value) {
  */
 export function set_text(text, value) {
 	// For objects, we apply string coercion (which might make things like $state array references in the template reactive) before diffing
-	var str = value == null ? '' : typeof value === 'object' ? value + '' : value;
-	// @ts-expect-error
-	if (str !== (text.__t ??= text.nodeValue)) {
-		// @ts-expect-error
-		text.__t = str;
-		text.nodeValue = str == null ? '' : str + '';
+	var str = value == null ? '' : typeof value === 'object' ? `${value}` : value;
+	// prettier-ignore
+	if (str !== (/** @type {any} */ (text)[TEXT_CACHE] ??= text.nodeValue)) {
+		/** @type {any} */ (text)[TEXT_CACHE] = str;
+		text.nodeValue = `${str}`;
 	}
 }
 
@@ -85,6 +80,7 @@ export function mount(component, options) {
  *  	context?: Map<any, any>;
  * 		intro?: boolean;
  * 		recover?: boolean;
+ *		transformError?: (error: unknown) => unknown;
  * 	} : {
  * 		target: Document | Element | ShadowRoot;
  * 		props: Props;
@@ -92,6 +88,7 @@ export function mount(component, options) {
  *  	context?: Map<any, any>;
  * 		intro?: boolean;
  * 		recover?: boolean;
+ *		transformError?: (error: unknown) => unknown;
  * 	}} options
  * @returns {Exports}
  */
@@ -103,12 +100,13 @@ export function hydrate(component, options) {
 	const previous_hydrate_node = hydrate_node;
 
 	try {
-		var anchor = /** @type {TemplateNode} */ (get_first_child(target));
+		var anchor = get_first_child(target);
+
 		while (
 			anchor &&
-			(anchor.nodeType !== 8 || /** @type {Comment} */ (anchor).data !== HYDRATION_START)
+			(anchor.nodeType !== COMMENT_NODE || /** @type {Comment} */ (anchor).data !== HYDRATION_START)
 		) {
-			anchor = /** @type {TemplateNode} */ (get_next_sibling(anchor));
+			anchor = get_next_sibling(anchor);
 		}
 
 		if (!anchor) {
@@ -117,46 +115,43 @@ export function hydrate(component, options) {
 
 		set_hydrating(true);
 		set_hydrate_node(/** @type {Comment} */ (anchor));
-		hydrate_next();
 
 		const instance = _mount(component, { ...options, anchor });
 
-		if (
-			hydrate_node === null ||
-			hydrate_node.nodeType !== 8 ||
-			/** @type {Comment} */ (hydrate_node).data !== HYDRATION_END
-		) {
-			w.hydration_mismatch();
-			throw HYDRATION_ERROR;
-		}
-
 		set_hydrating(false);
 
 		return /**  @type {Exports} */ (instance);
 	} catch (error) {
-		if (error === HYDRATION_ERROR) {
-			if (options.recover === false) {
-				e.hydration_failed();
-			}
-
-			// If an error occured above, the operations might not yet have been initialised.
-			init_operations();
-			clear_text_content(target);
+		// re-throw Svelte errors - they are certainly not related to hydration
+		if (
+			error instanceof Error &&
+			error.message.split('\n').some((line) => line.startsWith('https://svelte.dev/e/'))
+		) {
+			throw error;
+		}
+		if (error !== HYDRATION_ERROR) {
+			// eslint-disable-next-line no-console
+			console.warn('Failed to hydrate: ', error);
+		}
 
-			set_hydrating(false);
-			return mount(component, options);
+		if (options.recover === false) {
+			e.hydration_failed();
 		}
 
-		throw error;
+		// If an error occurred above, the operations might not yet have been initialised.
+		init_operations();
+		clear_text_content(target);
+
+		set_hydrating(false);
+		return mount(component, options);
 	} finally {
 		set_hydrating(was_hydrating);
 		set_hydrate_node(previous_hydrate_node);
-		reset_head_anchor();
 	}
 }
 
-/** @type {Map<string, number>} */
-const document_listeners = new Map();
+/** @type {Map<EventTarget, Map<string, number>>} */
+const listeners = new Map();
 
 /**
  * @template {Record<string, any>} Exports
@@ -164,42 +159,12 @@ const document_listeners = new Map();
  * @param {MountOptions} options
  * @returns {Exports}
  */
-function _mount(Component, { target, anchor, props = {}, events, context, intro = true }) {
+function _mount(
+	Component,
+	{ target, anchor, props = {}, events, context, intro = true, transformError }
+) {
 	init_operations();
 
-	var registered_events = new Set();
-
-	/** @param {Array<string>} events */
-	var event_handle = (events) => {
-		for (var i = 0; i < events.length; i++) {
-			var event_name = events[i];
-
-			if (registered_events.has(event_name)) continue;
-			registered_events.add(event_name);
-
-			var passive = is_passive_event(event_name);
-
-			// Add the event listener to both the container and the document.
-			// The container listener ensures we catch events from within in case
-			// the outer content stops propagation of the event.
-			target.addEventListener(event_name, handle_event_propagation, { passive });
-
-			var n = document_listeners.get(event_name);
-
-			if (n === undefined) {
-				// The document listener ensures we catch events that originate from elements that were
-				// manually moved outside of the container (e.g. via manual portals).
-				document.addEventListener(event_name, handle_event_propagation, { passive });
-				document_listeners.set(event_name, 1);
-			} else {
-				document_listeners.set(event_name, n + 1);
-			}
-		}
-	};
-
-	event_handle(array_from(all_registered_events));
-	root_event_handles.add(event_handle);
-
 	/** @type {Exports} */
 	// @ts-expect-error will be defined because the render effect runs synchronously
 	var component = undefined;
@@ -207,47 +172,107 @@ function _mount(Component, { target, anchor, props = {}, events, context, intro
 	var unmount = component_root(() => {
 		var anchor_node = anchor ?? target.appendChild(create_text());
 
-		branch(() => {
-			if (context) {
+		boundary(
+			/** @type {TemplateNode} */ (anchor_node),
+			{
+				pending: () => {}
+			},
+			(anchor_node) => {
 				push({});
 				var ctx = /** @type {ComponentContext} */ (component_context);
-				ctx.c = context;
-			}
-
-			if (events) {
-				// We can't spread the object or else we'd lose the state proxy stuff, if it is one
-				/** @type {any} */ (props).$$events = events;
-			}
+				if (context) ctx.c = context;
 
-			if (hydrating) {
-				assign_nodes(/** @type {TemplateNode} */ (anchor_node), null);
-			}
+				if (events) {
+					// We can't spread the object or else we'd lose the state proxy stuff, if it is one
+					/** @type {any} */ (props).$$events = events;
+				}
 
-			should_intro = intro;
-			// @ts-expect-error the public typings are not what the actual function looks like
-			component = Component(anchor_node, props) || {};
-			should_intro = true;
+				if (hydrating) {
+					assign_nodes(/** @type {TemplateNode} */ (anchor_node), null);
+				}
 
-			if (hydrating) {
-				/** @type {Effect} */ (active_effect).nodes_end = hydrate_node;
-			}
+				should_intro = intro;
+				// @ts-expect-error the public typings are not what the actual function looks like
+				component = Component(anchor_node, props) || {};
+				should_intro = true;
+
+				if (hydrating) {
+					/** @type {Effect & { nodes: EffectNodes }} */ (active_effect).nodes.end = hydrate_node;
+
+					if (
+						hydrate_node === null ||
+						hydrate_node.nodeType !== COMMENT_NODE ||
+						/** @type {Comment} */ (hydrate_node).data !== HYDRATION_END
+					) {
+						w.hydration_mismatch();
+						throw HYDRATION_ERROR;
+					}
+				}
 
-			if (context) {
 				pop();
+			},
+			transformError
+		);
+
+		// Setup event delegation _after_ component is mounted - if an error would happen during mount, it would otherwise not be cleaned up
+		/** @type {Set<string>} */
+		var registered_events = new Set();
+
+		/** @param {Array<string>} events */
+		var event_handle = (events) => {
+			for (var i = 0; i < events.length; i++) {
+				var event_name = events[i];
+
+				if (registered_events.has(event_name)) continue;
+				registered_events.add(event_name);
+
+				var passive = is_passive_event(event_name);
+
+				// Add the event listener to both the container and the document.
+				// The container listener ensures we catch events from within in case
+				// the outer content stops propagation of the event.
+				//
+				// The document listener ensures we catch events that originate from elements that were
+				// manually moved outside of the container (e.g. via manual portals).
+				for (const node of [target, document]) {
+					var counts = listeners.get(node);
+
+					if (counts === undefined) {
+						counts = new Map();
+						listeners.set(node, counts);
+					}
+
+					var count = counts.get(event_name);
+
+					if (count === undefined) {
+						node.addEventListener(event_name, handle_event_propagation, { passive });
+						counts.set(event_name, 1);
+					} else {
+						counts.set(event_name, count + 1);
+					}
+				}
 			}
-		});
+		};
+
+		event_handle(array_from(all_registered_events));
+		root_event_handles.add(event_handle);
 
 		return () => {
 			for (var event_name of registered_events) {
-				target.removeEventListener(event_name, handle_event_propagation);
-
-				var n = /** @type {number} */ (document_listeners.get(event_name));
-
-				if (--n === 0) {
-					document.removeEventListener(event_name, handle_event_propagation);
-					document_listeners.delete(event_name);
-				} else {
-					document_listeners.set(event_name, n);
+				for (const node of [target, document]) {
+					var counts = /** @type {Map<string, number>} */ (listeners.get(node));
+					var count = /** @type {number} */ (counts.get(event_name));
+
+					if (--count == 0) {
+						node.removeEventListener(event_name, handle_event_propagation);
+						counts.delete(event_name);
+
+						if (counts.size === 0) {
+							listeners.delete(node);
+						}
+					} else {
+						counts.set(event_name, count);
+					}
 				}
 			}
 
@@ -298,7 +323,11 @@ export function unmount(component, options) {
 	}
 
 	if (DEV) {
-		w.lifecycle_double_unmount();
+		if (STATE_SYMBOL in component) {
+			w.state_proxy_unmount();
+		} else {
+			w.lifecycle_double_unmount();
+		}
 	}
 
 	return Promise.resolve();
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index ff8eaa8ef9..8d70eee43c 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -1,83 +1,79 @@
-/** @import { ComponentContext, Derived, Effect, Reaction, Signal, Source, Value } from '#client' */
+/** @import { Derived, Effect, Reaction, Source, Value } from '#client' */
 import { DEV } from 'esm-env';
-import { define_property, get_descriptors, get_prototype_of } from '../shared/utils.js';
+import { get_descriptors, get_prototype_of, includes, index_of } from '../shared/utils.js';
 import {
 	destroy_block_effect_children,
 	destroy_effect_children,
-	destroy_effect_deriveds,
-	effect,
-	execute_effect_teardown,
-	unlink_effect
+	effect_tracking,
+	execute_effect_teardown
 } from './reactivity/effects.js';
 import {
-	EFFECT,
-	RENDER_EFFECT,
 	DIRTY,
 	MAYBE_DIRTY,
 	CLEAN,
 	DERIVED,
-	UNOWNED,
 	DESTROYED,
-	INERT,
 	BRANCH_EFFECT,
 	STATE_SYMBOL,
 	BLOCK_EFFECT,
 	ROOT_EFFECT,
-	LEGACY_DERIVED_PROP,
-	DISCONNECTED,
-	BOUNDARY_EFFECT
+	CONNECTED,
+	REACTION_IS_UPDATING,
+	STALE_REACTION,
+	ERROR_VALUE,
+	WAS_MARKED,
+	MANAGED_EFFECT,
+	REACTION_RAN
 } from './constants.js';
-import { flush_tasks } from './dom/task.js';
-import { add_owner } from './dev/ownership.js';
-import { internal_set, set, source } from './reactivity/sources.js';
-import { destroy_derived, execute_derived, update_derived } from './reactivity/deriveds.js';
-import * as e from './errors.js';
-import { lifecycle_outside_component } from '../shared/errors.js';
-import { FILENAME } from '../../constants.js';
-import { legacy_mode_flag } from '../flags/index.js';
-import { tracing_expressions, get_stack } from './dev/tracing.js';
-
-const FLUSH_MICROTASK = 0;
-const FLUSH_SYNC = 1;
-// Used for DEV time error handling
-/** @param {WeakSet<Error>} value */
-const handled_errors = new WeakSet();
-export let is_throwing_error = false;
-
-// Used for controlling the flush of effects.
-let scheduler_mode = FLUSH_MICROTASK;
-// Used for handling scheduling
-let is_micro_task_queued = false;
-
-/** @type {Effect | null} */
-let last_scheduled_effect = null;
-
-export let is_flushing_effect = false;
-export let is_destroying_effect = false;
+import { old_values } from './reactivity/sources.js';
+import {
+	reactivity_loss_tracker,
+	execute_derived,
+	freeze_derived_effects,
+	recent_async_deriveds,
+	unfreeze_derived_effects,
+	update_derived
+} from './reactivity/deriveds.js';
+import { async_mode_flag, tracing_mode_flag } from '../flags/index.js';
+import { tracing_expressions } from './dev/tracing.js';
+import { get_error } from '../shared/dev.js';
+import {
+	component_context,
+	dev_current_component_function,
+	dev_stack,
+	is_runes,
+	set_component_context,
+	set_dev_current_component_function,
+	set_dev_stack
+} from './context.js';
+import {
+	Batch,
+	batch_values,
+	current_batch,
+	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';
+import { without_reactive_context } from './dom/elements/bindings/shared.js';
+import { set_signal_status, update_derived_status } from './reactivity/status.js';
+import * as w from './warnings.js';
+
+let is_updating_effect = false;
 
-/** @param {boolean} value */
-export function set_is_flushing_effect(value) {
-	is_flushing_effect = value;
-}
+export let is_destroying_effect = false;
 
 /** @param {boolean} value */
 export function set_is_destroying_effect(value) {
 	is_destroying_effect = value;
 }
 
-// Handle effect queues
-
-/** @type {Effect[]} */
-let queued_root_effects = [];
-
-let flush_count = 0;
-/** @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;
 
+export let untracking = false;
+
 /** @param {null | Reaction} reaction */
 export function set_active_reaction(reaction) {
 	active_reaction = reaction;
@@ -92,17 +88,17 @@ export function set_active_effect(effect) {
 }
 
 /**
- * When sources are created within a derived, we record them so that we can safely allow
- * local mutations to these sources without the side-effect error being invoked unnecessarily.
- * @type {null | Source[]}
+ * When sources are created within a reaction, reading and writing
+ * them within that reaction should not cause a re-run
+ * @type {null | Set<Source>}
  */
-export let derived_sources = null;
+export let current_sources = null;
 
-/**
- * @param {Source[] | null} sources
- */
-export function set_derived_sources(sources) {
-	derived_sources = sources;
+/** @param {Value} value */
+export function push_reaction_value(value) {
+	if (active_reaction !== null && (!async_mode_flag || (active_reaction.f & DERIVED) !== 0)) {
+		(current_sources ??= new Set()).add(value);
+	}
 }
 
 /**
@@ -113,7 +109,7 @@ export function set_derived_sources(sources) {
  */
 export let new_deps = null;
 
-let skipped_deps = 0;
+export let skipped_deps = 0;
 
 /**
  * Tracks writes that the effect it's executed in doesn't listen to yet,
@@ -127,54 +123,24 @@ export function set_untracked_writes(value) {
 	untracked_writes = value;
 }
 
-/** @type {number} Used by sources and deriveds for handling updates to unowned deriveds */
-let current_version = 0;
-
-// 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;
-}
-
-// Handling runtime component context
-/** @type {ComponentContext | null} */
-export let component_context = null;
-
-/** @param {ComponentContext | null} context */
-export function set_component_context(context) {
-	component_context = context;
-}
-
 /**
- * The current component function. Different from current component context:
- * ```html
- * <!-- App.svelte -->
- * <Foo>
- *   <Bar /> <!-- context == Foo.svelte, function == App.svelte -->
- * </Foo>
- * ```
- * @type {ComponentContext['function']}
- */
-export let dev_current_component_function = null;
+ * @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
+ **/
+export let write_version = 1;
 
-/** @param {ComponentContext['function']} fn */
-export function set_dev_current_component_function(fn) {
-	dev_current_component_function = fn;
-}
+/** @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;
 
-export function increment_version() {
-	return ++current_version;
+/** @param {number} value */
+export function set_update_version(value) {
+	update_version = value;
 }
 
-/** @returns {boolean} */
-export function is_runes() {
-	return !legacy_mode_flag || (component_context !== null && component_context.l === null);
+export function increment_write_version() {
+	return ++write_version;
 }
 
 /**
@@ -183,55 +149,39 @@ export function is_runes() {
  * @param {Reaction} reaction
  * @returns {boolean}
  */
-export function check_dirtiness(reaction) {
+export function is_dirty(reaction) {
 	var flags = reaction.f;
 
 	if ((flags & DIRTY) !== 0) {
 		return true;
 	}
 
-	if ((flags & MAYBE_DIRTY) !== 0) {
-		var dependencies = reaction.deps;
-		var is_unowned = (flags & UNOWNED) !== 0;
+	if (flags & DERIVED) {
+		reaction.f &= ~WAS_MARKED;
+	}
 
-		if (dependencies !== null) {
-			var i;
+	if ((flags & MAYBE_DIRTY) !== 0) {
+		var dependencies = /** @type {Value[]} */ (reaction.deps);
+		var length = dependencies.length;
 
-			if ((flags & DISCONNECTED) !== 0) {
-				for (i = 0; i < dependencies.length; i++) {
-					(dependencies[i].reactions ??= []).push(reaction);
-				}
+		for (var i = 0; i < length; i++) {
+			var dependency = dependencies[i];
 
-				reaction.f ^= DISCONNECTED;
+			if (is_dirty(/** @type {Derived} */ (dependency))) {
+				update_derived(/** @type {Derived} */ (dependency));
 			}
 
-			for (i = 0; i < dependencies.length; i++) {
-				var dependency = dependencies[i];
-
-				if (check_dirtiness(/** @type {Derived} */ (dependency))) {
-					update_derived(/** @type {Derived} */ (dependency));
-				}
-
-				// If we are working with an unowned signal as part of an effect (due to !skip_reaction)
-				// and the version hasn't changed, we still need to check that this reaction
-				// is linked to the dependency source – otherwise future updates will not be caught.
-				if (
-					is_unowned &&
-					active_effect !== null &&
-					!skip_reaction &&
-					!dependency?.reactions?.includes(reaction)
-				) {
-					(dependency.reactions ??= []).push(reaction);
-				}
-
-				if (dependency.version > reaction.version) {
-					return true;
-				}
+			if (dependency.wv > reaction.wv) {
+				return true;
 			}
 		}
 
-		// Unowned signals should never be marked as clean.
-		if (!is_unowned) {
+		if (
+			(flags & CONNECTED) !== 0 &&
+			// During time traveling we don't want to reset the status so that
+			// traversal of the graph in the other batches still happens
+			batch_values === null
+		) {
 			set_signal_status(reaction, CLEAN);
 		}
 	}
@@ -240,170 +190,82 @@ export function check_dirtiness(reaction) {
 }
 
 /**
- * @param {unknown} error
+ * @param {Value} signal
  * @param {Effect} effect
+ * @param {boolean} [root]
  */
-function propagate_error(error, effect) {
-	/** @type {Effect | null} */
-	var current = effect;
-
-	while (current !== null) {
-		if ((current.f & BOUNDARY_EFFECT) !== 0) {
-			try {
-				// @ts-expect-error
-				current.fn(error);
-				return;
-			} catch {
-				// Remove boundary flag from effect
-				current.f ^= BOUNDARY_EFFECT;
-			}
-		}
-
-		current = current.parent;
-	}
+function schedule_possible_effect_self_invalidation(signal, effect, root = true) {
+	var reactions = signal.reactions;
+	if (reactions === null) return;
 
-	is_throwing_error = false;
-	throw error;
-}
-
-/**
- * @param {Effect} effect
- */
-function should_rethrow_error(effect) {
-	return (
-		(effect.f & DESTROYED) === 0 &&
-		(effect.parent === null || (effect.parent.f & BOUNDARY_EFFECT) === 0)
-	);
-}
-
-export function reset_is_throwing_error() {
-	is_throwing_error = false;
-}
-
-/**
- * @param {unknown} error
- * @param {Effect} effect
- * @param {Effect | null} previous_effect
- * @param {ComponentContext | null} component_context
- */
-export function handle_error(error, effect, previous_effect, component_context) {
-	if (is_throwing_error) {
-		if (previous_effect === null) {
-			is_throwing_error = false;
-		}
-
-		if (should_rethrow_error(effect)) {
-			throw error;
-		}
-
-		return;
-	}
-
-	if (previous_effect !== null) {
-		is_throwing_error = true;
-	}
-
-	if (
-		!DEV ||
-		component_context === null ||
-		!(error instanceof Error) ||
-		handled_errors.has(error)
-	) {
-		propagate_error(error, effect);
+	if (!async_mode_flag && current_sources !== null && current_sources.has(signal)) {
 		return;
 	}
 
-	handled_errors.add(error);
+	for (var i = 0; i < reactions.length; i++) {
+		var reaction = reactions[i];
 
-	const component_stack = [];
-
-	const effect_name = effect.fn?.name;
-
-	if (effect_name) {
-		component_stack.push(effect_name);
-	}
-
-	/** @type {ComponentContext | null} */
-	let current_context = component_context;
-
-	while (current_context !== null) {
-		if (DEV) {
-			/** @type {string} */
-			var filename = current_context.function?.[FILENAME];
-
-			if (filename) {
-				const file = filename.split('/').pop();
-				component_stack.push(file);
+		if ((reaction.f & DERIVED) !== 0) {
+			schedule_possible_effect_self_invalidation(/** @type {Derived} */ (reaction), effect, false);
+		} else if (effect === reaction) {
+			if (root) {
+				set_signal_status(reaction, DIRTY);
+			} else if ((reaction.f & CLEAN) !== 0) {
+				set_signal_status(reaction, MAYBE_DIRTY);
 			}
+			schedule_effect(/** @type {Effect} */ (reaction));
 		}
-
-		current_context = current_context.p;
-	}
-
-	const indent = /Firefox/.test(navigator.userAgent) ? '  ' : '\t';
-	define_property(error, 'message', {
-		value: error.message + `\n${component_stack.map((name) => `\n${indent}in ${name}`).join('')}\n`
-	});
-	define_property(error, 'component_stack', {
-		value: component_stack
-	});
-
-	const stack = error.stack;
-
-	// Filter out internal files from callstack
-	if (stack) {
-		const lines = stack.split('\n');
-		const new_lines = [];
-		for (let i = 0; i < lines.length; i++) {
-			const line = lines[i];
-			if (line.includes('svelte/src/internal')) {
-				continue;
-			}
-			new_lines.push(line);
-		}
-		define_property(error, 'stack', {
-			value: new_lines.join('\n')
-		});
-	}
-
-	propagate_error(error, effect);
-
-	if (should_rethrow_error(effect)) {
-		throw error;
 	}
 }
 
-/**
- * @template V
- * @param {Reaction} reaction
- * @returns {V}
- */
+/** @param {Reaction} reaction */
 export function update_reaction(reaction) {
 	var previous_deps = new_deps;
 	var previous_skipped_deps = skipped_deps;
 	var previous_untracked_writes = untracked_writes;
 	var previous_reaction = active_reaction;
-	var previous_skip_reaction = skip_reaction;
-	var prev_derived_sources = derived_sources;
+	var previous_sources = current_sources;
 	var previous_component_context = component_context;
+	var previous_untracking = untracking;
+	var previous_update_version = update_version;
+
 	var flags = reaction.f;
 
 	new_deps = /** @type {null | Value[]} */ (null);
 	skipped_deps = 0;
 	untracked_writes = null;
 	active_reaction = (flags & (BRANCH_EFFECT | ROOT_EFFECT)) === 0 ? reaction : null;
-	skip_reaction = !is_flushing_effect && (flags & UNOWNED) !== 0;
-	derived_sources = null;
-	component_context = reaction.ctx;
+
+	current_sources = null;
+	set_component_context(reaction.ctx);
+	untracking = false;
+	update_version = ++read_version;
+
+	if (reaction.ac !== null) {
+		without_reactive_context(() => {
+			/** @type {AbortController} */ (reaction.ac).abort(STALE_REACTION);
+		});
+
+		reaction.ac = null;
+	}
 
 	try {
-		var result = /** @type {Function} */ (0, reaction.fn)();
+		reaction.f |= REACTION_IS_UPDATING;
+		var fn = /** @type {Function} */ (reaction.fn);
+		var result = fn();
+		reaction.f |= REACTION_RAN;
 		var deps = reaction.deps;
 
+		// Don't remove reactions during fork;
+		// they must remain for when fork is discarded
+		var is_fork = current_batch?.is_fork;
+
 		if (new_deps !== null) {
 			var i;
 
-			remove_reactions(reaction, skipped_deps);
+			if (!is_fork) {
+				remove_reactions(reaction, skipped_deps);
+			}
 
 			if (deps !== null && skipped_deps > 0) {
 				deps.length = skipped_deps + new_deps.length;
@@ -414,25 +276,81 @@ export function update_reaction(reaction) {
 				reaction.deps = deps = new_deps;
 			}
 
-			if (!skip_reaction) {
+			if (effect_tracking() && (reaction.f & CONNECTED) !== 0) {
 				for (i = skipped_deps; i < deps.length; i++) {
 					(deps[i].reactions ??= []).push(reaction);
 				}
 			}
-		} else if (deps !== null && skipped_deps < deps.length) {
+		} else if (!is_fork && deps !== null && skipped_deps < deps.length) {
 			remove_reactions(reaction, skipped_deps);
 			deps.length = skipped_deps;
 		}
 
+		// If we're inside an effect and we have untracked writes, then we need to
+		// ensure that if any of those untracked writes result in re-invalidation
+		// of the current effect, then that happens accordingly
+		if (
+			is_runes() &&
+			untracked_writes !== null &&
+			!untracking &&
+			deps !== null &&
+			(reaction.f & (DERIVED | MAYBE_DIRTY | DIRTY)) === 0
+		) {
+			for (i = 0; i < /** @type {Source[]} */ (untracked_writes).length; i++) {
+				schedule_possible_effect_self_invalidation(
+					untracked_writes[i],
+					/** @type {Effect} */ (reaction)
+				);
+			}
+		}
+
+		// If we are returning to an previous reaction then
+		// we need to increment the read version to ensure that
+		// any dependencies in this reaction aren't marked with
+		// the same version
+		if (previous_reaction !== null && previous_reaction !== reaction) {
+			read_version++;
+
+			// update the `rv` of the previous reaction's deps — both existing and new —
+			// so that they are not added again
+			if (previous_reaction.deps !== null) {
+				for (let i = 0; i < previous_skipped_deps; i += 1) {
+					previous_reaction.deps[i].rv = read_version;
+				}
+			}
+
+			if (previous_deps !== null) {
+				for (const dep of previous_deps) {
+					dep.rv = read_version;
+				}
+			}
+
+			if (untracked_writes !== null) {
+				if (previous_untracked_writes === null) {
+					previous_untracked_writes = untracked_writes;
+				} else {
+					previous_untracked_writes.push(.../** @type {Source[]} */ (untracked_writes));
+				}
+			}
+		}
+
+		if ((reaction.f & ERROR_VALUE) !== 0) {
+			reaction.f ^= ERROR_VALUE;
+		}
+
 		return result;
+	} catch (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;
-		derived_sources = prev_derived_sources;
-		component_context = previous_component_context;
+		current_sources = previous_sources;
+		set_component_context(previous_component_context);
+		untracking = previous_untracking;
+		update_version = previous_update_version;
 	}
 }
 
@@ -445,7 +363,7 @@ export function update_reaction(reaction) {
 function remove_reaction(signal, dependency) {
 	let reactions = dependency.reactions;
 	if (reactions !== null) {
-		var index = reactions.indexOf(signal);
+		var index = index_of.call(reactions, signal);
 		if (index !== -1) {
 			var new_length = reactions.length - 1;
 			if (new_length === 0) {
@@ -457,6 +375,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 (
@@ -465,15 +384,31 @@ function remove_reaction(signal, dependency) {
 		// Destroying a child effect while updating a parent effect can cause a dependency to appear
 		// to be unused, when in fact it is used by the currently-updating parent. Checking `new_deps`
 		// allows us to skip the expensive work of disconnecting and immediately reconnecting it
-		(new_deps === null || !new_deps.includes(dependency))
+		(new_deps === null || !includes.call(new_deps, dependency))
 	) {
-		set_signal_status(dependency, MAYBE_DIRTY);
+		var derived = /** @type {Derived} */ (dependency);
+
 		// If we are working with a derived that is owned by an effect, then mark it as being
-		// disconnected.
-		if ((dependency.f & (UNOWNED | DISCONNECTED)) === 0) {
-			dependency.f ^= DISCONNECTED;
+		// disconnected and remove the mark flag, as it cannot be reliably removed otherwise
+		if ((derived.f & CONNECTED) !== 0) {
+			derived.f ^= CONNECTED;
+			derived.f &= ~WAS_MARKED;
 		}
-		remove_reactions(/** @type {Derived} **/ (dependency), 0);
+
+		// In a fork it's possible that a derived is executed and gets reactions, then commits, but is
+		// never re-executed. This is possible when the derived is only executed once in the context
+		// of a new branch which happens before fork.commit() runs. In this case, the derived still has
+		// UNINITIALIZED as its value, and then when it's loosing its reactions we need to ensure it stays
+		// DIRTY so it is reexecuted once someone wants its value again.
+		if (derived.v !== UNINITIALIZED) {
+			update_derived_status(derived);
+		}
+
+		// freeze any effects inside this derived
+		freeze_derived_effects(derived);
+
+		// Disconnect any reactions owned by this reaction
+		remove_reactions(derived, 0);
 	}
 }
 
@@ -505,437 +440,292 @@ export function update_effect(effect) {
 	set_signal_status(effect, CLEAN);
 
 	var previous_effect = active_effect;
-	var previous_component_context = component_context;
+	var was_updating_effect = is_updating_effect;
 
 	active_effect = effect;
+	is_updating_effect = true;
 
 	if (DEV) {
 		var previous_component_fn = dev_current_component_function;
-		dev_current_component_function = effect.component_function;
+		set_dev_current_component_function(effect.component_function);
+		var previous_stack = /** @type {any} */ (dev_stack);
+		// only block effects have a dev stack, keep the current one otherwise
+		set_dev_stack(effect.dev_stack ?? dev_stack);
 	}
 
 	try {
-		if ((flags & BLOCK_EFFECT) !== 0) {
+		if ((flags & (BLOCK_EFFECT | MANAGED_EFFECT)) !== 0) {
 			destroy_block_effect_children(effect);
 		} else {
 			destroy_effect_children(effect);
 		}
-		destroy_effect_deriveds(effect);
 
 		execute_effect_teardown(effect);
 		var teardown = update_reaction(effect);
 		effect.teardown = typeof teardown === 'function' ? teardown : null;
-		effect.version = current_version;
-
-		if (DEV) {
-			dev_effect_stack.push(effect);
+		effect.wv = write_version;
+
+		// In DEV, increment versions of any sources that were written to during the effect,
+		// so that they are correctly marked as dirty when the effect re-runs
+		if (DEV && tracing_mode_flag && (effect.f & DIRTY) !== 0 && effect.deps !== null) {
+			for (var dep of effect.deps) {
+				if (dep.set_during_effect) {
+					dep.wv = increment_write_version();
+					dep.set_during_effect = false;
+				}
+			}
 		}
-	} catch (error) {
-		handle_error(error, effect, previous_effect, previous_component_context || effect.ctx);
 	} finally {
+		is_updating_effect = was_updating_effect;
 		active_effect = previous_effect;
 
 		if (DEV) {
-			dev_current_component_function = previous_component_fn;
-		}
-	}
-}
-
-function log_effect_stack() {
-	// eslint-disable-next-line no-console
-	console.error(
-		'Last ten effects were: ',
-		dev_effect_stack.slice(-10).map((d) => d.fn)
-	);
-	dev_effect_stack = [];
-}
-
-function infinite_loop_guard() {
-	if (flush_count > 1000) {
-		flush_count = 0;
-		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 {
-						handle_error(error, last_scheduled_effect, null, null);
-					} catch (e) {
-						// Only log the effect stack if the error is re-thrown
-						log_effect_stack();
-						throw e;
-					}
-				} else {
-					handle_error(error, last_scheduled_effect, null, null);
-				}
-			} else {
-				if (DEV) {
-					log_effect_stack();
-				}
-				throw error;
-			}
+			set_dev_current_component_function(previous_component_fn);
+			set_dev_stack(previous_stack);
 		}
 	}
-	flush_count++;
 }
 
 /**
- * @param {Array<Effect>} root_effects
- * @returns {void}
+ * Returns a promise that resolves once any pending state changes have been applied.
+ * @returns {Promise<void>}
  */
-function flush_queued_root_effects(root_effects) {
-	var length = root_effects.length;
-	if (length === 0) {
-		return;
+export async function tick() {
+	if (async_mode_flag) {
+		return new Promise((f) => {
+			// Race them against each other - in almost all cases requestAnimationFrame will fire first,
+			// but e.g. in case the window is not focused or a view transition happens, requestAnimationFrame
+			// will be delayed and setTimeout helps us resolve fast enough in that case
+			requestAnimationFrame(() => f());
+			setTimeout(() => f());
+		});
 	}
-	infinite_loop_guard();
-
-	var previously_flushing_effect = is_flushing_effect;
-	is_flushing_effect = true;
 
-	try {
-		for (var i = 0; i < length; i++) {
-			var effect = root_effects[i];
-
-			if ((effect.f & CLEAN) === 0) {
-				effect.f ^= CLEAN;
-			}
+	await Promise.resolve();
 
-			/** @type {Effect[]} */
-			var collected_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();
+}
 
-			process_effects(effect, collected_effects);
-			flush_queued_effects(collected_effects);
-		}
-	} finally {
-		is_flushing_effect = previously_flushing_effect;
-	}
+/**
+ * Returns a promise that resolves once any state changes, and asynchronous work resulting from them,
+ * have resolved and the DOM has been updated
+ * @returns {Promise<void>}
+ * @since 5.36
+ */
+export function settled() {
+	return Batch.ensure().settled();
 }
 
 /**
- * @param {Array<Effect>} effects
- * @returns {void}
+ * @template V
+ * @param {Value<V>} signal
+ * @returns {V}
  */
-function flush_queued_effects(effects) {
-	var length = effects.length;
-	if (length === 0) return;
+export function get(signal) {
+	var flags = signal.f;
+	var is_derived = (flags & DERIVED) !== 0;
 
-	for (var i = 0; i < length; i++) {
-		var effect = effects[i];
+	captured_signals?.add(signal);
 
-		if ((effect.f & (DESTROYED | INERT)) === 0) {
-			try {
-				if (check_dirtiness(effect)) {
-					update_effect(effect);
-
-					// Effects with no dependencies or teardown do not get added to the effect tree.
-					// Deferred effects (e.g. `$effect(...)`) _are_ added to the tree because we
-					// don't know if we need to keep them until they are executed. Doing the check
-					// here (rather than in `update_effect`) allows us to skip the work for
-					// immediate effects.
-					if (effect.deps === null && effect.first === null && effect.nodes_start === null) {
-						if (effect.teardown === null) {
-							// remove this effect from the graph
-							unlink_effect(effect);
-						} else {
-							// keep the effect in the graph, but free up some memory
-							effect.fn = null;
-						}
+	// Register the dependency on the current reaction signal.
+	if (active_reaction !== null && !untracking) {
+		// 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 === null || !current_sources.has(signal))) {
+			var deps = active_reaction.deps;
+
+			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 {
+						new_deps.push(signal);
 					}
 				}
-			} catch (error) {
-				handle_error(error, effect, null, effect.ctx);
-			}
-		}
-	}
-}
-
-function process_deferred() {
-	is_micro_task_queued = false;
-	if (flush_count > 1001) {
-		return;
-	}
-	const previous_queued_root_effects = queued_root_effects;
-	queued_root_effects = [];
-	flush_queued_root_effects(previous_queued_root_effects);
+			} else {
+				// We're adding a dependency outside the init/update cycle (i.e. after an `await`).
+				// We have to deduplicate deps/reactions in this case or remove_reactions could
+				// disconnect deps/reactions that are actually still in use (if skip_deps says
+				// "disconnect all after this index" and some of the signals are also present in
+				// list prior to the cutoff index, i.e. that should be kept).
+				active_reaction.deps ??= [];
+				if (!includes.call(active_reaction.deps, signal)) {
+					active_reaction.deps.push(signal);
+				}
 
-	if (!is_micro_task_queued) {
-		flush_count = 0;
-		last_scheduled_effect = null;
-		if (DEV) {
-			dev_effect_stack = [];
-		}
-	}
-}
+				var reactions = signal.reactions;
 
-/**
- * @param {Effect} signal
- * @returns {void}
- */
-export function schedule_effect(signal) {
-	if (scheduler_mode === FLUSH_MICROTASK) {
-		if (!is_micro_task_queued) {
-			is_micro_task_queued = true;
-			queueMicrotask(process_deferred);
+				if (reactions === null) {
+					signal.reactions = [active_reaction];
+				} else if (!includes.call(reactions, active_reaction)) {
+					reactions.push(active_reaction);
+				}
+			}
 		}
 	}
 
-	last_scheduled_effect = signal;
-
-	var effect = signal;
+	if (DEV) {
+		if (
+			!untracking &&
+			reactivity_loss_tracker &&
+			!reactivity_loss_tracker.warned &&
+			(reactivity_loss_tracker.effect.f & REACTION_IS_UPDATING) === 0 &&
+			!reactivity_loss_tracker.effect_deps.has(signal)
+		) {
+			reactivity_loss_tracker.warned = true;
 
-	while (effect.parent !== null) {
-		effect = effect.parent;
-		var flags = effect.f;
+			w.await_reactivity_loss(/** @type {string} */ (signal.label));
 
-		if ((flags & (ROOT_EFFECT | BRANCH_EFFECT)) !== 0) {
-			if ((flags & CLEAN) === 0) return;
-			effect.f ^= CLEAN;
+			var trace = get_error('traced at');
+			// eslint-disable-next-line no-console
+			if (trace) console.warn(trace);
 		}
-	}
 
-	queued_root_effects.push(effect);
-}
+		recent_async_deriveds.delete(signal);
 
-/**
- *
- * 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} effect
- * @param {Effect[]} collected_effects
- * @returns {void}
- */
-function process_effects(effect, collected_effects) {
-	var current_effect = effect.first;
-	var effects = [];
-
-	main_loop: while (current_effect !== null) {
-		var flags = current_effect.f;
-		var is_branch = (flags & BRANCH_EFFECT) !== 0;
-		var is_skippable_branch = is_branch && (flags & CLEAN) !== 0;
-		var sibling = current_effect.next;
-
-		if (!is_skippable_branch && (flags & INERT) === 0) {
-			if ((flags & RENDER_EFFECT) !== 0) {
-				if (is_branch) {
-					current_effect.f ^= CLEAN;
-				} else {
-					try {
-						if (check_dirtiness(current_effect)) {
-							update_effect(current_effect);
-						}
-					} catch (error) {
-						handle_error(error, current_effect, null, current_effect.ctx);
-					}
-				}
+		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_error('traced at');
 
-				var child = current_effect.first;
+				if (trace) {
+					var entry = tracing_expressions.entries.get(signal);
 
-				if (child !== null) {
-					current_effect = child;
-					continue;
-				}
-			} else if ((flags & EFFECT) !== 0) {
-				effects.push(current_effect);
-			}
-		}
+					if (entry === undefined) {
+						entry = { traces: [] };
+						tracing_expressions.entries.set(signal, entry);
+					}
 
-		if (sibling === null) {
-			let parent = current_effect.parent;
+					var last = entry.traces[entry.traces.length - 1];
 
-			while (parent !== null) {
-				if (effect === parent) {
-					break main_loop;
-				}
-				var parent_sibling = parent.next;
-				if (parent_sibling !== null) {
-					current_effect = parent_sibling;
-					continue main_loop;
+					// 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);
+					}
 				}
-				parent = parent.parent;
 			}
 		}
-
-		current_effect = sibling;
 	}
 
-	// We might be dealing with many effects here, far more than can be spread into
-	// an array push call (callstack overflow). So let's deal with each effect in a loop.
-	for (var i = 0; i < effects.length; i++) {
-		child = effects[i];
-		collected_effects.push(child);
-		process_effects(child, collected_effects);
+	if (is_destroying_effect && old_values.has(signal)) {
+		return old_values.get(signal);
 	}
-}
 
-/**
- * Internal version of `flushSync` with the option to not flush previous effects.
- * Returns the result of the passed function, if given.
- * @param {() => any} [fn]
- * @returns {any}
- */
-export function flush_sync(fn) {
-	var previous_scheduler_mode = scheduler_mode;
-	var previous_queued_root_effects = queued_root_effects;
+	if (is_derived) {
+		var derived = /** @type {Derived} */ (signal);
 
-	try {
-		infinite_loop_guard();
+		if (is_destroying_effect) {
+			var value = derived.v;
 
-		/** @type {Effect[]} */
-		const root_effects = [];
+			// 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);
+			}
 
-		scheduler_mode = FLUSH_SYNC;
-		queued_root_effects = root_effects;
-		is_micro_task_queued = false;
+			old_values.set(derived, value);
 
-		flush_queued_root_effects(previous_queued_root_effects);
+			return value;
+		}
 
-		var result = fn?.();
+		// connect disconnected deriveds if we are reading them inside an effect,
+		// or inside another derived that is already connected
+		var should_connect =
+			(derived.f & CONNECTED) === 0 &&
+			!untracking &&
+			active_reaction !== null &&
+			(is_updating_effect || (active_reaction.f & CONNECTED) !== 0);
 
-		flush_tasks();
-		if (queued_root_effects.length > 0 || root_effects.length > 0) {
-			flush_sync();
-		}
+		var is_new = (derived.f & REACTION_RAN) === 0;
 
-		flush_count = 0;
-		last_scheduled_effect = null;
-		if (DEV) {
-			dev_effect_stack = [];
+		if (is_dirty(derived)) {
+			if (should_connect) {
+				// set the flag before `update_derived`, so that the derived
+				// is added as a reaction to its dependencies
+				derived.f |= CONNECTED;
+			}
+
+			update_derived(derived);
 		}
 
-		return result;
-	} finally {
-		scheduler_mode = previous_scheduler_mode;
-		queued_root_effects = previous_queued_root_effects;
+		if (should_connect && !is_new) {
+			unfreeze_derived_effects(derived);
+			reconnect(derived);
+		}
 	}
-}
-
-/**
- * Returns a promise that resolves once any pending state changes have been applied.
- * @returns {Promise<void>}
- */
-export async function tick() {
-	await Promise.resolve();
-	// By calling flush_sync 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.
-	flush_sync();
-}
 
-/**
- * @template V
- * @param {Value<V>} signal
- * @returns {V}
- */
-export function get(signal) {
-	var flags = signal.f;
-	var is_derived = (flags & DERIVED) !== 0;
-
-	// If the derived is destroyed, just execute it again without retaining
-	// its memoisation properties as the derived is stale
-	if (is_derived && (flags & DESTROYED) !== 0) {
-		var value = execute_derived(/** @type {Derived} */ (signal));
-		// Ensure the derived remains destroyed
-		destroy_derived(/** @type {Derived} */ (signal));
-		return value;
+	if (batch_values?.has(signal)) {
+		return batch_values.get(signal);
 	}
 
-	if (captured_signals !== null) {
-		captured_signals.add(signal);
+	if ((signal.f & ERROR_VALUE) !== 0) {
+		throw signal.v;
 	}
 
-	// Register the dependency on the current reaction signal.
-	if (active_reaction !== null) {
-		if (derived_sources !== null && derived_sources.includes(signal)) {
-			e.state_unsafe_local_read();
-		}
-		var deps = active_reaction.deps;
-
-		// 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 {
-			new_deps.push(signal);
-		}
+	return signal.v;
+}
 
-		if (
-			untracked_writes !== null &&
-			active_effect !== null &&
-			(active_effect.f & CLEAN) !== 0 &&
-			(active_effect.f & BRANCH_EFFECT) === 0 &&
-			untracked_writes.includes(signal)
-		) {
-			set_signal_status(active_effect, DIRTY);
-			schedule_effect(active_effect);
-		}
-	} else if (is_derived && /** @type {Derived} */ (signal).deps === null) {
-		var derived = /** @type {Derived} */ (signal);
-		var parent = derived.parent;
-		var target = derived;
+/**
+ * (Re)connect a disconnected derived, so that it is notified
+ * of changes in `mark_reactions`
+ * @param {Derived} derived
+ */
+function reconnect(derived) {
+	derived.f |= CONNECTED;
 
-		while (parent !== null) {
-			// Attach the derived to the nearest parent effect, if there are deriveds
-			// in between then we also need to attach them too
-			if ((parent.f & DERIVED) !== 0) {
-				var parent_derived = /** @type {Derived} */ (parent);
+	if (derived.deps === null) return;
 
-				target = parent_derived;
-				parent = parent_derived.parent;
-			} else {
-				var parent_effect = /** @type {Effect} */ (parent);
+	for (const dep of derived.deps) {
+		(dep.reactions ??= []).push(derived);
 
-				if (!parent_effect.deriveds?.includes(target)) {
-					(parent_effect.deriveds ??= []).push(target);
-				}
-				break;
-			}
+		if ((dep.f & DERIVED) !== 0 && (dep.f & CONNECTED) === 0) {
+			unfreeze_derived_effects(/** @type {Derived} */ (dep));
+			reconnect(/** @type {Derived} */ (dep));
 		}
 	}
+}
 
-	if (is_derived) {
-		derived = /** @type {Derived} */ (signal);
+/** @param {Derived} derived */
+function depends_on_old_values(derived) {
+	if (derived.v === UNINITIALIZED) return true; // we don't know, so assume the worst
+	if (derived.deps === null) return false;
 
-		if (check_dirtiness(derived)) {
-			update_derived(derived);
+	for (const dep of derived.deps) {
+		if (old_values.has(dep)) {
+			return true;
 		}
-	}
 
-	if (
-		DEV &&
-		tracing_expressions !== null &&
-		active_reaction !== null &&
-		tracing_expressions.reaction === active_reaction
-	) {
-		// Used when mapping state between special blocks like `each`
-		if (signal.debug) {
-			signal.debug();
-		} else if (signal.created) {
-			var entry = tracing_expressions.entries.get(signal);
-
-			if (entry === undefined) {
-				entry = { read: [] };
-				tracing_expressions.entries.set(signal, entry);
-			}
-
-			entry.read.push(get_stack('TracedAt'));
+		if ((dep.f & DERIVED) !== 0 && depends_on_old_values(/** @type {Derived} */ (dep))) {
+			return true;
 		}
 	}
 
-	return signal.v;
+	return false;
 }
 
 /**
@@ -948,55 +738,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
- */
-export 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) {
-		// Go one level up because derived signals created as part of props in legacy mode
-		if ((signal.f & LEGACY_DERIVED_PROP) !== 0) {
-			for (const dep of /** @type {Derived} */ (signal).deps || []) {
-				if ((dep.f & DERIVED) === 0) {
-					// Use internal_set instead of set here and below to avoid mutation validation
-					internal_set(dep, dep.v);
-				}
-			}
-		} else {
-			internal_set(signal, signal.v);
-		}
-	}
-}
-
 /**
  * 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.
@@ -1014,246 +755,13 @@ export function invalidate_inner_signals(fn) {
  * @returns {T}
  */
 export function untrack(fn) {
-	const previous_reaction = active_reaction;
+	var previous_untracking = untracking;
 	try {
-		active_reaction = null;
+		untracking = true;
 		return fn();
 	} finally {
-		active_reaction = previous_reaction;
-	}
-}
-
-const STATUS_MASK = ~(DIRTY | MAYBE_DIRTY | CLEAN);
-
-/**
- * @param {Signal} signal
- * @param {number} status
- * @returns {void}
- */
-export function set_signal_status(signal, status) {
-	signal.f = (signal.f & STATUS_MASK) | status;
-}
-
-/**
- * Retrieves the context that belongs to the closest parent component with the specified `key`.
- * Must be called during component initialisation.
- *
- * @template T
- * @param {any} key
- * @returns {T}
- */
-export function getContext(key) {
-	const context_map = get_or_init_context_map('getContext');
-	const result = /** @type {T} */ (context_map.get(key));
-
-	if (DEV) {
-		const fn = /** @type {ComponentContext} */ (component_context).function;
-		if (fn) {
-			add_owner(result, fn, true);
-		}
-	}
-
-	return result;
-}
-
-/**
- * Associates an arbitrary `context` object with the current component and the specified `key`
- * and returns that object. The context is then available to children of the component
- * (including slotted content) with `getContext`.
- *
- * Like lifecycle functions, this must be called during component initialisation.
- *
- * @template T
- * @param {any} key
- * @param {T} context
- * @returns {T}
- */
-export function setContext(key, context) {
-	const context_map = get_or_init_context_map('setContext');
-	context_map.set(key, context);
-	return context;
-}
-
-/**
- * Checks whether a given `key` has been set in the context of a parent component.
- * Must be called during component initialisation.
- *
- * @param {any} key
- * @returns {boolean}
- */
-export function hasContext(key) {
-	const context_map = get_or_init_context_map('hasContext');
-	return context_map.has(key);
-}
-
-/**
- * Retrieves the whole context map that belongs to the closest parent component.
- * Must be called during component initialisation. Useful, for example, if you
- * programmatically create a component and want to pass the existing context to it.
- *
- * @template {Map<any, any>} [T=Map<any, any>]
- * @returns {T}
- */
-export function getAllContexts() {
-	const context_map = get_or_init_context_map('getAllContexts');
-
-	if (DEV) {
-		const fn = component_context?.function;
-		if (fn) {
-			for (const value of context_map.values()) {
-				add_owner(value, fn, true);
-			}
-		}
-	}
-
-	return /** @type {T} */ (context_map);
-}
-
-/**
- * @param {string} name
- * @returns {Map<unknown, unknown>}
- */
-function get_or_init_context_map(name) {
-	if (component_context === null) {
-		lifecycle_outside_component(name);
-	}
-
-	return (component_context.c ??= new Map(get_parent_context(component_context) || undefined));
-}
-
-/**
- * @param {ComponentContext} component_context
- * @returns {Map<unknown, unknown> | null}
- */
-function get_parent_context(component_context) {
-	let parent = component_context.p;
-	while (parent !== null) {
-		const context_map = parent.c;
-		if (context_map !== null) {
-			return context_map;
-		}
-		parent = parent.p;
+		untracking = previous_untracking;
 	}
-	return null;
-}
-
-/**
- * @template {number | bigint} T
- * @param {Value<T>} signal
- * @param {1 | -1} [d]
- * @returns {T}
- */
-export function update(signal, d = 1) {
-	var value = get(signal);
-	var result = d === 1 ? value++ : value--;
-
-	set(signal, value);
-
-	// @ts-expect-error
-	return result;
-}
-
-/**
- * @template {number | bigint} T
- * @param {Value<T>} signal
- * @param {1 | -1} [d]
- * @returns {T}
- */
-export function update_pre(signal, d = 1) {
-	var value = get(signal);
-
-	// @ts-expect-error
-	return set(signal, d === 1 ? ++value : --value);
-}
-
-/**
- * @param {Record<string, unknown>} obj
- * @param {string[]} keys
- * @returns {Record<string, unknown>}
- */
-export function exclude_from_object(obj, keys) {
-	/** @type {Record<string, unknown>} */
-	var result = {};
-
-	for (var key in obj) {
-		if (!keys.includes(key)) {
-			result[key] = obj[key];
-		}
-	}
-
-	return result;
-}
-
-/**
- * @param {Record<string, unknown>} props
- * @param {any} runes
- * @param {Function} [fn]
- * @returns {void}
- */
-export function push(props, runes = false, fn) {
-	component_context = {
-		p: component_context,
-		c: null,
-		e: null,
-		m: false,
-		s: props,
-		x: null,
-		l: 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;
-		dev_current_component_function = fn;
-	}
-}
-
-/**
- * @template {Record<string, any>} T
- * @param {T} [component]
- * @returns {T}
- */
-export function pop(component) {
-	const context_stack_item = component_context;
-	if (context_stack_item !== null) {
-		if (component !== undefined) {
-			context_stack_item.x = component;
-		}
-		const component_effects = context_stack_item.e;
-		if (component_effects !== null) {
-			var previous_effect = active_effect;
-			var previous_reaction = active_reaction;
-			context_stack_item.e = null;
-			try {
-				for (var i = 0; i < component_effects.length; i++) {
-					var component_effect = component_effects[i];
-					set_active_effect(component_effect.effect);
-					set_active_reaction(component_effect.reaction);
-					effect(component_effect.fn);
-				}
-			} finally {
-				set_active_effect(previous_effect);
-				set_active_reaction(previous_reaction);
-			}
-		}
-		component_context = context_stack_item.p;
-		if (DEV) {
-			dev_current_component_function = context_stack_item.p?.function ?? null;
-		}
-		context_stack_item.m = true;
-	}
-	// Micro-optimization: Don't set .a above to the empty object
-	// so it can be garbage-collected when the return here is unused
-	return component || /** @type {T} */ ({});
 }
 
 /**
@@ -1329,37 +837,3 @@ export function deep_read(value, visited = new Set()) {
 		}
 	}
 }
-
-if (DEV) {
-	/**
-	 * @param {string} rune
-	 */
-	function throw_rune_error(rune) {
-		if (!(rune in globalThis)) {
-			// TODO if people start adjusting the "this can contain runes" config through v-p-s more, adjust this message
-			/** @type {any} */
-			let value; // let's hope noone modifies this global, but belts and braces
-			Object.defineProperty(globalThis, rune, {
-				configurable: true,
-				// eslint-disable-next-line getter-return
-				get: () => {
-					if (value !== undefined) {
-						return value;
-					}
-
-					e.rune_outside_svelte(rune);
-				},
-				set: (v) => {
-					value = v;
-				}
-			});
-		}
-	}
-
-	throw_rune_error('$state');
-	throw_rune_error('$effect');
-	throw_rune_error('$derived');
-	throw_rune_error('$inspect');
-	throw_rune_error('$props');
-	throw_rune_error('$bindable');
-}
diff --git a/packages/svelte/src/internal/client/types.d.ts b/packages/svelte/src/internal/client/types.d.ts
index 7208ed7783..2320e7b510 100644
--- a/packages/svelte/src/internal/client/types.d.ts
+++ b/packages/svelte/src/internal/client/types.d.ts
@@ -1,6 +1,16 @@
 import type { Store } from '#shared';
 import { STATE_SYMBOL } from './constants.js';
-import type { Effect, Source, Value, Reaction } from './reactivity/types.js';
+import type { Batch } from './reactivity/batch.js';
+import type { Effect, Source, Value } from './reactivity/types.js';
+
+declare global {
+	interface Window {
+		__svelte?: {
+			/** hydratables */
+			h?: Map<string, unknown>;
+		};
+	}
+}
 
 type EventCallback = (event: Event) => boolean;
 export type EventCallbackMap = Record<string, EventCallback | EventCallback[]>;
@@ -15,13 +25,9 @@ export type ComponentContext = {
 	/** context */
 	c: null | Map<unknown, unknown>;
 	/** deferred effects */
-	e: null | Array<{
-		fn: () => void | (() => void);
-		effect: null | Effect;
-		reaction: null | Reaction;
-	}>;
-	/** mounted */
-	m: boolean;
+	e: null | Array<() => void | (() => void)>;
+	/** True if initialized, i.e. pop() ran */
+	i: boolean;
 	/**
 	 * props — needed for legacy mode lifecycle functions, and for `createEventDispatcher`
 	 * @deprecated remove in 6.0
@@ -32,6 +38,12 @@ export type ComponentContext = {
 	 * @deprecated remove in 6.0
 	 */
 	x: Record<string, any> | null;
+	/**
+	 * The parent effect of this component
+	 * TODO 6.0 this is used to control `bind:this` timing that might change,
+	 * in which case we can remove this property
+	 */
+	r: Effect;
 	/**
 	 * legacy stuff
 	 * @deprecated remove in 6.0
@@ -49,9 +61,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
@@ -69,28 +79,33 @@ export type TemplateNode = Text | Element | Comment;
 
 export type Dom = TemplateNode | TemplateNode[];
 
+export type EachOutroGroup = {
+	pending: Set<Effect>;
+	done: Set<Effect>;
+};
+
 export type EachState = {
+	/** the each block effect */
+	effect: Effect;
 	/** flags */
 	flags: number;
 	/** a key -> item lookup */
 	items: Map<any, EachItem>;
-	/** head of the linked list of items */
-	first: EachItem | null;
+	/** a batch -> keys lookup of all keys that are still needed */
+	pending: Map<Batch, Set<any>>;
+	/** all outro groups that this item is a part of */
+	outrogroups: Set<EachOutroGroup> | null;
+	/** `{:else}` effect */
+	fallback: Effect | null;
 };
 
 export type EachItem = {
-	/** animation manager */
-	a: AnimationManager | null;
+	/** value */
+	v: Source<any> | null;
+	/** index */
+	i: Source<number> | null;
 	/** effect */
 	e: Effect;
-	/** item */
-	v: any | Source<any>;
-	/** index */
-	i: number | Source<number>;
-	/** key */
-	k: unknown;
-	prev: EachItem | null;
-	next: EachItem | null;
 };
 
 export interface TransitionManager {
@@ -177,16 +192,21 @@ export type TaskCallback = (now: number) => boolean | void;
 
 export type TaskEntry = { c: TaskCallback; f: () => void };
 
-/** Dev-only */
-export interface ProxyMetadata {
-	/** The components that 'own' this state, if any. `null` means no owners, i.e. everyone can mutate this state. */
-	owners: null | Set<Function>;
-	/** The parent metadata object */
-	parent: null | ProxyMetadata;
-}
-
 export type ProxyStateObject<T = Record<string | symbol, any>> = T & {
 	[STATE_SYMBOL]: T;
 };
 
+export type SourceLocation =
+	| [line: number, column: number]
+	| [line: number, column: number, SourceLocation[]];
+
+export interface DevStackEntry {
+	file: string;
+	type: 'component' | 'if' | 'each' | 'await' | 'key' | 'render';
+	line: number;
+	column: number;
+	parent: DevStackEntry | null;
+	componentTag?: string;
+}
+
 export * from './reactivity/types';
diff --git a/packages/svelte/src/internal/client/validate.js b/packages/svelte/src/internal/client/validate.js
index 951feee33b..a169225f1e 100644
--- a/packages/svelte/src/internal/client/validate.js
+++ b/packages/svelte/src/internal/client/validate.js
@@ -1,106 +1,54 @@
-import { dev_current_component_function } from './runtime.js';
-import { get_descriptor, is_array } from '../shared/utils.js';
-import * as e from './errors.js';
+/** @import { Blocker } from '#client' */
+import { dev_current_component_function } from './context.js';
 import { FILENAME } from '../../constants.js';
 import { render_effect } from './reactivity/effects.js';
 import * as w from './warnings.js';
 import { capture_store_binding } from './reactivity/store.js';
-
-/**
- * @param {() => any} collection
- * @param {(item: any, index: number) => string} key_fn
- * @returns {void}
- */
-export function validate_each_keys(collection, key_fn) {
-	render_effect(() => {
-		const keys = new Map();
-		const maybe_array = collection();
-		const array = is_array(maybe_array)
-			? maybe_array
-			: maybe_array == null
-				? []
-				: Array.from(maybe_array);
-		const length = array.length;
-		for (let i = 0; i < length; i++) {
-			const key = key_fn(array[i], i);
-			if (keys.has(key)) {
-				const a = String(keys.get(key));
-				const b = String(i);
-
-				/** @type {string | null} */
-				let k = String(key);
-				if (k.startsWith('[object ')) k = null;
-
-				e.each_key_duplicate(a, b, k);
-			}
-			keys.set(key, i);
-		}
-	});
-}
-
-/**
- * @param {Record<string, any>} $$props
- * @param {string[]} bindable
- * @param {string[]} exports
- * @param {Function & { [FILENAME]: string }} component
- */
-export function validate_prop_bindings($$props, bindable, exports, component) {
-	for (const key in $$props) {
-		var setter = get_descriptor($$props, key)?.set;
-		var name = component.name;
-
-		if (setter) {
-			if (exports.includes(key)) {
-				e.bind_invalid_export(component[FILENAME], key, name);
-			}
-
-			if (!bindable.includes(key)) {
-				e.bind_not_bindable(key, component[FILENAME], name);
-			}
-		}
-	}
-}
+import { run_after_blockers } from './reactivity/async.js';
 
 /**
  * @param {string} binding
+ * @param {Blocker[]} blockers
  * @param {() => Record<string, any>} get_object
  * @param {() => string} get_property
  * @param {number} line
  * @param {number} column
  */
-export function validate_binding(binding, get_object, get_property, line, column) {
-	var warned = false;
+export function validate_binding(binding, blockers, get_object, get_property, line, column) {
+	run_after_blockers(blockers, () => {
+		var warned = false;
 
-	var filename = dev_current_component_function?.[FILENAME];
+		var filename = dev_current_component_function?.[FILENAME];
 
-	render_effect(() => {
-		if (warned) return;
+		render_effect(() => {
+			if (warned) return;
 
-		var [object, is_store_sub] = capture_store_binding(get_object);
+			var [object, is_store_sub] = capture_store_binding(get_object);
 
-		if (is_store_sub) return;
+			if (is_store_sub) return;
 
-		var property = get_property();
+			var property = get_property();
 
-		var ran = false;
+			var ran = false;
 
-		// by making the (possibly false, but it would be an extreme edge case) assumption
-		// that a getter has a corresponding setter, we can determine if a property is
-		// reactive by seeing if this effect has dependencies
-		var effect = render_effect(() => {
-			if (ran) return;
+			// by making the (possibly false, but it would be an extreme edge case) assumption
+			// that a getter has a corresponding setter, we can determine if a property is
+			// reactive by seeing if this effect has dependencies
+			var effect = render_effect(() => {
+				if (ran) return;
 
-			// eslint-disable-next-line @typescript-eslint/no-unused-expressions
-			object[property];
-		});
+				// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+				object[property];
+			});
 
-		ran = true;
+			ran = true;
 
-		if (effect.deps === null) {
-			var location = `${filename}:${line}:${column}`;
-			w.binding_property_non_reactive(binding, location);
+			if (effect.deps === null) {
+				var location = `${filename}:${line}:${column}`;
+				w.binding_property_non_reactive(binding, location);
 
-			warned = true;
-		}
+				warned = true;
+			}
+		});
 	});
 }
diff --git a/packages/svelte/src/internal/client/warnings.js b/packages/svelte/src/internal/client/warnings.js
index 24d86e2e0b..f4e605ac96 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
@@ -25,7 +50,13 @@ export function assignment_value_stale(property, location) {
  */
 export function binding_property_non_reactive(binding, location) {
 	if (DEV) {
-		console.warn(`%c[svelte] binding_property_non_reactive\n%c${location ? `\`${binding}\` (${location}) is binding to a non-reactive property` : `\`${binding}\` is binding to a non-reactive property`}\nhttps://svelte.dev/e/binding_property_non_reactive`, bold, normal);
+		console.warn(
+			`%c[svelte] binding_property_non_reactive\n%c${location
+				? `\`${binding}\` (${location}) is binding to a non-reactive property`
+				: `\`${binding}\` is binding to a non-reactive property`}\nhttps://svelte.dev/e/binding_property_non_reactive`,
+			bold,
+			normal
+		);
 	} else {
 		console.warn(`https://svelte.dev/e/binding_property_non_reactive`);
 	}
@@ -43,6 +74,17 @@ export function console_log_state(method) {
 	}
 }
 
+/**
+ * Reading a derived belonging to a now-destroyed effect may result in stale values
+ */
+export function derived_inert() {
+	if (DEV) {
+		console.warn(`%c[svelte] derived_inert\n%cReading a derived belonging to a now-destroyed effect may result in stale values\nhttps://svelte.dev/e/derived_inert`, bold, normal);
+	} else {
+		console.warn(`https://svelte.dev/e/derived_inert`);
+	}
+}
+
 /**
  * %handler% should be a function. Did you mean to %suggestion%?
  * @param {string} handler
@@ -56,6 +98,18 @@ export function event_handler_invalid(handler, suggestion) {
 	}
 }
 
+/**
+ * Expected to find a hydratable with key `%key%` during hydration, but did not.
+ * @param {string} key
+ */
+export function hydratable_missing_but_expected(key) {
+	if (DEV) {
+		console.warn(`%c[svelte] hydratable_missing_but_expected\n%cExpected to find a hydratable with key \`${key}\` during hydration, but did not.\nhttps://svelte.dev/e/hydratable_missing_but_expected`, bold, normal);
+	} else {
+		console.warn(`https://svelte.dev/e/hydratable_missing_but_expected`);
+	}
+}
+
 /**
  * The `%attribute%` attribute on `%html%` changed its value between server and client renders. The client value, `%value%`, will be ignored in favour of the server value
  * @param {string} attribute
@@ -76,7 +130,13 @@ export function hydration_attribute_changed(attribute, html, value) {
  */
 export function hydration_html_changed(location) {
 	if (DEV) {
-		console.warn(`%c[svelte] hydration_html_changed\n%c${location ? `The value of an \`{@html ...}\` block ${location} changed between server and client renders. The client value will be ignored in favour of the server value` : "The value of an `{@html ...}` block changed between server and client renders. The client value will be ignored in favour of the server value"}\nhttps://svelte.dev/e/hydration_html_changed`, bold, normal);
+		console.warn(
+			`%c[svelte] hydration_html_changed\n%c${location
+				? `The value of an \`{@html ...}\` block ${location} changed between server and client renders. The client value will be ignored in favour of the server value`
+				: 'The value of an `{@html ...}` block changed between server and client renders. The client value will be ignored in favour of the server value'}\nhttps://svelte.dev/e/hydration_html_changed`,
+			bold,
+			normal
+		);
 	} else {
 		console.warn(`https://svelte.dev/e/hydration_html_changed`);
 	}
@@ -88,7 +148,13 @@ export function hydration_html_changed(location) {
  */
 export function hydration_mismatch(location) {
 	if (DEV) {
-		console.warn(`%c[svelte] hydration_mismatch\n%c${location ? `Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near ${location}` : "Hydration failed because the initial UI does not match what was rendered on the server"}\nhttps://svelte.dev/e/hydration_mismatch`, bold, normal);
+		console.warn(
+			`%c[svelte] hydration_mismatch\n%c${location
+				? `Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near ${location}`
+				: 'Hydration failed because the initial UI does not match what was rendered on the server'}\nhttps://svelte.dev/e/hydration_mismatch`,
+			bold,
+			normal
+		);
 	} else {
 		console.warn(`https://svelte.dev/e/hydration_mismatch`);
 	}
@@ -129,32 +195,46 @@ export function lifecycle_double_unmount() {
 }
 
 /**
- * %parent% passed a value to %child% with `bind:`, but the value is owned by %owner%. Consider creating a binding between %owner% and %parent%
+ * %parent% passed property `%prop%` to %child% with `bind:`, but its parent component %owner% did not declare `%prop%` as a binding. Consider creating a binding between %owner% and %parent% (e.g. `bind:%prop%={...}` instead of `%prop%={...}`)
  * @param {string} parent
+ * @param {string} prop
  * @param {string} child
  * @param {string} owner
  */
-export function ownership_invalid_binding(parent, child, owner) {
+export function ownership_invalid_binding(parent, prop, child, owner) {
 	if (DEV) {
-		console.warn(`%c[svelte] ownership_invalid_binding\n%c${parent} passed a value to ${child} with \`bind:\`, but the value is owned by ${owner}. Consider creating a binding between ${owner} and ${parent}\nhttps://svelte.dev/e/ownership_invalid_binding`, bold, normal);
+		console.warn(`%c[svelte] ownership_invalid_binding\n%c${parent} passed property \`${prop}\` to ${child} with \`bind:\`, but its parent component ${owner} did not declare \`${prop}\` as a binding. Consider creating a binding between ${owner} and ${parent} (e.g. \`bind:${prop}={...}\` instead of \`${prop}={...}\`)\nhttps://svelte.dev/e/ownership_invalid_binding`, bold, normal);
 	} else {
 		console.warn(`https://svelte.dev/e/ownership_invalid_binding`);
 	}
 }
 
 /**
- * %component% mutated a value owned by %owner%. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
- * @param {string | undefined | null} [component]
- * @param {string | undefined | null} [owner]
+ * Mutating unbound props (`%name%`, at %location%) is strongly discouraged. Consider using `bind:%prop%={...}` in %parent% (or using a callback) instead
+ * @param {string} name
+ * @param {string} location
+ * @param {string} prop
+ * @param {string} parent
  */
-export function ownership_invalid_mutation(component, owner) {
+export function ownership_invalid_mutation(name, location, prop, parent) {
 	if (DEV) {
-		console.warn(`%c[svelte] ownership_invalid_mutation\n%c${component ? `${component} mutated a value owned by ${owner}. This is strongly discouraged. Consider passing values to child components with \`bind:\`, or use a callback instead` : "Mutating a value outside the component that created it is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead"}\nhttps://svelte.dev/e/ownership_invalid_mutation`, bold, normal);
+		console.warn(`%c[svelte] ownership_invalid_mutation\n%cMutating unbound props (\`${name}\`, at ${location}) is strongly discouraged. Consider using \`bind:${prop}={...}\` in ${parent} (or using a callback) instead\nhttps://svelte.dev/e/ownership_invalid_mutation`, bold, normal);
 	} else {
 		console.warn(`https://svelte.dev/e/ownership_invalid_mutation`);
 	}
 }
 
+/**
+ * The `value` property of a `<select multiple>` element should be an array, but it received a non-array value. The selection will be kept as is.
+ */
+export function select_multiple_invalid_value() {
+	if (DEV) {
+		console.warn(`%c[svelte] select_multiple_invalid_value\n%cThe \`value\` property of a \`<select multiple>\` element should be an array, but it received a non-array value. The selection will be kept as is.\nhttps://svelte.dev/e/select_multiple_invalid_value`, bold, normal);
+	} else {
+		console.warn(`https://svelte.dev/e/select_multiple_invalid_value`);
+	}
+}
+
 /**
  * Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results
  * @param {string} operator
@@ -165,4 +245,38 @@ export function state_proxy_equality_mismatch(operator) {
 	} else {
 		console.warn(`https://svelte.dev/e/state_proxy_equality_mismatch`);
 	}
+}
+
+/**
+ * Tried to unmount a state proxy, rather than a component
+ */
+export function state_proxy_unmount() {
+	if (DEV) {
+		console.warn(`%c[svelte] state_proxy_unmount\n%cTried to unmount a state proxy, rather than a component\nhttps://svelte.dev/e/state_proxy_unmount`, bold, normal);
+	} else {
+		console.warn(`https://svelte.dev/e/state_proxy_unmount`);
+	}
+}
+
+/**
+ * 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
+ */
+export function transition_slide_display(value) {
+	if (DEV) {
+		console.warn(`%c[svelte] transition_slide_display\n%cThe \`slide\` transition does not work correctly for elements with \`display: ${value}\`\nhttps://svelte.dev/e/transition_slide_display`, bold, normal);
+	} else {
+		console.warn(`https://svelte.dev/e/transition_slide_display`);
+	}
 }
\ No newline at end of file
diff --git a/packages/svelte/src/internal/disclose-version.js b/packages/svelte/src/internal/disclose-version.js
index 5e72f1e216..86c3482b5d 100644
--- a/packages/svelte/src/internal/disclose-version.js
+++ b/packages/svelte/src/internal/disclose-version.js
@@ -1,5 +1,6 @@
 import { PUBLIC_VERSION } from '../version.js';
 
-if (typeof window !== 'undefined')
-	// @ts-ignore
-	(window.__svelte ||= { v: new Set() }).v.add(PUBLIC_VERSION);
+if (typeof window !== 'undefined') {
+	// @ts-expect-error
+	((window.__svelte ??= {}).v ??= new Set()).add(PUBLIC_VERSION);
+}
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 767a40a765..5d4054975f 100644
--- a/packages/svelte/src/internal/flags/index.js
+++ b/packages/svelte/src/internal/flags/index.js
@@ -1,5 +1,23 @@
+/** True if experimental.async=true */
+export let async_mode_flag = false;
+/** True if we're not certain that we only have Svelte 5 code in the compilation */
 export let legacy_mode_flag = false;
+/** True if $inspect.trace is used */
+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;
 }
+
+export function enable_tracing_mode_flag() {
+	tracing_mode_flag = true;
+}
diff --git a/packages/svelte/src/internal/flags/tracing.js b/packages/svelte/src/internal/flags/tracing.js
new file mode 100644
index 0000000000..b2de46dcd1
--- /dev/null
+++ b/packages/svelte/src/internal/flags/tracing.js
@@ -0,0 +1,3 @@
+import { enable_tracing_mode_flag } from './index.js';
+
+enable_tracing_mode_flag();
diff --git a/packages/svelte/src/internal/server/abort-signal.js b/packages/svelte/src/internal/server/abort-signal.js
new file mode 100644
index 0000000000..a769a46e3d
--- /dev/null
+++ b/packages/svelte/src/internal/server/abort-signal.js
@@ -0,0 +1,13 @@
+import { STALE_REACTION } from '#client/constants';
+
+/** @type {AbortController | null} */
+let controller = null;
+
+export function abort() {
+	controller?.abort(STALE_REACTION);
+	controller = null;
+}
+
+export function getAbortSignal() {
+	return (controller ??= new AbortController()).signal;
+}
diff --git a/packages/svelte/src/internal/server/blocks/snippet.js b/packages/svelte/src/internal/server/blocks/snippet.js
index 3c5e860790..80a5f7f467 100644
--- a/packages/svelte/src/internal/server/blocks/snippet.js
+++ b/packages/svelte/src/internal/server/blocks/snippet.js
@@ -1,5 +1,5 @@
 /** @import { Snippet } from 'svelte' */
-/** @import { Payload } from '#server' */
+/** @import { Renderer } from '../renderer' */
 /** @import { Getters } from '#shared' */
 
 /**
@@ -13,10 +13,12 @@
  */
 export function createRawSnippet(fn) {
 	// @ts-expect-error the types are a lie
-	return (/** @type {Payload} */ payload, /** @type {Params} */ ...args) => {
+	return (/** @type {Renderer} */ renderer, /** @type {Params} */ ...args) => {
 		var getters = /** @type {Getters<Params>} */ (args.map((value) => () => value));
-		payload.out += fn(...getters)
-			.render()
-			.trim();
+		renderer.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..6a7dc1f883 100644
--- a/packages/svelte/src/internal/server/context.js
+++ b/packages/svelte/src/internal/server/context.js
@@ -1,10 +1,34 @@
-/** @import { Component } from '#server' */
+/** @import { SSRContext } 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;
+/** @type {SSRContext | null} */
+export var ssr_context = null;
+
+/** @param {SSRContext | null} v */
+export function set_ssr_context(v) {
+	ssr_context = v;
+}
+
+/**
+ * @template T
+ * @returns {[() => T, (context: T) => T]}
+ * @since 5.40.0
+ */
+export function createContext() {
+	const key = {};
+
+	return [
+		() => {
+			if (!hasContext(key)) {
+				e.missing_context();
+			}
+
+			return getContext(key);
+		},
+		(context) => setContext(key, context)
+	];
+}
 
 /**
  * @template T
@@ -47,42 +71,35 @@ export function getAllContexts() {
  * @returns {Map<unknown, unknown>}
  */
 function get_or_init_context_map(name) {
-	if (current_component === null) {
+	if (ssr_context === null) {
 		e.lifecycle_outside_component(name);
 	}
 
-	return (current_component.c ??= new Map(get_parent_context(current_component) || undefined));
+	return (ssr_context.c ??= new Map(get_parent_context(ssr_context) || undefined));
 }
 
 /**
  * @param {Function} [fn]
  */
 export function push(fn) {
-	current_component = { p: current_component, c: null, d: null };
+	ssr_context = { p: ssr_context, c: null, r: null };
+
 	if (DEV) {
-		// component function
-		current_component.function = fn;
+		ssr_context.function = fn;
+		ssr_context.element = ssr_context.p?.element;
 	}
 }
 
 export function pop() {
-	var component = /** @type {Component} */ (current_component);
-
-	var ondestroy = component.d;
-
-	if (ondestroy) {
-		on_destroy.push(...ondestroy);
-	}
-
-	current_component = component.p;
+	ssr_context = /** @type {SSRContext} */ (ssr_context).p;
 }
 
 /**
- * @param {Component} component_context
+ * @param {SSRContext} ssr_context
  * @returns {Map<unknown, unknown> | null}
  */
-function get_parent_context(component_context) {
-	let parent = component_context.p;
+function get_parent_context(ssr_context) {
+	let parent = ssr_context.p;
 
 	while (parent !== null) {
 		const context_map = parent.c;
@@ -94,3 +111,22 @@ function get_parent_context(component_context) {
 
 	return null;
 }
+
+/**
+ * Wraps an `await` expression in such a way that the component context that was
+ * active before the expression evaluated can be reapplied afterwards —
+ * `await a + b()` becomes `(await $.save(a))() + b()`, meaning `b()` will have access
+ * to the context of its component.
+ * @template T
+ * @param {Promise<T>} promise
+ * @returns {Promise<() => T>}
+ */
+export async function save(promise) {
+	var previous_context = ssr_context;
+	var value = await promise;
+
+	return () => {
+		ssr_context = previous_context;
+		return value;
+	};
+}
diff --git a/packages/svelte/src/internal/server/crypto.js b/packages/svelte/src/internal/server/crypto.js
new file mode 100644
index 0000000000..38b5f65892
--- /dev/null
+++ b/packages/svelte/src/internal/server/crypto.js
@@ -0,0 +1,45 @@
+import { BROWSER } from 'esm-env';
+
+let text_encoder;
+// TODO - remove this and use global `crypto` when we drop Node 18
+let crypto;
+
+/** @param {string} module_name */
+const obfuscated_import = (module_name) => import(/* @vite-ignore */ module_name);
+
+/** @param {string} data */
+export async function sha256(data) {
+	text_encoder ??= new TextEncoder();
+
+	// @ts-expect-error
+	crypto ??= globalThis.crypto?.subtle?.digest
+		? globalThis.crypto
+		: // @ts-ignore - we don't install node types in the prod build
+			// don't use import('node:crypto') directly because static analysers will think we rely on node when we don't
+			(await obfuscated_import('node:crypto')).webcrypto;
+
+	const hash_buffer = await crypto.subtle.digest('SHA-256', text_encoder.encode(data));
+
+	return base64_encode(hash_buffer);
+}
+
+/**
+ * @param {Uint8Array} bytes
+ * @returns {string}
+ */
+export function base64_encode(bytes) {
+	// Using `Buffer` is faster than iterating
+	// @ts-ignore
+	if (!BROWSER && globalThis.Buffer) {
+		// @ts-ignore
+		return globalThis.Buffer.from(bytes).toString('base64');
+	}
+
+	let binary = '';
+
+	for (let i = 0; i < bytes.length; i++) {
+		binary += String.fromCharCode(bytes[i]);
+	}
+
+	return btoa(binary);
+}
diff --git a/packages/svelte/src/internal/server/crypto.test.ts b/packages/svelte/src/internal/server/crypto.test.ts
new file mode 100644
index 0000000000..2bde86676d
--- /dev/null
+++ b/packages/svelte/src/internal/server/crypto.test.ts
@@ -0,0 +1,15 @@
+import { assert, test } from 'vitest';
+import { sha256 } from './crypto.js';
+
+const inputs = [
+	['hello world', 'uU0nuZNNPgilLlLX2n2r+sSE7+N6U4DukIj3rOLvzek='],
+	['', '47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='],
+	['abcd', 'iNQmb9TmM40TuEX88olXnSCciXgjuSF9o+Fhk28DFYk='],
+	['the quick brown fox jumps over the lazy dog', 'Bcbgjx2f2voDFH/Lj4LxJMdtL3Dj2Ynciq2159dFC+w='],
+	['工欲善其事，必先利其器', 'oPOthkQ1c5BbPpvrr5WlUBJPyD5e6JeVdWcqBs9zvjA=']
+];
+
+test.each(inputs)('sha256("%s")', async (input, expected) => {
+	const actual = await sha256(input);
+	assert.equal(actual, expected);
+});
diff --git a/packages/svelte/src/internal/server/dev.js b/packages/svelte/src/internal/server/dev.js
index ecf4e67429..e953bac6ce 100644
--- a/packages/svelte/src/internal/server/dev.js
+++ b/packages/svelte/src/internal/server/dev.js
@@ -1,42 +1,36 @@
-/** @import { Component, Payload } from '#server' */
+/** @import { SSRContext } from '#server' */
 import { FILENAME } from '../../constants.js';
 import {
 	is_tag_valid_with_ancestor,
 	is_tag_valid_with_parent
 } from '../../html-tree-validation.js';
-import { current_component } from './context.js';
+import { get_stack } from '../shared/dev.js';
+import { set_ssr_context, ssr_context } from './context.js';
+import * as e from './errors.js';
+import { Renderer } from './renderer.js';
 
+// TODO move this
 /**
  * @typedef {{
  * 	tag: string;
- * 	parent: null | Element;
- *  filename: null | string;
+ * 	parent: undefined | Element;
+ *  filename: undefined | string;
  *  line: number;
  *  column: number;
  * }} Element
  */
 
 /**
- * @type {Element | null}
+ * This is exported so that it can be cleared between tests
+ * @type {Set<string>}
  */
-let parent = null;
-
-/** @type {Set<string>} */
-let seen;
-
-/**
- * @param {Element} element
- */
-function stringify(element) {
-	if (element.filename === null) return `\`<${element.tag}>\``;
-	return `\`<${element.tag}>\` (${element.filename}:${element.line}:${element.column})`;
-}
+export let seen;
 
 /**
- * @param {Payload} payload
+ * @param {Renderer} renderer
  * @param {string} message
  */
-function print_error(payload, message) {
+function print_error(renderer, message) {
 	message =
 		`node_invalid_placement_ssr: ${message}\n\n` +
 		'This can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.';
@@ -46,28 +40,27 @@ function print_error(payload, message) {
 
 	// eslint-disable-next-line no-console
 	console.error(message);
-	payload.head.out += `<script>console.error(${JSON.stringify(message)})</script>`;
-}
-
-export function reset_elements() {
-	let old_parent = parent;
-	parent = null;
-	return () => {
-		parent = old_parent;
-	};
+	renderer.head((r) =>
+		r.push(
+			// ensure that `</script>` can't leak in to the script contents
+			`<script>console.error(${JSON.stringify(message).replaceAll('</', '<\\u002f')})</script>`
+		)
+	);
 }
 
 /**
- * @param {Payload} payload
+ * @param {Renderer} renderer
  * @param {string} tag
  * @param {number} line
  * @param {number} column
  */
-export function push_element(payload, tag, line, column) {
-	var filename = /** @type {Component} */ (current_component).function[FILENAME];
-	var child = { tag, parent, filename, line, column };
+export function push_element(renderer, tag, line, column) {
+	var context = /** @type {SSRContext} */ (ssr_context);
+	var filename = context.function[FILENAME];
+	var parent = context.element;
+	var element = { tag, parent, filename, line, column };
 
-	if (parent !== null) {
+	if (parent !== undefined) {
 		var ancestor = parent.parent;
 		var ancestors = [parent.tag];
 
@@ -77,7 +70,7 @@ export function push_element(payload, tag, line, column) {
 			: undefined;
 
 		const message = is_tag_valid_with_parent(tag, parent.tag, child_loc, parent_loc);
-		if (message) print_error(payload, message);
+		if (message) print_error(renderer, message);
 
 		while (ancestor != null) {
 			ancestors.push(ancestor.tag);
@@ -86,15 +79,37 @@ export function push_element(payload, tag, line, column) {
 				: undefined;
 
 			const message = is_tag_valid_with_ancestor(tag, ancestors, child_loc, ancestor_loc);
-			if (message) print_error(payload, message);
+			if (message) print_error(renderer, message);
 
 			ancestor = ancestor.parent;
 		}
 	}
 
-	parent = child;
+	set_ssr_context({ ...context, p: context, element });
 }
 
 export function pop_element() {
-	parent = /** @type {Element} */ (parent).parent;
+	set_ssr_context(/** @type {SSRContext} */ (ssr_context).p);
+}
+
+/**
+ * @param {Renderer} renderer
+ */
+export function validate_snippet_args(renderer) {
+	if (
+		typeof renderer !== 'object' ||
+		// for some reason typescript consider the type of renderer as never after the first instanceof
+		!(renderer instanceof Renderer)
+	) {
+		e.invalid_snippet_arguments();
+	}
+}
+
+export function get_user_code_location() {
+	const stack = get_stack();
+
+	return stack
+		.filter((line) => line.trim().startsWith('at '))
+		.map((line) => line.replace(/\((.*):\d+:\d+\)$/, (_, file) => `(${file})`))
+		.join('\n');
 }
diff --git a/packages/svelte/src/internal/server/errors.js b/packages/svelte/src/internal/server/errors.js
index 38c545c84e..079bec3c91 100644
--- a/packages/svelte/src/internal/server/errors.js
+++ b/packages/svelte/src/internal/server/errors.js
@@ -1,5 +1,122 @@
 /* This file is generated by scripts/process-messages/index.js. Do not edit! */
 
+export *  from '../shared/errors.js';
+
+/**
+ * The node API `AsyncLocalStorage` is not available, but is required to use async server rendering.
+ * @returns {never}
+ */
+export function async_local_storage_unavailable() {
+	const error = new Error(`async_local_storage_unavailable\nThe node API \`AsyncLocalStorage\` is not available, but is required to use async server rendering.\nhttps://svelte.dev/e/async_local_storage_unavailable`);
+
+	error.name = 'Svelte error';
+
+	throw error;
+}
+
+/**
+ * Encountered asynchronous work while rendering synchronously.
+ * @returns {never}
+ */
+export function await_invalid() {
+	const error = new Error(`await_invalid\nEncountered asynchronous work while rendering synchronously.\nhttps://svelte.dev/e/await_invalid`);
+
+	error.name = 'Svelte error';
+
+	throw error;
+}
+
+/**
+ * `<svelte:element this="%tag%">` is not a valid element name — the element will not be rendered
+ * @param {string} tag
+ * @returns {never}
+ */
+export function dynamic_element_invalid_tag(tag) {
+	const error = new Error(`dynamic_element_invalid_tag\n\`<svelte:element this="${tag}">\` is not a valid element name — the element will not be rendered\nhttps://svelte.dev/e/dynamic_element_invalid_tag`);
+
+	error.name = 'Svelte error';
+
+	throw error;
+}
+
+/**
+ * The `html` property of server render results has been deprecated. Use `body` instead.
+ * @returns {never}
+ */
+export function html_deprecated() {
+	const error = new Error(`html_deprecated\nThe \`html\` property of server render results has been deprecated. Use \`body\` instead.\nhttps://svelte.dev/e/html_deprecated`);
+
+	error.name = 'Svelte error';
+
+	throw error;
+}
+
+/**
+ * Attempted to set `hydratable` with key `%key%` twice with different values.
+ * 
+ * %stack%
+ * @param {string} key
+ * @param {string} stack
+ * @returns {never}
+ */
+export function hydratable_clobbering(key, stack) {
+	const error = new Error(`hydratable_clobbering\nAttempted to set \`hydratable\` with key \`${key}\` twice with different values.
+
+${stack}\nhttps://svelte.dev/e/hydratable_clobbering`);
+
+	error.name = 'Svelte error';
+
+	throw error;
+}
+
+/**
+ * Failed to serialize `hydratable` data for key `%key%`.
+ * 
+ * `hydratable` can serialize anything [`uneval` from `devalue`](https://npmjs.com/package/uneval) can, plus Promises.
+ * 
+ * Cause:
+ * %stack%
+ * @param {string} key
+ * @param {string} stack
+ * @returns {never}
+ */
+export function hydratable_serialization_failed(key, stack) {
+	const error = new Error(`hydratable_serialization_failed\nFailed to serialize \`hydratable\` data for key \`${key}\`.
+
+\`hydratable\` can serialize anything [\`uneval\` from \`devalue\`](https://npmjs.com/package/uneval) can, plus Promises.
+
+Cause:
+${stack}\nhttps://svelte.dev/e/hydratable_serialization_failed`);
+
+	error.name = 'Svelte error';
+
+	throw error;
+}
+
+/**
+ * `csp.nonce` was set while `csp.hash` was `true`. These options cannot be used simultaneously.
+ * @returns {never}
+ */
+export function invalid_csp() {
+	const error = new Error(`invalid_csp\n\`csp.nonce\` was set while \`csp.hash\` was \`true\`. These options cannot be used simultaneously.\nhttps://svelte.dev/e/invalid_csp`);
+
+	error.name = 'Svelte error';
+
+	throw error;
+}
+
+/**
+ * The `idPrefix` option cannot include `--`.
+ * @returns {never}
+ */
+export function invalid_id_prefix() {
+	const error = new Error(`invalid_id_prefix\nThe \`idPrefix\` option cannot include \`--\`.\nhttps://svelte.dev/e/invalid_id_prefix`);
+
+	error.name = 'Svelte error';
+
+	throw error;
+}
+
 /**
  * `%name%(...)` is not available on the server
  * @param {string} name
@@ -9,5 +126,18 @@ export function lifecycle_function_unavailable(name) {
 	const error = new Error(`lifecycle_function_unavailable\n\`${name}(...)\` is not available on the server\nhttps://svelte.dev/e/lifecycle_function_unavailable`);
 
 	error.name = 'Svelte error';
+
+	throw error;
+}
+
+/**
+ * Could not resolve `render` context.
+ * @returns {never}
+ */
+export function server_context_required() {
+	const error = new Error(`server_context_required\nCould not resolve \`render\` context.\nhttps://svelte.dev/e/server_context_required`);
+
+	error.name = 'Svelte error';
+
 	throw error;
 }
\ No newline at end of file
diff --git a/packages/svelte/src/internal/server/hydratable.js b/packages/svelte/src/internal/server/hydratable.js
new file mode 100644
index 0000000000..be75288604
--- /dev/null
+++ b/packages/svelte/src/internal/server/hydratable.js
@@ -0,0 +1,147 @@
+/** @import { HydratableLookupEntry } from '#server' */
+import { async_mode_flag } from '../flags/index.js';
+import { get_render_context } from './render-context.js';
+import * as e from './errors.js';
+import * as devalue from 'devalue';
+import { DEV } from 'esm-env';
+import { get_user_code_location } from './dev.js';
+
+/**
+ * @template T
+ * @param {string} key
+ * @param {() => T} fn
+ * @returns {T}
+ */
+export function hydratable(key, fn) {
+	if (!async_mode_flag) {
+		e.experimental_async_required('hydratable');
+	}
+
+	const { hydratable } = get_render_context();
+
+	let entry = hydratable.lookup.get(key);
+
+	if (entry !== undefined) {
+		if (DEV) {
+			const comparison = compare(key, entry, encode(key, fn()));
+			comparison.catch(() => {});
+			hydratable.comparisons.push(comparison);
+		}
+
+		return /** @type {T} */ (entry.value);
+	}
+
+	const value = fn();
+
+	entry = encode(key, value, hydratable.unresolved_promises);
+	hydratable.lookup.set(key, entry);
+
+	return value;
+}
+
+/**
+ * @param {string} key
+ * @param {any} value
+ * @param {Map<Promise<any>, string>} [unresolved]
+ */
+function encode(key, value, unresolved) {
+	/** @type {HydratableLookupEntry} */
+	const entry = { value, serialized: '' };
+
+	if (DEV) {
+		entry.stack = get_user_code_location();
+	}
+
+	let uid = 1;
+
+	entry.serialized = devalue.uneval(entry.value, (value, uneval) => {
+		if (is_promise(value)) {
+			// we serialize promises as `"${i}"`, because it's impossible for that string
+			// to occur 'naturally' (since the quote marks would have to be escaped)
+			// this placeholder is returned synchronously from `uneval`, which includes it in the
+			// serialized string. Later (at least one microtask from now), when `p.then` runs, it'll
+			// be replaced.
+			const placeholder = `"${uid++}"`;
+			const p = value
+				.then((v) => {
+					entry.serialized = entry.serialized.replace(
+						placeholder,
+						// use the function form here to prevent any string replacement characters from being interpreted
+						// in `v`, as it's potentially user-controlled and therefore potentially malicious.
+						// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#specifying_a_string_as_the_replacement
+						() => `r(${uneval(v)})`
+					);
+				})
+				.catch((devalue_error) =>
+					e.hydratable_serialization_failed(
+						key,
+						serialization_stack(entry.stack, devalue_error?.stack)
+					)
+				);
+
+			unresolved?.set(p, key);
+			// prevent unhandled rejections from crashing the server, track which promises are still resolving when render is complete
+			p.catch(() => {}).finally(() => unresolved?.delete(p));
+
+			(entry.promises ??= []).push(p);
+			return placeholder;
+		}
+	});
+
+	return entry;
+}
+
+/**
+ * @param {any} value
+ * @returns {value is Promise<any>}
+ */
+function is_promise(value) {
+	// we use this check rather than `instanceof Promise`
+	// because it works cross-realm
+	return Object.prototype.toString.call(value) === '[object Promise]';
+}
+
+/**
+ * @param {string} key
+ * @param {HydratableLookupEntry} a
+ * @param {HydratableLookupEntry} b
+ */
+async function compare(key, a, b) {
+	// note: these need to be loops (as opposed to Promise.all) because
+	// additional promises can get pushed to them while we're awaiting
+	// an earlier one
+	for (const p of a?.promises ?? []) {
+		await p;
+	}
+
+	for (const p of b?.promises ?? []) {
+		await p;
+	}
+
+	if (a.serialized !== b.serialized) {
+		const a_stack = /** @type {string} */ (a.stack);
+		const b_stack = /** @type {string} */ (b.stack);
+
+		const stack =
+			a_stack === b_stack
+				? `Occurred at:\n${a_stack}`
+				: `First occurrence at:\n${a_stack}\n\nSecond occurrence at:\n${b_stack}`;
+
+		e.hydratable_clobbering(key, stack);
+	}
+}
+
+/**
+ * @param {string | undefined} root_stack
+ * @param {string | undefined} uneval_stack
+ */
+function serialization_stack(root_stack, uneval_stack) {
+	let out = '';
+	if (root_stack) {
+		out += root_stack + '\n';
+	}
+	if (uneval_stack) {
+		out += 'Caused by:\n' + uneval_stack + '\n';
+	}
+	return out || '<missing stack trace>';
+}
diff --git a/packages/svelte/src/internal/server/hydratable.test.ts b/packages/svelte/src/internal/server/hydratable.test.ts
new file mode 100644
index 0000000000..8dd54c8f1d
--- /dev/null
+++ b/packages/svelte/src/internal/server/hydratable.test.ts
@@ -0,0 +1,33 @@
+import { afterAll, beforeAll, expect, test } from 'vitest';
+import { Renderer } from './renderer.js';
+import type { Component } from 'svelte';
+import { disable_async_mode_flag, enable_async_mode_flag } from '../flags/index.js';
+import { hydratable } from './hydratable.js';
+
+beforeAll(() => {
+	enable_async_mode_flag();
+});
+
+afterAll(() => {
+	disable_async_mode_flag();
+});
+
+test('treats replacement tokens in hydratable promise values as literals', async () => {
+	const component = (renderer: Renderer) => {
+		hydratable('key', () => Promise.resolve(`$'`));
+		renderer.child(async () => {
+			await Promise.resolve();
+		});
+		renderer.push('ok');
+	};
+
+	const { head } = await Renderer.render(component as unknown as Component);
+	const script_match = head.match(/<script(?:\s[^>]*)?>([\s\S]*)<\/script>/);
+
+	expect(script_match, 'expected hydratable script in head output').toBeTruthy();
+
+	const script_content = script_match![1];
+	expect(script_content).toContain('const h = (window.__svelte ??= {}).h ??= new Map();');
+	expect(script_content).toContain('r("$\'")');
+	expect(script_content).toMatch(/\[\s*"key"\s*,\s*r\("\$'"\)\s*\]/);
+});
diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js
index 94e8000afd..e25ae184d8 100644
--- a/packages/svelte/src/internal/server/index.js
+++ b/packages/svelte/src/internal/server/index.js
@@ -1,24 +1,29 @@
-/** @import { ComponentType, SvelteComponent } from 'svelte' */
-/** @import { Component, Payload, RenderOutput } from '#server' */
+/** @import { ComponentType, SvelteComponent, Component } from 'svelte' */
+/** @import { Csp, RenderOutput } from '#server' */
 /** @import { Store } from '#shared' */
 export { FILENAME, HMR } from '../../constants.js';
-import { attr } from '../shared/attributes.js';
+import { attr, clsx, to_class, to_style } from '../shared/attributes.js';
 import { is_promise, noop } from '../shared/utils.js';
 import { subscribe_to_store } from '../../store/utils.js';
 import {
 	UNINITIALIZED,
 	ELEMENT_PRESERVE_ATTRIBUTE_CASE,
-	ELEMENT_IS_NAMESPACED
+	ELEMENT_IS_NAMESPACED,
+	ELEMENT_IS_INPUT
 } from '../../constants.js';
-
 import { escape_html } from '../../escaping.js';
 import { DEV } from 'esm-env';
-import { current_component, pop, push } from './context.js';
-import { EMPTY_COMMENT, BLOCK_CLOSE, BLOCK_OPEN } from './hydration.js';
+import { EMPTY_COMMENT, BLOCK_OPEN, BLOCK_OPEN_ELSE } from './hydration.js';
 import { validate_store } from '../shared/validate.js';
-import { is_boolean_attribute, is_raw_text_element, is_void } from '../../utils.js';
-import { reset_elements } from './dev.js';
-import { PortalKey } from '../shared/svelte-portal.js';
+import {
+	is_boolean_attribute,
+	is_raw_text_element,
+	is_void,
+	REGEX_VALID_TAG_NAME
+} from '../../utils.js';
+import { Renderer } from './renderer.js';
+import * as e from './errors.js';
+import { ssr_context } from './context.js';
 
 // https://html.spec.whatwg.org/multipage/syntax.html#attributes-2
 // https://infra.spec.whatwg.org/#noncharacter
@@ -26,238 +31,132 @@ const INVALID_ATTR_NAME_CHAR_REGEX =
 	/[\s'">/=\u{FDD0}-\u{FDEF}\u{FFFE}\u{FFFF}\u{1FFFE}\u{1FFFF}\u{2FFFE}\u{2FFFF}\u{3FFFE}\u{3FFFF}\u{4FFFE}\u{4FFFF}\u{5FFFE}\u{5FFFF}\u{6FFFE}\u{6FFFF}\u{7FFFE}\u{7FFFF}\u{8FFFE}\u{8FFFF}\u{9FFFE}\u{9FFFF}\u{AFFFE}\u{AFFFF}\u{BFFFE}\u{BFFFF}\u{CFFFE}\u{CFFFF}\u{DFFFE}\u{DFFFF}\u{EFFFE}\u{EFFFF}\u{FFFFE}\u{FFFFF}\u{10FFFE}\u{10FFFF}]/u;
 
 /**
- * @param {Payload} to_copy
- * @returns {Payload}
- */
-export function copy_payload({ out, css, head, portals }) {
-	return {
-		out,
-		css: new Set(css),
-		portals: new Map(portals),
-		head: {
-			title: head.title,
-			out: head.out
-		}
-	};
-}
-
-/**
- * Assigns second payload to first
- * @param {Payload} p1
- * @param {Payload} p2
- * @returns {void}
- */
-export function assign_payload(p1, p2) {
-	p1.out = p2.out;
-	p1.head = p2.head;
-}
-
-/**
- * @param {Payload} payload
+ * @param {Renderer} renderer
  * @param {string} tag
  * @param {() => void} attributes_fn
  * @param {() => void} children_fn
  * @returns {void}
  */
-export function element(payload, tag, attributes_fn = noop, children_fn = noop) {
-	payload.out += '<!---->';
+export function element(renderer, tag, attributes_fn = noop, children_fn = noop) {
+	renderer.push('<!---->');
 
 	if (tag) {
-		payload.out += `<${tag}`;
+		if (!REGEX_VALID_TAG_NAME.test(tag)) {
+			e.dynamic_element_invalid_tag(tag);
+		}
+		renderer.push(`<${tag}`);
 		attributes_fn();
-		payload.out += `>`;
+		renderer.push(`>`);
 
 		if (!is_void(tag)) {
 			children_fn();
 			if (!is_raw_text_element(tag)) {
-				payload.out += EMPTY_COMMENT;
+				renderer.push(EMPTY_COMMENT);
 			}
-			payload.out += `</${tag}>`;
+			renderer.push(`</${tag}>`);
 		}
 	}
 
-	payload.out += '<!---->';
+	renderer.push('<!---->');
 }
 
-/**
- * Array of `onDestroy` callbacks that should be called at the end of the server render function
- * @type {Function[]}
- */
-export let on_destroy = [];
-
 /**
  * Only available on the server and when compiling with the `server` option.
  * Takes a component and returns an object with `body` and `head` properties on it, which you can use to populate the HTML when server-rendering your app.
  * @template {Record<string, any>} Props
- * @param {import('svelte').Component<Props> | ComponentType<SvelteComponent<Props>>} component
- * @param {{ props?: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any> }} [options]
+ * @param {Component<Props> | ComponentType<SvelteComponent<Props>>} component
+ * @param {{ props?: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any>; idPrefix?: string; csp?: Csp; transformError?: (error: unknown) => unknown }} [options]
  * @returns {RenderOutput}
  */
 export function render(component, options = {}) {
-	/** @type {Payload} */
-	const payload = { out: '', css: new Set(), portals: new Map(), head: { title: '', out: '' } };
-
-	const prev_on_destroy = on_destroy;
-	on_destroy = [];
-	payload.out += BLOCK_OPEN;
-
-	let reset_reset_element;
-
-	if (DEV) {
-		// prevent parent/child element state being corrupted by a bad render
-		reset_reset_element = reset_elements();
-	}
-
-	if (options.context) {
-		push();
-		/** @type {Component} */ (current_component).c = options.context;
-	}
-
-	// @ts-expect-error
-	component(payload, options.props ?? {}, {}, {});
-
-	if (options.context) {
-		pop();
-	}
-
-	if (reset_reset_element) {
-		reset_reset_element();
-	}
-
-	payload.out += BLOCK_CLOSE;
-	for (const cleanup of on_destroy) cleanup();
-	on_destroy = prev_on_destroy;
-
-	let out = payload.out;
-
-	// Fill portals
-	let offset = 0;
-	for (const portal of payload.portals.values()) {
-		out =
-			out.slice(0, portal.idx + offset) + portal.content.join('') + out.slice(portal.idx + offset);
-		offset += portal.content.length;
-	}
-
-	let head = payload.head.out + payload.head.title;
-
-	for (const { hash, code } of payload.css) {
-		head += `<style id="${hash}">${code}</style>`;
+	if (options.csp?.hash && options.csp.nonce) {
+		e.invalid_csp();
 	}
-
-	return {
-		head,
-		html: out,
-		body: out
-	};
+	return Renderer.render(/** @type {Component<Props>} */ (component), options);
 }
 
 /**
- * @param {Payload} payload
- * @param {(head_payload: Payload['head']) => void} fn
+ * @param {string} hash
+ * @param {Renderer} renderer
+ * @param {(renderer: Renderer) => Promise<void> | void} fn
  * @returns {void}
  */
-export function head(payload, fn) {
-	const head_payload = payload.head;
-	head_payload.out += BLOCK_OPEN;
-	fn(head_payload);
-	head_payload.out += BLOCK_CLOSE;
+export function head(hash, renderer, fn) {
+	renderer.head((renderer) => {
+		renderer.push(`<!--${hash}-->`);
+		renderer.child(fn);
+		renderer.push(EMPTY_COMMENT);
+	});
 }
 
 /**
- * @param {Payload} payload
+ * @param {Renderer} renderer
  * @param {any} id
  * @returns {void}
  */
-export function portal_outlet(payload, id) {
-	payload.out += BLOCK_OPEN;
-	payload.portals.set(id, { idx: payload.out.length, content: [] });
-	payload.out += BLOCK_CLOSE;
+export function portal_outlet(renderer, id) {
+	renderer.portal_outlet(id);
 }
 
 /**
- * @param {Payload} payload
+ * @param {Renderer} renderer
  * @param {any} target
- * @param {(p: Payload) => void} content
+ * @param {(p: Renderer) => void} content
  * @returns {void}
  */
-export function portal(payload, target, content) {
-	payload.out += EMPTY_COMMENT;
-
-	if (!target) return; // probably targets a DOM node - not possible in SSR, ignore
-
-	if (!(target instanceof PortalKey)) {
-		throw new Error(
-			'TODO error code: target can only be a key instantiated with createPortalKey, or a DOM node'
-		);
-	}
-
-	const portal = payload.portals.get(target);
-	if (!portal)
-		throw new Error(
-			'TODO error code: No portal found for given target. Make sure portal target exists before referencing it'
-		);
-
-	/** @type {Payload} */
-	const tmp_payload = { ...payload, out: '' };
-	content(tmp_payload);
-	tmp_payload.out += EMPTY_COMMENT;
-	portal.content.push(tmp_payload.out);
+export function portal(renderer, target, content) {
+	renderer.portal(target, content);
 }
 
 /**
- * @param {Payload} payload
+ * @param {Renderer} renderer
  * @param {boolean} is_html
  * @param {Record<string, string>} props
  * @param {() => void} component
  * @param {boolean} dynamic
  * @returns {void}
  */
-export function css_props(payload, is_html, props, component, dynamic = false) {
+export function css_props(renderer, 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}">`;
+		renderer.push(`<svelte-css-wrapper style="display: contents; ${styles}">`);
 	} else {
-		payload.out += `<g style="${styles}">`;
-	}
-
-	if (dynamic) {
-		payload.out += '<!---->';
+		renderer.push(`<g style="${styles}">`);
 	}
 
 	component();
 
+	if (!dynamic) {
+		renderer.push('<!---->');
+	}
+
 	if (is_html) {
-		payload.out += `<!----></svelte-css-wrapper>`;
+		renderer.push('</svelte-css-wrapper>');
 	} else {
-		payload.out += `<!----></g>`;
+		renderer.push('</g>');
 	}
 }
 
 /**
  * @param {Record<string, unknown>} attrs
- * @param {Record<string, string>} [classes]
+ * @param {string} [css_hash]
+ * @param {Record<string, boolean>} [classes]
  * @param {Record<string, string>} [styles]
  * @param {number} [flags]
  * @returns {string}
  */
-export function spread_attributes(attrs, classes, styles, flags = 0) {
+export function attributes(attrs, css_hash, classes, styles, flags = 0) {
 	if (styles) {
-		attrs.style = attrs.style
-			? style_object_to_string(merge_styles(/** @type {string} */ (attrs.style), styles))
-			: style_object_to_string(styles);
+		attrs.style = to_style(attrs.style, styles);
 	}
 
-	if (classes) {
-		const classlist = attrs.class ? [attrs.class] : [];
-
-		for (const key in classes) {
-			if (classes[key]) {
-				classlist.push(key);
-			}
-		}
+	if (attrs.class) {
+		attrs.class = clsx(attrs.class);
+	}
 
-		attrs.class = classlist.join(' ');
+	if (css_hash || classes) {
+		attrs.class = to_class(attrs.class, css_hash, classes);
 	}
 
 	let attr_str = '';
@@ -265,17 +164,27 @@ export function spread_attributes(attrs, classes, styles, flags = 0) {
 
 	const is_html = (flags & ELEMENT_IS_NAMESPACED) === 0;
 	const lowercase = (flags & ELEMENT_PRESERVE_ATTRIBUTE_CASE) === 0;
+	const is_input = (flags & ELEMENT_IS_INPUT) !== 0;
 
-	for (name in attrs) {
+	for (name of Object.keys(attrs)) {
 		// omit functions, internal svelte properties and invalid attribute names
 		if (typeof attrs[name] === 'function') continue;
 		if (name[0] === '$' && name[1] === '$') continue; // faster than name.startsWith('$$')
-		if (INVALID_ATTR_NAME_CHAR_REGEX.test(name)) continue;
+		if (name === '' || INVALID_ATTR_NAME_CHAR_REGEX.test(name)) continue;
 
 		var value = attrs[name];
+		var lower = name.toLowerCase();
+
+		if (lowercase) name = lower;
+
+		// omit event handler attributes
+		if (lower.length > 2 && lower.startsWith('on')) continue;
 
-		if (lowercase) {
-			name = name.toLowerCase();
+		if (is_input) {
+			if (name === 'defaultvalue' || name === 'defaultchecked') {
+				name = name === 'defaultvalue' ? 'value' : 'checked';
+				if (attrs[name]) continue;
+			}
 		}
 
 		attr_str += attr(name, value, is_html && is_boolean_attribute(name));
@@ -295,7 +204,8 @@ export function spread_props(props) {
 
 	for (let i = 0; i < props.length; i++) {
 		const obj = props[i];
-		for (key in obj) {
+		if (obj == null) continue;
+		for (key of Object.keys(obj)) {
 			const desc = Object.getOwnPropertyDescriptor(obj, key);
 			if (desc) {
 				Object.defineProperty(merged_props, key, desc);
@@ -323,35 +233,23 @@ function style_object_to_string(style_object) {
 		.join(' ');
 }
 
-/** @param {Record<string, string>} style_object */
-export function add_styles(style_object) {
-	const styles = style_object_to_string(style_object);
-	return styles ? ` style="${styles}"` : '';
+/**
+ * @param {any} value
+ * @param {string | undefined} [hash]
+ * @param {Record<string, boolean>} [directives]
+ */
+export function attr_class(value, hash, directives) {
+	var result = to_class(value, hash, directives);
+	return result ? ` class="${escape_html(result, true)}"` : '';
 }
 
 /**
- * @param {string} attribute
- * @param {Record<string, string>} styles
+ * @param {any} value
+ * @param {Record<string,any>|[Record<string,any>,Record<string,any>]} [directives]
  */
-export function merge_styles(attribute, styles) {
-	/** @type {Record<string, string>} */
-	var merged = {};
-
-	if (attribute) {
-		for (var declaration of attribute.split(';')) {
-			var i = declaration.indexOf(':');
-			var name = declaration.slice(0, i).trim();
-			var value = declaration.slice(i + 1).trim();
-
-			if (name !== '') merged[name] = value;
-		}
-	}
-
-	for (name in styles) {
-		merged[name] = styles[name];
-	}
-
-	return merged;
+export function attr_style(value, directives) {
+	var result = to_style(value, directives);
+	return result ? ` style="${escape_html(result, true)}"` : '';
 }
 
 /**
@@ -435,20 +333,20 @@ export function update_store_pre(store_values, store_name, store, d = 1) {
 
 /** @param {Record<string, [any, any, any]>} store_values */
 export function unsubscribe_stores(store_values) {
-	for (const store_name in store_values) {
+	for (const store_name of Object.keys(store_values)) {
 		store_values[store_name][1]();
 	}
 }
 
 /**
- * @param {Payload} payload
+ * @param {Renderer} renderer
  * @param {Record<string, any>} $$props
  * @param {string} name
  * @param {Record<string, unknown>} slot_props
  * @param {null | (() => void)} fallback_fn
  * @returns {void}
  */
-export function slot(payload, $$props, name, slot_props, fallback_fn) {
+export function slot(renderer, $$props, name, slot_props, fallback_fn) {
 	var slot_fn = $$props.$$slots?.[name];
 	// Interop: Can use snippets to fill slots
 	if (slot_fn === true) {
@@ -456,7 +354,7 @@ export function slot(payload, $$props, name, slot_props, fallback_fn) {
 	}
 
 	if (slot_fn !== undefined) {
-		slot_fn(payload, slot_props);
+		slot_fn(renderer, slot_props);
 	} else {
 		fallback_fn?.();
 	}
@@ -471,7 +369,7 @@ export function rest_props(props, rest) {
 	/** @type {Record<string, unknown>} */
 	const rest_props = {};
 	let key;
-	for (key in props) {
+	for (key of Object.keys(props)) {
 		if (!rest.includes(key)) {
 			rest_props[key] = props[key];
 		}
@@ -496,7 +394,7 @@ export function sanitize_slots(props) {
 	/** @type {Record<string, boolean>} */
 	const sanitized = {};
 	if (props.children) sanitized.default = true;
-	for (const key in props.$$slots) {
+	for (const key of Object.keys(props.$$slots || {})) {
 		sanitized[key] = true;
 	}
 	return sanitized;
@@ -509,7 +407,7 @@ export function sanitize_slots(props) {
  * @param {Record<string, unknown>} props_now
  */
 export function bind_props(props_parent, props_now) {
-	for (const key in props_now) {
+	for (const key of Object.keys(props_now)) {
 		const initial_value = props_parent[key];
 		const value = props_now[key];
 		if (
@@ -524,18 +422,21 @@ export function bind_props(props_parent, props_now) {
 
 /**
  * @template V
+ * @param {Renderer} renderer
  * @param {Promise<V>} promise
  * @param {null | (() => void)} pending_fn
  * @param {(value: V) => void} then_fn
  * @returns {void}
  */
-function await_block(promise, pending_fn, then_fn) {
+function await_block(renderer, promise, pending_fn, then_fn) {
 	if (is_promise(promise)) {
+		renderer.push(BLOCK_OPEN);
 		promise.then(null, noop);
 		if (pending_fn !== null) {
 			pending_fn();
 		}
 	} else if (then_fn !== null) {
+		renderer.push(BLOCK_OPEN_ELSE);
 		then_fn(promise);
 	}
 }
@@ -552,15 +453,6 @@ export function ensure_array_like(array_like_or_iterator) {
 	return [];
 }
 
-/**
- * @param {any[]} args
- * @param {Function} [inspect]
- */
-// eslint-disable-next-line no-console
-export function inspect(args, inspect = console.log) {
-	inspect('init', ...args);
-}
-
 /**
  * @template V
  * @param {() => V} get_value
@@ -575,22 +467,96 @@ export function once(get_value) {
 	};
 }
 
-export { attr };
+/**
+ * Create an unique ID
+ * @param {Renderer} renderer
+ * @returns {string}
+ */
+export function props_id(renderer) {
+	const uid = renderer.global.uid();
+	renderer.push('<!--$' + uid + '-->');
+	return uid;
+}
+
+export { attr, clsx };
 
 export { html } from './blocks/html.js';
 
-export { push, pop } from './context.js';
+export { save } from './context.js';
 
-export { push_element, pop_element } from './dev.js';
+export { push_element, pop_element, validate_snippet_args } from './dev.js';
 
 export { snapshot } from '../shared/clone.js';
 
-export { fallback } from '../shared/utils.js';
+export { fallback, to_array, exclude_from_object } from '../shared/utils.js';
 
 export {
 	invalid_default_snippet,
 	validate_dynamic_element_tag,
-	validate_void_dynamic_element
+	validate_void_dynamic_element,
+	prevent_snippet_stringification
 } from '../shared/validate.js';
 
 export { escape_html as escape };
+
+/**
+ * @template T
+ * @param {()=>T} fn
+ * @returns {(new_value?: T) => (T | void)}
+ */
+export function derived(fn) {
+	// deriveds created during render are memoized,
+	// deriveds created outside (e.g. SvelteKit `page` stuff) are not
+	const get_value = ssr_context === null ? fn : once(fn);
+
+	/** @type {T | undefined} */
+	let updated_value;
+
+	return function (new_value) {
+		if (arguments.length === 0) {
+			return updated_value ?? get_value();
+		}
+
+		updated_value = new_value;
+		return updated_value;
+	};
+}
+
+/**
+ * @template {number | bigint} T
+ * @param {(value?: T) => T} derived
+ * @param {1 | -1} [d]
+ * @returns {T}
+ */
+export function update_derived(derived, d = 1) {
+	const value = derived();
+	let increase = typeof value === 'bigint' ? BigInt(d) : d;
+	// for some reason TS is mad even if T is always number or bigint
+	derived(value + /** @type {*} */ (increase));
+	return value;
+}
+
+/**
+ * @template {number | bigint} T
+ * @param {(value?: T) => T} derived
+ * @param {1 | -1} [d]
+ * @returns {T}
+ */
+export function update_derived_pre(derived, d = 1) {
+	const old_value = derived();
+	let increase = typeof old_value === 'bigint' ? BigInt(d) : d;
+	// for some reason TS is mad even if T is always number or bigint
+	const value = old_value + /** @type {*} */ (increase);
+	derived(value);
+	return value;
+}
+
+/**
+ * @template T
+ * @param {()=>T} fn
+ */
+export function async_derived(fn) {
+	return Promise.resolve(fn()).then((value) => {
+		return () => value;
+	});
+}
diff --git a/packages/svelte/src/internal/server/render-context.js b/packages/svelte/src/internal/server/render-context.js
new file mode 100644
index 0000000000..7a014a1b15
--- /dev/null
+++ b/packages/svelte/src/internal/server/render-context.js
@@ -0,0 +1,86 @@
+// @ts-ignore -- we don't include node types in the production build
+/** @import { AsyncLocalStorage } from 'node:async_hooks' */
+/** @import { RenderContext } from '#server' */
+
+import { deferred, noop } from '../shared/utils.js';
+import * as e from './errors.js';
+
+/** @type {Promise<void> | null} */
+let current_render = null;
+
+/** @type {RenderContext | null} */
+let context = null;
+
+/** @returns {RenderContext} */
+export function get_render_context() {
+	const store = context ?? als?.getStore();
+
+	if (!store) {
+		e.server_context_required();
+	}
+
+	return store;
+}
+
+/**
+ * @template T
+ * @param {() => Promise<T>} fn
+ * @returns {Promise<T>}
+ */
+export async function with_render_context(fn) {
+	context = {
+		hydratable: {
+			lookup: new Map(),
+			comparisons: [],
+			unresolved_promises: new Map()
+		}
+	};
+
+	if (in_webcontainer()) {
+		const { promise, resolve } = deferred();
+		const previous_render = current_render;
+		current_render = promise;
+		await previous_render;
+		return fn().finally(resolve);
+	}
+
+	try {
+		if (als === null) {
+			e.async_local_storage_unavailable();
+		}
+		return als.run(context, fn);
+	} finally {
+		context = null;
+	}
+}
+
+/** @type {AsyncLocalStorage<RenderContext | null> | null} */
+let als = null;
+/** @type {Promise<void> | null} */
+let als_import = null;
+
+/**
+ *
+ * @returns {Promise<void>}
+ */
+export function init_render_context() {
+	// It's important the right side of this assignment can run a maximum of one time
+	// otherwise it's possible for a very, very well-timed race condition to assign to `als`
+	// at the beginning of a render, and then another render to assign to it again, which causes
+	// the first render's second half to use a new instance of `als` which doesn't have its
+	// context anymore.
+	// @ts-ignore -- we don't include node types in the production build
+	als_import ??= import('node:async_hooks')
+		.then((hooks) => {
+			als = new hooks.AsyncLocalStorage();
+		})
+		.then(noop, noop);
+	return als_import;
+}
+
+// this has to be a function because rollup won't treeshake it if it's a constant
+function in_webcontainer() {
+	// @ts-ignore -- this will fail when we run typecheck because we exclude node types
+	// eslint-disable-next-line n/prefer-global/process
+	return !!globalThis.process?.versions?.webcontainer;
+}
diff --git a/packages/svelte/src/internal/server/renderer.js b/packages/svelte/src/internal/server/renderer.js
new file mode 100644
index 0000000000..7732260f2a
--- /dev/null
+++ b/packages/svelte/src/internal/server/renderer.js
@@ -0,0 +1,1014 @@
+/** @import { Component } from 'svelte' */
+/** @import { Csp, HydratableContext, RenderOutput, SSRContext, SyncRenderOutput, Sha256Source } from './types.js' */
+/** @import { MaybePromise } from '#shared' */
+import { async_mode_flag } from '../flags/index.js';
+import { abort } from './abort-signal.js';
+import { pop, push, set_ssr_context, ssr_context } from './context.js';
+import * as e from './errors.js';
+import * as w from './warnings.js';
+import { BLOCK_CLOSE, BLOCK_OPEN, EMPTY_COMMENT } from './hydration.js';
+import { HYDRATION_START_FAILED } from '../../constants.js';
+import { attributes } from './index.js';
+import { get_render_context, with_render_context, init_render_context } from './render-context.js';
+import { sha256 } from './crypto.js';
+import * as devalue from 'devalue';
+import { has_own_property, noop } from '../shared/utils.js';
+import { escape_html } from '../../escaping.js';
+import { PortalKey } from '../shared/svelte-portal.js';
+
+/** @typedef {'head' | 'body'} RendererType */
+/** @typedef {{ [key in RendererType]: string }} AccumulatedContent */
+
+/**
+ * @typedef {string | Renderer} RendererItem
+ */
+
+/**
+ * Renderers are basically a tree of `string | Renderer`s, where each `Renderer` in the tree represents
+ * work that may or may not have completed. A renderer can be {@link collect}ed to aggregate the
+ * content from itself and all of its children, but this will throw if any of the children are
+ * performing asynchronous work. To asynchronously collect a renderer, just `await` it.
+ *
+ * The `string` values within a renderer are always associated with the {@link type} of that renderer. To switch types,
+ * call {@link child} with a different `type` argument.
+ */
+export class Renderer {
+	/**
+	 * The contents of the renderer.
+	 * @type {RendererItem[]}
+	 */
+	#out = [];
+
+	/**
+	 * Any `onDestroy` callbacks registered during execution of this renderer.
+	 * @type {(() => void)[] | undefined}
+	 */
+	#on_destroy = undefined;
+
+	/**
+	 * Whether this renderer is a component body.
+	 * @type {boolean}
+	 */
+	#is_component_body = false;
+
+	/**
+	 * If set, this renderer is an error boundary. When async collection
+	 * of the children fails, the failed snippet is rendered instead.
+	 * @type {{
+	 * 	failed: (renderer: Renderer, error: unknown, reset: () => void) => void;
+	 * 	transformError: (error: unknown) => unknown;
+	 * 	context: SSRContext | null;
+	 * } | null}
+	 */
+	#boundary = null;
+
+	/**
+	 * The type of string content that this renderer is accumulating.
+	 * @type {RendererType}
+	 */
+	type;
+
+	/** @type {Renderer | undefined} */
+	#parent;
+
+	/**
+	 * Asynchronous work associated with this renderer
+	 * @type {Promise<void> | undefined}
+	 */
+	promise = undefined;
+
+	/**
+	 * State which is associated with the content tree as a whole.
+	 * It will be re-exposed, uncopied, on all children.
+	 * @type {SSRState}
+	 * @readonly
+	 */
+	global;
+
+	/**
+	 * State that is local to the branch it is declared in.
+	 * It will be shallow-copied to all children.
+	 *
+	 * @type {{ select_value: string | undefined }}
+	 */
+	local;
+
+	/**
+	 * @param {SSRState} global
+	 * @param {Renderer | undefined} [parent]
+	 */
+	constructor(global, parent) {
+		this.#parent = parent;
+
+		this.global = global;
+		this.local = parent ? { ...parent.local } : { select_value: undefined };
+		this.type = parent ? parent.type : 'body';
+	}
+
+	/**
+	 * @param {(renderer: Renderer) => void} fn
+	 */
+	head(fn) {
+		const head = new Renderer(this.global, this);
+		head.type = 'head';
+
+		this.#out.push(head);
+		head.child(fn);
+	}
+
+	/**
+	 * @param {Array<Promise<void>>} blockers
+	 * @param {(renderer: Renderer) => void} fn
+	 */
+	async_block(blockers, fn) {
+		this.#out.push(BLOCK_OPEN);
+		this.async(blockers, fn);
+		this.#out.push(BLOCK_CLOSE);
+	}
+
+	/**
+	 * @param {Array<Promise<void>>} blockers
+	 * @param {(renderer: Renderer) => void} fn
+	 */
+	async(blockers, fn) {
+		let callback = fn;
+
+		if (blockers.length > 0) {
+			const context = ssr_context;
+
+			callback = (renderer) => {
+				return Promise.all(blockers).then(() => {
+					const previous_context = ssr_context;
+
+					try {
+						set_ssr_context(context);
+						return fn(renderer);
+					} finally {
+						set_ssr_context(previous_context);
+					}
+				});
+			};
+		}
+
+		this.child(callback);
+	}
+
+	/**
+	 * @param {Array<() => void>} thunks
+	 */
+	run(thunks) {
+		const context = ssr_context;
+
+		let promise = Promise.resolve(thunks[0]());
+		const promises = [promise];
+
+		for (const fn of thunks.slice(1)) {
+			promise = promise.then(() => {
+				const previous_context = ssr_context;
+				set_ssr_context(context);
+
+				try {
+					return fn();
+				} finally {
+					set_ssr_context(previous_context);
+				}
+			});
+
+			promises.push(promise);
+		}
+
+		// prevent unhandled rejections, and attach the promise to the renderer instance
+		// so that rejections correctly cause rendering to fail
+		promise.catch(noop);
+		this.promise = promise;
+
+		return promises;
+	}
+
+	/**
+	 * @param {(renderer: Renderer) => MaybePromise<void>} fn
+	 */
+	child_block(fn) {
+		this.#out.push(BLOCK_OPEN);
+		this.child(fn);
+		this.#out.push(BLOCK_CLOSE);
+	}
+
+	/**
+	 * Create a child renderer. The child renderer inherits the state from the parent,
+	 * but has its own content.
+	 * @param {(renderer: Renderer) => MaybePromise<void>} fn
+	 */
+	child(fn) {
+		const child = new Renderer(this.global, this);
+		this.#out.push(child);
+
+		const parent = ssr_context;
+
+		set_ssr_context({
+			...ssr_context,
+			p: parent,
+			c: null,
+			r: child
+		});
+
+		const result = fn(child);
+
+		set_ssr_context(parent);
+
+		if (result instanceof Promise) {
+			// catch to avoid unhandled promise rejections - we'll end up throwing in `collect_async` if something fails
+			result.catch(noop);
+			result.finally(() => set_ssr_context(null)).catch(noop);
+
+			if (child.global.mode === 'sync') {
+				e.await_invalid();
+			}
+
+			child.promise = result;
+		}
+
+		return child;
+	}
+
+	/**
+	 * Render children inside an error boundary. If the children throw and the API-level
+	 * `transformError` transform handles the error (doesn't re-throw), the `failed` snippet is
+	 * rendered instead. Otherwise the error propagates.
+	 *
+	 * @param {{ failed?: (renderer: Renderer, error: unknown, reset: () => void) => void }} props
+	 * @param {(renderer: Renderer) => MaybePromise<void>} children_fn
+	 */
+	boundary(props, children_fn) {
+		// Create a child renderer for the boundary content.
+		// Mark it as a boundary so that #collect_content_async can catch
+		// errors from nested async children and render the failed snippet.
+		const child = new Renderer(this.global, this);
+		this.#out.push(child);
+
+		const parent_context = ssr_context;
+
+		if (props.failed) {
+			child.#boundary = {
+				failed: props.failed,
+				transformError: this.global.transformError,
+				context: parent_context
+			};
+		}
+
+		set_ssr_context({
+			...ssr_context,
+			p: parent_context,
+			c: null,
+			r: child
+		});
+
+		try {
+			const result = children_fn(child);
+
+			set_ssr_context(parent_context);
+
+			if (result instanceof Promise) {
+				if (child.global.mode === 'sync') {
+					e.await_invalid();
+				}
+				result.catch(noop);
+				child.promise = result;
+			}
+		} catch (error) {
+			// synchronous errors are handled here, async errors will be handled in #collect_content_async
+			set_ssr_context(parent_context);
+
+			const failed_snippet = props.failed;
+
+			if (!failed_snippet) throw error;
+
+			const result = this.global.transformError(error);
+
+			child.#out.length = 0;
+			child.#boundary = null;
+
+			if (result instanceof Promise) {
+				if (this.global.mode === 'sync') {
+					e.await_invalid();
+				}
+
+				child.promise = /** @type {Promise<unknown>} */ (result).then((transformed) => {
+					set_ssr_context(parent_context);
+					child.#out.push(Renderer.#serialize_failed_boundary(transformed));
+					failed_snippet(child, transformed, noop);
+					child.#out.push(BLOCK_CLOSE);
+				});
+				child.promise.catch(noop);
+			} else {
+				child.#out.push(Renderer.#serialize_failed_boundary(result));
+				failed_snippet(child, result, noop);
+				child.#out.push(BLOCK_CLOSE);
+			}
+		}
+	}
+
+	/**
+	 * Create a component renderer. The component renderer inherits the state from the parent,
+	 * but has its own content. It is treated as an ordering boundary for ondestroy callbacks.
+	 * @param {(renderer: Renderer) => MaybePromise<void>} fn
+	 * @param {Function} [component_fn]
+	 * @returns {void}
+	 */
+	component(fn, component_fn) {
+		push(component_fn);
+		const child = this.child(fn);
+		child.#is_component_body = true;
+		pop();
+	}
+
+	/**
+	 * @param {Record<string, any>} attrs
+	 * @param {(renderer: Renderer) => void} fn
+	 * @param {string | undefined} [css_hash]
+	 * @param {Record<string, boolean> | undefined} [classes]
+	 * @param {Record<string, string> | undefined} [styles]
+	 * @param {number | undefined} [flags]
+	 * @param {boolean | undefined} [is_rich]
+	 * @returns {void}
+	 */
+	select(attrs, fn, css_hash, classes, styles, flags, is_rich) {
+		const { value, ...select_attrs } = attrs;
+
+		this.push(`<select${attributes(select_attrs, css_hash, classes, styles, flags)}>`);
+		this.child((renderer) => {
+			renderer.local.select_value = value;
+			fn(renderer);
+		});
+		this.push(`${is_rich ? '<!>' : ''}</select>`);
+	}
+
+	/**
+	 * @param {Record<string, any>} attrs
+	 * @param {string | number | boolean | ((renderer: Renderer) => void)} body
+	 * @param {string | undefined} [css_hash]
+	 * @param {Record<string, boolean> | undefined} [classes]
+	 * @param {Record<string, string> | undefined} [styles]
+	 * @param {number | undefined} [flags]
+	 * @param {boolean | undefined} [is_rich]
+	 */
+	option(attrs, body, css_hash, classes, styles, flags, is_rich) {
+		this.#out.push(`<option${attributes(attrs, css_hash, classes, styles, flags)}`);
+
+		/**
+		 * @param {Renderer} renderer
+		 * @param {any} value
+		 * @param {{ head?: string, body: any }} content
+		 */
+		const close = (renderer, value, { head, body }) => {
+			if (has_own_property.call(attrs, 'value')) {
+				value = attrs.value;
+			}
+
+			if (value === this.local.select_value) {
+				renderer.#out.push(' selected=""');
+			}
+
+			renderer.#out.push(`>${body}${is_rich ? '<!>' : ''}</option>`);
+
+			// super edge case, but may as well handle it
+			if (head) {
+				renderer.head((child) => child.push(head));
+			}
+		};
+
+		if (typeof body === 'function') {
+			this.child((renderer) => {
+				const r = new Renderer(this.global, this);
+				body(r);
+
+				if (this.global.mode === 'async') {
+					return r.#collect_content_async().then((content) => {
+						close(renderer, content.body.replaceAll('<!---->', ''), content);
+					});
+				} else {
+					const content = r.#collect_content();
+					close(renderer, content.body.replaceAll('<!---->', ''), content);
+				}
+			});
+		} else {
+			close(this, body, { body: escape_html(body) });
+		}
+	}
+
+	/**
+	 * @param {(renderer: Renderer) => void} fn
+	 */
+	title(fn) {
+		const path = this.get_path();
+
+		/** @param {string} head */
+		const close = (head) => {
+			this.global.set_title(head, path);
+		};
+
+		this.child((renderer) => {
+			const r = new Renderer(renderer.global, renderer);
+			fn(r);
+
+			if (renderer.global.mode === 'async') {
+				return r.#collect_content_async().then((content) => {
+					close(content.head);
+				});
+			} else {
+				const content = r.#collect_content();
+				close(content.head);
+			}
+		});
+	}
+
+	/** @param {PortalKey} key */
+	portal_outlet(key) {
+		this.push(BLOCK_OPEN);
+		const id = `<!--portal:${key.v}-->`;
+		this.push(id);
+		this.global.portals.set(id, []);
+		this.push(BLOCK_CLOSE);
+	}
+
+	/**
+	 * @param {PortalKey | undefined} target
+	 * @param {(p: Renderer) => void} content
+	 */
+	portal(target, content) {
+		this.push(EMPTY_COMMENT);
+
+		if (!target) return; // probably targets a DOM node - not possible in SSR, ignore
+
+		if (!(target instanceof PortalKey)) {
+			throw new Error(
+				'TODO error code: target can only be a key instantiated with createPortalKey, or a DOM node'
+			);
+		}
+
+		const id = `<!--portal:${target.v}-->`;
+		const portal = this.global.portals.get(id);
+		if (!portal)
+			// TODO loosen this restriction?
+			throw new Error(
+				'TODO error code: No portal found for given target. Make sure portal target exists before referencing it'
+			);
+
+		const tmp_payload = new Renderer(this.global, this);
+		content(tmp_payload);
+		tmp_payload.push(EMPTY_COMMENT);
+		portal.push(tmp_payload);
+	}
+
+	/**
+	 * @param {string | (() => Promise<string>)} content
+	 */
+	push(content) {
+		if (typeof content === 'function') {
+			this.child(async (renderer) => renderer.push(await content()));
+		} else {
+			this.#out.push(content);
+		}
+	}
+
+	/**
+	 * @param {() => void} fn
+	 */
+	on_destroy(fn) {
+		(this.#on_destroy ??= []).push(fn);
+	}
+
+	/**
+	 * @returns {number[]}
+	 */
+	get_path() {
+		return this.#parent ? [...this.#parent.get_path(), this.#parent.#out.indexOf(this)] : [];
+	}
+
+	/**
+	 * @deprecated this is needed for legacy component bindings
+	 */
+	copy() {
+		const copy = new Renderer(this.global, this.#parent);
+		copy.#out = this.#out.map((item) => (item instanceof Renderer ? item.copy() : item));
+		copy.promise = this.promise;
+		return copy;
+	}
+
+	/**
+	 * @param {Renderer} other
+	 * @deprecated this is needed for legacy component bindings
+	 */
+	subsume(other) {
+		if (this.global.mode !== other.global.mode) {
+			throw new Error(
+				"invariant: A renderer cannot switch modes. If you're seeing this, there's a compiler bug. File an issue!"
+			);
+		}
+
+		this.local = other.local;
+		this.#out = other.#out.map((item, i) => {
+			const current = this.#out[i];
+
+			if (current instanceof Renderer && item instanceof Renderer) {
+				current.subsume(item);
+				return current;
+			}
+
+			return item;
+		});
+		this.promise = other.promise;
+		this.type = other.type;
+	}
+
+	get length() {
+		return this.#out.length;
+	}
+
+	/**
+	 * Creates the hydration comment that marks the start of a failed boundary.
+	 * The error is JSON-serialized and embedded inside an HTML comment for the client
+	 * to parse during hydration. The JSON is escaped to prevent `-->` or `<!--` sequences
+	 * from breaking out of the comment (XSS). Uses unicode escapes which `JSON.parse()`
+	 * handles transparently.
+	 * @param {unknown} error
+	 * @returns {string}
+	 */
+	static #serialize_failed_boundary(error) {
+		var json = JSON.stringify(error);
+		var escaped = json.replace(/>/g, '\\u003e').replace(/</g, '\\u003c');
+		return `<!--${HYDRATION_START_FAILED}${escaped}-->`;
+	}
+
+	/**
+	 * Only available on the server and when compiling with the `server` option.
+	 * Takes a component and returns an object with `body` and `head` properties on it, which you can use to populate the HTML when server-rendering your app.
+	 * @template {Record<string, any>} Props
+	 * @param {Component<Props>} component
+	 * @param {{ props?: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any>; idPrefix?: string; csp?: Csp }} [options]
+	 * @returns {RenderOutput}
+	 */
+	static render(component, options = {}) {
+		/** @type {AccumulatedContent | undefined} */
+		let sync;
+		/** @type {Promise<AccumulatedContent & { hashes: { script: Sha256Source[] } }> | undefined} */
+		let async;
+
+		const result = /** @type {RenderOutput} */ ({});
+		// making these properties non-enumerable so that console.logging
+		// doesn't trigger a sync render
+		Object.defineProperties(result, {
+			html: {
+				get: () => {
+					return (sync ??= Renderer.#render(component, options)).body;
+				}
+			},
+			head: {
+				get: () => {
+					return (sync ??= Renderer.#render(component, options)).head;
+				}
+			},
+			body: {
+				get: () => {
+					return (sync ??= Renderer.#render(component, options)).body;
+				}
+			},
+			hashes: {
+				value: {
+					script: ''
+				}
+			},
+			then: {
+				value:
+					/**
+					 * this is not type-safe, but honestly it's the best I can do right now, and it's a straightforward function.
+					 *
+					 * @template TResult1
+					 * @template [TResult2=never]
+					 * @param { (value: SyncRenderOutput) => TResult1 } onfulfilled
+					 * @param { (reason: unknown) => TResult2 } onrejected
+					 */
+					(onfulfilled, onrejected) => {
+						if (!async_mode_flag) {
+							const result = (sync ??= Renderer.#render(component, options));
+							const user_result = onfulfilled({
+								head: result.head,
+								body: result.body,
+								html: result.body,
+								hashes: { script: [] }
+							});
+							return Promise.resolve(user_result);
+						}
+						async ??= init_render_context().then(() =>
+							with_render_context(() => Renderer.#render_async(component, options))
+						);
+						return async.then((result) => {
+							Object.defineProperty(result, 'html', {
+								// eslint-disable-next-line getter-return
+								get: () => {
+									e.html_deprecated();
+								}
+							});
+							return onfulfilled(/** @type {SyncRenderOutput} */ (result));
+						}, onrejected);
+					}
+			}
+		});
+
+		return result;
+	}
+
+	/**
+	 * Collect all of the `onDestroy` callbacks registered during rendering. In an async context, this is only safe to call
+	 * after awaiting `collect_async`.
+	 *
+	 * Child renderers are "porous" and don't affect execution order, but component body renderers
+	 * create ordering boundaries. Within a renderer, callbacks run in order until hitting a component boundary.
+	 * @returns {Iterable<() => void>}
+	 */
+	*#collect_on_destroy() {
+		for (const component of this.#traverse_components()) {
+			yield* component.#collect_ondestroy();
+		}
+	}
+
+	/**
+	 * Performs a depth-first search of renderers, yielding the deepest components first, then additional components as we backtrack up the tree.
+	 * @returns {Iterable<Renderer>}
+	 */
+	*#traverse_components() {
+		for (const child of this.#out) {
+			if (typeof child !== 'string') {
+				yield* child.#traverse_components();
+			}
+		}
+		if (this.#is_component_body) {
+			yield this;
+		}
+	}
+
+	/**
+	 * @returns {Iterable<() => void>}
+	 */
+	*#collect_ondestroy() {
+		if (this.#on_destroy) {
+			for (const fn of this.#on_destroy) {
+				yield fn;
+			}
+		}
+		for (const child of this.#out) {
+			if (child instanceof Renderer && !child.#is_component_body) {
+				yield* child.#collect_ondestroy();
+			}
+		}
+	}
+
+	/**
+	 * Render a component. Throws if any of the children are performing asynchronous work.
+	 *
+	 * @template {Record<string, any>} Props
+	 * @param {Component<Props>} component
+	 * @param {{ props?: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any>; idPrefix?: string }} options
+	 * @returns {AccumulatedContent}
+	 */
+	static #render(component, options) {
+		var previous_context = ssr_context;
+		try {
+			const renderer = Renderer.#open_render('sync', component, options);
+			const content = renderer.#collect_content();
+
+			for (const [id, portal] of renderer.global.portals) {
+				for (const item of portal) {
+					if (item instanceof Renderer) {
+						const portal_content = item.#collect_content();
+						item.#out.length = 0;
+						content.body.replace(id, id + portal_content.body);
+						content.head.replace(id, id + portal_content.body);
+					}
+				}
+			}
+
+			return Renderer.#close_render(content, renderer);
+		} finally {
+			abort();
+			set_ssr_context(previous_context);
+		}
+	}
+
+	/**
+	 * Render a component.
+	 *
+	 * @template {Record<string, any>} Props
+	 * @param {Component<Props>} component
+	 * @param {{ props?: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any>; idPrefix?: string; csp?: Csp }} options
+	 * @returns {Promise<AccumulatedContent & { hashes: { script: Sha256Source[] } }>}
+	 */
+	static async #render_async(component, options) {
+		const previous_context = ssr_context;
+
+		try {
+			const renderer = Renderer.#open_render('async', component, options);
+			const content = await renderer.#collect_content_async();
+			const hydratables = await renderer.#collect_hydratables();
+			if (hydratables !== null) {
+				content.head = hydratables + content.head;
+			}
+
+			for (const [id, portal] of renderer.global.portals) {
+				for (const item of portal) {
+					if (item instanceof Renderer) {
+						const portal_content = await item.#collect_content_async();
+						content.body = content.body.replace(id, id + portal_content.body);
+						content.head = content.head.replace(id, id + portal_content.body);
+					}
+				}
+			}
+
+			return Renderer.#close_render(content, renderer);
+		} finally {
+			set_ssr_context(previous_context);
+			abort();
+		}
+	}
+
+	/**
+	 * Collect all of the code from the `out` array and return it as a string, or a promise resolving to a string.
+	 * @param {AccumulatedContent} content
+	 * @returns {AccumulatedContent}
+	 */
+	#collect_content(content = { head: '', body: '' }) {
+		for (const item of this.#out) {
+			if (typeof item === 'string') {
+				content[this.type] += item;
+			} else if (item instanceof Renderer) {
+				item.#collect_content(content);
+			}
+		}
+
+		return content;
+	}
+
+	/**
+	 * Collect all of the code from the `out` array and return it as a string.
+	 * @param {AccumulatedContent} content
+	 * @returns {Promise<AccumulatedContent>}
+	 */
+	async #collect_content_async(content = { head: '', body: '' }) {
+		await this.promise;
+
+		// no danger to sequentially awaiting stuff in here; all of the work is already kicked off
+		for (const item of this.#out) {
+			if (typeof item === 'string') {
+				content[this.type] += item;
+			} else if (item instanceof Renderer) {
+				if (item.#boundary) {
+					// This renderer is an error boundary - collect into a separate
+					// accumulator so we can discard partial content on error
+					/** @type {AccumulatedContent} */
+					const boundary_content = { head: '', body: '' };
+
+					try {
+						await item.#collect_content_async(boundary_content);
+						// Success - merge into the main content
+						content.head += boundary_content.head;
+						content.body += boundary_content.body;
+					} catch (error) {
+						const { context, failed, transformError } = item.#boundary;
+
+						set_ssr_context(context);
+
+						let promise = transformError(error);
+						set_ssr_context(null);
+
+						let transformed = await promise;
+						set_ssr_context(context);
+
+						// Render the failed snippet instead of the partial children content
+						const failed_renderer = new Renderer(item.global, item);
+						failed_renderer.type = item.type;
+						failed_renderer.#out.push(Renderer.#serialize_failed_boundary(transformed));
+						failed(failed_renderer, transformed, noop);
+						failed_renderer.#out.push(BLOCK_CLOSE);
+						await failed_renderer.#collect_content_async(content);
+					}
+				} else {
+					await item.#collect_content_async(content);
+				}
+			}
+		}
+
+		return content;
+	}
+
+	async #collect_hydratables() {
+		const ctx = get_render_context().hydratable;
+
+		for (const [_, key] of ctx.unresolved_promises) {
+			// this is a problem -- it means we've finished the render but we're still waiting on a promise to resolve so we can
+			// serialize it, so we're blocking the response on useless content.
+			w.unresolved_hydratable(key, ctx.lookup.get(key)?.stack ?? '<missing stack trace>');
+		}
+
+		for (const comparison of ctx.comparisons) {
+			// these reject if there's a mismatch
+			await comparison;
+		}
+
+		return await this.#hydratable_block(ctx);
+	}
+
+	/**
+	 * @template {Record<string, any>} Props
+	 * @param {'sync' | 'async'} mode
+	 * @param {import('svelte').Component<Props>} component
+	 * @param {{ props?: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any>; idPrefix?: string; csp?: Csp; transformError?: (error: unknown) => unknown }} options
+	 * @returns {Renderer}
+	 */
+	static #open_render(mode, component, options) {
+		if (options.idPrefix?.includes('--')) {
+			e.invalid_id_prefix();
+		}
+
+		var previous_context = ssr_context;
+
+		try {
+			const renderer = new Renderer(
+				new SSRState(
+					mode,
+					options.idPrefix ? options.idPrefix + '-' : '',
+					options.csp,
+					options.transformError
+				)
+			);
+
+			/** @type {SSRContext} */
+			const context = { p: null, c: options.context ?? null, r: renderer };
+			set_ssr_context(context);
+
+			renderer.push(BLOCK_OPEN);
+			// @ts-expect-error
+			component(renderer, options.props ?? {});
+			renderer.push(BLOCK_CLOSE);
+
+			return renderer;
+		} finally {
+			set_ssr_context(previous_context);
+		}
+	}
+
+	/**
+	 * @param {AccumulatedContent} content
+	 * @param {Renderer} renderer
+	 * @returns {AccumulatedContent & { hashes: { script: Sha256Source[] } }}
+	 */
+	static #close_render(content, renderer) {
+		for (const cleanup of renderer.#collect_on_destroy()) {
+			cleanup();
+		}
+
+		let head = content.head + renderer.global.get_title();
+		let body = content.body;
+
+		for (const { hash, code } of renderer.global.css) {
+			head += `<style id="${hash}">${code}</style>`;
+		}
+
+		return {
+			head,
+			body,
+			hashes: {
+				script: renderer.global.csp.script_hashes
+			}
+		};
+	}
+
+	/**
+	 * @param {HydratableContext} ctx
+	 */
+	async #hydratable_block(ctx) {
+		if (ctx.lookup.size === 0) {
+			return null;
+		}
+
+		let entries = [];
+		let has_promises = false;
+
+		for (const [k, v] of ctx.lookup) {
+			if (v.promises) {
+				has_promises = true;
+				for (const p of v.promises) await p;
+			}
+
+			entries.push(`[${devalue.uneval(k)},${v.serialized}]`);
+		}
+
+		let prelude = `const h = (window.__svelte ??= {}).h ??= new Map();`;
+
+		if (has_promises) {
+			prelude = `const r = (v) => Promise.resolve(v);
+				${prelude}`;
+		}
+
+		const body = `
+			{
+				${prelude}
+
+				for (const [k, v] of [
+					${entries.join(',\n\t\t\t\t\t')}
+				]) {
+					h.set(k, v);
+				}
+			}
+		`;
+
+		let csp_attr = '';
+		if (this.global.csp.nonce) {
+			csp_attr = ` nonce="${this.global.csp.nonce}"`;
+		} else if (this.global.csp.hash) {
+			// note to future selves: this doesn't need to be optimized with a Map<body, hash>
+			// because the it's impossible for identical data to occur multiple times in a single render
+			// (this would require the same hydratable key:value pair to be serialized multiple times)
+			const hash = await sha256(body);
+			this.global.csp.script_hashes.push(`sha256-${hash}`);
+		}
+
+		return `\n\t\t<script${csp_attr}>${body}</script>`;
+	}
+}
+
+export class SSRState {
+	/** @readonly @type {Csp & { script_hashes: Sha256Source[] }} */
+	csp;
+
+	/** @readonly @type {'sync' | 'async'} */
+	mode;
+
+	/** @readonly @type {() => string} */
+	uid;
+
+	/** @readonly @type {Set<{ hash: string; code: string }>} */
+	css = new Set();
+
+	/**
+	 * `transformError` passed to `render`. Called when an error boundary catches an error.
+	 * Throws by default if unset in `render`.
+	 * @type {(error: unknown) => unknown}
+	 */
+	transformError;
+
+	/** @type {Map<string, Renderer[]>} */
+	portals = new Map();
+
+	/** @type {{ path: number[], value: string }} */
+	#title = { path: [], value: '' };
+
+	/**
+	 * @param {'sync' | 'async'} mode
+	 * @param {string} id_prefix
+	 * @param {Csp} csp
+	 * @param {((error: unknown) => unknown) | undefined} [transformError]
+	 */
+	constructor(mode, id_prefix = '', csp = { hash: false }, transformError) {
+		this.mode = mode;
+		this.csp = { ...csp, script_hashes: [] };
+
+		this.transformError =
+			transformError ??
+			((error) => {
+				throw error;
+			});
+
+		let uid = 1;
+		this.uid = () => `${id_prefix}s${uid++}`;
+	}
+
+	get_title() {
+		return this.#title.value;
+	}
+
+	/**
+	 * Performs a depth-first (lexicographic) comparison using the path. Rejects sets
+	 * from earlier than or equal to the current value.
+	 * @param {string} value
+	 * @param {number[]} path
+	 */
+	set_title(value, path) {
+		const current = this.#title.path;
+
+		let i = 0;
+		let l = Math.min(path.length, current.length);
+
+		// skip identical prefixes - [1, 2, 3, ...] === [1, 2, 3, ...]
+		while (i < l && path[i] === current[i]) i += 1;
+
+		if (path[i] === undefined) return;
+
+		// replace title if
+		// - incoming path is longer - [7, 8, 9] > [7, 8]
+		// - incoming path is later  - [7, 8, 9] > [7, 8, 8]
+		if (current[i] === undefined || path[i] > current[i]) {
+			this.#title.path = path;
+			this.#title.value = value;
+		}
+	}
+}
diff --git a/packages/svelte/src/internal/server/renderer.test.ts b/packages/svelte/src/internal/server/renderer.test.ts
new file mode 100644
index 0000000000..8e98c41796
--- /dev/null
+++ b/packages/svelte/src/internal/server/renderer.test.ts
@@ -0,0 +1,469 @@
+import { afterAll, beforeAll, describe, expect, test } from 'vitest';
+import { Renderer, SSRState } from './renderer.js';
+import type { Component } from 'svelte';
+import { disable_async_mode_flag, enable_async_mode_flag } from '../flags/index.js';
+
+test('collects synchronous body content by default', () => {
+	const component = (renderer: Renderer) => {
+		renderer.push('a');
+		renderer.child(($$renderer) => {
+			$$renderer.push('b');
+		});
+		renderer.push('c');
+	};
+
+	const { head, body } = Renderer.render(component as unknown as Component);
+	expect(head).toBe('');
+	expect(body).toBe('<!--[-->abc<!--]-->');
+});
+
+test('child type switches content area (head vs body)', () => {
+	const component = (renderer: Renderer) => {
+		renderer.push('a');
+		renderer.head(($$renderer) => {
+			$$renderer.push('<title>T</title>');
+		});
+		renderer.push('b');
+	};
+
+	const { head, body } = Renderer.render(component as unknown as Component);
+	expect(head).toBe('<title>T</title>');
+	expect(body).toBe('<!--[-->ab<!--]-->');
+});
+
+test('child inherits parent type when not specified', () => {
+	const component = (renderer: Renderer) => {
+		renderer.head((renderer) => {
+			renderer.push('<meta name="x"/>');
+			renderer.child((renderer) => {
+				renderer.push('<style>/* css */</style>');
+			});
+		});
+	};
+
+	const { head, body } = Renderer.render(component as unknown as Component);
+	expect(body).toBe('<!--[--><!--]-->');
+	expect(head).toBe('<meta name="x"/><style>/* css */</style>');
+});
+
+test('get_path returns the path indexes to a renderer', () => {
+	const root = new Renderer(new SSRState('sync'));
+	let child_a: InstanceType<typeof Renderer> | undefined;
+	let child_b: InstanceType<typeof Renderer> | undefined;
+	let child_b_0: InstanceType<typeof Renderer> | undefined;
+
+	root.child(($$renderer) => {
+		child_a = $$renderer;
+		$$renderer.push('A');
+	});
+	root.child(($$renderer) => {
+		child_b = $$renderer;
+		$$renderer.child(($$inner) => {
+			child_b_0 = $$inner;
+			$$inner.push('B0');
+		});
+		$$renderer.push('B1');
+	});
+
+	expect(child_a!.get_path()).toEqual([0]);
+	expect(child_b!.get_path()).toEqual([1]);
+	expect(child_b_0!.get_path()).toEqual([1, 0]);
+});
+
+test('creating an async child in a sync context throws', () => {
+	const component = (renderer: Renderer) => {
+		renderer.push('a');
+		renderer.child(async ($$renderer) => {
+			await Promise.resolve();
+			$$renderer.push('x');
+		});
+	};
+
+	expect(() => Renderer.render(component as unknown as Component).head).toThrow('await_invalid');
+	expect(() => Renderer.render(component as unknown as Component).html).toThrow('await_invalid');
+	expect(() => Renderer.render(component as unknown as Component).body).toThrow('await_invalid');
+});
+
+test('local state is shallow-copied to children', () => {
+	const root = new Renderer(new SSRState('sync'));
+	root.local.select_value = 'A';
+	let child: InstanceType<typeof Renderer> | undefined;
+	root.child(($$renderer) => {
+		child = $$renderer;
+	});
+
+	expect(child!.local.select_value).toBe('A');
+	child!.local.select_value = 'B';
+	expect(root.local.select_value).toBe('A');
+});
+
+test('subsume replaces tree content and state from other', () => {
+	const a = new Renderer(new SSRState('async'));
+	a.type = 'head';
+
+	a.push('<meta />');
+	a.local.select_value = 'A';
+
+	const b = new Renderer(new SSRState('async'));
+	b.child(async ($$renderer) => {
+		await Promise.resolve();
+		$$renderer.push('body');
+	});
+	b.global.css.add({ hash: 'h', code: 'c' });
+	b.global.set_title('Title', [1]);
+	b.local.select_value = 'B';
+	b.promise = Promise.resolve();
+
+	a.subsume(b);
+
+	expect(a.type).toBe('body');
+	expect(a.local.select_value).toBe('B');
+	expect(a.promise).toBe(b.promise);
+});
+
+test('subsume refuses to switch modes', () => {
+	const a = new Renderer(new SSRState('sync'));
+	a.type = 'head';
+
+	a.push('<meta />');
+	a.local.select_value = 'A';
+
+	const b = new Renderer(new SSRState('async'));
+	b.child(async ($$renderer) => {
+		await Promise.resolve();
+		$$renderer.push('body');
+	});
+	b.global.css.add({ hash: 'h', code: 'c' });
+	b.global.set_title('Title', [1]);
+	b.local.select_value = 'B';
+	b.promise = Promise.resolve();
+
+	expect(() => a.subsume(b)).toThrow(
+		"invariant: A renderer cannot switch modes. If you're seeing this, there's a compiler bug. File an issue!"
+	);
+});
+
+test('SSRState uid generator uses prefix', () => {
+	const state = new SSRState('sync', 'id-');
+	expect(state.uid()).toBe('id-s1');
+});
+
+test('SSRState title ordering favors later lexicographic paths', () => {
+	const state = new SSRState('sync');
+
+	state.set_title('A', [1]);
+	expect(state.get_title()).toBe('A');
+
+	// equal path -> unchanged
+	state.set_title('B', [1]);
+	expect(state.get_title()).toBe('A');
+
+	// earlier -> unchanged
+	state.set_title('C', [0, 9]);
+	expect(state.get_title()).toBe('A');
+
+	// later -> update
+	state.set_title('D', [2]);
+	expect(state.get_title()).toBe('D');
+
+	// longer but same prefix -> update
+	state.set_title('E', [2, 0]);
+	expect(state.get_title()).toBe('E');
+
+	// shorter (earlier) than current with same prefix -> unchanged
+	state.set_title('F', [2]);
+	expect(state.get_title()).toBe('E');
+});
+
+test('selects an option with an explicit value', () => {
+	const component = (renderer: Renderer) => {
+		renderer.select({ value: 2 }, (renderer) => {
+			renderer.option({ value: 1 }, (renderer) => renderer.push('one'));
+			renderer.option({ value: 2 }, (renderer) => renderer.push('two'));
+			renderer.option({ value: 3 }, (renderer) => renderer.push('three'));
+		});
+	};
+
+	const { head, body } = Renderer.render(component as unknown as Component);
+	expect(head).toBe('');
+	expect(body).toBe(
+		'<!--[--><select><option value="1">one</option><option value="2" selected="">two</option><option value="3">three</option></select><!--]-->'
+	);
+});
+
+test('selects an option with an implicit value', () => {
+	const component = (renderer: Renderer) => {
+		renderer.select({ value: 'two' }, (renderer) => {
+			renderer.option({}, (renderer) => renderer.push('one'));
+			renderer.option({}, (renderer) => renderer.push('two'));
+			renderer.option({}, (renderer) => renderer.push('three'));
+		});
+	};
+
+	const { head, body } = Renderer.render(component as unknown as Component);
+	expect(head).toBe('');
+	expect(body).toBe(
+		'<!--[--><select><option>one</option><option selected="">two</option><option>three</option></select><!--]-->'
+	);
+});
+
+test('select merges scoped css hash with static class', () => {
+	const component = (renderer: Renderer) => {
+		renderer.select(
+			{ class: 'foo', value: 'foo' },
+			(renderer) => {
+				renderer.option({ value: 'foo' }, (renderer) => renderer.push('foo'));
+			},
+			'svelte-hash'
+		);
+	};
+
+	const { head, body } = Renderer.render(component as unknown as Component);
+	expect(head).toBe('');
+	expect(body).toBe(
+		'<!--[--><select class="foo svelte-hash"><option value="foo" selected="">foo</option></select><!--]-->'
+	);
+});
+
+describe('boundary hydration comment escaping', () => {
+	const failed_snippet = (renderer: Renderer, error: unknown) => {
+		renderer.push(`<p>${(error as { message: string }).message}</p>`);
+	};
+
+	const transform = (error: unknown) => ({ message: (error as Error).message });
+
+	const payloads = [
+		{
+			name: 'escapes -->',
+			input: '--><img src=x onerror=alert(1)><!--',
+			expected: '{"message":"--\\u003e\\u003cimg src=x onerror=alert(1)\\u003e\\u003c!--"}'
+		},
+		{
+			name: 'escapes <!--',
+			input: '<!--<script>alert(1)</script>',
+			expected: '{"message":"\\u003c!--\\u003cscript\\u003ealert(1)\\u003c/script\\u003e"}'
+		},
+		{ name: 'escapes <!-->', input: '<!-->', expected: '{"message":"\\u003c!--\\u003e"}' },
+		{ name: 'escapes <!--->', input: '<!--->', expected: '{"message":"\\u003c!---\\u003e"}' },
+		{
+			name: 'escapes multiple -->',
+			input: '-->one-->two-->',
+			expected: '{"message":"--\\u003eone--\\u003etwo--\\u003e"}'
+		},
+		{ name: 'escapes --->', input: '--->', expected: '{"message":"---\\u003e"}' },
+		{ name: 'no double-encoding', input: '--\\u003e', expected: '{"message":"--\\\\u003e"}' },
+		{
+			name: 'the terrifying special pointy boy',
+			input: '--!>ooh, what an exotic closing comment tag',
+			expected: '{"message":"--!\\u003eooh, what an exotic closing comment tag"}'
+		}
+	];
+
+	type RenderFn = (input: string) => Promise<string> | string;
+
+	const paths: Array<{ path: string; async: boolean; render: RenderFn }> = [
+		{
+			path: 'sync children, sync transformError',
+			async: false,
+			render: (input) => {
+				const component = (renderer: Renderer) => {
+					renderer.boundary({ failed: failed_snippet }, () => {
+						throw new Error(input);
+					});
+				};
+				return Renderer.render(
+					component as unknown as Component,
+					{ transformError: transform } as any
+				).body;
+			}
+		},
+		{
+			path: 'sync children, async transformError',
+			async: true,
+			render: async (input) => {
+				const component = (renderer: Renderer) => {
+					renderer.boundary({ failed: failed_snippet }, () => {
+						throw new Error(input);
+					});
+				};
+				return (
+					await Renderer.render(
+						component as unknown as Component,
+						{
+							transformError: (error: unknown) => Promise.resolve(transform(error))
+						} as any
+					)
+				).body;
+			}
+		},
+		{
+			path: 'async children throw',
+			async: true,
+			render: async (input) => {
+				const component = (renderer: Renderer) => {
+					renderer.boundary({ failed: failed_snippet }, async () => {
+						await Promise.resolve();
+						throw new Error(input);
+					});
+				};
+				return (
+					await Renderer.render(
+						component as unknown as Component,
+						{
+							transformError: transform
+						} as any
+					)
+				).body;
+			}
+		}
+	];
+
+	describe.each(paths)('$path', ({ async: needs_async, render }) => {
+		if (needs_async) {
+			beforeAll(() => enable_async_mode_flag());
+			afterAll(() => disable_async_mode_flag());
+		}
+
+		test.each(payloads)('$name', async ({ input, expected }) => {
+			const body = await render(input);
+
+			// Extract the content between <!--[? and the first -->
+			// If escaping is broken, an unescaped --> in the JSON will truncate
+			// the match and the content won't equal the expected escaped JSON.
+			const match = body.match(/<!--\[\?(.+?)-->/);
+			expect(match, 'expected a hydration comment in output').toBeTruthy();
+			expect(match![1]).toBe(expected);
+		});
+	});
+});
+
+describe('async', () => {
+	beforeAll(() => {
+		enable_async_mode_flag();
+	});
+
+	afterAll(() => {
+		disable_async_mode_flag();
+	});
+
+	test('awaiting renderer gets async content', async () => {
+		const component = (renderer: Renderer) => {
+			renderer.push('1');
+			renderer.child(async ($$renderer) => {
+				await Promise.resolve();
+				$$renderer.push('2');
+			});
+			renderer.push('3');
+		};
+
+		const result = await Renderer.render(component as unknown as Component);
+		expect(result.head).toBe('');
+		expect(result.body).toBe('<!--[-->123<!--]-->');
+		expect(() => result.html).toThrow('html_deprecated');
+	});
+
+	test('push accepts async functions in async context', async () => {
+		const component = (renderer: Renderer) => {
+			renderer.push('a');
+			renderer.push(async () => {
+				await Promise.resolve();
+				return 'b';
+			});
+			renderer.push('c');
+		};
+
+		const { head, body } = await Renderer.render(component as unknown as Component);
+		expect(head).toBe('');
+		expect(body).toBe('<!--[-->abc<!--]-->');
+	});
+
+	test('push handles async functions with different timing', async () => {
+		const component = (renderer: Renderer) => {
+			renderer.push(async () => {
+				await Promise.resolve();
+				return 'fast';
+			});
+			renderer.push(async () => {
+				await new Promise((resolve) => setTimeout(resolve, 10));
+				return 'slow';
+			});
+			renderer.push('sync');
+		};
+
+		const { head, body } = await Renderer.render(component as unknown as Component);
+		expect(head).toBe('');
+		expect(body).toBe('<!--[-->fastslowsync<!--]-->');
+	});
+
+	test('push async functions work with head content type', async () => {
+		const component = (renderer: Renderer) => {
+			renderer.head(($$renderer) => {
+				$$renderer.push(async () => {
+					await Promise.resolve();
+					return '<title>Async Title</title>';
+				});
+			});
+		};
+
+		const { head, body } = await Renderer.render(component as unknown as Component);
+		expect(body).toBe('<!--[--><!--]-->');
+		expect(head).toBe('<title>Async Title</title>');
+	});
+
+	test('push async functions can be mixed with child renderers', async () => {
+		const component = (renderer: Renderer) => {
+			renderer.push('start-');
+			renderer.push(async () => {
+				await Promise.resolve();
+				return 'async-';
+			});
+			renderer.child(($$renderer) => {
+				$$renderer.push('child-');
+			});
+			renderer.push('-end');
+		};
+
+		const { head, body } = await Renderer.render(component as unknown as Component);
+		expect(head).toBe('');
+		expect(body).toBe('<!--[-->start-async-child--end<!--]-->');
+	});
+
+	test('push async functions are not supported in sync context', () => {
+		const component = (renderer: Renderer) => {
+			renderer.push('a');
+			renderer.push(() => Promise.resolve('b'));
+		};
+
+		expect(() => Renderer.render(component as unknown as Component).body).toThrow('await_invalid');
+		expect(() => Renderer.render(component as unknown as Component).html).toThrow('await_invalid');
+		expect(() => Renderer.render(component as unknown as Component).head).toThrow('await_invalid');
+	});
+
+	test('on_destroy yields callbacks in the correct order', async () => {
+		const destroyed: string[] = [];
+		const component = (renderer: Renderer) => {
+			renderer.component((renderer) => {
+				renderer.on_destroy(() => destroyed.push('a'));
+				// children should not alter relative order
+				renderer.child(async (renderer) => {
+					await Promise.resolve();
+					renderer.on_destroy(() => destroyed.push('b'));
+					renderer.on_destroy(() => destroyed.push('b*'));
+				});
+				// but child components should
+				renderer.component((renderer) => {
+					renderer.on_destroy(() => destroyed.push('c'));
+				});
+				renderer.child((renderer) => {
+					renderer.on_destroy(() => destroyed.push('d'));
+				});
+				renderer.component((renderer) => {
+					renderer.on_destroy(() => destroyed.push('e'));
+				});
+			});
+		};
+
+		await Renderer.render(component as unknown as Component);
+		expect(destroyed).toEqual(['c', 'e', 'a', 'b', 'b*', 'd']);
+	});
+});
diff --git a/packages/svelte/src/internal/server/types.d.ts b/packages/svelte/src/internal/server/types.d.ts
index a43815c3f2..c16e2d827b 100644
--- a/packages/svelte/src/internal/server/types.d.ts
+++ b/packages/svelte/src/internal/server/types.d.ts
@@ -1,14 +1,18 @@
-export interface Component {
+import type { MaybePromise } from '#shared';
+import type { Element } from './dev';
+import type { Renderer } from './renderer';
+
+export interface SSRContext {
 	/** parent */
-	p: null | Component;
-	/** context */
+	p: null | SSRContext;
+	/** component context */
 	c: null | Map<unknown, unknown>;
-	/** ondestroy */
-	d: null | Array<() => void>;
-	/**
-	 * dev mode only: the component function
-	 */
+	/** renderer */
+	r: null | Renderer;
+	/** dev mode only: the current component function */
 	function?: any;
+	/** dev mode only: the current element */
+	element?: Element;
 }
 
 export interface Payload {
@@ -21,11 +25,38 @@ export interface Payload {
 	};
 }
 
-export interface RenderOutput {
+export type Csp = { nonce?: string; hash?: boolean };
+
+export interface HydratableLookupEntry {
+	value: unknown;
+	serialized: string;
+	promises?: Array<Promise<void>>;
+	/** dev-only */
+	stack?: string;
+}
+
+export interface HydratableContext {
+	lookup: Map<string, HydratableLookupEntry>;
+	comparisons: Promise<void>[];
+	unresolved_promises: Map<Promise<string>, string>;
+}
+
+export interface RenderContext {
+	hydratable: HydratableContext;
+}
+
+export type Sha256Source = `sha256-${string}`;
+
+export interface SyncRenderOutput {
 	/** HTML that goes into the `<head>` */
 	head: string;
 	/** @deprecated use `body` instead */
 	html: string;
 	/** HTML that goes somewhere into the `<body>` */
 	body: string;
+	hashes: {
+		script: Sha256Source[];
+	};
 }
+
+export type RenderOutput = SyncRenderOutput & PromiseLike<SyncRenderOutput>;
diff --git a/packages/svelte/src/internal/server/warnings.js b/packages/svelte/src/internal/server/warnings.js
new file mode 100644
index 0000000000..fc44a086af
--- /dev/null
+++ b/packages/svelte/src/internal/server/warnings.js
@@ -0,0 +1,29 @@
+/* This file is generated by scripts/process-messages/index.js. Do not edit! */
+
+import { DEV } from 'esm-env';
+
+var bold = 'font-weight: bold';
+var normal = 'font-weight: normal';
+
+/**
+ * A `hydratable` value with key `%key%` was created, but at least part of it was not used during the render.
+ * 
+ * The `hydratable` was initialized in:
+ * %stack%
+ * @param {string} key
+ * @param {string} stack
+ */
+export function unresolved_hydratable(key, stack) {
+	if (DEV) {
+		console.warn(
+			`%c[svelte] unresolved_hydratable\n%cA \`hydratable\` value with key \`${key}\` was created, but at least part of it was not used during the render.
+
+The \`hydratable\` was initialized in:
+${stack}\nhttps://svelte.dev/e/unresolved_hydratable`,
+			bold,
+			normal
+		);
+	} else {
+		console.warn(`https://svelte.dev/e/unresolved_hydratable`);
+	}
+}
\ No newline at end of file
diff --git a/packages/svelte/src/internal/shared/attributes.js b/packages/svelte/src/internal/shared/attributes.js
index 867d6ba5d3..487a40baf3 100644
--- a/packages/svelte/src/internal/shared/attributes.js
+++ b/packages/svelte/src/internal/shared/attributes.js
@@ -1,4 +1,6 @@
 import { escape_html } from '../../escaping.js';
+import { clsx as _clsx } from 'clsx';
+import { has_own_property } from './utils.js';
 
 /**
  * `<div translate={false}>` should be rendered as `<div translate="no">` and _not_
@@ -21,8 +23,203 @@ const replacements = {
  * @returns {string}
  */
 export function attr(name, value, is_boolean = false) {
-	if (value == null || (!value && is_boolean) || (value === '' && name === 'class')) return '';
-	const normalized = (name in replacements && replacements[name].get(value)) || value;
-	const assignment = is_boolean ? '' : `="${escape_html(normalized, true)}"`;
+	// attribute hidden for values other than "until-found" behaves like a boolean attribute
+	if (name === 'hidden' && value !== 'until-found') {
+		is_boolean = true;
+	}
+	if (value == null || (!value && is_boolean)) return '';
+	const normalized =
+		(has_own_property.call(replacements, name) && replacements[name].get(value)) || value;
+	const assignment = is_boolean ? `=""` : `="${escape_html(normalized, true)}"`;
 	return ` ${name}${assignment}`;
 }
+
+/**
+ * Small wrapper around clsx to preserve Svelte's (weird) handling of falsy values.
+ * TODO Svelte 6 revisit this, and likely turn all falsy values into the empty string (what clsx also does)
+ * @param  {any} value
+ */
+export function clsx(value) {
+	if (typeof value === 'object') {
+		return _clsx(value);
+	} else {
+		return value ?? '';
+	}
+}
+
+const whitespace = [...' \t\n\r\f\u00a0\u000b\ufeff'];
+
+/**
+ * @param {any} value
+ * @param {string | null} [hash]
+ * @param {Record<string, boolean>} [directives]
+ * @returns {string | null}
+ */
+export function to_class(value, hash, directives) {
+	var classname = value == null ? '' : '' + value;
+
+	if (hash) {
+		classname = classname ? classname + ' ' + hash : hash;
+	}
+
+	if (directives) {
+		for (var key of Object.keys(directives)) {
+			if (directives[key]) {
+				classname = classname ? classname + ' ' + key : key;
+			} else if (classname.length) {
+				var len = key.length;
+				var a = 0;
+
+				while ((a = classname.indexOf(key, a)) >= 0) {
+					var b = a + len;
+
+					if (
+						(a === 0 || whitespace.includes(classname[a - 1])) &&
+						(b === classname.length || whitespace.includes(classname[b]))
+					) {
+						classname = (a === 0 ? '' : classname.substring(0, a)) + classname.substring(b + 1);
+					} else {
+						a = b;
+					}
+				}
+			}
+		}
+	}
+
+	return classname === '' ? null : classname;
+}
+
+/**
+ *
+ * @param {Record<string,any>} styles
+ * @param {boolean} important
+ */
+function append_styles(styles, important = false) {
+	var separator = important ? ' !important;' : ';';
+	var css = '';
+
+	for (var key of Object.keys(styles)) {
+		var value = styles[key];
+		if (value != null && value !== '') {
+			css += ' ' + key + ': ' + value + separator;
+		}
+	}
+
+	return css;
+}
+
+/**
+ * @param {string} name
+ * @returns {string}
+ */
+function to_css_name(name) {
+	if (name[0] !== '-' || name[1] !== '-') {
+		return name.toLowerCase();
+	}
+	return name;
+}
+
+/**
+ * @param {any} value
+ * @param {Record<string, any> | [Record<string, any>, Record<string, any>]} [styles]
+ * @returns {string | null}
+ */
+export function to_style(value, styles) {
+	if (styles) {
+		var new_style = '';
+
+		/** @type {Record<string,any> | undefined} */
+		var normal_styles;
+
+		/** @type {Record<string,any> | undefined} */
+		var important_styles;
+
+		if (Array.isArray(styles)) {
+			normal_styles = styles[0];
+			important_styles = styles[1];
+		} else {
+			normal_styles = styles;
+		}
+
+		if (value) {
+			value = String(value)
+				.replaceAll(/\s*\/\*.*?\*\/\s*/g, '')
+				.trim();
+
+			/** @type {boolean | '"' | "'"} */
+			var in_str = false;
+			var in_apo = 0;
+			var in_comment = false;
+
+			var reserved_names = [];
+
+			if (normal_styles) {
+				reserved_names.push(...Object.keys(normal_styles).map(to_css_name));
+			}
+			if (important_styles) {
+				reserved_names.push(...Object.keys(important_styles).map(to_css_name));
+			}
+
+			var start_index = 0;
+			var name_index = -1;
+
+			const len = value.length;
+			for (var i = 0; i < len; i++) {
+				var c = value[i];
+
+				if (in_comment) {
+					if (c === '/' && value[i - 1] === '*') {
+						in_comment = false;
+					}
+				} else if (in_str) {
+					if (in_str === c) {
+						in_str = false;
+					}
+				} else if (c === '/' && value[i + 1] === '*') {
+					in_comment = true;
+				} else if (c === '"' || c === "'") {
+					in_str = c;
+				} else if (c === '(') {
+					in_apo++;
+				} else if (c === ')') {
+					in_apo--;
+				}
+
+				if (!in_comment && in_str === false && in_apo === 0) {
+					if (c === ':' && name_index === -1) {
+						name_index = i;
+					} else if (c === ';' || i === len - 1) {
+						if (name_index !== -1) {
+							var name = to_css_name(value.substring(start_index, name_index).trim());
+
+							if (!reserved_names.includes(name)) {
+								if (c !== ';') {
+									i++;
+								}
+
+								var property = value.substring(start_index, i).trim();
+								new_style += ' ' + property + ';';
+							}
+						}
+
+						start_index = i + 1;
+						name_index = -1;
+					}
+				}
+			}
+		}
+
+		if (normal_styles) {
+			new_style += append_styles(normal_styles);
+		}
+
+		if (important_styles) {
+			new_style += append_styles(important_styles, true);
+		}
+
+		new_style = new_style.trim();
+		return new_style === '' ? null : new_style;
+	}
+
+	return value == null ? null : String(value);
+}
diff --git a/packages/svelte/src/internal/shared/clone.js b/packages/svelte/src/internal/shared/clone.js
index 4632fc3d68..1a83adf8c5 100644
--- a/packages/svelte/src/internal/shared/clone.js
+++ b/packages/svelte/src/internal/shared/clone.js
@@ -15,14 +15,15 @@ const empty = [];
  * @template T
  * @param {T} value
  * @param {boolean} [skip_warning]
+ * @param {boolean} [no_tojson]
  * @returns {Snapshot<T>}
  */
-export function snapshot(value, skip_warning = false) {
+export function snapshot(value, skip_warning = false, no_tojson = false) {
 	if (DEV && !skip_warning) {
 		/** @type {string[]} */
 		const paths = [];
 
-		const copy = clone(value, new Map(), '', paths);
+		const copy = clone(value, new Map(), '', paths, null, no_tojson);
 		if (paths.length === 1 && paths[0] === '') {
 			// value could not be cloned
 			w.state_snapshot_uncloneable();
@@ -40,7 +41,7 @@ export function snapshot(value, skip_warning = false) {
 		return copy;
 	}
 
-	return clone(value, new Map(), '', empty);
+	return clone(value, new Map(), '', empty, null, no_tojson);
 }
 
 /**
@@ -49,10 +50,11 @@ export function snapshot(value, skip_warning = false) {
  * @param {Map<T, Snapshot<T>>} cloned
  * @param {string} path
  * @param {string[]} paths
- * @param {null | T} original The original value, if `value` was produced from a `toJSON` call
+ * @param {null | T} [original] The original value, if `value` was produced from a `toJSON` call
+ * @param {boolean} [no_tojson]
  * @returns {Snapshot<T>}
  */
-function clone(value, cloned, path, paths, original = null) {
+function clone(value, cloned, path, paths, original = null, no_tojson = false) {
 	if (typeof value === 'object' && value !== null) {
 		var unwrapped = cloned.get(value);
 		if (unwrapped !== undefined) return unwrapped;
@@ -71,7 +73,7 @@ function clone(value, cloned, path, paths, original = null) {
 			for (var i = 0; i < value.length; i += 1) {
 				var element = value[i];
 				if (i in value) {
-					copy[i] = clone(element, cloned, DEV ? `${path}[${i}]` : path, paths);
+					copy[i] = clone(element, cloned, DEV ? `${path}[${i}]` : path, paths, null, no_tojson);
 				}
 			}
 
@@ -87,9 +89,16 @@ function clone(value, cloned, path, paths, original = null) {
 				cloned.set(original, copy);
 			}
 
-			for (var key in value) {
-				// @ts-expect-error
-				copy[key] = clone(value[key], cloned, DEV ? `${path}.${key}` : path, paths);
+			for (var key of Object.keys(value)) {
+				copy[key] = clone(
+					// @ts-expect-error
+					value[key],
+					cloned,
+					DEV ? `${path}.${key}` : path,
+					paths,
+					null,
+					no_tojson
+				);
 			}
 
 			return copy;
@@ -99,7 +108,7 @@ function clone(value, cloned, path, paths, original = null) {
 			return /** @type {Snapshot<T>} */ (structuredClone(value));
 		}
 
-		if (typeof (/** @type {T & { toJSON?: any } } */ (value).toJSON) === 'function') {
+		if (typeof (/** @type {T & { toJSON?: any } } */ (value).toJSON) === 'function' && !no_tojson) {
 			return clone(
 				/** @type {T & { toJSON(): any } } */ (value).toJSON(),
 				cloned,
diff --git a/packages/svelte/src/internal/shared/dev.js b/packages/svelte/src/internal/shared/dev.js
new file mode 100644
index 0000000000..9c36664dc4
--- /dev/null
+++ b/packages/svelte/src/internal/shared/dev.js
@@ -0,0 +1,79 @@
+import { DEV } from 'esm-env';
+import { define_property } from './utils.js';
+import * as e from './errors.js';
+
+/**
+ * @param {string} label
+ * @returns {Error & { stack: string } | null}
+ */
+export function get_error(label) {
+	const error = new Error();
+	const stack = get_stack();
+
+	if (stack.length === 0) {
+		return null;
+	}
+
+	stack.unshift('\n');
+
+	define_property(error, 'stack', {
+		value: stack.join('\n')
+	});
+
+	define_property(error, 'name', {
+		value: label
+	});
+
+	return /** @type {Error & { stack: string }} */ (error);
+}
+
+/**
+ * @returns {string[]}
+ */
+export function get_stack() {
+	// @ts-ignore - doesn't exist everywhere
+	const limit = Error.stackTraceLimit;
+	// @ts-ignore - doesn't exist everywhere
+	Error.stackTraceLimit = Infinity;
+	const stack = new Error().stack;
+	// @ts-ignore - doesn't exist everywhere
+	Error.stackTraceLimit = limit;
+
+	if (!stack) return [];
+
+	const lines = stack.split('\n');
+	const new_lines = [];
+
+	for (let i = 0; i < lines.length; i++) {
+		const line = lines[i];
+		const posixified = line.replaceAll('\\', '/');
+
+		if (line.trim() === 'Error') {
+			continue;
+		}
+
+		if (line.includes('validate_each_keys')) {
+			return [];
+		}
+
+		if (posixified.includes('svelte/src/internal') || posixified.includes('node_modules/.vite')) {
+			continue;
+		}
+
+		new_lines.push(line);
+	}
+
+	return new_lines;
+}
+
+/**
+ * @param {boolean} condition
+ * @param {string} message
+ */
+export function invariant(condition, message) {
+	if (!DEV) {
+		throw new Error('invariant(...) was not guarded by if (DEV)');
+	}
+
+	if (!condition) e.invariant_violation(message);
+}
diff --git a/packages/svelte/src/internal/shared/errors.js b/packages/svelte/src/internal/shared/errors.js
index 26d6822cdb..a4ad8cecff 100644
--- a/packages/svelte/src/internal/shared/errors.js
+++ b/packages/svelte/src/internal/shared/errors.js
@@ -2,6 +2,23 @@
 
 import { DEV } from 'esm-env';
 
+/**
+ * Cannot use `%name%(...)` unless the `experimental.async` compiler option is `true`
+ * @param {string} name
+ * @returns {never}
+ */
+export function experimental_async_required(name) {
+	if (DEV) {
+		const error = new Error(`experimental_async_required\nCannot use \`${name}(...)\` unless the \`experimental.async\` compiler option is \`true\`\nhttps://svelte.dev/e/experimental_async_required`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/experimental_async_required`);
+	}
+}
+
 /**
  * Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead
  * @returns {never}
@@ -11,12 +28,46 @@ export function invalid_default_snippet() {
 		const error = new Error(`invalid_default_snippet\nCannot use \`{@render children(...)}\` if the parent component uses \`let:\` directives. Consider using a named snippet instead\nhttps://svelte.dev/e/invalid_default_snippet`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/invalid_default_snippet`);
 	}
 }
 
+/**
+ * A snippet function was passed invalid arguments. Snippets should only be instantiated via `{@render ...}`
+ * @returns {never}
+ */
+export function invalid_snippet_arguments() {
+	if (DEV) {
+		const error = new Error(`invalid_snippet_arguments\nA snippet function was passed invalid arguments. Snippets should only be instantiated via \`{@render ...}\`\nhttps://svelte.dev/e/invalid_snippet_arguments`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/invalid_snippet_arguments`);
+	}
+}
+
+/**
+ * An invariant violation occurred, meaning Svelte's internal assumptions were flawed. This is a bug in Svelte, not your app — please open an issue at https://github.com/sveltejs/svelte, citing the following message: "%message%"
+ * @param {string} message
+ * @returns {never}
+ */
+export function invariant_violation(message) {
+	if (DEV) {
+		const error = new Error(`invariant_violation\nAn invariant violation occurred, meaning Svelte's internal assumptions were flawed. This is a bug in Svelte, not your app — please open an issue at https://github.com/sveltejs/svelte, citing the following message: "${message}"\nhttps://svelte.dev/e/invariant_violation`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/invariant_violation`);
+	}
+}
+
 /**
  * `%name%(...)` can only be used during component initialisation
  * @param {string} name
@@ -27,12 +78,45 @@ export function lifecycle_outside_component(name) {
 		const error = new Error(`lifecycle_outside_component\n\`${name}(...)\` can only be used during component initialisation\nhttps://svelte.dev/e/lifecycle_outside_component`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/lifecycle_outside_component`);
 	}
 }
 
+/**
+ * Context was not set in a parent component
+ * @returns {never}
+ */
+export function missing_context() {
+	if (DEV) {
+		const error = new Error(`missing_context\nContext was not set in a parent component\nhttps://svelte.dev/e/missing_context`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/missing_context`);
+	}
+}
+
+/**
+ * Attempted to render a snippet without a `{@render}` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change `{snippet}` to `{@render snippet()}`.
+ * @returns {never}
+ */
+export function snippet_without_render_tag() {
+	if (DEV) {
+		const error = new Error(`snippet_without_render_tag\nAttempted to render a snippet without a \`{@render}\` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change \`{snippet}\` to \`{@render snippet()}\`.\nhttps://svelte.dev/e/snippet_without_render_tag`);
+
+		error.name = 'Svelte error';
+
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/snippet_without_render_tag`);
+	}
+}
+
 /**
  * `%name%` is not a store with a `subscribe` method
  * @param {string} name
@@ -43,6 +127,7 @@ export function store_invalid_shape(name) {
 		const error = new Error(`store_invalid_shape\n\`${name}\` is not a store with a \`subscribe\` method\nhttps://svelte.dev/e/store_invalid_shape`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/store_invalid_shape`);
@@ -58,6 +143,7 @@ export function svelte_element_invalid_this_value() {
 		const error = new Error(`svelte_element_invalid_this_value\nThe \`this\` prop on \`<svelte:element>\` must be a string, if defined\nhttps://svelte.dev/e/svelte_element_invalid_this_value`);
 
 		error.name = 'Svelte error';
+
 		throw error;
 	} else {
 		throw new Error(`https://svelte.dev/e/svelte_element_invalid_this_value`);
diff --git a/packages/svelte/src/internal/shared/svelte-portal.js b/packages/svelte/src/internal/shared/svelte-portal.js
index 1117ff733d..5809938c63 100644
--- a/packages/svelte/src/internal/shared/svelte-portal.js
+++ b/packages/svelte/src/internal/shared/svelte-portal.js
@@ -1,14 +1,14 @@
 export class PortalKey {
-	/** @param {string} [name] */
+	/** @param {string} name */
 	constructor(name) {
-		this.v = Symbol(name);
+		this.v = name;
 	}
 }
 
 /**
  * Creates a key for use with a `<svelte:portal>`. It connects the portal source and target.
  * Example: TODO write out once exact API clear.
- * @param {string} [name]
+ * @param {string} name
  */
 export function createPortalKey(name) {
 	return new PortalKey(name);
diff --git a/packages/svelte/src/internal/shared/types.d.ts b/packages/svelte/src/internal/shared/types.d.ts
index a97a61af67..3374d7bc16 100644
--- a/packages/svelte/src/internal/shared/types.d.ts
+++ b/packages/svelte/src/internal/shared/types.d.ts
@@ -3,12 +3,10 @@ export type Store<V> = {
 	set(value: V): void;
 };
 
-export type SourceLocation =
-	| [line: number, column: number]
-	| [line: number, column: number, SourceLocation[]];
-
 export type Getters<T> = {
 	[K in keyof T]: () => T[K];
 };
 
 export type Snapshot<T> = ReturnType<typeof $state.snapshot<T>>;
+
+export type MaybePromise<T> = T | Promise<T>;
diff --git a/packages/svelte/src/internal/shared/utils.js b/packages/svelte/src/internal/shared/utils.js
index 92d29d9e1d..393b51383e 100644
--- a/packages/svelte/src/internal/shared/utils.js
+++ b/packages/svelte/src/internal/shared/utils.js
@@ -1,6 +1,8 @@
 // Store the references to globals in case someone tries to monkey patch these, causing the below
 // to de-opt (this occurs often when using popular extensions).
 export var is_array = Array.isArray;
+export var index_of = Array.prototype.indexOf;
+export var includes = Array.prototype.includes;
 export var array_from = Array.from;
 export var object_keys = Object.keys;
 export var define_property = Object.defineProperty;
@@ -9,6 +11,8 @@ export var get_descriptors = Object.getOwnPropertyDescriptors;
 export var object_prototype = Object.prototype;
 export var array_prototype = Array.prototype;
 export var get_prototype_of = Object.getPrototypeOf;
+export var is_extensible = Object.isExtensible;
+export var has_own_property = Object.prototype.hasOwnProperty;
 
 /**
  * @param {any} thing
@@ -46,7 +50,7 @@ export function run_all(arr) {
 
 /**
  * TODO replace with Promise.withResolvers once supported widely enough
- * @template T
+ * @template [T=void]
  */
 export function deferred() {
 	/** @type {(value: T) => void} */
@@ -79,3 +83,62 @@ export function fallback(value, fallback, lazy = false) {
 			: /** @type {V} */ (fallback)
 		: value;
 }
+
+/**
+ * When encountering a situation like `let [a, b, c] = $derived(blah())`,
+ * we need to stash an intermediate value that `a`, `b`, and `c` derive
+ * from, in case it's an iterable
+ * @template T
+ * @param {ArrayLike<T> | Iterable<T>} value
+ * @param {number} [n]
+ * @returns {Array<T>}
+ */
+export function to_array(value, n) {
+	// return arrays unchanged
+	if (Array.isArray(value)) {
+		return value;
+	}
+
+	// if value is not iterable, or `n` is unspecified (indicates a rest
+	// element, which means we're not concerned about unbounded iterables)
+	// convert to an array with `Array.from`
+	if (n === undefined || !(Symbol.iterator in value)) {
+		return Array.from(value);
+	}
+
+	// otherwise, populate an array with `n` values
+
+	/** @type {T[]} */
+	const array = [];
+
+	for (const element of value) {
+		array.push(element);
+		if (array.length === n) break;
+	}
+
+	return array;
+}
+
+/**
+ * @param {Record<string | symbol, unknown>} obj
+ * @param {Array<string | symbol>} keys
+ * @returns {Record<string | symbol, unknown>}
+ */
+export function exclude_from_object(obj, keys) {
+	/** @type {Record<string | symbol, unknown>} */
+	var result = {};
+
+	for (var key in obj) {
+		if (!keys.includes(key)) {
+			result[key] = obj[key];
+		}
+	}
+
+	for (var symbol of Object.getOwnPropertySymbols(obj)) {
+		if (Object.propertyIsEnumerable.call(obj, symbol) && !keys.includes(symbol)) {
+			result[symbol] = obj[symbol];
+		}
+	}
+
+	return result;
+}
diff --git a/packages/svelte/src/internal/shared/validate.js b/packages/svelte/src/internal/shared/validate.js
index 852c0e83bf..48e76f0958 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';
@@ -35,3 +33,15 @@ export function validate_store(store, name) {
 		e.store_invalid_shape(name);
 	}
 }
+
+/**
+ * @template {(...args: any[]) => unknown} T
+ * @param {T} fn
+ */
+export function prevent_snippet_stringification(fn) {
+	fn.toString = () => {
+		e.snippet_without_render_tag();
+		return '';
+	};
+	return fn;
+}
diff --git a/packages/svelte/src/internal/shared/warnings.js b/packages/svelte/src/internal/shared/warnings.js
index 83c58c9b14..0acca44184 100644
--- a/packages/svelte/src/internal/shared/warnings.js
+++ b/packages/svelte/src/internal/shared/warnings.js
@@ -25,11 +25,15 @@ export function dynamic_void_element_content(tag) {
  */
 export function state_snapshot_uncloneable(properties) {
 	if (DEV) {
-		console.warn(`%c[svelte] state_snapshot_uncloneable\n%c${properties
-			? `The following properties cannot be cloned with \`$state.snapshot\` — the return value contains the originals:
+		console.warn(
+			`%c[svelte] state_snapshot_uncloneable\n%c${properties
+				? `The following properties cannot be cloned with \`$state.snapshot\` — the return value contains the originals:
 
 ${properties}`
-			: "Value cannot be cloned with `$state.snapshot` — the original value was returned"}\nhttps://svelte.dev/e/state_snapshot_uncloneable`, bold, normal);
+				: 'Value cannot be cloned with `$state.snapshot` — the original value was returned'}\nhttps://svelte.dev/e/state_snapshot_uncloneable`,
+			bold,
+			normal
+		);
 	} else {
 		console.warn(`https://svelte.dev/e/state_snapshot_uncloneable`);
 	}
diff --git a/packages/svelte/src/legacy/legacy-client.js b/packages/svelte/src/legacy/legacy-client.js
index 3715617f4c..801c126b2c 100644
--- a/packages/svelte/src/legacy/legacy-client.js
+++ b/packages/svelte/src/legacy/legacy-client.js
@@ -3,19 +3,16 @@ 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,
-	component_context,
-	dev_current_component_function,
-	flush_sync,
-	get,
-	set_signal_status
-} from '../internal/client/runtime.js';
-import { lifecycle_outside_component } from '../internal/shared/errors.js';
+import { active_effect, get } 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';
+import { set_signal_status } from '../internal/client/reactivity/status.js';
 
 /**
  * Takes the same options as a Svelte 4 component and the component function and returns a Svelte 4 compatible component.
@@ -88,7 +85,7 @@ class Svelte4Component {
 		 * @param {unknown} value
 		 */
 		var add_source = (key, value) => {
-			var s = mutable_source(value);
+			var s = mutable_source(value, false, false);
 			sources.set(key, s);
 			return s;
 		};
@@ -122,12 +119,14 @@ class Svelte4Component {
 			props,
 			context: options.context,
 			intro: options.intro ?? false,
-			recover: options.recover
+			recover: options.recover,
+			transformError: options.transformError
 		});
 
-		// We don't flush_sync for custom element wrappers or if the user doesn't want it
-		if (!options?.props?.$$host || options.sync === false) {
-			flush_sync();
+		// 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();
 		}
 
 		this.#events = props.$$events;
@@ -251,7 +250,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/legacy/legacy-server.js b/packages/svelte/src/legacy/legacy-server.js
index 60bd8c9fc6..2c43aab6ac 100644
--- a/packages/svelte/src/legacy/legacy-server.js
+++ b/packages/svelte/src/legacy/legacy-server.js
@@ -1,11 +1,15 @@
 /** @import { SvelteComponent } from '../index.js' */
+/** @import { Csp } from '#server' */
 import { asClassComponent as as_class_component, createClassComponent } from './legacy-client.js';
 import { render } from '../internal/server/index.js';
+import { async_mode_flag } from '../internal/flags/index.js';
 
 // By having this as a separate entry point for server environments, we save the client bundle from having to include the server runtime
 
 export { createClassComponent };
 
+/** @typedef {{ head: string, html: string, css: { code: string, map: null }; hashes?: { script: `sha256-${string}`[] } }} LegacyRenderResult */
+
 /**
  * Takes a Svelte 5 component and returns a Svelte 4 compatible component constructor.
  *
@@ -21,16 +25,58 @@ export { createClassComponent };
  */
 export function asClassComponent(component) {
 	const component_constructor = as_class_component(component);
-	/** @type {(props?: {}, opts?: { $$slots?: {}; context?: Map<any, any>; }) => { html: any; css: { code: string; map: any; }; head: string; } } */
-	const _render = (props, { context } = {}) => {
+	/** @type {(props?: {}, opts?: { $$slots?: {}; context?: Map<any, any>; csp?: Csp; transformError?: (error: unknown) => unknown }) => LegacyRenderResult & PromiseLike<LegacyRenderResult> } */
+	const _render = (props, { context, csp, transformError } = {}) => {
 		// @ts-expect-error the typings are off, but this will work if the component is compiled in SSR mode
-		const result = render(component, { props, context });
-		return {
-			css: { code: '', map: null },
-			head: result.head,
-			html: result.body
-		};
+		const result = render(component, { props, context, csp, transformError });
+
+		const munged = Object.defineProperties(
+			/** @type {LegacyRenderResult & PromiseLike<LegacyRenderResult>} */ ({}),
+			{
+				css: {
+					value: { code: '', map: null }
+				},
+				head: {
+					get: () => result.head
+				},
+				html: {
+					get: () => result.body
+				},
+				then: {
+					/**
+					 * this is not type-safe, but honestly it's the best I can do right now, and it's a straightforward function.
+					 *
+					 * @template TResult1
+					 * @template [TResult2=never]
+					 * @param { (value: LegacyRenderResult) => TResult1 } onfulfilled
+					 * @param { (reason: unknown) => TResult2 } onrejected
+					 */
+					value: (onfulfilled, onrejected) => {
+						if (!async_mode_flag) {
+							const user_result = onfulfilled({
+								css: munged.css,
+								head: munged.head,
+								html: munged.html
+							});
+							return Promise.resolve(user_result);
+						}
+
+						return result.then((result) => {
+							return onfulfilled({
+								css: munged.css,
+								head: result.head,
+								html: result.body,
+								hashes: result.hashes
+							});
+						}, onrejected);
+					}
+				}
+			}
+		);
+
+		return munged;
 	};
+
 	// @ts-expect-error this is present for SSR
 	component_constructor.render = _render;
 
diff --git a/packages/svelte/src/motion/private.d.ts b/packages/svelte/src/motion/private.d.ts
index 22b8cc4af3..a6e0f95284 100644
--- a/packages/svelte/src/motion/private.d.ts
+++ b/packages/svelte/src/motion/private.d.ts
@@ -8,37 +8,3 @@ export interface TickContext {
 	};
 	settled: boolean;
 }
-
-export interface SpringOpts {
-	stiffness?: number;
-	damping?: number;
-	precision?: number;
-}
-
-export interface SpringUpdateOpts {
-	/**
-	 * @deprecated Only use this for the spring store; does nothing when set on the Spring class
-	 */
-	hard?: any;
-	/**
-	 * @deprecated Only use this for the spring store; does nothing when set on the Spring class
-	 */
-	soft?: string | number | boolean;
-	/**
-	 * Only use this for the Spring class; does nothing when set on the spring store
-	 */
-	instant?: boolean;
-	/**
-	 * Only use this for the Spring class; does nothing when set on the spring store
-	 */
-	preserveMomentum?: number;
-}
-
-export type Updater<T> = (target_value: T, value: T) => T;
-
-export interface TweenedOptions<T> {
-	delay?: number;
-	duration?: number | ((from: T, to: T) => number);
-	easing?: (t: number) => number;
-	interpolate?: (a: T, b: T) => (t: number) => T;
-}
diff --git a/packages/svelte/src/motion/public.d.ts b/packages/svelte/src/motion/public.d.ts
index 4e74d4b76f..89145d0383 100644
--- a/packages/svelte/src/motion/public.d.ts
+++ b/packages/svelte/src/motion/public.d.ts
@@ -1,16 +1,49 @@
 import { Readable, type Unsubscriber } from '../store/public.js';
-import { SpringUpdateOpts, TweenedOptions, Updater, SpringOpts } from './private.js';
+
+export interface SpringOptions {
+	stiffness?: number;
+	damping?: number;
+	precision?: number;
+}
+
+export interface SpringUpdateOptions {
+	/**
+	 * @deprecated Only use this for the spring store; does nothing when set on the Spring class
+	 */
+	hard?: any;
+	/**
+	 * @deprecated Only use this for the spring store; does nothing when set on the Spring class
+	 */
+	soft?: string | number | boolean;
+	/**
+	 * Only use this for the Spring class; does nothing when set on the spring store
+	 */
+	instant?: boolean;
+	/**
+	 * Only use this for the Spring class; does nothing when set on the spring store
+	 */
+	preserveMomentum?: number;
+}
+
+export type Updater<T> = (target_value: T, value: T) => T;
+
+export interface TweenOptions<T> {
+	delay?: number;
+	duration?: number | ((from: T, to: T) => number);
+	easing?: (t: number) => number;
+	interpolate?: (a: T, b: T) => (t: number) => T;
+}
 
 // TODO we do declaration merging here in order to not have a breaking change (renaming the Spring interface)
 // this means both the Spring class and the Spring interface are merged into one with some things only
 // existing on one side. In Svelte 6, remove the type definition and move the jsdoc onto the class in spring.js
 
 export interface Spring<T> extends Readable<T> {
-	set(new_value: T, opts?: SpringUpdateOpts): Promise<void>;
+	set(new_value: T, opts?: SpringUpdateOptions): Promise<void>;
 	/**
 	 * @deprecated Only exists on the legacy `spring` store, not the `Spring` class
 	 */
-	update: (fn: Updater<T>, opts?: SpringUpdateOpts) => Promise<void>;
+	update: (fn: Updater<T>, opts?: SpringUpdateOptions) => Promise<void>;
 	/**
 	 * @deprecated Only exists on the legacy `spring` store, not the `Spring` class
 	 */
@@ -37,7 +70,7 @@ export interface Spring<T> extends Readable<T> {
  * @since 5.8.0
  */
 export class Spring<T> {
-	constructor(value: T, options?: SpringOpts);
+	constructor(value: T, options?: SpringOptions);
 
 	/**
 	 * Create a spring whose value is bound to the return value of `fn`. This must be called
@@ -53,7 +86,7 @@ export class Spring<T> {
 	 * </script>
 	 * ```
 	 */
-	static of<U>(fn: () => U, options?: SpringOpts): Spring<U>;
+	static of<U>(fn: () => U, options?: SpringOptions): Spring<U>;
 
 	/**
 	 * Sets `spring.target` to `value` and returns a `Promise` that resolves if and when `spring.current` catches up to it.
@@ -63,7 +96,7 @@ export class Spring<T> {
 	 * If `options.preserveMomentum` is provided, the spring will continue on its current trajectory for
 	 * the specified number of milliseconds. This is useful for things like 'fling' gestures.
 	 */
-	set(value: T, options?: SpringUpdateOpts): Promise<void>;
+	set(value: T, options?: SpringUpdateOptions): Promise<void>;
 
 	damping: number;
 	precision: number;
@@ -81,8 +114,8 @@ export class Spring<T> {
 }
 
 export interface Tweened<T> extends Readable<T> {
-	set(value: T, opts?: TweenedOptions<T>): Promise<void>;
-	update(updater: Updater<T>, opts?: TweenedOptions<T>): Promise<void>;
+	set(value: T, opts?: TweenOptions<T>): Promise<void>;
+	update(updater: Updater<T>, opts?: TweenOptions<T>): Promise<void>;
 }
 
 export { prefersReducedMotion, spring, tweened, Tween } from './index.js';
diff --git a/packages/svelte/src/motion/spring.js b/packages/svelte/src/motion/spring.js
index bc30ce9578..7198d60127 100644
--- a/packages/svelte/src/motion/spring.js
+++ b/packages/svelte/src/motion/spring.js
@@ -1,14 +1,16 @@
 /** @import { Task } from '#client' */
-/** @import { SpringOpts, SpringUpdateOpts, TickContext } from './private.js' */
-/** @import { Spring as SpringStore } from './public.js' */
+/** @import { TickContext } from './private.js' */
+/** @import { Spring as SpringStore, SpringOptions, SpringUpdateOptions } from './public.js' */
 import { writable } from '../store/shared/index.js';
 import { loop } from '../internal/client/loop.js';
 import { raf } from '../internal/client/timing.js';
 import { is_date } from './utils.js';
-import { set, source } from '../internal/client/reactivity/sources.js';
+import { set, state } from '../internal/client/reactivity/sources.js';
 import { render_effect } from '../internal/client/reactivity/effects.js';
+import { tag } from '../internal/client/dev/tracing.js';
 import { get } from '../internal/client/runtime.js';
 import { deferred, noop } from '../internal/shared/utils.js';
+import { DEV } from 'esm-env';
 
 /**
  * @template T
@@ -60,7 +62,7 @@ function tick_spring(ctx, last_value, current_value, target_value) {
  * @deprecated Use [`Spring`](https://svelte.dev/docs/svelte/svelte-motion#Spring) instead
  * @template [T=any]
  * @param {T} [value]
- * @param {SpringOpts} [opts]
+ * @param {SpringOptions} [opts]
  * @returns {SpringStore<T>}
  */
 export function spring(value, opts = {}) {
@@ -81,7 +83,7 @@ export function spring(value, opts = {}) {
 	let cancel_task = false;
 	/**
 	 * @param {T} new_value
-	 * @param {SpringUpdateOpts} opts
+	 * @param {SpringUpdateOptions} opts
 	 * @returns {Promise<void>}
 	 */
 	function set(new_value, opts = {}) {
@@ -108,12 +110,17 @@ export function spring(value, opts = {}) {
 					return false;
 				}
 				inv_mass = Math.min(inv_mass + inv_mass_recovery_rate, 1);
+
+				// clamp elapsed time to 1/30th of a second, so that longer pauses
+				// (blocked thread or inactive tab) don't cause the spring to go haywire
+				const elapsed = Math.min(now - last_time, 1000 / 30);
+
 				/** @type {TickContext} */
 				const ctx = {
 					inv_mass,
 					opts: spring,
 					settled: true,
-					dt: ((now - last_time) * 60) / 1000
+					dt: (elapsed * 60) / 1000
 				};
 				// @ts-ignore
 				const next_value = tick_spring(ctx, last_value, value, target_value);
@@ -163,12 +170,12 @@ export function spring(value, opts = {}) {
  * @since 5.8.0
  */
 export class Spring {
-	#stiffness = source(0.15);
-	#damping = source(0.8);
-	#precision = source(0.01);
+	#stiffness = state(0.15);
+	#damping = state(0.8);
+	#precision = state(0.01);
 
-	#current = source(/** @type {T} */ (undefined));
-	#target = source(/** @type {T} */ (undefined));
+	#current;
+	#target;
 
 	#last_value = /** @type {T} */ (undefined);
 	#last_time = 0;
@@ -184,14 +191,23 @@ export class Spring {
 
 	/**
 	 * @param {T} value
-	 * @param {SpringOpts} [options]
+	 * @param {SpringOptions} [options]
 	 */
 	constructor(value, options = {}) {
-		this.#current.v = this.#target.v = value;
+		this.#current = DEV ? tag(state(value), 'Spring.current') : state(value);
+		this.#target = DEV ? tag(state(value), 'Spring.target') : state(value);
 
 		if (typeof options.stiffness === 'number') this.#stiffness.v = clamp(options.stiffness, 0, 1);
 		if (typeof options.damping === 'number') this.#damping.v = clamp(options.damping, 0, 1);
 		if (typeof options.precision === 'number') this.#precision.v = options.precision;
+
+		if (DEV) {
+			tag(this.#stiffness, 'Spring.stiffness');
+			tag(this.#damping, 'Spring.damping');
+			tag(this.#precision, 'Spring.precision');
+			tag(this.#current, 'Spring.current');
+			tag(this.#target, 'Spring.target');
+		}
 	}
 
 	/**
@@ -209,7 +225,7 @@ export class Spring {
 	 * ```
 	 * @template U
 	 * @param {() => U} fn
-	 * @param {SpringOpts} [options]
+	 * @param {SpringOptions} [options]
 	 */
 	static of(fn, options) {
 		const spring = new Spring(fn(), options);
@@ -236,6 +252,10 @@ export class Spring {
 			this.#task ??= loop((now) => {
 				this.#inverse_mass = Math.min(this.#inverse_mass + inv_mass_recovery_rate, 1);
 
+				// clamp elapsed time to 1/30th of a second, so that longer pauses
+				// (blocked thread or inactive tab) don't cause the spring to go haywire
+				const elapsed = Math.min(now - this.#last_time, 1000 / 30);
+
 				/** @type {import('./private').TickContext} */
 				const ctx = {
 					inv_mass: this.#inverse_mass,
@@ -245,7 +265,7 @@ export class Spring {
 						precision: this.#precision.v
 					},
 					settled: true,
-					dt: ((now - this.#last_time) * 60) / 1000
+					dt: (elapsed * 60) / 1000
 				};
 
 				var next = tick_spring(ctx, this.#last_value, this.#current.v, this.#target.v);
@@ -273,7 +293,7 @@ export class Spring {
 	 * the specified number of milliseconds. This is useful for things like 'fling' gestures.
 	 *
 	 * @param {T} value
-	 * @param {SpringUpdateOpts} [options]
+	 * @param {SpringUpdateOptions} [options]
 	 */
 	set(value, options) {
 		this.#deferred?.reject(new Error('Aborted'));
diff --git a/packages/svelte/src/motion/tweened.js b/packages/svelte/src/motion/tweened.js
index d732dbc283..a24148d075 100644
--- a/packages/svelte/src/motion/tweened.js
+++ b/packages/svelte/src/motion/tweened.js
@@ -1,13 +1,14 @@
 /** @import { Task } from '../internal/client/types' */
-/** @import { Tweened } from './public' */
-/** @import { TweenedOptions } from './private' */
+/** @import { Tweened, TweenOptions } from './public' */
 import { writable } from '../store/shared/index.js';
 import { raf } from '../internal/client/timing.js';
 import { loop } from '../internal/client/loop.js';
 import { linear } from '../easing/index.js';
 import { is_date } from './utils.js';
-import { set, source } from '../internal/client/reactivity/sources.js';
+import { set, state } from '../internal/client/reactivity/sources.js';
+import { tag } from '../internal/client/dev/tracing.js';
 import { get, render_effect } from 'svelte/internal/client';
+import { DEV } from 'esm-env';
 
 /**
  * @template T
@@ -72,7 +73,8 @@ function get_interpolator(a, b) {
 		return (t) => a + t * delta;
 	}
 
-	throw new Error(`Cannot interpolate ${type} values`);
+	// for non-numeric values, snap to the final value immediately
+	return () => b;
 }
 
 /**
@@ -81,7 +83,7 @@ function get_interpolator(a, b) {
  * @deprecated Use [`Tween`](https://svelte.dev/docs/svelte/svelte-motion#Tween) instead
  * @template T
  * @param {T} [value]
- * @param {TweenedOptions<T>} [defaults]
+ * @param {TweenOptions<T>} [defaults]
  * @returns {Tweened<T>}
  */
 export function tweened(value, defaults = {}) {
@@ -91,7 +93,7 @@ export function tweened(value, defaults = {}) {
 	let target_value = value;
 	/**
 	 * @param {T} new_value
-	 * @param {TweenedOptions<T>} [opts]
+	 * @param {TweenOptions<T>} [opts]
 	 */
 	function set(new_value, opts) {
 		target_value = new_value;
@@ -174,10 +176,10 @@ export function tweened(value, defaults = {}) {
  * @since 5.8.0
  */
 export class Tween {
-	#current = source(/** @type {T} */ (undefined));
-	#target = source(/** @type {T} */ (undefined));
+	#current;
+	#target;
 
-	/** @type {TweenedOptions<T>} */
+	/** @type {TweenOptions<T>} */
 	#defaults;
 
 	/** @type {import('../internal/client/types').Task | null} */
@@ -185,11 +187,17 @@ export class Tween {
 
 	/**
 	 * @param {T} value
-	 * @param {TweenedOptions<T>} options
+	 * @param {TweenOptions<T>} options
 	 */
 	constructor(value, options = {}) {
-		this.#current.v = this.#target.v = value;
+		this.#current = state(value);
+		this.#target = state(value);
 		this.#defaults = options;
+
+		if (DEV) {
+			tag(this.#current, 'Tween.current');
+			tag(this.#target, 'Tween.target');
+		}
 	}
 
 	/**
@@ -207,7 +215,7 @@ export class Tween {
 	 * ```
 	 * @template U
 	 * @param {() => U} fn
-	 * @param {TweenedOptions<U>} [options]
+	 * @param {TweenOptions<U>} [options]
 	 */
 	static of(fn, options) {
 		const tween = new Tween(fn(), options);
@@ -224,16 +232,12 @@ export class Tween {
 	 *
 	 * If `options` are provided, they will override the tween's defaults.
 	 * @param {T} value
-	 * @param {TweenedOptions<T>} [options]
+	 * @param {TweenOptions<T>} [options]
 	 * @returns
 	 */
 	set(value, options) {
 		set(this.#target, value);
 
-		let previous_value = this.#current.v;
-		let previous_task = this.#task;
-
-		let started = false;
 		let {
 			delay = 0,
 			duration = 400,
@@ -241,10 +245,18 @@ export class Tween {
 			interpolate = get_interpolator
 		} = { ...this.#defaults, ...options };
 
+		if (duration === 0) {
+			this.#task?.abort();
+			set(this.#current, value);
+			return Promise.resolve();
+		}
+
 		const start = raf.now() + delay;
 
 		/** @type {(t: number) => T} */
 		let fn;
+		let started = false;
+		let previous_task = this.#task;
 
 		this.#task = loop((now) => {
 			if (now < start) {
@@ -254,10 +266,12 @@ export class Tween {
 			if (!started) {
 				started = true;
 
-				fn = interpolate(/** @type {any} */ (previous_value), value);
+				const prev = this.#current.v;
+
+				fn = interpolate(prev, value);
 
 				if (typeof duration === 'function') {
-					duration = duration(/** @type {any} */ (previous_value), value);
+					duration = duration(prev, value);
 				}
 
 				previous_task?.abort();
diff --git a/packages/svelte/src/reactivity/create-subscriber.js b/packages/svelte/src/reactivity/create-subscriber.js
index 63deca62ea..6f9313eb0a 100644
--- a/packages/svelte/src/reactivity/create-subscriber.js
+++ b/packages/svelte/src/reactivity/create-subscriber.js
@@ -1,13 +1,18 @@
 import { get, tick, untrack } from '../internal/client/runtime.js';
 import { effect_tracking, render_effect } from '../internal/client/reactivity/effects.js';
-import { source } from '../internal/client/reactivity/sources.js';
-import { increment } from './utils.js';
+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.
@@ -35,6 +40,7 @@ import { increment } from './utils.js';
  * 	}
  *
  * 	get current() {
+ * 		// This makes the getter reactive, if read in an effect
  * 		this.#subscribe();
  *
  * 		// Return the current state of the query, whether or not we're in an effect
@@ -51,6 +57,10 @@ export function createSubscriber(start) {
 	/** @type {(() => void) | void} */
 	let stop;
 
+	if (DEV) {
+		tag(version, 'createSubscriber version');
+	}
+
 	return () => {
 		if (effect_tracking()) {
 			get(version);
@@ -63,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;
@@ -72,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/reactivity/date.js b/packages/svelte/src/reactivity/date.js
index 33da2e1761..f882c05d76 100644
--- a/packages/svelte/src/reactivity/date.js
+++ b/packages/svelte/src/reactivity/date.js
@@ -1,12 +1,46 @@
 /** @import { Source } from '#client' */
 import { derived } from '../internal/client/index.js';
-import { source, set } from '../internal/client/reactivity/sources.js';
+import { set, state } from '../internal/client/reactivity/sources.js';
+import { tag } from '../internal/client/dev/tracing.js';
 import { active_reaction, get, set_active_reaction } from '../internal/client/runtime.js';
+import { DEV } from 'esm-env';
 
 var inited = false;
 
+/**
+ * A reactive version of the built-in [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object.
+ * Reading the date (whether with methods like `date.getTime()` or `date.toString()`, or via things like [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat))
+ * in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived)
+ * will cause it to be re-evaluated when the value of the date changes.
+ *
+ * ```svelte
+ * <script>
+ * 	import { SvelteDate } from 'svelte/reactivity';
+ *
+ * 	const date = new SvelteDate();
+ *
+ * 	const formatter = new Intl.DateTimeFormat(undefined, {
+ * 	  hour: 'numeric',
+ * 	  minute: 'numeric',
+ * 	  second: 'numeric'
+ * 	});
+ *
+ * 	$effect(() => {
+ * 		const interval = setInterval(() => {
+ * 			date.setTime(Date.now());
+ * 		}, 1000);
+ *
+ * 		return () => {
+ * 			clearInterval(interval);
+ * 		};
+ * 	});
+ * </script>
+ *
+ * <p>The time is {formatter.format(date)}</p>
+ * ```
+ */
 export class SvelteDate extends Date {
-	#time = source(super.getTime());
+	#time = state(super.getTime());
 
 	/** @type {Map<keyof Date, Source<unknown>>} */
 	#deriveds = new Map();
@@ -17,6 +51,11 @@ export class SvelteDate extends Date {
 	constructor(...params) {
 		// @ts-ignore
 		super(...params);
+
+		if (DEV) {
+			tag(this.#time, 'SvelteDate.#time');
+		}
+
 		if (!inited) this.#init();
 	}
 
@@ -56,6 +95,10 @@ export class SvelteDate extends Date {
 							return date_proto[method].apply(this, args);
 						});
 
+						if (DEV) {
+							tag(d, `SvelteDate.${method}()`);
+						}
+
 						this.#deriveds.set(method, d);
 
 						set_active_reaction(reaction);
diff --git a/packages/svelte/src/reactivity/map.js b/packages/svelte/src/reactivity/map.js
index 3fa2945ef0..48d06a05a7 100644
--- a/packages/svelte/src/reactivity/map.js
+++ b/packages/svelte/src/reactivity/map.js
@@ -1,10 +1,51 @@
 /** @import { Source } from '#client' */
 import { DEV } from 'esm-env';
-import { set, source } from '../internal/client/reactivity/sources.js';
-import { get } from '../internal/client/runtime.js';
-import { increment } from './utils.js';
+import { set, source, state, increment } from '../internal/client/reactivity/sources.js';
+import { label, tag } from '../internal/client/dev/tracing.js';
+import { get, update_version } from '../internal/client/runtime.js';
 
 /**
+ * A reactive version of the built-in [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) object.
+ * Reading contents of the map (by iterating, or by reading `map.size` or calling `map.get(...)` or `map.has(...)` as in the [tic-tac-toe example](https://svelte.dev/playground/0b0ff4aa49c9443f9b47fe5203c78293) below) in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived)
+ * will cause it to be re-evaluated as necessary when the map is updated.
+ *
+ * Note that values in a reactive map are _not_ made [deeply reactive](https://svelte.dev/docs/svelte/$state#Deep-state).
+ *
+ * ```svelte
+ * <script>
+ * 	import { SvelteMap } from 'svelte/reactivity';
+ * 	import { result } from './game.js';
+ *
+ * 	let board = new SvelteMap();
+ * 	let player = $state('x');
+ * 	let winner = $derived(result(board));
+ *
+ * 	function reset() {
+ * 		player = 'x';
+ * 		board.clear();
+ * 	}
+ * </script>
+ *
+ * <div class="board">
+ * 	{#each Array(9), i}
+ * 		<button
+ * 			disabled={board.has(i) || winner}
+ * 			onclick={() => {
+ * 				board.set(i, player);
+ * 				player = player === 'x' ? 'o' : 'x';
+ * 			}}
+ * 		>{board.get(i)}</button>
+ * 	{/each}
+ * </div>
+ *
+ * {#if winner}
+ * 	<p>{winner} wins!</p>
+ * 	<button onclick={reset}>reset</button>
+ * {:else}
+ * 	<p>{player} is next</p>
+ * {/if}
+ * ```
+ *
  * @template K
  * @template V
  * @extends {Map<K, V>}
@@ -12,8 +53,9 @@ import { increment } from './utils.js';
 export class SvelteMap extends Map {
 	/** @type {Map<K, Source<number>>} */
 	#sources = new Map();
-	#version = source(0);
-	#size = source(0);
+	#version = state(0);
+	#size = state(0);
+	#update_version = update_version || -1;
 
 	/**
 	 * @param {Iterable<readonly [K, V]> | null | undefined} [value]
@@ -21,8 +63,13 @@ export class SvelteMap extends Map {
 	constructor(value) {
 		super();
 
-		// If the value is invalid then the native exception will fire here
-		if (DEV) value = new Map(value);
+		if (DEV) {
+			// If the value is invalid then the native exception will fire here
+			value = new Map(value);
+
+			tag(this.#version, 'SvelteMap version');
+			tag(this.#size, 'SvelteMap.size');
+		}
 
 		if (value) {
 			for (var [key, v] of value) {
@@ -32,15 +79,32 @@ export class SvelteMap extends Map {
 		}
 	}
 
+	/**
+	 * If the source is being created inside the same reaction as the SvelteMap instance,
+	 * we use `state` so that it will not be a dependency of the reaction. Otherwise we
+	 * use `source` so it will be.
+	 *
+	 * @template T
+	 * @param {T} value
+	 * @returns {Source<T>}
+	 */
+	#source(value) {
+		return update_version === this.#update_version ? state(value) : source(value);
+	}
+
 	/** @param {K} key */
 	has(key) {
 		var sources = this.#sources;
 		var s = sources.get(key);
 
 		if (s === undefined) {
-			var ret = super.get(key);
-			if (ret !== undefined) {
-				s = source(0);
+			if (super.has(key)) {
+				s = this.#source(0);
+
+				if (DEV) {
+					tag(s, `SvelteMap get(${label(key)})`);
+				}
+
 				sources.set(key, s);
 			} else {
 				// We should always track the version in case
@@ -69,9 +133,13 @@ export class SvelteMap extends Map {
 		var s = sources.get(key);
 
 		if (s === undefined) {
-			var ret = super.get(key);
-			if (ret !== undefined) {
-				s = source(0);
+			if (super.has(key)) {
+				s = this.#source(0);
+
+				if (DEV) {
+					tag(s, `SvelteMap get(${label(key)})`);
+				}
+
 				sources.set(key, s);
 			} else {
 				// We should always track the version in case
@@ -97,7 +165,13 @@ export class SvelteMap extends Map {
 		var version = this.#version;
 
 		if (s === undefined) {
-			sources.set(key, source(0));
+			s = this.#source(0);
+
+			if (DEV) {
+				tag(s, `SvelteMap get(${label(key)})`);
+			}
+
+			sources.set(key, s);
 			set(this.#size, super.size);
 			increment(version);
 		} else if (prev_res !== value) {
@@ -126,8 +200,11 @@ export class SvelteMap extends Map {
 
 		if (s !== undefined) {
 			sources.delete(key);
-			set(this.#size, super.size);
 			set(s, -1);
+		}
+
+		if (res) {
+			set(this.#size, super.size);
 			increment(this.#version);
 		}
 
@@ -156,12 +233,17 @@ export class SvelteMap extends Map {
 		if (this.#size.v !== sources.size) {
 			for (var key of super.keys()) {
 				if (!sources.has(key)) {
-					sources.set(key, source(0));
+					var s = this.#source(0);
+					if (DEV) {
+						tag(s, `SvelteMap get(${label(key)})`);
+					}
+
+					sources.set(key, s);
 				}
 			}
 		}
 
-		for (var [, s] of this.#sources) {
+		for ([, s] of this.#sources) {
 			get(s);
 		}
 	}
diff --git a/packages/svelte/src/reactivity/map.test.ts b/packages/svelte/src/reactivity/map.test.ts
index 2f9f064b42..8bb6f72f7b 100644
--- a/packages/svelte/src/reactivity/map.test.ts
+++ b/packages/svelte/src/reactivity/map.test.ts
@@ -207,6 +207,75 @@ test('map handling of undefined values', () => {
 	cleanup();
 });
 
+test('map.has() and map.get() with undefined values', () => {
+	const map = new SvelteMap<string, undefined | string>([['foo', undefined]]);
+
+	const log: any = [];
+
+	const cleanup = effect_root(() => {
+		render_effect(() => {
+			log.push('has', map.has('foo'));
+		});
+
+		render_effect(() => {
+			log.push('get', map.get('foo'));
+		});
+
+		flushSync(() => {
+			map.delete('foo');
+		});
+
+		flushSync(() => {
+			map.set('bar', undefined);
+		});
+	});
+
+	assert.deepEqual(log, [
+		'has',
+		true,
+		'get',
+		undefined,
+		'has',
+		false,
+		'get',
+		undefined,
+		// set('bar') bumps version, causing has('foo')/get('foo') effects to re-run
+		'has',
+		false,
+		'get',
+		undefined
+	]);
+
+	assert.equal(map.has('bar'), true);
+	assert.equal(map.get('bar'), undefined);
+
+	cleanup();
+});
+
+test('map.delete() triggers size reactivity for keys without per-key sources', () => {
+	const map = new SvelteMap([
+		[1, 'a'],
+		[2, 'b']
+	]);
+
+	const log: any = [];
+
+	const cleanup = effect_root(() => {
+		render_effect(() => {
+			log.push(map.size);
+		});
+
+		// delete key 2 which was never individually read (no per-key source)
+		flushSync(() => {
+			map.delete(2);
+		});
+	});
+
+	assert.deepEqual(log, [2, 1]);
+
+	cleanup();
+});
+
 test('not invoking reactivity when value is not in the map after changes', () => {
 	const map = new SvelteMap([[1, 1]]);
 
diff --git a/packages/svelte/src/reactivity/media-query.js b/packages/svelte/src/reactivity/media-query.js
index 22310df18d..6d1d084298 100644
--- a/packages/svelte/src/reactivity/media-query.js
+++ b/packages/svelte/src/reactivity/media-query.js
@@ -3,6 +3,19 @@ import { ReactiveValue } from './reactive-value.js';
 
 const parenthesis_regex = /\(.+\)/;
 
+// these keywords are valid media queries but they need to be without parenthesis
+//
+// eg: new MediaQuery('screen')
+//
+// however because of the auto-parenthesis logic in the constructor since there's no parenthesis
+// in the media query they'll be surrounded by parenthesis
+//
+// however we can check if the media query is only composed of these keywords
+// and skip the auto-parenthesis
+//
+// https://github.com/sveltejs/svelte/issues/15930
+const non_parenthesized_keywords = new Set(['all', 'print', 'screen', 'and', 'or', 'not', 'only']);
+
 /**
  * Creates a media query and provides a `current` property that reflects whether or not it matches.
  *
@@ -27,7 +40,12 @@ export class MediaQuery extends ReactiveValue {
 	 * @param {boolean} [fallback] Fallback value for the server
 	 */
 	constructor(query, fallback) {
-		let final_query = parenthesis_regex.test(query) ? query : `(${query})`;
+		let final_query =
+			parenthesis_regex.test(query) ||
+			// we need to use `some` here because technically this `window.matchMedia('random,screen')` still returns true
+			query.split(/[\s,]+/).some((keyword) => non_parenthesized_keywords.has(keyword.trim()))
+				? query
+				: `(${query})`;
 		const q = window.matchMedia(final_query);
 		super(
 			() => q.matches,
diff --git a/packages/svelte/src/reactivity/set.js b/packages/svelte/src/reactivity/set.js
index be0c2d2cf5..d7c2deeaae 100644
--- a/packages/svelte/src/reactivity/set.js
+++ b/packages/svelte/src/reactivity/set.js
@@ -1,8 +1,8 @@
 /** @import { Source } from '#client' */
 import { DEV } from 'esm-env';
-import { source, set } from '../internal/client/reactivity/sources.js';
-import { get } from '../internal/client/runtime.js';
-import { increment } from './utils.js';
+import { source, set, state, increment } from '../internal/client/reactivity/sources.js';
+import { label, tag } from '../internal/client/dev/tracing.js';
+import { get, update_version } from '../internal/client/runtime.js';
 
 var read_methods = ['forEach', 'isDisjointFrom', 'isSubsetOf', 'isSupersetOf'];
 var set_like_methods = ['difference', 'intersection', 'symmetricDifference', 'union'];
@@ -10,14 +10,46 @@ var set_like_methods = ['difference', 'intersection', 'symmetricDifference', 'un
 var inited = false;
 
 /**
+ * A reactive version of the built-in [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) object.
+ * Reading contents of the set (by iterating, or by reading `set.size` or calling `set.has(...)` as in the [example](https://svelte.dev/playground/53438b51194b4882bcc18cddf9f96f15) below) in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived)
+ * will cause it to be re-evaluated as necessary when the set is updated.
+ *
+ * Note that values in a reactive set are _not_ made [deeply reactive](https://svelte.dev/docs/svelte/$state#Deep-state).
+ *
+ * ```svelte
+ * <script>
+ * 	import { SvelteSet } from 'svelte/reactivity';
+ * 	let monkeys = new SvelteSet();
+ *
+ * 	function toggle(monkey) {
+ * 		if (monkeys.has(monkey)) {
+ * 			monkeys.delete(monkey);
+ * 		} else {
+ * 			monkeys.add(monkey);
+ * 		}
+ * 	}
+ * </script>
+ *
+ * {#each ['🙈', '🙉', '🙊'] as monkey}
+ * 	<button onclick={() => toggle(monkey)}>{monkey}</button>
+ * {/each}
+ *
+ * <button onclick={() => monkeys.clear()}>clear</button>
+ *
+ * {#if monkeys.has('🙈')}<p>see no evil</p>{/if}
+ * {#if monkeys.has('🙉')}<p>hear no evil</p>{/if}
+ * {#if monkeys.has('🙊')}<p>speak no evil</p>{/if}
+ * ```
+ *
  * @template T
  * @extends {Set<T>}
  */
 export class SvelteSet extends Set {
 	/** @type {Map<T, Source<boolean>>} */
 	#sources = new Map();
-	#version = source(0);
-	#size = source(0);
+	#version = state(0);
+	#size = state(0);
+	#update_version = update_version || -1;
 
 	/**
 	 * @param {Iterable<T> | null | undefined} [value]
@@ -25,8 +57,13 @@ export class SvelteSet extends Set {
 	constructor(value) {
 		super();
 
-		// If the value is invalid then the native exception will fire here
-		if (DEV) value = new Set(value);
+		if (DEV) {
+			// If the value is invalid then the native exception will fire here
+			value = new Set(value);
+
+			tag(this.#version, 'SvelteSet version');
+			tag(this.#size, 'SvelteSet.size');
+		}
 
 		if (value) {
 			for (var element of value) {
@@ -38,6 +75,19 @@ export class SvelteSet extends Set {
 		if (!inited) this.#init();
 	}
 
+	/**
+	 * If the source is being created inside the same reaction as the SvelteSet instance,
+	 * we use `state` so that it will not be a dependency of the reaction. Otherwise we
+	 * use `source` so it will be.
+	 *
+	 * @template T
+	 * @param {T} value
+	 * @returns {Source<T>}
+	 */
+	#source(value) {
+		return update_version === this.#update_version ? state(value) : source(value);
+	}
+
 	// We init as part of the first instance so that we can treeshake this class
 	#init() {
 		inited = true;
@@ -79,7 +129,12 @@ export class SvelteSet extends Set {
 				return false;
 			}
 
-			s = source(true);
+			s = this.#source(true);
+
+			if (DEV) {
+				tag(s, `SvelteSet has(${label(value)})`);
+			}
+
 			sources.set(value, s);
 		}
 
diff --git a/packages/svelte/src/reactivity/url-search-params.js b/packages/svelte/src/reactivity/url-search-params.js
index 13f6971996..38cf3ebe4f 100644
--- a/packages/svelte/src/reactivity/url-search-params.js
+++ b/packages/svelte/src/reactivity/url-search-params.js
@@ -1,12 +1,39 @@
-import { source } from '../internal/client/reactivity/sources.js';
+import { DEV } from 'esm-env';
+import { state, increment } from '../internal/client/reactivity/sources.js';
+import { tag } from '../internal/client/dev/tracing.js';
 import { get } from '../internal/client/runtime.js';
 import { get_current_url } from './url.js';
-import { increment } from './utils.js';
-
-export const REPLACE = Symbol();
 
+export const REPLACE = Symbol('replace');
+
+/**
+ * A reactive version of the built-in [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) object.
+ * Reading its contents (by iterating, or by calling `params.get(...)` or `params.getAll(...)` as in the [example](https://svelte.dev/playground/b3926c86c5384bab9f2cf993bc08c1c8) below) in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived)
+ * will cause it to be re-evaluated as necessary when the params are updated.
+ *
+ * ```svelte
+ * <script>
+ * 	import { SvelteURLSearchParams } from 'svelte/reactivity';
+ *
+ * 	const params = new SvelteURLSearchParams('message=hello');
+ *
+ * 	let key = $state('key');
+ * 	let value = $state('value');
+ * </script>
+ *
+ * <input bind:value={key} />
+ * <input bind:value={value} />
+ * <button onclick={() => params.append(key, value)}>append</button>
+ *
+ * <p>?{params.toString()}</p>
+ *
+ * {#each params as [key, value]}
+ * 	<p>{key}: {value}</p>
+ * {/each}
+ * ```
+ */
 export class SvelteURLSearchParams extends URLSearchParams {
-	#version = source(0);
+	#version = DEV ? tag(state(0), 'SvelteURLSearchParams version') : state(0);
 	#url = get_current_url();
 
 	#updating = false;
@@ -23,6 +50,7 @@ export class SvelteURLSearchParams extends URLSearchParams {
 
 	/**
 	 * @param {URLSearchParams} params
+	 * @internal
 	 */
 	[REPLACE](params) {
 		if (this.#updating) return;
@@ -104,11 +132,12 @@ export class SvelteURLSearchParams extends URLSearchParams {
 	 * @returns {void}
 	 */
 	set(name, value) {
-		var previous = super.getAll(name).join('');
+		var previous = super.getAll(name);
 		super.set(name, value);
 		// can't use has(name, value), because for something like https://svelte.dev?foo=1&bar=2&foo=3
 		// if you set `foo` to 1, then foo=3 gets deleted whilst `has("foo", "1")` returns true
-		if (previous !== super.getAll(name).join('')) {
+		var current = super.getAll(name);
+		if (previous.length !== current.length || previous.some((value, i) => value !== current[i])) {
 			this.#update_url();
 			increment(this.#version);
 		}
diff --git a/packages/svelte/src/reactivity/url-search-params.test.ts b/packages/svelte/src/reactivity/url-search-params.test.ts
index 27a413a553..b0c84872b0 100644
--- a/packages/svelte/src/reactivity/url-search-params.test.ts
+++ b/packages/svelte/src/reactivity/url-search-params.test.ts
@@ -55,6 +55,44 @@ test('URLSearchParams.set', () => {
 	cleanup();
 });
 
+test('URLSearchParams.set updates when duplicate values collapse to the same joined string', () => {
+	const params = new SvelteURLSearchParams('a=ab&a=c');
+	const log: any = [];
+
+	const cleanup = effect_root(() => {
+		render_effect(() => {
+			log.push(params.toString());
+		});
+	});
+
+	flushSync(() => {
+		params.set('a', 'abc');
+	});
+
+	assert.deepEqual(log, ['a=ab&a=c', 'a=abc']);
+
+	cleanup();
+});
+
+test('URLSearchParams.set updates when duplicate values collapse to the same comma-joined string', () => {
+	const params = new SvelteURLSearchParams('a=a&a=b');
+	const log: any = [];
+
+	const cleanup = effect_root(() => {
+		render_effect(() => {
+			log.push(params.toString());
+		});
+	});
+
+	flushSync(() => {
+		params.set('a', 'a,b');
+	});
+
+	assert.deepEqual(log, ['a=a&a=b', 'a=a%2Cb']);
+
+	cleanup();
+});
+
 test('URLSearchParams.append', () => {
 	const params = new SvelteURLSearchParams();
 	const log: any = [];
diff --git a/packages/svelte/src/reactivity/url.js b/packages/svelte/src/reactivity/url.js
index 5d003be021..549a20baa7 100644
--- a/packages/svelte/src/reactivity/url.js
+++ b/packages/svelte/src/reactivity/url.js
@@ -1,4 +1,6 @@
-import { source, set } from '../internal/client/reactivity/sources.js';
+import { DEV } from 'esm-env';
+import { set, state } from '../internal/client/reactivity/sources.js';
+import { tag } from '../internal/client/dev/tracing.js';
 import { get } from '../internal/client/runtime.js';
 import { REPLACE, SvelteURLSearchParams } from './url-search-params.js';
 
@@ -10,15 +12,42 @@ export function get_current_url() {
 	return current_url;
 }
 
+/**
+ * A reactive version of the built-in [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) object.
+ * Reading properties of the URL (such as `url.href` or `url.pathname`) in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived)
+ * will cause it to be re-evaluated as necessary when the URL changes.
+ *
+ * The `searchParams` property is an instance of [SvelteURLSearchParams](https://svelte.dev/docs/svelte/svelte-reactivity#SvelteURLSearchParams).
+ *
+ * [Example](https://svelte.dev/playground/5a694758901b448c83dc40dc31c71f2a):
+ *
+ * ```svelte
+ * <script>
+ * 	import { SvelteURL } from 'svelte/reactivity';
+ *
+ * 	const url = new SvelteURL('https://example.com/path');
+ * </script>
+ *
+ * <!-- changes to these... -->
+ * <input bind:value={url.protocol} />
+ * <input bind:value={url.hostname} />
+ * <input bind:value={url.pathname} />
+ *
+ * <hr />
+ *
+ * <!-- will update `href` and vice versa -->
+ * <input bind:value={url.href} size="65" />
+ * ```
+ */
 export class SvelteURL extends URL {
-	#protocol = source(super.protocol);
-	#username = source(super.username);
-	#password = source(super.password);
-	#hostname = source(super.hostname);
-	#port = source(super.port);
-	#pathname = source(super.pathname);
-	#hash = source(super.hash);
-	#search = source(super.search);
+	#protocol = state(super.protocol);
+	#username = state(super.username);
+	#password = state(super.password);
+	#hostname = state(super.hostname);
+	#port = state(super.port);
+	#pathname = state(super.pathname);
+	#hash = state(super.hash);
+	#search = state(super.search);
 	#searchParams;
 
 	/**
@@ -29,6 +58,17 @@ export class SvelteURL extends URL {
 		url = new URL(url, base);
 		super(url);
 
+		if (DEV) {
+			tag(this.#protocol, 'SvelteURL.protocol');
+			tag(this.#username, 'SvelteURL.username');
+			tag(this.#password, 'SvelteURL.password');
+			tag(this.#hostname, 'SvelteURL.hostname');
+			tag(this.#port, 'SvelteURL.port');
+			tag(this.#pathname, 'SvelteURL.pathname');
+			tag(this.#hash, 'SvelteURL.hash');
+			tag(this.#search, 'SvelteURL.search');
+		}
+
 		current_url = this;
 		this.#searchParams = new SvelteURLSearchParams(url.searchParams);
 		current_url = null;
@@ -131,7 +171,7 @@ export class SvelteURL extends URL {
 
 	set search(value) {
 		super.search = value;
-		set(this.#search, value);
+		set(this.#search, super.search);
 		this.#searchParams[REPLACE](super.searchParams);
 	}
 
diff --git a/packages/svelte/src/reactivity/url.test.ts b/packages/svelte/src/reactivity/url.test.ts
index 46430a90a8..a79aa32315 100644
--- a/packages/svelte/src/reactivity/url.test.ts
+++ b/packages/svelte/src/reactivity/url.test.ts
@@ -115,6 +115,54 @@ test('url.searchParams', () => {
 	cleanup();
 });
 
+test('url.searchParams.set updates url when duplicate values collapse to the same joined string', () => {
+	const url = new SvelteURL('https://svelte.dev?a=ab&a=c');
+	const log: any = [];
+
+	const cleanup = effect_root(() => {
+		render_effect(() => {
+			log.push(url.href);
+		});
+	});
+
+	flushSync(() => {
+		url.searchParams.set('a', 'abc');
+	});
+
+	assert.deepEqual(log, ['https://svelte.dev/?a=ab&a=c', 'https://svelte.dev/?a=abc']);
+
+	cleanup();
+});
+
+test('url.search normalizes value', () => {
+	const url = new SvelteURL('https://svelte.dev');
+	const log: any = [];
+
+	const cleanup = effect_root(() => {
+		render_effect(() => {
+			log.push(url.search);
+		});
+	});
+
+	flushSync(() => {
+		// setting without ? prefix — URL normalizes to "?foo=bar"
+		url.search = 'foo=bar';
+	});
+
+	flushSync(() => {
+		url.search = '?baz=qux';
+	});
+
+	flushSync(() => {
+		// lone "?" is normalized to ""
+		url.search = '?';
+	});
+
+	assert.deepEqual(log, ['', '?foo=bar', '?baz=qux', '']);
+
+	cleanup();
+});
+
 test('SvelteURL instanceof URL', () => {
 	assert.ok(new SvelteURL('https://svelte.dev') instanceof URL);
 });
diff --git a/packages/svelte/src/reactivity/utils.js b/packages/svelte/src/reactivity/utils.js
deleted file mode 100644
index cd55e0e0ba..0000000000
--- a/packages/svelte/src/reactivity/utils.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/** @import { Source } from '#client' */
-import { set } from '../internal/client/reactivity/sources.js';
-
-/** @param {Source<number>} source */
-export function increment(source) {
-	set(source, source.v + 1);
-}
diff --git a/packages/svelte/src/reactivity/window/index.js b/packages/svelte/src/reactivity/window/index.js
index 8c50a5c440..d4fcf29e4e 100644
--- a/packages/svelte/src/reactivity/window/index.js
+++ b/packages/svelte/src/reactivity/window/index.js
@@ -1,8 +1,9 @@
-import { BROWSER } from 'esm-env';
+import { BROWSER, DEV } from 'esm-env';
 import { on } from '../../events/index.js';
 import { ReactiveValue } from '../reactive-value.js';
 import { get } from '../../internal/client/index.js';
 import { set, source } from '../../internal/client/reactivity/sources.js';
+import { tag } from '../../internal/client/dev/tracing.js';
 
 /**
  * `scrollX.current` is a reactive view of `window.scrollX`. On the server it is `undefined`.
@@ -147,6 +148,10 @@ export const devicePixelRatio = /* @__PURE__ */ new (class DevicePixelRatio {
 		if (BROWSER) {
 			this.#update();
 		}
+
+		if (DEV) {
+			tag(this.#dpr, 'window.devicePixelRatio');
+		}
 	}
 
 	get current() {
diff --git a/packages/svelte/src/server/index.d.ts b/packages/svelte/src/server/index.d.ts
index b65ce5bdaa..db75afb9ed 100644
--- a/packages/svelte/src/server/index.d.ts
+++ b/packages/svelte/src/server/index.d.ts
@@ -1,4 +1,4 @@
-import type { RenderOutput } from '#server';
+import type { Csp, RenderOutput } from '#server';
 import type { ComponentProps, Component, SvelteComponent, ComponentType } from 'svelte';
 
 /**
@@ -12,10 +12,22 @@ export function render<
 	...args: {} extends Props
 		? [
 				component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp,
-				options?: { props?: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any> }
+				options?: {
+					props?: Omit<Props, '$$slots' | '$$events'>;
+					context?: Map<any, any>;
+					idPrefix?: string;
+					csp?: Csp;
+					transformError?: (error: unknown) => unknown | Promise<unknown>;
+				}
 			]
 		: [
 				component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp,
-				options: { props: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any> }
+				options: {
+					props: Omit<Props, '$$slots' | '$$events'>;
+					context?: Map<any, any>;
+					idPrefix?: string;
+					csp?: Csp;
+					transformError?: (error: unknown) => unknown | Promise<unknown>;
+				}
 			]
 ): RenderOutput;
diff --git a/packages/svelte/src/store/index-client.js b/packages/svelte/src/store/index-client.js
index ae6806ec76..2f0a1a831a 100644
--- a/packages/svelte/src/store/index-client.js
+++ b/packages/svelte/src/store/index-client.js
@@ -6,6 +6,12 @@ import {
 } from '../internal/client/reactivity/effects.js';
 import { get, writable } from './shared/index.js';
 import { createSubscriber } from '../reactivity/create-subscriber.js';
+import {
+	active_effect,
+	active_reaction,
+	set_active_effect,
+	set_active_reaction
+} from '../internal/client/runtime.js';
 
 export { derived, get, readable, readonly, writable } from './shared/index.js';
 
@@ -39,19 +45,34 @@ export { derived, get, readable, readonly, writable } from './shared/index.js';
  * @returns {Writable<V> | Readable<V>}
  */
 export function toStore(get, set) {
-	let init_value = get();
+	var effect = active_effect;
+	var reaction = active_reaction;
+	var init_value = get();
+
 	const store = writable(init_value, (set) => {
 		// If the value has changed before we call subscribe, then
 		// we need to treat the value as already having run
-		let ran = init_value !== get();
+		var ran = init_value !== get();
 
 		// TODO do we need a different implementation on the server?
-		const teardown = effect_root(() => {
-			render_effect(() => {
-				const value = get();
-				if (ran) set(value);
+		var teardown;
+		// Apply the reaction and effect at the time of toStore being called
+		var previous_reaction = active_reaction;
+		var previous_effect = active_effect;
+		set_active_reaction(reaction);
+		set_active_effect(effect);
+
+		try {
+			teardown = effect_root(() => {
+				render_effect(() => {
+					const value = get();
+					if (ran) set(value);
+				});
 			});
-		});
+		} finally {
+			set_active_reaction(previous_reaction);
+			set_active_effect(previous_effect);
+		}
 
 		ran = true;
 
diff --git a/packages/svelte/src/store/utils.js b/packages/svelte/src/store/utils.js
index db2a62c68c..2d36d64d2d 100644
--- a/packages/svelte/src/store/utils.js
+++ b/packages/svelte/src/store/utils.js
@@ -1,5 +1,5 @@
 /** @import { Readable } from './public' */
-import { untrack } from '../index-client.js';
+import { untrack } from '../internal/client/runtime.js';
 import { noop } from '../internal/shared/utils.js';
 
 /**
diff --git a/packages/svelte/src/transition/index.js b/packages/svelte/src/transition/index.js
index 4123106211..898a929eb1 100644
--- a/packages/svelte/src/transition/index.js
+++ b/packages/svelte/src/transition/index.js
@@ -1,4 +1,8 @@
 /** @import { BlurParams, CrossfadeParams, DrawParams, FadeParams, FlyParams, ScaleParams, SlideParams, TransitionConfig } from './public' */
+
+import { DEV } from 'esm-env';
+import * as w from '../internal/client/warnings.js';
+
 /** @param {number} x */
 const linear = (x) => x;
 
@@ -92,6 +96,8 @@ export function fly(
 	};
 }
 
+var slide_warning = false;
+
 /**
  * Slides an element in and out.
  *
@@ -101,6 +107,13 @@ export function fly(
  */
 export function slide(node, { delay = 0, duration = 400, easing = cubic_out, axis = 'y' } = {}) {
 	const style = getComputedStyle(node);
+
+	if (DEV && !slide_warning && /(contents|inline|table)/.test(style.display)) {
+		slide_warning = true;
+		Promise.resolve().then(() => (slide_warning = false));
+		w.transition_slide_display(style.display);
+	}
+
 	const opacity = +style.opacity;
 	const primary_property = axis === 'y' ? 'height' : 'width';
 	const primary_property_value = parseFloat(style[primary_property]);
@@ -131,7 +144,8 @@ export function slide(node, { delay = 0, duration = 400, easing = cubic_out, axi
 			`margin-${secondary_properties[0]}: ${t * margin_start_value}px;` +
 			`margin-${secondary_properties[1]}: ${t * margin_end_value}px;` +
 			`border-${secondary_properties[0]}-width: ${t * border_width_start_value}px;` +
-			`border-${secondary_properties[1]}-width: ${t * border_width_end_value}px;`
+			`border-${secondary_properties[1]}-width: ${t * border_width_end_value}px;` +
+			`min-${primary_property}: 0`
 	};
 }
 
diff --git a/packages/svelte/src/utils.js b/packages/svelte/src/utils.js
index e42721b4f4..40b558d0f9 100644
--- a/packages/svelte/src/utils.js
+++ b/packages/svelte/src/utils.js
@@ -137,7 +137,7 @@ const DELEGATED_EVENTS = [
  * Returns `true` if `event_name` is a delegated event
  * @param {string} event_name
  */
-export function is_delegated(event_name) {
+export function can_delegate_event(event_name) {
 	return DELEGATED_EVENTS.includes(event_name);
 }
 
@@ -154,8 +154,8 @@ const DOM_BOOLEAN_ATTRIBUTES = [
 	'default',
 	'disabled',
 	'formnovalidate',
-	'hidden',
 	'indeterminate',
+	'inert',
 	'ismap',
 	'loop',
 	'multiple',
@@ -169,7 +169,10 @@ const DOM_BOOLEAN_ATTRIBUTES = [
 	'reversed',
 	'seamless',
 	'selected',
-	'webkitdirectory'
+	'webkitdirectory',
+	'defer',
+	'disablepictureinpicture',
+	'disableremoteplayback'
 ];
 
 /**
@@ -195,7 +198,11 @@ const ATTRIBUTE_ALIASES = {
 	readonly: 'readOnly',
 	defaultvalue: 'defaultValue',
 	defaultchecked: 'defaultChecked',
-	srcobject: 'srcObject'
+	srcobject: 'srcObject',
+	novalidate: 'noValidate',
+	allowfullscreen: 'allowFullscreen',
+	disablepictureinpicture: 'disablePictureInPicture',
+	disableremoteplayback: 'disableRemotePlayback'
 };
 
 /**
@@ -214,11 +221,14 @@ const DOM_PROPERTIES = [
 	'playsInline',
 	'readOnly',
 	'value',
-	'inert',
 	'volume',
 	'defaultValue',
 	'defaultChecked',
-	'srcObject'
+	'srcObject',
+	'noValidate',
+	'allowFullscreen',
+	'disablePictureInPicture',
+	'disableRemotePlayback'
 ];
 
 /**
@@ -417,30 +427,49 @@ export function is_mathml(name) {
 	return MATHML_ELEMENTS.includes(name);
 }
 
-const RUNES = /** @type {const} */ ([
+const STATE_CREATION_RUNES = /** @type {const} */ ([
 	'$state',
 	'$state.raw',
+	'$derived',
+	'$derived.by'
+]);
+
+export const RUNES = /** @type {const} */ ([
+	...STATE_CREATION_RUNES,
+	'$state.eager',
 	'$state.snapshot',
 	'$props',
+	'$props.id',
 	'$bindable',
-	'$derived',
-	'$derived.by',
 	'$effect',
 	'$effect.pre',
 	'$effect.tracking',
 	'$effect.root',
+	'$effect.pending',
 	'$inspect',
 	'$inspect().with',
 	'$inspect.trace',
 	'$host'
 ]);
 
+/** @typedef {typeof RUNES[number]} RuneName */
+
 /**
  * @param {string} name
- * @returns {name is RUNES[number]}
+ * @returns {name is RuneName}
  */
 export function is_rune(name) {
-	return RUNES.includes(/** @type {RUNES[number]} */ (name));
+	return RUNES.includes(/** @type {RuneName} */ (name));
+}
+
+/** @typedef {typeof STATE_CREATION_RUNES[number]} StateCreationRuneName */
+
+/**
+ * @param {string} name
+ * @returns {name is StateCreationRuneName}
+ */
+export function is_state_creation_rune(name) {
+	return STATE_CREATION_RUNES.includes(/** @type {StateCreationRuneName} */ (name));
 }
 
 /** List of elements that require raw contents and should not have SSR comments put in them */
@@ -448,13 +477,28 @@ const RAW_TEXT_ELEMENTS = /** @type {const} */ (['textarea', 'script', 'style',
 
 /** @param {string} name */
 export function is_raw_text_element(name) {
-	return RAW_TEXT_ELEMENTS.includes(/** @type {RAW_TEXT_ELEMENTS[number]} */ (name));
+	return RAW_TEXT_ELEMENTS.includes(/** @type {typeof RAW_TEXT_ELEMENTS[number]} */ (name));
 }
 
+// Matches valid HTML/SVG/MathML element names and custom element names.
+// https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name
+//
+// Standard elements: ASCII alpha start, followed by ASCII alphanumerics.
+// Custom elements: ASCII alpha start, followed by any mix of PCENChar (which
+// includes ASCII alphanumerics, `-`, `.`, `_`, and specified Unicode ranges),
+// with at least one hyphen required somewhere after the first character.
+//
+// Rejects strings containing whitespace, quotes, angle brackets, slashes, equals,
+// or other characters that could break out of a tag-name token and enable markup injection.
+export const REGEX_VALID_TAG_NAME =
+	/^[a-zA-Z][a-zA-Z0-9]*(-[a-zA-Z0-9.\-_\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\u{10000}-\u{EFFFF}]*)?$/u;
+
 /**
  * Prevent devtools trying to make `location` a clickable link by inserting a zero-width space
- * @param {string | undefined} location
+ * @template {string | undefined} T
+ * @param {T} location
+ * @returns {T};
  */
 export function sanitize_location(location) {
-	return location?.replace(/\//g, '/\u200b');
+	return /** @type {T} */ (location?.replace(/\//g, '/\u200b'));
 }
diff --git a/packages/svelte/src/utils.test.ts b/packages/svelte/src/utils.test.ts
new file mode 100644
index 0000000000..02175ae93f
--- /dev/null
+++ b/packages/svelte/src/utils.test.ts
@@ -0,0 +1,50 @@
+import { expect, test } from 'vitest';
+import { REGEX_VALID_TAG_NAME } from './utils';
+
+test('REGEX_VALID_TAG_NAME accepts common HTML tag names', () => {
+	const common_html_tag_names = ['div', 'span', 'button', 'input', 'svg', 'math', 'a'];
+
+	for (const tag_name of common_html_tag_names) {
+		expect(REGEX_VALID_TAG_NAME.test(tag_name)).toBe(true);
+	}
+});
+
+test('REGEX_VALID_TAG_NAME accepts basic custom element names', () => {
+	const valid_custom_tag_names = ['my-element', 'x-foo', 'todo-item', 'my-element2'];
+
+	for (const tag_name of valid_custom_tag_names) {
+		expect(REGEX_VALID_TAG_NAME.test(tag_name)).toBe(true);
+	}
+});
+
+test('REGEX_VALID_TAG_NAME accepts spec-allowed custom element characters', () => {
+	const valid_custom_tag_names = [
+		'x-foo.bar',
+		'x-foo_bar',
+		'x-foo\u00B7bar',
+		'x-foo\u00FCbar',
+		'x-foo\u{1F600}bar',
+		'x-'
+	];
+
+	for (const tag_name of valid_custom_tag_names) {
+		expect(REGEX_VALID_TAG_NAME.test(tag_name)).toBe(true);
+	}
+});
+
+test('REGEX_VALID_TAG_NAME rejects invalid tag names', () => {
+	const invalid_tag_names = ['', '1', 'x\u00FC', '-x-foo', '1foo', 'x-foo bar', 'x-foo/', 'x-foo>'];
+
+	for (const tag_name of invalid_tag_names) {
+		expect(REGEX_VALID_TAG_NAME.test(tag_name)).toBe(false);
+	}
+});
+
+test('REGEX_VALID_TAG_NAME no ReDoS', () => {
+	const before = performance.now();
+	REGEX_VALID_TAG_NAME.test('a-----------------------------------!');
+	const after = performance.now();
+	if (after - before > 10) {
+		throw new Error(`REGEX_VALID_TAG_NAME is vulnerable to ReDoS`);
+	}
+});
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 4d4d7e6e86..210d48461e 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -2,9 +2,7 @@
 
 /**
  * The current version, as set in package.json.
- *
- * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.14.0';
+export const VERSION = '5.56.1';
 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/README.md b/packages/svelte/tests/README.md
index 6dde66f6cb..9e450a7176 100644
--- a/packages/svelte/tests/README.md
+++ b/packages/svelte/tests/README.md
@@ -1,6 +1,6 @@
 # Test repo
 
-This repo tries to migrate as many tests from the currente Svelte project over to test against the new compiler/runtime.
+This repo tries to migrate as many tests from the current Svelte project over to test against the new compiler/runtime.
 
 ## Differences to the old test suite
 
diff --git a/packages/svelte/tests/animation-helpers.js b/packages/svelte/tests/animation-helpers.js
index dcbb062923..0452a0d643 100644
--- a/packages/svelte/tests/animation-helpers.js
+++ b/packages/svelte/tests/animation-helpers.js
@@ -3,7 +3,9 @@ import { raf as svelte_raf } from 'svelte/internal/client';
 import { queue_micro_task } from '../src/internal/client/dom/task.js';
 
 export const raf = {
+	/** @type {Set<Animation>} */
 	animations: new Set(),
+	/** @type {Set<(n: number) => void>} */
 	ticks: new Set(),
 	tick,
 	time: 0,
@@ -54,14 +56,24 @@ class Animation {
 
 	/**
 	 * @param {HTMLElement} target
-	 * @param {Keyframe[]} keyframes
-	 * @param {{ duration: number, delay: number }} options
+	 * @param {Keyframe[] | PropertyIndexedKeyframes | null} keyframes
+	 * @param {number | KeyframeAnimationOptions | undefined} options
 	 */
-	constructor(target, keyframes, { duration, delay }) {
+	constructor(target, keyframes, options) {
 		this.target = target;
-		this.#keyframes = keyframes;
-		this.#duration = Math.round(duration);
-		this.#delay = delay ?? 0;
+		this.#keyframes = Array.isArray(keyframes) ? keyframes : [];
+		if (typeof options === 'number') {
+			this.#duration = options;
+			this.#delay = 0;
+		} else {
+			const { duration = 0, delay = 0 } = options ?? {};
+			if (typeof duration === 'object') {
+				this.#duration = 0;
+			} else {
+				this.#duration = Math.round(+duration);
+			}
+			this.#delay = delay;
+		}
 
 		this._update();
 	}
@@ -189,6 +201,7 @@ function interpolate(a, b, p) {
  * @param {{duration: number, delay: number}} options
  * @returns {globalThis.Animation}
  */
+// @ts-ignore
 HTMLElement.prototype.animate = function (keyframes, options) {
 	const animation = new Animation(this, keyframes, options);
 	raf.animations.add(animation);
@@ -196,6 +209,7 @@ HTMLElement.prototype.animate = function (keyframes, options) {
 	return animation;
 };
 
+// @ts-ignore
 HTMLElement.prototype.getAnimations = function () {
 	return Array.from(raf.animations).filter((animation) => animation.target === this);
 };
diff --git a/packages/svelte/tests/compiler-errors/samples/attribute-sequence-expression-2/_config.js b/packages/svelte/tests/compiler-errors/samples/attribute-sequence-expression-2/_config.js
index 13d7f9c66b..55f02e801b 100644
--- a/packages/svelte/tests/compiler-errors/samples/attribute-sequence-expression-2/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/attribute-sequence-expression-2/_config.js
@@ -4,7 +4,7 @@ export default test({
 	error: {
 		code: 'attribute_invalid_sequence_expression',
 		message:
-			'Sequence expressions are not allowed as attribute/directive values in runes mode, unless wrapped in parentheses',
+			'Comma-separated expressions are not allowed as attribute/directive values in runes mode, unless wrapped in parentheses',
 		position: [124, 131]
 	}
 });
diff --git a/packages/svelte/tests/compiler-errors/samples/attribute-sequence-expression/_config.js b/packages/svelte/tests/compiler-errors/samples/attribute-sequence-expression/_config.js
index 4fb1680d01..1c50ef76ea 100644
--- a/packages/svelte/tests/compiler-errors/samples/attribute-sequence-expression/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/attribute-sequence-expression/_config.js
@@ -4,7 +4,7 @@ export default test({
 	error: {
 		code: 'attribute_invalid_sequence_expression',
 		message:
-			'Sequence expressions are not allowed as attribute/directive values in runes mode, unless wrapped in parentheses',
+			'Comma-separated expressions are not allowed as attribute/directive values in runes mode, unless wrapped in parentheses',
 		position: [163, 170]
 	}
 });
diff --git a/packages/svelte/tests/compiler-errors/samples/class-state-field-static/_config.js b/packages/svelte/tests/compiler-errors/samples/class-state-field-static/_config.js
index e6551031cc..f5b116117e 100644
--- a/packages/svelte/tests/compiler-errors/samples/class-state-field-static/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/class-state-field-static/_config.js
@@ -4,7 +4,7 @@ export default test({
 	error: {
 		code: 'state_invalid_placement',
 		message:
-			'`$state(...)` can only be used as a variable declaration initializer or a class field',
+			'`$state(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.',
 		position: [33, 41]
 	}
 });
diff --git a/packages/svelte/tests/compiler-errors/samples/const-tag-snippet-invalid-reference-1/_config.js b/packages/svelte/tests/compiler-errors/samples/const-tag-snippet-invalid-reference-1/_config.js
new file mode 100644
index 0000000000..be9d5a483f
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/const-tag-snippet-invalid-reference-1/_config.js
@@ -0,0 +1,10 @@
+import { test } from '../../test';
+
+export default test({
+	async: true,
+	error: {
+		code: 'const_tag_invalid_reference',
+		message: 'The `{@const foo = ...}` declaration is not available in this snippet',
+		position: [376, 379]
+	}
+});
diff --git a/packages/svelte/tests/compiler-errors/samples/const-tag-snippet-invalid-reference-1/main.svelte b/packages/svelte/tests/compiler-errors/samples/const-tag-snippet-invalid-reference-1/main.svelte
new file mode 100644
index 0000000000..a2533e33b0
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/const-tag-snippet-invalid-reference-1/main.svelte
@@ -0,0 +1,32 @@
+<svelte:options runes />
+
+<!-- ok -->
+<svelte:boundary>
+	{@const foo = 'bar'}
+
+	{#snippet other()}
+		{foo}
+	{/snippet}
+
+	{foo}
+
+	<svelte:boundary>
+		{#snippet failed()}
+			{foo}
+		{/snippet}
+	</svelte:boundary>
+
+	{#snippet failed()}
+		{@const foo = 'bar'}
+		{foo}
+	{/snippet}
+</svelte:boundary>
+
+<!-- error -->
+<svelte:boundary>
+	{@const foo = 'bar'}
+
+	{#snippet failed()}
+		{foo}
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/compiler-errors/samples/const-tag-snippet-invalid-reference-2/_config.js b/packages/svelte/tests/compiler-errors/samples/const-tag-snippet-invalid-reference-2/_config.js
new file mode 100644
index 0000000000..5132bd93b7
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/const-tag-snippet-invalid-reference-2/_config.js
@@ -0,0 +1,10 @@
+import { test } from '../../test';
+
+export default test({
+	async: true,
+	error: {
+		code: 'const_tag_invalid_reference',
+		message: 'The `{@const foo = ...}` declaration is not available in this snippet',
+		position: [298, 301]
+	}
+});
diff --git a/packages/svelte/tests/compiler-errors/samples/const-tag-snippet-invalid-reference-2/main.svelte b/packages/svelte/tests/compiler-errors/samples/const-tag-snippet-invalid-reference-2/main.svelte
new file mode 100644
index 0000000000..c59df28ec9
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/const-tag-snippet-invalid-reference-2/main.svelte
@@ -0,0 +1,27 @@
+<svelte:options runes />
+
+<!-- ok -->
+<Component>
+	{@const foo = 'bar'}
+	{foo}
+
+	<Component>
+		{#snippet prop()}
+			{foo}
+		{/snippet}
+	</Component>
+
+	{#snippet prop()}
+		{@const foo = 'bar'}
+		{foo}
+	{/snippet}
+</Component>
+
+<!-- error -->
+<Component>
+	{@const foo = 'bar'}
+
+	{#snippet prop()}
+		{foo}
+	{/snippet}
+</Component>
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-in-pseudoclass/_config.js b/packages/svelte/tests/compiler-errors/samples/css-global-block-in-pseudoclass/_config.js
new file mode 100644
index 0000000000..c987725d74
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-block-in-pseudoclass/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'css_global_block_invalid_placement',
+		message: 'A `:global` selector cannot be inside a pseudoclass',
+		position: [28, 35]
+	}
+});
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-in-pseudoclass/main.svelte b/packages/svelte/tests/compiler-errors/samples/css-global-block-in-pseudoclass/main.svelte
new file mode 100644
index 0000000000..53060df97d
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-block-in-pseudoclass/main.svelte
@@ -0,0 +1,4 @@
+<style>
+	/* invalid */
+	:is(:global) { color: red }
+</style>
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-multiple-1/_config.js b/packages/svelte/tests/compiler-errors/samples/css-global-block-multiple-1/_config.js
new file mode 100644
index 0000000000..85dedc8012
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-block-multiple-1/_config.js
@@ -0,0 +1,10 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'css_global_block_invalid_list',
+		message:
+			"A `:global` selector cannot be part of a selector list with entries that don't contain `:global`",
+		position: [232, 246]
+	}
+});
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-multiple-1/main.svelte b/packages/svelte/tests/compiler-errors/samples/css-global-block-multiple-1/main.svelte
new file mode 100644
index 0000000000..260921f704
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-block-multiple-1/main.svelte
@@ -0,0 +1,9 @@
+<style>
+	/* valid */
+	/* We gotta allow `:global x, :global y` and the likes because CSS preprocessors might generate that from e.g. `:global { x, y {...} }` */
+	:global .x, :global .y {}
+	.x :global, .y :global {}
+
+	/* invalid */
+	.x :global, .y {}
+</style>
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-multiple-2/_config.js b/packages/svelte/tests/compiler-errors/samples/css-global-block-multiple-2/_config.js
new file mode 100644
index 0000000000..f24095800a
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-block-multiple-2/_config.js
@@ -0,0 +1,10 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'css_global_block_invalid_list',
+		message:
+			"A `:global` selector cannot be part of a selector list with entries that don't contain `:global`",
+		position: [24, 43]
+	}
+});
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-multiple-2/main.svelte b/packages/svelte/tests/compiler-errors/samples/css-global-block-multiple-2/main.svelte
new file mode 100644
index 0000000000..2a09ec10ce
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-block-multiple-2/main.svelte
@@ -0,0 +1,6 @@
+<style>
+	/* invalid */
+	:global, :global .y {
+		z { color: red }
+	}
+</style>
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-multiple/_config.js b/packages/svelte/tests/compiler-errors/samples/css-global-block-multiple/_config.js
deleted file mode 100644
index 9ae4e758c4..0000000000
--- a/packages/svelte/tests/compiler-errors/samples/css-global-block-multiple/_config.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { test } from '../../test';
-
-export default test({
-	error: {
-		code: 'css_global_block_invalid_list',
-		message: 'A `:global` selector cannot be part of a selector list with more than one item',
-		position: [9, 31]
-	}
-});
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-multiple/main.svelte b/packages/svelte/tests/compiler-errors/samples/css-global-block-multiple/main.svelte
deleted file mode 100644
index 75178bc664..0000000000
--- a/packages/svelte/tests/compiler-errors/samples/css-global-block-multiple/main.svelte
+++ /dev/null
@@ -1,3 +0,0 @@
-<style>
-	.x :global, .y :global {}
-</style>
diff --git a/packages/svelte/tests/compiler-errors/samples/declaration-tag-trailing-slash/_config.js b/packages/svelte/tests/compiler-errors/samples/declaration-tag-trailing-slash/_config.js
new file mode 100644
index 0000000000..2e605631c5
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/declaration-tag-trailing-slash/_config.js
@@ -0,0 +1,11 @@
+import { test } from '../../test';
+
+// A tag whose expression ends with a bare `/` at the end of the input used to
+// make `find_matching_bracket` loop forever; it should error instead of hanging.
+export default test({
+	error: {
+		code: 'unexpected_eof',
+		message: 'Unexpected end of input',
+		position: [12, 12]
+	}
+});
diff --git a/packages/svelte/tests/compiler-errors/samples/declaration-tag-trailing-slash/main.svelte b/packages/svelte/tests/compiler-errors/samples/declaration-tag-trailing-slash/main.svelte
new file mode 100644
index 0000000000..8ffdb88a18
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/declaration-tag-trailing-slash/main.svelte
@@ -0,0 +1 @@
+{let x = a /
\ No newline at end of file
diff --git a/packages/svelte/tests/compiler-errors/samples/dynamic-element-binding-invalid/_config.js b/packages/svelte/tests/compiler-errors/samples/dynamic-element-binding-invalid/_config.js
index 4bb3edc27b..25b0827765 100644
--- a/packages/svelte/tests/compiler-errors/samples/dynamic-element-binding-invalid/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/dynamic-element-binding-invalid/_config.js
@@ -3,6 +3,6 @@ import { test } from '../../test';
 export default test({
 	error: {
 		code: 'bind_invalid_target',
-		message: '`bind:value` can only be used with <input>, <textarea>, <select>'
+		message: '`bind:value` can only be used with `<input>`, `<textarea>`, `<select>`'
 	}
 });
diff --git a/packages/svelte/tests/compiler-errors/samples/each-key-without-as/_config.js b/packages/svelte/tests/compiler-errors/samples/each-key-without-as/_config.js
new file mode 100644
index 0000000000..923fe0c0ac
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/each-key-without-as/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'each_key_without_as',
+		message: 'An `{#each ...}` block without an `as` clause cannot have a key'
+	}
+});
diff --git a/packages/svelte/tests/compiler-errors/samples/each-key-without-as/main.svelte b/packages/svelte/tests/compiler-errors/samples/each-key-without-as/main.svelte
new file mode 100644
index 0000000000..794740de8f
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/each-key-without-as/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	let items = [{ id: 3 }, { id: 2 }, { id: 1 }];
+</script>
+
+{#each items, i (items[i].id)}
+	<p>{items[i].id}</p>
+{/each}
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-no-derived-state-field-assignment/_config.js b/packages/svelte/tests/compiler-errors/samples/invalid-rune-name-shadowed/_config.js
similarity index 50%
rename from packages/svelte/tests/compiler-errors/samples/runes-no-derived-state-field-assignment/_config.js
rename to packages/svelte/tests/compiler-errors/samples/invalid-rune-name-shadowed/_config.js
index 94985a9939..a24996677c 100644
--- a/packages/svelte/tests/compiler-errors/samples/runes-no-derived-state-field-assignment/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/invalid-rune-name-shadowed/_config.js
@@ -2,7 +2,7 @@ import { test } from '../../test';
 
 export default test({
 	error: {
-		code: 'constant_assignment',
-		message: 'Cannot assign to derived state'
+		code: 'rune_invalid_name',
+		message: '`$state.foo` is not a valid rune'
 	}
 });
diff --git a/packages/svelte/tests/compiler-errors/samples/invalid-rune-name-shadowed/main.svelte.js b/packages/svelte/tests/compiler-errors/samples/invalid-rune-name-shadowed/main.svelte.js
new file mode 100644
index 0000000000..966f7bc63b
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/invalid-rune-name-shadowed/main.svelte.js
@@ -0,0 +1,5 @@
+class State {
+	value = $state.foo();
+}
+
+export const state = new State();
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-binding-this/_config.js b/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-binding-this/_config.js
index 524c2f161c..ed02e0960d 100644
--- a/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-binding-this/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-binding-this/_config.js
@@ -4,6 +4,6 @@ export default test({
 	error: {
 		code: 'each_item_invalid_assignment',
 		message:
-			'Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`)'
+			'Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`, or `bind:value={array[i]}` instead of `bind:value={entry}`)'
 	}
 });
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-binding/_config.js b/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-binding/_config.js
index 524c2f161c..ed02e0960d 100644
--- a/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-binding/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-binding/_config.js
@@ -4,6 +4,6 @@ export default test({
 	error: {
 		code: 'each_item_invalid_assignment',
 		message:
-			'Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`)'
+			'Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`, or `bind:value={array[i]}` instead of `bind:value={entry}`)'
 	}
 });
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-mutation/_config.js b/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-mutation/_config.js
index 524c2f161c..ed02e0960d 100644
--- a/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-mutation/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-mutation/_config.js
@@ -4,6 +4,6 @@ export default test({
 	error: {
 		code: 'each_item_invalid_assignment',
 		message:
-			'Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`)'
+			'Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`, or `bind:value={array[i]}` instead of `bind:value={entry}`)'
 	}
 });
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-no-derived-assignment/_config.js b/packages/svelte/tests/compiler-errors/samples/runes-no-derived-assignment/_config.js
deleted file mode 100644
index 94985a9939..0000000000
--- a/packages/svelte/tests/compiler-errors/samples/runes-no-derived-assignment/_config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { test } from '../../test';
-
-export default test({
-	error: {
-		code: 'constant_assignment',
-		message: 'Cannot assign to derived state'
-	}
-});
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-no-derived-assignment/main.svelte b/packages/svelte/tests/compiler-errors/samples/runes-no-derived-assignment/main.svelte
deleted file mode 100644
index 3bf836f6c5..0000000000
--- a/packages/svelte/tests/compiler-errors/samples/runes-no-derived-assignment/main.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	const a = $state(0);
-	let b = $derived(a);
-	b = 1;
-</script>
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-no-derived-binding/_config.js b/packages/svelte/tests/compiler-errors/samples/runes-no-derived-binding/_config.js
deleted file mode 100644
index 87b88d79cc..0000000000
--- a/packages/svelte/tests/compiler-errors/samples/runes-no-derived-binding/_config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { test } from '../../test';
-
-export default test({
-	error: {
-		code: 'constant_binding',
-		message: 'Cannot bind to derived state'
-	}
-});
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-no-derived-binding/main.svelte b/packages/svelte/tests/compiler-errors/samples/runes-no-derived-binding/main.svelte
deleted file mode 100644
index 6c198dc068..0000000000
--- a/packages/svelte/tests/compiler-errors/samples/runes-no-derived-binding/main.svelte
+++ /dev/null
@@ -1,6 +0,0 @@
-<script>
-	let a = $state(0);
-	let b = $derived({ a });
-</script>
-
-<input type="number" bind:value={b} />
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-no-derived-state-field-assignment/main.svelte b/packages/svelte/tests/compiler-errors/samples/runes-no-derived-state-field-assignment/main.svelte
deleted file mode 100644
index d44806757e..0000000000
--- a/packages/svelte/tests/compiler-errors/samples/runes-no-derived-state-field-assignment/main.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script>
-	class Counter {
-		count = $state();
-		#doubled = $derived(this.count * 2);
-
-		nope() {
-			this.#doubled += 1;
-		}
-	}
-</script>
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-no-derived-state-field-update/_config.js b/packages/svelte/tests/compiler-errors/samples/runes-no-derived-state-field-update/_config.js
deleted file mode 100644
index 94985a9939..0000000000
--- a/packages/svelte/tests/compiler-errors/samples/runes-no-derived-state-field-update/_config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { test } from '../../test';
-
-export default test({
-	error: {
-		code: 'constant_assignment',
-		message: 'Cannot assign to derived state'
-	}
-});
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-no-derived-state-field-update/main.svelte b/packages/svelte/tests/compiler-errors/samples/runes-no-derived-state-field-update/main.svelte
deleted file mode 100644
index e4ee2e8635..0000000000
--- a/packages/svelte/tests/compiler-errors/samples/runes-no-derived-state-field-update/main.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script>
-	class Counter {
-		count = $state();
-		#doubled = $derived(this.count * 2);
-
-		nope() {
-			this.#doubled++;
-		}
-	}
-</script>
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-no-derived-update/_config.js b/packages/svelte/tests/compiler-errors/samples/runes-no-derived-update/_config.js
deleted file mode 100644
index 94985a9939..0000000000
--- a/packages/svelte/tests/compiler-errors/samples/runes-no-derived-update/_config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { test } from '../../test';
-
-export default test({
-	error: {
-		code: 'constant_assignment',
-		message: 'Cannot assign to derived state'
-	}
-});
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-no-derived-update/main.svelte b/packages/svelte/tests/compiler-errors/samples/runes-no-derived-update/main.svelte
deleted file mode 100644
index d266c95bb8..0000000000
--- a/packages/svelte/tests/compiler-errors/samples/runes-no-derived-update/main.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	const a = $state(0);
-	let b = $derived(a);
-	b++;
-</script>
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-no-rune-each/_config.js b/packages/svelte/tests/compiler-errors/samples/runes-no-rune-each/_config.js
index 1185ca6b45..592b2634a3 100644
--- a/packages/svelte/tests/compiler-errors/samples/runes-no-rune-each/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/runes-no-rune-each/_config.js
@@ -3,6 +3,7 @@ import { test } from '../../test';
 export default test({
 	error: {
 		code: 'state_invalid_placement',
-		message: '`$state(...)` can only be used as a variable declaration initializer or a class field'
+		message:
+			'`$state(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.'
 	}
 });
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-wrong-derived-placement/_config.js b/packages/svelte/tests/compiler-errors/samples/runes-wrong-derived-placement/_config.js
index 476d7239a3..f31748d26a 100644
--- a/packages/svelte/tests/compiler-errors/samples/runes-wrong-derived-placement/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/runes-wrong-derived-placement/_config.js
@@ -4,6 +4,6 @@ export default test({
 	error: {
 		code: 'state_invalid_placement',
 		message:
-			'`$derived(...)` can only be used as a variable declaration initializer or a class field'
+			'`$derived(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.'
 	}
 });
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-wrong-state-placement/_config.js b/packages/svelte/tests/compiler-errors/samples/runes-wrong-state-placement/_config.js
index 1185ca6b45..592b2634a3 100644
--- a/packages/svelte/tests/compiler-errors/samples/runes-wrong-state-placement/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/runes-wrong-state-placement/_config.js
@@ -3,6 +3,7 @@ import { test } from '../../test';
 export default test({
 	error: {
 		code: 'state_invalid_placement',
-		message: '`$state(...)` can only be used as a variable declaration initializer or a class field'
+		message:
+			'`$state(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.'
 	}
 });
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-wrong-state-raw-args/_config.js b/packages/svelte/tests/compiler-errors/samples/runes-wrong-state-raw-args/_config.js
new file mode 100644
index 0000000000..af226559d1
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/runes-wrong-state-raw-args/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'rune_invalid_arguments_length',
+		message: '`$state.raw` must be called with zero or one arguments'
+	}
+});
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-wrong-state-raw-args/main.svelte b/packages/svelte/tests/compiler-errors/samples/runes-wrong-state-raw-args/main.svelte
new file mode 100644
index 0000000000..2b50b43b9a
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/runes-wrong-state-raw-args/main.svelte
@@ -0,0 +1,3 @@
+<script>
+	const foo = $state.raw(1, 2, 3);
+</script>
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-wrong-state-raw-args/main.svelte.js b/packages/svelte/tests/compiler-errors/samples/runes-wrong-state-raw-args/main.svelte.js
new file mode 100644
index 0000000000..442aaad142
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/runes-wrong-state-raw-args/main.svelte.js
@@ -0,0 +1 @@
+const foo = $state.raw(1, 2, 3);
diff --git a/packages/svelte/tests/compiler-errors/samples/snippet-invalid-export/_config.js b/packages/svelte/tests/compiler-errors/samples/snippet-invalid-export/_config.js
new file mode 100644
index 0000000000..cc0dd388f4
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/snippet-invalid-export/_config.js
@@ -0,0 +1,10 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'snippet_invalid_export',
+		message:
+			'An exported snippet can only reference things declared in a `<script module>`, or other exportable snippets',
+		position: [26, 29]
+	}
+});
diff --git a/packages/svelte/tests/compiler-errors/samples/snippet-invalid-export/main.svelte b/packages/svelte/tests/compiler-errors/samples/snippet-invalid-export/main.svelte
new file mode 100644
index 0000000000..eb776944c3
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/snippet-invalid-export/main.svelte
@@ -0,0 +1,11 @@
+<script module>
+	export { foo }
+</script>
+
+<script>
+	let x = 42;
+</script>
+
+{#snippet foo()}
+	{x}
+{/snippet}
diff --git a/packages/svelte/tests/compiler-errors/test.ts b/packages/svelte/tests/compiler-errors/test.ts
index 5e57a3a032..b3a2d4af31 100644
--- a/packages/svelte/tests/compiler-errors/test.ts
+++ b/packages/svelte/tests/compiler-errors/test.ts
@@ -1,10 +1,11 @@
 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';
 
 interface CompilerErrorTest extends BaseTest {
+	async?: boolean;
 	error: {
 		code: string;
 		message: string;
@@ -29,7 +30,8 @@ const { test, run } = suite<CompilerErrorTest>((config, cwd) => {
 
 		try {
 			compile(read_file(`${cwd}/main.svelte`), {
-				generate: 'client'
+				generate: 'client',
+				experimental: { async: config.async ?? false }
 			});
 		} catch (e) {
 			const error = e as CompileError;
@@ -78,3 +80,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/css-parse.test.ts b/packages/svelte/tests/css-parse.test.ts
new file mode 100644
index 0000000000..3a53e97955
--- /dev/null
+++ b/packages/svelte/tests/css-parse.test.ts
@@ -0,0 +1,153 @@
+import { assert, describe, it } from 'vitest';
+import { parseCss } from 'svelte/compiler';
+
+describe('parseCss', () => {
+	it('parses a simple rule', () => {
+		const ast = parseCss('div { color: red; }');
+		assert.equal(ast.type, 'StyleSheetFile');
+		assert.equal(ast.children.length, 1);
+		assert.equal(ast.children[0].type, 'Rule');
+	});
+
+	it('parses at-rules', () => {
+		const ast = parseCss('@media (min-width: 800px) { div { color: red; } }');
+		assert.equal(ast.children.length, 1);
+		assert.equal(ast.children[0].type, 'Atrule');
+		if (ast.children[0].type === 'Atrule') {
+			assert.equal(ast.children[0].name, 'media');
+		}
+	});
+
+	it('parses @import', () => {
+		const ast = parseCss("@import 'foo.css';");
+		assert.equal(ast.children.length, 1);
+		assert.equal(ast.children[0].type, 'Atrule');
+		if (ast.children[0].type === 'Atrule') {
+			assert.equal(ast.children[0].name, 'import');
+			assert.equal(ast.children[0].block, null);
+		}
+	});
+
+	it('parses multiple rules', () => {
+		const ast = parseCss('div { color: red; } span { color: blue; }');
+		assert.equal(ast.children.length, 2);
+	});
+
+	it('has correct start/end positions', () => {
+		const ast = parseCss('div { color: red; }');
+		assert.equal(ast.start, 0);
+		assert.equal(ast.end, 19);
+	});
+
+	it('strips BOM', () => {
+		const ast = parseCss('\uFEFFdiv { color: red; }');
+		assert.equal(ast.start, 0);
+		assert.equal(ast.end, 19);
+	});
+
+	it('parses nested rules', () => {
+		const ast = parseCss('div { color: red; span { color: blue; } }');
+		assert.equal(ast.children.length, 1);
+		const rule = ast.children[0];
+		assert.equal(rule.type, 'Rule');
+		if (rule.type === 'Rule') {
+			assert.equal(rule.block.children.length, 2); // declaration + nested rule
+		}
+	});
+
+	it('parses empty stylesheet', () => {
+		const ast = parseCss('');
+		assert.equal(ast.type, 'StyleSheetFile');
+		assert.equal(ast.children.length, 0);
+		assert.equal(ast.start, 0);
+		assert.equal(ast.end, 0);
+	});
+
+	it('parses whitespace-only stylesheet', () => {
+		const ast = parseCss('   \n\t  ');
+		assert.equal(ast.children.length, 0);
+	});
+
+	it('parses comments', () => {
+		const ast = parseCss('/* comment */ div { color: red; }');
+		assert.equal(ast.children.length, 1);
+		assert.equal(ast.children[0].type, 'Rule');
+	});
+
+	it('parses complex selectors', () => {
+		const ast = parseCss('div > span + p ~ a { color: red; }');
+		assert.equal(ast.children.length, 1);
+		const rule = ast.children[0];
+		if (rule.type === 'Rule') {
+			assert.equal(rule.prelude.type, 'SelectorList');
+			assert.equal(rule.prelude.children.length, 1);
+			// div > span + p ~ a has 4 relative selectors
+			assert.equal(rule.prelude.children[0].children.length, 4);
+		}
+	});
+
+	it('parses pseudo-classes and pseudo-elements', () => {
+		const ast = parseCss('div:hover::before { color: red; }');
+		assert.equal(ast.children.length, 1);
+		const rule = ast.children[0];
+		if (rule.type === 'Rule') {
+			const selectors = rule.prelude.children[0].children[0].selectors;
+			assert.equal(selectors.length, 3); // div, :hover, ::before
+			assert.equal(selectors[0].type, 'TypeSelector');
+			assert.equal(selectors[1].type, 'PseudoClassSelector');
+			assert.equal(selectors[2].type, 'PseudoElementSelector');
+		}
+	});
+
+	it('parses @keyframes', () => {
+		const ast = parseCss('@keyframes fade { from { opacity: 0; } to { opacity: 1; } }');
+		assert.equal(ast.children.length, 1);
+		assert.equal(ast.children[0].type, 'Atrule');
+		if (ast.children[0].type === 'Atrule') {
+			assert.equal(ast.children[0].name, 'keyframes');
+			assert.notEqual(ast.children[0].block, null);
+		}
+	});
+
+	it('parses class and id selectors', () => {
+		const ast = parseCss('.foo#bar { color: red; }');
+		assert.equal(ast.children.length, 1);
+		const rule = ast.children[0];
+		if (rule.type === 'Rule') {
+			const selectors = rule.prelude.children[0].children[0].selectors;
+			assert.equal(selectors.length, 2);
+			assert.equal(selectors[0].type, 'ClassSelector');
+			assert.equal(selectors[1].type, 'IdSelector');
+		}
+	});
+
+	it('parses attribute selectors', () => {
+		const ast = parseCss('[data-foo="bar"] { color: red; }');
+		assert.equal(ast.children.length, 1);
+		const rule = ast.children[0];
+		if (rule.type === 'Rule') {
+			const selectors = rule.prelude.children[0].children[0].selectors;
+			assert.equal(selectors.length, 1);
+			assert.equal(selectors[0].type, 'AttributeSelector');
+			if (selectors[0].type === 'AttributeSelector') {
+				assert.equal(selectors[0].name, 'data-foo');
+				assert.equal(selectors[0].value, 'bar');
+			}
+		}
+	});
+
+	it('parses escaped characters', () => {
+		const ast = parseCss("div { background: url('./example.png?\\''); }");
+		assert.equal(ast.type, 'StyleSheetFile');
+		assert.equal(ast.children.length, 1);
+		const rule = ast.children[0];
+		assert.equal(rule.type, 'Rule');
+		if (rule.type === 'Rule') {
+			const declaration = rule.block.children[0];
+			assert.equal(declaration.type, 'Declaration');
+			if (declaration.type === 'Declaration') {
+				assert.equal(declaration.value, "url('./example.png?\\'')");
+			}
+		}
+	});
+});
diff --git a/packages/svelte/tests/css/samples/attribute-selector-html-case-insensitive/expected.css b/packages/svelte/tests/css/samples/attribute-selector-html-case-insensitive/expected.css
new file mode 100644
index 0000000000..01ec1b2269
--- /dev/null
+++ b/packages/svelte/tests/css/samples/attribute-selector-html-case-insensitive/expected.css
@@ -0,0 +1,11 @@
+	form[method="get"].svelte-xyz h1:where(.svelte-xyz) {
+		color: red;
+	}
+
+	form[method="post"].svelte-xyz h1:where(.svelte-xyz) {
+		color: blue;
+	}
+
+	input[type="text"].svelte-xyz {
+		color: green;
+	}
diff --git a/packages/svelte/tests/css/samples/attribute-selector-html-case-insensitive/expected.html b/packages/svelte/tests/css/samples/attribute-selector-html-case-insensitive/expected.html
new file mode 100644
index 0000000000..101c03f836
--- /dev/null
+++ b/packages/svelte/tests/css/samples/attribute-selector-html-case-insensitive/expected.html
@@ -0,0 +1 @@
+<form class="svelte-xyz" method="GET"><h1 class="svelte-xyz">Hello</h1></form> <form class="svelte-xyz" method="POST"><h1 class="svelte-xyz">World</h1></form> <input class="svelte-xyz" type="Text" />
diff --git a/packages/svelte/tests/css/samples/attribute-selector-html-case-insensitive/input.svelte b/packages/svelte/tests/css/samples/attribute-selector-html-case-insensitive/input.svelte
new file mode 100644
index 0000000000..e11a922d75
--- /dev/null
+++ b/packages/svelte/tests/css/samples/attribute-selector-html-case-insensitive/input.svelte
@@ -0,0 +1,23 @@
+<form method="GET">
+	<h1>Hello</h1>
+</form>
+
+<form method="POST">
+	<h1>World</h1>
+</form>
+
+<input type="Text" />
+
+<style>
+	form[method="get"] h1 {
+		color: red;
+	}
+
+	form[method="post"] h1 {
+		color: blue;
+	}
+
+	input[type="text"] {
+		color: green;
+	}
+</style>
diff --git a/packages/svelte/tests/css/samples/attribute-selector-matches-derictive/expected.css b/packages/svelte/tests/css/samples/attribute-selector-matches-derictive/expected.css
new file mode 100644
index 0000000000..4b5e4bfd09
--- /dev/null
+++ b/packages/svelte/tests/css/samples/attribute-selector-matches-derictive/expected.css
@@ -0,0 +1,2 @@
+	span[class].svelte-xyz { color: green }
+	div[style].svelte-xyz { color: green }
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/attribute-selector-matches-derictive/input.svelte b/packages/svelte/tests/css/samples/attribute-selector-matches-derictive/input.svelte
new file mode 100644
index 0000000000..2f9ab202ca
--- /dev/null
+++ b/packages/svelte/tests/css/samples/attribute-selector-matches-derictive/input.svelte
@@ -0,0 +1,7 @@
+<span class:foo={true}></span>
+<div style:--foo="bar"></div>
+
+<style>
+	span[class] { color: green }
+	div[style] { color: green }
+</style>
diff --git a/packages/svelte/tests/css/samples/class-directive/_config.js b/packages/svelte/tests/css/samples/class-directive/_config.js
new file mode 100644
index 0000000000..abeb8b6329
--- /dev/null
+++ b/packages/svelte/tests/css/samples/class-directive/_config.js
@@ -0,0 +1,20 @@
+import { test } from '../../test';
+
+export default test({
+	warnings: [
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector ".forth"\nhttps://svelte.dev/e/css_unused_selector',
+			start: {
+				line: 8,
+				column: 2,
+				character: 190
+			},
+			end: {
+				line: 8,
+				column: 8,
+				character: 196
+			}
+		}
+	]
+});
diff --git a/packages/svelte/tests/css/samples/class-directive/expected.css b/packages/svelte/tests/css/samples/class-directive/expected.css
new file mode 100644
index 0000000000..b3a74baee5
--- /dev/null
+++ b/packages/svelte/tests/css/samples/class-directive/expected.css
@@ -0,0 +1,5 @@
+
+  .zero.first.svelte-xyz { color: green }
+  .second.svelte-xyz { color: green }
+  .third.svelte-xyz { color: green }
+  /* (unused) .forth { color: red }*/
diff --git a/packages/svelte/tests/css/samples/class-directive/input.svelte b/packages/svelte/tests/css/samples/class-directive/input.svelte
new file mode 100644
index 0000000000..70075f89d4
--- /dev/null
+++ b/packages/svelte/tests/css/samples/class-directive/input.svelte
@@ -0,0 +1,9 @@
+<div class="zero" class:first={true}></div>
+<div class:second={true} class:third={true}></div>
+
+<style>
+  .zero.first { color: green }
+  .second { color: green }
+  .third { color: green }
+  .forth { color: red }
+</style>
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/clsx-can-prune/_config.js b/packages/svelte/tests/css/samples/clsx-can-prune/_config.js
new file mode 100644
index 0000000000..43c80a318d
--- /dev/null
+++ b/packages/svelte/tests/css/samples/clsx-can-prune/_config.js
@@ -0,0 +1,20 @@
+import { test } from '../../test';
+
+export default test({
+	warnings: [
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector ".unused"\nhttps://svelte.dev/e/css_unused_selector',
+			start: {
+				line: 24,
+				column: 1,
+				character: 548
+			},
+			end: {
+				line: 24,
+				column: 8,
+				character: 555
+			}
+		}
+	]
+});
diff --git a/packages/svelte/tests/css/samples/clsx-can-prune/expected.css b/packages/svelte/tests/css/samples/clsx-can-prune/expected.css
new file mode 100644
index 0000000000..620db0f022
--- /dev/null
+++ b/packages/svelte/tests/css/samples/clsx-can-prune/expected.css
@@ -0,0 +1,12 @@
+
+	.used1.svelte-xyz { color: green; }
+	.used2.svelte-xyz { color: green; }
+	.used3.svelte-xyz { color: green; }
+	.used4.svelte-xyz { color: green; }
+	.used5.svelte-xyz { color: green; }
+	.used6.svelte-xyz { color: green; }
+	.used7.svelte-xyz { color: green; }
+	.used8.svelte-xyz { color: green; }
+	.used9.svelte-xyz { color: green; }
+
+	/* (unused) .unused { color: red; }*/
diff --git a/packages/svelte/tests/css/samples/clsx-can-prune/input.svelte b/packages/svelte/tests/css/samples/clsx-can-prune/input.svelte
new file mode 100644
index 0000000000..2c75a39f99
--- /dev/null
+++ b/packages/svelte/tests/css/samples/clsx-can-prune/input.svelte
@@ -0,0 +1,25 @@
+<script>
+	let condition = Math.random() < 0.5;
+</script>
+
+<p class={['used1']}></p>
+<p class={[{ used2: true }]}></p>
+<p class={{ used3: true }}></p>
+<p class={{ 'used4 used5': true }}></p>
+<p class={{ used6 }}></p>
+<p class={[condition ? 'used7' : 'used8']}></p>
+<p class={[condition && 'used9']}></p>
+
+<style>
+	.used1 { color: green; }
+	.used2 { color: green; }
+	.used3 { color: green; }
+	.used4 { color: green; }
+	.used5 { color: green; }
+	.used6 { color: green; }
+	.used7 { color: green; }
+	.used8 { color: green; }
+	.used9 { color: green; }
+
+	.unused { color: red; }
+</style>
diff --git a/packages/svelte/tests/css/samples/clsx-cannot-prune-1/expected.css b/packages/svelte/tests/css/samples/clsx-cannot-prune-1/expected.css
new file mode 100644
index 0000000000..243bdb2b82
--- /dev/null
+++ b/packages/svelte/tests/css/samples/clsx-cannot-prune-1/expected.css
@@ -0,0 +1,2 @@
+
+	.x.svelte-xyz { color: green; }
diff --git a/packages/svelte/tests/css/samples/clsx-cannot-prune-1/input.svelte b/packages/svelte/tests/css/samples/clsx-cannot-prune-1/input.svelte
new file mode 100644
index 0000000000..d9de0bdfd4
--- /dev/null
+++ b/packages/svelte/tests/css/samples/clsx-cannot-prune-1/input.svelte
@@ -0,0 +1,5 @@
+<h1 class={[foo]}>hello world</h1>
+
+<style>
+	.x { color: green; }
+</style>
diff --git a/packages/svelte/tests/css/samples/clsx-cannot-prune-2/expected.css b/packages/svelte/tests/css/samples/clsx-cannot-prune-2/expected.css
new file mode 100644
index 0000000000..243bdb2b82
--- /dev/null
+++ b/packages/svelte/tests/css/samples/clsx-cannot-prune-2/expected.css
@@ -0,0 +1,2 @@
+
+	.x.svelte-xyz { color: green; }
diff --git a/packages/svelte/tests/css/samples/clsx-cannot-prune-2/input.svelte b/packages/svelte/tests/css/samples/clsx-cannot-prune-2/input.svelte
new file mode 100644
index 0000000000..212deab4f0
--- /dev/null
+++ b/packages/svelte/tests/css/samples/clsx-cannot-prune-2/input.svelte
@@ -0,0 +1,5 @@
+<h1 class={{ foo: true, ...rest }}>hello world</h1>
+
+<style>
+	.x { color: green; }
+</style>
diff --git a/packages/svelte/tests/css/samples/clsx-cannot-prune-3/expected.css b/packages/svelte/tests/css/samples/clsx-cannot-prune-3/expected.css
new file mode 100644
index 0000000000..243bdb2b82
--- /dev/null
+++ b/packages/svelte/tests/css/samples/clsx-cannot-prune-3/expected.css
@@ -0,0 +1,2 @@
+
+	.x.svelte-xyz { color: green; }
diff --git a/packages/svelte/tests/css/samples/clsx-cannot-prune-3/input.svelte b/packages/svelte/tests/css/samples/clsx-cannot-prune-3/input.svelte
new file mode 100644
index 0000000000..2dfa1afd18
--- /dev/null
+++ b/packages/svelte/tests/css/samples/clsx-cannot-prune-3/input.svelte
@@ -0,0 +1,5 @@
+<h1 class={{ [foo]: true }}>hello world</h1>
+
+<style>
+	.x { color: green; }
+</style>
diff --git a/packages/svelte/tests/css/samples/comment-with-apostrophe/expected.css b/packages/svelte/tests/css/samples/comment-with-apostrophe/expected.css
new file mode 100644
index 0000000000..a196d53cc8
--- /dev/null
+++ b/packages/svelte/tests/css/samples/comment-with-apostrophe/expected.css
@@ -0,0 +1,4 @@
+
+	p.svelte-xyz {
+		padding: 0 /* it's a comment */ 1em;
+	}
diff --git a/packages/svelte/tests/css/samples/comment-with-apostrophe/input.svelte b/packages/svelte/tests/css/samples/comment-with-apostrophe/input.svelte
new file mode 100644
index 0000000000..0f9e0d2355
--- /dev/null
+++ b/packages/svelte/tests/css/samples/comment-with-apostrophe/input.svelte
@@ -0,0 +1,7 @@
+<p>red</p>
+
+<style>
+	p {
+		padding: 0 /* it's a comment */ 1em;
+	}
+</style>
diff --git a/packages/svelte/tests/css/samples/css-prune-edge-cases/_config.js b/packages/svelte/tests/css/samples/css-prune-edge-cases/_config.js
new file mode 100644
index 0000000000..c9d3f0cb5a
--- /dev/null
+++ b/packages/svelte/tests/css/samples/css-prune-edge-cases/_config.js
@@ -0,0 +1,48 @@
+import { test } from '../../test';
+
+export default test({
+	warnings: [
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector ".foob"',
+			start: {
+				line: 64,
+				column: 1,
+				character: 1574
+			},
+			end: {
+				line: 64,
+				column: 6,
+				character: 1579
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "main > article > div > section > span"',
+			start: {
+				line: 84,
+				column: 1,
+				character: 2196
+			},
+			end: {
+				line: 84,
+				column: 38,
+				character: 2233
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "nav:has(button).primary"',
+			start: {
+				line: 95,
+				column: 1,
+				character: 2560
+			},
+			end: {
+				line: 95,
+				column: 24,
+				character: 2583
+			}
+		}
+	]
+});
diff --git a/packages/svelte/tests/css/samples/css-prune-edge-cases/expected.css b/packages/svelte/tests/css/samples/css-prune-edge-cases/expected.css
new file mode 100644
index 0000000000..dbacb796bb
--- /dev/null
+++ b/packages/svelte/tests/css/samples/css-prune-edge-cases/expected.css
@@ -0,0 +1,80 @@
+
+	/* === ~= word matching === */
+
+	/* Should match: "foo" is a whole word in class="foo bar" */
+	.foo.svelte-xyz { color: green; }
+
+	/* Should match: "bar" is a whole word in class="foo bar" */
+	.bar.svelte-xyz { color: green; }
+
+	/* Should match: "foobar" is the whole class value */
+	.foobar.svelte-xyz { color: green; }
+
+	/* Should match: "bar-foo" is a whole word (hyphen not whitespace) */
+	.bar-foo.svelte-xyz { color: green; }
+
+	/* Should match: "baz" is a whole word in class="bar-foo baz" */
+	.baz.svelte-xyz { color: green; }
+
+	/* Should NOT match: "foob" is not a word in any element's class */
+	/* (unused) .foob { color: red; }*/
+
+	/* Should NOT match: "afoo" is a word but "foo-x" is not "foo" */
+	[class~="foo-x"].svelte-xyz { color: green; }
+
+	/* Attribute selector with ~= operator directly */
+	[class~="afoo"].svelte-xyz { color: green; }
+
+	/* === Deep combinator chains (4+ levels) === */
+
+	/* Should match: exact chain main > article > section > div > span */
+	main.svelte-xyz > article:where(.svelte-xyz) > section:where(.svelte-xyz) > div:where(.svelte-xyz) > span:where(.svelte-xyz) { color: green; }
+
+	/* Should match: descendant chain */
+	main.svelte-xyz article:where(.svelte-xyz) section:where(.svelte-xyz) div:where(.svelte-xyz) span:where(.svelte-xyz) { color: green; }
+
+	/* Should match: mixed combinators */
+	main.svelte-xyz > article:where(.svelte-xyz) section:where(.svelte-xyz) > div:where(.svelte-xyz) span:where(.svelte-xyz) { color: green; }
+
+	/* Should NOT match: wrong nesting order */
+	/* (unused) main > article > div > section > span { color: red; }*/
+
+	/* === :has() combined with other selectors === */
+
+	/* Should match: nav.primary has <a> descendant */
+	nav:has(a:where(.svelte-xyz)).primary.svelte-xyz { color: green; }
+
+	/* Should match: nav.secondary has <button> descendant */
+	nav:has(button:where(.svelte-xyz)).secondary.svelte-xyz { color: green; }
+
+	/* Should NOT match: nav.primary doesn't have <button> */
+	/* (unused) nav:has(button).primary { color: red; }*/
+
+	/* Multiple :has() on same element */
+	main.svelte-xyz:has(article:where(.svelte-xyz)):has(span:where(.svelte-xyz)) { color: green; }
+
+	/* :has() with child combinator */
+	main.svelte-xyz:has(> article:where(.svelte-xyz)) { color: green; }
+
+	/* === Escaped selectors === */
+	.a\-b.svelte-xyz { color: green; }
+
+	/* === :is()/:where()/:not() with deep selectors === */
+
+	/* :is() with matching selector */
+	header.svelte-xyz :is(h1:where(.svelte-xyz)) { color: green; }
+
+	/* :where() with matching selector */
+	ul.svelte-xyz :where(li:where(.svelte-xyz)) { color: green; }
+
+	/* :not() — should match span since it's not a div */
+	span.svelte-xyz:not(div) { color: green; }
+
+	/* :is() with deep combinator */
+	ul.svelte-xyz :is(li:where(.svelte-xyz) > span:where(.svelte-xyz)) { color: green; }
+
+	/* :not() with class — p.a-b is :not(.unused) */
+	p.svelte-xyz:not(.unused) { color: green; }
+
+	/* Complex: :has() + :is() */
+	ul.svelte-xyz:has(li:where(.svelte-xyz)) :is(span:where(.svelte-xyz)) { color: green; }
diff --git a/packages/svelte/tests/css/samples/css-prune-edge-cases/input.svelte b/packages/svelte/tests/css/samples/css-prune-edge-cases/input.svelte
new file mode 100644
index 0000000000..a17d7255b1
--- /dev/null
+++ b/packages/svelte/tests/css/samples/css-prune-edge-cases/input.svelte
@@ -0,0 +1,125 @@
+<!-- Edge cases for CSS pruning optimizations:
+  1. ~= word matching (indexOf vs split)
+  2. Deep combinator chains (index-based apply_selector)
+  3. :has() combined with other selectors (single-pass handling)
+  4. Escaped selectors (backslash skip optimization)
+  5. :is()/:where()/:not() with deep selectors
+-->
+
+<!-- ~= word matching edge cases -->
+<div class="foo bar">word match</div>
+<div class="foobar">substring only</div>
+<div class="bar-foo baz">hyphen separated</div>
+<div class="afoo foo-x">prefix substring</div>
+
+<!-- Deep combinator chains -->
+<main>
+	<article>
+		<section>
+			<div>
+				<span class="deep">deep</span>
+			</div>
+		</section>
+	</article>
+</main>
+
+<!-- :has() with class selectors -->
+<nav class="primary">
+	<a href="/">link</a>
+</nav>
+<nav class="secondary">
+	<button>action</button>
+</nav>
+
+<!-- Escaped selectors -->
+<p class="a-b">escaped</p>
+
+<!-- :is()/:where()/:not() with combinators -->
+<header>
+	<h1>title</h1>
+</header>
+<ul>
+	<li class="active"><span>item</span></li>
+</ul>
+
+<style>
+	/* === ~= word matching === */
+
+	/* Should match: "foo" is a whole word in class="foo bar" */
+	.foo { color: green; }
+
+	/* Should match: "bar" is a whole word in class="foo bar" */
+	.bar { color: green; }
+
+	/* Should match: "foobar" is the whole class value */
+	.foobar { color: green; }
+
+	/* Should match: "bar-foo" is a whole word (hyphen not whitespace) */
+	.bar-foo { color: green; }
+
+	/* Should match: "baz" is a whole word in class="bar-foo baz" */
+	.baz { color: green; }
+
+	/* Should NOT match: "foob" is not a word in any element's class */
+	.foob { color: red; }
+
+	/* Should NOT match: "afoo" is a word but "foo-x" is not "foo" */
+	[class~="foo-x"] { color: green; }
+
+	/* Attribute selector with ~= operator directly */
+	[class~="afoo"] { color: green; }
+
+	/* === Deep combinator chains (4+ levels) === */
+
+	/* Should match: exact chain main > article > section > div > span */
+	main > article > section > div > span { color: green; }
+
+	/* Should match: descendant chain */
+	main article section div span { color: green; }
+
+	/* Should match: mixed combinators */
+	main > article section > div span { color: green; }
+
+	/* Should NOT match: wrong nesting order */
+	main > article > div > section > span { color: red; }
+
+	/* === :has() combined with other selectors === */
+
+	/* Should match: nav.primary has <a> descendant */
+	nav:has(a).primary { color: green; }
+
+	/* Should match: nav.secondary has <button> descendant */
+	nav:has(button).secondary { color: green; }
+
+	/* Should NOT match: nav.primary doesn't have <button> */
+	nav:has(button).primary { color: red; }
+
+	/* Multiple :has() on same element */
+	main:has(article):has(span) { color: green; }
+
+	/* :has() with child combinator */
+	main:has(> article) { color: green; }
+
+	/* === Escaped selectors === */
+	.a\-b { color: green; }
+
+	/* === :is()/:where()/:not() with deep selectors === */
+
+	/* :is() with matching selector */
+	header :is(h1) { color: green; }
+
+	/* :where() with matching selector */
+	ul :where(li) { color: green; }
+
+	/* :not() — should match span since it's not a div */
+	span:not(div) { color: green; }
+
+	/* :is() with deep combinator */
+	ul :is(li > span) { color: green; }
+
+	/* :not() with class — p.a-b is :not(.unused) */
+	p:not(.unused) { color: green; }
+
+	/* Complex: :has() + :is() */
+	ul:has(li) :is(span) { color: green; }
+</style>
diff --git a/packages/svelte/tests/css/samples/double-hyphen/expected.css b/packages/svelte/tests/css/samples/double-hyphen/expected.css
new file mode 100644
index 0000000000..ab4921b657
--- /dev/null
+++ b/packages/svelte/tests/css/samples/double-hyphen/expected.css
@@ -0,0 +1,4 @@
+
+	.--foo.svelte-xyz {
+		color: red;
+	}
diff --git a/packages/svelte/tests/css/samples/double-hyphen/input.svelte b/packages/svelte/tests/css/samples/double-hyphen/input.svelte
new file mode 100644
index 0000000000..e2907f9344
--- /dev/null
+++ b/packages/svelte/tests/css/samples/double-hyphen/input.svelte
@@ -0,0 +1,7 @@
+<div class="--foo"></div>
+
+<style>
+	.--foo {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-slot/_config.js b/packages/svelte/tests/css/samples/general-siblings-combinator-slot/_config.js
index 97e470d1c3..7644865495 100644
--- a/packages/svelte/tests/css/samples/general-siblings-combinator-slot/_config.js
+++ b/packages/svelte/tests/css/samples/general-siblings-combinator-slot/_config.js
@@ -5,32 +5,20 @@ export default test({
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".b ~ .c"',
-			start: { character: 137, column: 1, line: 11 },
-			end: { character: 144, column: 8, line: 11 }
+			start: { character: 191, column: 1, line: 13 },
+			end: { character: 198, column: 8, line: 13 }
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".c ~ .f"',
-			start: { character: 162, column: 1, line: 12 },
-			end: { character: 169, column: 8, line: 12 }
-		},
-		{
-			code: 'css_unused_selector',
-			message: 'Unused CSS selector ".f ~ .g"',
-			start: { character: 187, column: 1, line: 13 },
-			end: { character: 194, column: 8, line: 13 }
+			start: { character: 216, column: 1, line: 14 },
+			end: { character: 223, column: 8, line: 14 }
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".b ~ .f"',
-			start: { character: 212, column: 1, line: 14 },
-			end: { character: 219, column: 8, line: 14 }
-		},
-		{
-			code: 'css_unused_selector',
-			message: 'Unused CSS selector ".b ~ .g"',
-			start: { character: 237, column: 1, line: 15 },
-			end: { character: 244, column: 8, line: 15 }
+			start: { character: 241, column: 1, line: 15 },
+			end: { character: 248, column: 8, line: 15 }
 		}
 	]
 });
diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-slot/expected.css b/packages/svelte/tests/css/samples/general-siblings-combinator-slot/expected.css
index 67a19d10c9..53fca3ae9e 100644
--- a/packages/svelte/tests/css/samples/general-siblings-combinator-slot/expected.css
+++ b/packages/svelte/tests/css/samples/general-siblings-combinator-slot/expected.css
@@ -2,10 +2,10 @@
 	.d.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
 	.a.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }
 	.a.svelte-xyz ~ .b:where(.svelte-xyz) { color: green; }
+	.f.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }
+	.b.svelte-xyz ~ .g:where(.svelte-xyz) { color: green; }
 
 	/* no match */
 	/* (unused) .b ~ .c { color: red; }*/
 	/* (unused) .c ~ .f { color: red; }*/
-	/* (unused) .f ~ .g { color: red; }*/
 	/* (unused) .b ~ .f { color: red; }*/
-	/* (unused) .b ~ .g { color: red; }*/
diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-slot/input.svelte b/packages/svelte/tests/css/samples/general-siblings-combinator-slot/input.svelte
index 2e2846fa87..52264d3a5a 100644
--- a/packages/svelte/tests/css/samples/general-siblings-combinator-slot/input.svelte
+++ b/packages/svelte/tests/css/samples/general-siblings-combinator-slot/input.svelte
@@ -6,13 +6,13 @@
 	.d ~ .e { color: green; }
 	.a ~ .g { color: green; }
 	.a ~ .b { color: green; }
+	.f ~ .g { color: green; }
+	.b ~ .g { color: green; }
 
 	/* no match */
 	.b ~ .c { color: red; }
 	.c ~ .f { color: red; }
-	.f ~ .g { color: red; }
 	.b ~ .f { color: red; }
-	.b ~ .g { color: red; }
 </style>
 
 <div class="a"></div>
diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-svelteelement/_config.js b/packages/svelte/tests/css/samples/general-siblings-combinator-svelteelement/_config.js
index 7c50a76bbb..a7d6c3a99d 100644
--- a/packages/svelte/tests/css/samples/general-siblings-combinator-svelteelement/_config.js
+++ b/packages/svelte/tests/css/samples/general-siblings-combinator-svelteelement/_config.js
@@ -5,15 +5,15 @@ export default test({
 		{
 			code: 'css_unused_selector',
 			end: {
-				character: 496,
+				character: 627,
 				column: 10,
-				line: 26
+				line: 32
 			},
 			message: 'Unused CSS selector ".x + .bar"',
 			start: {
-				character: 487,
+				character: 618,
 				column: 1,
-				line: 26
+				line: 32
 			}
 		}
 	]
diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-svelteelement/expected.css b/packages/svelte/tests/css/samples/general-siblings-combinator-svelteelement/expected.css
index 830d366702..d3fa8c97d2 100644
--- a/packages/svelte/tests/css/samples/general-siblings-combinator-svelteelement/expected.css
+++ b/packages/svelte/tests/css/samples/general-siblings-combinator-svelteelement/expected.css
@@ -9,5 +9,8 @@
 	.x.svelte-xyz ~ .foo:where(.svelte-xyz) span:where(.svelte-xyz) { color: green; }
 	.x.svelte-xyz ~ .bar:where(.svelte-xyz) { color: green; }
 
+	.z.svelte-xyz + .z:where(.svelte-xyz) { color: green; }
+	.z.svelte-xyz ~ .z:where(.svelte-xyz) { color: green; }
+
 	/* no match */
 	/* (unused) .x + .bar { color: green; }*/
diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-svelteelement/input.svelte b/packages/svelte/tests/css/samples/general-siblings-combinator-svelteelement/input.svelte
index 1c51a2c516..655fd86153 100644
--- a/packages/svelte/tests/css/samples/general-siblings-combinator-svelteelement/input.svelte
+++ b/packages/svelte/tests/css/samples/general-siblings-combinator-svelteelement/input.svelte
@@ -10,6 +10,9 @@
 	</p>
 	<p class="bar">bar</p>
 </div>
+{#each [1]}
+	<svelte:element class="z" this={tag}></svelte:element>
+{/each}
 
 <style>
 	.before + .foo { color: green; }
@@ -22,6 +25,9 @@
 	.x ~ .foo span { color: green; }
 	.x ~ .bar { color: green; }
 
+	.z + .z { color: green; }
+	.z ~ .z { color: green; }
+
 	/* no match */
 	.x + .bar { color: green; }
 </style>
diff --git a/packages/svelte/tests/css/samples/global-block/_config.js b/packages/svelte/tests/css/samples/global-block/_config.js
index bee0d7204d..84b4989f76 100644
--- a/packages/svelte/tests/css/samples/global-block/_config.js
+++ b/packages/svelte/tests/css/samples/global-block/_config.js
@@ -7,14 +7,28 @@ export default test({
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".unused :global"',
 			start: {
-				line: 69,
+				line: 73,
 				column: 1,
-				character: 917
+				character: 966
 			},
 			end: {
-				line: 69,
+				line: 73,
 				column: 16,
-				character: 932
+				character: 981
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "unused :global"',
+			start: {
+				line: 104,
+				column: 29,
+				character: 1272
+			},
+			end: {
+				line: 104,
+				column: 43,
+				character: 1286
 			}
 		}
 	]
diff --git a/packages/svelte/tests/css/samples/global-block/expected.css b/packages/svelte/tests/css/samples/global-block/expected.css
index 8a7c493d7c..ef68280093 100644
--- a/packages/svelte/tests/css/samples/global-block/expected.css
+++ b/packages/svelte/tests/css/samples/global-block/expected.css
@@ -3,6 +3,10 @@
 		.x {
 			color: green;
 		}
+
+		.a, .selector, .list {
+			color: green;
+		}
 	/*}*/
 
 	div.svelte-xyz {
@@ -35,7 +39,7 @@
 		/*}*/
 	}
 
-	/* ...wich is equivalent to `div :global { &.x { ...} }` ... */
+	/* ...which is equivalent to `div :global { &.x { ...} }` ... */
 	div.svelte-xyz {
 		&.x {
 			color: green;
@@ -47,7 +51,7 @@
 		color: green;
 	}
 
-	/* ...and therefore `div { :global.x { ... }` aswell */
+	/* ...and therefore `div { :global.x { ... }` as well */
 	div.svelte-xyz {
 		&.x {
 			color: green;
@@ -74,6 +78,10 @@
 			animation: svelte-xyz-test 1s;
 		}
 
+		.y{
+			animation: test-in 1s;
+		}
+
 		@keyframes test-in{
 			to{
 				opacity: 1;
@@ -86,3 +94,13 @@
 			opacity: 1;
 		}
 	}
+
+	 x,  y {
+		color: green;
+	}
+
+	div.svelte-xyz, div.svelte-xyz y /* (unused) unused*/ {
+		z {
+			color: green;
+		}
+	}
diff --git a/packages/svelte/tests/css/samples/global-block/input.svelte b/packages/svelte/tests/css/samples/global-block/input.svelte
index dc1a754010..1a9993bfe0 100644
--- a/packages/svelte/tests/css/samples/global-block/input.svelte
+++ b/packages/svelte/tests/css/samples/global-block/input.svelte
@@ -5,6 +5,10 @@
 		.x {
 			color: green;
 		}
+
+		.a, .selector, .list {
+			color: green;
+		}
 	}
 
 	div :global {
@@ -37,7 +41,7 @@
 		}
 	}
 
-	/* ...wich is equivalent to `div :global { &.x { ...} }` ... */
+	/* ...which is equivalent to `div :global { &.x { ...} }` ... */
 	div :global {
 		&.x {
 			color: green;
@@ -49,7 +53,7 @@
 		color: green;
 	}
 
-	/* ...and therefore `div { :global.x { ... }` aswell */
+	/* ...and therefore `div { :global.x { ... }` as well */
 	div {
 		:global.x {
 			color: green;
@@ -76,6 +80,10 @@
 			animation: test 1s;
 		}
 
+		.y{
+			animation: test-in 1s;
+		}
+
 		@keyframes test-in{
 			to{
 				opacity: 1;
@@ -88,4 +96,14 @@
 			opacity: 1;
 		}
 	}
+
+	:global x, :global y {
+		color: green;
+	}
+
+	div :global, div :global y, unused :global {
+		z {
+			color: green;
+		}
+	}
 </style>
diff --git a/packages/svelte/tests/css/samples/global-keyframes/_config.js b/packages/svelte/tests/css/samples/global-keyframes/_config.js
new file mode 100644
index 0000000000..30953854ad
--- /dev/null
+++ b/packages/svelte/tests/css/samples/global-keyframes/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	hasGlobal: true
+});
diff --git a/packages/svelte/tests/css/samples/global-local-nested/_config.js b/packages/svelte/tests/css/samples/global-local-nested/_config.js
new file mode 100644
index 0000000000..5a7796ebac
--- /dev/null
+++ b/packages/svelte/tests/css/samples/global-local-nested/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	hasGlobal: false
+});
diff --git a/packages/svelte/tests/css/samples/global-local-nested/expected.css b/packages/svelte/tests/css/samples/global-local-nested/expected.css
new file mode 100644
index 0000000000..8eadf2b948
--- /dev/null
+++ b/packages/svelte/tests/css/samples/global-local-nested/expected.css
@@ -0,0 +1,12 @@
+
+	div.svelte-xyz {
+		.whatever {
+			color: green;
+		}
+	}
+
+	.whatever {
+		div.svelte-xyz {
+			color: green;
+		}
+	}
diff --git a/packages/svelte/tests/css/samples/global-local-nested/input.svelte b/packages/svelte/tests/css/samples/global-local-nested/input.svelte
new file mode 100644
index 0000000000..60210be753
--- /dev/null
+++ b/packages/svelte/tests/css/samples/global-local-nested/input.svelte
@@ -0,0 +1,15 @@
+<div>{@html whatever}</div>
+
+<style>
+	div {
+		:global(.whatever) {
+			color: green;
+		}
+	}
+
+	:global(.whatever) {
+		div {
+			color: green;
+		}
+	}
+</style>
diff --git a/packages/svelte/tests/css/samples/global-local/_config.js b/packages/svelte/tests/css/samples/global-local/_config.js
new file mode 100644
index 0000000000..5a7796ebac
--- /dev/null
+++ b/packages/svelte/tests/css/samples/global-local/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	hasGlobal: false
+});
diff --git a/packages/svelte/tests/css/samples/global-local/expected.css b/packages/svelte/tests/css/samples/global-local/expected.css
new file mode 100644
index 0000000000..c4fc74fb1a
--- /dev/null
+++ b/packages/svelte/tests/css/samples/global-local/expected.css
@@ -0,0 +1,8 @@
+
+	div.svelte-xyz .whatever {
+		color: green;
+	}
+
+	.whatever div.svelte-xyz {
+		color: green;
+	}
diff --git a/packages/svelte/tests/css/samples/global-local/input.svelte b/packages/svelte/tests/css/samples/global-local/input.svelte
new file mode 100644
index 0000000000..bff97ab485
--- /dev/null
+++ b/packages/svelte/tests/css/samples/global-local/input.svelte
@@ -0,0 +1,11 @@
+<div>{@html whatever}</div>
+
+<style>
+	div :global(.whatever) {
+		color: green;
+	}
+
+	:global(.whatever) div {
+		color: green;
+	}
+</style>
diff --git a/packages/svelte/tests/css/samples/global-with-nesting/_config.js b/packages/svelte/tests/css/samples/global-with-nesting/_config.js
index 292c6c49ac..6cec7c2360 100644
--- a/packages/svelte/tests/css/samples/global-with-nesting/_config.js
+++ b/packages/svelte/tests/css/samples/global-with-nesting/_config.js
@@ -1,5 +1,7 @@
 import { test } from '../../test';
 
 export default test({
-	warnings: []
+	warnings: [],
+
+	hasGlobal: false
 });
diff --git a/packages/svelte/tests/css/samples/global-with-nesting/expected.css b/packages/svelte/tests/css/samples/global-with-nesting/expected.css
index dcb8a0e481..1863c57d85 100644
--- a/packages/svelte/tests/css/samples/global-with-nesting/expected.css
+++ b/packages/svelte/tests/css/samples/global-with-nesting/expected.css
@@ -1,5 +1,10 @@
 	div.svelte-xyz {
 		&.class{
-			color: red;
+			color: green;
+		}
+	}
+	* {
+		&:hover .class.svelte-xyz {
+			color: green;
 		}
 	}
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/global-with-nesting/input.svelte b/packages/svelte/tests/css/samples/global-with-nesting/input.svelte
index 0c73ed7a78..2c1d2b5ebd 100644
--- a/packages/svelte/tests/css/samples/global-with-nesting/input.svelte
+++ b/packages/svelte/tests/css/samples/global-with-nesting/input.svelte
@@ -1,7 +1,12 @@
 <style>
 	div {
 		&:global(.class){
-			color: red;
+			color: green;
+		}
+	}
+	:global(*) {
+		&:hover .class {
+			color: green;
 		}
 	}
 </style>
diff --git a/packages/svelte/tests/css/samples/global/_config.js b/packages/svelte/tests/css/samples/global/_config.js
new file mode 100644
index 0000000000..30953854ad
--- /dev/null
+++ b/packages/svelte/tests/css/samples/global/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	hasGlobal: true
+});
diff --git a/packages/svelte/tests/css/samples/has/_config.js b/packages/svelte/tests/css/samples/has/_config.js
index e5dc5f3459..5700a09b96 100644
--- a/packages/svelte/tests/css/samples/has/_config.js
+++ b/packages/svelte/tests/css/samples/has/_config.js
@@ -6,182 +6,238 @@ export default test({
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".unused:has(y)"',
 			start: {
-				line: 31,
+				line: 41,
 				column: 1,
-				character: 308
+				character: 378
 			},
 			end: {
-				line: 31,
+				line: 41,
 				column: 15,
-				character: 322
+				character: 392
 			}
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".unused:has(:global(y))"',
 			start: {
-				line: 34,
+				line: 44,
 				column: 1,
-				character: 343
+				character: 413
 			},
 			end: {
-				line: 34,
+				line: 44,
 				column: 24,
-				character: 366
+				character: 436
 			}
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector "x:has(.unused)"',
 			start: {
-				line: 37,
+				line: 47,
 				column: 1,
-				character: 387
+				character: 457
 			},
 			end: {
-				line: 37,
+				line: 47,
 				column: 15,
-				character: 401
+				character: 471
 			}
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ":global(.foo):has(.unused)"',
 			start: {
-				line: 40,
+				line: 50,
 				column: 1,
-				character: 422
+				character: 492
 			},
 			end: {
-				line: 40,
+				line: 50,
 				column: 27,
-				character: 448
+				character: 518
 			}
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector "x:has(y):has(.unused)"',
 			start: {
-				line: 50,
+				line: 60,
 				column: 1,
-				character: 556
+				character: 626
 			},
 			end: {
-				line: 50,
+				line: 60,
 				column: 22,
-				character: 577
+				character: 647
 			}
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".unused"',
 			start: {
-				line: 69,
+				line: 79,
 				column: 2,
-				character: 782
+				character: 852
 			},
 			end: {
-				line: 69,
+				line: 79,
 				column: 9,
-				character: 789
+				character: 859
 			}
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".unused x:has(y)"',
 			start: {
-				line: 85,
+				line: 95,
 				column: 1,
-				character: 936
+				character: 1006
 			},
 			end: {
-				line: 85,
+				line: 95,
 				column: 17,
-				character: 952
+				character: 1022
 			}
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".unused:has(.unused)"',
 			start: {
-				line: 88,
+				line: 98,
 				column: 1,
-				character: 973
+				character: 1043
 			},
 			end: {
-				line: 88,
+				line: 98,
 				column: 21,
-				character: 993
+				character: 1063
 			}
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector "x:has(> z)"',
 			start: {
-				line: 98,
+				line: 108,
 				column: 1,
-				character: 1093
+				character: 1163
 			},
 			end: {
-				line: 98,
+				line: 108,
 				column: 11,
-				character: 1103
+				character: 1173
 			}
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector "x:has(> d)"',
 			start: {
-				line: 101,
+				line: 111,
 				column: 1,
-				character: 1124
+				character: 1194
 			},
 			end: {
-				line: 101,
+				line: 111,
 				column: 11,
-				character: 1134
+				character: 1204
 			}
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector "x:has(~ y)"',
 			start: {
-				line: 121,
+				line: 131,
+				column: 1,
+				character: 1396
+			},
+			end: {
+				line: 131,
+				column: 11,
+				character: 1406
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "d:has(+ f)"',
+			start: {
+				line: 141,
 				column: 1,
-				character: 1326
+				character: 1494
 			},
 			end: {
-				line: 121,
+				line: 141,
 				column: 11,
-				character: 1336
+				character: 1504
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "f:has(~ d)"',
+			start: {
+				line: 144,
+				column: 1,
+				character: 1525
+			},
+			end: {
+				line: 144,
+				column: 11,
+				character: 1535
 			}
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ":has(.unused)"',
 			start: {
-				line: 129,
+				line: 152,
 				column: 2,
-				character: 1409
+				character: 1608
 			},
 			end: {
-				line: 129,
+				line: 152,
 				column: 15,
-				character: 1422
+				character: 1621
 			}
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector "&:has(.unused)"',
 			start: {
-				line: 135,
+				line: 158,
 				column: 2,
-				character: 1480
+				character: 1679
 			},
 			end: {
-				line: 135,
+				line: 158,
 				column: 16,
-				character: 1494
+				character: 1693
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector ":global(.foo):has(.unused)"',
+			start: {
+				line: 166,
+				column: 1,
+				character: 1763
+			},
+			end: {
+				line: 166,
+				column: 27,
+				character: 1789
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "h:has(> h > i)"',
+			start: {
+				line: 173,
+				column: 1,
+				character: 1848
+			},
+			end: {
+				line: 173,
+				column: 15,
+				character: 1862
 			}
 		}
 	]
diff --git a/packages/svelte/tests/css/samples/has/expected.css b/packages/svelte/tests/css/samples/has/expected.css
index 68d6aad68a..2ce4d2bec5 100644
--- a/packages/svelte/tests/css/samples/has/expected.css
+++ b/packages/svelte/tests/css/samples/has/expected.css
@@ -112,6 +112,19 @@
 		color: red;
 	}*/
 
+	d.svelte-xyz:has(+ e:where(.svelte-xyz)) {
+		color: green;
+	}
+	d.svelte-xyz:has(~ f:where(.svelte-xyz)) {
+		color: green;
+	}
+	/* (unused) d:has(+ f) {
+		color: red;
+	}*/
+	/* (unused) f:has(~ d) {
+		color: red;
+	}*/
+
 	.foo {
 		.svelte-xyz:has(x:where(.svelte-xyz)) {
 			color: green;
@@ -126,3 +139,20 @@
 			color: red;
 		}*/
 	}
+
+	.foo:has(x.svelte-xyz) {
+		color: green;
+	}
+	/* (unused) :global(.foo):has(.unused) {
+		color: red;
+	}*/
+
+	g.svelte-xyz:has(> h:where(.svelte-xyz) > i:where(.svelte-xyz)) {
+		color: green;
+	}
+	/* (unused) h:has(> h > i) {
+		color: red;
+	}*/
+	g.svelte-xyz:has(+ j:where(.svelte-xyz) > k:where(.svelte-xyz)) {
+		color: green;
+	}
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/has/input.svelte b/packages/svelte/tests/css/samples/has/input.svelte
index 3487b64e8c..033471bc16 100644
--- a/packages/svelte/tests/css/samples/has/input.svelte
+++ b/packages/svelte/tests/css/samples/has/input.svelte
@@ -3,10 +3,20 @@
 		<z></z>
 		{#if foo}
 			<d></d>
+			<e></e>
+			<f></f>
 		{/if}
 	</y>
 </x>
 <c></c>
+<g>
+	<h>
+		<i></i>
+	</h>
+</g>
+<j>
+	<k></k>
+</j>
 
 <style>
 	x:has(y) {
@@ -122,6 +132,19 @@
 		color: red;
 	}
 
+	d:has(+ e) {
+		color: green;
+	}
+	d:has(~ f) {
+		color: green;
+	}
+	d:has(+ f) {
+		color: red;
+	}
+	f:has(~ d) {
+		color: red;
+	}
+
 	:global(.foo) {
 		:has(x) {
 			color: green;
@@ -136,4 +159,21 @@
 			color: red;
 		}
 	}
+
+	:global(.foo):has(x) {
+		color: green;
+	}
+	:global(.foo):has(.unused) {
+		color: red;
+	}
+
+	g:has(> h > i) {
+		color: green;
+	}
+	h:has(> h > i) {
+		color: red;
+	}
+	g:has(+ j > k) {
+		color: green;
+	}
 </style>
diff --git a/packages/svelte/tests/css/samples/render-tag-loop/_config.js b/packages/svelte/tests/css/samples/render-tag-loop/_config.js
index f623b92cc3..292c6c49ac 100644
--- a/packages/svelte/tests/css/samples/render-tag-loop/_config.js
+++ b/packages/svelte/tests/css/samples/render-tag-loop/_config.js
@@ -1,20 +1,5 @@
 import { test } from '../../test';
 
 export default test({
-	warnings: [
-		{
-			code: 'css_unused_selector',
-			message: 'Unused CSS selector "div + div"',
-			start: {
-				line: 19,
-				column: 1,
-				character: 185
-			},
-			end: {
-				line: 19,
-				column: 10,
-				character: 194
-			}
-		}
-	]
+	warnings: []
 });
diff --git a/packages/svelte/tests/css/samples/render-tag-loop/expected.css b/packages/svelte/tests/css/samples/render-tag-loop/expected.css
index 9ced15e964..3e449286c9 100644
--- a/packages/svelte/tests/css/samples/render-tag-loop/expected.css
+++ b/packages/svelte/tests/css/samples/render-tag-loop/expected.css
@@ -2,9 +2,12 @@
 	div.svelte-xyz div:where(.svelte-xyz) {
 		color: green;
 	}
-	/* (unused) div + div {
-		color: red; /* this is marked as unused, but only because we've written an infinite loop - worth fixing? *\/
-	}*/
+	div.svelte-xyz + div:where(.svelte-xyz) {
+		color: green;
+	}
 	div.svelte-xyz:has(div:where(.svelte-xyz)) {
 		color: green;
 	}
+	span.svelte-xyz:has(~span:where(.svelte-xyz)) {
+		color: green;
+	}
diff --git a/packages/svelte/tests/css/samples/render-tag-loop/input.svelte b/packages/svelte/tests/css/samples/render-tag-loop/input.svelte
index ade8df5744..3c55261f18 100644
--- a/packages/svelte/tests/css/samples/render-tag-loop/input.svelte
+++ b/packages/svelte/tests/css/samples/render-tag-loop/input.svelte
@@ -12,14 +12,22 @@
 	</div>
 {/snippet}
 
+{#snippet c()}
+	<span></span>
+	{@render c()}
+{/snippet}
+
 <style>
 	div div {
 		color: green;
 	}
 	div + div {
-		color: red; /* this is marked as unused, but only because we've written an infinite loop - worth fixing? */
+		color: green;
 	}
 	div:has(div) {
 		color: green;
 	}
+	span:has(~span) {
+		color: green;
+	}
 </style>
diff --git a/packages/svelte/tests/css/samples/selectedcontent/expected.css b/packages/svelte/tests/css/samples/selectedcontent/expected.css
new file mode 100644
index 0000000000..87b4e04de7
--- /dev/null
+++ b/packages/svelte/tests/css/samples/selectedcontent/expected.css
@@ -0,0 +1,44 @@
+
+	select.svelte-xyz,
+	.svelte-xyz::picker(select) {
+	  appearance: base-select;
+	}
+	selectedcontent.svelte-xyz b:where(.svelte-xyz){
+		color: red;
+	}
+	e.svelte-xyz{
+		selectedcontent:where(.svelte-xyz) &{
+			color: green;
+		}
+	}
+	select.svelte-xyz > button:where(.svelte-xyz) > selectedcontent:where(.svelte-xyz) > b:where(.svelte-xyz) {
+		color: blue;
+	}
+
+	select.svelte-xyz > button:where(.svelte-xyz) > selectedcontent:where(.svelte-xyz) i:where(.svelte-xyz) {
+		color: blue;
+	}
+
+	selectedcontent.svelte-xyz:has(b:where(.svelte-xyz)){
+		background-color: rebeccapurple;
+	}
+
+	selectedcontent.svelte-xyz:has(i:where(.svelte-xyz)){
+		background-color: rebeccapurple;
+	}
+
+	option.svelte-xyz > b:where(.svelte-xyz){
+		color: orange;
+	}
+
+	option.svelte-xyz b:where(.svelte-xyz){
+		color: #ff3e00;
+	}
+
+	option.svelte-xyz > b:where(.svelte-xyz) > i:where(.svelte-xyz){
+		text-decoration: underline;
+	}
+
+	option.svelte-xyz i:where(.svelte-xyz){
+		text-decoration: dashed;
+	}
diff --git a/packages/svelte/tests/css/samples/selectedcontent/input.svelte b/packages/svelte/tests/css/samples/selectedcontent/input.svelte
new file mode 100644
index 0000000000..b8305551d7
--- /dev/null
+++ b/packages/svelte/tests/css/samples/selectedcontent/input.svelte
@@ -0,0 +1,53 @@
+<select>
+	<button aria-label="Selected value">
+		<selectedcontent></selectedcontent>
+	</button>
+	<option>plain text</option>
+	<option><b>rich <i>italic</i></b><e>content</e></option>
+</select>
+
+<style>
+	select,
+	::picker(select) {
+	  appearance: base-select;
+	}
+	selectedcontent b{
+		color: red;
+	}
+	e{
+		selectedcontent &{
+			color: green;
+		}
+	}
+	select > button > selectedcontent > b {
+		color: blue;
+	}
+
+	select > button > selectedcontent i {
+		color: blue;
+	}
+
+	selectedcontent:has(b){
+		background-color: rebeccapurple;
+	}
+
+	selectedcontent:has(i){
+		background-color: rebeccapurple;
+	}
+
+	option > b{
+		color: orange;
+	}
+
+	option b{
+		color: #ff3e00;
+	}
+
+	option > b > i{
+		text-decoration: underline;
+	}
+
+	option i{
+		text-decoration: dashed;
+	}
+</style>
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-component/Child.svelte b/packages/svelte/tests/css/samples/siblings-combinator-component/Child.svelte
new file mode 100644
index 0000000000..1df9f35e50
--- /dev/null
+++ b/packages/svelte/tests/css/samples/siblings-combinator-component/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	let { foo } = $props();
+</script>
+
+{@render foo()}
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-component/_config.js b/packages/svelte/tests/css/samples/siblings-combinator-component/_config.js
new file mode 100644
index 0000000000..837fa20ae1
--- /dev/null
+++ b/packages/svelte/tests/css/samples/siblings-combinator-component/_config.js
@@ -0,0 +1,20 @@
+import { test } from '../../test';
+
+export default test({
+	warnings: [
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "n + m"',
+			end: {
+				character: 468,
+				column: 6,
+				line: 36
+			},
+			start: {
+				character: 463,
+				column: 1,
+				line: 36
+			}
+		}
+	]
+});
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-component/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-component/expected.css
new file mode 100644
index 0000000000..d2657ccd21
--- /dev/null
+++ b/packages/svelte/tests/css/samples/siblings-combinator-component/expected.css
@@ -0,0 +1,8 @@
+	x.svelte-xyz + y:where(.svelte-xyz) { color: green; }
+	x.svelte-xyz + v:where(.svelte-xyz) { color: green; }
+	x.svelte-xyz + z:where(.svelte-xyz) { color: green; }
+	y.svelte-xyz + z:where(.svelte-xyz) { color: green; }
+	v.svelte-xyz + z:where(.svelte-xyz) { color: green; }
+	.component + z.svelte-xyz { color: green; }
+
+	/* (unused) n + m { color: red; }*/
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-component/input.svelte b/packages/svelte/tests/css/samples/siblings-combinator-component/input.svelte
new file mode 100644
index 0000000000..8d80acffb3
--- /dev/null
+++ b/packages/svelte/tests/css/samples/siblings-combinator-component/input.svelte
@@ -0,0 +1,37 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<div>
+	<x></x>
+	<Child>
+		<y></y>
+		{#snippet foo()}
+			<v></v>
+		{/snippet}
+	</Child>
+	<z></z>
+
+	<Child>
+		<span>
+			<n></n>
+		</span>
+		{#snippet foo()}
+			<span>
+				<n></n>
+			</span>
+		{/snippet}
+	</Child>
+	<m></m>
+</div>
+
+<style>
+	x + y { color: green; }
+	x + v { color: green; }
+	x + z { color: green; }
+	y + z { color: green; }
+	v + z { color: green; }
+	:global(.component) + z { color: green; }
+
+	n + m { color: red; }
+</style>
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-slot/_config.js b/packages/svelte/tests/css/samples/siblings-combinator-slot/_config.js
index 2786baeff8..8a8f561d01 100644
--- a/packages/svelte/tests/css/samples/siblings-combinator-slot/_config.js
+++ b/packages/svelte/tests/css/samples/siblings-combinator-slot/_config.js
@@ -5,14 +5,8 @@ export default test({
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".b + .c"',
-			start: { character: 110, column: 1, line: 10 },
-			end: { character: 117, column: 8, line: 10 }
-		},
-		{
-			code: 'css_unused_selector',
-			message: 'Unused CSS selector ".c + .f"',
-			start: { character: 135, column: 1, line: 11 },
-			end: { character: 142, column: 8, line: 11 }
+			start: { character: 137, column: 1, line: 11 },
+			end: { character: 144, column: 8, line: 11 }
 		}
 	]
 });
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-slot/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-slot/expected.css
index 643f6cf13f..85cbb77e65 100644
--- a/packages/svelte/tests/css/samples/siblings-combinator-slot/expected.css
+++ b/packages/svelte/tests/css/samples/siblings-combinator-slot/expected.css
@@ -1,7 +1,7 @@
 
 	.d.svelte-xyz + .e:where(.svelte-xyz) { color: green; }
 	.a.svelte-xyz + .b:where(.svelte-xyz) { color: green; }
+	.c.svelte-xyz + .f:where(.svelte-xyz) { color: green; }
 
 	/* no match */
 	/* (unused) .b + .c { color: red; }*/
-	/* (unused) .c + .f { color: red; }*/
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-slot/input.svelte b/packages/svelte/tests/css/samples/siblings-combinator-slot/input.svelte
index 1b543f97b7..57e1df1507 100644
--- a/packages/svelte/tests/css/samples/siblings-combinator-slot/input.svelte
+++ b/packages/svelte/tests/css/samples/siblings-combinator-slot/input.svelte
@@ -5,10 +5,10 @@
 <style>
 	.d + .e { color: green; }
 	.a + .b { color: green; }
+	.c + .f { color: green; }
 
 	/* no match */
 	.b + .c { color: red; }
-	.c + .f { color: red; }
 </style>
 
 <div class="a"></div>
diff --git a/packages/svelte/tests/css/samples/undefined-with-scope/expected.html b/packages/svelte/tests/css/samples/undefined-with-scope/expected.html
index ddb9429bc8..5548be6e5a 100644
--- a/packages/svelte/tests/css/samples/undefined-with-scope/expected.html
+++ b/packages/svelte/tests/css/samples/undefined-with-scope/expected.html
@@ -1 +1,2 @@
-<p class=" svelte-xyz">Foo</p>
\ No newline at end of file
+<p class="svelte-xyz">Foo</p>
+<p class="svelte-xyz">Bar</p>
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/undefined-with-scope/input.svelte b/packages/svelte/tests/css/samples/undefined-with-scope/input.svelte
index c68fb40dea..20639600d0 100644
--- a/packages/svelte/tests/css/samples/undefined-with-scope/input.svelte
+++ b/packages/svelte/tests/css/samples/undefined-with-scope/input.svelte
@@ -1,3 +1,4 @@
 <style>p { color: red; }</style>
 
-<p class={undefined}>Foo</p>
\ No newline at end of file
+<p class={undefined}>Foo</p>
+<p class="{undefined}">Bar</p>
diff --git a/packages/svelte/tests/css/samples/unicode-identifier/_config.js b/packages/svelte/tests/css/samples/unicode-identifier/_config.js
new file mode 100644
index 0000000000..da4ea75e36
--- /dev/null
+++ b/packages/svelte/tests/css/samples/unicode-identifier/_config.js
@@ -0,0 +1,76 @@
+import { test } from '../../test';
+
+export default test({
+	warnings: [
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector ".\\61  sdf"',
+			start: {
+				line: 22,
+				column: 1,
+				character: 465
+			},
+			end: {
+				line: 22,
+				column: 10,
+				character: 474
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector ".\\61\n\tsdf"',
+			start: {
+				line: 23,
+				column: 1,
+				character: 492
+			},
+			end: {
+				line: 24,
+				column: 4,
+				character: 501
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector ".\\61\n sdf"',
+			start: {
+				line: 25,
+				column: 1,
+				character: 519
+			},
+			end: {
+				line: 26,
+				column: 4,
+				character: 528
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "#\\31span"',
+			start: {
+				line: 28,
+				column: 1,
+				character: 547
+			},
+			end: {
+				line: 28,
+				column: 9,
+				character: 555
+			}
+		},
+		{
+			code: 'css_unused_selector',
+			message: 'Unused CSS selector "#\\31 span"',
+			start: {
+				line: 29,
+				column: 1,
+				character: 573
+			},
+			end: {
+				line: 29,
+				column: 10,
+				character: 582
+			}
+		}
+	]
+});
diff --git a/packages/svelte/tests/css/samples/unicode-identifier/expected.css b/packages/svelte/tests/css/samples/unicode-identifier/expected.css
new file mode 100644
index 0000000000..fb8b936dee
--- /dev/null
+++ b/packages/svelte/tests/css/samples/unicode-identifier/expected.css
@@ -0,0 +1,21 @@
+	#\31\32\33 .svelte-xyz{ color: green; }
+	#\31 23.svelte-xyz { color: green; }
+	#line\a break.svelte-xyz { color: green; }
+	#line\a
+break.svelte-xyz { color: green; }
+	#line\00000abreak.svelte-xyz { color: green; }
+	#line\00000a break.svelte-xyz { color: green; }
+	#line\00000a	break.svelte-xyz { color: green; }
+	.a\1f642 b.svelte-xyz { color: green; }
+
+	.\61sdf.svelte-xyz { color: green; }
+
+	/* (unused) .\61  sdf { color: red; }*/
+	/* (unused) .\61
+	sdf { color: red; }*/
+	/* (unused) .\61
+ sdf { color: red; }*/
+
+	/* (unused) #\31span { color: red; }*/
+	/* (unused) #\31 span { color: red; }*/
+	#\31 .svelte-xyz span:where(.svelte-xyz) { color: green; }
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/unicode-identifier/expected.html b/packages/svelte/tests/css/samples/unicode-identifier/expected.html
new file mode 100644
index 0000000000..9b5f8ede47
--- /dev/null
+++ b/packages/svelte/tests/css/samples/unicode-identifier/expected.html
@@ -0,0 +1,7 @@
+<div id="123" class="svelte-xyz"></div>
+<div class="svelte-xyz" id="line
+break"></div>
+<div class="a🙂b svelte-xyz"></div>
+<div class="asdf svelte-xyz"></div>
+<div class="&#97;sdf svelte-xyz"></div>
+<div id="1" class="svelte-xyz"><span class="svelte-xyz"></span></div>
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/unicode-identifier/input.svelte b/packages/svelte/tests/css/samples/unicode-identifier/input.svelte
new file mode 100644
index 0000000000..04676c4c4d
--- /dev/null
+++ b/packages/svelte/tests/css/samples/unicode-identifier/input.svelte
@@ -0,0 +1,31 @@
+<div id="123"></div>
+<div id="line
+break"></div>
+<div class="a🙂b"></div>
+<div class="asdf"></div>
+<div class="&#97;sdf"></div>
+<div id="1"><span></span></div>
+
+<style>
+	#\31\32\33 { color: green; }
+	#\31 23 { color: green; }
+	#line\a break { color: green; }
+	#line\a
+break { color: green; }
+	#line\00000abreak { color: green; }
+	#line\00000a break { color: green; }
+	#line\00000a	break { color: green; }
+	.a\1f642 b { color: green; }
+
+	.\61sdf { color: green; }
+
+	.\61  sdf { color: red; }
+	.\61
+	sdf { color: red; }
+	.\61
+ sdf { color: red; }
+
+	#\31span { color: red; }
+	#\31 span { color: red; }
+	#\31  span { color: green; }
+</style>
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/view-transition/expected.css b/packages/svelte/tests/css/samples/view-transition/expected.css
index afc84d52eb..e216a4d3ad 100644
--- a/packages/svelte/tests/css/samples/view-transition/expected.css
+++ b/packages/svelte/tests/css/samples/view-transition/expected.css
@@ -8,9 +8,15 @@
 	::view-transition-old {
 		animation-duration: 0.5s;
 	}
+	::view-transition-old:only-child {
+		animation-duration: 0.5s;
+	}
 	::view-transition-new {
 		animation-duration: 0.5s;
 	}
+	::view-transition-new:only-child {
+		animation-duration: 0.5s;
+	}
 	::view-transition-image-pair {
 		animation-duration: 0.5s;
 	}
diff --git a/packages/svelte/tests/css/samples/view-transition/input.svelte b/packages/svelte/tests/css/samples/view-transition/input.svelte
index ebb2b3fd88..345213ccd3 100644
--- a/packages/svelte/tests/css/samples/view-transition/input.svelte
+++ b/packages/svelte/tests/css/samples/view-transition/input.svelte
@@ -8,9 +8,15 @@
 	::view-transition-old {
 		animation-duration: 0.5s;
 	}
+	::view-transition-old:only-child {
+		animation-duration: 0.5s;
+	}
 	::view-transition-new {
 		animation-duration: 0.5s;
 	}
+	::view-transition-new:only-child {
+		animation-duration: 0.5s;
+	}
 	::view-transition-image-pair {
 		animation-duration: 0.5s;
 	}
diff --git a/packages/svelte/tests/css/test.ts b/packages/svelte/tests/css/test.ts
index dd51f52eab..8846b1d986 100644
--- a/packages/svelte/tests/css/test.ts
+++ b/packages/svelte/tests/css/test.ts
@@ -34,6 +34,7 @@ interface CssTest extends BaseTest {
 	compileOptions?: Partial<CompileOptions>;
 	warnings?: Warning[];
 	props?: Record<string, any>;
+	hasGlobal?: boolean;
 }
 
 /**
@@ -78,6 +79,14 @@ const { test, run } = suite<CssTest>(async (config, cwd) => {
 		// assert_html_equal(actual_ssr, expected.html);
 	}
 
+	if (config.hasGlobal !== undefined) {
+		const metadata = JSON.parse(
+			fs.readFileSync(`${cwd}/_output/client/input.svelte.css.json`, 'utf-8')
+		);
+
+		assert.equal(metadata.hasGlobal, config.hasGlobal);
+	}
+
 	const dom_css = fs.readFileSync(`${cwd}/_output/client/input.svelte.css`, 'utf-8').trim();
 	const ssr_css = fs.readFileSync(`${cwd}/_output/server/input.svelte.css`, 'utf-8').trim();
 
diff --git a/packages/svelte/tests/helpers.js b/packages/svelte/tests/helpers.js
index 9d7f71c9bd..52bd47dfae 100644
--- a/packages/svelte/tests/helpers.js
+++ b/packages/svelte/tests/helpers.js
@@ -1,7 +1,7 @@
 /** @import { CompileOptions } from '#compiler' */
 import * as fs from 'node:fs';
 import * as path from 'node:path';
-import glob from 'tiny-glob/sync.js';
+import { globSync } from 'tinyglobby';
 import { VERSION, compile, compileModule, preprocess } from 'svelte/compiler';
 import { vi } from 'vitest';
 
@@ -43,6 +43,7 @@ export function create_deferred() {
 	/** @param {any} [reason] */
 	let reject = (reason) => {};
 
+	/** @type {Promise<any>} */
 	const promise = new Promise((f, r) => {
 		resolve = f;
 		reject = r;
@@ -70,7 +71,7 @@ export async function compile_directory(
 
 	fs.rmSync(output_dir, { recursive: true, force: true });
 
-	for (let file of glob('**', { cwd, filesOnly: true })) {
+	for (let file of globSync('**', { cwd, onlyFiles: true })) {
 		if (file.startsWith('_')) continue;
 
 		let text = fs.readFileSync(`${cwd}/${file}`, 'utf-8').replace(/\r\n/g, '\n');
@@ -86,7 +87,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 {
@@ -146,6 +148,10 @@ export async function compile_directory(
 
 			if (compiled.css) {
 				write(`${output_dir}/${file}.css`, compiled.css.code);
+				write(
+					`${output_dir}/${file}.css.json`,
+					JSON.stringify({ hasGlobal: compiled.css.hasGlobal })
+				);
 				if (output_map) {
 					write(`${output_dir}/${file}.css.map`, JSON.stringify(compiled.css.map, null, '\t'));
 				}
@@ -186,3 +192,78 @@ 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
+ */
+export function normalise_inspect_logs(logs) {
+	/** @type {any[]} */
+	const normalised = [];
+
+	for (const log of logs) {
+		if (log === 'stack trace') {
+			// ignore `console.group('stack trace')` in default `$inspect(...)` output
+			continue;
+		}
+
+		if (log instanceof Error) {
+			const last_line = log.stack
+				?.trim()
+				.split('\n')
+				.filter((line) => !line.includes('at Module.get_stack'))[1];
+
+			const match = last_line && /(at .+) /.exec(last_line);
+
+			if (match) normalised.push(match[1]);
+		} else {
+			normalised.push(log);
+		}
+	}
+
+	return normalised;
+}
+
+/**
+ * @param {any[]} logs
+ */
+export function normalise_trace_logs(logs) {
+	let normalised = [];
+
+	logs = logs.slice();
+
+	while (logs.length > 0) {
+		const log = logs.shift();
+
+		if (log instanceof Error) {
+			continue;
+		}
+
+		if (typeof log === 'string' && log.includes('%c')) {
+			const split = log.split('%c');
+
+			const first = /** @type {string} */ (split.shift()).trim();
+			if (first) normalised.push({ log: first });
+
+			while (split.length > 0) {
+				const log = /** @type {string} */ (split.shift()).trim();
+				const highlighted = logs.shift() === 'color: CornflowerBlue; font-weight: bold';
+
+				// omit timings, as they will differ between runs
+				if (/\(.+ms\)/.test(log)) continue;
+
+				normalised.push({
+					log,
+					highlighted
+				});
+			}
+		} else {
+			normalised.push({ log });
+		}
+	}
+
+	return normalised;
+}
diff --git a/packages/svelte/tests/html_equal.js b/packages/svelte/tests/html_equal.js
index 0ebf1fa6bd..cdb8f52e37 100644
--- a/packages/svelte/tests/html_equal.js
+++ b/packages/svelte/tests/html_equal.js
@@ -1,8 +1,23 @@
+import { COMMENT_NODE, ELEMENT_NODE, TEXT_NODE } from '#client/constants';
 import { assert } from 'vitest';
 
-/** @param {Element} node */
-function clean_children(node) {
+/**
+ * @param {Element} node
+ * @param {{ preserveComments: boolean }} opts
+ */
+function clean_children(node, opts) {
 	let previous = null;
+	let has_element_children = false;
+	let template =
+		node.nodeName.toUpperCase() === 'TEMPLATE'
+			? /** @type {HTMLTemplateElement} */ (node)
+			: undefined;
+
+	if (template) {
+		const div = document.createElement('div');
+		div.append(template.content);
+		node = div;
+	}
 
 	// sort attributes
 	const attributes = Array.from(node.attributes).sort((a, b) => {
@@ -10,15 +25,24 @@ function clean_children(node) {
 	});
 
 	attributes.forEach((attr) => {
-		node.removeAttribute(attr.name);
+		if (attr.name !== 'xmlns') node.removeAttribute(attr.name);
 	});
 
-	attributes.forEach((attr) => {
-		node.setAttribute(attr.name, attr.value);
+	attributes.forEach(({ name, value }) => {
+		// Strip out the special onload/onerror hydration events from the test output
+		if (['onload', 'onerror', 'xmlns'].includes(name) && value === 'this.__e=event') {
+			return;
+		}
+
+		if (name === 'class') {
+			value = value.replace(/svelte-\w+/, 'svelte-xyz123');
+		}
+
+		node.setAttribute(name, value);
 	});
 
 	for (let child of [...node.childNodes]) {
-		if (child.nodeType === 3) {
+		if (child.nodeType === TEXT_NODE) {
 			let text = /** @type {Text} */ (child);
 
 			if (
@@ -27,66 +51,84 @@ function clean_children(node) {
 				node.tagName !== 'tspan'
 			) {
 				node.removeChild(child);
+				continue;
 			}
 
-			text.data = text.data.replace(/[ \t\n\r\f]+/g, '\n');
+			text.data = text.data.replace(/[^\S]+/g, ' ');
 
-			if (previous && previous.nodeType === 3) {
+			if (previous && previous.nodeType === TEXT_NODE) {
 				const prev = /** @type {Text} */ (previous);
 
 				prev.data += text.data;
-				prev.data = prev.data.replace(/[ \t\n\r\f]+/g, '\n');
-
 				node.removeChild(text);
+
 				text = prev;
+				text.data = text.data.replace(/[^\S]+/g, ' ');
+
+				continue;
 			}
-		} else if (child.nodeType === 8) {
+		}
+
+		if (child.nodeType === COMMENT_NODE && !opts.preserveComments) {
 			// comment
-			// do nothing
-		} else {
-			clean_children(/** @type {Element} */ (child));
+			child.remove();
+			continue;
+		}
+
+		// add newlines for better readability and potentially recurse into children
+		if (child.nodeType === ELEMENT_NODE || child.nodeType === COMMENT_NODE) {
+			if (previous?.nodeType === TEXT_NODE) {
+				const prev = /** @type {Text} */ (previous);
+				prev.data = prev.data.replace(/^[^\S]+$/, '\n');
+			} else if (previous?.nodeType === ELEMENT_NODE || previous?.nodeType === COMMENT_NODE) {
+				node.insertBefore(document.createTextNode('\n'), child);
+			}
+
+			if (child.nodeType === ELEMENT_NODE) {
+				has_element_children = true;
+				clean_children(/** @type {Element} */ (child), opts);
+			}
 		}
 
 		previous = child;
 	}
 
 	// collapse whitespace
-	if (node.firstChild && node.firstChild.nodeType === 3) {
+	if (node.firstChild && node.firstChild.nodeType === TEXT_NODE) {
 		const text = /** @type {Text} */ (node.firstChild);
-		text.data = text.data.replace(/^[ \t\n\r\f]+/, '');
-		if (!text.data.length) node.removeChild(text);
+		text.data = text.data.trimStart();
 	}
 
-	if (node.lastChild && node.lastChild.nodeType === 3) {
+	if (node.lastChild && node.lastChild.nodeType === TEXT_NODE) {
 		const text = /** @type {Text} */ (node.lastChild);
-		text.data = text.data.replace(/[ \t\n\r\f]+$/, '');
-		if (!text.data.length) node.removeChild(text);
+		text.data = text.data.trimEnd();
+	}
+
+	// indent code for better readability
+	if (has_element_children && node.parentNode) {
+		node.innerHTML = `\n\  ${node.innerHTML.replace(/\n/g, '\n  ')}\n`;
+	}
+
+	if (template) {
+		template.innerHTML = node.innerHTML;
 	}
 }
 
 /**
  * @param {Window} window
  * @param {string} html
- * @param {{ removeDataSvelte?: boolean, preserveComments?: boolean }} param2
+ * @param {{ preserveComments?: boolean }} opts
  */
-export function normalize_html(
-	window,
-	html,
-	{ removeDataSvelte = false, preserveComments = false }
-) {
+export function normalize_html(window, html, { preserveComments = false } = {}) {
 	try {
 		const node = window.document.createElement('div');
-		node.innerHTML = html
-			.replace(/(<!(--)?.*?\2>)/g, preserveComments ? '$1' : '')
-			.replace(/(data-svelte-h="[^"]+")/g, removeDataSvelte ? '' : '$1')
-			.replace(/>[ \t\n\r\f]+</g, '><')
-			// Strip out the special onload/onerror hydration events from the test output
-			.replace(/\s?onerror="this.__e=event"|\s?onload="this.__e=event"/g, '')
-			.trim();
-		clean_children(node);
+
+		node.innerHTML = html.trim();
+		clean_children(node, { preserveComments });
+
 		return node.innerHTML;
 	} catch (err) {
-		throw new Error(`Failed to normalize HTML:\n${html}`);
+		throw new Error(`Failed to normalize HTML:\n${html}\nCause: ${err}`);
 	}
 }
 
@@ -99,67 +141,52 @@ export function normalize_new_line(html) {
 }
 
 /**
- * @param {{ removeDataSvelte?: boolean }} options
+ * @param {string} actual
+ * @param {string} expected
+ * @param {string} [message]
  */
-export function setup_html_equal(options = {}) {
-	/**
-	 * @param {string} actual
-	 * @param {string} expected
-	 * @param {string} [message]
-	 */
-	const assert_html_equal = (actual, expected, message) => {
-		try {
-			assert.deepEqual(
-				normalize_html(window, actual, options),
-				normalize_html(window, expected, options),
-				message
-			);
-		} catch (e) {
-			if (Error.captureStackTrace)
-				Error.captureStackTrace(/** @type {Error} */ (e), assert_html_equal);
-			throw e;
-		}
-	};
-
-	/**
-	 *
-	 * @param {string} actual
-	 * @param {string} expected
-	 * @param {{ preserveComments?: boolean, withoutNormalizeHtml?: boolean }} param2
-	 * @param {string} [message]
-	 */
-	const assert_html_equal_with_options = (
-		actual,
-		expected,
-		{ preserveComments, withoutNormalizeHtml },
-		message
-	) => {
-		try {
-			assert.deepEqual(
-				withoutNormalizeHtml
-					? normalize_new_line(actual.trim())
-							.replace(/(\sdata-svelte-h="[^"]+")/g, options.removeDataSvelte ? '' : '$1')
-							.replace(/(<!(--)?.*?\2>)/g, preserveComments !== false ? '$1' : '')
-					: normalize_html(window, actual.trim(), { ...options, preserveComments }),
-				withoutNormalizeHtml
-					? normalize_new_line(expected.trim())
-							.replace(/(\sdata-svelte-h="[^"]+")/g, options.removeDataSvelte ? '' : '$1')
-							.replace(/(<!(--)?.*?\2>)/g, preserveComments !== false ? '$1' : '')
-					: normalize_html(window, expected.trim(), { ...options, preserveComments }),
-				message
-			);
-		} catch (e) {
-			if (Error.captureStackTrace)
-				Error.captureStackTrace(/** @type {Error} */ (e), assert_html_equal_with_options);
-			throw e;
-		}
-	};
-
-	return {
-		assert_html_equal,
-		assert_html_equal_with_options
-	};
-}
+export const assert_html_equal = (actual, expected, message) => {
+	try {
+		assert.deepEqual(normalize_html(window, actual), normalize_html(window, expected), message);
+	} catch (e) {
+		if (Error.captureStackTrace)
+			Error.captureStackTrace(/** @type {Error} */ (e), assert_html_equal);
+		throw e;
+	}
+};
 
-// Common case without options
-export const { assert_html_equal, assert_html_equal_with_options } = setup_html_equal();
+/**
+ *
+ * @param {string} actual
+ * @param {string} expected
+ * @param {{ preserveComments?: boolean, withoutNormalizeHtml?: boolean }} param2
+ * @param {string} [message]
+ */
+export const assert_html_equal_with_options = (
+	actual,
+	expected,
+	{ preserveComments, withoutNormalizeHtml },
+	message
+) => {
+	try {
+		assert.deepEqual(
+			withoutNormalizeHtml
+				? normalize_new_line(actual.trim()).replace(
+						/(<!(--)?.*?\2>)/g,
+						preserveComments !== false ? '$1' : ''
+					)
+				: normalize_html(window, actual.trim(), { preserveComments }),
+			withoutNormalizeHtml
+				? normalize_new_line(expected.trim()).replace(
+						/(<!(--)?.*?\2>)/g,
+						preserveComments !== false ? '$1' : ''
+					)
+				: normalize_html(window, expected.trim(), { preserveComments }),
+			message
+		);
+	} catch (e) {
+		if (Error.captureStackTrace)
+			Error.captureStackTrace(/** @type {Error} */ (e), assert_html_equal_with_options);
+		throw e;
+	}
+};
diff --git a/packages/svelte/tests/hydration/samples/boundary-pending-attribute/_config.js b/packages/svelte/tests/hydration/samples/boundary-pending-attribute/_config.js
new file mode 100644
index 0000000000..eec39eb84c
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/boundary-pending-attribute/_config.js
@@ -0,0 +1,10 @@
+import { flushSync } from 'svelte';
+import { assert_ok, test } from '../../test';
+
+export default test({
+	compileOptions: {
+		experimental: {
+			async: true
+		}
+	}
+});
diff --git a/packages/svelte/tests/hydration/samples/boundary-pending-attribute/_expected.html b/packages/svelte/tests/hydration/samples/boundary-pending-attribute/_expected.html
new file mode 100644
index 0000000000..8b44c4cc91
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/boundary-pending-attribute/_expected.html
@@ -0,0 +1 @@
+<!--[--><!--[!--><!---->loading...<!--]--><!--]-->
\ No newline at end of file
diff --git a/packages/svelte/tests/hydration/samples/boundary-pending-attribute/main.svelte b/packages/svelte/tests/hydration/samples/boundary-pending-attribute/main.svelte
new file mode 100644
index 0000000000..15612dd27e
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/boundary-pending-attribute/main.svelte
@@ -0,0 +1,8 @@
+{#snippet pending()}
+	loading...
+{/snippet}
+
+<svelte:boundary {pending}>
+	{@const data = await Promise.resolve("data")}
+	{data}
+</svelte:boundary>
\ No newline at end of file
diff --git a/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_config.js b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_config.js
new file mode 100644
index 0000000000..56ba73b064
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_config.js
@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+// https://github.com/sveltejs/svelte/issues/15819
+export default test({
+	expect_hydration_error: true
+});
diff --git a/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_expected.html b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_expected.html
new file mode 100644
index 0000000000..5179fb04a5
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_expected.html
@@ -0,0 +1 @@
+<p>start</p><p>cond</p><!---->
diff --git a/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_override.html b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_override.html
new file mode 100644
index 0000000000..117d83d8eb
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/_override.html
@@ -0,0 +1 @@
+<!--[--><!--[--> <p>start</p><!--[--><p>cond</p><!--]--><!--]--><!--]-->
diff --git a/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/main.svelte b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/main.svelte
new file mode 100644
index 0000000000..bfb4f2cdb8
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking-2/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	const cond = true;
+</script>
+
+<p>start</p>{#if cond}<p>cond</p>{/if}
diff --git a/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_config.js b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_config.js
new file mode 100644
index 0000000000..56ba73b064
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_config.js
@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+// https://github.com/sveltejs/svelte/issues/15819
+export default test({
+	expect_hydration_error: true
+});
diff --git a/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_expected.html b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_expected.html
new file mode 100644
index 0000000000..f6c03b87c1
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_expected.html
@@ -0,0 +1 @@
+<p>start</p> pre123 mid<!---->
diff --git a/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_override.html b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_override.html
new file mode 100644
index 0000000000..c84efbb00b
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/_override.html
@@ -0,0 +1 @@
+<!--[--><p>start</p>pre<a>123</a> <!--[-->mid<!--]--><!--]-->
diff --git a/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/main.svelte b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/main.svelte
new file mode 100644
index 0000000000..2c9a94686e
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/cloudflare-mirage-borking/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	let cond = true;
+</script>
+
+<p>start</p>
+pre123
+{#if cond}
+mid
+{/if}
diff --git a/packages/svelte/tests/hydration/samples/css-props-hmr/Component.svelte b/packages/svelte/tests/hydration/samples/css-props-hmr/Component.svelte
new file mode 100644
index 0000000000..ac73501cca
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/css-props-hmr/Component.svelte
@@ -0,0 +1,7 @@
+<h1>Hello</h1>
+
+<style>
+	h1 {
+		color: var(--color);
+	}
+</style>
\ No newline at end of file
diff --git a/packages/svelte/tests/hydration/samples/css-props-hmr/_config.js b/packages/svelte/tests/hydration/samples/css-props-hmr/_config.js
new file mode 100644
index 0000000000..2cd696d584
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/css-props-hmr/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		hmr: true
+	}
+});
diff --git a/packages/svelte/tests/hydration/samples/css-props-hmr/main.svelte b/packages/svelte/tests/hydration/samples/css-props-hmr/main.svelte
new file mode 100644
index 0000000000..eed9b57caf
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/css-props-hmr/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Component from "./Component.svelte";
+</script>
+
+<Component --color="red" />
\ No newline at end of file
diff --git a/packages/svelte/tests/hydration/samples/element-dir-attribute-sibling/_config.js b/packages/svelte/tests/hydration/samples/element-dir-attribute-sibling/_config.js
new file mode 100644
index 0000000000..e3c629aef9
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/element-dir-attribute-sibling/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	test(assert, target) {
+		const p = target.querySelector('p');
+
+		assert.equal(p?.dir, 'rtl');
+	}
+});
diff --git a/packages/svelte/tests/hydration/samples/element-dir-attribute-sibling/main.svelte b/packages/svelte/tests/hydration/samples/element-dir-attribute-sibling/main.svelte
new file mode 100644
index 0000000000..802edc0fee
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/element-dir-attribute-sibling/main.svelte
@@ -0,0 +1 @@
+<p dir="rtl">text</p>.
diff --git a/packages/svelte/tests/hydration/samples/if-block-mismatch-2/_expected.html b/packages/svelte/tests/hydration/samples/if-block-mismatch-2/_expected.html
index 08a3809de9..72d1a4f024 100644
--- a/packages/svelte/tests/hydration/samples/if-block-mismatch-2/_expected.html
+++ b/packages/svelte/tests/hydration/samples/if-block-mismatch-2/_expected.html
@@ -1 +1 @@
-<!--[--><!--[--><!--]--> <div><!----><!----></div> hello<!--]-->
+<!--[--><!--[--><!--]--> <div><!--[--><!--]--></div> hello<!--]-->
diff --git a/packages/svelte/tests/hydration/samples/input-checked-attribute-sibling/_config.js b/packages/svelte/tests/hydration/samples/input-checked-attribute-sibling/_config.js
new file mode 100644
index 0000000000..31ec66fc88
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/input-checked-attribute-sibling/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	test(assert, target) {
+		const input = target.querySelector('input');
+
+		assert.equal(input?.checked, true);
+	}
+});
diff --git a/packages/svelte/tests/hydration/samples/input-checked-attribute-sibling/_expected.html b/packages/svelte/tests/hydration/samples/input-checked-attribute-sibling/_expected.html
new file mode 100644
index 0000000000..bcd53f8783
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/input-checked-attribute-sibling/_expected.html
@@ -0,0 +1 @@
+<!--[--><!---->.<input><!--]-->
diff --git a/packages/svelte/tests/hydration/samples/input-checked-attribute-sibling/main.svelte b/packages/svelte/tests/hydration/samples/input-checked-attribute-sibling/main.svelte
new file mode 100644
index 0000000000..db3eae870f
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/input-checked-attribute-sibling/main.svelte
@@ -0,0 +1 @@
+.<input checked />
diff --git a/packages/svelte/tests/hydration/samples/no-reset-debug/_config.js b/packages/svelte/tests/hydration/samples/no-reset-debug/_config.js
new file mode 100644
index 0000000000..2bdb29e436
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/no-reset-debug/_config.js
@@ -0,0 +1,15 @@
+import { test } from '../../test';
+
+/** @type {typeof console.log} */
+let log;
+
+export default test({
+	before_test() {
+		log = console.log;
+		console.log = () => {};
+	},
+
+	after_test() {
+		console.log = log;
+	}
+});
diff --git a/packages/svelte/tests/hydration/samples/no-reset-debug/main.svelte b/packages/svelte/tests/hydration/samples/no-reset-debug/main.svelte
new file mode 100644
index 0000000000..915aa0152d
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/no-reset-debug/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	let test = 42;
+</script>
+
+<div>
+	{@debug test}
+	<span>something</span>
+</div>
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/_config.js b/packages/svelte/tests/hydration/samples/no-reset-snippet/_config.js
similarity index 100%
rename from packages/svelte/tests/snapshot/_config.js
rename to packages/svelte/tests/hydration/samples/no-reset-snippet/_config.js
diff --git a/packages/svelte/tests/hydration/samples/no-reset-snippet/main.svelte b/packages/svelte/tests/hydration/samples/no-reset-snippet/main.svelte
new file mode 100644
index 0000000000..c6668c0684
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/no-reset-snippet/main.svelte
@@ -0,0 +1,6 @@
+<div>
+	{#snippet test()}
+		
+	{/snippet}
+	<span>something</span>
+</div>
\ No newline at end of file
diff --git a/packages/svelte/tests/hydration/samples/optgroup-rich-content/_config.js b/packages/svelte/tests/hydration/samples/optgroup-rich-content/_config.js
new file mode 100644
index 0000000000..36ca2e6ae5
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/optgroup-rich-content/_config.js
@@ -0,0 +1,31 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	// This test verifies that hydration works correctly for
+	// optgroup elements with rich HTML content (non-option elements inside optgroup)
+	snapshot(target) {
+		const select = target.querySelector('select');
+
+		return {
+			select
+		};
+	},
+
+	async test(assert, target) {
+		const optgroup = target.querySelector('optgroup');
+		const options = target.querySelectorAll('option');
+		const button = target.querySelector('button');
+
+		// Check options content - the span inside optgroup gets stripped but text remains
+		assert.equal(options[0]?.textContent, 'hello hello');
+		assert.equal(options[1]?.textContent, 'Plain option');
+
+		// Update via button click
+		flushSync(() => {
+			button?.click();
+		});
+
+		assert.equal(options[0]?.textContent, 'changed changed');
+	}
+});
diff --git a/packages/svelte/tests/hydration/samples/optgroup-rich-content/_expected.html b/packages/svelte/tests/hydration/samples/optgroup-rich-content/_expected.html
new file mode 100644
index 0000000000..911b92770b
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/optgroup-rich-content/_expected.html
@@ -0,0 +1 @@
+<select><optgroup label="Fruits">hello <option value="a"><span>hello</span> hello</option><option value="b">Plain option</option></optgroup><optgroup label="Static Group"><option value="c">Another option</option></optgroup></select> <button></button>
diff --git a/packages/svelte/tests/hydration/samples/optgroup-rich-content/main.svelte b/packages/svelte/tests/hydration/samples/optgroup-rich-content/main.svelte
new file mode 100644
index 0000000000..227c4d56d5
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/optgroup-rich-content/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	let label = $state('hello');
+</script>
+
+<select>
+	<optgroup label="Fruits">
+		<span class="group-header">{label}</span>
+		<option value="a"><span>{label}</span> {label}</option>
+		<option value="b">Plain option</option>
+	</optgroup>
+	<optgroup label="Static Group">
+		<option value="c">Another option</option>
+	</optgroup>
+</select>
+
+<button onclick={() => label = "changed"}></button>
diff --git a/packages/svelte/tests/hydration/samples/option-rich-content-continues/_config.js b/packages/svelte/tests/hydration/samples/option-rich-content-continues/_config.js
new file mode 100644
index 0000000000..a2163b7c67
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/option-rich-content-continues/_config.js
@@ -0,0 +1,34 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	// This test verifies that hydration continues correctly after
+	// an option element with rich HTML content
+	snapshot(target) {
+		const select = target.querySelector('select');
+		const options = target.querySelectorAll('option');
+		const p = target.querySelector('p');
+		const button = target.querySelector('button');
+
+		return {
+			select,
+			option1: options[0],
+			option2: options[1],
+			p,
+			button
+		};
+	},
+
+	async test(assert, target) {
+		const option = target.querySelector('option');
+		const button = target.querySelector('button');
+
+		assert.equal(option?.textContent, 'hello hello');
+
+		flushSync(() => {
+			button?.click();
+		});
+
+		assert.equal(option?.textContent, 'changed changed');
+	}
+});
diff --git a/packages/svelte/tests/hydration/samples/option-rich-content-continues/_expected.html b/packages/svelte/tests/hydration/samples/option-rich-content-continues/_expected.html
new file mode 100644
index 0000000000..d3e209c990
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/option-rich-content-continues/_expected.html
@@ -0,0 +1 @@
+<select><option value="a">hello hello</option><option value="b">Plain text</option></select> <button></button>
diff --git a/packages/svelte/tests/hydration/samples/option-rich-content-continues/main.svelte b/packages/svelte/tests/hydration/samples/option-rich-content-continues/main.svelte
new file mode 100644
index 0000000000..47edc28035
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/option-rich-content-continues/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	let label = $state('hello');
+	let count = $state(42);
+</script>
+
+<select>
+	<!-- this would fail during hydration if rich_option handling is not correct -->
+	<option value="a"><span>{label}</span> {label}</option>
+	<option value="b">Plain text</option>
+</select>
+	
+<button onclick={() => label = "changed"}></button>
diff --git a/packages/svelte/tests/hydration/samples/option-rich-content-static/_config.js b/packages/svelte/tests/hydration/samples/option-rich-content-static/_config.js
new file mode 100644
index 0000000000..ca8c2b6ec1
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/option-rich-content-static/_config.js
@@ -0,0 +1,39 @@
+import { test } from '../../test';
+
+export default test({
+	// This test verifies that completely static select with rich option content
+	// hydrates correctly and the content is preserved
+	snapshot(target) {
+		const select = target.querySelector('select');
+		const options = target.querySelectorAll('option');
+
+		return {
+			select,
+			option1: options[0],
+			option2: options[1],
+			option3: options[2]
+		};
+	},
+
+	async test(assert, target) {
+		const options = target.querySelectorAll('option');
+
+		// Verify the rich content is present in the options
+		assert.equal(options[0]?.textContent, 'Bold Option');
+		assert.equal(options[1]?.textContent, 'Italic Option');
+		assert.equal(options[2]?.textContent, 'Plain Option');
+
+		// Check that the rich elements are actually there (on supporting browsers)
+		const strong = options[0]?.querySelector('strong');
+		const em = options[1]?.querySelector('em');
+
+		// These may or may not exist depending on browser support
+		// but the text content should always be correct
+		if (strong) {
+			assert.equal(strong.textContent, 'Bold');
+		}
+		if (em) {
+			assert.equal(em.textContent, 'Italic');
+		}
+	}
+});
diff --git a/packages/svelte/tests/hydration/samples/option-rich-content-static/_expected.html b/packages/svelte/tests/hydration/samples/option-rich-content-static/_expected.html
new file mode 100644
index 0000000000..93cfa49dd1
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/option-rich-content-static/_expected.html
@@ -0,0 +1 @@
+<select><option value="a"><strong>Bold</strong> Option</option><option value="b"><em>Italic</em> Option</option><option value="c">Plain Option</option></select>
diff --git a/packages/svelte/tests/hydration/samples/option-rich-content-static/main.svelte b/packages/svelte/tests/hydration/samples/option-rich-content-static/main.svelte
new file mode 100644
index 0000000000..bd81687434
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/option-rich-content-static/main.svelte
@@ -0,0 +1,5 @@
+<select>
+	<option value="a"><strong>Bold</strong> Option</option>
+	<option value="b"><em>Italic</em> Option</option>
+	<option value="c">Plain Option</option>
+</select>
diff --git a/packages/svelte/tests/hydration/samples/pre-first-node-newline/_config.js b/packages/svelte/tests/hydration/samples/pre-first-node-newline/_config.js
new file mode 100644
index 0000000000..c838aab749
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/pre-first-node-newline/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+// A note about _expected.html: It is different from body.html because we're
+// testing against target.innerHTML which already removed the redundant first newline
+export default test({});
diff --git a/packages/svelte/tests/hydration/samples/pre-first-node-newline/_expected.html b/packages/svelte/tests/hydration/samples/pre-first-node-newline/_expected.html
new file mode 100644
index 0000000000..26de34d1ed
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/pre-first-node-newline/_expected.html
@@ -0,0 +1,7 @@
+<!--[--><pre>static content no line</pre> <pre>	static content ignored line
+</pre> <pre>
+	static content relevant line
+</pre> <pre><div><span></span></div>
+</pre> <pre>
+<div><span></span></div>
+</pre><!--]-->
diff --git a/packages/svelte/tests/hydration/samples/pre-first-node-newline/main.svelte b/packages/svelte/tests/hydration/samples/pre-first-node-newline/main.svelte
new file mode 100644
index 0000000000..9764b49e99
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/pre-first-node-newline/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	let name = $state('');
+</script>
+
+<pre>static content no line</pre>
+
+<pre>
+	static content ignored line
+</pre>
+
+<pre>
+
+	static content relevant line
+</pre>
+
+<pre>
+<div><span>{name}</span></div>
+</pre>
+
+<pre>
+
+<div><span>{name}</span></div>
+</pre>
diff --git a/packages/svelte/tests/hydration/samples/removes-undefined-attributes/_config.js b/packages/svelte/tests/hydration/samples/removes-undefined-attributes/_config.js
new file mode 100644
index 0000000000..bc74f23aac
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/removes-undefined-attributes/_config.js
@@ -0,0 +1,11 @@
+import { test } from '../../test';
+
+export default test({
+	server_props: {
+		browser: false
+	},
+
+	props: {
+		browser: true
+	}
+});
diff --git a/packages/svelte/tests/hydration/samples/removes-undefined-attributes/_expected.html b/packages/svelte/tests/hydration/samples/removes-undefined-attributes/_expected.html
new file mode 100644
index 0000000000..cc789c8f51
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/removes-undefined-attributes/_expected.html
@@ -0,0 +1 @@
+<!--[--><div></div><!--]-->
diff --git a/packages/svelte/tests/hydration/samples/removes-undefined-attributes/main.svelte b/packages/svelte/tests/hydration/samples/removes-undefined-attributes/main.svelte
new file mode 100644
index 0000000000..1a587eeeeb
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/removes-undefined-attributes/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	const { browser } = $props();
+
+	const attributes = {
+		"data-test": browser ? undefined : ""
+	};
+</script>
+
+<div {...attributes}></div>
diff --git a/packages/svelte/tests/hydration/samples/repair-mismatched-a-href/_expected.html b/packages/svelte/tests/hydration/samples/repair-mismatched-a-href/_expected.html
index 2f5b652fac..e1076af2ec 100644
--- a/packages/svelte/tests/hydration/samples/repair-mismatched-a-href/_expected.html
+++ b/packages/svelte/tests/hydration/samples/repair-mismatched-a-href/_expected.html
@@ -1 +1 @@
-<!--[--><a href="/foo">foo</a><!--]-->
+<!--[--><a href="/foo">foo</a> <a href="/foo">foo</a><!--]-->
diff --git a/packages/svelte/tests/hydration/samples/repair-mismatched-a-href/main.svelte b/packages/svelte/tests/hydration/samples/repair-mismatched-a-href/main.svelte
index be01d05f8e..3f0c988016 100644
--- a/packages/svelte/tests/hydration/samples/repair-mismatched-a-href/main.svelte
+++ b/packages/svelte/tests/hydration/samples/repair-mismatched-a-href/main.svelte
@@ -3,3 +3,4 @@
 </script>
 
 <a href={browser ? '/foo' : '/bar'}>foo</a>
+<a {...{href: browser ? '/foo' : '/bar'}}>foo</a>
diff --git a/packages/svelte/tests/hydration/samples/rich-select/Option.svelte b/packages/svelte/tests/hydration/samples/rich-select/Option.svelte
new file mode 100644
index 0000000000..783915d571
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/rich-select/Option.svelte
@@ -0,0 +1 @@
+<option>Option component</option>
\ No newline at end of file
diff --git a/packages/svelte/tests/hydration/samples/rich-select/_config.js b/packages/svelte/tests/hydration/samples/rich-select/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/rich-select/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/hydration/samples/rich-select/main.svelte b/packages/svelte/tests/hydration/samples/rich-select/main.svelte
new file mode 100644
index 0000000000..bb77d8e57a
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/rich-select/main.svelte
@@ -0,0 +1,173 @@
+<script>
+	let items = [1, 2, 3];
+	let show = true;
+	let html = '<option>From HTML</option>';
+
+	import Option from './Option.svelte';
+</script>
+
+<!-- select with rich option (has span inside) - SHOULD use customizable_select_element -->
+<select>
+	<option><span>Rich</span></option>
+</select>
+
+<!-- select with each containing plain options - should NOT use customizable_select_element -->
+<select>
+	{#each items as item}
+		<option>{item}</option>
+	{/each}
+</select>
+
+<!-- select with if containing plain options - should NOT use customizable_select_element -->
+<select>
+	{#if show}
+		<option>Visible</option>
+	{/if}
+</select>
+
+<!-- select with key containing plain options - should NOT use customizable_select_element -->
+<select>
+	{#key items}
+		<option>Keyed</option>
+	{/key}
+</select>
+
+<!-- select with snippet defined at top level and rendered - should NOT use customizable_select_element -->
+{#snippet opt()}
+	<option>Snippet</option>
+{/snippet}
+<select>
+	{@render opt()}
+</select>
+
+<!-- select with const inside each (should be ignored) - should NOT use customizable_select_element -->
+<select>
+	{#each items as item}
+		{@const x = item * 2}
+		<option>{x}</option>
+	{/each}
+</select>
+
+<!-- optgroup with rich option - SHOULD use customizable_select_element -->
+<select>
+	<optgroup label="Group">
+		<option><strong>Bold</strong></option>
+	</optgroup>
+</select>
+
+<!-- optgroup with each containing plain options - should NOT use customizable_select_element -->
+<select>
+	<optgroup label="Group">
+		{#each items as item}
+			<option>{item}</option>
+		{/each}
+	</optgroup>
+</select>
+
+<!-- option with rich content (span) - SHOULD use customizable_select_element -->
+<select>
+	<option value="a"><em>Italic</em> text</option>
+</select>
+
+<!-- nested: select > each > option with rich content - SHOULD use customizable_select_element on option -->
+<select>
+	{#each items as item}
+		<option><span>{item}</span></option>
+	{/each}
+</select>
+
+<!-- nested: select > if > each > plain options - should NOT use customizable_select_element -->
+<select>
+	{#if show}
+		{#each items as item}
+			<option>{item}</option>
+		{/each}
+	{/if}
+</select>
+
+<!-- select with svelte:boundary containing plain options - should NOT use customizable_select_element -->
+<select>
+	<svelte:boundary>
+		<option>Boundary</option>
+	</svelte:boundary>
+</select>
+
+<!-- select with svelte:boundary containing rich options - SHOULD use customizable_select_element on option -->
+<select>
+	<svelte:boundary>
+		<option><span>Rich in boundary</span></option>
+	</svelte:boundary>
+</select>
+
+<!-- select with Component - SHOULD be treated as rich content -->
+<select>
+	<Option />
+</select>
+
+<!-- select with @render snippet - SHOULD be treated as rich content -->
+{#snippet option_snippet()}
+	<option>Rendered</option>
+{/snippet}
+<select>
+	{@render option_snippet()}
+</select>
+
+<!-- select with @html - SHOULD be treated as rich content -->
+<select>
+	{@html html}
+</select>
+
+<!-- optgroup with Component - SHOULD be treated as rich content -->
+<select>
+	<optgroup label="Group">
+		<Option />
+	</optgroup>
+</select>
+
+<!-- optgroup with @render - SHOULD be treated as rich content -->
+{#snippet option_snippet2()}
+	<option>Rendered in group</option>
+{/snippet}
+<select>
+	<optgroup label="Group">
+		{@render option_snippet2()}
+	</optgroup>
+</select>
+
+<!-- option with @html inside - SHOULD use customizable_select_element -->
+<select>
+	<option>{@html '<strong>Bold HTML</strong>'}</option>
+</select>
+
+<!-- each block inside select with Component - SHOULD be treated as rich -->
+<select>
+	{#each items as item}
+		<Option />
+	{/each}
+</select>
+
+<!-- if block inside select with @render - SHOULD be treated as rich -->
+{#snippet conditional_option()}
+	<option>Conditional</option>
+{/snippet}
+<select>
+	{#if show}
+		{@render conditional_option()}
+	{/if}
+</select>
+
+<!-- select with button/selectedcontent and static options - SHOULD use customizable_select_element -->
+<select>
+	<button><selectedcontent></selectedcontent></button>
+	<option>cool</option>
+	<option>cooler</option>
+	<option>coolerone</option>
+</select>
+
+<!-- select with button/selectedcontent and dynamic options - SHOULD use customizable_select_element -->
+<select>
+	<button><selectedcontent></selectedcontent></button>
+	{#each items as item}
+		<option>{item}</option>
+	{/each}
+</select>
diff --git a/packages/svelte/tests/hydration/samples/safari-borking-2/Child.svelte b/packages/svelte/tests/hydration/samples/safari-borking-2/Child.svelte
new file mode 100644
index 0000000000..a62bd4ec90
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/safari-borking-2/Child.svelte
@@ -0,0 +1,6 @@
+<script>
+	const message = `call +636-555-3226 now`;
+</script>
+
+<hr />
+{message}
diff --git a/packages/svelte/tests/hydration/samples/safari-borking-2/_config.js b/packages/svelte/tests/hydration/samples/safari-borking-2/_config.js
new file mode 100644
index 0000000000..cf22ff2c85
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/safari-borking-2/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	expect_hydration_error: true
+});
diff --git a/packages/svelte/tests/hydration/samples/safari-borking-2/_override.html b/packages/svelte/tests/hydration/samples/safari-borking-2/_override.html
new file mode 100644
index 0000000000..17ec01970a
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/safari-borking-2/_override.html
@@ -0,0 +1 @@
+<!--[--><hr> call <a href="tel:+636-555-3226">+636-555-3226</a> now<!----> <p>42</p><!--]-->
diff --git a/packages/svelte/tests/hydration/samples/safari-borking-2/main.svelte b/packages/svelte/tests/hydration/samples/safari-borking-2/main.svelte
new file mode 100644
index 0000000000..daa25067ec
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/safari-borking-2/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<Child />
+<p>{40 + 2}</p>
diff --git a/packages/svelte/tests/hydration/samples/script/_expected.html b/packages/svelte/tests/hydration/samples/script/_expected.html
index b3a4d92219..3a19aa3b9b 100644
--- a/packages/svelte/tests/hydration/samples/script/_expected.html
+++ b/packages/svelte/tests/hydration/samples/script/_expected.html
@@ -1 +1 @@
-<!--[--><!----><script>{}<!----></script><!----><!--]-->
+<!--[--><!----><script>{}</script><!----><!--]-->
diff --git a/packages/svelte/tests/hydration/samples/svelte-head-dynamic-style/_config.js b/packages/svelte/tests/hydration/samples/svelte-head-dynamic-style/_config.js
new file mode 100644
index 0000000000..50e03336c6
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/svelte-head-dynamic-style/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	props: {
+		css: 'body { color: red; }'
+	}
+});
diff --git a/packages/svelte/tests/hydration/samples/svelte-head-dynamic-style/main.svelte b/packages/svelte/tests/hydration/samples/svelte-head-dynamic-style/main.svelte
new file mode 100644
index 0000000000..7eacce62c2
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/svelte-head-dynamic-style/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	let { css } = $props();
+</script>
+
+<svelte:head>
+	<svelte:element this="style" type="text/css">{css}</svelte:element>
+</svelte:head>
+
+<p>content</p>
diff --git a/packages/svelte/tests/hydration/samples/whitespace-at-block-start/Nested.svelte b/packages/svelte/tests/hydration/samples/whitespace-at-block-start/Nested.svelte
new file mode 100644
index 0000000000..70bf63ad9d
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/whitespace-at-block-start/Nested.svelte
@@ -0,0 +1 @@
+<p>nested</p>
\ No newline at end of file
diff --git a/packages/svelte/tests/hydration/samples/whitespace-at-block-start/_config.js b/packages/svelte/tests/hydration/samples/whitespace-at-block-start/_config.js
new file mode 100644
index 0000000000..457eeb2201
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/whitespace-at-block-start/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	errors: [
+		'Failed to hydrate: ',
+		new DOMException("Node can't be inserted in a #text parent.", 'HierarchyRequestError')
+	]
+});
diff --git a/packages/svelte/tests/hydration/samples/whitespace-at-block-start/_expected.html b/packages/svelte/tests/hydration/samples/whitespace-at-block-start/_expected.html
new file mode 100644
index 0000000000..46f8e8a7ac
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/whitespace-at-block-start/_expected.html
@@ -0,0 +1 @@
+<main><p>nested</p><!----></main>
\ No newline at end of file
diff --git a/packages/svelte/tests/hydration/samples/whitespace-at-block-start/_override.html b/packages/svelte/tests/hydration/samples/whitespace-at-block-start/_override.html
new file mode 100644
index 0000000000..24b6bae7b8
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/whitespace-at-block-start/_override.html
@@ -0,0 +1,2 @@
+<!--[-->
+<main><p>nested</p><!----></main><!--]-->
diff --git a/packages/svelte/tests/hydration/samples/whitespace-at-block-start/main.svelte b/packages/svelte/tests/hydration/samples/whitespace-at-block-start/main.svelte
new file mode 100644
index 0000000000..f1f962b958
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/whitespace-at-block-start/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<main>
+	<Nested />
+</main>
\ No newline at end of file
diff --git a/packages/svelte/tests/hydration/test.ts b/packages/svelte/tests/hydration/test.ts
index 3bf2dd286c..d2bf6fde34 100644
--- a/packages/svelte/tests/hydration/test.ts
+++ b/packages/svelte/tests/hydration/test.ts
@@ -2,9 +2,10 @@
 
 import * as fs from 'node:fs';
 import { assert } from 'vitest';
-import { compile_directory, should_update_expected } from '../helpers.js';
+import { compile_directory } from '../helpers.js';
 import { assert_html_equal } from '../html_equal.js';
-import { suite, assert_ok, type BaseTest } from '../suite.js';
+import { fragments } from '../helpers.js';
+import { assert_ok, suite, type BaseTest } from '../suite.js';
 import { createClassComponent } from 'svelte/legacy';
 import { render } from 'svelte/server';
 import type { CompileOptions } from '#compiler';
@@ -13,6 +14,7 @@ import { flushSync } from 'svelte';
 interface HydrationTest extends BaseTest {
 	load_compiled?: boolean;
 	server_props?: Record<string, any>;
+	id_prefix?: string;
 	props?: Record<string, any>;
 	compileOptions?: Partial<CompileOptions>;
 	/**
@@ -23,7 +25,21 @@ interface HydrationTest extends BaseTest {
 	expect_hydration_error?: true;
 	snapshot?: (target: HTMLElement) => any;
 	test?: (
-		assert: typeof import('vitest').assert & {
+		// `_config.js` test callbacks rely on inferred parameter types, which
+		// TS treats as non-explicit and rejects for chai 5's assertion-function
+		// signatures (TS2775). Override the assertion methods we actually use
+		// with non-assertion equivalents.
+		assert: Omit<
+			typeof import('vitest').assert,
+			'ok' | 'isOk' | 'isTrue' | 'isFalse' | 'exists' | 'notExists' | 'instanceOf'
+		> & {
+			ok(value: unknown, message?: string): void;
+			isOk(value: unknown, message?: string): void;
+			isTrue(value: unknown, message?: string): void;
+			isFalse(value: unknown, message?: string): void;
+			exists(value: unknown, message?: string): void;
+			notExists(value: unknown, message?: string): void;
+			instanceOf(value: unknown, type: Function, message?: string): void;
 			htmlEqual(a: string, b: string, description?: string): void;
 		},
 		target: HTMLElement,
@@ -42,15 +58,23 @@ function read(path: string): string | void {
 
 const { test, run } = suite<HydrationTest>(async (config, cwd) => {
 	if (!config.load_compiled) {
-		await compile_directory(cwd, 'client', { accessors: true, ...config.compileOptions });
+		await compile_directory(cwd, 'client', {
+			accessors: true,
+			fragments,
+			...config.compileOptions
+		});
+
 		await compile_directory(cwd, 'server', config.compileOptions);
 	}
 
+	config.before_test?.();
+
 	const target = window.document.body;
 	const head = window.document.head;
 
 	const rendered = render((await import(`${cwd}/_output/server/main.svelte.js`)).default, {
-		props: config.server_props ?? config.props ?? {}
+		props: config.server_props ?? config.props ?? {},
+		idPrefix: config?.id_prefix
 	});
 
 	const override = read(`${cwd}/_override.html`);
@@ -64,8 +88,6 @@ const { test, run } = suite<HydrationTest>(async (config, cwd) => {
 		head.innerHTML = override_head ?? rendered.head;
 	}
 
-	config.before_test?.();
-
 	try {
 		const snapshot = config.snapshot ? config.snapshot(target) : {};
 
@@ -103,7 +125,8 @@ const { test, run } = suite<HydrationTest>(async (config, cwd) => {
 			component: (await import(`${cwd}/_output/client/main.svelte.js`)).default,
 			target,
 			hydrate: true,
-			props: config.props
+			props: config.props,
+			idPrefix: config?.id_prefix
 		});
 
 		console.warn = warn;
@@ -122,14 +145,12 @@ const { test, run } = suite<HydrationTest>(async (config, cwd) => {
 
 		flushSync();
 
-		const normalize = (string: string) => string.trim().replace(/\r\n/g, '\n');
-
 		const expected = read(`${cwd}/_expected.html`) ?? rendered.html;
-		assert.equal(normalize(target.innerHTML), normalize(expected));
+		assert_html_equal(target.innerHTML, expected);
 
 		if (rendered.head) {
 			const expected = read(`${cwd}/_expected_head.html`) ?? rendered.head;
-			assert.equal(normalize(head.innerHTML), normalize(expected));
+			assert_html_equal(head.innerHTML, expected);
 		}
 
 		if (config.snapshot) {
@@ -145,7 +166,6 @@ const { test, run } = suite<HydrationTest>(async (config, cwd) => {
 
 		if (config.test) {
 			await config.test(
-				// @ts-expect-error TS doesn't get it
 				{
 					...assert,
 					htmlEqual: assert_html_equal
diff --git a/packages/svelte/tests/manual/each-stress-test/main.svelte b/packages/svelte/tests/manual/each-stress-test/main.svelte
new file mode 100644
index 0000000000..cb69612844
--- /dev/null
+++ b/packages/svelte/tests/manual/each-stress-test/main.svelte
@@ -0,0 +1,194 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+
+	const VALUES = Array.from('abcdefghijklmnopqrstuvwxyz');
+
+	const presets = [
+		// b is never destroyed
+		[
+			"ab",
+			"",
+			"a",
+			"abc"
+		],
+		// the final state is 'abc', not 'cba'
+		[
+			"abc",
+			"",
+			"cba"
+		],
+		// the case in https://github.com/sveltejs/svelte/pull/17240
+		[
+			"abc",
+			"adbc",
+			"adebc"
+		],
+		[
+			"ab",
+			"a",
+			"abc"
+		],
+		[
+			"a",
+			"bc",
+			"bcd"
+		],
+		// add more presets by hitting 'party' and copying from the console
+	];
+
+	function shuffle() {
+		const values = VALUES.slice();
+		const number = Math.floor(Math.random() * VALUES.length);
+		let shuffled = '';
+		for (let i = 0; i < number; i++) {
+			shuffled += (values.splice(Math.floor(Math.random() * (number - i)), 1))[0];
+		}
+
+		return shuffled;
+	}
+
+	function mark(node) {
+		let prev = -1;
+
+		return {
+			duration: transition ? (slow ? 5000 : 500) : 0,
+			tick(t) {
+				const direction = t >= prev ? 'in' : 'out';
+				node.style.color = direction === 'in' ? '' : 'grey';
+
+				prev = t;
+			}
+		}
+	}
+
+	const record = [];
+
+	const sleep = (ms = slow ? 1000 : 100) => new Promise((f) => setTimeout(f, ms));
+
+	async function test(x: string) {
+		console.group(JSON.stringify(x));
+		error = null;
+
+		list = x;
+		record.push(list);
+		if (transition) {
+			await sleep();
+		} else {
+			await tick();
+			await tick();
+		}
+		check('reconcile');
+
+		n += 1;
+		await tick();
+		check('update');
+		console.groupEnd();
+	}
+
+	function check(task: string) {
+		const expected = list.split('').map((c) => `(${c}:${n})`).join('') || '(fallback)';
+
+		const children = Array.from(container.children);
+		const filtered = children.filter((span: HTMLElement) => !span.style.color);
+		const received = filtered.map((span) => span.textContent).join('');
+
+		if (expected !== received) {
+			console.log('expected:', expected);
+			console.log('received:', received);
+			console.log(JSON.stringify(record, null, '  '));
+
+			error = `failed to ${task}`;
+			throw new Error(error);
+		}
+	}
+
+	let list = $state('');
+	let n = $state(0);
+	let error = $state(null);
+	let slow = $state(false);
+	let transition = $state(true);
+	let partying = $state(false);
+
+	let container: HTMLElement;
+</script>
+
+<h1>each block stress test</h1>
+
+<label>
+	<input type="checkbox" bind:checked={transition} />
+	transition
+</label>
+
+<label>
+	<input type="checkbox" bind:checked={slow} />
+	slow
+</label>
+
+<fieldset>
+	<legend>random</legend>
+
+	<button onclick={() => test(shuffle())}>test</button>
+	<button onclick={async () => {
+		if (partying) {
+			partying = false;
+		} else {
+			partying = true;
+			while (partying) await test(shuffle());
+		}
+	}}>{partying ? 'stop' : 'party'}</button>
+</fieldset>
+
+<fieldset>
+	<legend>presets</legend>
+
+	{#each presets as preset, index}
+		<button onclick={async () => {
+			for (let i = 0; i < preset.length; i += 1) {
+				await test(preset[i]);
+			}
+		}}>{index + 1}</button>
+	{/each}
+</fieldset>
+
+<form onsubmit={(e) => {
+	e.preventDefault();
+	test(e.currentTarget.querySelector('input').value);
+}}>
+	<fieldset>
+		<legend>input</legend>
+		<input />
+	</fieldset>
+</form>
+
+<div id="output" bind:this={container}>
+	{#each list as c (c)}
+		<span transition:mark>({c}:{n})</span>
+	{:else}
+		<span transition:mark>(fallback)</span>
+	{/each}
+</div>
+
+{#if error}
+	<p class="error">{error}</p>
+{/if}
+
+<style>
+	fieldset {
+		display: flex;
+		gap: 0.5em;
+		border-radius: 0.5em;
+		corner-shape: squircle;
+		margin: 0 0 1em 0;
+		padding: 0.2em 0.8em 0.8em;
+	}
+
+	legend {
+		padding: 0.2em 0.5em;
+		left: -0.2em;
+		position: relative;
+	}
+
+	.error {
+		color: red;
+	}
+</style>
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-3/output.svelte b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-3/output.svelte
index 9e4f086aed..90d2e2e036 100644
--- a/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-3/output.svelte
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-$derived-derived-var-3/output.svelte
@@ -1,4 +1,4 @@
-<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
+<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot (derived to derived_1) making the component unusable -->
 <script>
 	let derived;
 </script>
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-slot-change-name/output.svelte b/packages/svelte/tests/migrate/samples/impossible-migrate-slot-change-name/output.svelte
index 2b6838a1d6..20e41646b3 100644
--- a/packages/svelte/tests/migrate/samples/impossible-migrate-slot-change-name/output.svelte
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-slot-change-name/output.svelte
@@ -1,4 +1,4 @@
-<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
+<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot (body to body_1) making the component unusable -->
 <script>
 	let body;
 </script>
diff --git a/packages/svelte/tests/migrate/samples/impossible-migrate-slot-non-identifier/output.svelte b/packages/svelte/tests/migrate/samples/impossible-migrate-slot-non-identifier/output.svelte
index 6e5ab10310..49e9462768 100644
--- a/packages/svelte/tests/migrate/samples/impossible-migrate-slot-non-identifier/output.svelte
+++ b/packages/svelte/tests/migrate/samples/impossible-migrate-slot-non-identifier/output.svelte
@@ -1,2 +1,2 @@
-<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
+<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot (dashed-name to dashed_name) making the component unusable -->
 <slot name="dashed-name"></slot>
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/jsdoc-with-comments/input.svelte b/packages/svelte/tests/migrate/samples/jsdoc-with-comments/input.svelte
index f2efb1db80..f138c3a070 100644
--- a/packages/svelte/tests/migrate/samples/jsdoc-with-comments/input.svelte
+++ b/packages/svelte/tests/migrate/samples/jsdoc-with-comments/input.svelte
@@ -21,6 +21,9 @@
 	 */
 	export let type_no_comment;
 
+	/** @type {boolean} type_with_comment - One-line declaration with comment */
+	export let type_with_comment;
+
 	/**
 	 * This is optional
 	 */
@@ -40,4 +43,10 @@
 	export let inline_multiline_trailing_comment = 'world'; /*
 	* this is a same-line trailing multiline comment
 	**/
+
+	/** @type {number} [default_value=1] */
+	export let default_value = 1;
+
+	/** @type {number} [comment_default_value=1] - This has a comment and an optional value. */
+	export let comment_default_value = 1;
 </script>
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/jsdoc-with-comments/output.svelte b/packages/svelte/tests/migrate/samples/jsdoc-with-comments/output.svelte
index 19fbe38b50..32133ccd4c 100644
--- a/packages/svelte/tests/migrate/samples/jsdoc-with-comments/output.svelte
+++ b/packages/svelte/tests/migrate/samples/jsdoc-with-comments/output.svelte
@@ -9,12 +9,18 @@
 	
 
 	
+
+	
+	
+
 	
 
 	
 
+
 	
 
+	
 	/**
 	 * @typedef {Object} Props
 	 * @property {string} comment - My wonderful comment
@@ -22,11 +28,14 @@
 	 * @property {any} one_line - one line comment
 	 * @property {any} no_comment
 	 * @property {boolean} type_no_comment
+	 * @property {boolean} type_with_comment - One-line declaration with comment
 	 * @property {any} [optional] - This is optional
 	 * @property {any} inline_commented - this should stay a comment
 	 * @property {any} inline_commented_merged - This comment should be merged - with this inline comment
 	 * @property {string} [inline_multiline_leading_comment] - this is a same-line leading multiline comment
 	 * @property {string} [inline_multiline_trailing_comment] - this is a same-line trailing multiline comment
+	 * @property {number} [default_value]
+	 * @property {number} [comment_default_value] - This has a comment and an optional value.
 	 */
 
 	/** @type {Props} */
@@ -36,10 +45,13 @@
 		one_line,
 		no_comment,
 		type_no_comment,
+		type_with_comment,
 		optional = {stuff: true},
 		inline_commented,
 		inline_commented_merged,
 		inline_multiline_leading_comment = 'world',
-		inline_multiline_trailing_comment = 'world'
+		inline_multiline_trailing_comment = 'world',
+		default_value = 1,
+		comment_default_value = 1
 	} = $props();
 </script>
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/labeled-statement-reassign-state/input.svelte b/packages/svelte/tests/migrate/samples/labeled-statement-reassign-state/input.svelte
new file mode 100644
index 0000000000..0b5c13d889
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/labeled-statement-reassign-state/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	let something = '123';
+	
+	let foo = false;
+	$: foo = !!something;
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/labeled-statement-reassign-state/output.svelte b/packages/svelte/tests/migrate/samples/labeled-statement-reassign-state/output.svelte
new file mode 100644
index 0000000000..c2b36a6e30
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/labeled-statement-reassign-state/output.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { run } from 'svelte/legacy';
+
+	let something = '123';
+	
+	let foo = $state(false);
+	run(() => {
+		foo = !!something;
+	});
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/reassigned-deriveds/input.svelte b/packages/svelte/tests/migrate/samples/reassigned-deriveds/input.svelte
new file mode 100644
index 0000000000..024f719fb9
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/reassigned-deriveds/input.svelte
@@ -0,0 +1,10 @@
+<script>
+	let name = 'world';
+
+	$: upper = name.toUpperCase();
+</script>
+
+<input bind:value={name} />
+<input bind:value={upper} />
+
+{upper}
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/reassigned-deriveds/output.svelte b/packages/svelte/tests/migrate/samples/reassigned-deriveds/output.svelte
new file mode 100644
index 0000000000..0903299d95
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/reassigned-deriveds/output.svelte
@@ -0,0 +1,10 @@
+<script>
+	let name = $state('world');
+
+	let upper = $derived(name.toUpperCase());
+</script>
+
+<input bind:value={name} />
+<input bind:value={upper} />
+
+{upper}
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/self-closing-named-slot/input.svelte b/packages/svelte/tests/migrate/samples/self-closing-named-slot/input.svelte
new file mode 100644
index 0000000000..33ca4e3b9f
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/self-closing-named-slot/input.svelte
@@ -0,0 +1,3 @@
+<Component>
+	<div slot="test" />
+</Component>
\ No newline at end of file
diff --git a/packages/svelte/tests/migrate/samples/self-closing-named-slot/output.svelte b/packages/svelte/tests/migrate/samples/self-closing-named-slot/output.svelte
new file mode 100644
index 0000000000..6655bc9dd2
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/self-closing-named-slot/output.svelte
@@ -0,0 +1,5 @@
+<Component>
+	{#snippet test()}
+		<div ></div>
+	{/snippet}
+</Component>
\ No newline at end of file
diff --git a/packages/svelte/tests/motion/test.ts b/packages/svelte/tests/motion/test.ts
index b6554e5e56..7d0403983a 100644
--- a/packages/svelte/tests/motion/test.ts
+++ b/packages/svelte/tests/motion/test.ts
@@ -2,7 +2,8 @@
 import '../helpers.js'; // for the matchMedia polyfill
 import { describe, it, assert } from 'vitest';
 import { get } from 'svelte/store';
-import { spring, tweened } from 'svelte/motion';
+import { spring, tweened, Tween } from 'svelte/motion';
+import { raf } from '../animation-helpers.js';
 
 describe('motion', () => {
 	describe('spring', () => {
@@ -38,5 +39,41 @@ describe('motion', () => {
 			size.update((v) => v + 10);
 			assert.equal(get(size), 20);
 		});
+
+		it('updates non-numeric values immediately', () => {
+			raf.reset();
+			const boolean = tweened(false);
+
+			boolean.set(true, { duration: 100 });
+
+			raf.tick(1);
+			assert.equal(get(boolean), true);
+		});
+	});
+
+	describe('Tween', () => {
+		it('sets immediately when duration is 0', () => {
+			const size = new Tween(0);
+
+			size.set(100, { duration: 0 });
+			assert.equal(size.current, 100);
+		});
+
+		it('updates non-numeric values immediately', () => {
+			raf.reset();
+			const boolean = new Tween(false);
+
+			boolean.set(true, { duration: 100 });
+
+			raf.tick(1);
+			assert.equal(boolean.current, true);
+		});
+	});
+
+	it('updates correctly when initialized with a `null`-ish value', () => {
+		const size = new Tween(undefined as unknown as number, { duration: 0 });
+
+		size.set(10);
+		assert.equal(size.current, 10);
 	});
 });
diff --git a/packages/svelte/tests/parser-legacy/samples/action-duplicate/output.json b/packages/svelte/tests/parser-legacy/samples/action-duplicate/output.json
index 3dad9bb4e5..9a171547fe 100644
--- a/packages/svelte/tests/parser-legacy/samples/action-duplicate/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/action-duplicate/output.json
@@ -15,16 +15,40 @@
 						"end": 20,
 						"type": "Action",
 						"name": "autofocus",
-						"modifiers": [],
-						"expression": null
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 7,
+								"character": 7
+							},
+							"end": {
+								"line": 1,
+								"column": 20,
+								"character": 20
+							}
+						},
+						"expression": null,
+						"modifiers": []
 					},
 					{
 						"start": 21,
 						"end": 34,
 						"type": "Action",
 						"name": "autofocus",
-						"modifiers": [],
-						"expression": null
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 21,
+								"character": 21
+							},
+							"end": {
+								"line": 1,
+								"column": 34,
+								"character": 34
+							}
+						},
+						"expression": null,
+						"modifiers": []
 					}
 				],
 				"children": []
diff --git a/packages/svelte/tests/parser-legacy/samples/action-with-call/output.json b/packages/svelte/tests/parser-legacy/samples/action-with-call/output.json
index 66ce187c62..f3242eba5e 100644
--- a/packages/svelte/tests/parser-legacy/samples/action-with-call/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/action-with-call/output.json
@@ -15,7 +15,18 @@
 						"end": 39,
 						"type": "Action",
 						"name": "tooltip",
-						"modifiers": [],
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 7,
+								"character": 7
+							},
+							"end": {
+								"line": 1,
+								"column": 18,
+								"character": 18
+							}
+						},
 						"expression": {
 							"type": "CallExpression",
 							"start": 21,
@@ -66,7 +77,8 @@
 								}
 							],
 							"optional": false
-						}
+						},
+						"modifiers": []
 					}
 				],
 				"children": []
diff --git a/packages/svelte/tests/parser-legacy/samples/action-with-identifier/output.json b/packages/svelte/tests/parser-legacy/samples/action-with-identifier/output.json
index 39a6f5f647..8f76afc829 100644
--- a/packages/svelte/tests/parser-legacy/samples/action-with-identifier/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/action-with-identifier/output.json
@@ -15,7 +15,18 @@
 						"end": 28,
 						"type": "Action",
 						"name": "tooltip",
-						"modifiers": [],
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 7,
+								"character": 7
+							},
+							"end": {
+								"line": 1,
+								"column": 18,
+								"character": 18
+							}
+						},
 						"expression": {
 							"type": "Identifier",
 							"start": 20,
@@ -31,7 +42,8 @@
 								}
 							},
 							"name": "message"
-						}
+						},
+						"modifiers": []
 					}
 				],
 				"children": []
diff --git a/packages/svelte/tests/parser-legacy/samples/action-with-literal/output.json b/packages/svelte/tests/parser-legacy/samples/action-with-literal/output.json
index 94c60b701a..b6c4f2690d 100644
--- a/packages/svelte/tests/parser-legacy/samples/action-with-literal/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/action-with-literal/output.json
@@ -15,7 +15,18 @@
 						"end": 36,
 						"type": "Action",
 						"name": "tooltip",
-						"modifiers": [],
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 7,
+								"character": 7
+							},
+							"end": {
+								"line": 1,
+								"column": 18,
+								"character": 18
+							}
+						},
 						"expression": {
 							"type": "Literal",
 							"start": 21,
@@ -32,7 +43,8 @@
 							},
 							"value": "tooltip msg",
 							"raw": "'tooltip msg'"
-						}
+						},
+						"modifiers": []
 					}
 				],
 				"children": []
diff --git a/packages/svelte/tests/parser-legacy/samples/action/output.json b/packages/svelte/tests/parser-legacy/samples/action/output.json
index d72bf7db10..a271778985 100644
--- a/packages/svelte/tests/parser-legacy/samples/action/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/action/output.json
@@ -15,8 +15,20 @@
 						"end": 20,
 						"type": "Action",
 						"name": "autofocus",
-						"modifiers": [],
-						"expression": null
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 7,
+								"character": 7
+							},
+							"end": {
+								"line": 1,
+								"column": 20,
+								"character": 20
+							}
+						},
+						"expression": null,
+						"modifiers": []
 					}
 				],
 				"children": []
diff --git a/packages/svelte/tests/parser-legacy/samples/animation/output.json b/packages/svelte/tests/parser-legacy/samples/animation/output.json
index 0d82cb2bb9..262bb17d9a 100644
--- a/packages/svelte/tests/parser-legacy/samples/animation/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/animation/output.json
@@ -20,8 +20,20 @@
 								"end": 50,
 								"type": "Animation",
 								"name": "flip",
-								"modifiers": [],
-								"expression": null
+								"name_loc": {
+									"start": {
+										"line": 2,
+										"column": 6,
+										"character": 38
+									},
+									"end": {
+										"line": 2,
+										"column": 18,
+										"character": 50
+									}
+								},
+								"expression": null,
+								"modifiers": []
 							}
 						],
 						"children": [
@@ -39,6 +51,7 @@
 					"type": "Identifier",
 					"name": "thing",
 					"start": 17,
+					"end": 22,
 					"loc": {
 						"start": {
 							"line": 1,
@@ -50,8 +63,7 @@
 							"column": 22,
 							"character": 22
 						}
-					},
-					"end": 22
+					}
 				},
 				"expression": {
 					"type": "Identifier",
diff --git a/packages/svelte/tests/parser-legacy/samples/attribute-class-directive/output.json b/packages/svelte/tests/parser-legacy/samples/attribute-class-directive/output.json
index 9efe9acf8d..bbf9c12ceb 100644
--- a/packages/svelte/tests/parser-legacy/samples/attribute-class-directive/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/attribute-class-directive/output.json
@@ -15,7 +15,18 @@
 						"end": 22,
 						"type": "Class",
 						"name": "foo",
-						"modifiers": [],
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 5,
+								"character": 5
+							},
+							"end": {
+								"line": 1,
+								"column": 14,
+								"character": 14
+							}
+						},
 						"expression": {
 							"type": "Identifier",
 							"start": 16,
@@ -31,7 +42,8 @@
 								}
 							},
 							"name": "isFoo"
-						}
+						},
+						"modifiers": []
 					}
 				],
 				"children": []
diff --git a/packages/svelte/tests/parser-legacy/samples/attribute-containing-solidus/output.json b/packages/svelte/tests/parser-legacy/samples/attribute-containing-solidus/output.json
index 2c63b3a43d..c1bcbbaf5e 100644
--- a/packages/svelte/tests/parser-legacy/samples/attribute-containing-solidus/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/attribute-containing-solidus/output.json
@@ -15,6 +15,18 @@
 						"start": 3,
 						"end": 30,
 						"name": "href",
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 3,
+								"character": 3
+							},
+							"end": {
+								"line": 1,
+								"column": 7,
+								"character": 7
+							}
+						},
 						"value": [
 							{
 								"start": 8,
diff --git a/packages/svelte/tests/parser-legacy/samples/attribute-curly-bracket/output.json b/packages/svelte/tests/parser-legacy/samples/attribute-curly-bracket/output.json
index 2453dc9e0a..d84b63745c 100644
--- a/packages/svelte/tests/parser-legacy/samples/attribute-curly-bracket/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/attribute-curly-bracket/output.json
@@ -15,6 +15,18 @@
 						"start": 7,
 						"end": 15,
 						"name": "foo",
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 7,
+								"character": 7
+							},
+							"end": {
+								"line": 1,
+								"column": 10,
+								"character": 10
+							}
+						},
 						"value": [
 							{
 								"start": 11,
diff --git a/packages/svelte/tests/parser-legacy/samples/attribute-dynamic-boolean/output.json b/packages/svelte/tests/parser-legacy/samples/attribute-dynamic-boolean/output.json
index 5793afe896..13488a20d3 100644
--- a/packages/svelte/tests/parser-legacy/samples/attribute-dynamic-boolean/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/attribute-dynamic-boolean/output.json
@@ -15,6 +15,18 @@
 						"start": 10,
 						"end": 29,
 						"name": "readonly",
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 10,
+								"character": 10
+							},
+							"end": {
+								"line": 1,
+								"column": 18,
+								"character": 18
+							}
+						},
 						"value": [
 							{
 								"type": "MustacheTag",
diff --git a/packages/svelte/tests/parser-legacy/samples/attribute-dynamic/output.json b/packages/svelte/tests/parser-legacy/samples/attribute-dynamic/output.json
index 9fd98c80ec..088a9d01ab 100644
--- a/packages/svelte/tests/parser-legacy/samples/attribute-dynamic/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/attribute-dynamic/output.json
@@ -15,6 +15,18 @@
 						"start": 5,
 						"end": 28,
 						"name": "style",
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 5,
+								"character": 5
+							},
+							"end": {
+								"line": 1,
+								"column": 10,
+								"character": 10
+							}
+						},
 						"value": [
 							{
 								"start": 12,
diff --git a/packages/svelte/tests/parser-legacy/samples/attribute-empty/output.json b/packages/svelte/tests/parser-legacy/samples/attribute-empty/output.json
index d2a3dcd93b..028b11077d 100644
--- a/packages/svelte/tests/parser-legacy/samples/attribute-empty/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/attribute-empty/output.json
@@ -15,6 +15,18 @@
 						"start": 5,
 						"end": 9,
 						"name": "a",
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 5,
+								"character": 5
+							},
+							"end": {
+								"line": 1,
+								"column": 6,
+								"character": 6
+							}
+						},
 						"value": [
 							{
 								"start": 8,
@@ -30,6 +42,18 @@
 						"start": 10,
 						"end": 16,
 						"name": "b",
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 10,
+								"character": 10
+							},
+							"end": {
+								"line": 1,
+								"column": 11,
+								"character": 11
+							}
+						},
 						"value": [
 							{
 								"type": "MustacheTag",
@@ -60,6 +84,18 @@
 						"start": 17,
 						"end": 21,
 						"name": "c",
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 17,
+								"character": 17
+							},
+							"end": {
+								"line": 1,
+								"column": 18,
+								"character": 18
+							}
+						},
 						"value": [
 							{
 								"start": 20,
@@ -75,6 +111,18 @@
 						"start": 22,
 						"end": 30,
 						"name": "d",
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 22,
+								"character": 22
+							},
+							"end": {
+								"line": 1,
+								"column": 23,
+								"character": 23
+							}
+						},
 						"value": [
 							{
 								"type": "MustacheTag",
diff --git a/packages/svelte/tests/parser-legacy/samples/attribute-escaped/output.json b/packages/svelte/tests/parser-legacy/samples/attribute-escaped/output.json
index e2eb99f327..a23fcd55cd 100644
--- a/packages/svelte/tests/parser-legacy/samples/attribute-escaped/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/attribute-escaped/output.json
@@ -15,6 +15,18 @@
 						"start": 5,
 						"end": 76,
 						"name": "data-foo",
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 5,
+								"character": 5
+							},
+							"end": {
+								"line": 1,
+								"column": 13,
+								"character": 13
+							}
+						},
 						"value": [
 							{
 								"start": 15,
diff --git a/packages/svelte/tests/parser-legacy/samples/attribute-multiple/output.json b/packages/svelte/tests/parser-legacy/samples/attribute-multiple/output.json
index 66b780e536..4e2bddf54e 100644
--- a/packages/svelte/tests/parser-legacy/samples/attribute-multiple/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/attribute-multiple/output.json
@@ -15,6 +15,18 @@
 						"start": 5,
 						"end": 11,
 						"name": "id",
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 5,
+								"character": 5
+							},
+							"end": {
+								"line": 1,
+								"column": 7,
+								"character": 7
+							}
+						},
 						"value": [
 							{
 								"start": 9,
@@ -30,6 +42,18 @@
 						"start": 12,
 						"end": 21,
 						"name": "class",
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 12,
+								"character": 12
+							},
+							"end": {
+								"line": 1,
+								"column": 17,
+								"character": 17
+							}
+						},
 						"value": [
 							{
 								"start": 19,
diff --git a/packages/svelte/tests/parser-legacy/samples/attribute-shorthand/output.json b/packages/svelte/tests/parser-legacy/samples/attribute-shorthand/output.json
index 2ae3acfdc7..61121e436e 100644
--- a/packages/svelte/tests/parser-legacy/samples/attribute-shorthand/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/attribute-shorthand/output.json
@@ -15,16 +15,40 @@
 						"start": 5,
 						"end": 9,
 						"name": "id",
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 6,
+								"character": 6
+							},
+							"end": {
+								"line": 1,
+								"column": 8,
+								"character": 8
+							}
+						},
 						"value": [
 							{
 								"type": "AttributeShorthand",
 								"start": 6,
 								"end": 8,
 								"expression": {
+									"type": "Identifier",
+									"name": "id",
 									"start": 6,
 									"end": 8,
-									"type": "Identifier",
-									"name": "id"
+									"loc": {
+										"start": {
+											"line": 1,
+											"column": 6,
+											"character": 6
+										},
+										"end": {
+											"line": 1,
+											"column": 8,
+											"character": 8
+										}
+									}
 								}
 							}
 						]
diff --git a/packages/svelte/tests/parser-legacy/samples/attribute-static-boolean/output.json b/packages/svelte/tests/parser-legacy/samples/attribute-static-boolean/output.json
index 8cb93b75ec..1442a445d0 100644
--- a/packages/svelte/tests/parser-legacy/samples/attribute-static-boolean/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/attribute-static-boolean/output.json
@@ -15,6 +15,18 @@
 						"start": 10,
 						"end": 18,
 						"name": "readonly",
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 10,
+								"character": 10
+							},
+							"end": {
+								"line": 1,
+								"column": 18,
+								"character": 18
+							}
+						},
 						"value": true
 					}
 				],
diff --git a/packages/svelte/tests/parser-legacy/samples/attribute-static/output.json b/packages/svelte/tests/parser-legacy/samples/attribute-static/output.json
index 3e19a4727e..dbc2a4b79f 100644
--- a/packages/svelte/tests/parser-legacy/samples/attribute-static/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/attribute-static/output.json
@@ -15,6 +15,18 @@
 						"start": 5,
 						"end": 16,
 						"name": "class",
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 5,
+								"character": 5
+							},
+							"end": {
+								"line": 1,
+								"column": 10,
+								"character": 10
+							}
+						},
 						"value": [
 							{
 								"start": 12,
diff --git a/packages/svelte/tests/parser-legacy/samples/attribute-style-directive-modifiers/output.json b/packages/svelte/tests/parser-legacy/samples/attribute-style-directive-modifiers/output.json
index b7de71ff5a..da8a11e48e 100644
--- a/packages/svelte/tests/parser-legacy/samples/attribute-style-directive-modifiers/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/attribute-style-directive-modifiers/output.json
@@ -15,7 +15,21 @@
 						"end": 36,
 						"type": "StyleDirective",
 						"name": "color",
-						"modifiers": ["important"],
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 5,
+								"character": 5
+							},
+							"end": {
+								"line": 1,
+								"column": 26,
+								"character": 26
+							}
+						},
+						"modifiers": [
+							"important"
+						],
 						"value": [
 							{
 								"type": "MustacheTag",
diff --git a/packages/svelte/tests/parser-legacy/samples/attribute-style-directive-shorthand/output.json b/packages/svelte/tests/parser-legacy/samples/attribute-style-directive-shorthand/output.json
index d7f53cb00c..b54a6e91d7 100644
--- a/packages/svelte/tests/parser-legacy/samples/attribute-style-directive-shorthand/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/attribute-style-directive-shorthand/output.json
@@ -15,6 +15,18 @@
 						"end": 16,
 						"type": "StyleDirective",
 						"name": "color",
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 5,
+								"character": 5
+							},
+							"end": {
+								"line": 1,
+								"column": 16,
+								"character": 16
+							}
+						},
 						"modifiers": [],
 						"value": true
 					}
diff --git a/packages/svelte/tests/parser-legacy/samples/attribute-style-directive-string/output.json b/packages/svelte/tests/parser-legacy/samples/attribute-style-directive-string/output.json
index 5acf7d797e..f349e61ef7 100644
--- a/packages/svelte/tests/parser-legacy/samples/attribute-style-directive-string/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/attribute-style-directive-string/output.json
@@ -15,6 +15,18 @@
 						"end": 22,
 						"type": "StyleDirective",
 						"name": "color",
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 5,
+								"character": 5
+							},
+							"end": {
+								"line": 1,
+								"column": 16,
+								"character": 16
+							}
+						},
 						"modifiers": [],
 						"value": [
 							{
@@ -47,6 +59,18 @@
 						"end": 52,
 						"type": "StyleDirective",
 						"name": "color",
+						"name_loc": {
+							"start": {
+								"line": 2,
+								"column": 5,
+								"character": 35
+							},
+							"end": {
+								"line": 2,
+								"column": 16,
+								"character": 46
+							}
+						},
 						"modifiers": [],
 						"value": [
 							{
@@ -79,6 +103,18 @@
 						"end": 80,
 						"type": "StyleDirective",
 						"name": "color",
+						"name_loc": {
+							"start": {
+								"line": 3,
+								"column": 5,
+								"character": 65
+							},
+							"end": {
+								"line": 3,
+								"column": 16,
+								"character": 76
+							}
+						},
 						"modifiers": [],
 						"value": [
 							{
@@ -111,6 +147,18 @@
 						"end": 120,
 						"type": "StyleDirective",
 						"name": "color",
+						"name_loc": {
+							"start": {
+								"line": 4,
+								"column": 5,
+								"character": 93
+							},
+							"end": {
+								"line": 4,
+								"column": 16,
+								"character": 104
+							}
+						},
 						"modifiers": [],
 						"value": [
 							{
@@ -164,6 +212,18 @@
 						"end": 160,
 						"type": "StyleDirective",
 						"name": "color",
+						"name_loc": {
+							"start": {
+								"line": 5,
+								"column": 5,
+								"character": 133
+							},
+							"end": {
+								"line": 5,
+								"column": 16,
+								"character": 144
+							}
+						},
 						"modifiers": [],
 						"value": [
 							{
@@ -217,6 +277,18 @@
 						"end": 198,
 						"type": "StyleDirective",
 						"name": "color",
+						"name_loc": {
+							"start": {
+								"line": 6,
+								"column": 5,
+								"character": 173
+							},
+							"end": {
+								"line": 6,
+								"column": 16,
+								"character": 184
+							}
+						},
 						"modifiers": [],
 						"value": [
 							{
@@ -270,6 +342,18 @@
 						"end": 245,
 						"type": "StyleDirective",
 						"name": "color",
+						"name_loc": {
+							"start": {
+								"line": 7,
+								"column": 5,
+								"character": 211
+							},
+							"end": {
+								"line": 7,
+								"column": 16,
+								"character": 222
+							}
+						},
 						"modifiers": [],
 						"value": [
 							{
diff --git a/packages/svelte/tests/parser-legacy/samples/attribute-style-directive/output.json b/packages/svelte/tests/parser-legacy/samples/attribute-style-directive/output.json
index 2cce9fef95..34e899428c 100644
--- a/packages/svelte/tests/parser-legacy/samples/attribute-style-directive/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/attribute-style-directive/output.json
@@ -15,6 +15,18 @@
 						"end": 26,
 						"type": "StyleDirective",
 						"name": "color",
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 5,
+								"character": 5
+							},
+							"end": {
+								"line": 1,
+								"column": 16,
+								"character": 16
+							}
+						},
 						"modifiers": [],
 						"value": [
 							{
diff --git a/packages/svelte/tests/parser-legacy/samples/attribute-style/output.json b/packages/svelte/tests/parser-legacy/samples/attribute-style/output.json
index 1d9a528d6d..272c48d6ed 100644
--- a/packages/svelte/tests/parser-legacy/samples/attribute-style/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/attribute-style/output.json
@@ -15,6 +15,18 @@
 						"start": 5,
 						"end": 24,
 						"name": "style",
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 5,
+								"character": 5
+							},
+							"end": {
+								"line": 1,
+								"column": 10,
+								"character": 10
+							}
+						},
 						"value": [
 							{
 								"start": 12,
diff --git a/packages/svelte/tests/parser-legacy/samples/attribute-unquoted/output.json b/packages/svelte/tests/parser-legacy/samples/attribute-unquoted/output.json
index ab2912a2c0..fecbd9f290 100644
--- a/packages/svelte/tests/parser-legacy/samples/attribute-unquoted/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/attribute-unquoted/output.json
@@ -15,6 +15,18 @@
 						"start": 5,
 						"end": 14,
 						"name": "class",
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 5,
+								"character": 5
+							},
+							"end": {
+								"line": 1,
+								"column": 10,
+								"character": 10
+							}
+						},
 						"value": [
 							{
 								"start": 11,
@@ -46,6 +58,18 @@
 						"start": 25,
 						"end": 31,
 						"name": "href",
+						"name_loc": {
+							"start": {
+								"line": 2,
+								"column": 3,
+								"character": 25
+							},
+							"end": {
+								"line": 2,
+								"column": 7,
+								"character": 29
+							}
+						},
 						"value": [
 							{
 								"start": 30,
@@ -85,6 +109,18 @@
 						"start": 44,
 						"end": 53,
 						"name": "href",
+						"name_loc": {
+							"start": {
+								"line": 3,
+								"column": 3,
+								"character": 44
+							},
+							"end": {
+								"line": 3,
+								"column": 7,
+								"character": 48
+							}
+						},
 						"value": [
 							{
 								"start": 49,
diff --git a/packages/svelte/tests/parser-legacy/samples/attribute-with-whitespace/output.json b/packages/svelte/tests/parser-legacy/samples/attribute-with-whitespace/output.json
index 4d3a291808..16cfcec195 100644
--- a/packages/svelte/tests/parser-legacy/samples/attribute-with-whitespace/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/attribute-with-whitespace/output.json
@@ -15,7 +15,18 @@
 						"end": 23,
 						"type": "EventHandler",
 						"name": "click",
-						"modifiers": [],
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 8,
+								"character": 8
+							},
+							"end": {
+								"line": 1,
+								"column": 16,
+								"character": 16
+							}
+						},
 						"expression": {
 							"type": "Identifier",
 							"start": 19,
@@ -31,7 +42,8 @@
 								}
 							},
 							"name": "foo"
-						}
+						},
+						"modifiers": []
 					}
 				],
 				"children": [
diff --git a/packages/svelte/tests/parser-legacy/samples/await-catch/output.json b/packages/svelte/tests/parser-legacy/samples/await-catch/output.json
index 5572d573f8..1ac7f1773d 100644
--- a/packages/svelte/tests/parser-legacy/samples/await-catch/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/await-catch/output.json
@@ -29,6 +29,7 @@
 					"type": "Identifier",
 					"name": "theError",
 					"start": 47,
+					"end": 55,
 					"loc": {
 						"start": {
 							"line": 3,
@@ -40,8 +41,7 @@
 							"column": 16,
 							"character": 55
 						}
-					},
-					"end": 55
+					}
 				},
 				"pending": {
 					"type": "PendingBlock",
diff --git a/packages/svelte/tests/parser-legacy/samples/await-then-catch/output.json b/packages/svelte/tests/parser-legacy/samples/await-then-catch/output.json
index b71365f39d..df76eab8d3 100644
--- a/packages/svelte/tests/parser-legacy/samples/await-then-catch/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/await-then-catch/output.json
@@ -28,6 +28,7 @@
 					"type": "Identifier",
 					"name": "theValue",
 					"start": 46,
+					"end": 54,
 					"loc": {
 						"start": {
 							"line": 3,
@@ -39,13 +40,13 @@
 							"column": 15,
 							"character": 54
 						}
-					},
-					"end": 54
+					}
 				},
 				"error": {
 					"type": "Identifier",
 					"name": "theError",
 					"start": 96,
+					"end": 104,
 					"loc": {
 						"start": {
 							"line": 5,
@@ -57,8 +58,7 @@
 							"column": 16,
 							"character": 104
 						}
-					},
-					"end": 104
+					}
 				},
 				"pending": {
 					"type": "PendingBlock",
diff --git a/packages/svelte/tests/parser-legacy/samples/binding-shorthand/output.json b/packages/svelte/tests/parser-legacy/samples/binding-shorthand/output.json
index 6720146297..711bd54525 100644
--- a/packages/svelte/tests/parser-legacy/samples/binding-shorthand/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/binding-shorthand/output.json
@@ -22,13 +22,25 @@
 						"end": 46,
 						"type": "Binding",
 						"name": "foo",
-						"modifiers": [],
+						"name_loc": {
+							"start": {
+								"line": 5,
+								"column": 8,
+								"character": 38
+							},
+							"end": {
+								"line": 5,
+								"column": 16,
+								"character": 46
+							}
+						},
 						"expression": {
 							"start": 43,
 							"end": 46,
 							"type": "Identifier",
 							"name": "foo"
-						}
+						},
+						"modifiers": []
 					}
 				],
 				"children": []
@@ -51,7 +63,7 @@
 				},
 				"end": {
 					"line": 3,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [
diff --git a/packages/svelte/tests/parser-legacy/samples/binding/output.json b/packages/svelte/tests/parser-legacy/samples/binding/output.json
index 4ce069bd37..b103e03683 100644
--- a/packages/svelte/tests/parser-legacy/samples/binding/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/binding/output.json
@@ -22,7 +22,18 @@
 						"end": 55,
 						"type": "Binding",
 						"name": "value",
-						"modifiers": [],
+						"name_loc": {
+							"start": {
+								"line": 5,
+								"column": 7,
+								"character": 38
+							},
+							"end": {
+								"line": 5,
+								"column": 17,
+								"character": 48
+							}
+						},
 						"expression": {
 							"type": "Identifier",
 							"start": 50,
@@ -38,7 +49,8 @@
 								}
 							},
 							"name": "name"
-						}
+						},
+						"modifiers": []
 					}
 				],
 				"children": []
@@ -61,7 +73,7 @@
 				},
 				"end": {
 					"line": 3,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [
diff --git a/packages/svelte/tests/parser-legacy/samples/comment-with-ignores/output.json b/packages/svelte/tests/parser-legacy/samples/comment-with-ignores/output.json
index cf2dc9f752..2caf252de8 100644
--- a/packages/svelte/tests/parser-legacy/samples/comment-with-ignores/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/comment-with-ignores/output.json
@@ -9,7 +9,10 @@
 				"start": 0,
 				"end": 31,
 				"data": " svelte-ignore foo, bar ",
-				"ignores": ["foo", "bar"]
+				"ignores": [
+					"foo",
+					"bar"
+				]
 			}
 		]
 	}
diff --git a/packages/svelte/tests/parser-legacy/samples/dynamic-element-string/output.json b/packages/svelte/tests/parser-legacy/samples/dynamic-element-string/output.json
index 9ba15d6044..4768501c46 100644
--- a/packages/svelte/tests/parser-legacy/samples/dynamic-element-string/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/dynamic-element-string/output.json
@@ -156,6 +156,18 @@
 						"start": 263,
 						"end": 274,
 						"name": "class",
+						"name_loc": {
+							"start": {
+								"line": 7,
+								"column": 29,
+								"character": 263
+							},
+							"end": {
+								"line": 7,
+								"column": 34,
+								"character": 268
+							}
+						},
 						"value": [
 							{
 								"start": 270,
diff --git a/packages/svelte/tests/parser-legacy/samples/dynamic-element-variable/output.json b/packages/svelte/tests/parser-legacy/samples/dynamic-element-variable/output.json
index 291cdaa734..6d9a5c78ee 100644
--- a/packages/svelte/tests/parser-legacy/samples/dynamic-element-variable/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/dynamic-element-variable/output.json
@@ -62,6 +62,18 @@
 						"start": 72,
 						"end": 83,
 						"name": "class",
+						"name_loc": {
+							"start": {
+								"line": 2,
+								"column": 27,
+								"character": 72
+							},
+							"end": {
+								"line": 2,
+								"column": 32,
+								"character": 77
+							}
+						},
 						"value": [
 							{
 								"start": 79,
diff --git a/packages/svelte/tests/parser-legacy/samples/dynamic-import/output.json b/packages/svelte/tests/parser-legacy/samples/dynamic-import/output.json
index a439b65dd0..76bb6c7eb6 100644
--- a/packages/svelte/tests/parser-legacy/samples/dynamic-import/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/dynamic-import/output.json
@@ -21,7 +21,7 @@
 				},
 				"end": {
 					"line": 9,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [
@@ -104,7 +104,8 @@
 						},
 						"value": "svelte",
 						"raw": "'svelte'"
-					}
+					},
+					"attributes": []
 				},
 				{
 					"type": "ExpressionStatement",
@@ -257,7 +258,8 @@
 															},
 															"value": "./foo.js",
 															"raw": "'./foo.js'"
-														}
+														},
+														"options": null
 													},
 													"property": {
 														"type": "Identifier",
diff --git a/packages/svelte/tests/parser-legacy/samples/each-block-destructured/output.json b/packages/svelte/tests/parser-legacy/samples/each-block-destructured/output.json
index d19f5cbbfd..684051e304 100644
--- a/packages/svelte/tests/parser-legacy/samples/each-block-destructured/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/each-block-destructured/output.json
@@ -190,7 +190,7 @@
 				},
 				"end": {
 					"line": 3,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [
@@ -259,7 +259,8 @@
 						"kind": "let"
 					},
 					"specifiers": [],
-					"source": null
+					"source": null,
+					"attributes": []
 				}
 			],
 			"sourceType": "module"
diff --git a/packages/svelte/tests/parser-legacy/samples/each-block-else/output.json b/packages/svelte/tests/parser-legacy/samples/each-block-else/output.json
index a6db309edb..c8458f96f0 100644
--- a/packages/svelte/tests/parser-legacy/samples/each-block-else/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/each-block-else/output.json
@@ -44,6 +44,7 @@
 					"type": "Identifier",
 					"name": "animal",
 					"start": 18,
+					"end": 24,
 					"loc": {
 						"start": {
 							"line": 1,
@@ -55,8 +56,7 @@
 							"column": 24,
 							"character": 24
 						}
-					},
-					"end": 24
+					}
 				},
 				"expression": {
 					"type": "Identifier",
diff --git a/packages/svelte/tests/parser-legacy/samples/each-block-indexed/output.json b/packages/svelte/tests/parser-legacy/samples/each-block-indexed/output.json
index bce7fd81a2..2ba41d56b8 100644
--- a/packages/svelte/tests/parser-legacy/samples/each-block-indexed/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/each-block-indexed/output.json
@@ -72,6 +72,7 @@
 					"type": "Identifier",
 					"name": "animal",
 					"start": 18,
+					"end": 24,
 					"loc": {
 						"start": {
 							"line": 1,
@@ -83,8 +84,7 @@
 							"column": 24,
 							"character": 24
 						}
-					},
-					"end": 24
+					}
 				},
 				"expression": {
 					"type": "Identifier",
diff --git a/packages/svelte/tests/parser-legacy/samples/each-block-keyed/output.json b/packages/svelte/tests/parser-legacy/samples/each-block-keyed/output.json
index 2f6206a6cb..569681506b 100644
--- a/packages/svelte/tests/parser-legacy/samples/each-block-keyed/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/each-block-keyed/output.json
@@ -44,6 +44,7 @@
 					"type": "Identifier",
 					"name": "todo",
 					"start": 16,
+					"end": 20,
 					"loc": {
 						"start": {
 							"line": 1,
@@ -55,8 +56,7 @@
 							"column": 20,
 							"character": 20
 						}
-					},
-					"end": 20
+					}
 				},
 				"expression": {
 					"type": "Identifier",
diff --git a/packages/svelte/tests/parser-legacy/samples/each-block/output.json b/packages/svelte/tests/parser-legacy/samples/each-block/output.json
index f26f557958..c763dc6b85 100644
--- a/packages/svelte/tests/parser-legacy/samples/each-block/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/each-block/output.json
@@ -44,6 +44,7 @@
 					"type": "Identifier",
 					"name": "animal",
 					"start": 18,
+					"end": 24,
 					"loc": {
 						"start": {
 							"line": 1,
@@ -55,8 +56,7 @@
 							"column": 24,
 							"character": 24
 						}
-					},
-					"end": 24
+					}
 				},
 				"expression": {
 					"type": "Identifier",
diff --git a/packages/svelte/tests/parser-legacy/samples/element-with-attribute-empty-string/output.json b/packages/svelte/tests/parser-legacy/samples/element-with-attribute-empty-string/output.json
index 7773256d44..2d6a4b752c 100644
--- a/packages/svelte/tests/parser-legacy/samples/element-with-attribute-empty-string/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/element-with-attribute-empty-string/output.json
@@ -15,6 +15,18 @@
 						"start": 6,
 						"end": 13,
 						"name": "attr",
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 6,
+								"character": 6
+							},
+							"end": {
+								"line": 1,
+								"column": 10,
+								"character": 10
+							}
+						},
 						"value": [
 							{
 								"start": 12,
@@ -46,6 +58,18 @@
 						"start": 28,
 						"end": 35,
 						"name": "attr",
+						"name_loc": {
+							"start": {
+								"line": 2,
+								"column": 6,
+								"character": 28
+							},
+							"end": {
+								"line": 2,
+								"column": 10,
+								"character": 32
+							}
+						},
 						"value": [
 							{
 								"start": 34,
diff --git a/packages/svelte/tests/parser-legacy/samples/element-with-attribute/output.json b/packages/svelte/tests/parser-legacy/samples/element-with-attribute/output.json
index 9477886bb2..9fdb601b67 100644
--- a/packages/svelte/tests/parser-legacy/samples/element-with-attribute/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/element-with-attribute/output.json
@@ -15,6 +15,18 @@
 						"start": 6,
 						"end": 16,
 						"name": "attr",
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 6,
+								"character": 6
+							},
+							"end": {
+								"line": 1,
+								"column": 10,
+								"character": 10
+							}
+						},
 						"value": [
 							{
 								"start": 12,
@@ -46,6 +58,18 @@
 						"start": 31,
 						"end": 41,
 						"name": "attr",
+						"name_loc": {
+							"start": {
+								"line": 2,
+								"column": 6,
+								"character": 31
+							},
+							"end": {
+								"line": 2,
+								"column": 10,
+								"character": 35
+							}
+						},
 						"value": [
 							{
 								"start": 37,
diff --git a/packages/svelte/tests/parser-legacy/samples/elements/output.json b/packages/svelte/tests/parser-legacy/samples/elements/output.json
index 6b51383d93..afc49c56c3 100644
--- a/packages/svelte/tests/parser-legacy/samples/elements/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/elements/output.json
@@ -15,6 +15,18 @@
 						"start": 10,
 						"end": 14,
 						"name": "html",
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 10,
+								"character": 10
+							},
+							"end": {
+								"line": 1,
+								"column": 14,
+								"character": 14
+							}
+						},
 						"value": true
 					}
 				],
diff --git a/packages/svelte/tests/parser-legacy/samples/event-handler/output.json b/packages/svelte/tests/parser-legacy/samples/event-handler/output.json
index 45b6256677..8b054a4289 100644
--- a/packages/svelte/tests/parser-legacy/samples/event-handler/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/event-handler/output.json
@@ -15,7 +15,18 @@
 						"end": 45,
 						"type": "EventHandler",
 						"name": "click",
-						"modifiers": [],
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 8,
+								"character": 8
+							},
+							"end": {
+								"line": 1,
+								"column": 16,
+								"character": 16
+							}
+						},
 						"expression": {
 							"type": "ArrowFunctionExpression",
 							"start": 19,
@@ -100,7 +111,8 @@
 									}
 								}
 							}
-						}
+						},
+						"modifiers": []
 					}
 				],
 				"children": [
diff --git a/packages/svelte/tests/parser-legacy/samples/generic-snippets/input.svelte b/packages/svelte/tests/parser-legacy/samples/generic-snippets/input.svelte
new file mode 100644
index 0000000000..4ee619728d
--- /dev/null
+++ b/packages/svelte/tests/parser-legacy/samples/generic-snippets/input.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+</script>
+
+{#snippet generic<T extends string>(val: T)}
+	{val}
+{/snippet}
+
+{#snippet complex_generic<T extends { bracket: "<" } | "<" | Set<"<>">>(val: T)}
+	{val}
+{/snippet}
\ No newline at end of file
diff --git a/packages/svelte/tests/parser-legacy/samples/generic-snippets/output.json b/packages/svelte/tests/parser-legacy/samples/generic-snippets/output.json
new file mode 100644
index 0000000000..76605f5192
--- /dev/null
+++ b/packages/svelte/tests/parser-legacy/samples/generic-snippets/output.json
@@ -0,0 +1,268 @@
+{
+	"html": {
+		"type": "Fragment",
+		"start": 30,
+		"end": 192,
+		"children": [
+			{
+				"type": "Text",
+				"start": 28,
+				"end": 30,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "SnippetBlock",
+				"start": 30,
+				"end": 92,
+				"expression": {
+					"type": "Identifier",
+					"name": "generic",
+					"start": 40,
+					"end": 47,
+					"loc": {
+						"start": {
+							"line": 4,
+							"column": 10,
+							"character": 40
+						},
+						"end": {
+							"line": 4,
+							"column": 17,
+							"character": 47
+						}
+					}
+				},
+				"parameters": [
+					{
+						"type": "Identifier",
+						"start": 66,
+						"end": 72,
+						"loc": {
+							"start": {
+								"line": 4,
+								"column": 36
+							},
+							"end": {
+								"line": 4,
+								"column": 42
+							}
+						},
+						"name": "val",
+						"typeAnnotation": {
+							"type": "TSTypeAnnotation",
+							"start": 69,
+							"end": 72,
+							"loc": {
+								"start": {
+									"line": 4,
+									"column": 39
+								},
+								"end": {
+									"line": 4,
+									"column": 42
+								}
+							},
+							"typeAnnotation": {
+								"type": "TSTypeReference",
+								"start": 71,
+								"end": 72,
+								"loc": {
+									"start": {
+										"line": 4,
+										"column": 41
+									},
+									"end": {
+										"line": 4,
+										"column": 42
+									}
+								},
+								"typeName": {
+									"type": "Identifier",
+									"start": 71,
+									"end": 72,
+									"loc": {
+										"start": {
+											"line": 4,
+											"column": 41
+										},
+										"end": {
+											"line": 4,
+											"column": 42
+										}
+									},
+									"name": "T"
+								}
+							}
+						}
+					}
+				],
+				"children": [
+					{
+						"type": "MustacheTag",
+						"start": 76,
+						"end": 81,
+						"expression": {
+							"type": "Identifier",
+							"start": 77,
+							"end": 80,
+							"loc": {
+								"start": {
+									"line": 5,
+									"column": 2
+								},
+								"end": {
+									"line": 5,
+									"column": 5
+								}
+							},
+							"name": "val"
+						}
+					}
+				],
+				"typeParams": "T extends string"
+			},
+			{
+				"type": "Text",
+				"start": 92,
+				"end": 94,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "SnippetBlock",
+				"start": 94,
+				"end": 192,
+				"expression": {
+					"type": "Identifier",
+					"name": "complex_generic",
+					"start": 104,
+					"end": 119,
+					"loc": {
+						"start": {
+							"line": 8,
+							"column": 10,
+							"character": 104
+						},
+						"end": {
+							"line": 8,
+							"column": 25,
+							"character": 119
+						}
+					}
+				},
+				"parameters": [
+					{
+						"type": "Identifier",
+						"start": 166,
+						"end": 172,
+						"loc": {
+							"start": {
+								"line": 8,
+								"column": 72
+							},
+							"end": {
+								"line": 8,
+								"column": 78
+							}
+						},
+						"name": "val",
+						"typeAnnotation": {
+							"type": "TSTypeAnnotation",
+							"start": 169,
+							"end": 172,
+							"loc": {
+								"start": {
+									"line": 8,
+									"column": 75
+								},
+								"end": {
+									"line": 8,
+									"column": 78
+								}
+							},
+							"typeAnnotation": {
+								"type": "TSTypeReference",
+								"start": 171,
+								"end": 172,
+								"loc": {
+									"start": {
+										"line": 8,
+										"column": 77
+									},
+									"end": {
+										"line": 8,
+										"column": 78
+									}
+								},
+								"typeName": {
+									"type": "Identifier",
+									"start": 171,
+									"end": 172,
+									"loc": {
+										"start": {
+											"line": 8,
+											"column": 77
+										},
+										"end": {
+											"line": 8,
+											"column": 78
+										}
+									},
+									"name": "T"
+								}
+							}
+						}
+					}
+				],
+				"children": [
+					{
+						"type": "MustacheTag",
+						"start": 176,
+						"end": 181,
+						"expression": {
+							"type": "Identifier",
+							"start": 177,
+							"end": 180,
+							"loc": {
+								"start": {
+									"line": 9,
+									"column": 2
+								},
+								"end": {
+									"line": 9,
+									"column": 5
+								}
+							},
+							"name": "val"
+						}
+					}
+				],
+				"typeParams": "T extends { bracket: \"<\" } | \"<\" | Set<\"<>\">"
+			}
+		]
+	},
+	"instance": {
+		"type": "Script",
+		"start": 0,
+		"end": 28,
+		"context": "default",
+		"content": {
+			"type": "Program",
+			"start": 18,
+			"end": 19,
+			"loc": {
+				"start": {
+					"line": 1,
+					"column": 0
+				},
+				"end": {
+					"line": 2,
+					"column": 9
+				}
+			},
+			"body": [],
+			"sourceType": "module"
+		}
+	}
+}
diff --git a/packages/svelte/tests/parser-legacy/samples/javascript-comments/output.json b/packages/svelte/tests/parser-legacy/samples/javascript-comments/output.json
index 15db05904c..4d7cb2397f 100644
--- a/packages/svelte/tests/parser-legacy/samples/javascript-comments/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/javascript-comments/output.json
@@ -22,7 +22,18 @@
 						"end": 692,
 						"type": "EventHandler",
 						"name": "click",
-						"modifiers": [],
+						"name_loc": {
+							"start": {
+								"line": 34,
+								"column": 1,
+								"character": 574
+							},
+							"end": {
+								"line": 34,
+								"column": 9,
+								"character": 582
+							}
+						},
 						"expression": {
 							"type": "ArrowFunctionExpression",
 							"start": 596,
@@ -137,7 +148,8 @@
 									"end": 594
 								}
 							]
-						}
+						},
+						"modifiers": []
 					}
 				],
 				"children": [
@@ -286,7 +298,7 @@
 				},
 				"end": {
 					"line": 31,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [
@@ -868,5 +880,423 @@
 			],
 			"sourceType": "module"
 		}
-	}
+	},
+	"_comments": [
+		{
+			"type": "Line",
+			"value": " a leading comment",
+			"start": 10,
+			"end": 30,
+			"loc": {
+				"start": {
+					"line": 2,
+					"column": 1
+				},
+				"end": {
+					"line": 2,
+					"column": 21
+				}
+			}
+		},
+		{
+			"type": "Line",
+			"value": " a trailing comment",
+			"start": 45,
+			"end": 66,
+			"loc": {
+				"start": {
+					"line": 3,
+					"column": 14
+				},
+				"end": {
+					"line": 3,
+					"column": 35
+				}
+			}
+		},
+		{
+			"type": "Block",
+			"value": "* a comment ",
+			"start": 83,
+			"end": 99,
+			"loc": {
+				"start": {
+					"line": 6,
+					"column": 1
+				},
+				"end": {
+					"line": 6,
+					"column": 17
+				}
+			}
+		},
+		{
+			"type": "Line",
+			"value": " trailing",
+			"start": 125,
+			"end": 136,
+			"loc": {
+				"start": {
+					"line": 8,
+					"column": 7
+				},
+				"end": {
+					"line": 8,
+					"column": 18
+				}
+			}
+		},
+		{
+			"type": "Block",
+			"value": " leading comment 1 ",
+			"start": 139,
+			"end": 162,
+			"loc": {
+				"start": {
+					"line": 9,
+					"column": 2
+				},
+				"end": {
+					"line": 9,
+					"column": 25
+				}
+			}
+		},
+		{
+			"type": "Block",
+			"value": " leading comment 2 ",
+			"start": 165,
+			"end": 188,
+			"loc": {
+				"start": {
+					"line": 10,
+					"column": 2
+				},
+				"end": {
+					"line": 10,
+					"column": 25
+				}
+			}
+		},
+		{
+			"type": "Block",
+			"value": " leading comment 3 ",
+			"start": 191,
+			"end": 214,
+			"loc": {
+				"start": {
+					"line": 11,
+					"column": 2
+				},
+				"end": {
+					"line": 11,
+					"column": 25
+				}
+			}
+		},
+		{
+			"type": "Block",
+			"value": " trailing comment 1 ",
+			"start": 224,
+			"end": 248,
+			"loc": {
+				"start": {
+					"line": 13,
+					"column": 2
+				},
+				"end": {
+					"line": 13,
+					"column": 26
+				}
+			}
+		},
+		{
+			"type": "Block",
+			"value": " trailing comment 2 ",
+			"start": 251,
+			"end": 275,
+			"loc": {
+				"start": {
+					"line": 14,
+					"column": 2
+				},
+				"end": {
+					"line": 14,
+					"column": 26
+				}
+			}
+		},
+		{
+			"type": "Block",
+			"value": " trailing comment 3 ",
+			"start": 278,
+			"end": 302,
+			"loc": {
+				"start": {
+					"line": 15,
+					"column": 2
+				},
+				"end": {
+					"line": 15,
+					"column": 26
+				}
+			}
+		},
+		{
+			"type": "Line",
+			"value": " leading comment 1",
+			"start": 326,
+			"end": 346,
+			"loc": {
+				"start": {
+					"line": 19,
+					"column": 2
+				},
+				"end": {
+					"line": 19,
+					"column": 22
+				}
+			}
+		},
+		{
+			"type": "Line",
+			"value": " leading comment 2",
+			"start": 349,
+			"end": 369,
+			"loc": {
+				"start": {
+					"line": 20,
+					"column": 2
+				},
+				"end": {
+					"line": 20,
+					"column": 22
+				}
+			}
+		},
+		{
+			"type": "Line",
+			"value": " trailing comment 1",
+			"start": 375,
+			"end": 396,
+			"loc": {
+				"start": {
+					"line": 21,
+					"column": 5
+				},
+				"end": {
+					"line": 21,
+					"column": 26
+				}
+			}
+		},
+		{
+			"type": "Block",
+			"value": " trailing comment 2 ",
+			"start": 399,
+			"end": 423,
+			"loc": {
+				"start": {
+					"line": 22,
+					"column": 2
+				},
+				"end": {
+					"line": 22,
+					"column": 26
+				}
+			}
+		},
+		{
+			"type": "Line",
+			"value": " leading comment 1",
+			"start": 449,
+			"end": 469,
+			"loc": {
+				"start": {
+					"line": 26,
+					"column": 2
+				},
+				"end": {
+					"line": 26,
+					"column": 22
+				}
+			}
+		},
+		{
+			"type": "Line",
+			"value": " leading comment 2",
+			"start": 472,
+			"end": 492,
+			"loc": {
+				"start": {
+					"line": 27,
+					"column": 2
+				},
+				"end": {
+					"line": 27,
+					"column": 22
+				}
+			}
+		},
+		{
+			"type": "Line",
+			"value": " trailing comment 1",
+			"start": 501,
+			"end": 522,
+			"loc": {
+				"start": {
+					"line": 28,
+					"column": 8
+				},
+				"end": {
+					"line": 28,
+					"column": 29
+				}
+			}
+		},
+		{
+			"type": "Block",
+			"value": " trailing comment 2 ",
+			"start": 525,
+			"end": 549,
+			"loc": {
+				"start": {
+					"line": 29,
+					"column": 2
+				},
+				"end": {
+					"line": 29,
+					"column": 26
+				}
+			}
+		},
+		{
+			"type": "Line",
+			"value": " comment",
+			"start": 584,
+			"end": 594,
+			"loc": {
+				"start": {
+					"line": 34,
+					"column": 11
+				},
+				"end": {
+					"line": 34,
+					"column": 21
+				}
+			}
+		},
+		{
+			"type": "Block",
+			"value": " another comment ",
+			"start": 606,
+			"end": 627,
+			"loc": {
+				"start": {
+					"line": 36,
+					"column": 2
+				},
+				"end": {
+					"line": 36,
+					"column": 23
+				}
+			}
+		},
+		{
+			"type": "Line",
+			"value": " a trailing comment",
+			"start": 636,
+			"end": 657,
+			"loc": {
+				"start": {
+					"line": 37,
+					"column": 8
+				},
+				"end": {
+					"line": 37,
+					"column": 29
+				}
+			}
+		},
+		{
+			"type": "Block",
+			"value": " trailing block comment ",
+			"start": 660,
+			"end": 688,
+			"loc": {
+				"start": {
+					"line": 38,
+					"column": 2
+				},
+				"end": {
+					"line": 38,
+					"column": 30
+				}
+			}
+		},
+		{
+			"type": "Block",
+			"value": " leading block comment ",
+			"start": 696,
+			"end": 723,
+			"loc": {
+				"start": {
+					"line": 41,
+					"column": 1
+				},
+				"end": {
+					"line": 41,
+					"column": 28
+				}
+			}
+		},
+		{
+			"type": "Line",
+			"value": " leading line comment",
+			"start": 739,
+			"end": 762,
+			"loc": {
+				"start": {
+					"line": 43,
+					"column": 2
+				},
+				"end": {
+					"line": 43,
+					"column": 25
+				}
+			}
+		},
+		{
+			"type": "Line",
+			"value": " trailing line comment",
+			"start": 770,
+			"end": 794,
+			"loc": {
+				"start": {
+					"line": 44,
+					"column": 7
+				},
+				"end": {
+					"line": 44,
+					"column": 31
+				}
+			}
+		},
+		{
+			"type": "Block",
+			"value": " trailing block comment ",
+			"start": 796,
+			"end": 824,
+			"loc": {
+				"start": {
+					"line": 45,
+					"column": 1
+				},
+				"end": {
+					"line": 45,
+					"column": 29
+				}
+			}
+		}
+	]
 }
diff --git a/packages/svelte/tests/parser-legacy/samples/loose-invalid-block/output.json b/packages/svelte/tests/parser-legacy/samples/loose-invalid-block/output.json
index 480fcf2edc..c4d0dd4aa4 100644
--- a/packages/svelte/tests/parser-legacy/samples/loose-invalid-block/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/loose-invalid-block/output.json
@@ -75,9 +75,21 @@
 				"end": 75,
 				"expression": {
 					"type": "Identifier",
+					"name": "",
 					"start": 63,
 					"end": 63,
-					"name": ""
+					"loc": {
+						"start": {
+							"line": 9,
+							"column": 10,
+							"character": 63
+						},
+						"end": {
+							"line": 9,
+							"column": 10,
+							"character": 63
+						}
+					}
 				},
 				"parameters": [],
 				"children": []
@@ -95,9 +107,21 @@
 				"end": 102,
 				"expression": {
 					"type": "Identifier",
+					"name": "foo",
 					"start": 87,
 					"end": 90,
-					"name": "foo"
+					"loc": {
+						"start": {
+							"line": 12,
+							"column": 10,
+							"character": 87
+						},
+						"end": {
+							"line": 12,
+							"column": 13,
+							"character": 90
+						}
+					}
 				},
 				"parameters": [],
 				"children": []
diff --git a/packages/svelte/tests/parser-legacy/samples/loose-invalid-expression/input.svelte b/packages/svelte/tests/parser-legacy/samples/loose-invalid-expression/input.svelte
index a0977b9a63..b64f15c5c1 100644
--- a/packages/svelte/tests/parser-legacy/samples/loose-invalid-expression/input.svelte
+++ b/packages/svelte/tests/parser-legacy/samples/loose-invalid-expression/input.svelte
@@ -9,3 +9,15 @@
 
 asd{a.}asd
 {foo[bar.]}
+
+{#if x.}{/if}
+
+{#each array as item (item.)}{/each}
+
+{#each obj. as item}{/each}
+
+{#await x.}{/await}
+
+{#await x. then y}{/await}
+
+{#await x. catch y}{/await}
diff --git a/packages/svelte/tests/parser-legacy/samples/loose-invalid-expression/output.json b/packages/svelte/tests/parser-legacy/samples/loose-invalid-expression/output.json
index d27b6cd914..136c45fc6e 100644
--- a/packages/svelte/tests/parser-legacy/samples/loose-invalid-expression/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/loose-invalid-expression/output.json
@@ -2,7 +2,7 @@
 	"html": {
 		"type": "Fragment",
 		"start": 0,
-		"end": 164,
+		"end": 324,
 		"children": [
 			{
 				"type": "Element",
@@ -15,16 +15,40 @@
 						"start": 5,
 						"end": 7,
 						"name": "",
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 6,
+								"character": 6
+							},
+							"end": {
+								"line": 1,
+								"column": 6,
+								"character": 6
+							}
+						},
 						"value": [
 							{
 								"type": "AttributeShorthand",
 								"start": 6,
 								"end": 6,
 								"expression": {
+									"type": "Identifier",
+									"name": "",
 									"start": 6,
 									"end": 6,
-									"type": "Identifier",
-									"name": ""
+									"loc": {
+										"start": {
+											"line": 1,
+											"column": 6,
+											"character": 6
+										},
+										"end": {
+											"line": 1,
+											"column": 6,
+											"character": 6
+										}
+									}
 								}
 							}
 						]
@@ -50,6 +74,18 @@
 						"start": 20,
 						"end": 26,
 						"name": "foo",
+						"name_loc": {
+							"start": {
+								"line": 2,
+								"column": 5,
+								"character": 20
+							},
+							"end": {
+								"line": 2,
+								"column": 8,
+								"character": 23
+							}
+						},
 						"value": [
 							{
 								"type": "MustacheTag",
@@ -85,6 +121,18 @@
 						"start": 40,
 						"end": 48,
 						"name": "foo",
+						"name_loc": {
+							"start": {
+								"line": 4,
+								"column": 5,
+								"character": 40
+							},
+							"end": {
+								"line": 4,
+								"column": 8,
+								"character": 43
+							}
+						},
 						"value": [
 							{
 								"type": "MustacheTag",
@@ -120,6 +168,18 @@
 						"start": 61,
 						"end": 73,
 						"name": "foo",
+						"name_loc": {
+							"start": {
+								"line": 5,
+								"column": 5,
+								"character": 61
+							},
+							"end": {
+								"line": 5,
+								"column": 8,
+								"character": 64
+							}
+						},
 						"value": [
 							{
 								"type": "MustacheTag",
@@ -155,6 +215,18 @@
 						"start": 92,
 						"end": 110,
 						"name": "onclick",
+						"name_loc": {
+							"start": {
+								"line": 6,
+								"column": 11,
+								"character": 92
+							},
+							"end": {
+								"line": 6,
+								"column": 18,
+								"character": 99
+							}
+						},
 						"value": [
 							{
 								"type": "MustacheTag",
@@ -190,6 +262,18 @@
 						"end": 137,
 						"type": "Binding",
 						"name": "value",
+						"name_loc": {
+							"start": {
+								"line": 8,
+								"column": 7,
+								"character": 122
+							},
+							"end": {
+								"line": 8,
+								"column": 17,
+								"character": 132
+							}
+						},
 						"expression": {
 							"type": "Identifier",
 							"start": 134,
@@ -236,6 +320,272 @@
 					"end": 163,
 					"name": ""
 				}
+			},
+			{
+				"type": "Text",
+				"start": 164,
+				"end": 166,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "IfBlock",
+				"start": 166,
+				"end": 179,
+				"expression": {
+					"type": "Identifier",
+					"start": 171,
+					"end": 173,
+					"name": ""
+				},
+				"children": []
+			},
+			{
+				"type": "Text",
+				"start": 179,
+				"end": 181,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "EachBlock",
+				"start": 181,
+				"end": 217,
+				"children": [],
+				"context": {
+					"type": "Identifier",
+					"name": "item",
+					"start": 197,
+					"end": 201,
+					"loc": {
+						"start": {
+							"line": 15,
+							"column": 16,
+							"character": 197
+						},
+						"end": {
+							"line": 15,
+							"column": 20,
+							"character": 201
+						}
+					}
+				},
+				"expression": {
+					"type": "Identifier",
+					"start": 188,
+					"end": 193,
+					"loc": {
+						"start": {
+							"line": 15,
+							"column": 7
+						},
+						"end": {
+							"line": 15,
+							"column": 12
+						}
+					},
+					"name": "array"
+				},
+				"key": {
+					"type": "Identifier",
+					"start": 203,
+					"end": 208,
+					"name": ""
+				}
+			},
+			{
+				"type": "Text",
+				"start": 217,
+				"end": 219,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "EachBlock",
+				"start": 219,
+				"end": 246,
+				"children": [],
+				"context": {
+					"type": "Identifier",
+					"name": "item",
+					"start": 234,
+					"end": 238,
+					"loc": {
+						"start": {
+							"line": 17,
+							"column": 15,
+							"character": 234
+						},
+						"end": {
+							"line": 17,
+							"column": 19,
+							"character": 238
+						}
+					}
+				},
+				"expression": {
+					"type": "Identifier",
+					"name": "",
+					"start": 226,
+					"end": 230
+				}
+			},
+			{
+				"type": "Text",
+				"start": 246,
+				"end": 248,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "AwaitBlock",
+				"start": 248,
+				"end": 267,
+				"expression": {
+					"type": "Identifier",
+					"start": 256,
+					"end": 258,
+					"name": ""
+				},
+				"value": null,
+				"error": null,
+				"pending": {
+					"type": "PendingBlock",
+					"start": 259,
+					"end": 259,
+					"children": [],
+					"skip": false
+				},
+				"then": {
+					"type": "ThenBlock",
+					"start": null,
+					"end": null,
+					"children": [],
+					"skip": true
+				},
+				"catch": {
+					"type": "CatchBlock",
+					"start": null,
+					"end": null,
+					"children": [],
+					"skip": true
+				}
+			},
+			{
+				"type": "Text",
+				"start": 267,
+				"end": 269,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "AwaitBlock",
+				"start": 269,
+				"end": 295,
+				"expression": {
+					"type": "Identifier",
+					"name": "",
+					"start": 277,
+					"end": 279
+				},
+				"value": {
+					"type": "Identifier",
+					"name": "y",
+					"start": 285,
+					"end": 286,
+					"loc": {
+						"start": {
+							"line": 21,
+							"column": 16,
+							"character": 285
+						},
+						"end": {
+							"line": 21,
+							"column": 17,
+							"character": 286
+						}
+					}
+				},
+				"error": null,
+				"pending": {
+					"type": "PendingBlock",
+					"start": null,
+					"end": null,
+					"children": [],
+					"skip": true
+				},
+				"then": {
+					"type": "ThenBlock",
+					"start": 287,
+					"end": 267,
+					"children": [],
+					"skip": false
+				},
+				"catch": {
+					"type": "CatchBlock",
+					"start": null,
+					"end": null,
+					"children": [],
+					"skip": true
+				}
+			},
+			{
+				"type": "Text",
+				"start": 295,
+				"end": 297,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "AwaitBlock",
+				"start": 297,
+				"end": 324,
+				"expression": {
+					"type": "Identifier",
+					"name": "",
+					"start": 305,
+					"end": 307
+				},
+				"value": null,
+				"error": {
+					"type": "Identifier",
+					"name": "y",
+					"start": 314,
+					"end": 315,
+					"loc": {
+						"start": {
+							"line": 23,
+							"column": 17,
+							"character": 314
+						},
+						"end": {
+							"line": 23,
+							"column": 18,
+							"character": 315
+						}
+					}
+				},
+				"pending": {
+					"type": "PendingBlock",
+					"start": null,
+					"end": null,
+					"children": [],
+					"skip": true
+				},
+				"then": {
+					"type": "ThenBlock",
+					"start": null,
+					"end": null,
+					"children": [],
+					"skip": true
+				},
+				"catch": {
+					"type": "CatchBlock",
+					"start": 316,
+					"end": 295,
+					"children": [],
+					"skip": false
+				}
 			}
 		]
 	}
diff --git a/packages/svelte/tests/parser-legacy/samples/loose-unclosed-block/output.json b/packages/svelte/tests/parser-legacy/samples/loose-unclosed-block/output.json
index e6e909f0d5..37a46a48da 100644
--- a/packages/svelte/tests/parser-legacy/samples/loose-unclosed-block/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/loose-unclosed-block/output.json
@@ -240,6 +240,7 @@
 					"type": "Identifier",
 					"name": "y",
 					"start": 138,
+					"end": 139,
 					"loc": {
 						"start": {
 							"line": 19,
@@ -251,8 +252,7 @@
 							"column": 13,
 							"character": 139
 						}
-					},
-					"end": 139
+					}
 				},
 				"expression": {
 					"type": "Identifier",
diff --git a/packages/svelte/tests/parser-legacy/samples/loose-unclosed-open-tag/output.json b/packages/svelte/tests/parser-legacy/samples/loose-unclosed-open-tag/output.json
index 1792d6b8e6..9d5d0e7658 100644
--- a/packages/svelte/tests/parser-legacy/samples/loose-unclosed-open-tag/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/loose-unclosed-open-tag/output.json
@@ -29,6 +29,18 @@
 								"start": 13,
 								"end": 22,
 								"name": "foo",
+								"name_loc": {
+									"start": {
+										"line": 2,
+										"column": 7,
+										"character": 13
+									},
+									"end": {
+										"line": 2,
+										"column": 10,
+										"character": 16
+									}
+								},
 								"value": [
 									{
 										"type": "MustacheTag",
@@ -90,6 +102,18 @@
 								"start": 44,
 								"end": 53,
 								"name": "foo",
+								"name_loc": {
+									"start": {
+										"line": 6,
+										"column": 7,
+										"character": 44
+									},
+									"end": {
+										"line": 6,
+										"column": 10,
+										"character": 47
+									}
+								},
 								"value": [
 									{
 										"type": "MustacheTag",
@@ -158,6 +182,18 @@
 								"start": 79,
 								"end": 88,
 								"name": "foo",
+								"name_loc": {
+									"start": {
+										"line": 10,
+										"column": 7,
+										"character": 79
+									},
+									"end": {
+										"line": 10,
+										"column": 10,
+										"character": 82
+									}
+								},
 								"value": [
 									{
 										"type": "MustacheTag",
@@ -226,6 +262,18 @@
 								"start": 113,
 								"end": 122,
 								"name": "foo",
+								"name_loc": {
+									"start": {
+										"line": 14,
+										"column": 7,
+										"character": 113
+									},
+									"end": {
+										"line": 14,
+										"column": 10,
+										"character": 116
+									}
+								},
 								"value": [
 									{
 										"type": "MustacheTag",
@@ -317,6 +365,18 @@
 						"start": 161,
 						"end": 170,
 						"name": "foo",
+						"name_loc": {
+							"start": {
+								"line": 20,
+								"column": 5,
+								"character": 161
+							},
+							"end": {
+								"line": 20,
+								"column": 8,
+								"character": 164
+							}
+						},
 						"value": [
 							{
 								"type": "MustacheTag",
diff --git a/packages/svelte/tests/parser-legacy/samples/loose-unclosed-tag/input.svelte b/packages/svelte/tests/parser-legacy/samples/loose-unclosed-tag/input.svelte
index 10a3876b7c..83017c79aa 100644
--- a/packages/svelte/tests/parser-legacy/samples/loose-unclosed-tag/input.svelte
+++ b/packages/svelte/tests/parser-legacy/samples/loose-unclosed-tag/input.svelte
@@ -10,6 +10,14 @@
 	<span
 </div>
 
+<div>
+	<Comp.
+</div>
+
+<div>
+	<comp.
+</div>
+
 {#if foo}
 	<div>
 {/if}
diff --git a/packages/svelte/tests/parser-legacy/samples/loose-unclosed-tag/output.json b/packages/svelte/tests/parser-legacy/samples/loose-unclosed-tag/output.json
index d91cc68098..1ff3342de0 100644
--- a/packages/svelte/tests/parser-legacy/samples/loose-unclosed-tag/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/loose-unclosed-tag/output.json
@@ -2,7 +2,7 @@
 	"html": {
 		"type": "Fragment",
 		"start": 0,
-		"end": 160,
+		"end": 204,
 		"children": [
 			{
 				"type": "Element",
@@ -68,6 +68,18 @@
 								"start": 35,
 								"end": 44,
 								"name": "foo",
+								"name_loc": {
+									"start": {
+										"line": 6,
+										"column": 7,
+										"character": 35
+									},
+									"end": {
+										"line": 6,
+										"column": 10,
+										"character": 38
+									}
+								},
 								"value": [
 									{
 										"type": "MustacheTag",
@@ -136,20 +148,82 @@
 				"data": "\n\n"
 			},
 			{
-				"type": "IfBlock",
+				"type": "Element",
 				"start": 74,
+				"end": 94,
+				"name": "div",
+				"attributes": [],
+				"children": [
+					{
+						"type": "Text",
+						"start": 79,
+						"end": 81,
+						"raw": "\n\t",
+						"data": "\n\t"
+					},
+					{
+						"type": "InlineComponent",
+						"start": 81,
+						"end": 88,
+						"name": "Comp.",
+						"attributes": [],
+						"children": []
+					}
+				]
+			},
+			{
+				"type": "Text",
+				"start": 94,
 				"end": 96,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "Element",
+				"start": 96,
+				"end": 116,
+				"name": "div",
+				"attributes": [],
+				"children": [
+					{
+						"type": "Text",
+						"start": 101,
+						"end": 103,
+						"raw": "\n\t",
+						"data": "\n\t"
+					},
+					{
+						"type": "InlineComponent",
+						"start": 103,
+						"end": 110,
+						"name": "comp.",
+						"attributes": [],
+						"children": []
+					}
+				]
+			},
+			{
+				"type": "Text",
+				"start": 116,
+				"end": 118,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "IfBlock",
+				"start": 118,
+				"end": 140,
 				"expression": {
 					"type": "Identifier",
-					"start": 79,
-					"end": 82,
+					"start": 123,
+					"end": 126,
 					"loc": {
 						"start": {
-							"line": 13,
+							"line": 21,
 							"column": 5
 						},
 						"end": {
-							"line": 13,
+							"line": 21,
 							"column": 8
 						}
 					},
@@ -158,15 +232,15 @@
 				"children": [
 					{
 						"type": "Element",
-						"start": 85,
-						"end": 91,
+						"start": 129,
+						"end": 135,
 						"name": "div",
 						"attributes": [],
 						"children": [
 							{
 								"type": "Text",
-								"start": 90,
-								"end": 91,
+								"start": 134,
+								"end": 135,
 								"raw": "\n",
 								"data": "\n"
 							}
@@ -176,26 +250,26 @@
 			},
 			{
 				"type": "Text",
-				"start": 96,
-				"end": 98,
+				"start": 140,
+				"end": 142,
 				"raw": "\n\n",
 				"data": "\n\n"
 			},
 			{
 				"type": "IfBlock",
-				"start": 98,
-				"end": 130,
+				"start": 142,
+				"end": 174,
 				"expression": {
 					"type": "Identifier",
-					"start": 103,
-					"end": 106,
+					"start": 147,
+					"end": 150,
 					"loc": {
 						"start": {
-							"line": 17,
+							"line": 25,
 							"column": 5
 						},
 						"end": {
-							"line": 17,
+							"line": 25,
 							"column": 8
 						}
 					},
@@ -204,31 +278,43 @@
 				"children": [
 					{
 						"type": "InlineComponent",
-						"start": 109,
-						"end": 125,
+						"start": 153,
+						"end": 169,
 						"name": "Comp",
 						"attributes": [
 							{
 								"type": "Attribute",
-								"start": 115,
-								"end": 124,
+								"start": 159,
+								"end": 168,
 								"name": "foo",
+								"name_loc": {
+									"start": {
+										"line": 26,
+										"column": 7,
+										"character": 159
+									},
+									"end": {
+										"line": 26,
+										"column": 10,
+										"character": 162
+									}
+								},
 								"value": [
 									{
 										"type": "MustacheTag",
-										"start": 119,
-										"end": 124,
+										"start": 163,
+										"end": 168,
 										"expression": {
 											"type": "Identifier",
-											"start": 120,
-											"end": 123,
+											"start": 164,
+											"end": 167,
 											"loc": {
 												"start": {
-													"line": 18,
+													"line": 26,
 													"column": 12
 												},
 												"end": {
-													"line": 18,
+													"line": 26,
 													"column": 15
 												}
 											},
@@ -244,36 +330,36 @@
 			},
 			{
 				"type": "Text",
-				"start": 130,
-				"end": 132,
+				"start": 174,
+				"end": 176,
 				"raw": "\n\n",
 				"data": "\n\n"
 			},
 			{
 				"type": "Element",
-				"start": 132,
-				"end": 160,
+				"start": 176,
+				"end": 204,
 				"name": "div",
 				"attributes": [],
 				"children": [
 					{
 						"type": "Text",
-						"start": 137,
-						"end": 138,
+						"start": 181,
+						"end": 182,
 						"raw": "\n",
 						"data": "\n"
 					},
 					{
 						"type": "Element",
-						"start": 138,
-						"end": 147,
+						"start": 182,
+						"end": 191,
 						"name": "p",
 						"attributes": [],
 						"children": [
 							{
 								"type": "Text",
-								"start": 141,
-								"end": 143,
+								"start": 185,
+								"end": 187,
 								"raw": "hi",
 								"data": "hi"
 							}
@@ -281,15 +367,15 @@
 					},
 					{
 						"type": "Text",
-						"start": 147,
-						"end": 149,
+						"start": 191,
+						"end": 193,
 						"raw": "\n\n",
 						"data": "\n\n"
 					},
 					{
 						"type": "Element",
-						"start": 149,
-						"end": 160,
+						"start": 193,
+						"end": 204,
 						"name": "open-ended",
 						"attributes": [],
 						"children": []
diff --git a/packages/svelte/tests/parser-legacy/samples/no-error-if-before-closing/output.json b/packages/svelte/tests/parser-legacy/samples/no-error-if-before-closing/output.json
index c60efd4fba..de12cffd86 100644
--- a/packages/svelte/tests/parser-legacy/samples/no-error-if-before-closing/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/no-error-if-before-closing/output.json
@@ -119,6 +119,7 @@
 					"type": "Identifier",
 					"name": "f",
 					"start": 97,
+					"end": 98,
 					"loc": {
 						"start": {
 							"line": 13,
@@ -130,8 +131,7 @@
 							"column": 8,
 							"character": 98
 						}
-					},
-					"end": 98
+					}
 				},
 				"error": null,
 				"pending": {
@@ -219,6 +219,7 @@
 					"type": "Identifier",
 					"name": "f",
 					"start": 137,
+					"end": 138,
 					"loc": {
 						"start": {
 							"line": 18,
@@ -230,8 +231,7 @@
 							"column": 8,
 							"character": 138
 						}
-					},
-					"end": 138
+					}
 				},
 				"error": null,
 				"pending": {
diff --git a/packages/svelte/tests/parser-legacy/samples/refs/output.json b/packages/svelte/tests/parser-legacy/samples/refs/output.json
index e2bda741fa..1e8efe78f8 100644
--- a/packages/svelte/tests/parser-legacy/samples/refs/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/refs/output.json
@@ -22,7 +22,18 @@
 						"end": 53,
 						"type": "Binding",
 						"name": "this",
-						"modifiers": [],
+						"name_loc": {
+							"start": {
+								"line": 5,
+								"column": 8,
+								"character": 38
+							},
+							"end": {
+								"line": 5,
+								"column": 17,
+								"character": 47
+							}
+						},
 						"expression": {
 							"type": "Identifier",
 							"start": 49,
@@ -38,7 +49,8 @@
 								}
 							},
 							"name": "foo"
-						}
+						},
+						"modifiers": []
 					}
 				],
 				"children": []
@@ -61,7 +73,7 @@
 				},
 				"end": {
 					"line": 3,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [
diff --git a/packages/svelte/tests/parser-legacy/samples/script-attribute-with-curly-braces/output.json b/packages/svelte/tests/parser-legacy/samples/script-attribute-with-curly-braces/output.json
index e0b50e3b92..4ad004c88a 100644
--- a/packages/svelte/tests/parser-legacy/samples/script-attribute-with-curly-braces/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/script-attribute-with-curly-braces/output.json
@@ -73,7 +73,7 @@
 				},
 				"end": {
 					"line": 3,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [
diff --git a/packages/svelte/tests/parser-legacy/samples/script-comment-only/output.json b/packages/svelte/tests/parser-legacy/samples/script-comment-only/output.json
index b04a823e8d..8ec0e0cd65 100644
--- a/packages/svelte/tests/parser-legacy/samples/script-comment-only/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/script-comment-only/output.json
@@ -37,7 +37,7 @@
 				},
 				"end": {
 					"line": 3,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [],
@@ -51,5 +51,23 @@
 				}
 			]
 		}
-	}
+	},
+	"_comments": [
+		{
+			"type": "Line",
+			"value": " TODO write some code",
+			"start": 10,
+			"end": 33,
+			"loc": {
+				"start": {
+					"line": 2,
+					"column": 1
+				},
+				"end": {
+					"line": 2,
+					"column": 24
+				}
+			}
+		}
+	]
 }
diff --git a/packages/svelte/tests/parser-legacy/samples/script-context-module-unquoted/output.json b/packages/svelte/tests/parser-legacy/samples/script-context-module-unquoted/output.json
index 03a526f04e..34a640200c 100644
--- a/packages/svelte/tests/parser-legacy/samples/script-context-module-unquoted/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/script-context-module-unquoted/output.json
@@ -24,12 +24,12 @@
 			"end": 77,
 			"loc": {
 				"start": {
-					"line": 1,
+					"line": 5,
 					"column": 0
 				},
 				"end": {
 					"line": 7,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [
@@ -84,7 +84,7 @@
 				},
 				"end": {
 					"line": 3,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [
@@ -169,7 +169,8 @@
 						"kind": "const"
 					},
 					"specifiers": [],
-					"source": null
+					"source": null,
+					"attributes": []
 				}
 			],
 			"sourceType": "module"
diff --git a/packages/svelte/tests/parser-legacy/samples/script/output.json b/packages/svelte/tests/parser-legacy/samples/script/output.json
index d3d4abd6b2..14d2805216 100644
--- a/packages/svelte/tests/parser-legacy/samples/script/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/script/output.json
@@ -73,7 +73,7 @@
 				},
 				"end": {
 					"line": 3,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [
diff --git a/packages/svelte/tests/parser-legacy/samples/self-reference/output.json b/packages/svelte/tests/parser-legacy/samples/self-reference/output.json
index 34310fcce4..1ca684931b 100644
--- a/packages/svelte/tests/parser-legacy/samples/self-reference/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/self-reference/output.json
@@ -69,6 +69,18 @@
 								"start": 30,
 								"end": 49,
 								"name": "depth",
+								"name_loc": {
+									"start": {
+										"line": 2,
+										"column": 14,
+										"character": 30
+									},
+									"end": {
+										"line": 2,
+										"column": 19,
+										"character": 35
+									}
+								},
 								"value": [
 									{
 										"type": "MustacheTag",
diff --git a/packages/svelte/tests/parser-legacy/samples/slotted-element/output.json b/packages/svelte/tests/parser-legacy/samples/slotted-element/output.json
index 90ded68103..caa0b86c45 100644
--- a/packages/svelte/tests/parser-legacy/samples/slotted-element/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/slotted-element/output.json
@@ -22,6 +22,18 @@
 								"start": 16,
 								"end": 26,
 								"name": "slot",
+								"name_loc": {
+									"start": {
+										"line": 1,
+										"column": 16,
+										"character": 16
+									},
+									"end": {
+										"line": 1,
+										"column": 20,
+										"character": 20
+									}
+								},
 								"value": [
 									{
 										"start": 22,
diff --git a/packages/svelte/tests/parser-legacy/samples/transition-intro-no-params/output.json b/packages/svelte/tests/parser-legacy/samples/transition-intro-no-params/output.json
index f30788d758..9f0d007cc8 100644
--- a/packages/svelte/tests/parser-legacy/samples/transition-intro-no-params/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/transition-intro-no-params/output.json
@@ -15,8 +15,20 @@
 						"end": 12,
 						"type": "Transition",
 						"name": "fade",
-						"modifiers": [],
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 5,
+								"character": 5
+							},
+							"end": {
+								"line": 1,
+								"column": 12,
+								"character": 12
+							}
+						},
 						"expression": null,
+						"modifiers": [],
 						"intro": true,
 						"outro": false
 					}
diff --git a/packages/svelte/tests/parser-legacy/samples/transition-intro/output.json b/packages/svelte/tests/parser-legacy/samples/transition-intro/output.json
index ae52f72c5d..61b4afbc13 100644
--- a/packages/svelte/tests/parser-legacy/samples/transition-intro/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/transition-intro/output.json
@@ -15,7 +15,18 @@
 						"end": 30,
 						"type": "Transition",
 						"name": "style",
-						"modifiers": [],
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 5,
+								"character": 5
+							},
+							"end": {
+								"line": 1,
+								"column": 13,
+								"character": 13
+							}
+						},
 						"expression": {
 							"type": "ObjectExpression",
 							"start": 16,
@@ -85,6 +96,7 @@
 								}
 							]
 						},
+						"modifiers": [],
 						"intro": true,
 						"outro": false
 					}
diff --git a/packages/svelte/tests/parser-legacy/samples/unusual-identifier/output.json b/packages/svelte/tests/parser-legacy/samples/unusual-identifier/output.json
index 9081b7cb92..da5555a777 100644
--- a/packages/svelte/tests/parser-legacy/samples/unusual-identifier/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/unusual-identifier/output.json
@@ -44,6 +44,7 @@
 					"type": "Identifier",
 					"name": "𐊧",
 					"start": 17,
+					"end": 19,
 					"loc": {
 						"start": {
 							"line": 1,
@@ -55,8 +56,7 @@
 							"column": 19,
 							"character": 19
 						}
-					},
-					"end": 19
+					}
 				},
 				"expression": {
 					"type": "Identifier",
diff --git a/packages/svelte/tests/parser-legacy/samples/whitespace-after-script-tag/output.json b/packages/svelte/tests/parser-legacy/samples/whitespace-after-script-tag/output.json
index 69b2382442..8853c32f9c 100644
--- a/packages/svelte/tests/parser-legacy/samples/whitespace-after-script-tag/output.json
+++ b/packages/svelte/tests/parser-legacy/samples/whitespace-after-script-tag/output.json
@@ -72,8 +72,8 @@
 					"column": 0
 				},
 				"end": {
-					"line": 3,
-					"column": 0
+					"line": 8,
+					"column": 1
 				}
 			},
 			"body": [
diff --git a/packages/svelte/tests/parser-legacy/test.ts b/packages/svelte/tests/parser-legacy/test.ts
index 987253d8d0..2e64389404 100644
--- a/packages/svelte/tests/parser-legacy/test.ts
+++ b/packages/svelte/tests/parser-legacy/test.ts
@@ -18,7 +18,7 @@ const { test, run } = suite<ParserTest>(async (config, cwd) => {
 
 	// run `UPDATE_SNAPSHOTS=true pnpm test parser` to update parser tests
 	if (process.env.UPDATE_SNAPSHOTS) {
-		fs.writeFileSync(`${cwd}/output.json`, JSON.stringify(actual, null, '\t'));
+		fs.writeFileSync(`${cwd}/output.json`, JSON.stringify(actual, null, '\t') + '\n');
 	} else {
 		fs.writeFileSync(`${cwd}/_actual.json`, JSON.stringify(actual, null, '\t'));
 
diff --git a/packages/svelte/tests/parser-modern/samples/attachments/input.svelte b/packages/svelte/tests/parser-modern/samples/attachments/input.svelte
new file mode 100644
index 0000000000..9faae8d1bf
--- /dev/null
+++ b/packages/svelte/tests/parser-modern/samples/attachments/input.svelte
@@ -0,0 +1 @@
+<div {@attach (node) => {}} {@attach (node) => {}}></div>
diff --git a/packages/svelte/tests/parser-modern/samples/attachments/output.json b/packages/svelte/tests/parser-modern/samples/attachments/output.json
new file mode 100644
index 0000000000..d37fec7beb
--- /dev/null
+++ b/packages/svelte/tests/parser-modern/samples/attachments/output.json
@@ -0,0 +1,153 @@
+{
+	"css": null,
+	"js": [],
+	"start": 0,
+	"end": 57,
+	"type": "Root",
+	"fragment": {
+		"type": "Fragment",
+		"nodes": [
+			{
+				"type": "RegularElement",
+				"start": 0,
+				"end": 57,
+				"name": "div",
+				"name_loc": {
+					"start": {
+						"line": 1,
+						"column": 1,
+						"character": 1
+					},
+					"end": {
+						"line": 1,
+						"column": 4,
+						"character": 4
+					}
+				},
+				"attributes": [
+					{
+						"type": "AttachTag",
+						"start": 5,
+						"end": 27,
+						"expression": {
+							"type": "ArrowFunctionExpression",
+							"start": 14,
+							"end": 26,
+							"loc": {
+								"start": {
+									"line": 1,
+									"column": 14
+								},
+								"end": {
+									"line": 1,
+									"column": 26
+								}
+							},
+							"id": null,
+							"expression": false,
+							"generator": false,
+							"async": false,
+							"params": [
+								{
+									"type": "Identifier",
+									"start": 15,
+									"end": 19,
+									"loc": {
+										"start": {
+											"line": 1,
+											"column": 15
+										},
+										"end": {
+											"line": 1,
+											"column": 19
+										}
+									},
+									"name": "node"
+								}
+							],
+							"body": {
+								"type": "BlockStatement",
+								"start": 24,
+								"end": 26,
+								"loc": {
+									"start": {
+										"line": 1,
+										"column": 24
+									},
+									"end": {
+										"line": 1,
+										"column": 26
+									}
+								},
+								"body": []
+							}
+						}
+					},
+					{
+						"type": "AttachTag",
+						"start": 28,
+						"end": 50,
+						"expression": {
+							"type": "ArrowFunctionExpression",
+							"start": 37,
+							"end": 49,
+							"loc": {
+								"start": {
+									"line": 1,
+									"column": 37
+								},
+								"end": {
+									"line": 1,
+									"column": 49
+								}
+							},
+							"id": null,
+							"expression": false,
+							"generator": false,
+							"async": false,
+							"params": [
+								{
+									"type": "Identifier",
+									"start": 38,
+									"end": 42,
+									"loc": {
+										"start": {
+											"line": 1,
+											"column": 38
+										},
+										"end": {
+											"line": 1,
+											"column": 42
+										}
+									},
+									"name": "node"
+								}
+							],
+							"body": {
+								"type": "BlockStatement",
+								"start": 47,
+								"end": 49,
+								"loc": {
+									"start": {
+										"line": 1,
+										"column": 47
+									},
+									"end": {
+										"line": 1,
+										"column": 49
+									}
+								},
+								"body": []
+							}
+						}
+					}
+				],
+				"fragment": {
+					"type": "Fragment",
+					"nodes": []
+				}
+			}
+		]
+	},
+	"options": null
+}
diff --git a/packages/svelte/tests/parser-modern/samples/comment-before-function-binding/input.svelte b/packages/svelte/tests/parser-modern/samples/comment-before-function-binding/input.svelte
new file mode 100644
index 0000000000..50200a9eac
--- /dev/null
+++ b/packages/svelte/tests/parser-modern/samples/comment-before-function-binding/input.svelte
@@ -0,0 +1,10 @@
+<script>
+	let value = '';
+</script>
+
+<input bind:value={
+	/** ( */
+	() => value,
+	(v) => value = v.toLowerCase()
+}
+/>
diff --git a/packages/svelte/tests/parser-modern/samples/comment-before-function-binding/output.json b/packages/svelte/tests/parser-modern/samples/comment-before-function-binding/output.json
new file mode 100644
index 0000000000..27692e98b4
--- /dev/null
+++ b/packages/svelte/tests/parser-modern/samples/comment-before-function-binding/output.json
@@ -0,0 +1,350 @@
+{
+	"css": null,
+	"js": [],
+	"start": 0,
+	"end": 117,
+	"type": "Root",
+	"fragment": {
+		"type": "Fragment",
+		"nodes": [
+			{
+				"type": "Text",
+				"start": 35,
+				"end": 37,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "RegularElement",
+				"start": 37,
+				"end": 117,
+				"name": "input",
+				"name_loc": {
+					"start": {
+						"line": 5,
+						"column": 1,
+						"character": 38
+					},
+					"end": {
+						"line": 5,
+						"column": 6,
+						"character": 43
+					}
+				},
+				"attributes": [
+					{
+						"start": 44,
+						"end": 114,
+						"type": "BindDirective",
+						"name": "value",
+						"name_loc": {
+							"start": {
+								"line": 5,
+								"column": 7,
+								"character": 44
+							},
+							"end": {
+								"line": 5,
+								"column": 17,
+								"character": 54
+							}
+						},
+						"expression": {
+							"type": "SequenceExpression",
+							"start": 68,
+							"end": 112,
+							"loc": {
+								"start": {
+									"line": 7,
+									"column": 1
+								},
+								"end": {
+									"line": 8,
+									"column": 31
+								}
+							},
+							"expressions": [
+								{
+									"type": "ArrowFunctionExpression",
+									"start": 68,
+									"end": 79,
+									"loc": {
+										"start": {
+											"line": 7,
+											"column": 1
+										},
+										"end": {
+											"line": 7,
+											"column": 12
+										}
+									},
+									"id": null,
+									"expression": true,
+									"generator": false,
+									"async": false,
+									"params": [],
+									"body": {
+										"type": "Identifier",
+										"start": 74,
+										"end": 79,
+										"loc": {
+											"start": {
+												"line": 7,
+												"column": 7
+											},
+											"end": {
+												"line": 7,
+												"column": 12
+											}
+										},
+										"name": "value"
+									}
+								},
+								{
+									"type": "ArrowFunctionExpression",
+									"start": 82,
+									"end": 112,
+									"loc": {
+										"start": {
+											"line": 8,
+											"column": 1
+										},
+										"end": {
+											"line": 8,
+											"column": 31
+										}
+									},
+									"id": null,
+									"expression": true,
+									"generator": false,
+									"async": false,
+									"params": [
+										{
+											"type": "Identifier",
+											"start": 83,
+											"end": 84,
+											"loc": {
+												"start": {
+													"line": 8,
+													"column": 2
+												},
+												"end": {
+													"line": 8,
+													"column": 3
+												}
+											},
+											"name": "v"
+										}
+									],
+									"body": {
+										"type": "AssignmentExpression",
+										"start": 89,
+										"end": 112,
+										"loc": {
+											"start": {
+												"line": 8,
+												"column": 8
+											},
+											"end": {
+												"line": 8,
+												"column": 31
+											}
+										},
+										"operator": "=",
+										"left": {
+											"type": "Identifier",
+											"start": 89,
+											"end": 94,
+											"loc": {
+												"start": {
+													"line": 8,
+													"column": 8
+												},
+												"end": {
+													"line": 8,
+													"column": 13
+												}
+											},
+											"name": "value"
+										},
+										"right": {
+											"type": "CallExpression",
+											"start": 97,
+											"end": 112,
+											"loc": {
+												"start": {
+													"line": 8,
+													"column": 16
+												},
+												"end": {
+													"line": 8,
+													"column": 31
+												}
+											},
+											"callee": {
+												"type": "MemberExpression",
+												"start": 97,
+												"end": 110,
+												"loc": {
+													"start": {
+														"line": 8,
+														"column": 16
+													},
+													"end": {
+														"line": 8,
+														"column": 29
+													}
+												},
+												"object": {
+													"type": "Identifier",
+													"start": 97,
+													"end": 98,
+													"loc": {
+														"start": {
+															"line": 8,
+															"column": 16
+														},
+														"end": {
+															"line": 8,
+															"column": 17
+														}
+													},
+													"name": "v"
+												},
+												"property": {
+													"type": "Identifier",
+													"start": 99,
+													"end": 110,
+													"loc": {
+														"start": {
+															"line": 8,
+															"column": 18
+														},
+														"end": {
+															"line": 8,
+															"column": 29
+														}
+													},
+													"name": "toLowerCase"
+												},
+												"computed": false,
+												"optional": false
+											},
+											"arguments": [],
+											"optional": false
+										}
+									}
+								}
+							],
+							"leadingComments": [
+								{
+									"type": "Block",
+									"value": "* ( ",
+									"start": 58,
+									"end": 66
+								}
+							]
+						},
+						"modifiers": []
+					}
+				],
+				"fragment": {
+					"type": "Fragment",
+					"nodes": []
+				}
+			}
+		]
+	},
+	"options": null,
+	"instance": {
+		"type": "Script",
+		"start": 0,
+		"end": 35,
+		"context": "default",
+		"content": {
+			"type": "Program",
+			"start": 8,
+			"end": 26,
+			"loc": {
+				"start": {
+					"line": 1,
+					"column": 0
+				},
+				"end": {
+					"line": 3,
+					"column": 9
+				}
+			},
+			"body": [
+				{
+					"type": "VariableDeclaration",
+					"start": 10,
+					"end": 25,
+					"loc": {
+						"start": {
+							"line": 2,
+							"column": 1
+						},
+						"end": {
+							"line": 2,
+							"column": 16
+						}
+					},
+					"declarations": [
+						{
+							"type": "VariableDeclarator",
+							"start": 14,
+							"end": 24,
+							"loc": {
+								"start": {
+									"line": 2,
+									"column": 5
+								},
+								"end": {
+									"line": 2,
+									"column": 15
+								}
+							},
+							"id": {
+								"type": "Identifier",
+								"start": 14,
+								"end": 19,
+								"loc": {
+									"start": {
+										"line": 2,
+										"column": 5
+									},
+									"end": {
+										"line": 2,
+										"column": 10
+									}
+								},
+								"name": "value"
+							},
+							"init": {
+								"type": "Literal",
+								"start": 22,
+								"end": 24,
+								"loc": {
+									"start": {
+										"line": 2,
+										"column": 13
+									},
+									"end": {
+										"line": 2,
+										"column": 15
+									}
+								},
+								"value": "",
+								"raw": "''"
+							}
+						}
+					],
+					"kind": "let"
+				}
+			],
+			"sourceType": "module"
+		},
+		"attributes": []
+	}
+}
diff --git a/packages/svelte/tests/parser-modern/samples/comment-before-script/output.json b/packages/svelte/tests/parser-modern/samples/comment-before-script/output.json
index 13c099a857..8840aad85a 100644
--- a/packages/svelte/tests/parser-modern/samples/comment-before-script/output.json
+++ b/packages/svelte/tests/parser-modern/samples/comment-before-script/output.json
@@ -2,7 +2,7 @@
 	"css": null,
 	"js": [],
 	"start": 0,
-	"end": 27,
+	"end": 76,
 	"type": "Root",
 	"fragment": {
 		"type": "Fragment",
@@ -34,12 +34,12 @@
 			"end": 67,
 			"loc": {
 				"start": {
-					"line": 1,
+					"line": 2,
 					"column": 0
 				},
 				"end": {
 					"line": 4,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [
@@ -75,7 +75,7 @@
 							"id": {
 								"type": "Identifier",
 								"start": 52,
-								"end": 57,
+								"end": 65,
 								"loc": {
 									"start": {
 										"line": 3,
@@ -138,6 +138,18 @@
 				"start": 36,
 				"end": 45,
 				"name": "lang",
+				"name_loc": {
+					"start": {
+						"line": 2,
+						"column": 8,
+						"character": 36
+					},
+					"end": {
+						"line": 2,
+						"column": 12,
+						"character": 40
+					}
+				},
 				"value": [
 					{
 						"start": 42,
diff --git a/packages/svelte/tests/parser-modern/samples/comment-in-tag/input.svelte b/packages/svelte/tests/parser-modern/samples/comment-in-tag/input.svelte
new file mode 100644
index 0000000000..3070aeb178
--- /dev/null
+++ b/packages/svelte/tests/parser-modern/samples/comment-in-tag/input.svelte
@@ -0,0 +1,22 @@
+<div
+	data-one="1"
+	// this is a line comment
+	data-two="2"
+	/* this is a
+		m
+		u
+		l
+		t
+		i
+		l
+		i
+		n
+		e
+		comment
+	*/
+	// oh look another line comment
+	// (two, in fact)
+	data-three="3"
+></div>
+
+<span /* inline */ /* another inline */ data-one="1"></span>
diff --git a/packages/svelte/tests/parser-modern/samples/comment-in-tag/output.json b/packages/svelte/tests/parser-modern/samples/comment-in-tag/output.json
new file mode 100644
index 0000000000..45a57d3049
--- /dev/null
+++ b/packages/svelte/tests/parser-modern/samples/comment-in-tag/output.json
@@ -0,0 +1,286 @@
+{
+	"css": null,
+	"js": [],
+	"start": 0,
+	"end": 261,
+	"type": "Root",
+	"fragment": {
+		"type": "Fragment",
+		"nodes": [
+			{
+				"type": "RegularElement",
+				"start": 0,
+				"end": 199,
+				"name": "div",
+				"name_loc": {
+					"start": {
+						"line": 1,
+						"column": 1,
+						"character": 1
+					},
+					"end": {
+						"line": 1,
+						"column": 4,
+						"character": 4
+					}
+				},
+				"attributes": [
+					{
+						"type": "Attribute",
+						"start": 6,
+						"end": 18,
+						"name": "data-one",
+						"name_loc": {
+							"start": {
+								"line": 2,
+								"column": 1,
+								"character": 6
+							},
+							"end": {
+								"line": 2,
+								"column": 9,
+								"character": 14
+							}
+						},
+						"value": [
+							{
+								"start": 16,
+								"end": 17,
+								"type": "Text",
+								"raw": "1",
+								"data": "1"
+							}
+						]
+					},
+					{
+						"type": "Attribute",
+						"start": 47,
+						"end": 59,
+						"name": "data-two",
+						"name_loc": {
+							"start": {
+								"line": 4,
+								"column": 1,
+								"character": 47
+							},
+							"end": {
+								"line": 4,
+								"column": 9,
+								"character": 55
+							}
+						},
+						"value": [
+							{
+								"start": 57,
+								"end": 58,
+								"type": "Text",
+								"raw": "2",
+								"data": "2"
+							}
+						]
+					},
+					{
+						"type": "Attribute",
+						"start": 177,
+						"end": 191,
+						"name": "data-three",
+						"name_loc": {
+							"start": {
+								"line": 19,
+								"column": 1,
+								"character": 177
+							},
+							"end": {
+								"line": 19,
+								"column": 11,
+								"character": 187
+							}
+						},
+						"value": [
+							{
+								"start": 189,
+								"end": 190,
+								"type": "Text",
+								"raw": "3",
+								"data": "3"
+							}
+						]
+					}
+				],
+				"fragment": {
+					"type": "Fragment",
+					"nodes": []
+				}
+			},
+			{
+				"type": "Text",
+				"start": 199,
+				"end": 201,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "RegularElement",
+				"start": 201,
+				"end": 261,
+				"name": "span",
+				"name_loc": {
+					"start": {
+						"line": 22,
+						"column": 1,
+						"character": 202
+					},
+					"end": {
+						"line": 22,
+						"column": 5,
+						"character": 206
+					}
+				},
+				"attributes": [
+					{
+						"type": "Attribute",
+						"start": 241,
+						"end": 253,
+						"name": "data-one",
+						"name_loc": {
+							"start": {
+								"line": 22,
+								"column": 40,
+								"character": 241
+							},
+							"end": {
+								"line": 22,
+								"column": 48,
+								"character": 249
+							}
+						},
+						"value": [
+							{
+								"start": 251,
+								"end": 252,
+								"type": "Text",
+								"raw": "1",
+								"data": "1"
+							}
+						]
+					}
+				],
+				"fragment": {
+					"type": "Fragment",
+					"nodes": []
+				}
+			}
+		]
+	},
+	"options": null,
+	"comments": [
+		{
+			"type": "Line",
+			"start": 20,
+			"end": 45,
+			"value": " this is a line comment",
+			"loc": {
+				"start": {
+					"line": 3,
+					"column": 1,
+					"character": 20
+				},
+				"end": {
+					"line": 3,
+					"column": 26,
+					"character": 45
+				}
+			}
+		},
+		{
+			"type": "Block",
+			"start": 61,
+			"end": 123,
+			"value": " this is a\n\t\tm\n\t\tu\n\t\tl\n\t\tt\n\t\ti\n\t\tl\n\t\ti\n\t\tn\n\t\te\n\t\tcomment\n\t",
+			"loc": {
+				"start": {
+					"line": 5,
+					"column": 1,
+					"character": 61
+				},
+				"end": {
+					"line": 16,
+					"column": 3,
+					"character": 123
+				}
+			}
+		},
+		{
+			"type": "Line",
+			"start": 125,
+			"end": 156,
+			"value": " oh look another line comment",
+			"loc": {
+				"start": {
+					"line": 17,
+					"column": 1,
+					"character": 125
+				},
+				"end": {
+					"line": 17,
+					"column": 32,
+					"character": 156
+				}
+			}
+		},
+		{
+			"type": "Line",
+			"start": 158,
+			"end": 175,
+			"value": " (two, in fact)",
+			"loc": {
+				"start": {
+					"line": 18,
+					"column": 1,
+					"character": 158
+				},
+				"end": {
+					"line": 18,
+					"column": 18,
+					"character": 175
+				}
+			}
+		},
+		{
+			"type": "Block",
+			"start": 207,
+			"end": 219,
+			"value": " inline ",
+			"loc": {
+				"start": {
+					"line": 22,
+					"column": 6,
+					"character": 207
+				},
+				"end": {
+					"line": 22,
+					"column": 18,
+					"character": 219
+				}
+			}
+		},
+		{
+			"type": "Block",
+			"start": 220,
+			"end": 240,
+			"value": " another inline ",
+			"loc": {
+				"start": {
+					"line": 22,
+					"column": 19,
+					"character": 220
+				},
+				"end": {
+					"line": 22,
+					"column": 39,
+					"character": 240
+				}
+			}
+		}
+	]
+}
diff --git a/packages/svelte/tests/parser-modern/samples/css-nth-syntax/output.json b/packages/svelte/tests/parser-modern/samples/css-nth-syntax/output.json
index a126acb4c3..3ce5f33d09 100644
--- a/packages/svelte/tests/parser-modern/samples/css-nth-syntax/output.json
+++ b/packages/svelte/tests/parser-modern/samples/css-nth-syntax/output.json
@@ -1079,7 +1079,7 @@
 		}
 	},
 	"js": [],
-	"start": 808,
+	"start": 0,
 	"end": 820,
 	"type": "Root",
 	"fragment": {
@@ -1097,6 +1097,18 @@
 				"start": 808,
 				"end": 820,
 				"name": "h1",
+				"name_loc": {
+					"start": {
+						"line": 46,
+						"column": 1,
+						"character": 809
+					},
+					"end": {
+						"line": 46,
+						"column": 3,
+						"character": 811
+					}
+				},
 				"attributes": [],
 				"fragment": {
 					"type": "Fragment",
diff --git a/packages/svelte/tests/parser-modern/samples/css-pseudo-classes/output.json b/packages/svelte/tests/parser-modern/samples/css-pseudo-classes/output.json
index e410cf2a80..d052affe46 100644
--- a/packages/svelte/tests/parser-modern/samples/css-pseudo-classes/output.json
+++ b/packages/svelte/tests/parser-modern/samples/css-pseudo-classes/output.json
@@ -398,8 +398,8 @@
 		}
 	},
 	"js": [],
-	"start": null,
-	"end": null,
+	"start": 0,
+	"end": 386,
 	"type": "Root",
 	"fragment": {
 		"type": "Fragment",
diff --git a/packages/svelte/tests/parser-modern/samples/each-block-object-pattern-special-characters/input.svelte b/packages/svelte/tests/parser-modern/samples/each-block-object-pattern-special-characters/input.svelte
new file mode 100644
index 0000000000..bc83f8e57f
--- /dev/null
+++ b/packages/svelte/tests/parser-modern/samples/each-block-object-pattern-special-characters/input.svelte
@@ -0,0 +1,9 @@
+{#each x as { y = 'z' }}{/each}
+
+{#each x as { y = '{' }}{/each}
+
+{#each x as { y = ']' }}{/each}
+
+{#each x as { y = `${`"`}` }}{/each}
+
+{#each x as { y = `${`John`}` }}{/each}
diff --git a/packages/svelte/tests/parser-modern/samples/each-block-object-pattern-special-characters/output.json b/packages/svelte/tests/parser-modern/samples/each-block-object-pattern-special-characters/output.json
new file mode 100644
index 0000000000..7fd5deb3ea
--- /dev/null
+++ b/packages/svelte/tests/parser-modern/samples/each-block-object-pattern-special-characters/output.json
@@ -0,0 +1,826 @@
+{
+	"css": null,
+	"js": [],
+	"start": 0,
+	"end": 176,
+	"type": "Root",
+	"fragment": {
+		"type": "Fragment",
+		"nodes": [
+			{
+				"type": "EachBlock",
+				"start": 0,
+				"end": 31,
+				"expression": {
+					"type": "Identifier",
+					"start": 7,
+					"end": 8,
+					"loc": {
+						"start": {
+							"line": 1,
+							"column": 7
+						},
+						"end": {
+							"line": 1,
+							"column": 8
+						}
+					},
+					"name": "x"
+				},
+				"body": {
+					"type": "Fragment",
+					"nodes": []
+				},
+				"context": {
+					"type": "ObjectPattern",
+					"start": 12,
+					"end": 23,
+					"loc": {
+						"start": {
+							"line": 1,
+							"column": 12
+						},
+						"end": {
+							"line": 1,
+							"column": 23
+						}
+					},
+					"properties": [
+						{
+							"type": "Property",
+							"start": 14,
+							"end": 21,
+							"loc": {
+								"start": {
+									"line": 1,
+									"column": 14
+								},
+								"end": {
+									"line": 1,
+									"column": 21
+								}
+							},
+							"method": false,
+							"shorthand": true,
+							"computed": false,
+							"key": {
+								"type": "Identifier",
+								"start": 14,
+								"end": 15,
+								"loc": {
+									"start": {
+										"line": 1,
+										"column": 14
+									},
+									"end": {
+										"line": 1,
+										"column": 15
+									}
+								},
+								"name": "y"
+							},
+							"value": {
+								"type": "AssignmentPattern",
+								"start": 14,
+								"end": 21,
+								"loc": {
+									"start": {
+										"line": 1,
+										"column": 14
+									},
+									"end": {
+										"line": 1,
+										"column": 21
+									}
+								},
+								"left": {
+									"type": "Identifier",
+									"start": 14,
+									"end": 15,
+									"loc": {
+										"start": {
+											"line": 1,
+											"column": 14
+										},
+										"end": {
+											"line": 1,
+											"column": 15
+										}
+									},
+									"name": "y"
+								},
+								"right": {
+									"type": "Literal",
+									"start": 18,
+									"end": 21,
+									"loc": {
+										"start": {
+											"line": 1,
+											"column": 18
+										},
+										"end": {
+											"line": 1,
+											"column": 21
+										}
+									},
+									"value": "z",
+									"raw": "'z'"
+								}
+							},
+							"kind": "init"
+						}
+					]
+				}
+			},
+			{
+				"type": "Text",
+				"start": 31,
+				"end": 33,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "EachBlock",
+				"start": 33,
+				"end": 64,
+				"expression": {
+					"type": "Identifier",
+					"start": 40,
+					"end": 41,
+					"loc": {
+						"start": {
+							"line": 3,
+							"column": 7
+						},
+						"end": {
+							"line": 3,
+							"column": 8
+						}
+					},
+					"name": "x"
+				},
+				"body": {
+					"type": "Fragment",
+					"nodes": []
+				},
+				"context": {
+					"type": "ObjectPattern",
+					"start": 45,
+					"end": 56,
+					"loc": {
+						"start": {
+							"line": 3,
+							"column": 13
+						},
+						"end": {
+							"line": 3,
+							"column": 24
+						}
+					},
+					"properties": [
+						{
+							"type": "Property",
+							"start": 47,
+							"end": 54,
+							"loc": {
+								"start": {
+									"line": 3,
+									"column": 15
+								},
+								"end": {
+									"line": 3,
+									"column": 22
+								}
+							},
+							"method": false,
+							"shorthand": true,
+							"computed": false,
+							"key": {
+								"type": "Identifier",
+								"start": 47,
+								"end": 48,
+								"loc": {
+									"start": {
+										"line": 3,
+										"column": 15
+									},
+									"end": {
+										"line": 3,
+										"column": 16
+									}
+								},
+								"name": "y"
+							},
+							"value": {
+								"type": "AssignmentPattern",
+								"start": 47,
+								"end": 54,
+								"loc": {
+									"start": {
+										"line": 3,
+										"column": 15
+									},
+									"end": {
+										"line": 3,
+										"column": 22
+									}
+								},
+								"left": {
+									"type": "Identifier",
+									"start": 47,
+									"end": 48,
+									"loc": {
+										"start": {
+											"line": 3,
+											"column": 15
+										},
+										"end": {
+											"line": 3,
+											"column": 16
+										}
+									},
+									"name": "y"
+								},
+								"right": {
+									"type": "Literal",
+									"start": 51,
+									"end": 54,
+									"loc": {
+										"start": {
+											"line": 3,
+											"column": 19
+										},
+										"end": {
+											"line": 3,
+											"column": 22
+										}
+									},
+									"value": "{",
+									"raw": "'{'"
+								}
+							},
+							"kind": "init"
+						}
+					]
+				}
+			},
+			{
+				"type": "Text",
+				"start": 64,
+				"end": 66,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "EachBlock",
+				"start": 66,
+				"end": 97,
+				"expression": {
+					"type": "Identifier",
+					"start": 73,
+					"end": 74,
+					"loc": {
+						"start": {
+							"line": 5,
+							"column": 7
+						},
+						"end": {
+							"line": 5,
+							"column": 8
+						}
+					},
+					"name": "x"
+				},
+				"body": {
+					"type": "Fragment",
+					"nodes": []
+				},
+				"context": {
+					"type": "ObjectPattern",
+					"start": 78,
+					"end": 89,
+					"loc": {
+						"start": {
+							"line": 5,
+							"column": 13
+						},
+						"end": {
+							"line": 5,
+							"column": 24
+						}
+					},
+					"properties": [
+						{
+							"type": "Property",
+							"start": 80,
+							"end": 87,
+							"loc": {
+								"start": {
+									"line": 5,
+									"column": 15
+								},
+								"end": {
+									"line": 5,
+									"column": 22
+								}
+							},
+							"method": false,
+							"shorthand": true,
+							"computed": false,
+							"key": {
+								"type": "Identifier",
+								"start": 80,
+								"end": 81,
+								"loc": {
+									"start": {
+										"line": 5,
+										"column": 15
+									},
+									"end": {
+										"line": 5,
+										"column": 16
+									}
+								},
+								"name": "y"
+							},
+							"value": {
+								"type": "AssignmentPattern",
+								"start": 80,
+								"end": 87,
+								"loc": {
+									"start": {
+										"line": 5,
+										"column": 15
+									},
+									"end": {
+										"line": 5,
+										"column": 22
+									}
+								},
+								"left": {
+									"type": "Identifier",
+									"start": 80,
+									"end": 81,
+									"loc": {
+										"start": {
+											"line": 5,
+											"column": 15
+										},
+										"end": {
+											"line": 5,
+											"column": 16
+										}
+									},
+									"name": "y"
+								},
+								"right": {
+									"type": "Literal",
+									"start": 84,
+									"end": 87,
+									"loc": {
+										"start": {
+											"line": 5,
+											"column": 19
+										},
+										"end": {
+											"line": 5,
+											"column": 22
+										}
+									},
+									"value": "]",
+									"raw": "']'"
+								}
+							},
+							"kind": "init"
+						}
+					]
+				}
+			},
+			{
+				"type": "Text",
+				"start": 97,
+				"end": 99,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "EachBlock",
+				"start": 99,
+				"end": 135,
+				"expression": {
+					"type": "Identifier",
+					"start": 106,
+					"end": 107,
+					"loc": {
+						"start": {
+							"line": 7,
+							"column": 7
+						},
+						"end": {
+							"line": 7,
+							"column": 8
+						}
+					},
+					"name": "x"
+				},
+				"body": {
+					"type": "Fragment",
+					"nodes": []
+				},
+				"context": {
+					"type": "ObjectPattern",
+					"start": 111,
+					"end": 127,
+					"loc": {
+						"start": {
+							"line": 7,
+							"column": 13
+						},
+						"end": {
+							"line": 7,
+							"column": 29
+						}
+					},
+					"properties": [
+						{
+							"type": "Property",
+							"start": 113,
+							"end": 125,
+							"loc": {
+								"start": {
+									"line": 7,
+									"column": 15
+								},
+								"end": {
+									"line": 7,
+									"column": 27
+								}
+							},
+							"method": false,
+							"shorthand": true,
+							"computed": false,
+							"key": {
+								"type": "Identifier",
+								"start": 113,
+								"end": 114,
+								"loc": {
+									"start": {
+										"line": 7,
+										"column": 15
+									},
+									"end": {
+										"line": 7,
+										"column": 16
+									}
+								},
+								"name": "y"
+							},
+							"value": {
+								"type": "AssignmentPattern",
+								"start": 113,
+								"end": 125,
+								"loc": {
+									"start": {
+										"line": 7,
+										"column": 15
+									},
+									"end": {
+										"line": 7,
+										"column": 27
+									}
+								},
+								"left": {
+									"type": "Identifier",
+									"start": 113,
+									"end": 114,
+									"loc": {
+										"start": {
+											"line": 7,
+											"column": 15
+										},
+										"end": {
+											"line": 7,
+											"column": 16
+										}
+									},
+									"name": "y"
+								},
+								"right": {
+									"type": "TemplateLiteral",
+									"start": 117,
+									"end": 125,
+									"loc": {
+										"start": {
+											"line": 7,
+											"column": 19
+										},
+										"end": {
+											"line": 7,
+											"column": 27
+										}
+									},
+									"expressions": [
+										{
+											"type": "TemplateLiteral",
+											"start": 120,
+											"end": 123,
+											"loc": {
+												"start": {
+													"line": 7,
+													"column": 22
+												},
+												"end": {
+													"line": 7,
+													"column": 25
+												}
+											},
+											"expressions": [],
+											"quasis": [
+												{
+													"type": "TemplateElement",
+													"start": 121,
+													"end": 122,
+													"loc": {
+														"start": {
+															"line": 7,
+															"column": 23
+														},
+														"end": {
+															"line": 7,
+															"column": 24
+														}
+													},
+													"value": {
+														"raw": "\"",
+														"cooked": "\""
+													},
+													"tail": true
+												}
+											]
+										}
+									],
+									"quasis": [
+										{
+											"type": "TemplateElement",
+											"start": 118,
+											"end": 118,
+											"loc": {
+												"start": {
+													"line": 7,
+													"column": 20
+												},
+												"end": {
+													"line": 7,
+													"column": 20
+												}
+											},
+											"value": {
+												"raw": "",
+												"cooked": ""
+											},
+											"tail": false
+										},
+										{
+											"type": "TemplateElement",
+											"start": 124,
+											"end": 124,
+											"loc": {
+												"start": {
+													"line": 7,
+													"column": 26
+												},
+												"end": {
+													"line": 7,
+													"column": 26
+												}
+											},
+											"value": {
+												"raw": "",
+												"cooked": ""
+											},
+											"tail": true
+										}
+									]
+								}
+							},
+							"kind": "init"
+						}
+					]
+				}
+			},
+			{
+				"type": "Text",
+				"start": 135,
+				"end": 137,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "EachBlock",
+				"start": 137,
+				"end": 176,
+				"expression": {
+					"type": "Identifier",
+					"start": 144,
+					"end": 145,
+					"loc": {
+						"start": {
+							"line": 9,
+							"column": 7
+						},
+						"end": {
+							"line": 9,
+							"column": 8
+						}
+					},
+					"name": "x"
+				},
+				"body": {
+					"type": "Fragment",
+					"nodes": []
+				},
+				"context": {
+					"type": "ObjectPattern",
+					"start": 149,
+					"end": 168,
+					"loc": {
+						"start": {
+							"line": 9,
+							"column": 13
+						},
+						"end": {
+							"line": 9,
+							"column": 32
+						}
+					},
+					"properties": [
+						{
+							"type": "Property",
+							"start": 151,
+							"end": 166,
+							"loc": {
+								"start": {
+									"line": 9,
+									"column": 15
+								},
+								"end": {
+									"line": 9,
+									"column": 30
+								}
+							},
+							"method": false,
+							"shorthand": true,
+							"computed": false,
+							"key": {
+								"type": "Identifier",
+								"start": 151,
+								"end": 152,
+								"loc": {
+									"start": {
+										"line": 9,
+										"column": 15
+									},
+									"end": {
+										"line": 9,
+										"column": 16
+									}
+								},
+								"name": "y"
+							},
+							"value": {
+								"type": "AssignmentPattern",
+								"start": 151,
+								"end": 166,
+								"loc": {
+									"start": {
+										"line": 9,
+										"column": 15
+									},
+									"end": {
+										"line": 9,
+										"column": 30
+									}
+								},
+								"left": {
+									"type": "Identifier",
+									"start": 151,
+									"end": 152,
+									"loc": {
+										"start": {
+											"line": 9,
+											"column": 15
+										},
+										"end": {
+											"line": 9,
+											"column": 16
+										}
+									},
+									"name": "y"
+								},
+								"right": {
+									"type": "TemplateLiteral",
+									"start": 155,
+									"end": 166,
+									"loc": {
+										"start": {
+											"line": 9,
+											"column": 19
+										},
+										"end": {
+											"line": 9,
+											"column": 30
+										}
+									},
+									"expressions": [
+										{
+											"type": "TemplateLiteral",
+											"start": 158,
+											"end": 164,
+											"loc": {
+												"start": {
+													"line": 9,
+													"column": 22
+												},
+												"end": {
+													"line": 9,
+													"column": 28
+												}
+											},
+											"expressions": [],
+											"quasis": [
+												{
+													"type": "TemplateElement",
+													"start": 159,
+													"end": 163,
+													"loc": {
+														"start": {
+															"line": 9,
+															"column": 23
+														},
+														"end": {
+															"line": 9,
+															"column": 27
+														}
+													},
+													"value": {
+														"raw": "John",
+														"cooked": "John"
+													},
+													"tail": true
+												}
+											]
+										}
+									],
+									"quasis": [
+										{
+											"type": "TemplateElement",
+											"start": 156,
+											"end": 156,
+											"loc": {
+												"start": {
+													"line": 9,
+													"column": 20
+												},
+												"end": {
+													"line": 9,
+													"column": 20
+												}
+											},
+											"value": {
+												"raw": "",
+												"cooked": ""
+											},
+											"tail": false
+										},
+										{
+											"type": "TemplateElement",
+											"start": 165,
+											"end": 165,
+											"loc": {
+												"start": {
+													"line": 9,
+													"column": 29
+												},
+												"end": {
+													"line": 9,
+													"column": 29
+												}
+											},
+											"value": {
+												"raw": "",
+												"cooked": ""
+											},
+											"tail": true
+										}
+									]
+								}
+							},
+							"kind": "init"
+						}
+					]
+				}
+			}
+		]
+	},
+	"options": null
+}
diff --git a/packages/svelte/tests/parser-modern/samples/each-block-object-pattern/input.svelte b/packages/svelte/tests/parser-modern/samples/each-block-object-pattern/input.svelte
index 8ffe8a7287..c3bfdb46a6 100644
--- a/packages/svelte/tests/parser-modern/samples/each-block-object-pattern/input.svelte
+++ b/packages/svelte/tests/parser-modern/samples/each-block-object-pattern/input.svelte
@@ -1,3 +1,11 @@
 {#each people as { name, cool = true }}
 	<p>{name} is {cool ? 'cool' : 'not cool'}</p>
 {/each}
+
+{#each people as { name = `Jane ${"Doe"}`, cool = true }}
+	<p>{name} is {cool ? 'cool' : 'not cool'}</p>
+{/each}
+
+{#each people as { name = (() => { return `Jane ${"Doe"}`; })(), cool = true }}
+	<p>{name} is {cool ? 'cool' : 'not cool'}</p>
+{/each}
diff --git a/packages/svelte/tests/parser-modern/samples/each-block-object-pattern/output.json b/packages/svelte/tests/parser-modern/samples/each-block-object-pattern/output.json
index 8fc3feb916..7e2fe09ea2 100644
--- a/packages/svelte/tests/parser-modern/samples/each-block-object-pattern/output.json
+++ b/packages/svelte/tests/parser-modern/samples/each-block-object-pattern/output.json
@@ -2,7 +2,7 @@
 	"css": null,
 	"js": [],
 	"start": 0,
-	"end": 94,
+	"end": 344,
 	"type": "Root",
 	"fragment": {
 		"type": "Fragment",
@@ -42,6 +42,18 @@
 							"start": 41,
 							"end": 86,
 							"name": "p",
+							"name_loc": {
+								"start": {
+									"line": 2,
+									"column": 2,
+									"character": 42
+								},
+								"end": {
+									"line": 2,
+									"column": 3,
+									"character": 43
+								}
+							},
 							"attributes": [],
 							"fragment": {
 								"type": "Fragment",
@@ -204,7 +216,6 @@
 								},
 								"name": "name"
 							},
-							"kind": "init",
 							"value": {
 								"type": "Identifier",
 								"start": 19,
@@ -220,7 +231,8 @@
 									}
 								},
 								"name": "name"
-							}
+							},
+							"kind": "init"
 						},
 						{
 							"type": "Property",
@@ -255,7 +267,6 @@
 								},
 								"name": "cool"
 							},
-							"kind": "init",
 							"value": {
 								"type": "AssignmentPattern",
 								"start": 25,
@@ -303,7 +314,899 @@
 									"value": true,
 									"raw": "true"
 								}
+							},
+							"kind": "init"
+						}
+					]
+				}
+			},
+			{
+				"type": "Text",
+				"start": 94,
+				"end": 96,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "EachBlock",
+				"start": 96,
+				"end": 208,
+				"expression": {
+					"type": "Identifier",
+					"start": 103,
+					"end": 109,
+					"loc": {
+						"start": {
+							"line": 5,
+							"column": 7
+						},
+						"end": {
+							"line": 5,
+							"column": 13
+						}
+					},
+					"name": "people"
+				},
+				"body": {
+					"type": "Fragment",
+					"nodes": [
+						{
+							"type": "Text",
+							"start": 153,
+							"end": 155,
+							"raw": "\n\t",
+							"data": "\n\t"
+						},
+						{
+							"type": "RegularElement",
+							"start": 155,
+							"end": 200,
+							"name": "p",
+							"name_loc": {
+								"start": {
+									"line": 6,
+									"column": 2,
+									"character": 156
+								},
+								"end": {
+									"line": 6,
+									"column": 3,
+									"character": 157
+								}
+							},
+							"attributes": [],
+							"fragment": {
+								"type": "Fragment",
+								"nodes": [
+									{
+										"type": "ExpressionTag",
+										"start": 158,
+										"end": 164,
+										"expression": {
+											"type": "Identifier",
+											"start": 159,
+											"end": 163,
+											"loc": {
+												"start": {
+													"line": 6,
+													"column": 5
+												},
+												"end": {
+													"line": 6,
+													"column": 9
+												}
+											},
+											"name": "name"
+										}
+									},
+									{
+										"type": "Text",
+										"start": 164,
+										"end": 168,
+										"raw": " is ",
+										"data": " is "
+									},
+									{
+										"type": "ExpressionTag",
+										"start": 168,
+										"end": 196,
+										"expression": {
+											"type": "ConditionalExpression",
+											"start": 169,
+											"end": 195,
+											"loc": {
+												"start": {
+													"line": 6,
+													"column": 15
+												},
+												"end": {
+													"line": 6,
+													"column": 41
+												}
+											},
+											"test": {
+												"type": "Identifier",
+												"start": 169,
+												"end": 173,
+												"loc": {
+													"start": {
+														"line": 6,
+														"column": 15
+													},
+													"end": {
+														"line": 6,
+														"column": 19
+													}
+												},
+												"name": "cool"
+											},
+											"consequent": {
+												"type": "Literal",
+												"start": 176,
+												"end": 182,
+												"loc": {
+													"start": {
+														"line": 6,
+														"column": 22
+													},
+													"end": {
+														"line": 6,
+														"column": 28
+													}
+												},
+												"value": "cool",
+												"raw": "'cool'"
+											},
+											"alternate": {
+												"type": "Literal",
+												"start": 185,
+												"end": 195,
+												"loc": {
+													"start": {
+														"line": 6,
+														"column": 31
+													},
+													"end": {
+														"line": 6,
+														"column": 41
+													}
+												},
+												"value": "not cool",
+												"raw": "'not cool'"
+											}
+										}
+									}
+								]
+							}
+						},
+						{
+							"type": "Text",
+							"start": 200,
+							"end": 201,
+							"raw": "\n",
+							"data": "\n"
+						}
+					]
+				},
+				"context": {
+					"type": "ObjectPattern",
+					"start": 113,
+					"end": 152,
+					"loc": {
+						"start": {
+							"line": 5,
+							"column": 18
+						},
+						"end": {
+							"line": 5,
+							"column": 57
+						}
+					},
+					"properties": [
+						{
+							"type": "Property",
+							"start": 115,
+							"end": 137,
+							"loc": {
+								"start": {
+									"line": 5,
+									"column": 20
+								},
+								"end": {
+									"line": 5,
+									"column": 42
+								}
+							},
+							"method": false,
+							"shorthand": true,
+							"computed": false,
+							"key": {
+								"type": "Identifier",
+								"start": 115,
+								"end": 119,
+								"loc": {
+									"start": {
+										"line": 5,
+										"column": 20
+									},
+									"end": {
+										"line": 5,
+										"column": 24
+									}
+								},
+								"name": "name"
+							},
+							"value": {
+								"type": "AssignmentPattern",
+								"start": 115,
+								"end": 137,
+								"loc": {
+									"start": {
+										"line": 5,
+										"column": 20
+									},
+									"end": {
+										"line": 5,
+										"column": 42
+									}
+								},
+								"left": {
+									"type": "Identifier",
+									"start": 115,
+									"end": 119,
+									"loc": {
+										"start": {
+											"line": 5,
+											"column": 20
+										},
+										"end": {
+											"line": 5,
+											"column": 24
+										}
+									},
+									"name": "name"
+								},
+								"right": {
+									"type": "TemplateLiteral",
+									"start": 122,
+									"end": 137,
+									"loc": {
+										"start": {
+											"line": 5,
+											"column": 27
+										},
+										"end": {
+											"line": 5,
+											"column": 42
+										}
+									},
+									"expressions": [
+										{
+											"type": "Literal",
+											"start": 130,
+											"end": 135,
+											"loc": {
+												"start": {
+													"line": 5,
+													"column": 35
+												},
+												"end": {
+													"line": 5,
+													"column": 40
+												}
+											},
+											"value": "Doe",
+											"raw": "\"Doe\""
+										}
+									],
+									"quasis": [
+										{
+											"type": "TemplateElement",
+											"start": 123,
+											"end": 128,
+											"loc": {
+												"start": {
+													"line": 5,
+													"column": 28
+												},
+												"end": {
+													"line": 5,
+													"column": 33
+												}
+											},
+											"value": {
+												"raw": "Jane ",
+												"cooked": "Jane "
+											},
+											"tail": false
+										},
+										{
+											"type": "TemplateElement",
+											"start": 136,
+											"end": 136,
+											"loc": {
+												"start": {
+													"line": 5,
+													"column": 41
+												},
+												"end": {
+													"line": 5,
+													"column": 41
+												}
+											},
+											"value": {
+												"raw": "",
+												"cooked": ""
+											},
+											"tail": true
+										}
+									]
+								}
+							},
+							"kind": "init"
+						},
+						{
+							"type": "Property",
+							"start": 139,
+							"end": 150,
+							"loc": {
+								"start": {
+									"line": 5,
+									"column": 44
+								},
+								"end": {
+									"line": 5,
+									"column": 55
+								}
+							},
+							"method": false,
+							"shorthand": true,
+							"computed": false,
+							"key": {
+								"type": "Identifier",
+								"start": 139,
+								"end": 143,
+								"loc": {
+									"start": {
+										"line": 5,
+										"column": 44
+									},
+									"end": {
+										"line": 5,
+										"column": 48
+									}
+								},
+								"name": "cool"
+							},
+							"value": {
+								"type": "AssignmentPattern",
+								"start": 139,
+								"end": 150,
+								"loc": {
+									"start": {
+										"line": 5,
+										"column": 44
+									},
+									"end": {
+										"line": 5,
+										"column": 55
+									}
+								},
+								"left": {
+									"type": "Identifier",
+									"start": 139,
+									"end": 143,
+									"loc": {
+										"start": {
+											"line": 5,
+											"column": 44
+										},
+										"end": {
+											"line": 5,
+											"column": 48
+										}
+									},
+									"name": "cool"
+								},
+								"right": {
+									"type": "Literal",
+									"start": 146,
+									"end": 150,
+									"loc": {
+										"start": {
+											"line": 5,
+											"column": 51
+										},
+										"end": {
+											"line": 5,
+											"column": 55
+										}
+									},
+									"value": true,
+									"raw": "true"
+								}
+							},
+							"kind": "init"
+						}
+					]
+				}
+			},
+			{
+				"type": "Text",
+				"start": 208,
+				"end": 210,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "EachBlock",
+				"start": 210,
+				"end": 344,
+				"expression": {
+					"type": "Identifier",
+					"start": 217,
+					"end": 223,
+					"loc": {
+						"start": {
+							"line": 9,
+							"column": 7
+						},
+						"end": {
+							"line": 9,
+							"column": 13
+						}
+					},
+					"name": "people"
+				},
+				"body": {
+					"type": "Fragment",
+					"nodes": [
+						{
+							"type": "Text",
+							"start": 289,
+							"end": 291,
+							"raw": "\n\t",
+							"data": "\n\t"
+						},
+						{
+							"type": "RegularElement",
+							"start": 291,
+							"end": 336,
+							"name": "p",
+							"name_loc": {
+								"start": {
+									"line": 10,
+									"column": 2,
+									"character": 292
+								},
+								"end": {
+									"line": 10,
+									"column": 3,
+									"character": 293
+								}
+							},
+							"attributes": [],
+							"fragment": {
+								"type": "Fragment",
+								"nodes": [
+									{
+										"type": "ExpressionTag",
+										"start": 294,
+										"end": 300,
+										"expression": {
+											"type": "Identifier",
+											"start": 295,
+											"end": 299,
+											"loc": {
+												"start": {
+													"line": 10,
+													"column": 5
+												},
+												"end": {
+													"line": 10,
+													"column": 9
+												}
+											},
+											"name": "name"
+										}
+									},
+									{
+										"type": "Text",
+										"start": 300,
+										"end": 304,
+										"raw": " is ",
+										"data": " is "
+									},
+									{
+										"type": "ExpressionTag",
+										"start": 304,
+										"end": 332,
+										"expression": {
+											"type": "ConditionalExpression",
+											"start": 305,
+											"end": 331,
+											"loc": {
+												"start": {
+													"line": 10,
+													"column": 15
+												},
+												"end": {
+													"line": 10,
+													"column": 41
+												}
+											},
+											"test": {
+												"type": "Identifier",
+												"start": 305,
+												"end": 309,
+												"loc": {
+													"start": {
+														"line": 10,
+														"column": 15
+													},
+													"end": {
+														"line": 10,
+														"column": 19
+													}
+												},
+												"name": "cool"
+											},
+											"consequent": {
+												"type": "Literal",
+												"start": 312,
+												"end": 318,
+												"loc": {
+													"start": {
+														"line": 10,
+														"column": 22
+													},
+													"end": {
+														"line": 10,
+														"column": 28
+													}
+												},
+												"value": "cool",
+												"raw": "'cool'"
+											},
+											"alternate": {
+												"type": "Literal",
+												"start": 321,
+												"end": 331,
+												"loc": {
+													"start": {
+														"line": 10,
+														"column": 31
+													},
+													"end": {
+														"line": 10,
+														"column": 41
+													}
+												},
+												"value": "not cool",
+												"raw": "'not cool'"
+											}
+										}
+									}
+								]
 							}
+						},
+						{
+							"type": "Text",
+							"start": 336,
+							"end": 337,
+							"raw": "\n",
+							"data": "\n"
+						}
+					]
+				},
+				"context": {
+					"type": "ObjectPattern",
+					"start": 227,
+					"end": 288,
+					"loc": {
+						"start": {
+							"line": 9,
+							"column": 18
+						},
+						"end": {
+							"line": 9,
+							"column": 79
+						}
+					},
+					"properties": [
+						{
+							"type": "Property",
+							"start": 229,
+							"end": 273,
+							"loc": {
+								"start": {
+									"line": 9,
+									"column": 20
+								},
+								"end": {
+									"line": 9,
+									"column": 64
+								}
+							},
+							"method": false,
+							"shorthand": true,
+							"computed": false,
+							"key": {
+								"type": "Identifier",
+								"start": 229,
+								"end": 233,
+								"loc": {
+									"start": {
+										"line": 9,
+										"column": 20
+									},
+									"end": {
+										"line": 9,
+										"column": 24
+									}
+								},
+								"name": "name"
+							},
+							"value": {
+								"type": "AssignmentPattern",
+								"start": 229,
+								"end": 273,
+								"loc": {
+									"start": {
+										"line": 9,
+										"column": 20
+									},
+									"end": {
+										"line": 9,
+										"column": 64
+									}
+								},
+								"left": {
+									"type": "Identifier",
+									"start": 229,
+									"end": 233,
+									"loc": {
+										"start": {
+											"line": 9,
+											"column": 20
+										},
+										"end": {
+											"line": 9,
+											"column": 24
+										}
+									},
+									"name": "name"
+								},
+								"right": {
+									"type": "CallExpression",
+									"start": 236,
+									"end": 273,
+									"loc": {
+										"start": {
+											"line": 9,
+											"column": 27
+										},
+										"end": {
+											"line": 9,
+											"column": 64
+										}
+									},
+									"callee": {
+										"type": "ArrowFunctionExpression",
+										"start": 237,
+										"end": 270,
+										"loc": {
+											"start": {
+												"line": 9,
+												"column": 28
+											},
+											"end": {
+												"line": 9,
+												"column": 61
+											}
+										},
+										"id": null,
+										"expression": false,
+										"generator": false,
+										"async": false,
+										"params": [],
+										"body": {
+											"type": "BlockStatement",
+											"start": 243,
+											"end": 270,
+											"loc": {
+												"start": {
+													"line": 9,
+													"column": 34
+												},
+												"end": {
+													"line": 9,
+													"column": 61
+												}
+											},
+											"body": [
+												{
+													"type": "ReturnStatement",
+													"start": 245,
+													"end": 268,
+													"loc": {
+														"start": {
+															"line": 9,
+															"column": 36
+														},
+														"end": {
+															"line": 9,
+															"column": 59
+														}
+													},
+													"argument": {
+														"type": "TemplateLiteral",
+														"start": 252,
+														"end": 267,
+														"loc": {
+															"start": {
+																"line": 9,
+																"column": 43
+															},
+															"end": {
+																"line": 9,
+																"column": 58
+															}
+														},
+														"expressions": [
+															{
+																"type": "Literal",
+																"start": 260,
+																"end": 265,
+																"loc": {
+																	"start": {
+																		"line": 9,
+																		"column": 51
+																	},
+																	"end": {
+																		"line": 9,
+																		"column": 56
+																	}
+																},
+																"value": "Doe",
+																"raw": "\"Doe\""
+															}
+														],
+														"quasis": [
+															{
+																"type": "TemplateElement",
+																"start": 253,
+																"end": 258,
+																"loc": {
+																	"start": {
+																		"line": 9,
+																		"column": 44
+																	},
+																	"end": {
+																		"line": 9,
+																		"column": 49
+																	}
+																},
+																"value": {
+																	"raw": "Jane ",
+																	"cooked": "Jane "
+																},
+																"tail": false
+															},
+															{
+																"type": "TemplateElement",
+																"start": 266,
+																"end": 266,
+																"loc": {
+																	"start": {
+																		"line": 9,
+																		"column": 57
+																	},
+																	"end": {
+																		"line": 9,
+																		"column": 57
+																	}
+																},
+																"value": {
+																	"raw": "",
+																	"cooked": ""
+																},
+																"tail": true
+															}
+														]
+													}
+												}
+											]
+										}
+									},
+									"arguments": [],
+									"optional": false
+								}
+							},
+							"kind": "init"
+						},
+						{
+							"type": "Property",
+							"start": 275,
+							"end": 286,
+							"loc": {
+								"start": {
+									"line": 9,
+									"column": 66
+								},
+								"end": {
+									"line": 9,
+									"column": 77
+								}
+							},
+							"method": false,
+							"shorthand": true,
+							"computed": false,
+							"key": {
+								"type": "Identifier",
+								"start": 275,
+								"end": 279,
+								"loc": {
+									"start": {
+										"line": 9,
+										"column": 66
+									},
+									"end": {
+										"line": 9,
+										"column": 70
+									}
+								},
+								"name": "cool"
+							},
+							"value": {
+								"type": "AssignmentPattern",
+								"start": 275,
+								"end": 286,
+								"loc": {
+									"start": {
+										"line": 9,
+										"column": 66
+									},
+									"end": {
+										"line": 9,
+										"column": 77
+									}
+								},
+								"left": {
+									"type": "Identifier",
+									"start": 275,
+									"end": 279,
+									"loc": {
+										"start": {
+											"line": 9,
+											"column": 66
+										},
+										"end": {
+											"line": 9,
+											"column": 70
+										}
+									},
+									"name": "cool"
+								},
+								"right": {
+									"type": "Literal",
+									"start": 282,
+									"end": 286,
+									"loc": {
+										"start": {
+											"line": 9,
+											"column": 73
+										},
+										"end": {
+											"line": 9,
+											"column": 77
+										}
+									},
+									"value": true,
+									"raw": "true"
+								}
+							},
+							"kind": "init"
 						}
 					]
 				}
diff --git a/packages/svelte/tests/parser-modern/samples/generic-snippets/input.svelte b/packages/svelte/tests/parser-modern/samples/generic-snippets/input.svelte
new file mode 100644
index 0000000000..4ee619728d
--- /dev/null
+++ b/packages/svelte/tests/parser-modern/samples/generic-snippets/input.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+</script>
+
+{#snippet generic<T extends string>(val: T)}
+	{val}
+{/snippet}
+
+{#snippet complex_generic<T extends { bracket: "<" } | "<" | Set<"<>">>(val: T)}
+	{val}
+{/snippet}
\ No newline at end of file
diff --git a/packages/svelte/tests/parser-modern/samples/generic-snippets/output.json b/packages/svelte/tests/parser-modern/samples/generic-snippets/output.json
new file mode 100644
index 0000000000..f29eb6fc72
--- /dev/null
+++ b/packages/svelte/tests/parser-modern/samples/generic-snippets/output.json
@@ -0,0 +1,335 @@
+{
+	"css": null,
+	"js": [],
+	"start": 0,
+	"end": 192,
+	"type": "Root",
+	"fragment": {
+		"type": "Fragment",
+		"nodes": [
+			{
+				"type": "Text",
+				"start": 28,
+				"end": 30,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "SnippetBlock",
+				"start": 30,
+				"end": 92,
+				"expression": {
+					"type": "Identifier",
+					"name": "generic",
+					"start": 40,
+					"end": 47,
+					"loc": {
+						"start": {
+							"line": 4,
+							"column": 10,
+							"character": 40
+						},
+						"end": {
+							"line": 4,
+							"column": 17,
+							"character": 47
+						}
+					}
+				},
+				"typeParams": "T extends string",
+				"parameters": [
+					{
+						"type": "Identifier",
+						"start": 66,
+						"end": 72,
+						"loc": {
+							"start": {
+								"line": 4,
+								"column": 36
+							},
+							"end": {
+								"line": 4,
+								"column": 42
+							}
+						},
+						"name": "val",
+						"typeAnnotation": {
+							"type": "TSTypeAnnotation",
+							"start": 69,
+							"end": 72,
+							"loc": {
+								"start": {
+									"line": 4,
+									"column": 39
+								},
+								"end": {
+									"line": 4,
+									"column": 42
+								}
+							},
+							"typeAnnotation": {
+								"type": "TSTypeReference",
+								"start": 71,
+								"end": 72,
+								"loc": {
+									"start": {
+										"line": 4,
+										"column": 41
+									},
+									"end": {
+										"line": 4,
+										"column": 42
+									}
+								},
+								"typeName": {
+									"type": "Identifier",
+									"start": 71,
+									"end": 72,
+									"loc": {
+										"start": {
+											"line": 4,
+											"column": 41
+										},
+										"end": {
+											"line": 4,
+											"column": 42
+										}
+									},
+									"name": "T"
+								}
+							}
+						}
+					}
+				],
+				"body": {
+					"type": "Fragment",
+					"nodes": [
+						{
+							"type": "Text",
+							"start": 74,
+							"end": 76,
+							"raw": "\n\t",
+							"data": "\n\t"
+						},
+						{
+							"type": "ExpressionTag",
+							"start": 76,
+							"end": 81,
+							"expression": {
+								"type": "Identifier",
+								"start": 77,
+								"end": 80,
+								"loc": {
+									"start": {
+										"line": 5,
+										"column": 2
+									},
+									"end": {
+										"line": 5,
+										"column": 5
+									}
+								},
+								"name": "val"
+							}
+						},
+						{
+							"type": "Text",
+							"start": 81,
+							"end": 82,
+							"raw": "\n",
+							"data": "\n"
+						}
+					]
+				}
+			},
+			{
+				"type": "Text",
+				"start": 92,
+				"end": 94,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "SnippetBlock",
+				"start": 94,
+				"end": 192,
+				"expression": {
+					"type": "Identifier",
+					"name": "complex_generic",
+					"start": 104,
+					"end": 119,
+					"loc": {
+						"start": {
+							"line": 8,
+							"column": 10,
+							"character": 104
+						},
+						"end": {
+							"line": 8,
+							"column": 25,
+							"character": 119
+						}
+					}
+				},
+				"typeParams": "T extends { bracket: \"<\" } | \"<\" | Set<\"<>\">",
+				"parameters": [
+					{
+						"type": "Identifier",
+						"start": 166,
+						"end": 172,
+						"loc": {
+							"start": {
+								"line": 8,
+								"column": 72
+							},
+							"end": {
+								"line": 8,
+								"column": 78
+							}
+						},
+						"name": "val",
+						"typeAnnotation": {
+							"type": "TSTypeAnnotation",
+							"start": 169,
+							"end": 172,
+							"loc": {
+								"start": {
+									"line": 8,
+									"column": 75
+								},
+								"end": {
+									"line": 8,
+									"column": 78
+								}
+							},
+							"typeAnnotation": {
+								"type": "TSTypeReference",
+								"start": 171,
+								"end": 172,
+								"loc": {
+									"start": {
+										"line": 8,
+										"column": 77
+									},
+									"end": {
+										"line": 8,
+										"column": 78
+									}
+								},
+								"typeName": {
+									"type": "Identifier",
+									"start": 171,
+									"end": 172,
+									"loc": {
+										"start": {
+											"line": 8,
+											"column": 77
+										},
+										"end": {
+											"line": 8,
+											"column": 78
+										}
+									},
+									"name": "T"
+								}
+							}
+						}
+					}
+				],
+				"body": {
+					"type": "Fragment",
+					"nodes": [
+						{
+							"type": "Text",
+							"start": 174,
+							"end": 176,
+							"raw": "\n\t",
+							"data": "\n\t"
+						},
+						{
+							"type": "ExpressionTag",
+							"start": 176,
+							"end": 181,
+							"expression": {
+								"type": "Identifier",
+								"start": 177,
+								"end": 180,
+								"loc": {
+									"start": {
+										"line": 9,
+										"column": 2
+									},
+									"end": {
+										"line": 9,
+										"column": 5
+									}
+								},
+								"name": "val"
+							}
+						},
+						{
+							"type": "Text",
+							"start": 181,
+							"end": 182,
+							"raw": "\n",
+							"data": "\n"
+						}
+					]
+				}
+			}
+		]
+	},
+	"options": null,
+	"instance": {
+		"type": "Script",
+		"start": 0,
+		"end": 28,
+		"context": "default",
+		"content": {
+			"type": "Program",
+			"start": 18,
+			"end": 19,
+			"loc": {
+				"start": {
+					"line": 1,
+					"column": 0
+				},
+				"end": {
+					"line": 2,
+					"column": 9
+				}
+			},
+			"body": [],
+			"sourceType": "module"
+		},
+		"attributes": [
+			{
+				"type": "Attribute",
+				"start": 8,
+				"end": 17,
+				"name": "lang",
+				"name_loc": {
+					"start": {
+						"line": 1,
+						"column": 8,
+						"character": 8
+					},
+					"end": {
+						"line": 1,
+						"column": 12,
+						"character": 12
+					}
+				},
+				"value": [
+					{
+						"start": 14,
+						"end": 16,
+						"type": "Text",
+						"raw": "ts",
+						"data": "ts"
+					}
+				]
+			}
+		]
+	}
+}
diff --git a/packages/svelte/tests/parser-modern/samples/if-block-else/output.json b/packages/svelte/tests/parser-modern/samples/if-block-else/output.json
index cf47e3e0bb..13b56db9de 100644
--- a/packages/svelte/tests/parser-modern/samples/if-block-else/output.json
+++ b/packages/svelte/tests/parser-modern/samples/if-block-else/output.json
@@ -43,6 +43,18 @@
 							"start": 11,
 							"end": 21,
 							"name": "p",
+							"name_loc": {
+								"start": {
+									"line": 2,
+									"column": 2,
+									"character": 12
+								},
+								"end": {
+									"line": 2,
+									"column": 3,
+									"character": 13
+								}
+							},
 							"attributes": [],
 							"fragment": {
 								"type": "Fragment",
@@ -81,6 +93,18 @@
 							"start": 31,
 							"end": 45,
 							"name": "p",
+							"name_loc": {
+								"start": {
+									"line": 4,
+									"column": 2,
+									"character": 32
+								},
+								"end": {
+									"line": 4,
+									"column": 3,
+									"character": 33
+								}
+							},
 							"attributes": [],
 							"fragment": {
 								"type": "Fragment",
diff --git a/packages/svelte/tests/parser-modern/samples/if-block-elseif/output.json b/packages/svelte/tests/parser-modern/samples/if-block-elseif/output.json
index b10d50c939..fb00488f31 100644
--- a/packages/svelte/tests/parser-modern/samples/if-block-elseif/output.json
+++ b/packages/svelte/tests/parser-modern/samples/if-block-elseif/output.json
@@ -76,6 +76,18 @@
 							"start": 14,
 							"end": 41,
 							"name": "p",
+							"name_loc": {
+								"start": {
+									"line": 2,
+									"column": 2,
+									"character": 15
+								},
+								"end": {
+									"line": 2,
+									"column": 3,
+									"character": 16
+								}
+							},
 							"attributes": [],
 							"fragment": {
 								"type": "Fragment",
@@ -171,6 +183,18 @@
 										"start": 60,
 										"end": 83,
 										"name": "p",
+										"name_loc": {
+											"start": {
+												"line": 4,
+												"column": 2,
+												"character": 61
+											},
+											"end": {
+												"line": 4,
+												"column": 3,
+												"character": 62
+											}
+										},
 										"attributes": [],
 										"fragment": {
 											"type": "Fragment",
diff --git a/packages/svelte/tests/parser-modern/samples/loose-declaration-tag/input.svelte b/packages/svelte/tests/parser-modern/samples/loose-declaration-tag/input.svelte
new file mode 100644
index 0000000000..036d5283f5
--- /dev/null
+++ b/packages/svelte/tests/parser-modern/samples/loose-declaration-tag/input.svelte
@@ -0,0 +1,5 @@
+{#if true}
+	{let }
+	{const x = }
+	{let x = a / }
+{/if}
diff --git a/packages/svelte/tests/parser-modern/samples/loose-declaration-tag/output.json b/packages/svelte/tests/parser-modern/samples/loose-declaration-tag/output.json
new file mode 100644
index 0000000000..270d16af94
--- /dev/null
+++ b/packages/svelte/tests/parser-modern/samples/loose-declaration-tag/output.json
@@ -0,0 +1,145 @@
+{
+	"css": null,
+	"js": [],
+	"start": 0,
+	"end": 54,
+	"type": "Root",
+	"fragment": {
+		"type": "Fragment",
+		"nodes": [
+			{
+				"type": "IfBlock",
+				"elseif": false,
+				"start": 0,
+				"end": 54,
+				"test": {
+					"type": "Literal",
+					"start": 5,
+					"end": 9,
+					"loc": {
+						"start": {
+							"line": 1,
+							"column": 5
+						},
+						"end": {
+							"line": 1,
+							"column": 9
+						}
+					},
+					"value": true,
+					"raw": "true"
+				},
+				"consequent": {
+					"type": "Fragment",
+					"nodes": [
+						{
+							"type": "Text",
+							"start": 10,
+							"end": 12,
+							"raw": "\n\t",
+							"data": "\n\t"
+						},
+						{
+							"type": "DeclarationTag",
+							"start": 12,
+							"end": 18,
+							"declaration": {
+								"type": "VariableDeclaration",
+								"kind": "let",
+								"declarations": [
+									{
+										"type": "VariableDeclarator",
+										"id": {
+											"type": "Identifier",
+											"name": "",
+											"start": 17,
+											"end": 17
+										},
+										"init": null,
+										"start": 17,
+										"end": 17
+									}
+								],
+								"start": 13,
+								"end": 17
+							}
+						},
+						{
+							"type": "Text",
+							"start": 18,
+							"end": 20,
+							"raw": "\n\t",
+							"data": "\n\t"
+						},
+						{
+							"type": "DeclarationTag",
+							"start": 20,
+							"end": 32,
+							"declaration": {
+								"type": "VariableDeclaration",
+								"kind": "const",
+								"declarations": [
+									{
+										"type": "VariableDeclarator",
+										"id": {
+											"type": "Identifier",
+											"name": "",
+											"start": 31,
+											"end": 31
+										},
+										"init": null,
+										"start": 31,
+										"end": 31
+									}
+								],
+								"start": 21,
+								"end": 31
+							}
+						},
+						{
+							"type": "Text",
+							"start": 32,
+							"end": 34,
+							"raw": "\n\t",
+							"data": "\n\t"
+						},
+						{
+							"type": "DeclarationTag",
+							"start": 34,
+							"end": 48,
+							"declaration": {
+								"type": "VariableDeclaration",
+								"kind": "let",
+								"declarations": [
+									{
+										"type": "VariableDeclarator",
+										"id": {
+											"type": "Identifier",
+											"name": "",
+											"start": 47,
+											"end": 47
+										},
+										"init": null,
+										"start": 47,
+										"end": 47
+									}
+								],
+								"start": 35,
+								"end": 47
+							}
+						},
+						{
+							"type": "Text",
+							"start": 48,
+							"end": 49,
+							"raw": "\n",
+							"data": "\n"
+						}
+					]
+				},
+				"alternate": null
+			}
+		]
+	},
+	"options": null
+}
diff --git a/packages/svelte/tests/parser-modern/samples/loose-invalid-block/output.json b/packages/svelte/tests/parser-modern/samples/loose-invalid-block/output.json
index 46aad16b21..69fc7a0c81 100644
--- a/packages/svelte/tests/parser-modern/samples/loose-invalid-block/output.json
+++ b/packages/svelte/tests/parser-modern/samples/loose-invalid-block/output.json
@@ -116,9 +116,21 @@
 				"end": 75,
 				"expression": {
 					"type": "Identifier",
+					"name": "",
 					"start": 63,
 					"end": 63,
-					"name": ""
+					"loc": {
+						"start": {
+							"line": 9,
+							"column": 10,
+							"character": 63
+						},
+						"end": {
+							"line": 9,
+							"column": 10,
+							"character": 63
+						}
+					}
 				},
 				"parameters": [],
 				"body": {
@@ -147,9 +159,21 @@
 				"end": 102,
 				"expression": {
 					"type": "Identifier",
+					"name": "foo",
 					"start": 87,
 					"end": 90,
-					"name": "foo"
+					"loc": {
+						"start": {
+							"line": 12,
+							"column": 10,
+							"character": 87
+						},
+						"end": {
+							"line": 12,
+							"column": 13,
+							"character": 90
+						}
+					}
 				},
 				"parameters": [],
 				"body": {
diff --git a/packages/svelte/tests/parser-modern/samples/loose-invalid-expression/input.svelte b/packages/svelte/tests/parser-modern/samples/loose-invalid-expression/input.svelte
index a0977b9a63..b64f15c5c1 100644
--- a/packages/svelte/tests/parser-modern/samples/loose-invalid-expression/input.svelte
+++ b/packages/svelte/tests/parser-modern/samples/loose-invalid-expression/input.svelte
@@ -9,3 +9,15 @@
 
 asd{a.}asd
 {foo[bar.]}
+
+{#if x.}{/if}
+
+{#each array as item (item.)}{/each}
+
+{#each obj. as item}{/each}
+
+{#await x.}{/await}
+
+{#await x. then y}{/await}
+
+{#await x. catch y}{/await}
diff --git a/packages/svelte/tests/parser-modern/samples/loose-invalid-expression/output.json b/packages/svelte/tests/parser-modern/samples/loose-invalid-expression/output.json
index cdb7f66c58..593aebe279 100644
--- a/packages/svelte/tests/parser-modern/samples/loose-invalid-expression/output.json
+++ b/packages/svelte/tests/parser-modern/samples/loose-invalid-expression/output.json
@@ -2,7 +2,7 @@
 	"css": null,
 	"js": [],
 	"start": 0,
-	"end": 164,
+	"end": 324,
 	"type": "Root",
 	"fragment": {
 		"type": "Fragment",
@@ -12,21 +12,57 @@
 				"start": 0,
 				"end": 14,
 				"name": "div",
+				"name_loc": {
+					"start": {
+						"line": 1,
+						"column": 1,
+						"character": 1
+					},
+					"end": {
+						"line": 1,
+						"column": 4,
+						"character": 4
+					}
+				},
 				"attributes": [
 					{
 						"type": "Attribute",
 						"start": 5,
 						"end": 7,
 						"name": "",
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 6,
+								"character": 6
+							},
+							"end": {
+								"line": 1,
+								"column": 6,
+								"character": 6
+							}
+						},
 						"value": {
 							"type": "ExpressionTag",
 							"start": 6,
 							"end": 6,
 							"expression": {
+								"type": "Identifier",
+								"name": "",
 								"start": 6,
 								"end": 6,
-								"type": "Identifier",
-								"name": ""
+								"loc": {
+									"start": {
+										"line": 1,
+										"column": 6,
+										"character": 6
+									},
+									"end": {
+										"line": 1,
+										"column": 6,
+										"character": 6
+									}
+								}
 							}
 						}
 					}
@@ -48,12 +84,36 @@
 				"start": 15,
 				"end": 33,
 				"name": "div",
+				"name_loc": {
+					"start": {
+						"line": 2,
+						"column": 1,
+						"character": 16
+					},
+					"end": {
+						"line": 2,
+						"column": 4,
+						"character": 19
+					}
+				},
 				"attributes": [
 					{
 						"type": "Attribute",
 						"start": 20,
 						"end": 26,
 						"name": "foo",
+						"name_loc": {
+							"start": {
+								"line": 2,
+								"column": 5,
+								"character": 20
+							},
+							"end": {
+								"line": 2,
+								"column": 8,
+								"character": 23
+							}
+						},
 						"value": {
 							"type": "ExpressionTag",
 							"start": 24,
@@ -84,12 +144,36 @@
 				"start": 35,
 				"end": 55,
 				"name": "div",
+				"name_loc": {
+					"start": {
+						"line": 4,
+						"column": 1,
+						"character": 36
+					},
+					"end": {
+						"line": 4,
+						"column": 4,
+						"character": 39
+					}
+				},
 				"attributes": [
 					{
 						"type": "Attribute",
 						"start": 40,
 						"end": 48,
 						"name": "foo",
+						"name_loc": {
+							"start": {
+								"line": 4,
+								"column": 5,
+								"character": 40
+							},
+							"end": {
+								"line": 4,
+								"column": 8,
+								"character": 43
+							}
+						},
 						"value": {
 							"type": "ExpressionTag",
 							"start": 44,
@@ -120,12 +204,36 @@
 				"start": 56,
 				"end": 80,
 				"name": "div",
+				"name_loc": {
+					"start": {
+						"line": 5,
+						"column": 1,
+						"character": 57
+					},
+					"end": {
+						"line": 5,
+						"column": 4,
+						"character": 60
+					}
+				},
 				"attributes": [
 					{
 						"type": "Attribute",
 						"start": 61,
 						"end": 73,
 						"name": "foo",
+						"name_loc": {
+							"start": {
+								"line": 5,
+								"column": 5,
+								"character": 61
+							},
+							"end": {
+								"line": 5,
+								"column": 8,
+								"character": 64
+							}
+						},
 						"value": {
 							"type": "ExpressionTag",
 							"start": 65,
@@ -156,12 +264,36 @@
 				"start": 81,
 				"end": 113,
 				"name": "Component",
+				"name_loc": {
+					"start": {
+						"line": 6,
+						"column": 1,
+						"character": 82
+					},
+					"end": {
+						"line": 6,
+						"column": 10,
+						"character": 91
+					}
+				},
 				"attributes": [
 					{
 						"type": "Attribute",
 						"start": 92,
 						"end": 110,
 						"name": "onclick",
+						"name_loc": {
+							"start": {
+								"line": 6,
+								"column": 11,
+								"character": 92
+							},
+							"end": {
+								"line": 6,
+								"column": 18,
+								"character": 99
+							}
+						},
 						"value": {
 							"type": "ExpressionTag",
 							"start": 100,
@@ -192,12 +324,36 @@
 				"start": 115,
 				"end": 140,
 				"name": "input",
+				"name_loc": {
+					"start": {
+						"line": 8,
+						"column": 1,
+						"character": 116
+					},
+					"end": {
+						"line": 8,
+						"column": 6,
+						"character": 121
+					}
+				},
 				"attributes": [
 					{
 						"start": 122,
 						"end": 137,
 						"type": "BindDirective",
 						"name": "value",
+						"name_loc": {
+							"start": {
+								"line": 8,
+								"column": 7,
+								"character": 122
+							},
+							"end": {
+								"line": 8,
+								"column": 17,
+								"character": 132
+							}
+						},
 						"expression": {
 							"type": "Identifier",
 							"start": 134,
@@ -247,6 +403,238 @@
 					"end": 163,
 					"name": ""
 				}
+			},
+			{
+				"type": "Text",
+				"start": 164,
+				"end": 166,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "IfBlock",
+				"elseif": false,
+				"start": 166,
+				"end": 179,
+				"test": {
+					"type": "Identifier",
+					"start": 171,
+					"end": 173,
+					"name": ""
+				},
+				"consequent": {
+					"type": "Fragment",
+					"nodes": []
+				},
+				"alternate": null
+			},
+			{
+				"type": "Text",
+				"start": 179,
+				"end": 181,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "EachBlock",
+				"start": 181,
+				"end": 217,
+				"expression": {
+					"type": "Identifier",
+					"start": 188,
+					"end": 193,
+					"loc": {
+						"start": {
+							"line": 15,
+							"column": 7
+						},
+						"end": {
+							"line": 15,
+							"column": 12
+						}
+					},
+					"name": "array"
+				},
+				"body": {
+					"type": "Fragment",
+					"nodes": []
+				},
+				"context": {
+					"type": "Identifier",
+					"name": "item",
+					"start": 197,
+					"end": 201,
+					"loc": {
+						"start": {
+							"line": 15,
+							"column": 16,
+							"character": 197
+						},
+						"end": {
+							"line": 15,
+							"column": 20,
+							"character": 201
+						}
+					}
+				},
+				"key": {
+					"type": "Identifier",
+					"start": 203,
+					"end": 208,
+					"name": ""
+				}
+			},
+			{
+				"type": "Text",
+				"start": 217,
+				"end": 219,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "EachBlock",
+				"start": 219,
+				"end": 246,
+				"expression": {
+					"type": "Identifier",
+					"name": "",
+					"start": 226,
+					"end": 230
+				},
+				"body": {
+					"type": "Fragment",
+					"nodes": []
+				},
+				"context": {
+					"type": "Identifier",
+					"name": "item",
+					"start": 234,
+					"end": 238,
+					"loc": {
+						"start": {
+							"line": 17,
+							"column": 15,
+							"character": 234
+						},
+						"end": {
+							"line": 17,
+							"column": 19,
+							"character": 238
+						}
+					}
+				}
+			},
+			{
+				"type": "Text",
+				"start": 246,
+				"end": 248,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "AwaitBlock",
+				"start": 248,
+				"end": 267,
+				"expression": {
+					"type": "Identifier",
+					"start": 256,
+					"end": 258,
+					"name": ""
+				},
+				"value": null,
+				"error": null,
+				"pending": {
+					"type": "Fragment",
+					"nodes": []
+				},
+				"then": null,
+				"catch": null
+			},
+			{
+				"type": "Text",
+				"start": 267,
+				"end": 269,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "AwaitBlock",
+				"start": 269,
+				"end": 295,
+				"expression": {
+					"type": "Identifier",
+					"name": "",
+					"start": 277,
+					"end": 279
+				},
+				"value": {
+					"type": "Identifier",
+					"name": "y",
+					"start": 285,
+					"end": 286,
+					"loc": {
+						"start": {
+							"line": 21,
+							"column": 16,
+							"character": 285
+						},
+						"end": {
+							"line": 21,
+							"column": 17,
+							"character": 286
+						}
+					}
+				},
+				"error": null,
+				"pending": null,
+				"then": {
+					"type": "Fragment",
+					"nodes": []
+				},
+				"catch": null
+			},
+			{
+				"type": "Text",
+				"start": 295,
+				"end": 297,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "AwaitBlock",
+				"start": 297,
+				"end": 324,
+				"expression": {
+					"type": "Identifier",
+					"name": "",
+					"start": 305,
+					"end": 307
+				},
+				"value": null,
+				"error": {
+					"type": "Identifier",
+					"name": "y",
+					"start": 314,
+					"end": 315,
+					"loc": {
+						"start": {
+							"line": 23,
+							"column": 17,
+							"character": 314
+						},
+						"end": {
+							"line": 23,
+							"column": 18,
+							"character": 315
+						}
+					}
+				},
+				"pending": null,
+				"then": null,
+				"catch": {
+					"type": "Fragment",
+					"nodes": []
+				}
 			}
 		]
 	},
diff --git a/packages/svelte/tests/parser-modern/samples/loose-unclosed-open-tag/output.json b/packages/svelte/tests/parser-modern/samples/loose-unclosed-open-tag/output.json
index a0e13d4352..b614e0391d 100644
--- a/packages/svelte/tests/parser-modern/samples/loose-unclosed-open-tag/output.json
+++ b/packages/svelte/tests/parser-modern/samples/loose-unclosed-open-tag/output.json
@@ -12,6 +12,18 @@
 				"start": 0,
 				"end": 29,
 				"name": "div",
+				"name_loc": {
+					"start": {
+						"line": 1,
+						"column": 1,
+						"character": 1
+					},
+					"end": {
+						"line": 1,
+						"column": 4,
+						"character": 4
+					}
+				},
 				"attributes": [],
 				"fragment": {
 					"type": "Fragment",
@@ -28,12 +40,36 @@
 							"start": 7,
 							"end": 23,
 							"name": "Comp",
+							"name_loc": {
+								"start": {
+									"line": 2,
+									"column": 2,
+									"character": 8
+								},
+								"end": {
+									"line": 2,
+									"column": 6,
+									"character": 12
+								}
+							},
 							"attributes": [
 								{
 									"type": "Attribute",
 									"start": 13,
 									"end": 22,
 									"name": "foo",
+									"name_loc": {
+										"start": {
+											"line": 2,
+											"column": 7,
+											"character": 13
+										},
+										"end": {
+											"line": 2,
+											"column": 10,
+											"character": 16
+										}
+									},
 									"value": {
 										"type": "ExpressionTag",
 										"start": 17,
@@ -77,6 +113,18 @@
 				"start": 31,
 				"end": 60,
 				"name": "div",
+				"name_loc": {
+					"start": {
+						"line": 5,
+						"column": 1,
+						"character": 32
+					},
+					"end": {
+						"line": 5,
+						"column": 4,
+						"character": 35
+					}
+				},
 				"attributes": [],
 				"fragment": {
 					"type": "Fragment",
@@ -93,12 +141,36 @@
 							"start": 38,
 							"end": 54,
 							"name": "span",
+							"name_loc": {
+								"start": {
+									"line": 6,
+									"column": 2,
+									"character": 39
+								},
+								"end": {
+									"line": 6,
+									"column": 6,
+									"character": 43
+								}
+							},
 							"attributes": [
 								{
 									"type": "Attribute",
 									"start": 44,
 									"end": 53,
 									"name": "foo",
+									"name_loc": {
+										"start": {
+											"line": 6,
+											"column": 7,
+											"character": 44
+										},
+										"end": {
+											"line": 6,
+											"column": 10,
+											"character": 47
+										}
+									},
 									"value": {
 										"type": "ExpressionTag",
 										"start": 48,
@@ -173,12 +245,36 @@
 							"start": 73,
 							"end": 89,
 							"name": "Comp",
+							"name_loc": {
+								"start": {
+									"line": 10,
+									"column": 2,
+									"character": 74
+								},
+								"end": {
+									"line": 10,
+									"column": 6,
+									"character": 78
+								}
+							},
 							"attributes": [
 								{
 									"type": "Attribute",
 									"start": 79,
 									"end": 88,
 									"name": "foo",
+									"name_loc": {
+										"start": {
+											"line": 10,
+											"column": 7,
+											"character": 79
+										},
+										"end": {
+											"line": 10,
+											"column": 10,
+											"character": 82
+										}
+									},
 									"value": {
 										"type": "ExpressionTag",
 										"start": 83,
@@ -254,12 +350,36 @@
 							"start": 107,
 							"end": 124,
 							"name": "Comp",
+							"name_loc": {
+								"start": {
+									"line": 14,
+									"column": 2,
+									"character": 108
+								},
+								"end": {
+									"line": 14,
+									"column": 6,
+									"character": 112
+								}
+							},
 							"attributes": [
 								{
 									"type": "Attribute",
 									"start": 113,
 									"end": 122,
 									"name": "foo",
+									"name_loc": {
+										"start": {
+											"line": 14,
+											"column": 7,
+											"character": 113
+										},
+										"end": {
+											"line": 14,
+											"column": 10,
+											"character": 116
+										}
+									},
 									"value": {
 										"type": "ExpressionTag",
 										"start": 117,
@@ -374,12 +494,36 @@
 				"start": 156,
 				"end": 170,
 				"name": "div",
+				"name_loc": {
+					"start": {
+						"line": 20,
+						"column": 1,
+						"character": 157
+					},
+					"end": {
+						"line": 20,
+						"column": 4,
+						"character": 160
+					}
+				},
 				"attributes": [
 					{
 						"type": "Attribute",
 						"start": 161,
 						"end": 170,
 						"name": "foo",
+						"name_loc": {
+							"start": {
+								"line": 20,
+								"column": 5,
+								"character": 161
+							},
+							"end": {
+								"line": 20,
+								"column": 8,
+								"character": 164
+							}
+						},
 						"value": {
 							"type": "ExpressionTag",
 							"start": 165,
diff --git a/packages/svelte/tests/parser-modern/samples/loose-unclosed-tag/input.svelte b/packages/svelte/tests/parser-modern/samples/loose-unclosed-tag/input.svelte
index 10a3876b7c..83017c79aa 100644
--- a/packages/svelte/tests/parser-modern/samples/loose-unclosed-tag/input.svelte
+++ b/packages/svelte/tests/parser-modern/samples/loose-unclosed-tag/input.svelte
@@ -10,6 +10,14 @@
 	<span
 </div>
 
+<div>
+	<Comp.
+</div>
+
+<div>
+	<comp.
+</div>
+
 {#if foo}
 	<div>
 {/if}
diff --git a/packages/svelte/tests/parser-modern/samples/loose-unclosed-tag/output.json b/packages/svelte/tests/parser-modern/samples/loose-unclosed-tag/output.json
index ec47bfc738..59bff2ff80 100644
--- a/packages/svelte/tests/parser-modern/samples/loose-unclosed-tag/output.json
+++ b/packages/svelte/tests/parser-modern/samples/loose-unclosed-tag/output.json
@@ -2,7 +2,7 @@
 	"css": null,
 	"js": [],
 	"start": 0,
-	"end": 160,
+	"end": 204,
 	"type": "Root",
 	"fragment": {
 		"type": "Fragment",
@@ -12,6 +12,18 @@
 				"start": 0,
 				"end": 20,
 				"name": "div",
+				"name_loc": {
+					"start": {
+						"line": 1,
+						"column": 1,
+						"character": 1
+					},
+					"end": {
+						"line": 1,
+						"column": 4,
+						"character": 4
+					}
+				},
 				"attributes": [],
 				"fragment": {
 					"type": "Fragment",
@@ -28,6 +40,18 @@
 							"start": 7,
 							"end": 14,
 							"name": "Comp",
+							"name_loc": {
+								"start": {
+									"line": 2,
+									"column": 2,
+									"character": 8
+								},
+								"end": {
+									"line": 2,
+									"column": 6,
+									"character": 12
+								}
+							},
 							"attributes": [],
 							"fragment": {
 								"type": "Fragment",
@@ -57,6 +81,18 @@
 				"start": 22,
 				"end": 51,
 				"name": "div",
+				"name_loc": {
+					"start": {
+						"line": 5,
+						"column": 1,
+						"character": 23
+					},
+					"end": {
+						"line": 5,
+						"column": 4,
+						"character": 26
+					}
+				},
 				"attributes": [],
 				"fragment": {
 					"type": "Fragment",
@@ -73,12 +109,36 @@
 							"start": 29,
 							"end": 45,
 							"name": "Comp",
+							"name_loc": {
+								"start": {
+									"line": 6,
+									"column": 2,
+									"character": 30
+								},
+								"end": {
+									"line": 6,
+									"column": 6,
+									"character": 34
+								}
+							},
 							"attributes": [
 								{
 									"type": "Attribute",
 									"start": 35,
 									"end": 44,
 									"name": "foo",
+									"name_loc": {
+										"start": {
+											"line": 6,
+											"column": 7,
+											"character": 35
+										},
+										"end": {
+											"line": 6,
+											"column": 10,
+											"character": 38
+										}
+									},
 									"value": {
 										"type": "ExpressionTag",
 										"start": 39,
@@ -122,6 +182,18 @@
 				"start": 53,
 				"end": 72,
 				"name": "div",
+				"name_loc": {
+					"start": {
+						"line": 9,
+						"column": 1,
+						"character": 54
+					},
+					"end": {
+						"line": 9,
+						"column": 4,
+						"character": 57
+					}
+				},
 				"attributes": [],
 				"fragment": {
 					"type": "Fragment",
@@ -138,6 +210,18 @@
 							"start": 60,
 							"end": 66,
 							"name": "span",
+							"name_loc": {
+								"start": {
+									"line": 10,
+									"column": 2,
+									"character": 61
+								},
+								"end": {
+									"line": 10,
+									"column": 6,
+									"character": 65
+								}
+							},
 							"attributes": [],
 							"fragment": {
 								"type": "Fragment",
@@ -155,21 +239,143 @@
 				"data": "\n\n"
 			},
 			{
-				"type": "IfBlock",
-				"elseif": false,
+				"type": "RegularElement",
 				"start": 74,
+				"end": 94,
+				"name": "div",
+				"name_loc": {
+					"start": {
+						"line": 13,
+						"column": 1,
+						"character": 75
+					},
+					"end": {
+						"line": 13,
+						"column": 4,
+						"character": 78
+					}
+				},
+				"attributes": [],
+				"fragment": {
+					"type": "Fragment",
+					"nodes": [
+						{
+							"type": "Text",
+							"start": 79,
+							"end": 81,
+							"raw": "\n\t",
+							"data": "\n\t"
+						},
+						{
+							"type": "Component",
+							"start": 81,
+							"end": 88,
+							"name": "Comp.",
+							"name_loc": {
+								"start": {
+									"line": 14,
+									"column": 2,
+									"character": 82
+								},
+								"end": {
+									"line": 14,
+									"column": 7,
+									"character": 87
+								}
+							},
+							"attributes": [],
+							"fragment": {
+								"type": "Fragment",
+								"nodes": []
+							}
+						}
+					]
+				}
+			},
+			{
+				"type": "Text",
+				"start": 94,
 				"end": 96,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "RegularElement",
+				"start": 96,
+				"end": 116,
+				"name": "div",
+				"name_loc": {
+					"start": {
+						"line": 17,
+						"column": 1,
+						"character": 97
+					},
+					"end": {
+						"line": 17,
+						"column": 4,
+						"character": 100
+					}
+				},
+				"attributes": [],
+				"fragment": {
+					"type": "Fragment",
+					"nodes": [
+						{
+							"type": "Text",
+							"start": 101,
+							"end": 103,
+							"raw": "\n\t",
+							"data": "\n\t"
+						},
+						{
+							"type": "Component",
+							"start": 103,
+							"end": 110,
+							"name": "comp.",
+							"name_loc": {
+								"start": {
+									"line": 18,
+									"column": 2,
+									"character": 104
+								},
+								"end": {
+									"line": 18,
+									"column": 7,
+									"character": 109
+								}
+							},
+							"attributes": [],
+							"fragment": {
+								"type": "Fragment",
+								"nodes": []
+							}
+						}
+					]
+				}
+			},
+			{
+				"type": "Text",
+				"start": 116,
+				"end": 118,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "IfBlock",
+				"elseif": false,
+				"start": 118,
+				"end": 140,
 				"test": {
 					"type": "Identifier",
-					"start": 79,
-					"end": 82,
+					"start": 123,
+					"end": 126,
 					"loc": {
 						"start": {
-							"line": 13,
+							"line": 21,
 							"column": 5
 						},
 						"end": {
-							"line": 13,
+							"line": 21,
 							"column": 8
 						}
 					},
@@ -180,24 +386,36 @@
 					"nodes": [
 						{
 							"type": "Text",
-							"start": 83,
-							"end": 85,
+							"start": 127,
+							"end": 129,
 							"raw": "\n\t",
 							"data": "\n\t"
 						},
 						{
 							"type": "RegularElement",
-							"start": 85,
-							"end": 91,
+							"start": 129,
+							"end": 135,
 							"name": "div",
+							"name_loc": {
+								"start": {
+									"line": 22,
+									"column": 2,
+									"character": 130
+								},
+								"end": {
+									"line": 22,
+									"column": 5,
+									"character": 133
+								}
+							},
 							"attributes": [],
 							"fragment": {
 								"type": "Fragment",
 								"nodes": [
 									{
 										"type": "Text",
-										"start": 90,
-										"end": 91,
+										"start": 134,
+										"end": 135,
 										"raw": "\n",
 										"data": "\n"
 									}
@@ -210,27 +428,27 @@
 			},
 			{
 				"type": "Text",
-				"start": 96,
-				"end": 98,
+				"start": 140,
+				"end": 142,
 				"raw": "\n\n",
 				"data": "\n\n"
 			},
 			{
 				"type": "IfBlock",
 				"elseif": false,
-				"start": 98,
-				"end": 130,
+				"start": 142,
+				"end": 174,
 				"test": {
 					"type": "Identifier",
-					"start": 103,
-					"end": 106,
+					"start": 147,
+					"end": 150,
 					"loc": {
 						"start": {
-							"line": 17,
+							"line": 25,
 							"column": 5
 						},
 						"end": {
-							"line": 17,
+							"line": 25,
 							"column": 8
 						}
 					},
@@ -241,37 +459,61 @@
 					"nodes": [
 						{
 							"type": "Text",
-							"start": 107,
-							"end": 109,
+							"start": 151,
+							"end": 153,
 							"raw": "\n\t",
 							"data": "\n\t"
 						},
 						{
 							"type": "Component",
-							"start": 109,
-							"end": 125,
+							"start": 153,
+							"end": 169,
 							"name": "Comp",
+							"name_loc": {
+								"start": {
+									"line": 26,
+									"column": 2,
+									"character": 154
+								},
+								"end": {
+									"line": 26,
+									"column": 6,
+									"character": 158
+								}
+							},
 							"attributes": [
 								{
 									"type": "Attribute",
-									"start": 115,
-									"end": 124,
+									"start": 159,
+									"end": 168,
 									"name": "foo",
+									"name_loc": {
+										"start": {
+											"line": 26,
+											"column": 7,
+											"character": 159
+										},
+										"end": {
+											"line": 26,
+											"column": 10,
+											"character": 162
+										}
+									},
 									"value": {
 										"type": "ExpressionTag",
-										"start": 119,
-										"end": 124,
+										"start": 163,
+										"end": 168,
 										"expression": {
 											"type": "Identifier",
-											"start": 120,
-											"end": 123,
+											"start": 164,
+											"end": 167,
 											"loc": {
 												"start": {
-													"line": 18,
+													"line": 26,
 													"column": 12
 												},
 												"end": {
-													"line": 18,
+													"line": 26,
 													"column": 15
 												}
 											},
@@ -291,40 +533,64 @@
 			},
 			{
 				"type": "Text",
-				"start": 130,
-				"end": 132,
+				"start": 174,
+				"end": 176,
 				"raw": "\n\n",
 				"data": "\n\n"
 			},
 			{
 				"type": "RegularElement",
-				"start": 132,
-				"end": 160,
+				"start": 176,
+				"end": 204,
 				"name": "div",
+				"name_loc": {
+					"start": {
+						"line": 29,
+						"column": 1,
+						"character": 177
+					},
+					"end": {
+						"line": 29,
+						"column": 4,
+						"character": 180
+					}
+				},
 				"attributes": [],
 				"fragment": {
 					"type": "Fragment",
 					"nodes": [
 						{
 							"type": "Text",
-							"start": 137,
-							"end": 138,
+							"start": 181,
+							"end": 182,
 							"raw": "\n",
 							"data": "\n"
 						},
 						{
 							"type": "RegularElement",
-							"start": 138,
-							"end": 147,
+							"start": 182,
+							"end": 191,
 							"name": "p",
+							"name_loc": {
+								"start": {
+									"line": 30,
+									"column": 1,
+									"character": 183
+								},
+								"end": {
+									"line": 30,
+									"column": 2,
+									"character": 184
+								}
+							},
 							"attributes": [],
 							"fragment": {
 								"type": "Fragment",
 								"nodes": [
 									{
 										"type": "Text",
-										"start": 141,
-										"end": 143,
+										"start": 185,
+										"end": 187,
 										"raw": "hi",
 										"data": "hi"
 									}
@@ -333,16 +599,28 @@
 						},
 						{
 							"type": "Text",
-							"start": 147,
-							"end": 149,
+							"start": 191,
+							"end": 193,
 							"raw": "\n\n",
 							"data": "\n\n"
 						},
 						{
 							"type": "RegularElement",
-							"start": 149,
-							"end": 160,
+							"start": 193,
+							"end": 204,
 							"name": "open-ended",
+							"name_loc": {
+								"start": {
+									"line": 32,
+									"column": 1,
+									"character": 194
+								},
+								"end": {
+									"line": 32,
+									"column": 11,
+									"character": 204
+								}
+							},
 							"attributes": [],
 							"fragment": {
 								"type": "Fragment",
diff --git a/packages/svelte/tests/parser-modern/samples/loose-valid-each-as/input.svelte b/packages/svelte/tests/parser-modern/samples/loose-valid-each-as/input.svelte
new file mode 100644
index 0000000000..f2cc7f5e79
--- /dev/null
+++ b/packages/svelte/tests/parser-modern/samples/loose-valid-each-as/input.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	let arr = [];
+</script>
+
+{#each arr as [key, value = 'default']}
+	<div>{key}: {value}</div>
+{/each}
diff --git a/packages/svelte/tests/parser-modern/samples/loose-valid-each-as/output.json b/packages/svelte/tests/parser-modern/samples/loose-valid-each-as/output.json
new file mode 100644
index 0000000000..441cf71519
--- /dev/null
+++ b/packages/svelte/tests/parser-modern/samples/loose-valid-each-as/output.json
@@ -0,0 +1,332 @@
+{
+	"css": null,
+	"js": [],
+	"start": 0,
+	"end": 119,
+	"type": "Root",
+	"fragment": {
+		"type": "Fragment",
+		"nodes": [
+			{
+				"type": "Text",
+				"start": 43,
+				"end": 45,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "EachBlock",
+				"start": 45,
+				"end": 119,
+				"expression": {
+					"type": "Identifier",
+					"start": 52,
+					"end": 55,
+					"loc": {
+						"start": {
+							"line": 5,
+							"column": 7
+						},
+						"end": {
+							"line": 5,
+							"column": 10
+						}
+					},
+					"name": "arr"
+				},
+				"body": {
+					"type": "Fragment",
+					"nodes": [
+						{
+							"type": "Text",
+							"start": 84,
+							"end": 86,
+							"raw": "\n\t",
+							"data": "\n\t"
+						},
+						{
+							"type": "RegularElement",
+							"start": 86,
+							"end": 111,
+							"name": "div",
+							"name_loc": {
+								"start": {
+									"line": 6,
+									"column": 2,
+									"character": 87
+								},
+								"end": {
+									"line": 6,
+									"column": 5,
+									"character": 90
+								}
+							},
+							"attributes": [],
+							"fragment": {
+								"type": "Fragment",
+								"nodes": [
+									{
+										"type": "ExpressionTag",
+										"start": 91,
+										"end": 96,
+										"expression": {
+											"type": "Identifier",
+											"start": 92,
+											"end": 95,
+											"loc": {
+												"start": {
+													"line": 6,
+													"column": 7
+												},
+												"end": {
+													"line": 6,
+													"column": 10
+												}
+											},
+											"name": "key"
+										}
+									},
+									{
+										"type": "Text",
+										"start": 96,
+										"end": 98,
+										"raw": ": ",
+										"data": ": "
+									},
+									{
+										"type": "ExpressionTag",
+										"start": 98,
+										"end": 105,
+										"expression": {
+											"type": "Identifier",
+											"start": 99,
+											"end": 104,
+											"loc": {
+												"start": {
+													"line": 6,
+													"column": 14
+												},
+												"end": {
+													"line": 6,
+													"column": 19
+												}
+											},
+											"name": "value"
+										}
+									}
+								]
+							}
+						},
+						{
+							"type": "Text",
+							"start": 111,
+							"end": 112,
+							"raw": "\n",
+							"data": "\n"
+						}
+					]
+				},
+				"context": {
+					"type": "ArrayPattern",
+					"start": 59,
+					"end": 83,
+					"loc": {
+						"start": {
+							"line": 5,
+							"column": 15
+						},
+						"end": {
+							"line": 5,
+							"column": 39
+						}
+					},
+					"elements": [
+						{
+							"type": "Identifier",
+							"start": 60,
+							"end": 63,
+							"loc": {
+								"start": {
+									"line": 5,
+									"column": 16
+								},
+								"end": {
+									"line": 5,
+									"column": 19
+								}
+							},
+							"name": "key"
+						},
+						{
+							"type": "AssignmentPattern",
+							"start": 65,
+							"end": 82,
+							"loc": {
+								"start": {
+									"line": 5,
+									"column": 21
+								},
+								"end": {
+									"line": 5,
+									"column": 38
+								}
+							},
+							"left": {
+								"type": "Identifier",
+								"start": 65,
+								"end": 70,
+								"loc": {
+									"start": {
+										"line": 5,
+										"column": 21
+									},
+									"end": {
+										"line": 5,
+										"column": 26
+									}
+								},
+								"name": "value"
+							},
+							"right": {
+								"type": "Literal",
+								"start": 73,
+								"end": 82,
+								"loc": {
+									"start": {
+										"line": 5,
+										"column": 29
+									},
+									"end": {
+										"line": 5,
+										"column": 38
+									}
+								},
+								"value": "default",
+								"raw": "'default'"
+							}
+						}
+					]
+				}
+			}
+		]
+	},
+	"options": null,
+	"instance": {
+		"type": "Script",
+		"start": 0,
+		"end": 43,
+		"context": "default",
+		"content": {
+			"type": "Program",
+			"start": 18,
+			"end": 34,
+			"loc": {
+				"start": {
+					"line": 1,
+					"column": 0
+				},
+				"end": {
+					"line": 3,
+					"column": 9
+				}
+			},
+			"body": [
+				{
+					"type": "VariableDeclaration",
+					"start": 20,
+					"end": 33,
+					"loc": {
+						"start": {
+							"line": 2,
+							"column": 1
+						},
+						"end": {
+							"line": 2,
+							"column": 14
+						}
+					},
+					"declarations": [
+						{
+							"type": "VariableDeclarator",
+							"start": 24,
+							"end": 32,
+							"loc": {
+								"start": {
+									"line": 2,
+									"column": 5
+								},
+								"end": {
+									"line": 2,
+									"column": 13
+								}
+							},
+							"id": {
+								"type": "Identifier",
+								"start": 24,
+								"end": 27,
+								"loc": {
+									"start": {
+										"line": 2,
+										"column": 5
+									},
+									"end": {
+										"line": 2,
+										"column": 8
+									}
+								},
+								"name": "arr"
+							},
+							"init": {
+								"type": "ArrayExpression",
+								"start": 30,
+								"end": 32,
+								"loc": {
+									"start": {
+										"line": 2,
+										"column": 11
+									},
+									"end": {
+										"line": 2,
+										"column": 13
+									}
+								},
+								"elements": []
+							}
+						}
+					],
+					"kind": "let"
+				}
+			],
+			"sourceType": "module"
+		},
+		"attributes": [
+			{
+				"type": "Attribute",
+				"start": 8,
+				"end": 17,
+				"name": "lang",
+				"name_loc": {
+					"start": {
+						"line": 1,
+						"column": 8,
+						"character": 8
+					},
+					"end": {
+						"line": 1,
+						"column": 12,
+						"character": 12
+					}
+				},
+				"value": [
+					{
+						"start": 14,
+						"end": 16,
+						"type": "Text",
+						"raw": "ts",
+						"data": "ts"
+					}
+				]
+			}
+		]
+	}
+}
diff --git a/packages/svelte/tests/parser-modern/samples/options/output.json b/packages/svelte/tests/parser-modern/samples/options/output.json
index 6feee2d4f5..c220811175 100644
--- a/packages/svelte/tests/parser-modern/samples/options/output.json
+++ b/packages/svelte/tests/parser-modern/samples/options/output.json
@@ -2,7 +2,7 @@
 	"css": null,
 	"js": [],
 	"start": 0,
-	"end": 102,
+	"end": 169,
 	"type": "Root",
 	"fragment": {
 		"type": "Fragment",
@@ -32,6 +32,18 @@
 				"start": 16,
 				"end": 49,
 				"name": "customElement",
+				"name_loc": {
+					"start": {
+						"line": 1,
+						"column": 16,
+						"character": 16
+					},
+					"end": {
+						"line": 1,
+						"column": 29,
+						"character": 29
+					}
+				},
 				"value": [
 					{
 						"start": 31,
@@ -47,6 +59,18 @@
 				"start": 50,
 				"end": 62,
 				"name": "runes",
+				"name_loc": {
+					"start": {
+						"line": 1,
+						"column": 50,
+						"character": 50
+					},
+					"end": {
+						"line": 1,
+						"column": 55,
+						"character": 55
+					}
+				},
 				"value": {
 					"type": "ExpressionTag",
 					"start": 56,
@@ -87,12 +111,12 @@
 			"end": 93,
 			"loc": {
 				"start": {
-					"line": 1,
+					"line": 3,
 					"column": 0
 				},
 				"end": {
 					"line": 4,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [],
@@ -104,6 +128,18 @@
 				"start": 75,
 				"end": 81,
 				"name": "module",
+				"name_loc": {
+					"start": {
+						"line": 3,
+						"column": 8,
+						"character": 75
+					},
+					"end": {
+						"line": 3,
+						"column": 14,
+						"character": 81
+					}
+				},
 				"value": true
 			},
 			{
@@ -111,6 +147,18 @@
 				"start": 82,
 				"end": 91,
 				"name": "lang",
+				"name_loc": {
+					"start": {
+						"line": 3,
+						"column": 15,
+						"character": 82
+					},
+					"end": {
+						"line": 3,
+						"column": 19,
+						"character": 86
+					}
+				},
 				"value": [
 					{
 						"start": 88,
@@ -134,12 +182,12 @@
 			"end": 160,
 			"loc": {
 				"start": {
-					"line": 1,
+					"line": 6,
 					"column": 0
 				},
 				"end": {
 					"line": 7,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [],
@@ -151,6 +199,18 @@
 				"start": 112,
 				"end": 121,
 				"name": "lang",
+				"name_loc": {
+					"start": {
+						"line": 6,
+						"column": 8,
+						"character": 112
+					},
+					"end": {
+						"line": 6,
+						"column": 12,
+						"character": 116
+					}
+				},
 				"value": [
 					{
 						"start": 118,
@@ -166,6 +226,18 @@
 				"start": 122,
 				"end": 158,
 				"name": "generics",
+				"name_loc": {
+					"start": {
+						"line": 6,
+						"column": 18,
+						"character": 122
+					},
+					"end": {
+						"line": 6,
+						"column": 26,
+						"character": 130
+					}
+				},
 				"value": [
 					{
 						"start": 132,
diff --git a/packages/svelte/tests/parser-modern/samples/parens/input.svelte b/packages/svelte/tests/parser-modern/samples/parens/input.svelte
new file mode 100644
index 0000000000..ad4f4b7940
--- /dev/null
+++ b/packages/svelte/tests/parser-modern/samples/parens/input.svelte
@@ -0,0 +1 @@
+{(/**/ 42)}
diff --git a/packages/svelte/tests/parser-modern/samples/parens/output.json b/packages/svelte/tests/parser-modern/samples/parens/output.json
new file mode 100644
index 0000000000..7a5b4b38d8
--- /dev/null
+++ b/packages/svelte/tests/parser-modern/samples/parens/output.json
@@ -0,0 +1,61 @@
+{
+	"css": null,
+	"js": [],
+	"start": 0,
+	"end": 11,
+	"type": "Root",
+	"fragment": {
+		"type": "Fragment",
+		"nodes": [
+			{
+				"type": "ExpressionTag",
+				"start": 0,
+				"end": 11,
+				"expression": {
+					"type": "Literal",
+					"start": 7,
+					"end": 9,
+					"loc": {
+						"start": {
+							"line": 1,
+							"column": 7
+						},
+						"end": {
+							"line": 1,
+							"column": 9
+						}
+					},
+					"value": 42,
+					"raw": "42",
+					"leadingComments": [
+						{
+							"type": "Block",
+							"value": "",
+							"start": 2,
+							"end": 6
+						}
+					]
+				}
+			}
+		]
+	},
+	"options": null,
+	"comments": [
+		{
+			"type": "Block",
+			"value": "",
+			"start": 2,
+			"end": 6,
+			"loc": {
+				"start": {
+					"line": 1,
+					"column": 2
+				},
+				"end": {
+					"line": 1,
+					"column": 6
+				}
+			}
+		}
+	]
+}
diff --git a/packages/svelte/tests/parser-modern/samples/script-style-no-markup/input.svelte b/packages/svelte/tests/parser-modern/samples/script-style-no-markup/input.svelte
new file mode 100644
index 0000000000..c4dc4d5271
--- /dev/null
+++ b/packages/svelte/tests/parser-modern/samples/script-style-no-markup/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	// script and style but no markup
+</script>
+<style>
+	div { color: red; }
+</style>
diff --git a/packages/svelte/tests/parser-modern/samples/script-style-no-markup/output.json b/packages/svelte/tests/parser-modern/samples/script-style-no-markup/output.json
new file mode 100644
index 0000000000..db58a62148
--- /dev/null
+++ b/packages/svelte/tests/parser-modern/samples/script-style-no-markup/output.json
@@ -0,0 +1,112 @@
+{
+	"css": {
+		"type": "StyleSheet",
+		"start": 54,
+		"end": 91,
+		"attributes": [],
+		"children": [
+			{
+				"type": "Rule",
+				"prelude": {
+					"type": "SelectorList",
+					"start": 63,
+					"end": 66,
+					"children": [
+						{
+							"type": "ComplexSelector",
+							"start": 63,
+							"end": 66,
+							"children": [
+								{
+									"type": "RelativeSelector",
+									"combinator": null,
+									"selectors": [
+										{
+											"type": "TypeSelector",
+											"name": "div",
+											"start": 63,
+											"end": 66
+										}
+									],
+									"start": 63,
+									"end": 66
+								}
+							]
+						}
+					]
+				},
+				"block": {
+					"type": "Block",
+					"start": 67,
+					"end": 82,
+					"children": [
+						{
+							"type": "Declaration",
+							"start": 69,
+							"end": 79,
+							"property": "color",
+							"value": "red"
+						}
+					]
+				},
+				"start": 63,
+				"end": 82
+			}
+		],
+		"content": {
+			"start": 61,
+			"end": 83,
+			"styles": "\n\tdiv { color: red; }\n",
+			"comment": null
+		}
+	},
+	"js": [],
+	"start": 0,
+	"end": 91,
+	"type": "Root",
+	"fragment": {
+		"type": "Fragment",
+		"nodes": [
+			{
+				"type": "Text",
+				"start": 53,
+				"end": 54,
+				"raw": "\n",
+				"data": "\n"
+			}
+		]
+	},
+	"options": null,
+	"instance": {
+		"type": "Script",
+		"start": 0,
+		"end": 53,
+		"context": "default",
+		"content": {
+			"type": "Program",
+			"start": 8,
+			"end": 44,
+			"loc": {
+				"start": {
+					"line": 1,
+					"column": 0
+				},
+				"end": {
+					"line": 3,
+					"column": 9
+				}
+			},
+			"body": [],
+			"sourceType": "module",
+			"trailingComments": [
+				{
+					"type": "Line",
+					"value": " script and style but no markup",
+					"start": 10,
+					"end": 43
+				}
+			]
+		},
+		"attributes": []
+	}
+}
diff --git a/packages/svelte/tests/parser-modern/samples/semicolon-inside-quotes/output.json b/packages/svelte/tests/parser-modern/samples/semicolon-inside-quotes/output.json
index 33dd78879c..312bd7701e 100644
--- a/packages/svelte/tests/parser-modern/samples/semicolon-inside-quotes/output.json
+++ b/packages/svelte/tests/parser-modern/samples/semicolon-inside-quotes/output.json
@@ -77,7 +77,7 @@
 	},
 	"js": [],
 	"start": 0,
-	"end": 35,
+	"end": 205,
 	"type": "Root",
 	"fragment": {
 		"type": "Fragment",
@@ -87,6 +87,18 @@
 				"start": 0,
 				"end": 35,
 				"name": "h1",
+				"name_loc": {
+					"start": {
+						"line": 1,
+						"column": 1,
+						"character": 1
+					},
+					"end": {
+						"line": 1,
+						"column": 3,
+						"character": 3
+					}
+				},
 				"attributes": [],
 				"fragment": {
 					"type": "Fragment",
diff --git a/packages/svelte/tests/parser-modern/samples/snippets/output.json b/packages/svelte/tests/parser-modern/samples/snippets/output.json
index 2cf2596b18..f358e2a60c 100644
--- a/packages/svelte/tests/parser-modern/samples/snippets/output.json
+++ b/packages/svelte/tests/parser-modern/samples/snippets/output.json
@@ -1,7 +1,7 @@
 {
 	"css": null,
 	"js": [],
-	"start": 29,
+	"start": 0,
 	"end": 101,
 	"type": "Root",
 	"fragment": {
@@ -20,15 +20,27 @@
 				"end": 81,
 				"expression": {
 					"type": "Identifier",
+					"name": "foo",
 					"start": 39,
 					"end": 42,
-					"name": "foo"
+					"loc": {
+						"start": {
+							"line": 3,
+							"column": 10,
+							"character": 39
+						},
+						"end": {
+							"line": 3,
+							"column": 13,
+							"character": 42
+						}
+					}
 				},
 				"parameters": [
 					{
 						"type": "Identifier",
 						"start": 43,
-						"end": 46,
+						"end": 54,
 						"loc": {
 							"start": {
 								"line": 3,
@@ -87,6 +99,18 @@
 							"start": 58,
 							"end": 70,
 							"name": "p",
+							"name_loc": {
+								"start": {
+									"line": 4,
+									"column": 2,
+									"character": 59
+								},
+								"end": {
+									"line": 4,
+									"column": 3,
+									"character": 60
+								}
+							},
 							"attributes": [],
 							"fragment": {
 								"type": "Fragment",
@@ -206,7 +230,7 @@
 				},
 				"end": {
 					"line": 1,
-					"column": 18
+					"column": 27
 				}
 			},
 			"body": [],
@@ -218,6 +242,18 @@
 				"start": 8,
 				"end": 17,
 				"name": "lang",
+				"name_loc": {
+					"start": {
+						"line": 1,
+						"column": 8,
+						"character": 8
+					},
+					"end": {
+						"line": 1,
+						"column": 12,
+						"character": 12
+					}
+				},
 				"value": [
 					{
 						"start": 14,
diff --git a/packages/svelte/tests/parser-modern/samples/tag-type-identifier-probe-comment/input.svelte b/packages/svelte/tests/parser-modern/samples/tag-type-identifier-probe-comment/input.svelte
new file mode 100644
index 0000000000..fa4195996e
--- /dev/null
+++ b/packages/svelte/tests/parser-modern/samples/tag-type-identifier-probe-comment/input.svelte
@@ -0,0 +1 @@
+{type instanceof /* probe */ Object}
diff --git a/packages/svelte/tests/parser-modern/samples/tag-type-identifier-probe-comment/output.json b/packages/svelte/tests/parser-modern/samples/tag-type-identifier-probe-comment/output.json
new file mode 100644
index 0000000000..4fe6468742
--- /dev/null
+++ b/packages/svelte/tests/parser-modern/samples/tag-type-identifier-probe-comment/output.json
@@ -0,0 +1,92 @@
+{
+	"css": null,
+	"js": [],
+	"start": 0,
+	"end": 36,
+	"type": "Root",
+	"fragment": {
+		"type": "Fragment",
+		"nodes": [
+			{
+				"type": "ExpressionTag",
+				"start": 0,
+				"end": 36,
+				"expression": {
+					"type": "BinaryExpression",
+					"start": 1,
+					"end": 35,
+					"loc": {
+						"start": {
+							"line": 1,
+							"column": 1
+						},
+						"end": {
+							"line": 1,
+							"column": 35
+						}
+					},
+					"left": {
+						"type": "Identifier",
+						"start": 1,
+						"end": 5,
+						"loc": {
+							"start": {
+								"line": 1,
+								"column": 1
+							},
+							"end": {
+								"line": 1,
+								"column": 5
+							}
+						},
+						"name": "type"
+					},
+					"operator": "instanceof",
+					"right": {
+						"type": "Identifier",
+						"start": 29,
+						"end": 35,
+						"loc": {
+							"start": {
+								"line": 1,
+								"column": 29
+							},
+							"end": {
+								"line": 1,
+								"column": 35
+							}
+						},
+						"name": "Object",
+						"leadingComments": [
+							{
+								"type": "Block",
+								"value": " probe ",
+								"start": 17,
+								"end": 28
+							}
+						]
+					}
+				}
+			}
+		]
+	},
+	"options": null,
+	"comments": [
+		{
+			"type": "Block",
+			"value": " probe ",
+			"start": 17,
+			"end": 28,
+			"loc": {
+				"start": {
+					"line": 1,
+					"column": 17
+				},
+				"end": {
+					"line": 1,
+					"column": 28
+				}
+			}
+		}
+	]
+}
diff --git a/packages/svelte/tests/parser-modern/samples/template-shadowroot/output.json b/packages/svelte/tests/parser-modern/samples/template-shadowroot/output.json
index 65d716a82b..2cc1dc4988 100644
--- a/packages/svelte/tests/parser-modern/samples/template-shadowroot/output.json
+++ b/packages/svelte/tests/parser-modern/samples/template-shadowroot/output.json
@@ -12,12 +12,36 @@
 				"start": 0,
 				"end": 66,
 				"name": "template",
+				"name_loc": {
+					"start": {
+						"line": 1,
+						"column": 1,
+						"character": 1
+					},
+					"end": {
+						"line": 1,
+						"column": 9,
+						"character": 9
+					}
+				},
 				"attributes": [
 					{
 						"type": "Attribute",
 						"start": 10,
 						"end": 31,
 						"name": "shadowrootmode",
+						"name_loc": {
+							"start": {
+								"line": 1,
+								"column": 10,
+								"character": 10
+							},
+							"end": {
+								"line": 1,
+								"column": 24,
+								"character": 24
+							}
+						},
 						"value": [
 							{
 								"start": 26,
@@ -44,6 +68,18 @@
 							"start": 34,
 							"end": 54,
 							"name": "p",
+							"name_loc": {
+								"start": {
+									"line": 2,
+									"column": 2,
+									"character": 35
+								},
+								"end": {
+									"line": 2,
+									"column": 3,
+									"character": 36
+								}
+							},
 							"attributes": [],
 							"fragment": {
 								"type": "Fragment",
@@ -53,6 +89,18 @@
 										"start": 37,
 										"end": 50,
 										"name": "slot",
+										"name_loc": {
+											"start": {
+												"line": 2,
+												"column": 5,
+												"character": 38
+											},
+											"end": {
+												"line": 2,
+												"column": 9,
+												"character": 42
+											}
+										},
 										"attributes": [],
 										"fragment": {
 											"type": "Fragment",
@@ -84,6 +132,18 @@
 				"start": 67,
 				"end": 111,
 				"name": "template",
+				"name_loc": {
+					"start": {
+						"line": 4,
+						"column": 1,
+						"character": 68
+					},
+					"end": {
+						"line": 4,
+						"column": 9,
+						"character": 76
+					}
+				},
 				"attributes": [],
 				"fragment": {
 					"type": "Fragment",
@@ -100,6 +160,18 @@
 							"start": 79,
 							"end": 99,
 							"name": "p",
+							"name_loc": {
+								"start": {
+									"line": 5,
+									"column": 2,
+									"character": 80
+								},
+								"end": {
+									"line": 5,
+									"column": 3,
+									"character": 81
+								}
+							},
 							"attributes": [],
 							"fragment": {
 								"type": "Fragment",
@@ -109,6 +181,18 @@
 										"start": 82,
 										"end": 95,
 										"name": "slot",
+										"name_loc": {
+											"start": {
+												"line": 5,
+												"column": 5,
+												"character": 83
+											},
+											"end": {
+												"line": 5,
+												"column": 9,
+												"character": 87
+											}
+										},
 										"attributes": [],
 										"fragment": {
 											"type": "Fragment",
@@ -140,6 +224,18 @@
 				"start": 112,
 				"end": 125,
 				"name": "slot",
+				"name_loc": {
+					"start": {
+						"line": 7,
+						"column": 1,
+						"character": 113
+					},
+					"end": {
+						"line": 7,
+						"column": 5,
+						"character": 117
+					}
+				},
 				"attributes": [],
 				"fragment": {
 					"type": "Fragment",
diff --git a/packages/svelte/tests/parser-modern/samples/typescript-in-event-handler/output.json b/packages/svelte/tests/parser-modern/samples/typescript-in-event-handler/output.json
index 5d72e01b0a..7b521513f4 100644
--- a/packages/svelte/tests/parser-modern/samples/typescript-in-event-handler/output.json
+++ b/packages/svelte/tests/parser-modern/samples/typescript-in-event-handler/output.json
@@ -1,7 +1,7 @@
 {
 	"css": null,
 	"js": [],
-	"start": 54,
+	"start": 0,
 	"end": 173,
 	"type": "Root",
 	"fragment": {
@@ -19,13 +19,36 @@
 				"start": 54,
 				"end": 173,
 				"name": "button",
+				"name_loc": {
+					"start": {
+						"line": 5,
+						"column": 1,
+						"character": 55
+					},
+					"end": {
+						"line": 5,
+						"column": 7,
+						"character": 61
+					}
+				},
 				"attributes": [
 					{
 						"start": 63,
 						"end": 147,
 						"type": "OnDirective",
 						"name": "click",
-						"modifiers": [],
+						"name_loc": {
+							"start": {
+								"line": 6,
+								"column": 1,
+								"character": 63
+							},
+							"end": {
+								"line": 6,
+								"column": 9,
+								"character": 71
+							}
+						},
 						"expression": {
 							"type": "ArrowFunctionExpression",
 							"start": 73,
@@ -48,7 +71,7 @@
 								{
 									"type": "Identifier",
 									"start": 74,
-									"end": 75,
+									"end": 87,
 									"loc": {
 										"start": {
 											"line": 6,
@@ -155,7 +178,7 @@
 												"id": {
 													"type": "Identifier",
 													"start": 102,
-													"end": 106,
+													"end": 114,
 													"loc": {
 														"start": {
 															"line": 7,
@@ -316,7 +339,8 @@
 									}
 								]
 							}
-						}
+						},
+						"modifiers": []
 					}
 				],
 				"fragment": {
@@ -372,7 +396,7 @@
 				},
 				"end": {
 					"line": 3,
-					"column": 0
+					"column": 9
 				}
 			},
 			"body": [
@@ -485,6 +509,18 @@
 				"start": 8,
 				"end": 17,
 				"name": "lang",
+				"name_loc": {
+					"start": {
+						"line": 1,
+						"column": 8,
+						"character": 8
+					},
+					"end": {
+						"line": 1,
+						"column": 12,
+						"character": 12
+					}
+				},
 				"value": [
 					{
 						"start": 14,
diff --git a/packages/svelte/tests/parser-modern/test.ts b/packages/svelte/tests/parser-modern/test.ts
index b47d4a4879..540a393c38 100644
--- a/packages/svelte/tests/parser-modern/test.ts
+++ b/packages/svelte/tests/parser-modern/test.ts
@@ -1,12 +1,16 @@
 import * as fs from 'node:fs';
 import { assert, it } from 'vitest';
-import { parse } from 'svelte/compiler';
+import { parse, print } from 'svelte/compiler';
 import { try_load_json } from '../helpers.js';
 import { suite, type BaseTest } from '../suite.js';
+import { walk } from 'zimmerframe';
+import type { AST } from 'svelte/compiler';
 
 interface ParserTest extends BaseTest {}
 
 const { test, run } = suite<ParserTest>(async (config, cwd) => {
+	const loose = cwd.split('/').pop()!.startsWith('loose-');
+
 	const input = fs
 		.readFileSync(`${cwd}/input.svelte`, 'utf-8')
 		.replace(/\s+$/, '')
@@ -23,15 +27,101 @@ const { test, run } = suite<ParserTest>(async (config, cwd) => {
 
 	// run `UPDATE_SNAPSHOTS=true pnpm test parser` to update parser tests
 	if (process.env.UPDATE_SNAPSHOTS) {
-		fs.writeFileSync(`${cwd}/output.json`, JSON.stringify(actual, null, '\t'));
+		fs.writeFileSync(`${cwd}/output.json`, JSON.stringify(actual, null, '\t') + '\n');
 	} else {
 		fs.writeFileSync(`${cwd}/_actual.json`, JSON.stringify(actual, null, '\t'));
 
 		const expected = try_load_json(`${cwd}/output.json`);
+
+		if (!expected.comments) {
+			delete actual.comments;
+		}
+
 		assert.deepEqual(actual, expected);
 	}
+
+	if (!loose) {
+		const printed = print(actual);
+		const reparsed = JSON.parse(
+			JSON.stringify(
+				parse(printed.code, {
+					modern: true,
+					loose
+				})
+			)
+		);
+
+		fs.writeFileSync(`${cwd}/_actual.svelte`, printed.code);
+
+		if (!actual.comments) {
+			delete reparsed.comments;
+		}
+
+		assert.deepEqual(clean(actual), clean(reparsed));
+	}
 });
 
+function clean(ast: AST.SvelteNode) {
+	return walk(ast, null, {
+		_(node, context) {
+			// @ts-ignore
+			delete node.start;
+			// @ts-ignore
+			delete node.end;
+			// @ts-ignore
+			delete node.loc;
+			// @ts-ignore
+			delete node.name_loc;
+			// @ts-ignore
+			delete node.leadingComments;
+			// @ts-ignore
+			delete node.trailingComments;
+
+			context.next();
+		},
+		StyleSheet(node, context) {
+			return {
+				type: node.type,
+				attributes: node.attributes.map((attribute) => context.visit(attribute)),
+				children: node.children.map((child) => context.visit(child)),
+				content: {}
+			} as AST.SvelteNode;
+		},
+		Fragment(node, context) {
+			const nodes: AST.SvelteNode[] = [];
+
+			for (let i = 0; i < node.nodes.length; i += 1) {
+				let child = node.nodes[i];
+
+				if (child.type === 'Text') {
+					child = {
+						...child,
+						// trim multiple whitespace to single space
+						data: child.data.replace(/[^\S]+/g, ' '),
+						raw: child.raw.replace(/[^\S]+/g, ' ')
+					};
+
+					if (i === 0) {
+						child.data = child.data.trimStart();
+						child.raw = child.raw.trimStart();
+					}
+
+					if (i === node.nodes.length - 1) {
+						child.data = child.data.trimEnd();
+						child.raw = child.raw.trimEnd();
+					}
+
+					if (child.data === '') continue;
+				}
+
+				nodes.push(context.visit(child));
+			}
+
+			return { ...node, nodes } as AST.Fragment;
+		}
+	});
+}
+
 export { test };
 
 await run(__dirname);
@@ -49,6 +139,18 @@ it('Strips BOM from the input', () => {
 					nodes: [],
 					type: 'Fragment'
 				},
+				name_loc: {
+					end: {
+						character: 4,
+						column: 4,
+						line: 1
+					},
+					start: {
+						character: 1,
+						column: 1,
+						line: 1
+					}
+				},
 				name: 'div',
 				start: 0,
 				type: 'RegularElement'
diff --git a/packages/svelte/tests/preprocess/samples/script/expected_map.json b/packages/svelte/tests/preprocess/samples/script/expected_map.json
index d5bf98483f..22275b5338 100644
--- a/packages/svelte/tests/preprocess/samples/script/expected_map.json
+++ b/packages/svelte/tests/preprocess/samples/script/expected_map.json
@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "mappings": "AAAA,CAAC,MAAM,CAAC;AACR,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAc,CAAC,CAAC;AAC7B,CAAC,CAAC,MAAM",
+  "mappings": "AAAA,CAAC,MAAM;AACP,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAc,CAAC;AAC5B,CAAC,CAAC,MAAM",
   "names": [],
   "sources": [
     "input.svelte"
diff --git a/packages/svelte/tests/preprocess/test.ts b/packages/svelte/tests/preprocess/test.ts
index 08f237e286..81030a6346 100644
--- a/packages/svelte/tests/preprocess/test.ts
+++ b/packages/svelte/tests/preprocess/test.ts
@@ -25,7 +25,7 @@ const { test, run } = suite<PreprocessTest>(async (config, cwd) => {
 		fs.writeFileSync(`${cwd}/_actual.html.map`, JSON.stringify(result.map, null, 2));
 	}
 
-	expect(result.code).toMatchFileSnapshot(`${cwd}/output.svelte`);
+	await expect(result.code).toMatchFileSnapshot(`${cwd}/output.svelte`);
 
 	expect(result.dependencies).toEqual(config.dependencies || []);
 
diff --git a/packages/svelte/tests/print/samples/animate-directive/input.svelte b/packages/svelte/tests/print/samples/animate-directive/input.svelte
new file mode 100644
index 0000000000..7cd314f714
--- /dev/null
+++ b/packages/svelte/tests/print/samples/animate-directive/input.svelte
@@ -0,0 +1 @@
+<div animate:flip>{item}</div>
diff --git a/packages/svelte/tests/print/samples/animate-directive/output.svelte b/packages/svelte/tests/print/samples/animate-directive/output.svelte
new file mode 100644
index 0000000000..7cd314f714
--- /dev/null
+++ b/packages/svelte/tests/print/samples/animate-directive/output.svelte
@@ -0,0 +1 @@
+<div animate:flip>{item}</div>
diff --git a/packages/svelte/tests/print/samples/attach-tag/input.svelte b/packages/svelte/tests/print/samples/attach-tag/input.svelte
new file mode 100644
index 0000000000..e92604b92b
--- /dev/null
+++ b/packages/svelte/tests/print/samples/attach-tag/input.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
+
+	const myAttachment: Attachment = (element) => {
+		console.log(element.nodeName);
+
+		return () => {
+			console.log('cleaning up');
+		};
+	};
+</script>
+
+<div {@attach myAttachment}>...</div>
diff --git a/packages/svelte/tests/print/samples/attach-tag/output.svelte b/packages/svelte/tests/print/samples/attach-tag/output.svelte
new file mode 100644
index 0000000000..e92604b92b
--- /dev/null
+++ b/packages/svelte/tests/print/samples/attach-tag/output.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
+
+	const myAttachment: Attachment = (element) => {
+		console.log(element.nodeName);
+
+		return () => {
+			console.log('cleaning up');
+		};
+	};
+</script>
+
+<div {@attach myAttachment}>...</div>
diff --git a/packages/svelte/tests/print/samples/attribute/input.svelte b/packages/svelte/tests/print/samples/attribute/input.svelte
new file mode 100644
index 0000000000..4da846f8e6
--- /dev/null
+++ b/packages/svelte/tests/print/samples/attribute/input.svelte
@@ -0,0 +1 @@
+<div class="foo" data-foo="bar"></div>
diff --git a/packages/svelte/tests/print/samples/attribute/output.svelte b/packages/svelte/tests/print/samples/attribute/output.svelte
new file mode 100644
index 0000000000..4da846f8e6
--- /dev/null
+++ b/packages/svelte/tests/print/samples/attribute/output.svelte
@@ -0,0 +1 @@
+<div class="foo" data-foo="bar"></div>
diff --git a/packages/svelte/tests/print/samples/await-block/input.svelte b/packages/svelte/tests/print/samples/await-block/input.svelte
new file mode 100644
index 0000000000..10f0b3fb9e
--- /dev/null
+++ b/packages/svelte/tests/print/samples/await-block/input.svelte
@@ -0,0 +1,10 @@
+{#await promise}
+	<!-- promise is pending -->
+	<p>waiting for the promise to resolve...</p>
+{:then value}
+	<!-- promise was fulfilled or not a Promise -->
+	<p>The value is {value}</p>
+{:catch error}
+	<!-- promise was rejected -->
+	<p>Something went wrong: {error.message}</p>
+{/await}
diff --git a/packages/svelte/tests/print/samples/await-block/output.svelte b/packages/svelte/tests/print/samples/await-block/output.svelte
new file mode 100644
index 0000000000..10f0b3fb9e
--- /dev/null
+++ b/packages/svelte/tests/print/samples/await-block/output.svelte
@@ -0,0 +1,10 @@
+{#await promise}
+	<!-- promise is pending -->
+	<p>waiting for the promise to resolve...</p>
+{:then value}
+	<!-- promise was fulfilled or not a Promise -->
+	<p>The value is {value}</p>
+{:catch error}
+	<!-- promise was rejected -->
+	<p>Something went wrong: {error.message}</p>
+{/await}
diff --git a/packages/svelte/tests/print/samples/bind-directive/input.svelte b/packages/svelte/tests/print/samples/bind-directive/input.svelte
new file mode 100644
index 0000000000..3b7e08921e
--- /dev/null
+++ b/packages/svelte/tests/print/samples/bind-directive/input.svelte
@@ -0,0 +1 @@
+<input bind:value={name} />
diff --git a/packages/svelte/tests/print/samples/bind-directive/output.svelte b/packages/svelte/tests/print/samples/bind-directive/output.svelte
new file mode 100644
index 0000000000..3b7e08921e
--- /dev/null
+++ b/packages/svelte/tests/print/samples/bind-directive/output.svelte
@@ -0,0 +1 @@
+<input bind:value={name} />
diff --git a/packages/svelte/tests/print/samples/block-element-separation/input.svelte b/packages/svelte/tests/print/samples/block-element-separation/input.svelte
new file mode 100644
index 0000000000..2a721648fe
--- /dev/null
+++ b/packages/svelte/tests/print/samples/block-element-separation/input.svelte
@@ -0,0 +1,25 @@
+<svelte:head><title>Page Title</title></svelte:head><div>no space</div>
+<Component /><Component />
+<Component><span>child</span></Component><div>after component</div>
+<svelte:boundary><div>boundary content</div></svelte:boundary><div>after boundary</div>
+<!--comment--><div>after comment</div>
+<div>before comment</div><!--comment-->
+{#each items as item}<div>{item}</div>{/each}<div>after each</div>
+{@render children()}<div>after render</div>
+<div>before render</div>{@render children()}
+
+<Component />   <div>with spaces</div>
+<Component><span>child</span></Component>   <div>spaces after component</div>
+<!--comment-->   <div>spaces after comment</div>
+{@render children()}   <div>spaces after render</div>
+
+<Component />
+<div>newline between</div>
+<!--comment-->
+<div>newline after comment</div>
+{#each items as item}
+<div>{item}</div>
+{/each}
+<div>newline after each</div>
+{@render children()}
+<div>after render</div>
diff --git a/packages/svelte/tests/print/samples/block-element-separation/output.svelte b/packages/svelte/tests/print/samples/block-element-separation/output.svelte
new file mode 100644
index 0000000000..380e4f7cee
--- /dev/null
+++ b/packages/svelte/tests/print/samples/block-element-separation/output.svelte
@@ -0,0 +1,42 @@
+<svelte:head><title>Page Title</title></svelte:head>
+<div>no space</div>
+<Component />
+<Component />
+<Component><span>child</span></Component>
+<div>after component</div>
+<svelte:boundary><div>boundary content</div></svelte:boundary>
+<div>after boundary</div>
+<!--comment-->
+<div>after comment</div>
+<div>before comment</div>
+<!--comment-->
+
+{#each items as item}
+	<div>{item}</div>
+{/each}
+
+<div>after each</div>
+{@render children()}
+<div>after render</div>
+<div>before render</div>
+{@render children()}
+<Component />
+<div>with spaces</div>
+<Component><span>child</span></Component>
+<div>spaces after component</div>
+<!--comment-->
+<div>spaces after comment</div>
+{@render children()}
+<div>spaces after render</div>
+<Component />
+<div>newline between</div>
+<!--comment-->
+<div>newline after comment</div>
+
+{#each items as item}
+	<div>{item}</div>
+{/each}
+
+<div>newline after each</div>
+{@render children()}
+<div>after render</div>
diff --git a/packages/svelte/tests/print/samples/block/input.svelte b/packages/svelte/tests/print/samples/block/input.svelte
new file mode 100644
index 0000000000..84140c5c02
--- /dev/null
+++ b/packages/svelte/tests/print/samples/block/input.svelte
@@ -0,0 +1,9 @@
+{#if   condition} yes {:else} no {/if}
+
+{#each items as item, i}
+  <p>{i}: {item}</p>
+{/each}
+
+{#if condition}yes{:else}no{/if}
+
+{#each items as item, i}<p>{i}: {item}</p>{/each}
diff --git a/packages/svelte/tests/print/samples/block/output.svelte b/packages/svelte/tests/print/samples/block/output.svelte
new file mode 100644
index 0000000000..e5d8590875
--- /dev/null
+++ b/packages/svelte/tests/print/samples/block/output.svelte
@@ -0,0 +1,19 @@
+{#if condition}
+	yes
+{:else}
+	no
+{/if}
+
+{#each items as item, i}
+	<p>{i}: {item}</p>
+{/each}
+
+{#if condition}
+	yes
+{:else}
+	no
+{/if}
+
+{#each items as item, i}
+	<p>{i}: {item}</p>
+{/each}
diff --git a/packages/svelte/tests/print/samples/class-directive/input.svelte b/packages/svelte/tests/print/samples/class-directive/input.svelte
new file mode 100644
index 0000000000..5e63111930
--- /dev/null
+++ b/packages/svelte/tests/print/samples/class-directive/input.svelte
@@ -0,0 +1,8 @@
+<script>
+    let active = true;
+    let foo = false;
+</script>
+
+<div class:active class:bar={foo}>
+    Hello world!
+</div>
diff --git a/packages/svelte/tests/print/samples/class-directive/output.svelte b/packages/svelte/tests/print/samples/class-directive/output.svelte
new file mode 100644
index 0000000000..14e5611331
--- /dev/null
+++ b/packages/svelte/tests/print/samples/class-directive/output.svelte
@@ -0,0 +1,6 @@
+<script>
+	let active = true;
+	let foo = false;
+</script>
+
+<div class:active class:bar={foo}>Hello world!</div>
diff --git a/packages/svelte/tests/print/samples/comment/input.svelte b/packages/svelte/tests/print/samples/comment/input.svelte
new file mode 100644
index 0000000000..d144ced1b9
--- /dev/null
+++ b/packages/svelte/tests/print/samples/comment/input.svelte
@@ -0,0 +1,5 @@
+<!-- inline -->
+
+<!-- 
+    multiline
+-->
diff --git a/packages/svelte/tests/print/samples/comment/output.svelte b/packages/svelte/tests/print/samples/comment/output.svelte
new file mode 100644
index 0000000000..f2f97b65be
--- /dev/null
+++ b/packages/svelte/tests/print/samples/comment/output.svelte
@@ -0,0 +1,3 @@
+<!-- inline --><!-- 
+    multiline
+-->
diff --git a/packages/svelte/tests/print/samples/component/input.svelte b/packages/svelte/tests/print/samples/component/input.svelte
new file mode 100644
index 0000000000..c258d7d609
--- /dev/null
+++ b/packages/svelte/tests/print/samples/component/input.svelte
@@ -0,0 +1,8 @@
+<script>
+    import C from './C.svelte';
+</script>
+
+<C foo="bar" />
+<C foo="bar">
+    <span>Hello World</span>
+</C>
diff --git a/packages/svelte/tests/print/samples/component/output.svelte b/packages/svelte/tests/print/samples/component/output.svelte
new file mode 100644
index 0000000000..ec8b827883
--- /dev/null
+++ b/packages/svelte/tests/print/samples/component/output.svelte
@@ -0,0 +1,6 @@
+<script>
+	import C from './C.svelte';
+</script>
+
+<C foo="bar" />
+<C foo="bar"><span>Hello World</span></C>
diff --git a/packages/svelte/tests/print/samples/const-tag/input.svelte b/packages/svelte/tests/print/samples/const-tag/input.svelte
new file mode 100644
index 0000000000..50ada2dd66
--- /dev/null
+++ b/packages/svelte/tests/print/samples/const-tag/input.svelte
@@ -0,0 +1,8 @@
+<script>
+    const boxes = [];
+</script>
+
+{#each boxes as box}
+	{@const area = box.width * box.height}
+	{box.width} * {box.height} = {area}
+{/each}
diff --git a/packages/svelte/tests/print/samples/const-tag/output.svelte b/packages/svelte/tests/print/samples/const-tag/output.svelte
new file mode 100644
index 0000000000..dded998a84
--- /dev/null
+++ b/packages/svelte/tests/print/samples/const-tag/output.svelte
@@ -0,0 +1,8 @@
+<script>
+	const boxes = [];
+</script>
+
+{#each boxes as box}
+	{@const area = box.width * box.height}
+	{box.width} * {box.height} = {area}
+{/each}
diff --git a/packages/svelte/tests/print/samples/css-keyframes-percent/input.svelte b/packages/svelte/tests/print/samples/css-keyframes-percent/input.svelte
new file mode 100644
index 0000000000..b2a0e3aa7a
--- /dev/null
+++ b/packages/svelte/tests/print/samples/css-keyframes-percent/input.svelte
@@ -0,0 +1,7 @@
+<style>
+  @keyframes foo {
+    0% { left: 0px; }
+    50% { left: 50px; }
+    100% { left: 100px; }
+  }
+</style>
diff --git a/packages/svelte/tests/print/samples/css-keyframes-percent/output.svelte b/packages/svelte/tests/print/samples/css-keyframes-percent/output.svelte
new file mode 100644
index 0000000000..e35a5780fa
--- /dev/null
+++ b/packages/svelte/tests/print/samples/css-keyframes-percent/output.svelte
@@ -0,0 +1,13 @@
+<style>
+	@keyframes foo {
+		0% {
+			left: 0px;
+		}
+		50% {
+			left: 50px;
+		}
+		100% {
+			left: 100px;
+		}
+	}
+</style>
diff --git a/packages/svelte/tests/print/samples/declaration-tag-division/input.svelte b/packages/svelte/tests/print/samples/declaration-tag-division/input.svelte
new file mode 100644
index 0000000000..0e20727748
--- /dev/null
+++ b/packages/svelte/tests/print/samples/declaration-tag-division/input.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	let visible = true;
+	let total = 10;
+	let width = 16;
+	let height = 9;
+	let divisor = 2;
+	let options: { fallback?: number } = {};
+</script>
+
+{#if visible}
+	{const half = total / 2}
+	{let derived = $derived(total / 4)}
+	{const member = width / height}
+	{const call = Math.max(total, 1) / 2}
+	{const string_then_division = 'ab' / divisor}
+	{const typed: number = total / 2}
+	{const { fallback = total / 2 } = options}
+	{const regex = /[}]/}
+	<p>{half} {derived} {member} {call} {string_then_division} {typed} {fallback} {regex}</p>
+{/if}
diff --git a/packages/svelte/tests/print/samples/declaration-tag-division/output.svelte b/packages/svelte/tests/print/samples/declaration-tag-division/output.svelte
new file mode 100644
index 0000000000..0e20727748
--- /dev/null
+++ b/packages/svelte/tests/print/samples/declaration-tag-division/output.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	let visible = true;
+	let total = 10;
+	let width = 16;
+	let height = 9;
+	let divisor = 2;
+	let options: { fallback?: number } = {};
+</script>
+
+{#if visible}
+	{const half = total / 2}
+	{let derived = $derived(total / 4)}
+	{const member = width / height}
+	{const call = Math.max(total, 1) / 2}
+	{const string_then_division = 'ab' / divisor}
+	{const typed: number = total / 2}
+	{const { fallback = total / 2 } = options}
+	{const regex = /[}]/}
+	<p>{half} {derived} {member} {call} {string_then_division} {typed} {fallback} {regex}</p>
+{/if}
diff --git a/packages/svelte/tests/print/samples/declaration-tag/input.svelte b/packages/svelte/tests/print/samples/declaration-tag/input.svelte
new file mode 100644
index 0000000000..6dbb2af2dd
--- /dev/null
+++ b/packages/svelte/tests/print/samples/declaration-tag/input.svelte
@@ -0,0 +1,7 @@
+{#if visible}
+	{let count = 1}
+	{const doubled = count * 2}
+	{const label = 'count'}
+	{const format = (value) => `${label}: ${value}`}
+	<p>{format(doubled)}</p>
+{/if}
diff --git a/packages/svelte/tests/print/samples/declaration-tag/output.svelte b/packages/svelte/tests/print/samples/declaration-tag/output.svelte
new file mode 100644
index 0000000000..6dbb2af2dd
--- /dev/null
+++ b/packages/svelte/tests/print/samples/declaration-tag/output.svelte
@@ -0,0 +1,7 @@
+{#if visible}
+	{let count = 1}
+	{const doubled = count * 2}
+	{const label = 'count'}
+	{const format = (value) => `${label}: ${value}`}
+	<p>{format(doubled)}</p>
+{/if}
diff --git a/packages/svelte/tests/print/samples/each-block/input.svelte b/packages/svelte/tests/print/samples/each-block/input.svelte
new file mode 100644
index 0000000000..a859705fec
--- /dev/null
+++ b/packages/svelte/tests/print/samples/each-block/input.svelte
@@ -0,0 +1,15 @@
+{#each items as { id, name, qty }, i (id)}
+	<li>{i + 1}: {name} x {qty}</li>
+{/each}
+
+{#each objects as { id, ...rest }}
+	<li><span>{id}</span><MyComponent {...rest} /></li>
+{/each}
+
+{#each expression}...{/each}
+
+{#each todos as todo}
+	<p>{todo.text}</p>
+{:else}
+	<p>No tasks today!</p>
+{/each}
diff --git a/packages/svelte/tests/print/samples/each-block/output.svelte b/packages/svelte/tests/print/samples/each-block/output.svelte
new file mode 100644
index 0000000000..b19925a694
--- /dev/null
+++ b/packages/svelte/tests/print/samples/each-block/output.svelte
@@ -0,0 +1,17 @@
+{#each items as { id, name, qty }, i (id)}
+	<li>{i + 1}: {name} x {qty}</li>
+{/each}
+
+{#each objects as { id, ...rest }}
+	<li><span>{id}</span><MyComponent {...rest} /></li>
+{/each}
+
+{#each expression}
+	...
+{/each}
+
+{#each todos as todo}
+	<p>{todo.text}</p>
+{:else}
+	<p>No tasks today!</p>
+{/each}
diff --git a/packages/svelte/tests/print/samples/expression-tag/input.svelte b/packages/svelte/tests/print/samples/expression-tag/input.svelte
new file mode 100644
index 0000000000..3920c3b40a
--- /dev/null
+++ b/packages/svelte/tests/print/samples/expression-tag/input.svelte
@@ -0,0 +1,2 @@
+<span>{name}</span>
+<span>{count + 1}</span>
diff --git a/packages/svelte/tests/print/samples/expression-tag/output.svelte b/packages/svelte/tests/print/samples/expression-tag/output.svelte
new file mode 100644
index 0000000000..9142a59631
--- /dev/null
+++ b/packages/svelte/tests/print/samples/expression-tag/output.svelte
@@ -0,0 +1 @@
+<span>{name}</span><span>{count + 1}</span>
diff --git a/packages/svelte/tests/print/samples/formatting/input.svelte b/packages/svelte/tests/print/samples/formatting/input.svelte
new file mode 100644
index 0000000000..43c3b363cb
--- /dev/null
+++ b/packages/svelte/tests/print/samples/formatting/input.svelte
@@ -0,0 +1,8 @@
+<script>import { setLocale } from '$lib/paraglide/runtime';import { m } from '$lib/paraglide/messages.js';</script>
+
+<h1>{m.hello_world({ name: 'SvelteKit User' })}</h1><div><button onclick={() => setLocale('en')}>en</button><button	onclick={() => setLocale('es')}>es</button></div><p>If you use VSCode, install the <a href="https://marketplace.visualstudio.com/items?itemName=inlang.vs-code-extension" target="_blank">Sherlock i18n extension</a>for a better i18n experience.</p>
+
+<Component><div><button>Hello, this is a test</button><button>Hello, this is a test</button></div></Component>
+<Component><button>Hello, this is a test</button><button>Hello, this is a test</button></Component>
+<button class="foo bar" aria-label="click" onclick={() => console.log("clicked")}>Click me!</button>
+<button class="foo bar" aria-label="click" onclick={() => console.log("clicked")}><span>some fancy looking</span><span>really long button text</span></button>
diff --git a/packages/svelte/tests/print/samples/formatting/output.svelte b/packages/svelte/tests/print/samples/formatting/output.svelte
new file mode 100644
index 0000000000..ba871c66a5
--- /dev/null
+++ b/packages/svelte/tests/print/samples/formatting/output.svelte
@@ -0,0 +1,49 @@
+<script>
+	import { setLocale } from '$lib/paraglide/runtime';
+	import { m } from '$lib/paraglide/messages.js';
+</script>
+
+<h1>{m.hello_world({ name: 'SvelteKit User' })}</h1>
+
+<div>
+	<button onclick={() => setLocale('en')}>en</button>
+	<button onclick={() => setLocale('es')}>es</button>
+</div>
+
+<p>
+	If you use VSCode, install the 
+
+	<a
+		href="https://marketplace.visualstudio.com/items?itemName=inlang.vs-code-extension"
+		target="_blank"
+	>Sherlock i18n extension</a>
+
+	for a better i18n experience.
+</p>
+
+<Component>
+	<div>
+		<button>Hello, this is a test</button>
+		<button>Hello, this is a test</button>
+	</div>
+</Component>
+
+<Component>
+	<button>Hello, this is a test</button>
+	<button>Hello, this is a test</button>
+</Component>
+
+<button
+	class="foo bar"
+	aria-label="click"
+	onclick={() => console.log("clicked")}
+>Click me!</button>
+
+<button
+	class="foo bar"
+	aria-label="click"
+	onclick={() => console.log("clicked")}
+>
+	<span>some fancy looking</span>
+	<span>really long button text</span>
+</button>
diff --git a/packages/svelte/tests/print/samples/html-document/input.svelte b/packages/svelte/tests/print/samples/html-document/input.svelte
new file mode 100644
index 0000000000..8f1b4accab
--- /dev/null
+++ b/packages/svelte/tests/print/samples/html-document/input.svelte
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Svelte App</title>
+    </head>
+    <body>
+        <div>Hello World</div>
+    </body>
+</html>
diff --git a/packages/svelte/tests/print/samples/html-document/output.svelte b/packages/svelte/tests/print/samples/html-document/output.svelte
new file mode 100644
index 0000000000..94ef78d0a3
--- /dev/null
+++ b/packages/svelte/tests/print/samples/html-document/output.svelte
@@ -0,0 +1,16 @@
+<!doctype html>
+
+<html>
+	<head>
+		<meta charset="utf-8" />
+
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1.0"
+		/>
+
+		<title>Svelte App</title>
+	</head>
+
+	<body><div>Hello World</div></body>
+</html>
diff --git a/packages/svelte/tests/print/samples/html-tag/input.svelte b/packages/svelte/tests/print/samples/html-tag/input.svelte
new file mode 100644
index 0000000000..d021ee8fa6
--- /dev/null
+++ b/packages/svelte/tests/print/samples/html-tag/input.svelte
@@ -0,0 +1,3 @@
+<article>
+	{@html content}
+</article>
diff --git a/packages/svelte/tests/print/samples/html-tag/output.svelte b/packages/svelte/tests/print/samples/html-tag/output.svelte
new file mode 100644
index 0000000000..84777d9b6a
--- /dev/null
+++ b/packages/svelte/tests/print/samples/html-tag/output.svelte
@@ -0,0 +1 @@
+<article>{@html content}</article>
diff --git a/packages/svelte/tests/print/samples/if-block/input.svelte b/packages/svelte/tests/print/samples/if-block/input.svelte
new file mode 100644
index 0000000000..0a444a1252
--- /dev/null
+++ b/packages/svelte/tests/print/samples/if-block/input.svelte
@@ -0,0 +1,7 @@
+{#if porridge.temperature > 100}
+	<p>too hot!</p>
+{:else if 80 > porridge.temperature}
+	<p>too cold!</p>
+{:else}
+	<p>just right!</p>
+{/if}
diff --git a/packages/svelte/tests/print/samples/if-block/output.svelte b/packages/svelte/tests/print/samples/if-block/output.svelte
new file mode 100644
index 0000000000..0a444a1252
--- /dev/null
+++ b/packages/svelte/tests/print/samples/if-block/output.svelte
@@ -0,0 +1,7 @@
+{#if porridge.temperature > 100}
+	<p>too hot!</p>
+{:else if 80 > porridge.temperature}
+	<p>too cold!</p>
+{:else}
+	<p>just right!</p>
+{/if}
diff --git a/packages/svelte/tests/print/samples/key-block/input.svelte b/packages/svelte/tests/print/samples/key-block/input.svelte
new file mode 100644
index 0000000000..9d09f8f00a
--- /dev/null
+++ b/packages/svelte/tests/print/samples/key-block/input.svelte
@@ -0,0 +1,3 @@
+{#key value}
+	<Component />
+{/key}
diff --git a/packages/svelte/tests/print/samples/key-block/output.svelte b/packages/svelte/tests/print/samples/key-block/output.svelte
new file mode 100644
index 0000000000..9d09f8f00a
--- /dev/null
+++ b/packages/svelte/tests/print/samples/key-block/output.svelte
@@ -0,0 +1,3 @@
+{#key value}
+	<Component />
+{/key}
diff --git a/packages/svelte/tests/print/samples/let-directive/input.svelte b/packages/svelte/tests/print/samples/let-directive/input.svelte
new file mode 100644
index 0000000000..c6b49c1561
--- /dev/null
+++ b/packages/svelte/tests/print/samples/let-directive/input.svelte
@@ -0,0 +1,3 @@
+<FancyList {items} let:item={processed}>
+	<div>{processed.text}</div>
+</FancyList>
diff --git a/packages/svelte/tests/print/samples/let-directive/output.svelte b/packages/svelte/tests/print/samples/let-directive/output.svelte
new file mode 100644
index 0000000000..c7254150e3
--- /dev/null
+++ b/packages/svelte/tests/print/samples/let-directive/output.svelte
@@ -0,0 +1 @@
+<FancyList items={items} let:item={processed}><div>{processed.text}</div></FancyList>
diff --git a/packages/svelte/tests/print/samples/on-directive/input.svelte b/packages/svelte/tests/print/samples/on-directive/input.svelte
new file mode 100644
index 0000000000..976749696a
--- /dev/null
+++ b/packages/svelte/tests/print/samples/on-directive/input.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	let count = 0;
+
+	function handleClick(event: MouseEvent) {
+		count += 1;
+	}
+</script>
+
+<button on:click|preventDefault={handleClick}>
+	count: {count}
+</button>
diff --git a/packages/svelte/tests/print/samples/on-directive/output.svelte b/packages/svelte/tests/print/samples/on-directive/output.svelte
new file mode 100644
index 0000000000..da0945678d
--- /dev/null
+++ b/packages/svelte/tests/print/samples/on-directive/output.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	let count = 0;
+
+	function handleClick(event: MouseEvent) {
+		count += 1;
+	}
+</script>
+
+<button on:click|preventDefault={handleClick}>count: {count}</button>
diff --git a/packages/svelte/tests/print/samples/regular-element/input.svelte b/packages/svelte/tests/print/samples/regular-element/input.svelte
new file mode 100644
index 0000000000..c39f4f487f
--- /dev/null
+++ b/packages/svelte/tests/print/samples/regular-element/input.svelte
@@ -0,0 +1,2 @@
+<div><a href="/foo">bar</a></div>
+<br />
diff --git a/packages/svelte/tests/print/samples/regular-element/output.svelte b/packages/svelte/tests/print/samples/regular-element/output.svelte
new file mode 100644
index 0000000000..0cf7c2472f
--- /dev/null
+++ b/packages/svelte/tests/print/samples/regular-element/output.svelte
@@ -0,0 +1 @@
+<div><a href="/foo">bar</a></div><br />
diff --git a/packages/svelte/tests/print/samples/render-tag/input.svelte b/packages/svelte/tests/print/samples/render-tag/input.svelte
new file mode 100644
index 0000000000..b301e4b0d7
--- /dev/null
+++ b/packages/svelte/tests/print/samples/render-tag/input.svelte
@@ -0,0 +1,7 @@
+{#snippet sum(a, b)}
+	<p>{a} + {b} = {a + b}</p>
+{/snippet}
+
+{@render sum(1, 2)}
+{@render sum(3, 4)}
+{@render sum(5, 6)}
diff --git a/packages/svelte/tests/print/samples/render-tag/output.svelte b/packages/svelte/tests/print/samples/render-tag/output.svelte
new file mode 100644
index 0000000000..b301e4b0d7
--- /dev/null
+++ b/packages/svelte/tests/print/samples/render-tag/output.svelte
@@ -0,0 +1,7 @@
+{#snippet sum(a, b)}
+	<p>{a} + {b} = {a + b}</p>
+{/snippet}
+
+{@render sum(1, 2)}
+{@render sum(3, 4)}
+{@render sum(5, 6)}
diff --git a/packages/svelte/tests/print/samples/script/input.svelte b/packages/svelte/tests/print/samples/script/input.svelte
new file mode 100644
index 0000000000..f094ccf550
--- /dev/null
+++ b/packages/svelte/tests/print/samples/script/input.svelte
@@ -0,0 +1,3 @@
+<script lang="ts" module>
+    console.log('hello world');
+</script>
diff --git a/packages/svelte/tests/print/samples/script/output.svelte b/packages/svelte/tests/print/samples/script/output.svelte
new file mode 100644
index 0000000000..da5f5725bf
--- /dev/null
+++ b/packages/svelte/tests/print/samples/script/output.svelte
@@ -0,0 +1,3 @@
+<script lang="ts" module>
+	console.log('hello world');
+</script>
diff --git a/packages/svelte/tests/print/samples/slot-element/input.svelte b/packages/svelte/tests/print/samples/slot-element/input.svelte
new file mode 100644
index 0000000000..b92372f984
--- /dev/null
+++ b/packages/svelte/tests/print/samples/slot-element/input.svelte
@@ -0,0 +1,3 @@
+<div class="modal">
+	<slot></slot>
+</div>
diff --git a/packages/svelte/tests/print/samples/slot-element/output.svelte b/packages/svelte/tests/print/samples/slot-element/output.svelte
new file mode 100644
index 0000000000..4d59994078
--- /dev/null
+++ b/packages/svelte/tests/print/samples/slot-element/output.svelte
@@ -0,0 +1 @@
+<div class="modal"><slot></slot></div>
diff --git a/packages/svelte/tests/print/samples/snippet-block/input.svelte b/packages/svelte/tests/print/samples/snippet-block/input.svelte
new file mode 100644
index 0000000000..47f8efd9e9
--- /dev/null
+++ b/packages/svelte/tests/print/samples/snippet-block/input.svelte
@@ -0,0 +1,3 @@
+{#snippet name(param1, param2, paramN)}
+    Foo
+{/snippet}
diff --git a/packages/svelte/tests/print/samples/snippet-block/output.svelte b/packages/svelte/tests/print/samples/snippet-block/output.svelte
new file mode 100644
index 0000000000..bb172f1db6
--- /dev/null
+++ b/packages/svelte/tests/print/samples/snippet-block/output.svelte
@@ -0,0 +1,3 @@
+{#snippet name(param1, param2, paramN)}
+	Foo
+{/snippet}
diff --git a/packages/svelte/tests/print/samples/spread-attribute/input.svelte b/packages/svelte/tests/print/samples/spread-attribute/input.svelte
new file mode 100644
index 0000000000..836425cae3
--- /dev/null
+++ b/packages/svelte/tests/print/samples/spread-attribute/input.svelte
@@ -0,0 +1 @@
+<div {...props}></div>
diff --git a/packages/svelte/tests/print/samples/spread-attribute/output.svelte b/packages/svelte/tests/print/samples/spread-attribute/output.svelte
new file mode 100644
index 0000000000..836425cae3
--- /dev/null
+++ b/packages/svelte/tests/print/samples/spread-attribute/output.svelte
@@ -0,0 +1 @@
+<div {...props}></div>
diff --git a/packages/svelte/tests/print/samples/style-directive/input.svelte b/packages/svelte/tests/print/samples/style-directive/input.svelte
new file mode 100644
index 0000000000..2951fc9daa
--- /dev/null
+++ b/packages/svelte/tests/print/samples/style-directive/input.svelte
@@ -0,0 +1,2 @@
+<div style:color="red">...</div>
+<div style:color style:width="12rem" style:background-color={darkMode ? 'black' : 'white'}>...</div>
diff --git a/packages/svelte/tests/print/samples/style-directive/output.svelte b/packages/svelte/tests/print/samples/style-directive/output.svelte
new file mode 100644
index 0000000000..27c12c5d47
--- /dev/null
+++ b/packages/svelte/tests/print/samples/style-directive/output.svelte
@@ -0,0 +1,7 @@
+<div style:color="red">...</div>
+
+<div
+	style:color
+	style:width="12rem"
+	style:background-color={darkMode ? 'black' : 'white'}
+>...</div>
diff --git a/packages/svelte/tests/print/samples/style/input.svelte b/packages/svelte/tests/print/samples/style/input.svelte
new file mode 100644
index 0000000000..afa00bee7a
--- /dev/null
+++ b/packages/svelte/tests/print/samples/style/input.svelte
@@ -0,0 +1,54 @@
+<style>
+  .foo {
+    color: red;
+  }
+
+  .foo.bar {
+    color: blue;
+  }
+
+  @media (max-width: 600px) {
+    .box {
+      display: none;
+    }
+  }
+
+
+  @keyframes fade {
+    from { opacity: 0; }
+    50% { opacity: 0.5; }
+    to   { opacity: 1; }
+  }
+
+
+  @font-face {
+    font-family: "MyFont";
+    src: url("/fonts/MyFont.woff2") format("woff2");
+  }
+
+  .container .item { color: red; }
+  nav > ul.menu { display: flex; }
+  h2 + p.note { margin-top: 0; }
+  li:nth-child(2n + 1) { color: red; }
+  .button:hover { opacity: 0.5; }
+  .card::before {
+    content: "";
+    display: block;
+  }
+  .container > .item { color: red; }
+  h1 + p { margin-top: 0; }
+
+  .container .item, nav > ul.menu {
+    color: red;
+  }
+  #id-selector { color: red; }
+  [data-attribute] { color: red; }
+  [data-attribute="value"] { color: red; }
+
+  .card {
+    background: white;
+    &:hover {
+      background: gray;
+    }
+  }
+</style>
diff --git a/packages/svelte/tests/print/samples/style/output.svelte b/packages/svelte/tests/print/samples/style/output.svelte
new file mode 100644
index 0000000000..9fc5e3fbba
--- /dev/null
+++ b/packages/svelte/tests/print/samples/style/output.svelte
@@ -0,0 +1,91 @@
+
+
+<style>
+	.foo {
+		color: red;
+	}
+
+	.foo.bar {
+		color: blue;
+	}
+
+	@media (max-width: 600px) {
+		.box {
+			display: none;
+		}
+	}
+
+	@keyframes fade {
+		from {
+			opacity: 0;
+		}
+		50% {
+			opacity: 0.5;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@font-face {
+		font-family: "MyFont";
+		src: url("/fonts/MyFont.woff2") format("woff2");
+	}
+
+	.container .item {
+		color: red;
+	}
+
+	nav > ul.menu {
+		display: flex;
+	}
+
+	h2 + p.note {
+		margin-top: 0;
+	}
+
+	li:nth-child(2n + 1) {
+		color: red;
+	}
+
+	.button:hover {
+		opacity: 0.5;
+	}
+
+	.card::before {
+		content: "";
+		display: block;
+	}
+
+	.container > .item {
+		color: red;
+	}
+
+	h1 + p {
+		margin-top: 0;
+	}
+
+	.container .item,
+	nav > ul.menu {
+		color: red;
+	}
+
+	#id-selector {
+		color: red;
+	}
+
+	[data-attribute] {
+		color: red;
+	}
+
+	[data-attribute="value"] {
+		color: red;
+	}
+
+	.card {
+		background: white;
+		&:hover {
+			background: gray;
+		}
+	}
+</style>
diff --git a/packages/svelte/tests/print/samples/svelte-body/input.svelte b/packages/svelte/tests/print/samples/svelte-body/input.svelte
new file mode 100644
index 0000000000..a4c26db5ce
--- /dev/null
+++ b/packages/svelte/tests/print/samples/svelte-body/input.svelte
@@ -0,0 +1 @@
+<svelte:body onmousemove={handleMousemove} />
diff --git a/packages/svelte/tests/print/samples/svelte-body/output.svelte b/packages/svelte/tests/print/samples/svelte-body/output.svelte
new file mode 100644
index 0000000000..e13eaae979
--- /dev/null
+++ b/packages/svelte/tests/print/samples/svelte-body/output.svelte
@@ -0,0 +1 @@
+<svelte:body onmousemove={handleMousemove}></svelte:body>
diff --git a/packages/svelte/tests/print/samples/svelte-boundary/input.svelte b/packages/svelte/tests/print/samples/svelte-boundary/input.svelte
new file mode 100644
index 0000000000..2cbd32daf0
--- /dev/null
+++ b/packages/svelte/tests/print/samples/svelte-boundary/input.svelte
@@ -0,0 +1,7 @@
+<svelte:boundary>
+	<p>{await delayed('hello!')}</p>
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/print/samples/svelte-boundary/output.svelte b/packages/svelte/tests/print/samples/svelte-boundary/output.svelte
new file mode 100644
index 0000000000..2cbd32daf0
--- /dev/null
+++ b/packages/svelte/tests/print/samples/svelte-boundary/output.svelte
@@ -0,0 +1,7 @@
+<svelte:boundary>
+	<p>{await delayed('hello!')}</p>
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/print/samples/svelte-component/input.svelte b/packages/svelte/tests/print/samples/svelte-component/input.svelte
new file mode 100644
index 0000000000..046ee0f893
--- /dev/null
+++ b/packages/svelte/tests/print/samples/svelte-component/input.svelte
@@ -0,0 +1 @@
+<svelte:component this={MyComponent} />
diff --git a/packages/svelte/tests/print/samples/svelte-component/output.svelte b/packages/svelte/tests/print/samples/svelte-component/output.svelte
new file mode 100644
index 0000000000..046ee0f893
--- /dev/null
+++ b/packages/svelte/tests/print/samples/svelte-component/output.svelte
@@ -0,0 +1 @@
+<svelte:component this={MyComponent} />
diff --git a/packages/svelte/tests/print/samples/svelte-document/input.svelte b/packages/svelte/tests/print/samples/svelte-document/input.svelte
new file mode 100644
index 0000000000..b99b973e0d
--- /dev/null
+++ b/packages/svelte/tests/print/samples/svelte-document/input.svelte
@@ -0,0 +1 @@
+<svelte:document onvisibilitychange={handleVisibilityChange} use:someAction />
diff --git a/packages/svelte/tests/print/samples/svelte-document/output.svelte b/packages/svelte/tests/print/samples/svelte-document/output.svelte
new file mode 100644
index 0000000000..418ae4e008
--- /dev/null
+++ b/packages/svelte/tests/print/samples/svelte-document/output.svelte
@@ -0,0 +1,4 @@
+<svelte:document
+	onvisibilitychange={handleVisibilityChange}
+	use:someAction
+></svelte:document>
diff --git a/packages/svelte/tests/print/samples/svelte-element/input.svelte b/packages/svelte/tests/print/samples/svelte-element/input.svelte
new file mode 100644
index 0000000000..388c5a6090
--- /dev/null
+++ b/packages/svelte/tests/print/samples/svelte-element/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	let tag = $state('hr');
+</script>
+
+<svelte:element this={tag}>
+	This text cannot appear inside an hr element
+</svelte:element>
diff --git a/packages/svelte/tests/print/samples/svelte-element/output.svelte b/packages/svelte/tests/print/samples/svelte-element/output.svelte
new file mode 100644
index 0000000000..388c5a6090
--- /dev/null
+++ b/packages/svelte/tests/print/samples/svelte-element/output.svelte
@@ -0,0 +1,7 @@
+<script>
+	let tag = $state('hr');
+</script>
+
+<svelte:element this={tag}>
+	This text cannot appear inside an hr element
+</svelte:element>
diff --git a/packages/svelte/tests/print/samples/svelte-fragment/input.svelte b/packages/svelte/tests/print/samples/svelte-fragment/input.svelte
new file mode 100644
index 0000000000..eb80023626
--- /dev/null
+++ b/packages/svelte/tests/print/samples/svelte-fragment/input.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import Widget from './Widget.svelte';
+</script>
+
+<Widget>
+	<h1 slot="header">Hello</h1>
+	<svelte:fragment slot="footer">
+		<p>All rights reserved.</p>
+		<p>Copyright (c) 2019 Svelte Industries</p>
+	</svelte:fragment>
+</Widget>
diff --git a/packages/svelte/tests/print/samples/svelte-fragment/output.svelte b/packages/svelte/tests/print/samples/svelte-fragment/output.svelte
new file mode 100644
index 0000000000..73a4451ed8
--- /dev/null
+++ b/packages/svelte/tests/print/samples/svelte-fragment/output.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import Widget from './Widget.svelte';
+</script>
+
+<Widget>
+	<h1 slot="header">Hello</h1>
+
+	<svelte:fragment slot="footer">
+		<p>All rights reserved.</p>
+		<p>Copyright (c) 2019 Svelte Industries</p>
+	</svelte:fragment>
+</Widget>
diff --git a/packages/svelte/tests/print/samples/svelte-head/input.svelte b/packages/svelte/tests/print/samples/svelte-head/input.svelte
new file mode 100644
index 0000000000..0a08871aba
--- /dev/null
+++ b/packages/svelte/tests/print/samples/svelte-head/input.svelte
@@ -0,0 +1,4 @@
+<svelte:head>
+	<title>Hello world!</title>
+	<meta name="description" content="This is where the description goes for SEO" />
+</svelte:head>
diff --git a/packages/svelte/tests/print/samples/svelte-head/output.svelte b/packages/svelte/tests/print/samples/svelte-head/output.svelte
new file mode 100644
index 0000000000..da4345d731
--- /dev/null
+++ b/packages/svelte/tests/print/samples/svelte-head/output.svelte
@@ -0,0 +1,8 @@
+<svelte:head>
+	<title>Hello world!</title>
+
+	<meta
+		name="description"
+		content="This is where the description goes for SEO"
+	/>
+</svelte:head>
diff --git a/packages/svelte/tests/print/samples/svelte-options/input.svelte b/packages/svelte/tests/print/samples/svelte-options/input.svelte
new file mode 100644
index 0000000000..70e2dda5c2
--- /dev/null
+++ b/packages/svelte/tests/print/samples/svelte-options/input.svelte
@@ -0,0 +1 @@
+<svelte:options runes={true} namespace="html" css="injected" customElement="my-custom-element" />
diff --git a/packages/svelte/tests/print/samples/svelte-options/output.svelte b/packages/svelte/tests/print/samples/svelte-options/output.svelte
new file mode 100644
index 0000000000..70e2dda5c2
--- /dev/null
+++ b/packages/svelte/tests/print/samples/svelte-options/output.svelte
@@ -0,0 +1 @@
+<svelte:options runes={true} namespace="html" css="injected" customElement="my-custom-element" />
diff --git a/packages/svelte/tests/print/samples/svelte-self/input.svelte b/packages/svelte/tests/print/samples/svelte-self/input.svelte
new file mode 100644
index 0000000000..7711defef1
--- /dev/null
+++ b/packages/svelte/tests/print/samples/svelte-self/input.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let count;
+</script>
+
+{#if count > 0}
+	<p>counting down... {count}</p>
+	<svelte:self count={count - 1} />
+{:else}
+	<p>lift-off!</p>
+{/if}
diff --git a/packages/svelte/tests/print/samples/svelte-self/output.svelte b/packages/svelte/tests/print/samples/svelte-self/output.svelte
new file mode 100644
index 0000000000..15031a39fa
--- /dev/null
+++ b/packages/svelte/tests/print/samples/svelte-self/output.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let count;
+</script>
+
+{#if count > 0}
+	<p>counting down... {count}</p>
+	<svelte:self count={count - 1}></svelte:self>
+{:else}
+	<p>lift-off!</p>
+{/if}
diff --git a/packages/svelte/tests/print/samples/svelte-window/input.svelte b/packages/svelte/tests/print/samples/svelte-window/input.svelte
new file mode 100644
index 0000000000..054e584e19
--- /dev/null
+++ b/packages/svelte/tests/print/samples/svelte-window/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	function handleKeydown(event) {
+		alert(`pressed the ${event.key} key`);
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
diff --git a/packages/svelte/tests/print/samples/svelte-window/output.svelte b/packages/svelte/tests/print/samples/svelte-window/output.svelte
new file mode 100644
index 0000000000..03997acab1
--- /dev/null
+++ b/packages/svelte/tests/print/samples/svelte-window/output.svelte
@@ -0,0 +1,7 @@
+<script>
+	function handleKeydown(event) {
+		alert(`pressed the ${event.key} key`);
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown}></svelte:window>
diff --git a/packages/svelte/tests/print/samples/text/input.svelte b/packages/svelte/tests/print/samples/text/input.svelte
new file mode 100644
index 0000000000..a04fa3c48c
--- /dev/null
+++ b/packages/svelte/tests/print/samples/text/input.svelte
@@ -0,0 +1 @@
+<p>Hello world</p>
diff --git a/packages/svelte/tests/print/samples/text/output.svelte b/packages/svelte/tests/print/samples/text/output.svelte
new file mode 100644
index 0000000000..a04fa3c48c
--- /dev/null
+++ b/packages/svelte/tests/print/samples/text/output.svelte
@@ -0,0 +1 @@
+<p>Hello world</p>
diff --git a/packages/svelte/tests/print/samples/transition-directive/input.svelte b/packages/svelte/tests/print/samples/transition-directive/input.svelte
new file mode 100644
index 0000000000..7fd08df6ef
--- /dev/null
+++ b/packages/svelte/tests/print/samples/transition-directive/input.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { fade } from 'svelte/transition';
+
+	let visible = $state(false);
+</script>
+
+<button onclick={() => visible = !visible}>toggle</button>
+
+{#if visible}
+	<div transition:fade>fades in and out</div>
+{/if}
diff --git a/packages/svelte/tests/print/samples/transition-directive/output.svelte b/packages/svelte/tests/print/samples/transition-directive/output.svelte
new file mode 100644
index 0000000000..7fd08df6ef
--- /dev/null
+++ b/packages/svelte/tests/print/samples/transition-directive/output.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { fade } from 'svelte/transition';
+
+	let visible = $state(false);
+</script>
+
+<button onclick={() => visible = !visible}>toggle</button>
+
+{#if visible}
+	<div transition:fade>fades in and out</div>
+{/if}
diff --git a/packages/svelte/tests/print/samples/use-directive/input.svelte b/packages/svelte/tests/print/samples/use-directive/input.svelte
new file mode 100644
index 0000000000..3b9f5562fb
--- /dev/null
+++ b/packages/svelte/tests/print/samples/use-directive/input.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import type { Action } from 'svelte/action';
+
+	const myaction: Action = (node, data) => {
+		// ...
+	};
+</script>
+
+<div use:myaction={data}>...</div>
diff --git a/packages/svelte/tests/print/samples/use-directive/output.svelte b/packages/svelte/tests/print/samples/use-directive/output.svelte
new file mode 100644
index 0000000000..3b9f5562fb
--- /dev/null
+++ b/packages/svelte/tests/print/samples/use-directive/output.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import type { Action } from 'svelte/action';
+
+	const myaction: Action = (node, data) => {
+		// ...
+	};
+</script>
+
+<div use:myaction={data}>...</div>
diff --git a/packages/svelte/tests/print/test.ts b/packages/svelte/tests/print/test.ts
new file mode 100644
index 0000000000..aa007a7a54
--- /dev/null
+++ b/packages/svelte/tests/print/test.ts
@@ -0,0 +1,30 @@
+import * as fs from 'node:fs';
+import { assert } from 'vitest';
+import { parse, print } from 'svelte/compiler';
+import { suite, type BaseTest } from '../suite.js';
+
+interface PrintTest extends BaseTest {}
+
+const { test, run } = suite<PrintTest>(async (config, cwd) => {
+	const input = fs.readFileSync(`${cwd}/input.svelte`, 'utf-8');
+
+	const ast = parse(input, { modern: true });
+	const output = print(ast);
+	const outputCode = output.code.endsWith('\n') ? output.code : output.code + '\n';
+
+	// run `UPDATE_SNAPSHOTS=true pnpm test print` to update print tests
+	if (process.env.UPDATE_SNAPSHOTS) {
+		fs.writeFileSync(`${cwd}/output.svelte`, outputCode);
+	} else {
+		fs.writeFileSync(`${cwd}/_actual.svelte`, outputCode);
+
+		const file = `${cwd}/output.svelte`;
+
+		const expected = fs.existsSync(file) ? fs.readFileSync(file, 'utf-8') : '';
+		assert.deepEqual(outputCode.trim().replaceAll('\r', ''), expected.trim().replaceAll('\r', ''));
+	}
+});
+
+export { test };
+
+await run(__dirname);
diff --git a/packages/svelte/tests/runtime-browser/assert.js b/packages/svelte/tests/runtime-browser/assert.js
index 249d19f809..249c5ad33d 100644
--- a/packages/svelte/tests/runtime-browser/assert.js
+++ b/packages/svelte/tests/runtime-browser/assert.js
@@ -1,5 +1,8 @@
 /** @import { assert } from 'vitest' */
 /** @import { CompileOptions, Warning } from '#compiler' */
+
+import { ELEMENT_NODE } from '#client/constants';
+
 /**
  * @param {any} a
  * @param {any} b
@@ -71,6 +74,7 @@ function normalize_html(window, html) {
 		node.innerHTML = html
 			.replace(/<!--.*?-->/g, '')
 			.replace(/>[\s\r\n]+</g, '><')
+			.replace(/svelte-\w+/g, 'svelte-xyz123')
 			.trim();
 
 		normalize_children(node);
@@ -84,15 +88,17 @@ function normalize_html(window, html) {
 /** @param {any} node */
 function normalize_children(node) {
 	// sort attributes
-	const attributes = Array.from(node.attributes).sort((a, b) => {
-		return a.name < b.name ? -1 : 1;
-	});
+	const attributes = Array.from(node.attributes).sort(
+		(/** @type {any} */ a, /** @type {any} */ b) => {
+			return a.name < b.name ? -1 : 1;
+		}
+	);
 
-	attributes.forEach((attr) => {
+	attributes.forEach((/** @type{any} */ attr) => {
 		node.removeAttribute(attr.name);
 	});
 
-	attributes.forEach((attr) => {
+	attributes.forEach((/** @type{any} */ attr) => {
 		node.setAttribute(attr.name, attr.value);
 	});
 
@@ -102,7 +108,7 @@ function normalize_children(node) {
 	}
 
 	for (let child of [...node.childNodes]) {
-		if (child.nodeType === 1 /* Element */) {
+		if (child.nodeType === ELEMENT_NODE) {
 			normalize_children(child);
 		}
 	}
@@ -119,6 +125,7 @@ function normalize_children(node) {
  *  skip_mode?: Array<'server' | 'client' | 'hydrate'>;
  *	html?: string;
  *	ssrHtml?: string;
+ *	id_prefix?: string;
  *	props?: Props;
  *	compileOptions?: Partial<CompileOptions>;
  *	test?: (args: {
@@ -159,7 +166,7 @@ export function test(args) {
 	return args;
 }
 
-// TypeScript needs the type of assertions to be directly visible, not infered, which is why
+// TypeScript needs the type of assertions to be directly visible, not inferred, which is why
 // we can't have it on the test suite type.
 /**
  * @param {any} value
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/camel-case-attribute/_config.js b/packages/svelte/tests/runtime-browser/custom-elements-samples/camel-case-attribute/_config.js
index ba3be3c25b..b9bfdd7782 100644
--- a/packages/svelte/tests/runtime-browser/custom-elements-samples/camel-case-attribute/_config.js
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/camel-case-attribute/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../assert';
 const tick = () => Promise.resolve();
 
@@ -14,8 +15,7 @@ export default test({
 		el.setAttribute('camel-case', 'universe');
 		el.setAttribute('an-array', '[3,4]');
 		el.setAttribute('camelcase2', 'Hi');
-		await tick();
-		await tick();
+		flushSync();
 		assert.htmlEqual(el.shadowRoot.innerHTML, '<h1>Hi universe!</h1> <p>3</p><p>4</p>');
 		assert.htmlEqual(
 			target.innerHTML,
@@ -25,8 +25,7 @@ export default test({
 		el.camelCase = 'galaxy';
 		el.camelCase2 = 'Hey';
 		el.anArray = [5, 6];
-		await tick();
-		await tick();
+		flushSync();
 		assert.htmlEqual(el.shadowRoot.innerHTML, '<h1>Hey galaxy!</h1> <p>5</p><p>6</p>');
 		assert.htmlEqual(
 			target.innerHTML,
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/closed-shadow-dom/_config.js b/packages/svelte/tests/runtime-browser/custom-elements-samples/closed-shadow-dom/_config.js
new file mode 100644
index 0000000000..9e09967dab
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/closed-shadow-dom/_config.js
@@ -0,0 +1,13 @@
+import { test } from '../../assert';
+const tick = () => Promise.resolve();
+
+export default test({
+	async test({ assert, target }) {
+		target.innerHTML = '<custom-element></custom-element>';
+		await tick();
+
+		const el = target.querySelector('custom-element');
+
+		assert.equal(el.shadowRoot, null);
+	}
+});
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/closed-shadow-dom/main.svelte b/packages/svelte/tests/runtime-browser/custom-elements-samples/closed-shadow-dom/main.svelte
new file mode 100644
index 0000000000..93744481b3
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/closed-shadow-dom/main.svelte
@@ -0,0 +1,3 @@
+<svelte:options customElement={{ tag: "custom-element", shadow: { mode: 'closed' } }} />
+
+<h1>Hello world!</h1>
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/custom-method/_config.js b/packages/svelte/tests/runtime-browser/custom-elements-samples/custom-method/_config.js
index dbdf006be5..4314926a94 100644
--- a/packages/svelte/tests/runtime-browser/custom-elements-samples/custom-method/_config.js
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/custom-method/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../assert';
 const tick = () => Promise.resolve();
 
@@ -8,7 +9,8 @@ export default test({
 		/** @type {any} */
 		const el = target.querySelector('custom-element');
 
-		await el.updateFoo(42);
+		el.updateFoo(42);
+		flushSync();
 
 		const p = el.shadowRoot.querySelector('p');
 		assert.equal(p.textContent, '42');
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/element-effect-context/_config.js b/packages/svelte/tests/runtime-browser/custom-elements-samples/element-effect-context/_config.js
index 3cf7a66df1..7f2ba9f331 100644
--- a/packages/svelte/tests/runtime-browser/custom-elements-samples/element-effect-context/_config.js
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/element-effect-context/_config.js
@@ -1,4 +1,5 @@
 import { test } from '../../assert';
+import { flushSync } from 'svelte';
 const tick = () => Promise.resolve();
 
 export default test({
@@ -16,7 +17,7 @@ export default test({
 		assert.equal(p.innerHTML, 'false');
 
 		button.click();
-		await tick();
+		flushSync();
 
 		assert.equal(button.innerHTML, '1');
 		assert.equal(p.innerHTML, 'false');
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/extend-with-ts/_config.js b/packages/svelte/tests/runtime-browser/custom-elements-samples/extend-with-ts/_config.js
new file mode 100644
index 0000000000..6502a08290
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/extend-with-ts/_config.js
@@ -0,0 +1,19 @@
+import { test } from '../../assert';
+const tick = () => Promise.resolve();
+
+export default test({
+	async test({ assert, target }) {
+		target.innerHTML = '<custom-element name="world"></custom-element>';
+		await tick();
+		/** @type {any} */
+		const el = target.querySelector('custom-element');
+
+		assert.htmlEqual(
+			el.shadowRoot.innerHTML,
+			`
+		<p>name: world</p>
+	`
+		);
+		assert.equal(el.test, `test`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/extend-with-ts/main.svelte b/packages/svelte/tests/runtime-browser/custom-elements-samples/extend-with-ts/main.svelte
new file mode 100644
index 0000000000..ddd2d4b61a
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/extend-with-ts/main.svelte
@@ -0,0 +1,14 @@
+<svelte:options customElement={{
+	tag: "custom-element",
+	extend: (customClass)=>{
+		return class extends customClass{
+			public test: string = "test";
+		}
+	},
+}}/>
+
+<script lang="ts">
+	let { name } = $props();
+</script>
+
+<p>name: {name}</p>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune-access-injected-css/_config.js b/packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune-access-injected-css/_config.js
new file mode 100644
index 0000000000..99a223492b
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune-access-injected-css/_config.js
@@ -0,0 +1,21 @@
+import { test } from '../../assert';
+const tick = () => Promise.resolve();
+
+export default test({
+	async test({ assert, target }) {
+		target.innerHTML = '<custom-element></custom-element>';
+		/** @type {any} */
+		const el = target.querySelector('custom-element');
+
+		/** @type {string} */
+		let html = '';
+		const handle_evt = (e) => (html = e.detail);
+		el.addEventListener('html', handle_evt);
+
+		await tick();
+		await tick();
+		await tick();
+
+		assert.ok(html.includes('<style'));
+	}
+});
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune-access-injected-css/main.svelte b/packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune-access-injected-css/main.svelte
new file mode 100644
index 0000000000..ad8027f4d2
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune-access-injected-css/main.svelte
@@ -0,0 +1,16 @@
+<svelte:options css="injected" customElement="custom-element"/>
+
+<script lang="ts">
+  $effect(() => {
+    $host().dispatchEvent(new CustomEvent("html", { detail: $host().shadowRoot?.innerHTML }));
+  })
+</script>
+
+<button class="btn">btn</button>
+
+<style >
+  .btn {
+    width: 123px;
+    height: 123px;
+  }
+</style>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/shadow-root-init-options/_config.js b/packages/svelte/tests/runtime-browser/custom-elements-samples/shadow-root-init-options/_config.js
new file mode 100644
index 0000000000..106d27929e
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/shadow-root-init-options/_config.js
@@ -0,0 +1,18 @@
+import { test } from '../../assert';
+const tick = () => Promise.resolve();
+
+export default test({
+	async test({ assert, target }) {
+		target.innerHTML = '<custom-element></custom-element>';
+		await tick();
+
+		/** @type {ShadowRoot} */
+		const shadowRoot = target.querySelector('custom-element').shadowRoot;
+
+		assert.equal(shadowRoot.mode, 'open');
+		assert.equal(shadowRoot.clonable, true);
+		assert.equal(shadowRoot.delegatesFocus, true);
+		assert.equal(shadowRoot.serializable, true);
+		assert.equal(shadowRoot.slotAssignment, 'manual');
+	}
+});
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/shadow-root-init-options/main.svelte b/packages/svelte/tests/runtime-browser/custom-elements-samples/shadow-root-init-options/main.svelte
new file mode 100644
index 0000000000..25d69d7ef9
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/shadow-root-init-options/main.svelte
@@ -0,0 +1,14 @@
+<svelte:options
+	customElement={{
+		tag: 'custom-element',
+		shadow: {
+			mode: 'open',
+			clonable: true,
+			delegatesFocus: true,
+			serializable: true,
+			slotAssignment: 'manual',
+		},
+	}}
+/>
+
+<h1>Hello world!</h1>
diff --git a/packages/svelte/tests/runtime-browser/driver-ssr.js b/packages/svelte/tests/runtime-browser/driver-ssr.js
index f5f15b6493..35aaca3ad3 100644
--- a/packages/svelte/tests/runtime-browser/driver-ssr.js
+++ b/packages/svelte/tests/runtime-browser/driver-ssr.js
@@ -6,5 +6,9 @@ import config from '__CONFIG__';
 import { render } from 'svelte/server';
 
 export default function () {
-	return render(SvelteComponent, { props: config.props || {} });
+	const { head, body, html } = render(SvelteComponent, {
+		props: config.props || {},
+		idPrefix: config?.id_prefix
+	});
+	return { head, body, html };
 }
diff --git a/packages/svelte/tests/runtime-browser/samples/css-props-dynamic-component/A.svelte b/packages/svelte/tests/runtime-browser/samples/css-props-dynamic-component/A.svelte
new file mode 100644
index 0000000000..694b26f231
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/samples/css-props-dynamic-component/A.svelte
@@ -0,0 +1,7 @@
+<div>a</div>
+
+<style>
+	div{
+		color: var(--prop);
+	}
+</style>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-browser/samples/css-props-dynamic-component/B.svelte b/packages/svelte/tests/runtime-browser/samples/css-props-dynamic-component/B.svelte
new file mode 100644
index 0000000000..06f28c4f75
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/samples/css-props-dynamic-component/B.svelte
@@ -0,0 +1,7 @@
+<div>b</div>
+
+<style>
+	div{
+		color: var(--prop);
+	}
+</style>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-browser/samples/css-props-dynamic-component/_config.js b/packages/svelte/tests/runtime-browser/samples/css-props-dynamic-component/_config.js
new file mode 100644
index 0000000000..7629633835
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/samples/css-props-dynamic-component/_config.js
@@ -0,0 +1,16 @@
+import { test } from '../../assert';
+import { flushSync } from 'svelte';
+
+export default test({
+	warnings: [],
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+		let div = /** @type {HTMLElement} */ (target.querySelector('div'));
+		assert.equal(getComputedStyle(div).color, 'rgb(255, 0, 0)');
+		flushSync(() => {
+			btn?.click();
+		});
+		div = /** @type {HTMLElement} */ (target.querySelector('div'));
+		assert.equal(getComputedStyle(div).color, 'rgb(255, 0, 0)');
+	}
+});
diff --git a/packages/svelte/tests/runtime-browser/samples/css-props-dynamic-component/main.svelte b/packages/svelte/tests/runtime-browser/samples/css-props-dynamic-component/main.svelte
new file mode 100644
index 0000000000..055ce57da5
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/samples/css-props-dynamic-component/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import A from "./B.svelte";
+	import B from "./A.svelte";
+	let value = $state(0);
+
+	let Comp = $derived(value % 2 === 0 ? A : B);
+</script>
+
+<button onclick={()=>value++}>click</button>
+
+<Comp --prop="red"/>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-browser/samples/dom-clobbering-cache-symbols-spread/_config.js b/packages/svelte/tests/runtime-browser/samples/dom-clobbering-cache-symbols-spread/_config.js
new file mode 100644
index 0000000000..62248851db
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/samples/dom-clobbering-cache-symbols-spread/_config.js
@@ -0,0 +1,23 @@
+import { assert_ok, test } from '../../assert';
+
+export default test({
+	async test({ assert, target, waitUntil, window }) {
+		const form = target.querySelector('form');
+		const button = target.querySelector('button');
+		const [i1, i2, i3] = target.querySelectorAll('input');
+		assert_ok(form);
+		assert_ok(button);
+
+		assert.equal(form.id, 'initial-form');
+		assert.equal(form.className, 'first');
+		assert.equal(window.getComputedStyle(form).backgroundColor, 'rgb(255, 0, 0)');
+
+		button.click();
+		await waitUntil(() => form.id === 'updated-form');
+
+		assert.equal(form.id, 'updated-form');
+		assert.equal(form.className, 'second');
+		assert.equal(i3.id, '', 'input clobbered form');
+		assert.equal(window.getComputedStyle(form).backgroundColor, 'rgb(0, 0, 255)');
+	}
+});
diff --git a/packages/svelte/tests/runtime-browser/samples/dom-clobbering-cache-symbols-spread/main.svelte b/packages/svelte/tests/runtime-browser/samples/dom-clobbering-cache-symbols-spread/main.svelte
new file mode 100644
index 0000000000..60e9b80e81
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/samples/dom-clobbering-cache-symbols-spread/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	let form_attributes = $state({ id: 'initial-form' });
+	let class_name = $state('first');
+	let background_color = $state('rgb(255, 0, 0)');
+
+	function update() {
+		form_attributes = { id: 'updated-form' };
+		class_name = 'second';
+		background_color = 'rgb(0, 0, 255)';
+	}
+</script>
+
+<button onclick={update}>update</button>
+
+<form {...form_attributes} class={class_name} style:background-color={background_color}>
+	<!-- the once non-symbol-ified hidden properties we used -->
+	<input {...{ name: '__className' }} value="x" />
+	<input {...{ name: '__style' }} value="y" />
+	<input {...{ name: '__attributes' }} value="z" />
+</form>
diff --git a/packages/svelte/tests/runtime-browser/samples/head-scripts/_config.js b/packages/svelte/tests/runtime-browser/samples/head-scripts/_config.js
index 3ff1bf7286..4f0e53925b 100644
--- a/packages/svelte/tests/runtime-browser/samples/head-scripts/_config.js
+++ b/packages/svelte/tests/runtime-browser/samples/head-scripts/_config.js
@@ -4,7 +4,7 @@ export default test({
 	mode: ['client'],
 	async test({ assert, window }) {
 		// wait the script to load (maybe there a better way)
-		await new Promise((resolve) => setTimeout(resolve, 1));
+		await new Promise((resolve) => setTimeout(resolve, 100));
 		assert.htmlEqual(
 			window.document.body.innerHTML,
 			`<main><b id="r1">1</b><b id="r2">2</b><b id="r3">3</b></main>`
diff --git a/packages/svelte/tests/runtime-browser/samples/hydrate-large-text-node/_config.js b/packages/svelte/tests/runtime-browser/samples/hydrate-large-text-node/_config.js
new file mode 100644
index 0000000000..3a52b1ccd3
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/samples/hydrate-large-text-node/_config.js
@@ -0,0 +1,24 @@
+import { test } from '../../assert';
+
+// Browsers split text nodes > 65536 characters into multiple consecutive text nodes
+// during HTML parsing. This test verifies that hydration correctly merges them.
+const LARGE_TEXT = 'x'.repeat(70000);
+
+export default test({
+	mode: ['hydrate'],
+	skip_mode: ['client'],
+
+	props: {
+		text: LARGE_TEXT
+	},
+
+	async test({ assert, target }) {
+		const [p] = target.querySelectorAll('p');
+
+		// The text content should be preserved after hydration
+		assert.equal(p.textContent?.trim(), LARGE_TEXT);
+		// After hydration, there should be only one text node (plus possible comment nodes)
+		const textNodes = [...p.childNodes].filter((node) => node.nodeType === 3);
+		assert.equal(textNodes.length, 1, `Expected 1 text node, got ${textNodes.length}`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-browser/samples/hydrate-large-text-node/main.svelte b/packages/svelte/tests/runtime-browser/samples/hydrate-large-text-node/main.svelte
new file mode 100644
index 0000000000..d65358dabc
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/samples/hydrate-large-text-node/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	let { text } = $props();
+</script>
+
+<p>{text}</p>
diff --git a/packages/svelte/tests/runtime-browser/test-ssr.ts b/packages/svelte/tests/runtime-browser/test-ssr.ts
index 2ff1659f80..6987fac915 100644
--- a/packages/svelte/tests/runtime-browser/test-ssr.ts
+++ b/packages/svelte/tests/runtime-browser/test-ssr.ts
@@ -20,7 +20,7 @@ export async function run_ssr_test(
 		await compile_directory(test_dir, 'server', config.compileOptions);
 
 		const Component = (await import(`${test_dir}/_output/server/main.svelte.js`)).default;
-		const { body } = render(Component, { props: config.props || {} });
+		const { body } = render(Component, { props: config.props || {}, idPrefix: config.id_prefix });
 
 		fs.writeFileSync(`${test_dir}/_output/rendered.html`, body);
 
diff --git a/packages/svelte/tests/runtime-browser/test.ts b/packages/svelte/tests/runtime-browser/test.ts
index 582a10edf7..22e8ad6489 100644
--- a/packages/svelte/tests/runtime-browser/test.ts
+++ b/packages/svelte/tests/runtime-browser/test.ts
@@ -5,7 +5,7 @@ import * as path from 'node:path';
 import { compile } from 'svelte/compiler';
 import { afterAll, assert, beforeAll, describe } from 'vitest';
 import { suite, suite_with_variants } from '../suite';
-import { write } from '../helpers';
+import { write, fragments } from '../helpers';
 import type { Warning } from '#compiler';
 
 const assert_file = path.resolve(__dirname, 'assert.js');
@@ -42,9 +42,9 @@ const { run: run_browser_tests } = suite_with_variants<
 
 describe.concurrent(
 	'runtime-browser',
-	() => run_browser_tests(__dirname),
 	// Browser tests are brittle and slow on CI
-	{ timeout: 20000, retry: process.env.CI ? 1 : 0 }
+	{ timeout: 20000, retry: process.env.CI ? 1 : 0 },
+	() => run_browser_tests(__dirname)
 );
 
 const { run: run_ce_tests } = suite<ReturnType<typeof import('./assert').test>>(
@@ -55,9 +55,9 @@ const { run: run_ce_tests } = suite<ReturnType<typeof import('./assert').test>>(
 
 describe.concurrent(
 	'custom-elements',
-	() => run_ce_tests(__dirname, 'custom-elements-samples'),
 	// Browser tests are brittle and slow on CI
-	{ timeout: 20000, retry: process.env.CI ? 1 : 0 }
+	{ timeout: 20000, retry: process.env.CI ? 1 : 0 },
+	() => run_ce_tests(__dirname, 'custom-elements-samples')
 );
 
 async function run_test(
@@ -87,6 +87,7 @@ async function run_test(
 					build.onLoad({ filter: /\.svelte$/ }, (args) => {
 						const compiled = compile(fs.readFileSync(args.path, 'utf-8').replace(/\r/g, ''), {
 							generate: 'client',
+							fragments,
 							...config.compileOptions,
 							immutable: config.immutable,
 							customElement: test_dir.includes('custom-elements-samples'),
@@ -163,6 +164,7 @@ async function run_test(
 				}
 			],
 			bundle: true,
+			platform: 'node',
 			format: 'iife',
 			globalName: 'test_ssr'
 		});
@@ -195,6 +197,7 @@ async function run_test(
 		const page = await browser.newPage();
 		page.on('console', (message) => {
 			let method = message.type();
+			// @ts-ignore
 			if (method === 'warning') method = 'warn';
 			// @ts-ignore
 			console[method](message.text());
@@ -210,7 +213,7 @@ async function run_test(
 		}
 
 		// uncomment to see what was generated
-		// fs.writeFileSync(`${test_dir}/_actual.js`, build_result.outputFiles[0].text);
+		// fs.writeFileSync(`${test_dir}/_output/bundle-${hydrate}.js`, build_result.outputFiles[0].text);
 		const test_result = await page.evaluate(
 			build_result.outputFiles[0].text + ";test.default(document.querySelector('main'))"
 		);
diff --git a/packages/svelte/tests/runtime-legacy/samples/action-custom-event-handler-in-each-destructured/_config.js b/packages/svelte/tests/runtime-legacy/samples/action-custom-event-handler-in-each-destructured/_config.js
index 650d0ec360..fe13d43bc8 100644
--- a/packages/svelte/tests/runtime-legacy/samples/action-custom-event-handler-in-each-destructured/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/action-custom-event-handler-in-each-destructured/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
@@ -10,12 +11,13 @@ export default test({
 		<p>second: </p>
 	`,
 
-	async test({ assert, component, target, window }) {
+	test({ assert, component, target, window }) {
 		const event = new window.MouseEvent('click');
 
 		const buttons = target.querySelectorAll('button');
 
-		await buttons[1].dispatchEvent(event);
+		buttons[1].dispatchEvent(event);
+		flushSync();
 
 		assert.htmlEqual(
 			target.innerHTML,
diff --git a/packages/svelte/tests/runtime-legacy/samples/action-custom-event-handler-in-each/_config.js b/packages/svelte/tests/runtime-legacy/samples/action-custom-event-handler-in-each/_config.js
index 21fb167873..83b14cb8a3 100644
--- a/packages/svelte/tests/runtime-legacy/samples/action-custom-event-handler-in-each/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/action-custom-event-handler-in-each/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
@@ -10,12 +11,13 @@ export default test({
 		<p>fromState: </p>
 	`,
 
-	async test({ assert, component, target, window }) {
+	test({ assert, component, target, window }) {
 		const event = new window.MouseEvent('click');
 
 		const buttons = target.querySelectorAll('button');
 
-		await buttons[1].dispatchEvent(event);
+		buttons[1].dispatchEvent(event);
+		flushSync();
 
 		assert.htmlEqual(
 			target.innerHTML,
diff --git a/packages/svelte/tests/runtime-legacy/samples/action-custom-event-handler-node-context/_config.js b/packages/svelte/tests/runtime-legacy/samples/action-custom-event-handler-node-context/_config.js
index a2edd90f8b..9276ca8a59 100644
--- a/packages/svelte/tests/runtime-legacy/samples/action-custom-event-handler-node-context/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/action-custom-event-handler-node-context/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { ok, test } from '../../test';
 
 export default test({
@@ -5,13 +6,14 @@ export default test({
 
 	html: '<button>10</button>',
 
-	async test({ assert, target, window }) {
+	test({ assert, target, window }) {
 		const event = new window.MouseEvent('click');
 
 		const button = target.querySelector('button');
 		ok(button);
 
-		await button.dispatchEvent(event);
+		button.dispatchEvent(event);
+		flushSync();
 
 		assert.htmlEqual(target.innerHTML, '<button>11</button>');
 	}
diff --git a/packages/svelte/tests/runtime-legacy/samples/action-custom-event-handler-with-context/_config.js b/packages/svelte/tests/runtime-legacy/samples/action-custom-event-handler-with-context/_config.js
index c4d84fc2b3..2e6aa4dfee 100644
--- a/packages/svelte/tests/runtime-legacy/samples/action-custom-event-handler-with-context/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/action-custom-event-handler-with-context/_config.js
@@ -1,9 +1,10 @@
+import { flushSync } from 'svelte';
 import { ok, test } from '../../test';
 
 export default test({
 	html: '<button>???</button>',
 
-	async test({ assert, target, window }) {
+	test({ assert, target, window }) {
 		const event = new window.MouseEvent('click', {
 			clientX: 42,
 			clientY: 42
@@ -12,7 +13,8 @@ export default test({
 		const button = target.querySelector('button');
 		ok(button);
 
-		await button.dispatchEvent(event);
+		button.dispatchEvent(event);
+		flushSync();
 
 		assert.htmlEqual(target.innerHTML, '<button>42</button>');
 	}
diff --git a/packages/svelte/tests/runtime-legacy/samples/action-custom-event-handler/_config.js b/packages/svelte/tests/runtime-legacy/samples/action-custom-event-handler/_config.js
index 279171692d..3769a8bd81 100644
--- a/packages/svelte/tests/runtime-legacy/samples/action-custom-event-handler/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/action-custom-event-handler/_config.js
@@ -1,9 +1,10 @@
+import { flushSync } from 'svelte';
 import { ok, test } from '../../test';
 
 export default test({
 	html: '<button>0, 0</button>',
 
-	async test({ assert, target, window }) {
+	test({ assert, target, window }) {
 		const event = new window.MouseEvent('click', {
 			clientX: 42,
 			clientY: 42
@@ -12,7 +13,8 @@ export default test({
 		const button = target.querySelector('button');
 		ok(button);
 
-		await button.dispatchEvent(event);
+		button.dispatchEvent(event);
+		flushSync();
 
 		assert.htmlEqual(target.innerHTML, '<button>42, 42</button>');
 	}
diff --git a/packages/svelte/tests/runtime-legacy/samples/action-this/_config.js b/packages/svelte/tests/runtime-legacy/samples/action-this/_config.js
index d296fc5a28..0ab9305ade 100644
--- a/packages/svelte/tests/runtime-legacy/samples/action-this/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/action-this/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { ok, test } from '../../test';
 
 export default test({
@@ -8,7 +9,8 @@ export default test({
 		const click = new window.MouseEvent('click');
 
 		assert.htmlEqual(target.innerHTML, '<button>1</button>');
-		await button.dispatchEvent(click);
+		button.dispatchEvent(click);
+		flushSync();
 		assert.htmlEqual(target.innerHTML, '<button>2</button>');
 	}
 });
diff --git a/packages/svelte/tests/runtime-legacy/samples/after-render-prevents-loop/_config.js b/packages/svelte/tests/runtime-legacy/samples/after-render-prevents-loop/_config.js
index 39c0ef7f53..7a0943c3f4 100644
--- a/packages/svelte/tests/runtime-legacy/samples/after-render-prevents-loop/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/after-render-prevents-loop/_config.js
@@ -1,7 +1,7 @@
 import { test } from '../../test';
 
 export default test({
-	skip_mode: ['server'],
+	skip_mode: ['server', 'async-server'],
 
 	get props() {
 		return { value: 'hello!' };
diff --git a/packages/svelte/tests/runtime-legacy/samples/after-render-triggers-update/_config.js b/packages/svelte/tests/runtime-legacy/samples/after-render-triggers-update/_config.js
index 39c0ef7f53..7a0943c3f4 100644
--- a/packages/svelte/tests/runtime-legacy/samples/after-render-triggers-update/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/after-render-triggers-update/_config.js
@@ -1,7 +1,7 @@
 import { test } from '../../test';
 
 export default test({
-	skip_mode: ['server'],
+	skip_mode: ['server', 'async-server'],
 
 	get props() {
 		return { value: 'hello!' };
diff --git a/packages/svelte/tests/runtime-legacy/samples/animation-css/_config.js b/packages/svelte/tests/runtime-legacy/samples/animation-css/_config.js
index b6b601a96b..b6bd818e65 100644
--- a/packages/svelte/tests/runtime-legacy/samples/animation-css/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/animation-css/_config.js
@@ -47,6 +47,8 @@ export default test({
 			{ id: 1, name: 'a' }
 		];
 
+		raf.tick(0);
+
 		divs = target.querySelectorAll('div');
 		assert.ok(divs[0].getAnimations().length > 0);
 		assert.equal(divs[1].getAnimations().length, 0);
diff --git a/packages/svelte/tests/runtime-legacy/samples/animation-js-easing/_config.js b/packages/svelte/tests/runtime-legacy/samples/animation-js-easing/_config.js
index 5b7ed1c732..f4a3554b29 100644
--- a/packages/svelte/tests/runtime-legacy/samples/animation-js-easing/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/animation-js-easing/_config.js
@@ -46,6 +46,8 @@ export default test({
 			{ id: 1, name: 'a' }
 		];
 
+		raf.tick(0);
+
 		divs = document.querySelectorAll('div');
 		assert.equal(divs[0].dy, 120);
 		assert.equal(divs[4].dy, -120);
diff --git a/packages/svelte/tests/runtime-legacy/samples/animation-js/_config.js b/packages/svelte/tests/runtime-legacy/samples/animation-js/_config.js
index 3606f7d17b..a2e17b49f8 100644
--- a/packages/svelte/tests/runtime-legacy/samples/animation-js/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/animation-js/_config.js
@@ -46,6 +46,8 @@ export default test({
 			{ id: 1, name: 'a' }
 		];
 
+		raf.tick(0);
+
 		divs = document.querySelectorAll('div');
 		assert.equal(divs[0].dy, 120);
 		assert.equal(divs[4].dy, -120);
@@ -66,6 +68,8 @@ export default test({
 			{ id: 5, name: 'e' }
 		];
 
+		raf.tick(100);
+
 		divs = document.querySelectorAll('div');
 
 		assert.equal(divs[0].dy, 120);
diff --git a/packages/svelte/tests/runtime-legacy/samples/attachment-in-mutated-state/_config.js b/packages/svelte/tests/runtime-legacy/samples/attachment-in-mutated-state/_config.js
new file mode 100644
index 0000000000..5d37252358
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/attachment-in-mutated-state/_config.js
@@ -0,0 +1,16 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, logs }) {
+		assert.deepEqual(logs, ['up']);
+
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+		assert.deepEqual(logs, ['up']);
+
+		flushSync(() => button?.click());
+		assert.deepEqual(logs, ['up', 'down']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/attachment-in-mutated-state/main.svelte b/packages/svelte/tests/runtime-legacy/samples/attachment-in-mutated-state/main.svelte
new file mode 100644
index 0000000000..fbec108c7a
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/attachment-in-mutated-state/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	let state = {
+		count: 0,
+		attachment(){
+			console.log('up');
+			return () => console.log('down');
+		}
+	};
+</script>
+
+<button onclick={() => state.count++}>{state.count}</button>
+
+{#if state.count < 2}
+	<div {@attach state.attachment}></div>
+{/if}
diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-after-property/_config.js b/packages/svelte/tests/runtime-legacy/samples/attribute-after-property/_config.js
new file mode 100644
index 0000000000..f6a98b1797
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/attribute-after-property/_config.js
@@ -0,0 +1,19 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ target, assert }) {
+		const input = target.querySelector('input');
+		const button = target.querySelector('button');
+
+		assert.equal(input?.step, 'any');
+
+		button?.click();
+		flushSync();
+		assert.equal(input?.step, '10');
+
+		button?.click();
+		flushSync();
+		assert.equal(input?.step, 'any');
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-after-property/main.svelte b/packages/svelte/tests/runtime-legacy/samples/attribute-after-property/main.svelte
new file mode 100644
index 0000000000..2921e4e241
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/attribute-after-property/main.svelte
@@ -0,0 +1,6 @@
+<script>
+    let step = "any";
+</script>
+
+<input type="range" {...{step}} />
+<button onclick={() => step = step === "any" ? 10 : "any"}>change step</button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-boolean-inert/_config.js b/packages/svelte/tests/runtime-legacy/samples/attribute-boolean-inert/_config.js
index 1322d63b7a..26fbbc955b 100644
--- a/packages/svelte/tests/runtime-legacy/samples/attribute-boolean-inert/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/attribute-boolean-inert/_config.js
@@ -1,14 +1,21 @@
-import { ok, test } from '../../test';
+import { test } from '../../test';
 
 export default test({
+	ssrHtml: `
+		<div></div>
+		<div inert="">some div <button>click</button></div>
+	`,
+
 	get props() {
 		return { inert: true };
 	},
+
 	test({ assert, target, component }) {
-		const div = target.querySelector('div');
-		ok(div);
-		assert.ok(div.inert);
+		const [div1, div2] = target.querySelectorAll('div');
+		assert.ok(!div1.inert);
+		assert.ok(div2.inert);
+
 		component.inert = false;
-		assert.ok(!div.inert);
+		assert.ok(!div2.inert);
 	}
 });
diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-boolean-inert/main.svelte b/packages/svelte/tests/runtime-legacy/samples/attribute-boolean-inert/main.svelte
index 6c3df7e31e..3b97923713 100644
--- a/packages/svelte/tests/runtime-legacy/samples/attribute-boolean-inert/main.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/attribute-boolean-inert/main.svelte
@@ -2,4 +2,5 @@
 export let inert;
 </script>
 
+<div inert={false}></div>
 <div {inert}>some div <button>click</button></div>
diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-null-classname-no-style/_config.js b/packages/svelte/tests/runtime-legacy/samples/attribute-null-classname-no-style/_config.js
index a7518f7e6c..b2f0396181 100644
--- a/packages/svelte/tests/runtime-legacy/samples/attribute-null-classname-no-style/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/attribute-null-classname-no-style/_config.js
@@ -40,7 +40,7 @@ export default test({
 		assert.equal(div.className, 'true');
 
 		component.testName = {};
-		assert.equal(div.className, '[object Object]');
+		assert.equal(div.className, '');
 
 		component.testName = '';
 		assert.equal(div.className, '');
diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-null-classname-with-style/_config.js b/packages/svelte/tests/runtime-legacy/samples/attribute-null-classname-with-style/_config.js
index dbab9fd42b..1fc15c7eda 100644
--- a/packages/svelte/tests/runtime-legacy/samples/attribute-null-classname-with-style/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/attribute-null-classname-with-style/_config.js
@@ -1,43 +1,43 @@
 import { ok, test } from '../../test';
 
 export default test({
-	html: '<div class=" svelte-x1o6ra"></div>',
+	html: '<div class="svelte-70s021"></div>',
 
 	test({ assert, component, target }) {
 		const div = target.querySelector('div');
 		ok(div);
 
 		component.testName = null;
-		assert.equal(div.className, ' svelte-x1o6ra');
+		assert.equal(div.className, 'svelte-70s021');
 
 		component.testName = undefined;
-		assert.equal(div.className, ' svelte-x1o6ra');
+		assert.equal(div.className, 'svelte-70s021');
 
 		component.testName = undefined + '';
-		assert.equal(div.className, 'undefined svelte-x1o6ra');
+		assert.equal(div.className, 'undefined svelte-70s021');
 
 		component.testName = null + '';
-		assert.equal(div.className, 'null svelte-x1o6ra');
+		assert.equal(div.className, 'null svelte-70s021');
 
 		component.testName = 1;
-		assert.equal(div.className, '1 svelte-x1o6ra');
+		assert.equal(div.className, '1 svelte-70s021');
 
 		component.testName = 0;
-		assert.equal(div.className, '0 svelte-x1o6ra');
+		assert.equal(div.className, '0 svelte-70s021');
 
 		component.testName = false;
-		assert.equal(div.className, 'false svelte-x1o6ra');
+		assert.equal(div.className, 'false svelte-70s021');
 
 		component.testName = true;
-		assert.equal(div.className, 'true svelte-x1o6ra');
+		assert.equal(div.className, 'true svelte-70s021');
 
 		component.testName = {};
-		assert.equal(div.className, '[object Object] svelte-x1o6ra');
+		assert.equal(div.className, 'svelte-70s021');
 
 		component.testName = '';
-		assert.equal(div.className, ' svelte-x1o6ra');
+		assert.equal(div.className, 'svelte-70s021');
 
 		component.testName = 'testClassName';
-		assert.equal(div.className, 'testClassName svelte-x1o6ra');
+		assert.equal(div.className, 'testClassName svelte-70s021');
 	}
 });
diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-null-classnames-with-style/_config.js b/packages/svelte/tests/runtime-legacy/samples/attribute-null-classnames-with-style/_config.js
index d2511a4403..2f4b6242cb 100644
--- a/packages/svelte/tests/runtime-legacy/samples/attribute-null-classnames-with-style/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/attribute-null-classnames-with-style/_config.js
@@ -10,43 +10,43 @@ export default test({
 		};
 	},
 
-	html: '<div class="test1test2 svelte-x1o6ra"></div>',
+	html: '<div class="test1test2 svelte-70s021"></div>',
 
 	test({ assert, component, target }) {
 		const div = target.querySelector('div');
 		ok(div);
-		assert.equal(div.className, 'test1test2 svelte-x1o6ra');
+		assert.equal(div.className, 'test1test2 svelte-70s021');
 
 		component.testName1 = null;
 		component.testName2 = null;
-		assert.equal(div.className, '0 svelte-x1o6ra');
+		assert.equal(div.className, '0 svelte-70s021');
 
 		component.testName1 = null;
 		component.testName2 = 'test';
-		assert.equal(div.className, 'nulltest svelte-x1o6ra');
+		assert.equal(div.className, 'nulltest svelte-70s021');
 
 		component.testName1 = undefined;
 		component.testName2 = 'test';
-		assert.equal(div.className, 'undefinedtest svelte-x1o6ra');
+		assert.equal(div.className, 'undefinedtest svelte-70s021');
 
 		component.testName1 = undefined;
 		component.testName2 = undefined;
-		assert.equal(div.className, 'NaN svelte-x1o6ra');
+		assert.equal(div.className, 'NaN svelte-70s021');
 
 		component.testName1 = null;
 		component.testName2 = 1;
-		assert.equal(div.className, '1 svelte-x1o6ra');
+		assert.equal(div.className, '1 svelte-70s021');
 
 		component.testName1 = undefined;
 		component.testName2 = 1;
-		assert.equal(div.className, 'NaN svelte-x1o6ra');
+		assert.equal(div.className, 'NaN svelte-70s021');
 
 		component.testName1 = null;
 		component.testName2 = 0;
-		assert.equal(div.className, '0 svelte-x1o6ra');
+		assert.equal(div.className, '0 svelte-70s021');
 
 		component.testName1 = undefined;
 		component.testName2 = 0;
-		assert.equal(div.className, 'NaN svelte-x1o6ra');
+		assert.equal(div.className, 'NaN svelte-70s021');
 	}
 });
diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classname-no-style/_config.js b/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classname-no-style/_config.js
index a7518f7e6c..b2f0396181 100644
--- a/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classname-no-style/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classname-no-style/_config.js
@@ -40,7 +40,7 @@ export default test({
 		assert.equal(div.className, 'true');
 
 		component.testName = {};
-		assert.equal(div.className, '[object Object]');
+		assert.equal(div.className, '');
 
 		component.testName = '';
 		assert.equal(div.className, '');
diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classname-with-style/_config.js b/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classname-with-style/_config.js
index 20426dcf4b..b06103992f 100644
--- a/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classname-with-style/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classname-with-style/_config.js
@@ -8,41 +8,41 @@ export default test({
 		};
 	},
 
-	html: '<div class="testClassName svelte-x1o6ra"></div>',
+	html: '<div class="testClassName svelte-70s021"></div>',
 
 	test({ assert, component, target }) {
 		const div = target.querySelector('div');
 		ok(div);
-		assert.equal(div.className, 'testClassName svelte-x1o6ra');
+		assert.equal(div.className, 'testClassName svelte-70s021');
 
 		component.testName = null;
-		assert.equal(div.className, ' svelte-x1o6ra');
+		assert.equal(div.className, 'svelte-70s021');
 
 		component.testName = undefined;
-		assert.equal(div.className, ' svelte-x1o6ra');
+		assert.equal(div.className, 'svelte-70s021');
 
 		component.testName = undefined + '';
-		assert.equal(div.className, 'undefined svelte-x1o6ra');
+		assert.equal(div.className, 'undefined svelte-70s021');
 
 		component.testName = null + '';
-		assert.equal(div.className, 'null svelte-x1o6ra');
+		assert.equal(div.className, 'null svelte-70s021');
 
 		component.testName = 1;
-		assert.equal(div.className, '1 svelte-x1o6ra');
+		assert.equal(div.className, '1 svelte-70s021');
 
 		component.testName = 0;
-		assert.equal(div.className, '0 svelte-x1o6ra');
+		assert.equal(div.className, '0 svelte-70s021');
 
 		component.testName = false;
-		assert.equal(div.className, 'false svelte-x1o6ra');
+		assert.equal(div.className, 'false svelte-70s021');
 
 		component.testName = true;
-		assert.equal(div.className, 'true svelte-x1o6ra');
+		assert.equal(div.className, 'true svelte-70s021');
 
 		component.testName = {};
-		assert.equal(div.className, '[object Object] svelte-x1o6ra');
+		assert.equal(div.className, 'svelte-70s021');
 
 		component.testName = '';
-		assert.equal(div.className, ' svelte-x1o6ra');
+		assert.equal(div.className, 'svelte-70s021');
 	}
 });
diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classnames-with-style/_config.js b/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classnames-with-style/_config.js
index d55a0079c0..7fc3dd85f4 100644
--- a/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classnames-with-style/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classnames-with-style/_config.js
@@ -10,43 +10,43 @@ export default test({
 		};
 	},
 
-	html: '<div class="test1test2 svelte-x1o6ra"></div>',
+	html: '<div class="test1test2 svelte-70s021"></div>',
 
 	async test({ assert, component, target }) {
 		const div = target.querySelector('div');
 		ok(div);
-		assert.equal(div.className, 'test1test2 svelte-x1o6ra');
+		assert.equal(div.className, 'test1test2 svelte-70s021');
 
 		component.testName1 = null;
 		component.testName2 = null;
-		assert.equal(div.className, '0 svelte-x1o6ra');
+		assert.equal(div.className, '0 svelte-70s021');
 
 		component.testName1 = null;
 		component.testName2 = 'test';
-		assert.equal(div.className, 'nulltest svelte-x1o6ra');
+		assert.equal(div.className, 'nulltest svelte-70s021');
 
 		component.testName1 = undefined;
 		component.testName2 = 'test';
-		assert.equal(div.className, 'undefinedtest svelte-x1o6ra');
+		assert.equal(div.className, 'undefinedtest svelte-70s021');
 
 		component.testName1 = undefined;
 		component.testName2 = undefined;
-		assert.equal(div.className, 'NaN svelte-x1o6ra');
+		assert.equal(div.className, 'NaN svelte-70s021');
 
 		component.testName1 = null;
 		component.testName2 = 1;
-		assert.equal(div.className, '1 svelte-x1o6ra');
+		assert.equal(div.className, '1 svelte-70s021');
 
 		component.testName1 = undefined;
 		component.testName2 = 1;
-		assert.equal(div.className, 'NaN svelte-x1o6ra');
+		assert.equal(div.className, 'NaN svelte-70s021');
 
 		component.testName1 = null;
 		component.testName2 = 0;
-		assert.equal(div.className, '0 svelte-x1o6ra');
+		assert.equal(div.className, '0 svelte-70s021');
 
 		component.testName1 = undefined;
 		component.testName2 = 0;
-		assert.equal(div.className, 'NaN svelte-x1o6ra');
+		assert.equal(div.className, 'NaN svelte-70s021');
 	}
 });
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-mutate-array/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-mutate-array/_config.js
index 67ea2cb0a3..70268a0e1d 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-mutate-array/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-mutate-array/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
@@ -11,7 +12,9 @@ export default test({
 		const [b1] = target.querySelectorAll('button');
 
 		b1.click();
-		await Promise.resolve();
+		Promise.resolve();
+		flushSync();
+
 		assert.htmlEqual(
 			target.innerHTML,
 			`<button>2</button><button>3</button><button>4</button>\n-------\n<button>1</button>`
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-then-destruct-object-if/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-then-destruct-object-if/_config.js
index e823c21c9a..af04467749 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-then-destruct-object-if/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-then-destruct-object-if/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
@@ -11,6 +12,7 @@ export default test({
 
 	async test({ assert, component, target }) {
 		await (component.thePromise = Promise.resolve({ result: 1 }));
+		flushSync();
 
 		assert.htmlEqual(
 			target.innerHTML,
@@ -21,6 +23,7 @@ export default test({
 		);
 
 		await new Promise((resolve) => setTimeout(resolve, 1));
+		flushSync();
 
 		assert.htmlEqual(
 			target.innerHTML,
diff --git a/packages/svelte/tests/runtime-legacy/samples/before-render-chain/_config.js b/packages/svelte/tests/runtime-legacy/samples/before-render-chain/_config.js
index 9364bd9f9e..580df5ca81 100644
--- a/packages/svelte/tests/runtime-legacy/samples/before-render-chain/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/before-render-chain/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
@@ -9,8 +10,9 @@ export default test({
 		<span>1</span>
 	`,
 
-	async test({ assert, component, target }) {
-		await component.list.update();
+	test({ assert, component, target }) {
+		component.list.update();
+		flushSync();
 
 		assert.htmlEqual(
 			target.innerHTML,
diff --git a/packages/svelte/tests/runtime-legacy/samples/before-render-prevents-loop/_config.js b/packages/svelte/tests/runtime-legacy/samples/before-render-prevents-loop/_config.js
index 39c0ef7f53..7a0943c3f4 100644
--- a/packages/svelte/tests/runtime-legacy/samples/before-render-prevents-loop/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/before-render-prevents-loop/_config.js
@@ -1,7 +1,7 @@
 import { test } from '../../test';
 
 export default test({
-	skip_mode: ['server'],
+	skip_mode: ['server', 'async-server'],
 
 	get props() {
 		return { value: 'hello!' };
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-circular/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-circular/_config.js
index 29ddac16ad..9d47f86aad 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-circular/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-circular/_config.js
@@ -1,9 +1,9 @@
 import { test } from '../../test';
 
 export default test({
-	html: `
+	ssrHtml: `
 		<select>
-			<option value="[object Object]">wheeee</option>
+			<option selected value="[object Object]">wheeee</option>
 		</select>
 	`
 });
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-contenteditable-text-initial/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-contenteditable-text-initial/_config.js
index e2a28e8dd9..83ad9c2558 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-contenteditable-text-initial/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-contenteditable-text-initial/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { ok, test } from '../../test';
 
 export default test({
@@ -18,7 +19,7 @@ export default test({
 		<p>hello</p>
 	`,
 
-	async test({ assert, component, target, window }) {
+	test({ assert, component, target, window }) {
 		assert.equal(component.name, 'world');
 
 		const el = target.querySelector('editor');
@@ -27,7 +28,8 @@ export default test({
 		const event = new window.Event('input');
 
 		el.textContent = 'everybody';
-		await el.dispatchEvent(event);
+		el.dispatchEvent(event);
+		flushSync();
 
 		assert.htmlEqual(
 			target.innerHTML,
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-contenteditable-text/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-contenteditable-text/_config.js
index afecc5b3cd..494c338bfe 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-contenteditable-text/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-contenteditable-text/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { ok, test } from '../../test';
 
 export default test({
@@ -10,7 +11,7 @@ export default test({
 		<p>hello world</p>
 	`,
 
-	async test({ assert, component, target, window }) {
+	test({ assert, component, target, window }) {
 		const el = target.querySelector('editor');
 		ok(el);
 		assert.equal(el.textContent, 'world');
@@ -18,7 +19,8 @@ export default test({
 		const event = new window.Event('input');
 
 		el.textContent = 'everybody';
-		await el.dispatchEvent(event);
+		el.dispatchEvent(event);
+		flushSync();
 
 		assert.htmlEqual(
 			target.innerHTML,
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-indirect-fn/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-indirect-fn/_config.js
new file mode 100644
index 0000000000..f17a7f4825
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-indirect-fn/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		assert.htmlEqual(target.innerHTML, `<input>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-indirect-fn/main.svelte b/packages/svelte/tests/runtime-legacy/samples/binding-indirect-fn/main.svelte
new file mode 100644
index 0000000000..9c1e23a0f4
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-indirect-fn/main.svelte
@@ -0,0 +1,11 @@
+<script>
+  $: items = [{ value: 'hello' }];
+
+  function fn(value) {
+		return true;
+	}
+</script>
+
+{#each items.filter(fn) as item}
+  <input bind:value={item.value} />
+{/each}
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-indirect/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-indirect/_config.js
index d0b46cffa6..6e1feb70fa 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-indirect/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-indirect/_config.js
@@ -17,9 +17,9 @@ export default test({
 		return { tasks, selected: tasks[0] };
 	},
 
-	html: `
+	ssrHtml: `
 		<select>
-			<option value='[object Object]'>put your left leg in</option>
+			<option selected value='[object Object]'>put your left leg in</option>
 			<option value='[object Object]'>your left leg out</option>
 			<option value='[object Object]'>in, out, in, out</option>
 			<option value='[object Object]'>shake it all about</option>
@@ -36,7 +36,28 @@ export default test({
 		<p>shake it all about</p>
 	`,
 
-	async test({ assert, component, target, window }) {
+	async test({ assert, component, target, window, variant }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<select>
+				<option ${variant === 'hydrate' ? 'selected ' : ''}value='[object Object]'>put your left leg in</option>
+				<option value='[object Object]'>your left leg out</option>
+				<option value='[object Object]'>in, out, in, out</option>
+				<option value='[object Object]'>shake it all about</option>
+			</select>
+
+			<label>
+				<input type='checkbox'> put your left leg in
+			</label>
+
+			<h2>Pending tasks</h2>
+			<p>put your left leg in</p>
+			<p>your left leg out</p>
+			<p>in, out, in, out</p>
+			<p>shake it all about</p>
+		`
+		);
 		const input = target.querySelector('input');
 		const select = target.querySelector('select');
 		const options = target.querySelectorAll('option');
@@ -57,7 +78,7 @@ export default test({
 			target.innerHTML,
 			`
 			<select>
-				<option value='[object Object]'>put your left leg in</option>
+				<option ${variant === 'hydrate' ? 'selected ' : ''}value='[object Object]'>put your left leg in</option>
 				<option value='[object Object]'>your left leg out</option>
 				<option value='[object Object]'>in, out, in, out</option>
 				<option value='[object Object]'>shake it all about</option>
@@ -94,7 +115,7 @@ export default test({
 			target.innerHTML,
 			`
 			<select>
-				<option value='[object Object]'>put your left leg in</option>
+				<option ${variant === 'hydrate' ? 'selected ' : ''}value='[object Object]'>put your left leg in</option>
 				<option value='[object Object]'>your left leg out</option>
 				<option value='[object Object]'>in, out, in, out</option>
 				<option value='[object Object]'>shake it all about</option>
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-input-checkbox-indeterminate/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-input-checkbox-indeterminate/_config.js
index 631423feaf..eba77322a1 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-input-checkbox-indeterminate/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-input-checkbox-indeterminate/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { ok, test } from '../../test';
 
 export default test({
@@ -17,7 +18,7 @@ export default test({
 		<p>indeterminate? true</p>
 	`,
 
-	async test({ assert, component, target, window }) {
+	test({ assert, component, target, window }) {
 		const input = target.querySelector('input');
 		ok(input);
 
@@ -28,7 +29,8 @@ export default test({
 
 		input.checked = true;
 		input.indeterminate = false;
-		await input.dispatchEvent(event);
+		input.dispatchEvent(event);
+		flushSync();
 
 		assert.equal(component.indeterminate, false);
 		assert.equal(component.checked, true);
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive-prop/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive-prop/_config.js
new file mode 100644
index 0000000000..d20e4a1e88
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive-prop/_config.js
@@ -0,0 +1,156 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	get props() {
+		return {
+			items: [
+				{ done: false, text: 'one' },
+				{ done: true, text: 'two' },
+				{ done: false, text: 'three' }
+			]
+		};
+	},
+
+	html: `
+		<div>
+			<input type="checkbox">
+			<input type="text"><p>one</p>
+		</div>
+		<div>
+			<input type="checkbox">
+			<input type="text"><p>two</p>
+		</div>
+		<div>
+			<input type="checkbox">
+			<input type="text"><p>three</p>
+		</div>
+
+		<p>remaining:one / done:two / remaining:three</p>
+	`,
+
+	ssrHtml: `
+		<div>
+			<input type="checkbox">
+			<input type="text" value=one><p>one</p>
+		</div>
+		<div>
+			<input type="checkbox" checked="">
+			<input type="text" value=two><p>two</p>
+		</div>
+		<div>
+			<input type="checkbox">
+			<input type="text" value=three><p>three</p>
+		</div>
+
+		<p>remaining:one / done:two / remaining:three</p>
+	`,
+
+	test({ assert, component, target, window }) {
+		/**
+		 * @param {number} i
+		 * @param {string} text
+		 */
+		function set_text(i, text) {
+			const input = /** @type {HTMLInputElement} */ (
+				target.querySelectorAll('input[type="text"]')[i]
+			);
+			input.value = text;
+			input.dispatchEvent(new window.Event('input'));
+		}
+
+		/**
+		 * @param {number} i
+		 * @param {boolean} done
+		 */
+		function set_done(i, done) {
+			const input = /** @type {HTMLInputElement} */ (
+				target.querySelectorAll('input[type="checkbox"]')[i]
+			);
+			input.checked = done;
+			input.dispatchEvent(new window.Event('change'));
+		}
+
+		component.filter = 'remaining';
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>
+				<input type="checkbox">
+				<input type="text"><p>one</p>
+			</div>
+			<div>
+				<input type="checkbox">
+				<input type="text"><p>three</p>
+			</div>
+
+			<p>remaining:one / done:two / remaining:three</p>
+		`
+		);
+
+		set_text(1, 'four');
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>
+				<input type="checkbox">
+				<input type="text"><p>one</p>
+			</div>
+			<div>
+				<input type="checkbox">
+				<input type="text"><p>four</p>
+			</div>
+
+			<p>remaining:one / done:two / remaining:four</p>
+		`
+		);
+
+		assert.deepEqual(component.items, [
+			{ done: false, text: 'one' },
+			{ done: true, text: 'two' },
+			{ done: false, text: 'four' }
+		]);
+
+		set_done(0, true);
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>
+				<input type="checkbox">
+				<input type="text"><p>four</p>
+			</div>
+
+			<p>done:one / done:two / remaining:four</p>
+		`
+		);
+
+		assert.deepEqual(component.items, [
+			{ done: true, text: 'one' },
+			{ done: true, text: 'two' },
+			{ done: false, text: 'four' }
+		]);
+
+		component.filter = 'done';
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>
+				<input type="checkbox">
+				<input type="text"><p>one</p>
+			</div>
+			<div>
+				<input type="checkbox">
+				<input type="text"><p>two</p>
+			</div>
+
+			<p>done:one / done:two / remaining:four</p>
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive-prop/main.svelte b/packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive-prop/main.svelte
new file mode 100644
index 0000000000..7e10199530
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive-prop/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	export let items;
+	export let filter = 'all';
+
+	$: done = items.filter(item => item.done);
+	$: remaining = items.filter(item => !item.done);
+
+	$: filtered = (
+		filter === 'all' ? items :
+		filter === 'done' ? done :
+		remaining
+	);
+
+	$: summary = items.map(i => `${i.done ? 'done' : 'remaining'}:${i.text}`).join(' / ');
+</script>
+
+{#each filtered as item}
+	<div>
+		<input type="checkbox" bind:checked={item.done}>
+		<input type="text" bind:value={item.text}>
+		<p>{item.text}</p>
+	</div>
+{/each}
+
+<p>{summary}</p>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive/_config.js
index d20e4a1e88..c8019e11e9 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive/_config.js
@@ -2,16 +2,6 @@ import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
-	get props() {
-		return {
-			items: [
-				{ done: false, text: 'one' },
-				{ done: true, text: 'two' },
-				{ done: false, text: 'three' }
-			]
-		};
-	},
-
 	html: `
 		<div>
 			<input type="checkbox">
@@ -108,12 +98,6 @@ export default test({
 		`
 		);
 
-		assert.deepEqual(component.items, [
-			{ done: false, text: 'one' },
-			{ done: true, text: 'two' },
-			{ done: false, text: 'four' }
-		]);
-
 		set_done(0, true);
 		flushSync();
 
@@ -129,12 +113,6 @@ export default test({
 		`
 		);
 
-		assert.deepEqual(component.items, [
-			{ done: true, text: 'one' },
-			{ done: true, text: 'two' },
-			{ done: false, text: 'four' }
-		]);
-
 		component.filter = 'done';
 
 		assert.htmlEqual(
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive/main.svelte b/packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive/main.svelte
index 7e10199530..9ca7832a72 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive/main.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-input-text-contextual-reactive/main.svelte
@@ -1,5 +1,10 @@
 <script>
-	export let items;
+	let items = [
+		{ done: false, text: 'one' },
+		{ done: true, text: 'two' },
+		{ done: false, text: 'three' }
+	];
+
 	export let filter = 'all';
 
 	$: done = items.filter(item => item.done);
@@ -22,4 +27,4 @@
 	</div>
 {/each}
 
-<p>{summary}</p>
\ No newline at end of file
+<p>{summary}</p>
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select-implicit-option-value/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-select-implicit-option-value/_config.js
index 1fea6c08f4..2b866bc8ce 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-select-implicit-option-value/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-select-implicit-option-value/_config.js
@@ -6,17 +6,29 @@ export default test({
 		return { values: [1, 2, 3], foo: 2 };
 	},
 
-	html: `
+	ssrHtml: `
 		<select>
-			<option value="1">1</option>
-			<option value="2">2</option>
-			<option value="3">3</option>
+			<option>1</option>
+			<option selected>2</option>
+			<option>3</option>
 		</select>
 
 		<p>foo: 2</p>
 	`,
 
-	test({ assert, component, target, window }) {
+	test({ assert, component, target, window, variant }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<select>
+				<option>1</option>
+				<option ${variant === 'hydrate' ? 'selected ' : ''}>2</option>
+				<option>3</option>
+			</select>
+
+			<p>foo: 2</p>
+		`
+		);
 		const select = target.querySelector('select');
 		ok(select);
 		const options = [...target.querySelectorAll('option')];
@@ -35,9 +47,9 @@ export default test({
 			target.innerHTML,
 			`
 			<select>
-				<option value="1">1</option>
-				<option value="2">2</option>
-				<option value="3">3</option>
+				<option>1</option>
+				<option ${variant === 'hydrate' ? 'selected ' : ''}>2</option>
+				<option>3</option>
 			</select>
 
 			<p>foo: 3</p>
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select-in-each-block/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-select-in-each-block/_config.js
index 9c442aa329..033ae99bbc 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-select-in-each-block/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-select-in-each-block/_config.js
@@ -1,15 +1,15 @@
 import { test } from '../../test';
 
 export default test({
-	html: `
+	ssrHtml: `
 		<select>
-			<option value='hullo'>Hullo</option>
+			<option selected value='hullo'>Hullo</option>
 			<option value='world'>World</option>
 		</select>
 
 		<select>
 			<option value='hullo'>Hullo</option>
-			<option value='world'>World</option>
+			<option selected value='world'>World</option>
 		</select>
 	`,
 
@@ -19,7 +19,21 @@ export default test({
 		};
 	},
 
-	test({ assert, component, target, window }) {
+	test({ assert, component, target, window, variant }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<select>
+				<option ${variant === 'hydrate' ? 'selected ' : ''}value='hullo'>Hullo</option>
+				<option value='world'>World</option>
+			</select>
+
+			<select>
+				<option value='hullo'>Hullo</option>
+				<option ${variant === 'hydrate' ? 'selected ' : ''}value='world'>World</option>
+			</select>
+		`
+		);
 		const selects = [...target.querySelectorAll('select')];
 
 		const change = new window.Event('change');
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select-in-yield/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-select-in-yield/_config.js
index f7e5445072..b8f6a9a74a 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-select-in-yield/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-select-in-yield/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { ok, test } from '../../test';
 
 export default test({
@@ -7,8 +8,9 @@ export default test({
 		return { letter: 'b' };
 	},
 
-	async test({ assert, component, target, window }) {
-		await component.modal.toggle();
+	test({ assert, component, target, window }) {
+		component.modal.toggle();
+		flushSync();
 
 		assert.htmlEqual(
 			target.innerHTML,
@@ -28,7 +30,8 @@ export default test({
 		const change = new window.MouseEvent('change');
 
 		select.options[2].selected = true;
-		await select.dispatchEvent(change);
+		select.dispatchEvent(change);
+		flushSync();
 		assert.equal(component.letter, 'c');
 
 		assert.deepEqual(
@@ -49,9 +52,9 @@ export default test({
 		`
 		);
 
-		await component.modal.toggle();
-		await component.modal.toggle();
-		await Promise.resolve();
+		component.modal.toggle();
+		component.modal.toggle();
+		flushSync();
 
 		select = target.querySelector('select');
 		ok(select);
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select-initial-value-undefined-2/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-select-initial-value-undefined-2/_config.js
index cb5d26b913..3cc4992dcb 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-select-initial-value-undefined-2/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-select-initial-value-undefined-2/_config.js
@@ -8,7 +8,7 @@ export default test({
 
 		<select>
 			<option>a</option>
-			<option selected="">b</option>
+			<option selected>b</option>
 			<option>c</option>
 		</select>
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select-initial-value-undefined-3/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-select-initial-value-undefined-3/_config.js
index 9b25c0bc58..c48298229e 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-select-initial-value-undefined-3/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-select-initial-value-undefined-3/_config.js
@@ -8,9 +8,9 @@ export default test({
 
 		<select>
 			<option disabled=''>x</option>
-			<option value="a">a</option>
-			<option value="b">b</option>
-			<option value="c">c</option>
+			<option>a</option>
+			<option>b</option>
+			<option>c</option>
 		</select>
 	`,
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select-initial-value/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-select-initial-value/_config.js
index 176a1e0dfc..c19272fce0 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-select-initial-value/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-select-initial-value/_config.js
@@ -1,12 +1,12 @@
 import { ok, test } from '../../test';
 
 export default test({
-	html: `
+	ssrHtml: `
 		<p>selected: b</p>
 
 		<select>
 			<option>a</option>
-			<option>b</option>
+			<option selected>b</option>
 			<option>c</option>
 		</select>
 
@@ -17,7 +17,21 @@ export default test({
 		return { selected: 'b' };
 	},
 
-	test({ assert, target }) {
+	test({ assert, target, variant }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<p>selected: b</p>
+
+			<select>
+				<option>a</option>
+				<option${variant === 'hydrate' ? ' selected' : ''}>b</option>
+				<option>c</option>
+			</select>
+
+			<p>selected: b</p>
+		`
+		);
 		const select = target.querySelector('select');
 		ok(select);
 		const options = [...target.querySelectorAll('option')];
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select-late-2/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-select-late-2/_config.js
index ab2db4b07d..72e06190ba 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-select-late-2/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-select-late-2/_config.js
@@ -28,9 +28,9 @@ export default test({
 			target.innerHTML,
 			`
 			<select>
-				<option value="one">one</option>
-				<option value="two">two</option>
-				<option value="three">three</option>
+				<option>one</option>
+				<option>two</option>
+				<option>three</option>
 			</select>
 			<p>selected: two</p>
 		`
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select-late-3/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-select-late-3/_config.js
index 234c2a1040..72e06190ba 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-select-late-3/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-select-late-3/_config.js
@@ -28,9 +28,9 @@ export default test({
 			target.innerHTML,
 			`
 			<select>
-				<option value='one'>one</option>
-				<option value='two'>two</option>
-				<option value='three'>three</option>
+				<option>one</option>
+				<option>two</option>
+				<option>three</option>
 			</select>
 			<p>selected: two</p>
 		`
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select-late/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-select-late/_config.js
index 9c3cd8765a..6c7662def3 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-select-late/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-select-late/_config.js
@@ -28,9 +28,9 @@ export default test({
 			target.innerHTML,
 			`
 			<select>
-				<option value="one">one</option>
-				<option value="two">two</option>
-				<option value="three">three</option>
+				<option>one</option>
+				<option>two</option>
+				<option>three</option>
 			</select>
 			<p>selected: two</p>
 		`
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select-reactive-derived/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-select-reactive-derived/_config.js
new file mode 100644
index 0000000000..54f1fea7d0
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-select-reactive-derived/_config.js
@@ -0,0 +1,37 @@
+import { test } from '../../test';
+
+export default test({
+	ssrHtml: `
+		<select>
+			<option selected="" value="">Select</option>
+			<option value="us">US</option>
+			<option value="uk">UK</option>
+		</select>
+	`,
+
+	async test({ assert, target, window, variant }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<select>
+				<option${variant === 'hydrate' ? ' selected=""' : ''} value="">Select</option>
+				<option value="us">US</option>
+				<option value="uk">UK</option>
+			</select>
+		`
+		);
+
+		const [select] = target.querySelectorAll('select');
+		const options = target.querySelectorAll('option');
+
+		assert.equal(select.value, '');
+
+		const change = new window.Event('change');
+
+		// Select "UK"
+		options[2].selected = true;
+		await select.dispatchEvent(change);
+
+		assert.equal(select.value, 'uk');
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select-reactive-derived/main.svelte b/packages/svelte/tests/runtime-legacy/samples/binding-select-reactive-derived/main.svelte
new file mode 100644
index 0000000000..57342347f5
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-select-reactive-derived/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	const default_details = {
+		country: '',
+	}
+
+	$: data = {
+		locked: false,
+		details: null,
+	}
+
+	$: details = data.details ?? default_details
+</script>
+
+<select
+	bind:value={details.country}
+	disabled={data.locked}
+>
+	<option value="">Select</option>
+	<option value="us">US</option>
+	<option value="uk">UK</option>
+</select>
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select-unmatched-2/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-select-unmatched-2/_config.js
index 85d61eeeec..b0bbed9c92 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-select-unmatched-2/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-select-unmatched-2/_config.js
@@ -6,9 +6,9 @@ export default test({
 		<p>selected: </p>
 
 		<select>
-			<option value="a">a</option>
-			<option value="b">b</option>
-			<option value="c">c</option>
+			<option>a</option>
+			<option>b</option>
+			<option>c</option>
 		</select>
 
 		<p>selected: </p>
@@ -37,9 +37,9 @@ export default test({
 			<p>selected: a</p>
 
 			<select>
-				<option value="a">a</option>
-				<option value="b">b</option>
-				<option value="c">c</option>
+				<option>a</option>
+				<option>b</option>
+				<option>c</option>
 			</select>
 
 			<p>selected: a</p>
@@ -59,9 +59,9 @@ export default test({
 			<p>selected: d</p>
 
 			<select>
-				<option value="a">a</option>
-				<option value="b">b</option>
-				<option value="c">c</option>
+				<option>a</option>
+				<option>b</option>
+				<option>c</option>
 			</select>
 
 			<p>selected: d</p>
@@ -78,9 +78,9 @@ export default test({
 			<p>selected: b</p>
 
 			<select>
-				<option value="a">a</option>
-				<option value="b">b</option>
-				<option value="c">c</option>
+				<option>a</option>
+				<option>b</option>
+				<option>c</option>
 			</select>
 
 			<p>selected: b</p>
@@ -100,9 +100,9 @@ export default test({
 			<p>selected: </p>
 
 			<select>
-				<option value="a">a</option>
-				<option value="b">b</option>
-				<option value="c">c</option>
+				<option>a</option>
+				<option>b</option>
+				<option>c</option>
 			</select>
 
 			<p>selected: </p>
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select-unmatched-3/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-select-unmatched-3/_config.js
index c0e64521d1..d616d9bc26 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-select-unmatched-3/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-select-unmatched-3/_config.js
@@ -4,7 +4,7 @@ import { ok, test } from '../../test';
 export default test({
 	mode: ['client', 'hydrate'],
 
-	html: `<p>selected: a</p><select><option value="a">a</option><option value="b">b</option><option value="c">c</option></select>`,
+	html: `<p>selected: a</p><select><option>a</option><option>b</option><option>c</option></select>`,
 
 	async test({ assert, component, target }) {
 		const select = target.querySelector('select');
@@ -29,7 +29,7 @@ export default test({
 		// model of selected value should be kept around, even if it is not in the list
 		assert.htmlEqual(
 			target.innerHTML,
-			`<p>selected: a</p><select><option value="b">b</option><option value="c">c</option></select>`
+			`<p>selected: a</p><select><option>b</option><option>c</option></select>`
 		);
 	}
 });
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-select/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-select/_config.js
index 5577ec2393..996f68e39f 100644
--- a/packages/svelte/tests/runtime-legacy/samples/binding-select/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-select/_config.js
@@ -2,11 +2,11 @@ import { flushSync } from 'svelte';
 import { ok, test } from '../../test';
 
 export default test({
-	html: `
+	ssrHtml: `
 		<p>selected: one</p>
 
 		<select>
-			<option>one</option>
+			<option selected>one</option>
 			<option>two</option>
 			<option>three</option>
 		</select>
@@ -18,7 +18,21 @@ export default test({
 		return { selected: 'one' };
 	},
 
-	test({ assert, component, target, window }) {
+	test({ assert, component, target, window, variant }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<p>selected: one</p>
+
+			<select>
+				<option${variant === 'hydrate' ? ' selected' : ''}>one</option>
+				<option>two</option>
+				<option>three</option>
+			</select>
+
+			<p>selected: one</p>
+		`
+		);
 		const select = target.querySelector('select');
 		ok(select);
 
@@ -40,7 +54,7 @@ export default test({
 			<p>selected: two</p>
 
 			<select>
-				<option>one</option>
+				<option${variant === 'hydrate' ? ' selected' : ''}>one</option>
 				<option>two</option>
 				<option>three</option>
 			</select>
diff --git a/packages/svelte/tests/runtime-legacy/samples/bindings-coalesced/_config.js b/packages/svelte/tests/runtime-legacy/samples/bindings-coalesced/_config.js
index 85e1faeb73..3bc5d845a1 100644
--- a/packages/svelte/tests/runtime-legacy/samples/bindings-coalesced/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/bindings-coalesced/_config.js
@@ -1,7 +1,8 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
-	async test({ assert, component }) {
+	test({ assert, component }) {
 		const { foo, p } = component;
 
 		/** @type {string[]} */
@@ -13,7 +14,8 @@ export default test({
 			}
 		});
 
-		await foo.double();
+		foo.double();
+		flushSync();
 
 		assert.deepEqual(values, ['6']);
 	}
diff --git a/packages/svelte/tests/runtime-legacy/samples/block-expression-assign/_config.js b/packages/svelte/tests/runtime-legacy/samples/block-expression-assign/_config.js
new file mode 100644
index 0000000000..15adef2c9b
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/block-expression-assign/_config.js
@@ -0,0 +1,12 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		const button = target.querySelector('button');
+
+		assert.htmlEqual(target.innerHTML, `<div></div><button>inc</button> [0,0,0,0,0,0,0,0,0]`);
+		flushSync(() => button?.click());
+		assert.htmlEqual(target.innerHTML, `<div></div><button>inc</button> [0,0,0,0,0,0,0,0,0]`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/block-expression-assign/main.svelte b/packages/svelte/tests/runtime-legacy/samples/block-expression-assign/main.svelte
new file mode 100644
index 0000000000..67190669ed
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/block-expression-assign/main.svelte
@@ -0,0 +1,45 @@
+<script>
+    let a = 0, b = 0, c = 0, d = 0, e = 0, f = 0, g = 0, h = 0, i = 0;
+    function inc() {
+        a++;
+        b++;
+        c++;
+        d++;
+        e++;
+        f++;
+        g++;
+        h++;
+        i++;
+    }
+</script>
+
+{#if a = 0}{/if}
+
+{#each [b = 0] as x}{x,''}{/each}
+
+{#key c = 0}{/key}
+
+{#await d = 0}{/await}
+
+{#snippet snip()}{/snippet}
+
+{@render (e = 0, snip)()}
+
+{@html f = 0, ''}
+
+<div {@attach !!(g = 0)}></div>
+
+{#key 1}
+    {@const x = (h = 0)}
+    {x, ''}
+{/key}
+
+{#if 1}
+    {@const x = (i = 0)}
+    {x, ''}
+{/if}
+
+<button on:click={inc}>inc</button>
+[{a},{b},{c},{d},{e},{f},{g},{h},{i}]
+
+
diff --git a/packages/svelte/tests/runtime-legacy/samples/block-expression-fn-call/_config.js b/packages/svelte/tests/runtime-legacy/samples/block-expression-fn-call/_config.js
new file mode 100644
index 0000000000..523dcd625d
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/block-expression-fn-call/_config.js
@@ -0,0 +1,12 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		const button = target.querySelector('button');
+
+		assert.htmlEqual(target.innerHTML, `<div></div><button data-foo="true">inc</button> 12 - 12`);
+		flushSync(() => button?.click());
+		assert.htmlEqual(target.innerHTML, `<div></div><button data-foo="true">inc</button> 13 - 12`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/block-expression-fn-call/main.svelte b/packages/svelte/tests/runtime-legacy/samples/block-expression-fn-call/main.svelte
new file mode 100644
index 0000000000..37838f091f
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/block-expression-fn-call/main.svelte
@@ -0,0 +1,36 @@
+<script>
+    let count1 = 1;
+    let count2 = 1;
+    function fn(ret) {
+        if (count1 > 100) return ret;
+        count1++;
+        count2++;
+        return ret;
+    }
+</script>
+
+{#if fn(false)}{:else if fn(true)}{/if}
+
+{#each fn([]) as x}{x, ''}{/each}
+
+{#key fn(1)}{/key}
+
+{#await fn(Promise.resolve())}{/await}
+
+{#snippet snip()}{/snippet}
+
+{@render fn(snip)()}
+
+{@html fn('')}
+
+<div {@attach fn(() => {})}></div>
+
+{#key 1}
+    {@const x = fn('')}
+    {x}
+{/key}
+
+<button data-foo={fn(true)} on:click={() => count1++}>{fn('inc')}</button>
+{count1} - {count2}
+
+
diff --git a/packages/svelte/tests/runtime-legacy/samples/block-expression-member-access/_config.js b/packages/svelte/tests/runtime-legacy/samples/block-expression-member-access/_config.js
new file mode 100644
index 0000000000..0e1a5a8150
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/block-expression-member-access/_config.js
@@ -0,0 +1,12 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		const button = target.querySelector('button');
+
+		assert.htmlEqual(target.innerHTML, `<div></div><button>inc</button> 10 - 10`);
+		flushSync(() => button?.click());
+		assert.htmlEqual(target.innerHTML, `<div></div><button>inc</button> 11 - 10`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/block-expression-member-access/main.svelte b/packages/svelte/tests/runtime-legacy/samples/block-expression-member-access/main.svelte
new file mode 100644
index 0000000000..4041be4f6f
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/block-expression-member-access/main.svelte
@@ -0,0 +1,46 @@
+<script>
+    let count1 = 1;
+    let count2 = 1;
+    function fn(ret) {
+        if (count1 > 100) return ret;
+        count1++;
+        count2++;
+        return ret;
+    }
+
+    const obj = {
+        get true() { return fn(true) },
+        get false() { return fn(false) },
+        get array() { return fn([]) },
+        get string() { return fn('') },
+        get promise() { return fn(Promise.resolve()) },
+        get snippet() { return fn(snip) },
+        get attachment() { return fn(() => {}) },
+    }
+</script>
+
+{#if obj.false}{:else if obj.true}{/if}
+
+{#each obj.array as x}{x, ''}{/each}
+
+{#key obj.string}{/key}
+
+{#await obj.promise}{/await}
+
+{#snippet snip()}{/snippet}
+
+{@render obj.snippet()}
+
+{@html obj.string}
+
+<div {@attach obj.attachment}></div>
+
+{#key 1}
+    {@const x = obj.string}
+    {x}
+{/key}
+
+<button on:click={() => count1++}>inc</button>
+{count1} - {count2}
+
+
diff --git a/packages/svelte/tests/runtime-legacy/samples/class-shortcut-with-transition/_config.js b/packages/svelte/tests/runtime-legacy/samples/class-shortcut-with-transition/_config.js
index 6e3f7a3cb7..e58e8c53c5 100644
--- a/packages/svelte/tests/runtime-legacy/samples/class-shortcut-with-transition/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/class-shortcut-with-transition/_config.js
@@ -18,7 +18,7 @@ export default test({
 		raf.tick(150);
 		assert.htmlEqual(
 			target.innerHTML,
-			'<p>foo</p><p class="red svelte-1yszte8 border" style="overflow: hidden; opacity: 0; border-top-width: 0.5px; border-bottom-width: 0.5px;">bar</p>'
+			'<p>foo</p><p class="red svelte-1yszte8 border" style="overflow: hidden; opacity: 0; border-top-width: 0.5px; border-bottom-width: 0.5px; min-height: 0;">bar</p>'
 		);
 		component.open = true;
 		raf.tick(250);
diff --git a/packages/svelte/tests/runtime-legacy/samples/component-props-mutated/_config.js b/packages/svelte/tests/runtime-legacy/samples/component-props-mutated/_config.js
index 91d0aaa0d3..4a5c102ba2 100644
--- a/packages/svelte/tests/runtime-legacy/samples/component-props-mutated/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/component-props-mutated/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 const data = {
@@ -15,9 +16,10 @@ export default test({
 
 	html: '<p>hello</p>',
 
-	async test({ assert, component, target }) {
+	test({ assert, component, target }) {
 		data.message = 'goodbye';
-		await component.$set({ data });
+		component.$set({ data });
+		flushSync();
 
 		assert.htmlEqual(target.innerHTML, '<p>goodbye</p>');
 	}
diff --git a/packages/svelte/tests/runtime-legacy/samples/component-slot-let-g/_config.js b/packages/svelte/tests/runtime-legacy/samples/component-slot-let-g/_config.js
index db9afae1b0..f3f5e04be1 100644
--- a/packages/svelte/tests/runtime-legacy/samples/component-slot-let-g/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/component-slot-let-g/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
@@ -5,7 +6,7 @@ export default test({
 		<span slot="foo" class="1">1</span>
 		0
 	`,
-	async test({ assert, target, component, window }) {
+	test({ assert, target, component, window }) {
 		component.x = 2;
 
 		assert.htmlEqual(
@@ -17,7 +18,8 @@ export default test({
 		);
 
 		const span = target.querySelector('span');
-		await span?.dispatchEvent(new window.MouseEvent('click', { bubbles: true }));
+		span?.dispatchEvent(new window.MouseEvent('click', { bubbles: true }));
+		flushSync();
 
 		assert.htmlEqual(
 			target.innerHTML,
diff --git a/packages/svelte/tests/runtime-legacy/samples/const-tag-depends-on-const-tag/_config.js b/packages/svelte/tests/runtime-legacy/samples/const-tag-depends-on-const-tag/_config.js
new file mode 100644
index 0000000000..6282d36f75
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/const-tag-depends-on-const-tag/_config.js
@@ -0,0 +1,34 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<input>
+		<p>hello</p>
+		<p>hello</p>
+	`,
+
+	ssrHtml: `
+		<input value="hello">
+		<p>hello</p>
+		<p>hello</p>
+	`,
+
+	async test({ assert, target }) {
+		const [input] = target.querySelectorAll('input');
+
+		flushSync(() => {
+			input.value = 'goodbye';
+			input.dispatchEvent(new InputEvent('input', { bubbles: true }));
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<input>
+				<p>goodbye</p>
+				<p>goodbye</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/const-tag-depends-on-const-tag/main.svelte b/packages/svelte/tests/runtime-legacy/samples/const-tag-depends-on-const-tag/main.svelte
new file mode 100644
index 0000000000..a32010717c
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/const-tag-depends-on-const-tag/main.svelte
@@ -0,0 +1,15 @@
+<svelte:options runes={false} />
+
+<script>
+	let message = 'hello';
+</script>
+
+<input bind:value={message} />
+
+{#if true}
+	{@const m1 = message}
+	{@const m2 = (() => m1)()}
+
+	<p>{m1}</p>
+	<p>{m2}</p>
+{/if}
diff --git a/packages/svelte/tests/runtime-legacy/samples/constructor-prefer-passed-context/_config.js b/packages/svelte/tests/runtime-legacy/samples/constructor-prefer-passed-context/_config.js
index e05bb35637..7c49960afd 100644
--- a/packages/svelte/tests/runtime-legacy/samples/constructor-prefer-passed-context/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/constructor-prefer-passed-context/_config.js
@@ -1,7 +1,7 @@
 import { test } from '../../test';
 
 export default test({
-	skip_mode: ['server'],
+	skip_mode: ['server', 'async-server'],
 
 	html: `
 		<div><div>Value in child component: </div></div>
diff --git a/packages/svelte/tests/runtime-legacy/samples/destructured-props-2/_config.js b/packages/svelte/tests/runtime-legacy/samples/destructured-props-2/_config.js
index 950ee4f1ff..0f3fcedce5 100644
--- a/packages/svelte/tests/runtime-legacy/samples/destructured-props-2/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/destructured-props-2/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
@@ -10,7 +11,7 @@ export default test({
 
 	async test({ component, assert, target }) {
 		await component.update();
-		await Promise.resolve();
+		flushSync();
 
 		assert.htmlEqual(
 			target.innerHTML,
diff --git a/packages/svelte/tests/runtime-legacy/samples/destructured-props-3/_config.js b/packages/svelte/tests/runtime-legacy/samples/destructured-props-3/_config.js
index 9ec2810e71..c78b84ec8c 100644
--- a/packages/svelte/tests/runtime-legacy/samples/destructured-props-3/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/destructured-props-3/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
@@ -8,7 +9,8 @@ export default test({
 	`,
 	async test({ component, target, assert }) {
 		await component.update();
-		await Promise.resolve();
+		flushSync();
+
 		assert.htmlEqual(
 			target.innerHTML,
 			`
diff --git a/packages/svelte/tests/runtime-legacy/samples/destructured-props-5/_config.js b/packages/svelte/tests/runtime-legacy/samples/destructured-props-5/_config.js
index 8f7a544bfe..103ce64d7c 100644
--- a/packages/svelte/tests/runtime-legacy/samples/destructured-props-5/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/destructured-props-5/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
@@ -10,7 +11,7 @@ export default test({
 
 	async test({ component, assert, target }) {
 		await component.update();
-		await Promise.resolve();
+		flushSync();
 
 		assert.htmlEqual(
 			target.innerHTML,
diff --git a/packages/svelte/tests/runtime-legacy/samples/destructuring-assignment-array/_config.js b/packages/svelte/tests/runtime-legacy/samples/destructuring-assignment-array/_config.js
index 2df8753114..9c09581097 100644
--- a/packages/svelte/tests/runtime-legacy/samples/destructuring-assignment-array/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/destructuring-assignment-array/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
@@ -10,9 +11,9 @@ export default test({
 		</ul>
 	`,
 
-	async test({ assert, component, target }) {
-		await component.swap(0, 1);
-		await Promise.resolve();
+	test({ assert, component, target }) {
+		component.swap(0, 1);
+		flushSync();
 
 		assert.htmlEqual(
 			target.innerHTML,
diff --git a/packages/svelte/tests/runtime-legacy/samples/dynamic-element-animation/_config.js b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-animation/_config.js
index 3d127f1375..05c2dc7304 100644
--- a/packages/svelte/tests/runtime-legacy/samples/dynamic-element-animation/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-animation/_config.js
@@ -50,6 +50,8 @@ export default test({
 			{ id: 1, name: 'a' }
 		];
 
+		raf.tick(0);
+
 		divs = target.querySelectorAll('div');
 		assert.equal(divs[0].style.transform, 'translate(0px, 120px)');
 		assert.equal(divs[1].style.transform, '');
diff --git a/packages/svelte/tests/runtime-legacy/samples/dynamic-element-invalid-this-content/_config.js b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-invalid-this-content/_config.js
new file mode 100644
index 0000000000..b0dcaa8fdc
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-invalid-this-content/_config.js
@@ -0,0 +1,17 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['client', 'server'],
+
+	compileOptions: {
+		dev: true
+	},
+
+	get props() {
+		return { tag: true };
+	},
+
+	error:
+		'svelte_element_invalid_this_value\n' +
+		'The `this` prop on `<svelte:element>` must be a string, if defined'
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/dynamic-element-invalid-this-content/main.svelte b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-invalid-this-content/main.svelte
new file mode 100644
index 0000000000..cc6736a497
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-invalid-this-content/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let tag;
+</script>
+
+<svelte:element this={tag}>content</svelte:element>
diff --git a/packages/svelte/tests/runtime-legacy/samples/flush-sync-each-block/Inner.svelte b/packages/svelte/tests/runtime-legacy/samples/flush-sync-each-block/Inner.svelte
new file mode 100644
index 0000000000..6d7c982db0
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/flush-sync-each-block/Inner.svelte
@@ -0,0 +1,8 @@
+<svelte:options customElement={{
+	tag: "my-inner",
+	props: { value: { reflect: true }}
+}} />
+<script>
+	export let value;
+</script>
+{value}
diff --git a/packages/svelte/tests/runtime-legacy/samples/flush-sync-each-block/_config.js b/packages/svelte/tests/runtime-legacy/samples/flush-sync-each-block/_config.js
new file mode 100644
index 0000000000..2798f533c6
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/flush-sync-each-block/_config.js
@@ -0,0 +1,20 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [btn] = target.querySelectorAll('button');
+
+		btn.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>inc</button>
+			<my-inner value="2"></my-inner>
+			2
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/flush-sync-each-block/main.svelte b/packages/svelte/tests/runtime-legacy/samples/flush-sync-each-block/main.svelte
new file mode 100644
index 0000000000..3be1202c97
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/flush-sync-each-block/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import "./Inner.svelte"
+	let count = 1;
+</script>
+
+<button on:click={() => count++}>inc</button>
+<!-- updating value prop will cause a flushSync -->
+<my-inner value={count}></my-inner>
+<!-- updating count will cause an internal_set -->
+{#each [count] as row}
+	{row}
+{/each}
diff --git a/packages/svelte/tests/runtime-legacy/samples/inline-style-directive-spread-and-attr-empty/_config.js b/packages/svelte/tests/runtime-legacy/samples/inline-style-directive-spread-and-attr-empty/_config.js
index 9ff0007c37..04c9868ac3 100644
--- a/packages/svelte/tests/runtime-legacy/samples/inline-style-directive-spread-and-attr-empty/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/inline-style-directive-spread-and-attr-empty/_config.js
@@ -2,6 +2,6 @@ import { test } from '../../test';
 
 export default test({
 	html: `
-		<p style=""></p>
+		<p></p>
 	`
 });
diff --git a/packages/svelte/tests/runtime-legacy/samples/inline-style-optimisation-bailout/_config.js b/packages/svelte/tests/runtime-legacy/samples/inline-style-optimisation-bailout/_config.js
index adcdc4706d..e9965b2b1e 100644
--- a/packages/svelte/tests/runtime-legacy/samples/inline-style-optimisation-bailout/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/inline-style-optimisation-bailout/_config.js
@@ -2,7 +2,7 @@ import { ok, test } from '../../test';
 
 export default test({
 	html: `
-		<p style="opacity: 0.5; color: red">color: red</p>
+		<p style="opacity: 0.5; color: red;">color: red;</p>
 	`,
 
 	test({ assert, component, target, window }) {
diff --git a/packages/svelte/tests/runtime-legacy/samples/inline-style-optimisation-bailout/main.svelte b/packages/svelte/tests/runtime-legacy/samples/inline-style-optimisation-bailout/main.svelte
index 35b768547e..e07adaa1c9 100644
--- a/packages/svelte/tests/runtime-legacy/samples/inline-style-optimisation-bailout/main.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/inline-style-optimisation-bailout/main.svelte
@@ -1,5 +1,5 @@
 <script>
-	export let styles = `color: red`;
+	export let styles = `color: red;`;
 </script>
 
 <p style="opacity: 0.5; {styles}">{styles}</p>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-legacy/samples/input-list/_config.js b/packages/svelte/tests/runtime-legacy/samples/input-list/_config.js
index fe6a29207d..1e95aaafa6 100644
--- a/packages/svelte/tests/runtime-legacy/samples/input-list/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/input-list/_config.js
@@ -4,7 +4,9 @@ export default test({
 	html: `
 		<input list='suggestions'>
 		<datalist id='suggestions'>
-			<option value='foo'/><option value='bar'/><option value='baz'/>
+			<option value='foo'></option>
+			<option value='bar'></option>
+			<option value='baz'></option>
 		</datalist>
 	`
 });
diff --git a/packages/svelte/tests/runtime-legacy/samples/key-block-expression-2/_config.js b/packages/svelte/tests/runtime-legacy/samples/key-block-expression-2/_config.js
index a661ec2596..99fa84e2a9 100644
--- a/packages/svelte/tests/runtime-legacy/samples/key-block-expression-2/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/key-block-expression-2/_config.js
@@ -1,19 +1,26 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
 	html: '<div>3</div>',
-	async test({ assert, component, target }) {
+	test({ assert, component, target }) {
 		const div = target.querySelector('div');
 
-		await component.mutate();
+		component.mutate();
+		flushSync();
+
 		assert.htmlEqual(target.innerHTML, '<div>5</div>');
 		assert.strictEqual(div, target.querySelector('div'));
 
-		await component.reassign();
+		component.reassign();
+		flushSync();
+
 		assert.htmlEqual(target.innerHTML, '<div>7</div>');
 		assert.strictEqual(div, target.querySelector('div'));
 
-		await component.changeKey();
+		component.changeKey();
+		flushSync();
+
 		assert.htmlEqual(target.innerHTML, '<div>7</div>');
 		assert.notStrictEqual(div, target.querySelector('div'));
 	}
diff --git a/packages/svelte/tests/runtime-legacy/samples/let-directive-and-const-tag-slotted/Nested.svelte b/packages/svelte/tests/runtime-legacy/samples/let-directive-and-const-tag-slotted/Nested.svelte
new file mode 100644
index 0000000000..417e539554
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/let-directive-and-const-tag-slotted/Nested.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let things;
+</script>
+
+{#each things as thing}
+	<slot name="foo" {thing} />
+{/each}
diff --git a/packages/svelte/tests/runtime-legacy/samples/let-directive-and-const-tag-slotted/_config.js b/packages/svelte/tests/runtime-legacy/samples/let-directive-and-const-tag-slotted/_config.js
new file mode 100644
index 0000000000..bbbcd9ad12
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/let-directive-and-const-tag-slotted/_config.js
@@ -0,0 +1,15 @@
+import { test } from '../../test';
+
+// `let:` directives on a slotted element must be declared before sibling `{@const}`
+// declarations that capture them. In dev mode the `{@const}` derived is read eagerly,
+// so a wrong declaration order throws "Cannot access '...' before initialization".
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	html: `
+		<div slot="foo"><span>1</span></div>
+		<div slot="foo"><span>2</span></div>
+	`
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/let-directive-and-const-tag-slotted/main.svelte b/packages/svelte/tests/runtime-legacy/samples/let-directive-and-const-tag-slotted/main.svelte
new file mode 100644
index 0000000000..e2530ef015
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/let-directive-and-const-tag-slotted/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested things={[1, 2]}>
+	<div slot="foo" let:thing>
+		{@const props = { thing }}
+		<span>{props.thing}</span>
+	</div>
+</Nested>
diff --git a/packages/svelte/tests/runtime-legacy/samples/let-directive-and-const-tag/_config.js b/packages/svelte/tests/runtime-legacy/samples/let-directive-and-const-tag/_config.js
new file mode 100644
index 0000000000..2f7a7863a7
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/let-directive-and-const-tag/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: 'foo'
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/let-directive-and-const-tag/component.svelte b/packages/svelte/tests/runtime-legacy/samples/let-directive-and-const-tag/component.svelte
new file mode 100644
index 0000000000..44e700bdd4
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/let-directive-and-const-tag/component.svelte
@@ -0,0 +1 @@
+<slot data='foo'></slot>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-legacy/samples/let-directive-and-const-tag/main.svelte b/packages/svelte/tests/runtime-legacy/samples/let-directive-and-const-tag/main.svelte
new file mode 100644
index 0000000000..abca25bab2
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/let-directive-and-const-tag/main.svelte
@@ -0,0 +1,7 @@
+<script>
+    import Component from './component.svelte';
+</script>
+<Component let:data>
+    {@const thing = data}
+    {thing}
+</Component>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-legacy/samples/lifecycle-render-order-for-children/Item.svelte b/packages/svelte/tests/runtime-legacy/samples/lifecycle-render-order-for-children/Item.svelte
index b2e6cd046c..4127e857d5 100644
--- a/packages/svelte/tests/runtime-legacy/samples/lifecycle-render-order-for-children/Item.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/lifecycle-render-order-for-children/Item.svelte
@@ -5,7 +5,7 @@
 	export let index;
 	export let n;
 
-	function logRender () {
+	function logRender (n) {
 		order.push(`${index}: render ${n}`);
 		return index;
 	}
@@ -24,5 +24,5 @@
 </script>
 
 <li>
-	{logRender()}
+	{logRender(n)}
 </li>
diff --git a/packages/svelte/tests/runtime-legacy/samples/lifecycle-render-order-for-children/_config.js b/packages/svelte/tests/runtime-legacy/samples/lifecycle-render-order-for-children/_config.js
index 73bfd09ceb..99f9681c4b 100644
--- a/packages/svelte/tests/runtime-legacy/samples/lifecycle-render-order-for-children/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/lifecycle-render-order-for-children/_config.js
@@ -16,13 +16,13 @@ export default test({
 	test({ assert, compileOptions, component }) {
 		assert.deepEqual(order, [
 			'parent: beforeUpdate 0',
-			'parent: render 0',
 			'1: beforeUpdate 0',
 			'1: render 0',
 			'2: beforeUpdate 0',
 			'2: render 0',
 			'3: beforeUpdate 0',
 			'3: render 0',
+			'parent: render 0',
 			'1: onMount 0',
 			'1: afterUpdate 0',
 			'2: onMount 0',
@@ -39,13 +39,13 @@ export default test({
 
 		assert.deepEqual(order, [
 			'parent: beforeUpdate 1',
-			'parent: render 1',
 			'1: beforeUpdate 1',
 			'1: render 1',
 			'2: beforeUpdate 1',
 			'2: render 1',
 			'3: beforeUpdate 1',
 			'3: render 1',
+			'parent: render 1',
 			'1: afterUpdate 1',
 			'2: afterUpdate 1',
 			'3: afterUpdate 1',
diff --git a/packages/svelte/tests/runtime-legacy/samples/lifecycle-render-order-for-children/main.svelte b/packages/svelte/tests/runtime-legacy/samples/lifecycle-render-order-for-children/main.svelte
index b05b1476fd..51dee3bc0c 100644
--- a/packages/svelte/tests/runtime-legacy/samples/lifecycle-render-order-for-children/main.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/lifecycle-render-order-for-children/main.svelte
@@ -5,7 +5,7 @@
 
 	export let n = 0;
 
-	function logRender () {
+	function logRender (n) {
 		order.push(`parent: render ${n}`);
 		return 'parent';
 	}
@@ -23,7 +23,7 @@
 	})
 </script>
 
-{logRender()}
+{logRender(n)}
 <ul>
 	{#each [1,2,3] as index}
 		<Item {index} {n} />
diff --git a/packages/svelte/tests/runtime-legacy/samples/namespace-html/_config.js b/packages/svelte/tests/runtime-legacy/samples/namespace-html/_config.js
index 3be9f0e925..b7ecd04def 100644
--- a/packages/svelte/tests/runtime-legacy/samples/namespace-html/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/namespace-html/_config.js
@@ -9,7 +9,7 @@ export default test({
 
 		<math>
 			<mrow></mrow>
-		</svg>
+		</math>
 
 		<div class="hi">hi</div>
 	`,
diff --git a/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access-2/Component.svelte b/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access-2/Component.svelte
new file mode 100644
index 0000000000..73347c4d7f
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access-2/Component.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { onDestroy } from 'svelte';
+
+	export let my_prop;
+
+	onDestroy(() => {
+		console.log(my_prop.foo);
+	});
+</script>
+
+{my_prop.foo}
diff --git a/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access-2/_config.js b/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access-2/_config.js
new file mode 100644
index 0000000000..81005cf737
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access-2/_config.js
@@ -0,0 +1,14 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [btn1] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		assert.deepEqual(logs, ['bar']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access-2/main.svelte b/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access-2/main.svelte
new file mode 100644
index 0000000000..f38b37fb7f
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access-2/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Component from './Component.svelte';
+
+	let value = { foo: 'bar' };
+</script>
+
+<button
+	onclick={() => {
+		value = undefined;
+	}}>Reset value</button
+>
+
+{#if value !== undefined}
+	<Component my_prop={value} />
+{/if}
diff --git a/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access-3/Component.svelte b/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access-3/Component.svelte
new file mode 100644
index 0000000000..5bfb777128
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access-3/Component.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	export let ref;
+</script>
+
+<input bind:this={ref} />
diff --git a/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access-3/_config.js b/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access-3/_config.js
new file mode 100644
index 0000000000..0eb68310cb
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access-3/_config.js
@@ -0,0 +1,11 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	async test({ target }) {
+		const [btn1] = target.querySelectorAll('button');
+
+		btn1.click();
+		flushSync();
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access-3/main.svelte b/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access-3/main.svelte
new file mode 100644
index 0000000000..9c72d2c48a
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access-3/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Component from './Component.svelte';
+	let state = { title: 'foo' };
+</script>
+
+{#if state}
+	{@const attributes = { title: state.title }}
+	<Component {...attributes} />
+{/if}
+<button
+	onclick={() => {
+		state = undefined;
+	}}
+>
+	Del
+</button>
diff --git a/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access/Component.svelte b/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access/Component.svelte
new file mode 100644
index 0000000000..761f303c2e
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access/Component.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { onDestroy } from "svelte";
+	export let checked;
+	export let count;
+	onDestroy(() => {
+		console.log(count, checked);
+	});
+</script>
+
+<p>{count}</p>
+
+<button onclick={()=> count-- }></button>
diff --git a/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access/_config.js b/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access/_config.js
new file mode 100644
index 0000000000..4f75e82aae
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access/_config.js
@@ -0,0 +1,66 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [btn1, btn2, btn3] = target.querySelectorAll('button');
+		let ps = [...target.querySelectorAll('p')];
+
+		for (const p of ps) {
+			assert.equal(p.innerHTML, '0');
+		}
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		// prop update normally if we are not unmounting
+		for (const p of ps) {
+			assert.equal(p.innerHTML, '1');
+		}
+
+		flushSync(() => {
+			btn3.click();
+		});
+
+		// binding still works and update the value correctly
+		for (const p of ps) {
+			assert.equal(p.innerHTML, '0');
+		}
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		flushSync(() => {
+			btn1.click();
+		});
+
+		// the five components guarded by `count < 2` unmount and log
+		assert.deepEqual(logs, [1, true, 1, true, 1, true, 1, true, 1, true]);
+
+		flushSync(() => {
+			btn2.click();
+		});
+
+		// the three components guarded by `show` unmount and log
+		assert.deepEqual(logs, [
+			1,
+			true,
+			1,
+			true,
+			1,
+			true,
+			1,
+			true,
+			1,
+			true,
+			2,
+			true,
+			2,
+			true,
+			2,
+			true
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access/main.svelte b/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access/main.svelte
new file mode 100644
index 0000000000..73a7501e9d
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/ondestroy-prop-access/main.svelte
@@ -0,0 +1,41 @@
+<script>
+	import Component from "./Component.svelte";
+	let show = true;
+	let count = 0;
+	$: spread = { checked: show, count };
+</script>
+
+<button onclick={()=> count++ }></button>
+<button onclick={()=> show = !show }></button>
+
+<!-- count with bind -->
+{#if count < 2}
+	<Component bind:count bind:checked={show} />
+{/if}
+
+<!-- spread syntax -->
+{#if count < 2}
+	<Component {...spread} />
+{/if}
+
+<!-- normal prop -->
+{#if count < 2}
+	<Component {count} checked={show} />
+{/if}
+
+<!-- prop only accessed in destroy -->
+{#if show}
+	<Component {count} checked={show} />
+{/if}
+
+<!-- dynamic component -->
+<svelte:component this={count < 2 ? Component : undefined} {count} checked={show} />
+
+<!-- dynamic component spread -->
+<svelte:component this={count < 2 ? Component : undefined} {...spread} />
+
+<!-- dynamic component with prop only accessed on destroy -->
+<svelte:component this={show ? Component : undefined} {count} checked={show} />
+
+<!-- dynamic component with prop only accessed on destroy spread -->
+<svelte:component this={show ? Component : undefined} {...spread} />
diff --git a/packages/svelte/tests/runtime-legacy/samples/pre-tag/_config.js b/packages/svelte/tests/runtime-legacy/samples/pre-tag/_config.js
index f1a42e996a..d7e1fe9d43 100644
--- a/packages/svelte/tests/runtime-legacy/samples/pre-tag/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/pre-tag/_config.js
@@ -2,17 +2,9 @@ import { test } from '../../test';
 
 export default test({
 	mode: ['client', 'server'], // output is correct, but test suite chokes on the extra ssr comment which is harmless
-	withoutNormalizeHtml: true,
-	html: get_html(false),
-	ssrHtml: get_html(true)
-});
-
-/** @param {boolean} ssr */
-function get_html(ssr) {
-	// ssr rendered HTML has an extra newline prefixed within `<pre>` tag,
-	// if the <pre> tag starts with `\n`
-	// because when browser parses the SSR rendered HTML, it will ignore the 1st '\n' character
-	return `${ssr ? '<!--[-->' : ''}<pre id="pre">  A
+	withoutNormalizeHtml: 'only-strip-comments', // because whitespace inside pre tags is significant
+	// Note how we're testing against target.innerHTML which already removed the redundant first newline
+	html: `<pre id="pre">  A
   B
   <span>
     C
@@ -35,5 +27,5 @@ function get_html(ssr) {
 leading newlines</pre></div> <div id="pre-without-leading-newline"><pre>without spaces</pre> <pre>  with spaces  </pre> <pre>${' '}
 newline after leading space</pre></div> <pre id="pre-with-multiple-leading-newlines">
 
-multiple leading newlines</pre>${ssr ? '<!--]-->' : ''}`;
-}
+multiple leading newlines</pre>`
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/prop-const/_config.js b/packages/svelte/tests/runtime-legacy/samples/prop-const/_config.js
index 040b911cc6..804ee53342 100644
--- a/packages/svelte/tests/runtime-legacy/samples/prop-const/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/prop-const/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
@@ -10,11 +11,12 @@ export default test({
 		<p>b: 2</p>
 	`,
 
-	async test({ assert, component, target }) {
-		await component.$set({
+	test({ assert, component, target }) {
+		component.$set({
 			a: 5,
 			b: 6
 		});
+		flushSync();
 
 		assert.htmlEqual(
 			target.innerHTML,
diff --git a/packages/svelte/tests/runtime-legacy/samples/prop-no-change/_config.js b/packages/svelte/tests/runtime-legacy/samples/prop-no-change/_config.js
index 905c2a6226..84658336e2 100644
--- a/packages/svelte/tests/runtime-legacy/samples/prop-no-change/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/prop-no-change/_config.js
@@ -2,6 +2,7 @@ import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
+	accessors: false,
 	test({ assert, logs, target }) {
 		assert.deepEqual(logs, ['primitive', 'object']);
 		target.querySelector('button')?.click();
diff --git a/packages/svelte/tests/runtime-legacy/samples/props-reactive-b/_config.js b/packages/svelte/tests/runtime-legacy/samples/props-reactive-b/_config.js
index b92d81bd53..91133f0bf4 100644
--- a/packages/svelte/tests/runtime-legacy/samples/props-reactive-b/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/props-reactive-b/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
@@ -11,8 +12,9 @@ export default test({
 		<p>c: 3</p>
 	`,
 
-	async test({ assert, component, target }) {
-		await component.$set({ a: 4 });
+	test({ assert, component, target }) {
+		component.$set({ a: 4 });
+		flushSync();
 
 		assert.htmlEqual(
 			target.innerHTML,
@@ -23,7 +25,8 @@ export default test({
 		`
 		);
 
-		await component.$set({ b: 5 });
+		component.$set({ b: 5 });
+		flushSync();
 
 		assert.htmlEqual(
 			target.innerHTML,
diff --git a/packages/svelte/tests/runtime-legacy/samples/reactive-assignment-in-complex-declaration-with-store-3/_config.js b/packages/svelte/tests/runtime-legacy/samples/reactive-assignment-in-complex-declaration-with-store-3/_config.js
index 2325d17cd5..1a67e46b38 100644
--- a/packages/svelte/tests/runtime-legacy/samples/reactive-assignment-in-complex-declaration-with-store-3/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/reactive-assignment-in-complex-declaration-with-store-3/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 import { store } from './store.js';
 
@@ -6,10 +7,9 @@ export default test({
 	before_test() {
 		store.reset();
 	},
-	async test({ assert, target }) {
+	test({ assert, target }) {
 		store.set(42);
-
-		await Promise.resolve();
+		flushSync();
 
 		assert.htmlEqual(target.innerHTML, '<h1>42</h1>');
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/reactive-value-dependency-not-referenced/_config.js b/packages/svelte/tests/runtime-legacy/samples/reactive-value-dependency-not-referenced/_config.js
index f2f7fe92b1..3b31ee766e 100644
--- a/packages/svelte/tests/runtime-legacy/samples/reactive-value-dependency-not-referenced/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/reactive-value-dependency-not-referenced/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
@@ -6,29 +7,35 @@ export default test({
 		<p>42</p>
 	`,
 
-	async test({ assert, component, target }) {
-		await component.updateStore(undefined);
-		await Promise.resolve();
+	test({ assert, component, target }) {
+		component.updateStore(undefined);
+		flushSync();
+
 		assert.htmlEqual(target.innerHTML, '<p></p><p>42</p>');
 
-		await component.updateStore(33);
-		await Promise.resolve();
+		component.updateStore(33);
+		flushSync();
+
 		assert.htmlEqual(target.innerHTML, '<p>33</p><p>42</p>');
 
-		await component.updateStore(undefined);
-		await Promise.resolve();
+		component.updateStore(undefined);
+		flushSync();
+
 		assert.htmlEqual(target.innerHTML, '<p></p><p>42</p>');
 
-		await component.updateVar(undefined);
-		await Promise.resolve();
+		component.updateVar(undefined);
+		flushSync();
+
 		assert.htmlEqual(target.innerHTML, '<p></p><p></p>');
 
-		await component.updateVar(33);
-		await Promise.resolve();
+		component.updateVar(33);
+		flushSync();
+
 		assert.htmlEqual(target.innerHTML, '<p></p><p>33</p>');
 
-		await component.updateVar(undefined);
-		await Promise.resolve();
+		component.updateVar(undefined);
+		flushSync();
+
 		assert.htmlEqual(target.innerHTML, '<p></p><p></p>');
 	}
 });
diff --git a/packages/svelte/tests/runtime-legacy/samples/reactive-value-function/_config.js b/packages/svelte/tests/runtime-legacy/samples/reactive-value-function/_config.js
index cbcb19d95e..5317ab496f 100644
--- a/packages/svelte/tests/runtime-legacy/samples/reactive-value-function/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/reactive-value-function/_config.js
@@ -1,10 +1,12 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
 	html: '1-2',
 
-	async test({ assert, component, target }) {
-		await component.update();
+	test({ assert, component, target }) {
+		component.update();
+		flushSync();
 
 		assert.htmlEqual(target.innerHTML, '3-4');
 	}
diff --git a/packages/svelte/tests/runtime-legacy/samples/reactive-values-text-node/_config.js b/packages/svelte/tests/runtime-legacy/samples/reactive-values-text-node/_config.js
index e05c8c80dd..e97a046f68 100644
--- a/packages/svelte/tests/runtime-legacy/samples/reactive-values-text-node/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/reactive-values-text-node/_config.js
@@ -1,5 +1,6 @@
 import { test } from '../../test';
 import { create_deferred } from '../../../helpers';
+import { flushSync } from 'svelte';
 
 /** @type {ReturnType<typeof create_deferred>} */
 let deferred;
@@ -17,6 +18,8 @@ export default test({
 
 	async test({ assert, target }) {
 		await deferred.promise;
+		flushSync();
+
 		assert.htmlEqual(
 			target.innerHTML,
 			`
diff --git a/packages/svelte/tests/runtime-legacy/samples/select-in-each/_config.js b/packages/svelte/tests/runtime-legacy/samples/select-in-each/_config.js
index 335c46d53d..df03b7a053 100644
--- a/packages/svelte/tests/runtime-legacy/samples/select-in-each/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/select-in-each/_config.js
@@ -2,27 +2,28 @@ import { flushSync } from 'svelte';
 import { ok, test } from '../../test';
 
 export default test({
-	html: `
-		<select>
-			<option value="a">A</option>
-			<option value="b">B</option>
-		</select>
-		selected: a
-	`,
-
-	test({ assert, target }) {
+	test({ assert, target, variant }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<select>
+				<option${variant === 'hydrate' ? ' selected' : ''} value="a">A</option>
+				<option value="b">B</option>
+			</select>
+			selected: a
+		`
+		);
 		const select = target.querySelector('select');
 		ok(select);
 		const event = new window.Event('change');
 		select.value = 'b';
 		select.dispatchEvent(event);
 		flushSync();
-
 		assert.htmlEqual(
 			target.innerHTML,
 			`
 			<select>
-				<option value="a">A</option>
+				<option${variant === 'hydrate' ? ' selected' : ''} value="a">A</option>
 				<option value="b">B</option>
 			</select>
 			selected: b
diff --git a/packages/svelte/tests/runtime-legacy/samples/select-multiple-spread/_config.js b/packages/svelte/tests/runtime-legacy/samples/select-multiple-spread/_config.js
index 0619b1468e..47b38713c8 100644
--- a/packages/svelte/tests/runtime-legacy/samples/select-multiple-spread/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/select-multiple-spread/_config.js
@@ -7,9 +7,8 @@ export default test({
 		assert.equal(options[0].selected, true);
 		assert.equal(options[1].selected, false);
 
-		// Shouldn't change the value because the value is not bound.
-		component.value = ['2'];
-		assert.equal(options[0].selected, true);
-		assert.equal(options[1].selected, false);
+		component.attrs = { value: ['2'] };
+		assert.equal(options[0].selected, false);
+		assert.equal(options[1].selected, true);
 	}
 });
diff --git a/packages/svelte/tests/runtime-legacy/samples/spread-own-props/_config.js b/packages/svelte/tests/runtime-legacy/samples/spread-own-props/_config.js
index 708e3615f1..7486055440 100644
--- a/packages/svelte/tests/runtime-legacy/samples/spread-own-props/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/spread-own-props/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
@@ -17,13 +18,14 @@ export default test({
 		<p>quux: core</p></div>
 	`,
 
-	async test({ assert, component, target }) {
-		await component.$set({
+	test({ assert, component, target }) {
+		component.$set({
 			foo: 'wut',
 			baz: 40 + 3,
 			qux: `this is a ${'rather boring'} string`,
 			quux: 'heart'
 		});
+		flushSync();
 
 		assert.htmlEqual(
 			target.innerHTML,
diff --git a/packages/svelte/tests/runtime-legacy/samples/store-auto-subscribe-in-reactive-declaration-2/_config.js b/packages/svelte/tests/runtime-legacy/samples/store-auto-subscribe-in-reactive-declaration-2/_config.js
index 8e0886c668..d380150e55 100644
--- a/packages/svelte/tests/runtime-legacy/samples/store-auto-subscribe-in-reactive-declaration-2/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/store-auto-subscribe-in-reactive-declaration-2/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
@@ -6,10 +7,9 @@ export default test({
 		<div>Hello World</div>
 	`,
 
-	async test({ assert, component, target }) {
-		await component.update_value('Hi Svelte');
-		await Promise.resolve();
-		await Promise.resolve();
+	test({ assert, component, target }) {
+		component.update_value('Hi Svelte');
+		flushSync();
 
 		assert.htmlEqual(
 			target.innerHTML,
diff --git a/packages/svelte/tests/runtime-legacy/samples/store-each-binding-logical/_config.js b/packages/svelte/tests/runtime-legacy/samples/store-each-binding-logical/_config.js
new file mode 100644
index 0000000000..1134b20d0c
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/store-each-binding-logical/_config.js
@@ -0,0 +1,22 @@
+import { flushSync } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	test({ assert, target, window }) {
+		const input = target.querySelector('input');
+		ok(input);
+
+		const event = new window.Event('input');
+		input.value = 'changed';
+		input.dispatchEvent(event);
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<input>
+			<p>changed</p>
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/store-each-binding-logical/main.svelte b/packages/svelte/tests/runtime-legacy/samples/store-each-binding-logical/main.svelte
new file mode 100644
index 0000000000..77731ea5a4
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/store-each-binding-logical/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	const items = writable([
+		{ id: 0, text: 'initial' }
+	]);
+</script>
+
+{#each $items ?? [] as item}
+	<input bind:value={item.text}>
+{/each}
+
+<p>{$items[0].text}</p>
diff --git a/packages/svelte/tests/runtime-legacy/samples/store-increment-updates-reactive/_config.js b/packages/svelte/tests/runtime-legacy/samples/store-increment-updates-reactive/_config.js
index 1c81f7c4e8..89ff695d9d 100644
--- a/packages/svelte/tests/runtime-legacy/samples/store-increment-updates-reactive/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/store-increment-updates-reactive/_config.js
@@ -1,10 +1,13 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
 	html: '0',
 
-	async test({ assert, component, target }) {
-		await component.increment();
+	test({ assert, component, target }) {
+		component.increment();
+		flushSync();
+
 		assert.htmlEqual(target.innerHTML, '1');
 	}
 });
diff --git a/packages/svelte/tests/runtime-legacy/samples/store-reschedule/Child.svelte b/packages/svelte/tests/runtime-legacy/samples/store-reschedule/Child.svelte
new file mode 100644
index 0000000000..d955a82a88
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/store-reschedule/Child.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { count } from './stores';
+
+	let n = 0;
+
+	$: $count = n;
+</script>
+
+<button onclick={() => n += 1}>{$count}</button>
diff --git a/packages/svelte/tests/runtime-legacy/samples/store-reschedule/_config.js b/packages/svelte/tests/runtime-legacy/samples/store-reschedule/_config.js
new file mode 100644
index 0000000000..1c9ea0d5ea
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/store-reschedule/_config.js
@@ -0,0 +1,22 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>0</button><button>0</button>`,
+
+	test({ assert, target }) {
+		const [button1, button2] = target.querySelectorAll('button');
+
+		flushSync(() => button1.click());
+		assert.htmlEqual(target.innerHTML, `<button>1</button><button>1</button>`);
+
+		flushSync(() => button1.click());
+		assert.htmlEqual(target.innerHTML, `<button>2</button><button>2</button>`);
+
+		flushSync(() => button2.click());
+		assert.htmlEqual(target.innerHTML, `<button>1</button><button>1</button>`);
+
+		flushSync(() => button2.click());
+		assert.htmlEqual(target.innerHTML, `<button>2</button><button>2</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/store-reschedule/main.svelte b/packages/svelte/tests/runtime-legacy/samples/store-reschedule/main.svelte
new file mode 100644
index 0000000000..55c1438411
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/store-reschedule/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<Child />
+<Child />
diff --git a/packages/svelte/tests/runtime-legacy/samples/store-reschedule/stores.js b/packages/svelte/tests/runtime-legacy/samples/store-reschedule/stores.js
new file mode 100644
index 0000000000..d432d339ec
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/store-reschedule/stores.js
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const count = writable(0);
diff --git a/packages/svelte/tests/runtime-legacy/samples/store-unreferenced/_config.js b/packages/svelte/tests/runtime-legacy/samples/store-unreferenced/_config.js
index 808ed899d3..7096f5d1fe 100644
--- a/packages/svelte/tests/runtime-legacy/samples/store-unreferenced/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/store-unreferenced/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 import { count } from './store.js';
 
@@ -8,8 +9,9 @@ export default test({
 		count.set(0);
 	},
 
-	async test({ assert, component, target }) {
-		await component.increment();
+	test({ assert, component, target }) {
+		component.increment();
+		flushSync();
 
 		assert.htmlEqual(target.innerHTML, '<p>count: 1</p>');
 	}
diff --git a/packages/svelte/tests/runtime-legacy/samples/template/_config.js b/packages/svelte/tests/runtime-legacy/samples/template/_config.js
index f827168542..7576b6fbb8 100644
--- a/packages/svelte/tests/runtime-legacy/samples/template/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/template/_config.js
@@ -1,3 +1,4 @@
+import { COMMENT_NODE } from '#client/constants';
 import { ok, test } from '../../test';
 
 export default test({
@@ -41,7 +42,7 @@ export default test({
 		// get all childNodes of template3 except comments
 		let childNodes = [];
 		for (const node of template3.content.childNodes) {
-			if (node.nodeType !== 8) {
+			if (node.nodeType !== COMMENT_NODE) {
 				childNodes.push(/** @type {Element} */ (node));
 			}
 		}
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/samples/window-event-custom/_config.js b/packages/svelte/tests/runtime-legacy/samples/window-event-custom/_config.js
index 32b1c65154..f6b7a8af42 100644
--- a/packages/svelte/tests/runtime-legacy/samples/window-event-custom/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/window-event-custom/_config.js
@@ -1,14 +1,16 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
 	html: '<p>escaped: false</p>',
 
-	async test({ assert, target, window }) {
+	test({ assert, target, window }) {
 		const event = new window.KeyboardEvent('keydown', {
 			key: 'Escape'
 		});
 
-		await window.dispatchEvent(event);
+		window.dispatchEvent(event);
+		flushSync();
 
 		assert.htmlEqual(
 			target.innerHTML,
diff --git a/packages/svelte/tests/runtime-legacy/shared.ts b/packages/svelte/tests/runtime-legacy/shared.ts
index e6dc0f385b..5c2d0dfe1c 100644
--- a/packages/svelte/tests/runtime-legacy/shared.ts
+++ b/packages/svelte/tests/runtime-legacy/shared.ts
@@ -1,43 +1,83 @@
 import * as fs from 'node:fs';
 import { setImmediate } from 'node:timers/promises';
-import glob from 'tiny-glob/sync.js';
+import { globSync } from 'tinyglobby';
 import { createClassComponent } from 'svelte/legacy';
 import { proxy } from 'svelte/internal/client';
 import { flushSync, hydrate, mount, unmount } from 'svelte';
 import { render } from 'svelte/server';
-import { afterAll, assert, beforeAll } from 'vitest';
-import { compile_directory } from '../helpers.js';
-import { setup_html_equal } from '../html_equal.js';
+import { afterAll, assert, beforeAll, beforeEach } from 'vitest';
+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';
+import { hydrating } from '../../src/internal/client/dom/hydration.js';
+import { ssr_context } from '../../src/internal/server/context.js';
+
+// `_config.js` files call `assert.ok` etc. with `assert` typed via parameter
+// inference, which TypeScript treats as non-explicit. chai 5 (pulled in by
+// vitest 4) declares these as assertion functions (`asserts value`), so TS2775
+// fires on every call. Override the affected methods with non-assertion
+// signatures — the runtime behavior is unchanged.
+type NonAssertingMethods = {
+	ok(value: unknown, message?: string): void;
+	isOk(value: unknown, message?: string): void;
+	isTrue(value: unknown, message?: string): void;
+	isFalse(value: unknown, message?: string): void;
+	exists(value: unknown, message?: string): void;
+	notExists(value: unknown, message?: string): void;
+	instanceOf(value: unknown, type: Function, message?: string): void;
+};
 
-type Assert = typeof import('vitest').assert & {
-	htmlEqual(a: string, b: string, description?: string): void;
-	htmlEqualWithOptions(
-		a: string,
-		b: string,
-		opts: {
-			preserveComments: boolean;
-			withoutNormalizeHtml: boolean;
-		},
-		description?: string
-	): void;
+type Assert = Omit<typeof import('vitest').assert, keyof NonAssertingMethods> &
+	NonAssertingMethods & {
+		htmlEqual(a: string, b: string, description?: string): void;
+		htmlEqualWithOptions(
+			a: string,
+			b: string,
+			opts: {
+				preserveComments: boolean;
+				withoutNormalizeHtml: boolean;
+			},
+			description?: string
+		): 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'>;
+	mode?: Array<'server' | 'async-server' | 'client' | 'hydrate'>;
 	/** Temporarily skip specific modes, without skipping the entire test */
-	skip_mode?: Array<'server' | 'client' | 'hydrate'>;
+	skip_mode?: Array<'server' | 'async-server' | 'client' | 'hydrate'>;
+	/** Skip if running with process.env.SVELTE_NO_ASYNC */
+	skip_no_async?: boolean;
+	/** Skip if running without process.env.SVELTE_NO_ASYNC */
+	skip_async?: boolean;
 	html?: string;
 	ssrHtml?: string;
 	compileOptions?: Partial<CompileOptions>;
 	props?: Props;
 	server_props?: Props;
+	id_prefix?: string;
 	before_test?: () => void;
 	after_test?: () => void;
+	/** If true, flushSync() will not be called before invoking test() */
+	skip_initial_flushSync?: boolean;
 	test?: (args: {
 		variant: 'dom' | 'hydrate';
 		assert: Assert;
@@ -51,6 +91,7 @@ export interface RuntimeTest<Props extends Record<string, any> = Record<string,
 		raf: {
 			tick: (ms: number) => void;
 		};
+		snapshot: any;
 		target: HTMLElement;
 		window: Window & {
 			Event: typeof Event;
@@ -63,7 +104,12 @@ export interface RuntimeTest<Props extends Record<string, any> = Record<string,
 		errors: any[];
 		hydrate: Function;
 	}) => void | Promise<void>;
-	test_ssr?: (args: { logs: any[]; assert: Assert }) => void | Promise<void>;
+	test_ssr?: (args: {
+		logs: any[];
+		warnings: any[];
+		assert: Assert;
+		variant: 'ssr' | 'async-ssr';
+	}) => void | Promise<void>;
 	accessors?: boolean;
 	immutable?: boolean;
 	intro?: boolean;
@@ -75,6 +121,15 @@ export interface RuntimeTest<Props extends Record<string, any> = Record<string,
 	expect_unhandled_rejections?: boolean;
 	withoutNormalizeHtml?: boolean | 'only-strip-comments';
 	recover?: boolean;
+	transformError?: (error: unknown) => unknown;
+}
+
+declare global {
+	var __svelte:
+		| {
+				h?: Map<string, unknown>;
+		  }
+		| undefined;
 }
 
 let unhandled_rejection: Error | null = null;
@@ -85,13 +140,23 @@ function unhandled_rejection_handler(err: Error) {
 
 const listeners = process.rawListeners('unhandledRejection');
 
-const { assert_html_equal, assert_html_equal_with_options } = setup_html_equal({
-	removeDataSvelte: true
-});
-
 beforeAll(() => {
 	// @ts-expect-error TODO huh?
 	process.prependListener('unhandledRejection', unhandled_rejection_handler);
+
+	// Route inline-`<script>` console calls through `globalThis.console` at
+	// call time, so per-test `console.{log,warn,error}` overrides see them.
+	// (jsdom scripts run in a VM with their own `console` object, separate
+	// from Node's `globalThis.console` — vitest 4's jsdom env no longer
+	// bridges them per-test.)
+	const vc = (window as any)._virtualConsole;
+	for (const m of ['log', 'warn', 'error'] as const) {
+		vc?.on(m, (...args: any[]) => console[m](...args));
+	}
+});
+
+beforeEach(() => {
+	delete globalThis?.__svelte?.h;
 });
 
 afterAll(() => {
@@ -108,9 +173,17 @@ let console_warn = console.warn;
 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) => {
+	return suite_with_variants<RuntimeTest, 'hydrate' | 'ssr' | 'async-ssr' | 'dom', CompileOptions>(
+		['dom', 'hydrate', 'ssr', 'async-ssr'],
+		(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;
@@ -138,6 +211,22 @@ export function runtime_suite(runes: boolean) {
 				if (config.skip_mode?.includes('server')) return true;
 			}
 
+			if (variant === 'async-ssr') {
+				if (!runes || !async_mode) return 'no-test';
+				if (
+					(config.mode && !config.mode.includes('async-server')) ||
+					(!config.test_ssr &&
+						config.html === undefined &&
+						config.ssrHtml === undefined &&
+						config.error === undefined &&
+						config.runtime_error === undefined &&
+						!config.mode?.includes('async-server'))
+				) {
+					return 'no-test';
+				}
+				if (config.skip_mode?.includes('async-server')) return true;
+			}
+
 			return false;
 		},
 		(config, cwd) => {
@@ -157,10 +246,17 @@ 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,
 		accessors: 'accessors' in config ? config.accessors : true,
-		runes
+		runes:
+			config.compileOptions && 'runes' in config.compileOptions
+				? config.compileOptions.runes
+				: runes
 	};
 
 	// load_compiled can be used for debugging a test. It means the compiler will not run on the input
@@ -176,7 +272,7 @@ async function common_setup(cwd: string, runes: boolean | undefined, config: Run
 async function run_test_variant(
 	cwd: string,
 	config: RuntimeTest,
-	variant: 'dom' | 'hydrate' | 'ssr',
+	variant: 'dom' | 'hydrate' | 'ssr' | 'async-ssr',
 	compileOptions: CompileOptions,
 	runes: boolean
 ) {
@@ -186,6 +282,26 @@ async function run_test_variant(
 	let warnings: string[] = [];
 	let errors: string[] = [];
 	let manual_hydrate = false;
+	let intercept_errors = false;
+
+	// Capture phase so we still see the error if a test installs its own
+	// `stopImmediatePropagation` listener (e.g. event-handler-*). Named so we
+	// can remove it in `finally` — otherwise listeners from earlier tests leak
+	// and keep writing to module-level `unhandled_rejection`. When the test
+	// intercepts `errors`, mirror jsdom's `Uncaught [...]` format into the
+	// array — vitest 4's jsdom env no longer routes `jsdomError` to vitest's
+	// wrapped console reliably (works locally but not in CI's forks pool).
+	const window_error_listener = (e: ErrorEvent) => {
+		if (intercept_errors) {
+			const detail = e.error;
+			const is_error = detail && detail.name && detail.message !== undefined && detail.stack;
+			const error_string = is_error ? `[${detail.name}: ${detail.message}]` : String(detail);
+			errors.push(`Error: Uncaught ${error_string}\n${detail?.stack ?? ''}`, detail);
+		} else {
+			unhandled_rejection = e.error;
+		}
+		e.preventDefault();
+	};
 
 	{
 		// use some crude static analysis to determine if logs/warnings are intercepted.
@@ -200,7 +316,16 @@ async function run_test_variant(
 			i++;
 		}
 
-		if (str.slice(0, i).includes('logs')) {
+		let ssr_str = config.test_ssr?.toString() ?? '';
+		let sn = 0;
+		let si = 0;
+		while (si < ssr_str.length) {
+			if (ssr_str[si] === '(') sn++;
+			if (ssr_str[si] === ')' && --sn === 0) break;
+			si++;
+		}
+
+		if (str.slice(0, i).includes('logs') || ssr_str.slice(0, si).includes('logs')) {
 			// eslint-disable-next-line no-console
 			console.log = (...args) => {
 				logs.push(...args);
@@ -211,10 +336,14 @@ async function run_test_variant(
 			manual_hydrate = true;
 		}
 
-		if (str.slice(0, i).includes('warnings') || config.warnings) {
+		if (
+			str.slice(0, i).includes('warnings') ||
+			config.warnings ||
+			ssr_str.slice(0, si).includes('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];
@@ -235,6 +364,7 @@ async function run_test_variant(
 		}
 
 		if (str.slice(0, i).includes('errors') || config.errors) {
+			intercept_errors = true;
 			// eslint-disable-next-line no-console
 			console.error = (...args) => {
 				errors.push(...args);
@@ -256,7 +386,7 @@ async function run_test_variant(
 		raf.reset();
 
 		// Put things we need on window for testing
-		const styles = glob('**/*.css', { cwd: `${cwd}/_output/client` })
+		const styles = globSync('**/*.css', { cwd: `${cwd}/_output/client` })
 			.map((file) => fs.readFileSync(`${cwd}/_output/client/${file}`, 'utf-8'))
 			.join('\n')
 			.replace(/\/\*<\/?style>\*\//g, '');
@@ -266,10 +396,7 @@ async function run_test_variant(
 		window.document.head.innerHTML = styles ? `<style>${styles}</style>` : '';
 		window.document.body.innerHTML = '<main></main>';
 
-		window.addEventListener('error', (e) => {
-			unhandled_rejection = e.error;
-			e.preventDefault();
-		});
+		window.addEventListener('error', window_error_listener, true);
 
 		globalThis.requestAnimationFrame = globalThis.setTimeout;
 
@@ -279,19 +406,31 @@ async function run_test_variant(
 
 		let snapshot = undefined;
 
-		if (variant === 'hydrate' || variant === 'ssr') {
+		if (variant === 'hydrate' || variant === 'ssr' || variant === 'async-ssr') {
+			if (ssr_context !== null) {
+				throw new Error('ssr_context was not cleared');
+			}
+
 			config.before_test?.();
 			// ssr into target
 			const SsrSvelteComponent = (await import(`${cwd}/_output/server/main.svelte.js`)).default;
-			const { html, head } = render(SsrSvelteComponent, {
-				props: config.server_props ?? config.props ?? {}
+			const render_result = render(SsrSvelteComponent, {
+				props: config.server_props ?? config.props ?? {},
+				idPrefix: config.id_prefix,
+				transformError: config.transformError
 			});
+			const rendered =
+				variant === 'async-ssr' || (variant === 'hydrate' && compileOptions.experimental?.async)
+					? await render_result
+					: render_result;
+			const { body, head } = rendered;
 
-			fs.writeFileSync(`${cwd}/_output/rendered.html`, html);
-			target.innerHTML = html;
+			const prefix = variant === 'async-ssr' ? 'async_' : '';
+			fs.writeFileSync(`${cwd}/_output/${prefix}rendered.html`, body);
+			target.innerHTML = body;
 
 			if (head) {
-				fs.writeFileSync(`${cwd}/_output/rendered_head.html`, head);
+				fs.writeFileSync(`${cwd}/_output/${prefix}rendered_head.html`, head);
 				window.document.head.innerHTML = window.document.head.innerHTML + head;
 			}
 
@@ -302,11 +441,15 @@ async function run_test_variant(
 					snapshot = config.snapshot(target);
 				}
 			}
+
+			if (ssr_context !== null) {
+				throw new Error('ssr_context was not cleared');
+			}
 		} else {
 			target.innerHTML = '';
 		}
 
-		if (variant === 'ssr') {
+		if (variant === 'ssr' || variant === 'async-ssr') {
 			if (config.ssrHtml) {
 				assert_html_equal_with_options(target.innerHTML, config.ssrHtml, {
 					preserveComments:
@@ -324,12 +467,13 @@ async function run_test_variant(
 			if (config.test_ssr) {
 				await config.test_ssr({
 					logs,
-					// @ts-expect-error
+					warnings,
 					assert: {
 						...assert,
 						htmlEqual: assert_html_equal,
 						htmlEqualWithOptions: assert_html_equal_with_options
-					}
+					},
+					variant
 				});
 			}
 		} else {
@@ -343,10 +487,24 @@ async function run_test_variant(
 				throw new Error('Ensure dom mode is skipped');
 			};
 
+			const run_hydratables_init = () => {
+				if (variant !== 'hydrate') return;
+				const script = [...document.head.querySelectorAll('script').values()].find((script) =>
+					script.textContent?.includes('window.__svelte ??= {}')
+				)?.textContent;
+				if (!script) return;
+				(0, eval)(script);
+			};
+
 			if (runes) {
 				props = proxy({ ...(config.props || {}) });
-				if (manual_hydrate) {
+
+				// @ts-expect-error
+				globalThis.__svelte.uid = 1;
+
+				if (manual_hydrate && variant === 'hydrate') {
 					hydrate_fn = () => {
+						run_hydratables_init();
 						instance = hydrate(mod.default, {
 							target,
 							props,
@@ -355,15 +513,18 @@ async function run_test_variant(
 						});
 					};
 				} else {
+					run_hydratables_init();
 					const render = variant === 'hydrate' ? hydrate : mount;
 					instance = render(mod.default, {
 						target,
 						props,
 						intro: config.intro,
-						recover: config.recover ?? false
+						recover: config.recover ?? false,
+						transformError: config.transformError
 					});
 				}
 			} else {
+				run_hydratables_init();
 				instance = createClassComponent({
 					component: mod.default,
 					props: config.props,
@@ -390,9 +551,14 @@ async function run_test_variant(
 
 			try {
 				if (config.test) {
-					flushSync();
+					if (!config.skip_initial_flushSync) 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: {
 							...assert,
 							htmlEqual: assert_html_equal,
@@ -402,6 +568,7 @@ async function run_test_variant(
 						component: runes ? props : instance,
 						instance,
 						mod,
+						ok,
 						target,
 						snapshot,
 						window,
@@ -412,6 +579,8 @@ async function run_test_variant(
 						errors,
 						hydrate: hydrate_fn
 					});
+
+					flushSync();
 				}
 
 				if (config.runtime_error && !unhandled_rejection) {
@@ -420,7 +589,7 @@ async function run_test_variant(
 				}
 			} finally {
 				if (runes) {
-					unmount(instance);
+					await unmount(instance);
 				} else {
 					instance.$destroy();
 				}
@@ -447,10 +616,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
+					}
 				}
 			}
 		}
@@ -463,9 +633,11 @@ async function run_test_variant(
 			throw err;
 		}
 	} finally {
-		console.log = console_log;
-		console.warn = console_warn;
-		console.error = console_error;
+		if (hydrating) {
+			throw new Error('Hydration state was not cleared');
+		}
+
+		window.removeEventListener('error', window_error_listener, true);
 
 		config.after_test?.();
 
@@ -480,6 +652,12 @@ async function run_test_variant(
 				process.on('unhandledRejection', listener);
 			});
 		}
+
+		console.log = console_log;
+		console.warn = console_warn;
+		console.error = console_error;
+
+		clear();
 	}
 }
 
diff --git a/packages/svelte/tests/runtime-production/samples/async-eager-derived/_config.js b/packages/svelte/tests/runtime-production/samples/async-eager-derived/_config.js
new file mode 100644
index 0000000000..043f1610fb
--- /dev/null
+++ b/packages/svelte/tests/runtime-production/samples/async-eager-derived/_config.js
@@ -0,0 +1,23 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [increment, shift] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>clicks: 0 - 0 - 0</button> <button>shift</button> <p>true - true</p>`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>clicks: 1 - 1 - 1</button> <button>shift</button> <p>false - false</p>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-production/samples/async-eager-derived/main.svelte b/packages/svelte/tests/runtime-production/samples/async-eager-derived/main.svelte
new file mode 100644
index 0000000000..d1d979126d
--- /dev/null
+++ b/packages/svelte/tests/runtime-production/samples/async-eager-derived/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	
+	let count = $state(0);
+	const delayedCount = $derived(await push(count));
+	const derivedCount = $derived(count);
+
+	let resolvers = [];
+
+	function push(value) {
+        if (!value) return value;
+		const { promise, resolve } = Promise.withResolvers();
+		resolvers.push(() => resolve(value));
+		return promise;
+	}
+</script>
+
+<button onclick={() => count += 1}>
+	clicks: {count} - {delayedCount} - {derivedCount}
+</button> 
+<button onclick={() => resolvers.shift()?.()}>shift</button>
+
+<p>{$state.eager(count) !== count} - {$state.eager(derivedCount) !== derivedCount}</p>
diff --git a/packages/svelte/tests/runtime-production/samples/keyed-each-unique-2/_config.js b/packages/svelte/tests/runtime-production/samples/keyed-each-unique-2/_config.js
new file mode 100644
index 0000000000..bc945876ea
--- /dev/null
+++ b/packages/svelte/tests/runtime-production/samples/keyed-each-unique-2/_config.js
@@ -0,0 +1,12 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		let button = target.querySelector('button');
+
+		button?.click();
+
+		assert.throws(flushSync, 'https://svelte.dev/e/each_key_duplicate');
+	}
+});
diff --git a/packages/svelte/tests/runtime-production/samples/keyed-each-unique-2/main.svelte b/packages/svelte/tests/runtime-production/samples/keyed-each-unique-2/main.svelte
new file mode 100644
index 0000000000..f8ba50d866
--- /dev/null
+++ b/packages/svelte/tests/runtime-production/samples/keyed-each-unique-2/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	let data = $state([1, 2, 3]);
+</script>
+
+<button onclick={() => data = [1, 1, 1]}>add</button>
+{#each data as d (d)}
+	{d}
+{/each}
diff --git a/packages/svelte/tests/runtime-production/samples/keyed-each-unique-3/_config.js b/packages/svelte/tests/runtime-production/samples/keyed-each-unique-3/_config.js
new file mode 100644
index 0000000000..7e1840200a
--- /dev/null
+++ b/packages/svelte/tests/runtime-production/samples/keyed-each-unique-3/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	error: 'each_key_duplicate'
+});
diff --git a/packages/svelte/tests/runtime-production/samples/keyed-each-unique-3/main.svelte b/packages/svelte/tests/runtime-production/samples/keyed-each-unique-3/main.svelte
new file mode 100644
index 0000000000..a05781bcb9
--- /dev/null
+++ b/packages/svelte/tests/runtime-production/samples/keyed-each-unique-3/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	let data = [1, 1, 1];
+</script>
+
+{#each data as d (d)}
+	{d}
+{/each}
diff --git a/packages/svelte/tests/runtime-production/samples/keyed-each-unique/_config.js b/packages/svelte/tests/runtime-production/samples/keyed-each-unique/_config.js
new file mode 100644
index 0000000000..bc945876ea
--- /dev/null
+++ b/packages/svelte/tests/runtime-production/samples/keyed-each-unique/_config.js
@@ -0,0 +1,12 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		let button = target.querySelector('button');
+
+		button?.click();
+
+		assert.throws(flushSync, 'https://svelte.dev/e/each_key_duplicate');
+	}
+});
diff --git a/packages/svelte/tests/runtime-production/samples/keyed-each-unique/main.svelte b/packages/svelte/tests/runtime-production/samples/keyed-each-unique/main.svelte
new file mode 100644
index 0000000000..3d52179372
--- /dev/null
+++ b/packages/svelte/tests/runtime-production/samples/keyed-each-unique/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	let data = $state([1, 2, 3, 4, 5]);
+</script>
+
+<button onclick={() => data = [1, 1, 3, 1]}>add</button>
+{#each data as d (d)}
+	{d}
+{/each}
diff --git a/packages/svelte/tests/runtime-production/samples/production-internals/Child.svelte b/packages/svelte/tests/runtime-production/samples/production-internals/Child.svelte
new file mode 100644
index 0000000000..36b548ab8b
--- /dev/null
+++ b/packages/svelte/tests/runtime-production/samples/production-internals/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	let { foo = $bindable(42) } = $props();
+</script>
+
+{foo};
diff --git a/packages/svelte/tests/runtime-production/samples/production-internals/_config.js b/packages/svelte/tests/runtime-production/samples/production-internals/_config.js
new file mode 100644
index 0000000000..6ac08f7012
--- /dev/null
+++ b/packages/svelte/tests/runtime-production/samples/production-internals/_config.js
@@ -0,0 +1,12 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ target }) {
+		let button = target.querySelector('button');
+
+		button?.click();
+
+		flushSync();
+	}
+});
diff --git a/packages/svelte/tests/runtime-production/samples/production-internals/main.svelte b/packages/svelte/tests/runtime-production/samples/production-internals/main.svelte
new file mode 100644
index 0000000000..0629644a01
--- /dev/null
+++ b/packages/svelte/tests/runtime-production/samples/production-internals/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	import Child from "./Child.svelte";
+
+	let foo;
+
+	function onerror(err) {
+		// re-throw if it isn't the production error
+		// do in a such way because config.error is checked via `includes`
+		if (err.message !== 'https://svelte.dev/e/props_invalid_value') {
+			throw err;
+		}
+	}
+</script>
+
+<svelte:boundary {onerror}>
+	<Child bind:foo />
+</svelte:boundary>
+
+
diff --git a/packages/svelte/tests/runtime-production/samples/production/main.svelte b/packages/svelte/tests/runtime-production/samples/production/main.svelte
new file mode 100644
index 0000000000..d9cff745d1
--- /dev/null
+++ b/packages/svelte/tests/runtime-production/samples/production/main.svelte
@@ -0,0 +1,7 @@
+<script>
+    import { DEV } from "esm-env";
+
+    if (DEV) {
+        throw new Error("Dev-only code must not run");
+    }
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-production/test.ts b/packages/svelte/tests/runtime-production/test.ts
new file mode 100644
index 0000000000..1c9a00ab83
--- /dev/null
+++ b/packages/svelte/tests/runtime-production/test.ts
@@ -0,0 +1,17 @@
+// @vitest-environment jsdom
+
+import { vi } from 'vitest';
+import { runtime_suite, ok } from '../runtime-legacy/shared';
+
+vi.mock('esm-env', async (importEnv) => {
+	return {
+		...(await importEnv()),
+		DEV: false
+	};
+});
+
+const { test, run } = runtime_suite(true);
+
+export { test, ok };
+
+await run(__dirname);
diff --git a/packages/svelte/tests/runtime-runes/samples/1000-reading-derived-effects/Component.svelte b/packages/svelte/tests/runtime-runes/samples/1000-reading-derived-effects/Component.svelte
new file mode 100644
index 0000000000..7a54323cb9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/1000-reading-derived-effects/Component.svelte
@@ -0,0 +1,7 @@
+<script>
+	const der = $derived(false);
+
+	$effect(() => {
+		der
+	});
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/1000-reading-derived-effects/_config.js b/packages/svelte/tests/runtime-runes/samples/1000-reading-derived-effects/_config.js
new file mode 100644
index 0000000000..2e4a27cf09
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/1000-reading-derived-effects/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	async test() {}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/1000-reading-derived-effects/main.svelte b/packages/svelte/tests/runtime-runes/samples/1000-reading-derived-effects/main.svelte
new file mode 100644
index 0000000000..bd326edfb9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/1000-reading-derived-effects/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Component from './Component.svelte';
+	const arr = Array.from({length: 10001});
+</script>
+
+{#each arr}
+	<Component />
+{/each}
diff --git a/packages/svelte/tests/runtime-runes/samples/abort-signal-derived-set-state/_config.js b/packages/svelte/tests/runtime-runes/samples/abort-signal-derived-set-state/_config.js
new file mode 100644
index 0000000000..2dacf188d7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/abort-signal-derived-set-state/_config.js
@@ -0,0 +1,12 @@
+import { ok, test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	async test({ assert, target, errors }) {
+		const btn = target.querySelector('button');
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.deepEqual(errors, []);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/abort-signal-derived-set-state/main.svelte b/packages/svelte/tests/runtime-runes/samples/abort-signal-derived-set-state/main.svelte
new file mode 100644
index 0000000000..ebefe38fb2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/abort-signal-derived-set-state/main.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { getAbortSignal } from "svelte";
+
+	let aborted = $state(0);
+
+	let count = $state(0);
+
+	let der = $derived.by(()=>{
+		const signal = getAbortSignal();
+
+		signal.addEventListener("abort", () => {
+			try{
+				aborted++;
+			}catch(e){
+				console.error(e);
+			}
+		});
+		return count;
+	})
+</script>
+
+{der}
+
+<button onclick={() => count++}></button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/animate-no-transition-events/_config.js b/packages/svelte/tests/runtime-runes/samples/animate-no-transition-events/_config.js
new file mode 100644
index 0000000000..3144b53687
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/animate-no-transition-events/_config.js
@@ -0,0 +1,31 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, raf, target, logs }) {
+		let divs = target.querySelectorAll('div');
+		divs.forEach((div) => {
+			// @ts-expect-error
+			div.getBoundingClientRect = function () {
+				// @ts-expect-error
+				const index = [...this.parentNode.children].indexOf(this);
+				const top = index * 30;
+
+				return {
+					left: 0,
+					right: 100,
+					top,
+					bottom: top + 20
+				};
+			};
+		});
+
+		const [btn] = target.querySelectorAll('button');
+		flushSync(() => btn.click());
+
+		raf.tick(1);
+		assert.deepEqual(logs, []);
+		raf.tick(100);
+		assert.deepEqual(logs, []);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/animate-no-transition-events/main.svelte b/packages/svelte/tests/runtime-runes/samples/animate-no-transition-events/main.svelte
new file mode 100644
index 0000000000..a6ba765cf4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/animate-no-transition-events/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	import { flip } from "svelte/animate";
+
+	let numbers = $state([0,1]);
+</script>
+
+<button onclick={() => numbers.reverse()}>reverse</button>
+
+{#each numbers as num (num)}
+	<div
+		onintrostart={() => console.log("intro start")}
+		onoutrostart={() => console.log("outro start")}
+		onintroend={() => console.log("intro end")}
+		onoutroend={() => console.log("outro end")}
+		animate:flip={{ duration: 100 }}
+	>
+		{num}
+	</div>
+{/each}
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/array-sort-in-effect/_config.js b/packages/svelte/tests/runtime-runes/samples/array-sort-in-effect/_config.js
new file mode 100644
index 0000000000..cbac36fee8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/array-sort-in-effect/_config.js
@@ -0,0 +1,52 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	/**
+	 * Ensure that sorting an array inside an $effect works correctly
+	 * and re-runs when the array changes (e.g., when items are added).
+	 */
+	test({ assert, target }) {
+		const button = target.querySelector('button');
+
+		// initial render — array should be sorted
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>add item</button>
+				<p>0</p>
+				<p>50</p>
+				<p>100</p>
+			`
+		);
+
+		// add first item (20); effect should re-run and sort the array
+		flushSync(() => button?.click());
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>add item</button>
+				<p>0</p>
+				<p>20</p>
+				<p>50</p>
+				<p>100</p>
+			`
+		);
+
+		// add second item (80); effect should re-run and sort the array
+		flushSync(() => button?.click());
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>add item</button>
+				<p>0</p>
+				<p>20</p>
+				<p>50</p>
+				<p>80</p>
+				<p>100</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/array-sort-in-effect/main.svelte b/packages/svelte/tests/runtime-runes/samples/array-sort-in-effect/main.svelte
new file mode 100644
index 0000000000..c529f67cf4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/array-sort-in-effect/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	let arr = $state([100, 0, 50]);
+	let nextValues = [20, 80];
+	let valueIndex = 0;
+
+	$effect(() => {
+		arr.sort((a, b) => a - b);
+	});
+
+	function addItem() {
+		if (valueIndex < nextValues.length) {
+			arr.push(nextValues[valueIndex]);
+			valueIndex++;
+		}
+	}
+</script>
+
+<button onclick={addItem}>add item</button>
+{#each arr as x}
+	<p>{x}</p>
+{/each}
diff --git a/packages/svelte/tests/runtime-runes/samples/assignment-value-stale-lazy-rhs-async/_config.js b/packages/svelte/tests/runtime-runes/samples/assignment-value-stale-lazy-rhs-async/_config.js
new file mode 100644
index 0000000000..9ad21cffb0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/assignment-value-stale-lazy-rhs-async/_config.js
@@ -0,0 +1,25 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+	async test({ assert, target }) {
+		const button = /** @type {HTMLElement} */ (target.querySelector('button'));
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>go</button><p>count1: 0, count2: 0</p>`);
+
+		button.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>go</button><p>count1: 1, count2: 1</p>`);
+
+		// additional tick necessary in legacy mode because it's using Promise.resolve() which finishes before the await in the component,
+		// causing the cache to not be set yet, which would result in count2 becoming 2
+		await tick();
+
+		button.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>go</button><p>count1: 2, count2: 1</p>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/assignment-value-stale-lazy-rhs-async/main.svelte b/packages/svelte/tests/runtime-runes/samples/assignment-value-stale-lazy-rhs-async/main.svelte
new file mode 100644
index 0000000000..be4d0ad2f4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/assignment-value-stale-lazy-rhs-async/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	let count1 = $state(0);
+	let count2 = $state(0);
+	let cache = $state({});
+
+	async function go() {
+		count1++;
+		const value = cache.value ??= await get_value();
+	}
+
+	function get_value() {
+		count2++;
+		return 42;
+	}
+</script>
+
+<button onclick={go}>go</button>
+<p>count1: {count1}, count2: {count2}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/assignment-value-stale-lazy-rhs/_config.js b/packages/svelte/tests/runtime-runes/samples/assignment-value-stale-lazy-rhs/_config.js
new file mode 100644
index 0000000000..729eb1813a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/assignment-value-stale-lazy-rhs/_config.js
@@ -0,0 +1,19 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+	async test({ assert, target }) {
+		const button = /** @type {HTMLElement} */ (target.querySelector('button'));
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>go</button><p>count1: 0, count2: 0</p>`);
+		button.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>go</button><p>count1: 1, count2: 1</p>`);
+		button.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>go</button><p>count1: 2, count2: 1</p>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/assignment-value-stale-lazy-rhs/main.svelte b/packages/svelte/tests/runtime-runes/samples/assignment-value-stale-lazy-rhs/main.svelte
new file mode 100644
index 0000000000..9937dc9713
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/assignment-value-stale-lazy-rhs/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	let count1 = $state(0);
+	let count2 = $state(0);
+	let cache = $state({});
+
+	function go() {
+		count1++;
+		const value = cache.value ??= get_value();
+	}
+
+	function get_value() {
+		count2++;
+		return 42;
+	}
+</script>
+
+<button onclick={go}>go</button>
+<p>count1: {count1}, count2: {count2}</p>
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..af49b1779c
--- /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 tick();
+		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-action-blockers/_config.js b/packages/svelte/tests/runtime-runes/samples/async-action-blockers/_config.js
new file mode 100644
index 0000000000..9d8aea3c17
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-action-blockers/_config.js
@@ -0,0 +1,11 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client', 'hydrate'],
+	async test({ assert, logs }) {
+		await tick();
+
+		assert.deepEqual(logs, ['ready']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-action-blockers/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-action-blockers/main.svelte
new file mode 100644
index 0000000000..c9a1477a00
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-action-blockers/main.svelte
@@ -0,0 +1,13 @@
+<script>
+
+	// Wait a macrotask to make sure the effect doesn't run before the microtask-Promise.resolve() resolves, masking a bug
+	await new Promise(r => setTimeout(r));
+
+	function run(_, arg) {
+		console.log(arg);
+	}
+
+	let value = $state('ready');
+</script>
+
+<div use:run={value}></div>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attach-blockers/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-attach-blockers/Child.svelte
new file mode 100644
index 0000000000..346f9c4a19
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attach-blockers/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+    let props = $props();
+</script>
+
+<div {...props}></div>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attach-blockers/_config.js b/packages/svelte/tests/runtime-runes/samples/async-attach-blockers/_config.js
new file mode 100644
index 0000000000..4c83634e70
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attach-blockers/_config.js
@@ -0,0 +1,11 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client', 'hydrate'],
+	async test({ assert, logs }) {
+		await tick();
+
+		assert.deepEqual(logs, ['ready', 'ready']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attach-blockers/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-attach-blockers/main.svelte
new file mode 100644
index 0000000000..30ba602350
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attach-blockers/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import Child from "./Child.svelte";
+
+	// Wait a macrotask to make sure the effect doesn't run before the microtask-Promise.resolve() resolves, masking a bug
+	await new Promise(r => setTimeout(r));
+
+	function createAttachment(value) {
+		return () => {
+			console.log(value);
+		};
+	}
+
+	let attachment = $state('ready');
+</script>
+
+<div {@attach createAttachment(attachment)}></div>
+<Child {@attach createAttachment(attachment)} />
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/Inner.svelte b/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/Inner.svelte
new file mode 100644
index 0000000000..99f885189b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/Inner.svelte
@@ -0,0 +1,4 @@
+<script>
+  let { children } = $props()
+</script>
+<div>{@render children?.()}</div>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/Outer.svelte b/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/Outer.svelte
new file mode 100644
index 0000000000..99f885189b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/Outer.svelte
@@ -0,0 +1,4 @@
+<script>
+  let { children } = $props()
+</script>
+<div>{@render children?.()}</div>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/Trigger.svelte b/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/Trigger.svelte
new file mode 100644
index 0000000000..fc434d748e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/Trigger.svelte
@@ -0,0 +1,7 @@
+<script lang='ts'>
+  import type { Attachment } from 'svelte/attachments'
+
+  export function action(): Attachment<HTMLElement> {
+    return ()=>{}
+  }
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/_config.js b/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/_config.js
new file mode 100644
index 0000000000..d77ba45ae4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/_config.js
@@ -0,0 +1,10 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['hydrate'],
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<div><div>foo</div></div>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/main.svelte
new file mode 100644
index 0000000000..6cfc73ca25
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attach-hydration-mismatch/main.svelte
@@ -0,0 +1,16 @@
+<script>
+  import Outer from './Outer.svelte'
+  import Inner from './Inner.svelte'
+  import Trigger from './Trigger.svelte'
+
+  const data = $derived(await Promise.resolve(['a', 'b']))
+  let trigger = $state()
+</script>
+
+<Outer>
+  <Inner {@attach trigger?.action}>
+    foo
+  </Inner>
+</Outer>
+
+<Trigger bind:this={trigger} />
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attachment-in-block/_config.js b/packages/svelte/tests/runtime-runes/samples/async-attachment-in-block/_config.js
new file mode 100644
index 0000000000..97da1bf835
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attachment-in-block/_config.js
@@ -0,0 +1,11 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client', 'hydrate'],
+
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<div>attachment ran</div>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attachment-in-block/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-attachment-in-block/main.svelte
new file mode 100644
index 0000000000..027b980bd1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attachment-in-block/main.svelte
@@ -0,0 +1,9 @@
+{#if await true}
+	<div
+		{@attach (node) => {
+			node.textContent = 'attachment ran';
+		}}
+	>
+		attachment did not run
+	</div>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attachment/Inner.svelte b/packages/svelte/tests/runtime-runes/samples/async-attachment/Inner.svelte
new file mode 100644
index 0000000000..b9b9d7a3d0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attachment/Inner.svelte
@@ -0,0 +1,10 @@
+<script>
+	function renderContent(node) {
+		node.textContent = 'foo';
+	}
+ 
+	const test = await Promise.resolve('foo');
+</script>
+
+<p>{test}</p>
+<div {@attach renderContent}></div>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attachment/_config.js b/packages/svelte/tests/runtime-runes/samples/async-attachment/_config.js
new file mode 100644
index 0000000000..f6b48b38b1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attachment/_config.js
@@ -0,0 +1,18 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<button>toggle</button> <p>foo</p><div>foo</div>');
+
+		const [toggle] = target.querySelectorAll('button');
+		toggle.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<button>toggle</button>');
+
+		toggle.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<button>toggle</button> <p>foo</p><div>foo</div>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attachment/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-attachment/main.svelte
new file mode 100644
index 0000000000..6cef6e8f5c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attachment/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Inner from './Inner.svelte';
+
+	let show = $state(true);
+</script>
+
+<svelte:boundary>
+	<button onclick={() => show = !show}>toggle</button>
+	{#if show}
+		<Inner />
+	{/if}
+
+	{#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..de1844fbea
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attribute-without-state/_config.js
@@ -0,0 +1,13 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<p>pending</p>
+	`,
+
+	async test({ assert, target }) {
+		await tick();
+		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-await-block-2/_config.js b/packages/svelte/tests/runtime-runes/samples/async-await-block-2/_config.js
new file mode 100644
index 0000000000..0a927e64f6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-await-block-2/_config.js
@@ -0,0 +1,24 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [incremet, resolve] = target.querySelectorAll('button');
+
+		incremet.click();
+		await tick();
+		incremet.click();
+		await tick();
+		resolve.click();
+		await tick();
+		resolve.click();
+		await tick();
+		resolve.click();
+		await tick();
+		resolve.click();
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, '<button>increment</button> <button>resolve</button> 4 4 1');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-await-block-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-await-block-2/main.svelte
new file mode 100644
index 0000000000..b619c6a949
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-await-block-2/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	let count = $state(0);
+
+	const queue = [];
+
+	function push(v) {
+		if (v === 0) return v;
+
+		return new Promise((fulfil) => queue.push(() => fulfil(v)));
+	}
+
+	async function request(v) {
+		const result = $derived(await push(v));
+		return result + count;
+	}
+</script>
+
+<button onclick={() => count++}>increment</button>
+<button onclick={() => queue.shift()?.()}>resolve</button>
+{#await request(count) then result}{result}{/await}
+{#await await push(count) + count then result}{result}{/await}
+{#await await 1 then result}{result}{/await}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-await-block/_config.js b/packages/svelte/tests/runtime-runes/samples/async-await-block/_config.js
new file mode 100644
index 0000000000..1f354a5175
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-await-block/_config.js
@@ -0,0 +1,9 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<p>1</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-await-block/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-await-block/main.svelte
new file mode 100644
index 0000000000..d746cd979c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-await-block/main.svelte
@@ -0,0 +1,7 @@
+<script>
+    let foo = $derived(await 1);
+</script>
+
+{#await foo then x}
+    <p>{x}</p>
+{/await}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-await-store-mutate/_config.js b/packages/svelte/tests/runtime-runes/samples/async-await-store-mutate/_config.js
new file mode 100644
index 0000000000..e89065865f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-await-store-mutate/_config.js
@@ -0,0 +1,24 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+// ensure in-place object mutations stay reactive in async
+export default test({
+	skip_no_async: true,
+	async test({ assert, target }) {
+		const button = /** @type {HTMLElement} */ (target.querySelector('button'));
+
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, `<p>count: 1, computed: 10</p><button>mutate</button>`);
+
+		button.click();
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, `<p>count: 2, computed: 20</p><button>mutate</button>`);
+
+		button.click();
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, `<p>count: 3, computed: 30</p><button>mutate</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-await-store-mutate/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-await-store-mutate/main.svelte
new file mode 100644
index 0000000000..327c775d6e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-await-store-mutate/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	const data = writable({ count: 1 });
+
+	function mutate_count() {
+		data.update(d => {
+			d.count++;
+			return d;
+		});
+	}
+
+	async function compute(d) {
+		return Promise.resolve(d.count * 10);
+	}
+</script>
+
+<svelte:boundary>
+	<p>count: {$data.count}, computed: {await compute($data)}</p>
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
+
+<button onclick={mutate_count}>mutate</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-await/_config.js b/packages/svelte/tests/runtime-runes/samples/async-await/_config.js
new file mode 100644
index 0000000000..dda6a7a895
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-await/_config.js
@@ -0,0 +1,43 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [reset, one, two, reject] = target.querySelectorAll('button');
+
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>reset</button><button>one</button><button>two</button><button>reject</button> waiting'
+		);
+
+		one.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>reset</button><button>one</button><button>two</button><button>reject</button> one_res'
+		);
+
+		reset.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>reset</button><button>one</button><button>two</button><button>reject</button> waiting'
+		);
+
+		two.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>reset</button><button>one</button><button>two</button><button>reject</button> two_res'
+		);
+
+		reset.click();
+		reject.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>reset</button><button>one</button><button>two</button><button>reject</button> reject_catch'
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-await/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-await/main.svelte
new file mode 100644
index 0000000000..8673e45414
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-await/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => deferred = Promise.withResolvers()}>reset</button>
+<button onclick={() => deferred.resolve("one")}>one</button>
+<button onclick={() => deferred.resolve("two")}>two</button>
+<button onclick={() => deferred.reject("reject")}>reject</button>
+
+<svelte:boundary>
+	{#await await deferred.promise + "_res"}
+		waiting
+	{:then res}
+		{res}
+	{:catch err}
+		{err}_catch
+	{/await}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-batch-merge-effect/_config.js b/packages/svelte/tests/runtime-runes/samples/async-batch-merge-effect/_config.js
new file mode 100644
index 0000000000..c2be623de2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-batch-merge-effect/_config.js
@@ -0,0 +1,25 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [x, x_y, pop] = target.querySelectorAll('button');
+
+		x.click();
+		await tick();
+		x_y.click();
+		await tick();
+		pop.click();
+		await tick();
+		pop.click();
+		await tick();
+		pop.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>x</button> <button>x/y</button> <button>pop</button> 2 1 1'
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-batch-merge-effect/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-batch-merge-effect/main.svelte
new file mode 100644
index 0000000000..61efd4fca0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-batch-merge-effect/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	let x = $state(0);
+	let y = $state(0);
+
+	const queued = [];
+
+	function push(v) {
+		if (v === 0) return v;
+
+		return new Promise((fulfil) => {
+			queued.push(() => fulfil(v));
+		});
+	}
+</script>
+
+<button onclick={() => x++}>x</button>
+<button onclick={() => {x++;y++}}>x/y</button>
+<button onclick={() => (queued.pop()?.())}>pop</button>
+
+{await push(x)} {await push(y)}
+
+{#if true}
+	{y}
+{/if}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/async-batch-order/_config.js b/packages/svelte/tests/runtime-runes/samples/async-batch-order/_config.js
new file mode 100644
index 0000000000..53cceb9d54
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-batch-order/_config.js
@@ -0,0 +1,30 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [increment, shift, middle] = target.querySelectorAll('button');
+		const [div] = target.querySelectorAll('div');
+
+		increment.click();
+		await tick();
+		increment.click();
+		await tick();
+		increment.click();
+		await tick();
+		middle.click(); // resolve the second increment which will make the if block go away and the first batch discarded
+		await tick();
+		assert.htmlEqual(div.innerHTML, '2 2');
+
+		shift.click();
+		await tick();
+		shift.click();
+		await tick();
+		shift.click();
+		await tick();
+		shift.click();
+		await tick();
+		assert.htmlEqual(div.innerHTML, '3 3');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-batch-order/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-batch-order/main.svelte
new file mode 100644
index 0000000000..0289380d78
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-batch-order/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	let a = $state(0);
+
+	const deferred = [];
+
+	function delay(value) {
+		if (!value) return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+<div>
+	{a} {await delay(a)}
+	{#if a < 2}
+		{await delay(a)}
+	{/if}
+</div>
+
+<button onclick={() => {a++;}}>a++</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred[2]()}>middle</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-batch-timing/Component.svelte b/packages/svelte/tests/runtime-runes/samples/async-batch-timing/Component.svelte
new file mode 100644
index 0000000000..275860ad9c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-batch-timing/Component.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	let { ref } = $props();
+
+	let tick = $state(0);
+	let ref_exists = $state(true);
+ 
+	$effect(() => {
+		tick;
+		ref_exists = ref !== null;
+	});
+</script>
+
+<p>{ref_exists}</p>
+<button onclick={() => tick++}>check</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-batch-timing/_config.js b/packages/svelte/tests/runtime-runes/samples/async-batch-timing/_config.js
new file mode 100644
index 0000000000..1da4fdc0bd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-batch-timing/_config.js
@@ -0,0 +1,23 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+// This test regresses against batches deactivating other batches than themselves
+export default test({
+	async test({ assert, target }) {
+		await tick(); // settle initial await
+
+		const button = target.querySelector('button');
+
+		button?.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<div>div</div>
+				<p>true</p>
+				<button>check</button>
+				<p></p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-batch-timing/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-batch-timing/main.svelte
new file mode 100644
index 0000000000..8b582f41d0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-batch-timing/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Component from "./Component.svelte";
+
+	let ref = $state(null);
+
+	let foo = $derived(await 1);
+</script>
+
+<div bind:this={ref}>div</div>
+
+<Component {ref} />
+
+{#if foo} 
+	<p></p>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-bind-factory-function-remote/_config.js b/packages/svelte/tests/runtime-runes/samples/async-bind-factory-function-remote/_config.js
new file mode 100644
index 0000000000..080e2d278c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-bind-factory-function-remote/_config.js
@@ -0,0 +1,14 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['async-server', 'client', 'hydrate'],
+	ssrHtml: 'true true true true true',
+
+	async test({ assert, target }) {
+		await new Promise((resolve) => setTimeout(resolve, 10));
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, 'true true true true true');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-bind-factory-function-remote/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-bind-factory-function-remote/main.svelte
new file mode 100644
index 0000000000..5f79a14830
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-bind-factory-function-remote/main.svelte
@@ -0,0 +1,41 @@
+<script>
+	let checked = $derived(await new Promise((r) => setTimeout(() => r(true)), 10));
+
+	const checkedFactory = () => {
+		return () => checked;
+	}
+
+	function indirectCheckedFactory() {
+		return checkedFactory();
+	}
+
+	function callFactory(factory) {
+		return factory();
+	}
+
+	function indirectCallFactory() {
+		return callFactory(indirectCheckedFactory);
+	}
+
+	function indirectChecked2() {
+		const indirect = () => checkedFactory()();
+		return indirect;
+	}
+</script>
+
+<!-- force into separate effects -->
+{#if true}
+	{checkedFactory()()}
+{/if}
+{#if true}
+	{indirectCheckedFactory()()}
+{/if}
+{#if true}
+	{callFactory(checkedFactory)()}
+{/if}
+{#if true}
+	{indirectCallFactory()()}
+{/if}
+{#if true}
+	{indirectChecked2()()}
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-bindable-prop/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-bindable-prop/Child.svelte
new file mode 100644
index 0000000000..4214a85f37
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-bindable-prop/Child.svelte
@@ -0,0 +1,8 @@
+<script>
+	await Promise.resolve();
+	let { value = $bindable("test") } = $props();
+</script>
+
+<button onclick={() => value = 'updated'}>update</button>
+{value}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/async-bindable-prop/_config.js b/packages/svelte/tests/runtime-runes/samples/async-bindable-prop/_config.js
new file mode 100644
index 0000000000..a4ff70a8dc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-bindable-prop/_config.js
@@ -0,0 +1,35 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['async-server', 'client', 'hydrate'],
+	ssrHtml: `
+		<button>update</button> initial <p>initial</p>
+	`,
+
+	async test({ assert, target }) {
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>update</button>
+				initial
+				<p>initial</p>
+			`
+		);
+
+		const button = target.querySelector('button');
+		button?.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>update</button>
+				updated
+				<p>updated</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-bindable-prop/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-bindable-prop/main.svelte
new file mode 100644
index 0000000000..e053fdda6a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-bindable-prop/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Child from './Child.svelte';
+
+	let value = $state('initial');
+</script>
+
+<Child bind:value />
+<p>{value}</p>
+
diff --git a/packages/svelte/tests/runtime-runes/samples/async-binding-after-await/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-binding-after-await/Child.svelte
new file mode 100644
index 0000000000..6cb93933ec
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-binding-after-await/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	let { value = $bindable() } = $props();
+</script>
+
+{value}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-binding-after-await/_config.js b/packages/svelte/tests/runtime-runes/samples/async-binding-after-await/_config.js
new file mode 100644
index 0000000000..3068cace2d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-binding-after-await/_config.js
@@ -0,0 +1,14 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['async-server', 'client', 'hydrate'],
+	ssrHtml: 'value value <div>false</div> <input value="value"> <input value="value">',
+
+	async test({ assert, target, logs }) {
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, 'value value <div>true</div> <input> <input>');
+		assert.deepEqual(logs, [false, 'value', true, 'value']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-binding-after-await/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-binding-after-await/main.svelte
new file mode 100644
index 0000000000..9e4096581e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-binding-after-await/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import Child from './Child.svelte';
+	
+	await Promise.resolve();
+
+	let ref = $state(null);
+
+	$effect(() => console.log(!!ref, value))
+
+	let value = $state('value');
+</script>
+
+<Child bind:value />
+<Child bind:value={() => value, v => value = v} />
+<div bind:this={ref}>{!!ref}</div>
+<input bind:value />
+<input bind:value={() => value, v => value = v} />
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-binding-update-while-focused-2/_config.js b/packages/svelte/tests/runtime-runes/samples/async-binding-update-while-focused-2/_config.js
new file mode 100644
index 0000000000..76a2032c7a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-binding-update-while-focused-2/_config.js
@@ -0,0 +1,38 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [shift] = target.querySelectorAll('button');
+		shift.click();
+		await tick();
+
+		const [input] = target.querySelectorAll('input');
+
+		input.focus();
+		input.value = '1';
+		input.dispatchEvent(new InputEvent('input', { bubbles: true }));
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, `<button>shift</button><input type="number" /> <p>0</p>`);
+		assert.equal(input.value, '1');
+
+		input.focus();
+		input.value = '2';
+		input.dispatchEvent(new InputEvent('input', { bubbles: true }));
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, `<button>shift</button><input type="number" /> <p>0</p>`);
+		assert.equal(input.value, '2');
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>shift</button><input type="number" /> <p>1</p>`);
+		assert.equal(input.value, '2');
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>shift</button><input type="number" /> <p>2</p>`);
+		assert.equal(input.value, '2');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-binding-update-while-focused-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-binding-update-while-focused-2/main.svelte
new file mode 100644
index 0000000000..c0e4d862a8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-binding-update-while-focused-2/main.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	let count = $state(0);
+
+	let resolvers = [];
+	let input;
+
+	function push(value) {
+		const { promise, resolve } = Promise.withResolvers();
+		resolvers.push(() => resolve(value));
+		return promise;
+	}
+</script>
+
+<button onclick={() => {
+	input?.focus();
+	resolvers.shift()?.();
+}}>shift</button>
+
+<svelte:boundary>
+	<input bind:this={input} type="number" bind:value={count} />
+	<p>{await push(count)}</p>
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-binding-update-while-focused-3/_config.js b/packages/svelte/tests/runtime-runes/samples/async-binding-update-while-focused-3/_config.js
new file mode 100644
index 0000000000..7fddca0d58
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-binding-update-while-focused-3/_config.js
@@ -0,0 +1,82 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [shift] = target.querySelectorAll('button');
+		shift.click();
+		await tick();
+
+		const [select] = target.querySelectorAll('select');
+
+		select.focus();
+		select.value = 'three';
+		select.dispatchEvent(new InputEvent('change', { bubbles: true }));
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>shift</button>
+				<select>
+					<option>one</option>
+					<option>two</option>
+					<option>three</option>
+				</select>
+				<p>two</p>
+			`
+		);
+		assert.equal(select.value, 'three');
+
+		select.focus();
+		select.value = 'one';
+		select.dispatchEvent(new InputEvent('change', { bubbles: true }));
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>shift</button>
+				<select>
+					<option>one</option>
+					<option>two</option>
+					<option>three</option>
+				</select>
+				<p>two</p>
+			`
+		);
+		assert.equal(select.value, 'one');
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>shift</button>
+				<select>
+					<option>one</option>
+					<option>two</option>
+					<option>three</option>
+				</select>
+				<p>three</p>
+			`
+		);
+		assert.equal(select.value, 'one');
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>shift</button>
+				<select>
+					<option>one</option>
+					<option>two</option>
+					<option>three</option>
+				</select>
+				<p>one</p>
+			`
+		);
+		assert.equal(select.value, 'one');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-binding-update-while-focused-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-binding-update-while-focused-3/main.svelte
new file mode 100644
index 0000000000..8f5e2862eb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-binding-update-while-focused-3/main.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	let selected = $state('two');
+
+	let resolvers = [];
+	let select;
+
+	function push(value) {
+		const { promise, resolve } = Promise.withResolvers();
+		resolvers.push(() => resolve(value));
+		return promise;
+	}
+</script>
+
+<button onclick={() => {
+	select?.focus();
+	resolvers.shift()?.();
+}}>shift</button>
+
+<svelte:boundary>
+	<select bind:this={select} bind:value={selected}>
+		<option>one</option>
+		<option>two</option>
+		<option>three</option>
+	</select>
+
+	<p>{await push(selected)}</p>
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-binding-update-while-focused/_config.js b/packages/svelte/tests/runtime-runes/samples/async-binding-update-while-focused/_config.js
new file mode 100644
index 0000000000..782ae945f9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-binding-update-while-focused/_config.js
@@ -0,0 +1,26 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+
+		const [input] = target.querySelectorAll('input');
+
+		input.focus();
+		input.value = '3';
+		input.dispatchEvent(new InputEvent('input', { bubbles: true }));
+		await tick();
+
+		assert.equal(input.value, '3');
+		assert.htmlEqual(target.innerHTML, `<p>3</p> <input type="number" />`);
+
+		input.focus();
+		input.value = '1';
+		input.dispatchEvent(new InputEvent('input', { bubbles: true }));
+		await tick();
+
+		assert.equal(input.value, '2');
+		assert.htmlEqual(target.innerHTML, `<p>2</p> <input type="number" />`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-binding-update-while-focused/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-binding-update-while-focused/main.svelte
new file mode 100644
index 0000000000..763ce6ebf0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-binding-update-while-focused/main.svelte
@@ -0,0 +1,27 @@
+<script>
+	let value = $state(0)
+	const min = 2
+	const max = 5
+
+	$effect(() => {
+		setValue()
+	})
+
+	function setValue() {
+		if (value < min) {
+			value = min
+		}
+		if (value > max) {
+			value = max
+		}
+	}
+</script>
+
+<svelte:boundary>
+	<p>{await value}</p>
+	<input type="number" bind:value />
+
+	{#snippet pending()}
+		<p>loading...</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-effect-queueing/A.svelte b/packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/A.svelte
new file mode 100644
index 0000000000..7971deff5f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/A.svelte
@@ -0,0 +1,15 @@
+<script>
+	let open = $state(false);
+	let menuOptionsEl = $state(null);
+</script>
+
+<button onclick={() => open = !open}>
+	toggle
+
+		{#if open}
+			<!-- bind:this uses effect, which is scheduled, causing queued_root_effects to be filled again -->
+			<span bind:this={menuOptionsEl}>
+				A
+			</span>
+		{/if}
+</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/B.svelte b/packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/B.svelte
new file mode 100644
index 0000000000..7371f47a6f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/B.svelte
@@ -0,0 +1 @@
+B
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/_config.js b/packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/_config.js
new file mode 100644
index 0000000000..789cdfaa02
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/_config.js
@@ -0,0 +1,63 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [fork, commit, toggle] = target.querySelectorAll('button');
+
+		fork.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>fork</button>
+			<button>commit</button>
+			<button>toggle</button>
+		`
+		);
+
+		toggle.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>fork</button>
+			<button>commit</button>
+			<button>toggle <span>A</span></button>
+		`
+		);
+
+		toggle.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>fork</button>
+			<button>commit</button>
+			<button>toggle</button>
+		`
+		);
+
+		toggle.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>fork</button>
+			<button>commit</button>
+			<button>toggle <span>A</span></button>
+		`
+		);
+
+		commit.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>fork</button>
+			<button>commit</button>
+			B
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/main.svelte
new file mode 100644
index 0000000000..7342a37f05
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/main.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { fork } from 'svelte';
+	import A from './A.svelte';
+	import B from './B.svelte';
+
+	let open = $state(true);
+	let f;
+</script>
+
+
+<button onclick={() => {
+	f = fork(() => {
+		open = !open;
+	})
+}}>fork</button>
+<button onclick={() => {
+	f.commit()
+}}>commit</button>
+
+{#if open}
+	<A />
+{:else}
+	<B />
+{/if}
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..ca5fd9ca89
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-block-reject-each-during-init/_config.js
@@ -0,0 +1,30 @@
+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>
+			`
+		);
+	},
+
+	expect_unhandled_rejections: true
+});
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-block-resolve/_config.js b/packages/svelte/tests/runtime-runes/samples/async-block-resolve/_config.js
new file mode 100644
index 0000000000..ee403290bc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-block-resolve/_config.js
@@ -0,0 +1,63 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [increment, shift] = target.querySelectorAll('button');
+
+		shift.click();
+		await tick();
+
+		shift.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>0</button>
+				<button>shift</button>
+				<p>even</p>
+				<p>0</p>
+			`
+		);
+
+		increment.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>1</button>
+				<button>shift</button>
+				<p>even</p>
+				<p>0</p>
+			`
+		);
+
+		shift.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>1</button>
+				<button>shift</button>
+				<p>odd</p>
+				<p>loading...</p>
+			`
+		);
+
+		shift.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>1</button>
+				<button>shift</button>
+				<p>odd</p>
+				<p>1</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-block-resolve/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-block-resolve/main.svelte
new file mode 100644
index 0000000000..73fe83889a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-block-resolve/main.svelte
@@ -0,0 +1,36 @@
+<script>
+	let resolvers = [];
+
+	function push(value) {
+		const { promise, resolve } = Promise.withResolvers();
+		resolvers.push(() => resolve(value));
+		return promise;
+	}
+
+	let count = $state(0);
+</script>
+
+<button onclick={() => count += 1}>{$state.eager(count)}</button>
+<button onclick={() => resolvers.shift()?.()}>shift</button>
+
+<svelte:boundary>
+	{#if await push(count) % 2 === 0}
+		<p>even</p>
+	{:else}
+		<p>odd</p>
+	{/if}
+
+	{#key count}
+		<svelte:boundary>
+			<p>{await push(count)}</p>
+
+			{#snippet pending()}
+				<p>loading...</p>
+			{/snippet}
+		</svelte:boundary>
+	{/key}
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-boundary-nav-race/_config.js b/packages/svelte/tests/runtime-runes/samples/async-boundary-nav-race/_config.js
new file mode 100644
index 0000000000..940299618e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-boundary-nav-race/_config.js
@@ -0,0 +1,82 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>a</button>
+		<button>b</button>
+		<button>resolve a</button>
+		<button>resolve b</button>
+		<p>pending a</p>
+	`,
+	async test({ assert, target }) {
+		const [a, b, resolve_a, resolve_b] = target.querySelectorAll('button');
+
+		resolve_a.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>a</button>
+				<button>b</button>
+				<button>resolve a</button>
+				<button>resolve b</button>
+				<p>page a</p>
+			`
+		);
+
+		b.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>a</button>
+				<button>b</button>
+				<button>resolve a</button>
+				<button>resolve b</button>
+				<p>pending b</p>
+			`
+		);
+
+		a.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>a</button>
+				<button>b</button>
+				<button>resolve a</button>
+				<button>resolve b</button>
+				<p>pending a</p>
+			`
+		);
+
+		resolve_b.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>a</button>
+				<button>b</button>
+				<button>resolve a</button>
+				<button>resolve b</button>
+				<p>pending a</p>
+			`
+		);
+
+		resolve_a.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>a</button>
+				<button>b</button>
+				<button>resolve a</button>
+				<button>resolve b</button>
+				<p>page a</p>
+			`
+		);
+
+		await new Promise((r) => setTimeout(r, 100));
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-boundary-nav-race/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-boundary-nav-race/main.svelte
new file mode 100644
index 0000000000..a6554f5aa6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-boundary-nav-race/main.svelte
@@ -0,0 +1,52 @@
+<script>
+	let page = $state('a');
+
+	/** @type {Array<() => void>} */
+	const a = [];
+	/** @type {Array<() => void>} */
+	const b = [];
+
+	function gate(next) {
+		const deferred = Promise.withResolvers();
+
+		if (next === 'a') a.push(deferred.resolve);
+		else b.push(deferred.resolve);
+
+		return deferred.promise;
+	}
+
+	function nav(next) {
+		page = next;
+	}
+
+	const to_render = $derived(page === 'a' ? snippet_a : snippet_b);
+</script>
+
+<button onclick={() => nav('a')}>a</button>
+<button onclick={() => nav('b')}>b</button>
+<button onclick={() => a.shift()?.()}>resolve a</button>
+<button onclick={() => b.shift()?.()}>resolve b</button>
+ 
+{#snippet snippet_a()}
+	<svelte:boundary>
+		{@const _a = await gate('a')}
+		<p>page a</p>
+
+		{#snippet pending()}
+			<p>pending a</p>
+		{/snippet}
+	</svelte:boundary>
+{/snippet}
+
+{#snippet snippet_b()}
+	<svelte:boundary>
+		{@const _b = await gate('b')}
+		<p>page b</p>
+
+		{#snippet pending()}
+			<p>pending b</p>
+		{/snippet}
+	</svelte:boundary>
+{/snippet}
+
+{@render to_render()} 
diff --git a/packages/svelte/tests/runtime-runes/samples/async-boundary-pending-live/_config.js b/packages/svelte/tests/runtime-runes/samples/async-boundary-pending-live/_config.js
new file mode 100644
index 0000000000..1d860cded5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-boundary-pending-live/_config.js
@@ -0,0 +1,38 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>increment</button>
+		<button>shift</button>
+		<p>0</p>
+	`,
+
+	async test({ assert, target }) {
+		const [increment, shift] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<p>1</p>
+			`
+		);
+
+		shift.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<p>resolved</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-boundary-pending-live/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-boundary-pending-live/main.svelte
new file mode 100644
index 0000000000..764fd20a51
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-boundary-pending-live/main.svelte
@@ -0,0 +1,31 @@
+<script>
+	let resolvers = [];
+
+	function push(value) {
+		const deferred = Promise.withResolvers();
+		resolvers.push(() => deferred.resolve(value));
+		return deferred.promise;
+	}
+
+	function shift() {
+		resolvers.shift()?.();
+	}
+
+	let count = $state(0);
+</script>
+
+<button onclick={() => count += 1}>
+	increment
+</button>
+
+<button onclick={shift}>
+	shift
+</button>
+
+<svelte:boundary>
+	<p>{await push('resolved')}</p>
+
+	{#snippet pending()}
+		<p>{count}</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-boundary-reset/Test.svelte b/packages/svelte/tests/runtime-runes/samples/async-boundary-reset/Test.svelte
new file mode 100644
index 0000000000..2232a094cb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-boundary-reset/Test.svelte
@@ -0,0 +1,15 @@
+<script>
+	async function c(a) {
+			await Promise.resolve()
+			if (a) {
+				throw new Error('error');
+			} else {
+				return 'ok';
+			}
+	}
+
+	let a = $state();
+	let b = $derived(await c(a));
+</script>
+
+<button onclick={() => a = 1}>{b}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-boundary-reset/_config.js b/packages/svelte/tests/runtime-runes/samples/async-boundary-reset/_config.js
new file mode 100644
index 0000000000..19b273175b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-boundary-reset/_config.js
@@ -0,0 +1,19 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		let [btn] = target.querySelectorAll('button');
+		btn.click();
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, '<button>reset</button>');
+
+		[btn] = target.querySelectorAll('button');
+		btn.click();
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, '<button>ok</button>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-boundary-reset/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-boundary-reset/main.svelte
new file mode 100644
index 0000000000..42242f26d6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-boundary-reset/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Test from './Test.svelte';
+</script>
+
+<svelte:boundary>
+	<Test />
+
+	{#snippet pending()}pending{/snippet}
+	{#snippet failed(_, reset)}
+		<button onclick={reset}>reset</button>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-boundary-update-while-pending/_config.js b/packages/svelte/tests/runtime-runes/samples/async-boundary-update-while-pending/_config.js
new file mode 100644
index 0000000000..e444aa8f9b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-boundary-update-while-pending/_config.js
@@ -0,0 +1,51 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [shift, increment] = target.querySelectorAll('button');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>shift</button>
+				<button>increment</button>
+				loading
+			`
+		);
+
+		increment.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>shift</button>
+				<button>increment</button>
+				loading
+			`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>shift</button>
+				<button>increment</button>
+				loading
+			`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>shift</button>
+				<button>increment</button>
+				1
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-boundary-update-while-pending/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-boundary-update-while-pending/main.svelte
new file mode 100644
index 0000000000..c5a32dc4b9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-boundary-update-while-pending/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	let queue = [];
+
+	function push(value) {
+		const deferred = Promise.withResolvers();
+		queue.push(() => deferred.resolve(value));
+		return deferred.promise;
+	}
+
+	let count = $state(0);
+</script>
+
+<button onclick={() => queue.shift()()}>shift</button>
+<button onclick={() => count++}>increment</button>
+
+<svelte:boundary>
+	{await push(count)}
+	{#snippet pending()}loading{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-branch-merge-obsolete/_config.js b/packages/svelte/tests/runtime-runes/samples/async-branch-merge-obsolete/_config.js
new file mode 100644
index 0000000000..faf1ff7f6b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-branch-merge-obsolete/_config.js
@@ -0,0 +1,17 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [increment] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+		increment.click();
+		await tick();
+		increment.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<button>increment</button> done');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-branch-merge-obsolete/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-branch-merge-obsolete/main.svelte
new file mode 100644
index 0000000000..4780442293
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-branch-merge-obsolete/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	let count = $state(0);
+
+	const queued = [];
+
+	function push(v) {
+		if (v === 0) return v;
+
+		return new Promise((fulfil) => {
+			queued.push(() => fulfil(v));
+		});
+	}
+</script>
+
+<button onclick={() => count++}>increment</button>
+
+{#if count < 3}
+	{await push(count)}
+{:else}
+	done
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-branch-reintro/_config.js b/packages/svelte/tests/runtime-runes/samples/async-branch-reintro/_config.js
new file mode 100644
index 0000000000..928db008e6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-branch-reintro/_config.js
@@ -0,0 +1,58 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [inc_count, inc_both, shift] = target.querySelectorAll('button');
+
+		inc_both.click();
+		await tick();
+		inc_count.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>increment count</button>
+			<button>increment both</button>
+			<button>shift</button>
+			0
+			0
+			<button>0</button>
+		`
+		);
+
+		shift.click();
+		await tick();
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment count</button>
+				<button>increment both</button>
+				<button>shift</button>
+				1
+				2
+				<button>1</button>
+			`
+		);
+
+		const button = /** @type {HTMLButtonElement} */ (target.querySelector('button:last-child'));
+		button.click();
+		await tick();
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment count</button>
+				<button>increment both</button>
+				<button>shift</button>
+				2
+				2
+				<button>2</button>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-branch-reintro/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-branch-reintro/main.svelte
new file mode 100644
index 0000000000..92b7669fa9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-branch-reintro/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	let count = $state(0);
+	let other = $state(0);
+	let queued = [];
+
+	function push(v) {
+		if (!v) return v;
+
+		return new Promise((resolve) => {
+			queued.push(() => resolve(v));
+		});
+	}
+</script>
+
+<button onclick={() => count++}>increment count</button>
+<button onclick={() => {count++;other++}}>increment both</button>
+<button onclick={() => queued.shift()?.()}>shift</button>
+
+{await push(other)}
+{#if count % 2 === 0}
+	{await push(count)}
+	<button onclick={() => other++}>{other}</button>
+{/if}
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-clear-batch-between-runs/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-clear-batch-between-runs/Child.svelte
new file mode 100644
index 0000000000..d156cc99af
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-clear-batch-between-runs/Child.svelte
@@ -0,0 +1,15 @@
+<script>
+	let { x, y, deferred } = $props();
+
+	y = await deferred.promise;
+</script>
+
+<p>x: {x}</p>
+
+<svelte:boundary>
+	{#snippet pending()}
+		<p>Loading...</p>
+	{/snippet}
+
+	<p>y: {y}</p>
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-clear-batch-between-runs/_config.js b/packages/svelte/tests/runtime-runes/samples/async-clear-batch-between-runs/_config.js
new file mode 100644
index 0000000000..fbf003f8e2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-clear-batch-between-runs/_config.js
@@ -0,0 +1,32 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>x</button>
+		<button>y</button>
+		<p>loading...</p>
+	`,
+
+	async test({ assert, target }) {
+		await tick();
+
+		const [button1, button2] = target.querySelectorAll('button');
+
+		button1.click();
+		await tick();
+
+		button2.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>x</button>
+				<button>y</button>
+				<p>x: x2</p>
+				<p>y: y2</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-clear-batch-between-runs/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-clear-batch-between-runs/main.svelte
new file mode 100644
index 0000000000..57ab32a6ca
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-clear-batch-between-runs/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	import Child from './Child.svelte';
+
+	let x = $state('x1');
+	let y = $state('y1');
+
+	const deferred = Promise.withResolvers();
+</script>
+
+<button onclick={() => x = 'x2'}>x</button>
+<button onclick={() => deferred.resolve('y2')}>y</button>
+
+<svelte:boundary>
+	<Child {x} {y} {deferred} />
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-commit-preserve-new-batch/_config.js b/packages/svelte/tests/runtime-runes/samples/async-commit-preserve-new-batch/_config.js
new file mode 100644
index 0000000000..922feed515
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-commit-preserve-new-batch/_config.js
@@ -0,0 +1,19 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+// Tests that batch.#commit() does not null out a potentially new current_batch
+export default test({
+	skip_initial_flushSync: true, // test that the initial batch is flushed without an explicit flushSync() call
+	async test({ assert, target }) {
+		await tick();
+
+		const [button] = target.querySelectorAll('button');
+		const [updates] = target.querySelectorAll('p');
+
+		assert.htmlEqual(updates.innerHTML, 'false');
+
+		button.click();
+		await tick();
+		assert.htmlEqual(updates.innerHTML, 'true');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-commit-preserve-new-batch/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-commit-preserve-new-batch/main.svelte
new file mode 100644
index 0000000000..f7dae33b7e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-commit-preserve-new-batch/main.svelte
@@ -0,0 +1,30 @@
+<script>
+	let count = $state(-1);
+	let payload = $state(false);
+	let updated = $state(false);
+
+	$effect(() => {
+		if (payload) {
+			updated = true;
+		}
+	});
+
+	function update() {
+		count = 0;
+		queueMicrotask(() => {
+			payload = true;
+		});
+	}
+</script>
+
+<button onclick={update}>update</button>
+
+<p>{updated}</p>
+
+<svelte:boundary>
+	{await new Promise(() => {})}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-component-exports/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-component-exports/Child.svelte
new file mode 100644
index 0000000000..d5ad4754fb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-component-exports/Child.svelte
@@ -0,0 +1,9 @@
+<script>
+	export function foo() {
+		console.log('foo');
+	}
+
+	const value = await Promise.resolve('bar');
+
+	export const bar = () => console.log(value);
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-component-exports/_config.js b/packages/svelte/tests/runtime-runes/samples/async-component-exports/_config.js
new file mode 100644
index 0000000000..a4e4f24360
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-component-exports/_config.js
@@ -0,0 +1,12 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		await tick();
+		const [log] = target.querySelectorAll('button');
+
+		log.click();
+		assert.deepEqual(logs, ['foo', 'bar']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-component-exports/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-component-exports/main.svelte
new file mode 100644
index 0000000000..9e4d07ddfe
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-component-exports/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Child from './Child.svelte';
+
+	let child;
+</script>
+
+<Child bind:this={child} />
+<button onclick={() => {
+	child.foo();
+	child.bar();
+}}>log</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-const-wait/_config.js b/packages/svelte/tests/runtime-runes/samples/async-const-wait/_config.js
new file mode 100644
index 0000000000..fe85c0393a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-const-wait/_config.js
@@ -0,0 +1,18 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+
+	props: {
+		a_promise: Promise.resolve(10),
+		b_promise: Promise.resolve(20)
+	},
+
+	async test({ assert, target }) {
+		await tick();
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, `<p>30</p>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-const-wait/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-const-wait/main.svelte
new file mode 100644
index 0000000000..b5e6d90f7c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-const-wait/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	let { a_promise, b_promise } = $props();
+</script>
+
+<svelte:boundary>
+	{@const a = await a_promise}
+	{#if true}
+		<svelte:boundary>
+			{@const b = await b_promise}
+			{#if true}
+				{@const sum = a + b}
+				<p>{sum}</p>
+			{/if}
+		</svelte:boundary>
+	{/if}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-const/_config.js b/packages/svelte/tests/runtime-runes/samples/async-const/_config.js
new file mode 100644
index 0000000000..0dd4b870d5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-const/_config.js
@@ -0,0 +1,13 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['async-server', 'client', 'hydrate'],
+	ssrHtml: `<h1>Hello, world!</h1> 5 01234 5 sync 6 5 0 10`,
+
+	async test({ assert, target }) {
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, `<h1>Hello, world!</h1> 5 01234 5 sync 6 5 0 10`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-const/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-const/main.svelte
new file mode 100644
index 0000000000..4212c59fdc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-const/main.svelte
@@ -0,0 +1,31 @@
+<script>
+	let name = $state('world');
+</script>
+
+<svelte:boundary>
+	{@const sync = 'sync'}
+	{@const number = await Promise.resolve(5)}
+	{@const after_async = number + 1}
+	{@const { length, 0: first } = await '01234'}
+
+	{#snippet greet()}
+		{@const greeting = await `Hello, ${name}!`}
+		<h1>{greeting}</h1>
+		{number}
+		{#if number > 4 && after_async && greeting}
+			{@const length = await number}
+			{#each { length }, index}
+				{@const i = await index}
+				{i}
+			{/each}
+		{/if}
+	{/snippet}
+
+	{@render greet()}
+	{number} {sync} {after_async} {length} {first}
+
+	{#if sync}
+		{@const double = number * 2}
+		{double}
+	{/if}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-context-after-await-const/_config.js b/packages/svelte/tests/runtime-runes/samples/async-context-after-await-const/_config.js
new file mode 100644
index 0000000000..6c202c1ed6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-context-after-await-const/_config.js
@@ -0,0 +1,11 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+// Tests that context is restored after await (const has to wait on a blocker), so that getContext etc work correctly
+export default test({
+	mode: ['hydrate', 'async-server', 'client'],
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, 'hi');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-context-after-await-const/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-context-after-await-const/main.svelte
new file mode 100644
index 0000000000..be2d0dc7be
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-context-after-await-const/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { getContext } from 'svelte';
+	const _unused = $derived(await 1);
+	//This must be created after any $derived(await...)
+	const bar = $derived(getContext('') ?? 'hi');
+</script>
+
+{#if true}
+	{@const foo = bar}
+    {foo}
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-context-throws-after-await/_config.js b/packages/svelte/tests/runtime-runes/samples/async-context-throws-after-await/_config.js
new file mode 100644
index 0000000000..be73968a88
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-context-throws-after-await/_config.js
@@ -0,0 +1,11 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	async test() {
+		// else runtime_error is checked too soon
+		await tick();
+	},
+	runtime_error: 'set_context_after_init'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-context-throws-after-await/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-context-throws-after-await/main.svelte
new file mode 100644
index 0000000000..8e770c214b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-context-throws-after-await/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { setContext } from 'svelte';
+
+	await Promise.resolve('hi');
+
+	setContext('key', 'value');
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-debug-awaited-expression/_config.js b/packages/svelte/tests/runtime-runes/samples/async-debug-awaited-expression/_config.js
new file mode 100644
index 0000000000..304f65cd0a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-debug-awaited-expression/_config.js
@@ -0,0 +1,18 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+	mode: ['client', 'async-server'],
+
+	async test({ assert, logs }) {
+		await tick();
+
+		assert.deepEqual(logs, [{ data: 'works' }]);
+	},
+	test_ssr({ assert, logs }) {
+		assert.deepEqual(logs, [{ data: 'works' }]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-debug-awaited-expression/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-debug-awaited-expression/main.svelte
new file mode 100644
index 0000000000..92b69df8fb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-debug-awaited-expression/main.svelte
@@ -0,0 +1,4 @@
+<svelte:boundary>
+	{@const data = await Promise.resolve("works")}
+	{@debug data}
+</svelte:boundary>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-declaration-tag-2/_config.js b/packages/svelte/tests/runtime-runes/samples/async-declaration-tag-2/_config.js
new file mode 100644
index 0000000000..0dd4b870d5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-declaration-tag-2/_config.js
@@ -0,0 +1,13 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['async-server', 'client', 'hydrate'],
+	ssrHtml: `<h1>Hello, world!</h1> 5 01234 5 sync 6 5 0 10`,
+
+	async test({ assert, target }) {
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, `<h1>Hello, world!</h1> 5 01234 5 sync 6 5 0 10`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-declaration-tag-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-declaration-tag-2/main.svelte
new file mode 100644
index 0000000000..f15065e4db
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-declaration-tag-2/main.svelte
@@ -0,0 +1,31 @@
+<script>
+	let name = $state('world');
+</script>
+
+<svelte:boundary>
+	{const sync = 'sync'}
+	{const number = await Promise.resolve(5)}
+	{const after_async =number + 1}
+	{const { length, 0: first } = await '01234'}
+
+	{#snippet greet()}
+		{const greeting = $derived(await `Hello, ${name}!`)}
+		<h1>{greeting}</h1>
+		{number}
+		{#if number > 4 && after_async && greeting}
+			{const length = $derived(await number)}
+			{#each { length }, index}
+				{const i = $derived(await index)}
+				{i}
+			{/each}
+		{/if}
+	{/snippet}
+
+	{@render greet()}
+	{number} {sync} {after_async} {length} {first}
+
+	{#if sync}
+		{const double = $derived(number * 2)}
+		{double}
+	{/if}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-declaration-tag/_config.js b/packages/svelte/tests/runtime-runes/samples/async-declaration-tag/_config.js
new file mode 100644
index 0000000000..8fd2fc0976
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-declaration-tag/_config.js
@@ -0,0 +1,43 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [top, change] = target.querySelectorAll('button');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>name</button>
+			<button>change name</button>
+			<p>Hello name</p>
+			<div><span>nested Hi name</span></div>
+		`
+		);
+
+		top.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>other</button>
+			<button>change name</button>
+			<p>Hello name</p>
+			<div><span>nested Hi name</span></div>
+		`
+		);
+
+		change.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>other</button>
+			<button>change name</button>
+			<p>Hello other</p>
+			<div><span>nested Hi other</span></div>
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-declaration-tag/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-declaration-tag/main.svelte
new file mode 100644
index 0000000000..4521ea2e41
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-declaration-tag/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	const id = 'name';
+	const top_id = await 'name';
+</script>
+
+{let name = $state(top_id)}
+<button onclick={() => name = 'other'}>{name}</button>
+
+{#if id}
+	{let name = $state(await id)}
+	{let greeting = $derived(await `Hello ${name}`)}
+
+	<button onclick={() => name = 'other'}>change name</button>
+	<p>{greeting}</p>
+	<div>
+		{const nested = 'nested'}
+		{const greeting2 = $derived(await `Hi ${name}`)}
+		<span>{nested} {greeting2}</span>
+	</div>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-const-blocker/_config.js b/packages/svelte/tests/runtime-runes/samples/async-derived-const-blocker/_config.js
new file mode 100644
index 0000000000..afa737f36c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-const-blocker/_config.js
@@ -0,0 +1,9 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<p>data</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-const-blocker/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-const-blocker/main.svelte
new file mode 100644
index 0000000000..a154859683
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-const-blocker/main.svelte
@@ -0,0 +1,16 @@
+<script>
+let d = $derived(await Promise.resolve({ data: "data", hasData: true }));
+let showFetchCta = $derived(d.hasData)
+</script>
+
+{#if d}
+	{@const {data, hasData} = d}
+
+	{#if hasData}
+		<p>{data}</p>
+	{:else if showFetchCta}
+		<p>Fetch now</p>
+	{:else}
+		<p>No data</p>
+	{/if}
+{/if}
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..04adc8e97f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-destructured/Child.svelte
@@ -0,0 +1,22 @@
+<script>
+	let count = $state(1);
+	let arr = $state([1,2]);
+
+	// More complex init
+	let { squared, cubed } = $derived(await {
+		squared: count ** 2,
+		cubed: count ** 3
+	});
+	// Simple init with multiple destructurings after await
+	let { toFixed, toString } = $derived(count);
+
+	// Simple init with array destructurings after await
+	let [a, b] = $derived(arr);
+</script>
+
+<button onclick={() => count++}>increment</button>
+
+<p>{count} ** 2 = {squared}</p>
+<p>{count} ** 3 = {cubed}</p>
+<p>{typeof toFixed} {typeof toString}</p>
+<p>{a} {b}</p>
\ No newline at end of file
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..26f1dfdeb3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-destructured/_config.js
@@ -0,0 +1,35 @@
+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>
+				<p>function function</p>
+				<p>1 2</p>
+			`
+		);
+
+		increment.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<p>2 ** 2 = 4</p>
+				<p>2 ** 3 = 8</p>
+				<p>function function</p>
+				<p>1 2</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-in-multiple-effects/Component.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-in-multiple-effects/Component.svelte
new file mode 100644
index 0000000000..200778dc5b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-in-multiple-effects/Component.svelte
@@ -0,0 +1,27 @@
+<script>
+	import { untrack } from "svelte";
+
+	let { double } = $props();
+
+	// Test setup:
+	// - component initialized while pending work
+	// - derived that depends on mulitple sources
+	// - indirect updates to subsequent deriveds
+	// - two sibling effects where the former influences the latter
+	// - first effect reads derived of second inside untrack
+	let x = $state(0);
+	const other = $derived(double + x);
+	const another = $derived(other + 1);
+	const another2 = $derived(another + 1);
+
+	$effect(() => {
+		untrack(() => {
+			another2;
+			x++
+		});
+	});
+
+	$effect(() => {
+		console.log(another2);
+	})
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-in-multiple-effects/_config.js b/packages/svelte/tests/runtime-runes/samples/async-derived-in-multiple-effects/_config.js
new file mode 100644
index 0000000000..15bb42074f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-in-multiple-effects/_config.js
@@ -0,0 +1,16 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const button = target.querySelector('button');
+
+		button?.click();
+		await tick();
+		assert.deepEqual(logs, [5]);
+
+		button?.click();
+		await tick();
+		assert.deepEqual(logs, [5, 7]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-in-multiple-effects/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-in-multiple-effects/main.svelte
new file mode 100644
index 0000000000..bd82e35a3b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-in-multiple-effects/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	import Component from './Component.svelte';
+	let count = $state(0);
+	const double = $derived(count * 2);
+</script>
+
+<svelte:boundary>
+	{await new Promise((r) => {
+		// long enough for the test to do all its other stuff while this is pending
+		setTimeout(r, 10);
+	})}
+	{#snippet pending()}{/snippet}
+</svelte:boundary>
+
+<button onclick={() => count += 1}>{count}</button>
+
+{#if count > 0}
+	<Component {double} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-indirect/_config.js b/packages/svelte/tests/runtime-runes/samples/async-derived-indirect/_config.js
new file mode 100644
index 0000000000..9d97b736be
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-indirect/_config.js
@@ -0,0 +1,29 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [a, b, resolve] = target.querySelectorAll('button');
+
+		a.click();
+		await tick();
+		b.click();
+		await tick();
+		resolve.click();
+		await tick();
+		resolve.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+                <button>a</button>
+                <button>b</button>
+                <button>resolve</button>
+				hi
+                1
+            `
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-indirect/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-indirect/main.svelte
new file mode 100644
index 0000000000..f0d3bdc809
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-indirect/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	let a = $state(0);
+	let b = $state(0);
+	let a_b = $derived(a * b);
+
+	const queued = [];
+
+	function push(value) {
+		if (!value) return value;
+		return new Promise(resolve => {
+			queued.push(() => resolve(value));
+		});
+	}
+</script>
+
+<button onclick={() => (a++)}>a</button>
+<button onclick={() => (b++)}>b</button>
+<button onclick={() => (queued.shift()?.())}>resolve</button>
+<!-- a_b called in a block effect before being called in an async effect -->
+{#if a_b}hi{/if}
+{await push(a_b)}
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..318f88bcc9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-module/_config.js
@@ -0,0 +1,82 @@
+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();
+		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-prop-closure-hydration/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-prop-closure-hydration/Child.svelte
new file mode 100644
index 0000000000..6e5197b2fe
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-prop-closure-hydration/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	let { onclick } = $props();
+</script>
+
+<button {onclick}>A button</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-prop-closure-hydration/_config.js b/packages/svelte/tests/runtime-runes/samples/async-derived-prop-closure-hydration/_config.js
new file mode 100644
index 0000000000..37a3f0dae1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-prop-closure-hydration/_config.js
@@ -0,0 +1,11 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['hydrate'],
+
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, 'foo <button>A button</button>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-prop-closure-hydration/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-prop-closure-hydration/main.svelte
new file mode 100644
index 0000000000..c87d3f8a08
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-prop-closure-hydration/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Button from './Child.svelte';
+
+	async function getFoo() {
+		return 'foo';
+	}
+
+	const foo = $derived(await getFoo());
+</script>
+
+{foo}
+<Button onclick={() => foo} />
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-reverse-order/_config.js b/packages/svelte/tests/runtime-runes/samples/async-derived-reverse-order/_config.js
new file mode 100644
index 0000000000..bd0dd753c2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-reverse-order/_config.js
@@ -0,0 +1,41 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [increment, pop] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+
+		pop.click();
+		await tick();
+
+		pop.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>pop</button>
+				<p>1</p>
+			`
+		);
+
+		increment.click();
+		await tick();
+
+		pop.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>pop</button>
+				<p>2</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-reverse-order/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-reverse-order/main.svelte
new file mode 100644
index 0000000000..b9f6c26c2a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-reverse-order/main.svelte
@@ -0,0 +1,35 @@
+
+<script>
+	let count = $state(0);
+
+	let deferreds = [];
+
+	class X {
+		constructor(promise) {
+			this.promise = promise;
+		}
+		
+		get then() {
+			count;
+
+			return (resolve) => this.promise.then(() => count).then(resolve)
+		}
+	}
+
+	function push() {
+		const deferred = Promise.withResolvers();
+		deferreds.push(deferred);
+		return new X(deferred.promise);
+	}
+</script>
+
+<button onclick={() => count += 1}>increment</button>
+<button onclick={() => deferreds.pop()?.resolve(count)}>pop</button>
+
+<svelte:boundary>
+	<p>{await push()}</p>
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-same-value/_config.js b/packages/svelte/tests/runtime-runes/samples/async-derived-same-value/_config.js
new file mode 100644
index 0000000000..b4eb464e23
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-same-value/_config.js
@@ -0,0 +1,19 @@
+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>1</button>');
+
+		button.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<button>1</button>');
+		assert.deepEqual(warnings, []);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-same-value/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-same-value/main.svelte
new file mode 100644
index 0000000000..78475047cd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-same-value/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	let count = $state(0);
+	let unreactive = $derived(await push(count));
+
+	function push(v) {
+		if (!v) return v;
+
+		return Promise.resolve(1);
+	}
+</script>
+
+<button onclick={() => count++}>{unreactive}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-title-update/_config.js b/packages/svelte/tests/runtime-runes/samples/async-derived-title-update/_config.js
new file mode 100644
index 0000000000..bda2f36efb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-title-update/_config.js
@@ -0,0 +1,12 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+
+		const p = target.querySelector('p');
+		assert.equal(p?.innerHTML, 'hello');
+		assert.equal(window.document.title, 'hello');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-title-update/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-title-update/main.svelte
new file mode 100644
index 0000000000..3af3c746f1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-title-update/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	let promise = Promise.resolve('hello');
+	const value = $derived(await promise);
+</script>
+
+<svelte:head>
+	<title>{value}</title>
+</svelte:head>
+
+<p>{value}</p>
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-unmount-undefined-props/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-unmount-undefined-props/Child.svelte
new file mode 100644
index 0000000000..fecbe222e3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-unmount-undefined-props/Child.svelte
@@ -0,0 +1,9 @@
+<script>
+	let { id } = $props();
+
+	// BUG: This logs 'undefined' on unmount when parent has async derived
+	const data = $derived(await Promise.resolve(id).then((x) => {
+		console.log('promise resolved with:', x);
+		return x;
+	}));
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-unmount-undefined-props/_config.js b/packages/svelte/tests/runtime-runes/samples/async-derived-unmount-undefined-props/_config.js
new file mode 100644
index 0000000000..2f371bc6b7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-unmount-undefined-props/_config.js
@@ -0,0 +1,16 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		await tick();
+
+		assert.deepEqual(logs, ['promise resolved with:', 'some-id']);
+
+		const button = target.querySelector('button');
+		button?.click();
+		await tick();
+
+		assert.deepEqual(logs, ['promise resolved with:', 'some-id']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-unmount-undefined-props/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-unmount-undefined-props/main.svelte
new file mode 100644
index 0000000000..d5cdd5967e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-unmount-undefined-props/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import Child from './Child.svelte';
+
+	// This async derived in parent triggers the bug
+	const something = $derived(await Promise.resolve('test'));
+
+	let active = $state('some-id');
+</script>
+
+{#if active}
+	<Child id={active} />
+{/if}
+
+<button onclick={() => active = undefined}>close</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-unowned/Component.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-unowned/Component.svelte
new file mode 100644
index 0000000000..f7d138a3ed
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-unowned/Component.svelte
@@ -0,0 +1,6 @@
+<script>
+	let { double } = $props();
+	double; // derived is first read outside an active_reaction
+</script>
+
+<p>{double}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-unowned/_config.js b/packages/svelte/tests/runtime-runes/samples/async-derived-unowned/_config.js
new file mode 100644
index 0000000000..fc0135623d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-unowned/_config.js
@@ -0,0 +1,30 @@
+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>1</button>
+				<p>2</p>
+			`
+		);
+
+		button?.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>2</button>
+				<p>4</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-unowned/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-unowned/main.svelte
new file mode 100644
index 0000000000..bd82e35a3b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-unowned/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	import Component from './Component.svelte';
+	let count = $state(0);
+	const double = $derived(count * 2);
+</script>
+
+<svelte:boundary>
+	{await new Promise((r) => {
+		// long enough for the test to do all its other stuff while this is pending
+		setTimeout(r, 10);
+	})}
+	{#snippet pending()}{/snippet}
+</svelte:boundary>
+
+<button onclick={() => count += 1}>{count}</button>
+
+{#if count > 0}
+	<Component {double} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-with-effect-and-boundary/_config.js b/packages/svelte/tests/runtime-runes/samples/async-derived-with-effect-and-boundary/_config.js
new file mode 100644
index 0000000000..49428f90ad
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-with-effect-and-boundary/_config.js
@@ -0,0 +1,18 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+
+	async test({ assert, target }) {
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>baz: 69</p>
+				<p></p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-derived-with-effect-and-boundary/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-derived-with-effect-and-boundary/main.svelte
new file mode 100644
index 0000000000..0e05d0c414
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-derived-with-effect-and-boundary/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	let foo = $state(null);
+
+	$effect(() => {
+		foo = 69;
+	});
+
+	let bar = $derived(await 1);
+
+	let baz = $derived(foo ? foo * bar : null);
+
+	const qux = "qux";
+</script>
+
+<p>baz: {baz}</p>
+
+<svelte:boundary>
+	{#snippet pending()}
+		<p>Loading...</p>
+	{/snippet}
+
+	{#if qux}
+		<p></p>
+	{/if}
+</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-discard-obsolete-batch/_config.js b/packages/svelte/tests/runtime-runes/samples/async-discard-obsolete-batch/_config.js
new file mode 100644
index 0000000000..64e1a4b2b5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-discard-obsolete-batch/_config.js
@@ -0,0 +1,89 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+
+		const [increment, shift, pop] = target.querySelectorAll('button');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>1</button>
+				<button>shift</button>
+				<button>pop</button>
+				<p>1 = 1</p>
+			`
+		);
+
+		increment.click();
+		await tick();
+		increment.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>3</button>
+				<button>shift</button>
+				<button>pop</button>
+				<p>1 = 1</p>
+			`
+		);
+
+		shift.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>3</button>
+				<button>shift</button>
+				<button>pop</button>
+				<p>1 = 1</p>
+			`
+		);
+
+		shift.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>3</button>
+				<button>shift</button>
+				<button>pop</button>
+				<p>3 = 3</p>
+			`
+		);
+
+		increment.click();
+		await tick();
+		increment.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>5</button>
+				<button>shift</button>
+				<button>pop</button>
+				<p>3 = 3</p>
+			`
+		);
+
+		pop.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>5</button>
+				<button>shift</button>
+				<button>pop</button>
+				<p>5 = 5</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-discard-obsolete-batch/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-discard-obsolete-batch/main.svelte
new file mode 100644
index 0000000000..faa8d139a6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-discard-obsolete-batch/main.svelte
@@ -0,0 +1,36 @@
+<script>
+	import { getAbortSignal } from 'svelte';
+
+	const queue = [];
+
+	function push(value) {
+		if (value === 1) return 1;
+		const d = Promise.withResolvers();
+
+		queue.push(() => d.resolve(value));
+
+		const signal = getAbortSignal();
+		signal.onabort = () => d.reject(signal.reason);
+
+		return d.promise;
+	}
+
+	function shift() {
+		queue.shift()?.();
+	}
+
+	function pop() {
+		queue.pop()?.();
+	}
+
+	let n = $state(1);
+</script>
+
+<button onclick={() => n++}>
+	{$state.eager(n)}
+</button>
+
+<button onclick={shift}>shift</button>
+<button onclick={pop}>pop</button>
+
+<p>{n} = {await push(n)}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-disconnected-effect-root/_config.js b/packages/svelte/tests/runtime-runes/samples/async-disconnected-effect-root/_config.js
new file mode 100644
index 0000000000..fdc773751b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-disconnected-effect-root/_config.js
@@ -0,0 +1,15 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	// Test that an async derived inside an $effect.root not connected to the component tree still works
+	async test({ assert, logs }) {
+		await new Promise((resolve) => setTimeout(resolve, 10));
+		assert.deepEqual(logs, [1, 1]);
+		const [button] = document.querySelectorAll('button');
+
+		button.click();
+		await tick();
+		assert.deepEqual(logs, [1, 1, 2]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-disconnected-effect-root/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-disconnected-effect-root/main.svelte
new file mode 100644
index 0000000000..0ddb7d01d7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-disconnected-effect-root/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	let increment;
+
+	setTimeout(() => {
+		$effect.root(() => {
+			async function fn() {
+				let count = $state(1);
+				increment = () => { count++; };
+				$effect.pre(() => console.log(count))
+				const value = $derived(await count);
+				return { get value() { return value } };
+			}
+			fn().then(r => console.log(r.value));
+		})
+	})
+</script>
+
+<button onclick={() => increment()}>increment</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-1/_config.js b/packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-1/_config.js
new file mode 100644
index 0000000000..fb6f3388c9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-1/_config.js
@@ -0,0 +1,27 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+// Tests that a newly created batch during an effect flush isn't rebased right away by the previous batch.#commit(),
+// rescheduling an effect on the new batch that shouldn't run.
+export default test({
+	async test({ assert, target, logs }) {
+		await tick();
+		const [increment, resolve] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+		assert.deepEqual(logs, []);
+
+		// This resolve
+		// - shouldn't result in the derived execution capturing the new derived value on the new batch, but on the previous batch which is currently flushing
+		// - shouldn't result in #commit() rebasing the new batch
+		resolve.click();
+		await tick();
+		assert.deepEqual(logs, [2]);
+
+		// As a result, this resolve shouldn't result in another execution of the effect depending on the derived
+		resolve.click();
+		await tick();
+		assert.deepEqual(logs, [2]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-1/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-1/main.svelte
new file mode 100644
index 0000000000..af470363bf
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-1/main.svelte
@@ -0,0 +1,32 @@
+<script>
+	let count = $state(0);
+	let double = $derived(count * 2);
+	let count_mirror = $state(0);
+
+	const queued = [];
+	function delay(v) {
+		if (!v) return v;
+		return new Promise(resolve => {
+			queued.push(() => resolve(v));
+		});
+	}
+</script>
+
+<button onclick={() => count++}>count {await delay(count)} | count_mirror {await delay(count_mirror)}</button>
+<button onclick={() => queued.shift()?.()}>resolve</button>
+
+{#if count}
+	<!-- inside if block so effects are newly created and therefore added to batch.#new_effects -->
+	<!-- first $effect creates new batch ... -->
+	{(() => {
+		$effect(() => {
+			count_mirror = count;
+		})
+	})()}
+	<!-- ... which second $effect shouldn't write to because the derived execution belongs to the previous batch -->
+	{(() => {
+		$effect(() => {
+			console.log(double);
+		})
+	})()}
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-2/_config.js b/packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-2/_config.js
new file mode 100644
index 0000000000..d8a86f77da
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-2/_config.js
@@ -0,0 +1,25 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+// Tests that a newly created batch during an effect flush isn't rebased right away by the previous batch.#commit(),
+// rescheduling an effect on the new batch that shouldn't run.
+export default test({
+	async test({ assert, target, logs }) {
+		await tick();
+		const [increment, resolve] = target.querySelectorAll('button');
+		assert.deepEqual(logs, ['delay 0']);
+
+		increment.click();
+		await tick();
+		assert.deepEqual(logs, ['delay 0', 'delay 2']);
+
+		// This resolve should trigger the async effect only once
+		resolve.click();
+		await tick();
+		assert.deepEqual(logs, ['delay 0', 'delay 2', 'effect run', 'delay 4']);
+
+		resolve.click();
+		await tick();
+		assert.deepEqual(logs, ['delay 0', 'delay 2', 'effect run', 'delay 4']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-2/main.svelte
new file mode 100644
index 0000000000..fc90ae2ba4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-2/main.svelte
@@ -0,0 +1,29 @@
+<script>
+	import { untrack } from "svelte";
+
+	let a = $state(0);
+	let b = $state(0);
+	let c = $state(0);
+
+	const queued = [];
+	function delay(v) {
+		console.log('delay ' + v);
+		if (!v) return v;
+		return new Promise(resolve => {
+			queued.push(() => resolve(v));
+		});
+	}
+
+	$effect(() => {
+		if (b + c === 0 || b + c > 2) return;
+		console.log('effect run')
+		untrack(() => {
+			b++;
+			c++;
+		})
+	})
+</script>
+
+<button onclick={() => { a++; b++; }}>increment</button>
+<button onclick={() => queued.shift()?.()}>resolve</button>
+{await delay(a + b + c)}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-3/_config.js b/packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-3/_config.js
new file mode 100644
index 0000000000..b430e408c7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-3/_config.js
@@ -0,0 +1,31 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+// Tests that a newly created batch during an effect flush isn't rebased right away by the previous batch.#commit(),
+// rescheduling an effect on the new batch that shouldn't run.
+export default test({
+	async test({ assert, target, logs }) {
+		await tick();
+		const [increment, shift, pop] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+		assert.deepEqual(logs, []);
+
+		// Resolve the blocking await which shouldn't result in the derived execution capturing
+		// the new derived value on the new batch, but on the previous batch which is currently flushing
+		pop.click();
+		await tick();
+		assert.deepEqual(logs, [2]);
+
+		// Resolve the non-blocking await which shouldn't result in #commit() rebasing the new batch
+		shift.click();
+		await tick();
+		assert.deepEqual(logs, [2]);
+
+		// Resolve the new batch's await
+		shift.click();
+		await tick();
+		assert.deepEqual(logs, [2]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-3/main.svelte
new file mode 100644
index 0000000000..9dec14cd13
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-3/main.svelte
@@ -0,0 +1,37 @@
+<script>
+	let count = $state(0);
+	let double = $derived(count * 2);
+	let count_mirror = $state(0);
+
+	const queued = [];
+	function delay(v) {
+		if (!v) return v;
+		return new Promise(resolve => {
+			queued.push(() => resolve(v));
+		});
+	}
+</script>
+
+<button onclick={() => count++}>count {await delay(count)} | count_mirror {await delay(count_mirror)}</button>
+<button onclick={() => queued.shift()?.()}>shift</button>
+<button onclick={() => queued.pop()?.()}>pop</button>
+
+{#if count}
+	<svelte:boundary>
+		{await delay(count)}
+		{#snippet pending()}loading{/snippet}
+	</svelte:boundary>
+	<!-- inside if block so effects are newly created and therefore added to batch.#new_effects -->
+	<!-- first $effect creates new batch ... -->
+	{(() => {
+		$effect(() => {
+			count_mirror = count;
+		})
+	})()}
+	<!-- ... which second $effect shouldn't write to because the derived execution belongs to the previous batch -->
+	{(() => {
+		$effect(() => {
+			console.log(double);
+		})
+	})()}
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-4/_config.js b/packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-4/_config.js
new file mode 100644
index 0000000000..804c1f53bb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-4/_config.js
@@ -0,0 +1,58 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+// Tests that a newly created batch during an effect flush isn't rebased right away by the previous batch.#commit(),
+// rescheduling an effect on the new batch that shouldn't run.
+export default test({
+	async test({ assert, target, logs }) {
+		await tick();
+		const [increment, unrelated, resolve] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+		assert.deepEqual(logs, []);
+
+		// This resolve
+		// - shouldn't result in the derived execution capturing the new derived value on the new batch, but on the previous batch which is currently flushing
+		// - shouldn't result in #commit() rebasing the new batch
+		resolve.click();
+		await tick();
+		assert.deepEqual(logs, [2]);
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>count 1 | count_mirror 0 | count_mirror_d 0 | unrelated 0</button>
+				<button>unrelated++</button>
+				<button>resolve</button>
+			`
+		);
+
+		// This resolve
+		// - shouldn't result in the derived execution capturing the new derived value on the new batch, but on the previous batch which is currently flushing
+		// - shouldn't result in #commit() rebasing the new batch
+		unrelated.click();
+		await tick();
+		assert.deepEqual(logs, [2]);
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>count 1 | count_mirror 0 | count_mirror_d 0 | unrelated 1</button>
+				<button>unrelated++</button>
+				<button>resolve</button>
+			`
+		);
+
+		// As a result, this resolve shouldn't result in another execution of the effect depending on the derived
+		resolve.click();
+		await tick();
+		assert.deepEqual(logs, [2]);
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>count 1 | count_mirror 1 | count_mirror_d 2 | unrelated 1</button>
+				<button>unrelated++</button>
+				<button>resolve</button>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-4/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-4/main.svelte
new file mode 100644
index 0000000000..fdc2447e3e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-dont-rebase-new-batch-4/main.svelte
@@ -0,0 +1,38 @@
+<script>
+	import { untrack } from "svelte";
+
+	let count = $state(0);
+	let double = $derived(count * 2);
+	let count_mirror = $state(0);
+	let unrelated = $state(0);
+	let count_mirror_d = $derived(count_mirror * 2);
+
+	const queued = [];
+	function delay(v) {
+		if (!v) return v;
+		return new Promise(resolve => {
+			queued.push(() => resolve(v));
+		});
+	}
+</script>
+
+<button onclick={() => count++}>count {await delay(count)} | count_mirror {await delay(count_mirror)} | count_mirror_d {count_mirror_d} | unrelated {unrelated}</button>
+<button onclick={() => unrelated++}>unrelated++</button>
+<button onclick={() => queued.shift()?.()}>resolve</button>
+
+{#if count}
+	<!-- inside if block so effects are newly created and therefore added to batch.#new_effects -->
+	<!-- first $effect creates new batch ... -->
+	{(() => {
+		$effect(() => {
+			count_mirror = count;
+			untrack(() => count_mirror_d); // execute derived; should associate value with the right batch
+		})
+	})()}
+	<!-- ... which second $effect shouldn't write to because the derived execution belongs to the previous batch -->
+	{(() => {
+		$effect(() => {
+			console.log(double);
+		})
+	})()}
+{/if}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-duplicate-dependencies/_config.js b/packages/svelte/tests/runtime-runes/samples/async-duplicate-dependencies/_config.js
new file mode 100644
index 0000000000..b7451282ac
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-duplicate-dependencies/_config.js
@@ -0,0 +1,43 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [increment, resolve] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+		increment.click();
+		await tick();
+		resolve.click();
+		await tick();
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>resolve</button>
+				4
+			`
+		);
+
+		increment.click();
+		await tick();
+		increment.click();
+		await tick();
+		resolve.click();
+		await tick();
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>resolve</button>
+				8
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-duplicate-dependencies/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-duplicate-dependencies/main.svelte
new file mode 100644
index 0000000000..58a5848e3b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-duplicate-dependencies/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	let count = $state(0);
+
+	const queue = [];
+
+	function push(v) {
+		if (v === 0) return v;
+
+		return new Promise((fulfil) => queue.push(() => fulfil(v)));
+	}
+
+	async function request(v) {
+		const result = $derived(await push(v));
+		return result + count; // read existing dependency `count` once more
+	}
+</script>
+
+<button onclick={() => count++}>increment</button>
+<button onclick={() => queue.shift()?.()}>resolve</button>
+{await request(count)}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-dynamic-component/Component.svelte b/packages/svelte/tests/runtime-runes/samples/async-dynamic-component/Component.svelte
new file mode 100644
index 0000000000..40816a2b5a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-dynamic-component/Component.svelte
@@ -0,0 +1 @@
+Hi
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-dynamic-component/_config.js b/packages/svelte/tests/runtime-runes/samples/async-dynamic-component/_config.js
new file mode 100644
index 0000000000..bf13a9b120
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-dynamic-component/_config.js
@@ -0,0 +1,11 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['async-server', 'client', 'hydrate'],
+	ssrHtml: 'Hi Hi Hi Hi',
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, 'Hi Hi Hi Hi');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-dynamic-component/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-dynamic-component/main.svelte
new file mode 100644
index 0000000000..d959f80694
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-dynamic-component/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Component from './Component.svelte'
+	const X = $derived(await Promise.resolve(Component))
+	const Y = await Promise.resolve(Component)
+</script>
+
+<X />
+<svelte:component this={X} />
+<Y />
+<svelte:component this={Y} />
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-await-stale-rows/_config.js b/packages/svelte/tests/runtime-runes/samples/async-each-await-stale-rows/_config.js
new file mode 100644
index 0000000000..7025e4000e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-await-stale-rows/_config.js
@@ -0,0 +1,32 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const spam = /** @type {HTMLButtonElement} */ (target.querySelector('button.spam'));
+		const resolve = /** @type {HTMLButtonElement} */ (target.querySelector('button.resolve'));
+
+		resolve.click();
+		await tick();
+
+		for (let i = 0; i < 5; i += 1) {
+			spam.click();
+			await tick();
+		}
+
+		for (let i = 0; i < 5; i += 1) {
+			resolve.click();
+			await tick();
+		}
+
+		assert.equal(target.querySelectorAll('div').length, 1);
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button class="spam">Spam</button>
+				<button class="resolve">Resolve</button>
+				<div>5</div>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each-await-stale-rows/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-each-await-stale-rows/main.svelte
new file mode 100644
index 0000000000..aeed4fa306
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-await-stale-rows/main.svelte
@@ -0,0 +1,28 @@
+<script>
+	let value = $state({ id: '0' });
+	const resolvers = [];
+
+	function wait() {
+		const promise = Promise.withResolvers();
+		resolvers.push(promise.resolve);
+		return promise.promise;
+	}
+
+	function spam() {
+		value.id = `${Number(value.id) + 1}`;
+	}
+</script>
+
+<button class="spam" onclick={spam}>Spam</button>
+<button class="resolve" onclick={() => resolvers.shift()?.()}>Resolve</button>
+
+<svelte:boundary>
+	{#each [value.id] as s (s)}
+		{await wait()}
+		<div>{s}</div>
+	{/each}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each-await-store-update/_config.js b/packages/svelte/tests/runtime-runes/samples/async-each-await-store-update/_config.js
new file mode 100644
index 0000000000..165577af96
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-await-store-update/_config.js
@@ -0,0 +1,32 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	async test({ assert, target }) {
+		const button = /** @type {HTMLElement} */ (target.querySelector('button'));
+
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<ul><li data-item="1"><span>10</span><span>20</span></li></ul><button>add</button>`
+		);
+
+		button.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<ul><li data-item="1"><span>10</span><span>20</span></li><li data-item="2"><span>20</span><span>40</span></li></ul><button>add</button>`
+		);
+
+		button.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<ul><li data-item="1"><span>10</span><span>20</span></li><li data-item="2"><span>20</span><span>40</span></li><li data-item="3"><span>30</span><span>60</span></li></ul><button>add</button>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each-await-store-update/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-each-await-store-update/main.svelte
new file mode 100644
index 0000000000..41982b767d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-await-store-update/main.svelte
@@ -0,0 +1,31 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	const items = writable([{ id: 1 }]);
+
+	function add_item() {
+		items.update(arr => [...arr, { id: arr.length + 1 }]);
+	}
+
+	function query(item) {
+		return Promise.resolve([item.id * 10, item.id * 20]);
+	}
+</script>
+
+<svelte:boundary>
+	<ul>
+		{#each $items as item (item.id)}
+			<li data-item={item.id}>
+				{#each await query(item) as value}
+					<span>{value}</span>
+				{/each}
+			</li>
+		{/each}
+	</ul>
+	
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
+
+<button onclick={add_item}>add</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each-const-await-error-boundary/_config.js b/packages/svelte/tests/runtime-runes/samples/async-each-const-await-error-boundary/_config.js
new file mode 100644
index 0000000000..4988e117ed
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-const-await-error-boundary/_config.js
@@ -0,0 +1,28 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	// this test doesn't fail without the associated fix — the error gets
+	// swallowed somewhere. but keeping it around for illustration
+	skip: true,
+
+	mode: ['client'],
+
+	async test({ assert, target, errors, logs }) {
+		const button = target.querySelector('button');
+
+		button?.click();
+		await tick();
+		await tick();
+		assert.deepEqual(logs, ['Simulated TypeError']);
+		assert.deepEqual(errors, []);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>Trigger</button>
+				<p>Error Caught: Simulated TypeError</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each-const-await-error-boundary/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-each-const-await-error-boundary/main.svelte
new file mode 100644
index 0000000000..2d8165a9e3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-const-await-error-boundary/main.svelte
@@ -0,0 +1,29 @@
+<script>
+	let index = $state(0);
+
+	async function fn(id) {
+		if (id === 2) throw new Error('Simulated TypeError');
+		return id;
+	}
+
+	function onerror(error) {
+		console.log(error.message);
+	}
+</script>
+
+<button onclick={() => (index = 1)}>Trigger</button>
+
+<svelte:boundary {onerror}>
+	{#snippet pending()}
+		<p>Loading...</p>
+	{/snippet}
+
+	{#snippet failed(error)}
+		<p>Error Caught: {error.message}</p>
+	{/snippet}
+
+	{#each [[1], [2]][index] as id (id)}
+		{@const result = await fn(id)}
+		<p>{result}</p>
+	{/each}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each-const-await-iife/_config.js b/packages/svelte/tests/runtime-runes/samples/async-each-const-await-iife/_config.js
new file mode 100644
index 0000000000..958c3023f1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-const-await-iife/_config.js
@@ -0,0 +1,14 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+// Tests that an IIFE referencing an `await` @const inside an {#each} block
+// correctly registers the async dependency so the template waits for the
+// resolved value instead of rendering with `undefined`.
+export default test({
+	mode: ['client', 'hydrate', 'async-server'],
+	ssrHtml: '<p>example.com</p>',
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<p>example.com</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each-const-await-iife/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-each-const-await-iife/main.svelte
new file mode 100644
index 0000000000..e0ccbb7892
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-const-await-iife/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	async function get_host() {
+		return 'example.com';
+	}
+</script>
+
+{#each { length: 1 } as nothing}
+	{@const host = await get_host()}
+	<p>{(() => host)()}</p>
+{/each}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each-derived/_config.js b/packages/svelte/tests/runtime-runes/samples/async-each-derived/_config.js
new file mode 100644
index 0000000000..62a09bfc7c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-derived/_config.js
@@ -0,0 +1,20 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick(); // settle initial await
+
+		const checkBox = target.querySelector('input');
+
+		checkBox?.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<input type="checkbox"/>
+				<p>true</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each-derived/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-each-derived/main.svelte
new file mode 100644
index 0000000000..7e3b5c54bc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-derived/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	let checked = $state(false);
+
+	const foo = $derived(await checked);
+</script>
+
+<input type="checkbox" bind:checked />
+
+{#each checked === foo && [1]}
+	<p>{checked}</p>
+{/each}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each-item-duplication/Component.svelte b/packages/svelte/tests/runtime-runes/samples/async-each-item-duplication/Component.svelte
new file mode 100644
index 0000000000..9f4e638629
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-item-duplication/Component.svelte
@@ -0,0 +1,5 @@
+<script>
+	let { message, another } = $props()
+</script>
+
+<p>{message}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each-item-duplication/_config.js b/packages/svelte/tests/runtime-runes/samples/async-each-item-duplication/_config.js
new file mode 100644
index 0000000000..2e20f83f7f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-item-duplication/_config.js
@@ -0,0 +1,14 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['hydrate'],
+
+	ssrHtml: `<p>item 1</p><p>item 2</p><p>item 3</p>`,
+	html: `<p>item 1</p><p>item 2</p><p>item 3</p>`,
+
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<p>item 1</p><p>item 2</p><p>item 3</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each-item-duplication/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-each-item-duplication/main.svelte
new file mode 100644
index 0000000000..ae54b63414
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-item-duplication/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Component from './Component.svelte'
+
+	const messages = await Promise.resolve(["item 1", "item 2", "item 3"])
+	const another = { test: 'test' }
+</script>
+
+{#each messages as message}
+	<Component {message} {another} />
+{/each}
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-preserve-pending/_config.js b/packages/svelte/tests/runtime-runes/samples/async-each-preserve-pending/_config.js
new file mode 100644
index 0000000000..c4efa873bf
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-preserve-pending/_config.js
@@ -0,0 +1,65 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+
+		const [add, shift] = target.querySelectorAll('button');
+
+		add.click();
+		await tick();
+		add.click();
+		await tick();
+		add.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>add</button>
+				<button>shift</button>
+				<p>1</p>
+			`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>add</button>
+				<button>shift</button>
+				<p>1</p>
+				<p>2</p>
+			`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>add</button>
+				<button>shift</button>
+				<p>1</p>
+				<p>2</p>
+				<p>3</p>
+			`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>add</button>
+				<button>shift</button>
+				<p>1</p>
+				<p>2</p>
+				<p>3</p>
+				<p>4</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each-preserve-pending/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-each-preserve-pending/main.svelte
new file mode 100644
index 0000000000..55d894d240
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-preserve-pending/main.svelte
@@ -0,0 +1,29 @@
+<script>
+	let values = $state([1]);
+
+	const queue = [];
+
+	function push(v) {
+		if (v === 1) return v;
+
+		const p = Promise.withResolvers();
+		queue.push(() => p.resolve(v));
+		return p.promise;
+	}
+
+	function shift() {
+		const fn = queue.shift();
+		if (fn) fn();
+	}
+
+	function addValue() {
+		values = [...values, values.length + 1];
+	}
+</script>
+
+<button onclick={addValue}>add</button>
+<button onclick={shift}>shift</button>
+
+{#each values as v}
+	<p>{await push(v)}</p>
+{/each}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each-sibling/_config.js b/packages/svelte/tests/runtime-runes/samples/async-each-sibling/_config.js
new file mode 100644
index 0000000000..ff10a48f11
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-sibling/_config.js
@@ -0,0 +1,16 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['async-server', 'hydrate', 'client'],
+	ssrHtml: `<ul><li>1</li></ul> <button>add</button>`,
+
+	async test({ assert, target }) {
+		await tick();
+		const [add] = target.querySelectorAll('button');
+
+		add.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<ul><li>1</li><li>2</li></ul> <button>add</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-each-sibling/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-each-sibling/main.svelte
new file mode 100644
index 0000000000..2c35440511
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-each-sibling/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	let array = $state(Promise.resolve([1]));
+</script>
+
+<ul>
+{#each await array as item}
+	<li>{item}</li>
+{/each}
+</ul>
+
+<button onclick={() => array = Promise.resolve([1, 2])}>add</button>
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-eager-block/_config.js b/packages/svelte/tests/runtime-runes/samples/async-eager-block/_config.js
new file mode 100644
index 0000000000..b6d283c8a5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-eager-block/_config.js
@@ -0,0 +1,23 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [increment, resolve] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>increment</button> <button>resolve</button> 0 <p>loading...</p>'
+		);
+
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>increment</button> <button>resolve</button> 1 <p>1</p>'
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-eager-block/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-eager-block/main.svelte
new file mode 100644
index 0000000000..61f4705d06
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-eager-block/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	let count = $state(0);
+
+	const queued = [];
+
+	async function delay(v) {
+		if (!v) return v;
+		return new Promise(r => queued.push(() => r(v)));
+	}
+</script>
+
+<button onclick={() => count++}>increment</button>
+<button onclick={() => queued.shift()?.()}>resolve</button>
+
+{await delay(count)} 
+{#if $state.eager(count) !== count}
+	<p>loading...</p>
+{:else}
+	<p>{count}</p>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-eager-derived/_config.js b/packages/svelte/tests/runtime-runes/samples/async-eager-derived/_config.js
new file mode 100644
index 0000000000..043f1610fb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-eager-derived/_config.js
@@ -0,0 +1,23 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [increment, shift] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>clicks: 0 - 0 - 0</button> <button>shift</button> <p>true - true</p>`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>clicks: 1 - 1 - 1</button> <button>shift</button> <p>false - false</p>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-eager-derived/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-eager-derived/main.svelte
new file mode 100644
index 0000000000..d1d979126d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-eager-derived/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	
+	let count = $state(0);
+	const delayedCount = $derived(await push(count));
+	const derivedCount = $derived(count);
+
+	let resolvers = [];
+
+	function push(value) {
+        if (!value) return value;
+		const { promise, resolve } = Promise.withResolvers();
+		resolvers.push(() => resolve(value));
+		return promise;
+	}
+</script>
+
+<button onclick={() => count += 1}>
+	clicks: {count} - {delayedCount} - {derivedCount}
+</button> 
+<button onclick={() => resolvers.shift()?.()}>shift</button>
+
+<p>{$state.eager(count) !== count} - {$state.eager(derivedCount) !== derivedCount}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-eager-each-block/_config.js b/packages/svelte/tests/runtime-runes/samples/async-eager-each-block/_config.js
new file mode 100644
index 0000000000..a4921a5115
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-eager-each-block/_config.js
@@ -0,0 +1,32 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		await tick();
+		const [increment, resolve] = target.querySelectorAll('button');
+		logs.length = 0;
+
+		increment.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>increment</button> <button>resolve</button>
+			<ul><li>0 / 0</li><li>0 / loading...</li><li>0 / 0</li></ul>`
+		);
+
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>increment</button> <button>resolve</button>
+			<ul><li>0 / 0</li><li>1 / 1</li><li>0 / 0</li></ul>`
+		);
+
+		assert.equal(
+			logs.some((l) => l.toString().includes('0 ') || l.toString().includes('2')),
+			false,
+			'only the second $state.eager should have been evaluated'
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-eager-each-block/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-eager-each-block/main.svelte
new file mode 100644
index 0000000000..f27e256e9f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-eager-each-block/main.svelte
@@ -0,0 +1,24 @@
+<script>
+	let counts = $state([0, 0, 0]);
+	const queued = [];
+	async function delay(v) {
+		if (!v) return v;
+		return new Promise(r => queued.push(() => r(v)));
+	}
+</script>
+
+<button onclick={() => counts[1]++}>increment</button>
+<button onclick={() => queued.shift()?.()}>resolve</button>
+
+<ul>
+	{#each counts as count, i}
+		<li>
+			{await delay(count)} /
+			{#if console.log(i) || $state.eager(count) !== count}
+				loading...
+			{:else}
+				{count}
+			{/if}
+		</li>
+	{/each}
+</ul>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-effect-after-await/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-effect-after-await/Child.svelte
new file mode 100644
index 0000000000..758ebc0004
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-effect-after-await/Child.svelte
@@ -0,0 +1,11 @@
+<script>
+	$effect(() => {
+		console.log('before');
+	});
+
+	await 1;
+
+	$effect(() => {
+		console.log('after');
+	});
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-effect-after-await/_config.js b/packages/svelte/tests/runtime-runes/samples/async-effect-after-await/_config.js
new file mode 100644
index 0000000000..0908b6a9fe
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-effect-after-await/_config.js
@@ -0,0 +1,10 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, logs }) {
+		assert.deepEqual(logs, []);
+		await tick();
+		assert.deepEqual(logs, ['before', 'after']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-effect-after-await/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-effect-after-await/main.svelte
new file mode 100644
index 0000000000..d4b67f8803
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-effect-after-await/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<svelte:boundary>
+	<Child />
+
+	{#snippet pending()}{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-effect-after-boundary/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-effect-after-boundary/Child.svelte
new file mode 100644
index 0000000000..65a225431b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-effect-after-boundary/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	$effect(() => {
+		console.log('in effect')
+	});
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-effect-after-boundary/_config.js b/packages/svelte/tests/runtime-runes/samples/async-effect-after-boundary/_config.js
new file mode 100644
index 0000000000..f7b6c513d4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-effect-after-boundary/_config.js
@@ -0,0 +1,16 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [shift] = target.querySelectorAll('button');
+
+		await tick();
+		assert.deepEqual(logs, []);
+
+		shift.click();
+		await tick();
+
+		assert.deepEqual(logs, ['in effect']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-effect-after-boundary/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-effect-after-boundary/main.svelte
new file mode 100644
index 0000000000..edfd3c4d10
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-effect-after-boundary/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	import Child from './Child.svelte';
+
+	let resolvers = [];
+
+	function push(value) {
+		const { promise, resolve } = Promise.withResolvers();
+		resolvers.push(() => resolve(value));
+		return promise;
+	}
+</script>
+
+<button onclick={() => resolvers.shift()?.()}>shift</button>
+
+<svelte:boundary>
+	<p>{await push('hello')}</p>
+	<Child />
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-effect-conservative/_config.js b/packages/svelte/tests/runtime-runes/samples/async-effect-conservative/_config.js
new file mode 100644
index 0000000000..bab06a203d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-effect-conservative/_config.js
@@ -0,0 +1,28 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		await tick();
+
+		const [increment] = target.querySelectorAll('button');
+
+		assert.deepEqual(logs, [false]);
+		assert.htmlEqual(target.innerHTML, '<button>increment</button><p>0</p>');
+
+		increment.click();
+		await tick();
+		assert.deepEqual(logs, [false]);
+		assert.htmlEqual(target.innerHTML, '<button>increment</button><p>1</p>');
+
+		increment.click();
+		await tick();
+		assert.deepEqual(logs, [false, true]);
+		assert.htmlEqual(target.innerHTML, '<button>increment</button><p>2</p>');
+
+		increment.click();
+		await tick();
+		assert.deepEqual(logs, [false, true]);
+		assert.htmlEqual(target.innerHTML, '<button>increment</button><p>3</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-effect-conservative/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-effect-conservative/main.svelte
new file mode 100644
index 0000000000..5305067a5a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-effect-conservative/main.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	let count = $state(0);
+	let two_or_larger = $derived(count >= 2);
+
+	$effect(() => {
+		console.log(two_or_larger);
+	});
+</script>
+
+<svelte:boundary>
+	<button onclick={() => count += 1}>increment</button>
+	<p>{await count}</p>
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-effect-mount-timing/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-effect-mount-timing/Child.svelte
new file mode 100644
index 0000000000..18856d71e1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-effect-mount-timing/Child.svelte
@@ -0,0 +1,6 @@
+<script>
+	let x;
+	$effect(() => console.log(!!x))
+</script>
+
+<div bind:this={x}></div>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-effect-mount-timing/_config.js b/packages/svelte/tests/runtime-runes/samples/async-effect-mount-timing/_config.js
new file mode 100644
index 0000000000..7a6e436825
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-effect-mount-timing/_config.js
@@ -0,0 +1,10 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	// Test that $effect/onMount etc at the top level of components are correctly deferred/coordinated if inside an async block
+	async test({ assert, logs }) {
+		await tick();
+		assert.deepEqual(logs, [true]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-effect-mount-timing/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-effect-mount-timing/main.svelte
new file mode 100644
index 0000000000..934d9d7f5b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-effect-mount-timing/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<Child foo={await 1} />
diff --git a/packages/svelte/tests/runtime-runes/samples/async-effect-orphan/_config.js b/packages/svelte/tests/runtime-runes/samples/async-effect-orphan/_config.js
new file mode 100644
index 0000000000..b76ea85bfd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-effect-orphan/_config.js
@@ -0,0 +1,12 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, logs }) {
+		await tick();
+
+		assert.deepEqual(logs, [
+			`effect_orphan\n\`$effect\` can only be used inside an effect (e.g. during component initialisation)\nhttps://svelte.dev/e/effect_orphan`
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-effect-orphan/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-effect-orphan/main.svelte
new file mode 100644
index 0000000000..086a048025
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-effect-orphan/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	async function foo() {
+		await 0;
+		$effect(() => {
+			console.log('this effect is orphaned');
+		});
+	}
+
+	try {
+		await foo();
+	} catch (e) {
+		console.log(e.message)
+	}
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-effect-pending-eager/_config.js b/packages/svelte/tests/runtime-runes/samples/async-effect-pending-eager/_config.js
new file mode 100644
index 0000000000..b37b3c9228
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-effect-pending-eager/_config.js
@@ -0,0 +1,35 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [increment, shift] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				1
+				<p>pending: 1</p>
+				<p>loading...</p>
+			`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				1
+				<p>pending: 0</p>
+				<p>1</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-effect-pending-eager/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-effect-pending-eager/main.svelte
new file mode 100644
index 0000000000..535968a46a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-effect-pending-eager/main.svelte
@@ -0,0 +1,27 @@
+<script>
+	let value = $state(0);
+	let queued = [];
+
+	function delayed(v) {
+		if (!v) return v;
+		return new Promise((resolve) => {
+			queued.push(() => resolve(v));
+		});
+	}
+</script>
+
+<button onclick={() => value++}>increment</button>
+<button onclick={() => queued.shift()?.()}>shift</button>
+
+{$state.eager(value)}
+
+{#if 1}
+	<p>pending: {$effect.pending()}</p>
+
+	{@const tmp = await delayed(value)}
+	{#if $effect.pending() > 0}
+		<p>loading...</p>
+	{:else}
+		<p>{tmp}</p>
+	{/if}
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-effect-pending-nested/_config.js b/packages/svelte/tests/runtime-runes/samples/async-effect-pending-nested/_config.js
new file mode 100644
index 0000000000..9fe354bac0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-effect-pending-nested/_config.js
@@ -0,0 +1,95 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [increment, shift] = target.querySelectorAll('button');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<button>shift</button>
+				<p>loading...</p>
+			`
+		);
+
+		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>inner pending: 0</p>
+				<p>outer 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>inner pending: 3</p>
+				<p>outer pending: 0</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>inner pending: 2</p>
+				<p>outer pending: 0</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>inner pending: 1</p>
+				<p>outer pending: 0</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>inner pending: 0</p>
+				<p>outer pending: 0</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-effect-pending-nested/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-effect-pending-nested/main.svelte
new file mode 100644
index 0000000000..eeafbdc3c4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-effect-pending-nested/main.svelte
@@ -0,0 +1,34 @@
+<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>
+	<svelte:boundary>
+		<p>{await push(value)}</p>
+		<p>{await push(value)}</p>
+		<p>{await push(value)}</p>
+		<p>inner pending: {$effect.pending()}</p>
+	</svelte:boundary>
+	<p>outer pending: {$effect.pending()}</p>
+
+	{#snippet pending()}
+		<p>loading...</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-effect-triggers-await/_config.js b/packages/svelte/tests/runtime-runes/samples/async-effect-triggers-await/_config.js
new file mode 100644
index 0000000000..c551cc6b8c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-effect-triggers-await/_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');
+
+		increment.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<p>1</p>
+				<p>1</p>
+			`
+		);
+
+		increment.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<p>2</p>
+				<p>2</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-effect-triggers-await/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-effect-triggers-await/main.svelte
new file mode 100644
index 0000000000..153fe03f0d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-effect-triggers-await/main.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	let data = $state(Promise.resolve(0));
+
+	let count = $state(0);
+	let unrelated = $state(0);
+
+	$effect(() => {
+		data = Promise.resolve(count)
+		unrelated = count;
+	});
+</script>
+
+<svelte:boundary>
+	<button onclick={() => count += 1}>increment</button>
+	<p>{JSON.stringify((await data), null, 2)}</p>
+	{#if true}
+		<!-- inside if block to force it into a different render effect -->
+		<p>{unrelated}</p>
+	{/if}
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-error-boundary-2/_config.js b/packages/svelte/tests/runtime-runes/samples/async-error-boundary-2/_config.js
new file mode 100644
index 0000000000..202036421b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-error-boundary-2/_config.js
@@ -0,0 +1,15 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['hydrate', 'async-server', 'client'],
+	ssrHtml: '<p>caught: error (hello)</p>',
+	transformError: () => {
+		return 'error';
+	},
+
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<p>caught: error (hello)</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-error-boundary-2/child.svelte b/packages/svelte/tests/runtime-runes/samples/async-error-boundary-2/child.svelte
new file mode 100644
index 0000000000..c6323d2925
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-error-boundary-2/child.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { get } from "./main.svelte";
+
+    let { error } = $props();
+    const context = get()
+</script>
+
+{#if error}
+    <p>caught: {await error} ({context})</p>
+{:else}
+	{await Promise.reject('catch me')}
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-error-boundary-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-error-boundary-2/main.svelte
new file mode 100644
index 0000000000..a467f7500f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-error-boundary-2/main.svelte
@@ -0,0 +1,19 @@
+<script module>
+	import { createContext } from "svelte";
+	import Child from "./child.svelte";
+
+	const [ get, set ] = createContext();
+	export {get};
+</script>
+
+<script>
+	set('hello');
+</script>
+
+<svelte:boundary>
+	{#snippet failed(error)}
+		<Child {error} />
+	{/snippet}
+
+	<Child />
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-error-boundary-3/_config.js b/packages/svelte/tests/runtime-runes/samples/async-error-boundary-3/_config.js
new file mode 100644
index 0000000000..641bbccd87
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-error-boundary-3/_config.js
@@ -0,0 +1,15 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['hydrate', 'async-server', 'client'],
+	ssrHtml: '<p>caught: error (hello)</p>',
+	transformError: () => {
+		return Promise.resolve('error');
+	},
+
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<p>caught: error (hello)</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-error-boundary-3/child.svelte b/packages/svelte/tests/runtime-runes/samples/async-error-boundary-3/child.svelte
new file mode 100644
index 0000000000..90d4c14cfc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-error-boundary-3/child.svelte
@@ -0,0 +1,14 @@
+<script>
+	import { get } from "./main.svelte";
+
+    let { error } = $props();
+    const context = get()
+</script>
+
+{#if error}
+    <p>caught: {await error} ({context})</p>
+{:else}
+	{(() => {
+        throw 'catch me';
+    })()}
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-error-boundary-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-error-boundary-3/main.svelte
new file mode 100644
index 0000000000..a467f7500f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-error-boundary-3/main.svelte
@@ -0,0 +1,19 @@
+<script module>
+	import { createContext } from "svelte";
+	import Child from "./child.svelte";
+
+	const [ get, set ] = createContext();
+	export {get};
+</script>
+
+<script>
+	set('hello');
+</script>
+
+<svelte:boundary>
+	{#snippet failed(error)}
+		<Child {error} />
+	{/snippet}
+
+	<Child />
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-error-boundary/_config.js b/packages/svelte/tests/runtime-runes/samples/async-error-boundary/_config.js
new file mode 100644
index 0000000000..231a8c9d66
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-error-boundary/_config.js
@@ -0,0 +1,16 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['hydrate', 'async-server', 'client'],
+	ssrHtml: '<p>caught: error</p>',
+	transformError: (error) => {
+		if (error !== 'catch me') throw 'wrong error object';
+		return 'error';
+	},
+
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<p>caught: error</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-error-boundary/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-error-boundary/main.svelte
new file mode 100644
index 0000000000..375ae273a9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-error-boundary/main.svelte
@@ -0,0 +1,7 @@
+<svelte:boundary>
+	{#snippet failed(error)}
+		<p>caught: {error}</p>
+	{/snippet}
+
+	{await Promise.reject('catch me')}
+</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-in-script/_config.js b/packages/svelte/tests/runtime-runes/samples/async-error-in-script/_config.js
new file mode 100644
index 0000000000..2e0fab473c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-error-in-script/_config.js
@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['async-server', 'hydrate'],
+	error: 'oops'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-error-in-script/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-error-in-script/main.svelte
new file mode 100644
index 0000000000..64d9e6ce08
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-error-in-script/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	await 1;
+
+	throw new Error('oops');
+</script>
+
+<h1>hello</h1>
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-flushsync-in-effect/_config.js b/packages/svelte/tests/runtime-runes/samples/async-flushsync-in-effect/_config.js
new file mode 100644
index 0000000000..59a81afd35
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-flushsync-in-effect/_config.js
@@ -0,0 +1,25 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+
+		const [increment, shift] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, '<button>clicks: 0</button><button>shift</button> 0');
+
+		shift.click();
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, '<button>clicks: 1</button><button>shift</button> 1');
+
+		shift.click();
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, '<button>clicks: 2</button><button>shift</button> 2');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-flushsync-in-effect/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-flushsync-in-effect/main.svelte
new file mode 100644
index 0000000000..12c4dd578e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-flushsync-in-effect/main.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { flushSync } from 'svelte';
+
+	let count = $state(0);
+
+	const queue: Array<() => void> = [];
+
+	$effect(() => {
+		if (count === 1) {
+			count = 2;
+			flushSync();
+		}
+	})
+
+	function push(v: number) {
+		if (v === 0) return v;
+		return new Promise(r => queue.push(() => r(v)));
+	}
+</script>
+
+<button onclick={() => count += 1}>
+	clicks: {count}
+</button>
+<button onclick={() => queue.shift()?.()}>shift</button>
+{await push(count)}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-attributes/_config.js b/packages/svelte/tests/runtime-runes/samples/async-fork-attributes/_config.js
new file mode 100644
index 0000000000..59bcdeb7f5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-attributes/_config.js
@@ -0,0 +1,60 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [fork, commit] = target.querySelectorAll('button');
+
+		fork.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>fork</button>
+			<button>commit</button>
+			<p style="">foo</p>
+			<p style="">foo</p>
+			<p>foo</p>
+		`
+		);
+
+		commit.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>fork</button>
+			<button>commit</button>
+			<p style="color: red;">foo</p>
+			<p style="color: red;" data-attached=true>foo</p>
+			<p data-attached=true>foo</p>
+		`
+		);
+
+		fork.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>fork</button>
+			<button>commit</button>
+			<p style="color: red;">foo</p>
+			<p style="color: red;" data-attached=true>foo</p>
+			<p data-attached=true>foo</p>
+		`
+		);
+
+		commit.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>fork</button>
+			<button>commit</button>
+			<p style="">foo</p>
+			<p style="">foo</p>
+			<p>foo</p>
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-attributes/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-fork-attributes/main.svelte
new file mode 100644
index 0000000000..956e5df6f3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-attributes/main.svelte
@@ -0,0 +1,28 @@
+<script>
+	import { fork } from "svelte";
+	import { createAttachmentKey } from "svelte/attachments";
+
+	let style = $state('');
+	let attach = $state(undefined);
+
+	let forked;
+</script>
+
+<button onclick={()=>{
+	forked = fork(()=>{
+		style = style ? '' : 'color: red';
+		attach = attach ? undefined : (node) => {
+			node.setAttribute('data-attached', 'true');
+			return () => node.removeAttribute('data-attached');
+		};
+	})
+}}>fork</button>
+
+<button onclick={()=>{
+	forked.commit();
+}}>commit</button>
+
+<!-- force $.attribute_effect, which uses a block effect -->
+<p {...{style}}>foo</p>
+<p {...{style, [createAttachmentKey()]: attach}}>foo</p>
+<p {@attach attach}>foo</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-derived-writable/_config.js b/packages/svelte/tests/runtime-runes/samples/async-fork-derived-writable/_config.js
new file mode 100644
index 0000000000..b089b714ec
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-derived-writable/_config.js
@@ -0,0 +1,14 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [btn] = target.querySelectorAll('button');
+
+		btn.click();
+		await tick();
+		// d should be 10 (real-world: s=1, d=1*10) before commit, not 20 (fork: s=2, d=2*10)
+		// After commit, d should be 99 (the written value)
+		assert.deepEqual(logs, [10, 99]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-derived-writable/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-fork-derived-writable/main.svelte
new file mode 100644
index 0000000000..bc118a558a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-derived-writable/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	import { fork } from 'svelte';
+
+	let s = $state(1);
+	let d = $derived(s * 10);
+</script>
+
+<button onclick={async () => {
+	const f = fork(() => {
+		// First modify s, then write to d
+		// If d is evaluated in fork context, it would see s=2 and compute d=20
+		// But it should evaluate in real-world context to get d=10
+		s = 2;
+		d = 99;
+	});
+
+	// Should be 10 (real-world value: s=1, so d=1*10=10), not 20 (fork value)
+	console.log(d);
+	await f.commit();
+	// Should be 99 (the value we wrote)
+	console.log(d);
+}}>++</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-derived/_config.js b/packages/svelte/tests/runtime-runes/samples/async-fork-derived/_config.js
new file mode 100644
index 0000000000..59ae376167
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-derived/_config.js
@@ -0,0 +1,16 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [increment] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+		assert.deepEqual(logs, [1, 2]);
+
+		increment.click();
+		await tick();
+		assert.deepEqual(logs, [1, 2, 2, 3]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-derived/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-fork-derived/main.svelte
new file mode 100644
index 0000000000..93761869d6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-derived/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import { fork } from 'svelte';
+
+	let s = $state(1);
+	let d = $derived(s);
+</script>
+
+<button onclick={async () => {
+	const f = fork(() => {
+		s = s + 1;
+	});
+
+	console.log(d);
+	await f.commit();
+	console.log(d);
+}}>++</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-discard-derived-writable-uninitialized/_config.js b/packages/svelte/tests/runtime-runes/samples/async-fork-discard-derived-writable-uninitialized/_config.js
new file mode 100644
index 0000000000..98440b6922
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-discard-derived-writable-uninitialized/_config.js
@@ -0,0 +1,16 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [btn] = target.querySelectorAll('button');
+
+		btn.click();
+		await tick();
+		assert.deepEqual(logs, [10]);
+
+		btn.click();
+		await tick();
+		assert.deepEqual(logs, [10, 10]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-discard-derived-writable-uninitialized/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-fork-discard-derived-writable-uninitialized/main.svelte
new file mode 100644
index 0000000000..16c1668480
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-discard-derived-writable-uninitialized/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	import { fork } from 'svelte';
+
+	let s = $state(1);
+	let d = $derived(s * 10);
+</script>
+
+<button
+	onclick={() => {
+		const f = fork(() => {
+			// d has not been read yet, so this write happens with an uninitialized old value
+			s = 2;
+			d = 99;
+		});
+
+		f.discard();
+		console.log(d);
+	}}
+>
+	test
+</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-failure-escapes/_config.js b/packages/svelte/tests/runtime-runes/samples/async-fork-failure-escapes/_config.js
new file mode 100644
index 0000000000..1a9cd322dd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-failure-escapes/_config.js
@@ -0,0 +1,33 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [show, commit] = target.querySelectorAll('button');
+
+		show.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>show</button>
+				<button>commit</button>
+				<button>discard</button>
+			`
+		);
+
+		commit.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>show</button>
+				<button>commit</button>
+				<button>discard</button>
+				failed
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-failure-escapes/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-fork-failure-escapes/main.svelte
new file mode 100644
index 0000000000..d598bd6f47
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-failure-escapes/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	import { fork } from 'svelte';
+	let show = $state(false);
+	let f;
+</script>
+
+<button onclick={() => f = fork(() => show = true)}>show</button>
+<button onclick={() => f.commit()}>commit</button>
+<button onclick={() => f.discard()}>discard</button>
+
+<svelte:boundary>
+	{#if show}
+		{await Promise.reject('boom')}
+	{/if}
+	{#snippet failed()}
+		failed
+	{/snippet}
+</svelte:boundary>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-if-derived/_config.js b/packages/svelte/tests/runtime-runes/samples/async-fork-if-derived/_config.js
new file mode 100644
index 0000000000..4a03a54e7a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-if-derived/_config.js
@@ -0,0 +1,20 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [, toggle] = target.querySelectorAll('button');
+
+		toggle?.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>0</button> <button>toggle</button> 0`);
+
+		toggle?.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>0</button> <button>toggle</button>`);
+
+		toggle?.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>0</button> <button>toggle</button> 0`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-if-derived/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-fork-if-derived/main.svelte
new file mode 100644
index 0000000000..519857a9ce
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-if-derived/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { fork } from 'svelte';
+	let show = $state(false);
+	let count = $state(0);
+	let d_count = $derived(count);
+</script>
+
+<button onclick={() => count += 1}>{count}</button> <!-- just here so count is compiled as a source -->
+<button onclick={() => fork(() => show = !show).commit()}>toggle</button>
+
+{#if show}
+	{d_count}
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-if/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-fork-if/Child.svelte
new file mode 100644
index 0000000000..6ef7d03eea
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-if/Child.svelte
@@ -0,0 +1,8 @@
+<script>
+	let { x } = $props();
+	console.log(x);
+	await Promise.resolve();
+	console.log(x);
+</script>
+
+{x}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-if/_config.js b/packages/svelte/tests/runtime-runes/samples/async-fork-if/_config.js
new file mode 100644
index 0000000000..1bc168d9ae
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-if/_config.js
@@ -0,0 +1,12 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		await new Promise((r) => setTimeout(r, 2));
+		assert.htmlEqual(target.innerHTML, `<button>fork</button> universe`);
+		assert.deepEqual(logs, ['universe', 'universe']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-if/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-fork-if/main.svelte
new file mode 100644
index 0000000000..625040ec13
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-if/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import { fork } from 'svelte';
+	import Child from './Child.svelte';
+	let x = $state('world');
+</script>
+
+<button onclick={async () => {
+	const f = fork(() => {
+		x = 'universe'
+	});
+	await new Promise(r => setTimeout(r));
+	f.commit();
+}}>fork</button>
+
+{#if x === 'universe'}
+	<Child {x} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-obsolete-ignore/_config.js b/packages/svelte/tests/runtime-runes/samples/async-fork-obsolete-ignore/_config.js
new file mode 100644
index 0000000000..e127fd03ec
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-obsolete-ignore/_config.js
@@ -0,0 +1,39 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		await tick();
+		const [fork, real, resolve] = target.querySelectorAll('button');
+
+		fork.click();
+		await tick();
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				0
+				<button>fork</button>
+				<button>real</button>
+				<button>resolve</button>
+			`
+		);
+		assert.deepEqual(logs, [0]);
+
+		real.click();
+		await tick();
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				1
+				<button>fork</button>
+				<button>real</button>
+				<button>resolve</button>
+			`
+		);
+		assert.deepEqual(logs, [0, 1]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-obsolete-ignore/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-fork-obsolete-ignore/main.svelte
new file mode 100644
index 0000000000..85056e02b8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-obsolete-ignore/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	import { fork } from "svelte";
+
+	let count = $state(0);
+	let queued = [];
+
+	function push(v) {
+		if (!v) return v;
+
+		return new Promise((resolve) => {
+			queued.push(() => resolve(v));
+		});
+	}
+
+	$effect(() => {
+		console.log(count);
+	})
+</script>
+
+{await push(count)}
+<button onclick={() => fork(() => count++).discard()}>fork</button>
+<button onclick={() => count++}>real</button>
+<button onclick={() => queued.shift()?.()}>resolve</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-resolves-promise/_config.js b/packages/svelte/tests/runtime-runes/samples/async-fork-resolves-promise/_config.js
new file mode 100644
index 0000000000..ff323b60af
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-resolves-promise/_config.js
@@ -0,0 +1,22 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [x, y, resolve, commit] = target.querySelectorAll('button');
+		const [p] = target.querySelectorAll('p');
+
+		y.click();
+		await tick();
+		resolve.click();
+		await tick();
+		x.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, '1 0');
+
+		await tick();
+		commit.click();
+		assert.htmlEqual(p.innerHTML, '1 1');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-resolves-promise/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-fork-resolves-promise/main.svelte
new file mode 100644
index 0000000000..d6995340af
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-resolves-promise/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	import { fork } from 'svelte';
+
+	let x = $state(0);
+	let y = $state(0);
+	let f;
+
+	const deferred = [];
+
+	function delay(value) {
+		if (!value) return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+<p>{x} {await delay(y)}</p>
+
+<button onclick={() => x += 1}>x</button>
+<button onclick={() => f = fork(() => y += 1)}>y (fork)</button>
+<button onclick={() => deferred.shift()?.()}>resolve</button>
+<button onclick={() => f.commit()}>commit</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-snippet-dev/_config.js b/packages/svelte/tests/runtime-runes/samples/async-fork-snippet-dev/_config.js
new file mode 100644
index 0000000000..2fb00562f5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-snippet-dev/_config.js
@@ -0,0 +1,24 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	async test({ assert, target }) {
+		const [fork] = target.querySelectorAll('button');
+
+		fork.click();
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, '<button>fork</button><button>false</button>');
+
+		const [, toggle] = target.querySelectorAll('button');
+
+		toggle.click();
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, '<button>fork</button><button>true</button>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-snippet-dev/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-fork-snippet-dev/main.svelte
new file mode 100644
index 0000000000..6945fcd153
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-snippet-dev/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	import { fork } from 'svelte';
+
+	let condition = $state(false);
+	let checked = $state(false);
+
+	const d = $derived({ checked });
+</script>
+
+<button onclick={() => {
+	fork(() => {
+		condition = true;
+	}).commit();
+}}>fork</button>
+
+{#if condition}
+	<!-- in dev, snippet arguments are read eagerly, outside a tracking context -->
+	<!-- this test checks that doing so doesn't prevent the derived from connecting -->
+	{#snippet foo({ checked })}
+		{checked}
+	{/snippet}
+
+	<button onclick={() => (checked = !checked)}>
+		{@render foo(d)}
+	</button>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-update-same-state/_config.js b/packages/svelte/tests/runtime-runes/samples/async-fork-update-same-state/_config.js
new file mode 100644
index 0000000000..b3e04204b4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-update-same-state/_config.js
@@ -0,0 +1,49 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		assert.deepEqual(logs, [0]);
+
+		const [fork1, fork2, commit] = target.querySelectorAll('button');
+
+		fork1.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>fork 1</button>
+			<button>fork 2</button>
+			<button>commit</button>
+			<p>0</p>
+		`
+		);
+		assert.deepEqual(logs, [0]);
+
+		fork2.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>fork 1</button>
+			<button>fork 2</button>
+			<button>commit</button>
+			<p>0</p>
+		`
+		);
+		assert.deepEqual(logs, [0]);
+
+		commit.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>fork 1</button>
+			<button>fork 2</button>
+			<button>commit</button>
+			<p>1</p>
+		`
+		);
+		assert.deepEqual(logs, [0, 1]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork-update-same-state/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-fork-update-same-state/main.svelte
new file mode 100644
index 0000000000..45645b4085
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork-update-same-state/main.svelte
@@ -0,0 +1,37 @@
+<script>
+	import { fork } from "svelte";
+	
+	let state = $state(0);
+
+	let count = $derived(state);
+
+	$effect.pre(() => {
+		console.log(count);
+	});
+
+	let forked;
+</script>
+
+<button onclick={()=>{
+	forked?.discard?.();
+	forked = fork(()=>{
+		state++;
+	});
+}}>
+	fork 1
+</button>
+
+<button onclick={()=>{
+	forked?.discard?.();
+	forked = fork(()=>{
+		state++;
+	})
+}}>
+	fork 2
+</button>
+
+<button onclick={()=>{
+	forked?.commit();
+}}>commit</button>
+
+<p>{count}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork/_config.js b/packages/svelte/tests/runtime-runes/samples/async-fork/_config.js
new file mode 100644
index 0000000000..35b47525a2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork/_config.js
@@ -0,0 +1,92 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, raf }) {
+		const [shift, increment, commit] = target.querySelectorAll('button');
+
+		shift.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>shift</button>
+				<button>increment</button>
+				<button>commit</button>
+				<p>count: 0</p>
+				<p>eager: 0</p>
+				<p>even</p>
+			`
+		);
+
+		increment.click();
+		await tick();
+
+		shift.click();
+		await tick();
+
+		// nothing updates until commit
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>shift</button>
+				<button>increment</button>
+				<button>commit</button>
+				<p>count: 0</p>
+				<p>eager: 0</p>
+				<p>even</p>
+			`
+		);
+
+		commit.click();
+		await tick();
+
+		// nothing updates until commit
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>shift</button>
+				<button>increment</button>
+				<button>commit</button>
+				<p>count: 1</p>
+				<p>eager: 1</p>
+				<p>odd</p>
+			`
+		);
+
+		increment.click();
+		await tick();
+
+		commit.click();
+		await tick();
+
+		// eager state updates on commit
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>shift</button>
+				<button>increment</button>
+				<button>commit</button>
+				<p>count: 1</p>
+				<p>eager: 2</p>
+				<p>odd</p>
+			`
+		);
+
+		shift.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>shift</button>
+				<button>increment</button>
+				<button>commit</button>
+				<p>count: 2</p>
+				<p>eager: 2</p>
+				<p>even</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-fork/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-fork/main.svelte
new file mode 100644
index 0000000000..9b1f433f2d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-fork/main.svelte
@@ -0,0 +1,37 @@
+<script>
+	import { fork } from 'svelte';
+
+	let count = $state(0);
+
+	const resolvers = [];
+	let f = null;
+
+	function push(value) {
+		const { promise, resolve } = Promise.withResolvers();
+		resolvers.push(() => resolve(value));
+		return promise;
+	}
+</script>
+
+<button onclick={() => resolvers.shift()?.()}>shift</button>
+<button onclick={async () => {
+	f = await fork(() => {
+		count += 1;
+	});
+}}>increment</button>
+<button onclick={() => f?.commit()}>commit</button>
+
+<p>count: {count}</p>
+<p>eager: {$state.eager(count)}</p>
+
+<svelte:boundary>
+	{#if await push(count) % 2 === 0}
+		<p>even</p>
+	{:else}
+		<p>odd</p>
+	{/if}
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-head-title-1/Inner.svelte b/packages/svelte/tests/runtime-runes/samples/async-head-title-1/Inner.svelte
new file mode 100644
index 0000000000..089ba43607
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-head-title-1/Inner.svelte
@@ -0,0 +1,15 @@
+<script>
+	let { deferred } = $props();
+
+	function push() {
+		const d = Promise.withResolvers();
+		deferred.push(() => d.resolve());
+		return d.promise;
+	}
+</script>
+
+<svelte:head>
+	<title>title</title>
+</svelte:head>
+
+<p>{await push()}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-head-title-1/_config.js b/packages/svelte/tests/runtime-runes/samples/async-head-title-1/_config.js
new file mode 100644
index 0000000000..39cbf5becb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-head-title-1/_config.js
@@ -0,0 +1,24 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [toggle, resolve] = target.querySelectorAll('button');
+		toggle.click();
+		await tick();
+		assert.equal(window.document.title, '');
+
+		toggle.click();
+		await tick();
+		assert.equal(window.document.title, '');
+
+		toggle.click();
+		await tick();
+		assert.equal(window.document.title, '');
+
+		resolve.click();
+		await tick();
+		await tick();
+		assert.equal(window.document.title, 'title');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-head-title-1/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-head-title-1/main.svelte
new file mode 100644
index 0000000000..3535157087
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-head-title-1/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Inner from './Inner.svelte';
+
+	let deferred = [];
+	let show = $state(false);
+</script>
+
+<button onclick={() => show = !show}>toggle</button>
+<button onclick={() => deferred.pop()()}>resolve</button>
+{#if show}
+	<Inner {deferred} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-head-title-2/Inner.svelte b/packages/svelte/tests/runtime-runes/samples/async-head-title-2/Inner.svelte
new file mode 100644
index 0000000000..b2a8656276
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-head-title-2/Inner.svelte
@@ -0,0 +1,13 @@
+<script>
+	let { deferred } = $props();
+
+	function push() {
+		const d = Promise.withResolvers();
+		deferred.push(() => d.resolve('title'));
+		return d.promise;
+	}
+</script>
+
+<svelte:head>
+	<title>{await push()}</title>
+</svelte:head>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-head-title-2/_config.js b/packages/svelte/tests/runtime-runes/samples/async-head-title-2/_config.js
new file mode 100644
index 0000000000..b89dce62d1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-head-title-2/_config.js
@@ -0,0 +1,23 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [toggle, resolve] = target.querySelectorAll('button');
+		toggle.click();
+		await tick();
+		assert.equal(window.document.title, '');
+
+		toggle.click();
+		await tick();
+		assert.equal(window.document.title, '');
+
+		toggle.click();
+		await tick();
+		assert.equal(window.document.title, '');
+
+		resolve.click();
+		await tick();
+		assert.equal(window.document.title, 'title');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-head-title-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-head-title-2/main.svelte
new file mode 100644
index 0000000000..3535157087
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-head-title-2/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Inner from './Inner.svelte';
+
+	let deferred = [];
+	let show = $state(false);
+</script>
+
+<button onclick={() => show = !show}>toggle</button>
+<button onclick={() => deferred.pop()()}>resolve</button>
+{#if show}
+	<Inner {deferred} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-head-title-3/Inner.svelte b/packages/svelte/tests/runtime-runes/samples/async-head-title-3/Inner.svelte
new file mode 100644
index 0000000000..4d761c92ef
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-head-title-3/Inner.svelte
@@ -0,0 +1,15 @@
+<script>
+	let { deferred, title } = $props();
+
+	function push() {
+		const d = Promise.withResolvers();
+		deferred.push(() => d.resolve());
+		return d.promise;
+	}
+</script>
+
+<svelte:head>
+	<title>{title}</title>
+</svelte:head>
+
+<p>{await push()}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-head-title-3/_config.js b/packages/svelte/tests/runtime-runes/samples/async-head-title-3/_config.js
new file mode 100644
index 0000000000..39cbf5becb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-head-title-3/_config.js
@@ -0,0 +1,24 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [toggle, resolve] = target.querySelectorAll('button');
+		toggle.click();
+		await tick();
+		assert.equal(window.document.title, '');
+
+		toggle.click();
+		await tick();
+		assert.equal(window.document.title, '');
+
+		toggle.click();
+		await tick();
+		assert.equal(window.document.title, '');
+
+		resolve.click();
+		await tick();
+		await tick();
+		assert.equal(window.document.title, 'title');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-head-title-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-head-title-3/main.svelte
new file mode 100644
index 0000000000..be4f04afe8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-head-title-3/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Inner from './Inner.svelte';
+
+	let deferred = [];
+	let show = $state(false);
+</script>
+
+<button onclick={() => show = !show}>toggle</button>
+<button onclick={() => deferred.pop()()}>resolve</button>
+{#if show}
+	<Inner {deferred} title="title" />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-head/A.svelte b/packages/svelte/tests/runtime-runes/samples/async-head/A.svelte
new file mode 100644
index 0000000000..d821bb6fa0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-head/A.svelte
@@ -0,0 +1,7 @@
+<script>
+	let { name, content } = $props();
+</script>
+
+<svelte:head>
+	<meta name={name} content={content} />
+</svelte:head>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-head/B.svelte b/packages/svelte/tests/runtime-runes/samples/async-head/B.svelte
new file mode 100644
index 0000000000..d725d5f03b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-head/B.svelte
@@ -0,0 +1,8 @@
+<script>
+	let { name, content } = $props();
+</script>
+
+<svelte:head>
+	<meta name="{name}-1" content="{content}-1" />
+	<meta name="{name}-2" content="{content}-2" />
+</svelte:head>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-head/_config.js b/packages/svelte/tests/runtime-runes/samples/async-head/_config.js
new file mode 100644
index 0000000000..6fdf41b434
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-head/_config.js
@@ -0,0 +1,23 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, window }) {
+		await tick();
+
+		const head = window.document.head;
+
+		// we don't care about the order, but we want to ensure that the
+		// elements didn't clobber each other
+		for (let n of ['1', '2', '3']) {
+			const a = head.querySelector(`meta[name="a-${n}"]`);
+			assert.equal(a?.getAttribute('content'), n);
+
+			const b1 = head.querySelector(`meta[name="b-${n}-1"]`);
+			assert.equal(b1?.getAttribute('content'), `${n}-1`);
+
+			const b2 = head.querySelector(`meta[name="b-${n}-2"]`);
+			assert.equal(b2?.getAttribute('content'), `${n}-2`);
+		}
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-head/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-head/main.svelte
new file mode 100644
index 0000000000..7f23489373
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-head/main.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import A from './A.svelte';
+	import B from './B.svelte';
+</script>
+
+<A name="a-1" content={await 1} />
+<A name="a-2" content={await 2} />
+<B name="b-1" content={1} />
+<A name="a-3" content={await 3} />
+<B name="b-2" content={2} />
+<B name="b-3" content={3} />
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-hydrate-html-tag/_config.js b/packages/svelte/tests/runtime-runes/samples/async-hydrate-html-tag/_config.js
new file mode 100644
index 0000000000..cb73ab1833
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-hydrate-html-tag/_config.js
@@ -0,0 +1,10 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['hydrate'],
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<div><div><p>first test</p></div> other test</div>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-hydrate-html-tag/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-hydrate-html-tag/main.svelte
new file mode 100644
index 0000000000..cd34a1a16e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-hydrate-html-tag/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	function firstTest() {
+		return Promise.resolve('<p>first test</p>');
+	}
+
+	function otherTest() {
+		return Promise.resolve('other test');
+	}
+</script>
+
+<div>
+	<div>{@html await firstTest()}</div>
+	{await otherTest()}
+</div>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-hydration-binding/Async.svelte b/packages/svelte/tests/runtime-runes/samples/async-hydration-binding/Async.svelte
new file mode 100644
index 0000000000..6e7dbc82bb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-hydration-binding/Async.svelte
@@ -0,0 +1,7 @@
+<script>
+	let data = $derived(await Promise.resolve('test'));
+</script>
+
+<div data-resolved={data ? 'true' : 'false'}>
+	{data}
+</div>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-hydration-binding/Binding.svelte b/packages/svelte/tests/runtime-runes/samples/async-hydration-binding/Binding.svelte
new file mode 100644
index 0000000000..3deba21acc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-hydration-binding/Binding.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Bound from './Bound.svelte';
+
+	let open;
+</script>
+
+<Bound bind:open />
diff --git a/packages/svelte/tests/runtime-runes/samples/async-hydration-binding/Bound.svelte b/packages/svelte/tests/runtime-runes/samples/async-hydration-binding/Bound.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/svelte/tests/runtime-runes/samples/async-hydration-binding/_config.js b/packages/svelte/tests/runtime-runes/samples/async-hydration-binding/_config.js
new file mode 100644
index 0000000000..d4d36b007f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-hydration-binding/_config.js
@@ -0,0 +1,10 @@
+import { test } from '../../test';
+
+// Tests that renderer.subsume (which is used when bindings are present) works correctly
+export default test({
+	mode: ['hydrate'],
+	html: '<div data-resolved="true">test</div>',
+	async test({ assert, warnings }) {
+		assert.deepEqual(warnings, []);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-hydration-binding/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-hydration-binding/main.svelte
new file mode 100644
index 0000000000..a38806be7c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-hydration-binding/main.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import Async from './Async.svelte';
+	import Binding from './Binding.svelte';
+</script>
+
+<Async />
+<Binding />
diff --git a/packages/svelte/tests/runtime-runes/samples/async-if-after-await-in-script/_config.js b/packages/svelte/tests/runtime-runes/samples/async-if-after-await-in-script/_config.js
new file mode 100644
index 0000000000..1003d3da05
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-if-after-await-in-script/_config.js
@@ -0,0 +1,18 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_mode: ['server'],
+
+	ssrHtml: '<p>yep</p>',
+
+	async test({ assert, target, variant, warnings }) {
+		if (variant === 'dom') {
+			await tick();
+		}
+
+		assert.htmlEqual(target.innerHTML, '<p>yep</p>');
+
+		assert.deepEqual(warnings, []); // TODO not quite sure why this isn't populated yet
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-if-after-await-in-script/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-if-after-await-in-script/main.svelte
new file mode 100644
index 0000000000..66dc7c718c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-if-after-await-in-script/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	await 0;
+	const condition = await true;
+</script>
+
+{#if condition}
+	<p>yep</p>
+{:else}
+	<p>nope</p>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-if-block-unskip/_config.js b/packages/svelte/tests/runtime-runes/samples/async-if-block-unskip/_config.js
new file mode 100644
index 0000000000..d578def483
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-if-block-unskip/_config.js
@@ -0,0 +1,30 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [load, resolve] = target.querySelectorAll('button');
+
+		load.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>load</button>
+			<button>resolve</button>
+		`
+		);
+
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			search search search search
+			<button>load</button>
+			<button>resolve</button>
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-if-block-unskip/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-if-block-unskip/main.svelte
new file mode 100644
index 0000000000..36ebcd26d1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-if-block-unskip/main.svelte
@@ -0,0 +1,40 @@
+<script>
+	let query = $state('');
+	// changing the query results in a new promise with loading initialized to true
+	const promise = $derived(push(query));
+
+	const resolvers = [];
+	function push(value) {
+		if (!value) return Promise.resolve(value);
+
+		const { promise, resolve } = Promise.withResolvers();
+
+		resolvers.push(() => {
+			// before resolving, set loading to false - this makes it run in a different batch
+			loading = false;
+			resolve(value);
+		});
+
+		let loading = $state(true);
+		Object.defineProperty(promise, 'loading', {
+			get() {
+				return loading;
+			}
+		});
+
+		return promise
+	}
+</script>
+
+{query} {await promise}
+
+{#if !promise.loading}
+	{query}
+{/if}
+
+{#if !promise.loading}
+	{await query}
+{/if}
+
+<button onclick={() => query = 'search'}>load</button>
+<button onclick={() => resolvers.shift()?.()}>resolve</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-if-else/_config.js b/packages/svelte/tests/runtime-runes/samples/async-if-else/_config.js
new file mode 100644
index 0000000000..0a9c74fe65
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-if-else/_config.js
@@ -0,0 +1,17 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['hydrate'],
+
+	async test({ assert, target }) {
+		const e = target.querySelector('#else-branch');
+
+		assert.equal(e?.isConnected, true);
+
+		await tick();
+
+		assert.equal(e?.isConnected, true);
+		assert.htmlEqual(target.innerHTML, '<p id="else-branch">else branch</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-if-else/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-if-else/main.svelte
new file mode 100644
index 0000000000..e91cdd2a10
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-if-else/main.svelte
@@ -0,0 +1,5 @@
+{#if await false}
+	<p id="if-branch">if branch</p>
+{:else}
+	<p id="else-branch">{await 'else branch'}</p>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-if-hydration/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-if-hydration/Child.svelte
new file mode 100644
index 0000000000..02ef294d99
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-if-hydration/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+    let { b } = $props();
+</script>
+
+{b}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-if-hydration/_config.js b/packages/svelte/tests/runtime-runes/samples/async-if-hydration/_config.js
new file mode 100644
index 0000000000..8132e9c522
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-if-hydration/_config.js
@@ -0,0 +1,11 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['hydrate'],
+
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<div><p>hello</p></div> <div>true</div>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-if-hydration/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-if-hydration/main.svelte
new file mode 100644
index 0000000000..3b08d41640
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-if-hydration/main.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import Child from "./Child.svelte";
+
+	await 1;
+	let b = true;
+	let a = true;
+</script>
+
+{#if a}
+	<div>
+		{#if b}
+			<p>hello</p>
+		{/if}
+	</div>
+	<div>
+		<Child {b} />
+	</div>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-if-nested/_config.js b/packages/svelte/tests/runtime-runes/samples/async-if-nested/_config.js
new file mode 100644
index 0000000000..49cae28cc4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-if-nested/_config.js
@@ -0,0 +1,12 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['async-server', 'hydrate', 'client'],
+	ssrHtml: `bar blocking`,
+
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, 'bar blocking');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-if-nested/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-if-nested/main.svelte
new file mode 100644
index 0000000000..cfb17e3c76
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-if-nested/main.svelte
@@ -0,0 +1,21 @@
+<script>
+  let foo = $state(false);
+  let blocking = $derived(await foo);
+  let bar = Promise.resolve(true);
+</script>
+
+{#if foo}
+  foo
+{:else if await bar}
+  bar
+{:else}
+  else
+{/if}
+
+{#if foo}
+  foo
+{:else if !blocking}
+  blocking
+{:else}
+  else
+{/if}
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..ef119d601d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-if/_config.js
@@ -0,0 +1,47 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>shift</button><button>true</button><button>false</button><p>pending</p>`,
+
+	async test({ assert, target }) {
+		const [shift, t, f] = target.querySelectorAll('button');
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>shift</button><button>true</button><button>false</button><h1>yes</h1>'
+		);
+
+		f.click();
+		await tick();
+
+		t.click();
+		await tick();
+
+		f.click();
+		await tick();
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>shift</button><button>true</button><button>false</button><h1>no</h1>'
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>shift</button><button>true</button><button>false</button><h1>yes</h1>'
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>shift</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..ed708354a4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-if/main.svelte
@@ -0,0 +1,30 @@
+<script>
+	let condition = $state(true);
+
+	let deferreds = [];
+
+	function push(value) {
+		const deferred = Promise.withResolvers();
+		deferreds.push({ deferred, value });
+		return deferred.promise;
+	}
+</script>
+
+<button onclick={() => {
+	const d = deferreds.shift();
+	d?.deferred.resolve(d.value);
+}}>shift</button>
+<button onclick={() => condition = true}>true</button>
+<button onclick={() => condition = false}>false</button>
+
+<svelte:boundary>
+	{#if await push(condition)}
+		<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-ignore-skipped-block/_config.js b/packages/svelte/tests/runtime-runes/samples/async-ignore-skipped-block/_config.js
new file mode 100644
index 0000000000..1d1a489d67
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-ignore-skipped-block/_config.js
@@ -0,0 +1,29 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+
+		const [a, b] = target.querySelectorAll('button');
+
+		assert.htmlEqual(target.innerHTML, `<button>a 0</button><button>b 0</button><p>hello</p>`);
+
+		a.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>a 0</button><button>b 0</button><p>hello</p>`);
+
+		a.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>a 2</button><button>b 0</button><p>hello</p>`);
+
+		a.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>a 2</button><button>b 0</button><p>hello</p>`);
+
+		// if we don't skip over the never-resolving promise in the `else` block, we will never update
+		b.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>a 3</button><button>b 1</button><p>hello</p>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-ignore-skipped-block/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-ignore-skipped-block/main.svelte
new file mode 100644
index 0000000000..4ef0694d40
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-ignore-skipped-block/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	let a = $state(0);
+	let b = $state(0);
+	let show = $state(true);
+</script>
+
+<button onclick={() => (a++, show = !show)}>a {a}</button>
+<button onclick={() => (b++, show = !show)}>b {b}</button>
+
+{#if show}
+	<p>hello</p>
+{:else}
+	{await new Promise(() => {})}
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-indirect-blockers/Component1.svelte b/packages/svelte/tests/runtime-runes/samples/async-indirect-blockers/Component1.svelte
new file mode 100644
index 0000000000..a3bb9d92b3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-indirect-blockers/Component1.svelte
@@ -0,0 +1,13 @@
+<script>
+	await 1;
+
+    // Test arrow function style
+	let value = $state('');
+	const getValue = () => { 
+		return value;
+	};
+	const setValue = (v) => { value = v }
+</script>
+
+<input bind:value={getValue, setValue} />
+<p>{getValue()}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-indirect-blockers/Component2.svelte b/packages/svelte/tests/runtime-runes/samples/async-indirect-blockers/Component2.svelte
new file mode 100644
index 0000000000..8b28cf5708
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-indirect-blockers/Component2.svelte
@@ -0,0 +1,11 @@
+<script>
+	await 1;
+
+    // Test function declaration style
+	let value = $state('');
+	function getValue() { return value }
+	function setValue(v) { value = v }
+</script>
+
+<input bind:value={getValue, setValue} />
+<p>{getValue()}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-indirect-blockers/Component3.svelte b/packages/svelte/tests/runtime-runes/samples/async-indirect-blockers/Component3.svelte
new file mode 100644
index 0000000000..f26daeb4f2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-indirect-blockers/Component3.svelte
@@ -0,0 +1,16 @@
+<script>
+	await 1;
+
+    // Test indirect blocker dependencies
+	let value = $state('');
+	function x() {
+		return value;
+	}
+	function getValue() { 
+		return x()
+	}
+	function setValue(v) { value = v }
+</script>
+
+<input bind:value={getValue, setValue} />
+<p>{getValue()}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-indirect-blockers/Component4.svelte b/packages/svelte/tests/runtime-runes/samples/async-indirect-blockers/Component4.svelte
new file mode 100644
index 0000000000..564cb2660a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-indirect-blockers/Component4.svelte
@@ -0,0 +1,19 @@
+<script>
+	await 1;
+
+	let value = $state('');
+
+	// getValue is declared BEFORE x
+	function getValue() { 
+		return x()
+	}
+
+	function x() {
+		return value;
+	}
+
+	function setValue(v) { value = v }
+</script>
+
+<input bind:value={getValue, setValue} />
+<p>{getValue()}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-indirect-blockers/_config.js b/packages/svelte/tests/runtime-runes/samples/async-indirect-blockers/_config.js
new file mode 100644
index 0000000000..7b7ee5b122
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-indirect-blockers/_config.js
@@ -0,0 +1,27 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['async-server', 'client', 'hydrate'],
+	ssrHtml:
+		'<input value=""> <p></p> <input value=""> <p></p> <input value=""> <p></p> <input value=""> <p></p>',
+
+	async test({ assert, target }) {
+		await tick();
+
+		const inputs = Array.from(target.querySelectorAll('input'));
+		const paragraphs = Array.from(target.querySelectorAll('p'));
+
+		for (let i = 0; i < 4; i++) {
+			assert.equal(inputs[i].value, '');
+			assert.htmlEqual(paragraphs[i].innerHTML, '');
+
+			inputs[i].value = 'hello';
+			inputs[i].dispatchEvent(new InputEvent('input', { bubbles: true }));
+			await tick();
+
+			assert.equal(inputs[i].value, 'hello');
+			assert.htmlEqual(paragraphs[i].innerHTML, 'hello');
+		}
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-indirect-blockers/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-indirect-blockers/main.svelte
new file mode 100644
index 0000000000..c30111fd2b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-indirect-blockers/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Component1 from './Component1.svelte';
+	import Component2 from './Component2.svelte';
+	import Component3 from './Component3.svelte';
+	import Component4 from './Component4.svelte';
+</script>
+
+<Component1 />
+<Component2 />
+<Component3 />
+<Component4 />
diff --git a/packages/svelte/tests/runtime-runes/samples/async-inner-after-outer/_config.js b/packages/svelte/tests/runtime-runes/samples/async-inner-after-outer/_config.js
new file mode 100644
index 0000000000..c12eba7d17
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-inner-after-outer/_config.js
@@ -0,0 +1,45 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const shift = document.querySelector('button');
+		shift?.click();
+		await tick();
+		shift?.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<p>true</p>
+			<button>toggle</button>
+			<button>shift</button>
+		`
+		);
+
+		const toggle = target.querySelector('button');
+		toggle?.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<p>true</p>
+			<button>toggle</button>
+			<button>shift</button>
+		`
+		);
+
+		shift?.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>toggle</button>
+			<button>shift</button>
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-inner-after-outer/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-inner-after-outer/main.svelte
new file mode 100644
index 0000000000..0b3b21f28c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-inner-after-outer/main.svelte
@@ -0,0 +1,41 @@
+<script>
+	let show = $state(true);
+	let count = $state(0);
+	let queue = [];
+
+	function foo() {
+		const {promise, resolve} = Promise.withResolvers();
+		const s = show;
+		queue.push(() => resolve(s));
+		return promise;
+	}
+
+	function bar() {
+		const {promise, resolve} = Promise.withResolvers();
+		const s = show;
+		queue.push(() => {
+			// This will create a new batch while the other batch is still in flight
+			count++
+			resolve(s);
+		});
+		return promise;
+	}
+
+	$effect(() => { count; });
+</script>
+
+<svelte:boundary>
+	{#if await foo()}
+		<p>{await bar()}</p>
+	{/if}
+
+	<button onclick={() => {
+		show = !show
+	}}>toggle</button>
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
+
+<button onclick={() => queue.shift()()}>shift</button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-inspect-build/_config.js b/packages/svelte/tests/runtime-runes/samples/async-inspect-build/_config.js
new file mode 100644
index 0000000000..58dd53c762
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-inspect-build/_config.js
@@ -0,0 +1,10 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	ssrHtml: 'works',
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, 'works');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-inspect-build/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-inspect-build/main.svelte
new file mode 100644
index 0000000000..a138475293
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-inspect-build/main.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  const test = async () => "test";
+  await test();
+  $inspect("inspect after await shouldnt break builds");
+</script>
+
+works
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-late-value-init/_config.js b/packages/svelte/tests/runtime-runes/samples/async-late-value-init/_config.js
new file mode 100644
index 0000000000..efc8fe565d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-late-value-init/_config.js
@@ -0,0 +1,9 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, 'aaa 1');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-late-value-init/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-late-value-init/main.svelte
new file mode 100644
index 0000000000..daa539a9b2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-late-value-init/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	let name = $derived(await new Promise((a) => a('aaa')));
+	function use() {
+		return () => 1;
+	}
+	const aa = use();
+</script>
+
+{name}
+{aa()}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-later-promise-fails-first/_config.js b/packages/svelte/tests/runtime-runes/samples/async-later-promise-fails-first/_config.js
new file mode 100644
index 0000000000..5e18c953c7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-later-promise-fails-first/_config.js
@@ -0,0 +1,25 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [increment, pop] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+		increment.click();
+		await tick();
+		increment.click();
+		await tick();
+		pop.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<button>increment</button><button>pop</button> failed');
+
+		pop.click();
+		await tick();
+		pop.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<button>increment</button><button>pop</button> failed');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-later-promise-fails-first/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-later-promise-fails-first/main.svelte
new file mode 100644
index 0000000000..3293e4ab88
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-later-promise-fails-first/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	let count = $state(0);
+
+	const queued = [];
+
+	function push(v) {
+		if (v === 0) return v;
+
+		return new Promise((fulfil,reject) => {
+			queued.push(() => v === 3 ? reject('boom') : fulfil(v));
+		});
+	}
+</script>
+
+<button onclick={() => count++}>increment</button>
+<button onclick={() => queued.pop()?.()}>pop</button>
+
+<svelte:boundary>
+	{await push(count)}
+
+	{#snippet failed()}failed{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-later-sync-overlaps/_config.js b/packages/svelte/tests/runtime-runes/samples/async-later-sync-overlaps/_config.js
new file mode 100644
index 0000000000..a65c8a6fba
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-later-sync-overlaps/_config.js
@@ -0,0 +1,30 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [a_b, b, resolve] = target.querySelectorAll('button');
+
+		a_b.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>a_b 0_0</button> <button>b 0</button> <button>resolve</button> 0'
+		);
+
+		b.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>a_b 0_0</button> <button>b 0</button> <button>resolve</button> 0'
+		);
+
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>a_b 1_2</button> <button>b 2</button> <button>resolve</button> 1'
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-later-sync-overlaps/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-later-sync-overlaps/main.svelte
new file mode 100644
index 0000000000..8a9e2a866c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-later-sync-overlaps/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	let a = $state(0);
+	let b = $state(0);
+	let deferreds = [];
+
+	function push(value) {
+		if (!value) return value;
+		return new Promise(resolve => {
+			deferreds.push(() => resolve(value));
+		});
+	}
+</script>
+
+<button onclick={() => {a++;b++}}>a_b {a}_{b}</button>
+<button onclick={() => (b++)}>b {b}</button>
+<button onclick={() => (deferreds.shift()?.())}>resolve</button>
+{await push(a)}
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..cc7b2756fa
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-linear-order-same-derived/_config.js
@@ -0,0 +1,28 @@
+import { flushSync, tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [a, b, shift, pop] = target.querySelectorAll('button');
+
+		shift.click();
+		await tick();
+
+		const p = /** @type {HTMLElement} */ (target.querySelector('#test'));
+
+		assert.htmlEqual(p.innerHTML, '1 + 2 = 3');
+
+		flushSync(() => a.click());
+		flushSync(() => b.click());
+
+		pop.click();
+		await tick();
+
+		assert.htmlEqual(p.innerHTML, '1 + 3 = 4');
+
+		pop.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..48ff06fece
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-linear-order-same-derived/main.svelte
@@ -0,0 +1,28 @@
+<script>
+	let deferreds = [];
+
+	let a = $state(1);
+	let b = $state(2);
+
+	async function push(a, b) {
+		var d = Promise.withResolvers();
+		deferreds.push(d);
+		await d.promise;
+
+		return a + b;
+	}
+</script>
+
+<button onclick={() => a++}>a++</button>
+<button onclick={() => b++}>b++</button>
+
+<button onclick={() => deferreds.shift()?.resolve()}>shift</button>
+<button onclick={() => deferreds.pop()?.resolve()}>pop</button>
+
+<svelte:boundary>
+	<p id="test">{a} + {b} = {await push(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-nested-top-level/Bar.svelte b/packages/svelte/tests/runtime-runes/samples/async-nested-top-level/Bar.svelte
new file mode 100644
index 0000000000..f1ac9ab760
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-nested-top-level/Bar.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { resolve } from './main.svelte';
+
+	const bar = await new Promise((r) => resolve.push(() => r('bar')));
+</script>
+
+<p>bar: {bar}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-nested-top-level/Foo.svelte b/packages/svelte/tests/runtime-runes/samples/async-nested-top-level/Foo.svelte
new file mode 100644
index 0000000000..e2029a3033
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-nested-top-level/Foo.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { resolve } from './main.svelte';
+	import Bar from './Bar.svelte';
+
+	const foo = await new Promise((r) => resolve.push(() => r('foo')));
+</script>
+
+<p>foo: {foo}</p>
+
+<Bar/>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-nested-top-level/_config.js b/packages/svelte/tests/runtime-runes/samples/async-nested-top-level/_config.js
new file mode 100644
index 0000000000..ca7965bf79
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-nested-top-level/_config.js
@@ -0,0 +1,42 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [show, resolve] = target.querySelectorAll('button');
+
+		show.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>show</button>
+				<button>resolve</button>
+				<p>pending...</p>
+			`
+		);
+
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>show</button>
+				<button>resolve</button>
+				<p>pending...</p>
+			`
+		);
+
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>show</button>
+				<button>resolve</button>
+				<p>foo: foo</p>
+				<p>bar: bar</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-nested-top-level/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-nested-top-level/main.svelte
new file mode 100644
index 0000000000..bd0efaa4f8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-nested-top-level/main.svelte
@@ -0,0 +1,31 @@
+<script module>
+	export let resolve = [];
+</script>
+
+<script>
+	import Foo from './Foo.svelte';
+	
+	let show = $state(false);
+</script>
+
+<button onclick={() => show = true}>
+	show
+</button>
+
+<button onclick={() => resolve.shift()()}>
+	resolve
+</button>
+
+<svelte:boundary>
+	{#if show}
+		<Foo/>
+	{/if}
+
+	{#if $effect.pending()}
+		<p>pending...</p>
+	{/if}
+
+	{#snippet pending()}
+		<p>initializing...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-new-batch-during-initial-load/_config.js b/packages/svelte/tests/runtime-runes/samples/async-new-batch-during-initial-load/_config.js
new file mode 100644
index 0000000000..c8bc4c986f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-new-batch-during-initial-load/_config.js
@@ -0,0 +1,20 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [increment, pop] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+		increment.click();
+		await tick();
+		pop.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>increment</button> <button>pop</button> 2 2 1`);
+
+		pop.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>increment</button> <button>pop</button> 2 2 1`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-new-batch-during-initial-load/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-new-batch-during-initial-load/main.svelte
new file mode 100644
index 0000000000..7689af049c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-new-batch-during-initial-load/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	let count = $state(0);
+	let other = $state(0);
+
+	const queue = [];
+	function push(v) {
+		return new Promise((r,e) => queue.push(() => v === 1 ? e(v) : r(v)));
+	}
+</script>
+
+<button onclick={() => {
+	if (count === 0) {
+		other++;
+		count++;
+	} else {
+		count++
+	}
+}}>increment</button>
+<button onclick={() => queue.pop()?.()}>pop</button>
+
+{#if count > 0}
+	<svelte:boundary>
+		{await push(count)} {count} {other}
+		{#snippet failed()}boom{/snippet}
+	</svelte:boundary> 
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-no-pending-attributes/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-no-pending-attributes/Child.svelte
new file mode 100644
index 0000000000..ab87364cb7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-no-pending-attributes/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	let { thing } = $props();
+</script>
+
+<p>{thing}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-no-pending-attributes/_config.js b/packages/svelte/tests/runtime-runes/samples/async-no-pending-attributes/_config.js
new file mode 100644
index 0000000000..b8f8f61d96
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-no-pending-attributes/_config.js
@@ -0,0 +1,24 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_mode: ['async-server'],
+
+	async test({ assert, target }) {
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p class="cool">cool</p>
+				<p>beans</p>
+
+				<p class="awesome">awesome</p>
+				<p>sauce</p>
+
+				<p class="neato">neato</p>
+				<p>burrito</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-no-pending-attributes/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-no-pending-attributes/main.svelte
new file mode 100644
index 0000000000..7a8280b314
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-no-pending-attributes/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<p {...await { class: 'cool'}}>cool</p>
+<Child {...await { thing: 'beans' }} />
+
+<p class={await 'awesome'}>awesome</p>
+<Child thing={await 'sauce'} />
+
+<p {...{}} class={await 'neato'}>neato</p>
+<Child {...{}} thing={await 'burrito'} />
diff --git a/packages/svelte/tests/runtime-runes/samples/async-no-pending-await-in-block/_config.js b/packages/svelte/tests/runtime-runes/samples/async-no-pending-await-in-block/_config.js
new file mode 100644
index 0000000000..35d88f6c8b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-no-pending-await-in-block/_config.js
@@ -0,0 +1,33 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['hydrate'],
+
+	server_props: {
+		browser: false
+	},
+
+	ssrHtml: `
+		<h1>hello from the server</h1>
+		<h2>hello from the server</h2>
+		<h3>hello from the server</h3>
+	`,
+
+	props: {
+		browser: true
+	},
+
+	async test({ assert, target }) {
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<h1>hello from the browser</h1>
+				<h2>hello from the browser</h2>
+				<h3>hello from the browser</h3>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-no-pending-await-in-block/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-no-pending-await-in-block/main.svelte
new file mode 100644
index 0000000000..82e6a57a18
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-no-pending-await-in-block/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	let { browser = typeof window !== 'undefined' } = $props();
+</script>
+
+{#if await true}
+	<h1>hello from the {browser ? 'browser' : 'server'}</h1>
+{/if}
+
+<h2>hello from the {browser ? 'browser' : 'server'}</h2>
+<h3>hello from the {browser ? 'browser' : 'server'}</h3>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-no-pending-await-in-script-2/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-no-pending-await-in-script-2/Child.svelte
new file mode 100644
index 0000000000..6c2cb70b1a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-no-pending-await-in-script-2/Child.svelte
@@ -0,0 +1,3 @@
+<script lang="ts">
+	await 1;
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-no-pending-await-in-script-2/_config.js b/packages/svelte/tests/runtime-runes/samples/async-no-pending-await-in-script-2/_config.js
new file mode 100644
index 0000000000..0a92bf3bcb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-no-pending-await-in-script-2/_config.js
@@ -0,0 +1,13 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_mode: ['server'],
+
+	ssrHtml: '<p>hello</p>',
+
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<p>hello</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-no-pending-await-in-script-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-no-pending-await-in-script-2/main.svelte
new file mode 100644
index 0000000000..108655973d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-no-pending-await-in-script-2/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<Child />
+
+{#if true}
+	<p>hello</p>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-no-pending-await-in-script/_config.js b/packages/svelte/tests/runtime-runes/samples/async-no-pending-await-in-script/_config.js
new file mode 100644
index 0000000000..0a92bf3bcb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-no-pending-await-in-script/_config.js
@@ -0,0 +1,13 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_mode: ['server'],
+
+	ssrHtml: '<p>hello</p>',
+
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<p>hello</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-no-pending-await-in-script/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-no-pending-await-in-script/main.svelte
new file mode 100644
index 0000000000..aa4c9dff2b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-no-pending-await-in-script/main.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	await 1;
+</script>
+
+{#if true}
+	<p>hello</p>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-no-pending-throws-sync/_config.js b/packages/svelte/tests/runtime-runes/samples/async-no-pending-throws-sync/_config.js
new file mode 100644
index 0000000000..366477d197
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-no-pending-throws-sync/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['server'],
+
+	error: 'await_invalid'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-no-pending-throws-sync/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-no-pending-throws-sync/main.svelte
new file mode 100644
index 0000000000..4b8cd7203b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-no-pending-throws-sync/main.svelte
@@ -0,0 +1 @@
+<p>{await Promise.resolve('hello')}</p>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-no-pending/_config.js b/packages/svelte/tests/runtime-runes/samples/async-no-pending/_config.js
new file mode 100644
index 0000000000..91b516e7c9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-no-pending/_config.js
@@ -0,0 +1,17 @@
+import { tick } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	skip_mode: ['server'],
+
+	ssrHtml: '<p>hello</p>',
+
+	html: '',
+
+	async test({ assert, target }) {
+		await tick();
+		const p = target.querySelector('p');
+		ok(p);
+		assert.htmlEqual(p.outerHTML, '<p>hello</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-no-pending/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-no-pending/main.svelte
new file mode 100644
index 0000000000..4b8cd7203b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-no-pending/main.svelte
@@ -0,0 +1 @@
+<p>{await Promise.resolve('hello')}</p>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-obsolete-branch-no-effect-runs/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-obsolete-branch-no-effect-runs/Child.svelte
new file mode 100644
index 0000000000..1d9bdfada2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-obsolete-branch-no-effect-runs/Child.svelte
@@ -0,0 +1,6 @@
+<script>
+	let { count } = $props();
+	let double = $derived(count * 2);
+
+	$effect.pre(() => console.log(count, double));
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-obsolete-branch-no-effect-runs/_config.js b/packages/svelte/tests/runtime-runes/samples/async-obsolete-branch-no-effect-runs/_config.js
new file mode 100644
index 0000000000..83364706e5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-obsolete-branch-no-effect-runs/_config.js
@@ -0,0 +1,27 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs, warnings }) {
+		const [increment, resolve] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+		assert.deepEqual(logs, []);
+
+		resolve.click();
+		await tick();
+		assert.deepEqual(logs, []);
+
+		resolve.click();
+		await tick();
+		assert.deepEqual(logs, []);
+
+		resolve.click();
+		await tick();
+		assert.deepEqual(logs, [1, 2]);
+
+		// no await waterfall / inert derived warnings
+		assert.deepEqual(warnings, []);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-obsolete-branch-no-effect-runs/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-obsolete-branch-no-effect-runs/main.svelte
new file mode 100644
index 0000000000..fe01ae457e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-obsolete-branch-no-effect-runs/main.svelte
@@ -0,0 +1,31 @@
+<script>
+	import Child from "./Child.svelte";
+	let count = $state(0);
+
+	let deferreds = [];
+
+	function push(v) {
+		return new Promise((resolve, reject) => {
+			deferreds.push({ resolve: () => resolve(v), reject });
+		});
+	}
+</script>
+
+<button onclick={() => count += 1}>increment</button>
+<button onclick={() => deferreds.shift()?.resolve()}>resolve</button>
+
+<svelte:boundary>
+	{#if count % 2 === 0}
+		{@const double = count * 2}
+		<p>true</p>
+		{await push(count)} {double}
+		<Child count={await push(count)} />
+	{:else}
+		<p>false</p>
+		<Child count={await push(count)} />
+	{/if}
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-ondestroy-ordering/A.svelte b/packages/svelte/tests/runtime-runes/samples/async-ondestroy-ordering/A.svelte
new file mode 100644
index 0000000000..f73e368fc8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-ondestroy-ordering/A.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import { destroyed } from './destroyed.js';
+	import C from './C.svelte';
+	onDestroy(() => destroyed.push('A'));
+</script>
+
+<div>A</div>
+<C/>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-ondestroy-ordering/B.svelte b/packages/svelte/tests/runtime-runes/samples/async-ondestroy-ordering/B.svelte
new file mode 100644
index 0000000000..8b107601c4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-ondestroy-ordering/B.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import { destroyed } from './destroyed.js';
+
+	onDestroy(() => destroyed.push('B'));
+  onDestroy(() => destroyed.push('B*'))
+</script>
+
+<div>B</div>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-ondestroy-ordering/C.svelte b/packages/svelte/tests/runtime-runes/samples/async-ondestroy-ordering/C.svelte
new file mode 100644
index 0000000000..8b616d6e94
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-ondestroy-ordering/C.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import { destroyed } from './destroyed.js';
+	onDestroy(() => destroyed.push('C'));
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-ondestroy-ordering/_config.js b/packages/svelte/tests/runtime-runes/samples/async-ondestroy-ordering/_config.js
new file mode 100644
index 0000000000..32def88537
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-ondestroy-ordering/_config.js
@@ -0,0 +1,14 @@
+import { test } from '../../test';
+import { destroyed, reset } from './destroyed.js';
+
+export default test({
+	mode: ['async-server'],
+
+	before_test() {
+		reset();
+	},
+
+	test_ssr({ assert }) {
+		assert.deepEqual(destroyed, ['C', 'A', 'B', 'B*', 'root']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-ondestroy-ordering/destroyed.js b/packages/svelte/tests/runtime-runes/samples/async-ondestroy-ordering/destroyed.js
new file mode 100644
index 0000000000..1afebed3bd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-ondestroy-ordering/destroyed.js
@@ -0,0 +1,4 @@
+/** @type {string[]} */
+export const destroyed = [];
+
+export const reset = () => (destroyed.length = 0);
diff --git a/packages/svelte/tests/runtime-runes/samples/async-ondestroy-ordering/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-ondestroy-ordering/main.svelte
new file mode 100644
index 0000000000..8503a54681
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-ondestroy-ordering/main.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import { destroyed } from './destroyed.js';
+	import A from './A.svelte';
+	import B from './B.svelte';
+
+	onDestroy(() => destroyed.push('root'));
+</script>
+
+{#if await Promise.resolve(true)}
+	<A/>
+{/if}
+<B/>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-1/_config.js b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-1/_config.js
new file mode 100644
index 0000000000..03d8e49b6f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-1/_config.js
@@ -0,0 +1,107 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [a_b, a_c, b_d, shift, pop] = target.querySelectorAll('button');
+
+		a_b.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		a_c.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		b_d.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 1 | b 1 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 2 | b 1 | c 1 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 2 | b 2 | c 1 | d 1
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-1/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-1/main.svelte
new file mode 100644
index 0000000000..25dbe586ca
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-1/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	let a = $state(0);
+	let b = $state(0);
+	let c = $state(0);
+	let d = $state(0);
+
+	const deferred = [];
+
+	function delay(value) {
+		if (!value) return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+a {await delay(a)} | b {await delay(b)} | c {c} | d {d}
+<button onclick={() => {a++;b++;}}>
+	a and b
+</button>
+<button onclick={() => {a++;c++;}}>
+	a and c
+</button>
+<button onclick={() => {b++;d++;}}>
+	b and d
+</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-2/_config.js b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-2/_config.js
new file mode 100644
index 0000000000..f4aff83aad
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-2/_config.js
@@ -0,0 +1,82 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip: true, // TODO works on https://github.com/sveltejs/svelte/pull/17971
+	async test({ assert, target }) {
+		await tick();
+		const [a_b, a_c, b_d, shift, pop] = target.querySelectorAll('button');
+
+		a_b.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		a_c.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		b_d.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		pop.click(); // second b resolved, blocked on first batch because a still pending
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		for (let i = 0; i < 3; i++) {
+			pop.click(); // second a resolved, first a/b now obsolete; empty queue
+			await tick();
+			assert.htmlEqual(
+				target.innerHTML,
+				`
+				a 2 | b 2 | c 1 | d 1
+				<button>a and b</button>
+				<button>a and c</button>
+				<button>b and d</button>
+				<button>shift</button>
+				<button>pop</button>
+			`
+			);
+		}
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-2/main.svelte
new file mode 100644
index 0000000000..25dbe586ca
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-2/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	let a = $state(0);
+	let b = $state(0);
+	let c = $state(0);
+	let d = $state(0);
+
+	const deferred = [];
+
+	function delay(value) {
+		if (!value) return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+a {await delay(a)} | b {await delay(b)} | c {c} | d {d}
+<button onclick={() => {a++;b++;}}>
+	a and b
+</button>
+<button onclick={() => {a++;c++;}}>
+	a and c
+</button>
+<button onclick={() => {b++;d++;}}>
+	b and d
+</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-3/_config.js b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-3/_config.js
new file mode 100644
index 0000000000..c9e7513b22
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-3/_config.js
@@ -0,0 +1,108 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip: true, // TODO works on https://github.com/sveltejs/svelte/pull/17971
+	async test({ assert, target }) {
+		await tick();
+		const [a_b, a_c, b_d, shift, pop] = target.querySelectorAll('button');
+
+		a_b.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		a_c.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		b_d.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		shift.click(); // first a resolved, still pending: [b, a, b]
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		pop.click(); // second b resolved, still pending: [b, a]
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		shift.click(); // first b resolved, first + last batch settled, still pending: [a]
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 1 | b 2 | c 0 | d 1
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		shift.click(); // all resolved
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 2 | b 2 | c 1 | d 1
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-3/main.svelte
new file mode 100644
index 0000000000..25dbe586ca
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-3/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	let a = $state(0);
+	let b = $state(0);
+	let c = $state(0);
+	let d = $state(0);
+
+	const deferred = [];
+
+	function delay(value) {
+		if (!value) return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+a {await delay(a)} | b {await delay(b)} | c {c} | d {d}
+<button onclick={() => {a++;b++;}}>
+	a and b
+</button>
+<button onclick={() => {a++;c++;}}>
+	a and c
+</button>
+<button onclick={() => {b++;d++;}}>
+	b and d
+</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-4/_config.js b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-4/_config.js
new file mode 100644
index 0000000000..472a3ebcaf
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-4/_config.js
@@ -0,0 +1,110 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip: true, // TODO works on https://github.com/sveltejs/svelte/pull/17971
+	async test({ assert, target }) {
+		await tick();
+		const [a_b, a_c, b_d, shift, pop] = target.querySelectorAll('button');
+
+		a_b.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		a_c.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		b_d.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		shift.click(); // first a resolved, still pending: [b, a, b]
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		pop.click(); // second b resolved, still pending: [b, a]
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		pop.click(); // second a resolved, first a/b now obsolete
+		// TODO would be nice to show final result here already, right now it doesn't because
+		// we have no handle on the already resolved first a anymore
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		shift.click(); // queue empty
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 2 | b 2 | c 1 | d 1
+			<button>a and b</button>
+			<button>a and c</button>
+			<button>b and d</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-4/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-4/main.svelte
new file mode 100644
index 0000000000..25dbe586ca
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-4/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	let a = $state(0);
+	let b = $state(0);
+	let c = $state(0);
+	let d = $state(0);
+
+	const deferred = [];
+
+	function delay(value) {
+		if (!value) return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+a {await delay(a)} | b {await delay(b)} | c {c} | d {d}
+<button onclick={() => {a++;b++;}}>
+	a and b
+</button>
+<button onclick={() => {a++;c++;}}>
+	a and c
+</button>
+<button onclick={() => {b++;d++;}}>
+	b and d
+</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-5/_config.js b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-5/_config.js
new file mode 100644
index 0000000000..d03f3cfbb8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-5/_config.js
@@ -0,0 +1,118 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [a, c, shift, pop] = target.querySelectorAll('button');
+
+		a.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		c.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		// how it's on main
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 1 | d 1
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		shift.click();
+		await tick();
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 1 | b 2 | c 1 | d 3
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		// how it's on https://github.com/sveltejs/svelte/pull/17971
+		// shift.click();
+		// await tick();
+		// assert.htmlEqual(
+		// 	target.innerHTML,
+		// 	`
+		// 	a 0 | b 0 | c 0 | d 0
+		// 	<button>a++</button>
+		// 	<button>c++</button>
+		// 	<button>shift</button>
+		// 	<button>pop</button>
+		// `
+		// );
+
+		// shift.click();
+		// await tick();
+		// assert.htmlEqual(
+		// 	target.innerHTML,
+		// 	`
+		// 	a 1 | b 2 | c 0 | d 2
+		// 	<button>a++</button>
+		// 	<button>c++</button>
+		// 	<button>shift</button>
+		// 	<button>pop</button>
+		// `
+		// );
+
+		// shift.click();
+		// await tick();
+		// assert.htmlEqual(
+		// 	target.innerHTML,
+		// 	`
+		// 	a 1 | b 2 | c 1 | d 3
+		// 	<button>a++</button>
+		// 	<button>c++</button>
+		// 	<button>shift</button>
+		// 	<button>pop</button>
+		// `
+		// );
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-5/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-5/main.svelte
new file mode 100644
index 0000000000..cf028718c2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-5/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	let a = $state(0);
+	let b = $derived(await delay(a * 2));
+	let c = $state(0);
+	let d = $derived(await delay(b + c));
+
+	const deferred = [];
+
+	function delay(value) {
+		if (!value) return value; 
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+a {a} | b {b} | c {c} | d {d}
+<button onclick={() => {a++;}}>
+	a++
+</button>
+<button onclick={() => {c++;}}>
+	c++
+</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-6/_config.js b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-6/_config.js
new file mode 100644
index 0000000000..27152889a2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-6/_config.js
@@ -0,0 +1,76 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [a, c, shift, pop] = target.querySelectorAll('button');
+
+		a.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		c.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		// Although the second batch is eventually connected to the first one, we can't see that
+		// at this point yet and so the second one flushes right away.
+		pop.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 1 | d 1
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		pop.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 1 | d 1
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		pop.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 1 | b 2 | c 1 | d 3
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-6/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-6/main.svelte
new file mode 100644
index 0000000000..cf028718c2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-6/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	let a = $state(0);
+	let b = $derived(await delay(a * 2));
+	let c = $state(0);
+	let d = $derived(await delay(b + c));
+
+	const deferred = [];
+
+	function delay(value) {
+		if (!value) return value; 
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+a {a} | b {b} | c {c} | d {d}
+<button onclick={() => {a++;}}>
+	a++
+</button>
+<button onclick={() => {c++;}}>
+	c++
+</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-7/_config.js b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-7/_config.js
new file mode 100644
index 0000000000..b1bf53a2fc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-7/_config.js
@@ -0,0 +1,129 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [a, c, shift, pop] = target.querySelectorAll('button');
+
+		a.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		c.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		shift.click(); // schedules second step of first batch and schedules rerun of second batch
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 0 | b 0 | c 0 | d 0
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		// how it's on main
+
+		pop.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 1 | b 2 | c 0 | d 2
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		shift.click(); // obsolete second batch promise (already rejected)
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 1 | b 2 | c 0 | d 2
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		shift.click(); // first batch resolves
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			a 1 | b 2 | c 1 | d 3
+			<button>a++</button>
+			<button>c++</button>
+			<button>shift</button>
+			<button>pop</button>
+		`
+		);
+
+		// how it's on https://github.com/sveltejs/svelte/pull/17971
+		// pop.click(); // second batch resolves but knows it needs to wait on first batch
+		// await tick();
+		// assert.htmlEqual(
+		// 	target.innerHTML,
+		// 	`
+		// 	a 0 | b 0 | c 0 | d 0
+		// 	<button>a++</button>
+		// 	<button>c++</button>
+		// 	<button>shift</button>
+		// 	<button>pop</button>
+		// `
+		// );
+
+		// shift.click(); // obsolete second batch promise (already rejected)
+		// await tick();
+		// assert.htmlEqual(
+		// 	target.innerHTML,
+		// 	`
+		// 	a 0 | b 0 | c 0 | d 0
+		// 	<button>a++</button>
+		// 	<button>c++</button>
+		// 	<button>shift</button>
+		// 	<button>pop</button>
+		// `
+		// );
+
+		// shift.click(); // first batch resolves, with it second can now resolve as well
+		// await tick();
+		// assert.htmlEqual(
+		// 	target.innerHTML,
+		// 	`
+		// 	a 1 | b 2 | c 1 | d 3
+		// 	<button>a++</button>
+		// 	<button>c++</button>
+		// 	<button>shift</button>
+		// 	<button>pop</button>
+		// `
+		// );
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-7/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-7/main.svelte
new file mode 100644
index 0000000000..cf028718c2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-7/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	let a = $state(0);
+	let b = $derived(await delay(a * 2));
+	let c = $state(0);
+	let d = $derived(await delay(b + c));
+
+	const deferred = [];
+
+	function delay(value) {
+		if (!value) return value; 
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+a {a} | b {b} | c {c} | d {d}
+<button onclick={() => {a++;}}>
+	a++
+</button>
+<button onclick={() => {c++;}}>
+	c++
+</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-1/_config.js b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-1/_config.js
new file mode 100644
index 0000000000..07ce7e340f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-1/_config.js
@@ -0,0 +1,34 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [a_b_fork, a_c, shift, pop, commit] = target.querySelectorAll('button');
+		const [p] = target.querySelectorAll('p');
+
+		a_b_fork.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 0 | b 0 | c 0');
+
+		a_c.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 0 | b 0 | c 0');
+
+		pop.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 1 | b 0 | c 1');
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 1 | b 0 | c 1');
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 1 | b 0 | c 1');
+
+		commit.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 1 | b 1 | c 1');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-1/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-1/main.svelte
new file mode 100644
index 0000000000..60ba74fb8e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-1/main.svelte
@@ -0,0 +1,27 @@
+<script>
+	import { fork } from 'svelte';
+
+	let a = $state(0);
+	let b = $state(0);
+	let c = $state(0);
+	let f;
+
+	const deferred = [];
+
+	function delay(value) {
+		if (!value) return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+<p>a {await delay(a)} | b {await delay(b)} | c {c}</p>
+
+<button onclick={() => {f = fork(() => {a++;b++;});}}>
+	a and b (fork)
+</button>
+<button onclick={() => {a++;c++;}}>
+	a and c
+</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button>
+<button onclick={() => f.commit()}>commit fork</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-2/_config.js b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-2/_config.js
new file mode 100644
index 0000000000..180a190dae
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-2/_config.js
@@ -0,0 +1,42 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [a_b_fork, a_c, b_d, shift, pop, commit] = target.querySelectorAll('button');
+		const [p] = target.querySelectorAll('p');
+
+		a_b_fork.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 0 | b 0 | c 0 | d 0');
+
+		a_c.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 0 | b 0 | c 0 | d 0');
+
+		b_d.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 0 | b 0 | c 0 | d 0');
+
+		pop.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 0 | b 1 | c 0 | d 1');
+
+		pop.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 1 | b 1 | c 1 | d 1');
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 1 | b 1 | c 1 | d 1');
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 1 | b 1 | c 1 | d 1');
+
+		commit.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 1 | b 1 | c 1 | d 1');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-2/main.svelte
new file mode 100644
index 0000000000..6d1c4ab418
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-2/main.svelte
@@ -0,0 +1,31 @@
+<script>
+	import { fork } from 'svelte';
+
+	let a = $state(0);
+	let b = $state(0);
+	let c = $state(0);
+	let d = $state(0);
+	let f;
+
+	const deferred = [];
+
+	function delay(value) {
+		if (!value) return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+<p>a {await delay(a)} | b {await delay(b)} | c {c} | d {d}</p>
+
+<button onclick={() => {f = fork(() => {a++;b++;});}}>
+	a and b (fork)
+</button>
+<button onclick={() => {a++;c++;}}>
+	a and c
+</button>
+<button onclick={() => {b++;d++;}}>
+	b and d
+</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button>
+<button onclick={() => f.commit()}>commit fork</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-3/_config.js b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-3/_config.js
new file mode 100644
index 0000000000..61360d8dc9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-3/_config.js
@@ -0,0 +1,43 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip: true,
+	async test({ assert, target }) {
+		await tick();
+		const [a_b_fork, a_c, b_d, shift, pop, commit] = target.querySelectorAll('button');
+		const [p] = target.querySelectorAll('p');
+
+		a_b_fork.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 0 | b 0 | c 0 | d 0');
+
+		a_c.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 0 | b 0 | c 0 | d 0');
+
+		b_d.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 0 | b 0 | c 0 | d 0');
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 0 | b 0 | c 0 | d 0');
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 0 | b 0 | c 0 | d 0');
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 1 | b 0 | c 1 | d 0');
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 1 | b 1 | c 1 | d 1');
+
+		commit.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a 1 | b 1 | c 1 | d 1');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-3/main.svelte
new file mode 100644
index 0000000000..6d1c4ab418
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlap-multiple-fork-3/main.svelte
@@ -0,0 +1,31 @@
+<script>
+	import { fork } from 'svelte';
+
+	let a = $state(0);
+	let b = $state(0);
+	let c = $state(0);
+	let d = $state(0);
+	let f;
+
+	const deferred = [];
+
+	function delay(value) {
+		if (!value) return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+<p>a {await delay(a)} | b {await delay(b)} | c {c} | d {d}</p>
+
+<button onclick={() => {f = fork(() => {a++;b++;});}}>
+	a and b (fork)
+</button>
+<button onclick={() => {a++;c++;}}>
+	a and c
+</button>
+<button onclick={() => {b++;d++;}}>
+	b and d
+</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button>
+<button onclick={() => f.commit()}>commit fork</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlapping-array/_config.js b/packages/svelte/tests/runtime-runes/samples/async-overlapping-array/_config.js
new file mode 100644
index 0000000000..2dad5babea
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlapping-array/_config.js
@@ -0,0 +1,205 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+
+		const [add, shift, pop] = target.querySelectorAll('button');
+
+		add.click();
+		await tick();
+		add.click();
+		await tick();
+		add.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>add</button>
+				<button>shift</button>
+				<button>pop</button>
+				<p>pending=6 values.length=1 values=[1]</p>
+				<div>not keyed:
+					<div>1</div>
+				</div>
+				<div>keyed:
+					<div>1</div>
+				</div>
+			`
+		);
+
+		shift.click();
+		await tick();
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>add</button>
+				<button>shift</button>
+				<button>pop</button>
+				<p>pending=4 values.length=2 values=[1,2]</p>
+				<div>not keyed:
+					<div>1</div>
+					<div>2</div>
+				</div>
+				<div>keyed:
+					<div>1</div>
+					<div>2</div>
+				</div>
+			`
+		);
+
+		shift.click();
+		await tick();
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>add</button>
+				<button>shift</button>
+				<button>pop</button>
+				<p>pending=2 values.length=3 values=[1,2,3]</p>
+				<div>not keyed:
+					<div>1</div>
+					<div>2</div>
+					<div>3</div>
+				</div>
+				<div>keyed:
+					<div>1</div>
+					<div>2</div>
+					<div>3</div>
+				</div>
+			`
+		);
+
+		shift.click();
+		await tick();
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>add</button>
+				<button>shift</button>
+				<button>pop</button>
+				<p>pending=0 values.length=4 values=[1,2,3,4]</p>
+				<div>not keyed:
+					<div>1</div>
+					<div>2</div>
+					<div>3</div>
+					<div>4</div>
+				</div>
+				<div>keyed:
+					<div>1</div>
+					<div>2</div>
+					<div>3</div>
+					<div>4</div>
+				</div>
+			`
+		);
+
+		add.click();
+		await tick();
+		add.click();
+		await tick();
+		add.click();
+		await tick();
+		add.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>add</button>
+				<button>shift</button>
+				<button>pop</button>
+				<p>pending=8 values.length=4 values=[1,2,3,4]</p>
+				<div>not keyed:
+					<div>1</div>
+					<div>2</div>
+					<div>3</div>
+					<div>4</div>
+				</div>
+				<div>keyed:
+					<div>1</div>
+					<div>2</div>
+					<div>3</div>
+					<div>4</div>
+				</div>
+			`
+		);
+
+		// pop should have no effect until earlier promises have also resolved
+		pop.click();
+		await tick();
+		pop.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>add</button>
+				<button>shift</button>
+				<button>pop</button>
+				<p>pending=6 values.length=4 values=[1,2,3,4]</p>
+				<div>not keyed:
+					<div>1</div>
+					<div>2</div>
+					<div>3</div>
+					<div>4</div>
+				</div>
+				<div>keyed:
+					<div>1</div>
+					<div>2</div>
+					<div>3</div>
+					<div>4</div>
+				</div>
+			`
+		);
+
+		pop.click();
+		await tick();
+		pop.click();
+		await tick();
+		pop.click();
+		await tick();
+		pop.click();
+		await tick();
+		pop.click();
+		await tick();
+		pop.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>add</button>
+				<button>shift</button>
+				<button>pop</button>
+				<p>pending=0 values.length=8 values=[1,2,3,4,5,6,7,8]</p>
+				<div>not keyed:
+					<div>1</div>
+					<div>2</div>
+					<div>3</div>
+					<div>4</div>
+					<div>5</div>
+					<div>6</div>
+					<div>7</div>
+					<div>8</div>
+				</div>
+				<div>keyed:
+					<div>1</div>
+					<div>2</div>
+					<div>3</div>
+					<div>4</div>
+					<div>5</div>
+					<div>6</div>
+					<div>7</div>
+					<div>8</div>
+				</div>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-overlapping-array/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-overlapping-array/main.svelte
new file mode 100644
index 0000000000..e41b6926b8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-overlapping-array/main.svelte
@@ -0,0 +1,44 @@
+<script>
+	let values = $state([1]);
+
+	const queue = [];
+
+	function push(v) {
+		if (v === 1) return v;
+
+		const p = Promise.withResolvers();
+		queue.push(() => p.resolve(v));
+		return p.promise;
+	}
+
+	function addValue() {
+		values.push(values.length+1);
+	}
+</script>
+
+<button onclick={addValue}>add</button>
+<button onclick={() => queue.shift()?.()}>shift</button>
+<button onclick={() => queue.pop()?.()}>pop</button>
+
+<p>
+	pending={$effect.pending()}
+	values.length={values.length}
+	values=[{values}]
+</p>
+
+<div>
+	not keyed:
+	{#each values as v}
+		<div>
+			{await push(v)}
+		</div>
+	{/each}
+</div>
+<div>
+	keyed:
+	{#each values as v(v)}
+		<div>
+			{await push(v)}
+		</div>
+	{/each}
+</div>
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-pending-batch/_config.js b/packages/svelte/tests/runtime-runes/samples/async-pending-batch/_config.js
new file mode 100644
index 0000000000..e7359efa2d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-pending-batch/_config.js
@@ -0,0 +1,16 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	// This test mainly checks that we don't run into the 'Batch has scheduled roots' invariant wrongly.
+	// It is crafted such that two batches are scheduled to run in the same microtask, and the first
+	// tries to rebase the second.
+	async test({ assert, target }) {
+		await tick();
+		const [run] = target.querySelectorAll('button');
+
+		run.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<button>run</button> none none 0');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-pending-batch/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-pending-batch/main.svelte
new file mode 100644
index 0000000000..19305cfb76
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-pending-batch/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	let selectedId = $state(1);
+	let selectedOption = $derived(selectedId ? await selectedId : null);
+</script>
+
+<button onclick={() => (selectedId = null)}>run</button>
+
+{selectedId ?? "none"} {selectedOption ?? "none"} {$effect.pending()}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-pending-effect/Component.svelte b/packages/svelte/tests/runtime-runes/samples/async-pending-effect/Component.svelte
new file mode 100644
index 0000000000..b39ca3dfd4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-pending-effect/Component.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	let x = $state(false);
+
+	$effect(() => {
+		x = true;
+
+		return () => {
+			x = false;
+		}
+	});
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-pending-effect/_config.js b/packages/svelte/tests/runtime-runes/samples/async-pending-effect/_config.js
new file mode 100644
index 0000000000..083608e9dc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-pending-effect/_config.js
@@ -0,0 +1,16 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		// This test causes two batches to be scheduled such that the same root is traversed multiple times,
+		// some of the time while it was already marked clean by a previous batch processing. It tests
+		// that the app stays reactive after, i.e. that the root is not improperly marked as unclean.
+		await tick();
+		const [button] = target.querySelectorAll('button');
+
+		button.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>toggle</button><p>hello</p>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-pending-effect/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-pending-effect/main.svelte
new file mode 100644
index 0000000000..d6c09803f9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-pending-effect/main.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import Component from './Component.svelte';
+
+	let condition = $state(false);
+</script>
+
+<button onclick={() => (condition = !condition)}>toggle</button>
+
+<svelte:boundary>
+	<Component whatever={await 1} />
+
+	{#snippet pending()}
+		<Component />
+	{/snippet}
+</svelte:boundary>
+
+{#if condition}
+	<p>hello</p>
+{/if}
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-props-id/_config.js b/packages/svelte/tests/runtime-runes/samples/async-props-id/_config.js
new file mode 100644
index 0000000000..3c6a6ed247
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-props-id/_config.js
@@ -0,0 +1,11 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	ssrHtml: `<p>s1</p>`,
+
+	async test({ assert, target, variant }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, variant === 'hydrate' ? '<p>s1</p>' : '<p>c1</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-props-id/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-props-id/main.svelte
new file mode 100644
index 0000000000..973d6855a6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-props-id/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	await 1
+	const id = $props.id();
+</script>
+
+<p>{id}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-push-element-dev/_config.js b/packages/svelte/tests/runtime-runes/samples/async-push-element-dev/_config.js
new file mode 100644
index 0000000000..044c6aeb9a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-push-element-dev/_config.js
@@ -0,0 +1,15 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['async-server'],
+
+	compileOptions: {
+		// include `push_element` calls, so that we can check they
+		// run with the correct ssr_context
+		dev: true
+	},
+
+	html: `
+		<h1>hello!</h1>
+	`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-push-element-dev/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-push-element-dev/main.svelte
new file mode 100644
index 0000000000..99ce81e0c0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-push-element-dev/main.svelte
@@ -0,0 +1,3 @@
+{#if await true}
+	<h1>hello!</h1>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-async-after-sync/_config.js b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-async-after-sync/_config.js
new file mode 100644
index 0000000000..2bec9e93a3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-async-after-sync/_config.js
@@ -0,0 +1,27 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+import { normalise_trace_logs } from '../../../helpers.js';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	async test({ assert, target, warnings }) {
+		await new Promise((r) => setTimeout(r, 25));
+
+		const [count] = target.querySelectorAll('button');
+
+		count.click();
+		await new Promise((r) => setTimeout(r, 25));
+
+		assert.deepEqual(normalise_trace_logs(warnings), [
+			{
+				log: 'Detected reactivity loss when reading `other`. This happens when state is read in an async function after an earlier `await`'
+			},
+			{
+				log: 'Detected reactivity loss when reading `other`. This happens when state is read in an async function after an earlier `await`'
+			}
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-async-after-sync/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-async-after-sync/main.svelte
new file mode 100644
index 0000000000..d3bcc199a4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-async-after-sync/main.svelte
@@ -0,0 +1,27 @@
+<script>
+	let count = $state(0);
+	let other = $state(0);
+
+	function delayed(value, ms = 1000) {
+		return new Promise((f) => setTimeout(() => f(value), ms))
+	}
+
+	async function foo() {
+		await new Promise(r => setTimeout(r, 10));
+	}
+
+	async function bar() {
+		const value = await delayed(count, 10);
+		other; // should trigger warning
+		return value;
+	}
+
+	async function get() {
+		foo();
+		return await bar();
+	}
+</script>
+
+<button onclick={() => count++}>{count}</button>
+<button onclick={() => other++}>{other}</button>
+{await get()}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-for-await-break-return/_config.js b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-for-await-break-return/_config.js
new file mode 100644
index 0000000000..7fb54d763c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-for-await-break-return/_config.js
@@ -0,0 +1,21 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+import { normalise_trace_logs } from '../../../helpers.js';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+	html: '<p>pending</p>',
+	async test({ assert, target, warnings }) {
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, '<h1>number -> number -> number -> return -> ended</h1>');
+
+		assert.deepEqual(normalise_trace_logs(warnings), [
+			{
+				log: 'Detected reactivity loss when reading `values[1]`. This happens when state is read in an async function after an earlier `await`'
+			}
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-for-await-break-return/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-for-await-break-return/main.svelte
new file mode 100644
index 0000000000..05ad7a6ee5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-for-await-break-return/main.svelte
@@ -0,0 +1,41 @@
+<script>
+	let values = $state([0, 1, 2]);
+
+	async function get_result() {
+		const logs = [];
+
+		const iterator = {
+			index: 0,
+			async next() {
+				if (this.index >= values.length) return { done: true };
+				return { done: false, value: values[this.index++] };
+			},
+			async return() {
+				logs.push('return');
+				return { done: true };
+			},
+			[Symbol.asyncIterator]() {
+				return this;
+			}
+		};
+
+		for await (const value of iterator) {
+			logs.push('number');
+			// read reactive state after async iterator await
+			if (values.length === 3 && value === 2) {
+				break;
+			}
+		}
+
+		logs.push('ended');
+		return logs.join(' -> ');
+	}
+</script>
+
+<svelte:boundary>
+	<h1>{await get_result()}</h1>
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-for-await-throws-1/_config.js b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-for-await-throws-1/_config.js
new file mode 100644
index 0000000000..9785f639cb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-for-await-throws-1/_config.js
@@ -0,0 +1,24 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+import { normalise_trace_logs } from '../../../helpers.js';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+	html: '<p>pending</p>',
+	async test({ assert, target, warnings }) {
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<h1>number -> number -> number -> return -> body failed -> ended</h1>'
+		);
+
+		assert.deepEqual(normalise_trace_logs(warnings), [
+			{
+				log: 'Detected reactivity loss when reading `values[1]`. This happens when state is read in an async function after an earlier `await`'
+			}
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-for-await-throws-1/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-for-await-throws-1/main.svelte
new file mode 100644
index 0000000000..da7c48642c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-for-await-throws-1/main.svelte
@@ -0,0 +1,45 @@
+<script>
+	let values = $state([0, 1, 2]);
+
+	async function get_result() {
+		const logs = [];
+
+		const iterator = {
+			index: 0,
+			async next() {
+				if (this.index > 2) { done: true }
+				return { done: false, value: values[this.index++] };
+			},
+			async return() {
+				logs.push('return');
+			},
+			[Symbol.asyncIterator]() {
+				return this;
+			}
+		};
+
+		try {
+			for await (const value of iterator) {
+				logs.push('number');
+				// Read reactive state after async iterator await.
+				if (values.length === 3 && value === 2) {
+					throw new Error('body failed');
+				}
+			}
+			logs.push('done');
+		} catch (error) {
+			logs.push(error.message);
+		}
+
+		logs.push('ended');
+		return logs.join(' -> ');
+	}
+</script>
+
+<svelte:boundary>
+	<h1>{await get_result()}</h1>
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-for-await-throws-2/_config.js b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-for-await-throws-2/_config.js
new file mode 100644
index 0000000000..9e8a2d8def
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-for-await-throws-2/_config.js
@@ -0,0 +1,21 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+import { normalise_trace_logs } from '../../../helpers.js';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+	html: '<p>pending</p>',
+	async test({ assert, target, warnings }) {
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, '<h1>number -> number -> next failed -> ended</h1>');
+
+		assert.deepEqual(normalise_trace_logs(warnings), [
+			{
+				log: 'Detected reactivity loss when reading `values[1]`. This happens when state is read in an async function after an earlier `await`'
+			}
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-for-await-throws-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-for-await-throws-2/main.svelte
new file mode 100644
index 0000000000..ffe2ef93c0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-for-await-throws-2/main.svelte
@@ -0,0 +1,43 @@
+<script>
+	let values = $state([0, 1, 2]);
+
+	async function get_result() {
+		const logs = [];
+
+		const iterator = {
+			index: 0,
+			async next() {
+				if (this.index > 1) throw new Error('next failed');
+				return { done: false, value: values[this.index++] };
+			},
+			async return() {
+				logs.push('return');
+			},
+			[Symbol.asyncIterator]() {
+				return this;
+			}
+		};
+
+		try {
+			for await (const value of iterator) {
+				logs.push('number');
+				// Read reactive state after async iterator await.
+				values.length === value;
+			}
+			logs.push('done');
+		} catch (error) {
+			logs.push(error.message);
+		}
+
+		logs.push('ended');
+		return logs.join(' -> ');
+	}
+</script>
+
+<svelte:boundary>
+	<h1>{await get_result()}</h1>
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-for-await/_config.js b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-for-await/_config.js
new file mode 100644
index 0000000000..ddc9cef27d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-for-await/_config.js
@@ -0,0 +1,22 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+import { normalise_trace_logs } from '../../../helpers.js';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	html: `<button>a</button><button>b</button><p>pending</p>`,
+
+	async test({ assert, target, warnings }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<button>a</button><button>b</button><h1>3</h1>');
+
+		assert.deepEqual(normalise_trace_logs(warnings), [
+			{
+				log: 'Detected reactivity loss when reading `values[1]`. This happens when state is read in an async function after an earlier `await`'
+			}
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-for-await/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-for-await/main.svelte
new file mode 100644
index 0000000000..92a6ec18bc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-for-await/main.svelte
@@ -0,0 +1,24 @@
+<script>
+	let values = $state([1, 2]);
+
+	async function get_total() {
+		let total = 0;
+
+		for await (const n of values) {
+			total += n;
+		}
+
+		return total;
+	}
+</script>
+
+<button onclick={() => values[0]++}>a</button>
+<button onclick={() => values[1]++}>b</button>
+
+<svelte:boundary>
+	<h1>{await get_total()}</h1>
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-no-false-positive-1/_config.js b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-no-false-positive-1/_config.js
new file mode 100644
index 0000000000..516fa59a97
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-no-false-positive-1/_config.js
@@ -0,0 +1,21 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	async test({ assert, target, warnings }) {
+		await tick();
+
+		const [x, y] = target.querySelectorAll('button');
+
+		y.click();
+		await tick();
+		x.click();
+		await new Promise((r) => setTimeout(r, 15));
+
+		assert.equal(warnings.length, 0);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-no-false-positive-1/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-no-false-positive-1/main.svelte
new file mode 100644
index 0000000000..9af5206705
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-no-false-positive-1/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	let x = $state(0);
+	let y = $state(0);
+	async function foo(x) {
+		if (x) {
+			await 1; // restores reactivity loss warning context
+			await new Promise(r => setTimeout(r, 10)) // saves reactivity loss warning context; should not keep it while running
+		}
+		return x
+	}
+</script>
+
+{x} {await foo(y)}
+
+<button onclick={() => x += 1}>x++</button>
+<button onclick={() => y += 1}>y++</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-no-false-positive-2/_config.js b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-no-false-positive-2/_config.js
new file mode 100644
index 0000000000..6c774609e5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-no-false-positive-2/_config.js
@@ -0,0 +1,19 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	async test({ assert, target, warnings }) {
+		await tick();
+
+		const [count] = target.querySelectorAll('button');
+
+		count.click();
+		await tick();
+
+		assert.equal(warnings.length, 0);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-no-false-positive-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-no-false-positive-2/main.svelte
new file mode 100644
index 0000000000..ea7e9dcc9b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-no-false-positive-2/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	let count = $state(0);
+	async function delay(c) {
+		if (c) {
+			await new Promise(r => setTimeout(r));
+			count; // count already read synchronously; should not result in reacitive loss warning
+		}
+		return c;
+	}
+</script>
+
+{await delay(count)}
+
+<button onclick={() => count += 1}>count++</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-no-false-positive-3/_config.js b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-no-false-positive-3/_config.js
new file mode 100644
index 0000000000..c9c02336bc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-no-false-positive-3/_config.js
@@ -0,0 +1,19 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	async test({ assert, target, warnings }) {
+		await new Promise((r) => setTimeout(r, 5));
+
+		const [count] = target.querySelectorAll('button');
+
+		count.click();
+		await tick();
+
+		assert.equal(warnings.length, 0);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-no-false-positive-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-no-false-positive-3/main.svelte
new file mode 100644
index 0000000000..a016655b7c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reactivity-loss-no-false-positive-3/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	let count = $state(0);
+
+	async function run() {
+		await new Promise(r => setTimeout(r));
+	}
+	async function get() { 
+		run();
+		return 1;
+	}
+</script>
+
+<button onclick={() => count++}>{count}</button>
+{await get()}
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..747648e83f
--- /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, 'traced at');
+
+		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..fe92977c21
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-redirect/_config.js
@@ -0,0 +1,54 @@
+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>
+				<p>b or 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>
+				<p>b or c</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..aead1b00e5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-redirect/main.svelte
@@ -0,0 +1,47 @@
+<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}
+
+	{#if route === 'b' || route === 'c'}
+		<p>b or 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-reference-in-snippet/_config.js b/packages/svelte/tests/runtime-runes/samples/async-reference-in-snippet/_config.js
new file mode 100644
index 0000000000..c6903c3eed
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reference-in-snippet/_config.js
@@ -0,0 +1,9 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, 'value');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reference-in-snippet/app.svelte b/packages/svelte/tests/runtime-runes/samples/async-reference-in-snippet/app.svelte
new file mode 100644
index 0000000000..27b29cfe50
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reference-in-snippet/app.svelte
@@ -0,0 +1,9 @@
+<script>
+	const value = await 'value';
+</script>
+
+{#snippet valueSnippet()}
+	{value}
+{/snippet}
+
+{@render valueSnippet()}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reference-in-snippet/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-reference-in-snippet/main.svelte
new file mode 100644
index 0000000000..c251a5645b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reference-in-snippet/main.svelte
@@ -0,0 +1,8 @@
+<script>
+    import App from './app.svelte';
+</script>
+<svelte:boundary>
+    {#snippet pending()}
+    {/snippet}
+    <App />
+</svelte:boundary>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-render-component-hydration/Image.svelte b/packages/svelte/tests/runtime-runes/samples/async-render-component-hydration/Image.svelte
new file mode 100644
index 0000000000..2696aeb8c2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-render-component-hydration/Image.svelte
@@ -0,0 +1,5 @@
+<script>
+	let { src } = $props();
+</script>
+
+<img {src} />
diff --git a/packages/svelte/tests/runtime-runes/samples/async-render-component-hydration/Link.svelte b/packages/svelte/tests/runtime-runes/samples/async-render-component-hydration/Link.svelte
new file mode 100644
index 0000000000..527bba1171
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-render-component-hydration/Link.svelte
@@ -0,0 +1,7 @@
+<script>
+	let { children } = $props();
+</script>
+
+<a href="/">
+	{@render children()}
+</a>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-render-component-hydration/_config.js b/packages/svelte/tests/runtime-runes/samples/async-render-component-hydration/_config.js
new file mode 100644
index 0000000000..6e3ce0df88
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-render-component-hydration/_config.js
@@ -0,0 +1,14 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['hydrate'],
+
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<a href="/"><div>card</div> <img src="https://svelte.dev" /></a>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-render-component-hydration/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-render-component-hydration/main.svelte
new file mode 100644
index 0000000000..cb411f6e6c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-render-component-hydration/main.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import Image from "./Image.svelte";
+	import Link from "./Link.svelte";
+
+	let url = $derived(await 'https://svelte.dev');
+</script>
+
+<Link>
+	<div>card</div>
+	<Image src={url} />
+</Link>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-render-hydration/_config.js b/packages/svelte/tests/runtime-runes/samples/async-render-hydration/_config.js
new file mode 100644
index 0000000000..2e37b0b9ac
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-render-hydration/_config.js
@@ -0,0 +1,11 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['hydrate'],
+
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, `Count: 1 Double: 2`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-render-hydration/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-render-hydration/main.svelte
new file mode 100644
index 0000000000..e26ff87567
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-render-hydration/main.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	let count = $state(1);
+	async function getDouble(count: number) {
+		return count * 2;
+	}
+	const double = $derived(await getDouble(count));
+</script>
+
+Count: {count}
+
+{#snippet ssr(num: number)}
+	{num}
+{/snippet}
+
+Double: {@render ssr(double)}
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-reschedule-during-flush/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-reschedule-during-flush/Child.svelte
new file mode 100644
index 0000000000..2684005fcf
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reschedule-during-flush/Child.svelte
@@ -0,0 +1,3 @@
+<script>
+	$effect(() => {})
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reschedule-during-flush/_config.js b/packages/svelte/tests/runtime-runes/samples/async-reschedule-during-flush/_config.js
new file mode 100644
index 0000000000..a837d02f9f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reschedule-during-flush/_config.js
@@ -0,0 +1,26 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [a, b, resolve] = target.querySelectorAll('button');
+
+		a.click();
+		await tick();
+
+		b.click();
+		await tick();
+
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>a (true)</button>
+				<button>b (true)</button>
+				<button>resolve</button>
+				42
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-reschedule-during-flush/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-reschedule-during-flush/main.svelte
new file mode 100644
index 0000000000..48940017a8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-reschedule-during-flush/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	import Child from './Child.svelte';
+
+	let a = $state(false);
+	let b = $state(false);
+
+	let deferred = [];
+
+	function push(value) {
+		const d = Promise.withResolvers();
+		deferred.push(() => d.resolve(value))
+		return d.promise;
+	}
+</script>
+
+<button onclick={() => a = !a}>a ({a})</button>
+<button onclick={() => b = !b}>b ({b})</button>
+<button onclick={() => deferred.shift()()}>resolve</button>
+
+{#if a}
+	{await push(42)}
+	<Child />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-resolve-stale/_config.js b/packages/svelte/tests/runtime-runes/samples/async-resolve-stale/_config.js
new file mode 100644
index 0000000000..7fb49c473e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-resolve-stale/_config.js
@@ -0,0 +1,30 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		// We gotta wait a bit more in this test because of the macrotasks in App.svelte
+		function sleep(t = 50) {
+			return new Promise((r) => setTimeout(r, t));
+		}
+
+		await sleep();
+		assert.htmlEqual(target.innerHTML, '<input> 1 | ');
+
+		const [input] = target.querySelectorAll('input');
+
+		input.value = '1';
+		input.dispatchEvent(new Event('input', { bubbles: true }));
+		await sleep();
+		assert.htmlEqual(target.innerHTML, '<input> 1 | ');
+
+		input.value = '12';
+		input.dispatchEvent(new Event('input', { bubbles: true }));
+		await sleep();
+		assert.htmlEqual(target.innerHTML, '<input> 3 | 12');
+
+		input.value = '';
+		input.dispatchEvent(new Event('input', { bubbles: true }));
+		await sleep();
+		assert.htmlEqual(target.innerHTML, '<input> 4 | ');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-resolve-stale/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-resolve-stale/main.svelte
new file mode 100644
index 0000000000..dec5a55899
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-resolve-stale/main.svelte
@@ -0,0 +1,39 @@
+<script>
+	let count = $state(0);
+	let value = $state('');
+
+	let resolver;
+
+	function asd(v) {
+		let r = Promise.withResolvers();
+
+		function update_and_resolve() {
+			count++;
+			r.resolve(v);
+		}
+
+		// make sure the second promise resolve before the first one
+		if (resolver){
+			new Promise(r => {
+				setTimeout(r);
+			}).then(update_and_resolve).then(() => {
+				setTimeout(() => {
+					resolver();
+					resolver = null;
+				});
+			});
+		} else if (v) {
+			resolver = update_and_resolve;
+		} else {
+			Promise.resolve().then(update_and_resolve);
+		}
+
+		return r.promise;
+	}
+
+	const x = $derived(await asd(value))
+</script>
+
+<input bind:value />
+
+{count} | {x}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-run-isolated-batch/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-run-isolated-batch/Child.svelte
new file mode 100644
index 0000000000..6f84dc319e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-run-isolated-batch/Child.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { push } from "./main.svelte";
+	const x = await push(1);
+	const y = await push(2);
+</script>
+
+{x} {y}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-run-isolated-batch/_config.js b/packages/svelte/tests/runtime-runes/samples/async-run-isolated-batch/_config.js
new file mode 100644
index 0000000000..a0dc38c660
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-run-isolated-batch/_config.js
@@ -0,0 +1,26 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [show, resolve, count] = target.querySelectorAll('button');
+
+		show.click();
+		await tick();
+		resolve.click();
+		await tick();
+		count.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>show</button> <button>resolve</button> <button>1</button>'
+		);
+
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			'1 2 <button>show</button> <button>resolve</button> <button>1</button>'
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-run-isolated-batch/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-run-isolated-batch/main.svelte
new file mode 100644
index 0000000000..0a5346cc47
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-run-isolated-batch/main.svelte
@@ -0,0 +1,23 @@
+<script module>
+	const queued = [];
+	export function push(v) {
+		return new Promise((fulfil) => {
+			queued.push(() => fulfil(v));
+		});
+	}
+</script>
+
+<script>
+	import Child from "./Child.svelte";
+
+	let show = $state(false);
+	let count = $state(0);
+</script>
+
+{#if show}
+	<Child />
+{/if}
+
+<button onclick={() => show = true}>show</button>
+<button onclick={() => queued.shift()?.()}>resolve</button>
+<button onclick={() => count++}>{count}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-select-dynamic-options-while-focused/_config.js b/packages/svelte/tests/runtime-runes/samples/async-select-dynamic-options-while-focused/_config.js
new file mode 100644
index 0000000000..24e2036d39
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-select-dynamic-options-while-focused/_config.js
@@ -0,0 +1,54 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [add, shift, reset] = target.querySelectorAll('button');
+
+		// resolve initial pending state
+		shift.click();
+		await tick();
+
+		const [p] = target.querySelectorAll('p');
+
+		const select = /** @type {HTMLSelectElement} */ (target.querySelector('select'));
+		assert.equal(select.value, 'a');
+
+		// add option 'c', making items ['a', 'b', 'c']
+		add.click();
+		await tick();
+
+		// select 'b' while focused
+		select.focus();
+		select.value = 'b';
+		select.dispatchEvent(new InputEvent('change', { bubbles: true }));
+		await tick();
+
+		assert.equal(select.value, 'b');
+		assert.equal(p.textContent, 'a');
+
+		// add option 'd', making items ['a', 'b', 'c', 'd']
+		// this triggers MutationObserver which uses select.__value
+		add.click();
+		await tick();
+
+		// select should still show 'b', not snap to a stale value
+		assert.equal(select.value, 'b');
+		assert.equal(p.textContent, 'a');
+
+		shift.click();
+		await tick();
+		assert.equal(select.value, 'b');
+		assert.equal(p.textContent, 'b');
+
+		reset.click();
+		await tick();
+		assert.equal(select.value, 'b');
+		assert.equal(p.textContent, 'b');
+
+		shift.click();
+		await tick();
+		assert.equal(select.value, 'a');
+		assert.equal(p.textContent, 'a');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-select-dynamic-options-while-focused/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-select-dynamic-options-while-focused/main.svelte
new file mode 100644
index 0000000000..968e920f82
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-select-dynamic-options-while-focused/main.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	let selected = $state('a');
+	let items = $state(['a', 'b']);
+
+	let resolvers = [];
+	let select;
+
+	function push(value) {
+		const { promise, resolve } = Promise.withResolvers();
+		resolvers.push(() => resolve(value));
+		return promise;
+	}
+</script>
+
+<button onclick={() => items.push(String.fromCharCode(97 + items.length))}>add</button>
+<button onclick={() => resolvers.shift()?.()}>shift</button>
+<button onclick={() => selected = 'a'}>reset</button>
+
+<svelte:boundary>
+	<select bind:this={select} bind:value={selected}>
+		{#each items as item}
+			<option value={item}>{item}</option>
+		{/each}
+	</select>
+
+	<p>{await push(selected)}</p>
+
+	{#snippet pending()}
+		<p>loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-set-context/A.svelte b/packages/svelte/tests/runtime-runes/samples/async-set-context/A.svelte
new file mode 100644
index 0000000000..5b85a553d4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-set-context/A.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { setContext } from "svelte";
+	import B from "./B.svelte";
+
+	let greeting = 'hello';
+	setContext("greeting", greeting);
+
+	await Promise.resolve();
+
+	let recipient = 'world';
+</script>
+
+<B {recipient} />
diff --git a/packages/svelte/tests/runtime-runes/samples/async-set-context/B.svelte b/packages/svelte/tests/runtime-runes/samples/async-set-context/B.svelte
new file mode 100644
index 0000000000..2c93263ca5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-set-context/B.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { setContext } from "svelte";
+	import C from "./C.svelte";
+
+	let { recipient } = $props();
+
+	// svelte-ignore state_referenced_locally
+	setContext("recipient", recipient);
+	await Promise.resolve();
+</script>
+
+<C />
diff --git a/packages/svelte/tests/runtime-runes/samples/async-set-context/C.svelte b/packages/svelte/tests/runtime-runes/samples/async-set-context/C.svelte
new file mode 100644
index 0000000000..2aebf7a64f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-set-context/C.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { getContext } from "svelte";
+
+  let greeting = getContext("greeting");
+  let recipient = getContext("recipient");
+</script>
+
+<p>{greeting} {recipient}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-set-context/_config.js b/packages/svelte/tests/runtime-runes/samples/async-set-context/_config.js
new file mode 100644
index 0000000000..aebed211cc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-set-context/_config.js
@@ -0,0 +1,11 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client', 'async-server'],
+	ssrHtml: `<p>hello world</p>`,
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<p>hello world</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-set-context/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-set-context/main.svelte
new file mode 100644
index 0000000000..e2189e7eb8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-set-context/main.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import A from "./A.svelte";
+
+	await Promise.resolve();
+</script>
+
+<A />
diff --git a/packages/svelte/tests/runtime-runes/samples/async-settled-after-dom/_config.js b/packages/svelte/tests/runtime-runes/samples/async-settled-after-dom/_config.js
new file mode 100644
index 0000000000..2c9816f3ed
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-settled-after-dom/_config.js
@@ -0,0 +1,27 @@
+import { settled, tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+
+	async test({ assert, target }) {
+		const [shift, update] = target.querySelectorAll('button');
+
+		shift.click();
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, '<button>shift</button><button>update</button><p>hello</p>');
+
+		update.click();
+		const promise = settled();
+
+		await tick();
+		shift.click();
+		await promise;
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>shift</button><button>update</button><p>goodbye</p>'
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-settled-after-dom/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-settled-after-dom/main.svelte
new file mode 100644
index 0000000000..0db9f80118
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-settled-after-dom/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	let text = $state('hello');
+
+	const resolvers = [];
+
+	function push(value) {
+		const { promise, resolve } = Promise.withResolvers();
+		resolvers.push(() => resolve(value));
+		return promise;
+	}
+</script>
+
+<button onclick={() => resolvers.shift()?.()}>shift</button>
+<button onclick={() => text = 'goodbye'}>update</button>
+
+<svelte:boundary>
+	<p>{await push(text)}</p>
+
+	{#snippet pending()}{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-settled-blockers-hydration/_config.js b/packages/svelte/tests/runtime-runes/samples/async-settled-blockers-hydration/_config.js
new file mode 100644
index 0000000000..f6f6c81350
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-settled-blockers-hydration/_config.js
@@ -0,0 +1,14 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_mode: ['server'],
+	skip_no_async: true,
+
+	ssrHtml: `<div>1</div><p>after</p>`,
+
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<div>1</div><p>after</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-settled-blockers-hydration/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-settled-blockers-hydration/main.svelte
new file mode 100644
index 0000000000..1b1dc17242
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-settled-blockers-hydration/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	const n = $derived(await Promise.resolve(1));
+</script>
+
+{#snippet child(n)}
+	<div>{n}</div>
+{/snippet}
+
+{#if n}
+	{@render child(n)}
+{/if}
+
+<p>after</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-settled-discard/_config.js b/packages/svelte/tests/runtime-runes/samples/async-settled-discard/_config.js
new file mode 100644
index 0000000000..29ed72d90a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-settled-discard/_config.js
@@ -0,0 +1,37 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		await tick();
+		const [increment, pop] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+		increment.click();
+		await tick();
+		pop.click();
+		await tick();
+		assert.deepEqual(logs, ['settled 2', 'settled 2']);
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				2
+				<button>increment</button>
+				<button>pop</button>
+			`
+		);
+
+		pop.click();
+		await tick();
+		assert.deepEqual(logs, ['settled 2', 'settled 2']);
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				2
+				<button>increment</button>
+				<button>pop</button>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-settled-discard/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-settled-discard/main.svelte
new file mode 100644
index 0000000000..c3675f8add
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-settled-discard/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	import { settled } from "svelte";
+
+	let count = $state(0);
+	let queued = [];
+
+	function push(v) {
+		if (!v) return v;
+
+		return new Promise((resolve) => {
+			queued.push(() => resolve(v));
+		});
+	}
+</script>
+
+{await push(count)}
+<button onclick={async () => {
+	count++;
+	await settled();
+	console.log('settled ' + count);
+}}>increment</button>
+<button onclick={() => queued.pop()?.()}>pop</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-skipped-branch/_config.js b/packages/svelte/tests/runtime-runes/samples/async-skipped-branch/_config.js
new file mode 100644
index 0000000000..9741b1e836
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-skipped-branch/_config.js
@@ -0,0 +1,21 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	async test({ assert, target }) {
+		const [fork_btn, counter_btn] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			fork_btn.click();
+		});
+
+		assert.equal(counter_btn.textContent, '0');
+
+		flushSync(() => {
+			counter_btn.click();
+		});
+
+		assert.equal(counter_btn.textContent, '1');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-skipped-branch/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-skipped-branch/main.svelte
new file mode 100644
index 0000000000..163609ac58
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-skipped-branch/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	let show = $state(false);
+	let show_async = $state(false);
+	let count = $state(0);
+</script>
+
+<button onclick={() => {
+	show = true;
+	show_async = true;
+}}>show</button>
+
+{#if show}
+	hi
+{:else}
+	{#if show || !show}
+		<button onclick={() => count++}>{count}</button>
+	{/if}
+{/if}
+
+{#if show_async}
+	{await new Promise(() => {})}
+{/if}
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-snippet-coordinated-mount/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-snippet-coordinated-mount/Child.svelte
new file mode 100644
index 0000000000..7085219a5a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-snippet-coordinated-mount/Child.svelte
@@ -0,0 +1,7 @@
+<script>
+	let { children, push } = $props();
+	let message = await push('hello from child');
+</script>
+
+<p>message: {message}</p>
+{@render children()}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-snippet-coordinated-mount/_config.js b/packages/svelte/tests/runtime-runes/samples/async-snippet-coordinated-mount/_config.js
new file mode 100644
index 0000000000..b6ca2ae3d2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-snippet-coordinated-mount/_config.js
@@ -0,0 +1,25 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [shift] = target.querySelectorAll('button');
+
+		shift.click();
+		await tick();
+
+		assert.htmlEqual(target.innerHTML, `<button>shift</button><p>loading...</p>`);
+
+		shift.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>shift</button>
+				<p>message: hello from child</p>
+				<p>hello from parent</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-snippet-coordinated-mount/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-snippet-coordinated-mount/main.svelte
new file mode 100644
index 0000000000..3ad2c9572a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-snippet-coordinated-mount/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	import Child from './Child.svelte';
+	const resolvers = [];
+	function push(value) {
+		const { promise, resolve } = Promise.withResolvers();
+		resolvers.push(() => resolve(value));
+		return promise;
+	}
+</script>
+
+<button onclick={() => resolvers.shift()?.()}>shift</button>
+
+<svelte:boundary>
+	<Child {push}>
+		<p>{await push('hello from parent')}</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-3/_config.js b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-3/_config.js
new file mode 100644
index 0000000000..ff03e0e28e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-3/_config.js
@@ -0,0 +1,29 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+
+		const [increment, pop] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+
+		increment.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>increment</button><button>pop</button><p>0 0 0</p>`
+		);
+
+		pop.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>increment</button><button>pop</button><p>2 2 1</p>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-stale-derived-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-3/main.svelte
new file mode 100644
index 0000000000..589ac9ea0e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-3/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	let count = $state(0);
+	let other = $state(0);
+
+	const queue = [];
+
+	function push(v) {
+		if (v === 0) return v;
+
+		return new Promise((fulfil) => {
+			queue.push(() => fulfil(v));
+		});
+	}
+</script>
+
+<button onclick={() => {
+	if (count === 0) other++;
+	count++;
+}}>increment</button>
+<button onclick={() => queue.pop()?.()}>pop</button>
+
+<p>{await push(count)} {count} {other}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-stale-derived-4/_config.js b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-4/_config.js
new file mode 100644
index 0000000000..e1555c0062
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-4/_config.js
@@ -0,0 +1,28 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+
+		const [increment, hide, pop] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+		pop.click();
+		await tick();
+		hide.click(); // hides the if block, which cancels the pending async inside, which means the batch can complete
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>increment</button> <button>hide</button> <button>pop</button> 1`
+		);
+
+		pop.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>increment</button> <button>hide</button> <button>pop</button> 1`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-stale-derived-4/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-4/main.svelte
new file mode 100644
index 0000000000..5ff3263d39
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-4/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	let show = $state(true);
+	let count = $state(0);
+
+	const queue = [];
+
+	function push(value) {
+		if (!value) return value;
+		return new Promise(r => queue.push(() => r(value)));
+	}
+</script>
+
+<button onclick={() => count += 1}>increment</button>
+<button onclick={() => show = false}>hide</button>
+<!-- pop() so that the outer one resolves first, not the one inside the if block -->
+<button onclick={() => queue.pop()?.()}>pop</button>
+
+{await push(count)}
+{#if show}
+	{await push(count)}
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-stale-derived-5/_config.js b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-5/_config.js
new file mode 100644
index 0000000000..05d92e9df2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-5/_config.js
@@ -0,0 +1,33 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+
+		const [increment, shift] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+		increment.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>3</button><button>shift</button><p>1 = 1</p><p>fizz: true</p><p>buzz: true</p>`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>3</button><button>shift</button><p>1 = 1</p><p>fizz: true</p><p>buzz: true</p>`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>3</button><button>shift</button><p>3 = 3</p><p>fizz: true</p><p>buzz: false</p>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-stale-derived-5/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-5/main.svelte
new file mode 100644
index 0000000000..b2a40e65b3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-5/main.svelte
@@ -0,0 +1,44 @@
+<script>
+	import { getAbortSignal } from 'svelte';
+
+	const queue = [];
+
+	let n = $state(1);
+	let fizz = $state(true);
+	let buzz = $state(true);
+
+	function increment() {
+		n++;
+
+		fizz = n % 3 === 0;
+		buzz = n % 5 === 0;
+	}
+
+	function push(value) {
+		if (value === 1) return 1;
+		const d = Promise.withResolvers();
+
+		queue.push(() => d.resolve(value));
+
+		const signal = getAbortSignal();
+		signal.onabort = () => d.reject(signal.reason);
+
+		return d.promise;
+	}
+</script>
+
+<button onclick={increment}>
+	{$state.eager(n)}
+</button>
+
+<button onclick={() => queue.shift()?.()}>shift</button>
+
+<p>{n} = {await push(n)}</p>
+
+{#if true}
+	<p>fizz: {fizz}</p>
+{/if}
+
+{#if true}
+	<p>buzz: {buzz}</p>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-stale-derived-6/_config.js b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-6/_config.js
new file mode 100644
index 0000000000..5b951d6c49
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-6/_config.js
@@ -0,0 +1,34 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [button1, button2, pop, shift] = target.querySelectorAll('button');
+		const [p] = target.querySelectorAll('p');
+
+		button1.click();
+		await tick();
+		button2.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, `0 + 0 = 0 | 0 0`);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, `0 + 0 = 0 | 0 0`);
+
+		pop.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, `0 + 0 = 0 | 0 0`);
+
+		pop.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, `1 + 0 = 1 | 1 0`);
+
+		shift.click();
+		await tick();
+		pop.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, `1 + 2 = 3 | 1 1`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-stale-derived-6/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-6/main.svelte
new file mode 100644
index 0000000000..4515e7a488
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-6/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	const queue1 = [];
+	const queue2 = [];
+
+	let a = $state(0);
+	let b = $state(0);
+	let c = $state(0);
+	let d = $state(0)
+
+	function push(value, where = 1) {
+		if (!value) return value;
+		return new Promise(r => (where === 1 ? queue1 : queue2).push(() => r(value)));
+	}
+</script>
+
+<button onclick={() => {a++;c++}}>a / c</button>
+<button onclick={() => {b+=2;d++}}>b / d</button>
+<button onclick={() => queue1.pop()?.()}>pop 1</button>
+<button onclick={() => queue2.shift()?.()}>shift 2</button>
+
+<p>{a} + {b} = {await push(a + b)} | {await push(c, 2)} {await push(d, 2)}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-stale-derived-7/_config.js b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-7/_config.js
new file mode 100644
index 0000000000..a6f1833d67
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-7/_config.js
@@ -0,0 +1,34 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		const [button1, button2, shift_1, pop_1, shift_2] = target.querySelectorAll('button');
+		const [p] = target.querySelectorAll('p');
+
+		button1.click();
+		await tick();
+		button2.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, `0 + 0 = 0 | 0 0`);
+
+		pop_1.click();
+		await tick();
+		shift_2.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, `0 + 0 = 0 | 0 0`);
+
+		// Check that the first batch can still resolve before the second even if one of its async values
+		// is already superseeded (but the subsequent batch as a whole is still pending).
+		shift_1.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, `1 + 0 = 1 | 1 0`);
+
+		shift_1.click();
+		await tick();
+		shift_2.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, `1 + 2 = 3 | 1 1`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-stale-derived-7/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-7/main.svelte
new file mode 100644
index 0000000000..fec684c257
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-7/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	const queue1 = [];
+	const queue2 = [];
+
+	let a = $state(0);
+	let b = $state(0);
+	let c = $state(0);
+	let d = $state(0)
+
+	function push(value, where = 1) {
+		if (!value) return value;
+		return new Promise(r => (where === 1 ? queue1 : queue2).push(() => r(value)));
+	}
+</script>
+
+<button onclick={() => {a++;c++}}>a / c</button>
+<button onclick={() => {b+=2;d++}}>b / d</button>
+<button onclick={() => queue1.shift()?.()}>shift 1</button>
+<button onclick={() => queue1.pop()?.()}>pop 1</button>
+<button onclick={() => queue2.shift()?.()}>shift 2</button>
+
+<p>{a} + {b} = {await push(a + b)} | {await push(c, 2)} {await push(d, 2)}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-stale-derived-8/_config.js b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-8/_config.js
new file mode 100644
index 0000000000..fd0fc0de48
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-8/_config.js
@@ -0,0 +1,20 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [increment, pop] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+		increment.click();
+		await tick();
+		pop.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<button>increment</button><button>pop</button> 2 2 1'); // showing nothing here yet would also be ok
+
+		pop.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<button>increment</button><button>pop</button> 2 2 1');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-stale-derived-8/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-8/main.svelte
new file mode 100644
index 0000000000..42b7206b56
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-stale-derived-8/main.svelte
@@ -0,0 +1,23 @@
+
+<script>
+	let count = $state(0);
+	let other = $state(0);
+
+	const queue = [];
+
+	function push(v) {
+		if (v === 0) return v;
+
+		return new Promise((resolve) => queue.push(() => resolve(v)));
+	}
+</script>
+
+<button onclick={() => {
+	if (count === 0) other++;
+	count++;
+}}>increment</button>
+<button onclick={() => queue.pop()?.()}>pop</button>
+
+{#if count > 0}
+	{await push(count)} {count} {other}
+{/if}
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-state-eager-const/_config.js b/packages/svelte/tests/runtime-runes/samples/async-state-eager-const/_config.js
new file mode 100644
index 0000000000..1511d443e5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-eager-const/_config.js
@@ -0,0 +1,21 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: { dev: true }, // for testing that teardown effect in eager $.get(loaded) doesn't lead to a crash (because it means REACTION_RAN is set, which means unfreeze_derived runs)
+	async test({ assert, target }) {
+		const [count, shift] = target.querySelectorAll('button');
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>0</button><button>shift</button><p>0</p>`);
+
+		count.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>1</button><button>shift</button><p>0 (...)</p>`);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>1</button><button>shift</button><p>1</p>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-eager-const/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-eager-const/main.svelte
new file mode 100644
index 0000000000..f0e2f1cdac
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-eager-const/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	let count = $state(0);
+
+	let resolvers = [];
+
+	function push(value) {
+		const { promise, resolve } = Promise.withResolvers();
+		resolvers.push(() => resolve(value));
+		return promise;
+	}
+</script>
+
+<button onclick={() => count += 1}>{$state.eager(count)}</button>
+<button onclick={() => resolvers.shift()?.()}>shift</button>
+
+<svelte:boundary>
+	{@const loaded = $state.eager(count) === count}
+	<p>{await push(count)} {loaded ? '' : '(...)'}</p>
+
+	{#snippet pending()}{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-eager/_config.js b/packages/svelte/tests/runtime-runes/samples/async-state-eager/_config.js
new file mode 100644
index 0000000000..f84228ec14
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-eager/_config.js
@@ -0,0 +1,36 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [count, shift] = target.querySelectorAll('button');
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>0</button><button>shift</button><p>0</p>`);
+
+		count.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>1</button><button>shift</button><p>0</p>`);
+
+		count.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>2</button><button>shift</button><p>0</p>`);
+
+		count.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>3</button><button>shift</button><p>0</p>`);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>3</button><button>shift</button><p>1</p>`);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>3</button><button>shift</button><p>2</p>`);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>3</button><button>shift</button><p>3</p>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-eager/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-eager/main.svelte
new file mode 100644
index 0000000000..c9168b3984
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-eager/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	let count = $state(0);
+
+	let resolvers = [];
+
+	function push(value) {
+		const { promise, resolve } = Promise.withResolvers();
+		resolvers.push(() => resolve(value));
+		return promise;
+	}
+</script>
+
+<button onclick={() => count += 1}>{$state.eager(count)}</button>
+<button onclick={() => resolvers.shift()?.()}>shift</button>
+
+<svelte:boundary>
+	<p>{await push(count)}</p>
+
+	{#snippet pending()}{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-1/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-1/Child.svelte
new file mode 100644
index 0000000000..6b765526c8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-1/Child.svelte
@@ -0,0 +1,7 @@
+<script>
+	let { x } = $props();
+	console.log(x);
+	$effect(() => console.log('$effect: '+ x))
+</script>
+
+{x}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-1/_config.js b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-1/_config.js
new file mode 100644
index 0000000000..dee8af2446
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-1/_config.js
@@ -0,0 +1,45 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [x, y, resolve] = target.querySelectorAll('button');
+
+		x.click();
+		await tick();
+
+		y.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			world
+		` // if this does not show world - that would also be ok
+		);
+
+		resolve.click();
+		await tick();
+		assert.deepEqual(logs, [
+			'universe',
+			'world',
+			'$effect: world',
+			'$effect: universe',
+			'$effect: universe'
+		]);
+		// assert.deepEqual(logs, ['universe', 'universe', '$effect: universe', '$effect: universe']); // this would also be ok
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			universe
+			universe
+			universe
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-1/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-1/main.svelte
new file mode 100644
index 0000000000..8edc718de2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-1/main.svelte
@@ -0,0 +1,28 @@
+<script>
+	import Child from './Child.svelte';
+
+	let x = $state('world');
+	let y = $state(0);
+	let deferred = [];
+
+	function delay(s) {
+		const d = Promise.withResolvers();
+		deferred.push(() => d.resolve(s))
+		return d.promise;
+	}
+</script>
+
+<button onclick={() => x = 'universe'}>x</button>
+
+<button onclick={() => y++}>y++</button>
+
+<button onclick={() => deferred.shift()()}>resolve</button>
+
+{#if x === 'universe'}
+	{await delay(x)}
+	<Child {x} />
+{/if}
+
+{#if y > 0}
+	<Child {x} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-2/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-2/Child.svelte
new file mode 100644
index 0000000000..f8c01e9efd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-2/Child.svelte
@@ -0,0 +1,11 @@
+<script>
+	let { x } = $props();
+</script>
+
+<!-- checks direct source, indirect derived, block effect, async effect -->
+{x}
+{JSON.stringify(x)}
+{#if x === 'universe'}universe{:else}world{/if}
+{#if JSON.stringify(x) === '"universe"'}universe{:else}world{/if}
+{await Promise.resolve(x)}
+{await Promise.resolve(JSON.stringify(x))}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-2/_config.js b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-2/_config.js
new file mode 100644
index 0000000000..d99f0df731
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-2/_config.js
@@ -0,0 +1,54 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [x, y, resolve] = target.querySelectorAll('button');
+
+		x.click();
+		await tick();
+
+		y.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			<hr>
+			world
+			"world"
+			world
+			world
+			world
+			"world"
+		` // if this does not show world "world" world world world "world" - then this would also be ok
+		);
+
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			universe
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+			<hr>
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-2/main.svelte
new file mode 100644
index 0000000000..11c4bdf5d1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-2/main.svelte
@@ -0,0 +1,30 @@
+<script>
+	import Child from './Child.svelte';
+
+	let x = $state('world');
+	let y = $state(0);
+	let deferred = [];
+
+	function delay(s) {
+		const d = Promise.withResolvers();
+		deferred.push(() => d.resolve(s))
+		return d.promise;
+	}
+</script>
+
+<button onclick={() => x = 'universe'}>x</button>
+
+<button onclick={() => y++}>y++</button>
+
+<button onclick={() => deferred.shift()()}>resolve</button>
+
+{#if x === 'universe'}
+	{await delay(x)}
+	<Child {x} />
+{/if}
+
+<hr>
+
+{#if y > 0}
+	<Child {x} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-3/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-3/Child.svelte
new file mode 100644
index 0000000000..f8c01e9efd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-3/Child.svelte
@@ -0,0 +1,11 @@
+<script>
+	let { x } = $props();
+</script>
+
+<!-- checks direct source, indirect derived, block effect, async effect -->
+{x}
+{JSON.stringify(x)}
+{#if x === 'universe'}universe{:else}world{/if}
+{#if JSON.stringify(x) === '"universe"'}universe{:else}world{/if}
+{await Promise.resolve(x)}
+{await Promise.resolve(JSON.stringify(x))}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-3/_config.js b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-3/_config.js
new file mode 100644
index 0000000000..eb4485e8a6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-3/_config.js
@@ -0,0 +1,68 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [x, y, resolve] = target.querySelectorAll('button');
+
+		x.click();
+		await tick();
+
+		y.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			<hr>
+		`
+		);
+
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			<hr>
+			world
+			"world"
+			world
+			world
+			world
+			"world"
+		` // if this does not show world "world" world world world "world" - then this would also be ok
+		);
+
+		resolve.click();
+		await tick();
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			universe
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+			<hr>
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-3/main.svelte
new file mode 100644
index 0000000000..c8a4ca587f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-3/main.svelte
@@ -0,0 +1,33 @@
+<script>
+	import Child from './Child.svelte';
+
+	let x = $state('world');
+	let y = $state(0);
+
+	const deferred = [];
+
+	function delay(value) {
+		if (value !== 'universe') return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+
+	function delay2(value) {
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+<button onclick={() => (x = 'universe')}>x</button>
+
+<button onclick={() => y++}>y++</button>
+<button onclick={() => deferred.pop()?.()}>resolve</button>
+
+{#if x === 'universe'}
+	{await delay(x)}
+	<Child {x} />
+{/if}
+
+<hr>
+
+{#if y > 0}
+	<Child x={await delay2(x)} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-all-combinations/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-all-combinations/Child.svelte
new file mode 100644
index 0000000000..f8c01e9efd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-all-combinations/Child.svelte
@@ -0,0 +1,11 @@
+<script>
+	let { x } = $props();
+</script>
+
+<!-- checks direct source, indirect derived, block effect, async effect -->
+{x}
+{JSON.stringify(x)}
+{#if x === 'universe'}universe{:else}world{/if}
+{#if JSON.stringify(x) === '"universe"'}universe{:else}world{/if}
+{await Promise.resolve(x)}
+{await Promise.resolve(JSON.stringify(x))}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-all-combinations/_config.js b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-all-combinations/_config.js
new file mode 100644
index 0000000000..8b7e7784de
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-all-combinations/_config.js
@@ -0,0 +1,171 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip: true, // TODO more combinations pass on https://github.com/sveltejs/svelte/pull/17971
+	timeout: 20_000,
+	async test({ assert, target }) {
+		const [x, fork_x, y, fork_y, shift, pop, commit_x, commit_y, reset] =
+			target.querySelectorAll('button');
+
+		const initial = `
+			<button>x</button>
+			<button>x (fork)</button>
+			<button>y++</button>
+			<button>y++ (fork)</button>
+			<button>shift</button>
+			<button>pop</button>
+			<button>commit x</button>
+			<button>commit y</button>
+			<button>reset</button>
+			<hr>
+		`;
+
+		const final = `
+			<button>x</button>
+			<button>x (fork)</button>
+			<button>y++</button>
+			<button>y++ (fork)</button>
+			<button>shift</button>
+			<button>pop</button>
+			<button>commit x</button>
+			<button>commit y</button>
+			<button>reset</button>
+			universe
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+			<hr>
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+		`;
+
+		/** @param {HTMLElement} button */
+		async function click(button) {
+			button.click();
+			await tick();
+		}
+
+		/**
+		 * Generate all permutations of an array.
+		 * @param {HTMLElement[]} actions
+		 * @returns {HTMLElement[][]}
+		 */
+		function permutations(actions) {
+			if (actions.length <= 1) return [actions];
+
+			/** @type {HTMLElement[][]} */
+			const result = [];
+
+			for (let i = 0; i < actions.length; i++) {
+				const head = actions[i];
+				const rest = actions.slice(0, i).concat(actions.slice(i + 1));
+				for (const tail of permutations(rest)) {
+					result.push([head, ...tail]);
+				}
+			}
+
+			return result;
+		}
+
+		/**
+		 * Keep only valid orders where fork commits happen after their fork action.
+		 * @param {HTMLElement[]} order
+		 */
+		function is_valid_order(order) {
+			const x_fork_index = order.indexOf(fork_x);
+			const commit_x_index = order.indexOf(commit_x);
+			if (commit_x_index !== -1 && (x_fork_index === -1 || commit_x_index < x_fork_index)) {
+				return false;
+			}
+
+			const y_fork_index = order.indexOf(fork_y);
+			const commit_y_index = order.indexOf(commit_y);
+			if (commit_y_index !== -1 && (y_fork_index === -1 || commit_y_index < y_fork_index)) {
+				return false;
+			}
+
+			return true;
+		}
+
+		/**
+		 * Four control scenarios:
+		 * - x direct, y direct
+		 * - x direct, y via fork+commit
+		 * - x via fork+commit, y direct
+		 * - x via fork+commit, y via fork+commit
+		 */
+		const control_scenarios = [
+			[x, y],
+			[x, fork_y, commit_y],
+			[fork_x, commit_x, y],
+			[fork_x, commit_x, fork_y, commit_y]
+		];
+
+		const control_orders = control_scenarios.flatMap((scenario) =>
+			permutations(scenario).filter(is_valid_order)
+		);
+
+		/**
+		 * All shift/pop combinations for draining async work.
+		 * We click three times because this scenario can queue up to 3 deferred resolutions.
+		 */
+		const resolve_orders = [
+			[shift, shift, shift],
+			[shift, pop, pop],
+			[pop, shift, shift],
+			[pop, pop, pop]
+		];
+
+		for (const controls of control_orders) {
+			for (const resolves of resolve_orders) {
+				for (const action of controls) {
+					await click(action);
+				}
+
+				for (const action of resolves) {
+					await click(action);
+				}
+
+				const failure_msg = `Failed for: ${controls
+					.map((btn) => btn.textContent)
+					.concat(...resolves.map((btn) => btn.textContent))
+					.join(', ')}`;
+				assert.htmlEqual(target.innerHTML, final, failure_msg);
+
+				await click(reset);
+				assert.htmlEqual(target.innerHTML, initial, failure_msg);
+			}
+		}
+
+		const other_scenarios = [
+			[x, shift, y, shift, shift],
+			[x, shift, y, pop, pop],
+			[fork_x, shift, y, shift, commit_x, shift],
+			[fork_x, shift, y, pop, commit_x, pop],
+			[y, shift, x, shift, shift],
+			[y, shift, x, pop, pop],
+			[fork_y, shift, x, shift, commit_y, shift],
+			[fork_y, shift, x, pop, commit_y, pop]
+		];
+
+		for (const scenario of other_scenarios) {
+			for (const action of scenario) {
+				await click(action);
+			}
+
+			const failure_msg = `Failed for: ${scenario.map((btn) => btn.textContent).join(', ')}`;
+			assert.htmlEqual(target.innerHTML, final, failure_msg);
+
+			await click(reset);
+			assert.htmlEqual(target.innerHTML, initial, failure_msg);
+		}
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-all-combinations/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-all-combinations/main.svelte
new file mode 100644
index 0000000000..bb821d9b0f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-all-combinations/main.svelte
@@ -0,0 +1,41 @@
+<script>
+	import { fork } from 'svelte';
+	import Child from './Child.svelte';
+
+	let x = $state('world');
+	let y = $state(0);
+	let fx;
+	let fy;
+
+	const deferred = [];
+
+	function delay(value) {
+		if (value !== 'universe') return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+
+	function delay2(value) {
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+<button onclick={() => (x = 'universe')}>x</button>
+<button onclick={() => (fx = fork(() => {x = 'universe';}))}>x (fork)</button>
+<button onclick={() => y++}>y++</button>
+<button onclick={() => (fy = fork(() => {y++;}))}>y++ (fork)</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button>
+<button onclick={() => fx.commit()}>commit x</button>
+<button onclick={() => fy.commit()}>commit y</button>
+<button onclick={() => {x = 'world'; y = 0;}}>reset</button>
+
+{#if x === 'universe'}
+	{await delay(x)}
+	<Child {x} />
+{/if}
+
+<hr>
+
+{#if y > 0}
+	<Child x={await delay2(x)} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-1/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-1/Child.svelte
new file mode 100644
index 0000000000..f8c01e9efd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-1/Child.svelte
@@ -0,0 +1,11 @@
+<script>
+	let { x } = $props();
+</script>
+
+<!-- checks direct source, indirect derived, block effect, async effect -->
+{x}
+{JSON.stringify(x)}
+{#if x === 'universe'}universe{:else}world{/if}
+{#if JSON.stringify(x) === '"universe"'}universe{:else}world{/if}
+{await Promise.resolve(x)}
+{await Promise.resolve(JSON.stringify(x))}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-1/_config.js b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-1/_config.js
new file mode 100644
index 0000000000..737169cb91
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-1/_config.js
@@ -0,0 +1,90 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip: true, // TODO works on https://github.com/sveltejs/svelte/pull/17971
+	async test({ assert, target }) {
+		const [x, y, shift, pop, commit] = target.querySelectorAll('button');
+
+		x.click();
+		await tick();
+
+		y.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>shift</button>
+			<button>pop</button>
+			<button>commit</button>
+			<hr>
+		`
+		);
+
+		commit.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>shift</button>
+			<button>pop</button>
+			<button>commit</button>
+			<hr>
+		`
+		);
+
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>shift</button>
+			<button>pop</button>
+			<button>commit</button>
+			universe
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+			<hr>
+		`
+		);
+
+		shift.click();
+		await tick();
+		shift.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>shift</button>
+			<button>pop</button>
+			<button>commit</button>
+			universe
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+			<hr>
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-1/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-1/main.svelte
new file mode 100644
index 0000000000..5f8d5efa13
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-1/main.svelte
@@ -0,0 +1,36 @@
+<script>
+	import { fork } from 'svelte';
+	import Child from './Child.svelte';
+
+	let x = $state('world');
+	let y = $state(0);
+	let f;
+
+	const deferred = [];
+
+	function delay(value) {
+		if (value !== 'universe') return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+
+	function delay2(value) {
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+<button onclick={() => (f = fork(() => {x = 'universe';}))}>x</button>
+<button onclick={() => y++}>y++</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button>
+<button onclick={() => f.commit()}>commit</button>
+
+{#if x === 'universe'}
+	{await delay(x)}
+	<Child {x} />
+{/if}
+
+<hr>
+
+{#if y > 0}
+	<Child x={await delay2(x)} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-2/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-2/Child.svelte
new file mode 100644
index 0000000000..f8c01e9efd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-2/Child.svelte
@@ -0,0 +1,11 @@
+<script>
+	let { x } = $props();
+</script>
+
+<!-- checks direct source, indirect derived, block effect, async effect -->
+{x}
+{JSON.stringify(x)}
+{#if x === 'universe'}universe{:else}world{/if}
+{#if JSON.stringify(x) === '"universe"'}universe{:else}world{/if}
+{await Promise.resolve(x)}
+{await Promise.resolve(JSON.stringify(x))}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-2/_config.js b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-2/_config.js
new file mode 100644
index 0000000000..74df968d82
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-2/_config.js
@@ -0,0 +1,72 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [x, y, shift, pop, commit] = target.querySelectorAll('button');
+
+		y.click();
+		await tick();
+
+		x.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>shift</button>
+			<button>pop</button>
+			<button>commit</button>
+			<hr>
+		`
+		);
+
+		commit.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>shift</button>
+			<button>pop</button>
+			<button>commit</button>
+			<hr>
+		`
+		);
+
+		shift.click();
+		await tick();
+		shift.click();
+		await tick();
+		shift.click();
+		await tick();
+		shift.click(); // would be ok to not need this one
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>shift</button>
+			<button>pop</button>
+			<button>commit</button>
+			universe
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+			<hr>
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-2/main.svelte
new file mode 100644
index 0000000000..5f8d5efa13
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-2/main.svelte
@@ -0,0 +1,36 @@
+<script>
+	import { fork } from 'svelte';
+	import Child from './Child.svelte';
+
+	let x = $state('world');
+	let y = $state(0);
+	let f;
+
+	const deferred = [];
+
+	function delay(value) {
+		if (value !== 'universe') return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+
+	function delay2(value) {
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+<button onclick={() => (f = fork(() => {x = 'universe';}))}>x</button>
+<button onclick={() => y++}>y++</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button>
+<button onclick={() => f.commit()}>commit</button>
+
+{#if x === 'universe'}
+	{await delay(x)}
+	<Child {x} />
+{/if}
+
+<hr>
+
+{#if y > 0}
+	<Child x={await delay2(x)} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-3/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-3/Child.svelte
new file mode 100644
index 0000000000..f8c01e9efd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-3/Child.svelte
@@ -0,0 +1,11 @@
+<script>
+	let { x } = $props();
+</script>
+
+<!-- checks direct source, indirect derived, block effect, async effect -->
+{x}
+{JSON.stringify(x)}
+{#if x === 'universe'}universe{:else}world{/if}
+{#if JSON.stringify(x) === '"universe"'}universe{:else}world{/if}
+{await Promise.resolve(x)}
+{await Promise.resolve(JSON.stringify(x))}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-3/_config.js b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-3/_config.js
new file mode 100644
index 0000000000..905e76511b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-3/_config.js
@@ -0,0 +1,70 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [x, y, shift, pop, commit] = target.querySelectorAll('button');
+
+		y.click();
+		await tick();
+
+		x.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>shift</button>
+			<button>pop</button>
+			<button>commit</button>
+			<hr>
+		`
+		);
+
+		commit.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>shift</button>
+			<button>pop</button>
+			<button>commit</button>
+			<hr>
+		`
+		);
+
+		pop.click();
+		await tick();
+		pop.click();
+		await tick();
+		pop.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>shift</button>
+			<button>pop</button>
+			<button>commit</button>
+			universe
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+			<hr>
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-3/main.svelte
new file mode 100644
index 0000000000..5f8d5efa13
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-3/main.svelte
@@ -0,0 +1,36 @@
+<script>
+	import { fork } from 'svelte';
+	import Child from './Child.svelte';
+
+	let x = $state('world');
+	let y = $state(0);
+	let f;
+
+	const deferred = [];
+
+	function delay(value) {
+		if (value !== 'universe') return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+
+	function delay2(value) {
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+<button onclick={() => (f = fork(() => {x = 'universe';}))}>x</button>
+<button onclick={() => y++}>y++</button>
+<button onclick={() => deferred.shift()?.()}>shift</button>
+<button onclick={() => deferred.pop()?.()}>pop</button>
+<button onclick={() => f.commit()}>commit</button>
+
+{#if x === 'universe'}
+	{await delay(x)}
+	<Child {x} />
+{/if}
+
+<hr>
+
+{#if y > 0}
+	<Child x={await delay2(x)} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-4/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-4/Child.svelte
new file mode 100644
index 0000000000..f8c01e9efd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-4/Child.svelte
@@ -0,0 +1,11 @@
+<script>
+	let { x } = $props();
+</script>
+
+<!-- checks direct source, indirect derived, block effect, async effect -->
+{x}
+{JSON.stringify(x)}
+{#if x === 'universe'}universe{:else}world{/if}
+{#if JSON.stringify(x) === '"universe"'}universe{:else}world{/if}
+{await Promise.resolve(x)}
+{await Promise.resolve(JSON.stringify(x))}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-4/_config.js b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-4/_config.js
new file mode 100644
index 0000000000..6a6399a19e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-4/_config.js
@@ -0,0 +1,76 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip: true, // TODO works on https://github.com/sveltejs/svelte/pull/17971
+	async test({ assert, target }) {
+		const [x, y, resolve, commit] = target.querySelectorAll('button');
+
+		x.click();
+		await tick();
+
+		y.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			<button>commit</button>
+			<hr>
+			world
+			"world"
+			world
+			world
+			world
+			"world"
+		`
+		);
+
+		commit.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			<button>commit</button>
+			<hr>
+			world
+			"world"
+			world
+			world
+			world
+			"world"
+		`
+		);
+
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			<button>commit</button>
+			universe
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+			<hr>
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-4/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-4/main.svelte
new file mode 100644
index 0000000000..5f00fc4dec
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-4/main.svelte
@@ -0,0 +1,32 @@
+<script>
+	import { fork } from 'svelte';
+	import Child from './Child.svelte';
+
+	let x = $state('world');
+	let y = $state(0);
+	let f;
+
+	const deferred = [];
+
+	function delay(value) {
+		if (value !== 'universe') return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+<button onclick={() => (f = fork(() => {x = 'universe';}))}>x</button>
+
+<button onclick={() => y++}>y++</button>
+<button onclick={() => deferred.pop()?.()}>resolve</button>
+<button onclick={() => f.commit()}>commit</button>
+
+{#if x === 'universe'}
+	{await delay(x)}
+	<Child {x} />
+{/if}
+
+<hr>
+
+{#if y > 0}
+	<Child {x} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-5/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-5/Child.svelte
new file mode 100644
index 0000000000..f8c01e9efd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-5/Child.svelte
@@ -0,0 +1,11 @@
+<script>
+	let { x } = $props();
+</script>
+
+<!-- checks direct source, indirect derived, block effect, async effect -->
+{x}
+{JSON.stringify(x)}
+{#if x === 'universe'}universe{:else}world{/if}
+{#if JSON.stringify(x) === '"universe"'}universe{:else}world{/if}
+{await Promise.resolve(x)}
+{await Promise.resolve(JSON.stringify(x))}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-5/_config.js b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-5/_config.js
new file mode 100644
index 0000000000..e8f16ade3c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-5/_config.js
@@ -0,0 +1,84 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [x, y, resolve, commit] = target.querySelectorAll('button');
+
+		x.click();
+		await tick();
+
+		y.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			<button>commit</button>
+			<hr>
+		`
+		);
+
+		commit.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			<button>commit</button>
+			<hr>
+		`
+		);
+
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			<button>commit</button>
+			<hr>
+			world
+			"world"
+			world
+			world
+			world
+			"world"
+		`
+		);
+
+		resolve.click();
+		await tick();
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			<button>commit</button>
+			universe
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+			<hr>
+			universe
+			"universe"
+			universe
+			universe
+			universe
+			"universe"
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-5/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-5/main.svelte
new file mode 100644
index 0000000000..5575e3cbd4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch-fork-5/main.svelte
@@ -0,0 +1,36 @@
+<script>
+	import { fork } from 'svelte';
+	import Child from './Child.svelte';
+
+	let x = $state('world');
+	let y = $state(0);
+	let f;
+
+	const deferred = [];
+
+	function delay(value) {
+		if (value !== 'universe') return value;
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+
+	function delay2(value) {
+		return new Promise((resolve) => deferred.push(() => resolve(value)));
+	}
+</script>
+
+<button onclick={() => (f = fork(() => {x = 'universe';}))}>x</button>
+
+<button onclick={() => y++}>y++</button>
+<button onclick={() => deferred.pop()?.()}>resolve</button>
+<button onclick={() => f.commit()}>commit</button>
+
+{#if x === 'universe'}
+	{await delay(x)}
+	<Child {x} />
+{/if}
+
+<hr>
+
+{#if y > 0}
+	<Child x={await delay2(x)} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch/Child.svelte
new file mode 100644
index 0000000000..6b765526c8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch/Child.svelte
@@ -0,0 +1,7 @@
+<script>
+	let { x } = $props();
+	console.log(x);
+	$effect(() => console.log('$effect: '+ x))
+</script>
+
+{x}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch/_config.js b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch/_config.js
new file mode 100644
index 0000000000..f4b6cc777b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch/_config.js
@@ -0,0 +1,46 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [x, y, resolve] = target.querySelectorAll('button');
+
+		x.click();
+		await tick();
+		assert.deepEqual(logs, ['universe']);
+
+		y.click();
+		await tick();
+		assert.deepEqual(logs, ['universe', 'world', '$effect: world']);
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			world
+		`
+		);
+
+		resolve.click();
+		await tick();
+		assert.deepEqual(logs, [
+			'universe',
+			'world',
+			'$effect: world',
+			'$effect: universe',
+			'$effect: universe'
+		]);
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>x</button>
+			<button>y++</button>
+			<button>resolve</button>
+			universe
+			universe
+			universe
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-new-branch/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch/main.svelte
new file mode 100644
index 0000000000..8edc718de2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-new-branch/main.svelte
@@ -0,0 +1,28 @@
+<script>
+	import Child from './Child.svelte';
+
+	let x = $state('world');
+	let y = $state(0);
+	let deferred = [];
+
+	function delay(s) {
+		const d = Promise.withResolvers();
+		deferred.push(() => d.resolve(s))
+		return d.promise;
+	}
+</script>
+
+<button onclick={() => x = 'universe'}>x</button>
+
+<button onclick={() => y++}>y++</button>
+
+<button onclick={() => deferred.shift()()}>resolve</button>
+
+{#if x === 'universe'}
+	{await delay(x)}
+	<Child {x} />
+{/if}
+
+{#if y > 0}
+	<Child {x} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-updates-microtask-separated/_config.js b/packages/svelte/tests/runtime-runes/samples/async-state-updates-microtask-separated/_config.js
new file mode 100644
index 0000000000..dea121c456
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-updates-microtask-separated/_config.js
@@ -0,0 +1,15 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+// Ensure that microtask timing doesn't influence whether or not a scheduled batch is flushed.
+// Timing can be such that the current_batch is reset before the scheduled flush runs, which
+// would cause the flush to skip without the fix.
+export default test({
+	async test({ assert, target }) {
+		const [btn] = target.querySelectorAll('button');
+
+		btn.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, '1 1');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-state-updates-microtask-separated/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-state-updates-microtask-separated/main.svelte
new file mode 100644
index 0000000000..ebfbf4ca4e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-state-updates-microtask-separated/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	let a = $state(0);
+	let b = $state(0);
+</script>
+
+{#if a}
+	{@const toShow = await a}
+	{toShow}
+	{b}
+{:else}
+	<button
+		onclick={async () => {
+			a = 1;
+			await 1;
+			await 1; // two microtasks needed to get timing right to reproduce the bug
+			b = 1;
+		}}>click</button>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-static-derived-after-await/_config.js b/packages/svelte/tests/runtime-runes/samples/async-static-derived-after-await/_config.js
new file mode 100644
index 0000000000..5c95b3149c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-static-derived-after-await/_config.js
@@ -0,0 +1,9 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<p>hello</p>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-static-derived-after-await/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-static-derived-after-await/main.svelte
new file mode 100644
index 0000000000..9ecc839c3c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-static-derived-after-await/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	await 0;
+	let message = $derived('hello');
+</script>
+
+<p>{message}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-static-prop-after-await/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-static-prop-after-await/Child.svelte
new file mode 100644
index 0000000000..e93bbe3dc0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-static-prop-after-await/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	let { value } = $props();
+</script>
+
+{value}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-static-prop-after-await/_config.js b/packages/svelte/tests/runtime-runes/samples/async-static-prop-after-await/_config.js
new file mode 100644
index 0000000000..eff988e0d6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-static-prop-after-await/_config.js
@@ -0,0 +1,11 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['async-server', 'client', 'hydrate'],
+	ssrHtml: 'value <div class="value"></div>',
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, 'value <div class="value"></div>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-static-prop-after-await/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-static-prop-after-await/main.svelte
new file mode 100644
index 0000000000..1083882e1f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-static-prop-after-await/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Child from './Child.svelte';
+	
+	await Promise.resolve();
+
+	let value = 'value';
+</script>
+ 
+<Child {value} />
+<div class={value}></div>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-style-after-await/_config.js b/packages/svelte/tests/runtime-runes/samples/async-style-after-await/_config.js
new file mode 100644
index 0000000000..472e7076c3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-style-after-await/_config.js
@@ -0,0 +1,30 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['async-server', 'client', 'hydrate'],
+	ssrHtml: `
+		<div style="color: red;"></div>
+		<div style="width: 100px;"></div>
+		<button>width</button>
+		<div style="color: red;"></div>
+		<div style="width: 100px;"></div>
+		<button>width</button>
+	`,
+
+	async test({ assert, target }) {
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<div style="color: red;"></div>
+				<div style="width: 100px;"></div>
+				<button>width</button>
+				<div style="color: red;"></div>
+				<div style="width: 100px;"></div>
+				<button>width</button>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-style-after-await/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-style-after-await/main.svelte
new file mode 100644
index 0000000000..7c1abeda2c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-style-after-await/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	await Promise.resolve();
+
+	// static
+	let color = $state('red');
+
+	// dynamic
+	let width = $state('100px');
+</script>
+
+<!-- force them into their own template effects -->
+
+<!-- normal -->
+{#if color}
+	<div style:color={color}></div>
+	<div style:width={width}></div>
+	<button onclick={() => width = '1px'}>width</button>
+{/if}
+
+<!-- shorthand -->
+{#if color}
+	<div style:color></div>
+	<div style:width></div>
+	<button onclick={() => width = '1px'}>width</button>
+{/if}
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-template-async-sync-mixed/_config.js b/packages/svelte/tests/runtime-runes/samples/async-template-async-sync-mixed/_config.js
new file mode 100644
index 0000000000..709b88578f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-template-async-sync-mixed/_config.js
@@ -0,0 +1,9 @@
+import { tick } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<p>foo bar</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-template-async-sync-mixed/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-template-async-sync-mixed/main.svelte
new file mode 100644
index 0000000000..2e0ae46f1f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-template-async-sync-mixed/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	function foo() {
+		return 'foo';
+	}
+
+	async function bar() {
+		return Promise.resolve('bar');
+	}
+</script>
+
+<svelte:boundary>
+	<p>{foo()} {await bar()}</p>
+
+	{#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-deriveds/Foo.svelte b/packages/svelte/tests/runtime-runes/samples/async-top-level-deriveds/Foo.svelte
new file mode 100644
index 0000000000..e8a7c84137
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-top-level-deriveds/Foo.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { resolve } from './main.svelte';
+
+	const foo = $derived(await new Promise((r) => resolve.push(() => r('foo'))));
+	const bar = $derived(await new Promise((r) => resolve.push(() => r('bar'))));
+</script>
+
+<p>{foo} {bar}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-top-level-deriveds/_config.js b/packages/svelte/tests/runtime-runes/samples/async-top-level-deriveds/_config.js
new file mode 100644
index 0000000000..2c7ffd3952
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-top-level-deriveds/_config.js
@@ -0,0 +1,41 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [show, resolve] = target.querySelectorAll('button');
+
+		show.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>show</button>
+				<button>resolve</button>
+				<p>pending...</p>
+			`
+		);
+
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>show</button>
+				<button>resolve</button>
+				<p>pending...</p>
+			`
+		);
+
+		resolve.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>show</button>
+				<button>resolve</button>
+				<p>foo bar</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-top-level-deriveds/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-top-level-deriveds/main.svelte
new file mode 100644
index 0000000000..bd0efaa4f8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-top-level-deriveds/main.svelte
@@ -0,0 +1,31 @@
+<script module>
+	export let resolve = [];
+</script>
+
+<script>
+	import Foo from './Foo.svelte';
+	
+	let show = $state(false);
+</script>
+
+<button onclick={() => show = true}>
+	show
+</button>
+
+<button onclick={() => resolve.shift()()}>
+	resolve
+</button>
+
+<svelte:boundary>
+	{#if show}
+		<Foo/>
+	{/if}
+
+	{#if $effect.pending()}
+		<p>pending...</p>
+	{/if}
+
+	{#snippet pending()}
+		<p>initializing...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-top-level-error-nested-obsolete/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-top-level-error-nested-obsolete/Child.svelte
new file mode 100644
index 0000000000..f7ba132ace
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-top-level-error-nested-obsolete/Child.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { route } from "./main.svelte";
+
+	await new Promise(async (_, reject) => {
+		await Promise.resolve();
+		route.current = 'other'
+		route.reject = reject;
+	});
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-top-level-error-nested-obsolete/_config.js b/packages/svelte/tests/runtime-runes/samples/async-top-level-error-nested-obsolete/_config.js
new file mode 100644
index 0000000000..298e33e9a2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-top-level-error-nested-obsolete/_config.js
@@ -0,0 +1,15 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>reject</button> <p>pending</p>`,
+
+	async test({ assert, target }) {
+		const [reject] = target.querySelectorAll('button');
+
+		await tick();
+		reject.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<button>reject</button> <p>route: other</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-top-level-error-nested-obsolete/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-top-level-error-nested-obsolete/main.svelte
new file mode 100644
index 0000000000..2d8032228a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-top-level-error-nested-obsolete/main.svelte
@@ -0,0 +1,23 @@
+<script module>
+	import Child from './Child.svelte';
+	export let route = $state({ current: 'home' });
+</script>
+
+<script>
+	// reset from earlier tests
+	route.current = 'home'
+</script>
+
+<button onclick={() => route.reject()}>reject</button>
+
+<svelte:boundary>
+	{#if route.current === 'home'}
+		<Child />
+	{:else}
+		<p>route: {route.current}</p>
+	{/if}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-top-level-error-nested/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-top-level-error-nested/Child.svelte
new file mode 100644
index 0000000000..11c9ebd653
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-top-level-error-nested/Child.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { route } from "./main.svelte";
+
+	await new Promise(async (_, reject) => {
+		route.reject = reject;
+	});
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-top-level-error-nested/_config.js b/packages/svelte/tests/runtime-runes/samples/async-top-level-error-nested/_config.js
new file mode 100644
index 0000000000..57005b4112
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-top-level-error-nested/_config.js
@@ -0,0 +1,14 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>reject</button> <p>pending</p>`,
+
+	async test({ assert, target }) {
+		const [reject] = target.querySelectorAll('button');
+
+		reject.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<button>reject</button> <p>failed</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-top-level-error-nested/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-top-level-error-nested/main.svelte
new file mode 100644
index 0000000000..2fdf4c0d2f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-top-level-error-nested/main.svelte
@@ -0,0 +1,18 @@
+<script module>
+	import Child from './Child.svelte';
+	export let route = $state({});
+</script>
+
+<button onclick={() => route.reject()}>reject</button>
+
+<svelte:boundary>
+	<Child />
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+
+	{#snippet failed()}
+		<p>failed</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/Child.svelte
new file mode 100644
index 0000000000..7ad618f130
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/Child.svelte
@@ -0,0 +1,7 @@
+<script>
+	let { promise } = $props();
+
+	let value = await promise;
+</script>
+
+<p>{value}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/_config.js b/packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/_config.js
new file mode 100644
index 0000000000..73c9b50a69
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/_config.js
@@ -0,0 +1,40 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [toggle, hello] = target.querySelectorAll('button');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>toggle</button>
+			<button>hello</button>
+		`
+		);
+
+		toggle.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>toggle</button>
+			<button>hello</button>
+		`
+		);
+
+		hello.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>toggle</button>
+			<button>hello</button>
+			<p>condition is true</p>
+			<p>hello</p>
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/main.svelte
new file mode 100644
index 0000000000..d111ce6fe3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-top-level-in-if/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	import Child from './Child.svelte';
+
+	let condition = $state(false);
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => condition = !condition}>toggle</button>
+<button onclick={() => deferred.resolve('hello')}>hello</button>
+
+<svelte:boundary>
+	{#if condition}
+		<p>condition is {condition}</p>
+		<Child promise={deferred.promise} />
+	{/if}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-top-level/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-top-level/Child.svelte
new file mode 100644
index 0000000000..7ad618f130
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-top-level/Child.svelte
@@ -0,0 +1,7 @@
+<script>
+	let { promise } = $props();
+
+	let value = await promise;
+</script>
+
+<p>{value}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-top-level/_config.js b/packages/svelte/tests/runtime-runes/samples/async-top-level/_config.js
new file mode 100644
index 0000000000..b2200201c6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-top-level/_config.js
@@ -0,0 +1,14 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>hello</button><p>pending</p>`,
+
+	async test({ assert, target }) {
+		const [hello] = target.querySelectorAll('button');
+
+		hello.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<button>hello</button><p>hello</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-top-level/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-top-level/main.svelte
new file mode 100644
index 0000000000..78ad3ba04a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-top-level/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Child from './Child.svelte';
+
+	let deferred = $state(Promise.withResolvers());
+</script>
+
+<button onclick={() => deferred.resolve('hello')}>hello</button>
+
+<svelte:boundary>
+	<Child promise={deferred.promise} />
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-transform-empty-statements/_config.js b/packages/svelte/tests/runtime-runes/samples/async-transform-empty-statements/_config.js
new file mode 100644
index 0000000000..2e4a27cf09
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-transform-empty-statements/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	async test() {}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-transform-empty-statements/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-transform-empty-statements/main.svelte
new file mode 100644
index 0000000000..03c4ada55a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-transform-empty-statements/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	await Promise.resolve(42);
+	const { name } = $props();
+</script>
+
+{name}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/async-transition-blockers/_config.js b/packages/svelte/tests/runtime-runes/samples/async-transition-blockers/_config.js
new file mode 100644
index 0000000000..9d8aea3c17
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-transition-blockers/_config.js
@@ -0,0 +1,11 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client', 'hydrate'],
+	async test({ assert, logs }) {
+		await tick();
+
+		assert.deepEqual(logs, ['ready']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-transition-blockers/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-transition-blockers/main.svelte
new file mode 100644
index 0000000000..ff5059e129
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-transition-blockers/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	// Wait a macrotask to make sure the effect doesn't run before the microtask-Promise.resolve() resolves, masking a bug
+	await new Promise(r => setTimeout(r));
+
+	function custom(_, value) {
+		console.log(value);
+		return { duration: 0 };
+	}
+
+	let params = $state('ready');
+</script>
+
+<div transition:custom={params}></div>
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..c6f65c33be
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-unresolved-promise/_config.js
@@ -0,0 +1,62 @@
+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();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<p>0</p>
+			`
+		);
+
+		increment.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<p>2</p>
+			`
+		);
+
+		increment.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<p>2</p>
+			`
+		);
+
+		increment.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<p>4</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/attachment-basic/_config.js b/packages/svelte/tests/runtime-runes/samples/attachment-basic/_config.js
new file mode 100644
index 0000000000..1be4737069
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-basic/_config.js
@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+export default test({
+	ssrHtml: `<div></div>`,
+	html: `<div>DIV</div>`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-basic/main.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-basic/main.svelte
new file mode 100644
index 0000000000..1a1f74e4a9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-basic/main.svelte
@@ -0,0 +1 @@
+<div {@attach (node) => node.textContent = node.nodeName}></div>
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-component-falsy/Child.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-component-falsy/Child.svelte
new file mode 100644
index 0000000000..6760da61fa
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-component-falsy/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	let props = $props();
+</script>
+
+<div {...props}></div>
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-component-falsy/_config.js b/packages/svelte/tests/runtime-runes/samples/attachment-component-falsy/_config.js
new file mode 100644
index 0000000000..27f013d6d1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-component-falsy/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	test() {}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-component-falsy/main.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-component-falsy/main.svelte
new file mode 100644
index 0000000000..993bcdd6a5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-component-falsy/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Child from './Child.svelte';
+
+	function attachment(){
+		console.log("up");
+	}
+
+	let enabled = $state(false);
+</script>
+
+<button onclick={() => enabled = !enabled}></button>
+
+<Child {@attach enabled && attachment} />
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-component-spread/Child.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-component-spread/Child.svelte
new file mode 100644
index 0000000000..6760da61fa
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-component-spread/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	let props = $props();
+</script>
+
+<div {...props}></div>
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-component-spread/_config.js b/packages/svelte/tests/runtime-runes/samples/attachment-component-spread/_config.js
new file mode 100644
index 0000000000..23907c62d2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-component-spread/_config.js
@@ -0,0 +1,15 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>update</button><div></div>`,
+
+	test({ target, assert, logs }) {
+		const button = target.querySelector('button');
+
+		assert.deepEqual(logs, ['one DIV']);
+
+		flushSync(() => button?.click());
+		assert.deepEqual(logs, ['one DIV', 'cleanup one', 'two DIV']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-component-spread/main.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-component-spread/main.svelte
new file mode 100644
index 0000000000..d1d7e65126
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-component-spread/main.svelte
@@ -0,0 +1,30 @@
+<script>
+	import { createAttachmentKey } from 'svelte/attachments';
+	import Child from './Child.svelte';
+
+	let stuff = $state({
+		[createAttachmentKey()]: (node) => {
+			console.log(`one ${node.nodeName}`);
+
+			return () => {
+				console.log('cleanup one');
+			};
+		}
+	});
+
+	function update() {
+		stuff = {
+			[createAttachmentKey()]: (node) => {
+				console.log(`two ${node.nodeName}`);
+
+				return () => {
+					console.log('cleanup two');
+				}
+			}
+		};
+	}
+</script>
+
+<button onclick={update}>update</button>
+
+<Child {...stuff} />
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-component/Child.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-component/Child.svelte
new file mode 100644
index 0000000000..6760da61fa
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-component/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	let props = $props();
+</script>
+
+<div {...props}></div>
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-component/_config.js b/packages/svelte/tests/runtime-runes/samples/attachment-component/_config.js
new file mode 100644
index 0000000000..b6ef016be5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-component/_config.js
@@ -0,0 +1,14 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	ssrHtml: `<button>update</button><div></div>`,
+	html: `<button>update</button><div>one</div>`,
+
+	test({ target, assert }) {
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+		assert.htmlEqual(target.innerHTML, '<button>update</button><div>two</div>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-component/main.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-component/main.svelte
new file mode 100644
index 0000000000..29e26689db
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-component/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Child from './Child.svelte';
+
+	let message = $state('one');
+
+	function attachment(message) {
+		return (node) => {
+			node.textContent = message;
+		};
+	}
+</script>
+
+<button onclick={() => message = 'two'}>update</button>
+
+<Child {@attach attachment(message)} />
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-from-action/_config.js b/packages/svelte/tests/runtime-runes/samples/attachment-from-action/_config.js
new file mode 100644
index 0000000000..2e53f0d29d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-from-action/_config.js
@@ -0,0 +1,116 @@
+import { ok, test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [btn, btn2, btn3] = target.querySelectorAll('button');
+
+		// both logs on creation it will not log on change
+		assert.deepEqual(logs, ['create', 0, 'action', 'create', 0, 'attachment']);
+
+		// clicking the first button logs the right value
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.deepEqual(logs, ['create', 0, 'action', 'create', 0, 'attachment', 0]);
+
+		// clicking the second button logs the right value
+		flushSync(() => {
+			btn2?.click();
+		});
+		assert.deepEqual(logs, ['create', 0, 'action', 'create', 0, 'attachment', 0, 0]);
+
+		// updating the arguments logs the update function for both
+		flushSync(() => {
+			btn3?.click();
+		});
+		assert.deepEqual(logs, [
+			'create',
+			0,
+			'action',
+			'create',
+			0,
+			'attachment',
+			0,
+			0,
+			'update',
+			1,
+			'action',
+			'update',
+			1,
+			'attachment'
+		]);
+
+		// clicking the first button again shows the right value
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.deepEqual(logs, [
+			'create',
+			0,
+			'action',
+			'create',
+			0,
+			'attachment',
+			0,
+			0,
+			'update',
+			1,
+			'action',
+			'update',
+			1,
+			'attachment',
+			1
+		]);
+
+		// clicking the second button again shows the right value
+		flushSync(() => {
+			btn2?.click();
+		});
+		assert.deepEqual(logs, [
+			'create',
+			0,
+			'action',
+			'create',
+			0,
+			'attachment',
+			0,
+			0,
+			'update',
+			1,
+			'action',
+			'update',
+			1,
+			'attachment',
+			1,
+			1
+		]);
+
+		// unmounting logs the destroy function for both
+		flushSync(() => {
+			btn3?.click();
+		});
+		assert.deepEqual(logs, [
+			'create',
+			0,
+			'action',
+			'create',
+			0,
+			'attachment',
+			0,
+			0,
+			'update',
+			1,
+			'action',
+			'update',
+			1,
+			'attachment',
+			1,
+			1,
+			'destroy',
+			'action',
+			'destroy',
+			'attachment'
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-from-action/main.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-from-action/main.svelte
new file mode 100644
index 0000000000..35079aa15e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-from-action/main.svelte
@@ -0,0 +1,37 @@
+<script>
+	import { fromAction } from 'svelte/attachments';
+	let { count = 0 } = $props();
+
+	function test(node, thing) {
+		const kind = node.dataset.kind;
+		console.log('create', thing, kind);
+		let t = thing;
+		const controller = new AbortController();
+		node.addEventListener(
+			'click',
+			() => {
+				console.log(t);
+			},
+			{
+				signal: controller.signal
+			}
+		);
+		return {
+			update(new_thing) {
+				console.log('update', new_thing, kind);
+				t = new_thing;
+			},
+			destroy() {
+				console.log('destroy', kind);
+				controller.abort();
+			}
+		};
+	}
+</script>
+
+{#if count < 2}
+	<button data-kind="action" use:test={count}></button>
+	<button data-kind="attachment" {@attach fromAction(test, ()=>count)}></button>
+{/if}
+
+<button onclick={()=> count++}></button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-reactive/_config.js b/packages/svelte/tests/runtime-runes/samples/attachment-reactive/_config.js
new file mode 100644
index 0000000000..7d0502590b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-reactive/_config.js
@@ -0,0 +1,14 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	ssrHtml: `<div></div><button>increment</button>`,
+	html: `<div>1</div><button>increment</button>`,
+
+	test: ({ assert, target }) => {
+		const btn = target.querySelector('button');
+
+		flushSync(() => btn?.click());
+		assert.htmlEqual(target.innerHTML, `<div>2</div><button>increment</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-reactive/main.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-reactive/main.svelte
new file mode 100644
index 0000000000..9fa3cfdb67
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-reactive/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	let value = $state(1);
+</script>
+
+<div {@attach (node) => node.textContent = value}></div>
+<button onclick={() => value += 1}>increment</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-spread-stable/Component.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-spread-stable/Component.svelte
new file mode 100644
index 0000000000..d5f4e94358
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-spread-stable/Component.svelte
@@ -0,0 +1,5 @@
+<script>
+	let props = $props();
+</script>
+
+<p {...props}>hello</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-spread-stable/_config.js b/packages/svelte/tests/runtime-runes/samples/attachment-spread-stable/_config.js
new file mode 100644
index 0000000000..5d37252358
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-spread-stable/_config.js
@@ -0,0 +1,16 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, logs }) {
+		assert.deepEqual(logs, ['up']);
+
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+		assert.deepEqual(logs, ['up']);
+
+		flushSync(() => button?.click());
+		assert.deepEqual(logs, ['up', 'down']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-spread-stable/main.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-spread-stable/main.svelte
new file mode 100644
index 0000000000..aef9da6dd4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-spread-stable/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import Component from './Component.svelte';
+
+	let count = $state(0);
+</script>
+
+<button onclick={() => count++}>{count}</button>
+
+{#if count < 2}
+	<Component
+		data-count={count}
+		{@attach () => {
+			console.log('up');
+			return () => console.log('down');
+		}}
+	/>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-spread/_config.js b/packages/svelte/tests/runtime-runes/samples/attachment-spread/_config.js
new file mode 100644
index 0000000000..96fc207450
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-spread/_config.js
@@ -0,0 +1,8 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, logs, target }) {
+		assert.deepEqual(logs, ['hello']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-spread/main.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-spread/main.svelte
new file mode 100644
index 0000000000..dbd8c47ada
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-spread/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { createAttachmentKey } from 'svelte/attachments';
+
+	let stuff = $state({
+		[createAttachmentKey()]: () => console.log('hello')
+	});
+</script>
+
+<div {...stuff}></div>
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-svelte-element/_config.js b/packages/svelte/tests/runtime-runes/samples/attachment-svelte-element/_config.js
new file mode 100644
index 0000000000..1be4737069
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-svelte-element/_config.js
@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+export default test({
+	ssrHtml: `<div></div>`,
+	html: `<div>DIV</div>`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-svelte-element/main.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-svelte-element/main.svelte
new file mode 100644
index 0000000000..bd4b52342f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-svelte-element/main.svelte
@@ -0,0 +1 @@
+<svelte:element this={'div'} {@attach (node) => node.textContent = node.nodeName}></svelte:element>
diff --git a/packages/svelte/tests/runtime-runes/samples/attribute-boolean-case-insensitivity/_config.js b/packages/svelte/tests/runtime-runes/samples/attribute-boolean-case-insensitivity/_config.js
new file mode 100644
index 0000000000..d0b8a421b3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attribute-boolean-case-insensitivity/_config.js
@@ -0,0 +1,60 @@
+import { test } from '../../test';
+
+export default test({
+	// JSDOM lacks support for some of these attributes, so we'll skip it for now.
+	//
+	// See:
+	//  - `async`: https://github.com/jsdom/jsdom/issues/1564
+	//  - `nomodule`: https://github.com/jsdom/jsdom/issues/2475
+	//  - `autofocus`: https://github.com/jsdom/jsdom/issues/3041
+	//  - `inert`: https://github.com/jsdom/jsdom/issues/3605
+	//  - etc...: https://github.com/jestjs/jest/issues/139#issuecomment-592673550
+	skip_mode: ['client'],
+
+	html: `
+	<script nomodule async defer></script>
+	<form novalidate></form>
+	<input readonly required checked webkitdirectory>
+	<select multiple disabled></select>
+	<button formnovalidate></button>
+	<img ismap>
+	<video autoplay controls loop muted playsinline disablepictureinpicture disableremoteplayback></video>
+	<audio disableremoteplayback></audio>
+	<track default>
+	<iframe allowfullscreen></iframe>
+	<details open></details>
+	<ol reversed></ol>
+	<div autofocus></div>
+	<span inert></span>
+
+	<script nomodule async defer></script>
+	<form novalidate></form>
+	<input readonly required checked webkitdirectory>
+	<select multiple disabled></select>
+	<button formnovalidate></button>
+	<img ismap>
+	<video autoplay controls loop muted playsinline disablepictureinpicture disableremoteplayback></video>
+	<audio disableremoteplayback></audio>
+	<track default>
+	<iframe allowfullscreen></iframe>
+	<details open></details>
+	<ol reversed></ol>
+	<div autofocus></div>
+	<span inert></span>
+
+	<script></script>
+	<form></form>
+	<input>
+	<select></select>
+	<button></button>
+	<img>
+	<video></video>
+	<audio></audio>
+	<track>
+	<iframe></iframe>
+	<details></details>
+	<ol></ol>
+	<div></div>
+	<span></span>
+`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/attribute-boolean-case-insensitivity/main.svelte b/packages/svelte/tests/runtime-runes/samples/attribute-boolean-case-insensitivity/main.svelte
new file mode 100644
index 0000000000..e9e5a16168
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attribute-boolean-case-insensitivity/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	let runesMode = $state('using a rune so that we trigger runes mode');
+
+	const attributeValues = [true, 'test', false];
+</script>
+
+{#each attributeValues as val}
+	<script NOMODULE={val} ASYNC={val} DEFER={val}></script>
+	<form NOVALIDATE={val}></form>
+	<input READONLY={val} REQUIRED={val} CHECKED={val} WEBKITDIRECTORY={val} />
+	<select MULTIPLE={val} DISABLED={val}></select>
+	<button FORMNOVALIDATE={val}></button>
+	<img ISMAP={val} />
+	<video AUTOPLAY={val} CONTROLS={val} LOOP={val} MUTED={val} PLAYSINLINE={val} DISABLEPICTUREINPICTURE={val} DISABLEREMOTEPLAYBACK={val}></video>
+	<audio DISABLEREMOTEPLAYBACK={val}></audio>
+	<track DEFAULT={val} />
+	<iframe ALLOWFULLSCREEN={val}></iframe>
+	<details OPEN={val}></details>
+	<ol REVERSED={val}></ol>
+	<div AUTOFOCUS={val}></div>
+	<span INERT={val}></span>
+{/each}
diff --git a/packages/svelte/tests/runtime-runes/samples/attribute-spread-input/_config.js b/packages/svelte/tests/runtime-runes/samples/attribute-spread-input/_config.js
new file mode 100644
index 0000000000..ab94125503
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attribute-spread-input/_config.js
@@ -0,0 +1,33 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ target, assert }) {
+		// Test for https://github.com/sveltejs/svelte/issues/15237
+		const [setValues, clearValue] = target.querySelectorAll('button');
+		const [text1, text2, check1, check2] = target.querySelectorAll('input');
+
+		assert.equal(text1.value, '');
+		assert.equal(text2.value, '');
+		assert.equal(check1.checked, false);
+		assert.equal(check2.checked, false);
+
+		flushSync(() => {
+			setValues.click();
+		});
+
+		assert.equal(text1.value, 'message');
+		assert.equal(text2.value, 'message');
+		assert.equal(check1.checked, true);
+		assert.equal(check2.checked, true);
+
+		flushSync(() => {
+			clearValue.click();
+		});
+
+		assert.equal(text1.value, '');
+		assert.equal(text2.value, '');
+		assert.equal(check1.checked, false);
+		assert.equal(check2.checked, false);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/attribute-spread-input/main.svelte b/packages/svelte/tests/runtime-runes/samples/attribute-spread-input/main.svelte
new file mode 100644
index 0000000000..4bb4365ee2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attribute-spread-input/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	let value = $state();
+	let checked = $state(false);
+
+	function setValues() {
+		value = 'message';
+		checked = true;
+	}
+	function clearValues() {
+		value = null;
+		checked = null;
+	}
+</script>
+
+<button onclick={setValues}>setValues</button>
+<button onclick={clearValues}>clearValues</button>
+
+<input type="text" {value} />
+<input type="text" {value} {...{}} />
+
+<input type="checkbox" {checked} />
+<input type="checkbox" {checked} {...{}} />
diff --git a/packages/svelte/tests/runtime-runes/samples/autofocus-with-call/_config.js b/packages/svelte/tests/runtime-runes/samples/autofocus-with-call/_config.js
new file mode 100644
index 0000000000..0597c2fda8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/autofocus-with-call/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, errors }) {
+		assert.deepEqual(errors, []);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/autofocus-with-call/main.svelte b/packages/svelte/tests/runtime-runes/samples/autofocus-with-call/main.svelte
new file mode 100644
index 0000000000..cb3804af34
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/autofocus-with-call/main.svelte
@@ -0,0 +1,6 @@
+<svelte:options runes />
+<script>
+	function test(){}
+</script>
+
+<input autofocus={test()} />
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/await-html-hydration/_config.js b/packages/svelte/tests/runtime-runes/samples/await-html-hydration/_config.js
new file mode 100644
index 0000000000..87a697b18f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/await-html-hydration/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	mode: ['hydrate'],
+	async test({ assert, warnings }) {
+		assert.deepEqual(warnings, []); // TODO not quite sure why this isn't populated yet
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/await-html-hydration/main.svelte b/packages/svelte/tests/runtime-runes/samples/await-html-hydration/main.svelte
new file mode 100644
index 0000000000..3b9ce94e61
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/await-html-hydration/main.svelte
@@ -0,0 +1 @@
+<div>{@html await Promise.resolve(`<span>Foo</span>`)}</div>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/await-hydrate-maybe-promise/_config.js b/packages/svelte/tests/runtime-runes/samples/await-hydrate-maybe-promise/_config.js
new file mode 100644
index 0000000000..f81b41d41a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/await-hydrate-maybe-promise/_config.js
@@ -0,0 +1,23 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	ssrHtml: '<button>fulfil</button><p>42</p><hr><p>loading...</p>',
+	html: '<button>fulfil</button><p>loading...</p><hr><p>42</p>',
+
+	props: {
+		browser: true
+	},
+
+	server_props: {
+		browser: false
+	},
+
+	async test({ assert, target }) {
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+		await Promise.resolve();
+		assert.htmlEqual(target.innerHTML, '<button>fulfil</button><p>42</p><hr><p>42</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/await-hydrate-maybe-promise/main.svelte b/packages/svelte/tests/runtime-runes/samples/await-hydrate-maybe-promise/main.svelte
new file mode 100644
index 0000000000..d8d0cd4027
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/await-hydrate-maybe-promise/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	let { browser } = $props();
+
+	let fulfil;
+	let promise = new Promise((f) => (fulfil = f));
+
+	let a = browser ? promise : 42;
+	let b = browser ? 42 : promise;
+</script>
+
+<button onclick={() => fulfil(42)}>fulfil</button>
+
+{#await a}
+	{#if true}<p>loading...</p>{/if}
+{:then a}
+	<p>{a}</p>
+{/await}
+
+<hr>
+
+{#await b}
+	{#if true}<p>loading...</p>{/if}
+{:then b}
+	<p>{b}</p>
+{/await}
diff --git a/packages/svelte/tests/runtime-runes/samples/await-immediate-fulfilled/_config.js b/packages/svelte/tests/runtime-runes/samples/await-immediate-fulfilled/_config.js
new file mode 100644
index 0000000000..650bfe17a7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/await-immediate-fulfilled/_config.js
@@ -0,0 +1,61 @@
+import { test } from '../../test';
+import { tick } from 'svelte';
+
+export default test({
+	async test({ assert, target }) {
+		const [resolveImmediate, resolveTimeout, rejectImmediate, rejectTimeout] =
+			target.querySelectorAll('button');
+
+		rejectTimeout.click();
+		await new Promise((resolve) => setTimeout(resolve, 1));
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>Resolve (immediate)</button>
+				<button>Resolve (timeout)</button>
+				<button>Reject (immediate)</button>
+				<button>Reject (timeout)</button>
+				<p> err [Yeah] </p>
+			`
+		);
+
+		resolveImmediate.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>Resolve (immediate)</button>
+				<button>Resolve (timeout)</button>
+				<button>Reject (immediate)</button>
+				<button>Reject (timeout)</button>
+				<p> resolved [?] </p>
+			`
+		);
+
+		resolveTimeout.click();
+		await new Promise((resolve) => setTimeout(resolve, 1));
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>Resolve (immediate)</button>
+				<button>Resolve (timeout)</button>
+				<button>Reject (immediate)</button>
+				<button>Reject (timeout)</button>
+				<p> resolved [OK] </p>
+			`
+		);
+
+		rejectImmediate.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>Resolve (immediate)</button>
+				<button>Resolve (timeout)</button>
+				<button>Reject (immediate)</button>
+				<button>Reject (timeout)</button>
+				<p> err [??] </p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/await-immediate-fulfilled/main.svelte b/packages/svelte/tests/runtime-runes/samples/await-immediate-fulfilled/main.svelte
new file mode 100644
index 0000000000..d95b4f03a9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/await-immediate-fulfilled/main.svelte
@@ -0,0 +1,34 @@
+<script>
+	let p = $state(null);
+</script>
+
+<button onclick={()=>{
+	p = new Promise((resolve, reject) => {
+		resolve("?");
+	});
+}}>Resolve (immediate)</button>
+<button onclick={()=>{
+	p = new Promise((resolve, reject) => {
+		setTimeout(() => resolve("OK"), 1);
+	});
+}}>Resolve (timeout)</button>
+<button onclick={()=>{
+	p = new Promise((resolve, reject) => {
+		reject("??");
+	});
+}}>Reject (immediate)</button>
+<button onclick={()=>{
+	p = new Promise((resolve, reject) => {
+		setTimeout(() => reject("Yeah"), 1);
+	});
+}}>Reject (timeout)</button>
+
+<p>
+	{#await p}
+		...
+	{:then v}
+		resolved [{v}]
+	{:catch err}
+		err [{err}]
+	{/await}
+</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/await-pending-destroy/_config.js b/packages/svelte/tests/runtime-runes/samples/await-pending-destroy/_config.js
index 1725cd8f6f..9ef598de6c 100644
--- a/packages/svelte/tests/runtime-runes/samples/await-pending-destroy/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/await-pending-destroy/_config.js
@@ -1,3 +1,4 @@
+import { tick } from 'svelte';
 import { test } from '../../test';
 
 /**
@@ -77,7 +78,7 @@ export default test({
 			const { promise, reject } = promiseWithResolver();
 			component.promise = promise;
 			// wait for rendering
-			await Promise.resolve();
+			await tick();
 
 			// remove the promise
 			component.promise = null;
diff --git a/packages/svelte/tests/runtime-runes/samples/bigint-invalid/_config.js b/packages/svelte/tests/runtime-runes/samples/bigint-invalid/_config.js
new file mode 100644
index 0000000000..810ac338a5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bigint-invalid/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	// check that this is a runtime error, not a compile time error
+	// caused by over-eager partial-evaluation
+	error: 'Cannot convert invalid to a BigInt'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/bigint-invalid/main.svelte b/packages/svelte/tests/runtime-runes/samples/bigint-invalid/main.svelte
new file mode 100644
index 0000000000..126528bad2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bigint-invalid/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	var invalid = BigInt('invalid');
+</script>
+
+<h1>{invalid}</h1>
diff --git a/packages/svelte/tests/runtime-runes/samples/bind-current-time-remove-listener/_config.js b/packages/svelte/tests/runtime-runes/samples/bind-current-time-remove-listener/_config.js
new file mode 100644
index 0000000000..29dc5e8d7f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bind-current-time-remove-listener/_config.js
@@ -0,0 +1,26 @@
+import { flushSync } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const audio = target.querySelector('audio');
+		const btn = target.querySelector('button');
+
+		ok(audio);
+
+		flushSync(() => {
+			audio.currentTime = 10;
+			audio.dispatchEvent(new Event('timeupdate'));
+		});
+		assert.deepEqual(logs, ['event']);
+
+		flushSync(() => {
+			btn?.click();
+		});
+		flushSync(() => {
+			audio.currentTime = 20;
+			audio.dispatchEvent(new Event('timeupdate'));
+		});
+		assert.deepEqual(logs, ['event']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/bind-current-time-remove-listener/main.svelte b/packages/svelte/tests/runtime-runes/samples/bind-current-time-remove-listener/main.svelte
new file mode 100644
index 0000000000..40c215378e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bind-current-time-remove-listener/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	let show = $state(true);
+	let time = $state(0);
+</script>
+
+<button onclick={()=> show = false}></button>
+{#if show}
+	<audio bind:currentTime={()=>time,(new_time)=>{
+		console.log("event");
+		time = new_time;
+	}}></audio>
+{/if}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/bind-getter-setter-loop/_config.js b/packages/svelte/tests/runtime-runes/samples/bind-getter-setter-loop/_config.js
new file mode 100644
index 0000000000..9c8b4fc6c0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bind-getter-setter-loop/_config.js
@@ -0,0 +1,16 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [btn] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			btn.click();
+		});
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>Shuffle</button> <br> <b>5</b><b>1</b><b>4</b><b>2</b><b>3</b> <br> 51423'
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/bind-getter-setter-loop/main.svelte b/packages/svelte/tests/runtime-runes/samples/bind-getter-setter-loop/main.svelte
new file mode 100644
index 0000000000..60444e8978
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bind-getter-setter-loop/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	let arr = $state([1, 2, 3, 4, 5]);
+	let elements = $state([]);
+</script>
+
+<button onclick={() => arr = [5, 1, 4, 2, 3]}>Shuffle</button><br>
+{#each arr as item, i (item)}
+	<b bind:this={() => elements[i], (v) => elements[i] = v }>{item}</b>
+{/each}
+<br>
+{#each elements as elem}
+	{elem.textContent}
+{/each}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/bind-this-destroy-timing/Inner.svelte b/packages/svelte/tests/runtime-runes/samples/bind-this-destroy-timing/Inner.svelte
new file mode 100644
index 0000000000..e9e6e0d18d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bind-this-destroy-timing/Inner.svelte
@@ -0,0 +1,9 @@
+<script>
+	let { data } = $props();
+
+	const processed = $derived(data.toUpperCase());
+
+	export function getProcessed() {
+		return processed;
+	}
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/bind-this-destroy-timing/_config.js b/packages/svelte/tests/runtime-runes/samples/bind-this-destroy-timing/_config.js
new file mode 100644
index 0000000000..e0bf4e3af0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bind-this-destroy-timing/_config.js
@@ -0,0 +1,18 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [btn] = target.querySelectorAll('button');
+
+		btn.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>clear</button>
+				<p></p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/bind-this-destroy-timing/main.svelte b/packages/svelte/tests/runtime-runes/samples/bind-this-destroy-timing/main.svelte
new file mode 100644
index 0000000000..11e75b8b6d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bind-this-destroy-timing/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	import Inner from './Inner.svelte';
+
+	let value = $state('hello');
+
+	let innerComp = $state();
+
+	// Reads Inner's derived value from outside the {#if} block, keeping it
+	// connected in the reactive graph even after the branch is destroyed.
+	const externalView = $derived(innerComp?.getProcessed() ?? '');
+</script>
+
+{#if value}
+	{@const result = value}
+	<Inner data={result} bind:this={innerComp} />
+{/if}
+
+<button onclick={() => (value = undefined)}>clear</button>
+<p>{externalView}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/bind-this-destroy-timing2/_config.js b/packages/svelte/tests/runtime-runes/samples/bind-this-destroy-timing2/_config.js
new file mode 100644
index 0000000000..b48efa0fec
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bind-this-destroy-timing2/_config.js
@@ -0,0 +1,12 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [btn] = target.querySelectorAll('button');
+
+		btn.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>clear</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/bind-this-destroy-timing2/main.svelte b/packages/svelte/tests/runtime-runes/samples/bind-this-destroy-timing2/main.svelte
new file mode 100644
index 0000000000..8b60d693eb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bind-this-destroy-timing2/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	let value = $state('hello');
+	let elements = {};
+</script>
+
+{#if value}
+	<span bind:this={elements[value.toUpperCase()]}>{value}</span>
+{/if}
+
+<button onclick={() => (value = undefined)}>clear</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/bind-this-proxy-deep/Component.svelte b/packages/svelte/tests/runtime-runes/samples/bind-this-proxy-deep/Component.svelte
new file mode 100644
index 0000000000..c43810b6bf
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bind-this-proxy-deep/Component.svelte
@@ -0,0 +1,5 @@
+<script>
+	const props = $props();
+	// svelte-ignore state_referenced_locally
+	export const name = props.name;
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/bind-this-proxy-deep/_config.js b/packages/svelte/tests/runtime-runes/samples/bind-this-proxy-deep/_config.js
new file mode 100644
index 0000000000..2f9e60e017
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bind-this-proxy-deep/_config.js
@@ -0,0 +1,22 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => {
+			btn?.click();
+		});
+
+		flushSync(() => {
+			btn?.click();
+		});
+
+		assert.deepEqual(logs, [
+			{},
+			{ 0: { name: 'Row 0' } },
+			{ 0: { name: 'Row 0' }, 1: { name: 'Row 1' } }
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/bind-this-proxy-deep/main.svelte b/packages/svelte/tests/runtime-runes/samples/bind-this-proxy-deep/main.svelte
new file mode 100644
index 0000000000..2e2a49b3f6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bind-this-proxy-deep/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Row from "./Component.svelte";
+
+	const nums = $state([]);
+	const rows = $derived(nums.map(n => ({id: n, name: `Row ${n}` })));
+	const refs = $state({});
+
+	$effect(() => {
+		console.log({...refs});
+	})
+</script>
+
+<button onclick={() => nums.push(nums.length)}>Add</button>
+{#each rows as row (row.id)}
+	<Row name={row.name} bind:this={refs[row.id]} />
+{/each}
diff --git a/packages/svelte/tests/runtime-runes/samples/bindable-prop-and-export/Component.svelte b/packages/svelte/tests/runtime-runes/samples/bindable-prop-and-export/Component.svelte
new file mode 100644
index 0000000000..17e895fd8c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bindable-prop-and-export/Component.svelte
@@ -0,0 +1,9 @@
+<script>
+	let { open: is_open = $bindable() } = $props();
+
+	export function open(){
+		is_open = !is_open;
+	}
+</script>
+
+<button onclick={open}>{is_open}</button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/bindable-prop-and-export/_config.js b/packages/svelte/tests/runtime-runes/samples/bindable-prop-and-export/_config.js
new file mode 100644
index 0000000000..45cd58f55c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bindable-prop-and-export/_config.js
@@ -0,0 +1,35 @@
+import { ok, test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+	html: `<button>true</button><button>true</button><input type="checkbox" />`,
+	ssrHtml: `<button>true</button><button>true</button><input type="checkbox" checked=""/>`,
+
+	async test({ assert, target, instance }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+		const input = target.querySelector('input');
+		flushSync(() => {
+			btn1.click();
+		});
+		assert.equal(btn1.innerHTML, 'false');
+		assert.equal(btn2.innerHTML, 'false');
+		assert.equal(input?.checked, false);
+
+		flushSync(() => {
+			btn2.click();
+		});
+		assert.equal(btn1.innerHTML, 'true');
+		assert.equal(btn2.innerHTML, 'true');
+		assert.equal(input?.checked, true);
+
+		flushSync(() => {
+			input?.click();
+		});
+		assert.equal(btn1.innerHTML, 'false');
+		assert.equal(btn2.innerHTML, 'false');
+		assert.equal(input?.checked, false);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/bindable-prop-and-export/main.svelte b/packages/svelte/tests/runtime-runes/samples/bindable-prop-and-export/main.svelte
new file mode 100644
index 0000000000..3b47eef156
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/bindable-prop-and-export/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import Component from "./Component.svelte";
+
+	let open = $state(true);
+	let comp;
+</script>
+
+<Component bind:this={comp} bind:open />
+
+<button onclick={()=>{
+	comp.open();
+}}>{open}</button>
+
+<input type="checkbox" bind:checked={open} />
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/binding-update-in-each/_config.js b/packages/svelte/tests/runtime-runes/samples/binding-update-in-each/_config.js
new file mode 100644
index 0000000000..b6371ce11c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/binding-update-in-each/_config.js
@@ -0,0 +1,28 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client', 'hydrate'],
+
+	html: `<input><p>a</a>`,
+
+	async test({ assert, target }) {
+		const [input] = target.querySelectorAll('input');
+
+		input.focus();
+		input.value = 'ab';
+		input.dispatchEvent(new InputEvent('input', { bubbles: true }));
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<input><p>ab</a>`);
+		assert.equal(input.value, 'ab');
+
+		input.focus();
+		input.value = 'abc';
+		input.dispatchEvent(new InputEvent('input', { bubbles: true }));
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<input><p>abc</a>`);
+		assert.equal(input.value, 'abc');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/binding-update-in-each/main.svelte b/packages/svelte/tests/runtime-runes/samples/binding-update-in-each/main.svelte
new file mode 100644
index 0000000000..7925195ee1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/binding-update-in-each/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	let array = $state([{ value: 'a' }]);
+</script>
+
+{#each array as obj}
+	<input bind:value={() => obj.value, (value) => array = [{ value }]} />
+	<p>{obj.value}</p>
+{/each}
diff --git a/packages/svelte/tests/runtime-runes/samples/binding-update-while-focused-2/_config.js b/packages/svelte/tests/runtime-runes/samples/binding-update-while-focused-2/_config.js
new file mode 100644
index 0000000000..7a56c79d71
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/binding-update-while-focused-2/_config.js
@@ -0,0 +1,24 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		const [input] = target.querySelectorAll('input');
+
+		input.focus();
+		input.value = '3';
+		input.dispatchEvent(new InputEvent('input', { bubbles: true }));
+		flushSync();
+
+		assert.equal(input.value, '3');
+		assert.htmlEqual(target.innerHTML, `<p>3</p> <input type="number" />`);
+
+		input.focus();
+		input.value = '1';
+		input.dispatchEvent(new InputEvent('input', { bubbles: true }));
+		flushSync();
+
+		assert.equal(input.value, '2');
+		assert.htmlEqual(target.innerHTML, `<p>2</p> <input type="number" />`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/binding-update-while-focused-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/binding-update-while-focused-2/main.svelte
new file mode 100644
index 0000000000..b0597c223b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/binding-update-while-focused-2/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	let value = $state(0)
+	const min = 2
+	const max = 5
+
+	$effect(() => {
+		setValue()
+	})
+
+	function setValue() {
+		if (value < min) {
+			value = min
+		}
+		if (value > max) {
+			value = max
+		}
+	}
+</script>
+
+<p>{value}</p>
+<input type="number" bind:value />
diff --git a/packages/svelte/tests/runtime-runes/samples/binding-update-while-focused-3/_config.js b/packages/svelte/tests/runtime-runes/samples/binding-update-while-focused-3/_config.js
new file mode 100644
index 0000000000..0909dee7a8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/binding-update-while-focused-3/_config.js
@@ -0,0 +1,30 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client', 'hydrate'],
+
+	async test({ assert, target }) {
+		const [input] = target.querySelectorAll('input');
+
+		input.focus();
+		input.value = 'Ab';
+		input.dispatchEvent(new InputEvent('input', { bubbles: true }));
+
+		await tick();
+		await tick();
+
+		assert.equal(input.value, 'AB');
+		assert.htmlEqual(target.innerHTML, `<input /><p>AB</p>`);
+
+		input.focus();
+		input.value = 'ABc';
+		input.dispatchEvent(new InputEvent('input', { bubbles: true }));
+
+		await tick();
+		await tick();
+
+		assert.equal(input.value, 'ABC');
+		assert.htmlEqual(target.innerHTML, `<input /><p>ABC</p>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/binding-update-while-focused-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/binding-update-while-focused-3/main.svelte
new file mode 100644
index 0000000000..b61bfe4e67
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/binding-update-while-focused-3/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	let text = $state('A');
+</script>
+
+<input bind:value={() => text, (v) => text = v.toUpperCase()} />
+<p>{text}</p>
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/bindings-form-reset/main.svelte b/packages/svelte/tests/runtime-runes/samples/bindings-form-reset/main.svelte
index ff13af85c8..0886efd59c 100644
--- a/packages/svelte/tests/runtime-runes/samples/bindings-form-reset/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/bindings-form-reset/main.svelte
@@ -3,8 +3,14 @@
 	let checkbox = $state(true);
 	let radio_group = $state('a');
 	let checkbox_group = $state(['a']);
-	let select = $state('b');
+	// this will be ssrd
+	let select = $state('a');
 	let textarea = $state('textarea');
+
+	$effect(()=>{
+		// changing the value of `select` on mount
+		select = 'b';
+	})
 </script>
 
 <p>{JSON.stringify({ text, checkbox, radio_group, checkbox_group, select, textarea })}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/boundary-effect-error/Test.svelte b/packages/svelte/tests/runtime-runes/samples/boundary-effect-error/Test.svelte
new file mode 100644
index 0000000000..4aec88b712
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/boundary-effect-error/Test.svelte
@@ -0,0 +1,5 @@
+<script>
+  $effect(() => {
+    throw new Error('boom');
+  });
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/boundary-effect-error/_config.js b/packages/svelte/tests/runtime-runes/samples/boundary-effect-error/_config.js
new file mode 100644
index 0000000000..4d2728abc1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/boundary-effect-error/_config.js
@@ -0,0 +1,10 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		// allow effects to run / microtasks to flush
+		await Promise.resolve();
+
+		assert.htmlEqual(target.innerHTML, '<p>caught: boom</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/boundary-effect-error/main.svelte b/packages/svelte/tests/runtime-runes/samples/boundary-effect-error/main.svelte
new file mode 100644
index 0000000000..63968f6b35
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/boundary-effect-error/main.svelte
@@ -0,0 +1,11 @@
+<script>
+  import Test from './Test.svelte';
+</script>
+
+<svelte:boundary>
+  <Test />
+
+  {#snippet failed(e)}
+    <p>caught: {e.message}</p>
+  {/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/class-directive-mutations/_config.js b/packages/svelte/tests/runtime-runes/samples/class-directive-mutations/_config.js
new file mode 100644
index 0000000000..076efee994
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-directive-mutations/_config.js
@@ -0,0 +1,126 @@
+import { flushSync, tick } from 'svelte';
+import { test } from '../../test';
+
+// This test counts mutations on hydration
+// set_class() should not mutate class on hydration, except if mismatch
+export default test({
+	mode: ['server', 'hydrate'],
+
+	server_props: {
+		browser: false
+	},
+
+	props: {
+		browser: true
+	},
+
+	html: `
+		<main id="main" class="browser">
+			<div class="custom svelte-1cjqok6 foo bar" title="a title"></div>
+			<span class="svelte-1cjqok6 foo bar"></span>
+			<b class="custom foo bar"></b>
+			<i class="foo bar"></i>
+
+			<div class="custom svelte-1cjqok6 foo bar" title="a title"></div>
+			<span class="svelte-1cjqok6 foo bar"></span>
+			<b class="custom foo bar"></b>
+			<i class="foo bar"></i>
+		</main>
+	`,
+
+	ssrHtml: `
+		<main id="main">
+			<div class="custom svelte-1cjqok6 foo bar" title="a title"></div>
+			<span class="svelte-1cjqok6 foo bar"></span>
+			<b class="custom foo bar"></b>
+			<i class="foo bar"></i>
+
+			<div class="custom svelte-1cjqok6 foo bar" title="a title"></div>
+			<span class="svelte-1cjqok6 foo bar"></span>
+			<b class="custom foo bar"></b>
+			<i class="foo bar"></i>
+		</main>
+	`,
+
+	async test({ target, assert, component, instance }) {
+		flushSync();
+		tick();
+		assert.deepEqual(instance.get_and_clear_mutations(), ['MAIN']);
+
+		component.foo = false;
+		flushSync();
+		tick();
+		assert.deepEqual(
+			instance.get_and_clear_mutations(),
+			['DIV', 'SPAN', 'B', 'I', 'DIV', 'SPAN', 'B', 'I'],
+			'first mutation'
+		);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<main id="main" class="browser">
+				<div class="custom svelte-1cjqok6 bar" title="a title"></div>
+				<span class="svelte-1cjqok6 bar"></span>
+				<b class="custom bar"></b>
+				<i class="bar"></i>
+
+				<div class="custom svelte-1cjqok6 bar" title="a title"></div>
+				<span class="svelte-1cjqok6 bar"></span>
+				<b class="custom bar"></b>
+				<i class="bar"></i>
+			</main>
+			`
+		);
+
+		component.foo = true;
+		flushSync();
+		assert.deepEqual(
+			instance.get_and_clear_mutations(),
+			['DIV', 'SPAN', 'B', 'I', 'DIV', 'SPAN', 'B', 'I'],
+			'second mutation'
+		);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<main id="main" class="browser">
+				<div class="custom svelte-1cjqok6 bar foo" title="a title"></div>
+				<span class="svelte-1cjqok6 bar foo"></span>
+				<b class="custom bar foo"></b>
+				<i class="bar foo"></i>
+
+				<div class="custom svelte-1cjqok6 bar foo" title="a title"></div>
+				<span class="svelte-1cjqok6 bar foo"></span>
+				<b class="custom bar foo"></b>
+				<i class="bar foo"></i>
+			</main>
+			`
+		);
+
+		component.classname = 'another';
+		flushSync();
+		assert.deepEqual(
+			instance.get_and_clear_mutations(),
+			['DIV', 'B', 'DIV', 'B'],
+			'class mutation'
+		);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<main id="main" class="browser">
+				<div class="another svelte-1cjqok6 foo bar" title="a title"></div>
+				<span class="svelte-1cjqok6 bar foo"></span>
+				<b class="another foo bar"></b>
+				<i class="bar foo"></i>
+
+				<div class="another svelte-1cjqok6 foo bar" title="a title"></div>
+				<span class="svelte-1cjqok6 bar foo"></span>
+				<b class="another foo bar"></b>
+				<i class="bar foo"></i>
+			</main>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-directive-mutations/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-directive-mutations/main.svelte
new file mode 100644
index 0000000000..d748988e21
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-directive-mutations/main.svelte
@@ -0,0 +1,52 @@
+<script>
+	let {
+		classname = 'custom',
+		foo = true,
+		bar = true,
+		browser
+	} = $props();
+
+	let mutations = [];
+	let observer;
+
+	if (browser) {
+		observer = new MutationObserver(update_mutation_records);
+		observer.observe(document.querySelector('#main'), { attributes: true, subtree: true });
+
+		$effect(() => {
+			return () => observer.disconnect();
+		});
+	}
+
+	function update_mutation_records(results) {
+		for (const r of results) {
+			mutations.push(r.target.nodeName);
+		}
+	}
+
+	export function get_and_clear_mutations() {
+		update_mutation_records(observer.takeRecords());
+		const result = mutations;
+		mutations = [];
+		return result;
+	}
+</script>
+
+<main id="main" class:browser>
+	<div class={classname} title="a title" class:foo class:bar></div>
+	<span class:foo class:bar></span>
+	<b class={classname} class:foo class:bar></b>
+	<i class:foo class:bar></i>
+
+	<div {...{class:classname, title:"a title"}} class:foo class:bar></div>
+	<span {...{}} class:foo class:bar></span>
+	<b {...{class:classname}} class:foo class:bar></b>
+	<i {...{}} class:foo class:bar></i>	
+</main>
+
+<style>
+	div,
+	span {
+		color: red;
+	}
+</style>
diff --git a/packages/svelte/tests/runtime-runes/samples/class-directive/_config.js b/packages/svelte/tests/runtime-runes/samples/class-directive/_config.js
new file mode 100644
index 0000000000..2756b40493
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-directive/_config.js
@@ -0,0 +1,145 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+	<div class="svelte-tza1s0"></div>
+	<span></span>
+	<div class="svelte-tza1s0"><span class="svelte-tza1s0"></span></div>
+
+	<div class="foo svelte-tza1s0"></div>
+	<span class="foo"></span>
+	<div class="svelte-tza1s0"><span class="foo svelte-tza1s0"></span></div>
+
+
+	<div class="foo svelte-tza1s0 bar"></div>
+	<span class="foo bar"></span>
+	<div class="svelte-tza1s0"><span class="foo svelte-tza1s0 bar"></span></div>
+
+	<div class="svelte-tza1s0"></div>
+	<span></span>
+	<div class="svelte-tza1s0"><span class="svelte-tza1s0"></span></div>
+
+	<div class="svelte-tza1s0 bar"></div>
+	<span class="bar"></span>
+	<div class="svelte-tza1s0"><span class="svelte-tza1s0 bar"></span></div>
+
+	<div class="football svelte-tza1s0 bar"></div>
+	<span class="football bar"></span>
+	<div class="svelte-tza1s0"><span class="football svelte-tza1s0 bar"></span></div>
+
+	<div class="svelte-tza1s0 bar not-foo"></div>
+	<span class="bar not-foo"></span>
+	<div class="svelte-tza1s0"><span class="svelte-tza1s0 bar not-foo"></span></div>
+
+	`,
+	test({ assert, target, component }) {
+		component.foo = true;
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div class="svelte-tza1s0"></div>
+			<span></span>
+			<div class="svelte-tza1s0"><span class="svelte-tza1s0"></span></div>
+
+			<div class="foo svelte-tza1s0"></div>
+			<span class="foo"></span>
+			<div class="svelte-tza1s0"><span class="foo svelte-tza1s0"></span></div>
+
+			<div class="foo svelte-tza1s0 bar"></div>
+			<span class="foo bar"></span>
+			<div class="svelte-tza1s0"><span class="foo svelte-tza1s0 bar"></span></div>
+
+			<div class="svelte-tza1s0 foo"></div>
+			<span class="foo"></span>
+			<div class="svelte-tza1s0"><span class="svelte-tza1s0 foo"></span></div>
+
+			<div class="svelte-tza1s0 bar foo"></div>
+			<span class="bar foo"></span>
+			<div class="svelte-tza1s0"><span class="svelte-tza1s0 bar foo"></span></div>
+
+			<div class="football svelte-tza1s0 bar foo"></div>
+			<span class="football bar foo"></span>
+			<div class="svelte-tza1s0"><span class="football svelte-tza1s0 bar foo"></span></div>
+
+			<div class="svelte-tza1s0 bar foo"></div>
+			<span class="bar foo"></span>
+			<div class="svelte-tza1s0"><span class="svelte-tza1s0 bar foo"></span></div>
+			`
+		);
+
+		component.bar = false;
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div class="svelte-tza1s0"></div>
+			<span></span>
+			<div class="svelte-tza1s0"><span class="svelte-tza1s0"></span></div>
+
+			<div class="foo svelte-tza1s0"></div>
+			<span class="foo"></span>
+			<div class="svelte-tza1s0"><span class="foo svelte-tza1s0"></span></div>
+
+			<div class="foo svelte-tza1s0"></div>
+			<span class="foo"></span>
+			<div class="svelte-tza1s0"><span class="foo svelte-tza1s0"></span></div>
+
+			<div class="svelte-tza1s0 foo"></div>
+			<span class="foo"></span>
+			<div class="svelte-tza1s0"><span class="svelte-tza1s0 foo"></span></div>
+
+			<div class="svelte-tza1s0 foo"></div>
+			<span class="foo"></span>
+			<div class="svelte-tza1s0"><span class="svelte-tza1s0 foo"></span></div>
+
+			<div class="football svelte-tza1s0 foo"></div>
+			<span class="football foo"></span>
+			<div class="svelte-tza1s0"><span class="football svelte-tza1s0 foo"></span></div>
+
+			<div class="svelte-tza1s0 foo"></div>
+			<span class="foo"></span>
+			<div class="svelte-tza1s0"><span class="svelte-tza1s0 foo"></span></div>
+			`
+		);
+
+		component.foo = false;
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div class="svelte-tza1s0"></div>
+			<span></span>
+			<div class="svelte-tza1s0"><span class="svelte-tza1s0"></span></div>
+
+			<div class="foo svelte-tza1s0"></div>
+			<span class="foo"></span>
+			<div class="svelte-tza1s0"><span class="foo svelte-tza1s0"></span></div>
+
+			<div class="foo svelte-tza1s0"></div>
+			<span class="foo"></span>
+			<div class="svelte-tza1s0"><span class="foo svelte-tza1s0"></span></div>
+
+			<div class="svelte-tza1s0"></div>
+			<span class=""></span>
+			<div class="svelte-tza1s0"><span class="svelte-tza1s0"></span></div>
+
+			<div class="svelte-tza1s0"></div>
+			<span class=""></span>
+			<div class="svelte-tza1s0"><span class="svelte-tza1s0"></span></div>
+
+			<div class="football svelte-tza1s0"></div>
+			<span class="football"></span>
+			<div class="svelte-tza1s0"><span class="football svelte-tza1s0"></span></div>
+
+			<div class="svelte-tza1s0 not-foo"></div>
+			<span class="not-foo"></span>
+			<div class="svelte-tza1s0"><span class="svelte-tza1s0 not-foo"></span></div>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-directive/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-directive/main.svelte
new file mode 100644
index 0000000000..966c07a78e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-directive/main.svelte
@@ -0,0 +1,40 @@
+<script>
+	let { foo = false, bar = true } = $props();
+</script>
+
+<div></div>
+<span></span>
+<div><span></span></div>
+
+<div class="foo"></div>
+<span class="foo"></span>
+<div><span class="foo"></span></div>
+
+<div class="foo" class:bar></div>
+<span class="foo" class:bar></span>
+<div><span class="foo" class:bar></span></div>
+
+<div class="foo" class:foo></div>
+<span class="foo" class:foo></span>
+<div><span class="foo" class:foo></span></div>
+
+<div class="foo" class:bar class:foo></div>
+<span class="foo" class:bar class:foo></span>
+<div><span class="foo" class:bar class:foo></span></div>
+
+<div class="football" class:bar class:foo></div>
+<span class="football" class:bar class:foo></span>
+<div><span class="football" class:bar class:foo></span></div>
+
+<div class="foo" class:bar class:foo class:not-foo={!foo}></div>
+<span class="foo" class:bar class:foo class:not-foo={!foo}></span>
+<div><span class="foo" class:bar class:foo class:not-foo={!foo}></span></div>
+
+<style>
+	div {
+		color: red;
+	}
+	div > span {
+		font-weight: bold;
+	}
+</style>
diff --git a/packages/svelte/tests/runtime-runes/samples/class-private-fields-assignment-shorthand/_config.js b/packages/svelte/tests/runtime-runes/samples/class-private-fields-assignment-shorthand/_config.js
new file mode 100644
index 0000000000..0fdeabfe0b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-private-fields-assignment-shorthand/_config.js
@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>inc</button>
+			<p>a:1</p>
+			<p>b:2</p>
+			<p>c:3</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-private-fields-assignment-shorthand/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-private-fields-assignment-shorthand/main.svelte
new file mode 100644
index 0000000000..746f22b1e6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-private-fields-assignment-shorthand/main.svelte
@@ -0,0 +1,28 @@
+<script>
+	class Counter {
+		#a = $state();
+		#b = $state({ val: -1 });
+		#c = $state();
+		constructor() {
+			this.#a ||= {val: 0}
+			this.#b &&= {val: 0}
+			this.#c ??= {val: 0}
+		}
+		inc() {
+			this.#a.val += 1;
+			this.#b.val += 2;
+			this.#c.val += 3;
+		}
+		get a() { return this.#a?.val; }
+		get b() { return this.#b?.val; }
+		get c() { return this.#c?.val; }
+	}
+
+	let counter = new Counter();
+</script>
+
+<button onclick={() => counter.inc()}>inc</button>
+<!-- prevent updating outputs in a common effect -->
+{#key 1}<p>a:{counter.a}</p>{/key}
+{#key 2}<p>b:{counter.b}</p>{/key}
+{#key 3}<p>c:{counter.c}</p>{/key}
diff --git a/packages/svelte/tests/runtime-runes/samples/class-private-fields-reassigned-this/_config.js b/packages/svelte/tests/runtime-runes/samples/class-private-fields-reassigned-this/_config.js
index 88b806c0f0..0e6bd73220 100644
--- a/packages/svelte/tests/runtime-runes/samples/class-private-fields-reassigned-this/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/class-private-fields-reassigned-this/_config.js
@@ -5,6 +5,6 @@ export default test({
 		dev: true
 	},
 	async test({ assert, logs }) {
-		assert.deepEqual(logs, ['init', 1, 'init', 1]);
+		assert.deepEqual(logs, [1, 1]);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-1/_config.js
similarity index 100%
rename from packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private/_config.js
rename to packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-1/_config.js
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-1/main.svelte
similarity index 100%
rename from packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private/main.svelte
rename to packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-1/main.svelte
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-2/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-2/_config.js
new file mode 100644
index 0000000000..dd847ce2f2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-2/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>10</button>`,
+	ssrHtml: `<button>0</button>`,
+
+	async test({ assert, target }) {
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<button>10</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-2/main.svelte
new file mode 100644
index 0000000000..3d8ea41418
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-2/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	class Counter {
+		constructor() {
+			this.count = $state(0);
+			$effect(() => {
+				this.count = 10;
+			});
+		}
+	}
+	const counter = new Counter();
+</script>
+
+<button on:click={() => counter.count++}>{counter.count}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-3/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-3/_config.js
new file mode 100644
index 0000000000..dd847ce2f2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-3/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>10</button>`,
+	ssrHtml: `<button>0</button>`,
+
+	async test({ assert, target }) {
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<button>10</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-3/main.svelte
new file mode 100644
index 0000000000..47b8c901eb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-closure-private-3/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	const counter = new class Counter {
+		constructor() {
+			this.count = $state(0);
+			$effect(() => {
+				this.count = 10;
+			});
+		}
+	}
+</script>
+
+<button on:click={() => counter.count++}>{counter.count}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-conflicting-get-name/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-conflicting-get-name/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-conflicting-get-name/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-conflicting-get-name/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-conflicting-get-name/main.svelte
new file mode 100644
index 0000000000..e2c4f302b3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-conflicting-get-name/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	class Test {
+		0 = $state();
+
+		constructor() {
+			this[1] = $state();
+		}
+	}
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-derived-unowned/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-derived-unowned/_config.js
new file mode 100644
index 0000000000..4cf1aea213
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-derived-unowned/_config.js
@@ -0,0 +1,45 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	// The component context class instance gets shared between tests, strangely, causing hydration to fail?
+	mode: ['client', 'server'],
+
+	async test({ assert, target, logs }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => {
+			btn?.click();
+		});
+
+		assert.deepEqual(logs, [0, 'class trigger false', 'local trigger false', 1]);
+
+		flushSync(() => {
+			btn?.click();
+		});
+
+		assert.deepEqual(logs, [0, 'class trigger false', 'local trigger false', 1, 2]);
+
+		flushSync(() => {
+			btn?.click();
+		});
+
+		assert.deepEqual(logs, [0, 'class trigger false', 'local trigger false', 1, 2, 3]);
+
+		flushSync(() => {
+			btn?.click();
+		});
+
+		assert.deepEqual(logs, [
+			0,
+			'class trigger false',
+			'local trigger false',
+			1,
+			2,
+			3,
+			4,
+			'class trigger true',
+			'local trigger true'
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-derived-unowned/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-derived-unowned/main.svelte
new file mode 100644
index 0000000000..03687d01bb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-derived-unowned/main.svelte
@@ -0,0 +1,37 @@
+<script module>
+	class SomeLogic {
+		trigger() {
+			this.someValue++;
+		}
+
+		constructor() {
+			this.someValue = $state(0);
+			this.isAboveThree = $derived(this.someValue > 3);
+		}
+	}
+
+	const someLogic = new SomeLogic();
+</script>
+
+<script>
+	function increment() {
+		someLogic.trigger();
+	}
+
+	let localDerived = $derived(someLogic.someValue > 3);
+
+	$effect(() => {
+		console.log(someLogic.someValue);
+	});
+	$effect(() => {
+		console.log('class trigger ' + someLogic.isAboveThree)
+	});
+	$effect(() => {
+		console.log('local trigger ' + localDerived)
+	});
+
+</script>
+
+<button on:click={increment}>
+	clicks: {someLogic.someValue}
+</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-predeclared-field/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-predeclared-field/_config.js
new file mode 100644
index 0000000000..02cf36d900
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-predeclared-field/_config.js
@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>0</button>`,
+
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.htmlEqual(target.innerHTML, `<button>1</button>`);
+
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.htmlEqual(target.innerHTML, `<button>2</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-predeclared-field/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-predeclared-field/main.svelte
new file mode 100644
index 0000000000..5dbbb10afd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-predeclared-field/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	class Counter {
+		count;
+
+		constructor(count) {
+			this.count = $state(count);
+		}
+	}
+	const counter = new Counter(0);
+</script>
+
+<button onclick={() => counter.count++}>{counter.count}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-subclass/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-subclass/_config.js
new file mode 100644
index 0000000000..32cca6c693
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-subclass/_config.js
@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>10: 20</button>`,
+
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.htmlEqual(target.innerHTML, `<button>11: 22</button>`);
+
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.htmlEqual(target.innerHTML, `<button>12: 24</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor-subclass/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-subclass/main.svelte
new file mode 100644
index 0000000000..d8feb554cd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor-subclass/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	class Counter {
+		constructor(initial) {
+			this.count = $state(initial);
+		}
+
+		increment = () => {
+			this.count++;
+		}
+	}
+
+	class PluggableCounter extends Counter {
+		constructor(initial, plugin) {
+			super(initial)
+			this.custom = $derived(plugin(this.count));
+		}
+	}
+
+	const counter = new PluggableCounter(10, (count) => count * 2);
+</script>
+
+<button onclick={counter.increment}>{counter.count}: {counter.custom}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-constructor/_config.js
new file mode 100644
index 0000000000..f35dc57228
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor/_config.js
@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>20</button>`,
+
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.htmlEqual(target.innerHTML, `<button>22</button>`);
+
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.htmlEqual(target.innerHTML, `<button>24</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-constructor/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-constructor/main.svelte
new file mode 100644
index 0000000000..aa8ba1658b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-constructor/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	class Counter {
+		/** @type {number} */
+		#count;
+
+		constructor(initial) {
+			this.#count = $state(initial);
+			this.doubled = $derived(this.#count * 2);
+		}
+
+		increment = () => {
+			this.#count++;
+		}
+	}
+	const counter = new Counter(10);
+</script>
+
+<button onclick={counter.increment}>{counter.doubled}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-derived-private/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-derived-private/_config.js
index 141d994a2f..40ef84a2e6 100644
--- a/packages/svelte/tests/runtime-runes/samples/class-state-derived-private/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-derived-private/_config.js
@@ -5,6 +5,7 @@ export default test({
 	html: `
 		<button>0</button>
 		<p>doubled: 0</p>
+		<p>tripled: 0</p>
 	`,
 
 	test({ assert, target }) {
@@ -17,6 +18,7 @@ export default test({
 			`
 				<button>1</button>
 				<p>doubled: 2</p>
+				<p>tripled: 3</p>
 			`
 		);
 
@@ -27,6 +29,7 @@ export default test({
 			`
 				<button>2</button>
 				<p>doubled: 4</p>
+				<p>tripled: 6</p>
 			`
 		);
 	}
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-derived-private/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-derived-private/main.svelte
index 2c4c8f1839..92a1f5ab94 100644
--- a/packages/svelte/tests/runtime-runes/samples/class-state-derived-private/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-derived-private/main.svelte
@@ -2,14 +2,25 @@
 	class Counter {
 		count = $state(0);
 		#doubled = $derived(this.count * 2);
+		#tripled = $derived.by(() => this.count * this.by);
 
-		get embiggened() {
-			return this.#doubled;
+		constructor(by) {
+			this.by = by;
+		}
+
+		get embiggened1() {
+			const self = this;
+			return self.#doubled;
+		}
+
+		get embiggened2() {
+			return this.#tripled;
 		}
 	}
 
-	const counter = new Counter();
+	const counter = new Counter(3);
 </script>
 
 <button on:click={() => counter.count++}>{counter.count}</button>
-<p>doubled: {counter.embiggened}</p>
+<p>doubled: {counter.embiggened1}</p>
+<p>tripled: {counter.embiggened2}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/clsx/_config.js b/packages/svelte/tests/runtime-runes/samples/clsx/_config.js
new file mode 100644
index 0000000000..202a13b1cb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/clsx/_config.js
@@ -0,0 +1,49 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<div class="foo svelte-owbekl"></div>
+		<div class="foo svelte-owbekl"></div>
+		<div class="foo svelte-owbekl"></div>
+		<div class="foo svelte-owbekl"></div>
+		<div class="foo svelte-owbekl"></div>
+
+		<div class="foo">child</div>
+		<div class="foo">child</div>
+		<div class="foo">child</div>
+		<div class="foo">child</div>
+		<div class="foo">child</div>
+
+		<applied-to-custom-element class="foo svelte-owbekl"></applied-to-custom-element>
+
+		<button>update</button>
+	`,
+	test({ assert, target }) {
+		const button = target.querySelector('button');
+
+		button?.click();
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<div class="foo svelte-owbekl"></div>
+				<div class="foo svelte-owbekl"></div>
+				<div class="bar svelte-owbekl"></div>
+				<div class="bar svelte-owbekl"></div>
+				<div class="foo svelte-owbekl"></div>
+
+				<div class="foo">child</div>
+				<div class="foo">child</div>
+				<div class="bar">child</div>
+				<div class="bar">child</div>
+				<div class="foo">child</div>
+
+				<applied-to-custom-element class="bar svelte-owbekl"></applied-to-custom-element>
+
+				<button>update</button>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/clsx/child.svelte b/packages/svelte/tests/runtime-runes/samples/clsx/child.svelte
new file mode 100644
index 0000000000..1b8be697c0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/clsx/child.svelte
@@ -0,0 +1,5 @@
+<script>
+    let { class: cls } = $props();
+</script>
+
+<div class={cls}>child</div>
diff --git a/packages/svelte/tests/runtime-runes/samples/clsx/main.svelte b/packages/svelte/tests/runtime-runes/samples/clsx/main.svelte
new file mode 100644
index 0000000000..ebc0697f97
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/clsx/main.svelte
@@ -0,0 +1,35 @@
+<script>
+	import Child from "./child.svelte";
+
+    let foo = $state('foo');
+    let bar = $state(null);
+    let spread = { class: { foo: true, bar: false } };
+</script>
+
+<div class={{ foo: true, bar: false }}></div>
+<div class={['foo', false && 'bar']}></div>
+<div class={{ foo, bar }}></div>
+<div class={[ foo, bar ]}></div>
+<div {...spread}></div>
+
+<Child class={{ foo: true, bar: false }} />
+<Child class={['foo', false && 'bar']} />
+<Child class={{ foo, bar }} />
+<Child class={[ foo, bar ]} />
+<Child {...spread} />
+
+<applied-to-custom-element class={{ foo, bar }}></applied-to-custom-element>
+
+<button onclick={() => {
+    foo = null;
+    bar = 'bar';
+}}>update</button>
+
+<style>
+    .foo {
+        color: red;
+    }
+    .bar {
+        color: blue;
+    }
+</style>
diff --git a/packages/svelte/tests/runtime-runes/samples/const-snippet-reactive/Component.svelte b/packages/svelte/tests/runtime-runes/samples/const-snippet-reactive/Component.svelte
new file mode 100644
index 0000000000..ba0e19e0a3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/const-snippet-reactive/Component.svelte
@@ -0,0 +1,5 @@
+<script>
+	let { test } = $props();
+</script>
+
+{@render test?.()}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/const-snippet-reactive/_config.js b/packages/svelte/tests/runtime-runes/samples/const-snippet-reactive/_config.js
new file mode 100644
index 0000000000..5f6a0172ca
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/const-snippet-reactive/_config.js
@@ -0,0 +1,10 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+		flushSync(() => btn?.click());
+		assert.htmlEqual(target.innerHTML, `<button></button><p>snip</p>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/const-snippet-reactive/main.svelte b/packages/svelte/tests/runtime-runes/samples/const-snippet-reactive/main.svelte
new file mode 100644
index 0000000000..c2b75c362f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/const-snippet-reactive/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Component from "./Component.svelte";
+	let count = $state(0);
+</script>
+
+{#snippet snip()}
+<p>snip</p>
+{/snippet}
+
+<button onclick={() => count++}></button>
+{#if true}
+	{@const test =  count % 2 === 0 ? undefined: snip}
+	<Component {test} />
+{/if}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/const-tag-boundary-deprecated-usage/FlakyComponent.svelte b/packages/svelte/tests/runtime-runes/samples/const-tag-boundary-deprecated-usage/FlakyComponent.svelte
new file mode 100644
index 0000000000..ea60542af9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/const-tag-boundary-deprecated-usage/FlakyComponent.svelte
@@ -0,0 +1,3 @@
+<script>
+	throw new Error();
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/const-tag-boundary-deprecated-usage/_config.js b/packages/svelte/tests/runtime-runes/samples/const-tag-boundary-deprecated-usage/_config.js
new file mode 100644
index 0000000000..915bda91f3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/const-tag-boundary-deprecated-usage/_config.js
@@ -0,0 +1,18 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_async: true,
+	html: '<button></button><p>2</p>',
+	mode: ['client'],
+	test({ target, assert }) {
+		const btn = target.querySelector('button');
+		const p = target.querySelector('p');
+
+		flushSync(() => {
+			btn?.click();
+		});
+
+		assert.equal(p?.innerHTML, '4');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/const-tag-boundary-deprecated-usage/main.svelte b/packages/svelte/tests/runtime-runes/samples/const-tag-boundary-deprecated-usage/main.svelte
new file mode 100644
index 0000000000..25ea8a3ffc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/const-tag-boundary-deprecated-usage/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import FlakyComponent from "./FlakyComponent.svelte";
+	let test=$state(1);
+</script>
+
+<button onclick={()=>test++}></button>
+
+<svelte:boundary>
+	{@const double = test * 2}
+	{#snippet failed()}
+		<p>{double}</p>
+	{/snippet}
+	<FlakyComponent />
+</svelte:boundary>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/const-tag-boundary/_config.js b/packages/svelte/tests/runtime-runes/samples/const-tag-boundary/_config.js
new file mode 100644
index 0000000000..e4ffb4a850
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/const-tag-boundary/_config.js
@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: '<button>increment</button><p>2</p>',
+	mode: ['client'],
+	test({ target, assert }) {
+		const btn = target.querySelector('button');
+		const p = target.querySelector('p');
+
+		flushSync(() => {
+			btn?.click();
+		});
+
+		assert.equal(p?.innerHTML, '4');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/const-tag-boundary/main.svelte b/packages/svelte/tests/runtime-runes/samples/const-tag-boundary/main.svelte
new file mode 100644
index 0000000000..9605e12070
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/const-tag-boundary/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	let count = $state(1);
+</script>
+
+<button onclick={()=>count++}>increment</button>
+
+<svelte:boundary>
+	{@const double = count * 2}
+	<p>{double}</p>
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/create-context-programmatic/Child.svelte b/packages/svelte/tests/runtime-runes/samples/create-context-programmatic/Child.svelte
new file mode 100644
index 0000000000..3e39d5043e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/create-context-programmatic/Child.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { get } from './main.svelte';
+
+	const message = get();
+</script>
+
+<h1>{message}</h1>
diff --git a/packages/svelte/tests/runtime-runes/samples/create-context-programmatic/_config.js b/packages/svelte/tests/runtime-runes/samples/create-context-programmatic/_config.js
new file mode 100644
index 0000000000..f4374c8759
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/create-context-programmatic/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	ssrHtml: `<div></div>`,
+	html: `<div><h1>hello</h1></div>`,
+
+	test() {}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/create-context-programmatic/main.svelte b/packages/svelte/tests/runtime-runes/samples/create-context-programmatic/main.svelte
new file mode 100644
index 0000000000..3c42dbf180
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/create-context-programmatic/main.svelte
@@ -0,0 +1,20 @@
+<script module>
+	import { createContext, mount } from 'svelte';
+	import Child from './Child.svelte';
+
+	/** @type {ReturnType<typeof createContext<string>>} */
+	const [get, set] = createContext();
+
+	export { get };
+
+	function Wrapper(Component) {
+		return (...args) => {
+			set('hello');
+			return Component(...args);
+		};
+	}
+</script>
+
+<div {@attach (target) => {
+	mount(Wrapper(Child), { target });
+}}></div>
diff --git a/packages/svelte/tests/runtime-runes/samples/create-context/Child.svelte b/packages/svelte/tests/runtime-runes/samples/create-context/Child.svelte
new file mode 100644
index 0000000000..3e39d5043e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/create-context/Child.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { get } from './main.svelte';
+
+	const message = get();
+</script>
+
+<h1>{message}</h1>
diff --git a/packages/svelte/tests/runtime-runes/samples/create-context/_config.js b/packages/svelte/tests/runtime-runes/samples/create-context/_config.js
new file mode 100644
index 0000000000..4ae28e68bd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/create-context/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<h1>hello</h1>`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/create-context/main.svelte b/packages/svelte/tests/runtime-runes/samples/create-context/main.svelte
new file mode 100644
index 0000000000..8d3c50ba55
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/create-context/main.svelte
@@ -0,0 +1,16 @@
+<script module>
+	import { createContext } from 'svelte';
+
+	/** @type {ReturnType<typeof createContext<string>>} */
+	const [get, set] = createContext();
+
+	export { get };
+</script>
+
+<script>
+	import Child from './Child.svelte';
+
+	set('hello');
+</script>
+
+<Child />
diff --git a/packages/svelte/tests/runtime-runes/samples/custom-element-attributes/_config.js b/packages/svelte/tests/runtime-runes/samples/custom-element-attributes/_config.js
new file mode 100644
index 0000000000..3d8917c147
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/custom-element-attributes/_config.js
@@ -0,0 +1,27 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	async test({ assert, target }) {
+		const my_element = /** @type HTMLElement & { object: { test: true }; } */ (
+			target.querySelector('my-element')
+		);
+		assert.equal(my_element.getAttribute('string'), 'test');
+		assert.equal(my_element.hasAttribute('object'), false);
+		assert.deepEqual(my_element.object, { test: true });
+
+		const my_link = /** @type HTMLAnchorElement & { object: { test: true }; } */ (
+			target.querySelector('a')
+		);
+		assert.equal(my_link.getAttribute('string'), 'test');
+		assert.equal(my_link.hasAttribute('object'), false);
+		assert.deepEqual(my_link.object, { test: true });
+
+		const [value1, value2] = target.querySelectorAll('value-element');
+		assert.equal(value1.shadowRoot?.innerHTML, '<span>test</span>');
+		assert.equal(value2.shadowRoot?.innerHTML, '<span>test</span>');
+
+		const value_builtin = target.querySelector('div');
+		assert.equal(value_builtin?.shadowRoot?.innerHTML, '<span>test</span>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/custom-element-attributes/main.svelte b/packages/svelte/tests/runtime-runes/samples/custom-element-attributes/main.svelte
new file mode 100644
index 0000000000..badb8f96c7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/custom-element-attributes/main.svelte
@@ -0,0 +1,43 @@
+<script module>
+	if(!customElements.get('value-element')) {
+		customElements.define('value-element', class extends HTMLElement {
+
+			constructor() {
+				super();
+				this.attachShadow({ mode: 'open' });
+			}
+
+			set value(v) {
+				if (this.__value !== v) {
+					this.__value = v;
+					this.shadowRoot.innerHTML = `<span>${v}</span>`;
+				}
+			}
+		});
+	}
+	if(!customElements.get('value-builtin')) {
+		customElements.define('value-builtin', class extends HTMLDivElement {
+
+			constructor() {
+				super();
+				this.attachShadow({ mode: 'open' });
+			}
+
+			set value(v) {
+				if (this.__value !== v) {
+					this.__value = v;
+					this.shadowRoot.innerHTML = `<span>${v}</span>`;
+				}
+			}
+		}, {
+			extends: 'div'
+		});
+	}
+</script>
+
+<my-element string="test" object={{ test: true }}></my-element>
+<a is="my-link" string="test" object={{ test: true }}></a>
+
+<value-element value="test"></value-element>
+<value-element {...{value: "test"}}></value-element>
+<div is="value-builtin" value="test"></div>
diff --git a/packages/svelte/tests/runtime-runes/samples/custom-element-injected-styles/Thing.svelte b/packages/svelte/tests/runtime-runes/samples/custom-element-injected-styles/Thing.svelte
new file mode 100644
index 0000000000..0a2b139274
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/custom-element-injected-styles/Thing.svelte
@@ -0,0 +1,9 @@
+<svelte:options customElement={{ tag: 'my-thing' }} />
+
+<h1>hello</h1>
+
+<style>
+	h1 {
+		color: red;
+	}
+</style>
diff --git a/packages/svelte/tests/runtime-runes/samples/custom-element-injected-styles/_config.js b/packages/svelte/tests/runtime-runes/samples/custom-element-injected-styles/_config.js
new file mode 100644
index 0000000000..74597504bd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/custom-element-injected-styles/_config.js
@@ -0,0 +1,15 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	async test({ assert, target }) {
+		const thing = /** @type HTMLElement & { object: { test: true }; } */ (
+			target.querySelector('my-thing')
+		);
+
+		await tick();
+
+		assert.include(thing.shadowRoot?.innerHTML, 'red');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/custom-element-injected-styles/main.svelte b/packages/svelte/tests/runtime-runes/samples/custom-element-injected-styles/main.svelte
new file mode 100644
index 0000000000..ba5b788da9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/custom-element-injected-styles/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import './Thing.svelte';
+</script>
+
+<my-thing></my-thing>
diff --git a/packages/svelte/tests/runtime-runes/samples/custom-element-svelte-class/_config.js b/packages/svelte/tests/runtime-runes/samples/custom-element-svelte-class/_config.js
index 0069a7dfd7..930de12585 100644
--- a/packages/svelte/tests/runtime-runes/samples/custom-element-svelte-class/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/custom-element-svelte-class/_config.js
@@ -3,7 +3,7 @@ import { test } from '../../test';
 export default test({
 	async test({ assert, target, logs }) {
 		const [my_element, my_element_1] = target.querySelectorAll('my-element');
-		assert.equal(my_element.classList.contains('svelte-1koh33s'), true);
-		assert.equal(my_element_1.classList.contains('svelte-1koh33s'), true);
+		assert.equal(my_element.classList.contains('svelte-70s021'), true);
+		assert.equal(my_element_1.classList.contains('svelte-70s021'), true);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/declaration-tag-multiple-declarators/_config.js b/packages/svelte/tests/runtime-runes/samples/declaration-tag-multiple-declarators/_config.js
new file mode 100644
index 0000000000..c5846ba0bc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/declaration-tag-multiple-declarators/_config.js
@@ -0,0 +1,17 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>increment</button><p>count: 0</p><p>doubled: 0</p><p>quadrupled: 0</p>`,
+	async test({ assert, target }) {
+		const [button] = target.querySelectorAll('button');
+
+		button.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>increment</button><p>count: 1</p><p>doubled: 2</p><p>quadrupled: 4</p>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/declaration-tag-multiple-declarators/main.svelte b/packages/svelte/tests/runtime-runes/samples/declaration-tag-multiple-declarators/main.svelte
new file mode 100644
index 0000000000..d6fb542396
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/declaration-tag-multiple-declarators/main.svelte
@@ -0,0 +1,10 @@
+<!-- a later declarator can reference an earlier one within the same tag... -->
+{let count = $state(0), doubled = $derived(count * 2)}
+
+<!-- ...and leading whitespace is tolerated -->
+{ let quadrupled = $derived(doubled * 2) }
+
+<button onclick={() => (count += 1)}>increment</button>
+<p>count: {count}</p>
+<p>doubled: {doubled}</p>
+<p>quadrupled: {quadrupled}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/declaration-tags-no-script/_config.js b/packages/svelte/tests/runtime-runes/samples/declaration-tags-no-script/_config.js
new file mode 100644
index 0000000000..901df42df7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/declaration-tags-no-script/_config.js
@@ -0,0 +1,13 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: '<button>0 | 0</button>',
+	async test({ assert, target }) {
+		const [increment] = target.querySelectorAll('button');
+
+		increment.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<button>1 | 2</button>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/declaration-tags-no-script/main.svelte b/packages/svelte/tests/runtime-runes/samples/declaration-tags-no-script/main.svelte
new file mode 100644
index 0000000000..da72bc69c6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/declaration-tags-no-script/main.svelte
@@ -0,0 +1,3 @@
+{let count = $state(0)}
+{let doubled = $derived(count * 2)}
+<button onclick={() => (count += 1)}>{count} | {doubled}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/declaration-tags/_config.js b/packages/svelte/tests/runtime-runes/samples/declaration-tags/_config.js
new file mode 100644
index 0000000000..54e390ec83
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/declaration-tags/_config.js
@@ -0,0 +1,37 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>top 2</button><button>toggle</button><button>2</button><p>4 total</p><div><span>nested</span></div><div><span>nested</span></div>`,
+	async test({ assert, target }) {
+		const [top, toggle, increment] = target.querySelectorAll('button');
+
+		top.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>top 4</button><button>toggle</button><button>2</button><p>4 total</p><div><span>nested</span></div><div><span>nested</span></div>`
+		);
+
+		increment.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>top 4</button><button>toggle</button><button>3</button><p>6 total</p><div><span>nested</span></div><div><span>nested</span></div>`
+		);
+
+		toggle.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>top 4</button><button>toggle</button><div><span>nested</span></div>`
+		);
+
+		toggle.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>top 4</button><button>toggle</button><button>2</button><p>4 total</p><div><span>nested</span></div><div><span>nested</span></div>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/declaration-tags/main.svelte b/packages/svelte/tests/runtime-runes/samples/declaration-tags/main.svelte
new file mode 100644
index 0000000000..5953104092
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/declaration-tags/main.svelte
@@ -0,0 +1,29 @@
+<script>
+	let visible = $state(true);
+	let initial = $state(2);
+</script>
+
+{let top = $state(1)}
+{let top_doubled = $derived(top * 2)}
+
+<button onclick={() => (top += 1)}>top {top_doubled}</button>
+<button onclick={() => (visible = !visible)}>toggle</button>
+
+{#if visible}
+	{let counter = $state({ value: initial })}
+	{let doubled = $derived(counter.value * 2)}
+	{const suffix = ' total'}
+	{const format = (value) => `${value}${suffix}`}
+
+	<button onclick={() => (counter.value += 1)}>{counter.value}</button>
+	<p>{format(doubled)}</p>
+	<div>
+		{const doubled = 'nested'}
+		<span>{doubled}</span>
+	</div>
+{/if}
+
+<div>
+	{const nested = 'nested'}
+	<span>{nested}</span>
+</div>
diff --git a/packages/svelte/tests/runtime-runes/samples/delete-proxy-key/_config.js b/packages/svelte/tests/runtime-runes/samples/delete-proxy-key/_config.js
new file mode 100644
index 0000000000..23141a01cd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/delete-proxy-key/_config.js
@@ -0,0 +1,13 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	html: `<button>delete</button><p>test</p>`,
+
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => btn?.click());
+		assert.htmlEqual(target.innerHTML, '<button>delete</button>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/delete-proxy-key/main.svelte b/packages/svelte/tests/runtime-runes/samples/delete-proxy-key/main.svelte
new file mode 100644
index 0000000000..d3c519c401
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/delete-proxy-key/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	let obj = $state({test: 0})
+
+	let keys = $derived(Object.keys(obj));
+</script>
+
+<button onclick={() => delete obj.test}>
+	delete
+</button>
+
+{#each keys as key}
+	<p>{key}</p>
+{/each}
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/derived-cleanup-old-value/_config.js b/packages/svelte/tests/runtime-runes/samples/derived-cleanup-old-value/_config.js
new file mode 100644
index 0000000000..694dccdcf8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-cleanup-old-value/_config.js
@@ -0,0 +1,22 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, logs, target }) {
+		const [increment] = target.querySelectorAll('button');
+
+		flushSync(() => increment.click());
+		flushSync(() => increment.click());
+		flushSync(() => increment.click());
+
+		assert.deepEqual(logs, [
+			'count: 1',
+			'squared: 1',
+			'count: 2',
+			'squared: 4',
+			'count: 3',
+			'squared: 9',
+			'count: 4'
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-cleanup-old-value/main.svelte b/packages/svelte/tests/runtime-runes/samples/derived-cleanup-old-value/main.svelte
new file mode 100644
index 0000000000..a4c58a8e99
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-cleanup-old-value/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	let count = $state(1);
+	let squared = $derived(count * count);
+
+	$effect(() => {
+		console.log(`count: ${count}`);
+
+		return () => {
+			console.log(`squared: ${squared}`);
+		};
+	});
+</script>
+
+<button onclick={() => count++}>increment</button>
+
+<p>count: {count}</p>
+
+{#if count % 2 === 0}
+	<p id="squared">squared: {squared}</p>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-dep-set-while-rendering/Child.svelte b/packages/svelte/tests/runtime-runes/samples/derived-dep-set-while-rendering/Child.svelte
new file mode 100644
index 0000000000..9771762c0b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-dep-set-while-rendering/Child.svelte
@@ -0,0 +1,7 @@
+<script>
+    import { store } from "./store.svelte.js";
+
+    // This write marks the derived in main.svelte before it has reactions added to it.
+    // This test checks that this does not cause the WAS_MARKED logic to incorrectly skip marking the derived subsequently.
+    store.set("child-init-write", Math.random());
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-dep-set-while-rendering/_config.js b/packages/svelte/tests/runtime-runes/samples/derived-dep-set-while-rendering/_config.js
new file mode 100644
index 0000000000..60985cdd12
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-dep-set-while-rendering/_config.js
@@ -0,0 +1,29 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [show, hide] = target.querySelectorAll('button');
+
+		hide.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>show</button>
+			<button>hide</button>
+		`
+		);
+
+		show.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>show</button>
+			<button>hide</button>
+			<div>visible</div>
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-dep-set-while-rendering/main.svelte b/packages/svelte/tests/runtime-runes/samples/derived-dep-set-while-rendering/main.svelte
new file mode 100644
index 0000000000..3359a6305b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-dep-set-while-rendering/main.svelte
@@ -0,0 +1,14 @@
+<script>
+    import Child from "./Child.svelte";
+    import { store } from "./store.svelte.js";
+
+    const visible = $derived(store.get("visible"));
+    const visible2 = $derived(visible);
+</script>
+
+<button onclick={() => store.set("visible", true)}>show</button>
+<button onclick={() => store.set("visible", false)}>hide</button>
+{#if visible2}
+	<Child />
+	<div>visible</div>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-dep-set-while-rendering/store.svelte.js b/packages/svelte/tests/runtime-runes/samples/derived-dep-set-while-rendering/store.svelte.js
new file mode 100644
index 0000000000..b48155e823
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-dep-set-while-rendering/store.svelte.js
@@ -0,0 +1,13 @@
+class RawStore {
+	values = $state.raw({ visible: true });
+
+	get(key) {
+		return this.values[key];
+	}
+
+	set(key, value) {
+		this.values = { ...this.values, [key]: value };
+	}
+}
+
+export const store = new RawStore();
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-destructured-iterator/_config.js b/packages/svelte/tests/runtime-runes/samples/derived-destructured-iterator/_config.js
new file mode 100644
index 0000000000..7f8d1e000d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-destructured-iterator/_config.js
@@ -0,0 +1,16 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>increment</button><p>a: 1</p><p>b: 2</p><p>c: 3</p>`,
+
+	test({ assert, target }) {
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>increment</button><p>a: 2</p><p>b: 3</p><p>c: 4</p>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-destructured-iterator/main.svelte b/packages/svelte/tests/runtime-runes/samples/derived-destructured-iterator/main.svelte
new file mode 100644
index 0000000000..8c8629a72c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-destructured-iterator/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	let offset = $state(1);
+
+	function* count(offset) {
+		let i = offset;
+		while (true) yield i++;
+	}
+
+	let [a, b, c] = $derived(count(offset));
+</script>
+
+<button onclick={() => offset += 1}>increment</button>
+
+<p>a: {a}</p>
+<p>b: {b}</p>
+<p>c: {c}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-disconnect/_config.js b/packages/svelte/tests/runtime-runes/samples/derived-disconnect/_config.js
new file mode 100644
index 0000000000..76e60b7402
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-disconnect/_config.js
@@ -0,0 +1,96 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		let [b1, b2, b3, b4, b5] = target.querySelectorAll('button');
+
+		b1?.click();
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<main><div>Current ID: 1</div>
+			<div>Name: a</div><div><button>a</button></div><div><button>b</button></div><div><button>c</button></div><div><button>d</button></div><hr><div>
+			<button>Show / Hide</button></div></main>`
+		);
+
+		b2?.click();
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<main><div>Current ID: 2</div>
+			<div>Name: b</div><div><button>a</button></div><div><button>b</button></div><div><button>c</button></div><div><button>d</button></div><hr><div>
+			<button>Show / Hide</button></div></main>`
+		);
+
+		b3?.click();
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<main><div>Current ID: 3</div>
+			<div>Name: c</div><div><button>a</button></div><div><button>b</button></div><div><button>c</button></div><div><button>d</button></div><hr><div>
+			<button>Show / Hide</button></div></main>`
+		);
+
+		b4?.click();
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<main><div>Current ID: 4</div>
+			<div>Name: d</div><div><button>a</button></div><div><button>b</button></div><div><button>c</button></div><div><button>d</button></div><hr><div>
+			<button>Show / Hide</button></div></main>`
+		);
+
+		b5?.click();
+		flushSync();
+
+		b5?.click();
+		flushSync();
+
+		[b1, b2, b3, b4, b5] = target.querySelectorAll('button');
+
+		b1?.click();
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<main><div>Current ID: 1</div>
+			<div>Name: a</div><div><button>a</button></div><div><button>b</button></div><div><button>c</button></div><div><button>d</button></div><hr><div>
+			<button>Show / Hide</button></div></main>`
+		);
+
+		b2?.click();
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<main><div>Current ID: 2</div>
+			<div>Name: b</div><div><button>a</button></div><div><button>b</button></div><div><button>c</button></div><div><button>d</button></div><hr><div>
+			<button>Show / Hide</button></div></main>`
+		);
+
+		b3?.click();
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<main><div>Current ID: 3</div>
+			<div>Name: c</div><div><button>a</button></div><div><button>b</button></div><div><button>c</button></div><div><button>d</button></div><hr><div>
+			<button>Show / Hide</button></div></main>`
+		);
+
+		b4?.click();
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<main><div>Current ID: 4</div>
+			<div>Name: d</div><div><button>a</button></div><div><button>b</button></div><div><button>c</button></div><div><button>d</button></div><hr><div>
+			<button>Show / Hide</button></div></main>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-disconnect/main.svelte b/packages/svelte/tests/runtime-runes/samples/derived-disconnect/main.svelte
new file mode 100644
index 0000000000..8cb6ed2afd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-disconnect/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	const items = [
+		{ id: 1, name: "a" },
+		{ id: 2, name: "b" },
+		{ id: 3, name: "c" },
+		{ id: 4, name: "d" },
+	];
+	let currentId = $state(1);
+	let currentItem = $derived(items.find(item => item.id === currentId));
+	let visible = $state(true);
+</script>
+
+<main>
+	{#if visible}
+		<div>Current ID: {currentId}</div>
+		<div>Name: {currentItem.name}</div>
+		{#each items as item}
+			<div><button onclick={() => { currentId = item.id; }}>{item.name}</button></div>
+		{/each}
+	{/if}
+	<hr>
+	<div><button onclick={() => { visible = !visible; }}>Show / Hide</button></div>
+</main>
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-in-expression/_config.js b/packages/svelte/tests/runtime-runes/samples/derived-in-expression/_config.js
new file mode 100644
index 0000000000..73428e0ff2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-in-expression/_config.js
@@ -0,0 +1,74 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	// In non-async mode we're not reacting to deriveds read in the same context they're defined in
+	skip_no_async: true,
+	test({ assert, target, logs }) {
+		const [a, b] = target.querySelectorAll('button');
+
+		flushSync(() => a?.click());
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>a</button>
+				<button>b</button>
+				<p>1/0</p
+			`
+		);
+
+		flushSync(() => a?.click());
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>a</button>
+				<button>b</button>
+				<p>2/0</p
+			`
+		);
+
+		flushSync(() => b?.click());
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>a</button>
+				<button>b</button>
+				<p>2/1</p
+			`
+		);
+
+		flushSync(() => b?.click());
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>a</button>
+				<button>b</button>
+				<p>2/2</p
+			`
+		);
+
+		assert.deepEqual(logs, [
+			// init
+			'a',
+			'b',
+			'effect a',
+			'effect b',
+			// click a
+			'a',
+			'effect a',
+			// click a
+			'a',
+			'effect a',
+			// click b
+			'a',
+			'b',
+			'effect a',
+			'effect b',
+			// click b
+			'a',
+			'b',
+			'effect a',
+			'effect b'
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-in-expression/main.svelte b/packages/svelte/tests/runtime-runes/samples/derived-in-expression/main.svelte
new file mode 100644
index 0000000000..f3a8bbe472
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-in-expression/main.svelte
@@ -0,0 +1,30 @@
+<script>
+	let object = $state.raw({ a: 0, b: 0 });
+
+	function a() {
+		console.log('a');
+		return object.a;
+	}
+
+	function b() {
+		console.log('b');
+		let double = $derived(object.b)
+		return double;
+	}
+
+	$effect(() => {
+		object.a;
+		console.log('effect a');
+	})
+
+	$effect(() => {
+		const b = $derived(object.b);
+		b;
+		console.log('effect b');
+	})
+</script>
+
+<button onclick={() => object = { ...object, a: object.a + 1 }}>a</button>
+<button onclick={() => object = { ...object, b: object.b + 1 }}>b</button>
+
+<p>{a()}/{b()}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-name-shadowed/_config.js b/packages/svelte/tests/runtime-runes/samples/derived-name-shadowed/_config.js
new file mode 100644
index 0000000000..8adc6cdae5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-name-shadowed/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: `42`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-name-shadowed/main.svelte b/packages/svelte/tests/runtime-runes/samples/derived-name-shadowed/main.svelte
new file mode 100644
index 0000000000..d780f80939
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-name-shadowed/main.svelte
@@ -0,0 +1,8 @@
+<script module>
+	function foo() {
+		const foo = $derived(42);
+		return () => foo;
+	}
+</script>
+
+{foo()()}
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-read-outside-reaction/_config.js b/packages/svelte/tests/runtime-runes/samples/derived-read-outside-reaction/_config.js
new file mode 100644
index 0000000000..f3a71b93e6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-read-outside-reaction/_config.js
@@ -0,0 +1,47 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>+1</button>
+		<button>add number</button>
+		<p>1, 2, 3</p>
+	`,
+
+	test({ assert, target }) {
+		const [button1, button2] = target.querySelectorAll('button');
+
+		button1.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>+1</button>
+				<button>add number</button>
+				<p>2, 4, 6</p>
+			`
+		);
+
+		button2.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>+1</button>
+				<button>add number</button>
+				<p>2, 4, 6, 8</p>
+			`
+		);
+
+		button1.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>+1</button>
+				<button>add number</button>
+				<p>3, 6, 9, 12</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-read-outside-reaction/main.svelte b/packages/svelte/tests/runtime-runes/samples/derived-read-outside-reaction/main.svelte
new file mode 100644
index 0000000000..0b5096dfa4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-read-outside-reaction/main.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	class Item {
+		product: number;
+
+		constructor(n: number) {
+			this.product = $derived(multiplier * n);
+		}
+	}
+
+	let numbers = $state([1, 2, 3]);
+	let multiplier = $state(1);
+
+	let items = $derived(numbers.map((n) => new Item(n)))
+	let products = $derived(items.map(item => item.product));
+</script>
+
+<button onclick={() => {
+	multiplier += 1;
+}}>+1</button>
+
+<button onclick={() => {
+	numbers.push(numbers.length + 1);
+
+	// this is load-bearing — by reading it outside a reaction, we recompute
+	// `products`, removing it as a reaction from `Item.product` dependencies,
+	// but we don't add it as a reaction to the new `Item.product` dependencies
+	products;
+}}>add number</button>
+
+<p>{products.join(', ')}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-rest-includes-symbol/_config.js b/packages/svelte/tests/runtime-runes/samples/derived-rest-includes-symbol/_config.js
new file mode 100644
index 0000000000..d0633983d2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-rest-includes-symbol/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<p>true false</p>`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-rest-includes-symbol/main.svelte b/packages/svelte/tests/runtime-runes/samples/derived-rest-includes-symbol/main.svelte
new file mode 100644
index 0000000000..2454e98ab7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-rest-includes-symbol/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	const symbol1 = Symbol();
+	const symbol2 = Symbol();
+
+	let a = { [symbol1]: 42 };
+	Object.defineProperty(a, symbol2, { enumerable: false, value: "nope" })
+
+	let { ...b } = $derived(a);
+</script>
+
+<p>{symbol1 in b} {symbol2 in b}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-server-memoization/_config.js b/packages/svelte/tests/runtime-runes/samples/derived-server-memoization/_config.js
new file mode 100644
index 0000000000..4525e1ea81
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-server-memoization/_config.js
@@ -0,0 +1,11 @@
+import { test } from '../../test';
+
+export default test({
+	test_ssr({ assert, logs }) {
+		assert.deepEqual(logs, [0, 2, { count: 2 }, 0, 0, { local_count: 1 }]);
+	},
+
+	test({ assert, logs }) {
+		assert.deepEqual(logs, [0, 2, { count: 2 }, 0, 0, { local_count: 1 }]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-server-memoization/main.svelte b/packages/svelte/tests/runtime-runes/samples/derived-server-memoization/main.svelte
new file mode 100644
index 0000000000..b291707849
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-server-memoization/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	import { reset, increment, get, count } from './state.svelte.js';
+
+	reset();
+	console.log(get());
+	increment();
+	console.log(get());
+	console.log({ count });
+
+	let local_count = 0;
+
+	let s = $state(0);
+	let d = $derived.by(() => {
+		local_count += 1;
+		return s * 2;
+	});
+
+	console.log(d);
+	console.log(d);
+	console.log({ local_count });
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-server-memoization/state.svelte.js b/packages/svelte/tests/runtime-runes/samples/derived-server-memoization/state.svelte.js
new file mode 100644
index 0000000000..df8f6f4795
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-server-memoization/state.svelte.js
@@ -0,0 +1,20 @@
+let s = $state(0);
+let d = $derived.by(() => {
+	count += 1;
+	return s * 2;
+});
+
+export let count = 0;
+
+export function reset() {
+	count = 0;
+	s = 0;
+}
+
+export function increment() {
+	s += 1;
+}
+
+export function get() {
+	return d;
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-unowned-11/Child.svelte b/packages/svelte/tests/runtime-runes/samples/derived-unowned-11/Child.svelte
new file mode 100644
index 0000000000..cd215304a3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-unowned-11/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	let { value = $bindable() } = $props()
+</script>
+
+<button onclick={() => value = 'a'}>change</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-unowned-11/Child2.svelte b/packages/svelte/tests/runtime-runes/samples/derived-unowned-11/Child2.svelte
new file mode 100644
index 0000000000..a1d9f93bec
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-unowned-11/Child2.svelte
@@ -0,0 +1,5 @@
+<script>
+	let {disabled = false} = $props()
+</script>
+
+{disabled}
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-unowned-11/_config.js b/packages/svelte/tests/runtime-runes/samples/derived-unowned-11/_config.js
new file mode 100644
index 0000000000..9948f91966
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-unowned-11/_config.js
@@ -0,0 +1,16 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		let [btn1, btn2] = target.querySelectorAll('button');
+
+		btn1?.click();
+		flushSync();
+
+		btn2?.click();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<button>change</button><button>change</button>\nfalse`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-unowned-11/main.svelte b/packages/svelte/tests/runtime-runes/samples/derived-unowned-11/main.svelte
new file mode 100644
index 0000000000..0219acdf7f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-unowned-11/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Child2 from './Child2.svelte'
+	import Child from './Child.svelte'
+	let loginname = $state('')
+	let password = $state('')
+</script>
+
+<Child bind:value={loginname} />
+<Child bind:value={password} />
+<Child2 disabled={!loginname || !password} />
+
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-unowned-12/_config.js b/packages/svelte/tests/runtime-runes/samples/derived-unowned-12/_config.js
new file mode 100644
index 0000000000..8cd4af0548
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-unowned-12/_config.js
@@ -0,0 +1,25 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		let [btn1, btn2] = target.querySelectorAll('button');
+
+		btn1?.click();
+		flushSync();
+
+		btn2?.click();
+		flushSync();
+
+		btn1?.click();
+		flushSync();
+
+		btn1?.click();
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>linked.current</button>\n3\n<button>count</button>\n1`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-unowned-12/main.svelte b/packages/svelte/tests/runtime-runes/samples/derived-unowned-12/main.svelte
new file mode 100644
index 0000000000..48d4f5fd0b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-unowned-12/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	import { untrack } from 'svelte';
+
+	let count = $state(0);
+	let state = $state({current: count});
+
+	let linked = $derived.by(() => {
+		count;
+
+		untrack(() => state.current = count);
+		return untrack(() => state);
+	});
+
+	linked.current++;
+</script>
+
+<button onclick={() => linked.current++}>linked.current</button> {linked.current}
+<button onclick={() => count++}>count</button> {count}
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-unowned-2/_config.js b/packages/svelte/tests/runtime-runes/samples/derived-unowned-2/_config.js
index 3604000543..3ca98bb0c6 100644
--- a/packages/svelte/tests/runtime-runes/samples/derived-unowned-2/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/derived-unowned-2/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
@@ -7,7 +8,7 @@ export default test({
 
 	async test({ assert, target }) {
 		await Promise.resolve();
-		await Promise.resolve();
+		flushSync();
 		assert.htmlEqual(
 			target.innerHTML,
 			'<div>d2: 3,4,5</div><div>d3: 3,4,5</div><div>d4: 3,4,5</div>'
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-unowned-5/_config.js b/packages/svelte/tests/runtime-runes/samples/derived-unowned-5/_config.js
index 20c3cc112e..5f38394d06 100644
--- a/packages/svelte/tests/runtime-runes/samples/derived-unowned-5/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/derived-unowned-5/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
@@ -5,7 +6,7 @@ export default test({
 		// The test has a bunch of queueMicrotasks
 		await Promise.resolve();
 		await Promise.resolve();
-		await Promise.resolve();
+		flushSync();
 
 		assert.htmlEqual(target.innerHTML, `<div>Zeeba Neighba</div>`);
 	}
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-update-server/_config.js b/packages/svelte/tests/runtime-runes/samples/derived-update-server/_config.js
new file mode 100644
index 0000000000..b819023a7c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-update-server/_config.js
@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['async-server', 'server'],
+	html: '<p>postfix: 0, postfix_minus: 1, prefix: 1, prefix_minus: 0, count: 0</p><p>postfix_n: 0, postfix_minus_n: 1, prefix_n: 1, prefix_minus_n: 0, count_n: 0</p>'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-update-server/main.svelte b/packages/svelte/tests/runtime-runes/samples/derived-update-server/main.svelte
new file mode 100644
index 0000000000..04c5ee1b8c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-update-server/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	let count = $derived(0);
+	let postfix = count++;
+	let postfix_minus = count--;
+	let prefix = ++count;
+	let prefix_minus = --count;
+
+	let count_n = $derived(0n);
+	let postfix_n = count_n++;
+	let postfix_minus_n = count_n--;
+	let prefix_n = ++count_n;
+	let prefix_minus_n = --count_n;
+</script>
+
+<p>postfix: {postfix}, postfix_minus: {postfix_minus}, prefix: {prefix}, prefix_minus: {prefix_minus}, count: {count}</p>
+<p>postfix_n: {postfix_n}, postfix_minus_n: {postfix_minus_n}, prefix_n: {prefix_n}, prefix_minus_n: {prefix_minus_n}, count_n: {count_n}</p>
+
diff --git a/packages/svelte/tests/runtime-runes/samples/deriveds-in-constructor/_config.js b/packages/svelte/tests/runtime-runes/samples/deriveds-in-constructor/_config.js
new file mode 100644
index 0000000000..b364a989f4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/deriveds-in-constructor/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<p>state,derived state,derived.by derived state</p>`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/deriveds-in-constructor/main.svelte b/packages/svelte/tests/runtime-runes/samples/deriveds-in-constructor/main.svelte
new file mode 100644
index 0000000000..bc8efba7e7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/deriveds-in-constructor/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	class Foo {
+		#state = $state('state')
+		#derived = $derived('derived ' + this.#state);
+		#derivedBy = $derived.by(() => {
+			return 'derived.by ' + this.#derived 
+		});
+		
+		initial
+		
+		constructor() {
+			this.initial = [this.#state, this.#derived, this.#derivedBy]
+		}
+	}
+	const foo = new Foo()
+</script>
+
+<p>{foo.initial}</p>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/destructure-state-from-props/Child.svelte b/packages/svelte/tests/runtime-runes/samples/destructure-state-from-props/Child.svelte
new file mode 100644
index 0000000000..0996a02b60
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/destructure-state-from-props/Child.svelte
@@ -0,0 +1,6 @@
+<script>
+	let { data } = $props();
+	let { foo } = $state(data);
+</script>
+
+{foo}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/destructure-state-from-props/_config.js b/packages/svelte/tests/runtime-runes/samples/destructure-state-from-props/_config.js
new file mode 100644
index 0000000000..345654535b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/destructure-state-from-props/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: `bar`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/destructure-state-from-props/main.svelte b/packages/svelte/tests/runtime-runes/samples/destructure-state-from-props/main.svelte
new file mode 100644
index 0000000000..518f733144
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/destructure-state-from-props/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<Child data={{ foo: 'bar' }} />
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-component-css-props/Component.svelte b/packages/svelte/tests/runtime-runes/samples/dynamic-component-css-props/Component.svelte
new file mode 100644
index 0000000000..57add17179
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-component-css-props/Component.svelte
@@ -0,0 +1,7 @@
+<div>Hello</div>
+
+<style>
+	div {
+		color: var(--color);
+	}
+</style>
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-component-css-props/_config.js b/packages/svelte/tests/runtime-runes/samples/dynamic-component-css-props/_config.js
new file mode 100644
index 0000000000..3078392055
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-component-css-props/_config.js
@@ -0,0 +1,10 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`<svelte-css-wrapper style="display: contents; --color: red;"><div class="svelte-lsmn3l">Hello</div></svelte-css-wrapper>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-component-css-props/main.svelte b/packages/svelte/tests/runtime-runes/samples/dynamic-component-css-props/main.svelte
new file mode 100644
index 0000000000..80aec26eef
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-component-css-props/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	import Component from './Component.svelte';
+	let Comp = Component;
+</script>
+
+<svelte:component this={Comp} --color="red" />
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-component-falsy-hydrate/HelloWorld.svelte b/packages/svelte/tests/runtime-runes/samples/dynamic-component-falsy-hydrate/HelloWorld.svelte
new file mode 100644
index 0000000000..52ea02c559
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-component-falsy-hydrate/HelloWorld.svelte
@@ -0,0 +1 @@
+<div>Hello world</div>
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-component-falsy-hydrate/_config.js b/packages/svelte/tests/runtime-runes/samples/dynamic-component-falsy-hydrate/_config.js
new file mode 100644
index 0000000000..90dae38ad8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-component-falsy-hydrate/_config.js
@@ -0,0 +1,9 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<h1>Test</h1> <div>Hello world</div>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-component-falsy-hydrate/main.svelte b/packages/svelte/tests/runtime-runes/samples/dynamic-component-falsy-hydrate/main.svelte
new file mode 100644
index 0000000000..8a410da609
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-component-falsy-hydrate/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import HelloWorld from './HelloWorld.svelte';
+
+	let Component = $state();
+
+	$effect.pre(() => {
+		Component = HelloWorld;
+	});
+</script>
+
+<h1>Test</h1>
+
+<Component />
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-component-member/Icon.svelte b/packages/svelte/tests/runtime-runes/samples/dynamic-component-member/Icon.svelte
new file mode 100644
index 0000000000..77cdcabaf7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-component-member/Icon.svelte
@@ -0,0 +1 @@
+<span>x</span>
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-component-member/_config.js b/packages/svelte/tests/runtime-runes/samples/dynamic-component-member/_config.js
new file mode 100644
index 0000000000..22412de14d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-component-member/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['client', 'server'],
+
+	html: `<span>x</span>`,
+	ssrHtml: `<span>x</span>`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-component-member/main.svelte b/packages/svelte/tests/runtime-runes/samples/dynamic-component-member/main.svelte
new file mode 100644
index 0000000000..b0f95b2a31
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-component-member/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Icon from './Icon.svelte';
+
+	let icons = $state({ currency: { Icon } });
+	const platformIcons = $derived(icons);
+</script>
+
+<platformIcons.currency.Icon />
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/A.svelte b/packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/A.svelte
new file mode 100644
index 0000000000..d37c929273
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/A.svelte
@@ -0,0 +1,5 @@
+<script>
+	const { children } = $props()
+</script>
+
+{@render children()}
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/_config.js b/packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/_config.js
new file mode 100644
index 0000000000..cd1fa2b1b9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	async test({ assert, target }) {
+		assert.htmlEqual(target.innerHTML, 'test');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/main.svelte b/packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/main.svelte
new file mode 100644
index 0000000000..d0646b319b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-component-nested/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import A from './A.svelte';
+
+	const B = $derived(A);
+</script>
+
+<B>
+	<B>test</B>
+</B>
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-component-transition/_config.js b/packages/svelte/tests/runtime-runes/samples/dynamic-component-transition/_config.js
index 9c741d2b8c..19f0c38227 100644
--- a/packages/svelte/tests/runtime-runes/samples/dynamic-component-transition/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-component-transition/_config.js
@@ -5,7 +5,8 @@ export default test({
 	async test({ assert, target, raf }) {
 		const btn = target.querySelector('button');
 
-		raf.tick(0);
+		// one tick to not be at 0. Else the flushSync would revert the in-transition which hasn't started, and directly remove the button
+		raf.tick(1);
 
 		flushSync(() => {
 			btn?.click();
@@ -13,7 +14,7 @@ export default test({
 
 		assert.htmlEqual(target.innerHTML, `<h1>Outside</h1><button style="opacity: 0;">Hide</button>`);
 
-		raf.tick(100);
+		raf.tick(101);
 
 		assert.htmlEqual(target.innerHTML, `<h1>Outside</h1>`);
 	}
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-if-component-transition/_config.js b/packages/svelte/tests/runtime-runes/samples/dynamic-if-component-transition/_config.js
index 9c741d2b8c..19f0c38227 100644
--- a/packages/svelte/tests/runtime-runes/samples/dynamic-if-component-transition/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-if-component-transition/_config.js
@@ -5,7 +5,8 @@ export default test({
 	async test({ assert, target, raf }) {
 		const btn = target.querySelector('button');
 
-		raf.tick(0);
+		// one tick to not be at 0. Else the flushSync would revert the in-transition which hasn't started, and directly remove the button
+		raf.tick(1);
 
 		flushSync(() => {
 			btn?.click();
@@ -13,7 +14,7 @@ export default test({
 
 		assert.htmlEqual(target.innerHTML, `<h1>Outside</h1><button style="opacity: 0;">Hide</button>`);
 
-		raf.tick(100);
+		raf.tick(101);
 
 		assert.htmlEqual(target.innerHTML, `<h1>Outside</h1>`);
 	}
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-style-attr/_config.js b/packages/svelte/tests/runtime-runes/samples/dynamic-style-attr/_config.js
index f682972179..20092ddadf 100644
--- a/packages/svelte/tests/runtime-runes/samples/dynamic-style-attr/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-style-attr/_config.js
@@ -2,7 +2,7 @@ import { test } from '../../test';
 import { flushSync } from 'svelte';
 
 export default test({
-	html: `<div style="background-color: red">Hello world</div><button>Make blue</button`,
+	html: `<div style="background-color: red;">Hello world</div><button>Make blue</button`,
 
 	async test({ assert, target, component }) {
 		const [b1] = target.querySelectorAll('button');
@@ -11,7 +11,7 @@ export default test({
 		});
 		assert.htmlEqual(
 			target.innerHTML,
-			`<div style="background-color: blue">Hello world</div><button>Make blue</button`
+			`<div style="background-color: blue;">Hello world</div><button>Make blue</button`
 		);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-style-attr/main.svelte b/packages/svelte/tests/runtime-runes/samples/dynamic-style-attr/main.svelte
index f39c691ba3..59c8b0c567 100644
--- a/packages/svelte/tests/runtime-runes/samples/dynamic-style-attr/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-style-attr/main.svelte
@@ -4,6 +4,6 @@
 	const getColor = () => color;
 </script>
 
-<div style="background-color: {getColor()}">Hello world</div>
+<div style="background-color: {getColor()};">Hello world</div>
 
 <button onclick={() => color = 'blue'}>Make blue</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-global-2/_config.js b/packages/svelte/tests/runtime-runes/samples/each-bind-store-no-warning/_config.js
similarity index 99%
rename from packages/svelte/tests/runtime-runes/samples/non-local-mutation-global-2/_config.js
rename to packages/svelte/tests/runtime-runes/samples/each-bind-store-no-warning/_config.js
index b4864154c3..dba2e85650 100644
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-global-2/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/each-bind-store-no-warning/_config.js
@@ -4,7 +4,6 @@ export default test({
 	compileOptions: {
 		dev: true
 	},
-
 	async test({ assert, warnings }) {
 		assert.deepEqual(warnings, []);
 	}
diff --git a/packages/svelte/tests/runtime-runes/samples/each-bind-store-no-warning/main.svelte b/packages/svelte/tests/runtime-runes/samples/each-bind-store-no-warning/main.svelte
new file mode 100644
index 0000000000..f927bf079a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-bind-store-no-warning/main.svelte
@@ -0,0 +1,10 @@
+<svelte:options runes />
+<script>
+	import { writable } from 'svelte/store';
+
+	const array = writable([{ name: "" }]);
+</script>
+
+{#each $array as item}
+	<div><input bind:value={item.name} /></div>
+{/each}
diff --git a/packages/svelte/tests/runtime-runes/samples/each-effect-linking/_config.js b/packages/svelte/tests/runtime-runes/samples/each-effect-linking/_config.js
new file mode 100644
index 0000000000..d1c23527a9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-effect-linking/_config.js
@@ -0,0 +1,32 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [step_back, step_forward, jump_back, jump_forward] = target.querySelectorAll('button');
+		const [div] = target.querySelectorAll('div');
+
+		step_back.click();
+		await tick();
+
+		step_forward.click();
+		await tick();
+
+		step_forward.click();
+		await tick();
+
+		// if the effects get linked in a circle, we will never get here
+		assert.htmlEqual(div.innerHTML, '<p>5</p><p>6</p><p>7</p>');
+
+		jump_forward.click();
+		await tick();
+
+		step_forward.click();
+		await tick();
+
+		step_forward.click();
+		await tick();
+
+		assert.htmlEqual(div.innerHTML, '<p>12</p><p>13</p><p>14</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/each-effect-linking/main.svelte b/packages/svelte/tests/runtime-runes/samples/each-effect-linking/main.svelte
new file mode 100644
index 0000000000..ea33b11e22
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-effect-linking/main.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	let items = $state([4, 5, 6]);
+</script>
+
+<button onclick={() => {
+	items = items.map((n) => n - 1);
+}}>
+	step back
+</button>
+
+<button onclick={() => {
+	items = items.map((n) => n + 1);
+}}>
+	step forward
+</button>
+
+<button onclick={() => {
+	items = items.map((n) => n - 5);
+}}>
+	jump back
+</button>
+
+<button onclick={() => {
+	items = items.map((n) => n + 5);
+}}>
+	jump forward
+</button>
+
+<div>
+	{#each items as item (item)}
+		<p>{item}</p>
+	{/each}
+</div>
diff --git a/packages/svelte/tests/runtime-runes/samples/each-key-volatile/_config.js b/packages/svelte/tests/runtime-runes/samples/each-key-volatile/_config.js
new file mode 100644
index 0000000000..87d4bf45c7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-key-volatile/_config.js
@@ -0,0 +1,11 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	mode: ['client'],
+
+	error: 'each_key_volatile'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/each-key-volatile/main.svelte b/packages/svelte/tests/runtime-runes/samples/each-key-volatile/main.svelte
new file mode 100644
index 0000000000..689c257cfa
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-key-volatile/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	let things = $state([
+		{ group: 'a', id: 1 },
+		{ group: 'b', id: 2 }
+	]);
+</script>
+
+{#each things as thing ([thing.group, thing.id])}
+	<p>{thing.group}-{thing.id}</p>
+{/each}
diff --git a/packages/svelte/tests/runtime-runes/samples/each-non-branch-effects/_config.js b/packages/svelte/tests/runtime-runes/samples/each-non-branch-effects/_config.js
new file mode 100644
index 0000000000..acf84f6809
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-non-branch-effects/_config.js
@@ -0,0 +1,43 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const addBtn = /** @type {HTMLElement} */ (target.querySelector('button.add'));
+		const removeBtn = /** @type {HTMLElement} */ (target.querySelector('button.remove'));
+
+		const btnHtml = '<button class="add">add</button><button class="remove">remove</button>';
+
+		assert.htmlEqual(target.innerHTML, btnHtml);
+
+		addBtn.click();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<span>1</span>${btnHtml}`);
+
+		addBtn.click();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<span>1</span><span>2</span>${btnHtml}`);
+
+		addBtn.click();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<span>1</span><span>2</span><span>3</span>${btnHtml}`);
+
+		removeBtn.click();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<span>1</span><span>2</span>${btnHtml}`);
+
+		removeBtn.click();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<span>1</span>${btnHtml}`);
+
+		addBtn.click();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<span>1</span><span>2</span>${btnHtml}`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/each-non-branch-effects/main.svelte b/packages/svelte/tests/runtime-runes/samples/each-non-branch-effects/main.svelte
new file mode 100644
index 0000000000..7869d095dd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-non-branch-effects/main.svelte
@@ -0,0 +1,30 @@
+<script>
+	let items = $state([]);
+
+	const proxy = new Proxy(items, {
+		get: (target, prop) => {
+			try {
+				$effect.pre(() => {
+					return () => {};
+				});
+			} catch {}
+
+			return Reflect.get(target, prop);
+		}
+	});
+
+	function add() {
+		items.push(items.length + 1);
+	}
+
+	function remove() {
+		items.pop();
+	}
+</script>
+
+{#each proxy as item}
+	<span>{item}</span>
+{/each}
+
+<button class="add" onclick={add}>add</button>
+<button class="remove" onclick={remove}>remove</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/each-updates-10/_config.js b/packages/svelte/tests/runtime-runes/samples/each-updates-10/_config.js
new file mode 100644
index 0000000000..d5c9e36f1d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-updates-10/_config.js
@@ -0,0 +1,51 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [add, adjust] = target.querySelectorAll('button');
+
+		add.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>add</button> <button>adjust</button>
+			<h2>Keyed</h2>
+			<div>Item: 1. Index: 0</div>
+			<div>Item: 0. Index: 1</div>
+			<h2>Unkeyed</h2>
+			<div>Item: 1. Index: 0</div>
+			<div>Item: 0. Index: 1</div>`
+		);
+
+		add.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>add</button> <button>adjust</button>
+			<h2>Keyed</h2>
+			<div>Item: 2. Index: 0</div>
+			<div>Item: 1. Index: 1</div>
+			<div>Item: 0. Index: 2</div>
+			<h2>Unkeyed</h2>
+			<div>Item: 2. Index: 0</div>
+			<div>Item: 1. Index: 1</div>
+			<div>Item: 0. Index: 2</div>`
+		);
+
+		adjust.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>add</button> <button>adjust</button>
+			<h2>Keyed</h2>
+			<div>Item: 2. Index: 0</div>
+			<div>Item: 1. Index: 1</div>
+			<div>Item: 10. Index: 2</div>
+			<h2>Unkeyed</h2>
+			<div>Item: 2. Index: 0</div>
+			<div>Item: 1. Index: 1</div>
+			<div>Item: 10. Index: 2</div>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/each-updates-10/main.svelte b/packages/svelte/tests/runtime-runes/samples/each-updates-10/main.svelte
new file mode 100644
index 0000000000..20ce8279de
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-updates-10/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	const items = $state([{ t: 0 }]);
+</script>
+
+<button onclick={() => items.unshift({t:items.length})}>add</button>
+<button onclick={() => items.at(-1).t = 10}>adjust</button>
+ 
+<h2>Keyed</h2>
+{#each items as item, index (item)}
+	<div>Item: {item.t}. Index: {index}</div>
+{/each}
+
+<h2>Unkeyed</h2>
+{#each items as item, index}
+	<div>Item: {item.t}. Index: {index}</div>
+{/each}
diff --git a/packages/svelte/tests/runtime-runes/samples/each-updates-11/_config.js b/packages/svelte/tests/runtime-runes/samples/each-updates-11/_config.js
new file mode 100644
index 0000000000..a8782d2da8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-updates-11/_config.js
@@ -0,0 +1,32 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [add4, add5, modify3] = target.querySelectorAll('button');
+
+		add4.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>add 4</button> <button>add 5</button> <button>modify 3</button>
+			1423`
+		);
+
+		add5.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>add 4</button> <button>add 5</button> <button>modify 3</button>
+			14523`
+		);
+
+		modify3.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>add 4</button> <button>add 5</button> <button>modify 3</button>
+			1452updated`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/each-updates-11/main.svelte b/packages/svelte/tests/runtime-runes/samples/each-updates-11/main.svelte
new file mode 100644
index 0000000000..1dcd265093
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-updates-11/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	let list = $state([{ id: 1, text: '1' }, { id: 2, text: '2' }, { id: 3, text: '3' }]);
+</script>
+
+<button onclick={() => list = [list[0], { id: 4, text: '4' }, ...list.slice(1)]}>add 4</button>
+<button onclick={() => list = [list[0], list[1], { id: 5, text: '5' }, ...list.slice(2)]}>add 5</button>
+<button onclick={() => list.at(-1).text = 'updated'}>modify 3</button>
+
+{#each list as item (item.id)}
+	{item.text}
+{/each}
diff --git a/packages/svelte/tests/runtime-runes/samples/each-updates-12/_config.js b/packages/svelte/tests/runtime-runes/samples/each-updates-12/_config.js
new file mode 100644
index 0000000000..1fee8ceb67
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-updates-12/_config.js
@@ -0,0 +1,33 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, raf }) {
+		const [clear, push] = target.querySelectorAll('button');
+
+		flushSync(() => clear.click());
+		flushSync(() => push.click());
+		raf.tick(500);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>clear</button>
+				<button>push</button>
+				<span style="opacity: 1;">1</span>
+				<span style="opacity: 0.5;">2</span>
+			`
+		);
+
+		raf.tick(1000);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>clear</button>
+				<button>push</button>
+				<span style="opacity: 1;">1</span>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/each-updates-12/main.svelte b/packages/svelte/tests/runtime-runes/samples/each-updates-12/main.svelte
new file mode 100644
index 0000000000..a65ebd37a8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-updates-12/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	function fade(node) {
+		return {
+			duration: 1000,
+			tick(t) {
+				node.style.opacity = t;
+			}
+		}
+	}
+
+	let items = $state([1, 2]);
+</script>
+
+<button onclick={() => items = []}>clear</button>
+<button onclick={() => items.push(items.length + 1)}>push</button>
+
+{#each items as item}
+	<span transition:fade={{duration: 1000}}>{item}</span>
+{/each}
diff --git a/packages/svelte/tests/runtime-runes/samples/each-updates-13/_config.js b/packages/svelte/tests/runtime-runes/samples/each-updates-13/_config.js
new file mode 100644
index 0000000000..fdf02e486c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-updates-13/_config.js
@@ -0,0 +1,23 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, raf }) {
+		const [clear, reverse] = target.querySelectorAll('button');
+
+		flushSync(() => clear.click());
+		flushSync(() => reverse.click());
+		raf.tick(1);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>clear</button>
+				<button>reverse</button>
+				<span style="opacity: 1;">c</span>
+				<span style="opacity: 1;">b</span>
+				<span style="opacity: 1;">a</span>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/each-updates-13/main.svelte b/packages/svelte/tests/runtime-runes/samples/each-updates-13/main.svelte
new file mode 100644
index 0000000000..3de3382419
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-updates-13/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	function fade(node) {
+		return {
+			duration: 1000,
+			tick(t) {
+				node.style.opacity = t;
+			}
+		}
+	}
+
+	let items = $state(['a', 'b', 'c']);
+</script>
+
+<button onclick={() => items = []}>clear</button>
+<button onclick={() => items = ['c', 'b', 'a']}>reverse</button>
+
+{#each items as item (item)}
+	<span transition:fade={{duration: 1000}}>{item}</span>
+{/each}
diff --git a/packages/svelte/tests/runtime-runes/samples/each-updates-9/_config.js b/packages/svelte/tests/runtime-runes/samples/each-updates-9/_config.js
new file mode 100644
index 0000000000..ee35058c59
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-updates-9/_config.js
@@ -0,0 +1,16 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [btn1] = target.querySelectorAll('button');
+
+		btn1.click();
+		flushSync();
+
+		await Promise.resolve();
+		await Promise.resolve();
+
+		assert.deepEqual(logs, ['cleanup']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/each-updates-9/main.svelte b/packages/svelte/tests/runtime-runes/samples/each-updates-9/main.svelte
new file mode 100644
index 0000000000..f5b2c8eb12
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-updates-9/main.svelte
@@ -0,0 +1,46 @@
+<script>
+	import { createSubscriber } from 'svelte/reactivity';
+
+	class MyStore {
+		#subscribe;
+		#data = $state([
+			['a', [1, 2]],
+			['b', [3, 4]]
+		]);
+		#id;
+
+		constructor(options) {
+			options?.someBoolean;
+			this.#id = options?.id;
+			this.#subscribe = createSubscriber(() => {
+				debugger
+				return () => {
+					console.log('cleanup');
+				};
+			});
+		}
+
+		get data() {
+			this.#subscribe();
+			return this.#data;
+		}
+		set data(v) {
+			this.#data = v;
+		}
+	}
+
+	let storeOptions = $state({
+		someBoolean: false,
+		id: 0
+	});
+
+	let myStore = $derived(new MyStore(storeOptions));
+</script>
+
+<button
+	onclick={() => {
+		storeOptions.someBoolean = !storeOptions.someBoolean;
+	}}>+</button
+>
+
+{#each myStore.data as _}{/each}
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 6a3d9eef77..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', 'cleanup 2', null, 'init 2', 'cleanup 4', null, 'init 4']);
+
+		// 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-in-pending-boundary/Child.svelte b/packages/svelte/tests/runtime-runes/samples/effect-in-pending-boundary/Child.svelte
new file mode 100644
index 0000000000..0f18e43e56
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-in-pending-boundary/Child.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	$effect(() => {
+		console.log('hello from child');
+	});
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-in-pending-boundary/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-in-pending-boundary/_config.js
new file mode 100644
index 0000000000..21575231ee
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-in-pending-boundary/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, logs }) {
+		assert.deepEqual(logs, ['hello from child']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-in-pending-boundary/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-in-pending-boundary/main.svelte
new file mode 100644
index 0000000000..c4c0ef23ab
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-in-pending-boundary/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<svelte:boundary>
+	<Child />
+
+	{#snippet pending()}
+		<p>Loading...</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-inside-derived-frozen/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-inside-derived-frozen/_config.js
new file mode 100644
index 0000000000..fe87a9a89f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-inside-derived-frozen/_config.js
@@ -0,0 +1,42 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, logs }) {
+		const [toggle, run] = target.querySelectorAll('button');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>toggle</button><button>run</button><p>hello: 0</p>'
+		);
+
+		flushSync(() => run.click());
+		assert.deepEqual(logs, []);
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>toggle</button><button>run</button><p>hello: 1</p>'
+		);
+
+		flushSync(() => toggle.click());
+		assert.deepEqual(logs, ['aborted']);
+		assert.htmlEqual(target.innerHTML, '<button>toggle</button><button>run</button>');
+
+		flushSync(() => run.click());
+		flushSync(() => run.click());
+		flushSync(() => run.click());
+
+		flushSync(() => toggle.click());
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>toggle</button><button>run</button><p>hello: 1</p>'
+		);
+
+		flushSync(() => run.click());
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>toggle</button><button>run</button><p>hello: 2</p>'
+		);
+
+		assert.deepEqual(logs, ['aborted']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-inside-derived-frozen/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-inside-derived-frozen/main.svelte
new file mode 100644
index 0000000000..1796c99a78
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-inside-derived-frozen/main.svelte
@@ -0,0 +1,53 @@
+<script>
+	import { getAbortSignal } from 'svelte';
+
+	const callbacks = new Map();
+
+	// similar semantics to setInterval, but simpler to test
+	function add(fn) {
+		const id = crypto.randomUUID();
+		callbacks.set(id, fn);
+		return id;
+	}
+
+	function remove(id) {
+		callbacks.delete(id);
+	}
+
+	function run() {
+		for (const fn of callbacks.values()) {
+			fn();
+		}
+	}
+
+	class Timer {
+		constructor(text) {
+			this.elapsed = $state(0);
+			this.text = $derived(text + ': ' + this.elapsed);
+
+			$effect(() => {
+				const id = add(() => {
+					this.elapsed += 1;
+				});
+
+				getAbortSignal().onabort = () => {
+					console.log('aborted');
+				};
+
+				return () => remove(id);
+			});
+		}
+
+	}
+
+	let timer = $derived(new Timer('hello'));
+
+	let visible = $state(true);
+</script>
+
+<button onclick={() => visible = !visible}>toggle</button>
+<button onclick={run}>run</button>
+
+{#if visible}
+	<p>{timer.text}</p>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-loop-3/Child.svelte b/packages/svelte/tests/runtime-runes/samples/effect-loop-3/Child.svelte
new file mode 100644
index 0000000000..9bf4db52d6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-loop-3/Child.svelte
@@ -0,0 +1,13 @@
+<script>
+	let { children } = $props();
+
+	let inited = $state(false);
+
+	$effect(() => {
+		inited = true;
+	});
+</script>
+
+{#if inited}
+	<span>{@render children()}</span>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-loop-3/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-loop-3/_config.js
new file mode 100644
index 0000000000..046c190432
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-loop-3/_config.js
@@ -0,0 +1,12 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [button] = target.querySelectorAll('button');
+
+		assert.doesNotThrow(() => {
+			flushSync(() => button.click());
+		});
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-loop-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-loop-3/main.svelte
new file mode 100644
index 0000000000..2b3a171798
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-loop-3/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Child from './Child.svelte';
+
+	let show = $state(false);
+</script>
+
+<button onclick={() => show = !show}>
+	toggle
+</button>
+
+{#if show}
+	{#each { length: 1234 } as i}
+		<Child>{i}</Child>
+	{/each}
+{/if}
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..44cf5b09e2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-loop-infinite/_config.js
@@ -0,0 +1,22 @@
+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');
+
+		assert.throws(() => {
+			flushSync(() => button.click());
+		}, /effect_update_depth_exceeded/);
+
+		assert.equal(errors.length, 1);
+
+		assert.doesNotThrow(flushSync);
+	}
+});
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/effect-order-6/A.svelte b/packages/svelte/tests/runtime-runes/samples/effect-order-6/A.svelte
new file mode 100644
index 0000000000..22b8ed0f20
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-order-6/A.svelte
@@ -0,0 +1,12 @@
+<script>
+	import B from './B.svelte';
+
+	let { boolean, closed, close } = $props();
+
+	// this runs after the effect in B, because child effects run first
+	$effect(() => {
+		console.log({ boolean, closed });
+	});
+</script>
+
+<B {closed} {close} />
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-order-6/B.svelte b/packages/svelte/tests/runtime-runes/samples/effect-order-6/B.svelte
new file mode 100644
index 0000000000..2233961177
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-order-6/B.svelte
@@ -0,0 +1,7 @@
+<script>
+	let { closed, close } = $props();
+
+	$effect(() => {
+		if (closed) close();
+	});
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-order-6/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-order-6/_config.js
new file mode 100644
index 0000000000..91e1569e46
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-order-6/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [open, close] = target.querySelectorAll('button');
+
+		flushSync(() => open.click());
+		flushSync(() => close.click());
+
+		assert.deepEqual(logs, [{ boolean: true, closed: false }]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-order-6/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-order-6/main.svelte
new file mode 100644
index 0000000000..08f6fc48da
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-order-6/main.svelte
@@ -0,0 +1,29 @@
+<script>
+	import A from './A.svelte';
+
+	let object = $state();
+
+	function open() {
+		object = { boolean: true };
+	}
+
+	function close() {
+		object = undefined;
+	}
+
+	let closed = $state(false);
+</script>
+
+<button onclick={open}>
+	open
+</button>
+
+<button onclick={() => closed = true}>
+	close
+</button>
+
+<hr>
+
+{#if object}
+	<A {closed} {close} boolean={object.boolean} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-order-7/A.svelte b/packages/svelte/tests/runtime-runes/samples/effect-order-7/A.svelte
new file mode 100644
index 0000000000..b55c8f4115
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-order-7/A.svelte
@@ -0,0 +1,9 @@
+<script>
+	import B from './B.svelte';
+
+	let { boolean, closed, close } = $props();
+</script>
+
+<span>{boolean} {closed}</span>
+
+<B {closed} {close} />
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-order-7/B.svelte b/packages/svelte/tests/runtime-runes/samples/effect-order-7/B.svelte
new file mode 100644
index 0000000000..7b33c342f5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-order-7/B.svelte
@@ -0,0 +1,7 @@
+<script>
+	let { closed, close } = $props();
+
+	$effect.pre(() => {
+		if (closed) close();
+	});
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-order-7/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-order-7/_config.js
new file mode 100644
index 0000000000..f0a9c2e867
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-order-7/_config.js
@@ -0,0 +1,19 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	// For this to work in non-async mode, we would need to abort
+	// inside `#traverse_effect_tree`, which would be very
+	// complicated and annoying. Since this hasn't been
+	// a real issue (AFAICT), we ignore it
+	skip_no_async: true,
+
+	async test({ target }) {
+		const [open, close] = target.querySelectorAll('button');
+
+		flushSync(() => open.click());
+
+		// if the effect queue isn't aborted after the state change, this will throw
+		flushSync(() => close.click());
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-order-7/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-order-7/main.svelte
new file mode 100644
index 0000000000..d9e9eb17ad
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-order-7/main.svelte
@@ -0,0 +1,29 @@
+<script>
+	import A from './A.svelte';
+
+	let object = $state();
+
+	function open() {
+		object = { boolean: true };
+	}
+
+	function close() {
+		object = undefined;
+	}
+
+	let closed = $state(false);
+</script>
+
+<button onclick={open}>
+	open
+</button>
+
+<button onclick={() => closed = true}>
+	close
+</button>
+
+<hr>
+
+{#if object}
+	<A {close} {closed} boolean={object.boolean} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-root-5/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-root-5/_config.js
new file mode 100644
index 0000000000..260c757e3d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-root-5/_config.js
@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [b1, b2] = target.querySelectorAll('button');
+
+		flushSync(() => b1.click());
+		assert.deepEqual(logs, [0, 1]);
+
+		flushSync(() => b1.click());
+		assert.deepEqual(logs, [0, 1, 2]);
+
+		flushSync(() => b2.click());
+		assert.deepEqual(logs, [0, 1, 2]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-root-5/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-root-5/main.svelte
new file mode 100644
index 0000000000..06655a5362
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-root-5/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	let obj = $state({ count: 0 });
+
+	$effect.root(() => {
+		let teardown;
+
+		$effect.pre(() => {
+			if (obj) {
+				teardown ??= $effect.root(() => {
+					$effect.pre(() => {
+						console.log(obj.count);
+					});
+				});
+			} else {
+				teardown?.();
+				teardown = null;
+			}
+		});
+	});
+</script>
+
+<button onclick={() => ((obj ??= { count: 0 }).count += 1)}>+1</button>
+<button onclick={() => (obj = null)}>null</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-root-6/Child.svelte b/packages/svelte/tests/runtime-runes/samples/effect-root-6/Child.svelte
new file mode 100644
index 0000000000..110ad82b0d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-root-6/Child.svelte
@@ -0,0 +1,14 @@
+<script>
+	export function increment() {
+		inc();
+	}
+	let inc;
+	$effect.root(() => {
+		let count = $state(0);
+		let double = $derived(count * 2);
+		inc = () => {
+			count++;
+			console.log('count', count, 'double', double);
+		}
+	})
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-root-6/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-root-6/_config.js
new file mode 100644
index 0000000000..e4077c6c27
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-root-6/_config.js
@@ -0,0 +1,14 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+// Test that $effect.root continues to be operational after its parent effect has been destroyed
+export default test({
+	test({ assert, target, logs }) {
+		const [hide, increment] = target.querySelectorAll('button');
+
+		hide.click();
+		flushSync();
+		increment.click();
+		assert.deepEqual(logs, ['count', 1, 'double', 2]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-root-6/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-root-6/main.svelte
new file mode 100644
index 0000000000..254cddeb5b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-root-6/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Child from "./Child.svelte";
+	let show = $state(true);
+	let child = $state();
+	let increment;
+	$effect(() => {
+		if (child) increment = child.increment;
+	});
+</script>
+
+<button onclick={() => show = false}>hide</button>
+<button onclick={() => increment()}>increment</button>
+{#if show}
+	<Child bind:this={child} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-teardown-derived/Component.svelte b/packages/svelte/tests/runtime-runes/samples/effect-teardown-derived/Component.svelte
new file mode 100644
index 0000000000..3c863c7fc9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-teardown-derived/Component.svelte
@@ -0,0 +1,15 @@
+<script>
+	let { message, count } = $props();
+
+	$effect(() => () => {
+		console.log(count, message);
+	});
+</script>
+
+<p>{count}</p>
+
+<!-- we need these so that the props are made into deriveds -->
+<button disabled onclick={() => {
+	count += 1;
+	message += '!';
+}}>update</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-teardown-derived/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-teardown-derived/_config.js
new file mode 100644
index 0000000000..1f6e5d1f7f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-teardown-derived/_config.js
@@ -0,0 +1,17 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [increment, toggle] = target.querySelectorAll('button');
+
+		flushSync(() => toggle.click());
+		assert.deepEqual(logs, [0, 'hello']);
+
+		flushSync(() => toggle.click());
+		flushSync(() => increment.click());
+		flushSync(() => increment.click());
+
+		assert.deepEqual(logs, [0, 'hello', 1, 'hello']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-teardown-derived/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-teardown-derived/main.svelte
new file mode 100644
index 0000000000..1a97d3e760
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-teardown-derived/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Component from "./Component.svelte";
+
+	let message = $state('hello');
+	let count = $state(0);
+</script>
+
+<button onclick={() => count++}>{count}</button>
+<button onclick={() => message = message === 'hello' ? 'goodbye' : 'hello'}>{message}</button>
+
+{#if count < 2 && message === 'hello'}
+	<Component {count} {message} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-teardown-stale-value/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-teardown-stale-value/_config.js
new file mode 100644
index 0000000000..1016ffb43e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-teardown-stale-value/_config.js
@@ -0,0 +1,22 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	html: `<button>toggle (false)</button>`,
+
+	async test({ assert, target, logs }) {
+		assert.deepEqual(logs, ['up', { foo: false, bar: false }]);
+
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+		assert.deepEqual(logs, [
+			'up',
+			{ foo: false, bar: false },
+			'down',
+			{ foo: false, bar: false },
+			'up',
+			{ foo: true, bar: true }
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-teardown-stale-value/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-teardown-stale-value/main.svelte
new file mode 100644
index 0000000000..fff81591d5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-teardown-stale-value/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	let foo = $state(false)
+	let bar = $derived(foo)
+
+	$effect(() => {
+		console.log('up', { foo, bar });
+
+		return () =>{
+			console.log('down', { foo, bar });
+		};
+	});
+</script>
+
+<button onclick={() => foo = !foo}>toggle ({foo})</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-tracking-unowned/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-tracking-unowned/_config.js
new file mode 100644
index 0000000000..749b9997c2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-tracking-unowned/_config.js
@@ -0,0 +1,16 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const b1 = target.querySelector('button');
+
+		b1?.click();
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<o>Store: new</o><p>Text: new message</p><button>Change Store</button>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-tracking-unowned/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-tracking-unowned/main.svelte
new file mode 100644
index 0000000000..3c16e3c036
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/effect-tracking-unowned/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { writable, fromStore, toStore } from "svelte/store";
+
+	const store = writable("previous");
+	let text = $derived(fromStore(store).current + " message");
+
+	text; // read derived in a non-tracking context
+</script>
+
+<o>Store: {$store}</o>
+<p>Text: {text}</p>
+<button onclick={() => { store.set("new"); }}>Change Store</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-12/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-12/_config.js
index b3edfefa20..4e771dfafa 100644
--- a/packages/svelte/tests/runtime-runes/samples/error-boundary-12/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-12/_config.js
@@ -5,9 +5,8 @@ export default test({
 	test({ assert, target }) {
 		const btn = target.querySelector('button');
 
-		btn?.click();
-		flushSync();
-
-		assert.htmlEqual(target.innerHTML, `<button>change</button><p>Error occured</p>`);
+		assert.throws(() => {
+			flushSync(() => btn?.click());
+		}, /kaboom/);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-12/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-12/main.svelte
index bae46c2590..748acab91e 100644
--- a/packages/svelte/tests/runtime-runes/samples/error-boundary-12/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-12/main.svelte
@@ -1,22 +1,20 @@
 <script>
 	let count = $state(0);
 
-	const things = $derived.by(() => {
+	const d = $derived.by(() => {
 		if (count === 1) {
-			throw new Error('123')
+			throw new Error('kaboom')
 		}
-		return [1, 2 ,3]
+		return count
 	})
 </script>
 
 <button onclick={() => count++}>change</button>
 
 <svelte:boundary>
-	{#each things as thing}
-		<p>{thing}</p>
-	{/each}
+	{d}
 
 	{#snippet failed()}
-		<p>Error occured</p>
+		<p>Error occurred</p>
 	{/snippet}
 </svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-13/Child.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-13/Child.svelte
index 6e607871d3..de482da985 100644
--- a/packages/svelte/tests/runtime-runes/samples/error-boundary-13/Child.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-13/Child.svelte
@@ -1,7 +1,14 @@
 <script>
-	const { things } = $props();
+	const { count } = $props();
+
+	const d = $derived.by(() => {
+		if (count === 1) {
+			throw new Error('kaboom')
+		}
+		return count
+	});
 
 	$effect(() => {
-		things
-	})
+		d;
+	});
 </script>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-13/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-13/_config.js
index b3edfefa20..3825dc7811 100644
--- a/packages/svelte/tests/runtime-runes/samples/error-boundary-13/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-13/_config.js
@@ -8,6 +8,6 @@ export default test({
 		btn?.click();
 		flushSync();
 
-		assert.htmlEqual(target.innerHTML, `<button>change</button><p>Error occured</p>`);
+		assert.htmlEqual(target.innerHTML, `<button>change</button><p>Error occurred</p>`);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-13/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-13/main.svelte
index 65b71106fa..56e4846675 100644
--- a/packages/svelte/tests/runtime-runes/samples/error-boundary-13/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-13/main.svelte
@@ -2,21 +2,14 @@
 	import Child from './Child.svelte';
 
 	let count = $state(0);
-
-	const things = $derived.by(() => {
-		if (count === 1) {
-			throw new Error('123')
-		}
-		return [1, 2 ,3]
-	})
 </script>
 
 <button onclick={() => count++}>change</button>
 
 <svelte:boundary>
-	<Child {things} />
+	<Child {count} />
 
 	{#snippet failed()}
-		<p>Error occured</p>
+		<p>Error occurred</p>
 	{/snippet}
 </svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-18/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-18/_config.js
index fedaaa9ad1..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,14 +2,16 @@ 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');
 
-		btn?.click();
-		btn?.click();
-
 		assert.throws(() => {
-			flushSync();
+			flushSync(() => {
+				btn?.click();
+				btn?.click();
+			});
 		}, /test\n\n\tin {expression}\n/);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-18/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-18/main.svelte
index b9de7126db..e73dcacc8a 100644
--- a/packages/svelte/tests/runtime-runes/samples/error-boundary-18/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-18/main.svelte
@@ -1,16 +1,18 @@
 <script>
 	let count = $state(0);
 
-	let test = $derived.by(() => {
+	function maybe_throw() {
 		if (count > 1) {
 			throw new Error('test');
 		}
-	});
+
+		return count;
+	}
 </script>
 
 <svelte:boundary onerror={(e) => { throw(e) }}>
-		<div>Count: {count}</div>
-		<button onclick={() => count++}>Increment</button>
-		{count} / {test}
+	<div>Count: {count}</div>
+	<button onclick={() => count++}>Increment</button>
+	{count} / {maybe_throw()}
 </svelte:boundary>
 
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-21/Child.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-21/Child.svelte
new file mode 100644
index 0000000000..ea60542af9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-21/Child.svelte
@@ -0,0 +1,3 @@
+<script>
+	throw new Error();
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-21/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-21/_config.js
new file mode 100644
index 0000000000..e301f83e60
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-21/_config.js
@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: '<button></button><div>0</div>',
+	mode: ['client'],
+	test({ assert, target }) {
+		let btn = target.querySelector('button');
+		let div = target.querySelector('div');
+
+		flushSync(() => {
+			btn?.click();
+		});
+
+		assert.equal(div?.innerHTML, `1`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-21/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-21/main.svelte
new file mode 100644
index 0000000000..ed3140b1ef
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-21/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import Child from "./Child.svelte"
+
+	let count = $state(0);
+</script>
+
+<button onclick={()=>count++}></button>
+<svelte:boundary>
+	<Child />
+
+	{#snippet failed()}
+		<div>{count}</div>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-22/Child.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-22/Child.svelte
new file mode 100644
index 0000000000..ea60542af9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-22/Child.svelte
@@ -0,0 +1,3 @@
+<script>
+	throw new Error();
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-22/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-22/_config.js
new file mode 100644
index 0000000000..c6be4a8cfd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-22/_config.js
@@ -0,0 +1,11 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	test({ assert, target }) {
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, '<p>error occurred</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-22/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-22/main.svelte
new file mode 100644
index 0000000000..39b2fb2eb2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-22/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Child from "./Child.svelte"
+</script>
+
+<svelte:boundary>
+	<p>This should be removed</p>
+
+	{#if true}
+		<Child />
+	{/if}
+
+	{#snippet failed()}
+		<p>error occurred</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-23/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-23/_config.js
new file mode 100644
index 0000000000..7a6a66eb66
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-23/_config.js
@@ -0,0 +1,12 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const btn = target.querySelector('button');
+		btn?.click();
+		await tick();
+
+		assert.deepEqual(logs, ['attachment']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-23/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-23/main.svelte
new file mode 100644
index 0000000000..c1fe20d931
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-23/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	let fail = $state(false);
+
+	function error() {
+		throw new Error('oops');
+	}
+
+	function attachment() {
+		console.log('attachment');
+	}
+</script>
+
+<svelte:boundary>
+	{fail ? error() : 'all good'}
+	<button onclick={() => fail = true}>fail</button>
+	
+	{#snippet failed()}
+		<div {@attach attachment}>oops!</div>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-24/Child.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-24/Child.svelte
new file mode 100644
index 0000000000..cd25ece1b5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-24/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	throw new Error('child error');
+</script>
+
+<p>Child content</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-24/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-24/_config.js
new file mode 100644
index 0000000000..b5b5f296d8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-24/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	test({ assert, target }) {
+		flushSync();
+
+		// When exception is set by onerror, the {#if !exception} block should hide
+		// and only the {#if exception} block should be visible
+		assert.htmlEqual(target.innerHTML, '<p>caught error: child error</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-24/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-24/main.svelte
new file mode 100644
index 0000000000..5116580003
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-24/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	import Child from './Child.svelte';
+
+	let exception = $state();
+	const onerror = (e) => {
+		exception = e;
+	};
+</script>
+
+{#if !exception}
+	<p>condition is {String(!exception)}</p>
+	<svelte:boundary {onerror}>
+		<Child />
+	</svelte:boundary>
+{/if}
+
+{#if exception}
+	<p>caught error: {exception.message}</p>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-25/Child.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-25/Child.svelte
new file mode 100644
index 0000000000..3d5770fc61
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-25/Child.svelte
@@ -0,0 +1,8 @@
+<script>
+	// it's important for the test that this isn't an `Error`
+	throw 'child error'
+</script>
+
+<p>
+	boom
+</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-25/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-25/_config.js
new file mode 100644
index 0000000000..b5b5f296d8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-25/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	test({ assert, target }) {
+		flushSync();
+
+		// When exception is set by onerror, the {#if !exception} block should hide
+		// and only the {#if exception} block should be visible
+		assert.htmlEqual(target.innerHTML, '<p>caught error: child error</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-25/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-25/main.svelte
new file mode 100644
index 0000000000..243d10cf3a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-25/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	import Child from './Child.svelte';
+
+	let exception = $state();
+	const onerror = (e) => {
+		exception = e;
+	};
+</script>
+
+{#if !exception}
+	<p>condition is {String(!exception)}</p>
+	<svelte:boundary {onerror}>
+		<Child />
+	</svelte:boundary>
+{/if}
+
+{#if exception}
+	<p>caught error: {exception}</p>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-26/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-26/_config.js
new file mode 100644
index 0000000000..3e9f30872d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-26/_config.js
@@ -0,0 +1,15 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: '<p>caught: error</p>',
+	transformError: (error) => {
+		if (error !== 'catch me') throw 'wrong error object';
+		return 'error';
+	},
+
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<p>caught: error</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-26/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-26/main.svelte
new file mode 100644
index 0000000000..88d549f6d5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-26/main.svelte
@@ -0,0 +1,7 @@
+<svelte:boundary>
+	{#snippet failed(error)}
+		<p>caught: {error}</p>
+	{/snippet}
+
+	{(() => {throw 'catch me'})()}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-27/_config.js b/packages/svelte/tests/runtime-runes/samples/error-boundary-27/_config.js
new file mode 100644
index 0000000000..df0d48b76a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-27/_config.js
@@ -0,0 +1,14 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: '<p>caught: error (hello)</p>',
+	transformError: () => {
+		return 'error';
+	},
+
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<p>caught: error (hello)</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-27/child.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-27/child.svelte
new file mode 100644
index 0000000000..5b680f1d08
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-27/child.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { get } from "./main.svelte";
+
+    let { error } = $props();
+    const context = get()
+</script>
+
+{#if error}
+    <p>caught: {error} ({context})</p>
+{:else}
+	{(() => {throw 'catch me'})()}
+{/if}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/error-boundary-27/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-boundary-27/main.svelte
new file mode 100644
index 0000000000..a467f7500f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-boundary-27/main.svelte
@@ -0,0 +1,19 @@
+<script module>
+	import { createContext } from "svelte";
+	import Child from "./child.svelte";
+
+	const [ get, set ] = createContext();
+	export {get};
+</script>
+
+<script>
+	set('hello');
+</script>
+
+<svelte:boundary>
+	{#snippet failed(error)}
+		<Child {error} />
+	{/snippet}
+
+	<Child />
+</svelte:boundary>
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/error-recovery/_config.js b/packages/svelte/tests/runtime-runes/samples/error-recovery/_config.js
new file mode 100644
index 0000000000..1f80251806
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-recovery/_config.js
@@ -0,0 +1,32 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [toggle, increment] = target.querySelectorAll('button');
+
+		flushSync(() => increment.click());
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>toggle</button>
+				<button>count: 1</button>
+				<p>show: false</p>
+			`
+		);
+
+		assert.throws(() => {
+			flushSync(() => toggle.click());
+		}, /NonExistent is not defined/);
+
+		flushSync(() => increment.click());
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>toggle</button>
+				<button>count: 2</button>
+				<p>show: true</p>
+			` // show: false would also be fine; this is more about ensuring that things continue to work _somehow_
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/error-recovery/main.svelte b/packages/svelte/tests/runtime-runes/samples/error-recovery/main.svelte
new file mode 100644
index 0000000000..03bfae2596
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/error-recovery/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	let show = $state(false);
+	let count = $state(0);
+</script>
+
+<button onclick={() => show = !show}>toggle</button>
+<button onclick={() => count += 1}>count: {count}</button>
+
+<p>show: {show}</p>
+
+{#if show}
+	<NonExistent />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-spread-update/_config.js b/packages/svelte/tests/runtime-runes/samples/event-attribute-spread-update/_config.js
new file mode 100644
index 0000000000..af03eed4c9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute-spread-update/_config.js
@@ -0,0 +1,18 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		const [change, increment] = target.querySelectorAll('button');
+
+		increment.click();
+		flushSync();
+		assert.htmlEqual(target.innerHTML, '<button>change handlers</button><button>1 / 1</button>');
+
+		change.click();
+		flushSync();
+		increment.click();
+		flushSync();
+		assert.htmlEqual(target.innerHTML, '<button>change handlers</button><button>3 / 3</button>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-spread-update/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-attribute-spread-update/main.svelte
new file mode 100644
index 0000000000..32d4b242cc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute-spread-update/main.svelte
@@ -0,0 +1,27 @@
+<script>
+	let delegated = $state(0);
+	let non_delegated = $state(0);
+	let attrs = $state({
+		onclick: () => {
+			delegated += 1;
+		},
+		onclickcapture: () => {
+			non_delegated += 1;
+		}
+	});
+</script>
+
+<button
+	onclick={() =>
+		(attrs = {
+			onclick: () => {
+				delegated += 2;
+			},
+			onclickcapture: () => {
+				non_delegated += 2;
+			}
+		})}
+>
+	change handlers
+</button>
+<button {...attrs}>{delegated} / {non_delegated}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-async-delegated/_config.js b/packages/svelte/tests/runtime-runes/samples/event-handler-async-delegated/_config.js
new file mode 100644
index 0000000000..eb5b2a1675
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-handler-async-delegated/_config.js
@@ -0,0 +1,9 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+	async test() {}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-async-delegated/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-handler-async-delegated/main.svelte
new file mode 100644
index 0000000000..bffcad6059
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-handler-async-delegated/main.svelte
@@ -0,0 +1,8 @@
+<button
+	type="button"
+	onclick={async () => {
+		await Promise.resolve();
+	}}
+>
+	Button
+</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-component-invalid-warning/_config.js b/packages/svelte/tests/runtime-runes/samples/event-handler-component-invalid-warning/_config.js
index 01ac3c9ad0..e771010669 100644
--- a/packages/svelte/tests/runtime-runes/samples/event-handler-component-invalid-warning/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/event-handler-component-invalid-warning/_config.js
@@ -7,12 +7,8 @@ export default test({
 		dev: true
 	},
 
-	test({ assert, target, warnings }) {
-		/** @type {any} */
-		let error;
-
+	test({ assert, target, warnings, errors }) {
 		const handler = (/** @type {any}} */ e) => {
-			error = e.error;
 			e.stopImmediatePropagation();
 		};
 
@@ -20,9 +16,7 @@ export default test({
 
 		target.querySelector('button')?.click();
 
-		assert.throws(() => {
-			throw error;
-		}, /state_unsafe_mutation/);
+		assert.include(errors[0], 'state_unsafe_mutation');
 
 		window.removeEventListener('error', handler, true);
 
diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-invalid-values/_config.js b/packages/svelte/tests/runtime-runes/samples/event-handler-invalid-values/_config.js
new file mode 100644
index 0000000000..7ca12af774
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-handler-invalid-values/_config.js
@@ -0,0 +1,38 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+
+	compileOptions: {
+		dev: true
+	},
+
+	test({ assert, target, warnings, logs, errors }) {
+		const handler = (/** @type {any} */ e) => {
+			e.stopImmediatePropagation();
+		};
+
+		window.addEventListener('error', handler, true);
+
+		const [b1, b2, b3] = target.querySelectorAll('button');
+
+		b1.click();
+		assert.deepEqual(logs, []);
+		assert.deepEqual(errors, []);
+
+		b2.click();
+		assert.deepEqual(logs, ['clicked']);
+		assert.deepEqual(errors, []);
+
+		logs.length = 0;
+
+		b3.click();
+		assert.deepEqual(logs, []);
+		assert.deepEqual(warnings, [
+			'`click` handler at main.svelte:10:17 should be a function. Did you mean to add a leading `() =>`?'
+		]);
+		assert.include(errors[0], 'is not a function');
+
+		window.removeEventListener('error', handler, true);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-invalid-values/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-handler-invalid-values/main.svelte
new file mode 100644
index 0000000000..f6e344ece8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-handler-invalid-values/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	let ignore = null;
+	let handler = () => console.log("clicked");
+	let bad = "invalid";
+	
+</script>
+
+<button onclick={ignore}>click</button>
+<button onclick={handler}>click</button>
+<button onclick={bad}>click</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-invalid-warning/_config.js b/packages/svelte/tests/runtime-runes/samples/event-handler-invalid-warning/_config.js
index 423351a4c7..a0c792360e 100644
--- a/packages/svelte/tests/runtime-runes/samples/event-handler-invalid-warning/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/event-handler-invalid-warning/_config.js
@@ -7,12 +7,8 @@ export default test({
 		dev: true
 	},
 
-	test({ assert, target, warnings }) {
-		/** @type {any} */
-		let error;
-
+	test({ assert, target, warnings, errors }) {
 		const handler = (/** @type {any} */ e) => {
-			error = e.error;
 			e.stopImmediatePropagation();
 		};
 
@@ -20,9 +16,7 @@ export default test({
 
 		target.querySelector('button')?.click();
 
-		assert.throws(() => {
-			throw error;
-		}, /state_unsafe_mutation/);
+		assert.include(errors[0], 'state_unsafe_mutation');
 
 		window.removeEventListener('error', handler, true);
 
diff --git a/packages/svelte/tests/runtime-runes/samples/event-media-element-cleanup/_config.js b/packages/svelte/tests/runtime-runes/samples/event-media-element-cleanup/_config.js
new file mode 100644
index 0000000000..775afcab89
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-media-element-cleanup/_config.js
@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+import { expect, vi } from 'vitest';
+
+const handler = vi.fn();
+
+export default test({
+	props: {
+		handler
+	},
+	async test({ target }) {
+		const button = target.querySelector('button');
+		const video = target.querySelector('video');
+
+		button?.click();
+		flushSync();
+		video?.dispatchEvent(new Event('someevent'));
+		expect(handler).not.toHaveBeenCalled();
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-media-element-cleanup/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-media-element-cleanup/main.svelte
new file mode 100644
index 0000000000..6a1f9b6b4b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-media-element-cleanup/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	const { handler } = $props();
+	let show = $state(true);
+</script>
+
+<button onclick={() => show = false}>show/hide</button>
+{#if show}
+	<video onsomeevent={handler}></video>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/export-binding/_config.js b/packages/svelte/tests/runtime-runes/samples/export-binding/_config.js
deleted file mode 100644
index d3b9c8e4eb..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/export-binding/_config.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { test } from '../../test';
-
-export default test({
-	compileOptions: {
-		dev: true // to ensure we we catch the error
-	},
-	error:
-		'bind_invalid_export\n' +
-		'Component counter/index.svelte has an export named `increment` that a consumer component is trying to access using `bind:increment`, which is disallowed. Instead, use `bind:this` (e.g. `<Counter bind:this={component} />`) and then access the property on the bound component instance (e.g. `component.increment`)'
-});
diff --git a/packages/svelte/tests/runtime-runes/samples/export-binding/counter/index.svelte b/packages/svelte/tests/runtime-runes/samples/export-binding/counter/index.svelte
deleted file mode 100644
index 14e0de961b..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/export-binding/counter/index.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script>
-	let count = $state(0);
-	export function increment() {
-		count++;
-	}
-</script>
-
-{count}
diff --git a/packages/svelte/tests/runtime-runes/samples/export-binding/main.svelte b/packages/svelte/tests/runtime-runes/samples/export-binding/main.svelte
deleted file mode 100644
index 4ad1684701..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/export-binding/main.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-    import Counter from './counter/index.svelte';
-    let increment;
-</script>
-
-<Counter bind:increment={increment} />
-<button onclick={increment}>increment</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/flush-sync-inside-attachment/Child.svelte b/packages/svelte/tests/runtime-runes/samples/flush-sync-inside-attachment/Child.svelte
new file mode 100644
index 0000000000..44447e4f36
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/flush-sync-inside-attachment/Child.svelte
@@ -0,0 +1,7 @@
+<script>
+    let { text } = $props();
+
+    $effect(() => console.log(text));
+</script>
+
+{text}
diff --git a/packages/svelte/tests/runtime-runes/samples/flush-sync-inside-attachment/_config.js b/packages/svelte/tests/runtime-runes/samples/flush-sync-inside-attachment/_config.js
new file mode 100644
index 0000000000..b34a90e901
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/flush-sync-inside-attachment/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		assert.htmlEqual(target.innerHTML, `<button>show</button> <div>hello</div>`);
+		assert.deepEqual(logs, ['hello']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/flush-sync-inside-attachment/main.svelte b/packages/svelte/tests/runtime-runes/samples/flush-sync-inside-attachment/main.svelte
new file mode 100644
index 0000000000..bef820376b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/flush-sync-inside-attachment/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { flushSync, mount } from 'svelte'
+	import Child from './Child.svelte';
+
+	let show = $state(false);
+</script>
+
+<button onclick={() => show = true}>show</button>
+
+<div {@attach (target) => {
+	mount(Child, { target, props: { text: 'hello' }  });
+	flushSync();
+}}></div>
diff --git a/packages/svelte/tests/runtime-runes/samples/flush-sync-no-scheduled/_config.js b/packages/svelte/tests/runtime-runes/samples/flush-sync-no-scheduled/_config.js
new file mode 100644
index 0000000000..85e06fa8ec
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/flush-sync-no-scheduled/_config.js
@@ -0,0 +1,15 @@
+import { ok, test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+		const main = target.querySelector('main');
+		ok(main);
+		assert.htmlEqual(main.innerHTML, `<div>true</div>`);
+		// we don't want to use flush sync (or tick that use it inside) since we are testing that calling `flushSync` once
+		// when there are no scheduled effects does not cause reactivity to break
+		btn?.click();
+		await Promise.resolve();
+		assert.htmlEqual(main.innerHTML, `<div>false</div> <div>false</div>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/flush-sync-no-scheduled/main.svelte b/packages/svelte/tests/runtime-runes/samples/flush-sync-no-scheduled/main.svelte
new file mode 100644
index 0000000000..448d495cf5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/flush-sync-no-scheduled/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	import { flushSync } from 'svelte'
+	
+	let flag = $state(true)
+	let test = $state(true);	
+</script>
+
+<button onclick={()=>{
+	flushSync(() => {
+		test = !test
+	})
+		
+	flag = !flag;
+}}>switch</button>
+
+<main>
+	<div>{flag}</div>
+	
+	{#if !flag}
+		<div>{test} </div>
+	{/if}
+</main>
+
diff --git a/packages/svelte/tests/runtime-runes/samples/fork-derived-class-instance/_config.js b/packages/svelte/tests/runtime-runes/samples/fork-derived-class-instance/_config.js
new file mode 100644
index 0000000000..feac447536
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/fork-derived-class-instance/_config.js
@@ -0,0 +1,22 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	async test({ assert, target }) {
+		const [fork] = target.querySelectorAll('button');
+
+		fork.click();
+		await tick();
+
+		const [, increment] = target.querySelectorAll('button');
+		const p = target.querySelector('p');
+
+		assert.equal(p?.textContent, '0');
+
+		increment.click();
+		await tick();
+
+		assert.equal(p?.textContent, '1');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/fork-derived-class-instance/main.svelte b/packages/svelte/tests/runtime-runes/samples/fork-derived-class-instance/main.svelte
new file mode 100644
index 0000000000..3623c1df66
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/fork-derived-class-instance/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	import { fork } from 'svelte';
+
+	class Counter {
+		count = $state(0);
+	}
+
+	let condition = $state(false);
+	let counter = $derived(new Counter());
+</script>
+
+<button onclick={() => {
+	fork(() => {
+		condition = true;
+	}).commit();
+}}>fork</button>
+
+{#if condition}
+	<button onclick={() => {
+		counter.count++;
+	}}>click</button>
+	<p>{counter.count}</p>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/fork-derived-dependency-rollback/_config.js b/packages/svelte/tests/runtime-runes/samples/fork-derived-dependency-rollback/_config.js
new file mode 100644
index 0000000000..c5db69f7d4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/fork-derived-dependency-rollback/_config.js
@@ -0,0 +1,25 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	async test({ assert, target }) {
+		const [fork_btn, _toggle_btn, inc_count_1_btn] = target.querySelectorAll('button');
+		const p = /** @type {HTMLElement} */ (target.querySelector('p'));
+
+		assert.equal(p.textContent, '0');
+
+		// Trigger derived to re-evaluate during fork and switch to tracking count_2
+		flushSync(() => {
+			fork_btn.click();
+		});
+
+		assert.equal(p.textContent, '0');
+
+		flushSync(() => {
+			inc_count_1_btn.click();
+		});
+
+		assert.equal(p.textContent, '1');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/fork-derived-dependency-rollback/main.svelte b/packages/svelte/tests/runtime-runes/samples/fork-derived-dependency-rollback/main.svelte
new file mode 100644
index 0000000000..800c82b56b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/fork-derived-dependency-rollback/main.svelte
@@ -0,0 +1,27 @@
+<script>
+	import { fork } from 'svelte';
+
+	let show_count_1 = $state(true);
+	let count_1 = $state(0);
+	let count_2 = $state(0);
+
+	const count = $derived(show_count_1 ? count_1 : count_2);
+</script>
+
+<!-- This if block causes the derived to execute during the fork, switching its dependency
+     away from count_1 and over to count_2. After discard, count_1 should still be tracked. -->
+{#if count}
+{/if}
+
+<button onclick={() => {
+	const f = fork(() => {
+		show_count_1 = !show_count_1;
+	});
+	f.discard();
+}}>fork toggle</button>
+
+<button onclick={() => show_count_1 = !show_count_1}>toggle</button>
+<button onclick={() => count_1++}>increment count 1</button>
+<button onclick={() => count_2++}>increment count 2</button>
+
+<p>{count}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-1/_config.js b/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-1/_config.js
new file mode 100644
index 0000000000..fb50ceb9b1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-1/_config.js
@@ -0,0 +1,40 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	async test({ assert, target }) {
+		const [fork, toggle, increment] = target.querySelectorAll('button');
+
+		// derived is first evaluated in block effect, then discarded
+		flushSync(() => fork.click());
+
+		// should not throw "Cannot convert a Symbol value to a string" due to cached UNINITIALIZED from first fork
+		flushSync(() => fork.click());
+
+		// should not reflect the temporary change to `clicks` inside the fork
+		flushSync(() => toggle.click());
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>fork</button>
+				<button>toggle</button>
+				<button>clicks: 0</button>
+				<p>0</p>
+			`
+		);
+
+		flushSync(() => increment.click());
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>fork</button>
+				<button>toggle</button>
+				<button>clicks: 1</button>
+				<p>2</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-1/main.svelte b/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-1/main.svelte
new file mode 100644
index 0000000000..08ebaba25a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-1/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	import { fork } from "svelte";
+
+	let clicks = $state(0);
+	let show = $state(false);
+	const derived = $derived(clicks * 2);
+</script>
+
+<button onclick={() => {
+	fork(() => {
+		clicks += 1;
+		show = true;
+	}).discard();
+}}>fork</button>
+
+<button onclick={() => show = !show}>toggle</button>
+
+<button onclick={() => clicks++}>clicks: {clicks}</button>
+
+{#if show}
+	<p>{derived}</p>
+{/if}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-2/_config.js b/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-2/_config.js
new file mode 100644
index 0000000000..21ab140fc0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-2/_config.js
@@ -0,0 +1,38 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	async test({ assert, target }) {
+		const [fork, toggle, increment] = target.querySelectorAll('button');
+
+		// derived is first evaluated in block effect, then discarded
+		flushSync(() => fork.click());
+
+		// should not reflect the temporary change to `clicks` inside the fork
+		// or throw "Cannot convert a Symbol value to a string" due to cached UNINITIALIZED
+		flushSync(() => toggle.click());
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>fork</button>
+				<button>toggle</button>
+				<button>clicks: 0</button>
+				<p>0</p>
+			`
+		);
+
+		flushSync(() => increment.click());
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>fork</button>
+				<button>toggle</button>
+				<button>clicks: 1</button>
+				<p>2</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-2/main.svelte
new file mode 100644
index 0000000000..08ebaba25a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-2/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	import { fork } from "svelte";
+
+	let clicks = $state(0);
+	let show = $state(false);
+	const derived = $derived(clicks * 2);
+</script>
+
+<button onclick={() => {
+	fork(() => {
+		clicks += 1;
+		show = true;
+	}).discard();
+}}>fork</button>
+
+<button onclick={() => show = !show}>toggle</button>
+
+<button onclick={() => clicks++}>clicks: {clicks}</button>
+
+{#if show}
+	<p>{derived}</p>
+{/if}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-3/_config.js b/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-3/_config.js
new file mode 100644
index 0000000000..4827aa99f3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-3/_config.js
@@ -0,0 +1,32 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	async test({ assert, target }) {
+		const [fork, toggle, increment] = target.querySelectorAll('button');
+
+		// initialize derived by showing it
+		flushSync(() => toggle.click());
+		flushSync(() => toggle.click());
+
+		// increment clicks
+		flushSync(() => increment.click());
+
+		// update derived, but without writing to `derived.v`
+		flushSync(() => fork.click());
+
+		// show derived
+		flushSync(() => toggle.click());
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>fork</button>
+				<button>toggle</button>
+				<button>clicks: 1</button>
+				<p>2</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-3/main.svelte
new file mode 100644
index 0000000000..08ebaba25a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/fork-derived-uncached-3/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	import { fork } from "svelte";
+
+	let clicks = $state(0);
+	let show = $state(false);
+	const derived = $derived(clicks * 2);
+</script>
+
+<button onclick={() => {
+	fork(() => {
+		clicks += 1;
+		show = true;
+	}).discard();
+}}>fork</button>
+
+<button onclick={() => show = !show}>toggle</button>
+
+<button onclick={() => clicks++}>clicks: {clicks}</button>
+
+{#if show}
+	<p>{derived}</p>
+{/if}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/fork-derived-value-immediate/_config.js b/packages/svelte/tests/runtime-runes/samples/fork-derived-value-immediate/_config.js
new file mode 100644
index 0000000000..4f7ff673d6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/fork-derived-value-immediate/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	async test({ assert, target, logs }) {
+		const fork = target.querySelector('button');
+
+		fork?.click();
+		flushSync();
+		assert.deepEqual(logs, [1, 2]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/fork-derived-value-immediate/main.svelte b/packages/svelte/tests/runtime-runes/samples/fork-derived-value-immediate/main.svelte
new file mode 100644
index 0000000000..2adb83b735
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/fork-derived-value-immediate/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { fork } from "svelte";
+
+	let state = $state(0);
+	let count = $derived(state);
+</script>
+
+<button onclick={() => {
+	fork(() => {
+		state++;
+		console.log(count);
+		state++;
+		console.log(count);
+	});
+}}>fork</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/fork-derived-value/_config.js b/packages/svelte/tests/runtime-runes/samples/fork-derived-value/_config.js
new file mode 100644
index 0000000000..0635db7501
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/fork-derived-value/_config.js
@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	async test({ assert, target }) {
+		const [fork, update] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			fork.click();
+		});
+		flushSync(() => {
+			update.click();
+		});
+
+		const p = target.querySelector('p');
+
+		assert.equal(p?.textContent, 'one');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/fork-derived-value/main.svelte b/packages/svelte/tests/runtime-runes/samples/fork-derived-value/main.svelte
new file mode 100644
index 0000000000..06e0f1f264
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/fork-derived-value/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	import { fork } from "svelte";
+
+	let state = $state(0);
+	let count = $derived(state);
+</script>
+
+<button onclick={() => {
+	fork(() => {
+		state++;
+	});
+}}>fork</button>
+
+<button onclick={() => {
+	state++;
+}}>update</button>
+
+{#if count === 1}
+	<p>one</p>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/form-default-value-from-spread/_config.js b/packages/svelte/tests/runtime-runes/samples/form-default-value-from-spread/_config.js
new file mode 100644
index 0000000000..3808ae6530
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/form-default-value-from-spread/_config.js
@@ -0,0 +1,10 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['server'],
+	html: `
+		<input value="a">
+		<input type="checkbox" checked>
+		<input value="b">
+`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/form-default-value-from-spread/main.svelte b/packages/svelte/tests/runtime-runes/samples/form-default-value-from-spread/main.svelte
new file mode 100644
index 0000000000..7c0ce9cbe3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/form-default-value-from-spread/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	let text = { defaultValue: "a" };
+	let checkbox = { defaultChecked: true }
+</script>
+
+<input {...text} />
+<input type="checkbox" {...checkbox} />
+<input value="b" {...text} />
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/form-novalidate-casing/_config.js b/packages/svelte/tests/runtime-runes/samples/form-novalidate-casing/_config.js
new file mode 100644
index 0000000000..4fdf3632d6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/form-novalidate-casing/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<form novalidate></form>
+		<form novalidate></form>
+`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/form-novalidate-casing/main.svelte b/packages/svelte/tests/runtime-runes/samples/form-novalidate-casing/main.svelte
new file mode 100644
index 0000000000..1e8115ff62
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/form-novalidate-casing/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	let noValidate = $state(true);
+</script>
+
+<form novalidate={true}></form>
+<form {noValidate}></form>
diff --git a/packages/svelte/tests/runtime-runes/samples/function-parameter-shadowing/_config.js b/packages/svelte/tests/runtime-runes/samples/function-parameter-shadowing/_config.js
new file mode 100644
index 0000000000..c35d4d7ff8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/function-parameter-shadowing/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	test({ assert, logs }) {
+		assert.deepEqual(logs, [42, 43]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/function-parameter-shadowing/main.svelte b/packages/svelte/tests/runtime-runes/samples/function-parameter-shadowing/main.svelte
new file mode 100644
index 0000000000..2e7aef1742
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/function-parameter-shadowing/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	let value = $state(42);
+
+	function shadow(output = value) {
+		const value = 1337;
+		return output;
+	}
+
+	console.log(shadow());
+	value += 1;
+	console.log(shadow());
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/functional-templating/_config.js b/packages/svelte/tests/runtime-runes/samples/functional-templating/_config.js
new file mode 100644
index 0000000000..5d36f2e969
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/functional-templating/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		fragments: 'tree'
+	},
+
+	html: `<p>hello</p>`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/functional-templating/main.svelte b/packages/svelte/tests/runtime-runes/samples/functional-templating/main.svelte
new file mode 100644
index 0000000000..302a01f335
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/functional-templating/main.svelte
@@ -0,0 +1 @@
+<p>hello</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/get-abort-signal/_config.js b/packages/svelte/tests/runtime-runes/samples/get-abort-signal/_config.js
new file mode 100644
index 0000000000..6a85e2615a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/get-abort-signal/_config.js
@@ -0,0 +1,34 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<button>increment</button><p>loading...</p>`,
+
+	async test({ assert, target, variant, logs }) {
+		await new Promise((f) => setTimeout(f, 50));
+
+		if (variant === 'hydrate') {
+			assert.deepEqual(logs, [
+				'aborted',
+				'StaleReactionError',
+				'The reaction that called `getAbortSignal()` was re-run or destroyed'
+			]);
+		}
+
+		logs.length = 0;
+
+		const [button] = target.querySelectorAll('button');
+
+		await new Promise((f) => setTimeout(f, 50));
+		assert.htmlEqual(target.innerHTML, '<button>increment</button><p>0</p>');
+
+		button.click();
+		await new Promise((f) => setTimeout(f, 50));
+		assert.htmlEqual(target.innerHTML, '<button>increment</button><p>2</p>');
+
+		assert.deepEqual(logs, [
+			'aborted',
+			'StaleReactionError',
+			'The reaction that called `getAbortSignal()` was re-run or destroyed'
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/get-abort-signal/main.svelte b/packages/svelte/tests/runtime-runes/samples/get-abort-signal/main.svelte
new file mode 100644
index 0000000000..be5625125b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/get-abort-signal/main.svelte
@@ -0,0 +1,33 @@
+<script>
+	import { getAbortSignal } from 'svelte';
+
+	let count = $state(0);
+
+	let delayed_count = $derived.by(async () => {
+		let c = count;
+
+		const signal = getAbortSignal();
+
+		await new Promise((f) => setTimeout(f));
+
+		if (signal.aborted) {
+			console.log('aborted', signal.reason.name, signal.reason.message);
+		}
+
+		return c;
+	});
+</script>
+
+<button onclick={async () => {
+	count += 1;
+	await Promise.resolve();
+	count += 1;
+}}>increment</button>
+
+{#await delayed_count}
+	<p>loading...</p>
+{:then count}
+	<p>{count}</p>
+{:catch error}
+	{console.log('this should never be rendered')}
+{/await}
diff --git a/packages/svelte/tests/runtime-runes/samples/global-variable-assignment/_config.js b/packages/svelte/tests/runtime-runes/samples/global-variable-assignment/_config.js
new file mode 100644
index 0000000000..37f4b2814c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/global-variable-assignment/_config.js
@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+export default test({
+	error: 'x is not defined',
+	async test() {}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/global-variable-assignment/foo.svelte.js b/packages/svelte/tests/runtime-runes/samples/global-variable-assignment/foo.svelte.js
new file mode 100644
index 0000000000..198b8f89e7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/global-variable-assignment/foo.svelte.js
@@ -0,0 +1 @@
+x = 1;
diff --git a/packages/svelte/tests/runtime-runes/samples/global-variable-assignment/main.svelte b/packages/svelte/tests/runtime-runes/samples/global-variable-assignment/main.svelte
new file mode 100644
index 0000000000..0ac6956b1d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/global-variable-assignment/main.svelte
@@ -0,0 +1,3 @@
+<script>
+	import "./foo.svelte.js";
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/guard-else-effect/_config.js b/packages/svelte/tests/runtime-runes/samples/guard-else-effect/_config.js
new file mode 100644
index 0000000000..4e8eec8b16
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/guard-else-effect/_config.js
@@ -0,0 +1,20 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	mode: ['client'],
+	async test({ target, assert, logs }) {
+		const button = target.querySelector('button');
+
+		button?.click();
+		flushSync();
+		button?.click();
+		flushSync();
+		button?.click();
+		flushSync();
+		button?.click();
+		flushSync();
+
+		assert.deepEqual(logs, ['two', 'one', 'two', 'one', 'two']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/guard-else-effect/main.svelte b/packages/svelte/tests/runtime-runes/samples/guard-else-effect/main.svelte
new file mode 100644
index 0000000000..91fd0442bd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/guard-else-effect/main.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	let b = $state(false);
+	let v = $state("two");
+
+	$effect(() => {
+		v = b ? "one" : "two";
+	})
+</script>
+
+<button onclick={() => b = !b}>Trigger</button>
+
+{#if v === "one"}
+	<div>if1 matched! {console.log('one')}</div>
+{:else if v === "two"}
+	<div>if2 matched! {console.log('two')}</div>
+{:else}
+	<div>nothing matched {console.log('else')}</div>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/guard-if-nested/_config.js b/packages/svelte/tests/runtime-runes/samples/guard-if-nested/_config.js
new file mode 100644
index 0000000000..881c1545ee
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/guard-if-nested/_config.js
@@ -0,0 +1,13 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	mode: ['client'],
+	async test({ target, assert }) {
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+
+		assert.equal(target.textContent?.trim(), 'Trigger');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/guard-if-nested/main.svelte b/packages/svelte/tests/runtime-runes/samples/guard-if-nested/main.svelte
new file mode 100644
index 0000000000..4514bd114e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/guard-if-nested/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	let centerRow = $state({ nested: { optional: 2, required: 3 } });
+
+	let someChange = $state(false);
+	$effect(() => {
+		if (someChange) centerRow = undefined;
+	});
+</script>
+
+{#if centerRow?.nested}
+	{#if centerRow?.nested?.optional != undefined && centerRow.nested.optional > 0}
+		op: {centerRow.nested.optional}<br />
+	{:else}
+		req: {centerRow.nested.required}<br />
+	{/if}
+{/if}
+
+<button onclick={() => (someChange = true)}>Trigger</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/guard-nested-if-pre/Component.svelte b/packages/svelte/tests/runtime-runes/samples/guard-nested-if-pre/Component.svelte
new file mode 100644
index 0000000000..b7322e7530
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/guard-nested-if-pre/Component.svelte
@@ -0,0 +1,6 @@
+<script>
+	let { p } = $props();
+	$effect.pre(() => {
+		console.log('running ' + p)
+	})
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/guard-nested-if-pre/_config.js b/packages/svelte/tests/runtime-runes/samples/guard-nested-if-pre/_config.js
new file mode 100644
index 0000000000..9706855fb4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/guard-nested-if-pre/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	async test({ assert, target, logs }) {
+		const button = target.querySelector('button');
+
+		button?.click();
+		flushSync();
+		assert.deepEqual(logs, ['pre', 'running b', 'pre', 'pre']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/guard-nested-if-pre/main.svelte b/packages/svelte/tests/runtime-runes/samples/guard-nested-if-pre/main.svelte
new file mode 100644
index 0000000000..4ebb13eca3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/guard-nested-if-pre/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	import Component from './Component.svelte';
+
+	let p = $state('b');
+
+	$effect.pre(() => {
+		console.log('pre')
+		if (p === 'a') p = null;
+	})
+</script>
+
+{#if p || !p}
+	{#if p}
+		<Component {p} />
+	{/if}
+{/if}
+
+<button onclick={() => p = 'a'}>a</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/head-payload-validation/_config.js b/packages/svelte/tests/runtime-runes/samples/head-payload-validation/_config.js
new file mode 100644
index 0000000000..7c609205df
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/head-payload-validation/_config.js
@@ -0,0 +1,11 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+	mode: ['server'],
+	async test({ errors, assert }) {
+		assert.equal(errors, []);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/head-payload-validation/main.svelte b/packages/svelte/tests/runtime-runes/samples/head-payload-validation/main.svelte
new file mode 100644
index 0000000000..7eb31d3a9e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/head-payload-validation/main.svelte
@@ -0,0 +1,7 @@
+{#snippet head()}
+	<title>Cool</title>
+{/snippet}
+
+<svelte:head>
+	{@render head()}
+</svelte:head>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/hmr-dynamic-component/Component.svelte b/packages/svelte/tests/runtime-runes/samples/hmr-dynamic-component/Component.svelte
new file mode 100644
index 0000000000..491b4e06ed
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/hmr-dynamic-component/Component.svelte
@@ -0,0 +1 @@
+component
diff --git a/packages/svelte/tests/runtime-runes/samples/hmr-dynamic-component/_config.js b/packages/svelte/tests/runtime-runes/samples/hmr-dynamic-component/_config.js
new file mode 100644
index 0000000000..8adf57f2eb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/hmr-dynamic-component/_config.js
@@ -0,0 +1,30 @@
+import { flushSync } from 'svelte';
+import { HMR } from 'svelte/internal/client';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true,
+		hmr: true
+	},
+
+	async test({ assert, target }) {
+		const [btn] = target.querySelectorAll('button');
+
+		btn.click();
+		flushSync();
+		assert.htmlEqual(target.innerHTML, `<button>show</button> component`);
+
+		// Simulate HMR swap on the child component.
+		const hidden = './_output/client/Component' + '.svelte.js';
+		const mod = await import(/* vite-ignore */ hidden);
+		const hmr_data = mod.default[HMR];
+		const fake_incoming = {
+			// Fake a new component, else HMR source's equality check will ignore the update
+			[HMR]: { fn: /** @param {any} args */ (...args) => hmr_data.fn(...args), current: null }
+		};
+		hmr_data.update(fake_incoming);
+		flushSync();
+		assert.htmlEqual(target.innerHTML, `<button>show</button> component`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/hmr-dynamic-component/main.svelte b/packages/svelte/tests/runtime-runes/samples/hmr-dynamic-component/main.svelte
new file mode 100644
index 0000000000..7cb6982953
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/hmr-dynamic-component/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Component from "./Component.svelte";
+
+	let C = $state(null);
+</script>
+
+<button onclick={() => C = Component}>show</button>
+
+<C />
diff --git a/packages/svelte/tests/runtime-runes/samples/html-tag-contenteditable/_config.js b/packages/svelte/tests/runtime-runes/samples/html-tag-contenteditable/_config.js
new file mode 100644
index 0000000000..9e188b1119
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/html-tag-contenteditable/_config.js
@@ -0,0 +1,25 @@
+import { flushSync } from '../../../../src/index-client';
+import { test } from '../../test';
+
+export default test({
+	html: `<div id="editable" contenteditable="true"></div><p id="output"></p>`,
+
+	test({ assert, target }) {
+		const div = /** @type {HTMLDivElement} */ (target.querySelector('#editable'));
+		const output = /** @type {HTMLParagraphElement} */ (target.querySelector('#output'));
+
+		// Simulate user typing by directly modifying the DOM
+		div.textContent = 'hello';
+
+		// Simulate blur which triggers `content = e.currentTarget.innerText`
+		const event = new Event('blur');
+		div.dispatchEvent(event);
+		flushSync();
+
+		// The output should show "hello" (innerText was set correctly)
+		assert.equal(output.textContent, 'hello');
+
+		// The contenteditable div should contain "hello" once, not duplicated
+		assert.htmlEqual(div.innerHTML, 'hello');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/html-tag-contenteditable/main.svelte b/packages/svelte/tests/runtime-runes/samples/html-tag-contenteditable/main.svelte
new file mode 100644
index 0000000000..3f887f2a9a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/html-tag-contenteditable/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	let content = $state("");
+</script>
+
+<div id="editable" onblur={(e) => { content = e.currentTarget.textContent; }} contenteditable="true">
+	{@html content}
+</div>
+
+<p id="output">{content}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/hydratable-complex-nesting/_config.js b/packages/svelte/tests/runtime-runes/samples/hydratable-complex-nesting/_config.js
new file mode 100644
index 0000000000..0ac5333c4a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/hydratable-complex-nesting/_config.js
@@ -0,0 +1,24 @@
+import { tick } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	skip_mode: ['server'],
+
+	server_props: { environment: 'server' },
+	ssrHtml: '<p>The current environment is: server</p>',
+
+	props: { environment: 'browser' },
+
+	async test({ assert, target, variant }) {
+		// make sure hydration has a chance to finish
+		await tick();
+		const p = target.querySelector('p');
+		ok(p);
+		if (variant === 'hydrate') {
+			assert.htmlEqual(p.outerHTML, '<p>The current environment is: server</p>');
+		} else {
+			assert.htmlEqual(p.outerHTML, '<p>The current environment is: browser</p>');
+		}
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/hydratable-complex-nesting/main.svelte b/packages/svelte/tests/runtime-runes/samples/hydratable-complex-nesting/main.svelte
new file mode 100644
index 0000000000..cd603a6e6b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/hydratable-complex-nesting/main.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { hydratable } from "svelte";
+
+	let { environment } = $props();
+
+	const value = hydratable("environment", () => Promise.resolve({
+		nested: Promise.resolve({
+			environment
+		})
+	}))
+</script>
+
+<p>The current environment is: {await value.then(res => res.nested).then(res => res.environment)}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/hydratable-error-on-missing/_config.js b/packages/svelte/tests/runtime-runes/samples/hydratable-error-on-missing/_config.js
new file mode 100644
index 0000000000..3349cbcb66
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/hydratable-error-on-missing/_config.js
@@ -0,0 +1,13 @@
+import { ok, test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	mode: ['async-server', 'hydrate'],
+
+	server_props: { environment: 'server' },
+	ssrHtml: '<p>The current environment is: server</p>',
+
+	props: { environment: 'browser' },
+
+	runtime_error: 'hydratable_missing_but_required'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/hydratable-error-on-missing/main.svelte b/packages/svelte/tests/runtime-runes/samples/hydratable-error-on-missing/main.svelte
new file mode 100644
index 0000000000..b7dfc0e7e2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/hydratable-error-on-missing/main.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { hydratable } from "svelte";
+
+	let { environment }: { environment: 'server' | 'browser' } = $props();
+
+	let value;
+	if (environment === 'server') {
+		value = 'server';
+	} else {
+		value = hydratable('environment', () => environment);
+	}
+</script>
+
+<p>The current environment is: {value}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/hydratable-script-escape/_config.js b/packages/svelte/tests/runtime-runes/samples/hydratable-script-escape/_config.js
new file mode 100644
index 0000000000..bc51795565
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/hydratable-script-escape/_config.js
@@ -0,0 +1,14 @@
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	mode: ['hydrate'],
+
+	props: {
+		key: '</script><script>throw new Error("pwned")</script>'
+	},
+
+	async test() {
+		// this test will fail when evaluating the `head` script if the vulnerability is present
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/hydratable-script-escape/main.svelte b/packages/svelte/tests/runtime-runes/samples/hydratable-script-escape/main.svelte
new file mode 100644
index 0000000000..1327492190
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/hydratable-script-escape/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { hydratable } from "svelte";
+
+	const { key } = $props();
+
+	const value = await hydratable(key, () => Promise.resolve('safe'));
+</script>
+
+<p>{value}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/hydratable-unused-keys-nesting-partial/_config.js b/packages/svelte/tests/runtime-runes/samples/hydratable-unused-keys-nesting-partial/_config.js
new file mode 100644
index 0000000000..b1973a23c2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/hydratable-unused-keys-nesting-partial/_config.js
@@ -0,0 +1,27 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	mode: ['async-server', 'hydrate'],
+
+	server_props: { environment: 'server' },
+	ssrHtml:
+		'<div>did you ever hear the tragedy of darth plagueis the wise?</div><div>Loading...</div>',
+
+	test_ssr({ assert, warnings }) {
+		assert.strictEqual(warnings.length, 1);
+		// for some strange reason we trim the error code off the beginning of warnings so I can't actually assert it
+		assert.include(warnings[0], 'A `hydratable` value with key `partially_used`');
+	},
+
+	async test({ assert, target }) {
+		// make sure the hydratable promise on the client has a chance to run and reject (it shouldn't, because the server data should be used)
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<div>did you ever hear the tragedy of darth plagueis the wise?</div><div>no, sith daddy, please tell me</div>'
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/hydratable-unused-keys-nesting-partial/main.svelte b/packages/svelte/tests/runtime-runes/samples/hydratable-unused-keys-nesting-partial/main.svelte
new file mode 100644
index 0000000000..75723848b1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/hydratable-unused-keys-nesting-partial/main.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { hydratable } from "svelte";
+
+	const { environment } = $props();
+
+	const partially_used_hydratable = hydratable(
+		"partially_used",
+		() => {
+			return {
+				used: new Promise(
+					(res, rej) => environment === 'server' ? setTimeout(() => res('did you ever hear the tragedy of darth plagueis the wise?'), 0) : rej('should not run')
+				),
+				unused: new Promise(
+					(res, rej) => environment === 'server' ? setTimeout(() => res('no, sith daddy, please tell me'), 0) : rej('should not run')
+				),
+			}
+		}
+	);
+</script>
+
+<div>{await partially_used_hydratable.used}</div>
+<svelte:boundary>
+	<div>{await partially_used_hydratable.unused}</div>
+	{#snippet pending()}
+		<div>Loading...</div>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/hydratable-unused-keys/_config.js b/packages/svelte/tests/runtime-runes/samples/hydratable-unused-keys/_config.js
new file mode 100644
index 0000000000..44978c8d58
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/hydratable-unused-keys/_config.js
@@ -0,0 +1,26 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	mode: ['async-server', 'hydrate'],
+
+	server_props: { environment: 'server' },
+	ssrHtml: '<div>Loading...</div>',
+
+	test_ssr({ assert, warnings }) {
+		assert.strictEqual(warnings.length, 1);
+		// for some strange reason we trim the error code off the beginning of warnings so I can't actually assert it
+		assert.include(warnings[0], 'A `hydratable` value with key `unused_key`');
+	},
+
+	async test({ assert, target }) {
+		// make sure the hydratable promise on the client has a chance to run and reject (it shouldn't, because the server data should be used)
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<div>did you ever hear the tragedy of darth plagueis the wise?</div>'
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/hydratable-unused-keys/main.svelte b/packages/svelte/tests/runtime-runes/samples/hydratable-unused-keys/main.svelte
new file mode 100644
index 0000000000..67848e7f6f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/hydratable-unused-keys/main.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { hydratable } from "svelte";
+
+	const { environment } = $props();
+
+	const unresolved_hydratable = hydratable(
+		"unused_key",
+		() => new Promise(
+			(res, rej) => environment === 'server' ? setTimeout(() => res('did you ever hear the tragedy of darth plagueis the wise?'), 0) : rej('should not run')
+		)
+	);
+</script>
+
+<svelte:boundary>
+	<div>{await unresolved_hydratable}</div>
+	{#snippet pending()}
+		<div>Loading...</div>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/hydratable/_config.js b/packages/svelte/tests/runtime-runes/samples/hydratable/_config.js
new file mode 100644
index 0000000000..57904ef576
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/hydratable/_config.js
@@ -0,0 +1,21 @@
+import { ok, test } from '../../test';
+
+export default test({
+	skip_no_async: true,
+	skip_mode: ['server'],
+
+	server_props: { environment: 'server' },
+	ssrHtml: '<p>The current environment is: server</p>',
+
+	props: { environment: 'browser' },
+
+	async test({ assert, target, variant }) {
+		const p = target.querySelector('p');
+		ok(p);
+		if (variant === 'hydrate') {
+			assert.htmlEqual(p.outerHTML, '<p>The current environment is: server</p>');
+		} else {
+			assert.htmlEqual(p.outerHTML, '<p>The current environment is: browser</p>');
+		}
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/hydratable/main.svelte b/packages/svelte/tests/runtime-runes/samples/hydratable/main.svelte
new file mode 100644
index 0000000000..53b9c24f91
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/hydratable/main.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { hydratable } from "svelte";
+
+	let { environment } = $props();
+
+	const value = hydratable("environment", () => environment)
+</script>
+
+<p>The current environment is: {value}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/if-nested-template/Component.svelte b/packages/svelte/tests/runtime-runes/samples/if-nested-template/Component.svelte
new file mode 100644
index 0000000000..b4281bbcbd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/if-nested-template/Component.svelte
@@ -0,0 +1,7 @@
+<script>
+	let { value } = $props()
+
+	const text = $derived(value.toString())
+
+	$effect(() => console.log(text))
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/if-nested-template/_config.js b/packages/svelte/tests/runtime-runes/samples/if-nested-template/_config.js
new file mode 100644
index 0000000000..673f668916
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/if-nested-template/_config.js
@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+		const [div] = target.querySelectorAll('div');
+
+		flushSync(() => btn1?.click());
+		assert.htmlEqual(div.innerHTML, '123 123');
+		assert.equal(div.inert, true);
+
+		flushSync(() => btn2?.click());
+		assert.htmlEqual(div.innerHTML, '');
+		assert.deepEqual(logs, ['123']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/if-nested-template/main.svelte b/packages/svelte/tests/runtime-runes/samples/if-nested-template/main.svelte
new file mode 100644
index 0000000000..04afa7d664
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/if-nested-template/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	import Component from './Component.svelte';
+
+	let outer = $state(true);
+	let inner = $state(123);
+
+	function outro() {
+		return { duration: 100 };
+	}
+</script>
+
+{#if outer}
+	<div out:outro>
+		{#if inner}
+			{@const text = inner.toString()}
+			{text} {inner.toString()}
+			<Component value={inner} />
+		{/if}
+	</div>
+{/if}
+
+<button onclick={() => { outer = false; inner = undefined; }}>Set both to falsy</button>
+<button onclick={() => { outer = true }}>Set outer to truthy</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/input-type-before-value-spread/_config.js b/packages/svelte/tests/runtime-runes/samples/input-type-before-value-spread/_config.js
new file mode 100644
index 0000000000..7aeaf38eb0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/input-type-before-value-spread/_config.js
@@ -0,0 +1,15 @@
+import { test } from '../../test';
+
+const value = 'line1\nline2\nline3';
+
+export default test({
+	mode: ['client'],
+	test({ assert, target }) {
+		const [spread_first, type_first] = target.querySelectorAll('input');
+
+		assert.equal(spread_first?.type, 'hidden');
+		assert.equal(spread_first?.value, value);
+		assert.equal(type_first?.type, 'hidden');
+		assert.equal(type_first?.value, value);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/input-type-before-value-spread/main.svelte b/packages/svelte/tests/runtime-runes/samples/input-type-before-value-spread/main.svelte
new file mode 100644
index 0000000000..16e72ab704
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/input-type-before-value-spread/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	const value = 'line1\nline2\nline3';
+	const spread = { name: 'field', value };
+</script>
+
+<input {...spread} type="hidden" />
+<input type="hidden" {...spread} />
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..1b331f5b40 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
@@ -1,5 +1,6 @@
 import { flushSync } from 'svelte';
 import { test } from '../../test';
+import { normalise_inspect_logs } from '../../../helpers.js';
 
 export default test({
 	compileOptions: {
@@ -13,17 +14,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(normalise_inspect_logs(logs), [[1, 2, 3, 7], [2, 3, 7], 'at Object.doSplice']);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-deep/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-deep/_config.js
index f7480b0e7b..89b01da499 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect-deep/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-deep/_config.js
@@ -1,3 +1,4 @@
+import { normalise_inspect_logs } from '../../../helpers.js';
 import { test } from '../../test';
 
 export default test({
@@ -6,6 +7,6 @@ export default test({
 	},
 
 	async test({ assert, logs }) {
-		assert.deepEqual(logs, ['init', undefined, 'update', [{}]]);
+		assert.deepEqual(normalise_inspect_logs(logs), [undefined, [{}], 'at $effect']);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-derived-2/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-derived-2/_config.js
index 9474397f7f..3471a4df0c 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect-derived-2/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-derived-2/_config.js
@@ -1,5 +1,6 @@
 import { flushSync } from 'svelte';
 import { test } from '../../test';
+import { normalise_inspect_logs } from '../../../helpers.js';
 
 export default test({
 	compileOptions: {
@@ -14,8 +15,7 @@ export default test({
 		});
 
 		assert.htmlEqual(target.innerHTML, `<button>update</button>\n1`);
-		assert.deepEqual(logs, [
-			'init',
+		assert.deepEqual(normalise_inspect_logs(logs), [
 			{
 				data: {
 					derived: 0,
@@ -23,14 +23,14 @@ export default test({
 				},
 				derived: []
 			},
-			'update',
 			{
 				data: {
 					derived: 0,
 					list: [1]
 				},
 				derived: [1]
-			}
+			},
+			'at HTMLButtonElement.click'
 		]);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-derived-3/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-derived-3/_config.js
index d2226f433e..017de6c0c7 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect-derived-3/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-derived-3/_config.js
@@ -1,5 +1,6 @@
 import { flushSync } from 'svelte';
 import { test } from '../../test';
+import { normalise_inspect_logs } from '../../../helpers.js';
 
 export default test({
 	compileOptions: {
@@ -13,22 +14,19 @@ export default test({
 			button?.click();
 		});
 
-		assert.deepEqual(logs, [
-			'init',
+		assert.deepEqual(normalise_inspect_logs(logs), [
 			'0',
 			true,
-			'init',
 			'1',
 			false,
-			'init',
 			'2',
 			false,
-			'update',
 			'0',
 			false,
-			'update',
+			'at $effect',
 			'1',
-			true
+			true,
+			'at $effect'
 		]);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-derived-4/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-derived-4/_config.js
new file mode 100644
index 0000000000..3a3bca7221
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-derived-4/_config.js
@@ -0,0 +1,35 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+import { normalise_inspect_logs } from '../../../helpers';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	async test({ assert, target, logs }) {
+		const [b] = target.querySelectorAll('button');
+
+		b.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>first unseen: 1</button>`);
+
+		b.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>first unseen: 2</button>`);
+
+		b.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, `<button>first unseen:</button>`);
+
+		assert.deepEqual(normalise_inspect_logs(logs), [
+			[0, 1, 2],
+			[1, 2],
+			'at SvelteSet.add',
+			[2],
+			'at SvelteSet.add',
+			[],
+			'at SvelteSet.add'
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-derived-4/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-derived-4/main.svelte
new file mode 100644
index 0000000000..eb4ea891db
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-derived-4/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import {SvelteSet} from "svelte/reactivity";
+	const ids = [0,1,2];
+	const seenIds = new SvelteSet();
+
+	const unseenIds = $derived(ids.filter((id) => !seenIds.has(id)));
+	
+	const currentId = $derived(unseenIds.at(0));
+	$inspect(unseenIds)
+</script>
+
+<button onclick={() => seenIds.add(currentId)}>
+	first unseen: {currentId}
+</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-derived-if-destroy/List.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-derived-if-destroy/List.svelte
new file mode 100644
index 0000000000..c73ac9a99d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-derived-if-destroy/List.svelte
@@ -0,0 +1,11 @@
+<script>
+	let {things} = $props();
+	
+	$inspect(things);
+</script>
+
+<ul>
+	{#each things as thing}
+		<li>thing {thing.id}</li>
+	{/each}
+</ul>
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-derived-if-destroy/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-derived-if-destroy/_config.js
new file mode 100644
index 0000000000..c29022c9dc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-derived-if-destroy/_config.js
@@ -0,0 +1,21 @@
+import { normalise_inspect_logs } from '../../../helpers';
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	async test({ assert, target, errors, logs }) {
+		const button = target.querySelector('button');
+
+		flushSync(() => {
+			button?.click();
+		});
+
+		assert.htmlEqual(target.innerHTML, '<button>clear</button>');
+		assert.equal(errors.length, 0);
+		assert.deepEqual(normalise_inspect_logs(logs), [[{ id: 1 }, { id: 2 }]]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-derived-if-destroy/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-derived-if-destroy/main.svelte
new file mode 100644
index 0000000000..89e09f417b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-derived-if-destroy/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import List from "./List.svelte"
+	
+	let data = $state({things: [{id:1}, {id:2}]})
+	
+  function reloadData() {
+		data = null
+	}
+</script>
+
+{#if data}
+  <List things={data.things.map((t) => t)} />
+{/if}
+
+<button onclick={() => reloadData()}>clear</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-exception/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-exception/_config.js
index 57caf6e08d..83e0eb9443 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect-exception/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-exception/_config.js
@@ -6,11 +6,12 @@ export default test({
 		dev: true
 	},
 
-	async test({ assert, target, logs }) {
+	async test({ assert, target, logs, errors }) {
 		const b1 = target.querySelector('button');
 		b1?.click();
 		flushSync();
 
+		assert.equal(errors.length, 0);
 		assert.deepEqual(logs, ['init', 'a', 'init', 'b']);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-map-set/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-map-set/_config.js
index 2052cb7f13..2f91e84288 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect-map-set/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-map-set/_config.js
@@ -1,5 +1,6 @@
 import { flushSync } from 'svelte';
 import { test } from '../../test';
+import { normalise_inspect_logs } from '../../../helpers.js';
 
 export default test({
 	compileOptions: {
@@ -12,15 +13,13 @@ export default test({
 		btn2.click();
 		flushSync();
 
-		assert.deepEqual(logs, [
-			'init',
+		assert.deepEqual(normalise_inspect_logs(logs), [
 			new Map(),
-			'init',
 			new Set(),
-			'update',
 			new Map([['a', 'a']]),
-			'update',
-			new Set(['a'])
+			'at SvelteMap.set',
+			new Set(['a']),
+			'at SvelteSet.add'
 		]);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-multiple/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-multiple/_config.js
index fc9a0cda9a..c46576de22 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect-multiple/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-multiple/_config.js
@@ -1,3 +1,4 @@
+import { normalise_inspect_logs } from '../../../helpers.js';
 import { test } from '../../test';
 
 export default test({
@@ -11,6 +12,15 @@ export default test({
 		b2.click();
 		await Promise.resolve();
 
-		assert.deepEqual(logs, ['init', 0, 0, 'update', 1, 0, 'update', 1, 1]);
+		assert.deepEqual(normalise_inspect_logs(logs), [
+			0,
+			0,
+			1,
+			0,
+			'at HTMLButtonElement.click',
+			1,
+			1,
+			'at HTMLButtonElement.click_1'
+		]);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-nested-effect/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-nested-effect/_config.js
index 82429e5e36..86e65d5044 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect-nested-effect/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-nested-effect/_config.js
@@ -1,3 +1,4 @@
+import { normalise_inspect_logs } from '../../../helpers.js';
 import { test } from '../../test';
 
 export default test({
@@ -6,6 +7,6 @@ export default test({
 	},
 
 	async test({ assert, logs }) {
-		assert.deepEqual(logs, ['init', 0, 'update', 1]);
+		assert.deepEqual(normalise_inspect_logs(logs), [0, 1, 'at $effect']);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-nested-state/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-nested-state/_config.js
index e4d9fb5013..9f012c0f29 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect-nested-state/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-nested-state/_config.js
@@ -1,3 +1,4 @@
+import { normalise_inspect_logs } from '../../../helpers.js';
 import { test } from '../../test';
 
 export default test({
@@ -10,13 +11,12 @@ export default test({
 		b1.click();
 		await Promise.resolve();
 
-		assert.deepEqual(logs, [
-			'init',
+		assert.deepEqual(normalise_inspect_logs(logs), [
 			{ x: { count: 0 } },
 			[{ count: 0 }],
-			'update',
 			{ x: { count: 1 } },
-			[{ count: 1 }]
+			[{ count: 1 }],
+			'at HTMLButtonElement.click'
 		]);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-new-property/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-new-property/_config.js
index a85972a0f9..36a9298fa1 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect-new-property/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-new-property/_config.js
@@ -1,3 +1,4 @@
+import { normalise_inspect_logs } from '../../../helpers.js';
 import { test } from '../../test';
 
 export default test({
@@ -10,6 +11,13 @@ export default test({
 		btn.click();
 		await Promise.resolve();
 
-		assert.deepEqual(logs, ['init', {}, 'init', [], 'update', { x: 'hello' }, 'update', ['hello']]);
+		assert.deepEqual(normalise_inspect_logs(logs), [
+			{},
+			[],
+			{ x: 'hello' },
+			'at HTMLButtonElement.click',
+			['hello'],
+			'at HTMLButtonElement.click'
+		]);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-recursive-2/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-recursive-2/_config.js
index ab49697195..1bfc2dc68f 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect-recursive-2/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-recursive-2/_config.js
@@ -18,6 +18,6 @@ export default test({
 		};
 		b.a.b = b;
 
-		assert.deepEqual(logs, ['init', a, 'init', b]);
+		assert.deepEqual(logs, [a, b]);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-recursive-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-recursive-2/main.svelte
index f7874d2192..23a1c237c3 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect-recursive-2/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-recursive-2/main.svelte
@@ -1,21 +1,15 @@
 <script>
 	class A {
-		toJSON(){
-			return {
-				a: this
-			}
+		constructor() {
+			this.a = this;
 		}
 	}
 	const state = $state(new A());
 	$inspect(state);
 
 	class B {
-		toJSON(){
-			return {
-				a: {
-					b: this
-				}
-			}
+		constructor() {
+			this.a = { b: this };
 		}
 	}
 	const state2 = $state(new B());
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-recursive/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-recursive/_config.js
index e35917b1f3..199411ed84 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect-recursive/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-recursive/_config.js
@@ -1,3 +1,4 @@
+import { normalise_inspect_logs } from '../../../helpers.js';
 import { test } from '../../test';
 
 export default test({
@@ -11,6 +12,12 @@ export default test({
 		btn.click();
 		await Promise.resolve();
 
-		assert.deepEqual(logs, ['init', [], 'update', [{}], 'update', [{}, {}]]);
+		assert.deepEqual(normalise_inspect_logs(logs), [
+			[],
+			[{}],
+			'at HTMLButtonElement.click',
+			[{}, {}],
+			'at HTMLButtonElement.click'
+		]);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-state-unsafe-mutation/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-state-unsafe-mutation/_config.js
new file mode 100644
index 0000000000..dcf3a8bc3d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-state-unsafe-mutation/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	error: 'state_unsafe_mutation',
+
+	// silence the logs
+	test({ logs }) {}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-state-unsafe-mutation/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-state-unsafe-mutation/main.svelte
new file mode 100644
index 0000000000..3361087ff7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-state-unsafe-mutation/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	let a = $state(0);
+
+	let b = $state(0);
+
+	$inspect(a).with((...args)=>{
+		console.log(...args);
+		b++;
+	});
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-circular-reference/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-trace-circular-reference/_config.js
new file mode 100644
index 0000000000..ca81c7854a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-circular-reference/_config.js
@@ -0,0 +1,26 @@
+import { test } from '../../test';
+import { normalise_trace_logs } from '../../../helpers.js';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	test({ assert, logs }) {
+		const files = { id: 1, items: [{ id: 2, items: [{ id: 3 }, { id: 4 }] }] };
+		// @ts-expect-error
+		files.items[0].parent = files;
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'test (main.svelte:5:4)' },
+			{ log: '$state', highlighted: true },
+			{ log: 'filesState.files', highlighted: false },
+			{ log: files },
+			{ log: '$state', highlighted: true },
+			{ log: 'filesState.files.items[0].parent.items', highlighted: false },
+			{ log: files.items },
+			{ log: '$state', highlighted: true },
+			{ log: 'filesState.files.items[0].parent.items[0]', highlighted: false },
+			{ log: files.items[0] }
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-circular-reference/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-trace-circular-reference/main.svelte
new file mode 100644
index 0000000000..7640d48f77
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-circular-reference/main.svelte
@@ -0,0 +1,10 @@
+<script>
+    const filesState = $state({ files: {} });
+    let nodes = { id: 1, items: [{ id: 2, items: [{ id: 3 }, { id: 4 }] }] };
+    filesState.files = nodes;
+    function test() {
+        $inspect.trace();
+        filesState.files.items[0].parent = filesState.files;
+    }
+    $effect(test);
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-class/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-trace-class/_config.js
new file mode 100644
index 0000000000..98b3fb6cbc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-class/_config.js
@@ -0,0 +1,31 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+import { normalise_trace_logs } from '../../../helpers.js';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	test({ assert, target, logs }) {
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'effect' },
+			{ log: '$state', highlighted: true },
+			{ log: 'Counter.#count', highlighted: false },
+			{ log: 0 }
+		]);
+
+		logs.length = 0;
+
+		const button = target.querySelector('button');
+		button?.click();
+		flushSync();
+
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'effect' },
+			{ log: '$state', highlighted: true },
+			{ log: 'Counter.#count', highlighted: false },
+			{ log: 1 }
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-class/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-trace-class/main.svelte
new file mode 100644
index 0000000000..56bd497e09
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-class/main.svelte
@@ -0,0 +1,28 @@
+<script>
+	class Counter {
+		#count;
+
+		constructor() {
+			this.#count = $state(0);
+		}
+
+		get count() {
+			return this.#count;
+		}
+
+		increment = () => {
+			this.#count += 1;
+		}
+	}
+
+	const counter = new Counter();
+
+	$effect(() => {
+		$inspect.trace('effect');
+		counter.count;
+	});
+</script>
+
+<button onclick={counter.increment}>
+	clicks: {counter.count}
+</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-each/Entry.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-trace-each/Entry.svelte
new file mode 100644
index 0000000000..a22f006dcc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-each/Entry.svelte
@@ -0,0 +1,8 @@
+<script>
+	let { entry } = $props();
+
+	$effect(() => {
+		$inspect.trace('effect');
+		entry;
+	});
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-each/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-trace-each/_config.js
new file mode 100644
index 0000000000..94cd9d8aaf
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-each/_config.js
@@ -0,0 +1,40 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+import { normalise_trace_logs } from '../../../helpers.js';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	test({ assert, target, logs }) {
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'effect' },
+			{ log: '$state', highlighted: true },
+			{ log: 'array', highlighted: false },
+			{ log: [{ id: 1, hi: true }] },
+			// this _doesn't_ appear in the browser, but it does appear during tests
+			// and i cannot for the life of me figure out why. this does at least
+			// test that we don't log `array[0].id` etc
+			{ log: '$state', highlighted: true },
+			{ log: 'array[0]', highlighted: false },
+			{ log: { id: 1, hi: true } }
+		]);
+
+		logs.length = 0;
+
+		const button = target.querySelector('button');
+		button?.click();
+		flushSync();
+
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'effect' },
+			{ log: '$state', highlighted: true },
+			{ log: 'array', highlighted: false },
+			{ log: [{ id: 1, hi: false }] },
+			{ log: '$state', highlighted: false },
+			{ log: 'array[0]', highlighted: false },
+			{ log: { id: 1, hi: false } }
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-each/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-trace-each/main.svelte
new file mode 100644
index 0000000000..e89ee7d9bc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-each/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Entry from './Entry.svelte';
+
+	let array = $state([{ id: 1, hi: true }]);
+</script>
+
+<button onclick={() => array = [{ id: 1, hi: false}]}>update</button>
+
+{#each array as entry (entry.id)}
+	<Entry {entry} />
+{/each}
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-nested/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-trace-nested/_config.js
new file mode 100644
index 0000000000..5957d2cc6a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-nested/_config.js
@@ -0,0 +1,35 @@
+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 }) {
+		// initial log, everything is highlighted
+
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'iife' },
+			{ log: '$state', highlighted: true },
+			{ log: 'count', highlighted: false },
+			{ log: 0 },
+			{ log: 'effect' }
+		]);
+
+		logs.length = 0;
+
+		const button = target.querySelector('button');
+		button?.click();
+		flushSync();
+
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'iife' },
+			{ log: '$state', highlighted: true },
+			{ log: 'count', highlighted: false },
+			{ log: 1 },
+			{ log: 'effect' }
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-nested/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-trace-nested/main.svelte
new file mode 100644
index 0000000000..f60fb0438c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-nested/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	let count = $state(0);
+
+	$effect(() => {
+		$inspect.trace('effect');
+		(()=>{
+			$inspect.trace("iife");
+			count;
+		})();
+	});
+</script>
+
+<button onclick={() => count++}>{count}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-null/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-trace-null/_config.js
new file mode 100644
index 0000000000..7982e8c1c6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-null/_config.js
@@ -0,0 +1,12 @@
+import { assert } from 'vitest';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	test({ logs }) {
+		assert.ok(logs.length > 0);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-null/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-trace-null/main.svelte
new file mode 100644
index 0000000000..30eb95f124
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-null/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	let count = $state(null);
+	$effect(() => {
+		$inspect.trace();
+		count;
+	});
+</script>
+
+<button onclick={()=>count++}>{count}</button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-reassignment/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-trace-reassignment/_config.js
new file mode 100644
index 0000000000..b4f2cf3691
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-reassignment/_config.js
@@ -0,0 +1,56 @@
+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 }) {
+		// initial log, everything is highlighted
+
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'effect' },
+			{ log: '$state', highlighted: true },
+			{ log: 'checked', highlighted: false },
+			{ log: false }
+		]);
+
+		logs.length = 0;
+
+		const button = target.querySelector('button');
+		button?.click();
+		flushSync();
+
+		const input = target.querySelector('input');
+		input?.click();
+		flushSync();
+
+		// checked changed, effect reassign state, values should be correct and be correctly highlighted
+
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'effect' },
+			{ log: '$state', highlighted: true },
+			{ log: 'checked', highlighted: false },
+			{ log: true },
+			{ log: '$state', highlighted: true },
+			{ log: 'count', highlighted: false },
+			{ log: 2 },
+			{ log: 'effect' },
+			{ log: '$state', highlighted: false },
+			{ log: 'checked', highlighted: false },
+			{ log: true },
+			{ log: '$state', highlighted: true },
+			{ log: 'count', highlighted: false },
+			{ log: 3 },
+			{ log: 'effect' },
+			{ log: '$state', highlighted: false },
+			{ log: 'checked', highlighted: false },
+			{ log: true },
+			{ log: '$state', highlighted: true },
+			{ log: 'count', highlighted: false },
+			{ log: 3 }
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-reassignment/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-trace-reassignment/main.svelte
new file mode 100644
index 0000000000..5028c0f251
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-reassignment/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	let count = $state(0);
+	let checked = $state(false);
+
+	$effect(() => {
+		$inspect.trace("effect");
+		if(checked && count > 0 && count < 3){
+			let old = count;
+			// this should not show up in the logs
+			count = 1000;
+			count = old + 1;
+		}
+	});
+</script>
+<input type="checkbox" bind:checked />
+<button onclick={()=>{
+	count++;
+}}>{count}</button>
\ No newline at end of file
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/inspect-trace/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-trace/_config.js
index 517e11d74e..8e9204c90f 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect-trace/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace/_config.js
@@ -1,26 +1,6 @@
 import { flushSync } from 'svelte';
 import { test } from '../../test';
-
-/**
- * @param {any[]} logs
- */
-function normalise_trace_logs(logs) {
-	let normalised = [];
-	for (let i = 0; i < logs.length; i++) {
-		const log = logs[i];
-
-		if (typeof log === 'string' && log.includes('%c')) {
-			const split = log.split('%c');
-			normalised.push((split[0].length !== 0 ? split[0] : split[1]).trim());
-			i++;
-		} else if (log instanceof Error) {
-			continue;
-		} else {
-			normalised.push(log);
-		}
-	}
-	return normalised;
-}
+import { normalise_trace_logs } from '../../../helpers.js';
 
 export default test({
 	compileOptions: {
@@ -28,7 +8,20 @@ export default test({
 	},
 
 	test({ assert, target, logs }) {
-		assert.deepEqual(normalise_trace_logs(logs), ['effect', '$derived', 0, '$state', 0]);
+		// initial log, everything is highlighted
+
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'effect' },
+			{ log: '$derived', highlighted: true },
+			{ log: 'double', highlighted: false },
+			{ log: 0 },
+			{ log: '$state', highlighted: true },
+			{ log: 'count', highlighted: false },
+			{ log: 0 },
+			{ log: '$state', highlighted: true },
+			{ log: 'checked', highlighted: false },
+			{ log: false }
+		]);
 
 		logs.length = 0;
 
@@ -36,6 +29,57 @@ export default test({
 		button?.click();
 		flushSync();
 
-		assert.deepEqual(normalise_trace_logs(logs), ['effect', '$derived', 2, '$state', 1]);
+		// count changed, derived and state are highlighted, last state is not
+
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'effect' },
+			{ log: '$derived', highlighted: true },
+			{ log: 'double', highlighted: false },
+			{ log: 2 },
+			{ log: '$state', highlighted: true },
+			{ log: 'count', highlighted: false },
+			{ log: 1 },
+			{ log: '$state', highlighted: false },
+			{ log: 'checked', highlighted: false },
+			{ log: false }
+		]);
+
+		logs.length = 0;
+
+		const input = target.querySelector('input');
+		input?.click();
+		flushSync();
+
+		// checked changed, last state is highlighted, first two are not
+
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'effect' },
+			{ log: '$derived', highlighted: false },
+			{ log: 'double', highlighted: false },
+			{ log: 2 },
+			{ log: '$state', highlighted: false },
+			{ log: 'count', highlighted: false },
+			{ log: 1 },
+			{ log: '$state', highlighted: true },
+			{ log: 'checked', highlighted: false },
+			{ log: true }
+		]);
+
+		logs.length = 0;
+
+		button?.click();
+		flushSync();
+
+		// count change and derived it's >=4, checked is not in the dependencies anymore
+
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'effect' },
+			{ log: '$derived', highlighted: true },
+			{ log: 'double', highlighted: false },
+			{ log: 4 },
+			{ log: '$state', highlighted: true },
+			{ log: 'count', highlighted: false },
+			{ log: 2 }
+		]);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-trace/main.svelte
index 99c30a07bf..99f246aa73 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect-trace/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace/main.svelte
@@ -2,11 +2,15 @@
 	let count = $state(0);
 	let double = $derived(count * 2);
 
+	let checked = $state(false);
+
 	$effect(() => {
 		$inspect.trace('effect');
 
 		double;
-	})
+		double >= 4 || checked;
+	});
 </script>
 
 <button onclick={() => count++}>{double}</button>
+<input type="checkbox" bind:checked />
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-with-untracked/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-with-untracked/_config.js
new file mode 100644
index 0000000000..cdb242c416
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-with-untracked/_config.js
@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+	async test({ assert, target, logs }) {
+		const [a, b] = target.querySelectorAll('button');
+		assert.deepEqual(logs, ['init', 0]);
+		flushSync(() => {
+			b?.click();
+		});
+		assert.deepEqual(logs, ['init', 0]);
+		flushSync(() => {
+			a?.click();
+		});
+		assert.deepEqual(logs, ['init', 0, 'update', 1]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-with-untracked/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-with-untracked/main.svelte
new file mode 100644
index 0000000000..5bcf2bd348
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-with-untracked/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	let a = $state(0);
+
+	let b = $state(0);
+
+	$inspect(a).with((...args)=>{
+		console.log(...args);
+		b;
+	});
+</script>
+
+<button onclick={()=>a++}></button>
+<button onclick={()=>b++}></button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect/_config.js
index 09a921abee..117edc3ab4 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/inspect/_config.js
@@ -1,3 +1,4 @@
+import { normalise_inspect_logs } from '../../../helpers.js';
 import { test } from '../../test';
 
 export default test({
@@ -11,6 +12,6 @@ export default test({
 		b2.click();
 		await Promise.resolve();
 
-		assert.deepEqual(logs, ['init', 0, 'update', 1]);
+		assert.deepEqual(normalise_inspect_logs(logs), [0, 1, 'at HTMLButtonElement.click']);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/key-nan/_config.js b/packages/svelte/tests/runtime-runes/samples/key-nan/_config.js
new file mode 100644
index 0000000000..bd0dd06761
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/key-nan/_config.js
@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: '<button>update</button><p>it rendered</p>',
+
+	test({ assert, target, logs }) {
+		assert.deepEqual(logs, ['rendering']);
+
+		const btn = target.querySelector('button');
+		flushSync(() => btn?.click());
+
+		// should not re-render
+		assert.deepEqual(logs, ['rendering']);
+		assert.htmlEqual(target.innerHTML, '<button>update</button><p>it rendered</p>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/key-nan/main.svelte b/packages/svelte/tests/runtime-runes/samples/key-nan/main.svelte
new file mode 100644
index 0000000000..24f7f2d179
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/key-nan/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	let x = $state(NaN);
+</script>
+
+<button onclick={() => x = NaN}>update</button>
+
+{#key x}
+	{console.log('rendering')}
+	<p>it rendered</p>
+{/key}
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/_config.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/_config.js
new file mode 100644
index 0000000000..904fea3f65
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/_config.js
@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	compileOptions: {
+		runes: undefined
+	},
+	async test({ assert, target }) {
+		const p = target.querySelector('p');
+		const btn = target.querySelector('button');
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.equal(p?.innerHTML, '0');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/main.svelte b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/main.svelte
new file mode 100644
index 0000000000..cb5837dcd6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/main.svelte
@@ -0,0 +1,8 @@
+<svelte:options runes={false} />
+<script>
+	import { get, set } from "./test.svelte.js";
+</script>
+
+<p>{get()}</p>
+
+<button onclick={()=>set()}></button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/test.svelte.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/test.svelte.js
new file mode 100644
index 0000000000..f0e7181c29
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-explicit-false/test.svelte.js
@@ -0,0 +1,9 @@
+let count = $state(0);
+
+export function get() {
+	return count;
+}
+
+export function set() {
+	count++;
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/_config.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/_config.js
new file mode 100644
index 0000000000..904fea3f65
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/_config.js
@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	compileOptions: {
+		runes: undefined
+	},
+	async test({ assert, target }) {
+		const p = target.querySelector('p');
+		const btn = target.querySelector('button');
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.equal(p?.innerHTML, '0');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/main.svelte b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/main.svelte
new file mode 100644
index 0000000000..a7370b48d6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { get, set } from "./test.svelte.js";
+
+	$$props;
+</script>
+
+<p>{get()}</p>
+
+<button onclick={()=>set()}></button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/test.svelte.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/test.svelte.js
new file mode 100644
index 0000000000..f0e7181c29
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$props/test.svelte.js
@@ -0,0 +1,9 @@
+let count = $state(0);
+
+export function get() {
+	return count;
+}
+
+export function set() {
+	count++;
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/_config.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/_config.js
new file mode 100644
index 0000000000..904fea3f65
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/_config.js
@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	compileOptions: {
+		runes: undefined
+	},
+	async test({ assert, target }) {
+		const p = target.querySelector('p');
+		const btn = target.querySelector('button');
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.equal(p?.innerHTML, '0');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/main.svelte b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/main.svelte
new file mode 100644
index 0000000000..ccf9bd2864
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { get, set } from "./test.svelte.js";
+
+	$$restProps;
+</script>
+
+<p>{get()}</p>
+
+<button onclick={()=>set()}></button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/test.svelte.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/test.svelte.js
new file mode 100644
index 0000000000..f0e7181c29
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-$$restProps/test.svelte.js
@@ -0,0 +1,9 @@
+let count = $state(0);
+
+export function get() {
+	return count;
+}
+
+export function set() {
+	count++;
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/_config.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/_config.js
new file mode 100644
index 0000000000..2d72de6d13
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/_config.js
@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	compileOptions: {
+		runes: undefined
+	},
+	async test({ assert, target }) {
+		const p = target.querySelector('p');
+		const btn = target.querySelector('button');
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.equal(p?.innerHTML, '1');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/main.svelte b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/main.svelte
new file mode 100644
index 0000000000..49aef81518
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { get, set } from "./test.svelte.js";
+
+	export const x = 42;
+</script>
+
+<p>{get()}</p>
+
+<button onclick={()=>set()}></button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/test.svelte.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/test.svelte.js
new file mode 100644
index 0000000000..f0e7181c29
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-const/test.svelte.js
@@ -0,0 +1,9 @@
+let count = $state(0);
+
+export function get() {
+	return count;
+}
+
+export function set() {
+	count++;
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/_config.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/_config.js
new file mode 100644
index 0000000000..c4cff665d2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/_config.js
@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	compileOptions: {
+		runes: undefined
+	},
+	async test({ assert, target, logs }) {
+		const p = target.querySelector('p');
+		const btn = target.querySelector('button');
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.equal(p?.innerHTML, '0');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/main.svelte b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/main.svelte
new file mode 100644
index 0000000000..f7cd0ede2e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { get, set } from "./test.svelte.js";
+
+	$: console.log("");
+</script>
+
+<p>{get()}</p>
+
+<button onclick={()=>set()}></button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/test.svelte.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/test.svelte.js
new file mode 100644
index 0000000000..f0e7181c29
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-labeled/test.svelte.js
@@ -0,0 +1,9 @@
+let count = $state(0);
+
+export function get() {
+	return count;
+}
+
+export function set() {
+	count++;
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/_config.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/_config.js
new file mode 100644
index 0000000000..904fea3f65
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/_config.js
@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	compileOptions: {
+		runes: undefined
+	},
+	async test({ assert, target }) {
+		const p = target.querySelector('p');
+		const btn = target.querySelector('button');
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.equal(p?.innerHTML, '0');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/main.svelte
new file mode 100644
index 0000000000..36becde4a3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { get, set } from "./test.svelte.js";
+
+	export let x = 42;
+</script>
+
+{x}
+<p>{get()}</p>
+
+<button onclick={()=>set()}></button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/test.svelte.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/test.svelte.js
new file mode 100644
index 0000000000..f0e7181c29
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let-2/test.svelte.js
@@ -0,0 +1,9 @@
+let count = $state(0);
+
+export function get() {
+	return count;
+}
+
+export function set() {
+	count++;
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/_config.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/_config.js
new file mode 100644
index 0000000000..904fea3f65
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/_config.js
@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	compileOptions: {
+		runes: undefined
+	},
+	async test({ assert, target }) {
+		const p = target.querySelector('p');
+		const btn = target.querySelector('button');
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.equal(p?.innerHTML, '0');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/main.svelte b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/main.svelte
new file mode 100644
index 0000000000..1449b7d582
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { get, set } from "./test.svelte.js";
+
+	let x = 42;
+
+	export { x };
+</script>
+
+{x}
+<p>{get()}</p>
+
+<button onclick={()=>set()}></button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/test.svelte.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/test.svelte.js
new file mode 100644
index 0000000000..f0e7181c29
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous-export-let/test.svelte.js
@@ -0,0 +1,9 @@
+let count = $state(0);
+
+export function get() {
+	return count;
+}
+
+export function set() {
+	count++;
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/_config.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/_config.js
new file mode 100644
index 0000000000..2d72de6d13
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/_config.js
@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	compileOptions: {
+		runes: undefined
+	},
+	async test({ assert, target }) {
+		const p = target.querySelector('p');
+		const btn = target.querySelector('button');
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.equal(p?.innerHTML, '1');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/main.svelte b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/main.svelte
new file mode 100644
index 0000000000..698a852ac9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { get, set } from "./test.svelte.js";
+</script>
+
+<p>{get()}</p>
+
+<button onclick={()=>set()}></button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/test.svelte.js b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/test.svelte.js
new file mode 100644
index 0000000000..f0e7181c29
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/legacy-runes-ambiguous/test.svelte.js
@@ -0,0 +1,9 @@
+let count = $state(0);
+
+export function get() {
+	return count;
+}
+
+export function set() {
+	count++;
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-2/_config.js b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-2/_config.js
index 1066d9a2df..cb8e648645 100644
--- a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-2/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-2/_config.js
@@ -10,7 +10,6 @@ export default test({
 		assert.deepEqual(logs, [
 			'parent: $effect.pre 0',
 			'parent: $effect.pre (2) 0',
-			'parent: render 0',
 			'1: $effect.pre 0',
 			'1: $effect.pre (2) 0',
 			'1: render 0',
@@ -20,6 +19,7 @@ export default test({
 			'3: $effect.pre 0',
 			'3: $effect.pre (2) 0',
 			'3: render 0',
+			'parent: render 0',
 			'1: $effect 0',
 			'2: $effect 0',
 			'3: $effect 0',
@@ -33,7 +33,6 @@ export default test({
 		assert.deepEqual(logs, [
 			'parent: $effect.pre 1',
 			'parent: $effect.pre (2) 1',
-			'parent: render 1',
 			'1: $effect.pre 1',
 			'1: $effect.pre (2) 1',
 			'1: render 1',
@@ -43,6 +42,7 @@ export default test({
 			'3: $effect.pre 1',
 			'3: $effect.pre (2) 1',
 			'3: render 1',
+			'parent: render 1',
 			'1: $effect 1',
 			'2: $effect 1',
 			'3: $effect 1',
diff --git a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-3/_config.js b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-3/_config.js
index 55847c35a2..6c063bcb3e 100644
--- a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-3/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-3/_config.js
@@ -8,13 +8,13 @@ export default test({
 
 	async test({ assert, component, logs }) {
 		assert.deepEqual(logs, [
-			'parent: render 0',
 			'1: $effect.pre 0',
 			'1: render 0',
 			'2: $effect.pre 0',
 			'2: render 0',
 			'3: $effect.pre 0',
 			'3: render 0',
+			'parent: render 0',
 			'1: $effect 0',
 			'2: $effect 0',
 			'3: $effect 0',
@@ -26,13 +26,13 @@ export default test({
 		flushSync(() => (component.n += 1));
 
 		assert.deepEqual(logs, [
-			'parent: render 1',
 			'1: $effect.pre 1',
 			'1: render 1',
 			'2: $effect.pre 1',
 			'2: render 1',
 			'3: $effect.pre 1',
 			'3: render 1',
+			'parent: render 1',
 			'1: $effect 1',
 			'2: $effect 1',
 			'3: $effect 1',
diff --git a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-4/_config.js b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-4/_config.js
index 0cd7e15a37..29b0b67a52 100644
--- a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-4/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children-4/_config.js
@@ -10,7 +10,6 @@ export default test({
 		assert.deepEqual(logs, [
 			'parent: $effect.pre 0',
 			'parent: nested $effect.pre 0',
-			'parent: render 0',
 			'1: $effect.pre 0',
 			'1: nested $effect.pre 0',
 			'1: render 0',
@@ -20,6 +19,7 @@ export default test({
 			'3: $effect.pre 0',
 			'3: nested $effect.pre 0',
 			'3: render 0',
+			'parent: render 0',
 			'1: $effect 0',
 			'2: $effect 0',
 			'3: $effect 0',
@@ -33,7 +33,6 @@ export default test({
 		assert.deepEqual(logs, [
 			'parent: $effect.pre 1',
 			'parent: nested $effect.pre 1',
-			'parent: render 1',
 			'1: $effect.pre 1',
 			'1: nested $effect.pre 1',
 			'1: render 1',
@@ -43,6 +42,7 @@ export default test({
 			'3: $effect.pre 1',
 			'3: nested $effect.pre 1',
 			'3: render 1',
+			'parent: render 1',
 			'1: $effect 1',
 			'2: $effect 1',
 			'3: $effect 1',
diff --git a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children/_config.js b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children/_config.js
index 19b8fb3938..3138ec7231 100644
--- a/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/lifecycle-render-order-for-children/_config.js
@@ -9,13 +9,13 @@ export default test({
 	async test({ assert, component, logs }) {
 		assert.deepEqual(logs, [
 			'parent: $effect.pre 0',
-			'parent: render 0',
 			'1: $effect.pre 0',
 			'1: render 0',
 			'2: $effect.pre 0',
 			'2: render 0',
 			'3: $effect.pre 0',
 			'3: render 0',
+			'parent: render 0',
 			'1: $effect 0',
 			'2: $effect 0',
 			'3: $effect 0',
@@ -28,13 +28,13 @@ export default test({
 
 		assert.deepEqual(logs, [
 			'parent: $effect.pre 1',
-			'parent: render 1',
 			'1: $effect.pre 1',
 			'1: render 1',
 			'2: $effect.pre 1',
 			'2: render 1',
 			'3: $effect.pre 1',
 			'3: render 1',
+			'parent: render 1',
 			'1: $effect 1',
 			'2: $effect 1',
 			'3: $effect 1',
diff --git a/packages/svelte/tests/runtime-runes/samples/media-query/_config.js b/packages/svelte/tests/runtime-runes/samples/media-query/_config.js
index f7a4ca05f5..d8b202955a 100644
--- a/packages/svelte/tests/runtime-runes/samples/media-query/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/media-query/_config.js
@@ -5,5 +5,10 @@ export default test({
 	async test({ window }) {
 		expect(window.matchMedia).toHaveBeenCalledWith('(max-width: 599px), (min-width: 900px)');
 		expect(window.matchMedia).toHaveBeenCalledWith('(min-width: 900px)');
+		expect(window.matchMedia).toHaveBeenCalledWith('screen');
+		expect(window.matchMedia).toHaveBeenCalledWith('not print');
+		expect(window.matchMedia).toHaveBeenCalledWith('screen,print');
+		expect(window.matchMedia).toHaveBeenCalledWith('screen,      print');
+		expect(window.matchMedia).toHaveBeenCalledWith('screen,      random');
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/media-query/main.svelte b/packages/svelte/tests/runtime-runes/samples/media-query/main.svelte
index 446a9213dd..fe07ed8ab0 100644
--- a/packages/svelte/tests/runtime-runes/samples/media-query/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/media-query/main.svelte
@@ -3,4 +3,9 @@
 
 	const mq = new MediaQuery("(max-width: 599px), (min-width: 900px)");
 	const mq2 = new MediaQuery("min-width: 900px");
+	const mq3 = new MediaQuery("screen");
+	const mq4 = new MediaQuery("not print");
+	const mq5 = new MediaQuery("screen,print");
+	const mq6 = new MediaQuery("screen,      print");
+	const mq7 = new MediaQuery("screen,      random");
 </script>
diff --git a/packages/svelte/tests/runtime-runes/samples/mount-props-updates/_config.js b/packages/svelte/tests/runtime-runes/samples/mount-props-updates/_config.js
index ff7af2d524..57e4d276ff 100644
--- a/packages/svelte/tests/runtime-runes/samples/mount-props-updates/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/mount-props-updates/_config.js
@@ -22,7 +22,7 @@ export default test({
 			target.innerHTML,
 			// bar is not set in the parent because it's a readonly property
 			// baz is not set in the parent because while it's a bindable property,
-			// it wasn't set initially so it's treated as a readonly proeprty
+			// it wasn't set initially so it's treated as a readonly property
 			`
 			<button>reset</button> foo 3
 			<div><button>update</button> 1 2 3 4</div>
diff --git a/packages/svelte/tests/runtime-runes/samples/muted-without-bind-works/_config.js b/packages/svelte/tests/runtime-runes/samples/muted-without-bind-works/_config.js
new file mode 100644
index 0000000000..cc4dfb37f0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/muted-without-bind-works/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const btn = target.querySelector('button');
+		ok(btn);
+		flushSync(() => {
+			btn.click();
+		});
+		assert.deepEqual(logs, [true]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/muted-without-bind-works/main.svelte b/packages/svelte/tests/runtime-runes/samples/muted-without-bind-works/main.svelte
new file mode 100644
index 0000000000..646334c1ec
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/muted-without-bind-works/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	let muted = $state(false);
+		
+	function volume_change(node){		
+		node.addEventListener("volumechange", () => {
+			console.log(node.muted);
+		});
+	}
+</script>
+
+<audio use:volume_change {muted}></audio>
+<button onclick={() => (muted = !muted)}></button>
+
diff --git a/packages/svelte/tests/runtime-runes/samples/nested-effect-conflict/_config.js b/packages/svelte/tests/runtime-runes/samples/nested-effect-conflict/_config.js
index a8c16b7008..eb631bc9f4 100644
--- a/packages/svelte/tests/runtime-runes/samples/nested-effect-conflict/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/nested-effect-conflict/_config.js
@@ -10,14 +10,6 @@ export default test({
 		});
 
 		await Promise.resolve();
-		assert.deepEqual(logs, [
-			'top level',
-			'inner',
-			0,
-			'destroy inner',
-			undefined,
-			'destroy outer',
-			undefined
-		]);
+		assert.deepEqual(logs, ['top level', 'inner', 0, 'destroy inner', 0, 'destroy outer', 0]);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/new-branch-reschedule-2/_config.js b/packages/svelte/tests/runtime-runes/samples/new-branch-reschedule-2/_config.js
new file mode 100644
index 0000000000..0d319b7274
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/new-branch-reschedule-2/_config.js
@@ -0,0 +1,46 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const [open, close, increment] = target.querySelectorAll('button');
+
+		open.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>Open</button>
+				<button>Close</button>
+				<button>0</button>
+				<div>open (width: 42)</div>
+			`
+		);
+
+		increment.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>Open</button>
+				<button>Close</button>
+				<button>1</button>
+				<div>open (width: 42)</div>
+			`
+		);
+
+		close.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>Open</button>
+				<button>Close</button>
+				<button>1</button>
+				<div>closed</div>
+			`
+		);
+
+		assert.deepEqual(logs, ['effect ran']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/new-branch-reschedule-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/new-branch-reschedule-2/main.svelte
new file mode 100644
index 0000000000..38a88a0bca
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/new-branch-reschedule-2/main.svelte
@@ -0,0 +1,37 @@
+<script module>
+	let active = $state(false);
+	let panelWidth = $state(null);
+
+	const store = {
+		get active() { return active; },
+		open() { active = true; },
+		close() { active = false; },
+		// This getter lazily writes $state on first read
+		get panelWidth() {
+			if (panelWidth === null) panelWidth = 42;
+
+			$effect(() => {
+				console.log('effect ran');
+			});
+
+			return panelWidth;
+		}
+	};
+</script>
+
+<script>
+	let counter = $state(0);
+</script>
+
+<button onclick={() => store.open()}>Open</button>
+<button onclick={() => store.close()}>Close</button>
+<button onclick={() => counter++}>{counter}</button>
+
+<div>
+	{#if store.active}
+		open (width: {store.panelWidth})
+	{:else}
+		closed
+	{/if}
+</div>
+ 
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/new-branch-reschedule/_config.js b/packages/svelte/tests/runtime-runes/samples/new-branch-reschedule/_config.js
new file mode 100644
index 0000000000..5ebc278f0b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/new-branch-reschedule/_config.js
@@ -0,0 +1,44 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [open, close, increment] = target.querySelectorAll('button');
+
+		open.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>Open</button>
+				<button>Close</button>
+				<button>0</button>
+				<div>open (width: 42)</div>
+			`
+		);
+
+		increment.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>Open</button>
+				<button>Close</button>
+				<button>1</button>
+				<div>open (width: 42)</div>
+			`
+		);
+
+		close.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>Open</button>
+				<button>Close</button>
+				<button>1</button>
+				<div>closed</div>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/new-branch-reschedule/main.svelte b/packages/svelte/tests/runtime-runes/samples/new-branch-reschedule/main.svelte
new file mode 100644
index 0000000000..55b5baf62c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/new-branch-reschedule/main.svelte
@@ -0,0 +1,31 @@
+<script module>
+	let active = $state(false);
+	let panelWidth = $state(null);
+
+	const store = {
+		get active() { return active; },
+		open() { active = true; },
+		close() { active = false; },
+		// This getter lazily writes $state on first read
+		get panelWidth() {
+			if (panelWidth === null) panelWidth = 42;
+			return panelWidth;
+		}
+	};
+</script>
+
+<script>
+	let counter = $state(0);
+</script>
+
+<button onclick={() => store.open()}>Open</button>
+<button onclick={() => store.close()}>Close</button>
+<button onclick={() => counter++}>{counter}</button>
+
+<div>
+	{#if store.active}
+		open (width: {store.panelWidth})
+	{:else}
+		closed
+	{/if}
+</div>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/non-configurable-errors/_config.js b/packages/svelte/tests/runtime-runes/samples/non-configurable-errors/_config.js
new file mode 100644
index 0000000000..5bbe4483d3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/non-configurable-errors/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+	error: 'test'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/non-configurable-errors/main.svelte b/packages/svelte/tests/runtime-runes/samples/non-configurable-errors/main.svelte
new file mode 100644
index 0000000000..f71a5e6c43
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/non-configurable-errors/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	class CustomError extends Error {
+	  constructor() {
+	    super();
+	    Object.defineProperty(this, "message", {
+			value: "test"
+		});
+	  }
+	}
+	throw new CustomError()
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/non-error-boundary-preserve-on-error/_config.js b/packages/svelte/tests/runtime-runes/samples/non-error-boundary-preserve-on-error/_config.js
new file mode 100644
index 0000000000..7654cf1360
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/non-error-boundary-preserve-on-error/_config.js
@@ -0,0 +1,20 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	test({ assert, target }) {
+		const [button] = target.querySelectorAll('button');
+
+		assert.throws(() => {
+			flushSync(() => button.click());
+		}, /oops/);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>throw</button>
+				<p>some content</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/non-error-boundary-preserve-on-error/main.svelte b/packages/svelte/tests/runtime-runes/samples/non-error-boundary-preserve-on-error/main.svelte
new file mode 100644
index 0000000000..1c3f062b43
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/non-error-boundary-preserve-on-error/main.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	let should_throw = $state(false);
+
+	function throw_error() {
+		throw new Error('oops');
+	}
+</script>
+
+<button onclick={() => should_throw = true}>
+	throw
+</button>
+
+<svelte:boundary>
+	<p>some content</p>
+
+	{#if should_throw}
+		{throw_error()}
+	{/if}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-discouraged/_config.js b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-discouraged/_config.js
index 62c6961242..8452661026 100644
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-discouraged/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-discouraged/_config.js
@@ -10,7 +10,7 @@ export default test({
 
 	test({ assert, target, warnings }) {
 		const warning =
-			'Counter.svelte mutated a value owned by main.svelte. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead';
+			'Mutating unbound props (`object`, at Counter.svelte:5:23) is strongly discouraged. Consider using `bind:object={...}` in main.svelte (or using a callback) instead';
 		const [btn1, btn2] = target.querySelectorAll('button');
 
 		btn1.click();
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-global-2/child.svelte b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-global-2/child.svelte
deleted file mode 100644
index 13de753647..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-global-2/child.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script module>
-	let toast1 = $state();
-	let toast2 = $state({});
-
-	export async function show_toast() {
-		toast1 = {
-			message: 'foo',
-			show: true
-		};
-		toast1.show = false;
-
-		toast2 = {
-			message: 'foo',
-			show: true
-		};
-		toast2.show = false;
-	}
-</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-global-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-global-2/main.svelte
deleted file mode 100644
index 8a6922e9e2..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-global-2/main.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	import { show_toast } from "./child.svelte";
-
-	show_toast();
-</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner/_config.js b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-1/_config.js
similarity index 74%
rename from packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner/_config.js
rename to packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-1/_config.js
index c07b9ce129..96b18d1854 100644
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-1/_config.js
@@ -8,7 +8,7 @@ let warn;
 let warnings = [];
 
 export default test({
-	html: `<button>clicks: 0</button>`,
+	html: `<button>[]</button>`,
 
 	compileOptions: {
 		dev: true
@@ -34,8 +34,8 @@ export default test({
 			btn?.click();
 		});
 
-		assert.htmlEqual(target.innerHTML, `<button>clicks: 1</button>`);
+		assert.htmlEqual(target.innerHTML, `<button>[foo]</button>`);
 
-		assert.deepEqual(warnings, []);
+		assert.deepEqual(warnings, [], 'expected getContext to have widened ownership');
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-1/main.svelte b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-1/main.svelte
new file mode 100644
index 0000000000..2dd7cab141
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-1/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { setContext } from 'svelte';
+	import Sub from './sub.svelte';
+
+	let list = $state([]);
+	setContext('list', list);
+</script>
+
+<Sub />
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-3/sub.svelte b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-1/sub.svelte
similarity index 100%
rename from packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-3/sub.svelte
rename to packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-1/sub.svelte
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-2/_config.js b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-2/_config.js
index c07b9ce129..66f1726a2a 100644
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-2/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-2/_config.js
@@ -1,41 +1,24 @@
 import { flushSync } from 'svelte';
 import { test } from '../../test';
 
-/** @type {typeof console.warn} */
-let warn;
-
-/** @type {any[]} */
-let warnings = [];
-
 export default test({
-	html: `<button>clicks: 0</button>`,
-
 	compileOptions: {
 		dev: true
 	},
 
-	before_test: () => {
-		warn = console.warn;
-
-		console.warn = (...args) => {
-			warnings.push(...args);
-		};
-	},
+	test({ assert, target, warnings }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
 
-	after_test: () => {
-		console.warn = warn;
-		warnings = [];
-	},
+		flushSync(() => {
+			btn1.click();
+		});
 
-	test({ assert, target }) {
-		const btn = target.querySelector('button');
+		assert.deepEqual(warnings.length, 0);
 
 		flushSync(() => {
-			btn?.click();
+			btn2.click();
 		});
 
-		assert.htmlEqual(target.innerHTML, `<button>clicks: 1</button>`);
-
-		assert.deepEqual(warnings, []);
+		assert.deepEqual(warnings.length, 1);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-2/main.svelte
index ad450a937e..0be7e434e4 100644
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-2/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-2/main.svelte
@@ -1,9 +1,8 @@
-<script>
-	import { global } from './state.svelte.js';
+<script lang="ts">
+	import Sub from './sub.svelte';
+	import { create_my_state } from './state.svelte';
 
-	global.a = { b: 0 };
+	const myState = create_my_state();
 </script>
 
-<button onclick={() => global.a.b += 1}>
-	clicks: {global.a.b}
-</button>
+<Sub count={myState.my_state} inc={myState.inc} />
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-2/state.svelte.js b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-2/state.svelte.js
index 3e7a68cf97..2906b9bce5 100644
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-2/state.svelte.js
+++ b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-2/state.svelte.js
@@ -1 +1,14 @@
-export let global = $state({});
+export function create_my_state() {
+	const my_state = $state({
+		a: 0
+	});
+
+	function inc() {
+		my_state.a++;
+	}
+
+	return {
+		my_state,
+		inc
+	};
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-5/sub.svelte b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-2/sub.svelte
similarity index 100%
rename from packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-5/sub.svelte
rename to packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-2/sub.svelte
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-7/Child.svelte b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-3/Child.svelte
similarity index 100%
rename from packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-7/Child.svelte
rename to packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-3/Child.svelte
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-3/_config.js b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-3/_config.js
index 96b18d1854..ab7327ab8b 100644
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-3/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-3/_config.js
@@ -1,41 +1,24 @@
 import { flushSync } from 'svelte';
 import { test } from '../../test';
 
-/** @type {typeof console.warn} */
-let warn;
-
-/** @type {any[]} */
-let warnings = [];
-
 export default test({
-	html: `<button>[]</button>`,
-
 	compileOptions: {
 		dev: true
 	},
 
-	before_test: () => {
-		warn = console.warn;
-
-		console.warn = (...args) => {
-			warnings.push(...args);
-		};
-	},
+	async test({ assert, target, warnings }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
 
-	after_test: () => {
-		console.warn = warn;
-		warnings = [];
-	},
+		flushSync(() => {
+			btn1.click();
+		});
 
-	test({ assert, target }) {
-		const btn = target.querySelector('button');
+		assert.deepEqual(warnings.length, 0);
 
 		flushSync(() => {
-			btn?.click();
+			btn2.click();
 		});
 
-		assert.htmlEqual(target.innerHTML, `<button>[foo]</button>`);
-
-		assert.deepEqual(warnings, [], 'expected getContext to have widened ownership');
+		assert.deepEqual(warnings.length, 1);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-3/main.svelte
index 2dd7cab141..8e8343790b 100644
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-3/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-3/main.svelte
@@ -1,9 +1,13 @@
 <script>
-	import { setContext } from 'svelte';
-	import Sub from './sub.svelte';
+	import Child from './Child.svelte';
 
-	let list = $state([]);
-	setContext('list', list);
+	let items = $state([{ id: "test", name: "this is a test"}, { id:"test2", name: "this is a second test"}]);
+	let found = $state();
+
+	function onclick() {
+		found = items.find(c => c.id === 'test2');
+	}
 </script>
 
-<Sub />
+<button {onclick}>First click here</button>
+<Child item={found} />
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-4/_config.js b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-4/_config.js
deleted file mode 100644
index aeb3740dfe..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-4/_config.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { flushSync } from 'svelte';
-import { test } from '../../test';
-
-/** @type {typeof console.warn} */
-let warn;
-
-/** @type {any[]} */
-let warnings = [];
-
-export default test({
-	compileOptions: {
-		dev: true
-	},
-
-	before_test: () => {
-		warn = console.warn;
-
-		console.warn = (...args) => {
-			warnings.push(...args);
-		};
-	},
-
-	after_test: () => {
-		console.warn = warn;
-		warnings = [];
-	},
-
-	test({ assert, target }) {
-		const btn = target.querySelector('button');
-
-		flushSync(() => {
-			btn?.click();
-		});
-
-		assert.deepEqual(warnings, []);
-	}
-});
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-4/main.svelte b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-4/main.svelte
deleted file mode 100644
index 2d40c13949..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-4/main.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script>
-	import { global } from './state.svelte.js';
-	import Sub from './sub.svelte';
-</script>
-
-<Sub />
-<!-- it's important _NOT_ to read global.a.b in the template,
-     else the proxy would set up the structure with its own component context already -->
-<button onclick={() => global.increment_a_b()}>
-	click me
-</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-4/state.svelte.js b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-4/state.svelte.js
deleted file mode 100644
index 4079059171..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-4/state.svelte.js
+++ /dev/null
@@ -1,13 +0,0 @@
-class Global {
-	state = $state({});
-
-	add_a(a) {
-		this.state.a = a;
-	}
-
-	increment_a_b() {
-		this.state.a.b++;
-	}
-}
-
-export const global = new Global();
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-4/sub.svelte b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-4/sub.svelte
deleted file mode 100644
index 044904aa18..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-4/sub.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script>
-	import { global } from "./state.svelte";
-    
-	// The real world use case would be someone manipulating state locally, for example form state,
-	// and then push the values to a global state for everyone else to see / possibly mutate.
-	const local_soon_global = $state({ b: 0 });
-	global.add_a(local_soon_global);
-</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-5/_config.js b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-5/_config.js
deleted file mode 100644
index 66f1726a2a..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-5/_config.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { flushSync } from 'svelte';
-import { test } from '../../test';
-
-export default test({
-	compileOptions: {
-		dev: true
-	},
-
-	test({ assert, target, warnings }) {
-		const [btn1, btn2] = target.querySelectorAll('button');
-
-		flushSync(() => {
-			btn1.click();
-		});
-
-		assert.deepEqual(warnings.length, 0);
-
-		flushSync(() => {
-			btn2.click();
-		});
-
-		assert.deepEqual(warnings.length, 1);
-	}
-});
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-5/main.svelte b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-5/main.svelte
deleted file mode 100644
index 0be7e434e4..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-5/main.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script lang="ts">
-	import Sub from './sub.svelte';
-	import { create_my_state } from './state.svelte';
-
-	const myState = create_my_state();
-</script>
-
-<Sub count={myState.my_state} inc={myState.inc} />
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-5/state.svelte.js b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-5/state.svelte.js
deleted file mode 100644
index 2906b9bce5..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-5/state.svelte.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export function create_my_state() {
-	const my_state = $state({
-		a: 0
-	});
-
-	function inc() {
-		my_state.a++;
-	}
-
-	return {
-		my_state,
-		inc
-	};
-}
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-6/Child.svelte b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-6/Child.svelte
deleted file mode 100644
index aa31fd7606..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-6/Child.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import { getContext } from 'svelte';
-
-	const foo = getContext('foo')
-</script>
-
-<button onclick={() => {
-	foo.person.name.last = 'T';
-}}>mutate</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-6/_config.js b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-6/_config.js
deleted file mode 100644
index cc9ea715f0..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-6/_config.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { flushSync } from 'svelte';
-import { test } from '../../test';
-
-/** @type {typeof console.warn} */
-let warn;
-
-/** @type {any[]} */
-let warnings = [];
-
-export default test({
-	compileOptions: {
-		dev: true
-	},
-
-	before_test: () => {
-		warn = console.warn;
-
-		console.warn = (...args) => {
-			warnings.push(...args);
-		};
-	},
-
-	after_test: () => {
-		console.warn = warn;
-		warnings = [];
-	},
-
-	async test({ assert, target }) {
-		const btn = target.querySelector('button');
-
-		flushSync(() => {
-			btn?.click();
-		});
-
-		assert.deepEqual(warnings.length, 0);
-	}
-});
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-6/main.svelte b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-6/main.svelte
deleted file mode 100644
index 92d7dbd2db..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-6/main.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script>
-	import { setContext } from 'svelte';
-	import Child from './Child.svelte';
-
-	class Person {
-		name = $state({
-			first: 'Mr',
-			last: 'Bean'
-		});
-	}
-
-	setContext('foo', {
-		person: new Person()
-	});
-</script>
-
-<Child />
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-7/_config.js b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-7/_config.js
deleted file mode 100644
index ab7327ab8b..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-7/_config.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { flushSync } from 'svelte';
-import { test } from '../../test';
-
-export default test({
-	compileOptions: {
-		dev: true
-	},
-
-	async test({ assert, target, warnings }) {
-		const [btn1, btn2] = target.querySelectorAll('button');
-
-		flushSync(() => {
-			btn1.click();
-		});
-
-		assert.deepEqual(warnings.length, 0);
-
-		flushSync(() => {
-			btn2.click();
-		});
-
-		assert.deepEqual(warnings.length, 1);
-	}
-});
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-7/main.svelte b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-7/main.svelte
deleted file mode 100644
index 8e8343790b..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner-7/main.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	import Child from './Child.svelte';
-
-	let items = $state([{ id: "test", name: "this is a test"}, { id:"test2", name: "this is a second test"}]);
-	let found = $state();
-
-	function onclick() {
-		found = items.find(c => c.id === 'test2');
-	}
-</script>
-
-<button {onclick}>First click here</button>
-<Child item={found} />
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner/Counter.svelte b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner/Counter.svelte
deleted file mode 100644
index ffe6ef75c4..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner/Counter.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-	import { global } from './state.svelte.js';
-</script>
-
-<button onclick={() => global.object.count += 1}>
-	clicks: {global.object.count}
-</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner/main.svelte b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner/main.svelte
deleted file mode 100644
index 5f1c7461f6..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner/main.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	import Counter from './Counter.svelte';
-	import { global } from './state.svelte.js';
-
-	let object = $state({ count: 0 });
-	global.object = object;
-</script>
-
-<Counter />
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner/state.svelte.js b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner/state.svelte.js
deleted file mode 100644
index 6881c2faf6..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-inherited-owner/state.svelte.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export let global = $state({
-	object: { count: -1 }
-});
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-ok/_config.js b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-ok/_config.js
new file mode 100644
index 0000000000..437385e185
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-ok/_config.js
@@ -0,0 +1,18 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	test({ assert, target, warnings }) {
+		const btn = target.querySelector('button');
+		btn?.click();
+		flushSync();
+
+		assert.deepEqual(warnings, []);
+	},
+
+	warnings: []
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-ok/child.svelte b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-ok/child.svelte
new file mode 100644
index 0000000000..0243a6c7d1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-ok/child.svelte
@@ -0,0 +1,8 @@
+<script>
+	let { klass, getter_setter } = $props();
+</script>
+
+<button onclick={() => {
+	klass.y = 2;
+	getter_setter.y = 2;
+}}>mutate</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-ok/main.svelte b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-ok/main.svelte
new file mode 100644
index 0000000000..8685664ab1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-ok/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	import Child from './child.svelte';
+
+	class X {
+		y = $state(1);
+	}
+
+	const klass = new X();
+
+	let y = $state(1);
+	const getter_setter = {
+		get y() {
+			return y;
+		},
+		set y(value) {
+			y = value;
+		}
+	}
+</script>
+
+<Child {klass}  {getter_setter} />
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-with-binding-2/_config.js b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-with-binding-2/_config.js
index 87474a05cc..39fa80c55a 100644
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-with-binding-2/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-with-binding-2/_config.js
@@ -8,6 +8,6 @@ export default test({
 	},
 
 	warnings: [
-		'Intermediate.svelte passed a value to Counter.svelte with `bind:`, but the value is owned by main.svelte. Consider creating a binding between main.svelte and Intermediate.svelte'
+		'Intermediate.svelte passed property `object` to Counter.svelte with `bind:`, but its parent component main.svelte did not declare `object` as a binding. Consider creating a binding between main.svelte and Intermediate.svelte (e.g. `bind:object={...}` instead of `object={...}`)'
 	]
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-with-binding-3/_config.js b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-with-binding-3/_config.js
index 66e5184380..7b8cc676d5 100644
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-with-binding-3/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-with-binding-3/_config.js
@@ -33,7 +33,7 @@ export default test({
 		assert.htmlEqual(target.innerHTML, `<button>clicks: 1</button><button>clicks: 1</button>`);
 
 		assert.deepEqual(warnings, [
-			'Counter.svelte mutated a value owned by main.svelte. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead'
+			'Mutating unbound props (`notshared`, at Counter.svelte:10:23) is strongly discouraged. Consider using `bind:notshared={...}` in main.svelte (or using a callback) instead'
 		]);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-with-binding-7/_config.js b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-with-binding-7/_config.js
index e766a946d0..bd2ecc28b6 100644
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-with-binding-7/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-with-binding-7/_config.js
@@ -1,7 +1,6 @@
 import { flushSync } from 'svelte';
 import { ok, test } from '../../test';
 
-// Tests that proxies widen ownership correctly even if not directly connected to each other
 export default test({
 	compileOptions: {
 		dev: true
diff --git a/packages/svelte/tests/runtime-runes/samples/nullish-empty-string/_config.js b/packages/svelte/tests/runtime-runes/samples/nullish-empty-string/_config.js
new file mode 100644
index 0000000000..84e97e9735
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/nullish-empty-string/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: '[]'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/nullish-empty-string/main.svelte b/packages/svelte/tests/runtime-runes/samples/nullish-empty-string/main.svelte
new file mode 100644
index 0000000000..efe39b91fe
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/nullish-empty-string/main.svelte
@@ -0,0 +1 @@
+[{undefined ?? null}]
diff --git a/packages/svelte/tests/runtime-runes/samples/onmount-prop-access/Component.svelte b/packages/svelte/tests/runtime-runes/samples/onmount-prop-access/Component.svelte
new file mode 100644
index 0000000000..b5da702fa7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/onmount-prop-access/Component.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { onMount } from 'svelte'
+
+	let thing = $state(0)
+
+	onMount(() => {
+		thing = 1;
+		return () => {
+			console.log(thing);
+		}
+	})
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/onmount-prop-access/_config.js b/packages/svelte/tests/runtime-runes/samples/onmount-prop-access/_config.js
new file mode 100644
index 0000000000..0d24e265d3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/onmount-prop-access/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, logs }) {
+		assert.deepEqual(logs, [1]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/onmount-prop-access/main.svelte b/packages/svelte/tests/runtime-runes/samples/onmount-prop-access/main.svelte
new file mode 100644
index 0000000000..92746760a4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/onmount-prop-access/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import { onMount } from "svelte"
+	import Component from './Component.svelte';
+
+	let key = $state(0);
+
+	onMount(() => {
+		key = 1;
+	})
+</script>
+
+{#key key}
+	<Component />
+{/key}
diff --git a/packages/svelte/tests/runtime-runes/samples/optgroup-rich-content/_config.js b/packages/svelte/tests/runtime-runes/samples/optgroup-rich-content/_config.js
new file mode 100644
index 0000000000..9de60bcb56
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/optgroup-rich-content/_config.js
@@ -0,0 +1,31 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+// Test that optgroup with rich HTML content (non-option elements) and dynamic expressions works correctly
+export default test({
+	mode: ['client', 'hydrate'],
+	test({ assert, target }) {
+		const select = /** @type {HTMLSelectElement} */ (target.querySelector('select'));
+		const optgroups = target.querySelectorAll('optgroup');
+		const options = target.querySelectorAll('option');
+		const button = /** @type {HTMLButtonElement} */ (target.querySelector('button'));
+
+		assert.ok(select);
+		assert.equal(optgroups.length, 2);
+		assert.equal(options.length, 4);
+
+		// Check initial option content (rich content inside optgroup)
+		assert.equal(options[0]?.textContent, 'apple apple');
+		assert.equal(options[1]?.textContent, 'banana');
+		assert.equal(options[2]?.textContent, 'carrot carrot');
+		assert.equal(options[3]?.textContent, 'Plain celery');
+
+		// Click button to change dynamic content
+		button.click();
+		flushSync();
+
+		// Check updated option content
+		assert.equal(options[0]?.textContent, 'orange orange');
+		assert.equal(options[2]?.textContent, 'broccoli broccoli');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/optgroup-rich-content/main.svelte b/packages/svelte/tests/runtime-runes/samples/optgroup-rich-content/main.svelte
new file mode 100644
index 0000000000..03777a1cfb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/optgroup-rich-content/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	let fruit = $state('apple');
+	let vegetable = $state('carrot');
+</script>
+
+<select>
+	<optgroup label="Fruits">
+		<span class="fruits-header">{fruit}</span>
+		<option value="a"><span>{fruit}</span> {fruit}</option>
+		<option value="b">banana</option>
+	</optgroup>
+	<optgroup label="Vegetables">
+		<em class="veggies-header">{vegetable}</em>
+		<option value="c"><em>{vegetable}</em> {vegetable}</option>
+		<option value="d">Plain celery</option>
+	</optgroup>
+</select>
+
+<button onclick={() => { fruit = 'orange'; vegetable = 'broccoli'; }}>Change</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/option-rich-content/_config.js b/packages/svelte/tests/runtime-runes/samples/option-rich-content/_config.js
new file mode 100644
index 0000000000..3c9e5847cd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/option-rich-content/_config.js
@@ -0,0 +1,37 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+// Test that rich HTML content in <option> elements compiles without errors
+// and that the component functions correctly (on browsers that support it)
+export default test({
+	mode: ['client'],
+	test({ assert, target }) {
+		const select = /** @type {HTMLSelectElement} */ (target.querySelector('select'));
+		const p = /** @type {HTMLParagraphElement} */ (target.querySelector('p'));
+		const button = /** @type {HTMLButtonElement} */ (target.querySelector('button'));
+
+		assert.ok(select);
+		assert.ok(p);
+		assert.ok(button);
+		assert.equal(select.value, 'a');
+		assert.equal(p.textContent, 'Selected: a');
+
+		// Verify options exist
+		assert.equal(select.options.length, 3);
+
+		// Change selection
+		select.value = 'b';
+		select.dispatchEvent(new Event('change'));
+		flushSync();
+
+		assert.equal(p.textContent, 'Selected: b');
+
+		// Test reactivity of content within option (only works on browsers that support rich options)
+		// On modern browsers, clicking the button should update the text inside the span
+		button.click();
+		flushSync();
+
+		// The option text content should be updated on browsers that support rich options
+		// For this test, we just verify the component doesn't crash
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/option-rich-content/main.svelte b/packages/svelte/tests/runtime-runes/samples/option-rich-content/main.svelte
new file mode 100644
index 0000000000..37351ab058
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/option-rich-content/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	let selected = $state('a');
+	let label_a = $state('Option');
+	let label_b = $state('Strong');
+</script>
+
+<select bind:value={selected}>
+	<option value="a"><span>{label_a}</span> A</option>
+	<option value="b"><strong>{label_b}</strong> B</option>
+	<option value="c">Plain C</option>
+</select>
+
+<p>Selected: {selected}</p>
+
+<button onclick={() => label_a = 'Changed'}>Change A</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/ownership-function-bindings/Child.svelte b/packages/svelte/tests/runtime-runes/samples/ownership-function-bindings/Child.svelte
new file mode 100644
index 0000000000..ef91b0756d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/ownership-function-bindings/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	let { arr = $bindable() } = $props();
+</script>
+
+<button onclick={() => arr.push(arr.length)}></button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/ownership-function-bindings/_config.js b/packages/svelte/tests/runtime-runes/samples/ownership-function-bindings/_config.js
new file mode 100644
index 0000000000..4c77aea206
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/ownership-function-bindings/_config.js
@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+	test({ target, warnings, assert }) {
+		const btn = target.querySelector('button');
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.deepEqual(warnings, []);
+
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.deepEqual(warnings, []);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/ownership-function-bindings/main.svelte b/packages/svelte/tests/runtime-runes/samples/ownership-function-bindings/main.svelte
new file mode 100644
index 0000000000..4a3ce82726
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/ownership-function-bindings/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Child from './Child.svelte';
+	
+	let arr = $state([]);
+	let arr2 = $state([]);
+
+	let len = $derived(arr.length + arr2.length);
+</script>
+
+<Child bind:arr={() => len % 2 === 0 ? arr : arr2, (v) => {}} />
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/ownership-invalid-binding-bindable-fallback/Child.svelte b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-binding-bindable-fallback/Child.svelte
new file mode 100644
index 0000000000..78b82caed9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-binding-bindable-fallback/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	const { test = $bindable() } = $props();
+</script>
+
+{test}
diff --git a/packages/svelte/tests/runtime-runes/samples/ownership-invalid-binding-bindable-fallback/Parent.svelte b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-binding-bindable-fallback/Parent.svelte
new file mode 100644
index 0000000000..7bfb17aa64
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-binding-bindable-fallback/Parent.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Child from './Child.svelte';
+
+	let { test = $bindable({}) } = $props();
+</script>
+
+<Child bind:test />
diff --git a/packages/svelte/tests/runtime-runes/samples/ownership-invalid-binding-bindable-fallback/_config.js b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-binding-bindable-fallback/_config.js
new file mode 100644
index 0000000000..e93067eb9d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-binding-bindable-fallback/_config.js
@@ -0,0 +1,11 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	compileOptions: {
+		dev: true
+	},
+	async test({ warnings, assert }) {
+		assert.deepEqual(warnings, []);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/ownership-invalid-binding-bindable-fallback/main.svelte b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-binding-bindable-fallback/main.svelte
new file mode 100644
index 0000000000..282afb1771
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-binding-bindable-fallback/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Parent from './Parent.svelte';
+</script>
+
+<Parent />
diff --git a/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-bindable-fallback/Parent.svelte b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-bindable-fallback/Parent.svelte
new file mode 100644
index 0000000000..7d6b248da7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-bindable-fallback/Parent.svelte
@@ -0,0 +1,8 @@
+<script>
+	let { test = $bindable({}) } = $props();
+</script>
+
+<button onclick={()=>test = {}}></button>
+<button onclick={()=>test.test = {}}></button>
+
+{test}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-bindable-fallback/_config.js b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-bindable-fallback/_config.js
new file mode 100644
index 0000000000..9b4e3479ea
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-bindable-fallback/_config.js
@@ -0,0 +1,23 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	compileOptions: {
+		dev: true
+	},
+	async test({ warnings, assert, target }) {
+		const [btn, btn2] = target.querySelectorAll('button');
+		flushSync(() => {
+			btn2.click();
+		});
+		assert.deepEqual(warnings, []);
+		flushSync(() => {
+			btn.click();
+		});
+		flushSync(() => {
+			btn2.click();
+		});
+		assert.deepEqual(warnings, []);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-bindable-fallback/main.svelte b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-bindable-fallback/main.svelte
new file mode 100644
index 0000000000..282afb1771
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-bindable-fallback/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Parent from './Parent.svelte';
+</script>
+
+<Parent />
diff --git a/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-use-transform/_config.js b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-use-transform/_config.js
new file mode 100644
index 0000000000..95556f4737
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-use-transform/_config.js
@@ -0,0 +1,10 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+	async test({ assert, errors }) {
+		assert.deepEqual(errors, []);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-use-transform/main.svelte b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-use-transform/main.svelte
new file mode 100644
index 0000000000..d834551221
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-use-transform/main.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	let { rows = $bindable([]), row } = $props();
+	rows[row] = '';
+</script>
+
diff --git a/packages/svelte/tests/runtime-runes/samples/pre-no-content/_config.js b/packages/svelte/tests/runtime-runes/samples/pre-no-content/_config.js
new file mode 100644
index 0000000000..cb9d31a69f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/pre-no-content/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<pre></pre>`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/pre-no-content/main.svelte b/packages/svelte/tests/runtime-runes/samples/pre-no-content/main.svelte
new file mode 100644
index 0000000000..a4357066a5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/pre-no-content/main.svelte
@@ -0,0 +1 @@
+<pre></pre>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/props-and-slots/Child.svelte b/packages/svelte/tests/runtime-runes/samples/props-and-slots/Child.svelte
new file mode 100644
index 0000000000..a2e7d6d8a4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-and-slots/Child.svelte
@@ -0,0 +1,9 @@
+<script>
+	const props = $props();
+</script>
+
+<p>{Object.keys(props)}</p>
+
+{#if $$slots.foo}
+	<p>foo exists</p>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/props-and-slots/_config.js b/packages/svelte/tests/runtime-runes/samples/props-and-slots/_config.js
new file mode 100644
index 0000000000..3f6fb4143c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-and-slots/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<p>a</p>
+		<p>foo exists</p>
+	`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/props-and-slots/main.svelte b/packages/svelte/tests/runtime-runes/samples/props-and-slots/main.svelte
new file mode 100644
index 0000000000..3535da7132
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-and-slots/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<Child a="b">
+	<div slot="foo">foo</div>
+</Child>
diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-value-function/_config.js b/packages/svelte/tests/runtime-runes/samples/props-default-value-function/_config.js
new file mode 100644
index 0000000000..6b281f04f0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-default-value-function/_config.js
@@ -0,0 +1,15 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		assert.htmlEqual(target.innerHTML, `<button>inc</button> Inner: 0 Inner: 0`);
+		btn?.click();
+		flushSync();
+		assert.htmlEqual(target.innerHTML, `<button>inc</button> Inner: 1 Inner: 1`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-value-function/inner.svelte b/packages/svelte/tests/runtime-runes/samples/props-default-value-function/inner.svelte
new file mode 100644
index 0000000000..6bde0a15a8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-default-value-function/inner.svelte
@@ -0,0 +1,4 @@
+<script>
+	let { getter } = $props()
+</script>
+Inner: {getter()}
diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-value-function/main.svelte b/packages/svelte/tests/runtime-runes/samples/props-default-value-function/main.svelte
new file mode 100644
index 0000000000..2cb2f67b82
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-default-value-function/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import Wrapper1 from "./wrapper.svelte"
+	import Wrapper2 from "./wrapper2.svelte"
+	let count = $state(0);
+
+	let getter = $derived.by(() => {
+		const copy = count;
+		return () => copy;
+	});
+</script>
+
+<button onclick={() => count++}>inc</button>
+<Wrapper1 {getter}/>
+<Wrapper2 {getter}/>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-value-function/wrapper.svelte b/packages/svelte/tests/runtime-runes/samples/props-default-value-function/wrapper.svelte
new file mode 100644
index 0000000000..525494ddfb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-default-value-function/wrapper.svelte
@@ -0,0 +1,7 @@
+<script >
+  import Inner from "./inner.svelte";
+
+  const { getter = () => -1} = $props();
+</script>
+
+<Inner {getter} />
diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-value-function/wrapper2.svelte b/packages/svelte/tests/runtime-runes/samples/props-default-value-function/wrapper2.svelte
new file mode 100644
index 0000000000..9498f432d8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-default-value-function/wrapper2.svelte
@@ -0,0 +1,7 @@
+<script >
+  import Inner from "./inner.svelte";
+
+  const { getter = $bindable(() => -1)} = $props();
+</script>
+
+<Inner {getter} />
diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy-accessors/main.svelte b/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy-accessors/main.svelte
index fe2ac37bd3..f6437d6589 100644
--- a/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy-accessors/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy-accessors/main.svelte
@@ -1,5 +1,5 @@
 <script>
-	let log = $state([]);
+	let log = [];
 
 	const fallback_value = 1;
 	const nested = {
diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy/sub.svelte b/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy/sub.svelte
index fe2ac37bd3..f6437d6589 100644
--- a/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy/sub.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/props-default-value-lazy/sub.svelte
@@ -1,5 +1,5 @@
 <script>
-	let log = $state([]);
+	let log = [];
 
 	const fallback_value = 1;
 	const nested = {
diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-value-reactivity/_config.js b/packages/svelte/tests/runtime-runes/samples/props-default-value-reactivity/_config.js
new file mode 100644
index 0000000000..b3274d02ec
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-default-value-reactivity/_config.js
@@ -0,0 +1,19 @@
+import { flushSync, tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	accessors: false,
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<p>greeting: Hola</p>
+			<button>Change Language</button>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-value-reactivity/main.svelte b/packages/svelte/tests/runtime-runes/samples/props-default-value-reactivity/main.svelte
new file mode 100644
index 0000000000..c26c4ca75a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-default-value-reactivity/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Sub from './sub.svelte';
+	import { set_translation } from './translations.svelte.js';
+</script>
+
+<Sub />
+
+<button onclick={() => set_translation('Hola')}>
+	Change Language
+</button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-value-reactivity/sub.svelte b/packages/svelte/tests/runtime-runes/samples/props-default-value-reactivity/sub.svelte
new file mode 100644
index 0000000000..b3cd3fae36
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-default-value-reactivity/sub.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { get_translation } from './translations.svelte.js';
+
+	const {
+		p0 = get_translation()
+	} = $props();
+</script>
+
+<p>greeting: {p0}</p>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-value-reactivity/translations.svelte.js b/packages/svelte/tests/runtime-runes/samples/props-default-value-reactivity/translations.svelte.js
new file mode 100644
index 0000000000..4aa4dc9999
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-default-value-reactivity/translations.svelte.js
@@ -0,0 +1,9 @@
+let greeting = $state('Hello');
+
+export function get_translation() {
+	return greeting;
+}
+
+export function set_translation(value) {
+	greeting = value;
+}
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/props-id-prefix/Child.svelte b/packages/svelte/tests/runtime-runes/samples/props-id-prefix/Child.svelte
new file mode 100644
index 0000000000..ad8bbd6f01
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-id-prefix/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	let id = $props.id();
+</script>
+
+<p>{id}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/props-id-prefix/_config.js b/packages/svelte/tests/runtime-runes/samples/props-id-prefix/_config.js
new file mode 100644
index 0000000000..6d4306c413
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-id-prefix/_config.js
@@ -0,0 +1,60 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	id_prefix: 'myPrefix',
+	test({ assert, target, variant }) {
+		if (variant === 'dom') {
+			assert.htmlEqual(
+				target.innerHTML,
+				`
+					<button>toggle</button>
+					<h1>c1</h1>
+					<p>c2</p>
+					<p>c3</p>
+					<p>c4</p>
+				`
+			);
+		} else {
+			assert.htmlEqual(
+				target.innerHTML,
+				`
+					<button>toggle</button>
+					<h1>myPrefix-s1</h1>
+					<p>myPrefix-s2</p>
+					<p>myPrefix-s3</p>
+					<p>myPrefix-s4</p>
+				`
+			);
+		}
+
+		let button = target.querySelector('button');
+		flushSync(() => button?.click());
+
+		if (variant === 'dom') {
+			assert.htmlEqual(
+				target.innerHTML,
+				`
+					<button>toggle</button>
+					<h1>c1</h1>
+					<p>c2</p>
+					<p>c3</p>
+					<p>c4</p>
+					<p>c5</p>
+				`
+			);
+		} else {
+			assert.htmlEqual(
+				target.innerHTML,
+				`
+					<button>toggle</button>
+					<h1>myPrefix-s1</h1>
+					<p>myPrefix-s2</p>
+					<p>myPrefix-s3</p>
+					<p>myPrefix-s4</p>
+					<p>c1</p>
+				`
+			);
+		}
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/props-id-prefix/main.svelte b/packages/svelte/tests/runtime-runes/samples/props-id-prefix/main.svelte
new file mode 100644
index 0000000000..646bb2ebde
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-id-prefix/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	import Child from './Child.svelte';
+
+	let id = $props.id();
+
+	let show = $state(false);
+</script>
+
+<button onclick={() => show = !show}>toggle</button>
+
+<h1>{id}</h1>
+
+<Child />
+<Child />
+<Child />
+
+{#if show}
+	<Child />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/props-id/Child.svelte b/packages/svelte/tests/runtime-runes/samples/props-id/Child.svelte
new file mode 100644
index 0000000000..ad8bbd6f01
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-id/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	let id = $props.id();
+</script>
+
+<p>{id}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/props-id/_config.js b/packages/svelte/tests/runtime-runes/samples/props-id/_config.js
new file mode 100644
index 0000000000..416ef6cfbe
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-id/_config.js
@@ -0,0 +1,59 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, variant }) {
+		if (variant === 'dom') {
+			assert.htmlEqual(
+				target.innerHTML,
+				`
+					<button>toggle</button>
+					<h1>c1</h1>
+					<p>c2</p>
+					<p>c3</p>
+					<p>c4</p>
+				`
+			);
+		} else {
+			assert.htmlEqual(
+				target.innerHTML,
+				`
+					<button>toggle</button>
+					<h1>s1</h1>
+					<p>s2</p>
+					<p>s3</p>
+					<p>s4</p>
+				`
+			);
+		}
+
+		let button = target.querySelector('button');
+		flushSync(() => button?.click());
+
+		if (variant === 'dom') {
+			assert.htmlEqual(
+				target.innerHTML,
+				`
+					<button>toggle</button>
+					<h1>c1</h1>
+					<p>c2</p>
+					<p>c3</p>
+					<p>c4</p>
+					<p>c5</p>
+				`
+			);
+		} else {
+			assert.htmlEqual(
+				target.innerHTML,
+				`
+					<button>toggle</button>
+					<h1>s1</h1>
+					<p>s2</p>
+					<p>s3</p>
+					<p>s4</p>
+					<p>c1</p>
+				`
+			);
+		}
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/props-id/main.svelte b/packages/svelte/tests/runtime-runes/samples/props-id/main.svelte
new file mode 100644
index 0000000000..646bb2ebde
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/props-id/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	import Child from './Child.svelte';
+
+	let id = $props.id();
+
+	let show = $state(false);
+</script>
+
+<button onclick={() => show = !show}>toggle</button>
+
+<h1>{id}</h1>
+
+<Child />
+<Child />
+<Child />
+
+{#if show}
+	<Child />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/props-not-bindable-spread/Counter.svelte b/packages/svelte/tests/runtime-runes/samples/props-not-bindable-spread/Counter.svelte
deleted file mode 100644
index f22fd6e976..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/props-not-bindable-spread/Counter.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	let { ...rest } = $props();
-</script>
-
-{rest.count}
diff --git a/packages/svelte/tests/runtime-runes/samples/props-not-bindable-spread/_config.js b/packages/svelte/tests/runtime-runes/samples/props-not-bindable-spread/_config.js
deleted file mode 100644
index fa0994c370..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/props-not-bindable-spread/_config.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { test } from '../../test';
-
-export default test({
-	compileOptions: {
-		dev: true
-	},
-
-	html: '0',
-
-	error:
-		'bind_not_bindable\n' +
-		'A component is attempting to bind to a non-bindable property `count` belonging to Counter.svelte (i.e. `<Counter bind:count={...}>`). To mark a property as bindable: `let { count = $bindable() } = $props()`'
-});
diff --git a/packages/svelte/tests/runtime-runes/samples/props-not-bindable-spread/main.svelte b/packages/svelte/tests/runtime-runes/samples/props-not-bindable-spread/main.svelte
deleted file mode 100644
index 80242b75c6..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/props-not-bindable-spread/main.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-    import Counter from './Counter.svelte';
-
-    let count = $state(0);
-</script>
-
-<Counter bind:count />
diff --git a/packages/svelte/tests/runtime-runes/samples/props-not-bindable/Counter.svelte b/packages/svelte/tests/runtime-runes/samples/props-not-bindable/Counter.svelte
deleted file mode 100644
index 4bc2db3968..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/props-not-bindable/Counter.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	let { count } = $props();
-</script>
-
-{count}
diff --git a/packages/svelte/tests/runtime-runes/samples/props-not-bindable/_config.js b/packages/svelte/tests/runtime-runes/samples/props-not-bindable/_config.js
deleted file mode 100644
index fa0994c370..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/props-not-bindable/_config.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { test } from '../../test';
-
-export default test({
-	compileOptions: {
-		dev: true
-	},
-
-	html: '0',
-
-	error:
-		'bind_not_bindable\n' +
-		'A component is attempting to bind to a non-bindable property `count` belonging to Counter.svelte (i.e. `<Counter bind:count={...}>`). To mark a property as bindable: `let { count = $bindable() } = $props()`'
-});
diff --git a/packages/svelte/tests/runtime-runes/samples/props-not-bindable/main.svelte b/packages/svelte/tests/runtime-runes/samples/props-not-bindable/main.svelte
deleted file mode 100644
index 80242b75c6..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/props-not-bindable/main.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-    import Counter from './Counter.svelte';
-
-    let count = $state(0);
-</script>
-
-<Counter bind:count />
diff --git a/packages/svelte/tests/runtime-runes/samples/proxy-coercive-assignment-warning/_config.js b/packages/svelte/tests/runtime-runes/samples/proxy-coercive-assignment-warning/_config.js
index ad7bdc654a..2ff2634822 100644
--- a/packages/svelte/tests/runtime-runes/samples/proxy-coercive-assignment-warning/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/proxy-coercive-assignment-warning/_config.js
@@ -1,24 +1,31 @@
 import { flushSync } from 'svelte';
-import { test } from '../../test';
+import { ok, test } from '../../test';
 
 export default test({
 	compileOptions: {
 		dev: true
 	},
 
-	html: `<button>items: null</button> <div>x</div>`,
-
 	test({ assert, target, warnings }) {
-		const btn = target.querySelector('button');
+		const [button1, button2, button3] = target.querySelectorAll('button');
+		ok(button1);
+
+		flushSync(() => button1.click());
+		assert.htmlEqual(button1.innerHTML, `items: []`);
+
+		flushSync(() => button1.click());
+		assert.htmlEqual(button1.innerHTML, `items: [0]`);
 
-		flushSync(() => btn?.click());
-		assert.htmlEqual(target.innerHTML, `<button>items: []</button> <div>x</div>`);
+		const input = target.querySelector('input');
+		ok(input);
+		input.checked = true;
+		flushSync(() => input.dispatchEvent(new Event('change', { bubbles: true })));
 
-		flushSync(() => btn?.click());
-		assert.htmlEqual(target.innerHTML, `<button>items: [0]</button> <div>x</div>`);
+		flushSync(() => button2.click());
+		flushSync(() => button3.click());
 
 		assert.deepEqual(warnings, [
-			'Assignment to `items` property (main.svelte:8:24) will evaluate to the right-hand side, not the value of `items` following the assignment. This may result in unexpected behaviour.'
+			'Assignment to `items` property (main.svelte:17:24) will evaluate to the right-hand side, not the value of `items` following the assignment. This may result in unexpected behaviour.'
 		]);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/proxy-coercive-assignment-warning/main.svelte b/packages/svelte/tests/runtime-runes/samples/proxy-coercive-assignment-warning/main.svelte
index 40592e08b8..02320a3128 100644
--- a/packages/svelte/tests/runtime-runes/samples/proxy-coercive-assignment-warning/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/proxy-coercive-assignment-warning/main.svelte
@@ -1,8 +1,17 @@
  <script>
 	import Test from './Test.svelte';
 
+	let { opacity = 0.5 } = $props();
+
 	let entries = $state([]);
-	let object = $state({ items: null });
+	let object = $state({ items: null, group: [] });
+	let elementFunBind = $state();
+
+	// should omit $.assign via static analysis
+	const fixed = (node) => node.style.opacity = 0.5;
+
+	// should use $.assign, but it should not warn
+	const unknown = (node) => node.style.opacity = opacity;
 </script>
 
 <button onclick={() => (object.items ??= []).push(object.items.length)}>
@@ -11,6 +20,17 @@
 
 <!-- these should not emit warnings -->
 <div bind:this={entries[0]}>x</div>
+<input type="checkbox" value=1 bind:group={object.group}>
+<input type="checkbox" value=2 bind:group={object.group}>
+
 <Test bind:this={entries[1]}></Test>
 <Test bind:this={() => entries[2], (v) => (entries[2] = v)}></Test>
 <Test bind:x={entries[3]}></Test>
+
+{#snippet funBind(context)}
+	<input bind:this={() => {}, (e) => (context.element = e)} />
+{/snippet}
+{@render funBind({ set element(e) { elementFunBind = e } })}
+
+<button onclick={(e) => (fixed(e.currentTarget))}>change opacity (fixed)</button>
+<button onclick={(e) => (unknown(e.currentTarget))}>change opacity (unknown)</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/proxy-set-with-parent/_config.js b/packages/svelte/tests/runtime-runes/samples/proxy-set-with-parent/_config.js
new file mode 100644
index 0000000000..2e4a27cf09
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/proxy-set-with-parent/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	async test() {}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/proxy-set-with-parent/main.svelte b/packages/svelte/tests/runtime-runes/samples/proxy-set-with-parent/main.svelte
new file mode 100644
index 0000000000..7450eff3fa
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/proxy-set-with-parent/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	function with_writes(initialState) {
+	  const derive = $state(initialState)
+	  return derive
+	}
+
+	let data = $state({ example: 'Example' })
+	let my_derived = $derived(with_writes({ example: data.example }))
+
+	$effect(() => {
+		my_derived.example = 'Bar'
+	});
+</script>
+
+<input bind:value={data.example} />
diff --git a/packages/svelte/tests/runtime-runes/samples/random/_config.js b/packages/svelte/tests/runtime-runes/samples/random/_config.js
new file mode 100644
index 0000000000..368dd20c6c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/random/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		const [p1, p2] = target.querySelectorAll('p');
+		assert.notEqual(p1.textContent, p2.textContent);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/random/main.svelte b/packages/svelte/tests/runtime-runes/samples/random/main.svelte
new file mode 100644
index 0000000000..e1ec0b5649
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/random/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	let { m = 1 } = $props();
+</script>
+
+<p>{(Math.random() * m).toFixed(10)}</p>
+<p>{(Math.random() * m).toFixed(10)}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/reactive-identifier/_config.js b/packages/svelte/tests/runtime-runes/samples/reactive-identifier/_config.js
new file mode 100644
index 0000000000..de59e8c7c7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/reactive-identifier/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from '../../../../src/index-client';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>0</button>`,
+
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => btn?.click());
+		assert.htmlEqual(target.innerHTML, `<button>1</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/reactive-identifier/main.svelte b/packages/svelte/tests/runtime-runes/samples/reactive-identifier/main.svelte
new file mode 100644
index 0000000000..aee0b15e1b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/reactive-identifier/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	let count = $state(0);
+
+	let object = {
+		toString() {
+			return count;
+		}
+	};
+</script>
+
+<button onclick={() => count += 1}>
+	{object}
+</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/read-version-previous-reaction/Component.svelte b/packages/svelte/tests/runtime-runes/samples/read-version-previous-reaction/Component.svelte
new file mode 100644
index 0000000000..afb62ced2f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/read-version-previous-reaction/Component.svelte
@@ -0,0 +1,7 @@
+<script>
+	const { label = 0, size = 0 } = $props();
+
+	const title = $derived(size.toString());
+</script>
+
+<p {title}>{label}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/read-version-previous-reaction/_config.js b/packages/svelte/tests/runtime-runes/samples/read-version-previous-reaction/_config.js
new file mode 100644
index 0000000000..650e48e84c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/read-version-previous-reaction/_config.js
@@ -0,0 +1,19 @@
+import { ok, test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	html: `<button></button><p title="0">0</p>`,
+
+	async test({ assert, target }) {
+		const p = target.querySelector('p');
+		const btn = target.querySelector('button');
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.equal(p?.innerHTML, '1');
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.equal(p?.innerHTML, '2');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/read-version-previous-reaction/main.svelte b/packages/svelte/tests/runtime-runes/samples/read-version-previous-reaction/main.svelte
new file mode 100644
index 0000000000..773aabeea3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/read-version-previous-reaction/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	import Component from "./Component.svelte";	
+	
+	let props = $state({
+		label: 0,
+		size: 0,
+	});
+	
+	let filteredProps = $state();
+	
+	$effect.pre(() => {
+		filteredProps = $state.snapshot(props);
+	});
+</script>
+
+<button onclick={()=>props.label++}></button>
+
+<Component {...filteredProps} />
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/rest-props-excludes-properties/_config.js b/packages/svelte/tests/runtime-runes/samples/rest-props-excludes-properties/_config.js
new file mode 100644
index 0000000000..66a42c08db
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/rest-props-excludes-properties/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		assert.equal(target.textContent, ' false');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/rest-props-excludes-properties/component.svelte b/packages/svelte/tests/runtime-runes/samples/rest-props-excludes-properties/component.svelte
new file mode 100644
index 0000000000..40561218db
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/rest-props-excludes-properties/component.svelte
@@ -0,0 +1,4 @@
+<script>
+    const { name, ...rest } = $props();
+</script>
+{rest.name} {'name' in rest}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/rest-props-excludes-properties/main.svelte b/packages/svelte/tests/runtime-runes/samples/rest-props-excludes-properties/main.svelte
new file mode 100644
index 0000000000..d9f6d8a21c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/rest-props-excludes-properties/main.svelte
@@ -0,0 +1,4 @@
+<script>
+    import Component from './component.svelte';
+</script>
+<Component name='world' />
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/rich-option-component/Content.svelte b/packages/svelte/tests/runtime-runes/samples/rich-option-component/Content.svelte
new file mode 100644
index 0000000000..437ab3e793
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/rich-option-component/Content.svelte
@@ -0,0 +1,5 @@
+<script>
+	let { text } = $props();
+</script>
+
+<span>{text}</span>
diff --git a/packages/svelte/tests/runtime-runes/samples/rich-option-component/_config.js b/packages/svelte/tests/runtime-runes/samples/rich-option-component/_config.js
new file mode 100644
index 0000000000..39d0db6590
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/rich-option-component/_config.js
@@ -0,0 +1,26 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+// Test that components can be used inside <option> elements.
+// This tests two scenarios:
+// 1. A component that wraps the entire <option> element
+// 2. A component used as content inside an <option> element
+//
+// In jsdom (which doesn't support rich options), the HTML content is stripped,
+// so we only verify the component doesn't crash and values work correctly.
+export default test({
+	test({ assert, target }) {
+		const option1 = target.querySelector('option');
+		const button = target.querySelector('button');
+
+		assert.ok(option1);
+
+		assert.equal(option1?.textContent, 'bb');
+
+		flushSync(() => {
+			button?.click();
+		});
+
+		assert.equal(option1?.textContent, 'aa');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/rich-option-component/main.svelte b/packages/svelte/tests/runtime-runes/samples/rich-option-component/main.svelte
new file mode 100644
index 0000000000..aed1342dfd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/rich-option-component/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Content from './Content.svelte';
+
+	let content = $state('b');
+</script>
+
+
+<!-- Test 2: Option with component as content -->
+<select>
+	<option value="x"><span>{content}</span><Content text={content} /></option>
+</select>
+
+<button onclick={() => content = content === 'a' ? 'b' : 'a'}>
+	Toggle Content
+</button>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/runes-from-func/_config.js b/packages/svelte/tests/runtime-runes/samples/runes-from-func/_config.js
index 7d3dd9993f..5ed7579c62 100644
--- a/packages/svelte/tests/runtime-runes/samples/runes-from-func/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/runes-from-func/_config.js
@@ -1,3 +1,4 @@
+import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
@@ -5,7 +6,7 @@ export default test({
 
 	async test({ assert, target }) {
 		await Promise.resolve();
-		await Promise.resolve();
+		flushSync();
 		assert.htmlEqual(target.innerHTML, `<span>1</span>`);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/select-multiple-invalid-value/_config.js b/packages/svelte/tests/runtime-runes/samples/select-multiple-invalid-value/_config.js
new file mode 100644
index 0000000000..1f04f176af
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/select-multiple-invalid-value/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	warnings: [
+		'The `value` property of a `<select multiple>` element should be an array, but it received a non-array value. The selection will be kept as is.'
+	]
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/select-multiple-invalid-value/main.svelte b/packages/svelte/tests/runtime-runes/samples/select-multiple-invalid-value/main.svelte
new file mode 100644
index 0000000000..f3dfedf0e9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/select-multiple-invalid-value/main.svelte
@@ -0,0 +1,9 @@
+<select multiple value={null}>
+  <option>option</option>
+</select>
+<select multiple value={undefined}>
+  <option>option</option>
+</select>
+<select multiple value={123}>
+  <option>option</option>
+</select>
diff --git a/packages/svelte/tests/runtime-runes/samples/select-option-added/_config.js b/packages/svelte/tests/runtime-runes/samples/select-option-added/_config.js
new file mode 100644
index 0000000000..c91fd59f26
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/select-option-added/_config.js
@@ -0,0 +1,49 @@
+import { flushSync, tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, variant }) {
+		const [button] = target.querySelectorAll('button');
+		const [select] = target.querySelectorAll('select');
+
+		flushSync(() => {
+			select.focus();
+			select.value = '2';
+			select.dispatchEvent(new InputEvent('change', { bubbles: true }));
+		});
+
+		assert.equal(select.selectedOptions[0].textContent, '2');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>add option</button>
+				<p>selected: 2</p>
+				<select>
+					<option${variant === 'hydrate' ? ' selected=""' : ''}>1</option>
+					<option>2</option>
+					<option>3</option>
+				</select>
+			`
+		);
+
+		flushSync(() => button.click());
+		await tick();
+
+		assert.equal(select.selectedOptions[0].textContent, '2');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>add option</button>
+				<p>selected: 2</p>
+				<select>
+					<option${variant === 'hydrate' ? ' selected=""' : ''}>1</option>
+					<option>2</option>
+					<option>3</option>
+					<option>4</option>
+				</select>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/select-option-added/main.svelte b/packages/svelte/tests/runtime-runes/samples/select-option-added/main.svelte
new file mode 100644
index 0000000000..ebf6a6c082
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/select-option-added/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	let options = $state([1, 2, 3]);
+	let selected = $state(1);
+</script>
+
+<button onclick={() => options.push(options.length + 1)}>
+	add option
+</button>
+
+<p>selected: {selected}</p>
+
+<select bind:value={selected}>
+	{#each options as o}
+		<option>{o}</option>
+	{/each}
+</select>
diff --git a/packages/svelte/tests/runtime-runes/samples/select-spread-option-selected/_config.js b/packages/svelte/tests/runtime-runes/samples/select-spread-option-selected/_config.js
new file mode 100644
index 0000000000..50da3ac095
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/select-spread-option-selected/_config.js
@@ -0,0 +1,9 @@
+import { ok, test } from '../../test';
+
+export default test({
+	async test({ assert, target, instance }) {
+		const select = target.querySelector('select');
+		ok(select);
+		assert.equal(select.selectedIndex, 1);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/select-spread-option-selected/main.svelte b/packages/svelte/tests/runtime-runes/samples/select-spread-option-selected/main.svelte
new file mode 100644
index 0000000000..e5fc6c5535
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/select-spread-option-selected/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	let others = {onclick: ()=> {}}
+</script>
+
+<select {...others}>
+	<option>o1</option>
+	<option selected>o2</option>
+</select>
diff --git a/packages/svelte/tests/runtime-runes/samples/select-value-with-call/_config.js b/packages/svelte/tests/runtime-runes/samples/select-value-with-call/_config.js
new file mode 100644
index 0000000000..0597c2fda8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/select-value-with-call/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, errors }) {
+		assert.deepEqual(errors, []);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/select-value-with-call/main.svelte b/packages/svelte/tests/runtime-runes/samples/select-value-with-call/main.svelte
new file mode 100644
index 0000000000..b1d60ecf6d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/select-value-with-call/main.svelte
@@ -0,0 +1,6 @@
+<svelte:options runes />
+<script>
+	function test(){}
+</script>
+
+<select value={test()}></select>
\ No newline at end of file
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/set-text-stable-coercion/_config.js b/packages/svelte/tests/runtime-runes/samples/set-text-stable-coercion/_config.js
new file mode 100644
index 0000000000..01ef02510a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/set-text-stable-coercion/_config.js
@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+export default test({
+	html: 'toString <p>toString</p> <p>[toString]</p> toString',
+	async test() {}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/set-text-stable-coercion/main.svelte b/packages/svelte/tests/runtime-runes/samples/set-text-stable-coercion/main.svelte
new file mode 100644
index 0000000000..601e7ce9fb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/set-text-stable-coercion/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	class Widget {
+		toString() { return "toString" }
+		valueOf() { return "valueOf" }
+	}
+
+	const value = new Widget();
+</script>
+
+<!-- case 1 -->
+{value}
+
+<!-- case 2 -->
+<p>{value}</p>
+
+<!-- case 3 -->
+<p>[{value}]</p>
+
+<!-- case 4 -->
+{#if 1}
+	{value}
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-array/_config.js b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-array/_config.js
new file mode 100644
index 0000000000..5ad6f57e31
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-array/_config.js
@@ -0,0 +1,23 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true,
+		runes: true
+	},
+
+	test({ assert, target }) {
+		const [button1, button2] = target.querySelectorAll('button');
+
+		assert.throws(() => {
+			button1?.click();
+			flushSync();
+		}, /state_unsafe_mutation/);
+
+		assert.doesNotThrow(() => {
+			button2?.click();
+			flushSync();
+		});
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-array/main.svelte b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-array/main.svelte
new file mode 100644
index 0000000000..6468dbebc9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-array/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	let visibleExternal = $state(false);
+	let external = $state([]);
+	const throws = $derived.by(() => {
+		external.push(1);
+		return external;
+	});
+
+	let visibleInternal = $state(false)
+	const works = $derived.by(() => {
+		let internal = $state([]);
+		internal.push(1);
+		return internal;
+	});
+</script>
+
+<button onclick={() => (visibleExternal = true)}>external</button>
+{#if visibleExternal}
+	{throws}
+{/if}
+<button onclick={() => (visibleInternal = true)}>internal</button>
+{#if visibleInternal}
+	{works}
+{/if}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-date/_config.js b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-date/_config.js
new file mode 100644
index 0000000000..5ad6f57e31
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-date/_config.js
@@ -0,0 +1,23 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true,
+		runes: true
+	},
+
+	test({ assert, target }) {
+		const [button1, button2] = target.querySelectorAll('button');
+
+		assert.throws(() => {
+			button1?.click();
+			flushSync();
+		}, /state_unsafe_mutation/);
+
+		assert.doesNotThrow(() => {
+			button2?.click();
+			flushSync();
+		});
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-date/main.svelte b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-date/main.svelte
new file mode 100644
index 0000000000..a3c6aa629f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-date/main.svelte
@@ -0,0 +1,27 @@
+<script>
+	import { SvelteDate } from 'svelte/reactivity';
+
+	let visibleExternal = $state(false);
+	let external = new SvelteDate();
+	const throws = $derived.by(() => {
+		external.setTime(12345);
+		return external;
+	})
+
+	let visibleInternal = $state(false);
+	const works = $derived.by(() => {
+		let internal = new SvelteDate();
+		internal.setTime(12345);
+		return internal;
+	})
+</script>
+
+<button onclick={() => (visibleExternal = true)}>external</button>
+{#if visibleExternal}
+	{throws}
+{/if}
+<button onclick={() => (visibleInternal = true)}>internal</button>
+{#if visibleInternal}
+	{works}
+{/if}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-map/_config.js b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-map/_config.js
new file mode 100644
index 0000000000..c10dc7fb55
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-map/_config.js
@@ -0,0 +1,54 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true,
+		runes: true
+	},
+
+	test({ assert, target }) {
+		const [button1, button2, button3, button4, button5, button6, button7, button8] =
+			target.querySelectorAll('button');
+
+		assert.throws(() => {
+			button1?.click();
+			flushSync();
+		}, /state_unsafe_mutation/);
+
+		assert.doesNotThrow(() => {
+			button2?.click();
+			flushSync();
+		});
+
+		assert.throws(() => {
+			button3?.click();
+			flushSync();
+		}, /state_unsafe_mutation/);
+
+		assert.doesNotThrow(() => {
+			button4?.click();
+			flushSync();
+		});
+
+		assert.throws(() => {
+			button5?.click();
+			flushSync();
+		}, /state_unsafe_mutation/);
+
+		assert.doesNotThrow(() => {
+			button6?.click();
+			flushSync();
+		});
+
+		assert.throws(() => {
+			button7?.click();
+			flushSync();
+		}, /state_unsafe_mutation/);
+
+		assert.doesNotThrow(() => {
+			button8?.click();
+			flushSync();
+		});
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-map/main.svelte b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-map/main.svelte
new file mode 100644
index 0000000000..c37f37ceb6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-map/main.svelte
@@ -0,0 +1,101 @@
+<script>
+	import { SvelteMap } from 'svelte/reactivity';
+
+	let outside_basic = $state(false);
+	let outside_basic_map = new SvelteMap();
+	const throw_basic = $derived.by(() => {
+		outside_basic_map.set(1, 1);
+		return outside_basic_map;
+	});
+
+	let inside_basic = $state(false);
+	const works_basic = $derived.by(() => {
+		let inside = new SvelteMap();
+		inside.set(1, 1);
+		return inside;
+	});
+
+	let outside_has = $state(false);
+	let outside_has_map = new SvelteMap([[1, 1]]);
+	const throw_has = $derived.by(() => {
+		outside_has_map.has(1);
+		outside_has_map.set(1, 2);
+		return outside_has_map;
+	});
+
+	let inside_has = $state(false);
+	const works_has = $derived.by(() => {
+		let inside = new SvelteMap([[1, 1]]);
+		inside.has(1);
+		inside.set(1, 1);
+		return inside;
+	});
+
+	let outside_get = $state(false);
+	let outside_get_map = new SvelteMap([[1, 1]]);
+	const throw_get = $derived.by(() => {
+		outside_get_map.get(1);
+		outside_get_map.set(1, 2);
+		return outside_get_map;
+	});
+
+	let inside_get = $state(false);
+	const works_get = $derived.by(() => {
+		let inside = new SvelteMap([[1, 1]]);
+		inside.get(1);
+		inside.set(1, 1);
+		return inside;
+	});
+
+	let outside_values = $state(false);
+	let outside_values_map = new SvelteMap([[1, 1]]);
+	const throw_values = $derived.by(() => {
+		outside_values_map.values(1);
+		outside_values_map.set(1, 2);
+		return outside_values_map;
+	});
+
+	let inside_values = $state(false);
+	const works_values = $derived.by(() => {
+		let inside = new SvelteMap([[1, 1]]);
+		inside.values();
+		inside.set(1, 1);
+		return inside;
+	});
+</script>
+
+<button onclick={() => (outside_basic = true)}>external</button>
+{#if outside_basic}
+	{throw_basic}
+{/if}
+<button onclick={() => (inside_basic = true)}>internal</button>
+{#if inside_basic}
+	{works_basic}
+{/if}
+
+<button onclick={() => (outside_has = true)}>external</button>
+{#if outside_has}
+	{throw_has}
+{/if}
+<button onclick={() => (inside_has = true)}>internal</button>
+{#if inside_has}
+	{works_has}
+{/if}
+
+<button onclick={() => (outside_get = true)}>external</button>
+{#if outside_get}
+	{throw_get}
+{/if}
+<button onclick={() => (inside_get = true)}>internal</button>
+{#if inside_get}
+	{works_get}
+{/if}
+
+<button onclick={() => (outside_values = true)}>external</button>
+{#if outside_values}
+	{throw_values}
+{/if}
+<button onclick={() => (inside_values = true)}>internal</button>
+{#if inside_values}
+	{works_values}
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-object/_config.js b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-object/_config.js
new file mode 100644
index 0000000000..5ad6f57e31
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-object/_config.js
@@ -0,0 +1,23 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true,
+		runes: true
+	},
+
+	test({ assert, target }) {
+		const [button1, button2] = target.querySelectorAll('button');
+
+		assert.throws(() => {
+			button1?.click();
+			flushSync();
+		}, /state_unsafe_mutation/);
+
+		assert.doesNotThrow(() => {
+			button2?.click();
+			flushSync();
+		});
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-object/main.svelte b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-object/main.svelte
new file mode 100644
index 0000000000..2174bde59f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-object/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	let visibleExternal = $state(false);
+	let external = $state({ v: 1 });
+	const throws = $derived.by(() => {
+		external.v = 2;
+		return external;
+	});
+
+	let visibleInternal = $state(false)
+	const works = $derived.by(() => {
+		let internal = $state({ v: 1 });
+		internal.v = 2;
+		return internal;
+	});
+</script>
+
+<button onclick={() => (visibleExternal = true)}>external</button>
+{#if visibleExternal}
+	{throws}
+{/if}
+<button onclick={() => (visibleInternal = true)}>internal</button>
+{#if visibleInternal}
+	{works}
+{/if}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-primitive/_config.js b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-primitive/_config.js
new file mode 100644
index 0000000000..5ad6f57e31
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-primitive/_config.js
@@ -0,0 +1,23 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true,
+		runes: true
+	},
+
+	test({ assert, target }) {
+		const [button1, button2] = target.querySelectorAll('button');
+
+		assert.throws(() => {
+			button1?.click();
+			flushSync();
+		}, /state_unsafe_mutation/);
+
+		assert.doesNotThrow(() => {
+			button2?.click();
+			flushSync();
+		});
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-primitive/main.svelte b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-primitive/main.svelte
new file mode 100644
index 0000000000..21de8b9d91
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-primitive/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	let visibleExternal = $state(false);
+	let external = $state(1);
+	const throws = $derived.by(() => {
+		external = 2;
+		return external;
+	});
+
+	let visibleInternal = $state(false);
+	const works = $derived.by(() => {
+		let internal = $state(1);
+		internal = 2;
+		return internal;
+	});
+</script>
+
+<button onclick={() => (visibleExternal = true)}>external</button>
+{#if visibleExternal}
+	{throws}
+{/if}
+<button onclick={() => (visibleInternal = true)}>internal</button>
+{#if visibleInternal}
+	{works}
+{/if}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-set/_config.js b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-set/_config.js
new file mode 100644
index 0000000000..5cf066fb8a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-set/_config.js
@@ -0,0 +1,33 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true,
+		runes: true
+	},
+
+	test({ assert, target }) {
+		const [button1, button2, button3, button4] = target.querySelectorAll('button');
+
+		assert.throws(() => {
+			button1?.click();
+			flushSync();
+		}, /state_unsafe_mutation/);
+
+		assert.doesNotThrow(() => {
+			button2?.click();
+			flushSync();
+		});
+
+		assert.throws(() => {
+			button3?.click();
+			flushSync();
+		}, /state_unsafe_mutation/);
+
+		assert.doesNotThrow(() => {
+			button4?.click();
+			flushSync();
+		});
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-set/main.svelte b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-set/main.svelte
new file mode 100644
index 0000000000..1d6735ba64
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-set/main.svelte
@@ -0,0 +1,52 @@
+<script>
+	import { SvelteSet } from 'svelte/reactivity';
+
+	let outside_basic = $state(false);
+	let outside_basic_set = new SvelteSet();
+	const throws_basic = $derived.by(() => {
+		outside_basic_set.add(1);
+		return outside_basic_set;
+	})
+
+	let inside_basic = $state(false);
+	const works_basic = $derived.by(() => {
+		let internal = new SvelteSet();
+		internal.add(1);
+		return internal;
+	})
+
+	let outside_has_delete = $state(false);
+	let outside_has_delete_set = new SvelteSet([1]);
+	const throws_has_delete = $derived.by(() => {
+		outside_has_delete_set.has(1);
+		outside_has_delete_set.delete(1);
+		return outside_has_delete_set;
+	})
+
+	let inside_has_delete = $state(false);
+	const works_has_delete = $derived.by(() => {
+		let internal = new SvelteSet([1]);
+		internal.has(1);
+		internal.delete(1);
+		return internal;
+	})
+</script>
+
+<button onclick={() => (outside_basic = true)}>external</button>
+{#if outside_basic}
+	{throws_basic}
+{/if}
+<button onclick={() => (inside_basic = true)}>internal</button>
+{#if inside_basic}
+	{works_basic}
+{/if}
+
+<button onclick={() => (outside_has_delete = true)}>external</button>
+{#if outside_has_delete}
+	{throws_has_delete}
+{/if}
+<button onclick={() => (inside_has_delete = true)}>internal</button>
+{#if inside_has_delete}
+	{works_has_delete}
+{/if}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-spring/_config.js b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-spring/_config.js
new file mode 100644
index 0000000000..5ad6f57e31
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-spring/_config.js
@@ -0,0 +1,23 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true,
+		runes: true
+	},
+
+	test({ assert, target }) {
+		const [button1, button2] = target.querySelectorAll('button');
+
+		assert.throws(() => {
+			button1?.click();
+			flushSync();
+		}, /state_unsafe_mutation/);
+
+		assert.doesNotThrow(() => {
+			button2?.click();
+			flushSync();
+		});
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-spring/main.svelte b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-spring/main.svelte
new file mode 100644
index 0000000000..b0818deca9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-spring/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	import { Spring } from 'svelte/motion';
+
+	let outside_basic = $state(false);
+	let outside_basic_spring = new Spring(0);
+	const throws_basic = $derived.by(() => {
+		outside_basic_spring.set(1);
+		return outside_basic_spring;
+	})
+
+	let inside_basic = $state(false);
+	const works_basic = $derived.by(() => {
+		let internal = new Spring(0);
+		internal.set(1);
+		return internal;
+	})
+</script>
+
+<button onclick={() => (outside_basic = true)}>external</button>
+{#if outside_basic}
+	{throws_basic}
+{/if}
+<button onclick={() => (inside_basic = true)}>internal</button>
+{#if inside_basic}
+	{works_basic}
+{/if}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-tween/_config.js b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-tween/_config.js
new file mode 100644
index 0000000000..5ad6f57e31
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-tween/_config.js
@@ -0,0 +1,23 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true,
+		runes: true
+	},
+
+	test({ assert, target }) {
+		const [button1, button2] = target.querySelectorAll('button');
+
+		assert.throws(() => {
+			button1?.click();
+			flushSync();
+		}, /state_unsafe_mutation/);
+
+		assert.doesNotThrow(() => {
+			button2?.click();
+			flushSync();
+		});
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-tween/main.svelte b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-tween/main.svelte
new file mode 100644
index 0000000000..bd007f2b50
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-tween/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	import { Tween } from 'svelte/motion';
+
+	let outside_basic = $state(false);
+	let outside_basic_tween = new Tween(0);
+	const throws_basic = $derived.by(() => {
+		outside_basic_tween.set(1);
+		return outside_basic_tween;
+	})
+
+	let inside_basic = $state(false);
+	const works_basic = $derived.by(() => {
+		let internal = new Tween(0);
+		internal.set(1);
+		return internal;
+	})
+</script>
+
+<button onclick={() => (outside_basic = true)}>external</button>
+{#if outside_basic}
+	{throws_basic}
+{/if}
+<button onclick={() => (inside_basic = true)}>internal</button>
+{#if inside_basic}
+	{works_basic}
+{/if}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-url-search-params/_config.js b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-url-search-params/_config.js
new file mode 100644
index 0000000000..5ad6f57e31
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-url-search-params/_config.js
@@ -0,0 +1,23 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true,
+		runes: true
+	},
+
+	test({ assert, target }) {
+		const [button1, button2] = target.querySelectorAll('button');
+
+		assert.throws(() => {
+			button1?.click();
+			flushSync();
+		}, /state_unsafe_mutation/);
+
+		assert.doesNotThrow(() => {
+			button2?.click();
+			flushSync();
+		});
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-url-search-params/main.svelte b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-url-search-params/main.svelte
new file mode 100644
index 0000000000..014a1e4e6d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-url-search-params/main.svelte
@@ -0,0 +1,27 @@
+<script>
+	import { SvelteURLSearchParams } from 'svelte/reactivity';
+
+	let visibleExternal = $state(false);
+	let external = new SvelteURLSearchParams();
+	const throws = $derived.by(() => {
+		external.append('foo', 'bar')
+		return external;
+	})
+
+	let visibleInternal = $state(false);
+	const works = $derived.by(() => {
+		let internal = new SvelteURLSearchParams();
+		internal.append('foo', 'bar')
+		return internal;
+	})
+</script>
+
+<button onclick={() => (visibleExternal = true)}>external</button>
+{#if visibleExternal}
+	{throws}
+{/if}
+<button onclick={() => (visibleInternal = true)}>internal</button>
+{#if visibleInternal}
+	{works}
+{/if}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-url/_config.js b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-url/_config.js
new file mode 100644
index 0000000000..5ad6f57e31
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-url/_config.js
@@ -0,0 +1,23 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true,
+		runes: true
+	},
+
+	test({ assert, target }) {
+		const [button1, button2] = target.querySelectorAll('button');
+
+		assert.throws(() => {
+			button1?.click();
+			flushSync();
+		}, /state_unsafe_mutation/);
+
+		assert.doesNotThrow(() => {
+			button2?.click();
+			flushSync();
+		});
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/side-effect-derived-url/main.svelte b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-url/main.svelte
new file mode 100644
index 0000000000..69ead384c3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/side-effect-derived-url/main.svelte
@@ -0,0 +1,27 @@
+<script>
+	import { SvelteURL } from 'svelte/reactivity';
+
+	let visibleExternal = $state(false);
+	let external = new SvelteURL('https://svelte.dev');
+	const throws = $derived.by(() => {
+		external.host = 'kit.svelte.dev'
+		return external;
+	})
+
+	let visibleInternal = $state(false);
+	const works = $derived.by(() => {
+		let internal = new SvelteURL('https://svelte.dev');
+		internal.host = 'kit.svelte.dev'
+		return internal;
+	})
+</script>
+
+<button onclick={() => (visibleExternal = true)}>external</button>
+{#if visibleExternal}
+	{throws}
+{/if}
+<button onclick={() => (visibleInternal = true)}>internal</button>
+{#if visibleInternal}
+	{works}
+{/if}
+
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-access-in-script/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-access-in-script/_config.js
new file mode 100644
index 0000000000..ed0ead960b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-access-in-script/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-access-in-script/fn.js b/packages/svelte/tests/runtime-runes/samples/snippet-access-in-script/fn.js
new file mode 100644
index 0000000000..9e9a48c60c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-access-in-script/fn.js
@@ -0,0 +1,3 @@
+export function fn(snippet) {
+	return snippet;
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-access-in-script/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-access-in-script/main.svelte
new file mode 100644
index 0000000000..cc73aa31db
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-access-in-script/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { fn } from "./fn.js";
+	let variable = $state("var");
+
+	fn(test);
+</script>
+
+{#snippet test()}
+	{variable}
+{/snippet}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-block-without-render-tag-dev/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-block-without-render-tag-dev/_config.js
new file mode 100644
index 0000000000..94c5de10af
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-block-without-render-tag-dev/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+	runtime_error: 'snippet_without_render_tag'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-block-without-render-tag-dev/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-block-without-render-tag-dev/main.svelte
new file mode 100644
index 0000000000..3f8edfe4fa
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-block-without-render-tag-dev/main.svelte
@@ -0,0 +1,5 @@
+{testSnippet}
+
+{#snippet testSnippet()}
+  <p>hi again</p>
+{/snippet}
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-block-without-render-tag-prod/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-block-without-render-tag-prod/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-block-without-render-tag-prod/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-block-without-render-tag-prod/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-block-without-render-tag-prod/main.svelte
new file mode 100644
index 0000000000..3f8edfe4fa
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-block-without-render-tag-prod/main.svelte
@@ -0,0 +1,5 @@
+{testSnippet}
+
+{#snippet testSnippet()}
+  <p>hi again</p>
+{/snippet}
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-children-without-render-tag-dev-prod/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-children-without-render-tag-dev-prod/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-children-without-render-tag-dev-prod/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-children-without-render-tag-dev-prod/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-children-without-render-tag-dev-prod/main.svelte
new file mode 100644
index 0000000000..4a4ed3176f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-children-without-render-tag-dev-prod/main.svelte
@@ -0,0 +1,5 @@
+<script>
+  import UnrenderedChildren from './unrendered-children.svelte';
+</script>
+
+<UnrenderedChildren>Hi</UnrenderedChildren>
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-children-without-render-tag-dev-prod/unrendered-children.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-children-without-render-tag-dev-prod/unrendered-children.svelte
new file mode 100644
index 0000000000..6b7154a5a4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-children-without-render-tag-dev-prod/unrendered-children.svelte
@@ -0,0 +1,5 @@
+<script>
+  let { children } = $props();
+</script>
+
+{children}
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-children-without-render-tag-dev/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-children-without-render-tag-dev/_config.js
new file mode 100644
index 0000000000..94c5de10af
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-children-without-render-tag-dev/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+	runtime_error: 'snippet_without_render_tag'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-children-without-render-tag-dev/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-children-without-render-tag-dev/main.svelte
new file mode 100644
index 0000000000..4a4ed3176f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-children-without-render-tag-dev/main.svelte
@@ -0,0 +1,5 @@
+<script>
+  import UnrenderedChildren from './unrendered-children.svelte';
+</script>
+
+<UnrenderedChildren>Hi</UnrenderedChildren>
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-children-without-render-tag-dev/unrendered-children.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-children-without-render-tag-dev/unrendered-children.svelte
new file mode 100644
index 0000000000..6b7154a5a4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-children-without-render-tag-dev/unrendered-children.svelte
@@ -0,0 +1,5 @@
+<script>
+  let { children } = $props();
+</script>
+
+{children}
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-const-same-block/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-const-same-block/_config.js
new file mode 100644
index 0000000000..27f013d6d1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-const-same-block/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	test() {}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-const-same-block/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-const-same-block/main.svelte
new file mode 100644
index 0000000000..70c7d64f18
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-const-same-block/main.svelte
@@ -0,0 +1,4 @@
+{#if true}
+	{@const xx = test}
+	{#snippet test()}{/snippet}
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-destructure-array/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-destructure-array/_config.js
new file mode 100644
index 0000000000..05e3e80b79
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-destructure-array/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: `a`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-destructure-array/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-destructure-array/main.svelte
new file mode 100644
index 0000000000..37345c629e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-destructure-array/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	let array = $state(['a', 'b', 'c'])
+</script>
+
+{#snippet content([x])}
+	{x}
+{/snippet}
+
+{@render content(array)}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-hoisting-4/Component.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-hoisting-4/Component.svelte
new file mode 100644
index 0000000000..597ecf5fc4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-hoisting-4/Component.svelte
@@ -0,0 +1 @@
+<h1>Hello world!</h1>
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-hoisting-4/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-hoisting-4/_config.js
new file mode 100644
index 0000000000..240263603d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-hoisting-4/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: '<h1>Hello world!</h1>'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-hoisting-4/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-hoisting-4/main.svelte
new file mode 100644
index 0000000000..d3130a99bd
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-hoisting-4/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Component from './Component.svelte';
+
+	const object = {
+		property: Component
+	};
+</script>
+
+{#snippet not_hoisted()}
+	<object.property />
+{/snippet}
+
+{@render not_hoisted()}
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-invalid-call/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-invalid-call/_config.js
new file mode 100644
index 0000000000..7e72fd751a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-invalid-call/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	error: 'invalid_snippet_arguments'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-invalid-call/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-invalid-call/main.svelte
new file mode 100644
index 0000000000..3c47db3f96
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-invalid-call/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	test();
+</script>
+
+{#snippet test()}
+	<p>hello</p>
+{/snippet}
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-slot-let-error/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-slot-let-error/_config.js
index e8adfb38f2..4d892bd140 100644
--- a/packages/svelte/tests/runtime-runes/samples/snippet-slot-let-error/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/snippet-slot-let-error/_config.js
@@ -1,6 +1,7 @@
 import { test } from '../../test';
 
 export default test({
+	skip_mode: ['hydrate', 'server'],
 	compileOptions: {
 		dev: true
 	},
diff --git a/packages/svelte/tests/runtime-runes/samples/spread-element-input-select/_config.js b/packages/svelte/tests/runtime-runes/samples/spread-element-input-select/_config.js
new file mode 100644
index 0000000000..71802ba6de
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/spread-element-input-select/_config.js
@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const select = target.querySelector('select');
+		ok(select);
+		const [option1, option2] = select;
+
+		assert.ok(option1.selected);
+		assert.ok(!option2.selected);
+
+		const btn = target.querySelector('button');
+		flushSync(() => {
+			btn?.click();
+		});
+		assert.ok(option1.selected);
+		assert.ok(!option2.selected);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/spread-element-input-select/main.svelte b/packages/svelte/tests/runtime-runes/samples/spread-element-input-select/main.svelte
new file mode 100644
index 0000000000..fb1f7ddf96
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/spread-element-input-select/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	let { value = "Hello", spread = { disabled: false } } = $props();
+</script>
+
+<button onclick={()=> spread = { disabled: false }}></button>
+
+<select bind:value {...spread}>
+  <option>Hello</option>
+  <option>World</option>
+</select>
diff --git a/packages/svelte/tests/runtime-runes/samples/state-proxy-equality-mismatch/_config.js b/packages/svelte/tests/runtime-runes/samples/state-proxy-equality-mismatch/_config.js
new file mode 100644
index 0000000000..0fb086c8e0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/state-proxy-equality-mismatch/_config.js
@@ -0,0 +1,41 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	async test({ assert, target, warnings }) {
+		const [btn1, btn2, btn3, btn4, btn5, btn6, clear] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			btn1.click();
+			btn2.click();
+			btn3.click();
+			btn4.click();
+			btn5.click();
+			btn6.click();
+		});
+
+		assert.deepEqual(warnings, [
+			'Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `array.includes(...)` will produce unexpected results',
+			'Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `array.indexOf(...)` will produce unexpected results',
+			'Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `array.lastIndexOf(...)` will produce unexpected results'
+		]);
+
+		flushSync(() => clear.click());
+		warnings.length = 0;
+
+		flushSync(() => {
+			btn1.click();
+			btn2.click();
+			btn3.click();
+			btn4.click();
+			btn5.click();
+			btn6.click();
+		});
+
+		assert.deepEqual(warnings, []);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/state-proxy-equality-mismatch/main.svelte b/packages/svelte/tests/runtime-runes/samples/state-proxy-equality-mismatch/main.svelte
new file mode 100644
index 0000000000..1b7bf444f1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/state-proxy-equality-mismatch/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	let primitive = 'foo';
+	let object = {};
+
+	let array = $state([primitive, object]);
+</script>
+
+<button onclick={() => array.includes(primitive)}>array.includes(primitive)</button>
+<button onclick={() => array.includes(object)}>array.includes(object)</button>
+
+<hr />
+
+<button onclick={() => array.indexOf(primitive)}>array.indexOf(primitive)</button>
+<button onclick={() => array.indexOf(object)}>array.indexOf(object)</button>
+
+<hr />
+
+<button onclick={() => array.lastIndexOf(primitive)}>array.lastIndexOf(primitive)</button>
+<button onclick={() => array.lastIndexOf(object)}>array.lastIndexOf(object)</button>
+
+<hr />
+
+<button onclick={() => (array.length = 0)}>clear</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/static-boundary/_config.js b/packages/svelte/tests/runtime-runes/samples/static-boundary/_config.js
new file mode 100644
index 0000000000..d986ed8cd5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/static-boundary/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: '<div><div>test</div></div>'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/static-boundary/main.svelte b/packages/svelte/tests/runtime-runes/samples/static-boundary/main.svelte
new file mode 100644
index 0000000000..7f43a1afaf
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/static-boundary/main.svelte
@@ -0,0 +1,5 @@
+<div>
+	<svelte:boundary>
+		<div>test</div>
+	</svelte:boundary>
+</div>
\ No newline at end of file
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/store-reassign-object/_config.js b/packages/svelte/tests/runtime-runes/samples/store-reassign-object/_config.js
new file mode 100644
index 0000000000..f9a329889d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/store-reassign-object/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ target, assert }) {
+		assert.htmlEqual(target.innerHTML, `<p>bar</p>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/store-reassign-object/main.svelte b/packages/svelte/tests/runtime-runes/samples/store-reassign-object/main.svelte
new file mode 100644
index 0000000000..ecffbb2d83
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/store-reassign-object/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { writable } from "svelte/store";
+
+	const obj = writable({ name: 'foo' });
+
+	$obj = { name: 'bar' };
+
+	const clone = structuredClone($obj);
+</script>
+
+<p>{clone.name}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/store-unsubscribe-not-referenced-after-2/_config.js b/packages/svelte/tests/runtime-runes/samples/store-unsubscribe-not-referenced-after-2/_config.js
new file mode 100644
index 0000000000..d7293f9b70
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/store-unsubscribe-not-referenced-after-2/_config.js
@@ -0,0 +1,54 @@
+import { tick } from 'svelte';
+import { ok, test } from '../../test';
+
+// Test that the store is unsubscribed from, even if it's not referenced once the store itself is set to null
+export default test({
+	skip_no_async: true,
+
+	async test({ target, assert }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`<input type="number"> <p>0</p> <button>add watcher</button>`
+		);
+
+		target.querySelector('button')?.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<input type="number"> <p>1</p> hello 1 <button>remove watcher</button>`
+		);
+
+		const input = target.querySelector('input');
+		ok(input);
+
+		input.stepUp();
+		input.dispatchEvent(new Event('input', { bubbles: true }));
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<input type="number"> <p>2</p> hello 2 <button>remove watcher</button>`
+		);
+
+		target.querySelector('button')?.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<input type="number"> <p>2</p> <button>add watcher</button>`
+		);
+
+		input.stepUp();
+		input.dispatchEvent(new Event('input', { bubbles: true }));
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<input type="number"> <p>2</p> <button>add watcher</button>`
+		);
+
+		target.querySelector('button')?.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<input type="number"> <p>3</p> hello 3 <button>remove watcher</button>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/store-unsubscribe-not-referenced-after-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/store-unsubscribe-not-referenced-after-2/main.svelte
new file mode 100644
index 0000000000..4abfd3c2f9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/store-unsubscribe-not-referenced-after-2/main.svelte
@@ -0,0 +1,29 @@
+<script>
+	import { writable, derived } from "svelte/store";
+
+	const obj = writable({ a: 1 });
+	let count = $state(0);
+	let watcherA = $state();
+
+	function watch (prop) {
+		return derived(obj, (o) => {
+			count++;
+			return o[prop];
+		});
+	}
+</script>
+
+<input type="number" bind:value={$obj.a}>
+<p>{count}</p>
+
+{#if watcherA}
+	<!-- make sure the presence of async work doesn't break the `legacy_updates` mechanism -->
+	{#if true}
+		{await 'hello'}
+	{/if}
+
+	{$watcherA}
+	<button on:click={() => watcherA = null}>remove watcher</button>
+{:else}
+	<button on:click={() => watcherA = watch("a")}>add watcher</button>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/store-update-on-destroy/Test.svelte b/packages/svelte/tests/runtime-runes/samples/store-update-on-destroy/Test.svelte
new file mode 100644
index 0000000000..364a4a7aca
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/store-update-on-destroy/Test.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	const { store } = $props();
+
+	$effect(() => {
+		$store;
+		return () => {
+			console.log($store);
+			$store++;
+			console.log($store);
+		};
+	});
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/store-update-on-destroy/_config.js b/packages/svelte/tests/runtime-runes/samples/store-update-on-destroy/_config.js
new file mode 100644
index 0000000000..bb99988756
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/store-update-on-destroy/_config.js
@@ -0,0 +1,12 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, logs }) {
+		const input = target.querySelector('input');
+		flushSync(() => {
+			input?.click();
+		});
+		assert.deepEqual(logs, [0, 1]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/store-update-on-destroy/main.svelte b/packages/svelte/tests/runtime-runes/samples/store-update-on-destroy/main.svelte
new file mode 100644
index 0000000000..7ba59b5afc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/store-update-on-destroy/main.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { writable } from 'svelte/store';
+
+	import Test from './Test.svelte';
+
+	let store = writable(0);
+
+	let checked = $state(true);
+</script>
+
+<input type="checkbox" bind:checked />
+
+{#if checked}
+	<Test {store} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/style-directive-mutations/_config.js b/packages/svelte/tests/runtime-runes/samples/style-directive-mutations/_config.js
new file mode 100644
index 0000000000..bd76e4e6b9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/style-directive-mutations/_config.js
@@ -0,0 +1,95 @@
+import { flushSync, tick } from 'svelte';
+import { test } from '../../test';
+
+// This test counts mutations on hydration
+// set_style() should not mutate style on hydration, except if mismatch
+export default test({
+	mode: ['server', 'hydrate'],
+
+	server_props: {
+		browser: false
+	},
+
+	props: {
+		browser: true
+	},
+
+	ssrHtml: `
+		<main id="main" style="color: black;">
+			<div style="color: red; font-size: 18px !important;"></div>
+			<div style="border: 1px solid; color: red; font-size: 18px !important;"></div>
+			<div style="border: 1px solid; color: red; font-size: 18px !important;"></div>
+			<div style="border: 1px solid; color: red; font-size: 18px !important;"></div>
+			<div style="background:blue; background: linear-gradient(0, white 0%, red 100%); color: red; font-size: 18px !important;"></div>
+			<div style="border: 1px solid; color: red; font-size: 18px !important;"></div>
+			<div style="background: url(https://placehold.co/100x100?text=;&font=roboto); color: red; font-size: 18px !important;"></div>
+			<div style="background: url(&quot;https://placehold.co/100x100?text=;&font=roboto&quot;); color: red; font-size: 18px !important;"></div>
+			<div style="background: url('https://placehold.co/100x100?text=;&font=roboto'); color: red; font-size: 18px !important;"></div>
+		</main>
+	`,
+
+	html: `
+		<main id="main" style="color: white;">
+			<div style="color: red; font-size: 18px !important;"></div>
+			<div style="border: 1px solid; color: red; font-size: 18px !important;"></div>
+			<div style="border: 1px solid; color: red; font-size: 18px !important;"></div>
+			<div style="border: 1px solid; color: red; font-size: 18px !important;"></div>
+			<div style="background:blue; background: linear-gradient(0, white 0%, red 100%); color: red; font-size: 18px !important;"></div>
+			<div style="border: 1px solid; color: red; font-size: 18px !important;"></div>
+			<div style="background: url(https://placehold.co/100x100?text=;&font=roboto); color: red; font-size: 18px !important;"></div>
+			<div style="background: url(&quot;https://placehold.co/100x100?text=;&font=roboto&quot;); color: red; font-size: 18px !important;"></div>
+			<div style="background: url('https://placehold.co/100x100?text=;&font=roboto'); color: red; font-size: 18px !important;"></div>
+		</main>
+	`,
+
+	async test({ target, assert, component, instance }) {
+		flushSync();
+		tick();
+		assert.deepEqual(instance.get_and_clear_mutations(), ['MAIN']);
+
+		let divs = target.querySelectorAll('div');
+
+		// Note : we cannot compare HTML because set_style() use dom.style.cssText
+		// which can alter the format of the attribute...
+
+		divs.forEach((d) => assert.equal(d.style.margin, ''));
+		divs.forEach((d) => assert.equal(d.style.color, 'red'));
+		divs.forEach((d) => assert.equal(d.style.fontSize, '18px'));
+
+		component.margin = '1px';
+		flushSync();
+		assert.deepEqual(
+			instance.get_and_clear_mutations(),
+			['DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV'],
+			'margin'
+		);
+		divs.forEach((d) => assert.equal(d.style.margin, '1px'));
+
+		component.color = 'yellow';
+		flushSync();
+		assert.deepEqual(
+			instance.get_and_clear_mutations(),
+			['DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV'],
+			'color'
+		);
+		divs.forEach((d) => assert.equal(d.style.color, 'yellow'));
+
+		component.fontSize = '10px';
+		flushSync();
+		assert.deepEqual(
+			instance.get_and_clear_mutations(),
+			['DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV'],
+			'fontSize'
+		);
+		divs.forEach((d) => assert.equal(d.style.fontSize, '10px'));
+
+		component.fontSize = null;
+		flushSync();
+		assert.deepEqual(
+			instance.get_and_clear_mutations(),
+			['DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV'],
+			'fontSize'
+		);
+		divs.forEach((d) => assert.equal(d.style.fontSize, ''));
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/style-directive-mutations/main.svelte b/packages/svelte/tests/runtime-runes/samples/style-directive-mutations/main.svelte
new file mode 100644
index 0000000000..ae4da8ae37
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/style-directive-mutations/main.svelte
@@ -0,0 +1,54 @@
+<script>
+	let {
+		margin = null,
+		color = 'red',
+		fontSize = '18px',
+		style1 = 'border: 1px solid',
+		style2 = 'border: 1px solid; margin: 1em',
+		style3 = 'color:blue; border: 1px solid; color: green;',
+		style4 = 'background:blue; background: linear-gradient(0, white 0%, red 100%)',
+		style5 = 'border: 1px solid; /* width: 100px; height: 100%; color: green */',
+		style6 = 'background: url(https://placehold.co/100x100?text=;&font=roboto);',
+		style7 = 'background: url("https://placehold.co/100x100?text=;&font=roboto");',
+		style8 = "background: url('https://placehold.co/100x100?text=;&font=roboto');",
+		
+		browser
+	} = $props();
+
+	let mutations = [];
+	let observer;
+
+	if (browser) {
+		observer = new MutationObserver(update_mutation_records);
+		observer.observe(document.querySelector('#main'), { attributes: true, subtree: true });
+
+		$effect(() => {
+			return () => observer.disconnect();
+		});
+	}
+
+	function update_mutation_records(results) {
+		for (const r of results) {
+			mutations.push(r.target.nodeName);
+		}
+	}
+
+	export function get_and_clear_mutations() {
+		update_mutation_records(observer.takeRecords());
+		const result = mutations;
+		mutations = [];
+		return result;
+	}
+</script>
+
+<main id="main" style:color={browser?'white':'black'}>
+	<div style:margin style:color style:font-size|important={fontSize}></div>
+	<div style={style1} style:margin style:color style:font-size|important={fontSize}></div>
+	<div style={style2} style:margin style:color style:font-size|important={fontSize}></div>
+	<div style={style3} style:margin style:color style:font-size|important={fontSize}></div>
+	<div style={style4} style:margin style:color style:font-size|important={fontSize}></div>
+	<div style={style5} style:margin style:color style:font-size|important={fontSize}></div>
+	<div style={style6} style:margin style:color style:font-size|important={fontSize}></div>
+	<div style={style7} style:margin style:color style:font-size|important={fontSize}></div>
+	<div style={style8} style:margin style:color style:font-size|important={fontSize}></div>
+</main>
diff --git a/packages/svelte/tests/runtime-runes/samples/style-update/_config.js b/packages/svelte/tests/runtime-runes/samples/style-update/_config.js
new file mode 100644
index 0000000000..52690a431a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/style-update/_config.js
@@ -0,0 +1,65 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+const style_1 = 'invalid-key:0; margin:4px;;color: green ;color:blue ';
+const style_2 = ' other-key : 0 ; padding:2px; COLOR:green; color: blue';
+const style_2_normalized = 'padding: 2px; color: blue;';
+
+// https://github.com/sveltejs/svelte/issues/15309
+export default test({
+	props: {
+		style: style_1
+	},
+
+	ssrHtml: `
+		<div style="${style_1}"></div>
+		<div style="${style_1}"></div>
+
+		<custom-element style="${style_1}"></custom-element>
+		<custom-element style="${style_1}"></custom-element>
+	`,
+
+	async test({ assert, target, component }) {
+		component.style = style_2;
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div style="${style_2_normalized}"></div>
+			<div style="${style_2_normalized}"></div>
+
+			<custom-element style="${style_2_normalized}"></custom-element>
+			<custom-element style="${style_2_normalized}"></custom-element>
+			`
+		);
+
+		component.style = '';
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div style=""></div>
+			<div style=""></div>
+
+			<custom-element style=""></custom-element>
+			<custom-element style=""></custom-element>
+			`
+		);
+
+		component.style = null;
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div></div>
+			<div></div>
+
+			<custom-element></custom-element>
+			<custom-element></custom-element>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/style-update/main.svelte b/packages/svelte/tests/runtime-runes/samples/style-update/main.svelte
new file mode 100644
index 0000000000..d29590d670
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/style-update/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	let { style } = $props();
+</script>
+
+<div {style}></div>
+<div {...{style}}></div>
+
+<custom-element {style}></custom-element>
+<custom-element {...{style}}></custom-element>
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-boundary-dev-const/_config.js b/packages/svelte/tests/runtime-runes/samples/svelte-boundary-dev-const/_config.js
new file mode 100644
index 0000000000..3c0195ce34
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-boundary-dev-const/_config.js
@@ -0,0 +1,33 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+// https://github.com/sveltejs/svelte/issues/15368
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	mode: ['client'],
+
+	html: `
+		<p>BOOM</p>
+		<p>BOOM</p>
+		<div>OK</div>
+		<div>OK</div>
+	`,
+
+	async test({ target, assert, component }) {
+		component.ok = false;
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+		<p>BOOM</p>
+		<p>BOOM</p>
+		<p>BOOM</p>
+		<p>BOOM</p>
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-boundary-dev-const/main.svelte b/packages/svelte/tests/runtime-runes/samples/svelte-boundary-dev-const/main.svelte
new file mode 100644
index 0000000000..30e074c762
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-boundary-dev-const/main.svelte
@@ -0,0 +1,49 @@
+<script>
+	let { ok = true } = $props();
+
+	function throwError() {
+	  throw new Error();
+	}
+
+	function throwErrorOnUpdate() {
+		if (ok) {
+			return "OK";
+		} else {
+			throwError();
+		}
+	}
+</script>
+  
+<svelte:boundary>
+	<div>{throwError()}</div>
+  
+	{#snippet failed()}
+		<p>BOOM</p>
+	{/snippet}
+</svelte:boundary>
+
+<svelte:boundary>
+	{@const result = throwError()}
+	<div>{result}</div>
+  
+	{#snippet failed()}
+		<p>BOOM</p>
+	{/snippet}
+</svelte:boundary>
+
+<svelte:boundary>
+	<div>{throwErrorOnUpdate()}</div>
+  
+	{#snippet failed()}
+		<p>BOOM</p>
+	{/snippet}
+</svelte:boundary>
+
+<svelte:boundary>
+	{@const result = throwErrorOnUpdate()}
+	<div>{result}</div>
+  
+	{#snippet failed()}
+		<p>BOOM</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-component-props-update/Comp-1.svelte b/packages/svelte/tests/runtime-runes/samples/svelte-component-props-update/Comp-1.svelte
new file mode 100644
index 0000000000..fdafa27c3c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-component-props-update/Comp-1.svelte
@@ -0,0 +1,7 @@
+<script>
+	let { data } = $props();
+</script>
+
+{#each data.obj.arr as i}
+	<p>{i}</p>
+{/each}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-component-props-update/Comp-2.svelte b/packages/svelte/tests/runtime-runes/samples/svelte-component-props-update/Comp-2.svelte
new file mode 100644
index 0000000000..e345a7697c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-component-props-update/Comp-2.svelte
@@ -0,0 +1 @@
+<p>Comp 2</p>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-component-props-update/_config.js b/packages/svelte/tests/runtime-runes/samples/svelte-component-props-update/_config.js
new file mode 100644
index 0000000000..ff5ca12dbf
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-component-props-update/_config.js
@@ -0,0 +1,11 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [btn] = target.querySelectorAll('button');
+		btn.click();
+		flushSync();
+		assert.htmlEqual(target.innerHTML, `<button>Change</button> <p>Comp 2</p>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-component-props-update/main.svelte b/packages/svelte/tests/runtime-runes/samples/svelte-component-props-update/main.svelte
new file mode 100644
index 0000000000..abd785fff3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-component-props-update/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Comp_1 from './Comp-1.svelte';
+	import Comp_2 from './Comp-2.svelte';
+
+	let Comp = $state.raw(Comp_1);
+	let data = $state.raw({ obj: { arr: [1, 2, 3] } });
+
+	function change() {
+		Comp = Comp_2;
+		data = {};
+	}
+</script>
+
+<button onclick={change}>Change</button>
+
+<Comp {data} />
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-element-css-hash/_config.js b/packages/svelte/tests/runtime-runes/samples/svelte-element-css-hash/_config.js
new file mode 100644
index 0000000000..c7a6213d82
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-element-css-hash/_config.js
@@ -0,0 +1,60 @@
+import { flushSync } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	html: `
+		<div></div>
+		<div class="red svelte-p153w3"></div>
+		<div></div>
+		<div class="red svelte-p153w3"></div>
+		<div class="blue svelte-p153w3"></div>
+		<div class="blue svelte-p153w3"></div>
+	`,
+
+	async test({ assert, target, component }) {
+		component.active = true;
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div></div>
+			<div class="red svelte-p153w3"></div>
+			<div class="active"></div>
+			<div class="red svelte-p153w3 active"></div>
+			<div class="blue svelte-p153w3"></div>
+			<div class="blue svelte-p153w3 active"></div>
+		`
+		);
+
+		component.tag = 'span';
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<span></span>
+			<span class="red svelte-p153w3"></span>
+			<span class="active"></span>
+			<span class="red svelte-p153w3 active"></span>
+			<span class="blue svelte-p153w3"></span>
+			<span class="blue svelte-p153w3 active"></span>
+		`
+		);
+
+		component.active = false;
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<span></span>
+			<span class="red svelte-p153w3"></span>
+			<span class=""></span>
+			<span class="red svelte-p153w3"></span>
+			<span class="blue svelte-p153w3"></span>
+			<span class="blue svelte-p153w3"></span>
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-element-css-hash/main.svelte b/packages/svelte/tests/runtime-runes/samples/svelte-element-css-hash/main.svelte
new file mode 100644
index 0000000000..709f7b4fa1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-element-css-hash/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	let { tag = "div", active = false } = $props();
+
+	function cn(classname) {
+		return classname;
+	}
+</script>
+
+<svelte:element this={tag}></svelte:element>
+<svelte:element this={tag} class="red"></svelte:element>
+<svelte:element this={tag} class:active={active}></svelte:element>
+<svelte:element this={tag} class="red" class:active={active}></svelte:element>
+<svelte:element this={tag} class={cn("blue")}></svelte:element>
+<svelte:element this={tag} class={cn("blue")} class:active={active}></svelte:element>
+
+<style>
+	.red {
+		color: red;
+	}
+</style>
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-element-custom-element-css-hash/_config.js b/packages/svelte/tests/runtime-runes/samples/svelte-element-custom-element-css-hash/_config.js
index eae8101e6e..cb532b28b5 100644
--- a/packages/svelte/tests/runtime-runes/samples/svelte-element-custom-element-css-hash/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-element-custom-element-css-hash/_config.js
@@ -1,14 +1,14 @@
 import { ok, test } from '../../test';
 
 export default test({
-	html: `<custom-element class="red svelte-p153w3"></custom-element><custom-element class="red svelte-p153w3"></custom-element>`,
+	html: `<custom-element class="red svelte-70s021"></custom-element><custom-element class="red svelte-70s021"></custom-element>`,
 
 	async test({ assert, target }) {
 		const [el, el2] = target.querySelectorAll('custom-element');
 		ok(el);
 		ok(el2);
 
-		assert.deepEqual(el.className, 'red svelte-p153w3');
-		assert.deepEqual(el2.className, 'red svelte-p153w3');
+		assert.deepEqual(el.className, 'red svelte-70s021');
+		assert.deepEqual(el2.className, 'red svelte-70s021');
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-meta-css-wrapper/Component.svelte b/packages/svelte/tests/runtime-runes/samples/svelte-meta-css-wrapper/Component.svelte
new file mode 100644
index 0000000000..5668311b0e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-meta-css-wrapper/Component.svelte
@@ -0,0 +1,7 @@
+<h2>hello from component</h2>
+
+<style>
+	h2 {
+		color: var(--color);
+	}
+</style>
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-meta-css-wrapper/_config.js b/packages/svelte/tests/runtime-runes/samples/svelte-meta-css-wrapper/_config.js
new file mode 100644
index 0000000000..1d76b0dd00
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-meta-css-wrapper/_config.js
@@ -0,0 +1,42 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	html: `
+		<h1>hello</h1>
+		<svelte-css-wrapper style="display: contents; --color: red;">
+			<h2 class="svelte-13kae5a">hello from component</h2>
+		</svelte-css-wrapper>
+		<p>goodbye</p>
+	`,
+
+	async test({ target, assert }) {
+		const h1 = target.querySelector('h1');
+		const h2 = target.querySelector('h2');
+		const p = target.querySelector('p');
+
+		// @ts-expect-error
+		assert.deepEqual(h1.__svelte_meta.loc, {
+			file: 'main.svelte',
+			line: 5,
+			column: 0
+		});
+
+		// @ts-expect-error
+		assert.deepEqual(h2.__svelte_meta.loc, {
+			file: 'Component.svelte',
+			line: 1,
+			column: 0
+		});
+
+		// @ts-expect-error
+		assert.deepEqual(p.__svelte_meta.loc, {
+			file: 'main.svelte',
+			line: 7,
+			column: 0
+		});
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-meta-css-wrapper/main.svelte b/packages/svelte/tests/runtime-runes/samples/svelte-meta-css-wrapper/main.svelte
new file mode 100644
index 0000000000..f49a48fb52
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-meta-css-wrapper/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Component from './Component.svelte';
+</script>
+
+<h1>hello</h1>
+<Component --color="red" />
+<p>goodbye</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-meta-if-else/_config.js b/packages/svelte/tests/runtime-runes/samples/svelte-meta-if-else/_config.js
new file mode 100644
index 0000000000..114ebd36c8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-meta-if-else/_config.js
@@ -0,0 +1,35 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	html: `<p>before</p><p>during</p><p>after</p>`,
+
+	async test({ target, assert }) {
+		const ps = target.querySelectorAll('p');
+
+		// @ts-expect-error
+		assert.deepEqual(ps[0].__svelte_meta.loc, {
+			file: 'main.svelte',
+			line: 1,
+			column: 0
+		});
+
+		// @ts-expect-error
+		assert.deepEqual(ps[1].__svelte_meta.loc, {
+			file: 'main.svelte',
+			line: 6,
+			column: 1
+		});
+
+		// @ts-expect-error
+		assert.deepEqual(ps[2].__svelte_meta.loc, {
+			file: 'main.svelte',
+			line: 11,
+			column: 0
+		});
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-meta-if-else/main.svelte b/packages/svelte/tests/runtime-runes/samples/svelte-meta-if-else/main.svelte
new file mode 100644
index 0000000000..d0789b8ba8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-meta-if-else/main.svelte
@@ -0,0 +1,11 @@
+<p>before</p>
+
+{#if false}
+	<p>during</p>
+{:else if true}
+	<p>during</p>
+{:else if false}
+	<p>during</p>
+{/if}
+
+<p>after</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-meta-parent/_config.js b/packages/svelte/tests/runtime-runes/samples/svelte-meta-parent/_config.js
new file mode 100644
index 0000000000..eba85d5098
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-meta-parent/_config.js
@@ -0,0 +1,186 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client', 'hydrate'],
+	compileOptions: {
+		dev: true
+	},
+	html: `
+		<p>no parent</p>
+		<button>toggle</button>
+		<p>if</p>
+		<p>each</p>
+		<p>loading</p>
+		<p>key</p>
+		<p>hi</p>
+		<p>hi</p>
+		<p>hi</p>
+		<p>hi</p>
+		<p>hi</p>
+	`,
+
+	async test({ target, assert }) {
+		function check() {
+			const [main, if_, each, await_, key, child1, child2, child3, child4, dynamic] =
+				target.querySelectorAll('p');
+
+			// @ts-expect-error
+			assert.deepEqual(main.__svelte_meta.parent, null);
+
+			// @ts-expect-error
+			assert.deepEqual(if_.__svelte_meta.parent, {
+				file: 'main.svelte',
+				type: 'if',
+				line: 12,
+				column: 0,
+				parent: null
+			});
+
+			// @ts-expect-error
+			assert.deepEqual(each.__svelte_meta.parent, {
+				file: 'main.svelte',
+				type: 'each',
+				line: 16,
+				column: 0,
+				parent: null
+			});
+
+			// @ts-expect-error
+			assert.deepEqual(await_.__svelte_meta.parent, {
+				file: 'main.svelte',
+				type: 'await',
+				line: 20,
+				column: 0,
+				parent: null
+			});
+
+			// @ts-expect-error
+			assert.deepEqual(key.__svelte_meta.parent, {
+				file: 'main.svelte',
+				type: 'key',
+				line: 26,
+				column: 0,
+				parent: null
+			});
+
+			// @ts-expect-error
+			assert.deepEqual(child1.__svelte_meta.parent, {
+				file: 'main.svelte',
+				type: 'component',
+				componentTag: 'Child',
+				line: 30,
+				column: 0,
+				parent: null
+			});
+
+			// @ts-expect-error
+			assert.deepEqual(child2.__svelte_meta.parent, {
+				file: 'main.svelte',
+				type: 'component',
+				componentTag: 'Child',
+				line: 33,
+				column: 1,
+				parent: {
+					file: 'passthrough.svelte',
+					type: 'render',
+					line: 5,
+					column: 0,
+					parent: {
+						file: 'main.svelte',
+						type: 'component',
+						componentTag: 'Passthrough',
+						line: 32,
+						column: 0,
+						parent: null
+					}
+				}
+			});
+
+			// @ts-expect-error
+			assert.deepEqual(child3.__svelte_meta.parent, {
+				file: 'main.svelte',
+				type: 'component',
+				componentTag: 'Child',
+				line: 38,
+				column: 2,
+				parent: {
+					file: 'passthrough.svelte',
+					type: 'render',
+					line: 5,
+					column: 0,
+					parent: {
+						file: 'main.svelte',
+						type: 'component',
+						componentTag: 'Passthrough',
+						line: 37,
+						column: 1,
+						parent: {
+							file: 'passthrough.svelte',
+							type: 'render',
+							line: 5,
+							column: 0,
+							parent: {
+								file: 'main.svelte',
+								type: 'component',
+								componentTag: 'Passthrough',
+								line: 36,
+								column: 0,
+								parent: null
+							}
+						}
+					}
+				}
+			});
+
+			// @ts-expect-error
+			assert.deepEqual(child4.__svelte_meta.parent, {
+				file: 'passthrough.svelte',
+				type: 'render',
+				line: 8,
+				column: 1,
+				parent: {
+					file: 'passthrough.svelte',
+					type: 'if',
+					line: 7,
+					column: 0,
+					parent: {
+						file: 'main.svelte',
+						type: 'component',
+						componentTag: 'Passthrough',
+						line: 43,
+						column: 1,
+						parent: {
+							file: 'main.svelte',
+							type: 'if',
+							line: 42,
+							column: 0,
+							parent: null
+						}
+					}
+				}
+			});
+
+			// @ts-expect-error
+			assert.deepEqual(dynamic.__svelte_meta.parent, {
+				file: 'main.svelte',
+				type: 'component',
+				componentTag: 'x.y',
+				line: 50,
+				column: 0,
+				parent: null
+			});
+		}
+
+		await tick();
+		check();
+
+		// Test that stack is kept when re-rendering
+		const button = target.querySelector('button');
+		button?.click();
+		await tick();
+		button?.click();
+		await tick();
+		check();
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-meta-parent/child.svelte b/packages/svelte/tests/runtime-runes/samples/svelte-meta-parent/child.svelte
new file mode 100644
index 0000000000..0df6def593
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-meta-parent/child.svelte
@@ -0,0 +1 @@
+<p>hi</p>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-meta-parent/main.svelte b/packages/svelte/tests/runtime-runes/samples/svelte-meta-parent/main.svelte
new file mode 100644
index 0000000000..b9bd46d8f7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-meta-parent/main.svelte
@@ -0,0 +1,50 @@
+<script>
+	import Child from "./child.svelte";
+	import Passthrough from "./passthrough.svelte";
+	let x = { y: Child }
+	let key = 'test';
+	let show = $state(true);
+</script>
+
+<p>no parent</p>
+<button onclick={() => show = !show}>toggle</button>
+
+{#if true}
+	<p>if</p>
+{/if}
+
+{#each [1]}
+	<p>each</p>
+{/each}
+
+{#await Promise.resolve()}
+	<p>loading</p>
+{:then}
+	<p>await</p>
+{/await}
+
+{#key key}
+	<p>key</p>
+{/key} 
+
+<Child />
+
+<Passthrough>
+	<Child />
+</Passthrough>
+
+<Passthrough>
+	<Passthrough>
+		<Child />
+	</Passthrough>
+</Passthrough>
+
+{#if show}
+	<Passthrough>
+		{#snippet named()}
+			<p>hi</p>
+		{/snippet}
+	</Passthrough>
+{/if}
+
+<x.y />
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-meta-parent/passthrough.svelte b/packages/svelte/tests/runtime-runes/samples/svelte-meta-parent/passthrough.svelte
new file mode 100644
index 0000000000..70ba81a4c1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-meta-parent/passthrough.svelte
@@ -0,0 +1,9 @@
+<script>
+	let { children, named } = $props();
+</script>
+
+{@render children?.()}
+
+{#if true}
+	{@render named?.()}
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/svg-namespace-if-block-2/_config.js b/packages/svelte/tests/runtime-runes/samples/svg-namespace-if-block-2/_config.js
new file mode 100644
index 0000000000..7373a4043e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svg-namespace-if-block-2/_config.js
@@ -0,0 +1,11 @@
+import { test, ok } from '../../test';
+
+export default test({
+	html: `<svg><a href="/docs"><text class="small" x="20" y="40"></text></a></svg>`,
+	test({ assert, target }) {
+		const a = target.querySelector('a');
+		ok(a);
+
+		assert.equal(a.namespaceURI, 'http://www.w3.org/2000/svg');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/svg-namespace-if-block-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/svg-namespace-if-block-2/main.svelte
new file mode 100644
index 0000000000..3676278c6c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svg-namespace-if-block-2/main.svelte
@@ -0,0 +1,7 @@
+<svg>
+	{#if true}
+		<a href="/docs">
+			<text x="20" y="40" class="small">{name}</text>
+		</a>
+	{/if}
+</svg>
diff --git a/packages/svelte/tests/runtime-runes/samples/svg-namespace-if-block-3/_config.js b/packages/svelte/tests/runtime-runes/samples/svg-namespace-if-block-3/_config.js
new file mode 100644
index 0000000000..7543278b62
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svg-namespace-if-block-3/_config.js
@@ -0,0 +1,11 @@
+import { test, ok } from '../../test';
+
+export default test({
+	html: `<svg><title>potato</title></svg>`,
+	test({ assert, target }) {
+		const title = target.querySelector('title');
+		ok(title);
+
+		assert.equal(title.namespaceURI, 'http://www.w3.org/2000/svg');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/svg-namespace-if-block-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/svg-namespace-if-block-3/main.svelte
new file mode 100644
index 0000000000..8be23f8b23
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svg-namespace-if-block-3/main.svelte
@@ -0,0 +1,5 @@
+<svg>
+	{#if true}
+		<title>potato</title>
+	{/if}
+</svg>
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/title-nullish/_config.js b/packages/svelte/tests/runtime-runes/samples/title-nullish/_config.js
new file mode 100644
index 0000000000..819d6b620e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/title-nullish/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		assert.equal(target.ownerDocument.title, '');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/title-nullish/main.svelte b/packages/svelte/tests/runtime-runes/samples/title-nullish/main.svelte
new file mode 100644
index 0000000000..f1fa7e7b84
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/title-nullish/main.svelte
@@ -0,0 +1,6 @@
+<script>
+    const thing = {};
+</script>
+<svelte:head>
+    <title>{thing.thing}</title>
+</svelte:head>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/toStore-subscribe2/_config.js b/packages/svelte/tests/runtime-runes/samples/toStore-subscribe2/_config.js
new file mode 100644
index 0000000000..bc1793e7a4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/toStore-subscribe2/_config.js
@@ -0,0 +1,16 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		let btn = target.querySelector('button');
+
+		btn?.click();
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<div>Count 1!</div><div>Count from store 1!</div><button>Add 1</button>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/toStore-subscribe2/main.svelte b/packages/svelte/tests/runtime-runes/samples/toStore-subscribe2/main.svelte
new file mode 100644
index 0000000000..82d20105b8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/toStore-subscribe2/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { toStore } from "svelte/store";
+
+	let counter = $state(0);
+	const count = toStore(() => counter, value => counter = value);
+</script>
+
+<div>Count {counter}!</div>
+<div>Count from store {$count}!</div>
+
+<button onclick={() => counter+=1}>Add 1</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/toStore-teardown/_config.js b/packages/svelte/tests/runtime-runes/samples/toStore-teardown/_config.js
new file mode 100644
index 0000000000..95904f011f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/toStore-teardown/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		let [, btn2] = target.querySelectorAll('button');
+
+		btn2.click();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<button>Set data</button><button>Clear data</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/toStore-teardown/child.svelte b/packages/svelte/tests/runtime-runes/samples/toStore-teardown/child.svelte
new file mode 100644
index 0000000000..f1b1b7b497
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/toStore-teardown/child.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { toStore } from 'svelte/store'
+
+	let { data } = $props()
+	const currentValue = toStore(() => data.value)
+</script>
+
+<p>
+	Current value:
+	<span>{$currentValue}</span>
+</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/toStore-teardown/main.svelte b/packages/svelte/tests/runtime-runes/samples/toStore-teardown/main.svelte
new file mode 100644
index 0000000000..7d36dd95cb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/toStore-teardown/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Child from './child.svelte'
+
+	let data = $state({ value: 'hello' });
+
+	const setData = () => (data = { value: 'hello' })
+	const clearData = () => (data = undefined)
+</script>
+
+<button onclick={setData}>Set data</button>
+<button onclick={clearData}>Clear data</button>
+
+{#if data}
+  <Child {data} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-component/_config.js b/packages/svelte/tests/runtime-runes/samples/transition-component/_config.js
index 414a8b0cc2..1bdf3a5a2e 100644
--- a/packages/svelte/tests/runtime-runes/samples/transition-component/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/transition-component/_config.js
@@ -3,7 +3,7 @@ import { test } from '../../test';
 
 /**
  * $.component() should not break transition
- * https://github.com/sveltejs/svelte/issues/13645
+ * @see {@link https://github.com/sveltejs/svelte/issues/13645}
  */
 export default test({
 	test({ assert, raf, target }) {
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-delayed-events-css/_config.js b/packages/svelte/tests/runtime-runes/samples/transition-delayed-events-css/_config.js
new file mode 100644
index 0000000000..36daefa3b7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/transition-delayed-events-css/_config.js
@@ -0,0 +1,32 @@
+import { flushSync } from '../../../../src/index-client.js';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, raf, target, logs }) {
+		const [btn] = target.querySelectorAll('button');
+
+		// in
+		flushSync(() => btn.click());
+		assert.deepEqual(logs, []);
+		raf.tick(1);
+		assert.deepEqual(logs, []);
+
+		raf.tick(100);
+		assert.deepEqual(logs, ['introstart']);
+
+		raf.tick(200);
+		assert.deepEqual(logs, ['introstart', 'introend']);
+
+		// out
+		flushSync(() => btn.click());
+		assert.deepEqual(logs, ['introstart', 'introend']);
+		raf.tick(201);
+		assert.deepEqual(logs, ['introstart', 'introend']);
+
+		raf.tick(300);
+		assert.deepEqual(logs, ['introstart', 'introend', 'outrostart']);
+
+		raf.tick(400);
+		assert.deepEqual(logs, ['introstart', 'introend', 'outrostart', 'outroend']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-delayed-events-css/main.svelte b/packages/svelte/tests/runtime-runes/samples/transition-delayed-events-css/main.svelte
new file mode 100644
index 0000000000..cd91790c17
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/transition-delayed-events-css/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	function fade(_) {
+		return {
+			delay: 100,
+			duration: 100,
+			css: (t) => `opacity: ${t}`
+		};
+	}
+
+	let visible = $state(false);
+</script>
+
+<button onclick={() => (visible = !visible)}>toggle</button>
+
+{#if visible}
+	<p
+		transition:fade
+		onintrostart={() => console.log('introstart')}
+		onintroend={() => console.log('introend')}
+		onoutrostart={() => console.log('outrostart')}
+		onoutroend={() => console.log('outroend')}
+	>delayed fade</p>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-delayed-events-js/_config.js b/packages/svelte/tests/runtime-runes/samples/transition-delayed-events-js/_config.js
new file mode 100644
index 0000000000..36daefa3b7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/transition-delayed-events-js/_config.js
@@ -0,0 +1,32 @@
+import { flushSync } from '../../../../src/index-client.js';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, raf, target, logs }) {
+		const [btn] = target.querySelectorAll('button');
+
+		// in
+		flushSync(() => btn.click());
+		assert.deepEqual(logs, []);
+		raf.tick(1);
+		assert.deepEqual(logs, []);
+
+		raf.tick(100);
+		assert.deepEqual(logs, ['introstart']);
+
+		raf.tick(200);
+		assert.deepEqual(logs, ['introstart', 'introend']);
+
+		// out
+		flushSync(() => btn.click());
+		assert.deepEqual(logs, ['introstart', 'introend']);
+		raf.tick(201);
+		assert.deepEqual(logs, ['introstart', 'introend']);
+
+		raf.tick(300);
+		assert.deepEqual(logs, ['introstart', 'introend', 'outrostart']);
+
+		raf.tick(400);
+		assert.deepEqual(logs, ['introstart', 'introend', 'outrostart', 'outroend']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-delayed-events-js/main.svelte b/packages/svelte/tests/runtime-runes/samples/transition-delayed-events-js/main.svelte
new file mode 100644
index 0000000000..c7167aa8c7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/transition-delayed-events-js/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	function fade(node) {
+		return {
+			delay: 100,
+			duration: 100,
+			tick: (t) => node.style.opacity = t
+		};
+	}
+
+	let visible = $state(false);
+</script>
+
+<button onclick={() => (visible = !visible)}>toggle</button>
+
+{#if visible}
+	<p
+		transition:fade
+		onintrostart={() => console.log('introstart')}
+		onintroend={() => console.log('introend')}
+		onoutrostart={() => console.log('outrostart')}
+		onoutroend={() => console.log('outroend')}
+	>delayed fade</p>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-derived-uninitialized/Child.svelte b/packages/svelte/tests/runtime-runes/samples/transition-derived-uninitialized/Child.svelte
new file mode 100644
index 0000000000..20bd606d9b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/transition-derived-uninitialized/Child.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { fly } from 'svelte/transition';
+
+	// Not read before the outro, by which time the derived is destroyed
+	let duration = $derived(10);
+</script>
+
+<div in:fly={{ duration: 10 }} out:fly={{ duration }}>
+	hello
+</div>
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-derived-uninitialized/_config.js b/packages/svelte/tests/runtime-runes/samples/transition-derived-uninitialized/_config.js
new file mode 100644
index 0000000000..734c84a0c4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/transition-derived-uninitialized/_config.js
@@ -0,0 +1,32 @@
+import { flushSync } from 'svelte';
+import { raf } from '../../../animation-helpers';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [fly_in, fly_out] = target.querySelectorAll('button');
+
+		fly_in.click();
+		flushSync();
+		raf.tick(25);
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>fly in</button>
+				<button>fly out</button>
+				<div style="">hello</div>
+			`
+		);
+
+		fly_out.click();
+		flushSync();
+		raf.tick(50);
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>fly in</button>
+				<button>fly out</button>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-derived-uninitialized/main.svelte b/packages/svelte/tests/runtime-runes/samples/transition-derived-uninitialized/main.svelte
new file mode 100644
index 0000000000..4fc3395af8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/transition-derived-uninitialized/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Child from './Child.svelte';
+	let show = $state(false);
+</script>
+
+<button onclick={() => (show = true)}>fly in</button>
+<button onclick={() => (show = false)}>fly out</button>
+
+{#if show}
+	<Child />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-each-4/_config.js b/packages/svelte/tests/runtime-runes/samples/transition-each-4/_config.js
new file mode 100644
index 0000000000..a0e29ec8ff
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/transition-each-4/_config.js
@@ -0,0 +1,35 @@
+import { flushSync } from '../../../../src/index-client.js';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, raf, target, logs }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>Toggle</button><div><div>1</div><div>2</div><div>3</div></div>'
+		);
+
+		const btn1 = target.querySelector('button');
+		btn1?.click();
+		flushSync();
+		raf.tick(250);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>Toggle</button><div style="opacity: 0.5;"><div>1</div><div>2</div><div>3</div></div>'
+		);
+
+		logs.length = 0;
+
+		await Promise.resolve();
+
+		flushSync();
+		raf.tick(500);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>Toggle</button><div style=""><div>3</div><div>4</div></div>'
+		);
+
+		assert.deepEqual(logs, ['$effect.pre', '$effect.pre', '$effect', '$effect']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-each-4/main.svelte b/packages/svelte/tests/runtime-runes/samples/transition-each-4/main.svelte
new file mode 100644
index 0000000000..d399bee691
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/transition-each-4/main.svelte
@@ -0,0 +1,39 @@
+<script>
+	function fade(_) {
+		return {
+			duration: 500,
+			css: t => `opacity: ${t}`,
+		}
+	}
+
+	let toggle = $state(true);
+	let items = $state([ 1, 2, 3 ]);
+
+	const handle_toggle = async () => {
+		toggle = false;
+		await Promise.resolve();
+		items = [3, 4];
+		toggle = true;
+	};
+</script>
+
+<button onclick={handle_toggle}>Toggle</button>
+
+{#if toggle}
+	<div transition:fade>
+		{#each items as item (item)}
+		{(() => {
+			$effect(() => {
+				items;
+				console.log('$effect');
+			});
+
+			$effect.pre(() => {
+				items;
+				console.log('$effect.pre');
+			});
+		})()}
+			<div>{item}</div>
+		{/each}
+	</div>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-if-nested-access-property/_config.js b/packages/svelte/tests/runtime-runes/samples/transition-if-nested-access-property/_config.js
new file mode 100644
index 0000000000..d75b15ed2d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/transition-if-nested-access-property/_config.js
@@ -0,0 +1,14 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+import { raf } from '../../../animation-helpers';
+
+export default test({
+	async test({ assert, target }) {
+		const [btn] = target.querySelectorAll('button');
+
+		btn.click();
+		await tick();
+		raf.tick(100);
+		assert.htmlEqual(target.innerHTML, `<button>clear</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-if-nested-access-property/main.svelte b/packages/svelte/tests/runtime-runes/samples/transition-if-nested-access-property/main.svelte
new file mode 100644
index 0000000000..6b7329f973
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/transition-if-nested-access-property/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import { fade } from 'svelte/transition';
+
+	let data = $state({ id: 1 });
+</script>
+
+<button onclick={() => (data = null)}>clear</button>
+
+{#if data}
+	{#key data?.id}
+		<p transition:fade|global={{ duration: 100 }}>keyed</p>
+	{/key}
+
+	{#if data.id}
+		<p>sibling</p>
+	{/if}
+{/if}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-if-nested-static/_config.js b/packages/svelte/tests/runtime-runes/samples/transition-if-nested-static/_config.js
new file mode 100644
index 0000000000..900d6daff8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/transition-if-nested-static/_config.js
@@ -0,0 +1,22 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>Toggle</button>
+			<div>Should not transition out</div>
+		`
+		);
+
+		btn?.click();
+		flushSync();
+		assert.htmlEqual(target.innerHTML, '<button>Toggle</button>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-if-nested-static/main.svelte b/packages/svelte/tests/runtime-runes/samples/transition-if-nested-static/main.svelte
new file mode 100644
index 0000000000..84f6ee77af
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/transition-if-nested-static/main.svelte
@@ -0,0 +1,18 @@
+
+<script>
+	import { slide } from 'svelte/transition';
+	let showText = $state(false);
+	let show = $state(true);
+</script>
+
+<button onclick={() => showText = !showText}>
+	Toggle
+</button>
+
+{#if showText}
+	{#if show}
+		<div transition:slide>
+			Should not transition out
+		</div>
+	{/if}
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-if/_config.js b/packages/svelte/tests/runtime-runes/samples/transition-if/_config.js
new file mode 100644
index 0000000000..7cabc36163
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/transition-if/_config.js
@@ -0,0 +1,28 @@
+import { flushSync } from '../../../../src/index-client.js';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, raf, target }) {
+		const [x, y] = target.querySelectorAll('button');
+
+		// Set second part of condition to false first...
+		y.click();
+		flushSync();
+		raf.tick(50);
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>toggle x</button> <button>toggle y</button> <p foo="0.5">hello</p>'
+		);
+
+		// ...so that when both are toggled the block condition runs again
+		x.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>toggle x</button> <button>toggle y</button> <p foo="0.5">hello</p>'
+		);
+
+		raf.tick(100);
+		assert.htmlEqual(target.innerHTML, '<button>toggle x</button> <button>toggle y</button>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/transition-if/main.svelte b/packages/svelte/tests/runtime-runes/samples/transition-if/main.svelte
new file mode 100644
index 0000000000..b60c6f22eb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/transition-if/main.svelte
@@ -0,0 +1,24 @@
+<script>
+	function foo(node) {
+		return {
+			duration: 100,
+			tick: (t, u) => {
+				node.setAttribute('foo', t)
+			}
+		};
+	}
+
+	let x = $state(true);
+	let y = $state(true);
+</script>
+
+<button onclick={() => {
+	x = !x;
+}}>toggle x</button>
+<button onclick={() => {
+	y = !y;
+}}>toggle y</button>
+
+{#if x && y}
+	<p transition:foo>hello</p>
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte b/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte
index 3b98dafa05..0286f2c0fd 100644
--- a/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte
@@ -8,14 +8,31 @@
 		console.log(this);
 	}
 
+	function foo<T>(): string {
+		return ""!;
+	}
+
 	class Foo<T> {
 		public name: string;
+		declare bar: string;
 		x = 'x' as const;
 		constructor(name: string) {
 			this.name = name;
 		}
 	}
 
+	class MyClass implements Hello {}
+
+	abstract class MyAbstractClass {
+		abstract x(): void;
+		y() {}
+	}
+	class Subclass extends Foo<string> {
+		constructor(value: string) {
+			super(value);
+		}
+	}
+
 	declare const declared_const: number;
 	declare function declared_fn(): void;
 	declare class declared_class {
@@ -24,7 +41,7 @@
 
 	declare module 'foobar' {}
 	namespace SomeNamespace {
-		export type Foo = true
+		export type Foo = true;
 	}
 
 	export function overload(a: boolean): boolean;
@@ -34,6 +51,8 @@
 	export type { Hello };
 
 	const TypedFoo = Foo<true>;
+	const typeAssertion = <boolean>true;
+	const x = foo<true>();
 </script>
 
 <script>
diff --git a/packages/svelte/tests/runtime-runes/samples/undefined-event-handler/_config.js b/packages/svelte/tests/runtime-runes/samples/undefined-event-handler/_config.js
new file mode 100644
index 0000000000..012fedb160
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/undefined-event-handler/_config.js
@@ -0,0 +1,9 @@
+import { ok, test } from '../../test';
+
+export default test({
+	async test({ target }) {
+		const button = target.querySelector('button');
+		ok(button);
+		button.dispatchEvent(new window.MouseEvent('mouseenter'));
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/undefined-event-handler/main.svelte b/packages/svelte/tests/runtime-runes/samples/undefined-event-handler/main.svelte
new file mode 100644
index 0000000000..ea4b4443e9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/undefined-event-handler/main.svelte
@@ -0,0 +1 @@
+<button onmouseenter={undefined}></button>
diff --git a/packages/svelte/tests/runtime-runes/samples/unhoist-function-accessing-snippet/_config.js b/packages/svelte/tests/runtime-runes/samples/unhoist-function-accessing-snippet/_config.js
new file mode 100644
index 0000000000..b1229f5a8a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/unhoist-function-accessing-snippet/_config.js
@@ -0,0 +1,12 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target, errors }) {
+		const button = target.querySelector('button');
+		flushSync(() => {
+			button?.click();
+		});
+		assert.deepEqual(errors, []);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/unhoist-function-accessing-snippet/main.svelte b/packages/svelte/tests/runtime-runes/samples/unhoist-function-accessing-snippet/main.svelte
new file mode 100644
index 0000000000..9f3a56a9ed
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/unhoist-function-accessing-snippet/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	const log = () => {
+		if (!snip) throw new Error('oops');
+	}
+	let x = $state(0);
+</script>
+
+<button onclick={log}></button>
+
+{#snippet snip()}
+	snippet {x}
+{/snippet}
diff --git a/packages/svelte/tests/runtime-runes/samples/untrack-allows-writes/_config.js b/packages/svelte/tests/runtime-runes/samples/untrack-allows-writes/_config.js
new file mode 100644
index 0000000000..ead5653dd4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/untrack-allows-writes/_config.js
@@ -0,0 +1,19 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+// While we don't officially document it, `untrack` also allows to opt out of the "unsafe mutation" validation, which is what we test here
+export default test({
+	html: '<button>0 0 0</button>',
+	test({ assert, target }) {
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>1 1 2</button>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/untrack-allows-writes/main.svelte b/packages/svelte/tests/runtime-runes/samples/untrack-allows-writes/main.svelte
new file mode 100644
index 0000000000..f61a23da84
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/untrack-allows-writes/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import { untrack } from "svelte";
+
+	let count = $state(0);
+	let mirrored = $state(0);
+	let double = $derived.by(() => {
+		untrack(() => {
+			mirrored = count;
+		});
+		return count * 2;
+	})
+</script>
+
+<button onclick={() => count++}>{count} {mirrored} {double}</button>
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
new file mode 100644
index 0000000000..b5233b01e8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/untrack-own-deriveds/_config.js
@@ -0,0 +1,23 @@
+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');
+
+		flushSync(() => button?.click());
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>increment</button>
+				<p>1/2</p>
+				<p>1/2</p>
+			`
+		);
+
+		assert.deepEqual(logs, [0, 0, 0, 0]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/untrack-own-deriveds/main.svelte b/packages/svelte/tests/runtime-runes/samples/untrack-own-deriveds/main.svelte
new file mode 100644
index 0000000000..c0dd86993a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/untrack-own-deriveds/main.svelte
@@ -0,0 +1,30 @@
+<script>
+	class Foo {
+		value = $state(0);
+		double = $derived(this.value * 2);
+
+		constructor() {
+			console.log(this.value, this.double);
+		}
+
+		increment() {
+			this.value++;
+		}
+	}
+
+	let foo = $state();
+
+	$effect(() => {
+		foo = new Foo();
+	});
+
+	let bar = $derived(new Foo());
+</script>
+
+<button onclick={() => {foo.increment(); bar.increment()}}>increment</button>
+
+{#if foo}
+	<p>{foo.value}/{foo.double}</p>
+{/if}
+
+<p>{bar.value}/{bar.double}</p>
diff --git a/packages/svelte/tests/runtime-runes/samples/untracked-derived-local/_config.js b/packages/svelte/tests/runtime-runes/samples/untracked-derived-local/_config.js
new file mode 100644
index 0000000000..1fe92ed2d7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/untracked-derived-local/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: `3`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/untracked-derived-local/main.svelte b/packages/svelte/tests/runtime-runes/samples/untracked-derived-local/main.svelte
new file mode 100644
index 0000000000..0873eb741d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/untracked-derived-local/main.svelte
@@ -0,0 +1,47 @@
+<script module>
+	import { untrack } from 'svelte'
+	import { SvelteMap } from 'svelte/reactivity'
+
+	class Foo {
+		id
+		updateTime = $state(Date.now())
+
+		constructor(id) {
+			this.id = id
+		}
+	}
+
+	class Store {
+		cache = new SvelteMap()
+		ids = $state([1, 2, 3])
+
+		getOrDefault(id) {
+			let ret = this.cache.get(id)
+
+			if (ret) {
+				return ret
+			}
+
+			ret = untrack(() => {
+				ret = new Foo(id)
+				this.cache.set(id, ret)
+				return ret
+			})
+			this.cache.get(id)
+
+			return ret
+		}
+
+		get values() {
+			return this.ids.map(id => this.getOrDefault(id)).sort((a, b) => b.updateTime - a.updateTime)
+		}
+	}
+
+	const store = new Store()
+</script>
+
+<script>
+	const test = $derived.by(() => store.values.length)
+</script>
+
+{test}
diff --git a/packages/svelte/tests/runtime-runes/samples/untracked-write-pre/_config.js b/packages/svelte/tests/runtime-runes/samples/untracked-write-pre/_config.js
new file mode 100644
index 0000000000..0310ec4fbb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/untracked-write-pre/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target, logs }) {
+		assert.deepEqual(logs, ['Outer', 'Inner', 'Outer', 'Inner']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/untracked-write-pre/main.svelte b/packages/svelte/tests/runtime-runes/samples/untracked-write-pre/main.svelte
new file mode 100644
index 0000000000..5e95dbfd41
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/untracked-write-pre/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	let value = $state(0);
+
+	$effect.pre(() => {
+		console.log("Outer");
+		value;
+
+		$effect.pre(() => {
+			console.log("Inner");
+			value = 10;
+		});
+	});
+</script>
diff --git a/packages/svelte/tests/runtime-runes/samples/validate-undefined-snippet-default-arg/_config.js b/packages/svelte/tests/runtime-runes/samples/validate-undefined-snippet-default-arg/_config.js
new file mode 100644
index 0000000000..bddb75e677
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/validate-undefined-snippet-default-arg/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<p>default</p>`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/validate-undefined-snippet-default-arg/main.svelte b/packages/svelte/tests/runtime-runes/samples/validate-undefined-snippet-default-arg/main.svelte
new file mode 100644
index 0000000000..3f00eba46b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/validate-undefined-snippet-default-arg/main.svelte
@@ -0,0 +1,5 @@
+{#snippet test(param = "default")}
+    <p>{param}</p>
+{/snippet}
+
+{@render test()}
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-runes/samples/value-attribute-null-undefined/_config.js b/packages/svelte/tests/runtime-runes/samples/value-attribute-null-undefined/_config.js
new file mode 100644
index 0000000000..08f0c5aec7
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/value-attribute-null-undefined/_config.js
@@ -0,0 +1,49 @@
+import { test, ok } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	mode: ['client'],
+
+	async test({ assert, target }) {
+		/**
+		 * @type {HTMLInputElement | null}
+		 */
+		const input = target.querySelector('input[type=text]');
+		/**
+		 * @type {HTMLButtonElement | null}
+		 */
+		const setString = target.querySelector('#setString');
+		/**
+		 * @type {HTMLButtonElement | null}
+		 */
+		const setNull = target.querySelector('#setNull');
+		/**
+		 * @type {HTMLButtonElement | null}
+		 */
+		const setUndefined = target.querySelector('#setUndefined');
+
+		ok(input);
+		ok(setString);
+		ok(setNull);
+		ok(setUndefined);
+
+		// value should always be blank string when value attribute is set to null or undefined
+
+		assert.equal(input.value, '');
+		setString.click();
+		flushSync();
+		assert.equal(input.value, 'foo');
+
+		setNull.click();
+		flushSync();
+		assert.equal(input.value, '');
+
+		setString.click();
+		flushSync();
+		assert.equal(input.value, 'foo');
+
+		setUndefined.click();
+		flushSync();
+		assert.equal(input.value, '');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/value-attribute-null-undefined/main.svelte b/packages/svelte/tests/runtime-runes/samples/value-attribute-null-undefined/main.svelte
new file mode 100644
index 0000000000..9f944923c2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/value-attribute-null-undefined/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	let value = $state();
+</script>
+
+<input type="text" {value} />
+
+<button id="setString" onclick={() => {value = "foo";}}></button>
+<button id="setNull" onclick={() => {value = null;}}></button>
+<button id="setUndefined" onclick={() => {value = undefined;}}></button>
diff --git a/packages/svelte/tests/runtime-runes/samples/writable-derived-2/_config.js b/packages/svelte/tests/runtime-runes/samples/writable-derived-2/_config.js
new file mode 100644
index 0000000000..fde3e7b1ea
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/writable-derived-2/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	html: `true true`,
+
+	test({ assert, target, window }) {}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/writable-derived-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/writable-derived-2/main.svelte
new file mode 100644
index 0000000000..741aa69125
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/writable-derived-2/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { expect2, createAppState } from "./util.svelte.js"
+
+  const result = createAppState({ source: () => "wrong" });
+  result.onChange("right");
+  const expect1 = result.value === "right";
+</script>
+
+{expect1} {expect2}
diff --git a/packages/svelte/tests/runtime-runes/samples/writable-derived-2/util.svelte.js b/packages/svelte/tests/runtime-runes/samples/writable-derived-2/util.svelte.js
new file mode 100644
index 0000000000..8e862753ab
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/writable-derived-2/util.svelte.js
@@ -0,0 +1,17 @@
+export const createAppState = (options) => {
+	const source = $derived(options.source());
+	let value = $derived(source);
+
+	return {
+		get value() {
+			return value;
+		},
+		onChange(nextValue) {
+			value = nextValue;
+		}
+	};
+};
+
+const result = createAppState({ source: () => 'wrong' });
+result.onChange('right');
+export const expect2 = result.value === 'right';
diff --git a/packages/svelte/tests/runtime-runes/samples/writable-derived-3/_config.js b/packages/svelte/tests/runtime-runes/samples/writable-derived-3/_config.js
new file mode 100644
index 0000000000..999e4ad6e0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/writable-derived-3/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: `3 3 3 3`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/writable-derived-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/writable-derived-3/main.svelte
new file mode 100644
index 0000000000..0b20f811c3
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/writable-derived-3/main.svelte
@@ -0,0 +1,29 @@
+<script>
+	class X {
+    x = $state(1);
+    on_class = $derived(this.x * 2);
+    #on_class_private = $derived(this.x * 2);
+    #in_constructor_private
+
+    constructor() {
+      this.#in_constructor_private = $derived(this.x * 2);
+      this.in_constructor = $derived(this.x * 2);
+      this.#on_class_private = 3;
+      this.#in_constructor_private = 3;
+    }
+
+    get on_class_private() {
+      return this.#on_class_private;
+    }
+
+    get in_constructor_private() {
+      return this.#in_constructor_private;
+    }
+  }
+
+  const x = new X();
+  x.on_class = 3;
+  x.in_constructor = 3;
+</script>
+
+{x.on_class} {x.in_constructor} {x.on_class_private} {x.in_constructor_private}
diff --git a/packages/svelte/tests/runtime-runes/samples/writable-derived-4/_config.js b/packages/svelte/tests/runtime-runes/samples/writable-derived-4/_config.js
new file mode 100644
index 0000000000..8d312ca73a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/writable-derived-4/_config.js
@@ -0,0 +1,23 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		const [btn1, btn2, btn3] = target.getElementsByTagName('button');
+		const [div] = target.getElementsByTagName('div');
+
+		flushSync(() => btn1.click());
+		assert.equal(div.textContent, '1');
+		flushSync(() => btn2.click());
+		assert.equal(div.textContent, '1');
+		flushSync(() => btn3.click());
+		assert.equal(div.textContent, '2');
+
+		flushSync(() => btn1.click());
+		assert.equal(div.textContent, '2');
+		flushSync(() => btn2.click());
+		assert.equal(div.textContent, '2');
+		flushSync(() => btn3.click());
+		assert.equal(div.textContent, '3');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/writable-derived-4/main.svelte b/packages/svelte/tests/runtime-runes/samples/writable-derived-4/main.svelte
new file mode 100644
index 0000000000..a24f69ba77
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/writable-derived-4/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	let count = $derived({ value: 1 });
+</script>
+
+<button onclick={() => count.value++}>mutate</button>
+<button onclick={() => count = count}>assign self</button>
+<button onclick={() => count = {...count} }>assign copy</button>
+
+<div>{count.value}</div>
diff --git a/packages/svelte/tests/runtime-runes/samples/writable-derived/_config.js b/packages/svelte/tests/runtime-runes/samples/writable-derived/_config.js
new file mode 100644
index 0000000000..b48ccbdfd0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/writable-derived/_config.js
@@ -0,0 +1,46 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<input type="range"><input type="range"><p>0 * 2 = 0</p>
+	`,
+
+	ssrHtml: `
+		<input type="range" value="0"><input type="range" value="0"><p>0 * 2 = 0</p>
+	`,
+
+	test({ assert, target, window }) {
+		const [input1, input2] = target.querySelectorAll('input');
+
+		flushSync(() => {
+			input1.value = '10';
+			input1.dispatchEvent(new window.Event('input', { bubbles: true }));
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<input type="range"><input type="range"><p>10 * 2 = 20</p>`
+		);
+
+		flushSync(() => {
+			input2.value = '99';
+			input2.dispatchEvent(new window.Event('input', { bubbles: true }));
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<input type="range"><input type="range"><p>10 * 2 = 99</p>`
+		);
+
+		flushSync(() => {
+			input1.value = '20';
+			input1.dispatchEvent(new window.Event('input', { bubbles: true }));
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<input type="range"><input type="range"><p>20 * 2 = 40</p>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/writable-derived/main.svelte b/packages/svelte/tests/runtime-runes/samples/writable-derived/main.svelte
new file mode 100644
index 0000000000..ab1dde0b9b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/writable-derived/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	let count = $state(0);
+	let double = $derived(count * 2);
+</script>
+
+<input type="range" bind:value={count} />
+<input type="range" bind:value={double} />
+
+<p>{count} * 2 = {double}</p>
diff --git a/packages/svelte/tests/runtime-xhtml/samples/attribute-quotes/_config.js b/packages/svelte/tests/runtime-xhtml/samples/attribute-quotes/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/attribute-quotes/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/runtime-xhtml/samples/attribute-quotes/main.svelte b/packages/svelte/tests/runtime-xhtml/samples/attribute-quotes/main.svelte
new file mode 100644
index 0000000000..82db611c12
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/attribute-quotes/main.svelte
@@ -0,0 +1,2 @@
+<div foo=bar></div>
+<div foo='bar baz'></div>
diff --git a/packages/svelte/tests/runtime-xhtml/samples/autoclosed-tags/_config.js b/packages/svelte/tests/runtime-xhtml/samples/autoclosed-tags/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/autoclosed-tags/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/runtime-xhtml/samples/autoclosed-tags/main.svelte b/packages/svelte/tests/runtime-xhtml/samples/autoclosed-tags/main.svelte
new file mode 100644
index 0000000000..18a4463ce1
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/autoclosed-tags/main.svelte
@@ -0,0 +1,6 @@
+<ul><li><li></ul>
+<dl><dt><dd><dd></dl>
+<p><p><div></div>
+<ruby><rp><rt><rt></ruby>
+<select><option><optgroup><optgroup></select>
+<table><thead><tbody><tfoot><tbody><tr><td><th></tr><tr></table>
diff --git a/packages/svelte/tests/runtime-xhtml/samples/bind-value-input-type-dynamic/_config.js b/packages/svelte/tests/runtime-xhtml/samples/bind-value-input-type-dynamic/_config.js
new file mode 100644
index 0000000000..0192b48df7
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/bind-value-input-type-dynamic/_config.js
@@ -0,0 +1,72 @@
+import { tick } from 'svelte';
+import { test, ok } from '../../test';
+
+export default test({
+	html: `
+		<input type="text"/>
+		<input type="text"/>
+		<p>x / y</p>
+
+		<button>change to text</button>
+		<button>change to number</button>
+		<button>change to range</button>
+	`,
+	ssrHtml: `
+		<input type="text" value="x"/>
+		<input type="text" value="y"/>
+		<p>x / y</p>
+
+		<button>change to text</button>
+		<button>change to number</button>
+		<button>change to range</button>
+	`,
+	async test({ assert, target }) {
+		const [in1, in2] = target.querySelectorAll('input');
+		const [btn1, btn2, btn3] = target.querySelectorAll('button');
+		const p = target.querySelector('p');
+		ok(p);
+
+		in1.value = '0';
+		in2.value = '1';
+		in1.dispatchEvent(new window.Event('input', { bubbles: true }));
+		in2.dispatchEvent(new window.Event('input', { bubbles: true }));
+		await tick();
+		btn2?.click();
+		await tick();
+		assert.htmlEqual(p.innerHTML, '0 / 1');
+
+		in1.stepUp();
+		in1.dispatchEvent(new window.Event('input', { bubbles: true }));
+		in2.stepUp();
+		in2.dispatchEvent(new window.Event('input', { bubbles: true }));
+		await tick();
+		assert.htmlEqual(p.innerHTML, '1 / 2');
+
+		btn1?.click();
+		await tick();
+		try {
+			in1.stepUp();
+			assert.fail();
+		} catch (e) {
+			// expected
+		}
+
+		btn3?.click();
+		await tick();
+		in1.stepUp();
+		in1.dispatchEvent(new window.Event('input', { bubbles: true }));
+		in2.stepUp();
+		in2.dispatchEvent(new window.Event('input', { bubbles: true }));
+		await tick();
+		assert.htmlEqual(p.innerHTML, '2 / 3');
+
+		btn1?.click();
+		await tick();
+		in1.value = 'a';
+		in2.value = 'b';
+		in1.dispatchEvent(new window.Event('input', { bubbles: true }));
+		in2.dispatchEvent(new window.Event('input', { bubbles: true }));
+		await tick();
+		assert.htmlEqual(p.innerHTML, 'a / b');
+	}
+});
diff --git a/packages/svelte/tests/runtime-xhtml/samples/bind-value-input-type-dynamic/main.svelte b/packages/svelte/tests/runtime-xhtml/samples/bind-value-input-type-dynamic/main.svelte
new file mode 100644
index 0000000000..82b33feb5f
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/bind-value-input-type-dynamic/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	let dynamic = $state('x');
+	let spread = $state('y');
+	let inputType = $state('text');
+	let props = $derived({type: inputType});
+</script>
+
+<input bind:value={dynamic} type={inputType}>
+<input bind:value={spread} {...props}>
+<p>{dynamic} / {spread}</p>
+
+<button onclick={() => inputType = 'text'}>change to text</button>
+<button onclick={() => inputType = 'number'}>change to number</button>
+<button onclick={() => inputType = 'range'}>change to range</button>
diff --git a/packages/svelte/tests/runtime-xhtml/samples/boolean-attributes/_config.js b/packages/svelte/tests/runtime-xhtml/samples/boolean-attributes/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/boolean-attributes/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/runtime-xhtml/samples/boolean-attributes/main.svelte b/packages/svelte/tests/runtime-xhtml/samples/boolean-attributes/main.svelte
new file mode 100644
index 0000000000..3d2fc88d10
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/boolean-attributes/main.svelte
@@ -0,0 +1 @@
+<input disabled hidden>
diff --git a/packages/svelte/tests/runtime-xhtml/samples/comment-marker/_config.js b/packages/svelte/tests/runtime-xhtml/samples/comment-marker/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/comment-marker/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/runtime-xhtml/samples/comment-marker/main.svelte b/packages/svelte/tests/runtime-xhtml/samples/comment-marker/main.svelte
new file mode 100644
index 0000000000..8dd87ce81e
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/comment-marker/main.svelte
@@ -0,0 +1 @@
+{#each [1,2] as i}{i}{/each}
diff --git a/packages/svelte/tests/runtime-xhtml/samples/form-default-value-spread/_config.js b/packages/svelte/tests/runtime-xhtml/samples/form-default-value-spread/_config.js
new file mode 100644
index 0000000000..26e90e431b
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/form-default-value-spread/_config.js
@@ -0,0 +1,263 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	async test({ assert, target }) {
+		/**
+		 * @param {NodeListOf<any>} inputs
+		 * @param {string} field
+		 * @param {any | any[]} value
+		 */
+		function check_inputs(inputs, field, value) {
+			for (let i = 0; i < inputs.length; i++) {
+				assert.equal(inputs[i][field], Array.isArray(value) ? value[i] : value, `field ${i}`);
+			}
+		}
+
+		/**
+		 * @param {any} input
+		 * @param {string} field
+		 * @param {any} value
+		 */
+		function set_input(input, field, value) {
+			input[field] = value;
+			input.dispatchEvent(
+				new Event(typeof value === 'boolean' ? 'change' : 'input', { bubbles: true })
+			);
+		}
+
+		/**
+		 * @param {HTMLOptionElement} option
+		 */
+		function select_option(option) {
+			option.selected = true;
+			option.dispatchEvent(new Event('change', { bubbles: true }));
+		}
+
+		const after_reset = [];
+
+		const reset = /** @type {HTMLInputElement} */ (target.querySelector('input[type=reset]'));
+		const [test1, test2, test3, test4, test5, test6, test7, test14] =
+			target.querySelectorAll('div');
+		const [test8, test9, test10, test11] = target.querySelectorAll('select');
+		const [
+			test1_span,
+			test2_span,
+			test3_span,
+			test4_span,
+			test5_span,
+			test6_span,
+			test7_span,
+			test8_span,
+			test9_span,
+			test10_span,
+			test11_span
+		] = target.querySelectorAll('span');
+
+		{
+			/** @type {NodeListOf<HTMLInputElement | HTMLTextAreaElement>} */
+			const inputs = test1.querySelectorAll('input, textarea');
+			check_inputs(inputs, 'value', 'x');
+			assert.htmlEqual(test1_span.innerHTML, 'x x x x');
+
+			for (const input of inputs) {
+				set_input(input, 'value', 'foo');
+			}
+			flushSync();
+			check_inputs(inputs, 'value', 'foo');
+			assert.htmlEqual(test1_span.innerHTML, 'foo foo foo foo');
+
+			after_reset.push(() => {
+				check_inputs(inputs, 'value', 'x');
+				assert.htmlEqual(test1_span.innerHTML, 'x x x x');
+			});
+		}
+
+		{
+			/** @type {NodeListOf<HTMLInputElement | HTMLTextAreaElement>} */
+			const inputs = test2.querySelectorAll('input, textarea');
+			check_inputs(inputs, 'value', 'x');
+			assert.htmlEqual(test2_span.innerHTML, 'x x x x');
+
+			for (const input of inputs) {
+				set_input(input, 'value', 'foo');
+			}
+			flushSync();
+			check_inputs(inputs, 'value', 'foo');
+			assert.htmlEqual(test2_span.innerHTML, 'foo foo foo foo');
+
+			after_reset.push(() => {
+				check_inputs(inputs, 'value', 'x');
+				assert.htmlEqual(test2_span.innerHTML, 'x x x x');
+			});
+		}
+
+		{
+			/** @type {NodeListOf<HTMLInputElement | HTMLTextAreaElement>} */
+			const inputs = test3.querySelectorAll('input, textarea');
+			check_inputs(inputs, 'value', 'y');
+			assert.htmlEqual(test3_span.innerHTML, 'y y y y');
+
+			for (const input of inputs) {
+				set_input(input, 'value', 'foo');
+			}
+			flushSync();
+			check_inputs(inputs, 'value', 'foo');
+			assert.htmlEqual(test3_span.innerHTML, 'foo foo foo foo');
+
+			after_reset.push(() => {
+				check_inputs(inputs, 'value', 'x');
+				assert.htmlEqual(test3_span.innerHTML, 'x x x x');
+			});
+		}
+
+		{
+			/** @type {NodeListOf<HTMLInputElement>} */
+			const inputs = test4.querySelectorAll('input');
+			check_inputs(inputs, 'checked', true);
+			assert.htmlEqual(test4_span.innerHTML, 'true true');
+
+			for (const input of inputs) {
+				set_input(input, 'checked', false);
+			}
+			flushSync();
+			check_inputs(inputs, 'checked', false);
+			assert.htmlEqual(test4_span.innerHTML, 'false false');
+
+			after_reset.push(() => {
+				check_inputs(inputs, 'checked', true);
+				assert.htmlEqual(test4_span.innerHTML, 'true true');
+			});
+		}
+
+		{
+			/** @type {NodeListOf<HTMLInputElement>} */
+			const inputs = test5.querySelectorAll('input');
+			check_inputs(inputs, 'checked', true);
+			assert.htmlEqual(test5_span.innerHTML, 'true true');
+
+			for (const input of inputs) {
+				set_input(input, 'checked', false);
+			}
+			flushSync();
+			check_inputs(inputs, 'checked', false);
+			assert.htmlEqual(test5_span.innerHTML, 'false false');
+
+			after_reset.push(() => {
+				check_inputs(inputs, 'checked', true);
+				assert.htmlEqual(test5_span.innerHTML, 'true true');
+			});
+		}
+
+		{
+			/** @type {NodeListOf<HTMLInputElement>} */
+			const inputs = test6.querySelectorAll('input');
+			check_inputs(inputs, 'checked', false);
+			assert.htmlEqual(test6_span.innerHTML, 'false false');
+
+			after_reset.push(() => {
+				check_inputs(inputs, 'checked', true);
+				assert.htmlEqual(test6_span.innerHTML, 'true true');
+			});
+		}
+		{
+			/** @type {NodeListOf<HTMLInputElement>} */
+			const inputs = test7.querySelectorAll('input');
+			check_inputs(inputs, 'checked', true);
+			assert.htmlEqual(test7_span.innerHTML, 'true');
+
+			after_reset.push(() => {
+				check_inputs(inputs, 'checked', false);
+				assert.htmlEqual(test7_span.innerHTML, 'false');
+			});
+		}
+
+		{
+			/** @type {NodeListOf<HTMLOptionElement>} */
+			const options = test8.querySelectorAll('option');
+			check_inputs(options, 'selected', [false, true, false]);
+			assert.htmlEqual(test8_span.innerHTML, 'b');
+
+			select_option(options[2]);
+			flushSync();
+			check_inputs(options, 'selected', [false, false, true]);
+			assert.htmlEqual(test8_span.innerHTML, 'c');
+
+			after_reset.push(() => {
+				check_inputs(options, 'selected', [false, true, false]);
+				assert.htmlEqual(test8_span.innerHTML, 'b');
+			});
+		}
+
+		{
+			/** @type {NodeListOf<HTMLOptionElement>} */
+			const options = test9.querySelectorAll('option');
+			check_inputs(options, 'selected', [false, true, false]);
+			assert.htmlEqual(test9_span.innerHTML, 'b');
+
+			select_option(options[2]);
+			flushSync();
+			check_inputs(options, 'selected', [false, false, true]);
+			assert.htmlEqual(test9_span.innerHTML, 'c');
+
+			after_reset.push(() => {
+				check_inputs(options, 'selected', [false, true, false]);
+				assert.htmlEqual(test9_span.innerHTML, 'b');
+			});
+		}
+
+		{
+			/** @type {NodeListOf<HTMLOptionElement>} */
+			const options = test10.querySelectorAll('option');
+			check_inputs(options, 'selected', [false, false, true]);
+			assert.htmlEqual(test10_span.innerHTML, 'c');
+
+			select_option(options[0]);
+			flushSync();
+			check_inputs(options, 'selected', [true, false, false]);
+			assert.htmlEqual(test10_span.innerHTML, 'a');
+
+			after_reset.push(() => {
+				check_inputs(options, 'selected', [false, true, false]);
+				assert.htmlEqual(test10_span.innerHTML, 'b');
+			});
+		}
+
+		{
+			/** @type {NodeListOf<HTMLOptionElement>} */
+			const options = test11.querySelectorAll('option');
+			check_inputs(options, 'selected', [false, false, true]);
+			assert.htmlEqual(test11_span.innerHTML, 'c');
+
+			select_option(options[0]);
+			flushSync();
+			check_inputs(options, 'selected', [true, false, false]);
+			assert.htmlEqual(test11_span.innerHTML, 'a');
+
+			after_reset.push(() => {
+				check_inputs(options, 'selected', [false, true, false]);
+				assert.htmlEqual(test11_span.innerHTML, 'b');
+			});
+		}
+
+		{
+			/** @type {NodeListOf<HTMLInputElement | HTMLTextAreaElement>} */
+			const inputs = test14.querySelectorAll('input, textarea');
+			assert.equal(inputs[0].value, 'x');
+			assert.equal(/** @type {HTMLInputElement} */ (inputs[1]).checked, true);
+			// this is still missing...i have no idea how to fix this lol
+			// assert.equal(inputs[2].value, 'x');
+
+			after_reset.push(() => {
+				assert.equal(inputs[0].value, 'y');
+				assert.equal(/** @type {HTMLInputElement} */ (inputs[1]).checked, false);
+				assert.equal(inputs[2].value, 'y');
+			});
+		}
+
+		reset.click();
+		await Promise.resolve();
+		flushSync();
+		after_reset.forEach((fn) => fn());
+	}
+});
diff --git a/packages/svelte/tests/runtime-xhtml/samples/form-default-value-spread/main.svelte b/packages/svelte/tests/runtime-xhtml/samples/form-default-value-spread/main.svelte
new file mode 100644
index 0000000000..3fc7ef11a5
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/form-default-value-spread/main.svelte
@@ -0,0 +1,199 @@
+<script>
+	let spread = {};
+
+	let value1 = $state();
+	let value2 = $state();
+	let value3 = $state();
+	let value4 = $state();
+	let value5 = $state();
+	let value6 = $state();
+	let value7 = $state();
+	let value8 = $state();
+	let value9 = $state(null);
+	let value10 = $state(null);
+	let value11 = $state(null);
+	let value12 = $state(null);
+	let value13 = $state(null);
+	let value14 = $state(null);
+	let value15 = $state(null);
+	let value16 = $state(null);
+	let value17 = $state('y');
+	let value18 = $state('y');
+	let value19 = $state('y');
+	let value20 = $state('y');
+	let value21 = $state('y');
+	let value22 = $state('y');
+	let value23 = $state('y');
+	let value24 = $state('y');
+
+	let checked1 = $state();
+	let checked2 = $state();
+	let checked3 = $state();
+	let checked4 = $state();
+	let checked5 = $state(null);
+	let checked6 = $state(null);
+	let checked7 = $state(null);
+	let checked8 = $state(null);
+	let checked9 = $state(false);
+	let checked10 = $state(false);
+	let checked11 = $state(false);
+	let checked12 = $state(false);
+	let checked13 = $state(true);
+	let checked14 = $state(true);
+ 
+
+	let selected1 = $state();
+	let selected2 = $state();
+	let selected3 = $state('c');
+	let selected4 = $state('c');
+	let selected5 = $state(['c']);
+	let selected6 = $state(['c']);
+
+	let defaultValue = $state('x');
+	let defaultChecked = $state(true);
+</script>
+
+<form>
+	<p>Input/Textarea value</p>
+	<!-- defaultValue=x, value=undefined -->
+	<div class="test-1">
+		<input {defaultValue} bind:value={value1} {...spread} />
+		<input {defaultValue} value={value2} {...spread} />
+		<input defaultValue="x" bind:value={value3} {...spread} />
+		<input defaultValue="x" value={value4} {...spread} />
+		<textarea {defaultValue} value={value5} {...spread}></textarea>
+		<textarea {defaultValue} bind:value={value6} {...spread}></textarea>
+		<textarea defaultValue="x" value={value7} {...spread}></textarea>
+		<textarea defaultValue="x" bind:value={value8} {...spread}></textarea>
+	</div>
+
+	<!-- defaultValue=x, value=null -->
+	<div class="test-2">
+		<input {defaultValue} bind:value={value9} {...spread} />
+		<input {defaultValue} value={value10} {...spread} />
+		<input defaultValue="x" value={value11} {...spread} />
+		<input defaultValue="x" bind:value={value12} {...spread} />
+		<textarea {defaultValue} value={value13} {...spread}></textarea>
+		<textarea {defaultValue} bind:value={value14} {...spread}></textarea>
+		<textarea defaultValue="x" value={value15} {...spread}></textarea>
+		<textarea defaultValue="x" bind:value={value16} {...spread}></textarea>
+	</div>
+
+	<!-- defaultValue=x, value=y -->
+	<div class="test-3">
+		<input {defaultValue} bind:value={value17} {...spread} />
+		<input {defaultValue} value={value18} {...spread} />
+		<input defaultValue="x" value={value19} {...spread} />
+		<input defaultValue="x" bind:value={value20} {...spread} />
+		<textarea {defaultValue} value={value21} {...spread}></textarea>
+		<textarea {defaultValue} bind:value={value22} {...spread}></textarea>
+		<textarea defaultValue="x" value={value23} {...spread}></textarea>
+		<textarea defaultValue="x" bind:value={value24} {...spread}></textarea>
+	</div>
+
+	<p>Input checked</p>
+	<!-- defaultChecked=true, checked=undefined -->
+	<div class="test-4">
+		<input type="checkbox" {defaultChecked} checked={checked1} {...spread} />
+		<input type="checkbox" {defaultChecked} bind:checked={checked2} {...spread} />
+		<input type="checkbox" defaultChecked checked={checked3} {...spread} />
+		<input type="checkbox" defaultChecked bind:checked={checked4} {...spread} />
+	</div>
+
+	<!-- defaultChecked=true, checked=null -->
+	<div class="test-5">
+		<input type="checkbox" {defaultChecked} checked={checked5} {...spread} />
+		<input type="checkbox" {defaultChecked} bind:checked={checked6} {...spread} />
+		<input type="checkbox" defaultChecked checked={checked7} {...spread} />
+		<input type="checkbox" defaultChecked bind:checked={checked8} {...spread} />
+	</div>
+
+	<!-- defaultChecked=true, checked=false -->
+	<div class="test-6">
+		<input type="checkbox" {defaultChecked} checked={checked9} {...spread} />
+		<input type="checkbox" {defaultChecked} bind:checked={checked10} {...spread} />
+		<input type="checkbox" defaultChecked checked={checked11} {...spread} />
+		<input type="checkbox" defaultChecked bind:checked={checked12} {...spread} />
+	</div>
+
+	<!-- defaultChecked=false, checked=true -->
+	<div class="test-7">
+		<input type="checkbox" defaultChecked={false} checked={checked13} {...spread} />
+		<input type="checkbox" defaultChecked={false} bind:checked={checked14} {...spread} />
+	</div>
+
+	<!-- no support for bind:group; too complex + we may deprecate it in favor of bind:checked={get,set} -->
+
+	<p>Select (single)</p>
+	<!-- select with static checked, value=undefined-->
+	<select bind:value={selected1}>
+		<option value="a">A</option>
+		<option value="b" selected {...spread}>B</option>
+		<option value="c">C</option>
+	</select>
+
+	<!-- select with dynamic checked, value=undefined-->
+	<select bind:value={selected2}>
+		<option value="a">A</option>
+		<option value="b" selected={defaultChecked}>B</option>
+		<option value="c">C</option>
+	</select>
+
+	<!-- select with static checked, value=something else than default-->
+	<select bind:value={selected3}>
+		<option value="a">A</option>
+		<option value="b" selected {...spread}>B</option>
+		<option value="c">C</option>
+	</select>
+
+	<!-- select with dynamic checked, value=something else than default-->
+	<select bind:value={selected4}>
+		<option value="a">A</option>
+		<option value="b" selected={defaultChecked}>B</option>
+		<option value="c">C</option>
+	</select>
+
+	<p>Select (multiple)</p>
+    <!-- There's no possibility to have the selected attribute influence a multi select initially,
+	     because we require the value to be an array -->
+
+	<!-- select with static checked, value=something else than default-->
+	<select multiple bind:value={selected5}>
+		<option value="a">A</option>
+		<option value="b" selected {...spread}>B</option>
+		<option value="c">C</option>
+	</select>
+
+	<!-- select with dynamic checked, value=something else than default-->
+	<select multiple bind:value={selected6}>
+		<option value="a">A</option>
+		<option value="b" selected={defaultChecked}>B</option>
+		<option value="c">C</option>
+	</select>
+
+	<p>Static values</p>
+	<div class="test-14">
+		<input value="x" defaultValue="y" {...spread} />
+		<input type="checkbox" checked defaultChecked={false} {...spread} />
+		<textarea defaultValue="y" {...spread}>x</textarea>
+	</div>
+
+	<input type="reset" value="Reset" />
+</form>
+
+<p>
+	Bound values:
+	<span class="test-1">{value1} {value3} {value6} {value8}</span>
+	<span class="test-2">{value9} {value12} {value14} {value16}</span>
+	<span class="test-3">{value17} {value20} {value22} {value24}</span>
+	<span class="test-4">{checked2} {checked4}</span>
+	<span class="test-5">{checked6} {checked8}</span>
+	<span class="test-6">{checked10} {checked12}</span>
+	<span class="test-7">{checked14}</span>
+	<span class="test-8">{selected1}</span>
+	<span class="test-9">{selected2}</span>
+	<span class="test-10">{selected3}</span>
+	<span class="test-11">{selected4}</span>
+	<span class="test-12">{selected5}</span>
+	<span class="test-13">{selected6}</span>
+</p>
diff --git a/packages/svelte/tests/runtime-xhtml/samples/ignore-mismatched-href/_config.js b/packages/svelte/tests/runtime-xhtml/samples/ignore-mismatched-href/_config.js
new file mode 100644
index 0000000000..ea044cea64
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/ignore-mismatched-href/_config.js
@@ -0,0 +1,21 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['hydrate'],
+
+	server_props: {
+		browser: false
+	},
+
+	props: {
+		browser: true
+	},
+
+	test({ assert, target }) {
+		assert.equal(target.querySelector('link')?.getAttribute('href'), '/bar');
+	},
+
+	warnings: [
+		'The `href` attribute on `<link xmlns="http://www.w3.org/1999/xhtml" href="/bar" />` changed its value between server and client renders. The client value, `/foo`, will be ignored in favour of the server value'
+	]
+});
diff --git a/packages/svelte/tests/runtime-xhtml/samples/ignore-mismatched-href/main.svelte b/packages/svelte/tests/runtime-xhtml/samples/ignore-mismatched-href/main.svelte
new file mode 100644
index 0000000000..fd5f2a038a
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/ignore-mismatched-href/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	let { browser } = $props();
+</script>
+
+<link href={browser ? '/foo' : '/bar'} />
diff --git a/packages/svelte/tests/runtime-xhtml/samples/is-xhtml/_config.js b/packages/svelte/tests/runtime-xhtml/samples/is-xhtml/_config.js
new file mode 100644
index 0000000000..52dddb4ad7
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/is-xhtml/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	test({ assert, target }) {
+		assert.htmlEqual(target.innerHTML, `<div>div</div>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-xhtml/samples/is-xhtml/main.svelte b/packages/svelte/tests/runtime-xhtml/samples/is-xhtml/main.svelte
new file mode 100644
index 0000000000..27a4378d0f
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/is-xhtml/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	let elem = $state();
+	let nodeName = $derived(elem?.nodeName);
+</script>
+<div bind:this={elem}>{nodeName}</div>
diff --git a/packages/svelte/tests/runtime-xhtml/samples/lowercase-tags/_config.js b/packages/svelte/tests/runtime-xhtml/samples/lowercase-tags/_config.js
new file mode 100644
index 0000000000..a92f216349
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/lowercase-tags/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		const [input] = target.querySelectorAll('input');
+
+		assert.equal(input.disabled, true);
+	}
+});
diff --git a/packages/svelte/tests/runtime-xhtml/samples/lowercase-tags/main.svelte b/packages/svelte/tests/runtime-xhtml/samples/lowercase-tags/main.svelte
new file mode 100644
index 0000000000..7c48b6bc4b
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/lowercase-tags/main.svelte
@@ -0,0 +1 @@
+<iNPUT dIsAbLeD />
diff --git a/packages/svelte/tests/runtime-xhtml/samples/select-falsy-value/_config.js b/packages/svelte/tests/runtime-xhtml/samples/select-falsy-value/_config.js
new file mode 100644
index 0000000000..5d535db521
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/select-falsy-value/_config.js
@@ -0,0 +1,32 @@
+import { test } from '../../test';
+
+// <option value> is special because falsy values should result in an empty string value attribute
+export default test({
+	mode: ['client'],
+	test({ assert, target }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<select>
+				<option value="">Default</option>
+			</select>
+
+			<select>
+				<option value="">Default</option>
+			</select>
+
+			<select>
+				<option value="">Default</option>
+			</select>
+
+			<select>
+				<option value="">Default</option>
+			</select>
+
+			<select>
+				<option value="">Default</option>
+			</select>
+		`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-xhtml/samples/select-falsy-value/main.svelte b/packages/svelte/tests/runtime-xhtml/samples/select-falsy-value/main.svelte
new file mode 100644
index 0000000000..95e96c6d19
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/select-falsy-value/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	let nonreactive = undefined;
+	let reactive = $state();
+	let nonreactive_spread = { value: undefined };
+	let reactive_spread = $state({ value: undefined });
+</script>
+
+<select>
+	<option value={undefined}>Default</option>
+</select>
+
+<select>
+	<option value={nonreactive}>Default</option>
+</select>
+
+<select>
+	<option value={reactive}>Default</option>
+</select>
+
+<select>
+	<option {...nonreactive_spread}>Default</option>
+</select>
+
+<select>
+	<option {...reactive_spread}>Default</option>
+</select>
diff --git a/packages/svelte/tests/runtime-xhtml/samples/select-multiple-spread/_config.js b/packages/svelte/tests/runtime-xhtml/samples/select-multiple-spread/_config.js
new file mode 100644
index 0000000000..607b8e7a39
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/select-multiple-spread/_config.js
@@ -0,0 +1,18 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, component, target }) {
+		const options = target.querySelectorAll('option');
+
+		assert.equal(options[0].selected, true);
+		assert.equal(options[1].selected, false);
+
+		// Shouldn't change the value because the value is not bound.
+		component.attrs = { value: ['2'] };
+		flushSync();
+
+		assert.equal(options[0].selected, false);
+		assert.equal(options[1].selected, true);
+	}
+});
diff --git a/packages/svelte/tests/runtime-xhtml/samples/select-multiple-spread/main.svelte b/packages/svelte/tests/runtime-xhtml/samples/select-multiple-spread/main.svelte
new file mode 100644
index 0000000000..f5a0900da3
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/select-multiple-spread/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Select from './select.svelte';
+
+	let { attrs = { value: ['1'] } } = $props();
+</script>
+
+<Select {attrs} />
diff --git a/packages/svelte/tests/runtime-xhtml/samples/select-multiple-spread/select.svelte b/packages/svelte/tests/runtime-xhtml/samples/select-multiple-spread/select.svelte
new file mode 100644
index 0000000000..8054355135
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/select-multiple-spread/select.svelte
@@ -0,0 +1,8 @@
+<script>
+	let { attrs } = $props();
+</script>
+
+<select multiple  {...attrs}>
+	<option value="1">option 1</option>
+	<option value="2">option 2</option>
+</select>
diff --git a/packages/svelte/tests/runtime-xhtml/samples/spread-element-input-select-multiple/_config.js b/packages/svelte/tests/runtime-xhtml/samples/spread-element-input-select-multiple/_config.js
new file mode 100644
index 0000000000..d952dc2444
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/spread-element-input-select-multiple/_config.js
@@ -0,0 +1,46 @@
+import { flushSync } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	test({ assert, component, target, window }) {
+		const [input1, input2] = target.querySelectorAll('input');
+		const select = target.querySelector('select');
+		ok(select);
+		const [option1, option2] = /** @type {NodeListOf<HTMLOptionElement>} */ (select.childNodes);
+
+		let selections = Array.from(select.selectedOptions);
+		assert.equal(selections.length, 2);
+		assert.ok(selections.includes(option1));
+		assert.ok(selections.includes(option2));
+
+		const event = new window.Event('change');
+
+		input1.checked = false;
+		input1.dispatchEvent(event);
+		flushSync();
+
+		selections = Array.from(select.selectedOptions);
+		assert.equal(selections.length, 1);
+		assert.ok(!selections.includes(option1));
+		assert.ok(selections.includes(option2));
+
+		input2.checked = false;
+		input2.dispatchEvent(event);
+		flushSync();
+		input1.checked = true;
+		input1.dispatchEvent(event);
+		flushSync();
+		selections = Array.from(select.selectedOptions);
+		assert.equal(selections.length, 1);
+		assert.ok(selections.includes(option1));
+		assert.ok(!selections.includes(option2));
+
+		component.spread = { value: ['Hello', 'World'] };
+		flushSync();
+
+		selections = Array.from(select.selectedOptions);
+		assert.equal(selections.length, 2);
+		assert.ok(selections.includes(option1));
+		assert.ok(selections.includes(option2));
+	}
+});
diff --git a/packages/svelte/tests/runtime-xhtml/samples/spread-element-input-select-multiple/main.svelte b/packages/svelte/tests/runtime-xhtml/samples/spread-element-input-select-multiple/main.svelte
new file mode 100644
index 0000000000..298c7754ce
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/spread-element-input-select-multiple/main.svelte
@@ -0,0 +1,12 @@
+<script>
+  let { spread } = $props();
+  let value = $state(['Hello', 'World']);
+</script>
+
+<select multiple {value} {...spread}>
+  <option>Hello</option>
+  <option>World</option>
+</select>
+
+<input type="checkbox" value="Hello" bind:group={value}>
+<input type="checkbox" value="World" bind:group={value}>
diff --git a/packages/svelte/tests/runtime-xhtml/samples/void-tags/_config.js b/packages/svelte/tests/runtime-xhtml/samples/void-tags/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/void-tags/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/runtime-xhtml/samples/void-tags/main.svelte b/packages/svelte/tests/runtime-xhtml/samples/void-tags/main.svelte
new file mode 100644
index 0000000000..08ea2838b3
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/samples/void-tags/main.svelte
@@ -0,0 +1,15 @@
+<area alt="">
+<base>
+<br>
+<col>
+<embed>
+<hr>
+<img alt="">
+<input>
+<keygen>
+<link>
+<meta>
+<param>
+<source>
+<track>
+<wbr>
diff --git a/packages/svelte/tests/runtime-xhtml/test.ts b/packages/svelte/tests/runtime-xhtml/test.ts
new file mode 100644
index 0000000000..416300dc58
--- /dev/null
+++ b/packages/svelte/tests/runtime-xhtml/test.ts
@@ -0,0 +1,9 @@
+// @vitest-environment vitest-xhtml-environment.ts
+
+import { runtime_suite, ok } from '../runtime-legacy/shared';
+
+const { test, run } = runtime_suite(true);
+
+export { test, ok };
+
+await run(__dirname);
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-children/_expected.html b/packages/svelte/tests/server-side-rendering/samples/async-children/_expected.html
new file mode 100644
index 0000000000..04d9709792
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-children/_expected.html
@@ -0,0 +1 @@
+<!--[--><!--[--><!---->1<!--]--><!----><!--]-->
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-children/component.svelte b/packages/svelte/tests/server-side-rendering/samples/async-children/component.svelte
new file mode 100644
index 0000000000..73b5a2f823
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-children/component.svelte
@@ -0,0 +1,4 @@
+<script>
+    const { children } = $props();
+</script>
+{@render children()}
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-children/main.svelte b/packages/svelte/tests/server-side-rendering/samples/async-children/main.svelte
new file mode 100644
index 0000000000..ae0fc571b3
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-children/main.svelte
@@ -0,0 +1,7 @@
+<script>
+    import Component from "./component.svelte";
+</script>
+<Component>
+    {@const one = await 1}
+    {one}
+</Component>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-context-throws-after-await/_config.js b/packages/svelte/tests/server-side-rendering/samples/async-context-throws-after-await/_config.js
new file mode 100644
index 0000000000..2d1b6be570
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-context-throws-after-await/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	skip: true, // TODO it appears there might be an actual bug here; the promise isn't ever actually awaited in spite of being awaited in the component
+	mode: ['async'],
+	error: 'lifecycle_outside_component'
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-context-throws-after-await/main.svelte b/packages/svelte/tests/server-side-rendering/samples/async-context-throws-after-await/main.svelte
new file mode 100644
index 0000000000..8e770c214b
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-context-throws-after-await/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { setContext } from 'svelte';
+
+	await Promise.resolve('hi');
+
+	setContext('key', 'value');
+</script>
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-directive-with-spreading/_expected.html b/packages/svelte/tests/server-side-rendering/samples/async-directive-with-spreading/_expected.html
new file mode 100644
index 0000000000..d46a957bdf
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-directive-with-spreading/_expected.html
@@ -0,0 +1 @@
+<!--[--><div class="test"></div><div style="color: green;"></div><!--]-->
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-directive-with-spreading/main.svelte b/packages/svelte/tests/server-side-rendering/samples/async-directive-with-spreading/main.svelte
new file mode 100644
index 0000000000..ed4270b754
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-directive-with-spreading/main.svelte
@@ -0,0 +1,2 @@
+<div class:test={await true} {...{}}></div>
+<div style:color={await "green"} {...{}}></div>
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-each-fallback-hoisting/_expected.html b/packages/svelte/tests/server-side-rendering/samples/async-each-fallback-hoisting/_expected.html
new file mode 100644
index 0000000000..bf0d87ab1b
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-each-fallback-hoisting/_expected.html
@@ -0,0 +1 @@
+4
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-each-fallback-hoisting/main.svelte b/packages/svelte/tests/server-side-rendering/samples/async-each-fallback-hoisting/main.svelte
new file mode 100644
index 0000000000..e580345a2e
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-each-fallback-hoisting/main.svelte
@@ -0,0 +1,5 @@
+{#each await Promise.resolve([]) as item}
+  {await Promise.reject('This should never be reached')}
+{:else}
+  {await Promise.resolve(4)}
+{/each}
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-each-hoisting/_expected.html b/packages/svelte/tests/server-side-rendering/samples/async-each-hoisting/_expected.html
new file mode 100644
index 0000000000..d800886d9c
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-each-hoisting/_expected.html
@@ -0,0 +1 @@
+123
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-each-hoisting/main.svelte b/packages/svelte/tests/server-side-rendering/samples/async-each-hoisting/main.svelte
new file mode 100644
index 0000000000..4b6bf7eadc
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-each-hoisting/main.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  const first = Promise.resolve(1);
+  const second = Promise.resolve(2);
+  const third = Promise.resolve(3);
+</script>
+
+{#each await Promise.resolve([first, second, third]) as item}
+  {await item}
+{/each}
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-head-multiple-title-order-preserved/A.svelte b/packages/svelte/tests/server-side-rendering/samples/async-head-multiple-title-order-preserved/A.svelte
new file mode 100644
index 0000000000..5ddccbe17c
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-head-multiple-title-order-preserved/A.svelte
@@ -0,0 +1,9 @@
+<script>
+	let { promise } = $props();
+</script>
+
+<svelte:head>
+	{#if await promise}
+		<title>A</title>
+	{/if}
+</svelte:head>
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-head-multiple-title-order-preserved/B.svelte b/packages/svelte/tests/server-side-rendering/samples/async-head-multiple-title-order-preserved/B.svelte
new file mode 100644
index 0000000000..95b102e680
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-head-multiple-title-order-preserved/B.svelte
@@ -0,0 +1,7 @@
+<script>
+	let { promise } = $props();
+</script>
+
+<svelte:head>
+		<title>{(await promise) && 'B'}</title>
+</svelte:head>
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-head-multiple-title-order-preserved/_config.js b/packages/svelte/tests/server-side-rendering/samples/async-head-multiple-title-order-preserved/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-head-multiple-title-order-preserved/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-head-multiple-title-order-preserved/_expected.html b/packages/svelte/tests/server-side-rendering/samples/async-head-multiple-title-order-preserved/_expected.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-head-multiple-title-order-preserved/_expected_head.html b/packages/svelte/tests/server-side-rendering/samples/async-head-multiple-title-order-preserved/_expected_head.html
new file mode 100644
index 0000000000..af5c5feba4
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-head-multiple-title-order-preserved/_expected_head.html
@@ -0,0 +1 @@
+<title>B</title>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-head-multiple-title-order-preserved/main.svelte b/packages/svelte/tests/server-side-rendering/samples/async-head-multiple-title-order-preserved/main.svelte
new file mode 100644
index 0000000000..9b49cf1c22
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-head-multiple-title-order-preserved/main.svelte
@@ -0,0 +1,27 @@
+<script>
+	import { tick } from 'svelte';
+	import A from './A.svelte';
+	import B from './B.svelte';
+
+	const main = Promise.withResolvers();
+	const a = Promise.withResolvers();
+	const b = Promise.withResolvers();
+
+	// regardless of resolution order, title should be the result of B, because it's the last-encountered
+	tick().then(() => {
+		main.resolve(true);
+		tick().then(() => {
+			b.resolve(true);
+		}).then(() => {
+			a.resolve(true);
+		});
+	})
+</script>
+
+<svelte:head>
+	{#if await main.promise}
+		<title>Main</title>
+	{/if}
+</svelte:head>
+<A promise={a.promise}/>
+<B promise={b.promise}/>
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-html-tag/_expected.html b/packages/svelte/tests/server-side-rendering/samples/async-html-tag/_expected.html
new file mode 100644
index 0000000000..5be0be37f2
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-html-tag/_expected.html
@@ -0,0 +1 @@
+<div>this should work</div>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-html-tag/main.svelte b/packages/svelte/tests/server-side-rendering/samples/async-html-tag/main.svelte
new file mode 100644
index 0000000000..2d556e4d5b
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-html-tag/main.svelte
@@ -0,0 +1 @@
+<div>{@html await 'this should work'}</div>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-if-alternate-hoisting/_expected.html b/packages/svelte/tests/server-side-rendering/samples/async-if-alternate-hoisting/_expected.html
new file mode 100644
index 0000000000..c3b0e19566
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-if-alternate-hoisting/_expected.html
@@ -0,0 +1 @@
+yes yes yes
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-if-alternate-hoisting/main.svelte b/packages/svelte/tests/server-side-rendering/samples/async-if-alternate-hoisting/main.svelte
new file mode 100644
index 0000000000..a97f32f034
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-if-alternate-hoisting/main.svelte
@@ -0,0 +1,5 @@
+{#if await Promise.resolve(false)}
+  {await Promise.reject('no no no')}
+{:else}
+  {await Promise.resolve('yes yes yes')}
+{/if}
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-if-const/_expected.html b/packages/svelte/tests/server-side-rendering/samples/async-if-const/_expected.html
new file mode 100644
index 0000000000..e440e5c842
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-if-const/_expected.html
@@ -0,0 +1 @@
+3
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-if-const/main.svelte b/packages/svelte/tests/server-side-rendering/samples/async-if-const/main.svelte
new file mode 100644
index 0000000000..1437ac8f14
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-if-const/main.svelte
@@ -0,0 +1,10 @@
+{#if false}
+  {@const one = await 1}
+  {one}
+{:else if false}
+  {@const two = await 2}
+  {two}
+{:else}
+  {@const three = await 3}
+  {three}
+{/if} 
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-if-hoisting/_expected.html b/packages/svelte/tests/server-side-rendering/samples/async-if-hoisting/_expected.html
new file mode 100644
index 0000000000..c3b0e19566
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-if-hoisting/_expected.html
@@ -0,0 +1 @@
+yes yes yes
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-if-hoisting/main.svelte b/packages/svelte/tests/server-side-rendering/samples/async-if-hoisting/main.svelte
new file mode 100644
index 0000000000..4ca3462771
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-if-hoisting/main.svelte
@@ -0,0 +1,5 @@
+{#if await Promise.resolve(true)}
+  {await Promise.resolve('yes yes yes')}
+{:else}
+  {await Promise.reject('no no no')}
+{/if}
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-multiple-attrs/_config.js b/packages/svelte/tests/server-side-rendering/samples/async-multiple-attrs/_config.js
new file mode 100644
index 0000000000..aaf40e7a52
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-multiple-attrs/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['async'],
+	compileOptions: {
+		dev: true
+	}
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-multiple-attrs/_expected.html b/packages/svelte/tests/server-side-rendering/samples/async-multiple-attrs/_expected.html
new file mode 100644
index 0000000000..93016d569c
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-multiple-attrs/_expected.html
@@ -0,0 +1 @@
+<!--[--><img alt="test" src=""/><!--]-->
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-multiple-attrs/_expected_head.html b/packages/svelte/tests/server-side-rendering/samples/async-multiple-attrs/_expected_head.html
new file mode 100644
index 0000000000..96ba2bba28
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-multiple-attrs/_expected_head.html
@@ -0,0 +1 @@
+<!--1410iyz--><!----><title>Async multiple attributes</title>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-multiple-attrs/main.svelte b/packages/svelte/tests/server-side-rendering/samples/async-multiple-attrs/main.svelte
new file mode 100644
index 0000000000..f14ccd088b
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-multiple-attrs/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	const user = $derived(Promise.resolve({ 
+		name: 'test',
+		image: '',
+	}))
+</script>
+
+<svelte:head>
+<title>Async multiple attributes</title>
+</svelte:head>
+
+<img
+	alt={(await user).name}
+	src={(await user).image}
+/>
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-nullish-pending-snippet/_expected.html b/packages/svelte/tests/server-side-rendering/samples/async-nullish-pending-snippet/_expected.html
new file mode 100644
index 0000000000..1cc0b4b00f
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-nullish-pending-snippet/_expected.html
@@ -0,0 +1 @@
+<!--[--><!--[--><!---->awaited<!--]--><!--]-->
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-nullish-pending-snippet/main.svelte b/packages/svelte/tests/server-side-rendering/samples/async-nullish-pending-snippet/main.svelte
new file mode 100644
index 0000000000..b4e8dbcb75
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-nullish-pending-snippet/main.svelte
@@ -0,0 +1,6 @@
+<script>
+    let pending = null;
+</script>
+<svelte:boundary {pending}>
+    {await 'awaited'}
+</svelte:boundary>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-option-implicit-complex-value/_expected.html b/packages/svelte/tests/server-side-rendering/samples/async-option-implicit-complex-value/_expected.html
new file mode 100644
index 0000000000..f2fd8e71b9
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-option-implicit-complex-value/_expected.html
@@ -0,0 +1,3 @@
+<select>
+  <option selected>421</option>
+</select>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-option-implicit-complex-value/main.svelte b/packages/svelte/tests/server-side-rendering/samples/async-option-implicit-complex-value/main.svelte
new file mode 100644
index 0000000000..2ad9b64509
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-option-implicit-complex-value/main.svelte
@@ -0,0 +1,3 @@
+<select value="421">
+  <option>{await Promise.resolve(42)}1</option>
+</select>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-option-implicit-simple-value/_expected.html b/packages/svelte/tests/server-side-rendering/samples/async-option-implicit-simple-value/_expected.html
new file mode 100644
index 0000000000..f642109218
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-option-implicit-simple-value/_expected.html
@@ -0,0 +1,3 @@
+<select>
+  <option selected>42</option>
+</select>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-option-implicit-simple-value/main.svelte b/packages/svelte/tests/server-side-rendering/samples/async-option-implicit-simple-value/main.svelte
new file mode 100644
index 0000000000..a5d91424cb
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-option-implicit-simple-value/main.svelte
@@ -0,0 +1,3 @@
+<select value={42}>
+  <option>{await Promise.resolve(42)}</option>
+</select>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-select-value-component/Option.svelte b/packages/svelte/tests/server-side-rendering/samples/async-select-value-component/Option.svelte
new file mode 100644
index 0000000000..a17413bd8d
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-select-value-component/Option.svelte
@@ -0,0 +1,5 @@
+<script>
+	let props = $props();
+</script>
+
+<option {...props}>{@render props.children?.()}</option>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-select-value-component/_expected.html b/packages/svelte/tests/server-side-rendering/samples/async-select-value-component/_expected.html
new file mode 100644
index 0000000000..96d1d8b233
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-select-value-component/_expected.html
@@ -0,0 +1 @@
+<select><option value="">--Please choose an option--</option><option value="dog" selected>Dog</option><option value="cat">Cat</option></select>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-select-value-component/main.svelte b/packages/svelte/tests/server-side-rendering/samples/async-select-value-component/main.svelte
new file mode 100644
index 0000000000..aaf10c2cb3
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-select-value-component/main.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import Option from './Option.svelte';
+</script>
+<select value={await Promise.resolve('dog')}>
+	<Option value="">--Please choose an option--</Option>
+	<Option value={await Promise.resolve('dog')}>Dog</Option>
+	<Option value="cat">Cat</Option>
+</select>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-select-value-implicit-value-complex/_expected.html b/packages/svelte/tests/server-side-rendering/samples/async-select-value-implicit-value-complex/_expected.html
new file mode 100644
index 0000000000..de7cba8837
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-select-value-implicit-value-complex/_expected.html
@@ -0,0 +1 @@
+<select><option>--Please choose an option--</option><option selected>dog</option><option>cat</option></select>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-select-value-implicit-value-complex/main.svelte b/packages/svelte/tests/server-side-rendering/samples/async-select-value-implicit-value-complex/main.svelte
new file mode 100644
index 0000000000..2cc4065eb6
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-select-value-implicit-value-complex/main.svelte
@@ -0,0 +1,13 @@
+<select value={await Promise.resolve('dog')}>
+	<option>
+		{@render option("--Please choose an option--")}
+	</option>
+	<option>
+		{@render option(Promise.resolve('dog'))}
+	</option>
+	<option>
+		{@render option(Promise.resolve('cat'))}
+	</option>
+</select>
+
+{#snippet option(val)}{await val}{/snippet}
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-select-value-implicit-value/_expected.html b/packages/svelte/tests/server-side-rendering/samples/async-select-value-implicit-value/_expected.html
new file mode 100644
index 0000000000..de7cba8837
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-select-value-implicit-value/_expected.html
@@ -0,0 +1 @@
+<select><option>--Please choose an option--</option><option selected>dog</option><option>cat</option></select>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-select-value-implicit-value/main.svelte b/packages/svelte/tests/server-side-rendering/samples/async-select-value-implicit-value/main.svelte
new file mode 100644
index 0000000000..8d9393cf6c
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-select-value-implicit-value/main.svelte
@@ -0,0 +1,5 @@
+<select value={await Promise.resolve('dog')}>
+	<option>--Please choose an option--</option>
+	<option>{await Promise.resolve('dog')}</option>
+	<option>cat</option>
+</select>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-snippet/_expected.html b/packages/svelte/tests/server-side-rendering/samples/async-snippet/_expected.html
new file mode 100644
index 0000000000..5be0be37f2
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-snippet/_expected.html
@@ -0,0 +1 @@
+<div>this should work</div>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-snippet/main.svelte b/packages/svelte/tests/server-side-rendering/samples/async-snippet/main.svelte
new file mode 100644
index 0000000000..a6f2ac7b09
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-snippet/main.svelte
@@ -0,0 +1,6 @@
+{#snippet foo()}
+    {@const x = await 'this should work'}
+    <div>{x}</div>
+{/snippet}
+
+{@render foo()}
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-svelte-boundary/_expected.html b/packages/svelte/tests/server-side-rendering/samples/async-svelte-boundary/_expected.html
new file mode 100644
index 0000000000..5be0be37f2
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-svelte-boundary/_expected.html
@@ -0,0 +1 @@
+<div>this should work</div>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/async-svelte-boundary/main.svelte b/packages/svelte/tests/server-side-rendering/samples/async-svelte-boundary/main.svelte
new file mode 100644
index 0000000000..c4cde60119
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/async-svelte-boundary/main.svelte
@@ -0,0 +1,4 @@
+<svelte:boundary>
+    {@const x = await 'this should work'}
+    <div>{x}</div>
+</svelte:boundary>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/attribute-spread-hidden/_expected.html b/packages/svelte/tests/server-side-rendering/samples/attribute-spread-hidden/_expected.html
new file mode 100644
index 0000000000..80937efaee
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/attribute-spread-hidden/_expected.html
@@ -0,0 +1 @@
+<!--[--><div>A</div><div hidden>B</div><div hidden="until-found">C</div><!--]-->
diff --git a/packages/svelte/tests/server-side-rendering/samples/attribute-spread-hidden/main.svelte b/packages/svelte/tests/server-side-rendering/samples/attribute-spread-hidden/main.svelte
new file mode 100644
index 0000000000..6738b34054
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/attribute-spread-hidden/main.svelte
@@ -0,0 +1,3 @@
+<div {...{ hidden: false }}>A</div>
+<div {...{ hidden: true }}>B</div>
+<div {...{ hidden: 'until-found' }}>C</div>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/attribute-strip-svg-mathml-ce/_expected.html b/packages/svelte/tests/server-side-rendering/samples/attribute-strip-svg-mathml-ce/_expected.html
new file mode 100644
index 0000000000..e737f44c56
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/attribute-strip-svg-mathml-ce/_expected.html
@@ -0,0 +1 @@
+<!--[--><svg><circle cx="12" cy="12" r="10"></circle></svg> <math><mi>x</mi></math> <custom-element></custom-element><!--]-->
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/attribute-strip-svg-mathml-ce/main.svelte b/packages/svelte/tests/server-side-rendering/samples/attribute-strip-svg-mathml-ce/main.svelte
new file mode 100644
index 0000000000..df15de54de
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/attribute-strip-svg-mathml-ce/main.svelte
@@ -0,0 +1,16 @@
+<script>
+  const userdata = {
+    ONCLICK: 'alert(document.cookie)',
+    ONMOUSEOVER: 'alert("XSS")'
+  };
+</script>
+
+<svg {...userdata}>
+  <circle cx="12" cy="12" r="10" />
+</svg>
+
+<math {...userdata}>
+  <mi>x</mi>
+</math>
+
+<custom-element {...userdata}></custom-element>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/attribute-template-literal-sanitization/_expected.html b/packages/svelte/tests/server-side-rendering/samples/attribute-template-literal-sanitization/_expected.html
new file mode 100644
index 0000000000..a4bbe1a371
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/attribute-template-literal-sanitization/_expected.html
@@ -0,0 +1,3 @@
+<div title="${inject} world"></div>
+<div title="`backtick world"></div>
+<div title="back\slash world"></div>
diff --git a/packages/svelte/tests/server-side-rendering/samples/attribute-template-literal-sanitization/main.svelte b/packages/svelte/tests/server-side-rendering/samples/attribute-template-literal-sanitization/main.svelte
new file mode 100644
index 0000000000..ec1a4a140e
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/attribute-template-literal-sanitization/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let value = 'world';
+</script>
+
+<div title="&#36;&#123;inject&#125; {value}"></div>
+<div title="&#96;backtick {value}"></div>
+<div title="back\slash {value}"></div>
diff --git a/packages/svelte/tests/server-side-rendering/samples/boundary-error-failed-prop/_config.js b/packages/svelte/tests/server-side-rendering/samples/boundary-error-failed-prop/_config.js
new file mode 100644
index 0000000000..6989172de4
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/boundary-error-failed-prop/_config.js
@@ -0,0 +1,10 @@
+import { test } from '../../test';
+
+export default test({
+	transformError: (error) => {
+		if (/** @type {Error} */ (error).message !== 'you are not supposed to see this message') {
+			return 'wrong object passed to transformError';
+		}
+		return 'component error';
+	}
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/boundary-error-failed-prop/_expected.html b/packages/svelte/tests/server-side-rendering/samples/boundary-error-failed-prop/_expected.html
new file mode 100644
index 0000000000..da06ee2b39
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/boundary-error-failed-prop/_expected.html
@@ -0,0 +1 @@
+<p>caught: component error</p>
diff --git a/packages/svelte/tests/server-side-rendering/samples/boundary-error-failed-prop/main.svelte b/packages/svelte/tests/server-side-rendering/samples/boundary-error-failed-prop/main.svelte
new file mode 100644
index 0000000000..29086b359d
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/boundary-error-failed-prop/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	function throws() {
+		throw new Error('you are not supposed to see this message');
+	}
+</script>
+
+{#snippet failed(error)}
+	<p>caught: {error}</p>
+{/snippet}
+
+<svelte:boundary {failed}>
+	<p>{throws()}</p>
+</svelte:boundary>
diff --git a/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-close-bang-escape/_config.js b/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-close-bang-escape/_config.js
new file mode 100644
index 0000000000..2e3ffc6ab3
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-close-bang-escape/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	props: {
+		query: '--!><img src=x onerror=alert(1)><!--'
+	},
+	transformError: (error) => ({ message: /** @type {Error} */ (error).message })
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-close-bang-escape/_expected.html b/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-close-bang-escape/_expected.html
new file mode 100644
index 0000000000..ab5e48766f
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-close-bang-escape/_expected.html
@@ -0,0 +1 @@
+<p class="error">--!>&lt;img src=x onerror=alert(1)>&lt;!--</p>
diff --git a/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-close-bang-escape/main.svelte b/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-close-bang-escape/main.svelte
new file mode 100644
index 0000000000..dd2955ecc4
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-close-bang-escape/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	let { query } = $props();
+
+	function search(q) {
+		throw new Error(q);
+	}
+</script>
+
+<svelte:boundary>
+	<p>{search(query)}</p>
+
+	{#snippet failed(error)}
+		<p class="error">{error.message}</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-escape/_config.js b/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-escape/_config.js
new file mode 100644
index 0000000000..1644604a7b
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-escape/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	props: {
+		query: '--><img src=x onerror=alert(1)><!--'
+	},
+	transformError: (error) => ({ message: /** @type {Error} */ (error).message })
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-escape/_expected.html b/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-escape/_expected.html
new file mode 100644
index 0000000000..d718344e5c
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-escape/_expected.html
@@ -0,0 +1 @@
+<p class="error">-->&lt;img src=x onerror=alert(1)>&lt;!--</p>
diff --git a/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-escape/main.svelte b/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-escape/main.svelte
new file mode 100644
index 0000000000..dd2955ecc4
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-escape/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	let { query } = $props();
+
+	function search(q) {
+		throw new Error(q);
+	}
+</script>
+
+<svelte:boundary>
+	<p>{search(query)}</p>
+
+	{#snippet failed(error)}
+		<p class="error">{error.message}</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-open-escape/_config.js b/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-open-escape/_config.js
new file mode 100644
index 0000000000..a4f74e8b21
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-open-escape/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	props: {
+		query: '<!--<script>alert(1)</script>'
+	},
+	transformError: (error) => ({ message: /** @type {Error} */ (error).message })
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-open-escape/_expected.html b/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-open-escape/_expected.html
new file mode 100644
index 0000000000..1bde51be0a
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-open-escape/_expected.html
@@ -0,0 +1 @@
+<p class="error">&lt;!--&lt;script&gt;alert(1)&lt;/script&gt;</p>
diff --git a/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-open-escape/main.svelte b/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-open-escape/main.svelte
new file mode 100644
index 0000000000..dd2955ecc4
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-open-escape/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	let { query } = $props();
+
+	function search(q) {
+		throw new Error(q);
+	}
+</script>
+
+<svelte:boundary>
+	<p>{search(query)}</p>
+
+	{#snippet failed(error)}
+		<p class="error">{error.message}</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-overlap-escape/_config.js b/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-overlap-escape/_config.js
new file mode 100644
index 0000000000..938edf4ec5
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-overlap-escape/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	props: {
+		query: '<!--><!--->-->'
+	},
+	transformError: (error) => ({ message: /** @type {Error} */ (error).message })
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-overlap-escape/_expected.html b/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-overlap-escape/_expected.html
new file mode 100644
index 0000000000..7d338ce71b
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-overlap-escape/_expected.html
@@ -0,0 +1 @@
+<p class="error">&lt;!--&gt;&lt;!---&gt;--&gt;</p>
diff --git a/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-overlap-escape/main.svelte b/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-overlap-escape/main.svelte
new file mode 100644
index 0000000000..dd2955ecc4
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/boundary-error-html-comment-overlap-escape/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	let { query } = $props();
+
+	function search(q) {
+		throw new Error(q);
+	}
+</script>
+
+<svelte:boundary>
+	<p>{search(query)}</p>
+
+	{#snippet failed(error)}
+		<p class="error">{error.message}</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/server-side-rendering/samples/boundary-error-no-failed-snippet/_config.js b/packages/svelte/tests/server-side-rendering/samples/boundary-error-no-failed-snippet/_config.js
new file mode 100644
index 0000000000..ae78cb4825
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/boundary-error-no-failed-snippet/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	// transformError transforms the error, but there's no failed snippet.
+	// The error should still propagate because there's nothing to render instead.
+	transformError: () => 'you will not see me',
+	error: 'component error'
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/boundary-error-no-failed-snippet/main.svelte b/packages/svelte/tests/server-side-rendering/samples/boundary-error-no-failed-snippet/main.svelte
new file mode 100644
index 0000000000..98275badb3
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/boundary-error-no-failed-snippet/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	function throws() {
+		throw new Error('component error');
+	}
+</script>
+
+<svelte:boundary onerror={() => {}}>
+	<p>{throws()}</p>
+</svelte:boundary>
diff --git a/packages/svelte/tests/server-side-rendering/samples/boundary-error-no-onerror/_config.js b/packages/svelte/tests/server-side-rendering/samples/boundary-error-no-onerror/_config.js
new file mode 100644
index 0000000000..ecc506203f
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/boundary-error-no-onerror/_config.js
@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+export default test({
+	// No transformError - by default the server throws, so the error should propagate.
+	error: 'component error'
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/boundary-error-no-onerror/main.svelte b/packages/svelte/tests/server-side-rendering/samples/boundary-error-no-onerror/main.svelte
new file mode 100644
index 0000000000..7dd2cf310e
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/boundary-error-no-onerror/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	function throws() {
+		throw new Error('component error');
+	}
+</script>
+
+<svelte:boundary>
+	<p>{throws()}</p>
+
+	{#snippet failed(error)}
+		<p>caught: {error}</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/server-side-rendering/samples/boundary-error-with-onerror/_config.js b/packages/svelte/tests/server-side-rendering/samples/boundary-error-with-onerror/_config.js
new file mode 100644
index 0000000000..e1cb96759f
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/boundary-error-with-onerror/_config.js
@@ -0,0 +1,11 @@
+import { test } from '../../test';
+
+export default test({
+	// boundary with failed snippet exists, so transformError should transform the error
+	transformError: (error) => {
+		if (/** @type {Error} */ (error).message !== 'you are not supposed to see this message') {
+			return 'wrong object passed to transformError';
+		}
+		return 'component error';
+	}
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/boundary-error-with-onerror/_expected.html b/packages/svelte/tests/server-side-rendering/samples/boundary-error-with-onerror/_expected.html
new file mode 100644
index 0000000000..293de47610
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/boundary-error-with-onerror/_expected.html
@@ -0,0 +1 @@
+<p>caught: component error</p>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/boundary-error-with-onerror/main.svelte b/packages/svelte/tests/server-side-rendering/samples/boundary-error-with-onerror/main.svelte
new file mode 100644
index 0000000000..a2d1435e76
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/boundary-error-with-onerror/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	function throws() {
+		throw new Error('you are not supposed to see this message');
+	}
+</script>
+
+<svelte:boundary>
+	<p>{throws()}</p>
+
+	{#snippet failed(error)}
+		<p>caught: {error}</p>
+	{/snippet}
+</svelte:boundary>
diff --git a/packages/svelte/tests/server-side-rendering/samples/boundary-pending-prop-async/_config.js b/packages/svelte/tests/server-side-rendering/samples/boundary-pending-prop-async/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/boundary-pending-prop-async/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/server-side-rendering/samples/boundary-pending-prop-async/_expected.html b/packages/svelte/tests/server-side-rendering/samples/boundary-pending-prop-async/_expected.html
new file mode 100644
index 0000000000..ac7cd985f1
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/boundary-pending-prop-async/_expected.html
@@ -0,0 +1 @@
+<!--[--><!---->Loading...<!--]-->
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/boundary-pending-prop-async/main.svelte b/packages/svelte/tests/server-side-rendering/samples/boundary-pending-prop-async/main.svelte
new file mode 100644
index 0000000000..7e0d4c62ea
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/boundary-pending-prop-async/main.svelte
@@ -0,0 +1,8 @@
+{#snippet pending()}
+	Loading...
+{/snippet}
+
+<svelte:boundary pending={pending}>
+	{@const data = await Promise.resolve('hello')}
+	<p>{data}</p>
+</svelte:boundary>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/contenteditable-bindings-escaped/_expected.html b/packages/svelte/tests/server-side-rendering/samples/contenteditable-bindings-escaped/_expected.html
new file mode 100644
index 0000000000..648895aca6
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/contenteditable-bindings-escaped/_expected.html
@@ -0,0 +1 @@
+<!--[--><div contenteditable="">&lt;script>alert('pwnd')&lt;/script></div> <div contenteditable="">&lt;script>alert('pwnd')&lt;/script></div> <div contenteditable=""><script>alert('pwnd')</script></div><!--]-->
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/contenteditable-bindings-escaped/main.svelte b/packages/svelte/tests/server-side-rendering/samples/contenteditable-bindings-escaped/main.svelte
new file mode 100644
index 0000000000..e5ccb4b6db
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/contenteditable-bindings-escaped/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	let data = $state("<scri"+"pt>alert('pwnd')</scr"+"ipt>");
+</script>
+
+<div contenteditable bind:innerText={data}></div>
+<div contenteditable bind:textContent={data}></div>
+<div contenteditable bind:innerHTML={data}></div>
diff --git a/packages/svelte/tests/server-side-rendering/samples/context-not-set-throws/_config.js b/packages/svelte/tests/server-side-rendering/samples/context-not-set-throws/_config.js
new file mode 100644
index 0000000000..575844faf6
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/context-not-set-throws/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	error: 'missing_context'
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/context-not-set-throws/main.svelte b/packages/svelte/tests/server-side-rendering/samples/context-not-set-throws/main.svelte
new file mode 100644
index 0000000000..c52ad927c7
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/context-not-set-throws/main.svelte
@@ -0,0 +1,9 @@
+<script module>
+	import { createContext } from 'svelte';
+
+	const [get] = createContext();
+</script>
+
+<script>
+	get();
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/context/Child.svelte b/packages/svelte/tests/server-side-rendering/samples/context/Child.svelte
new file mode 100644
index 0000000000..fab18ea195
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/context/Child.svelte
@@ -0,0 +1,8 @@
+<script>
+	import { setContext, getContext } from 'svelte';
+
+	setContext('key', 'child value');
+	await Promise.resolve();
+</script>
+
+<div>{getContext('key')}</div>
diff --git a/packages/svelte/tests/server-side-rendering/samples/context/_config.js b/packages/svelte/tests/server-side-rendering/samples/context/_config.js
new file mode 100644
index 0000000000..05de37a8bd
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/context/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['async']
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/context/_expected.html b/packages/svelte/tests/server-side-rendering/samples/context/_expected.html
new file mode 100644
index 0000000000..554133d8d9
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/context/_expected.html
@@ -0,0 +1,3 @@
+<div>value</div>
+<div>value</div>
+<div>child value</div>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/context/main.svelte b/packages/svelte/tests/server-side-rendering/samples/context/main.svelte
new file mode 100644
index 0000000000..fd75a6cbae
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/context/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { getContext, setContext } from 'svelte';
+	import Child from './Child.svelte';
+
+	setContext('key', 'value');
+	await Promise.resolve();
+</script>
+
+<div>{getContext('key')}</div>
+<div>{(await Promise.resolve(true)) && getContext('key')}</div>
+<Child />
diff --git a/packages/svelte/tests/server-side-rendering/samples/csp-config-error/_config.js b/packages/svelte/tests/server-side-rendering/samples/csp-config-error/_config.js
new file mode 100644
index 0000000000..03626fc37b
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/csp-config-error/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['async'],
+	csp: { hash: true, nonce: 'test-nonce' },
+	error: 'invalid_csp'
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/csp-config-error/_expected_head.html b/packages/svelte/tests/server-side-rendering/samples/csp-config-error/_expected_head.html
new file mode 100644
index 0000000000..fb3c95f51f
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/csp-config-error/_expected_head.html
@@ -0,0 +1,12 @@
+<script nonce="test-nonce">
+{
+	const r = (v) => Promise.resolve(v);
+	const h = (window.__svelte ??= {}).h ??= new Map();
+
+	for (const [k, v] of [
+		["key",r("bar")]
+	]) {
+		h.set(k, v);
+	}
+}
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/csp-config-error/main.svelte b/packages/svelte/tests/server-side-rendering/samples/csp-config-error/main.svelte
new file mode 100644
index 0000000000..2c4726edf4
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/csp-config-error/main.svelte
@@ -0,0 +1,4 @@
+<script>
+	import { hydratable } from "svelte";
+    const foo = await hydratable('key', () => Promise.resolve('bar'));
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/csp-hash/_config.js b/packages/svelte/tests/server-side-rendering/samples/csp-hash/_config.js
new file mode 100644
index 0000000000..fe28087d86
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/csp-hash/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['async'],
+	csp: { hash: true },
+	script_hashes: ['sha256-J0xwNm40i0NVEdHYeMRThG7y90X+P/I1ElZGnpQ0AbU=']
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/csp-hash/_expected_head.html b/packages/svelte/tests/server-side-rendering/samples/csp-hash/_expected_head.html
new file mode 100644
index 0000000000..56319255d6
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/csp-hash/_expected_head.html
@@ -0,0 +1,12 @@
+<script>
+{
+	const r = (v) => Promise.resolve(v);
+				const h = (window.__svelte ??= {}).h ??= new Map();
+
+	for (const [k, v] of [
+		["key",r("bar")]
+	]) {
+		h.set(k, v);
+	}
+}
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/csp-hash/main.svelte b/packages/svelte/tests/server-side-rendering/samples/csp-hash/main.svelte
new file mode 100644
index 0000000000..2c4726edf4
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/csp-hash/main.svelte
@@ -0,0 +1,4 @@
+<script>
+	import { hydratable } from "svelte";
+    const foo = await hydratable('key', () => Promise.resolve('bar'));
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/csp-nonce/_config.js b/packages/svelte/tests/server-side-rendering/samples/csp-nonce/_config.js
new file mode 100644
index 0000000000..320c0f67f8
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/csp-nonce/_config.js
@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['async'],
+	csp: { nonce: 'test-nonce' }
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/csp-nonce/_expected_head.html b/packages/svelte/tests/server-side-rendering/samples/csp-nonce/_expected_head.html
new file mode 100644
index 0000000000..fb3c95f51f
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/csp-nonce/_expected_head.html
@@ -0,0 +1,12 @@
+<script nonce="test-nonce">
+{
+	const r = (v) => Promise.resolve(v);
+	const h = (window.__svelte ??= {}).h ??= new Map();
+
+	for (const [k, v] of [
+		["key",r("bar")]
+	]) {
+		h.set(k, v);
+	}
+}
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/csp-nonce/main.svelte b/packages/svelte/tests/server-side-rendering/samples/csp-nonce/main.svelte
new file mode 100644
index 0000000000..2c4726edf4
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/csp-nonce/main.svelte
@@ -0,0 +1,4 @@
+<script>
+	import { hydratable } from "svelte";
+    const foo = await hydratable('key', () => Promise.resolve('bar'));
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_expected.html b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_expected.html
index 60e974bd1a..7ba4de394e 100644
--- a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_expected.html
+++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_expected.html
@@ -1 +1 @@
-<!--[--><div class="foo svelte-gfnjhw">foo</div><!--]-->
\ No newline at end of file
+<!--[--><div class="foo svelte-1h3glmj">foo</div><!--]-->
diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_expected_head.html b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_expected_head.html
index 5350e77a49..99db8fc6dc 100644
--- a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_expected_head.html
+++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_expected_head.html
@@ -1 +1 @@
-<style id="svelte-gfnjhw">.foo.svelte-gfnjhw {color:green;}.foo.svelte-gfnjhw {color:green;} .foo.svelte-gfnjhw {color:green;}.foo.svelte-gfnjhw, .foo.svelte-gfnjhw {color:green;}</style>
\ No newline at end of file
+<style id="svelte-1h3glmj">.foo.svelte-1h3glmj {color:green;}.foo.svelte-1h3glmj {color:green;} .foo.svelte-1h3glmj {color:green;}.foo.svelte-1h3glmj, .foo.svelte-1h3glmj {color:green;}</style>
diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.css b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.css
index bddefdd00c..81c1111967 100644
--- a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.css
+++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.css
@@ -1,4 +1,4 @@
 
-.foo.svelte-sg04hs {
+.foo.svelte-1nvcr6w {
 	color: red;
 }
diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.html b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.html
index 1f0b2b95fe..a6eba00942 100644
--- a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.html
+++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.html
@@ -1 +1 @@
-<!--[--><div class="bar svelte-ievf05">bar</div><!----> <div class="foo svelte-sg04hs">foo</div><!--]-->
\ No newline at end of file
+<!--[--><div class="bar svelte-1nvcr6w">bar</div><!----> <div class="foo svelte-sg04hs">foo</div><!--]-->
diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected_head.html b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected_head.html
index 6d795670ff..516a9576b3 100644
--- a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected_head.html
+++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected_head.html
@@ -1 +1 @@
-<style id="svelte-ievf05">.bar.svelte-ievf05 {color:red;}</style>
\ No newline at end of file
+<style id="svelte-lr8eda">.bar.svelte-lr8eda {color:red;}</style>
diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.css b/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.css
index 8882c6ec7e..eb1f3e7a9b 100644
--- a/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.css
+++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.css
@@ -1,4 +1,4 @@
 
-	.foo.svelte-sg04hs {
+	.foo.svelte-okauro {
 		color: red;
 	}
diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.html b/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.html
index 8ebe1ad73e..01ebd79914 100644
--- a/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.html
+++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.html
@@ -1 +1 @@
-<div class="foo svelte-sg04hs">foo</div>
\ No newline at end of file
+<div class="foo svelte-okauro">foo</div>
diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected_head.html b/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected_head.html
index 9c4f8a8538..1a1511f55e 100644
--- a/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected_head.html
+++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected_head.html
@@ -1 +1 @@
-<style id="svelte-sg04hs">.foo.svelte-sg04hs {color:red;}</style>
\ No newline at end of file
+<style id="svelte-okauro">.foo.svelte-okauro {color:red;}</style>
diff --git a/packages/svelte/tests/server-side-rendering/samples/css/_expected.css b/packages/svelte/tests/server-side-rendering/samples/css/_expected.css
index 8882c6ec7e..ec86890478 100644
--- a/packages/svelte/tests/server-side-rendering/samples/css/_expected.css
+++ b/packages/svelte/tests/server-side-rendering/samples/css/_expected.css
@@ -1,4 +1,4 @@
 
-	.foo.svelte-sg04hs {
+	.foo.svelte-e9omc {
 		color: red;
 	}
diff --git a/packages/svelte/tests/server-side-rendering/samples/css/_expected.html b/packages/svelte/tests/server-side-rendering/samples/css/_expected.html
index 8ebe1ad73e..dc9409fa03 100644
--- a/packages/svelte/tests/server-side-rendering/samples/css/_expected.html
+++ b/packages/svelte/tests/server-side-rendering/samples/css/_expected.html
@@ -1 +1 @@
-<div class="foo svelte-sg04hs">foo</div>
\ No newline at end of file
+<div class="foo svelte-e9omc">foo</div>
diff --git a/packages/svelte/tests/server-side-rendering/samples/css/_expected_head.html b/packages/svelte/tests/server-side-rendering/samples/css/_expected_head.html
index 9c4f8a8538..941c1f13b4 100644
--- a/packages/svelte/tests/server-side-rendering/samples/css/_expected_head.html
+++ b/packages/svelte/tests/server-side-rendering/samples/css/_expected_head.html
@@ -1 +1 @@
-<style id="svelte-sg04hs">.foo.svelte-sg04hs {color:red;}</style>
\ No newline at end of file
+<style id="svelte-e9omc">.foo.svelte-e9omc {color:red;}</style>
diff --git a/packages/svelte/tests/server-side-rendering/samples/destructure-state-iterable/_expected.html b/packages/svelte/tests/server-side-rendering/samples/destructure-state-iterable/_expected.html
new file mode 100644
index 0000000000..e3f755a08c
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/destructure-state-iterable/_expected.html
@@ -0,0 +1 @@
+0, 1
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/destructure-state-iterable/main.svelte b/packages/svelte/tests/server-side-rendering/samples/destructure-state-iterable/main.svelte
new file mode 100644
index 0000000000..9414735f2f
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/destructure-state-iterable/main.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	let count = 0;
+	function* test(){
+		while (true) {
+			yield count++;
+		}
+	}
+	let [one, two] = $state(test())
+</script>
+
+{one}, {two}
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/destructure-state/_expected.html b/packages/svelte/tests/server-side-rendering/samples/destructure-state/_expected.html
new file mode 100644
index 0000000000..213a5f5bf1
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/destructure-state/_expected.html
@@ -0,0 +1 @@
+10, Admin
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/destructure-state/main.svelte b/packages/svelte/tests/server-side-rendering/samples/destructure-state/main.svelte
new file mode 100644
index 0000000000..422548cd14
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/destructure-state/main.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	let [level, custom] = $state([10, "Admin"])
+</script>
+
+{level}, {custom}
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/dynamic-element-xss-prevention/_config.js b/packages/svelte/tests/server-side-rendering/samples/dynamic-element-xss-prevention/_config.js
new file mode 100644
index 0000000000..ddbe9a4b16
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/dynamic-element-xss-prevention/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	props: {
+		tag: 'svg onload=alert(1)'
+	},
+	error: 'dynamic_element_invalid_tag'
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/dynamic-element-xss-prevention/main.svelte b/packages/svelte/tests/server-side-rendering/samples/dynamic-element-xss-prevention/main.svelte
new file mode 100644
index 0000000000..94ad88cf0a
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/dynamic-element-xss-prevention/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	let { tag } = $props();
+</script>
+
+<svelte:element this={tag}>ok</svelte:element>
diff --git a/packages/svelte/tests/server-side-rendering/samples/each-body-async/_config.js b/packages/svelte/tests/server-side-rendering/samples/each-body-async/_config.js
new file mode 100644
index 0000000000..05de37a8bd
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/each-body-async/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['async']
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/each-body-async/_expected.html b/packages/svelte/tests/server-side-rendering/samples/each-body-async/_expected.html
new file mode 100644
index 0000000000..605299c2ae
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/each-body-async/_expected.html
@@ -0,0 +1 @@
+<!--[--><!--[--><!--[--><!---->each<!--]--><!--]--> <!--[--><!--[!--><!---->else<!--]--><!--]--><!--]-->
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/each-body-async/main.svelte b/packages/svelte/tests/server-side-rendering/samples/each-body-async/main.svelte
new file mode 100644
index 0000000000..86e15c4e7e
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/each-body-async/main.svelte
@@ -0,0 +1,11 @@
+{#each { length: 1 }}
+	{@const data = await Promise.resolve("each")}
+	{data}
+{/each}
+
+{#each { length: 0 }}
+	should not see this
+{:else}
+	{@const data = await Promise.resolve("else")}
+	{data}
+{/each}
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/falsy-dynamic-component/_expected.html b/packages/svelte/tests/server-side-rendering/samples/falsy-dynamic-component/_expected.html
new file mode 100644
index 0000000000..d87d3602f8
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/falsy-dynamic-component/_expected.html
@@ -0,0 +1 @@
+<h1>Test</h1>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/falsy-dynamic-component/main.svelte b/packages/svelte/tests/server-side-rendering/samples/falsy-dynamic-component/main.svelte
new file mode 100644
index 0000000000..ee6dabc9aa
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/falsy-dynamic-component/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	let Component = $state();
+</script>
+
+<h1>Test</h1>
+<Component />
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/head-component-props-id/HeadNested.svelte b/packages/svelte/tests/server-side-rendering/samples/head-component-props-id/HeadNested.svelte
new file mode 100644
index 0000000000..0784208798
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/head-component-props-id/HeadNested.svelte
@@ -0,0 +1,5 @@
+<script>
+	let id = $props.id();
+</script>
+
+<meta name="id" content={id} />
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/head-component-props-id/_config.js b/packages/svelte/tests/server-side-rendering/samples/head-component-props-id/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/head-component-props-id/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/server-side-rendering/samples/head-component-props-id/main.svelte b/packages/svelte/tests/server-side-rendering/samples/head-component-props-id/main.svelte
new file mode 100644
index 0000000000..e32b40e9ed
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/head-component-props-id/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import HeadNested from './HeadNested.svelte';
+</script>
+
+<svelte:head>
+	<HeadNested />
+</svelte:head>
+
diff --git a/packages/svelte/tests/server-side-rendering/samples/head-multiple-title/_config.js b/packages/svelte/tests/server-side-rendering/samples/head-multiple-title/_config.js
index 45054bbada..f47bee71df 100644
--- a/packages/svelte/tests/server-side-rendering/samples/head-multiple-title/_config.js
+++ b/packages/svelte/tests/server-side-rendering/samples/head-multiple-title/_config.js
@@ -1,5 +1,3 @@
 import { test } from '../../test';
 
-export default test({
-	props: { adjective: 'custom' }
-});
+export default test({});
diff --git a/packages/svelte/tests/server-side-rendering/samples/hydratable-clobbering-but-ok/_config.js b/packages/svelte/tests/server-side-rendering/samples/hydratable-clobbering-but-ok/_config.js
new file mode 100644
index 0000000000..05de37a8bd
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/hydratable-clobbering-but-ok/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['async']
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/hydratable-clobbering-but-ok/_expected.html b/packages/svelte/tests/server-side-rendering/samples/hydratable-clobbering-but-ok/_expected.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/svelte/tests/server-side-rendering/samples/hydratable-clobbering-but-ok/main.svelte b/packages/svelte/tests/server-side-rendering/samples/hydratable-clobbering-but-ok/main.svelte
new file mode 100644
index 0000000000..87a31a8359
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/hydratable-clobbering-but-ok/main.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+    import { hydratable } from 'svelte';
+
+    await hydratable('key', () => 'first');
+    await hydratable('key', () => 'first');
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/hydratable-clobbering-complicated/_config.js b/packages/svelte/tests/server-side-rendering/samples/hydratable-clobbering-complicated/_config.js
new file mode 100644
index 0000000000..404260cc66
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/hydratable-clobbering-complicated/_config.js
@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['async'],
+	error: 'hydratable_clobbering'
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/hydratable-clobbering-complicated/main.svelte b/packages/svelte/tests/server-side-rendering/samples/hydratable-clobbering-complicated/main.svelte
new file mode 100644
index 0000000000..64d30b2a7f
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/hydratable-clobbering-complicated/main.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { hydratable } from 'svelte';
+
+    const a = await hydratable('key', () => Promise.resolve({
+        nested: Promise.resolve({
+            one: Promise.resolve(1),
+        }),
+        two: Promise.resolve(2),
+    }));
+    const b = await hydratable('key', () => Promise.resolve({
+        nested: Promise.resolve({
+            one: Promise.resolve(2),
+        }),
+        two: Promise.resolve(2),
+    }));
+</script>
+
+<p>{await (await (a.nested)).one}</p>
+<p>{await a.two}</p>
+<p>{await (await (b.nested)).one}</p>
+<p>{await b.two}</p>
diff --git a/packages/svelte/tests/server-side-rendering/samples/hydratable-clobbering/_config.js b/packages/svelte/tests/server-side-rendering/samples/hydratable-clobbering/_config.js
new file mode 100644
index 0000000000..404260cc66
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/hydratable-clobbering/_config.js
@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['async'],
+	error: 'hydratable_clobbering'
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/hydratable-clobbering/main.svelte b/packages/svelte/tests/server-side-rendering/samples/hydratable-clobbering/main.svelte
new file mode 100644
index 0000000000..764c2c2415
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/hydratable-clobbering/main.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+    import { hydratable } from 'svelte';
+
+    hydratable('key', () => 'first');
+    hydratable('key', () => 'second');
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/hydratable-unserializable/_config.js b/packages/svelte/tests/server-side-rendering/samples/hydratable-unserializable/_config.js
new file mode 100644
index 0000000000..79b0c90fe6
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/hydratable-unserializable/_config.js
@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['async'],
+	error: 'hydratable_serialization_failed'
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/hydratable-unserializable/main.svelte b/packages/svelte/tests/server-side-rendering/samples/hydratable-unserializable/main.svelte
new file mode 100644
index 0000000000..e104dec12b
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/hydratable-unserializable/main.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    import { hydratable } from 'svelte';
+
+    hydratable('key', () => new Promise(() => { throw new Error('nope') }));
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_config.js b/packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_config.js
index 71edff6a68..12deae1e3e 100644
--- a/packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_config.js
+++ b/packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_config.js
@@ -1,11 +1,11 @@
 import { test } from '../../test';
 
 export default test({
+	skip: true, // TODO: This test actually works, but the error message is printed, not thrown, so we need to have a way to test for that
 	compileOptions: {
 		dev: true
 	},
 
-	errors: [
+	error:
 		'node_invalid_placement_ssr: `<p>` (packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/main.svelte:2:1) cannot be a child of `<p>` (packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/main.svelte:1:0)\n\nThis can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.'
-	]
 });
diff --git a/packages/svelte/tests/server-side-rendering/samples/option-body-escaped/_expected.html b/packages/svelte/tests/server-side-rendering/samples/option-body-escaped/_expected.html
new file mode 100644
index 0000000000..0802f01083
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/option-body-escaped/_expected.html
@@ -0,0 +1 @@
+<!--[--><select><option>a&lt;/option>&lt;script>alert("pwnd")&lt;/script>&lt;option>puppa</option><option>selected: a&lt;/option>&lt;script>alert("pwnd")&lt;/script>&lt;option>puppa</option></select><!--]-->
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/option-body-escaped/main.svelte b/packages/svelte/tests/server-side-rendering/samples/option-body-escaped/main.svelte
new file mode 100644
index 0000000000..a2f96383d1
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/option-body-escaped/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	let {
+    selectedBook = "a</option><sc" + "ript>alert(\"pwnd\")</sc" + "ript><option>puppa"
+  } = $props();
+</script>
+<select>
+  <option>{selectedBook}</option>
+  <option>selected: {selectedBook}</option>
+</select>
diff --git a/packages/svelte/tests/server-side-rendering/samples/option-scoped-class/_expected.html b/packages/svelte/tests/server-side-rendering/samples/option-scoped-class/_expected.html
new file mode 100644
index 0000000000..b30e5ff4a1
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/option-scoped-class/_expected.html
@@ -0,0 +1,2 @@
+<select><option class="opt svelte-1l69ci" value="foo" selected>foo</option></select>
+
diff --git a/packages/svelte/tests/server-side-rendering/samples/option-scoped-class/main.svelte b/packages/svelte/tests/server-side-rendering/samples/option-scoped-class/main.svelte
new file mode 100644
index 0000000000..657f1e949d
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/option-scoped-class/main.svelte
@@ -0,0 +1,10 @@
+<select value="foo">
+	<option class="opt" value="foo">foo</option>
+</select>
+
+<style>
+	option {
+		color: red;
+	}
+</style>
+
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-option-store-implicit-value/_expected.html b/packages/svelte/tests/server-side-rendering/samples/select-option-store-implicit-value/_expected.html
new file mode 100644
index 0000000000..0a0a4351f1
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/select-option-store-implicit-value/_expected.html
@@ -0,0 +1 @@
+<!--[--><select><option>Dog</option><option>cat</option></select><!--]-->
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-option-store-implicit-value/main.svelte b/packages/svelte/tests/server-side-rendering/samples/select-option-store-implicit-value/main.svelte
new file mode 100644
index 0000000000..5d133d5bf3
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/select-option-store-implicit-value/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	const value = writable('dog');
+	const label = writable('Dog');
+</script>
+
+<select bind:value={$value}>
+	<option>{$label}</option>
+	<option>cat</option>
+</select>
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-option-store-text-content/_expected.html b/packages/svelte/tests/server-side-rendering/samples/select-option-store-text-content/_expected.html
new file mode 100644
index 0000000000..daf2176928
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/select-option-store-text-content/_expected.html
@@ -0,0 +1 @@
+<!--[--><select><option disabled="" value="" selected="">placeholder</option><option value="a">A</option><option value="b">B</option></select><!--]-->
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-option-store-text-content/main.svelte b/packages/svelte/tests/server-side-rendering/samples/select-option-store-text-content/main.svelte
new file mode 100644
index 0000000000..27055caad6
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/select-option-store-text-content/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { readable } from 'svelte/store';
+
+	const t = readable((/** @type {string} */ key) => key);
+
+	let value = $state('');
+</script>
+
+<select bind:value>
+	<option disabled value="">{$t('placeholder')}</option>
+	<option value="a">A</option>
+	<option value="b">B</option>
+</select>
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-value-bind-store/_expected.html b/packages/svelte/tests/server-side-rendering/samples/select-value-bind-store/_expected.html
new file mode 100644
index 0000000000..96d1d8b233
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/select-value-bind-store/_expected.html
@@ -0,0 +1 @@
+<select><option value="">--Please choose an option--</option><option value="dog" selected>Dog</option><option value="cat">Cat</option></select>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-value-bind-store/main.svelte b/packages/svelte/tests/server-side-rendering/samples/select-value-bind-store/main.svelte
new file mode 100644
index 0000000000..cb3b554762
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/select-value-bind-store/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { writable } from 'svelte/store';
+	const value = writable('dog');
+</script>
+
+<select bind:value={$value}>
+	<option value="">--Please choose an option--</option>
+	<option value="dog">Dog</option>
+	<option value="cat">Cat</option>
+</select>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-value-component/Option.svelte b/packages/svelte/tests/server-side-rendering/samples/select-value-component/Option.svelte
new file mode 100644
index 0000000000..a17413bd8d
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/select-value-component/Option.svelte
@@ -0,0 +1,5 @@
+<script>
+	let props = $props();
+</script>
+
+<option {...props}>{@render props.children?.()}</option>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-value-component/_expected.html b/packages/svelte/tests/server-side-rendering/samples/select-value-component/_expected.html
new file mode 100644
index 0000000000..96d1d8b233
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/select-value-component/_expected.html
@@ -0,0 +1 @@
+<select><option value="">--Please choose an option--</option><option value="dog" selected>Dog</option><option value="cat">Cat</option></select>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-value-component/main.svelte b/packages/svelte/tests/server-side-rendering/samples/select-value-component/main.svelte
new file mode 100644
index 0000000000..e545833759
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/select-value-component/main.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import Option from './Option.svelte';
+</script>
+<select value="dog">
+	<Option value="">--Please choose an option--</Option>
+	<Option value="dog">Dog</Option>
+	<Option value="cat">Cat</Option>
+</select>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-value-implicit-value-complex/_expected.html b/packages/svelte/tests/server-side-rendering/samples/select-value-implicit-value-complex/_expected.html
new file mode 100644
index 0000000000..de7cba8837
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/select-value-implicit-value-complex/_expected.html
@@ -0,0 +1 @@
+<select><option>--Please choose an option--</option><option selected>dog</option><option>cat</option></select>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-value-implicit-value-complex/main.svelte b/packages/svelte/tests/server-side-rendering/samples/select-value-implicit-value-complex/main.svelte
new file mode 100644
index 0000000000..45ae9aefe0
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/select-value-implicit-value-complex/main.svelte
@@ -0,0 +1,13 @@
+<select value="dog">
+	<option>
+		{@render option("--Please choose an option--")}
+	</option>
+	<option>
+		{@render option("dog")}
+	</option>
+	<option>
+		{@render option("cat")}
+	</option>
+</select>
+
+{#snippet option(val)}{val}{/snippet}
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-value-implicit-value/_expected.html b/packages/svelte/tests/server-side-rendering/samples/select-value-implicit-value/_expected.html
new file mode 100644
index 0000000000..de7cba8837
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/select-value-implicit-value/_expected.html
@@ -0,0 +1 @@
+<select><option>--Please choose an option--</option><option selected>dog</option><option>cat</option></select>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-value-implicit-value/main.svelte b/packages/svelte/tests/server-side-rendering/samples/select-value-implicit-value/main.svelte
new file mode 100644
index 0000000000..2308a4e7a9
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/select-value-implicit-value/main.svelte
@@ -0,0 +1,5 @@
+<select value="dog">
+	<option>--Please choose an option--</option>
+	<option>dog</option>
+	<option>cat</option>
+</select>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-value-scoped-class/_expected.html b/packages/svelte/tests/server-side-rendering/samples/select-value-scoped-class/_expected.html
new file mode 100644
index 0000000000..d74fc96d9c
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/select-value-scoped-class/_expected.html
@@ -0,0 +1 @@
+<select class="foo svelte-18avu97"><option value="foo" selected>foo</option></select>
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-value-scoped-class/main.svelte b/packages/svelte/tests/server-side-rendering/samples/select-value-scoped-class/main.svelte
new file mode 100644
index 0000000000..9ad3a6b4d2
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/select-value-scoped-class/main.svelte
@@ -0,0 +1,9 @@
+<select class="foo" value="foo">
+	<option value="foo">foo</option>
+</select>
+
+<style>
+	select {
+		color: red;
+	}
+</style>
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-value/_expected.html b/packages/svelte/tests/server-side-rendering/samples/select-value/_expected.html
new file mode 100644
index 0000000000..96d1d8b233
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/select-value/_expected.html
@@ -0,0 +1 @@
+<select><option value="">--Please choose an option--</option><option value="dog" selected>Dog</option><option value="cat">Cat</option></select>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/select-value/main.svelte b/packages/svelte/tests/server-side-rendering/samples/select-value/main.svelte
new file mode 100644
index 0000000000..811d752d4e
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/select-value/main.svelte
@@ -0,0 +1,5 @@
+<select value="dog">
+	<option value="">--Please choose an option--</option>
+	<option value="dog">Dog</option>
+	<option value="cat">Cat</option>
+</select>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/spread-attributes-event-handler-xss/_expected.html b/packages/svelte/tests/server-side-rendering/samples/spread-attributes-event-handler-xss/_expected.html
new file mode 100644
index 0000000000..2a982292e5
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/spread-attributes-event-handler-xss/_expected.html
@@ -0,0 +1,3 @@
+<div id="profile-123" class="card">content</div>
+
+<img src="x" alt="photo" />
diff --git a/packages/svelte/tests/server-side-rendering/samples/spread-attributes-event-handler-xss/main.svelte b/packages/svelte/tests/server-side-rendering/samples/spread-attributes-event-handler-xss/main.svelte
new file mode 100644
index 0000000000..e47a19408e
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/spread-attributes-event-handler-xss/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	const userdata = {
+		id: 'profile-123',
+		class: 'card',
+		onclick: 'alert(1)',
+		onerror: 'alert(1)',
+		onfocus: 'alert(1)',
+		onmouseover: 'alert(1)',
+		' onload': 'alert(1)',
+		'\tonload': 'alert(1)',
+		'\u00a0onload': 'alert(1)',
+		"\t": "/onmouseover=alert(1)//",
+		"": "/onmouseover=alert(1)//"
+	};
+</script>
+
+<div {...userdata}>content</div>
+<img src="x" alt="photo" {...{ onerror: 'alert(1)', onload: 'alert(1)' }} />
diff --git a/packages/svelte/tests/server-side-rendering/test.ts b/packages/svelte/tests/server-side-rendering/test.ts
index f76c5b539f..2dcaa85708 100644
--- a/packages/svelte/tests/server-side-rendering/test.ts
+++ b/packages/svelte/tests/server-side-rendering/test.ts
@@ -9,78 +9,152 @@ import { assert } from 'vitest';
 import { render } from 'svelte/server';
 import { compile_directory, should_update_expected, try_read_file } from '../helpers.js';
 import { assert_html_equal_with_options } from '../html_equal.js';
-import { suite, type BaseTest } from '../suite.js';
+import { suite_with_variants, type BaseTest } from '../suite.js';
 import type { CompileOptions } from '#compiler';
+import { seen } from '../../src/internal/server/dev.js';
+import type { SyncRenderOutput } from '#server';
 
 interface SSRTest extends BaseTest {
+	mode?: ('sync' | 'async')[];
 	compileOptions?: Partial<CompileOptions>;
+	load_compiled?: boolean;
 	props?: Record<string, any>;
+	id_prefix?: string;
 	withoutNormalizeHtml?: boolean;
-	errors?: string[];
+	error?: string;
+	csp?: { nonce: string } | { hash: true };
+	script_hashes?: string[];
+	transformError?: (error: unknown) => unknown;
 }
 
-// eslint-disable-next-line no-console
-let console_error = console.error;
+// 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 };
+};
+
+const { test, run } = suite_with_variants<SSRTest, 'sync' | 'async', CompileOptions>(
+	['sync', 'async'],
+	(variant, config, test_name) => {
+		if (config.mode && !config.mode.includes(variant)) {
+			return 'no-test';
+		}
 
-const { test, run } = suite<SSRTest>(async (config, test_dir) => {
-	await compile_directory(test_dir, 'server', config.compileOptions);
+		if (test_name.startsWith('async') && variant === 'sync') {
+			return 'no-test';
+		}
 
-	const errors: string[] = [];
+		return false;
+	},
+	async (config, test_dir) => {
+		const compile_options = {
+			experimental: {
+				async: true,
+				...config.compileOptions?.experimental
+			},
+			...config.compileOptions
+		};
+
+		if (!config.load_compiled) {
+			await compile_directory(test_dir, 'server', compile_options);
+		}
 
-	console.error = (...args) => {
-		errors.push(...args);
-	};
+		return compile_options;
+	},
+	async (config, test_dir, variant, compile_options) => {
+		const Component = (await import(`${test_dir}/_output/server/main.svelte.js`)).default;
+		const expected_html = try_read_file(`${test_dir}/_expected.html`);
+		const is_async = variant === 'async';
 
-	const Component = (await import(`${test_dir}/_output/server/main.svelte.js`)).default;
-	const expected_html = try_read_file(`${test_dir}/_expected.html`);
-	const rendered = render(Component, { props: config.props || {} });
-	const { body, head } = rendered;
+		seen?.clear();
 
-	fs.writeFileSync(`${test_dir}/_output/rendered.html`, body);
+		let rendered;
+		let errored = false;
+		let body: SyncRenderOutput['body'];
+		let head: SyncRenderOutput['head'];
+		let hashes: SyncRenderOutput['hashes'];
+		try {
+			const render_result = render(Component, {
+				props: config.props || {},
+				idPrefix: config.id_prefix,
+				csp: config.csp,
+				transformError: config.transformError
+			});
+			rendered = is_async ? await render_result : render_result;
+			// we need to access these inside the try-catch otherwise errors in the script tag are not caught
+			({ body, head, hashes } = rendered);
+		} catch (error) {
+			errored = true;
+			if (config.error) {
+				assert.include((error as Error).message, config.error);
+				return;
+			} else {
+				throw error;
+			}
+		}
 
-	if (head) {
-		fs.writeFileSync(`${test_dir}/_output/rendered_head.html`, head);
-	}
+		if (config.error && !errored) {
+			assert.fail('Expected an error to be thrown, but rendering succeeded.');
+		}
+
+		fs.writeFileSync(
+			`${test_dir}/_output/${is_async ? 'async_rendered.html' : 'rendered.html'}`,
+			body
+		);
 
-	try {
-		assert_html_equal_with_options(body, expected_html || '', {
-			preserveComments: config.compileOptions?.preserveComments,
-			withoutNormalizeHtml: config.withoutNormalizeHtml
-		});
-	} catch (error: any) {
-		if (should_update_expected()) {
-			fs.writeFileSync(`${test_dir}/_expected.html`, body);
-			console.log(`Updated ${test_dir}/_expected.html.`);
-		} else {
-			error.message += '\n' + `${test_dir}/main.svelte`;
-			throw error;
+		if (head) {
+			fs.writeFileSync(
+				`${test_dir}/_output/${is_async ? 'async_rendered_head.html' : 'rendered_head.html'}`,
+				head
+			);
 		}
-	}
 
-	if (fs.existsSync(`${test_dir}/_expected_head.html`)) {
 		try {
-			assert_html_equal_with_options(
-				head,
-				fs.readFileSync(`${test_dir}/_expected_head.html`, 'utf-8'),
-				{}
-			);
+			assert_html_equal_with_options(body, expected_html || '', {
+				preserveComments: compile_options.preserveComments,
+				withoutNormalizeHtml: config.withoutNormalizeHtml
+			});
 		} catch (error: any) {
 			if (should_update_expected()) {
-				fs.writeFileSync(`${test_dir}/_expected_head.html`, head);
-				console.log(`Updated ${test_dir}/_expected_head.html.`);
-				error.message += '\n' + `${test_dir}/main.svelte`;
+				fs.writeFileSync(`${test_dir}/_expected.html`, body);
+				console.log(`Updated ${test_dir}/_expected.html.`);
 			} else {
+				error.message += '\n' + `${test_dir}/main.svelte`;
 				throw error;
 			}
 		}
-	}
 
-	if (errors.length > 0) {
-		assert.deepEqual(config.errors, errors);
-	}
+		if (fs.existsSync(`${test_dir}/_expected_head.html`)) {
+			try {
+				assert_html_equal_with_options(
+					head,
+					fs.readFileSync(`${test_dir}/_expected_head.html`, 'utf-8'),
+					{}
+				);
+			} catch (error: any) {
+				if (should_update_expected()) {
+					fs.writeFileSync(`${test_dir}/_expected_head.html`, head);
+					console.log(`Updated ${test_dir}/_expected_head.html.`);
+					error.message += '\n' + `${test_dir}/main.svelte`;
+				} else {
+					throw error;
+				}
+			}
+		}
 
-	console.error = console_error;
-});
+		if (config.script_hashes !== undefined) {
+			assert.deepEqual(hashes.script, config.script_hashes);
+		}
+	}
+);
 
 export { test };
 
diff --git a/packages/svelte/tests/signals/test.ts b/packages/svelte/tests/signals/test.ts
index 6796655cc8..927ce2e665 100644
--- a/packages/svelte/tests/signals/test.ts
+++ b/packages/svelte/tests/signals/test.ts
@@ -1,34 +1,39 @@
 import { describe, assert, it } from 'vitest';
 import { flushSync } from '../../src/index-client';
 import * as $ from '../../src/internal/client/runtime';
+import { push, pop } from '../../src/internal/client/context';
 import {
 	effect,
 	effect_root,
 	render_effect,
-	user_effect
+	user_effect,
+	user_pre_effect
 } from '../../src/internal/client/reactivity/effects';
-import { state, set } from '../../src/internal/client/reactivity/sources';
-import type { Derived, Value } from '../../src/internal/client/types';
+import { state, set, update, update_pre } from '../../src/internal/client/reactivity/sources';
+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
- * @param fn A function that returns a function because we first need to setup all the signals
+ * @param fn A function that returns a function because we first need to set up all the signals
  * 			 and then execute the test in order to simulate a real component
  */
 function run_test(runes: boolean, fn: (runes: boolean) => () => void) {
 	return () => {
 		// Create a component context to test runes vs legacy mode
-		$.push({}, runes);
+		push({}, runes);
 		// Create a render context so that effect validations etc don't fail
 		let execute: any;
 		const destroy = effect_root(() => {
 			execute = fn(runes);
 		});
-		$.pop();
+		pop();
 		execute();
 		destroy();
 	};
@@ -67,7 +72,7 @@ describe('signals', () => {
 		};
 	});
 
-	test('multiple effects with state and derived in it#1', () => {
+	test('multiple effects with state and derived in it #1', () => {
 		const log: string[] = [];
 
 		let count = state(0);
@@ -88,7 +93,7 @@ describe('signals', () => {
 		};
 	});
 
-	test('multiple effects with state and derived in it#2', () => {
+	test('multiple effects with state and derived in it #2', () => {
 		const log: string[] = [];
 
 		let count = state(0);
@@ -109,6 +114,45 @@ describe('signals', () => {
 		};
 	});
 
+	test('unowned deriveds are not added as reactions but trigger effects', () => {
+		var obj = state<any>(undefined);
+
+		class C1 {
+			#v = state(0);
+			get v() {
+				return $.get(this.#v);
+			}
+			set v(v: number) {
+				set(this.#v, v);
+			}
+		}
+
+		return () => {
+			let d = derived(() => $.get(obj)?.v || '-');
+
+			const log: number[] = [];
+			assert.equal($.get(d), '-');
+
+			let destroy = effect_root(() => {
+				render_effect(() => {
+					log.push($.get(d));
+				});
+			});
+
+			set(obj, new C1());
+			flushSync();
+			assert.equal($.get(d), '-');
+			$.get(obj).v = 1;
+			flushSync();
+			assert.equal($.get(d), 1);
+			assert.deepEqual(log, ['-', 1]);
+			destroy();
+			// ensure we're not leaking reactions
+			assert.equal(obj.reactions, null);
+			assert.equal(d.reactions, null);
+		};
+	});
+
 	test('derived from state', () => {
 		const log: number[] = [];
 
@@ -222,20 +266,75 @@ describe('signals', () => {
 		};
 	});
 
-	test('effects correctly handle unowned derived values that do not change', () => {
-		const log: number[] = [];
+	test('https://perf.js.hyoo.ru/#!bench=9h2as6_u0mfnn #2', () => {
+		let res: number[] = [];
 
-		let count = state(0);
-		const read = () => {
-			const x = derived(() => ({ count: $.get(count) }));
-			return $.get(x);
+		const numbers = Array.from({ length: 2 }, (_, i) => i);
+		const fib = (n: number): number => (n < 2 ? 1 : fib(n - 1) + fib(n - 2));
+		const hard = (n: number, l: string) => n + fib(16);
+
+		const A = state(0);
+		const B = state(0);
+
+		return () => {
+			const C = derived(() => ($.get(A) % 2) + ($.get(B) % 2));
+			const D = derived(() => numbers.map((i) => i + ($.get(A) % 2) - ($.get(B) % 2)));
+			const E = derived(() => hard($.get(C) + $.get(A) + $.get(D)[0]!, 'E'));
+			const F = derived(() => hard($.get(D)[0]! && $.get(B), 'F'));
+			const G = derived(() => $.get(C) + ($.get(C) || $.get(E) % 2) + $.get(D)[0]! + $.get(F));
+
+			const destroy = effect_root(() => {
+				effect(() => {
+					res.push(hard($.get(G), 'H'));
+				});
+				effect(() => {
+					res.push($.get(G));
+				});
+				effect(() => {
+					res.push(hard($.get(F), 'J'));
+				});
+			});
+
+			flushSync();
+
+			let i = 2;
+			while (--i) {
+				res.length = 0;
+				set(B, 1);
+				set(A, 1 + i * 2);
+				flushSync();
+
+				set(A, 2 + i * 2);
+				set(B, 2);
+				flushSync();
+
+				assert.equal(res.length, 4);
+				assert.deepEqual(res, [3198, 1601, 3195, 1598]);
+			}
+
+			destroy();
+			assert(A.reactions === null);
+			assert(B.reactions === null);
 		};
-		const derivedCount = derived(() => read().count);
-		user_effect(() => {
-			log.push($.get(derivedCount));
-		});
+	});
+
+	test('effects correctly handle unowned derived values that do not change', () => {
+		const log: number[] = [];
 
 		return () => {
+			let count = state(0);
+			const read = () => {
+				const x = derived(() => ({ count: $.get(count) }));
+				return $.get(x);
+			};
+			const derivedCount = derived(() => read().count);
+
+			const destroy = effect_root(() => {
+				user_effect(() => {
+					log.push($.get(derivedCount));
+				});
+			});
+
 			flushSync(() => set(count, 1));
 			// Ensure we're not leaking consumers
 			assert.deepEqual(count.reactions?.length, 1);
@@ -246,6 +345,8 @@ describe('signals', () => {
 			// Ensure we're not leaking consumers
 			assert.deepEqual(count.reactions?.length, 1);
 			assert.deepEqual(log, [0, 1, 2, 3]);
+
+			destroy();
 		};
 	});
 
@@ -255,12 +356,16 @@ describe('signals', () => {
 
 			const a = state(0);
 			const b = state(0);
-			const c = derived(() => {
-				const a_2 = derived(() => $.get(a) + '!');
-				const b_2 = derived(() => $.get(b) + '?');
-				nested.push(a_2, b_2);
+			let c: any;
+
+			const destroy = effect_root(() => {
+				c = derived(() => {
+					const a_2 = derived(() => $.get(a) + '!');
+					const b_2 = derived(() => $.get(b) + '?');
+					nested.push(a_2, b_2);
 
-				return { a: $.get(a_2), b: $.get(b_2) };
+					return { a: $.get(a_2), b: $.get(b_2) };
+				});
 			});
 
 			$.get(c);
@@ -273,11 +378,10 @@ describe('signals', () => {
 
 			$.get(c);
 
-			// Ensure we're not leaking dependencies
-			assert.deepEqual(
-				nested.slice(0, -2).map((s) => s.deps),
-				[null, null, null, null]
-			);
+			destroy();
+
+			assert.equal(a.reactions, null);
+			assert.equal(b.reactions, null);
 		};
 	});
 
@@ -296,6 +400,7 @@ describe('signals', () => {
 		const destroy = effect_root(() => {
 			user_effect(() => {
 				log.push($.get(calc));
+				$.get(calc);
 			});
 		});
 
@@ -306,7 +411,7 @@ describe('signals', () => {
 			flushSync(() => set(count, 4));
 			flushSync(() => set(count, 0));
 			// Ensure we're not leaking consumers
-			assert.deepEqual(count.reactions?.length, 2);
+			assert.deepEqual(count.reactions?.length, 1);
 			assert.deepEqual(calc.reactions?.length, 1);
 			assert.deepEqual(log, [0, 2, 'limit', 0]);
 			destroy();
@@ -337,31 +442,78 @@ describe('signals', () => {
 		};
 	});
 
-	let some_state = state({});
-	let some_deps = derived(() => {
-		return [$.get(some_state)];
-	});
-
 	test('two effects with an unowned derived that has some dependencies', () => {
 		const log: Array<Array<any>> = [];
 
-		render_effect(() => {
-			log.push($.get(some_deps));
-		});
+		return () => {
+			let some_state = state({});
+			let some_deps = derived(() => {
+				return [$.get(some_state)];
+			});
+			let destroy2: any;
 
-		render_effect(() => {
-			log.push($.get(some_deps));
-		});
+			const destroy = effect_root(() => {
+				render_effect(() => {
+					$.untrack(() => {
+						log.push($.get(some_deps));
+					});
+				});
 
-		return () => {
+				destroy2 = effect_root(() => {
+					render_effect(() => {
+						log.push($.get(some_deps));
+					});
+
+					render_effect(() => {
+						log.push($.get(some_deps));
+					});
+				});
+			});
+
+			set(some_state, {});
 			flushSync();
-			assert.deepEqual(log, [[{}], [{}]]);
+
+			assert.deepEqual(log, [[{}], [{}], [{}], [{}], [{}]]);
+
+			destroy2();
+
+			set(some_state, {});
+			flushSync();
+
+			assert.deepEqual(log, [[{}], [{}], [{}], [{}], [{}]]);
+
+			log.length = 0;
+
+			const destroy3 = effect_root(() => {
+				render_effect(() => {
+					$.untrack(() => {
+						log.push($.get(some_deps));
+					});
+					log.push($.get(some_deps));
+				});
+			});
+
+			set(some_state, {});
+			flushSync();
+
+			assert.deepEqual(log, [[{}], [{}], [{}], [{}]]);
+
+			destroy3();
+
+			assert(some_state.reactions === null);
+
+			destroy();
+
+			assert(some_state.reactions === null);
 		};
 	});
 
 	test('schedules rerun when writing to signal before reading it', (runes) => {
 		if (!runes) return () => {};
 
+		const error = console.error;
+		console.error = noop;
+
 		const value = state({ count: 0 });
 		user_effect(() => {
 			set(value, { count: 0 });
@@ -375,14 +527,44 @@ describe('signals', () => {
 			} catch (e: any) {
 				assert.include(e.message, 'effect_update_depth_exceeded');
 				errored = true;
+			} finally {
+				assert.equal(errored, true);
+				console.error = error;
 			}
-			assert.equal(errored, true);
 		};
 	});
 
-	test('schedules rerun when writing to signal before reading it', (runes) => {
+	test('schedules rerun when updating deeply nested value', (runes) => {
 		if (!runes) return () => {};
 
+		const error = console.error;
+		console.error = noop;
+
+		const value = proxy({ a: { b: { c: 0 } } });
+		user_effect(() => {
+			value.a.b.c += 1;
+		});
+
+		return () => {
+			let errored = false;
+			try {
+				flushSync();
+			} catch (e: any) {
+				assert.include(e.message, 'effect_update_depth_exceeded');
+				errored = true;
+			} finally {
+				assert.equal(errored, true);
+				console.error = error;
+			}
+		};
+	});
+
+	test.skip('schedules rerun when writing to signal before reading it', (runes) => {
+		if (!runes) return () => {};
+
+		const error = console.error;
+		console.error = noop;
+
 		const value = proxy({ arr: [] });
 		user_effect(() => {
 			value.arr = [];
@@ -396,8 +578,46 @@ describe('signals', () => {
 			} catch (e: any) {
 				assert.include(e.message, 'effect_update_depth_exceeded');
 				errored = true;
+			} finally {
+				assert.equal(errored, true);
+				console.error = error;
 			}
-			assert.equal(errored, true);
+		};
+	});
+
+	test('schedules rerun when writing to signal before reading it from derived', (runes) => {
+		if (!runes) return () => {};
+		let log: any[] = [];
+
+		const value = state(1);
+		const double = derived(() => $.get(value) * 2);
+
+		user_effect(() => {
+			set(value, 10);
+			log.push($.get(double));
+		});
+
+		return () => {
+			flushSync();
+			assert.deepEqual(log, [20]);
+		};
+	});
+
+	test('schedules rerun when writing to signal after reading it from derived', (runes) => {
+		if (!runes) return () => {};
+		let log: any[] = [];
+
+		const value = state(1);
+		const double = derived(() => $.get(value) * 2);
+
+		user_effect(() => {
+			log.push($.get(double));
+			set(value, 10);
+		});
+
+		return () => {
+			flushSync();
+			assert.deepEqual(log, [2, 20]);
 		};
 	});
 
@@ -439,6 +659,7 @@ describe('signals', () => {
 					effect(() => {
 						log.push('inner', $.get(inner));
 					});
+					return $.get(outer);
 				});
 			});
 		});
@@ -492,6 +713,103 @@ describe('signals', () => {
 		};
 	});
 
+	test('mixed nested deriveds correctly cleanup when no longer connected to graph #1', () => {
+		let a: Derived<unknown>;
+		let b: Derived<unknown>;
+		let s = state(0);
+
+		const destroy = effect_root(() => {
+			render_effect(() => {
+				a = derived(() => {
+					b = derived(() => {
+						$.get(s);
+					});
+					$.untrack(() => {
+						$.get(b);
+					});
+					$.get(s);
+				});
+				$.get(a);
+			});
+		});
+
+		return () => {
+			flushSync();
+			assert.equal(a?.deps?.length, 1);
+			assert.equal(s?.reactions?.length, 1);
+			destroy();
+			assert.equal(s?.reactions, null);
+		};
+	});
+
+	test('mixed nested deriveds correctly cleanup when no longer connected to graph #2', () => {
+		let a: Derived<unknown>;
+		let b: Derived<unknown>;
+		let s = state(0);
+
+		const destroy = effect_root(() => {
+			render_effect(() => {
+				a = derived(() => {
+					b = derived(() => {
+						$.get(s);
+					});
+					effect_root(() => {
+						$.get(b);
+					});
+					$.get(s);
+				});
+				$.get(a);
+			});
+		});
+
+		return () => {
+			flushSync();
+			assert.equal(a?.deps?.length, 1);
+			assert.equal(s?.reactions?.length, 1);
+			destroy();
+			assert.equal(s?.reactions, null);
+		};
+	});
+
+	test('mixed nested deriveds correctly cleanup when no longer connected to graph #3', () => {
+		let a: Derived<unknown>;
+		let b: Derived<unknown>;
+		let s = state(0);
+		let logs: any[] = [];
+
+		const destroy = effect_root(() => {
+			render_effect(() => {
+				a = derived(() => {
+					b = derived(() => {
+						return $.get(s);
+					});
+					effect_root(() => {
+						$.get(b);
+					});
+					render_effect(() => {
+						logs.push($.get(b));
+					});
+					$.get(s);
+				});
+				$.get(a);
+			});
+		});
+
+		return () => {
+			flushSync();
+			assert.equal(a?.deps?.length, 1);
+			assert.equal(s?.reactions?.length, 2);
+
+			set(s, 1);
+			flushSync();
+
+			assert.deepEqual(logs, [0, 1]);
+
+			destroy();
+			assert.equal(s?.reactions, null);
+		};
+	});
+
 	test('deriveds update upon reconnection #1', () => {
 		let a = state(false);
 		let b = state(false);
@@ -678,6 +996,28 @@ describe('signals', () => {
 		};
 	});
 
+	test('unowned deriveds dependencies are correctly de-duped', () => {
+		return () => {
+			let a = state(0);
+			let b = state(true);
+			let c = derived(() => $.get(a));
+			let d = derived(() => ($.get(b) ? 1 : $.get(a) + $.get(c) + $.get(a)));
+
+			$.get(d);
+
+			assert.equal(d.deps?.length, 1);
+
+			$.get(d);
+
+			set(a, 1);
+			set(b, false);
+
+			$.get(d);
+
+			assert.equal(d.deps?.length, 3);
+		};
+	});
+
 	test('unowned deriveds correctly update', () => {
 		return () => {
 			const arr1 = proxy<{ a: number }[]>([]);
@@ -695,14 +1035,119 @@ describe('signals', () => {
 		};
 	});
 
-	test('deriveds cannot depend on state they own', () => {
+	test('deriveds do not depend on state they own', () => {
 		return () => {
+			let s;
+
 			const d = derived(() => {
-				const s = state(0);
+				s = state(0);
 				return $.get(s);
 			});
 
-			assert.throws(() => $.get(d), 'state_unsafe_local_read');
+			assert.equal($.get(d), 0);
+
+			set(s!, 1);
+			assert.equal($.get(d), 0);
+		};
+	});
+
+	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(() => {
+			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_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_pre_effect(() => {
+				logs.push($.get(raw));
+			});
+
+			user_pre_effect(() => {
+				logs.push(proxied.current);
+			});
+
+			// Important so that the updating effect is not running
+			// together with the reading effects
+			flushSync();
+
+			user_pre_effect(() => {
+				$.untrack(() => {
+					set(raw, $.get(raw) + 1);
+					proxied.current += 1;
+				});
+			});
+		});
+
+		return () => {
+			flushSync();
+			assert.deepEqual(logs, [0, 0, 1, 1]);
 		};
 	});
 
@@ -740,29 +1185,119 @@ describe('signals', () => {
 		};
 	});
 
-	test('nested deriveds clean up the relationships when used with untrack', () => {
+	test('deriveds containing effects work correctly', () => {
 		return () => {
 			let a = render_effect(() => {});
+			let b = state(0);
+			let c;
+			let effects: Effect[] = [];
 
 			const destroy = effect_root(() => {
 				a = render_effect(() => {
-					$.untrack(() => {
-						const b = derived(() => {
-							const c = derived(() => {});
-							$.untrack(() => {
-								$.get(c);
-							});
+					c = derived(() => {
+						effects.push(
+							effect(() => {
+								$.get(b);
+							})
+						);
+						$.get(b);
+					});
+					$.get(c);
+				});
+			});
+
+			assert.equal(c!.effects?.length, 1);
+			assert.equal(a.first, a.last);
+
+			set(b, 1);
+
+			flushSync();
+
+			assert.equal(c!.effects?.length, 1);
+			assert.equal(a.first, a.last);
+
+			destroy();
+
+			assert.equal(a.first, null);
+
+			assert.equal(effects.length, 2);
+			assert.equal((effects[0].f & DESTROYED) !== 0, true);
+			assert.equal((effects[1].f & DESTROYED) !== 0, true);
+		};
+	});
+
+	test("deriveds set after they are DIRTY doesn't get updated on get", () => {
+		return () => {
+			const a = state(0);
+			const b = derived(() => $.get(a));
+
+			set(b, 1);
+			assert.equal($.get(b), 1);
+
+			set(a, 2);
+			assert.equal($.get(b), 2);
+			set(b, 3);
+
+			assert.equal($.get(b), 3);
+		};
+	});
+
+	test("unowned deriveds set after they are DIRTY doesn't get updated on get", () => {
+		return () => {
+			const a = state(0);
+			const b = derived(() => $.get(a));
+			const c = derived(() => $.get(b));
+
+			set(b, 1);
+			assert.equal($.get(c), 1);
+
+			set(a, 2);
+
+			assert.equal($.get(b), 2);
+			assert.equal($.get(c), 2);
+		};
+	});
+
+	test('deriveds containing effects work correctly when used with untrack', () => {
+		return () => {
+			let a = render_effect(() => {});
+			let b = state(0);
+			let c;
+			let effects: Effect[] = [];
+
+			const destroy = effect_root(() => {
+				a = render_effect(() => {
+					c = derived(() => {
+						$.untrack(() => {
+							effects.push(
+								effect(() => {
+									$.get(b);
+								})
+							);
 						});
 						$.get(b);
 					});
+					$.get(c);
 				});
 			});
 
-			assert.deepEqual(a.deriveds?.length, 1);
+			assert.equal(c!.effects?.length, 1);
+			assert.equal(a.first, a.last);
+
+			set(b, 1);
+
+			flushSync();
+
+			assert.equal(c!.effects?.length, 1);
+			assert.equal(a.first, a.last);
 
 			destroy();
 
-			assert.deepEqual(a.deriveds, null);
+			assert.equal(a.first, null);
+
+			assert.equal(effects.length, 2);
+			assert.equal((effects[0].f & DESTROYED) !== 0, true);
+			assert.equal((effects[1].f & DESTROYED) !== 0, true);
 		};
 	});
 
@@ -770,15 +1305,202 @@ describe('signals', () => {
 		return () => {
 			const count = state(0n);
 
-			assert.doesNotThrow(() => $.update(count));
+			assert.doesNotThrow(() => update(count));
 			assert.equal($.get(count), 1n);
-			assert.doesNotThrow(() => $.update(count, -1));
+			assert.doesNotThrow(() => update(count, -1));
 			assert.equal($.get(count), 0n);
 
-			assert.doesNotThrow(() => $.update_pre(count));
+			assert.doesNotThrow(() => update_pre(count));
 			assert.equal($.get(count), 1n);
-			assert.doesNotThrow(() => $.update_pre(count, -1));
+			assert.doesNotThrow(() => update_pre(count, -1));
 			assert.equal($.get(count), 0n);
 		};
 	});
+
+	test('unowned deriveds correctly re-attach to their source', () => {
+		const log: any[] = [];
+
+		return () => {
+			const a = state(0);
+			const b = state(0);
+			const c = derived(() => {
+				$.get(a);
+				return $.get(b);
+			});
+
+			$.get(c);
+
+			set(a, 1);
+
+			const destroy = effect_root(() => {
+				render_effect(() => {
+					log.push($.get(c));
+				});
+			});
+
+			assert.deepEqual(log, [0]);
+
+			set(b, 1);
+
+			flushSync();
+
+			assert.deepEqual(log, [0, 1]);
+
+			destroy();
+		};
+	});
+
+	test('unowned deriveds correctly update', () => {
+		const log: any[] = [];
+
+		return () => {
+			const a = state(0);
+			const b = state(0);
+			const c = derived(() => {
+				return $.get(a);
+			});
+			const d = derived(() => {
+				return $.get(b);
+			});
+
+			const destroy = effect_root(() => {
+				const e = derived(() => {
+					return $.get(c) === 1 && $.get(d) === 1;
+				});
+				render_effect(() => {
+					log.push($.get(e));
+				});
+			});
+
+			assert.deepEqual(log, [false]);
+
+			set(a, 1);
+			set(b, 1);
+
+			flushSync();
+
+			assert.deepEqual(log, [false, true]);
+
+			set(b, 9);
+
+			flushSync();
+
+			assert.deepEqual(log, [false, true, false]);
+
+			destroy();
+		};
+	});
+
+	test('derived whose original parent effect has been destroyed no longer updates', () => {
+		return () => {
+			const warn = console.warn;
+			const warnings: string[] = [];
+			console.warn = (...args) => warnings.push(...args);
+
+			let count: Source<number>;
+			let double: Derived<number>;
+			const destroy = effect_root(() => {
+				render_effect(() => {
+					count = state(0);
+					double = derived(() => $.get(count) * 2);
+				});
+			});
+
+			flushSync();
+			assert.equal($.get(double!), 0);
+			flushSync();
+
+			set(count!, 1);
+			flushSync();
+			assert.equal($.get(double!), 2);
+
+			destroy();
+
+			assert.equal($.get(double!), 2);
+			assert.equal(warnings.length, 0); // value is unchanged, no warning yet
+
+			set(count!, 2);
+			flushSync();
+			assert.equal($.get(double!), 2);
+			assert.ok(warnings.some((str) => str.includes('derived_inert')));
+
+			console.warn = warn;
+		};
+	});
+
+	test('derived when connected should add new dependency to its reaction even when read outside effect', () => {
+		let count_a = state(0);
+		let count_b = state(0);
+		let which = state(true);
+		let double = derived(() => ($.get(which) ? $.get(count_a) * 2 : $.get(count_b) * 2));
+
+		render_effect(() => {
+			$.get(double);
+		});
+
+		return () => {
+			flushSync();
+			assert.equal($.get(double!), 0);
+
+			set(which, false);
+			$.get(double); // read before render effect has a chance to rerun
+			flushSync();
+			assert.equal($.get(double!), 0);
+
+			set(count_b, 1);
+			flushSync();
+			assert.equal($.get(double!), 2);
+		};
+	});
+
+	test('$effect.root inside deriveds stay alive independently', () => {
+		const log: any[] = [];
+		const c = state(0);
+		const cleanup: any[] = [];
+		const inner_states: any[] = [];
+
+		const d = derived(() => {
+			const destroy = effect_root(() => {
+				const x = state(0);
+				inner_states.push(x);
+
+				effect(() => {
+					log.push('inner ' + $.get(x));
+					return () => {
+						log.push('inner destroyed');
+					};
+				});
+			});
+
+			cleanup.push(destroy);
+
+			return $.get(c);
+		});
+
+		return () => {
+			log.push($.get(d));
+			flushSync();
+
+			assert.deepEqual(log, [0, 'inner 0']);
+			log.length = 0;
+
+			set(inner_states[0], 1);
+			flushSync();
+
+			assert.deepEqual(log, ['inner destroyed', 'inner 1']);
+			log.length = 0;
+
+			set(c, 1);
+			log.push($.get(d));
+			flushSync();
+
+			assert.deepEqual(log, [1, 'inner 0']);
+			log.length = 0;
+
+			cleanup.forEach((fn) => fn());
+			flushSync();
+
+			assert.deepEqual(log, ['inner destroyed', 'inner destroyed']);
+		};
+	});
 });
diff --git a/packages/svelte/tests/snapshot/samples/async-const/_config.js b/packages/svelte/tests/snapshot/samples/async-const/_config.js
new file mode 100644
index 0000000000..2e30bbeb16
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-const/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({ compileOptions: { experimental: { async: true } } });
diff --git a/packages/svelte/tests/snapshot/samples/async-const/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-const/_expected/client/index.svelte.js
new file mode 100644
index 0000000000..5c1d27ae54
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-const/_expected/client/index.svelte.js
@@ -0,0 +1,35 @@
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/async';
+import * as $ from 'svelte/internal/client';
+
+var root = $.from_html(`<p> </p>`);
+
+export default function Async_const($$anchor) {
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+
+	{
+		var consequent = ($$anchor) => {
+			let a;
+			let b;
+
+			var promises = $.run([
+				async () => a = (await $.save($.async_derived(async () => (await $.save(1))())))(),
+				() => b = $.derived(() => $.get(a) + 1)
+			]);
+
+			var p = root();
+			var text = $.child(p, true);
+
+			$.reset(p);
+			$.template_effect(() => $.set_text(text, $.get(b)), void 0, void 0, [promises[1]]);
+			$.append($$anchor, p);
+		};
+
+		$.if(node, ($$render) => {
+			if (true) $$render(consequent);
+		});
+	}
+
+	$.append($$anchor, fragment);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/async-const/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-const/_expected/server/index.svelte.js
new file mode 100644
index 0000000000..c0cb999e85
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-const/_expected/server/index.svelte.js
@@ -0,0 +1,20 @@
+import 'svelte/internal/flags/async';
+import * as $ from 'svelte/internal/server';
+
+export default function Async_const($$renderer) {
+	if (true) {
+		$$renderer.push('<!--[0-->');
+
+		let a;
+		let b;
+		var promises = $$renderer.run([async () => a = (await $.save(1))(), () => b = a + 1]);
+
+		$$renderer.push(`<p>`);
+		$$renderer.async([promises[1]], ($$renderer) => $$renderer.push(() => $.escape(b)));
+		$$renderer.push(`</p>`);
+	} else {
+		$$renderer.push('<!--[-1-->');
+	}
+
+	$$renderer.push(`<!--]-->`);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/async-const/index.svelte b/packages/svelte/tests/snapshot/samples/async-const/index.svelte
new file mode 100644
index 0000000000..cf1bb40d88
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-const/index.svelte
@@ -0,0 +1,6 @@
+{#if true}
+	{@const a = await 1}
+	{@const b = a + 1}
+
+	<p>{b}</p>
+{/if}
diff --git a/packages/svelte/tests/snapshot/samples/async-each-fallback-hoisting/_config.js b/packages/svelte/tests/snapshot/samples/async-each-fallback-hoisting/_config.js
new file mode 100644
index 0000000000..2e30bbeb16
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-each-fallback-hoisting/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({ compileOptions: { experimental: { async: true } } });
diff --git a/packages/svelte/tests/snapshot/samples/async-each-fallback-hoisting/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-each-fallback-hoisting/_expected/client/index.svelte.js
new file mode 100644
index 0000000000..6f1c40988d
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-each-fallback-hoisting/_expected/client/index.svelte.js
@@ -0,0 +1,35 @@
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/async';
+import * as $ from 'svelte/internal/client';
+
+export default function Async_each_fallback_hoisting($$anchor) {
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+
+	$.async(node, [], [() => Promise.resolve([])], (node, $$collection) => {
+		$.each(
+			node,
+			16,
+			() => $.get($$collection),
+			$.index,
+			($$anchor, item) => {
+				$.next();
+
+				var text = $.text();
+
+				$.template_effect(($0) => $.set_text(text, $0), void 0, [() => Promise.reject('This should never be reached')]);
+				$.append($$anchor, text);
+			},
+			($$anchor) => {
+				$.next();
+
+				var text_1 = $.text();
+
+				$.template_effect(($0) => $.set_text(text_1, $0), void 0, [() => Promise.resolve(4)]);
+				$.append($$anchor, text_1);
+			}
+		);
+	});
+
+	$.append($$anchor, fragment);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/async-each-fallback-hoisting/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-each-fallback-hoisting/_expected/server/index.svelte.js
new file mode 100644
index 0000000000..b331875d04
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-each-fallback-hoisting/_expected/server/index.svelte.js
@@ -0,0 +1,25 @@
+import 'svelte/internal/flags/async';
+import * as $ from 'svelte/internal/server';
+
+export default function Async_each_fallback_hoisting($$renderer) {
+	$$renderer.child_block(async ($$renderer) => {
+		const each_array = $.ensure_array_like((await $.save(Promise.resolve([])))());
+
+		if (each_array.length !== 0) {
+			$$renderer.push('<!--[-->');
+
+			for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
+				let item = each_array[$$index];
+
+				$$renderer.push(`<!---->`);
+				$$renderer.push(async () => $.escape(await Promise.reject('This should never be reached')));
+			}
+		} else {
+			$$renderer.push('<!--[!-->');
+			$$renderer.push(`<!---->`);
+			$$renderer.push(async () => $.escape(await Promise.resolve(4)));
+		}
+	});
+
+	$$renderer.push(`<!--]-->`);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/async-each-fallback-hoisting/index.svelte b/packages/svelte/tests/snapshot/samples/async-each-fallback-hoisting/index.svelte
new file mode 100644
index 0000000000..e580345a2e
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-each-fallback-hoisting/index.svelte
@@ -0,0 +1,5 @@
+{#each await Promise.resolve([]) as item}
+  {await Promise.reject('This should never be reached')}
+{:else}
+  {await Promise.resolve(4)}
+{/each}
diff --git a/packages/svelte/tests/snapshot/samples/async-each-hoisting/_config.js b/packages/svelte/tests/snapshot/samples/async-each-hoisting/_config.js
new file mode 100644
index 0000000000..2e30bbeb16
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-each-hoisting/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({ compileOptions: { experimental: { async: true } } });
diff --git a/packages/svelte/tests/snapshot/samples/async-each-hoisting/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-each-hoisting/_expected/client/index.svelte.js
new file mode 100644
index 0000000000..4045ad4bf4
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-each-hoisting/_expected/client/index.svelte.js
@@ -0,0 +1,24 @@
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/async';
+import * as $ from 'svelte/internal/client';
+
+export default function Async_each_hoisting($$anchor) {
+	const first = Promise.resolve(1);
+	const second = Promise.resolve(2);
+	const third = Promise.resolve(3);
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+
+	$.async(node, [], [() => Promise.resolve([first, second, third])], (node, $$collection) => {
+		$.each(node, 17, () => $.get($$collection), $.index, ($$anchor, item) => {
+			$.next();
+
+			var text = $.text();
+
+			$.template_effect(($0) => $.set_text(text, $0), void 0, [() => $.get(item)]);
+			$.append($$anchor, text);
+		});
+	});
+
+	$.append($$anchor, fragment);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/async-each-hoisting/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-each-hoisting/_expected/server/index.svelte.js
new file mode 100644
index 0000000000..86948b4a3a
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-each-hoisting/_expected/server/index.svelte.js
@@ -0,0 +1,23 @@
+import 'svelte/internal/flags/async';
+import * as $ from 'svelte/internal/server';
+
+export default function Async_each_hoisting($$renderer) {
+	const first = Promise.resolve(1);
+	const second = Promise.resolve(2);
+	const third = Promise.resolve(3);
+
+	$$renderer.push(`<!--[-->`);
+
+	$$renderer.child_block(async ($$renderer) => {
+		const each_array = $.ensure_array_like((await $.save(Promise.resolve([first, second, third])))());
+
+		for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
+			let item = each_array[$$index];
+
+			$$renderer.push(`<!---->`);
+			$$renderer.push(async () => $.escape(await item));
+		}
+	});
+
+	$$renderer.push(`<!--]-->`);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/async-each-hoisting/index.svelte b/packages/svelte/tests/snapshot/samples/async-each-hoisting/index.svelte
new file mode 100644
index 0000000000..4b6bf7eadc
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-each-hoisting/index.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  const first = Promise.resolve(1);
+  const second = Promise.resolve(2);
+  const third = Promise.resolve(3);
+</script>
+
+{#each await Promise.resolve([first, second, third]) as item}
+  {await item}
+{/each}
diff --git a/packages/svelte/tests/snapshot/samples/async-if-alternate-hoisting/_config.js b/packages/svelte/tests/snapshot/samples/async-if-alternate-hoisting/_config.js
new file mode 100644
index 0000000000..2e30bbeb16
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-if-alternate-hoisting/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({ compileOptions: { experimental: { async: true } } });
diff --git a/packages/svelte/tests/snapshot/samples/async-if-alternate-hoisting/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-if-alternate-hoisting/_expected/client/index.svelte.js
new file mode 100644
index 0000000000..52d92ba531
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-if-alternate-hoisting/_expected/client/index.svelte.js
@@ -0,0 +1,30 @@
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/async';
+import * as $ from 'svelte/internal/client';
+
+export default function Async_if_alternate_hoisting($$anchor) {
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+
+	$.async(node, [], [() => Promise.resolve(false)], (node, $$condition) => {
+		var consequent = ($$anchor) => {
+			var text = $.text();
+
+			$.template_effect(($0) => $.set_text(text, $0), void 0, [() => Promise.reject('no no no')]);
+			$.append($$anchor, text);
+		};
+
+		var alternate = ($$anchor) => {
+			var text_1 = $.text();
+
+			$.template_effect(($0) => $.set_text(text_1, $0), void 0, [() => Promise.resolve('yes yes yes')]);
+			$.append($$anchor, text_1);
+		};
+
+		$.if(node, ($$render) => {
+			if ($.get($$condition)) $$render(consequent); else $$render(alternate, -1);
+		});
+	});
+
+	$.append($$anchor, fragment);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/async-if-alternate-hoisting/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-if-alternate-hoisting/_expected/server/index.svelte.js
new file mode 100644
index 0000000000..f13c1b6a25
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-if-alternate-hoisting/_expected/server/index.svelte.js
@@ -0,0 +1,16 @@
+import 'svelte/internal/flags/async';
+import * as $ from 'svelte/internal/server';
+
+export default function Async_if_alternate_hoisting($$renderer) {
+	$$renderer.child_block(async ($$renderer) => {
+		if ((await $.save(Promise.resolve(false)))()) {
+			$$renderer.push('<!--[0-->');
+			$$renderer.push(async () => $.escape(await Promise.reject('no no no')));
+		} else {
+			$$renderer.push('<!--[-1-->');
+			$$renderer.push(async () => $.escape(await Promise.resolve('yes yes yes')));
+		}
+	});
+
+	$$renderer.push(`<!--]-->`);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/async-if-alternate-hoisting/index.svelte b/packages/svelte/tests/snapshot/samples/async-if-alternate-hoisting/index.svelte
new file mode 100644
index 0000000000..a97f32f034
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-if-alternate-hoisting/index.svelte
@@ -0,0 +1,5 @@
+{#if await Promise.resolve(false)}
+  {await Promise.reject('no no no')}
+{:else}
+  {await Promise.resolve('yes yes yes')}
+{/if}
diff --git a/packages/svelte/tests/snapshot/samples/async-if-chain/_config.js b/packages/svelte/tests/snapshot/samples/async-if-chain/_config.js
new file mode 100644
index 0000000000..2e30bbeb16
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-if-chain/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({ compileOptions: { experimental: { async: true } } });
diff --git a/packages/svelte/tests/snapshot/samples/async-if-chain/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-if-chain/_expected/client/index.svelte.js
new file mode 100644
index 0000000000..8d21c2ceef
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-if-chain/_expected/client/index.svelte.js
@@ -0,0 +1,201 @@
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/async';
+import * as $ from 'svelte/internal/client';
+
+var root = $.from_html(`<!> <!> <!> <!> <!>`, 1);
+
+export default function Async_if_chain($$anchor) {
+	function complex1() {
+		return 1;
+	}
+
+	let foo = true;
+	var blocking;
+	var $$promises = $.run([async () => blocking = await $.async_derived(() => foo)]);
+	var fragment = root();
+	var node = $.first_child(fragment);
+
+	$.async(node, [$$promises[0]], void 0, (node) => {
+		var consequent = ($$anchor) => {
+			var text = $.text('foo');
+
+			$.append($$anchor, text);
+		};
+
+		var consequent_1 = ($$anchor) => {
+			var text_1 = $.text('bar');
+
+			$.append($$anchor, text_1);
+		};
+
+		var alternate = ($$anchor) => {
+			var text_2 = $.text('else');
+
+			$.append($$anchor, text_2);
+		};
+
+		$.if(node, ($$render) => {
+			if (foo) $$render(consequent); else if (bar) $$render(consequent_1, 1); else $$render(alternate, -1);
+		});
+	});
+
+	var node_1 = $.sibling(node, 2);
+
+	$.async(node_1, [$$promises[0]], [() => foo], (node_1, $$condition) => {
+		var consequent_2 = ($$anchor) => {
+			var text_3 = $.text('foo');
+
+			$.append($$anchor, text_3);
+		};
+
+		var consequent_3 = ($$anchor) => {
+			var text_4 = $.text('bar');
+
+			$.append($$anchor, text_4);
+		};
+
+		var alternate_2 = ($$anchor) => {
+			var fragment_1 = $.comment();
+			var node_2 = $.first_child(fragment_1);
+
+			$.async(node_2, [], [() => baz], (node_2, $$condition) => {
+				var consequent_4 = ($$anchor) => {
+					var text_5 = $.text('baz');
+
+					$.append($$anchor, text_5);
+				};
+
+				var alternate_1 = ($$anchor) => {
+					var text_6 = $.text('else');
+
+					$.append($$anchor, text_6);
+				};
+
+				$.if(
+					node_2,
+					($$render) => {
+						if ($.get($$condition)) $$render(consequent_4); else $$render(alternate_1, -1);
+					},
+					true
+				);
+			});
+
+			$.append($$anchor, fragment_1);
+		};
+
+		$.if(node_1, ($$render) => {
+			if ($.get($$condition)) $$render(consequent_2); else if (bar) $$render(consequent_3, 1); else $$render(alternate_2, -1);
+		});
+	});
+
+	var node_3 = $.sibling(node_1, 2);
+
+	$.async(node_3, [$$promises[0]], [async () => (await $.save(foo))() > 10], (node_3, $$condition) => {
+		var consequent_5 = ($$anchor) => {
+			var text_7 = $.text('foo');
+
+			$.append($$anchor, text_7);
+		};
+
+		var consequent_6 = ($$anchor) => {
+			var text_8 = $.text('bar');
+
+			$.append($$anchor, text_8);
+		};
+
+		var alternate_4 = ($$anchor) => {
+			var fragment_2 = $.comment();
+			var node_4 = $.first_child(fragment_2);
+
+			$.async(node_4, [$$promises[0]], [async () => (await $.save(foo))() > 5], (node_4, $$condition) => {
+				var consequent_7 = ($$anchor) => {
+					var text_9 = $.text('baz');
+
+					$.append($$anchor, text_9);
+				};
+
+				var alternate_3 = ($$anchor) => {
+					var text_10 = $.text('else');
+
+					$.append($$anchor, text_10);
+				};
+
+				$.if(
+					node_4,
+					($$render) => {
+						if ($.get($$condition)) $$render(consequent_7); else $$render(alternate_3, -1);
+					},
+					true
+				);
+			});
+
+			$.append($$anchor, fragment_2);
+		};
+
+		$.if(node_3, ($$render) => {
+			if ($.get($$condition)) $$render(consequent_5); else if (bar) $$render(consequent_6, 1); else $$render(alternate_4, -1);
+		});
+	});
+
+	var node_5 = $.sibling(node_3, 2);
+
+	{
+		var consequent_8 = ($$anchor) => {
+			var text_11 = $.text('foo');
+
+			$.append($$anchor, text_11);
+		};
+
+		var consequent_9 = ($$anchor) => {
+			var text_12 = $.text('bar');
+
+			$.append($$anchor, text_12);
+		};
+
+		var consequent_10 = ($$anchor) => {
+			var text_13 = $.text('baz');
+
+			$.append($$anchor, text_13);
+		};
+
+		var d = $.derived(() => complex1() * complex2 > 100);
+
+		var alternate_5 = ($$anchor) => {
+			var text_14 = $.text('else');
+
+			$.append($$anchor, text_14);
+		};
+
+		$.if(node_5, ($$render) => {
+			if (simple1) $$render(consequent_8); else if (simple2 > 10) $$render(consequent_9, 1); else if ($.get(d)) $$render(consequent_10, 2); else $$render(alternate_5, -1);
+		});
+	}
+
+	var node_6 = $.sibling(node_5, 2);
+
+	$.async(node_6, [$$promises[0]], void 0, (node_6) => {
+		var consequent_11 = ($$anchor) => {
+			var text_15 = $.text('foo');
+
+			$.append($$anchor, text_15);
+		};
+
+		var consequent_12 = ($$anchor) => {
+			var text_16 = $.text('bar');
+
+			$.append($$anchor, text_16);
+		};
+
+		var alternate_6 = ($$anchor) => {
+			var text_17 = $.text('else');
+
+			$.append($$anchor, text_17);
+		};
+
+		$.if(node_6, ($$render) => {
+			if ($.get(blocking) > 10) $$render(consequent_11); else if ($.get(blocking) > 5) $$render(consequent_12, 1); else $$render(alternate_6, -1);
+		});
+	});
+
+	$.append($$anchor, fragment);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/async-if-chain/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-if-chain/_expected/server/index.svelte.js
new file mode 100644
index 0000000000..3fc25288ad
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-if-chain/_expected/server/index.svelte.js
@@ -0,0 +1,110 @@
+import 'svelte/internal/flags/async';
+import * as $ from 'svelte/internal/server';
+
+export default function Async_if_chain($$renderer) {
+	function complex1() {
+		return 1;
+	}
+
+	let foo = true;
+	var blocking;
+	var $$promises = $$renderer.run([async () => blocking = await $.async_derived(() => foo)]);
+
+	$$renderer.async_block([$$promises[0]], ($$renderer) => {
+		if (foo) {
+			$$renderer.push('<!--[0-->');
+			$$renderer.push(`foo`);
+		} else if (bar) {
+			$$renderer.push('<!--[1-->');
+			$$renderer.push(`bar`);
+		} else {
+			$$renderer.push('<!--[-1-->');
+			$$renderer.push(`else`);
+		}
+	});
+
+	$$renderer.push(`<!--]--> `);
+
+	$$renderer.async_block([$$promises[0]], async ($$renderer) => {
+		if ((await $.save(foo))()) {
+			$$renderer.push('<!--[0-->');
+			$$renderer.push(`foo`);
+		} else if (bar) {
+			$$renderer.push('<!--[1-->');
+			$$renderer.push(`bar`);
+		} else {
+			$$renderer.push('<!--[-1-->');
+
+			$$renderer.child_block(async ($$renderer) => {
+				if ((await $.save(baz))()) {
+					$$renderer.push('<!--[0-->');
+					$$renderer.push(`baz`);
+				} else {
+					$$renderer.push('<!--[-1-->');
+					$$renderer.push(`else`);
+				}
+			});
+
+			$$renderer.push(`<!--]-->`);
+		}
+	});
+
+	$$renderer.push(`<!--]--> `);
+
+	$$renderer.async_block([$$promises[0]], async ($$renderer) => {
+		if ((await $.save(foo))() > 10) {
+			$$renderer.push('<!--[0-->');
+			$$renderer.push(`foo`);
+		} else if (bar) {
+			$$renderer.push('<!--[1-->');
+			$$renderer.push(`bar`);
+		} else {
+			$$renderer.push('<!--[-1-->');
+
+			$$renderer.async_block([$$promises[0]], async ($$renderer) => {
+				if ((await $.save(foo))() > 5) {
+					$$renderer.push('<!--[0-->');
+					$$renderer.push(`baz`);
+				} else {
+					$$renderer.push('<!--[-1-->');
+					$$renderer.push(`else`);
+				}
+			});
+
+			$$renderer.push(`<!--]-->`);
+		}
+	});
+
+	$$renderer.push(`<!--]--> `);
+
+	if (simple1) {
+		$$renderer.push('<!--[0-->');
+		$$renderer.push(`foo`);
+	} else if (simple2 > 10) {
+		$$renderer.push('<!--[1-->');
+		$$renderer.push(`bar`);
+	} else if (complex1() * complex2 > 100) {
+		$$renderer.push('<!--[2-->');
+		$$renderer.push(`baz`);
+	} else {
+		$$renderer.push('<!--[-1-->');
+		$$renderer.push(`else`);
+	}
+
+	$$renderer.push(`<!--]--> `);
+
+	$$renderer.async_block([$$promises[0]], ($$renderer) => {
+		if (blocking() > 10) {
+			$$renderer.push('<!--[0-->');
+			$$renderer.push(`foo`);
+		} else if (blocking() > 5) {
+			$$renderer.push('<!--[1-->');
+			$$renderer.push(`bar`);
+		} else {
+			$$renderer.push('<!--[-1-->');
+			$$renderer.push(`else`);
+		}
+	});
+
+	$$renderer.push(`<!--]-->`);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/async-if-chain/index.svelte b/packages/svelte/tests/snapshot/samples/async-if-chain/index.svelte
new file mode 100644
index 0000000000..1f216af0b0
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-if-chain/index.svelte
@@ -0,0 +1,59 @@
+<script>
+  function complex1() {
+    return 1;
+  }
+
+  let foo = $state(true);
+  let blocking = $derived(await foo);
+</script>
+
+<!-- simple chain - should have no nested $.if() -->
+{#if foo}
+  foo
+{:else if bar}
+  bar
+{:else}
+  else
+{/if}
+
+<!-- simple chain with await expressions - should have $.if() at each await expression -->
+{#if await foo}
+  foo
+{:else if bar}
+  bar
+{:else if await baz}
+  baz
+{:else}
+  else
+{/if}
+
+<!-- simple chain with await expressions #2 - should have $.if() at each await expression (ideally we can detect that await foo is unnecessary to await multiple times and this is one $.if()) -->
+{#if await foo > 10}
+  foo
+{:else if bar}
+  bar
+{:else if await foo > 5}
+  baz
+{:else}
+  else
+{/if}
+
+<!-- simple chain with some expressions that cause a $.derived - should be one $.if() -->
+{#if simple1}
+  foo
+{:else if simple2 > 10}
+  bar
+{:else if complex1() * complex2 > 100}
+  baz
+{:else}
+  else
+{/if}
+
+<!-- simple chain with blocking expressions - should be one $.if() -->
+{#if blocking > 10}
+  foo
+{:else if blocking > 5}
+  bar
+{:else}
+  else
+{/if}
diff --git a/packages/svelte/tests/snapshot/samples/async-if-hoisting/_config.js b/packages/svelte/tests/snapshot/samples/async-if-hoisting/_config.js
new file mode 100644
index 0000000000..2e30bbeb16
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-if-hoisting/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({ compileOptions: { experimental: { async: true } } });
diff --git a/packages/svelte/tests/snapshot/samples/async-if-hoisting/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-if-hoisting/_expected/client/index.svelte.js
new file mode 100644
index 0000000000..e65609dca1
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-if-hoisting/_expected/client/index.svelte.js
@@ -0,0 +1,30 @@
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/async';
+import * as $ from 'svelte/internal/client';
+
+export default function Async_if_hoisting($$anchor) {
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+
+	$.async(node, [], [() => Promise.resolve(true)], (node, $$condition) => {
+		var consequent = ($$anchor) => {
+			var text = $.text();
+
+			$.template_effect(($0) => $.set_text(text, $0), void 0, [() => Promise.resolve('yes yes yes')]);
+			$.append($$anchor, text);
+		};
+
+		var alternate = ($$anchor) => {
+			var text_1 = $.text();
+
+			$.template_effect(($0) => $.set_text(text_1, $0), void 0, [() => Promise.reject('no no no')]);
+			$.append($$anchor, text_1);
+		};
+
+		$.if(node, ($$render) => {
+			if ($.get($$condition)) $$render(consequent); else $$render(alternate, -1);
+		});
+	});
+
+	$.append($$anchor, fragment);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/async-if-hoisting/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-if-hoisting/_expected/server/index.svelte.js
new file mode 100644
index 0000000000..bc5f53a058
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-if-hoisting/_expected/server/index.svelte.js
@@ -0,0 +1,16 @@
+import 'svelte/internal/flags/async';
+import * as $ from 'svelte/internal/server';
+
+export default function Async_if_hoisting($$renderer) {
+	$$renderer.child_block(async ($$renderer) => {
+		if ((await $.save(Promise.resolve(true)))()) {
+			$$renderer.push('<!--[0-->');
+			$$renderer.push(async () => $.escape(await Promise.resolve('yes yes yes')));
+		} else {
+			$$renderer.push('<!--[-1-->');
+			$$renderer.push(async () => $.escape(await Promise.reject('no no no')));
+		}
+	});
+
+	$$renderer.push(`<!--]-->`);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/async-if-hoisting/index.svelte b/packages/svelte/tests/snapshot/samples/async-if-hoisting/index.svelte
new file mode 100644
index 0000000000..4ca3462771
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-if-hoisting/index.svelte
@@ -0,0 +1,5 @@
+{#if await Promise.resolve(true)}
+  {await Promise.resolve('yes yes yes')}
+{:else}
+  {await Promise.reject('no no no')}
+{/if}
diff --git a/packages/svelte/tests/snapshot/samples/async-in-derived/_config.js b/packages/svelte/tests/snapshot/samples/async-in-derived/_config.js
new file mode 100644
index 0000000000..2e30bbeb16
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-in-derived/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({ compileOptions: { experimental: { async: true } } });
diff --git a/packages/svelte/tests/snapshot/samples/async-in-derived/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-in-derived/_expected/client/index.svelte.js
new file mode 100644
index 0000000000..79b8ad0040
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-in-derived/_expected/client/index.svelte.js
@@ -0,0 +1,73 @@
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/async';
+import * as $ from 'svelte/internal/client';
+
+var root = $.from_html(`<!> <!>`, 1);
+
+export default function Async_in_derived($$anchor, $$props) {
+	$.push($$props, true);
+
+	var yes1, yes2, no1, no2;
+
+	var $$promises = $.run([
+		async () => yes1 = await $.async_derived(() => 1),
+		async () => yes2 = await $.async_derived(async () => foo(await 1)),
+		() => {
+			no1 = $.derived(async () => {
+				return await 1;
+			});
+
+			no2 = $.derived(() => async () => {
+				return await 1;
+			});
+		}
+	]);
+
+	var fragment = root();
+	var node = $.first_child(fragment);
+
+	{
+		var consequent = ($$anchor) => {
+			let yes1;
+			let yes2;
+			let no1;
+			let no2;
+
+			var promises = $.run([
+				async () => yes1 = (await $.save($.async_derived(async () => (await $.save(1))())))(),
+				async () => yes2 = (await $.save($.async_derived(async () => foo((await $.save(1))()))))(),
+				() => no1 = $.derived(() => (async () => {
+					return await 1;
+				})()),
+
+				() => no2 = $.derived(() => (async () => {
+					return await 1;
+				})())
+			]);
+		};
+
+		$.if(node, ($$render) => {
+			if (true) $$render(consequent);
+		});
+	}
+
+	var node_1 = $.sibling(node, 2);
+
+	{
+		var consequent_1 = ($$anchor) => {
+			let x;
+
+			var promises_1 = $.run([
+				() => $$promises[2].promise,
+				() => x = $.derived(() => $.get(no2))
+			]);
+		};
+
+		$.if(node_1, ($$render) => {
+			if (true) $$render(consequent_1);
+		});
+	}
+
+	$.append($$anchor, fragment);
+	$.pop();
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/async-in-derived/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-in-derived/_expected/server/index.svelte.js
new file mode 100644
index 0000000000..651a92f9a8
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-in-derived/_expected/server/index.svelte.js
@@ -0,0 +1,58 @@
+import 'svelte/internal/flags/async';
+import * as $ from 'svelte/internal/server';
+
+export default function Async_in_derived($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		var yes1, yes2, no1, no2;
+
+		var $$promises = $$renderer.run([
+			async () => yes1 = await $.async_derived(() => 1),
+			async () => yes2 = await $.async_derived(async () => foo(await 1)),
+			() => {
+				no1 = $.derived(async () => {
+					return await 1;
+				});
+
+				no2 = $.derived(() => async () => {
+					return await 1;
+				});
+			}
+		]);
+
+		if (true) {
+			$$renderer.push('<!--[0-->');
+
+			let yes1;
+			let yes2;
+			let no1;
+			let no2;
+
+			var promises = $$renderer.run([
+				async () => yes1 = (await $.save(1))(),
+				async () => yes2 = foo((await $.save(1))()),
+				() => no1 = (async () => {
+					return await 1;
+				})(),
+
+				() => no2 = (async () => {
+					return await 1;
+				})()
+			]);
+		} else {
+			$$renderer.push('<!--[-1-->');
+		}
+
+		$$renderer.push(`<!--]--> `);
+
+		if (true) {
+			$$renderer.push('<!--[0-->');
+
+			let x;
+			var promises_1 = $$renderer.run([() => $$promises[2], () => x = no2()]);
+		} else {
+			$$renderer.push('<!--[-1-->');
+		}
+
+		$$renderer.push(`<!--]-->`);
+	});
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/async-in-derived/index.svelte b/packages/svelte/tests/snapshot/samples/async-in-derived/index.svelte
new file mode 100644
index 0000000000..b105bef189
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-in-derived/index.svelte
@@ -0,0 +1,25 @@
+<script>
+	let yes1 = $derived(await 1);
+	let yes2 = $derived(foo(await 1));
+	let no1 = $derived.by(async () => {
+		return await 1;
+	});
+	let no2 = $derived(async () => {
+		return await 1;
+	});
+</script>
+
+{#if true}
+	{@const yes1 = await 1}
+	{@const yes2 = foo(await 1)}
+	{@const no1 = (async () => {
+		return await 1;
+	})()}
+	{@const no2 = (async () => {
+		return await 1;
+	})()}
+{/if}
+
+{#if true}
+	{@const x = no2}
+{/if}
diff --git a/packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/_config.js b/packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/_config.js
new file mode 100644
index 0000000000..2e30bbeb16
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({ compileOptions: { experimental: { async: true } } });
diff --git a/packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/_expected/client/index.svelte.js
new file mode 100644
index 0000000000..8fb09fadd2
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/_expected/client/index.svelte.js
@@ -0,0 +1,26 @@
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/async';
+import * as $ from 'svelte/internal/client';
+
+export default function Async_top_level_group_sync_run($$anchor) {
+	var a,
+		// these should be grouped into one, having an async tick inbetween
+		// would change how the code runs and could introduce subtle timing bugs
+		b,
+		c;
+
+	var $$promises = $.run([
+		async () => a = await Promise.resolve(1),
+		() => {
+			b = a + 1;
+			c = b + 1;
+		}
+	]);
+
+	$.next();
+
+	var text = $.text();
+
+	$.template_effect(() => $.set_text(text, c), void 0, void 0, [$$promises[1]]);
+	$.append($$anchor, text);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/_expected/server/index.svelte.js
new file mode 100644
index 0000000000..43db129746
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/_expected/server/index.svelte.js
@@ -0,0 +1,21 @@
+import 'svelte/internal/flags/async';
+import * as $ from 'svelte/internal/server';
+
+export default function Async_top_level_group_sync_run($$renderer) {
+	var a,
+		// these should be grouped into one, having an async tick inbetween
+		// would change how the code runs and could introduce subtle timing bugs
+		b,
+		c;
+
+	var $$promises = $$renderer.run([
+		async () => a = await Promise.resolve(1),
+		() => {
+			b = a + 1;
+			c = b + 1;
+		}
+	]);
+
+	$$renderer.push(`<!---->`);
+	$$renderer.async([$$promises[1]], ($$renderer) => $$renderer.push(() => $.escape(c)));
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/index.svelte b/packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/index.svelte
new file mode 100644
index 0000000000..98f602312e
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-top-level-group-sync-run/index.svelte
@@ -0,0 +1,9 @@
+<script>
+	let a = await Promise.resolve(1);
+	// these should be grouped into one, having an async tick inbetween
+	// would change how the code runs and could introduce subtle timing bugs
+	let b = a + 1;
+	let c = b + 1;
+</script>
+
+{c}
diff --git a/packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/_config.js b/packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/_config.js
new file mode 100644
index 0000000000..6214e6b429
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		experimental: { async: true },
+		dev: false
+	}
+});
diff --git a/packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/_expected/client/index.svelte.js
new file mode 100644
index 0000000000..668c936e4e
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/_expected/client/index.svelte.js
@@ -0,0 +1,16 @@
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/async';
+import * as $ from 'svelte/internal/client';
+
+var root = $.from_html(`<p> </p>`);
+
+export default function Async_top_level_inspect_server($$anchor) {
+	var data;
+	var $$promises = $.run([async () => data = await Promise.resolve(42), () => void 0]);
+	var p = root();
+	var text = $.child(p, true);
+
+	$.reset(p);
+	$.template_effect(() => $.set_text(text, data), void 0, void 0, [$$promises[1]]);
+	$.append($$anchor, p);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/_expected/server/index.svelte.js
new file mode 100644
index 0000000000..5c3afc75d7
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/_expected/server/index.svelte.js
@@ -0,0 +1,11 @@
+import 'svelte/internal/flags/async';
+import * as $ from 'svelte/internal/server';
+
+export default function Async_top_level_inspect_server($$renderer) {
+	var data;
+	var $$promises = $$renderer.run([async () => data = await Promise.resolve(42), () => void 0]);
+
+	$$renderer.push(`<p>`);
+	$$renderer.async([$$promises[1]], ($$renderer) => $$renderer.push(() => $.escape(data)));
+	$$renderer.push(`</p>`);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/index.svelte b/packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/index.svelte
new file mode 100644
index 0000000000..06bb995b1e
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/async-top-level-inspect-server/index.svelte
@@ -0,0 +1,6 @@
+<script>
+	let data = await Promise.resolve(42);
+	$inspect(data);
+</script>
+
+<p>{data}</p>
diff --git a/packages/svelte/tests/snapshot/samples/await-block-scope/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/await-block-scope/_expected/client/index.svelte.js
index 87fce120fd..e1b87d6280 100644
--- a/packages/svelte/tests/snapshot/samples/await-block-scope/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/await-block-scope/_expected/client/index.svelte.js
@@ -1,20 +1,18 @@
-import "svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
+import 'svelte/internal/disclose-version';
+import * as $ from 'svelte/internal/client';
 
-function increment(_, counter) {
-	counter.count += 1;
-}
-
-var root = $.template(`<button> </button> <!> `, 1);
+var root = $.from_html(`<button> </button> <!> `, 1);
 
 export default function Await_block_scope($$anchor) {
 	let counter = $.proxy({ count: 0 });
 	const promise = $.derived(() => Promise.resolve(counter));
-	var fragment = root();
-	var button = $.first_child(fragment);
 
-	button.__click = [increment, counter];
+	function increment() {
+		counter.count += 1;
+	}
 
+	var fragment = root();
+	var button = $.first_child(fragment);
 	var text = $.child(button);
 
 	$.reset(button);
@@ -26,11 +24,12 @@ export default function Await_block_scope($$anchor) {
 	var text_1 = $.sibling(node);
 
 	$.template_effect(() => {
-		$.set_text(text, `clicks: ${counter.count ?? ""}`);
-		$.set_text(text_1, ` ${counter.count ?? ""}`);
+		$.set_text(text, `clicks: ${counter.count ?? ''}`);
+		$.set_text(text_1, ` ${counter.count ?? ''}`);
 	});
 
+	$.delegated('click', button, increment);
 	$.append($$anchor, fragment);
 }
 
-$.delegate(["click"]);
\ No newline at end of file
+$.delegate(['click']);
\ No newline at end of file
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 44c68a7c96..a41b58051c 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
@@ -1,14 +1,14 @@
-import * as $ from "svelte/internal/server";
+import * as $ from 'svelte/internal/server';
 
-export default function Await_block_scope($$payload) {
+export default function Await_block_scope($$renderer) {
 	let counter = { count: 0 };
-	const promise = Promise.resolve(counter);
+	const promise = $.derived(() => Promise.resolve(counter));
 
 	function increment() {
 		counter.count += 1;
 	}
 
-	$$payload.out += `<button>clicks: ${$.escape(counter.count)}</button> <!---->`;
-	$.await(promise, () => {}, (counter) => {}, () => {});
-	$$payload.out += `<!----> ${$.escape(counter.count)}`;
+	$$renderer.push(`<button>clicks: ${$.escape(counter.count)}</button> `);
+	$.await($$renderer, promise(), () => {}, (counter) => {});
+	$$renderer.push(`<!--]--> ${$.escape(counter.count)}`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js
index bcddb6f658..a87a356d58 100644
--- a/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js
@@ -1,16 +1,16 @@
-import "svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
+import 'svelte/internal/disclose-version';
+import * as $ from 'svelte/internal/client';
 import TextInput from './Child.svelte';
 
 const snippet = ($$anchor) => {
 	$.next();
 
-	var text = $.text("Something");
+	var text = $.text('Something');
 
 	$.append($$anchor, text);
 };
 
-var root = $.template(`<!> `, 1);
+var root = $.from_html(`<!> `, 1);
 
 export default function Bind_component_snippet($$anchor) {
 	let value = $.state('');
@@ -22,13 +22,14 @@ export default function Bind_component_snippet($$anchor) {
 		get value() {
 			return $.get(value);
 		},
+
 		set value($$value) {
-			$.set(value, $.proxy($$value));
+			$.set(value, $$value, true);
 		}
 	});
 
 	var text_1 = $.sibling(node);
 
-	$.template_effect(() => $.set_text(text_1, ` value: ${$.get(value) ?? ""}`));
+	$.template_effect(() => $.set_text(text_1, ` value: ${$.get(value) ?? ''}`));
 	$.append($$anchor, fragment);
 }
\ 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 d223a31502..2ef3a429ba 100644
--- a/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/server/index.svelte.js
@@ -1,35 +1,36 @@
-import * as $ from "svelte/internal/server";
+import * as $ from 'svelte/internal/server';
 import TextInput from './Child.svelte';
 
-function snippet($$payload) {
-	$$payload.out += `<!---->Something`;
+function snippet($$renderer) {
+	$$renderer.push(`<!---->Something`);
 }
 
-export default function Bind_component_snippet($$payload) {
+export default function Bind_component_snippet($$renderer) {
 	let value = '';
 	const _snippet = snippet;
 	let $$settled = true;
-	let $$inner_payload;
+	let $$inner_renderer;
 
-	function $$render_inner($$payload) {
-		TextInput($$payload, {
+	function $$render_inner($$renderer) {
+		TextInput($$renderer, {
 			get value() {
 				return value;
 			},
+
 			set value($$value) {
 				value = $$value;
 				$$settled = false;
 			}
 		});
 
-		$$payload.out += `<!----> value: ${$.escape(value)}`;
-	};
+		$$renderer.push(`<!----> value: ${$.escape(value)}`);
+	}
 
 	do {
 		$$settled = true;
-		$$inner_payload = $.copy_payload($$payload);
-		$$render_inner($$inner_payload);
+		$$inner_renderer = $$renderer.copy();
+		$$render_inner($$inner_renderer);
 	} while (!$$settled);
 
-	$.assign_payload($$payload, $$inner_payload);
+	$$renderer.subsume($$inner_renderer);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/bind-this/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/bind-this/_expected/client/index.svelte.js
index fedcc87696..dfd32a04e5 100644
--- a/packages/svelte/tests/snapshot/samples/bind-this/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/bind-this/_expected/client/index.svelte.js
@@ -1,6 +1,6 @@
-import "svelte/internal/disclose-version";
-import "svelte/internal/flags/legacy";
-import * as $ from "svelte/internal/client";
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/legacy';
+import * as $ from 'svelte/internal/client';
 
 export default function Bind_this($$anchor) {
 	$.bind_this(Foo($$anchor, { $$legacy: true }), ($$value) => foo = $$value, () => foo);
diff --git a/packages/svelte/tests/snapshot/samples/bind-this/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/bind-this/_expected/server/index.svelte.js
index badca8d4a0..8697d71bfa 100644
--- a/packages/svelte/tests/snapshot/samples/bind-this/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/bind-this/_expected/server/index.svelte.js
@@ -1,5 +1,5 @@
-import * as $ from "svelte/internal/server";
+import * as $ from 'svelte/internal/server';
 
-export default function Bind_this($$payload) {
-	Foo($$payload, {});
+export default function Bind_this($$renderer) {
+	Foo($$renderer, {});
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/client/index.svelte.js
index 399fa19b62..c9725d6718 100644
--- a/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/client/index.svelte.js
@@ -1,25 +1,46 @@
-import "svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
+import 'svelte/internal/disclose-version';
+import * as $ from 'svelte/internal/client';
 
 export default function Class_state_field_constructor_assignment($$anchor, $$props) {
 	$.push($$props, true);
 
 	class Foo {
-		#a = $.state();
+		#a = $.state(0);
 
 		get a() {
 			return $.get(this.#a);
 		}
 
 		set a(value) {
-			$.set(this.#a, $.proxy(value));
+			$.set(this.#a, value, true);
 		}
 
 		#b = $.state();
+		#foo = $.derived(() => ({ bar: this.a * 2 }));
+
+		get foo() {
+			return $.get(this.#foo);
+		}
+
+		set foo(value) {
+			$.set(this.#foo, value);
+		}
+
+		#bar = $.derived(() => ({ baz: this.foo }));
+
+		get bar() {
+			return $.get(this.#bar);
+		}
+
+		set bar(value) {
+			$.set(this.#bar, value);
+		}
 
 		constructor() {
 			this.a = 1;
-			this.#b.v = 2;
+			$.set(this.#b, 2);
+			this.foo.bar = 3;
+			this.bar = 4;
 		}
 	}
 
diff --git a/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/server/index.svelte.js
index bcc7c2e1f2..57b81d86ba 100644
--- a/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/_expected/server/index.svelte.js
@@ -1,17 +1,36 @@
-import * as $ from "svelte/internal/server";
+import * as $ from 'svelte/internal/server';
 
-export default function Class_state_field_constructor_assignment($$payload, $$props) {
-	$.push();
+export default function Class_state_field_constructor_assignment($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		class Foo {
+			a = 0;
+			#b;
+			#foo = $.derived(() => ({ bar: this.a * 2 }));
 
-	class Foo {
-		a;
-		#b;
+			get foo() {
+				return this.#foo();
+			}
 
-		constructor() {
-			this.a = 1;
-			this.#b = 2;
-		}
-	}
+			set foo($$value) {
+				return this.#foo($$value);
+			}
+
+			#bar = $.derived(() => ({ baz: this.foo }));
+
+			get bar() {
+				return this.#bar();
+			}
 
-	$.pop();
+			set bar($$value) {
+				return this.#bar($$value);
+			}
+
+			constructor() {
+				this.a = 1;
+				this.#b = 2;
+				this.foo.bar = 3;
+				this.bar = 4;
+			}
+		}
+	});
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/index.svelte b/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/index.svelte
index a3ff5917e7..127cfd4d2a 100644
--- a/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/index.svelte
+++ b/packages/svelte/tests/snapshot/samples/class-state-field-constructor-assignment/index.svelte
@@ -1,11 +1,14 @@
 <script>
 	class Foo {
-		a = $state();
+		a = $state(0);
 		#b = $state();
-
+		foo = $derived({ bar: this.a * 2 });
+		bar = $derived({ baz: this.foo });
 		constructor() {
 			this.a = 1;
 			this.#b = 2;
+			this.foo.bar = 3;
+			this.bar = 4;
 		}
 	}
 </script>
diff --git a/packages/svelte/tests/snapshot/samples/dedupe-templates/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/dedupe-templates/_expected/client/index.svelte.js
new file mode 100644
index 0000000000..d0d474fa29
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/dedupe-templates/_expected/client/index.svelte.js
@@ -0,0 +1,44 @@
+import 'svelte/internal/disclose-version';
+import * as $ from 'svelte/internal/client';
+
+var root = $.from_html(`<p class="x">hello</p>`);
+var root_1 = $.from_html(`<!> <!>`, 1);
+
+export default function Dedupe_templates($$anchor, $$props) {
+	var fragment = root_1();
+	var node = $.first_child(fragment);
+
+	{
+		var consequent = ($$anchor) => {
+			var p = root();
+
+			$.append($$anchor, p);
+		};
+
+		var alternate = ($$anchor) => {
+			var p_1 = root();
+
+			$.append($$anchor, p_1);
+		};
+
+		$.if(node, ($$render) => {
+			if ($$props.a) $$render(consequent); else $$render(alternate, -1);
+		});
+	}
+
+	var node_1 = $.sibling(node, 2);
+
+	{
+		var consequent_1 = ($$anchor) => {
+			var p_2 = root();
+
+			$.append($$anchor, p_2);
+		};
+
+		$.if(node_1, ($$render) => {
+			if ($$props.b) $$render(consequent_1);
+		});
+	}
+
+	$.append($$anchor, fragment);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/dedupe-templates/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/dedupe-templates/_expected/server/index.svelte.js
new file mode 100644
index 0000000000..1f4a56779e
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/dedupe-templates/_expected/server/index.svelte.js
@@ -0,0 +1,24 @@
+import * as $ from 'svelte/internal/server';
+
+export default function Dedupe_templates($$renderer, $$props) {
+	let { a, b } = $$props;
+
+	if (a) {
+		$$renderer.push('<!--[0-->');
+		$$renderer.push(`<p class="x">hello</p>`);
+	} else {
+		$$renderer.push('<!--[-1-->');
+		$$renderer.push(`<p class="x">hello</p>`);
+	}
+
+	$$renderer.push(`<!--]--> `);
+
+	if (b) {
+		$$renderer.push('<!--[0-->');
+		$$renderer.push(`<p class="x">hello</p>`);
+	} else {
+		$$renderer.push('<!--[-1-->');
+	}
+
+	$$renderer.push(`<!--]-->`);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/dedupe-templates/index.svelte b/packages/svelte/tests/snapshot/samples/dedupe-templates/index.svelte
new file mode 100644
index 0000000000..c75b5481a5
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/dedupe-templates/index.svelte
@@ -0,0 +1,14 @@
+<script>
+	let { a, b } = $props();
+</script>
+
+<!-- identical static markup repeated across branches should share one hoisted template -->
+{#if a}
+	<p class="x">hello</p>
+{:else}
+	<p class="x">hello</p>
+{/if}
+
+{#if b}
+	<p class="x">hello</p>
+{/if}
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..d2f2f87f20
--- /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 root = $.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();
+
+		$.set_attribute(button, 'data-index', index);
+
+		$.delegated('click', button, (e) => {
+			const index = Number(e.currentTarget.dataset.index);
+
+			console.log(index);
+		});
+
+		$.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..51241b92c0
--- /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($$renderer) {
+	$$renderer.push(`<!--[-->`);
+
+	const each_array = $.ensure_array_like({ length: 1 });
+
+	for (let index = 0, $$length = each_array.length; index < $$length; index++) {
+		$$renderer.push(`<button type="button"${$.attr('data-index', index)}>B</button>`);
+	}
+
+	$$renderer.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/destructured-assignments/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/client/index.svelte.js
index dbda825c4d..e9cf5b573d 100644
--- a/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/client/index.svelte.js
@@ -1,5 +1,5 @@
 /* index.svelte.js generated by Svelte VERSION */
-import * as $ from "svelte/internal/client";
+import * as $ from 'svelte/internal/client';
 
 let a = $.state(1);
 let b = $.state(2);
@@ -7,10 +7,12 @@ let c = 3;
 let d = 4;
 
 export function update(array) {
-	(
-		$.set(a, $.proxy(array[0])),
-		$.set(b, $.proxy(array[1]))
-	);
+	((array) => {
+		var $$array = $.to_array(array, 2);
+
+		$.set(a, $$array[0], true);
+		$.set(b, $$array[1], true);
+	})(array);
 
 	[c, d] = array;
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/server/index.svelte.js
index 2797d4312b..62b655b266 100644
--- a/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/server/index.svelte.js
@@ -1,5 +1,5 @@
 /* index.svelte.js generated by Svelte VERSION */
-import * as $ from "svelte/internal/server";
+import * as $ from 'svelte/internal/server';
 
 let a = 1;
 let b = 2;
diff --git a/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js b/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js
index 846acc67a6..eafadfc2ea 100644
--- a/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js
@@ -1,33 +1,39 @@
-import "svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
+import 'svelte/internal/disclose-version';
+import * as $ from 'svelte/internal/client';
 
-var root = $.template(`<div></div> <svg></svg> <custom-element></custom-element> <div></div> <svg></svg> <custom-element></custom-element>`, 3);
+var root = $.from_html(`<div></div> <svg></svg> <custom-element></custom-element> <div></div> <svg></svg> <custom-element></custom-element>`, 3);
 
 export default function Main($$anchor) {
 	// needs to be a snapshot test because jsdom does auto-correct the attribute casing
 	let x = 'test';
+
 	let y = () => 'test';
 	var fragment = root();
 	var div = $.first_child(fragment);
+
+	$.set_attribute(div, 'foobar', x);
+
 	var svg = $.sibling(div, 2);
-	var custom_element = $.sibling(svg, 2);
-	var div_1 = $.sibling(custom_element, 2);
 
-	$.template_effect(() => $.set_attribute(div_1, "foobar", y()));
+	$.set_attribute(svg, 'viewBox', x);
 
-	var svg_1 = $.sibling(div_1, 2);
+	var custom_element = $.sibling(svg, 2);
 
-	$.template_effect(() => $.set_attribute(svg_1, "viewBox", y()));
+	$.set_custom_element_data(custom_element, 'fooBar', x);
 
+	var div_1 = $.sibling(custom_element, 2);
+	var svg_1 = $.sibling(div_1, 2);
 	var custom_element_1 = $.sibling(svg_1, 2);
 
-	$.template_effect(() => $.set_custom_element_data(custom_element_1, "fooBar", y()));
+	$.template_effect(() => $.set_custom_element_data(custom_element_1, 'fooBar', y()));
 
-	$.template_effect(() => {
-		$.set_attribute(div, "foobar", x);
-		$.set_attribute(svg, "viewBox", x);
-		$.set_custom_element_data(custom_element, "fooBar", x);
-	});
+	$.template_effect(
+		($0, $1) => {
+			$.set_attribute(div_1, 'foobar', $0);
+			$.set_attribute(svg_1, 'viewBox', $1);
+		},
+		[() => y(), () => y()]
+	);
 
 	$.append($$anchor, fragment);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/server/main.svelte.js b/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/server/main.svelte.js
index 5eaa55aa49..1ff8402974 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
@@ -1,9 +1,10 @@
-import * as $ from "svelte/internal/server";
+import * as $ from 'svelte/internal/server';
 
-export default function Main($$payload) {
+export default function Main($$renderer) {
 	// needs to be a snapshot test because jsdom does auto-correct the attribute casing
 	let x = 'test';
+
 	let y = () => 'test';
 
-	$$payload.out += `<div${$.attr("foobar", x)}></div> <svg${$.attr("viewBox", x)}></svg> <custom-element${$.attr("foobar", x)}></custom-element> <div${$.attr("foobar", y())}></div> <svg${$.attr("viewBox", y())}></svg> <custom-element${$.attr("foobar", y())}></custom-element>`;
+	$$renderer.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/_config.js b/packages/svelte/tests/snapshot/samples/each-index-non-null/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/each-index-non-null/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/client/index.svelte.js
new file mode 100644
index 0000000000..049d47a96f
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/client/index.svelte.js
@@ -0,0 +1,19 @@
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/legacy';
+import * as $ from 'svelte/internal/client';
+
+var root = $.from_html(`<p></p>`);
+
+export default function Each_index_non_null($$anchor) {
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+
+	$.each(node, 0, () => Array(10), $.index, ($$anchor, $$item, i) => {
+		var p = root();
+
+		p.textContent = `index: ${i}`;
+		$.append($$anchor, p);
+	});
+
+	$.append($$anchor, fragment);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/server/index.svelte.js
new file mode 100644
index 0000000000..e6de07a36e
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/server/index.svelte.js
@@ -0,0 +1,13 @@
+import * as $ from 'svelte/internal/server';
+
+export default function Each_index_non_null($$renderer) {
+	$$renderer.push(`<!--[-->`);
+
+	const each_array = $.ensure_array_like(Array(10));
+
+	for (let i = 0, $$length = each_array.length; i < $$length; i++) {
+		$$renderer.push(`<p>index: ${$.escape(i)}</p>`);
+	}
+
+	$$renderer.push(`<!--]-->`);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/each-index-non-null/index.svelte b/packages/svelte/tests/snapshot/samples/each-index-non-null/index.svelte
new file mode 100644
index 0000000000..03bfc9e372
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/each-index-non-null/index.svelte
@@ -0,0 +1,3 @@
+{#each Array(10), i}
+	<p>index: {i}</p>
+{/each}
diff --git a/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js
index 80f2da11a2..c0626bd416 100644
--- a/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js
@@ -1,6 +1,6 @@
-import "svelte/internal/disclose-version";
-import "svelte/internal/flags/legacy";
-import * as $ from "svelte/internal/client";
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/legacy';
+import * as $ from 'svelte/internal/client';
 
 export default function Each_string_template($$anchor) {
 	var fragment = $.comment();
@@ -11,7 +11,7 @@ export default function Each_string_template($$anchor) {
 
 		var text = $.text();
 
-		$.template_effect(() => $.set_text(text, `${thing ?? ""}, `));
+		$.template_effect(() => $.set_text(text, `${thing ?? ''}, `));
 		$.append($$anchor, text);
 	});
 
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 d4debe1727..e1c550e113 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
@@ -1,15 +1,15 @@
-import * as $ from "svelte/internal/server";
+import * as $ from 'svelte/internal/server';
 
-export default function Each_string_template($$payload) {
-	const each_array = $.ensure_array_like(['foo', 'bar', 'baz']);
+export default function Each_string_template($$renderer) {
+	$$renderer.push(`<!--[-->`);
 
-	$$payload.out += `<!--[-->`;
+	const each_array = $.ensure_array_like(['foo', 'bar', 'baz']);
 
 	for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
 		let thing = each_array[$$index];
 
-		$$payload.out += `<!---->${$.escape(thing)}, `;
+		$$renderer.push(`<!---->${$.escape(thing)}, `);
 	}
 
-	$$payload.out += `<!--]-->`;
+	$$renderer.push(`<!--]-->`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/export-state/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/export-state/_expected/client/index.svelte.js
index bab47c8c50..c2a6054bc6 100644
--- a/packages/svelte/tests/snapshot/samples/export-state/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/export-state/_expected/client/index.svelte.js
@@ -1,4 +1,4 @@
 /* index.svelte.js generated by Svelte VERSION */
-import * as $ from "svelte/internal/client";
+import * as $ from 'svelte/internal/client';
 
 export const object = $.proxy({ ok: true });
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/export-state/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/export-state/_expected/server/index.svelte.js
index a3b619df6e..1f6c244212 100644
--- a/packages/svelte/tests/snapshot/samples/export-state/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/export-state/_expected/server/index.svelte.js
@@ -1,4 +1,4 @@
 /* index.svelte.js generated by Svelte VERSION */
-import * as $ from "svelte/internal/server";
+import * as $ from 'svelte/internal/server';
 
 export const object = { ok: true };
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js
index 95d1c72017..762a23754c 100644
--- a/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js
@@ -1,5 +1,5 @@
-import "svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
+import 'svelte/internal/disclose-version';
+import * as $ from 'svelte/internal/client';
 
 export default function Function_prop_no_getter($$anchor) {
 	let count = $.state(0);
@@ -13,13 +13,13 @@ export default function Function_prop_no_getter($$anchor) {
 	Button($$anchor, {
 		onmousedown: () => $.set(count, $.get(count) + 1),
 		onmouseup,
-		onmouseenter: () => $.set(count, $.proxy(plusOne($.get(count)))),
+		onmouseenter: () => $.set(count, plusOne($.get(count)), true),
 		children: ($$anchor, $$slotProps) => {
 			$.next();
 
 			var text = $.text();
 
-			$.template_effect(() => $.set_text(text, `clicks: ${$.get(count) ?? ""}`));
+			$.template_effect(() => $.set_text(text, `clicks: ${$.get(count) ?? ''}`));
 			$.append($$anchor, text);
 		},
 		$$slots: { default: true }
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 05b343d821..e2936b7f6e 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
@@ -1,6 +1,6 @@
-import * as $ from "svelte/internal/server";
+import * as $ from 'svelte/internal/server';
 
-export default function Function_prop_no_getter($$payload) {
+export default function Function_prop_no_getter($$renderer) {
 	let count = 0;
 
 	function onmouseup() {
@@ -9,12 +9,12 @@ export default function Function_prop_no_getter($$payload) {
 
 	const plusOne = (num) => num + 1;
 
-	Button($$payload, {
+	Button($$renderer, {
 		onmousedown: () => count += 1,
 		onmouseup,
 		onmouseenter: () => count = plusOne(count),
-		children: ($$payload) => {
-			$$payload.out += `<!---->clicks: ${$.escape(count)}`;
+		children: ($$renderer) => {
+			$$renderer.push(`<!---->clicks: ${$.escape(count)}`);
 		},
 		$$slots: { default: true }
 	});
diff --git a/packages/svelte/tests/snapshot/samples/functional-templating/_config.js b/packages/svelte/tests/snapshot/samples/functional-templating/_config.js
new file mode 100644
index 0000000000..23231c969b
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/functional-templating/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		fragments: 'tree'
+	}
+});
diff --git a/packages/svelte/tests/snapshot/samples/functional-templating/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/functional-templating/_expected/client/index.svelte.js
new file mode 100644
index 0000000000..792d5421e1
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/functional-templating/_expected/client/index.svelte.js
@@ -0,0 +1,25 @@
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/legacy';
+import * as $ from 'svelte/internal/client';
+
+var root = $.from_tree(
+	[
+		['h1', null, 'hello'],
+		' ',
+		[
+			'div',
+			{ class: 'potato' },
+			['p', null, 'child element'],
+			' ',
+			['p', null, 'another child element']
+		]
+	],
+	1
+);
+
+export default function Functional_templating($$anchor) {
+	var fragment = root();
+
+	$.next(2);
+	$.append($$anchor, fragment);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/functional-templating/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/functional-templating/_expected/server/index.svelte.js
new file mode 100644
index 0000000000..a5eb404d9e
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/functional-templating/_expected/server/index.svelte.js
@@ -0,0 +1,5 @@
+import * as $ from 'svelte/internal/server';
+
+export default function Functional_templating($$renderer) {
+	$$renderer.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/functional-templating/index.svelte b/packages/svelte/tests/snapshot/samples/functional-templating/index.svelte
new file mode 100644
index 0000000000..c0fe8965b8
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/functional-templating/index.svelte
@@ -0,0 +1,6 @@
+<h1>hello</h1>
+
+<div class="potato">
+	<p>child element</p>
+	<p>another child element</p>
+</div>
diff --git a/packages/svelte/tests/snapshot/samples/hello-world/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/hello-world/_expected/client/index.svelte.js
index 9f6f291669..68fdaa4570 100644
--- a/packages/svelte/tests/snapshot/samples/hello-world/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/hello-world/_expected/client/index.svelte.js
@@ -1,8 +1,8 @@
-import "svelte/internal/disclose-version";
-import "svelte/internal/flags/legacy";
-import * as $ from "svelte/internal/client";
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/legacy';
+import * as $ from 'svelte/internal/client';
 
-var root = $.template(`<h1>hello world</h1>`);
+var root = $.from_html(`<h1>hello world</h1>`);
 
 export default function Hello_world($$anchor) {
 	var h1 = root();
diff --git a/packages/svelte/tests/snapshot/samples/hello-world/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/hello-world/_expected/server/index.svelte.js
index a313799dfd..5c1a710f2e 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";
+import * as $ from 'svelte/internal/server';
 
-export default function Hello_world($$payload) {
-	$$payload.out += `<h1>hello world</h1>`;
+export default function Hello_world($$renderer) {
+	$$renderer.push(`<h1>hello world</h1>`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/hmr/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/hmr/_expected/client/index.svelte.js
index 86c2880abc..66d1a5af5a 100644
--- a/packages/svelte/tests/snapshot/samples/hmr/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/hmr/_expected/client/index.svelte.js
@@ -1,8 +1,8 @@
-import "svelte/internal/disclose-version";
-import "svelte/internal/flags/legacy";
-import * as $ from "svelte/internal/client";
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/legacy';
+import * as $ from 'svelte/internal/client';
 
-var root = $.template(`<h1>hello world</h1>`);
+var root = $.from_html(`<h1>hello world</h1>`);
 
 function Hmr($$anchor) {
 	var h1 = root();
@@ -11,11 +11,10 @@ function Hmr($$anchor) {
 }
 
 if (import.meta.hot) {
-	Hmr = $.hmr(Hmr, () => Hmr[$.HMR].source);
+	Hmr = $.hmr(Hmr);
 
 	import.meta.hot.accept((module) => {
-		module.default[$.HMR].source = Hmr[$.HMR].source;
-		$.set(Hmr[$.HMR].source, module.default[$.HMR].original);
+		Hmr[$.HMR].update(module.default);
 	});
 }
 
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 33fe307c09..d8b9d98b03 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";
+import * as $ from 'svelte/internal/server';
 
-export default function Hmr($$payload) {
-	$$payload.out += `<h1>hello world</h1>`;
+export default function Hmr($$renderer) {
+	$$renderer.push(`<h1>hello world</h1>`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/index.svelte.js
index 9c7d2f3f23..0eab38919c 100644
--- a/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/index.svelte.js
@@ -1,8 +1,6 @@
-import "svelte/internal/disclose-version";
-import "svelte/internal/flags/legacy";
-import * as $ from "svelte/internal/client";
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/legacy';
+import * as $ from 'svelte/internal/client';
 import { random } from './module.svelte';
 
-export default function Imports_in_modules($$anchor) {
-	
-}
\ No newline at end of file
+export default function Imports_in_modules($$anchor) {}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/module.svelte.js b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/module.svelte.js
index 6edbc8af77..0d366e6258 100644
--- a/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/module.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/module.svelte.js
@@ -1,5 +1,5 @@
 /* module.svelte.js generated by Svelte VERSION */
-import * as $ from "svelte/internal/client";
+import * as $ from 'svelte/internal/client';
 import { random } from './export';
 
 export { random };
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/server/index.svelte.js
index 35b64b4186..2d7b9906ed 100644
--- a/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/server/index.svelte.js
@@ -1,6 +1,4 @@
-import * as $ from "svelte/internal/server";
+import * as $ from 'svelte/internal/server';
 import { random } from './module.svelte';
 
-export default function Imports_in_modules($$payload) {
-	
-}
\ No newline at end of file
+export default function Imports_in_modules($$renderer) {}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/server/module.svelte.js b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/server/module.svelte.js
index e51aae5a25..2e0af8af84 100644
--- a/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/server/module.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/server/module.svelte.js
@@ -1,5 +1,5 @@
 /* module.svelte.js generated by Svelte VERSION */
-import * as $ from "svelte/internal/server";
+import * as $ from 'svelte/internal/server';
 import { random } from './export';
 
 export { random };
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/_config.js b/packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/_expected/client/index.svelte.js
new file mode 100644
index 0000000000..837a7cd65a
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/_expected/client/index.svelte.js
@@ -0,0 +1,38 @@
+import 'svelte/internal/disclose-version';
+import * as $ from 'svelte/internal/client';
+
+var root = $.from_html(`<h1></h1> <b></b> <button> </button> <h1></h1> <div></div>`, 1);
+
+export default function Nullish_coallescence_omittance($$anchor, $$props) {
+	let name = 'world';
+	let count = $.state(0);
+	var fragment = root();
+	var h1 = $.first_child(fragment);
+
+	h1.textContent = 'Hello, world!';
+
+	var b = $.sibling(h1, 2);
+
+	b.textContent = '123';
+
+	var button = $.sibling(b, 2);
+	var text = $.child(button);
+
+	$.reset(button);
+
+	var h1_1 = $.sibling(button, 2);
+
+	h1_1.textContent = 'Hello, world';
+
+	var div = $.sibling(h1_1, 2);
+
+	$.template_effect(() => {
+		$.set_text(text, `Count is ${$.get(count) ?? ''}`);
+		$.set_attribute(div, 'title', `Hello, world ${$.get(count) ?? ''}  1  ${typeof $$props.value} ${$$props.value ?? ''}`);
+	});
+
+	$.delegated('click', button, () => $.update(count));
+	$.append($$anchor, fragment);
+}
+
+$.delegate(['click']);
\ 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
new file mode 100644
index 0000000000..357a887c9b
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/_expected/server/index.svelte.js
@@ -0,0 +1,9 @@
+import * as $ from 'svelte/internal/server';
+
+export default function Nullish_coallescence_omittance($$renderer, $$props) {
+	let name = 'world';
+	let count = 0;
+	let { value } = $$props;
+
+	$$renderer.push(`<h1>Hello, world!</h1> <b>123</b> <button>Count is ${$.escape(count)}</button> <h1>Hello, world</h1> <div${$.attr('title', `Hello, world ${$.stringify(count)}  1  ${typeof value} ${$.stringify(value)}`)}></div>`);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/index.svelte b/packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/index.svelte
new file mode 100644
index 0000000000..ed88f5a269
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/index.svelte
@@ -0,0 +1,10 @@
+<script>
+    let name = 'world';
+    let count = $state(0);
+    let { value } = $props();
+</script>
+<h1>Hello, {null}{name}!</h1>
+<b>{1 ?? 'stuff'}{2 ?? 'more stuff'}{3 ?? 'even more stuff'}</b>
+<button onclick={()=>count++}>Count is {count}</button>
+<h1>Hello, {name ?? 'earth' ?? null}</h1>
+<div title="Hello, {name} {count} {null} {1} {undefined} {typeof value} {value}"></div>
diff --git a/packages/svelte/tests/snapshot/samples/props-identifier/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/props-identifier/_expected/client/index.svelte.js
index 2a10dbc1b1..7df616f694 100644
--- a/packages/svelte/tests/snapshot/samples/props-identifier/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/props-identifier/_expected/client/index.svelte.js
@@ -1,10 +1,12 @@
-import "svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
+import 'svelte/internal/disclose-version';
+import * as $ from 'svelte/internal/client';
+
+var rest_excludes = new Set(['$$slots', '$$events', '$$legacy']);
 
 export default function Props_identifier($$anchor, $$props) {
 	$.push($$props, true);
 
-	let props = $.rest_props($$props, ["$$slots", "$$events", "$$legacy"]);
+	let props = $.rest_props($$props, rest_excludes);
 
 	$$props.a;
 	props[a];
diff --git a/packages/svelte/tests/snapshot/samples/props-identifier/_expected/client/index.svelte.warnings.json b/packages/svelte/tests/snapshot/samples/props-identifier/_expected/client/index.svelte.warnings.json
new file mode 100644
index 0000000000..81149a92f8
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/props-identifier/_expected/client/index.svelte.warnings.json
@@ -0,0 +1,142 @@
+[
+	{
+		"code": "state_referenced_locally",
+		"message": "This reference only captures the initial value of `props`. Did you mean to reference it inside a closure instead?\nhttps://svelte.dev/e/state_referenced_locally",
+		"filename": "packages/svelte/tests/snapshot/samples/props-identifier/index.svelte",
+		"start": {
+			"line": 3,
+			"column": 1,
+			"character": 33
+		},
+		"end": {
+			"line": 3,
+			"column": 6,
+			"character": 38
+		},
+		"position": [
+			33,
+			38
+		],
+		"frame": "1: <script>\n2:   let props = $props();\n3:   props.a;\n          ^\n4:   props[a];\n5:   props.a.b;"
+	},
+	{
+		"code": "state_referenced_locally",
+		"message": "This reference only captures the initial value of `props`. Did you mean to reference it inside a closure instead?\nhttps://svelte.dev/e/state_referenced_locally",
+		"filename": "packages/svelte/tests/snapshot/samples/props-identifier/index.svelte",
+		"start": {
+			"line": 4,
+			"column": 1,
+			"character": 43
+		},
+		"end": {
+			"line": 4,
+			"column": 6,
+			"character": 48
+		},
+		"position": [
+			43,
+			48
+		],
+		"frame": "2:   let props = $props();\n3:   props.a;\n4:   props[a];\n          ^\n5:   props.a.b;\n6:   props.a.b = true;"
+	},
+	{
+		"code": "state_referenced_locally",
+		"message": "This reference only captures the initial value of `props`. Did you mean to reference it inside a closure instead?\nhttps://svelte.dev/e/state_referenced_locally",
+		"filename": "packages/svelte/tests/snapshot/samples/props-identifier/index.svelte",
+		"start": {
+			"line": 5,
+			"column": 1,
+			"character": 54
+		},
+		"end": {
+			"line": 5,
+			"column": 6,
+			"character": 59
+		},
+		"position": [
+			54,
+			59
+		],
+		"frame": "3:   props.a;\n4:   props[a];\n5:   props.a.b;\n          ^\n6:   props.a.b = true;\n7:   props.a = true;"
+	},
+	{
+		"code": "state_referenced_locally",
+		"message": "This reference only captures the initial value of `props`. Did you mean to reference it inside a closure instead?\nhttps://svelte.dev/e/state_referenced_locally",
+		"filename": "packages/svelte/tests/snapshot/samples/props-identifier/index.svelte",
+		"start": {
+			"line": 6,
+			"column": 1,
+			"character": 66
+		},
+		"end": {
+			"line": 6,
+			"column": 6,
+			"character": 71
+		},
+		"position": [
+			66,
+			71
+		],
+		"frame": "4:   props[a];\n5:   props.a.b;\n6:   props.a.b = true;\n          ^\n7:   props.a = true;\n8:   props[a] = true;"
+	},
+	{
+		"code": "state_referenced_locally",
+		"message": "This reference only captures the initial value of `props`. Did you mean to reference it inside a closure instead?\nhttps://svelte.dev/e/state_referenced_locally",
+		"filename": "packages/svelte/tests/snapshot/samples/props-identifier/index.svelte",
+		"start": {
+			"line": 7,
+			"column": 1,
+			"character": 85
+		},
+		"end": {
+			"line": 7,
+			"column": 6,
+			"character": 90
+		},
+		"position": [
+			85,
+			90
+		],
+		"frame": " 5:   props.a.b;\n 6:   props.a.b = true;\n 7:   props.a = true;\n           ^\n 8:   props[a] = true;\n 9:   props;"
+	},
+	{
+		"code": "state_referenced_locally",
+		"message": "This reference only captures the initial value of `props`. Did you mean to reference it inside a closure instead?\nhttps://svelte.dev/e/state_referenced_locally",
+		"filename": "packages/svelte/tests/snapshot/samples/props-identifier/index.svelte",
+		"start": {
+			"line": 8,
+			"column": 1,
+			"character": 102
+		},
+		"end": {
+			"line": 8,
+			"column": 6,
+			"character": 107
+		},
+		"position": [
+			102,
+			107
+		],
+		"frame": " 6:   props.a.b = true;\n 7:   props.a = true;\n 8:   props[a] = true;\n           ^\n 9:   props;\n10: </script>"
+	},
+	{
+		"code": "state_referenced_locally",
+		"message": "This reference only captures the initial value of `props`. Did you mean to reference it inside a closure instead?\nhttps://svelte.dev/e/state_referenced_locally",
+		"filename": "packages/svelte/tests/snapshot/samples/props-identifier/index.svelte",
+		"start": {
+			"line": 9,
+			"column": 1,
+			"character": 120
+		},
+		"end": {
+			"line": 9,
+			"column": 6,
+			"character": 125
+		},
+		"position": [
+			120,
+			125
+		],
+		"frame": " 7:   props.a = true;\n 8:   props[a] = true;\n 9:   props;\n           ^\n10: </script>\n11: "
+	}
+]
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/props-identifier/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/props-identifier/_expected/server/index.svelte.js
index 6fef87d63b..6db24ac621 100644
--- a/packages/svelte/tests/snapshot/samples/props-identifier/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/props-identifier/_expected/server/index.svelte.js
@@ -1,16 +1,15 @@
-import * as $ from "svelte/internal/server";
+import * as $ from 'svelte/internal/server';
 
-export default function Props_identifier($$payload, $$props) {
-	$.push();
+export default function Props_identifier($$renderer, $$props) {
+	$$renderer.component(($$renderer) => {
+		let { $$slots, $$events, ...props } = $$props;
 
-	let { $$slots, $$events, ...props } = $$props;
-
-	props.a;
-	props[a];
-	props.a.b;
-	props.a.b = true;
-	props.a = true;
-	props[a] = true;
-	props;
-	$.pop();
+		props.a;
+		props[a];
+		props.a.b;
+		props.a.b = true;
+		props.a = true;
+		props[a] = true;
+		props;
+	});
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/props-identifier/_expected/server/index.svelte.warnings.json b/packages/svelte/tests/snapshot/samples/props-identifier/_expected/server/index.svelte.warnings.json
new file mode 100644
index 0000000000..81149a92f8
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/props-identifier/_expected/server/index.svelte.warnings.json
@@ -0,0 +1,142 @@
+[
+	{
+		"code": "state_referenced_locally",
+		"message": "This reference only captures the initial value of `props`. Did you mean to reference it inside a closure instead?\nhttps://svelte.dev/e/state_referenced_locally",
+		"filename": "packages/svelte/tests/snapshot/samples/props-identifier/index.svelte",
+		"start": {
+			"line": 3,
+			"column": 1,
+			"character": 33
+		},
+		"end": {
+			"line": 3,
+			"column": 6,
+			"character": 38
+		},
+		"position": [
+			33,
+			38
+		],
+		"frame": "1: <script>\n2:   let props = $props();\n3:   props.a;\n          ^\n4:   props[a];\n5:   props.a.b;"
+	},
+	{
+		"code": "state_referenced_locally",
+		"message": "This reference only captures the initial value of `props`. Did you mean to reference it inside a closure instead?\nhttps://svelte.dev/e/state_referenced_locally",
+		"filename": "packages/svelte/tests/snapshot/samples/props-identifier/index.svelte",
+		"start": {
+			"line": 4,
+			"column": 1,
+			"character": 43
+		},
+		"end": {
+			"line": 4,
+			"column": 6,
+			"character": 48
+		},
+		"position": [
+			43,
+			48
+		],
+		"frame": "2:   let props = $props();\n3:   props.a;\n4:   props[a];\n          ^\n5:   props.a.b;\n6:   props.a.b = true;"
+	},
+	{
+		"code": "state_referenced_locally",
+		"message": "This reference only captures the initial value of `props`. Did you mean to reference it inside a closure instead?\nhttps://svelte.dev/e/state_referenced_locally",
+		"filename": "packages/svelte/tests/snapshot/samples/props-identifier/index.svelte",
+		"start": {
+			"line": 5,
+			"column": 1,
+			"character": 54
+		},
+		"end": {
+			"line": 5,
+			"column": 6,
+			"character": 59
+		},
+		"position": [
+			54,
+			59
+		],
+		"frame": "3:   props.a;\n4:   props[a];\n5:   props.a.b;\n          ^\n6:   props.a.b = true;\n7:   props.a = true;"
+	},
+	{
+		"code": "state_referenced_locally",
+		"message": "This reference only captures the initial value of `props`. Did you mean to reference it inside a closure instead?\nhttps://svelte.dev/e/state_referenced_locally",
+		"filename": "packages/svelte/tests/snapshot/samples/props-identifier/index.svelte",
+		"start": {
+			"line": 6,
+			"column": 1,
+			"character": 66
+		},
+		"end": {
+			"line": 6,
+			"column": 6,
+			"character": 71
+		},
+		"position": [
+			66,
+			71
+		],
+		"frame": "4:   props[a];\n5:   props.a.b;\n6:   props.a.b = true;\n          ^\n7:   props.a = true;\n8:   props[a] = true;"
+	},
+	{
+		"code": "state_referenced_locally",
+		"message": "This reference only captures the initial value of `props`. Did you mean to reference it inside a closure instead?\nhttps://svelte.dev/e/state_referenced_locally",
+		"filename": "packages/svelte/tests/snapshot/samples/props-identifier/index.svelte",
+		"start": {
+			"line": 7,
+			"column": 1,
+			"character": 85
+		},
+		"end": {
+			"line": 7,
+			"column": 6,
+			"character": 90
+		},
+		"position": [
+			85,
+			90
+		],
+		"frame": " 5:   props.a.b;\n 6:   props.a.b = true;\n 7:   props.a = true;\n           ^\n 8:   props[a] = true;\n 9:   props;"
+	},
+	{
+		"code": "state_referenced_locally",
+		"message": "This reference only captures the initial value of `props`. Did you mean to reference it inside a closure instead?\nhttps://svelte.dev/e/state_referenced_locally",
+		"filename": "packages/svelte/tests/snapshot/samples/props-identifier/index.svelte",
+		"start": {
+			"line": 8,
+			"column": 1,
+			"character": 102
+		},
+		"end": {
+			"line": 8,
+			"column": 6,
+			"character": 107
+		},
+		"position": [
+			102,
+			107
+		],
+		"frame": " 6:   props.a.b = true;\n 7:   props.a = true;\n 8:   props[a] = true;\n           ^\n 9:   props;\n10: </script>"
+	},
+	{
+		"code": "state_referenced_locally",
+		"message": "This reference only captures the initial value of `props`. Did you mean to reference it inside a closure instead?\nhttps://svelte.dev/e/state_referenced_locally",
+		"filename": "packages/svelte/tests/snapshot/samples/props-identifier/index.svelte",
+		"start": {
+			"line": 9,
+			"column": 1,
+			"character": 120
+		},
+		"end": {
+			"line": 9,
+			"column": 6,
+			"character": 125
+		},
+		"position": [
+			120,
+			125
+		],
+		"frame": " 7:   props.a = true;\n 8:   props[a] = true;\n 9:   props;\n           ^\n10: </script>\n11: "
+	}
+]
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
index 0a627a55ae..a351851875 100644
--- a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
@@ -1,14 +1,14 @@
-import "svelte/internal/disclose-version";
-import "svelte/internal/flags/legacy";
-import * as $ from "svelte/internal/client";
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/legacy';
+import * as $ from 'svelte/internal/client';
 
-var root = $.template(`<p></p> <p></p> <!>`, 1);
+var root = $.from_html(`<p></p> <p></p> <!>`, 1);
 
 export default function Purity($$anchor) {
 	var fragment = root();
 	var p = $.first_child(fragment);
 
-	p.textContent = Math.max(0, Math.min(0, 100));
+	p.textContent = '0';
 
 	var p_1 = $.sibling(p, 2);
 
diff --git a/packages/svelte/tests/snapshot/samples/purity/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/purity/_expected/server/index.svelte.js
index 1eea71e4dd..9f76d8ffb8 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";
+import * as $ from 'svelte/internal/server';
 
-export default function Purity($$payload) {
-	$$payload.out += `<p>${$.escape(Math.max(0, Math.min(0, 100)))}</p> <p>${$.escape(location.href)}</p> `;
-	Child($$payload, { prop: encodeURIComponent('hello') });
-	$$payload.out += `<!---->`;
+export default function Purity($$renderer) {
+	$$renderer.push(`<p>0</p> <p>${$.escape(location.href)}</p> `);
+	Child($$renderer, { prop: encodeURIComponent('hello') });
+	$$renderer.push(`<!---->`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/select-with-rich-content/Option.svelte b/packages/svelte/tests/snapshot/samples/select-with-rich-content/Option.svelte
new file mode 100644
index 0000000000..89c9c1c111
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/select-with-rich-content/Option.svelte
@@ -0,0 +1 @@
+<option>Component Option</option>
diff --git a/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/client/Option.svelte.js b/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/client/Option.svelte.js
new file mode 100644
index 0000000000..a4b18a011b
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/client/Option.svelte.js
@@ -0,0 +1,11 @@
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/legacy';
+import * as $ from 'svelte/internal/client';
+
+var root = $.from_html(`<option>Component Option</option>`);
+
+export default function Option($$anchor) {
+	var option = root();
+
+	$.append($$anchor, option);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/client/index.svelte.js
new file mode 100644
index 0000000000..c8354fe67e
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/client/index.svelte.js
@@ -0,0 +1,400 @@
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/legacy';
+import * as $ from 'svelte/internal/client';
+import Option from './Option.svelte';
+
+const opt = ($$anchor) => {
+	var option = root();
+
+	$.append($$anchor, option);
+};
+
+const option_snippet = ($$anchor) => {
+	var option_1 = root_1();
+
+	$.append($$anchor, option_1);
+};
+
+const option_snippet2 = ($$anchor) => {
+	var option_2 = root_2();
+
+	$.append($$anchor, option_2);
+};
+
+const conditional_option = ($$anchor) => {
+	var option_3 = root_3();
+
+	$.append($$anchor, option_3);
+};
+
+var root = $.from_html(`<option>Snippet</option>`);
+var root_1 = $.from_html(`<option>Rendered</option>`);
+var root_2 = $.from_html(`<option>Rendered in group</option>`);
+var root_3 = $.from_html(`<option>Conditional</option>`);
+var option_content = $.from_html(`<span>Rich</span>`, 1);
+var root_4 = $.from_html(`<option> </option>`);
+var root_5 = $.from_html(`<option>Visible</option>`);
+var root_6 = $.from_html(`<option>Keyed</option>`);
+var select_content = $.from_html(`<!>`, 1);
+var option_content_1 = $.from_html(`<strong>Bold</strong>`, 1);
+var option_content_2 = $.from_html(`<em>Italic</em> text`, 1);
+var option_content_3 = $.from_html(`<span> </span>`, 1);
+var root_7 = $.from_html(`<option><!></option>`);
+var root_8 = $.from_html(`<option>Boundary</option>`);
+var option_content_4 = $.from_html(`<span>Rich in boundary</span>`, 1);
+var root_9 = $.from_html(`<select><option><!></option></select> <select></select> <select><!></select> <select><!></select>  <select><!></select> <select></select> <select><optgroup label="Group"><option><!></option></optgroup></select> <select><optgroup label="Group"></optgroup></select> <select><option><!></option></select> <select></select> <select><!></select> <select><!></select> <select><!></select> <select><!></select>  <select><!></select> <select><!></select> <select><optgroup label="Group"><!></optgroup></select>  <select><optgroup label="Group"><!></optgroup></select> <select><option><!></option></select> <select><!></select>  <select><!></select>`, 1);
+
+export default function Select_with_rich_content($$anchor) {
+	let items = [1, 2, 3];
+	let show = true;
+	let html = '<option>From HTML</option>';
+	var fragment = root_9();
+	var select = $.first_child(fragment);
+	var option_4 = $.child(select);
+
+	$.customizable_select(option_4, () => {
+		var anchor = $.child(option_4);
+		var fragment_1 = option_content();
+
+		$.append(anchor, fragment_1);
+	});
+
+	$.reset(select);
+
+	var select_1 = $.sibling(select, 2);
+
+	$.each(select_1, 5, () => items, $.index, ($$anchor, item) => {
+		var option_5 = root_4();
+		var text = $.child(option_5, true);
+
+		$.reset(option_5);
+
+		var option_5_value = {};
+
+		$.template_effect(() => {
+			$.set_text(text, $.get(item));
+
+			if (option_5_value !== (option_5_value = $.get(item))) {
+				option_5.__value = $.get(item);
+			}
+		});
+
+		$.append($$anchor, option_5);
+	});
+
+	$.reset(select_1);
+
+	var select_2 = $.sibling(select_1, 2);
+	var node = $.child(select_2);
+
+	{
+		var consequent = ($$anchor) => {
+			var option_6 = root_5();
+
+			$.append($$anchor, option_6);
+		};
+
+		$.if(node, ($$render) => {
+			if (show) $$render(consequent);
+		});
+	}
+
+	$.reset(select_2);
+
+	var select_3 = $.sibling(select_2, 2);
+	var node_1 = $.child(select_3);
+
+	$.key(node_1, () => items, ($$anchor) => {
+		var option_7 = root_6();
+
+		$.append($$anchor, option_7);
+	});
+
+	$.reset(select_3);
+
+	var select_4 = $.sibling(select_3, 2);
+
+	$.customizable_select(select_4, () => {
+		var anchor_1 = $.child(select_4);
+		var fragment_2 = select_content();
+		var node_2 = $.first_child(fragment_2);
+
+		opt(node_2);
+		$.append(anchor_1, fragment_2);
+	});
+
+	var select_5 = $.sibling(select_4, 2);
+
+	$.each(select_5, 5, () => items, $.index, ($$anchor, item) => {
+		const x = $.derived_safe_equal(() => $.get(item) * 2);
+		var option_8 = root_4();
+		var text_1 = $.child(option_8, true);
+
+		$.reset(option_8);
+
+		var option_8_value = {};
+
+		$.template_effect(() => {
+			$.set_text(text_1, $.get(x));
+
+			if (option_8_value !== (option_8_value = $.get(x))) {
+				option_8.__value = $.get(x);
+			}
+		});
+
+		$.append($$anchor, option_8);
+	});
+
+	$.reset(select_5);
+
+	var select_6 = $.sibling(select_5, 2);
+	var optgroup = $.child(select_6);
+	var option_9 = $.child(optgroup);
+
+	$.customizable_select(option_9, () => {
+		var anchor_2 = $.child(option_9);
+		var fragment_3 = option_content_1();
+
+		$.append(anchor_2, fragment_3);
+	});
+
+	$.reset(optgroup);
+	$.reset(select_6);
+
+	var select_7 = $.sibling(select_6, 2);
+	var optgroup_1 = $.child(select_7);
+
+	$.each(optgroup_1, 5, () => items, $.index, ($$anchor, item) => {
+		var option_10 = root_4();
+		var text_2 = $.child(option_10, true);
+
+		$.reset(option_10);
+
+		var option_10_value = {};
+
+		$.template_effect(() => {
+			$.set_text(text_2, $.get(item));
+
+			if (option_10_value !== (option_10_value = $.get(item))) {
+				option_10.__value = $.get(item);
+			}
+		});
+
+		$.append($$anchor, option_10);
+	});
+
+	$.reset(optgroup_1);
+	$.reset(select_7);
+
+	var select_8 = $.sibling(select_7, 2);
+	var option_11 = $.child(select_8);
+
+	$.customizable_select(option_11, () => {
+		var anchor_3 = $.child(option_11);
+		var fragment_4 = option_content_2();
+
+		$.next();
+		$.append(anchor_3, fragment_4);
+	});
+
+	option_11.value = option_11.__value = 'a';
+	$.reset(select_8);
+
+	var select_9 = $.sibling(select_8, 2);
+
+	$.each(select_9, 5, () => items, $.index, ($$anchor, item) => {
+		var option_12 = root_7();
+
+		$.customizable_select(option_12, () => {
+			var anchor_4 = $.child(option_12);
+			var fragment_5 = option_content_3();
+			var span = $.first_child(fragment_5);
+			var text_3 = $.child(span, true);
+
+			$.reset(span);
+			$.template_effect(() => $.set_text(text_3, $.get(item)));
+			$.append(anchor_4, fragment_5);
+		});
+
+		$.append($$anchor, option_12);
+	});
+
+	$.reset(select_9);
+
+	var select_10 = $.sibling(select_9, 2);
+	var node_3 = $.child(select_10);
+
+	{
+		var consequent_1 = ($$anchor) => {
+			var fragment_6 = $.comment();
+			var node_4 = $.first_child(fragment_6);
+
+			$.each(node_4, 1, () => items, $.index, ($$anchor, item) => {
+				var option_13 = root_4();
+				var text_4 = $.child(option_13, true);
+
+				$.reset(option_13);
+
+				var option_13_value = {};
+
+				$.template_effect(() => {
+					$.set_text(text_4, $.get(item));
+
+					if (option_13_value !== (option_13_value = $.get(item))) {
+						option_13.__value = $.get(item);
+					}
+				});
+
+				$.append($$anchor, option_13);
+			});
+
+			$.append($$anchor, fragment_6);
+		};
+
+		$.if(node_3, ($$render) => {
+			if (show) $$render(consequent_1);
+		});
+	}
+
+	$.reset(select_10);
+
+	var select_11 = $.sibling(select_10, 2);
+	var node_5 = $.child(select_11);
+
+	$.boundary(node_5, {}, ($$anchor) => {
+		var option_14 = root_8();
+
+		$.append($$anchor, option_14);
+	});
+
+	$.reset(select_11);
+
+	var select_12 = $.sibling(select_11, 2);
+	var node_6 = $.child(select_12);
+
+	$.boundary(node_6, {}, ($$anchor) => {
+		var option_15 = root_7();
+
+		$.customizable_select(option_15, () => {
+			var anchor_5 = $.child(option_15);
+			var fragment_7 = option_content_4();
+
+			$.append(anchor_5, fragment_7);
+		});
+
+		$.append($$anchor, option_15);
+	});
+
+	$.reset(select_12);
+
+	var select_13 = $.sibling(select_12, 2);
+
+	$.customizable_select(select_13, () => {
+		var anchor_6 = $.child(select_13);
+		var fragment_8 = select_content();
+		var node_7 = $.first_child(fragment_8);
+
+		Option(node_7, {});
+		$.append(anchor_6, fragment_8);
+	});
+
+	var select_14 = $.sibling(select_13, 2);
+
+	$.customizable_select(select_14, () => {
+		var anchor_7 = $.child(select_14);
+		var fragment_9 = select_content();
+		var node_8 = $.first_child(fragment_9);
+
+		option_snippet(node_8);
+		$.append(anchor_7, fragment_9);
+	});
+
+	var select_15 = $.sibling(select_14, 2);
+
+	$.customizable_select(select_15, () => {
+		var anchor_8 = $.child(select_15);
+		var fragment_10 = select_content();
+		var node_9 = $.first_child(fragment_10);
+
+		$.html(node_9, () => html);
+		$.append(anchor_8, fragment_10);
+	});
+
+	var select_16 = $.sibling(select_15, 2);
+	var optgroup_2 = $.child(select_16);
+
+	$.customizable_select(optgroup_2, () => {
+		var anchor_9 = $.child(optgroup_2);
+		var fragment_11 = select_content();
+		var node_10 = $.first_child(fragment_11);
+
+		Option(node_10, {});
+		$.append(anchor_9, fragment_11);
+	});
+
+	$.reset(select_16);
+
+	var select_17 = $.sibling(select_16, 2);
+	var optgroup_3 = $.child(select_17);
+
+	$.customizable_select(optgroup_3, () => {
+		var anchor_10 = $.child(optgroup_3);
+		var fragment_12 = select_content();
+		var node_11 = $.first_child(fragment_12);
+
+		option_snippet2(node_11);
+		$.append(anchor_10, fragment_12);
+	});
+
+	$.reset(select_17);
+
+	var select_18 = $.sibling(select_17, 2);
+	var option_16 = $.child(select_18);
+
+	$.customizable_select(option_16, () => {
+		var anchor_11 = $.child(option_16);
+		var fragment_13 = select_content();
+		var node_12 = $.first_child(fragment_13);
+
+		$.html(node_12, () => '<strong>Bold HTML</strong>');
+		$.append(anchor_11, fragment_13);
+	});
+
+	$.reset(select_18);
+
+	var select_19 = $.sibling(select_18, 2);
+
+	$.customizable_select(select_19, () => {
+		var anchor_12 = $.child(select_19);
+		var fragment_14 = select_content();
+		var node_13 = $.first_child(fragment_14);
+
+		$.each(node_13, 1, () => items, $.index, ($$anchor, item) => {
+			Option($$anchor, {});
+		});
+
+		$.append(anchor_12, fragment_14);
+	});
+
+	var select_20 = $.sibling(select_19, 2);
+
+	$.customizable_select(select_20, () => {
+		var anchor_13 = $.child(select_20);
+		var fragment_16 = select_content();
+		var node_14 = $.first_child(fragment_16);
+
+		{
+			var consequent_2 = ($$anchor) => {
+				conditional_option($$anchor);
+			};
+
+			$.if(node_14, ($$render) => {
+				if (show) $$render(consequent_2);
+			});
+		}
+
+		$.append(anchor_13, fragment_16);
+	});
+
+	$.append($$anchor, fragment);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/server/Option.svelte.js b/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/server/Option.svelte.js
new file mode 100644
index 0000000000..1c76c9493b
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/server/Option.svelte.js
@@ -0,0 +1,7 @@
+import * as $ from 'svelte/internal/server';
+
+export default function Option($$renderer) {
+	$$renderer.option({}, ($$renderer) => {
+		$$renderer.push(`Component Option`);
+	});
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/server/index.svelte.js
new file mode 100644
index 0000000000..bc346b4b0a
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/select-with-rich-content/_expected/server/index.svelte.js
@@ -0,0 +1,237 @@
+import * as $ from 'svelte/internal/server';
+import Option from './Option.svelte';
+
+function opt($$renderer) {
+	$$renderer.option({}, ($$renderer) => {
+		$$renderer.push(`Snippet`);
+	});
+}
+
+function option_snippet($$renderer) {
+	$$renderer.option({}, ($$renderer) => {
+		$$renderer.push(`Rendered`);
+	});
+}
+
+function option_snippet2($$renderer) {
+	$$renderer.option({}, ($$renderer) => {
+		$$renderer.push(`Rendered in group`);
+	});
+}
+
+function conditional_option($$renderer) {
+	$$renderer.option({}, ($$renderer) => {
+		$$renderer.push(`Conditional`);
+	});
+}
+
+export default function Select_with_rich_content($$renderer) {
+	let items = [1, 2, 3];
+	let show = true;
+	let html = '<option>From HTML</option>';
+
+	$$renderer.push(`<select>`);
+
+	$$renderer.option(
+		{},
+		($$renderer) => {
+			$$renderer.push(`<span>Rich</span>`);
+		},
+		void 0,
+		void 0,
+		void 0,
+		void 0,
+		true
+	);
+
+	$$renderer.push(`</select> <select><!--[-->`);
+
+	const each_array = $.ensure_array_like(items);
+
+	for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
+		let item = each_array[$$index];
+
+		$$renderer.option({}, item);
+	}
+
+	$$renderer.push(`<!--]--></select> <select>`);
+
+	if (show) {
+		$$renderer.push('<!--[0-->');
+
+		$$renderer.option({}, ($$renderer) => {
+			$$renderer.push(`Visible`);
+		});
+	} else {
+		$$renderer.push('<!--[-1-->');
+	}
+
+	$$renderer.push(`<!--]--></select> <select><!---->`);
+
+	{
+		$$renderer.option({}, ($$renderer) => {
+			$$renderer.push(`Keyed`);
+		});
+	}
+
+	$$renderer.push(`<!----></select>  <select>`);
+	opt($$renderer);
+	$$renderer.push(`<!----><!></select> <select><!--[-->`);
+
+	const each_array_1 = $.ensure_array_like(items);
+
+	for (let $$index_1 = 0, $$length = each_array_1.length; $$index_1 < $$length; $$index_1++) {
+		let item = each_array_1[$$index_1];
+		const x = item * 2;
+
+		$$renderer.option({}, x);
+	}
+
+	$$renderer.push(`<!--]--></select> <select><optgroup label="Group">`);
+
+	$$renderer.option(
+		{},
+		($$renderer) => {
+			$$renderer.push(`<strong>Bold</strong>`);
+		},
+		void 0,
+		void 0,
+		void 0,
+		void 0,
+		true
+	);
+
+	$$renderer.push(`</optgroup></select> <select><optgroup label="Group"><!--[-->`);
+
+	const each_array_2 = $.ensure_array_like(items);
+
+	for (let $$index_2 = 0, $$length = each_array_2.length; $$index_2 < $$length; $$index_2++) {
+		let item = each_array_2[$$index_2];
+
+		$$renderer.option({}, item);
+	}
+
+	$$renderer.push(`<!--]--></optgroup></select> <select>`);
+
+	$$renderer.option(
+		{ value: 'a' },
+		($$renderer) => {
+			$$renderer.push(`<em>Italic</em> text`);
+		},
+		void 0,
+		void 0,
+		void 0,
+		void 0,
+		true
+	);
+
+	$$renderer.push(`</select> <select><!--[-->`);
+
+	const each_array_3 = $.ensure_array_like(items);
+
+	for (let $$index_3 = 0, $$length = each_array_3.length; $$index_3 < $$length; $$index_3++) {
+		let item = each_array_3[$$index_3];
+
+		$$renderer.option(
+			{},
+			($$renderer) => {
+				$$renderer.push(`<span>${$.escape(item)}</span>`);
+			},
+			void 0,
+			void 0,
+			void 0,
+			void 0,
+			true
+		);
+	}
+
+	$$renderer.push(`<!--]--></select> <select>`);
+
+	if (show) {
+		$$renderer.push('<!--[0-->');
+		$$renderer.push(`<!--[-->`);
+
+		const each_array_4 = $.ensure_array_like(items);
+
+		for (let $$index_4 = 0, $$length = each_array_4.length; $$index_4 < $$length; $$index_4++) {
+			let item = each_array_4[$$index_4];
+
+			$$renderer.option({}, item);
+		}
+
+		$$renderer.push(`<!--]-->`);
+	} else {
+		$$renderer.push('<!--[-1-->');
+	}
+
+	$$renderer.push(`<!--]--></select> <select>`);
+	$$renderer.push(`<!--[-->`);
+
+	{
+		$$renderer.option({}, ($$renderer) => {
+			$$renderer.push(`Boundary`);
+		});
+	}
+
+	$$renderer.push(`<!--]-->`);
+	$$renderer.push(`</select> <select>`);
+	$$renderer.push(`<!--[-->`);
+
+	{
+		$$renderer.option(
+			{},
+			($$renderer) => {
+				$$renderer.push(`<span>Rich in boundary</span>`);
+			},
+			void 0,
+			void 0,
+			void 0,
+			void 0,
+			true
+		);
+	}
+
+	$$renderer.push(`<!--]-->`);
+	$$renderer.push(`</select> <select>`);
+	Option($$renderer, {});
+	$$renderer.push(`<!----><!></select>  <select>`);
+	option_snippet($$renderer);
+	$$renderer.push(`<!----><!></select> <select>${$.html(html)}<!></select> <select><optgroup label="Group">`);
+	Option($$renderer, {});
+	$$renderer.push(`<!----><!></optgroup></select>  <select><optgroup label="Group">`);
+	option_snippet2($$renderer);
+	$$renderer.push(`<!----><!></optgroup></select> <select>`);
+
+	$$renderer.option(
+		{},
+		($$renderer) => {
+			$$renderer.push(`${$.html('<strong>Bold HTML</strong>')}`);
+		},
+		void 0,
+		void 0,
+		void 0,
+		void 0,
+		true
+	);
+
+	$$renderer.push(`</select> <select><!--[-->`);
+
+	const each_array_5 = $.ensure_array_like(items);
+
+	for (let $$index_5 = 0, $$length = each_array_5.length; $$index_5 < $$length; $$index_5++) {
+		let item = each_array_5[$$index_5];
+
+		Option($$renderer, {});
+	}
+
+	$$renderer.push(`<!--]--><!></select>  <select>`);
+
+	if (show) {
+		$$renderer.push('<!--[0-->');
+		conditional_option($$renderer);
+	} else {
+		$$renderer.push('<!--[-1-->');
+	}
+
+	$$renderer.push(`<!--]--><!></select>`);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/select-with-rich-content/index.svelte b/packages/svelte/tests/snapshot/samples/select-with-rich-content/index.svelte
new file mode 100644
index 0000000000..0363bf6a96
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/select-with-rich-content/index.svelte
@@ -0,0 +1,157 @@
+<script>
+	let items = [1, 2, 3];
+	let show = true;
+	let html = '<option>From HTML</option>';
+
+	import Option from './Option.svelte';
+</script>
+
+<!-- select with rich option (has span inside) - SHOULD use customizable_select_element -->
+<select>
+	<option><span>Rich</span></option>
+</select>
+
+<!-- select with each containing plain options - should NOT use customizable_select_element -->
+<select>
+	{#each items as item}
+		<option>{item}</option>
+	{/each}
+</select>
+
+<!-- select with if containing plain options - should NOT use customizable_select_element -->
+<select>
+	{#if show}
+		<option>Visible</option>
+	{/if}
+</select>
+
+<!-- select with key containing plain options - should NOT use customizable_select_element -->
+<select>
+	{#key items}
+		<option>Keyed</option>
+	{/key}
+</select>
+
+<!-- select with snippet defined at top level and rendered - should NOT use customizable_select_element -->
+{#snippet opt()}
+	<option>Snippet</option>
+{/snippet}
+<select>
+	{@render opt()}
+</select>
+
+<!-- select with const inside each (should be ignored) - should NOT use customizable_select_element -->
+<select>
+	{#each items as item}
+		{@const x = item * 2}
+		<option>{x}</option>
+	{/each}
+</select>
+
+<!-- optgroup with rich option - SHOULD use customizable_select_element -->
+<select>
+	<optgroup label="Group">
+		<option><strong>Bold</strong></option>
+	</optgroup>
+</select>
+
+<!-- optgroup with each containing plain options - should NOT use customizable_select_element -->
+<select>
+	<optgroup label="Group">
+		{#each items as item}
+			<option>{item}</option>
+		{/each}
+	</optgroup>
+</select>
+
+<!-- option with rich content (span) - SHOULD use customizable_select_element -->
+<select>
+	<option value="a"><em>Italic</em> text</option>
+</select>
+
+<!-- nested: select > each > option with rich content - SHOULD use customizable_select_element on option -->
+<select>
+	{#each items as item}
+		<option><span>{item}</span></option>
+	{/each}
+</select>
+
+<!-- nested: select > if > each > plain options - should NOT use customizable_select_element -->
+<select>
+	{#if show}
+		{#each items as item}
+			<option>{item}</option>
+		{/each}
+	{/if}
+</select>
+
+<!-- select with svelte:boundary containing plain options - should NOT use customizable_select_element -->
+<select>
+	<svelte:boundary>
+		<option>Boundary</option>
+	</svelte:boundary>
+</select>
+
+<!-- select with svelte:boundary containing rich options - SHOULD use customizable_select_element on option -->
+<select>
+	<svelte:boundary>
+		<option><span>Rich in boundary</span></option>
+	</svelte:boundary>
+</select>
+
+<!-- select with Component - SHOULD be treated as rich content -->
+<select>
+	<Option />
+</select>
+
+<!-- select with @render snippet - SHOULD be treated as rich content -->
+{#snippet option_snippet()}
+	<option>Rendered</option>
+{/snippet}
+<select>
+	{@render option_snippet()}
+</select>
+
+<!-- select with @html - SHOULD be treated as rich content -->
+<select>
+	{@html html}
+</select>
+
+<!-- optgroup with Component - SHOULD be treated as rich content -->
+<select>
+	<optgroup label="Group">
+		<Option />
+	</optgroup>
+</select>
+
+<!-- optgroup with @render - SHOULD be treated as rich content -->
+{#snippet option_snippet2()}
+	<option>Rendered in group</option>
+{/snippet}
+<select>
+	<optgroup label="Group">
+		{@render option_snippet2()}
+	</optgroup>
+</select>
+
+<!-- option with @html inside - SHOULD use customizable_select_element -->
+<select>
+	<option>{@html '<strong>Bold HTML</strong>'}</option>
+</select>
+
+<!-- each block inside select with Component - SHOULD be treated as rich -->
+<select>
+	{#each items as item}
+		<Option />
+	{/each}
+</select>
+
+<!-- if block inside select with @render - SHOULD be treated as rich -->
+{#snippet conditional_option()}
+	<option>Conditional</option>
+{/snippet}
+<select>
+	{#if show}
+		{@render conditional_option()}
+	{/if}
+</select>
diff --git a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
index 8dd7df82cf..78147659ff 100644
--- a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
@@ -1,7 +1,7 @@
-import "svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
+import 'svelte/internal/disclose-version';
+import * as $ from 'svelte/internal/client';
 
-var root = $.template(`<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1> </h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> <!> <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements></custom-elements></cant-skip> <div><input></div> <div><source></div> <select><option>a</option></select> <img src="..." alt="" loading="lazy"> <div><img src="..." alt="" loading="lazy"></div>`, 3);
+var root = $.from_html(`<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1> </h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> <!> <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements></custom-elements></cant-skip> <div><input/></div> <div><source/></div> <select><option>a</option></select> <img src="..." alt="" loading="lazy"/> <div><img src="..." alt="" loading="lazy"/></div>`, 3);
 
 export default function Skip_static_subtree($$anchor, $$props) {
 	var fragment = root();
@@ -13,14 +13,14 @@ export default function Skip_static_subtree($$anchor, $$props) {
 
 	var node = $.sibling(h1, 10);
 
-	$.html(node, () => $$props.content, false, false);
+	$.html(node, () => $$props.content);
 	$.next(14);
 	$.reset(main);
 
 	var cant_skip = $.sibling(main, 2);
 	var custom_elements = $.child(cant_skip);
 
-	$.set_custom_element_data(custom_elements, "with", "attributes");
+	$.set_custom_element_data(custom_elements, 'with', 'attributes');
 	$.reset(cant_skip);
 
 	var div = $.sibling(cant_skip, 2);
@@ -38,16 +38,12 @@ export default function Skip_static_subtree($$anchor, $$props) {
 	var select = $.sibling(div_1, 2);
 	var option = $.child(select);
 
-	option.value = null == (option.__value = "a") ? "" : "a";
+	option.value = option.__value = 'a';
 	$.reset(select);
 
 	var img = $.sibling(select, 2);
-	var div_2 = $.sibling(img, 2);
-	var img_1 = $.child(div_2);
 
-	$.reset(div_2);
+	$.next(2);
 	$.template_effect(() => $.set_text(text, $$props.title));
-	$.handle_lazy_img(img);
-	$.handle_lazy_img(img_1);
 	$.append($$anchor, fragment);
 }
\ 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 309f5a2b57..b1babb514c 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
@@ -1,7 +1,13 @@
-import * as $ from "svelte/internal/server";
+import * as $ from 'svelte/internal/server';
 
-export default function Skip_static_subtree($$payload, $$props) {
+export default function Skip_static_subtree($$renderer, $$props) {
 	let { title, content } = $$props;
 
-	$$payload.out += `<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1>${$.escape(title)}</h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> ${$.html(content)} <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements with="attributes"></custom-elements></cant-skip> <div><input autofocus></div> <div><source muted></div> <select><option value="a">a</option></select> <img src="..." alt="" loading="lazy"> <div><img src="..." alt="" loading="lazy"></div>`;
+	$$renderer.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>`);
+
+	$$renderer.option({ value: 'a' }, ($$renderer) => {
+		$$renderer.push(`a`);
+	});
+
+	$$renderer.push(`</select> <img src="..." alt="" loading="lazy"/> <div><img src="..." alt="" loading="lazy"/></div>`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/client/index.svelte.js
index c24023c8a4..f3272f0414 100644
--- a/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/client/index.svelte.js
@@ -1,18 +1,19 @@
-import "svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
-
-function reset(_, str, tpl) {
-	$.set(str, '');
-	$.set(str, ``);
-	$.set(tpl, '');
-	$.set(tpl, ``);
-}
+import 'svelte/internal/disclose-version';
+import * as $ from 'svelte/internal/client';
 
-var root = $.template(`<input> <input> <button>reset</button>`, 1);
+var root = $.from_html(`<input/> <input/> <button>reset</button>`, 1);
 
 export default function State_proxy_literal($$anchor) {
 	let str = $.state('');
 	let tpl = $.state(``);
+
+	function reset() {
+		$.set(str, '');
+		$.set(str, ``);
+		$.set(tpl, '');
+		$.set(tpl, ``);
+	}
+
 	var fragment = root();
 	var input = $.first_child(fragment);
 
@@ -24,10 +25,10 @@ export default function State_proxy_literal($$anchor) {
 
 	var button = $.sibling(input_1, 2);
 
-	button.__click = [reset, str, tpl];
 	$.bind_value(input, () => $.get(str), ($$value) => $.set(str, $$value));
 	$.bind_value(input_1, () => $.get(tpl), ($$value) => $.set(tpl, $$value));
+	$.delegated('click', button, reset);
 	$.append($$anchor, fragment);
 }
 
-$.delegate(["click"]);
\ No newline at end of file
+$.delegate(['click']);
\ 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 3424f807ab..4ab7f90c58 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
@@ -1,6 +1,6 @@
-import * as $ from "svelte/internal/server";
+import * as $ from 'svelte/internal/server';
 
-export default function State_proxy_literal($$payload) {
+export default function State_proxy_literal($$renderer) {
 	let str = '';
 	let tpl = ``;
 
@@ -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>`;
+	$$renderer.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/svelte-element/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/svelte-element/_expected/client/index.svelte.js
index a4bbea582b..2270005ee0 100644
--- a/packages/svelte/tests/snapshot/samples/svelte-element/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/svelte-element/_expected/client/index.svelte.js
@@ -1,8 +1,8 @@
-import "svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
+import 'svelte/internal/disclose-version';
+import * as $ from 'svelte/internal/client';
 
 export default function Svelte_element($$anchor, $$props) {
-	let tag = $.prop($$props, "tag", 3, 'hr');
+	let tag = $.prop($$props, 'tag', 3, 'hr');
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 
diff --git a/packages/svelte/tests/snapshot/samples/svelte-element/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/svelte-element/_expected/server/index.svelte.js
index 4a766f7de5..fc97686bb1 100644
--- a/packages/svelte/tests/snapshot/samples/svelte-element/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/svelte-element/_expected/server/index.svelte.js
@@ -1,7 +1,7 @@
-import * as $ from "svelte/internal/server";
+import * as $ from 'svelte/internal/server';
 
-export default function Svelte_element($$payload, $$props) {
+export default function Svelte_element($$renderer, $$props) {
 	let { tag = 'hr' } = $$props;
 
-	$.element($$payload, tag);
+	$.element($$renderer, tag);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/text-nodes-deriveds/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/text-nodes-deriveds/_expected/client/index.svelte.js
index 8ba14526aa..4148a546c8 100644
--- a/packages/svelte/tests/snapshot/samples/text-nodes-deriveds/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/text-nodes-deriveds/_expected/client/index.svelte.js
@@ -1,7 +1,7 @@
-import "svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
+import 'svelte/internal/disclose-version';
+import * as $ from 'svelte/internal/client';
 
-var root = $.template(`<p> </p>`);
+var root = $.from_html(`<p> </p>`);
 
 export default function Text_nodes_deriveds($$anchor) {
 	let count1 = 0;
@@ -16,11 +16,9 @@ export default function Text_nodes_deriveds($$anchor) {
 	}
 
 	var p = root();
-	const stringified_text = $.derived(() => text1() ?? "");
-	const stringified_text_1 = $.derived(() => text2() ?? "");
 	var text = $.child(p);
 
-	$.template_effect(() => $.set_text(text, `${$.get(stringified_text)}${$.get(stringified_text_1)}`));
 	$.reset(p);
+	$.template_effect(($0, $1) => $.set_text(text, `${$0 ?? ''}${$1 ?? ''}`), [() => text1(), () => text2()]);
 	$.append($$anchor, p);
 }
\ 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 f7dc4176e4..f886f9fbe3 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
@@ -1,6 +1,6 @@
-import * as $ from "svelte/internal/server";
+import * as $ from 'svelte/internal/server';
 
-export default function Text_nodes_deriveds($$payload) {
+export default function Text_nodes_deriveds($$renderer) {
 	let count1 = 0;
 	let count2 = 0;
 
@@ -12,5 +12,5 @@ export default function Text_nodes_deriveds($$payload) {
 		return count2;
 	}
 
-	$$payload.out += `<p>${$.escape(text1())}${$.escape(text2())}</p>`;
+	$$renderer.push(`<p>${$.escape(text1())}${$.escape(text2())}</p>`);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/test.ts b/packages/svelte/tests/snapshot/test.ts
index 88cf9193c3..0a591c6e2a 100644
--- a/packages/svelte/tests/snapshot/test.ts
+++ b/packages/svelte/tests/snapshot/test.ts
@@ -1,6 +1,6 @@
 import * as fs from 'node:fs';
 import { assert, expect } from 'vitest';
-import glob from 'tiny-glob/sync.js';
+import { globSync } from 'tinyglobby';
 import { compile_directory } from '../helpers.js';
 import { suite, type BaseTest } from '../suite.js';
 import { VERSION } from 'svelte/compiler';
@@ -18,8 +18,8 @@ const { test, run } = suite<SnapshotTest>(async (config, cwd) => {
 		fs.rmSync(`${cwd}/_expected`, { recursive: true, force: true });
 		fs.cpSync(`${cwd}/_output`, `${cwd}/_expected`, { recursive: true, force: true });
 	} else {
-		const actual = glob('**', { cwd: `${cwd}/_output`, filesOnly: true });
-		const expected = glob('**', { cwd: `${cwd}/_expected`, filesOnly: true });
+		const actual = globSync('**', { cwd: `${cwd}/_output`, onlyFiles: true });
+		const expected = globSync('**', { cwd: `${cwd}/_expected`, onlyFiles: true });
 
 		assert.deepEqual(actual, expected);
 
diff --git a/packages/svelte/tests/sourcemaps/samples/attached-sourcemap/_config.js b/packages/svelte/tests/sourcemaps/samples/attached-sourcemap/_config.js
index ee9a3d92c4..3a292ff428 100644
--- a/packages/svelte/tests/sourcemaps/samples/attached-sourcemap/_config.js
+++ b/packages/svelte/tests/sourcemaps/samples/attached-sourcemap/_config.js
@@ -57,7 +57,7 @@ export default test({
 		{ str: 'replace_me_script', strGenerated: 'done_replace_script_2' },
 		{ str: 'done_replace_script_2', idxGenerated: 1 }
 	],
-	css: [{ str: '.replace_me_style', strGenerated: '.done_replace_style_2.svelte-o6vre' }],
+	css: [{ str: '.replace_me_style', strGenerated: '.done_replace_style_2.svelte-1vsrjd4' }],
 	test({ assert, code_preprocessed, code_css }) {
 		assert.equal(
 			code_preprocessed.includes('\n/*# sourceMappingURL=data:application/json;base64,'),
diff --git a/packages/svelte/tests/sourcemaps/samples/attached-sourcemap/input.svelte b/packages/svelte/tests/sourcemaps/samples/attached-sourcemap/input.svelte
index 21a47a72a9..715bbda8d9 100644
--- a/packages/svelte/tests/sourcemaps/samples/attached-sourcemap/input.svelte
+++ b/packages/svelte/tests/sourcemaps/samples/attached-sourcemap/input.svelte
@@ -8,4 +8,4 @@
 		replace_me_script = 'hello'
 	;
 </script>
-<h1 class="done_replace_style_2">{done_replace_script_2}</h1>
+<h1 class="done_replace_style_2">{Math.random() < 1 && done_replace_script_2}</h1>
diff --git a/packages/svelte/tests/sourcemaps/samples/css-injected-map/_config.js b/packages/svelte/tests/sourcemaps/samples/css-injected-map/_config.js
index 74a2185076..c2b2fe766a 100644
--- a/packages/svelte/tests/sourcemaps/samples/css-injected-map/_config.js
+++ b/packages/svelte/tests/sourcemaps/samples/css-injected-map/_config.js
@@ -30,7 +30,7 @@ export default test({
 	async test({ assert, code_client }) {
 		// Check that the css source map embedded in the js is accurate
 		const match = code_client.match(
-			/code: "(.*?)(?:\\n\/\*# sourceMappingURL=data:(.*?);charset=(.*?);base64,(.*?) \*\/)?"/
+			/code: '(.*?)(?:\\n\/\*# sourceMappingURL=data:(.*?);charset=(.*?);base64,(.*?) \*\/)?'/
 		);
 
 		assert.ok(match);
diff --git a/packages/svelte/tests/sourcemaps/samples/css/_config.js b/packages/svelte/tests/sourcemaps/samples/css/_config.js
index df3c83c703..fce38d401c 100644
--- a/packages/svelte/tests/sourcemaps/samples/css/_config.js
+++ b/packages/svelte/tests/sourcemaps/samples/css/_config.js
@@ -1,5 +1,5 @@
 import { test } from '../../test';
 
 export default test({
-	css: [{ str: '.foo', strGenerated: '.foo.svelte-sg04hs' }]
+	css: [{ str: '.foo', strGenerated: '.foo.svelte-1eyw86p' }]
 });
diff --git a/packages/svelte/tests/sourcemaps/test.ts b/packages/svelte/tests/sourcemaps/test.ts
index c654258b34..b9d0e5abdc 100644
--- a/packages/svelte/tests/sourcemaps/test.ts
+++ b/packages/svelte/tests/sourcemaps/test.ts
@@ -8,9 +8,9 @@ import { decode } from '@jridgewell/sourcemap-codec';
 type SourceMapEntry =
 	| string
 	| {
-			/** If not the first occurence, but the nth should be found */
+			/** If not the first occurrence, but the nth should be found */
 			idxOriginal?: number;
-			/** If not the first occurence, but the nth should be found */
+			/** If not the first occurrence, but the nth should be found */
 			idxGenerated?: number;
 			/** The original string to find */
 			str: string;
@@ -31,7 +31,21 @@ interface SourcemapTest extends BaseTest {
 	/** The expected `sources` array in the source map */
 	css_map_sources?: string[];
 	test?: (obj: {
-		assert: typeof assert;
+		// chai 5's `asserts value` signatures trip TS2775 in `_config.js` files
+		// where `assert` is a destructured parameter (non-explicit). Override
+		// the assertion methods we use with non-assertion equivalents.
+		assert: Omit<
+			typeof assert,
+			'ok' | 'isOk' | 'isTrue' | 'isFalse' | 'exists' | 'notExists' | 'instanceOf'
+		> & {
+			ok(value: unknown, message?: string): void;
+			isOk(value: unknown, message?: string): void;
+			isTrue(value: unknown, message?: string): void;
+			isFalse(value: unknown, message?: string): void;
+			exists(value: unknown, message?: string): void;
+			notExists(value: unknown, message?: string): void;
+			instanceOf(value: unknown, type: Function, message?: string): void;
+		};
 		input: string;
 		map_preprocessed: any;
 		code_preprocessed: string;
@@ -96,6 +110,20 @@ const { test, run } = suite<SourcemapTest>(async (config, cwd) => {
 
 		const decoded = decode(map.mappings);
 
+		/*
+		Decoded sourcemap mappings contain absolute line/column numbers.
+		Negative values are invalid and can cause errors in downstream processing
+		*/
+		for (let l = 0; l < decoded.length; l++) {
+			for (let m of decoded[l]) {
+				if (m.some((i) => i < 0)) {
+					throw new Error(
+						`Invalid mapping with negative value ${JSON.stringify(m)} at line ${l} of the decoded mappings of ${info} sourcemap\n${JSON.stringify(map)}`
+					);
+				}
+			}
+		}
+
 		try {
 			for (let entry of entries) {
 				entry = typeof entry === 'string' ? { str: entry } : entry;
diff --git a/packages/svelte/tests/store/test.ts b/packages/svelte/tests/store/test.ts
index b23ea195d6..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);
-		$.flush_sync();
+		flushSync();
 		assert.deepEqual(log, [0, 1]);
 
 		unsubscribe();
@@ -625,7 +626,7 @@ describe('toStore', () => {
 		assert.deepEqual(log, [0]);
 
 		set(count, 1);
-		$.flush_sync();
+		flushSync();
 		assert.deepEqual(log, [0, 1]);
 
 		store.set(2);
@@ -654,11 +655,11 @@ describe('fromStore', () => {
 		assert.deepEqual(log, [0]);
 
 		store.set(1);
-		$.flush_sync();
+		flushSync();
 		assert.deepEqual(log, [0, 1]);
 
 		count.current = 2;
-		$.flush_sync();
+		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..af36f16e29 100644
--- a/packages/svelte/tests/suite.ts
+++ b/packages/svelte/tests/suite.ts
@@ -4,6 +4,7 @@ import { it } from 'vitest';
 export interface BaseTest {
 	skip?: boolean;
 	solo?: boolean;
+	timeout?: number;
 }
 
 /**
@@ -20,6 +21,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,
@@ -27,7 +31,7 @@ export function suite<Test extends BaseTest>(fn: (config: Test, test_dir: string
 			await for_each_dir<Test>(cwd, samples_dir, (config, dir) => {
 				let it_fn = config.skip ? it.skip : config.solo ? it.only : it;
 
-				it_fn(dir, () => fn(config, `${cwd}/${samples_dir}/${dir}`));
+				it_fn(dir, { timeout: config.timeout }, () => fn(config, `${cwd}/${samples_dir}/${dir}`));
 			});
 		}
 	};
@@ -35,7 +39,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,15 +50,15 @@ 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;
 
-					it_fn(`${dir} (${variant})`, async () => {
+					it_fn(`${dir} (${variant})`, { timeout: config.timeout }, async () => {
 						if (!called_common) {
 							called_common = true;
 							common = await common_setup(config, `${cwd}/${samples_dir}/${dir}`);
diff --git a/packages/svelte/tests/types/bindings.svelte b/packages/svelte/tests/types/bindings.svelte
new file mode 100644
index 0000000000..ce99b2c296
--- /dev/null
+++ b/packages/svelte/tests/types/bindings.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  let focused = $state(false);
+</script>
+
+<input bind:focused={focused} type="text" />
+<textarea bind:focused={focused}></textarea>
+<select bind:focused={focused}></select>
+<div bind:focused={focused}></div>
diff --git a/packages/svelte/tests/types/events.ts b/packages/svelte/tests/types/events.ts
index 77891952be..a334cb5493 100644
--- a/packages/svelte/tests/types/events.ts
+++ b/packages/svelte/tests/types/events.ts
@@ -8,6 +8,8 @@ on(window, 'click', (e) => e.button);
 
 on(document, 'click', (e) => e.button);
 
+on(document.createElement('input'), 'input', (e) => e.currentTarget.value);
+
 on(
 	document.body,
 	'clidck',
diff --git a/packages/svelte/tests/types/motion.ts b/packages/svelte/tests/types/motion.ts
new file mode 100644
index 0000000000..0ba5d1d9c6
--- /dev/null
+++ b/packages/svelte/tests/types/motion.ts
@@ -0,0 +1,22 @@
+import {
+	type TweenOptions,
+	type SpringOptions,
+	type SpringUpdateOptions,
+	type Updater
+} from 'svelte/motion';
+
+let tweenOptions: TweenOptions<number> = {
+	delay: 100,
+	duration: 400
+};
+
+let springOptions: SpringOptions = {
+	stiffness: 0.1,
+	damping: 0.5
+};
+
+let springUpdateOptions: SpringUpdateOptions = {
+	instant: true
+};
+
+let updater: Updater<number> = (target, value) => target + value;
diff --git a/packages/svelte/tests/validator/samples/a11y-anchor-has-content/warnings.json b/packages/svelte/tests/validator/samples/a11y-anchor-has-content/warnings.json
index cd3778a443..3d9adc1cde 100644
--- a/packages/svelte/tests/validator/samples/a11y-anchor-has-content/warnings.json
+++ b/packages/svelte/tests/validator/samples/a11y-anchor-has-content/warnings.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "a11y_consider_explicit_label",
-		"message": "Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute",
+		"message": "Buttons and links should either contain text or have an `aria-label`, `aria-labelledby` or `title` attribute",
 		"start": {
 			"line": 1,
 			"column": 0
diff --git a/packages/svelte/tests/validator/samples/a11y-click-events-have-key-events/warnings.json b/packages/svelte/tests/validator/samples/a11y-click-events-have-key-events/warnings.json
index a1628842fb..a0d033ab16 100644
--- a/packages/svelte/tests/validator/samples/a11y-click-events-have-key-events/warnings.json
+++ b/packages/svelte/tests/validator/samples/a11y-click-events-have-key-events/warnings.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "a11y_click_events_have_key_events",
-		"message": "Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type=\"button\">` or `<a>` might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details",
+		"message": "Visible, non-interactive element `<div>` with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type=\"button\">` or `<a>` might be more appropriate",
 		"start": {
 			"line": 13,
 			"column": 0
@@ -13,7 +13,7 @@
 	},
 	{
 		"code": "a11y_click_events_have_key_events",
-		"message": "Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type=\"button\">` or `<a>` might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details",
+		"message": "Visible, non-interactive element `<div>` with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type=\"button\">` or `<a>` might be more appropriate",
 		"start": {
 			"line": 15,
 			"column": 0
@@ -25,7 +25,7 @@
 	},
 	{
 		"code": "a11y_click_events_have_key_events",
-		"message": "Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type=\"button\">` or `<a>` might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details",
+		"message": "Visible, non-interactive element `<section>` with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type=\"button\">` or `<a>` might be more appropriate",
 		"start": {
 			"line": 18,
 			"column": 0
@@ -37,7 +37,7 @@
 	},
 	{
 		"code": "a11y_click_events_have_key_events",
-		"message": "Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type=\"button\">` or `<a>` might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details",
+		"message": "Visible, non-interactive element `<main>` with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type=\"button\">` or `<a>` might be more appropriate",
 		"start": {
 			"line": 20,
 			"column": 0
@@ -49,7 +49,7 @@
 	},
 	{
 		"code": "a11y_click_events_have_key_events",
-		"message": "Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type=\"button\">` or `<a>` might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details",
+		"message": "Visible, non-interactive element `<article>` with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type=\"button\">` or `<a>` might be more appropriate",
 		"start": {
 			"line": 22,
 			"column": 0
@@ -61,7 +61,7 @@
 	},
 	{
 		"code": "a11y_click_events_have_key_events",
-		"message": "Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type=\"button\">` or `<a>` might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details",
+		"message": "Visible, non-interactive element `<header>` with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type=\"button\">` or `<a>` might be more appropriate",
 		"start": {
 			"line": 24,
 			"column": 0
@@ -73,7 +73,7 @@
 	},
 	{
 		"code": "a11y_click_events_have_key_events",
-		"message": "Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type=\"button\">` or `<a>` might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details",
+		"message": "Visible, non-interactive element `<footer>` with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type=\"button\">` or `<a>` might be more appropriate",
 		"start": {
 			"line": 26,
 			"column": 0
@@ -85,7 +85,7 @@
 	},
 	{
 		"code": "a11y_click_events_have_key_events",
-		"message": "Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type=\"button\">` or `<a>` might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details",
+		"message": "Visible, non-interactive element `<footer>` with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type=\"button\">` or `<a>` might be more appropriate",
 		"start": {
 			"line": 28,
 			"column": 0
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..023ca920e9 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
@@ -4,9 +4,24 @@
 <button aria-label="Valid empty button"></button>
 <a href="/#" aria-label="Valid empty link"></a>
 
+<button title="Valid empty button"></button>
+<a href="/#" title="Valid empty link"></a>
+
 <button aria-hidden='true'></button>
+<button inert></button>
 <a href="/#" aria-hidden='true'><b></b></a>
 
 <button>Click me</button>
 <a href="/#">Link text</a>
 <a href="/#"><img src="./icon.svg" alt="Link text"></a>
+
+<select>
+	<!-- valid if button contains <selectedcontent> -->
+	<button>
+		<selectedcontent></selectedcontent>
+	</button>
+
+	<option>one</option>
+	<option>two</option>
+	<option>three</option>
+</select>
diff --git a/packages/svelte/tests/validator/samples/a11y-consider-explicit-label/warnings.json b/packages/svelte/tests/validator/samples/a11y-consider-explicit-label/warnings.json
index 2dcecf08b3..bc29076184 100644
--- a/packages/svelte/tests/validator/samples/a11y-consider-explicit-label/warnings.json
+++ b/packages/svelte/tests/validator/samples/a11y-consider-explicit-label/warnings.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "a11y_consider_explicit_label",
-		"message": "Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute",
+		"message": "Buttons and links should either contain text or have an `aria-label`, `aria-labelledby` or `title` attribute",
 		"start": {
 			"line": 1,
 			"column": 0
@@ -13,7 +13,7 @@
 	},
 	{
 		"code": "a11y_consider_explicit_label",
-		"message": "Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute",
+		"message": "Buttons and links should either contain text or have an `aria-label`, `aria-labelledby` or `title` attribute",
 		"start": {
 			"line": 2,
 			"column": 0
diff --git a/packages/svelte/tests/validator/samples/a11y-label-has-associated-control/input.svelte b/packages/svelte/tests/validator/samples/a11y-label-has-associated-control/input.svelte
index 124888c089..f47743b33b 100644
--- a/packages/svelte/tests/validator/samples/a11y-label-has-associated-control/input.svelte
+++ b/packages/svelte/tests/validator/samples/a11y-label-has-associated-control/input.svelte
@@ -10,3 +10,4 @@
 <label>E <span></span></label>
 <label>F {#if true}<input type="text" />{/if}</label>
 <LabelComponent>G <input type="text" /></LabelComponent>
+<label {...forMightBeInHere}>E <span></span></label>
\ No newline at end of file
diff --git a/packages/svelte/tests/validator/samples/a11y-media-has-caption/input.svelte b/packages/svelte/tests/validator/samples/a11y-media-has-caption/input.svelte
index 2e479d97da..9d83ca8771 100644
--- a/packages/svelte/tests/validator/samples/a11y-media-has-caption/input.svelte
+++ b/packages/svelte/tests/validator/samples/a11y-media-has-caption/input.svelte
@@ -1,6 +1,7 @@
-<video><track kind="captions"/></video>
-<video></video>
-<video><track /></video>
+<video src="x"><track kind="captions"/></video>
+<video src="x"></video>
+<video src="x"><track /></video>
 <audio></audio>
-<video aria-hidden="true"></video>
-<video aria-hidden="false"></video>
+<video src="x" aria-hidden="true"></video>
+<video src="x" aria-hidden="false"></video>
+<video></video> <!-- no src -->
diff --git a/packages/svelte/tests/validator/samples/a11y-media-has-caption/warnings.json b/packages/svelte/tests/validator/samples/a11y-media-has-caption/warnings.json
index 2a7de1f730..c596f23806 100644
--- a/packages/svelte/tests/validator/samples/a11y-media-has-caption/warnings.json
+++ b/packages/svelte/tests/validator/samples/a11y-media-has-caption/warnings.json
@@ -2,7 +2,7 @@
 	{
 		"code": "a11y_media_has_caption",
 		"end": {
-			"column": 15,
+			"column": 23,
 			"line": 2
 		},
 		"message": "`<video>` elements must have a `<track kind=\"captions\">`",
@@ -14,7 +14,7 @@
 	{
 		"code": "a11y_media_has_caption",
 		"end": {
-			"column": 24,
+			"column": 32,
 			"line": 3
 		},
 		"message": "`<video>` elements must have a `<track kind=\"captions\">`",
@@ -26,7 +26,7 @@
 	{
 		"code": "a11y_media_has_caption",
 		"end": {
-			"column": 35,
+			"column": 43,
 			"line": 6
 		},
 		"message": "`<video>` elements must have a `<track kind=\"captions\">`",
diff --git a/packages/svelte/tests/validator/samples/a11y-mouse-events-have-key-events/input.svelte b/packages/svelte/tests/validator/samples/a11y-mouse-events-have-key-events/input.svelte
index 613b80e6d9..f9fe4f15c1 100644
--- a/packages/svelte/tests/validator/samples/a11y-mouse-events-have-key-events/input.svelte
+++ b/packages/svelte/tests/validator/samples/a11y-mouse-events-have-key-events/input.svelte
@@ -1,21 +1,19 @@
 <script>
-	// Even if otherProps contains onBlur and/or onFocus, the rule will still fail.
-	// Props should be passed down explicitly for rule to pass.
 	const otherProps = {
-		onBlur: () => void 0,
-		onFocus: () => void 0
+		onblur: () => {},
+		onfocus: () => {}
 	};
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div on:mouseover={() => void 0}></div>
+<div onmouseover={() => {}}></div>
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div on:mouseover={() => void 0} on:focus={() => void 0}></div>
+<div onmouseover={() => {}} onfocus={() => {}}></div>
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div on:mouseover={() => void 0} {...otherProps}></div>
+<div onmouseover={() => {}} {...otherProps}></div>
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div on:mouseout={() => void 0}></div>
+<div onmouseout={() => {}}></div>
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div on:mouseout={() => void 0} on:blur={() => void 0}></div>
+<div onmouseout={() => {}} onblur={() => {}}></div>
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div on:mouseout={() => void 0} {...otherProps}></div>
+<div onmouseout={() => {}} {...otherProps}></div>
diff --git a/packages/svelte/tests/validator/samples/a11y-mouse-events-have-key-events/warnings.json b/packages/svelte/tests/validator/samples/a11y-mouse-events-have-key-events/warnings.json
index 574b019e0f..3dee4e9673 100644
--- a/packages/svelte/tests/validator/samples/a11y-mouse-events-have-key-events/warnings.json
+++ b/packages/svelte/tests/validator/samples/a11y-mouse-events-have-key-events/warnings.json
@@ -2,49 +2,25 @@
 	{
 		"code": "a11y_mouse_events_have_key_events",
 		"end": {
-			"column": 39,
-			"line": 11
+			"column": 34,
+			"line": 9
 		},
 		"message": "'mouseover' event must be accompanied by 'focus' event",
 		"start": {
 			"column": 0,
-			"line": 11
+			"line": 9
 		}
 	},
 	{
 		"code": "a11y_mouse_events_have_key_events",
 		"end": {
-			"column": 55,
+			"column": 33,
 			"line": 15
 		},
-		"message": "'mouseover' event must be accompanied by 'focus' event",
-		"start": {
-			"column": 0,
-			"line": 15
-		}
-	},
-	{
-		"code": "a11y_mouse_events_have_key_events",
-		"end": {
-			"column": 38,
-			"line": 17
-		},
 		"message": "'mouseout' event must be accompanied by 'blur' event",
 		"start": {
 			"column": 0,
-			"line": 17
-		}
-	},
-	{
-		"code": "a11y_mouse_events_have_key_events",
-		"end": {
-			"column": 54,
-			"line": 21
-		},
-		"message": "'mouseout' event must be accompanied by 'blur' event",
-		"start": {
-			"column": 0,
-			"line": 21
+			"line": 15
 		}
 	}
 ]
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/a11y-no-noninteractive-element-interactions/input.svelte b/packages/svelte/tests/validator/samples/a11y-no-noninteractive-element-interactions/input.svelte
index 1adea90ba3..759f969d82 100644
--- a/packages/svelte/tests/validator/samples/a11y-no-noninteractive-element-interactions/input.svelte
+++ b/packages/svelte/tests/validator/samples/a11y-no-noninteractive-element-interactions/input.svelte
@@ -3,6 +3,7 @@
 <div role="button" tabindex="-1" on:click={() => {}} on:keypress={() => {}}></div>
 <div role="listitem" aria-hidden="true" on:click={() => {}} on:keypress={() => {}}></div>
 <button on:click={() => {}}>click me</button>
+<dialog on:click={() => {}}>alert</dialog>
 <h1 contenteditable="true" on:keydown={() => {}}>Heading</h1>
 <h1>Heading</h1>
 
diff --git a/packages/svelte/tests/validator/samples/a11y-no-noninteractive-element-interactions/warnings.json b/packages/svelte/tests/validator/samples/a11y-no-noninteractive-element-interactions/warnings.json
index 760866d136..e8bcd0cc1a 100644
--- a/packages/svelte/tests/validator/samples/a11y-no-noninteractive-element-interactions/warnings.json
+++ b/packages/svelte/tests/validator/samples/a11y-no-noninteractive-element-interactions/warnings.json
@@ -3,60 +3,60 @@
 		"code": "a11y_no_noninteractive_element_interactions",
 		"end": {
 			"column": 51,
-			"line": 10
+			"line": 11
 		},
 		"message": "Non-interactive element `<div>` should not be assigned mouse or keyboard event listeners",
 		"start": {
 			"column": 0,
-			"line": 10
+			"line": 11
 		}
 	},
 	{
 		"code": "a11y_no_noninteractive_element_interactions",
 		"end": {
 			"column": 58,
-			"line": 11
+			"line": 12
 		},
 		"message": "Non-interactive element `<h1>` should not be assigned mouse or keyboard event listeners",
 		"start": {
 			"column": 0,
-			"line": 11
+			"line": 12
 		}
 	},
 	{
 		"code": "a11y_no_noninteractive_element_interactions",
 		"end": {
 			"column": 50,
-			"line": 12
+			"line": 13
 		},
 		"message": "Non-interactive element `<h1>` should not be assigned mouse or keyboard event listeners",
 		"start": {
 			"column": 0,
-			"line": 12
+			"line": 13
 		}
 	},
 	{
 		"code": "a11y_no_noninteractive_element_interactions",
 		"end": {
 			"column": 30,
-			"line": 13
+			"line": 14
 		},
 		"message": "Non-interactive element `<p>` should not be assigned mouse or keyboard event listeners",
 		"start": {
 			"column": 0,
-			"line": 13
+			"line": 14
 		}
 	},
 	{
 		"code": "a11y_no_noninteractive_element_interactions",
 		"end": {
 			"column": 50,
-			"line": 14
+			"line": 15
 		},
 		"message": "Non-interactive element `<div>` should not be assigned mouse or keyboard event listeners",
 		"start": {
 			"column": 0,
-			"line": 14
+			"line": 15
 		}
 	}
 ]
diff --git a/packages/svelte/tests/validator/samples/a11y-no-noninteractive-element-to-interactive-role/input.svelte b/packages/svelte/tests/validator/samples/a11y-no-noninteractive-element-to-interactive-role/input.svelte
index e5db8719b0..edfa3eeada 100644
--- a/packages/svelte/tests/validator/samples/a11y-no-noninteractive-element-to-interactive-role/input.svelte
+++ b/packages/svelte/tests/validator/samples/a11y-no-noninteractive-element-to-interactive-role/input.svelte
@@ -69,6 +69,13 @@
 <li role="menuitem"></li>
 <li role="row"></li>
 <li role="treeitem" aria-selected={false}></li>
+<!-- menu -->
+<menu role="menu"></menu>
+<menu role="menubar"></menu>
+<menu role="radiogroup"></menu>
+<menu role="tablist"></menu>
+<menu role="tree"></menu>
+<menu role="treegrid"></menu>
 
 <!-- VALID: elements assigned an interactive role. -->
 <div role="button"></div>
diff --git a/packages/svelte/tests/validator/samples/a11y-no-redundant-roles/input.svelte b/packages/svelte/tests/validator/samples/a11y-no-redundant-roles/input.svelte
index 2ccd765aa2..9e06ebe420 100644
--- a/packages/svelte/tests/validator/samples/a11y-no-redundant-roles/input.svelte
+++ b/packages/svelte/tests/validator/samples/a11y-no-redundant-roles/input.svelte
@@ -22,7 +22,7 @@
 <!-- <li role="listitem" /> allowed since CSS list-style none removes semantic meaning and role brings it back -->
 <link role="link" />
 <main role="main"></main>
-<menu role="list"></menu>
+<!-- <menu role="list" /> allowed, same as ul/ol above -->
 <nav role="navigation"></nav>
 <!-- <ol role="list" /> allowed, see comment above -->
 <optgroup role="group"></optgroup>
@@ -44,5 +44,5 @@
 <footer role="contentinfo"></footer>
 
 <!-- Allowed -->
-<!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
+<!-- menu has same interactive role exceptions as ul/ol -->
 <menu role="menu"></menu>
diff --git a/packages/svelte/tests/validator/samples/a11y-no-redundant-roles/warnings.json b/packages/svelte/tests/validator/samples/a11y-no-redundant-roles/warnings.json
index 861f000aef..e041037d71 100644
--- a/packages/svelte/tests/validator/samples/a11y-no-redundant-roles/warnings.json
+++ b/packages/svelte/tests/validator/samples/a11y-no-redundant-roles/warnings.json
@@ -275,18 +275,6 @@
 			"line": 24
 		}
 	},
-	{
-		"code": "a11y_no_redundant_roles",
-		"end": {
-			"column": 17,
-			"line": 25
-		},
-		"message": "Redundant role 'list'",
-		"start": {
-			"column": 6,
-			"line": 25
-		}
-	},
 	{
 		"code": "a11y_no_redundant_roles",
 		"end": {
diff --git a/packages/svelte/tests/validator/samples/a11y-no-static-element-interactions/input.svelte b/packages/svelte/tests/validator/samples/a11y-no-static-element-interactions/input.svelte
index ee7ed4f084..8829d784c8 100644
--- a/packages/svelte/tests/validator/samples/a11y-no-static-element-interactions/input.svelte
+++ b/packages/svelte/tests/validator/samples/a11y-no-static-element-interactions/input.svelte
@@ -17,3 +17,6 @@
 <div on:keydown={() => {}}></div>
 <!-- svelte-ignore a11y_missing_attribute -->
 <a on:mousedown={() => {}} on:mouseup={() => {}} on:copy={() => {}}>link</a>
+<div on:pointerdown={() => {}}></div>
+<div on:pointerenter={() => {}}></div>
+<div on:touchstart={() => {}}></div>
diff --git a/packages/svelte/tests/validator/samples/a11y-no-static-element-interactions/warnings.json b/packages/svelte/tests/validator/samples/a11y-no-static-element-interactions/warnings.json
index ab4b58a839..41325a8756 100644
--- a/packages/svelte/tests/validator/samples/a11y-no-static-element-interactions/warnings.json
+++ b/packages/svelte/tests/validator/samples/a11y-no-static-element-interactions/warnings.json
@@ -22,5 +22,41 @@
 			"column": 0,
 			"line": 19
 		}
+	},
+	{
+		"code": "a11y_no_static_element_interactions",
+		"end": {
+			"column": 37,
+			"line": 20
+		},
+		"message": "`<div>` with a pointerdown handler must have an ARIA role",
+		"start": {
+			"column": 0,
+			"line": 20
+		}
+	},
+	{
+		"code": "a11y_no_static_element_interactions",
+		"end": {
+			"column": 38,
+			"line": 21
+		},
+		"message": "`<div>` with a pointerenter handler must have an ARIA role",
+		"start": {
+			"column": 0,
+			"line": 21
+		}
+	},
+	{
+		"code": "a11y_no_static_element_interactions",
+		"end": {
+			"column": 36,
+			"line": 22
+		},
+		"message": "`<div>` with a touchstart handler must have an ARIA role",
+		"start": {
+			"column": 0,
+			"line": 22
+		}
 	}
 ]
diff --git a/packages/svelte/tests/validator/samples/a11y-popover-label/input.svelte b/packages/svelte/tests/validator/samples/a11y-popover-label/input.svelte
new file mode 100644
index 0000000000..6fafa0a10c
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/a11y-popover-label/input.svelte
@@ -0,0 +1,3 @@
+<button interestfor="my-hint">
+	<div id="my-hint" popover="hint">hello</div>
+</button>
\ No newline at end of file
diff --git a/packages/svelte/tests/validator/samples/a11y-popover-label/warnings.json b/packages/svelte/tests/validator/samples/a11y-popover-label/warnings.json
new file mode 100644
index 0000000000..f5fd09c89d
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/a11y-popover-label/warnings.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "a11y_consider_explicit_label",
+		"message": "Buttons and links should either contain text or have an `aria-label`, `aria-labelledby` or `title` attribute",
+		"start": {
+			"line": 1,
+			"column": 0
+		},
+		"end": {
+			"line": 3,
+			"column": 9
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/bidirectional-control-characters/input.svelte b/packages/svelte/tests/validator/samples/bidirectional-control-characters/input.svelte
new file mode 100644
index 0000000000..21587e5f4f
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/bidirectional-control-characters/input.svelte
@@ -0,0 +1,8 @@
+<script>
+    let name = '\u2067\u2066rld\u2069\u2066wo\u2069\u2069';
+</script>
+⁧⁦def⁩⁦abc⁩⁩
+<h1>Hello, {name}!</h1>
+
+<!-- svelte-ignore bidirectional_control_characters -->
+⁧⁦def⁩⁦abc⁩⁩
diff --git a/packages/svelte/tests/validator/samples/bidirectional-control-characters/warnings.json b/packages/svelte/tests/validator/samples/bidirectional-control-characters/warnings.json
new file mode 100644
index 0000000000..6e70193c6c
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/bidirectional-control-characters/warnings.json
@@ -0,0 +1,50 @@
+[
+	{
+		"code": "bidirectional_control_characters",
+		"message": "A bidirectional control character was detected in your code. These characters can be used to alter the visual direction of your code and could have unintended consequences",
+		"start": {
+			"line": 2,
+			"column": 15
+		},
+		"end": {
+			"line": 2,
+			"column": 58
+		}
+	},
+	{
+		"code": "bidirectional_control_characters",
+		"message": "A bidirectional control character was detected in your code. These characters can be used to alter the visual direction of your code and could have unintended consequences",
+		"start": {
+			"line": 4,
+			"column": 0
+		},
+		"end": {
+			"line": 4,
+			"column": 2
+		}
+	},
+	{
+		"code": "bidirectional_control_characters",
+		"message": "A bidirectional control character was detected in your code. These characters can be used to alter the visual direction of your code and could have unintended consequences",
+		"start": {
+			"line": 4,
+			"column": 5
+		},
+		"end": {
+			"line": 4,
+			"column": 7
+		}
+	},
+	{
+		"code": "bidirectional_control_characters",
+		"message": "A bidirectional control character was detected in your code. These characters can be used to alter the visual direction of your code and could have unintended consequences",
+		"start": {
+			"line": 4,
+			"column": 10
+		},
+		"end": {
+			"line": 4,
+			"column": 12
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/bind-group-snippet-parameter/errors.json b/packages/svelte/tests/validator/samples/bind-group-snippet-parameter/errors.json
new file mode 100644
index 0000000000..15e762419f
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/bind-group-snippet-parameter/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "bind_group_invalid_snippet_parameter",
+		"end": {
+			"column": 44,
+			"line": 2
+		},
+		"message": "Cannot `bind:group` to a snippet parameter",
+		"start": {
+			"column": 21,
+			"line": 2
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/bind-group-snippet-parameter/input.svelte b/packages/svelte/tests/validator/samples/bind-group-snippet-parameter/input.svelte
new file mode 100644
index 0000000000..368484788a
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/bind-group-snippet-parameter/input.svelte
@@ -0,0 +1,3 @@
+{#snippet test(group)}
+	<input type="radio" bind:group={group.name} />
+{/snippet}
\ No newline at end of file
diff --git a/packages/svelte/tests/validator/samples/binding-dimensions-svg/errors.json b/packages/svelte/tests/validator/samples/binding-dimensions-svg/errors.json
index 4d3819453c..61e6ca6355 100644
--- a/packages/svelte/tests/validator/samples/binding-dimensions-svg/errors.json
+++ b/packages/svelte/tests/validator/samples/binding-dimensions-svg/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "bind_invalid_target",
-		"message": "`bind:offsetWidth` can only be used with non-<svg> elements. Use 'clientWidth' for <svg> instead",
+		"message": "`bind:offsetWidth` can only be used with non-`<svg>` elements. Use `bind:clientWidth` for `<svg>` instead",
 		"start": {
 			"line": 5,
 			"column": 5
diff --git a/packages/svelte/tests/validator/samples/binding-input-checked/errors.json b/packages/svelte/tests/validator/samples/binding-input-checked/errors.json
index 574b25e06f..d7e8e48c95 100644
--- a/packages/svelte/tests/validator/samples/binding-input-checked/errors.json
+++ b/packages/svelte/tests/validator/samples/binding-input-checked/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "bind_invalid_target",
-		"message": "`bind:checked` can only be used with <input type=\"checkbox\">",
+		"message": "`bind:checked` can only be used with `<input type=\"checkbox\">`",
 		"start": {
 			"line": 5,
 			"column": 7
diff --git a/packages/svelte/tests/validator/samples/binding-invalid-on-element-2/errors.json b/packages/svelte/tests/validator/samples/binding-invalid-on-element-2/errors.json
index 92111a4ec2..19d0cd0ce1 100644
--- a/packages/svelte/tests/validator/samples/binding-invalid-on-element-2/errors.json
+++ b/packages/svelte/tests/validator/samples/binding-invalid-on-element-2/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "bind_invalid_target",
-		"message": "`bind:open` can only be used with <details>",
+		"message": "`bind:open` can only be used with `<details>`",
 		"start": {
 			"line": 5,
 			"column": 5
diff --git a/packages/svelte/tests/validator/samples/binding-invalid-on-element/errors.json b/packages/svelte/tests/validator/samples/binding-invalid-on-element/errors.json
index 6626afc1d0..781a8301ea 100644
--- a/packages/svelte/tests/validator/samples/binding-invalid-on-element/errors.json
+++ b/packages/svelte/tests/validator/samples/binding-invalid-on-element/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "bind_invalid_target",
-		"message": "`bind:value` can only be used with <input>, <textarea>, <select>",
+		"message": "`bind:value` can only be used with `<input>`, `<textarea>`, `<select>`",
 		"start": {
 			"line": 5,
 			"column": 5
diff --git a/packages/svelte/tests/validator/samples/binding-radio-input-checked/errors.json b/packages/svelte/tests/validator/samples/binding-radio-input-checked/errors.json
new file mode 100644
index 0000000000..beb46affc5
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/binding-radio-input-checked/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "bind_invalid_target",
+		"message": "`bind:checked` can only be used with `<input type=\"checkbox\">` — for `<input type=\"radio\">`, use `bind:group`",
+		"start": {
+			"line": 5,
+			"column": 20
+		},
+		"end": {
+			"line": 5,
+			"column": 38
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/binding-radio-input-checked/input.svelte b/packages/svelte/tests/validator/samples/binding-radio-input-checked/input.svelte
new file mode 100644
index 0000000000..67e7b77a3a
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/binding-radio-input-checked/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	let foo;
+</script>
+
+<input type="radio" bind:checked={foo}>
\ No newline at end of file
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-1/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-1/errors.json
new file mode 100644
index 0000000000..82765c51c1
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-1/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_field_duplicate",
+		"message": "`count` has already been declared on this class",
+		"start": {
+			"line": 5,
+			"column": 2
+		},
+		"end": {
+			"line": 5,
+			"column": 24
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-1/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-1/input.svelte.js
new file mode 100644
index 0000000000..05cd4d9d9d
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-1/input.svelte.js
@@ -0,0 +1,7 @@
+export class Counter {
+	count = $state(0);
+
+	constructor() {
+		this.count = $state(0);
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-10/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-10/errors.json
new file mode 100644
index 0000000000..c4cb0991d0
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-10/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_field_invalid_assignment",
+		"message": "Cannot assign to a state field before its declaration",
+		"start": {
+			"line": 4,
+			"column": 3
+		},
+		"end": {
+			"line": 4,
+			"column": 18
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-10/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-10/input.svelte.js
new file mode 100644
index 0000000000..e5ad562727
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-10/input.svelte.js
@@ -0,0 +1,9 @@
+export class Counter {
+	constructor() {
+		if (true) {
+			this.count = -1;
+		}
+
+		this.count = $state(0);
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-2/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-2/errors.json
new file mode 100644
index 0000000000..82765c51c1
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-2/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_field_duplicate",
+		"message": "`count` has already been declared on this class",
+		"start": {
+			"line": 5,
+			"column": 2
+		},
+		"end": {
+			"line": 5,
+			"column": 24
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-2/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-2/input.svelte.js
new file mode 100644
index 0000000000..e37be4b3e6
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-2/input.svelte.js
@@ -0,0 +1,7 @@
+export class Counter {
+	constructor() {
+		this.count = $state(0);
+		this.count = 1;
+		this.count = $state(0);
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-3/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-3/errors.json
new file mode 100644
index 0000000000..175c41f98c
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-3/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_field_duplicate",
+		"message": "`count` has already been declared on this class",
+		"start": {
+			"line": 5,
+			"column": 2
+		},
+		"end": {
+			"line": 5,
+			"column": 28
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-3/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-3/input.svelte.js
new file mode 100644
index 0000000000..f9196ff3cd
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-3/input.svelte.js
@@ -0,0 +1,7 @@
+export class Counter {
+	constructor() {
+		this.count = $state(0);
+		this.count = 1;
+		this.count = $state.raw(0);
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-4/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-4/errors.json
new file mode 100644
index 0000000000..9f959874c8
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-4/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_invalid_placement",
+		"message": "`$state(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.",
+		"start": {
+			"line": 4,
+			"column": 16
+		},
+		"end": {
+			"line": 4,
+			"column": 25
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-4/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-4/input.svelte.js
new file mode 100644
index 0000000000..bf1aada1b5
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-4/input.svelte.js
@@ -0,0 +1,7 @@
+export class Counter {
+	constructor() {
+		if (true) {
+			this.count = $state(0);
+		}
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-5/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-5/errors.json
new file mode 100644
index 0000000000..af2f30dade
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-5/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_field_duplicate",
+		"message": "`count` has already been declared on this class",
+		"start": {
+			"line": 5,
+			"column": 2
+		},
+		"end": {
+			"line": 5,
+			"column": 27
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-5/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-5/input.svelte.js
new file mode 100644
index 0000000000..bc3d19a14f
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-5/input.svelte.js
@@ -0,0 +1,7 @@
+export class Counter {
+	// prettier-ignore
+	'count' = $state(0);
+	constructor() {
+		this['count'] = $state(0);
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-6/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-6/errors.json
new file mode 100644
index 0000000000..ae7a47f31b
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-6/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_field_duplicate",
+		"message": "`count` has already been declared on this class",
+		"start": {
+			"line": 4,
+			"column": 2
+		},
+		"end": {
+			"line": 4,
+			"column": 27
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-6/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-6/input.svelte.js
new file mode 100644
index 0000000000..2ebe52e685
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-6/input.svelte.js
@@ -0,0 +1,6 @@
+export class Counter {
+	count = $state(0);
+	constructor() {
+		this['count'] = $state(0);
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-7/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-7/errors.json
new file mode 100644
index 0000000000..64e56f8d5c
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-7/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_invalid_placement",
+		"message": "`$state(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.",
+		"start": {
+			"line": 5,
+			"column": 16
+		},
+		"end": {
+			"line": 5,
+			"column": 25
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-7/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-7/input.svelte.js
new file mode 100644
index 0000000000..50c8559837
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-7/input.svelte.js
@@ -0,0 +1,7 @@
+const count = 'count';
+
+export class Counter {
+	constructor() {
+		this[count] = $state(0);
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-8/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-8/errors.json
new file mode 100644
index 0000000000..2e0bd10ff8
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-8/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_field_invalid_assignment",
+		"message": "Cannot assign to a state field before its declaration",
+		"start": {
+			"line": 3,
+			"column": 2
+		},
+		"end": {
+			"line": 3,
+			"column": 17
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-8/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-8/input.svelte.js
new file mode 100644
index 0000000000..0a76c6fec9
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-8/input.svelte.js
@@ -0,0 +1,6 @@
+export class Counter {
+	constructor() {
+		this.count = -1;
+		this.count = $state(0);
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-9/errors.json b/packages/svelte/tests/validator/samples/class-state-constructor-9/errors.json
new file mode 100644
index 0000000000..94b5f191c2
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-9/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "duplicate_class_field",
+		"message": "`count` has already been declared",
+		"start": {
+			"line": 5,
+			"column": 2
+		},
+		"end": {
+			"line": 5,
+			"column": 24
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/class-state-constructor-9/input.svelte.js b/packages/svelte/tests/validator/samples/class-state-constructor-9/input.svelte.js
new file mode 100644
index 0000000000..3806046f3f
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/class-state-constructor-9/input.svelte.js
@@ -0,0 +1,7 @@
+export class Counter {
+	count = -1;
+	static count() {}
+	constructor() {
+		this.count = $state(0);
+	}
+}
diff --git a/packages/svelte/tests/validator/samples/comment-before-function-binding/errors.json b/packages/svelte/tests/validator/samples/comment-before-function-binding/errors.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/comment-before-function-binding/errors.json
@@ -0,0 +1 @@
+[]
diff --git a/packages/svelte/tests/validator/samples/comment-before-function-binding/input.svelte b/packages/svelte/tests/validator/samples/comment-before-function-binding/input.svelte
new file mode 100644
index 0000000000..50200a9eac
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/comment-before-function-binding/input.svelte
@@ -0,0 +1,10 @@
+<script>
+	let value = '';
+</script>
+
+<input bind:value={
+	/** ( */
+	() => value,
+	(v) => value = v.toLowerCase()
+}
+/>
diff --git a/packages/svelte/tests/validator/samples/const-tag-inside-key-block/errors.json b/packages/svelte/tests/validator/samples/const-tag-inside-key-block/errors.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/const-tag-inside-key-block/errors.json
@@ -0,0 +1 @@
+[]
diff --git a/packages/svelte/tests/validator/samples/const-tag-inside-key-block/input.svelte b/packages/svelte/tests/validator/samples/const-tag-inside-key-block/input.svelte
new file mode 100644
index 0000000000..008072bc47
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/const-tag-inside-key-block/input.svelte
@@ -0,0 +1,3 @@
+{#key 'key'}
+	{@const foo = 'bar'}
+{/key}
diff --git a/packages/svelte/tests/validator/samples/const-tag-invalid-rune-usage/errors.json b/packages/svelte/tests/validator/samples/const-tag-invalid-rune-usage/errors.json
new file mode 100644
index 0000000000..e1906b181a
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/const-tag-invalid-rune-usage/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_invalid_placement",
+		"message": "`$derived(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.",
+		"start": {
+			"line": 2,
+			"column": 15
+		},
+		"end": {
+			"line": 2,
+			"column": 26
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/const-tag-invalid-rune-usage/input.svelte b/packages/svelte/tests/validator/samples/const-tag-invalid-rune-usage/input.svelte
new file mode 100644
index 0000000000..a056058cc5
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/const-tag-invalid-rune-usage/input.svelte
@@ -0,0 +1,3 @@
+{#snippet test()}
+	{@const der = $derived(0)}
+{/snippet}
\ No newline at end of file
diff --git a/packages/svelte/tests/validator/samples/const-tag-placement-1/errors.json b/packages/svelte/tests/validator/samples/const-tag-placement-1/errors.json
index 144345527a..f7f5803e74 100644
--- a/packages/svelte/tests/validator/samples/const-tag-placement-1/errors.json
+++ b/packages/svelte/tests/validator/samples/const-tag-placement-1/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "const_tag_invalid_placement",
-		"message": "`{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>` or `<Component>`",
+		"message": "`{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>`, `<svelte:boundary>` or `<Component>`",
 		"start": {
 			"line": 5,
 			"column": 0
diff --git a/packages/svelte/tests/validator/samples/const-tag-placement-2/errors.json b/packages/svelte/tests/validator/samples/const-tag-placement-2/errors.json
index 64a24c5f48..d008c6ce4c 100644
--- a/packages/svelte/tests/validator/samples/const-tag-placement-2/errors.json
+++ b/packages/svelte/tests/validator/samples/const-tag-placement-2/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "const_tag_invalid_placement",
-		"message": "`{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>` or `<Component>`",
+		"message": "`{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>`, `<svelte:boundary>` or `<Component>`",
 		"start": {
 			"line": 7,
 			"column": 4
diff --git a/packages/svelte/tests/validator/samples/const-tag-placement-svelte-boundary/errors.json b/packages/svelte/tests/validator/samples/const-tag-placement-svelte-boundary/errors.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/const-tag-placement-svelte-boundary/errors.json
@@ -0,0 +1 @@
+[]
diff --git a/packages/svelte/tests/validator/samples/const-tag-placement-svelte-boundary/input.svelte b/packages/svelte/tests/validator/samples/const-tag-placement-svelte-boundary/input.svelte
new file mode 100644
index 0000000000..c965a379e5
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/const-tag-placement-svelte-boundary/input.svelte
@@ -0,0 +1,9 @@
+<script>
+  let a = $state("");
+</script>
+
+<svelte:boundary>
+	{@const x = a}
+	{x}
+	<FlakyComponent />
+</svelte:boundary>
diff --git a/packages/svelte/tests/validator/samples/custom-element-props-identifier-props-option/input.svelte b/packages/svelte/tests/validator/samples/custom-element-props-identifier-props-option/input.svelte
new file mode 100644
index 0000000000..bb7b930dc3
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/custom-element-props-identifier-props-option/input.svelte
@@ -0,0 +1,7 @@
+<svelte:options customElement={{
+	props: {}
+}} />
+
+<script>
+	let props = $props();
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/validator/samples/custom-element-props-identifier-props-option/warnings.json b/packages/svelte/tests/validator/samples/custom-element-props-identifier-props-option/warnings.json
new file mode 100644
index 0000000000..b880fe146c
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/custom-element-props-identifier-props-option/warnings.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "options_missing_custom_element",
+		"end": {
+			"column": 2,
+			"line": 3
+		},
+		"message": "The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?",
+		"start": {
+			"column": 16,
+			"line": 1
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/custom-element-props-identifier-rest/input.svelte b/packages/svelte/tests/validator/samples/custom-element-props-identifier-rest/input.svelte
new file mode 100644
index 0000000000..207b554527
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/custom-element-props-identifier-rest/input.svelte
@@ -0,0 +1,5 @@
+<svelte:options customElement={{}} />
+
+<script>
+	let { ...props } = $props();
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/validator/samples/custom-element-props-identifier-rest/warnings.json b/packages/svelte/tests/validator/samples/custom-element-props-identifier-rest/warnings.json
new file mode 100644
index 0000000000..61e11ab108
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/custom-element-props-identifier-rest/warnings.json
@@ -0,0 +1,26 @@
+[
+	{
+		"code": "options_missing_custom_element",
+		"end": {
+			"column": 34,
+			"line": 1
+		},
+		"message": "The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?",
+		"start": {
+			"column": 16,
+			"line": 1
+		}
+	},
+	{
+		"code": "custom_element_props_identifier",
+		"end": {
+			"column": 15,
+			"line": 4
+		},
+		"message": "Using a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option.",
+		"start": {
+			"column": 7,
+			"line": 4
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/custom-element-props-identifier/input.svelte b/packages/svelte/tests/validator/samples/custom-element-props-identifier/input.svelte
new file mode 100644
index 0000000000..ca5b16f8c3
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/custom-element-props-identifier/input.svelte
@@ -0,0 +1,5 @@
+<svelte:options customElement={{}} />
+
+<script>
+	let props = $props();
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/validator/samples/custom-element-props-identifier/warnings.json b/packages/svelte/tests/validator/samples/custom-element-props-identifier/warnings.json
new file mode 100644
index 0000000000..4c50bbd116
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/custom-element-props-identifier/warnings.json
@@ -0,0 +1,26 @@
+[
+	{
+		"code": "options_missing_custom_element",
+		"end": {
+			"column": 34,
+			"line": 1
+		},
+		"message": "The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?",
+		"start": {
+			"column": 16,
+			"line": 1
+		}
+	},
+	{
+		"code": "custom_element_props_identifier",
+		"end": {
+			"column": 10,
+			"line": 4
+		},
+		"message": "Using a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option.",
+		"start": {
+			"column": 5,
+			"line": 4
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/declaration-tag-already-declared/errors.json b/packages/svelte/tests/validator/samples/declaration-tag-already-declared/errors.json
new file mode 100644
index 0000000000..723b060d19
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/declaration-tag-already-declared/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "declaration_duplicate",
+		"message": "`foo` has already been declared",
+		"start": {
+			"line": 5,
+			"column": 5
+		},
+		"end": {
+			"line": 5,
+			"column": 8
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/declaration-tag-already-declared/input.svelte b/packages/svelte/tests/validator/samples/declaration-tag-already-declared/input.svelte
new file mode 100644
index 0000000000..15372811fb
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/declaration-tag-already-declared/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	let foo = 'bar';
+</script>
+
+{let foo = 'baz'}
diff --git a/packages/svelte/tests/validator/samples/declaration-tag-invalid-function/errors.json b/packages/svelte/tests/validator/samples/declaration-tag-invalid-function/errors.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/declaration-tag-invalid-function/errors.json
@@ -0,0 +1 @@
+[]
diff --git a/packages/svelte/tests/validator/samples/declaration-tag-invalid-function/input.svelte b/packages/svelte/tests/validator/samples/declaration-tag-invalid-function/input.svelte
new file mode 100644
index 0000000000..8cfdf59c0f
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/declaration-tag-invalid-function/input.svelte
@@ -0,0 +1,3 @@
+{#if true}
+	{function foo() {}}
+{/if}
diff --git a/packages/svelte/tests/validator/samples/declaration-tag-invalid-type-2/errors.json b/packages/svelte/tests/validator/samples/declaration-tag-invalid-type-2/errors.json
new file mode 100644
index 0000000000..a375ac5776
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/declaration-tag-invalid-type-2/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "declaration_tag_invalid_type",
+		"message": "Declaration tags must be `let` or `const` declarations",
+		"start": {
+			"line": 28,
+			"column": 2
+		},
+		"end": {
+			"line": 28,
+			"column": 20
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/declaration-tag-invalid-type-2/input.svelte b/packages/svelte/tests/validator/samples/declaration-tag-invalid-type-2/input.svelte
new file mode 100644
index 0000000000..88295cad58
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/declaration-tag-invalid-type-2/input.svelte
@@ -0,0 +1,29 @@
+<script lang="ts"></script>
+
+{#if true}
+	<!-- check that these doesn't trigger already -->
+	{type}
+	{type }
+	{type && foo}
+	{type || bar}
+	{type % 2}
+	{type .x}
+	{type ?.x}
+	{type ()}
+	{type [1]}
+	{type `tag`}
+	{type === 'all' ? 'All types' : type}
+	{type !== 'all'}
+	{type == 'all'}
+	{type != 'all'}
+	{type + 1}
+	{type - 1}
+	{type * 2}
+	{type / 2}
+	{type > 1}
+	{type instanceof Foo}
+	{type instanceof /* comment */ Object}
+	{type in foo}
+	<!-- ... this one should trigger though -->
+	{type foo = boolean}
+{/if}
diff --git a/packages/svelte/tests/validator/samples/declaration-tag-invalid-type/errors.json b/packages/svelte/tests/validator/samples/declaration-tag-invalid-type/errors.json
new file mode 100644
index 0000000000..2a9b3c0140
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/declaration-tag-invalid-type/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "declaration_tag_invalid_type",
+		"message": "Declaration tags must be `let` or `const` declarations",
+		"start": {
+			"line": 2,
+			"column": 2
+		},
+		"end": {
+			"line": 2,
+			"column": 5
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/declaration-tag-invalid-type/input.svelte b/packages/svelte/tests/validator/samples/declaration-tag-invalid-type/input.svelte
new file mode 100644
index 0000000000..eb9fcd5e75
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/declaration-tag-invalid-type/input.svelte
@@ -0,0 +1,3 @@
+{#if true}
+	{var foo = 1}
+{/if}
diff --git a/packages/svelte/tests/validator/samples/declaration-tag-legacy-mode/errors.json b/packages/svelte/tests/validator/samples/declaration-tag-legacy-mode/errors.json
new file mode 100644
index 0000000000..6b89f2eab8
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/declaration-tag-legacy-mode/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "declaration_tag_no_legacy_mode",
+		"message": "Declaration tags cannot be used in legacy mode",
+		"start": {
+			"line": 5,
+			"column": 0
+		},
+		"end": {
+			"line": 5,
+			"column": 19
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/declaration-tag-legacy-mode/input.svelte b/packages/svelte/tests/validator/samples/declaration-tag-legacy-mode/input.svelte
new file mode 100644
index 0000000000..026d4eff1e
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/declaration-tag-legacy-mode/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let name = 'world';
+</script>
+
+{const foo = 'foo'}
diff --git a/packages/svelte/tests/validator/samples/declaration-tag-maybe-runes/errors.json b/packages/svelte/tests/validator/samples/declaration-tag-maybe-runes/errors.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/declaration-tag-maybe-runes/errors.json
@@ -0,0 +1 @@
+[]
diff --git a/packages/svelte/tests/validator/samples/declaration-tag-maybe-runes/input.svelte b/packages/svelte/tests/validator/samples/declaration-tag-maybe-runes/input.svelte
new file mode 100644
index 0000000000..081f242a81
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/declaration-tag-maybe-runes/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	let name = 'world';
+</script>
+
+Usage when no explicit runes/legacy mode should be ok
+{const foo = world}
diff --git a/packages/svelte/tests/validator/samples/declaration-tag-state-referenced-locally/input.svelte b/packages/svelte/tests/validator/samples/declaration-tag-state-referenced-locally/input.svelte
new file mode 100644
index 0000000000..90cc208e72
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/declaration-tag-state-referenced-locally/input.svelte
@@ -0,0 +1,9 @@
+<!-- `$derived` reads happen inside a closure, so these should _not_ warn -->
+{let a = $state(0), b = $derived(a * 2)}
+{let c = $state(0)}
+{let d = $derived(c * 2)}
+
+<!-- this is a non-closure read of state, so it _should_ warn -->
+{let e = $state(0), f = e}
+
+{a}{b}{c}{d}{e}{f}
diff --git a/packages/svelte/tests/validator/samples/declaration-tag-state-referenced-locally/warnings.json b/packages/svelte/tests/validator/samples/declaration-tag-state-referenced-locally/warnings.json
new file mode 100644
index 0000000000..9b87a3afb6
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/declaration-tag-state-referenced-locally/warnings.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_referenced_locally",
+		"message": "This reference only captures the initial value of `e`. Did you mean to reference it inside a closure instead?",
+		"start": {
+			"line": 7,
+			"column": 24
+		},
+		"end": {
+			"line": 7,
+			"column": 25
+		}
+	}
+]
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/tests/validator/samples/illegal-variable-declaration/errors.json b/packages/svelte/tests/validator/samples/illegal-variable-declaration/errors.json
index 850880e744..cf413c39df 100644
--- a/packages/svelte/tests/validator/samples/illegal-variable-declaration/errors.json
+++ b/packages/svelte/tests/validator/samples/illegal-variable-declaration/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "declaration_duplicate_module_import",
-		"message": "Cannot declare a variable with the same name as an import inside `<script module>`",
+		"message": "Cannot declare a variable with the same name as an import from `<script module>`",
 		"start": {
 			"line": 12,
 			"column": 5
diff --git a/packages/svelte/tests/validator/samples/implicitly-closed-by-parent/input.svelte b/packages/svelte/tests/validator/samples/implicitly-closed-by-parent/input.svelte
new file mode 100644
index 0000000000..f67eba18b8
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/implicitly-closed-by-parent/input.svelte
@@ -0,0 +1,6 @@
+<main><div class="hello"></main>
+
+<main>
+	<div class="hello">
+		<p>hello</p>
+</main>
diff --git a/packages/svelte/tests/validator/samples/implicitly-closed-by-parent/warnings.json b/packages/svelte/tests/validator/samples/implicitly-closed-by-parent/warnings.json
new file mode 100644
index 0000000000..1316a2b65b
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/implicitly-closed-by-parent/warnings.json
@@ -0,0 +1,26 @@
+[
+	{
+		"code": "element_implicitly_closed",
+		"message": "This element is implicitly closed by the following `</main>`, which can cause an unexpected DOM structure. Add an explicit `</div>` to avoid surprises.",
+		"start": {
+			"line": 1,
+			"column": 6
+		},
+		"end": {
+			"line": 1,
+			"column": 25
+		}
+	},
+	{
+		"code": "element_implicitly_closed",
+		"message": "This element is implicitly closed by the following `</main>`, which can cause an unexpected DOM structure. Add an explicit `</div>` to avoid surprises.",
+		"start": {
+			"line": 4,
+			"column": 1
+		},
+		"end": {
+			"line": 4,
+			"column": 20
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/implicitly-closed-by-sibling/input.svelte b/packages/svelte/tests/validator/samples/implicitly-closed-by-sibling/input.svelte
new file mode 100644
index 0000000000..7721f2f380
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/implicitly-closed-by-sibling/input.svelte
@@ -0,0 +1,9 @@
+<div>
+	<p class="hello">
+		<span></span>
+		<p></p>
+</div>
+
+<div>
+	<p class="hello"><p></p>
+</div>
diff --git a/packages/svelte/tests/validator/samples/implicitly-closed-by-sibling/warnings.json b/packages/svelte/tests/validator/samples/implicitly-closed-by-sibling/warnings.json
new file mode 100644
index 0000000000..6ea36c5a50
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/implicitly-closed-by-sibling/warnings.json
@@ -0,0 +1,26 @@
+[
+	{
+		"code": "element_implicitly_closed",
+		"message": "This element is implicitly closed by the following `<p>`, which can cause an unexpected DOM structure. Add an explicit `</p>` to avoid surprises.",
+		"start": {
+			"line": 2,
+			"column": 1
+		},
+		"end": {
+			"line": 2,
+			"column": 18
+		}
+	},
+	{
+		"code": "element_implicitly_closed",
+		"message": "This element is implicitly closed by the following `<p>`, which can cause an unexpected DOM structure. Add an explicit `</p>` to avoid surprises.",
+		"start": {
+			"line": 8,
+			"column": 1
+		},
+		"end": {
+			"line": 8,
+			"column": 18
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/invalid-node-placement-template/errors.json b/packages/svelte/tests/validator/samples/invalid-node-placement-template/errors.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/invalid-node-placement-template/errors.json
@@ -0,0 +1 @@
+[]
diff --git a/packages/svelte/tests/validator/samples/invalid-node-placement-template/input.svelte b/packages/svelte/tests/validator/samples/invalid-node-placement-template/input.svelte
new file mode 100644
index 0000000000..65aef2a7aa
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/invalid-node-placement-template/input.svelte
@@ -0,0 +1,6 @@
+<template>
+	<tr>
+		<td></td>
+		<td></td>
+	</tr>
+</template>
\ No newline at end of file
diff --git a/packages/svelte/tests/validator/samples/invalid-self-closing-tag/input.svelte b/packages/svelte/tests/validator/samples/invalid-self-closing-tag/input.svelte
index 376c9f79bd..07582e8343 100644
--- a/packages/svelte/tests/validator/samples/invalid-self-closing-tag/input.svelte
+++ b/packages/svelte/tests/validator/samples/invalid-self-closing-tag/input.svelte
@@ -1,6 +1,7 @@
 <!-- valid -->
 <link />
 <svg><g /></svg>
+<math><mspace /></math>
 <enhanced:img />
 
 
diff --git a/packages/svelte/tests/validator/samples/invalid-self-closing-tag/warnings.json b/packages/svelte/tests/validator/samples/invalid-self-closing-tag/warnings.json
index 40b87ec7c8..3e45bca5ad 100644
--- a/packages/svelte/tests/validator/samples/invalid-self-closing-tag/warnings.json
+++ b/packages/svelte/tests/validator/samples/invalid-self-closing-tag/warnings.json
@@ -3,11 +3,11 @@
 		"code": "element_invalid_self_closing_tag",
 		"message": "Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`",
 		"start": {
-			"line": 8,
+			"line": 9,
 			"column": 0
 		},
 		"end": {
-			"line": 8,
+			"line": 9,
 			"column": 7
 		}
 	},
@@ -15,11 +15,11 @@
 		"code": "element_invalid_self_closing_tag",
 		"message": "Self-closing HTML tags for non-void elements are ambiguous — use `<my-thing ...></my-thing>` rather than `<my-thing ... />`",
 		"start": {
-			"line": 9,
+			"line": 10,
 			"column": 0
 		},
 		"end": {
-			"line": 9,
+			"line": 10,
 			"column": 12
 		}
 	}
diff --git a/packages/svelte/tests/validator/samples/multiple-var-same-name/errors.json b/packages/svelte/tests/validator/samples/multiple-var-same-name/errors.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/multiple-var-same-name/errors.json
@@ -0,0 +1 @@
+[]
diff --git a/packages/svelte/tests/validator/samples/multiple-var-same-name/input.svelte b/packages/svelte/tests/validator/samples/multiple-var-same-name/input.svelte
new file mode 100644
index 0000000000..19a8ef7722
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/multiple-var-same-name/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	var test = "";
+	var test = 42;
+</script>
+
+{test}
\ No newline at end of file
diff --git a/packages/svelte/tests/validator/samples/mutate-derived-private-field/errors.json b/packages/svelte/tests/validator/samples/mutate-derived-private-field/errors.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/mutate-derived-private-field/errors.json
@@ -0,0 +1 @@
+[]
diff --git a/packages/svelte/tests/validator/samples/mutate-derived-private-field/input.svelte b/packages/svelte/tests/validator/samples/mutate-derived-private-field/input.svelte
new file mode 100644
index 0000000000..0a3df4bc1b
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/mutate-derived-private-field/input.svelte
@@ -0,0 +1,9 @@
+<script>
+	class Test{
+		#der = $derived({test: 0});
+
+		set test(v){
+			this.#der.test = 45;
+		}
+	}
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/validator/samples/reassign-derived-private-public-field/errors.json b/packages/svelte/tests/validator/samples/reassign-derived-private-public-field/errors.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/reassign-derived-private-public-field/errors.json
@@ -0,0 +1 @@
+[]
diff --git a/packages/svelte/tests/validator/samples/reassign-derived-private-public-field/input.svelte b/packages/svelte/tests/validator/samples/reassign-derived-private-public-field/input.svelte
new file mode 100644
index 0000000000..92f3564920
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/reassign-derived-private-public-field/input.svelte
@@ -0,0 +1,13 @@
+<script>
+	class Test {
+	  #deps = () => [];
+	
+	  deps = $derived.by(() => {
+		return [];
+	  });		
+			
+	  constructor(f = () => []) {
+		this.#deps = f;
+	  }
+	}
+  </script>
\ No newline at end of file
diff --git a/packages/svelte/tests/validator/samples/rune-invalid-spread-derived-by/errors.json b/packages/svelte/tests/validator/samples/rune-invalid-spread-derived-by/errors.json
new file mode 100644
index 0000000000..be59da95fa
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/rune-invalid-spread-derived-by/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "rune_invalid_spread",
+		"end": {
+			"column": 35,
+			"line": 3
+		},
+		"message": "`$derived.by` cannot be called with a spread argument",
+		"start": {
+			"column": 15,
+			"line": 3
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/rune-invalid-spread-derived-by/input.svelte b/packages/svelte/tests/validator/samples/rune-invalid-spread-derived-by/input.svelte
new file mode 100644
index 0000000000..49e8057aa5
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/rune-invalid-spread-derived-by/input.svelte
@@ -0,0 +1,4 @@
+<script>
+	const args = [0];
+	const count = $derived.by(...args);
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/validator/samples/rune-invalid-spread-derived/errors.json b/packages/svelte/tests/validator/samples/rune-invalid-spread-derived/errors.json
new file mode 100644
index 0000000000..6a333bc362
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/rune-invalid-spread-derived/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "rune_invalid_spread",
+		"end": {
+			"column": 32,
+			"line": 3
+		},
+		"message": "`$derived` cannot be called with a spread argument",
+		"start": {
+			"column": 15,
+			"line": 3
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/rune-invalid-spread-derived/input.svelte b/packages/svelte/tests/validator/samples/rune-invalid-spread-derived/input.svelte
new file mode 100644
index 0000000000..9155493e17
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/rune-invalid-spread-derived/input.svelte
@@ -0,0 +1,4 @@
+<script>
+	const args = [0];
+	const count = $derived(...args);
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/validator/samples/rune-invalid-spread-state-raw/errors.json b/packages/svelte/tests/validator/samples/rune-invalid-spread-state-raw/errors.json
new file mode 100644
index 0000000000..e08b498fcb
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/rune-invalid-spread-state-raw/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "rune_invalid_spread",
+		"end": {
+			"column": 34,
+			"line": 3
+		},
+		"message": "`$state.raw` cannot be called with a spread argument",
+		"start": {
+			"column": 15,
+			"line": 3
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/rune-invalid-spread-state-raw/input.svelte b/packages/svelte/tests/validator/samples/rune-invalid-spread-state-raw/input.svelte
new file mode 100644
index 0000000000..d06fb053b3
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/rune-invalid-spread-state-raw/input.svelte
@@ -0,0 +1,4 @@
+<script>
+	const args = [0];
+	const count = $state.raw(...args);
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/validator/samples/rune-invalid-spread-state/errors.json b/packages/svelte/tests/validator/samples/rune-invalid-spread-state/errors.json
new file mode 100644
index 0000000000..11ae2abce5
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/rune-invalid-spread-state/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "rune_invalid_spread",
+		"end": {
+			"column": 30,
+			"line": 3
+		},
+		"message": "`$state` cannot be called with a spread argument",
+		"start": {
+			"column": 15,
+			"line": 3
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/rune-invalid-spread-state/input.svelte b/packages/svelte/tests/validator/samples/rune-invalid-spread-state/input.svelte
new file mode 100644
index 0000000000..02feac893f
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/rune-invalid-spread-state/input.svelte
@@ -0,0 +1,4 @@
+<script>
+	const args = [0];
+	const count = $state(...args);
+</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/validator/samples/script-invalid-spread-attribute/warnings.json b/packages/svelte/tests/validator/samples/script-invalid-spread-attribute/warnings.json
index c6748f711d..35045313ba 100644
--- a/packages/svelte/tests/validator/samples/script-invalid-spread-attribute/warnings.json
+++ b/packages/svelte/tests/validator/samples/script-invalid-spread-attribute/warnings.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "script_unknown_attribute",
-		"message": "Unrecognized attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it",
+		"message": "Unrecognised attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it",
 		"start": {
 			"column": 8,
 			"line": 1
diff --git a/packages/svelte/tests/validator/samples/script-unknown-attribute/warnings.json b/packages/svelte/tests/validator/samples/script-unknown-attribute/warnings.json
index fdcad269a6..0d41c2dc12 100644
--- a/packages/svelte/tests/validator/samples/script-unknown-attribute/warnings.json
+++ b/packages/svelte/tests/validator/samples/script-unknown-attribute/warnings.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "script_unknown_attribute",
-		"message": "Unrecognized attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it",
+		"message": "Unrecognised attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it",
 		"start": {
 			"column": 8,
 			"line": 1
diff --git a/packages/svelte/tests/validator/samples/slot-attribute-component/input.svelte b/packages/svelte/tests/validator/samples/slot-attribute-component/input.svelte
index 5acb14e409..5d559e614e 100644
--- a/packages/svelte/tests/validator/samples/slot-attribute-component/input.svelte
+++ b/packages/svelte/tests/validator/samples/slot-attribute-component/input.svelte
@@ -1,2 +1,8 @@
 <Foo slot="foo">valid</Foo>
 <Foo slot={foo}>valid</Foo>
+<Foo>
+    {#if true}
+        <Foo slot="foo">valid</Foo>
+        <Foo slot={foo}>valid</Foo>
+    {/if}
+</Foo>
\ No newline at end of file
diff --git a/packages/svelte/tests/validator/samples/slot-warning/warnings.json b/packages/svelte/tests/validator/samples/slot-warning/warnings.json
index a390d1d348..e3cf5a8904 100644
--- a/packages/svelte/tests/validator/samples/slot-warning/warnings.json
+++ b/packages/svelte/tests/validator/samples/slot-warning/warnings.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "a11y_click_events_have_key_events",
-		"message": "Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type=\"button\">` or `<a>` might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details",
+		"message": "Visible, non-interactive element `<div>` with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type=\"button\">` or `<a>` might be more appropriate",
 		"start": {
 			"column": 1,
 			"line": 7
diff --git a/packages/svelte/tests/validator/samples/slot-warning2/warnings.json b/packages/svelte/tests/validator/samples/slot-warning2/warnings.json
index 7a273cda5d..95f6ff0733 100644
--- a/packages/svelte/tests/validator/samples/slot-warning2/warnings.json
+++ b/packages/svelte/tests/validator/samples/slot-warning2/warnings.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "a11y_click_events_have_key_events",
-		"message": "Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type=\"button\">` or `<a>` might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details",
+		"message": "Visible, non-interactive element `<div>` with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type=\"button\">` or `<a>` might be more appropriate",
 		"start": {
 			"column": 1,
 			"line": 8
diff --git a/packages/svelte/tests/validator/samples/snippet-already-declared/errors.json b/packages/svelte/tests/validator/samples/snippet-already-declared/errors.json
new file mode 100644
index 0000000000..bac71c2c81
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/snippet-already-declared/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "declaration_duplicate",
+		"message": "`foo` has already been declared",
+		"start": {
+			"line": 5,
+			"column": 10
+		},
+		"end": {
+			"line": 5,
+			"column": 13
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/snippet-already-declared/input.svelte b/packages/svelte/tests/validator/samples/snippet-already-declared/input.svelte
new file mode 100644
index 0000000000..5745c2f8f9
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/snippet-already-declared/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	let foo = 'bar';
+</script>
+
+{#snippet foo()}baz{/snippet}
diff --git a/packages/svelte/tests/validator/samples/state-referenced-locally-props-identifier/input.svelte b/packages/svelte/tests/validator/samples/state-referenced-locally-props-identifier/input.svelte
new file mode 100644
index 0000000000..980debdfaf
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/state-referenced-locally-props-identifier/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	const props = $props();
+	const { model } = props;
+	const value = props.model.value;
+	console.log(model, value);
+</script>
diff --git a/packages/svelte/tests/validator/samples/state-referenced-locally-props-identifier/warnings.json b/packages/svelte/tests/validator/samples/state-referenced-locally-props-identifier/warnings.json
new file mode 100644
index 0000000000..b1385037e1
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/state-referenced-locally-props-identifier/warnings.json
@@ -0,0 +1,26 @@
+[
+	{
+		"code": "state_referenced_locally",
+		"message": "This reference only captures the initial value of `props`. Did you mean to reference it inside a closure instead?",
+		"start": {
+			"line": 3,
+			"column": 19
+		},
+		"end": {
+			"line": 3,
+			"column": 24
+		}
+	},
+	{
+		"code": "state_referenced_locally",
+		"message": "This reference only captures the initial value of `props`. Did you mean to reference it inside a closure instead?",
+		"start": {
+			"line": 4,
+			"column": 15
+		},
+		"end": {
+			"line": 4,
+			"column": 20
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/static-state-reference/input.svelte b/packages/svelte/tests/validator/samples/static-state-reference/input.svelte
index cd0c7b7349..fdcf343626 100644
--- a/packages/svelte/tests/validator/samples/static-state-reference/input.svelte
+++ b/packages/svelte/tests/validator/samples/static-state-reference/input.svelte
@@ -2,16 +2,28 @@
 	let obj = $state({ a: 0 });
 	let count = $state(0);
 	let doubled = $derived(count * 2);
+	let tripled = $state(count * 3);
 
 	console.log(obj);
 	console.log(count);
 	console.log(doubled);
 
+	let {
+		prop,
+		other_prop = prop
+	} = $props();
+	let prop_state = $state(prop);
+	let prop_derived = $derived(prop);
+	console.log(prop);
+	console.log(prop_derived);
+
 	// writes are okay
 	count++;
 	count = 1;
 	obj.a++;
 	obj.a = 1;
+	prop_state = 1;
+	prop_derived = 1;
 
 	// `count` here is correctly identified as a non-reference
 	let typed: { count: number } | null = null;
diff --git a/packages/svelte/tests/validator/samples/static-state-reference/warnings.json b/packages/svelte/tests/validator/samples/static-state-reference/warnings.json
index 9ba0941519..76e752573e 100644
--- a/packages/svelte/tests/validator/samples/static-state-reference/warnings.json
+++ b/packages/svelte/tests/validator/samples/static-state-reference/warnings.json
@@ -1,26 +1,74 @@
 [
 	{
 		"code": "state_referenced_locally",
-		"message": "State referenced in its own scope will never update. Did you mean to reference it inside a closure?",
+		"message": "This reference only captures the initial value of `count`. Did you mean to reference it inside a derived instead?",
+		"start": {
+			"column": 22,
+			"line": 5
+		},
+		"end": {
+			"column": 27,
+			"line": 5
+		}
+	},
+	{
+		"code": "state_referenced_locally",
+		"message": "This reference only captures the initial value of `count`. Did you mean to reference it inside a closure instead?",
 		"start": {
 			"column": 13,
-			"line": 7
+			"line": 8
 		},
 		"end": {
 			"column": 18,
-			"line": 7
+			"line": 8
 		}
 	},
 	{
 		"code": "state_referenced_locally",
-		"message": "State referenced in its own scope will never update. Did you mean to reference it inside a closure?",
+		"message": "This reference only captures the initial value of `doubled`. Did you mean to reference it inside a closure instead?",
 		"start": {
 			"column": 13,
-			"line": 8
+			"line": 9
 		},
 		"end": {
 			"column": 20,
-			"line": 8
+			"line": 9
+		}
+	},
+	{
+		"code": "state_referenced_locally",
+		"end": {
+			"column": 29,
+			"line": 15
+		},
+		"message": "This reference only captures the initial value of `prop`. Did you mean to reference it inside a closure instead?",
+		"start": {
+			"column": 25,
+			"line": 15
+		}
+	},
+	{
+		"code": "state_referenced_locally",
+		"end": {
+			"column": 17,
+			"line": 17
+		},
+		"message": "This reference only captures the initial value of `prop`. Did you mean to reference it inside a closure instead?",
+		"start": {
+			"column": 13,
+			"line": 17
+		}
+	},
+	{
+		"code": "state_referenced_locally",
+		"end": {
+			"column": 25,
+			"line": 18
+		},
+		"message": "This reference only captures the initial value of `prop_derived`. Did you mean to reference it inside a closure instead?",
+		"start": {
+			"column": 13,
+			"line": 18
 		}
 	}
 ]
diff --git a/packages/svelte/tests/validator/samples/tag-non-string/errors.json b/packages/svelte/tests/validator/samples/tag-non-string/errors.json
index 71f8df4d00..5473e18b7d 100644
--- a/packages/svelte/tests/validator/samples/tag-non-string/errors.json
+++ b/packages/svelte/tests/validator/samples/tag-non-string/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "svelte_options_invalid_customelement",
-		"message": "\"customElement\" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: \"open\" | \"none\"; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }",
+		"message": "\"customElement\" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: \"open\" | \"none\" | `ShadowRootInit`; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }",
 		"start": {
 			"line": 1,
 			"column": 16
diff --git a/packages/svelte/tsconfig.json b/packages/svelte/tsconfig.json
index 380307901e..bab587ace3 100644
--- a/packages/svelte/tsconfig.json
+++ b/packages/svelte/tsconfig.json
@@ -15,7 +15,6 @@
 		"allowJs": true,
 		"checkJs": true,
 		"paths": {
-			"acorn-typescript": ["./src/compiler/phases/1-parse/ambient.d.ts"],
 			"svelte": ["./src/index.d.ts"],
 			"svelte/action": ["./src/action/public.d.ts"],
 			"svelte/compiler": ["./src/compiler/public.d.ts"],
@@ -25,11 +24,7 @@
 			"svelte/motion": ["./src/motion/public.d.ts"],
 			"svelte/server": ["./src/server/index.d.ts"],
 			"svelte/store": ["./src/store/public.d.ts"],
-			"svelte/reactivity": ["./src/reactivity/index-client.js"],
-			"#compiler": ["./src/compiler/types/index.d.ts"],
-			"#client": ["./src/internal/client/types.d.ts"],
-			"#server": ["./src/internal/server/types.d.ts"],
-			"#shared": ["./src/internal/shared/types.d.ts"]
+			"svelte/reactivity": ["./src/reactivity/index-client.js"]
 		}
 	},
 	"include": [
@@ -40,5 +35,9 @@
 		"./tests/runtime-browser/test-ssr.ts",
 		"./tests/*/samples/*/_config.js"
 	],
-	"exclude": ["./scripts/process-messages/templates/", "./src/compiler/optimizer/"]
+	"exclude": [
+		"./scripts/process-messages/templates/",
+		"./scripts/_bundle.js",
+		"./src/compiler/optimizer/"
+	]
 }
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 671f68bff7..1c3795be80 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -1,3 +1,5 @@
+/// <reference types="esrap" />
+
 declare module 'svelte' {
 	/**
 	 * @deprecated In Svelte 4, components are classes. In Svelte 5, they are functions.
@@ -16,7 +18,9 @@ declare module 'svelte' {
 		intro?: boolean;
 		recover?: boolean;
 		sync?: boolean;
+		idPrefix?: string;
 		$$inline?: boolean;
+		transformError?: (error: unknown) => unknown;
 	}
 
 	/**
@@ -275,7 +279,7 @@ declare module 'svelte' {
 	 * ```
 	 * You can only call a snippet through the `{@render ...}` tag.
 	 *
-	 * https://svelte.dev/docs/svelte/snippet
+	 * See the [snippet documentation](https://svelte.dev/docs/svelte/snippet) for more info.
 	 *
 	 * @template Parameters the parameters that the snippet expects (if any) as a tuple.
 	 */
@@ -334,6 +338,11 @@ declare module 'svelte' {
 		 * @default true
 		 */
 		intro?: boolean;
+		/**
+		 * A function that transforms errors caught by error boundaries before they are passed to the `failed` snippet.
+		 * Defaults to the identity function.
+		 */
+		transformError?: (error: unknown) => unknown | Promise<unknown>;
 	} & ({} extends Props
 		? {
 				/**
@@ -347,14 +356,55 @@ declare module 'svelte' {
 				 */
 				props: Props;
 			});
+
+	/**
+	 * Represents work that is happening off-screen, such as data being preloaded
+	 * in anticipation of the user navigating
+	 * @since 5.42
+	 */
+	export interface Fork {
+		/**
+		 * Commit the fork. The promise will resolve once the state change has been applied
+		 */
+		commit(): Promise<void>;
+		/**
+		 * Discard the fork
+		 */
+		discard(): void;
+	}
+	/**
+	 * Returns an [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that aborts when the current [derived](https://svelte.dev/docs/svelte/$derived) or [effect](https://svelte.dev/docs/svelte/$effect) re-runs or is destroyed.
+	 *
+	 * Must be called while a derived or effect is running.
+	 *
+	 * ```svelte
+	 * <script>
+	 * 	import { getAbortSignal } from 'svelte';
+	 *
+	 * 	let { id } = $props();
+	 *
+	 * 	async function getData(id) {
+	 * 		const response = await fetch(`/items/${id}`, {
+	 * 			signal: getAbortSignal()
+	 * 		});
+	 *
+	 * 		return await response.json();
+	 * 	}
+	 *
+	 * 	const data = $derived(await getData(id));
+	 * </script>
+	 * ```
+	 */
+	export function getAbortSignal(): AbortSignal;
 	/**
-	 * The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM.
-	 * It must be called during the component's initialisation (but doesn't need to live *inside* the component;
-	 * it can be called from an external module).
+	 * `onMount`, like [`$effect`](https://svelte.dev/docs/svelte/$effect), schedules a function to run as soon as the component has been mounted to the DOM.
+	 * Unlike `$effect`, the provided function only runs once.
 	 *
-	 * If a function is returned _synchronously_ from `onMount`, it will be called when the component is unmounted.
+	 * It must be called during the component's initialisation (but doesn't need to live _inside_ the component;
+	 * it can be called from an external module). If a function is returned _synchronously_ from `onMount`,
+	 * it will be called when the component is unmounted.
 	 *
-	 * `onMount` does not run inside [server-side components](https://svelte.dev/docs/svelte/svelte-server#render).
+	 * `onMount` functions do not run during [server-side rendering](https://svelte.dev/docs/svelte/svelte-server#render).
 	 *
 	 * */
 	export function onMount<T>(fn: () => NotFunction<T> | Promise<NotFunction<T>> | (() => any)): void;
@@ -379,7 +429,7 @@ declare module 'svelte' {
 	 * The event dispatcher can be typed to narrow the allowed event names and the type of the `detail` argument:
 	 * ```ts
 	 * const dispatch = createEventDispatcher<{
-	 *  loaded: never; // does not take a detail argument
+	 *  loaded: null; // does not take a detail argument
 	 *  change: string; // takes a detail argument of type string, which is required
 	 *  optional: number | null; // takes an optional detail argument of type number
 	 * }>();
@@ -408,10 +458,7 @@ declare module 'svelte' {
 	 * @deprecated Use [`$effect`](https://svelte.dev/docs/svelte/$effect) instead
 	 * */
 	export function afterUpdate(fn: () => void): void;
-	/**
-	 * Synchronously flushes any pending state changes and those that result from it.
-	 * */
-	export function flushSync(fn?: (() => void) | undefined): void;
+	export function hydratable<T>(key: string, fn: () => T): T;
 	/**
 	 * Create a snippet programmatically
 	 * */
@@ -421,6 +468,69 @@ 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;
+	/**
+	 * Creates a 'fork', in which state changes are evaluated but not applied to the DOM.
+	 * This is useful for speculatively loading data (for example) when you suspect that
+	 * the user is about to take some action.
+	 *
+	 * Frameworks like SvelteKit can use this to preload data when the user touches or
+	 * hovers over a link, making any subsequent navigation feel instantaneous.
+	 *
+	 * The `fn` parameter is a synchronous function that modifies some state. The
+	 * state changes will be reverted after the fork is initialised, then reapplied
+	 * if and when the fork is eventually committed.
+	 *
+	 * When it becomes clear that a fork will _not_ be committed (e.g. because the
+	 * user navigated elsewhere), it must be discarded to avoid leaking memory.
+	 *
+	 * @since 5.42
+	 */
+	export function fork(fn: () => void): Fork;
+	/**
+	 * Returns a `[get, set]` pair of functions for working with context in a type-safe way.
+	 *
+	 * `get` will throw an error if no parent component called `set`.
+	 *
+	 * @since 5.40.0
+	 */
+	export function createContext<T>(): [() => T, (context: T) => T];
+	/**
+	 * Retrieves the context that belongs to the closest parent component with the specified `key`.
+	 * Must be called during component initialisation.
+	 *
+	 * [`createContext`](https://svelte.dev/docs/svelte/svelte#createContext) is a type-safe alternative.
+	 *
+	 * */
+	export function getContext<T>(key: any): T;
+	/**
+	 * Associates an arbitrary `context` object with the current component and the specified `key`
+	 * and returns that object. The context is then available to children of the component
+	 * (including slotted content) with `getContext`.
+	 *
+	 * Like lifecycle functions, this must be called during component initialisation.
+	 *
+	 * [`createContext`](https://svelte.dev/docs/svelte/svelte#createContext) is a type-safe alternative.
+	 *
+	 * */
+	export function setContext<T>(key: any, context: T): T;
+	/**
+	 * Checks whether a given `key` has been set in the context of a parent component.
+	 * Must be called during component initialisation.
+	 *
+	 * */
+	export function hasContext(key: any): boolean;
+	/**
+	 * Retrieves the whole context map that belongs to the closest parent component.
+	 * Must be called during component initialisation. Useful, for example, if you
+	 * programmatically create a component and want to pass the existing context to it.
+	 *
+	 * */
+	export function getAllContexts<T extends Map<any, any> = Map<any, any>>(): T;
 	/**
 	 * Mounts a component to the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component.
 	 * Transitions will play during the initial render unless the `intro` option is set to `false`.
@@ -438,6 +548,7 @@ declare module 'svelte' {
 		context?: Map<any, any>;
 		intro?: boolean;
 		recover?: boolean;
+		transformError?: (error: unknown) => unknown;
 	} : {
 		target: Document | Element | ShadowRoot;
 		props: Props;
@@ -445,6 +556,7 @@ declare module 'svelte' {
 		context?: Map<any, any>;
 		intro?: boolean;
 		recover?: boolean;
+		transformError?: (error: unknown) => unknown;
 	}): Exports;
 	/**
 	 * Unmounts a component that was previously mounted using `mount` or `hydrate`.
@@ -470,6 +582,12 @@ declare module 'svelte' {
 	 * 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.
@@ -484,34 +602,6 @@ declare module 'svelte' {
 	 * ```
 	 * */
 	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.
-	 *
-	 * */
-	export function getContext<T>(key: any): T;
-	/**
-	 * Associates an arbitrary `context` object with the current component and the specified `key`
-	 * and returns that object. The context is then available to children of the component
-	 * (including slotted content) with `getContext`.
-	 *
-	 * Like lifecycle functions, this must be called during component initialisation.
-	 *
-	 * */
-	export function setContext<T>(key: any, context: T): T;
-	/**
-	 * Checks whether a given `key` has been set in the context of a parent component.
-	 * Must be called during component initialisation.
-	 *
-	 * */
-	export function hasContext(key: any): boolean;
-	/**
-	 * Retrieves the whole context map that belongs to the closest parent component.
-	 * Must be called during component initialisation. Useful, for example, if you
-	 * programmatically create a component and want to pass the existing context to it.
-	 *
-	 * */
-	export function getAllContexts<T extends Map<any, any> = Map<any, any>>(): T;
 	type Getters<T> = {
 		[K in keyof T]: () => T[K];
 	};
@@ -621,10 +711,150 @@ declare module 'svelte/animate' {
 	export {};
 }
 
+declare module 'svelte/attachments' {
+	/**
+	 * An [attachment](https://svelte.dev/docs/svelte/@attach) is a function that runs when an element is mounted
+	 * to the DOM, and optionally returns a function that is called when the element is later removed.
+	 *
+	 * It can be attached to an element with an `{@attach ...}` tag, or by spreading an object containing
+	 * a property created with [`createAttachmentKey`](https://svelte.dev/docs/svelte/svelte-attachments#createAttachmentKey).
+	 */
+	export interface Attachment<T extends EventTarget = Element> {
+		(element: T): void | (() => void);
+	}
+	/**
+	 * Creates an object key that will be recognised as an attachment when the object is spread onto an element,
+	 * as a programmatic alternative to using `{@attach ...}`. This can be useful for library authors, though
+	 * is generally not needed when building an app.
+	 *
+	 * ```svelte
+	 * <script>
+	 * 	import { createAttachmentKey } from 'svelte/attachments';
+	 *
+	 * 	const props = {
+	 * 		class: 'cool',
+	 * 		onclick: () => alert('clicked'),
+	 * 		[createAttachmentKey()]: (node) => {
+	 * 			node.textContent = 'attached!';
+	 * 		}
+	 * 	};
+	 * </script>
+	 *
+	 * <button {...props}>click me</button>
+	 * ```
+	 * @since 5.29
+	 */
+	export function createAttachmentKey(): symbol;
+	/**
+	 * Converts an [action](https://svelte.dev/docs/svelte/use) into an [attachment](https://svelte.dev/docs/svelte/@attach) keeping the same behavior.
+	 * It's useful if you want to start using attachments on components but you have actions provided by a library.
+	 *
+	 * Note that the second argument, if provided, must be a function that _returns_ the argument to the
+	 * action function, not the argument itself.
+	 *
+	 * ```svelte
+	 * <!-- with an action -->
+	 * <div use:foo={bar}>...</div>
+	 *
+	 * <!-- with an attachment -->
+	 * <div {@attach fromAction(foo, () => bar)}>...</div>
+	 * ```
+	 * */
+	export function fromAction<E extends EventTarget, T extends unknown>(action: Action<E, T> | ((element: E, arg: T) => void | ActionReturn<T>), fn: () => T): Attachment<E>;
+	/**
+	 * Converts an [action](https://svelte.dev/docs/svelte/use) into an [attachment](https://svelte.dev/docs/svelte/@attach) keeping the same behavior.
+	 * It's useful if you want to start using attachments on components but you have actions provided by a library.
+	 *
+	 * Note that the second argument, if provided, must be a function that _returns_ the argument to the
+	 * action function, not the argument itself.
+	 *
+	 * ```svelte
+	 * <!-- with an action -->
+	 * <div use:foo={bar}>...</div>
+	 *
+	 * <!-- with an attachment -->
+	 * <div {@attach fromAction(foo, () => bar)}>...</div>
+	 * ```
+	 * */
+	export function fromAction<E extends EventTarget>(action: Action<E, void> | ((element: E) => void | ActionReturn<void>)): Attachment<E>;
+	/**
+	 * Actions can return an object containing the two properties defined in this interface. Both are optional.
+	 * - update: An action can have a parameter. This method will be called whenever that parameter changes,
+	 *   immediately after Svelte has applied updates to the markup. `ActionReturn` and `ActionReturn<undefined>` both
+	 *   mean that the action accepts no parameters.
+	 * - destroy: Method that is called after the element is unmounted
+	 *
+	 * Additionally, you can specify which additional attributes and events the action enables on the applied element.
+	 * This applies to TypeScript typings only and has no effect at runtime.
+	 *
+	 * Example usage:
+	 * ```ts
+	 * interface Attributes {
+	 * 	newprop?: string;
+	 * 	'on:event': (e: CustomEvent<boolean>) => void;
+	 * }
+	 *
+	 * export function myAction(node: HTMLElement, parameter: Parameter): ActionReturn<Parameter, Attributes> {
+	 * 	// ...
+	 * 	return {
+	 * 		update: (updatedParameter) => {...},
+	 * 		destroy: () => {...}
+	 * 	};
+	 * }
+	 * ```
+	 */
+	interface ActionReturn<
+		Parameter = undefined,
+		Attributes extends Record<string, any> = Record<never, any>
+	> {
+		update?: (parameter: Parameter) => void;
+		destroy?: () => void;
+		/**
+		 * ### DO NOT USE THIS
+		 * This exists solely for type-checking and has no effect at runtime.
+		 * Set this through the `Attributes` generic instead.
+		 */
+		$$_attributes?: Attributes;
+	}
+
+	/**
+	 * Actions are functions that are called when an element is created.
+	 * You can use this interface to type such actions.
+	 * The following example defines an action that only works on `<div>` elements
+	 * and optionally accepts a parameter which it has a default value for:
+	 * ```ts
+	 * export const myAction: Action<HTMLDivElement, { someProperty: boolean } | undefined> = (node, param = { someProperty: true }) => {
+	 *   // ...
+	 * }
+	 * ```
+	 * `Action<HTMLDivElement>` and `Action<HTMLDivElement, undefined>` both signal that the action accepts no parameters.
+	 *
+	 * You can return an object with methods `update` and `destroy` from the function and type which additional attributes and events it has.
+	 * See interface `ActionReturn` for more details.
+	 */
+	interface Action<
+		Element = HTMLElement,
+		Parameter = undefined,
+		Attributes extends Record<string, any> = Record<never, any>
+	> {
+		<Node extends Element>(
+			...args: undefined extends Parameter
+				? [node: Node, parameter?: Parameter]
+				: [node: Node, parameter: Parameter]
+		): void | ActionReturn<Parameter, Attributes>;
+	}
+
+	// Implementation notes:
+	// - undefined extends X instead of X extends undefined makes this work better with both strict and nonstrict mode
+
+	export {};
+}
+
 declare module 'svelte/compiler' {
-	import type { Expression, Identifier, ArrayExpression, ArrowFunctionExpression, VariableDeclaration, VariableDeclarator, MemberExpression, Node, ObjectExpression, Pattern, Program, ChainExpression, SimpleCallExpression, SequenceExpression } from 'estree';
 	import type { SourceMap } from 'magic-string';
+	import type { ArrayExpression, ArrowFunctionExpression, VariableDeclaration, VariableDeclarator, Expression, Identifier, MemberExpression, Node, ObjectExpression, Pattern, Program, ChainExpression, SimpleCallExpression, SequenceExpression, SourceLocation } from 'estree';
 	import type { Location } from 'locate-character';
+	import type { default as ts } from 'esrap/languages/ts';
 	/**
 	 * `compile` converts your `.svelte` source code into a JavaScript module that exports a component
 	 *
@@ -662,6 +892,12 @@ declare module 'svelte/compiler' {
 		modern?: false;
 		loose?: boolean;
 	} | undefined): Record<string, any>;
+	/**
+	 * The parseCss function parses a CSS stylesheet, returning its abstract syntax tree.
+	 *
+	 * @param source The CSS source code
+	 * */
+	export function parseCss(source: string): AST.CSS.StyleSheetFile;
 	/**
 	 * @deprecated Replace this with `import { walk } from 'estree-walker'`
 	 * */
@@ -750,6 +986,8 @@ declare module 'svelte/compiler' {
 			code: string;
 			/** A source map */
 			map: SourceMap;
+			/** Whether or not the CSS includes global rules */
+			hasGlobal: boolean;
 		};
 		/**
 		 * An array of warning objects that were generated during compilation. Each warning has several properties:
@@ -792,9 +1030,11 @@ declare module 'svelte/compiler' {
 		/**
 		 * If `true`, tells the compiler to generate a custom element constructor instead of a regular Svelte component.
 		 *
+		 * You can also pass a function that receives `{ filename }` and returns a boolean.
+		 *
 		 * @default false
 		 */
-		customElement?: boolean;
+		customElement?: boolean | ((options: { filename: string }) => boolean);
 		/**
 		 * If `true`, getters and setters will be created for the component's props. If `false`, they will only be created for readonly exported values (i.e. those declared with `const`, `class` and `function`). If compiling with `customElement: true` this option defaults to `true`.
 		 *
@@ -820,11 +1060,13 @@ declare module 'svelte/compiler' {
 		 * - `'injected'`: styles will be included in the `head` when using `render(...)`, and injected into the document (if not already present) when the component mounts. For components compiled as custom elements, styles are injected to the shadow root.
 		 * - `'external'`: the CSS will only be returned in the `css` field of the compilation result. Most Svelte bundler plugins will set this to `'external'` and use the CSS that is statically generated for better performance, as it will result in smaller JavaScript bundles and the output can be served as cacheable `.css` files.
 		 * This is always `'injected'` when compiling with `customElement` mode.
+		 *
+		 * You can also pass a function that receives `{ filename }` and returns either `'injected'` or `'external'`.
 		 */
-		css?: 'injected' | 'external';
+		css?: 'injected' | 'external' | ((options: { filename: string }) => 'injected' | 'external');
 		/**
 		 * A function that takes a `{ hash, css, name, filename }` argument and returns the string that is used as a classname for scoped CSS.
-		 * It defaults to returning `svelte-${hash(css)}`.
+		 * It defaults to returning `svelte-${hash(filename ?? css)}`.
 		 *
 		 * @default undefined
 		 */
@@ -841,6 +1083,16 @@ declare module 'svelte/compiler' {
 		 * @default false
 		 */
 		preserveWhitespace?: boolean;
+		/**
+		 * Which strategy to use when cloning DOM fragments:
+		 *
+		 * - `html` populates a `<template>` with `innerHTML` and clones it. This is faster, but cannot be used if your app's [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) includes [`require-trusted-types-for 'script'`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/require-trusted-types-for)
+		 * - `tree` creates the fragment one element at a time and _then_ clones it. This is slower, but works everywhere
+		 *
+		 * @default 'html'
+		 * @since 5.33
+		 */
+		fragments?: 'html' | 'tree';
 		/**
 		 * Set to `true` to force the compiler into runes mode, even if there are no indications of runes usage.
 		 * Set to `false` to force the compiler into ignoring runes, even if there are indications of runes usage.
@@ -851,7 +1103,7 @@ declare module 'svelte/compiler' {
 		 * which is likely not what you want. If you're using Vite, consider using [dynamicCompileOptions](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#dynamiccompileoptions) instead.
 		 * @default undefined
 		 */
-		runes?: boolean | undefined;
+		runes?: boolean | undefined | ((options: { filename: string }) => boolean | undefined);
 		/**
 		 *  If `true`, exposes the Svelte major version in the browser by adding it to a `Set` stored in the global `window.__svelte.v`.
 		 *
@@ -933,6 +1185,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>`
@@ -966,6 +1229,8 @@ declare module 'svelte/compiler' {
 			instance: Script | null;
 			/** The parsed `<script module>` element, if exists */
 			module: Script | null;
+			/** Comments found in <script> and {expressions} */
+			comments: JSComment[];
 		}
 
 		export interface SvelteOptions {
@@ -981,7 +1246,7 @@ declare module 'svelte/compiler' {
 			css?: 'injected';
 			customElement?: {
 				tag?: string;
-				shadow?: 'open' | 'none';
+				shadow?: 'open' | 'none' | ObjectExpression | undefined;
 				props?: Record<
 					string,
 					{
@@ -1038,6 +1303,12 @@ declare module 'svelte/compiler' {
 			};
 		}
 
+		/** A `{let ...}` or `{const ...}` tag */
+		export interface DeclarationTag extends BaseNode {
+			type: 'DeclarationTag';
+			declaration: VariableDeclaration;
+		}
+
 		/** A `{@debug ...}` tag */
 		export interface DebugTag extends BaseNode {
 			type: 'DebugTag';
@@ -1050,8 +1321,14 @@ declare module 'svelte/compiler' {
 			expression: SimpleCallExpression | (ChainExpression & { expression: SimpleCallExpression });
 		}
 
+		/** A `{@attach foo(...)} tag */
+		export interface AttachTag extends BaseNode {
+			type: 'AttachTag';
+			expression: Expression;
+		}
+
 		/** An `animate:` directive */
-		export interface AnimateDirective extends BaseNode {
+		export interface AnimateDirective extends BaseAttribute {
 			type: 'AnimateDirective';
 			/** The 'x' in `animate:x` */
 			name: string;
@@ -1060,7 +1337,7 @@ declare module 'svelte/compiler' {
 		}
 
 		/** A `bind:` directive */
-		export interface BindDirective extends BaseNode {
+		export interface BindDirective extends BaseAttribute {
 			type: 'BindDirective';
 			/** The 'x' in `bind:x` */
 			name: string;
@@ -1069,7 +1346,7 @@ declare module 'svelte/compiler' {
 		}
 
 		/** A `class:` directive */
-		export interface ClassDirective extends BaseNode {
+		export interface ClassDirective extends BaseAttribute {
 			type: 'ClassDirective';
 			/** The 'x' in `class:x` */
 			name: 'class';
@@ -1078,7 +1355,7 @@ declare module 'svelte/compiler' {
 		}
 
 		/** A `let:` directive */
-		export interface LetDirective extends BaseNode {
+		export interface LetDirective extends BaseAttribute {
 			type: 'LetDirective';
 			/** The 'x' in `let:x` */
 			name: string;
@@ -1087,17 +1364,27 @@ declare module 'svelte/compiler' {
 		}
 
 		/** An `on:` directive */
-		export interface OnDirective extends BaseNode {
+		export interface OnDirective extends BaseAttribute {
 			type: 'OnDirective';
 			/** The 'x' in `on:x` */
 			name: string;
 			/** The 'y' in `on:x={y}` */
 			expression: null | Expression;
-			modifiers: string[];
+			modifiers: Array<
+				| 'capture'
+				| 'nonpassive'
+				| 'once'
+				| 'passive'
+				| 'preventDefault'
+				| 'self'
+				| 'stopImmediatePropagation'
+				| 'stopPropagation'
+				| 'trusted'
+			>;
 		}
 
 		/** A `style:` directive */
-		export interface StyleDirective extends BaseNode {
+		export interface StyleDirective extends BaseAttribute {
 			type: 'StyleDirective';
 			/** The 'x' in `style:x` */
 			name: string;
@@ -1108,7 +1395,7 @@ declare module 'svelte/compiler' {
 
 		// TODO have separate in/out/transition directives
 		/** A `transition:`, `in:` or `out:` directive */
-		export interface TransitionDirective extends BaseNode {
+		export interface TransitionDirective extends BaseAttribute {
 			type: 'TransitionDirective';
 			/** The 'x' in `transition:x` */
 			name: string;
@@ -1122,7 +1409,7 @@ declare module 'svelte/compiler' {
 		}
 
 		/** A `use:` directive */
-		export interface UseDirective extends BaseNode {
+		export interface UseDirective extends BaseAttribute {
 			type: 'UseDirective';
 			/** The 'x' in `use:x` */
 			name: string;
@@ -1130,9 +1417,10 @@ declare module 'svelte/compiler' {
 			expression: null | Expression;
 		}
 
-		interface BaseElement extends BaseNode {
+		export interface BaseElement extends BaseNode {
 			name: string;
-			attributes: Array<Attribute | SpreadAttribute | Directive>;
+			name_loc: SourceLocation;
+			attributes: Array<Attribute | SpreadAttribute | Directive | AttachTag>;
 			fragment: Fragment;
 		}
 
@@ -1252,12 +1540,17 @@ declare module 'svelte/compiler' {
 			type: 'SnippetBlock';
 			expression: Identifier;
 			parameters: Pattern[];
+			typeParams?: string;
 			body: Fragment;
 		}
 
-		export interface Attribute extends BaseNode {
-			type: 'Attribute';
+		export interface BaseAttribute extends BaseNode {
 			name: string;
+			name_loc: SourceLocation | null;
+		}
+
+		export interface Attribute extends BaseAttribute {
+			type: 'Attribute';
 			/**
 			 * Quoted/string values are represented by an array, even if they contain a single expression like `"{x}"`
 			 */
@@ -1276,6 +1569,17 @@ declare module 'svelte/compiler' {
 			attributes: Attribute[];
 		}
 
+		export interface JSComment {
+			type: 'Line' | 'Block';
+			value: string;
+			start: number;
+			end: number;
+			loc: {
+				start: { line: number; column: number };
+				end: { line: number; column: number };
+			};
+		}
+
 		export type AttributeLike = Attribute | SpreadAttribute | Directive;
 
 		export type Directive =
@@ -1312,7 +1616,14 @@ declare module 'svelte/compiler' {
 			| AST.SvelteWindow
 			| AST.SvelteBoundary;
 
-		export type Tag = AST.ExpressionTag | AST.HtmlTag | AST.ConstTag | AST.DebugTag | AST.RenderTag;
+		export type Tag =
+			| AST.AttachTag
+			| AST.ConstTag
+			| AST.DeclarationTag
+			| AST.DebugTag
+			| AST.ExpressionTag
+			| AST.HtmlTag
+			| AST.RenderTag;
 
 		export type TemplateNode =
 			| AST.Root
@@ -1322,10 +1633,11 @@ declare module 'svelte/compiler' {
 			| AST.Attribute
 			| AST.SpreadAttribute
 			| Directive
+			| AST.AttachTag
 			| AST.Comment
 			| Block;
 
-		export type SvelteNode = Node | TemplateNode | AST.Fragment | _CSS.Node;
+		export type SvelteNode = Node | TemplateNode | AST.Fragment | _CSS.Node | Script;
 
 		export type { _CSS as CSS };
 	}
@@ -1338,9 +1650,19 @@ declare module 'svelte/compiler' {
 		filename?: string;
 	} | undefined): Promise<Processed>;
 	/**
-	 * The current version, as set in package.json.
+	 * `print` converts a Svelte AST node back into Svelte source code.
+	 * It is primarily intended for tools that parse and transform components using the compiler’s modern AST representation.
 	 *
-	 * https://svelte.dev/docs/svelte-compiler#svelte-version
+	 * `print(ast)` requires an AST node produced by parse with modern: true, or any sub-node within that modern AST.
+	 * The result contains the generated source and a corresponding source map.
+	 * The output is valid Svelte, but formatting details such as whitespace or quoting may differ from the original.
+	 * */
+	export function print(ast: AST.SvelteNode, options?: Options | undefined): {
+		code: string;
+		map: any;
+	};
+	/**
+	 * The current version, as set in package.json.
 	 * */
 	export const VERSION: string;
 	/**
@@ -1370,10 +1692,17 @@ declare module 'svelte/compiler' {
 			end: number;
 		}
 
-		export interface StyleSheet extends BaseNode {
+		export interface StyleSheetBase extends BaseNode {
+			children: Array<Atrule | Rule>;
+		}
+
+		export interface StyleSheetFile extends StyleSheetBase {
+			type: 'StyleSheetFile';
+		}
+
+		export interface StyleSheet extends StyleSheetBase {
 			type: 'StyleSheet';
 			attributes: any[]; // TODO
-			children: Array<Atrule | Rule>;
 			content: {
 				start: number;
 				end: number;
@@ -1522,6 +1851,10 @@ declare module 'svelte/compiler' {
 			| SimpleSelector
 			| Declaration;
 	}
+	type Options = {
+		getLeadingComments?: NonNullable<Parameters<typeof ts>[0]>['getLeadingComments'] | undefined;
+		getTrailingComments?: NonNullable<Parameters<typeof ts>[0]>['getTrailingComments'] | undefined;
+	};
 
 	export {};
 }
@@ -1679,16 +2012,50 @@ declare module 'svelte/legacy' {
 
 declare module 'svelte/motion' {
 	import type { MediaQuery } from 'svelte/reactivity';
+	export interface SpringOptions {
+		stiffness?: number;
+		damping?: number;
+		precision?: number;
+	}
+
+	export interface SpringUpdateOptions {
+		/**
+		 * @deprecated Only use this for the spring store; does nothing when set on the Spring class
+		 */
+		hard?: any;
+		/**
+		 * @deprecated Only use this for the spring store; does nothing when set on the Spring class
+		 */
+		soft?: string | number | boolean;
+		/**
+		 * Only use this for the Spring class; does nothing when set on the spring store
+		 */
+		instant?: boolean;
+		/**
+		 * Only use this for the Spring class; does nothing when set on the spring store
+		 */
+		preserveMomentum?: number;
+	}
+
+	export type Updater<T> = (target_value: T, value: T) => T;
+
+	export interface TweenOptions<T> {
+		delay?: number;
+		duration?: number | ((from: T, to: T) => number);
+		easing?: (t: number) => number;
+		interpolate?: (a: T, b: T) => (t: number) => T;
+	}
+
 	// TODO we do declaration merging here in order to not have a breaking change (renaming the Spring interface)
 	// this means both the Spring class and the Spring interface are merged into one with some things only
 	// existing on one side. In Svelte 6, remove the type definition and move the jsdoc onto the class in spring.js
 
 	export interface Spring<T> extends Readable<T> {
-		set(new_value: T, opts?: SpringUpdateOpts): Promise<void>;
+		set(new_value: T, opts?: SpringUpdateOptions): Promise<void>;
 		/**
 		 * @deprecated Only exists on the legacy `spring` store, not the `Spring` class
 		 */
-		update: (fn: Updater<T>, opts?: SpringUpdateOpts) => Promise<void>;
+		update: (fn: Updater<T>, opts?: SpringUpdateOptions) => Promise<void>;
 		/**
 		 * @deprecated Only exists on the legacy `spring` store, not the `Spring` class
 		 */
@@ -1715,7 +2082,7 @@ declare module 'svelte/motion' {
 	 * @since 5.8.0
 	 */
 	export class Spring<T> {
-		constructor(value: T, options?: SpringOpts);
+		constructor(value: T, options?: SpringOptions);
 
 		/**
 		 * Create a spring whose value is bound to the return value of `fn`. This must be called
@@ -1731,7 +2098,7 @@ declare module 'svelte/motion' {
 		 * </script>
 		 * ```
 		 */
-		static of<U>(fn: () => U, options?: SpringOpts): Spring<U>;
+		static of<U>(fn: () => U, options?: SpringOptions): Spring<U>;
 
 		/**
 		 * Sets `spring.target` to `value` and returns a `Promise` that resolves if and when `spring.current` catches up to it.
@@ -1741,7 +2108,7 @@ declare module 'svelte/motion' {
 		 * If `options.preserveMomentum` is provided, the spring will continue on its current trajectory for
 		 * the specified number of milliseconds. This is useful for things like 'fling' gestures.
 		 */
-		set(value: T, options?: SpringUpdateOpts): Promise<void>;
+		set(value: T, options?: SpringUpdateOptions): Promise<void>;
 
 		damping: number;
 		precision: number;
@@ -1759,8 +2126,8 @@ declare module 'svelte/motion' {
 	}
 
 	export interface Tweened<T> extends Readable<T> {
-		set(value: T, opts?: TweenedOptions<T>): Promise<void>;
-		update(updater: Updater<T>, opts?: TweenedOptions<T>): Promise<void>;
+		set(value: T, opts?: TweenOptions<T>): Promise<void>;
+		update(updater: Updater<T>, opts?: TweenOptions<T>): Promise<void>;
 	}
 	/** Callback to inform of a value updates. */
 	type Subscriber<T> = (value: T) => void;
@@ -1777,39 +2144,6 @@ declare module 'svelte/motion' {
 		 */
 		subscribe(this: void, run: Subscriber<T>, invalidate?: () => void): Unsubscriber;
 	}
-	interface SpringOpts {
-		stiffness?: number;
-		damping?: number;
-		precision?: number;
-	}
-
-	interface SpringUpdateOpts {
-		/**
-		 * @deprecated Only use this for the spring store; does nothing when set on the Spring class
-		 */
-		hard?: any;
-		/**
-		 * @deprecated Only use this for the spring store; does nothing when set on the Spring class
-		 */
-		soft?: string | number | boolean;
-		/**
-		 * Only use this for the Spring class; does nothing when set on the spring store
-		 */
-		instant?: boolean;
-		/**
-		 * Only use this for the Spring class; does nothing when set on the spring store
-		 */
-		preserveMomentum?: number;
-	}
-
-	type Updater<T> = (target_value: T, value: T) => T;
-
-	interface TweenedOptions<T> {
-		delay?: number;
-		duration?: number | ((from: T, to: T) => number);
-		easing?: (t: number) => number;
-		interpolate?: (a: T, b: T) => (t: number) => T;
-	}
 	/**
 	 * A [media query](https://svelte.dev/docs/svelte/svelte-reactivity#MediaQuery) that matches if the user [prefers reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion).
 	 *
@@ -1839,13 +2173,13 @@ declare module 'svelte/motion' {
 	 *
 	 * @deprecated Use [`Spring`](https://svelte.dev/docs/svelte/svelte-motion#Spring) instead
 	 * */
-	export function spring<T = any>(value?: T | undefined, opts?: SpringOpts | undefined): Spring<T>;
+	export function spring<T = any>(value?: T | undefined, opts?: SpringOptions | undefined): Spring<T>;
 	/**
 	 * A tweened store in Svelte is a special type of store that provides smooth transitions between state values over time.
 	 *
 	 * @deprecated Use [`Tween`](https://svelte.dev/docs/svelte/svelte-motion#Tween) instead
 	 * */
-	export function tweened<T>(value?: T | undefined, defaults?: TweenedOptions<T> | undefined): Tweened<T>;
+	export function tweened<T>(value?: T | undefined, defaults?: TweenOptions<T> | undefined): Tweened<T>;
 	/**
 	 * A wrapper for a value that tweens smoothly to its target value. Changes to `tween.target` will cause `tween.current` to
 	 * move towards it over time, taking account of the `delay`, `duration` and `easing` options.
@@ -1878,15 +2212,15 @@ declare module 'svelte/motion' {
 		 * ```
 		 * 
 		 */
-		static of<U>(fn: () => U, options?: TweenedOptions<U> | undefined): Tween<U>;
+		static of<U>(fn: () => U, options?: TweenOptions<U> | undefined): Tween<U>;
 		
-		constructor(value: T, options?: TweenedOptions<T>);
+		constructor(value: T, options?: TweenOptions<T>);
 		/**
 		 * Sets `tween.target` to `value` and returns a `Promise` that resolves if and when `tween.current` catches up to it.
 		 *
 		 * If `options` are provided, they will override the tween's defaults.
 		 * */
-		set(value: T, options?: TweenedOptions<T> | undefined): Promise<void>;
+		set(value: T, options?: TweenOptions<T> | undefined): Promise<void>;
 		get current(): T;
 		set target(v: T);
 		get target(): T;
@@ -1897,11 +2231,77 @@ declare module 'svelte/motion' {
 }
 
 declare module 'svelte/reactivity' {
+	/**
+	 * A reactive version of the built-in [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object.
+	 * Reading the date (whether with methods like `date.getTime()` or `date.toString()`, or via things like [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat))
+	 * in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived)
+	 * will cause it to be re-evaluated when the value of the date changes.
+	 *
+	 * ```svelte
+	 * <script>
+	 * 	import { SvelteDate } from 'svelte/reactivity';
+	 *
+	 * 	const date = new SvelteDate();
+	 *
+	 * 	const formatter = new Intl.DateTimeFormat(undefined, {
+	 * 	  hour: 'numeric',
+	 * 	  minute: 'numeric',
+	 * 	  second: 'numeric'
+	 * 	});
+	 *
+	 * 	$effect(() => {
+	 * 		const interval = setInterval(() => {
+	 * 			date.setTime(Date.now());
+	 * 		}, 1000);
+	 *
+	 * 		return () => {
+	 * 			clearInterval(interval);
+	 * 		};
+	 * 	});
+	 * </script>
+	 *
+	 * <p>The time is {formatter.format(date)}</p>
+	 * ```
+	 */
 	export class SvelteDate extends Date {
 		
 		constructor(...params: any[]);
 		#private;
 	}
+	/**
+	 * A reactive version of the built-in [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) object.
+	 * Reading contents of the set (by iterating, or by reading `set.size` or calling `set.has(...)` as in the [example](https://svelte.dev/playground/53438b51194b4882bcc18cddf9f96f15) below) in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived)
+	 * will cause it to be re-evaluated as necessary when the set is updated.
+	 *
+	 * Note that values in a reactive set are _not_ made [deeply reactive](https://svelte.dev/docs/svelte/$state#Deep-state).
+	 *
+	 * ```svelte
+	 * <script>
+	 * 	import { SvelteSet } from 'svelte/reactivity';
+	 * 	let monkeys = new SvelteSet();
+	 *
+	 * 	function toggle(monkey) {
+	 * 		if (monkeys.has(monkey)) {
+	 * 			monkeys.delete(monkey);
+	 * 		} else {
+	 * 			monkeys.add(monkey);
+	 * 		}
+	 * 	}
+	 * </script>
+	 *
+	 * {#each ['🙈', '🙉', '🙊'] as monkey}
+	 * 	<button onclick={() => toggle(monkey)}>{monkey}</button>
+	 * {/each}
+	 *
+	 * <button onclick={() => monkeys.clear()}>clear</button>
+	 *
+	 * {#if monkeys.has('🙈')}<p>see no evil</p>{/if}
+	 * {#if monkeys.has('🙉')}<p>hear no evil</p>{/if}
+	 * {#if monkeys.has('🙊')}<p>speak no evil</p>{/if}
+	 * ```
+	 *
+	 * 
+	 */
 	export class SvelteSet<T> extends Set<T> {
 		
 		constructor(value?: Iterable<T> | null | undefined);
@@ -1909,6 +2309,50 @@ declare module 'svelte/reactivity' {
 		add(value: T): this;
 		#private;
 	}
+	/**
+	 * A reactive version of the built-in [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) object.
+	 * Reading contents of the map (by iterating, or by reading `map.size` or calling `map.get(...)` or `map.has(...)` as in the [tic-tac-toe example](https://svelte.dev/playground/0b0ff4aa49c9443f9b47fe5203c78293) below) in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived)
+	 * will cause it to be re-evaluated as necessary when the map is updated.
+	 *
+	 * Note that values in a reactive map are _not_ made [deeply reactive](https://svelte.dev/docs/svelte/$state#Deep-state).
+	 *
+	 * ```svelte
+	 * <script>
+	 * 	import { SvelteMap } from 'svelte/reactivity';
+	 * 	import { result } from './game.js';
+	 *
+	 * 	let board = new SvelteMap();
+	 * 	let player = $state('x');
+	 * 	let winner = $derived(result(board));
+	 *
+	 * 	function reset() {
+	 * 		player = 'x';
+	 * 		board.clear();
+	 * 	}
+	 * </script>
+	 *
+	 * <div class="board">
+	 * 	{#each Array(9), i}
+	 * 		<button
+	 * 			disabled={board.has(i) || winner}
+	 * 			onclick={() => {
+	 * 				board.set(i, player);
+	 * 				player = player === 'x' ? 'o' : 'x';
+	 * 			}}
+	 * 		>{board.get(i)}</button>
+	 * 	{/each}
+	 * </div>
+	 *
+	 * {#if winner}
+	 * 	<p>{winner} wins!</p>
+	 * 	<button onclick={reset}>reset</button>
+	 * {:else}
+	 * 	<p>{player} is next</p>
+	 * {/if}
+	 * ```
+	 *
+	 * 
+	 */
 	export class SvelteMap<K, V> extends Map<K, V> {
 		
 		constructor(value?: Iterable<readonly [K, V]> | null | undefined);
@@ -1916,11 +2360,64 @@ declare module 'svelte/reactivity' {
 		set(key: K, value: V): this;
 		#private;
 	}
+	/**
+	 * A reactive version of the built-in [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) object.
+	 * Reading properties of the URL (such as `url.href` or `url.pathname`) in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived)
+	 * will cause it to be re-evaluated as necessary when the URL changes.
+	 *
+	 * The `searchParams` property is an instance of [SvelteURLSearchParams](https://svelte.dev/docs/svelte/svelte-reactivity#SvelteURLSearchParams).
+	 *
+	 * [Example](https://svelte.dev/playground/5a694758901b448c83dc40dc31c71f2a):
+	 *
+	 * ```svelte
+	 * <script>
+	 * 	import { SvelteURL } from 'svelte/reactivity';
+	 *
+	 * 	const url = new SvelteURL('https://example.com/path');
+	 * </script>
+	 *
+	 * <!-- changes to these... -->
+	 * <input bind:value={url.protocol} />
+	 * <input bind:value={url.hostname} />
+	 * <input bind:value={url.pathname} />
+	 *
+	 * <hr />
+	 *
+	 * <!-- will update `href` and vice versa -->
+	 * <input bind:value={url.href} size="65" />
+	 * ```
+	 */
 	export class SvelteURL extends URL {
 		get searchParams(): SvelteURLSearchParams;
 		#private;
 	}
 	const REPLACE: unique symbol;
+	/**
+	 * A reactive version of the built-in [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) object.
+	 * Reading its contents (by iterating, or by calling `params.get(...)` or `params.getAll(...)` as in the [example](https://svelte.dev/playground/b3926c86c5384bab9f2cf993bc08c1c8) below) in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived)
+	 * will cause it to be re-evaluated as necessary when the params are updated.
+	 *
+	 * ```svelte
+	 * <script>
+	 * 	import { SvelteURLSearchParams } from 'svelte/reactivity';
+	 *
+	 * 	const params = new SvelteURLSearchParams('message=hello');
+	 *
+	 * 	let key = $state('key');
+	 * 	let value = $state('value');
+	 * </script>
+	 *
+	 * <input bind:value={key} />
+	 * <input bind:value={value} />
+	 * <button onclick={() => params.append(key, value)}>append</button>
+	 *
+	 * <p>?{params.toString()}</p>
+	 *
+	 * {#each params as [key, value]}
+	 * 	<p>{key}: {value}</p>
+	 * {/each}
+	 * ```
+	 */
 	export class SvelteURLSearchParams extends URLSearchParams {
 		
 		[REPLACE](params: URLSearchParams): void;
@@ -1952,10 +2449,13 @@ declare module 'svelte/reactivity' {
 		constructor(query: string, fallback?: boolean | undefined);
 	}
 	/**
-	 * Returns a `subscribe` function that, if called in an effect (including expressions in the template),
-	 * calls its `start` callback with an `update` function. Whenever `update` is called, the effect re-runs.
+	 * Returns a `subscribe` function that integrates external event-based systems with Svelte's reactivity.
+	 * It's particularly useful for integrating with web APIs like `MediaQuery`, `IntersectionObserver`, or `WebSocket`.
 	 *
-	 * If `start` returns a function, it will be called when the effect is destroyed.
+	 * If `subscribe` is called inside an effect (including indirectly, for example inside a getter),
+	 * the `start` callback will be called with an `update` function. Whenever `update` is called, the effect re-runs.
+	 *
+	 * If `start` returns a cleanup function, it will be called when the effect is destroyed.
 	 *
 	 * If `subscribe` is called in multiple effects, `start` will only be called once as long as the effects
 	 * are active, and the returned teardown function will only be called when all effects are destroyed.
@@ -1983,6 +2483,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
@@ -2081,22 +2582,43 @@ declare module 'svelte/server' {
 		...args: {} extends Props
 			? [
 					component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp,
-					options?: { props?: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any> }
+					options?: {
+						props?: Omit<Props, '$$slots' | '$$events'>;
+						context?: Map<any, any>;
+						idPrefix?: string;
+						csp?: Csp;
+						transformError?: (error: unknown) => unknown | Promise<unknown>;
+					}
 				]
 			: [
 					component: Comp extends SvelteComponent<any> ? ComponentType<Comp> : Comp,
-					options: { props: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any> }
+					options: {
+						props: Omit<Props, '$$slots' | '$$events'>;
+						context?: Map<any, any>;
+						idPrefix?: string;
+						csp?: Csp;
+						transformError?: (error: unknown) => unknown | Promise<unknown>;
+					}
 				]
 	): RenderOutput;
-	interface RenderOutput {
+	type Csp = { nonce?: string; hash?: boolean };
+
+	type Sha256Source = `sha256-${string}`;
+
+	interface SyncRenderOutput {
 		/** HTML that goes into the `<head>` */
 		head: string;
 		/** @deprecated use `body` instead */
 		html: string;
 		/** HTML that goes somewhere into the `<body>` */
 		body: string;
+		hashes: {
+			script: Sha256Source[];
+		};
 	}
 
+	type RenderOutput = SyncRenderOutput & PromiseLike<SyncRenderOutput>;
+
 	export {};
 }
 
@@ -2323,7 +2845,7 @@ declare module 'svelte/events' {
 	export function on<Type extends keyof WindowEventMap>(
 		window: Window,
 		type: Type,
-		handler: (this: Window, event: WindowEventMap[Type]) => any,
+		handler: (this: Window, event: WindowEventMap[Type] & { currentTarget: Window }) => any,
 		options?: AddEventListenerOptions | undefined
 	): () => void;
 	/**
@@ -2334,7 +2856,7 @@ declare module 'svelte/events' {
 	export function on<Type extends keyof DocumentEventMap>(
 		document: Document,
 		type: Type,
-		handler: (this: Document, event: DocumentEventMap[Type]) => any,
+		handler: (this: Document, event: DocumentEventMap[Type] & { currentTarget: Document }) => any,
 		options?: AddEventListenerOptions | undefined
 	): () => void;
 	/**
@@ -2345,7 +2867,7 @@ declare module 'svelte/events' {
 	export function on<Element extends HTMLElement, Type extends keyof HTMLElementEventMap>(
 		element: Element,
 		type: Type,
-		handler: (this: Element, event: HTMLElementEventMap[Type]) => any,
+		handler: (this: Element, event: HTMLElementEventMap[Type] & { currentTarget: Element }) => any,
 		options?: AddEventListenerOptions | undefined
 	): () => void;
 	/**
@@ -2356,7 +2878,7 @@ declare module 'svelte/events' {
 	export function on<Element extends MediaQueryList, Type extends keyof MediaQueryListEventMap>(
 		element: Element,
 		type: Type,
-		handler: (this: Element, event: MediaQueryListEventMap[Type]) => any,
+		handler: (this: Element, event: MediaQueryListEventMap[Type] & { currentTarget: Element }) => any,
 		options?: AddEventListenerOptions | undefined
 	): () => void;
 	/**
@@ -2496,9 +3018,11 @@ declare module 'svelte/types/compiler/interfaces' {
 		/**
 		 * If `true`, tells the compiler to generate a custom element constructor instead of a regular Svelte component.
 		 *
+		 * You can also pass a function that receives `{ filename }` and returns a boolean.
+		 *
 		 * @default false
 		 */
-		customElement?: boolean;
+		customElement?: boolean | ((options: { filename: string }) => boolean);
 		/**
 		 * If `true`, getters and setters will be created for the component's props. If `false`, they will only be created for readonly exported values (i.e. those declared with `const`, `class` and `function`). If compiling with `customElement: true` this option defaults to `true`.
 		 *
@@ -2524,11 +3048,13 @@ declare module 'svelte/types/compiler/interfaces' {
 		 * - `'injected'`: styles will be included in the `head` when using `render(...)`, and injected into the document (if not already present) when the component mounts. For components compiled as custom elements, styles are injected to the shadow root.
 		 * - `'external'`: the CSS will only be returned in the `css` field of the compilation result. Most Svelte bundler plugins will set this to `'external'` and use the CSS that is statically generated for better performance, as it will result in smaller JavaScript bundles and the output can be served as cacheable `.css` files.
 		 * This is always `'injected'` when compiling with `customElement` mode.
+		 *
+		 * You can also pass a function that receives `{ filename }` and returns either `'injected'` or `'external'`.
 		 */
-		css?: 'injected' | 'external';
+		css?: 'injected' | 'external' | ((options: { filename: string }) => 'injected' | 'external');
 		/**
 		 * A function that takes a `{ hash, css, name, filename }` argument and returns the string that is used as a classname for scoped CSS.
-		 * It defaults to returning `svelte-${hash(css)}`.
+		 * It defaults to returning `svelte-${hash(filename ?? css)}`.
 		 *
 		 * @default undefined
 		 */
@@ -2545,6 +3071,16 @@ declare module 'svelte/types/compiler/interfaces' {
 		 * @default false
 		 */
 		preserveWhitespace?: boolean;
+		/**
+		 * Which strategy to use when cloning DOM fragments:
+		 *
+		 * - `html` populates a `<template>` with `innerHTML` and clones it. This is faster, but cannot be used if your app's [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) includes [`require-trusted-types-for 'script'`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/require-trusted-types-for)
+		 * - `tree` creates the fragment one element at a time and _then_ clones it. This is slower, but works everywhere
+		 *
+		 * @default 'html'
+		 * @since 5.33
+		 */
+		fragments?: 'html' | 'tree';
 		/**
 		 * Set to `true` to force the compiler into runes mode, even if there are no indications of runes usage.
 		 * Set to `false` to force the compiler into ignoring runes, even if there are indications of runes usage.
@@ -2555,7 +3091,7 @@ declare module 'svelte/types/compiler/interfaces' {
 		 * which is likely not what you want. If you're using Vite, consider using [dynamicCompileOptions](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#dynamiccompileoptions) instead.
 		 * @default undefined
 		 */
-		runes?: boolean | undefined;
+		runes?: boolean | undefined | ((options: { filename: string }) => boolean | undefined);
 		/**
 		 *  If `true`, exposes the Svelte major version in the browser by adding it to a `Set` stored in the global `window.__svelte.v`.
 		 *
@@ -2637,6 +3173,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>`
@@ -2674,7 +3221,7 @@ declare module 'svelte/types/compiler/interfaces' {
  * let count = $state(0);
  * ```
  *
- * https://svelte.dev/docs/svelte/$state
+ * @see {@link https://svelte.dev/docs/svelte/$state Documentation}
  *
  * @param initial The initial value
  */
@@ -2743,20 +3290,34 @@ declare namespace $state {
 			? NonReactive<T>
 			: T extends { toJSON(): infer R }
 				? R
-				: T extends Array<infer U>
-					? Array<Snapshot<U>>
-					: T extends object
-						? T extends { [key: string]: any }
-							? { [K in keyof T]: Snapshot<T[K]> }
-							: never
-						: never;
+				: T extends readonly unknown[]
+					? { [K in keyof T]: Snapshot<T[K]> }
+					: T extends Array<infer U>
+						? Array<Snapshot<U>>
+						: T extends object
+							? T extends { [key: string]: any }
+								? { [K in keyof T]: Snapshot<T[K]> }
+								: never
+							: never;
 
+	/**
+	 * Returns the latest `value`, even if the rest of the UI is suspending
+	 * while async work (such as data loading) completes.
+	 *
+	 * ```svelte
+	 * <nav>
+	 *   <a href="/" aria-current={$state.eager(pathname) === '/' ? 'page' : null}>home</a>
+	 *   <a href="/about" aria-current={$state.eager(pathname) === '/about' ? 'page' : null}>about</a>
+	 * </nav>
+	 * ```
+	 */
+	export function eager<T>(value: T): T;
 	/**
 	 * Declares state that is _not_ made deeply reactive — instead of mutating it,
 	 * you must reassign it.
 	 *
 	 * Example:
-	 * ```ts
+	 * ```svelte
 	 * <script>
 	 *   let items = $state.raw([0]);
 	 *
@@ -2765,12 +3326,12 @@ declare namespace $state {
 	 *   };
 	 * </script>
 	 *
-	 * <button on:click={addItem}>
+	 * <button onclick={addItem}>
 	 *   {items.join(', ')}
 	 * </button>
 	 * ```
 	 *
-	 * https://svelte.dev/docs/svelte/$state#$state.raw
+	 * @see {@link https://svelte.dev/docs/svelte/$state#$state.raw Documentation}
 	 *
 	 * @param initial The initial value
 	 */
@@ -2780,7 +3341,7 @@ declare namespace $state {
 	 * To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:
 	 *
 	 * Example:
-	 * ```ts
+	 * ```svelte
 	 * <script>
 	 *   let counter = $state({ count: 0 });
 	 *
@@ -2791,7 +3352,9 @@ declare namespace $state {
 	 * </script>
 	 * ```
 	 *
-	 * https://svelte.dev/docs/svelte/$state#$state.snapshot
+	 * If `state` has a `toJSON` method, the snapshot will clone the value returned from `toJSON` instead of the original object.
+	 *
+	 * @see {@link https://svelte.dev/docs/svelte/$state#$state.snapshot Documentation}
 	 *
 	 * @param state The value to snapshot
 	 */
@@ -2817,6 +3380,9 @@ declare namespace $state {
 	export const prototype: never;
 	/** @deprecated */
 	export const toString: never;
+
+	// needed to keep private stuff private
+	export {};
 }
 
 /**
@@ -2828,7 +3394,7 @@ declare namespace $state {
  * let double = $derived(count * 2);
  * ```
  *
- * https://svelte.dev/docs/svelte/$derived
+ * @see {@link https://svelte.dev/docs/svelte/$derived Documentation}
  *
  * @param expression The derived state expression
  */
@@ -2850,7 +3416,7 @@ declare namespace $derived {
 	 * });
 	 * ```
 	 *
-	 * https://svelte.dev/docs/svelte/$derived#$derived.by
+	 * @see {@link https://svelte.dev/docs/svelte/$derived#$derived.by Documentation}
 	 */
 	export function by<T>(fn: () => T): T;
 
@@ -2874,6 +3440,9 @@ declare namespace $derived {
 	export const prototype: never;
 	/** @deprecated */
 	export const toString: never;
+
+	// needed to keep private stuff private
+	export {};
 }
 
 /**
@@ -2887,9 +3456,9 @@ declare namespace $derived {
  *
  * If you return a function from the effect, it will be called right before the effect is run again, or when the component is unmounted.
  *
- * Does not run during server side rendering.
+ * Does not run during server-side rendering.
  *
- * https://svelte.dev/docs/svelte/$effect
+ * @see {@link https://svelte.dev/docs/svelte/$effect Documentation}
  * @param fn The function to execute
  */
 declare function $effect(fn: () => void | (() => void)): void;
@@ -2906,13 +3475,20 @@ declare namespace $effect {
 	 *
 	 * If you return a function from the effect, it will be called right before the effect is run again, or when the component is unmounted.
 	 *
-	 * Does not run during server side rendering.
+	 * Does not run during server-side rendering.
 	 *
-	 * https://svelte.dev/docs/svelte/$effect#$effect.pre
+	 * @see {@link https://svelte.dev/docs/svelte/$effect#$effect.pre Documentation}
 	 * @param fn The function to execute
 	 */
 	export function pre(fn: () => void | (() => void)): void;
 
+	/**
+	 * Returns the number of promises that are pending in the current boundary, not including child boundaries.
+	 *
+	 * @see {@link https://svelte.dev/docs/svelte/$effect#$effect.pending Documentation}
+	 */
+	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.
 	 *
@@ -2931,7 +3507,7 @@ declare namespace $effect {
 	 *
 	 * This allows you to (for example) add things like subscriptions without causing memory leaks, by putting them in child effects.
 	 *
-	 * https://svelte.dev/docs/svelte/$effect#$effect.tracking
+	 * @see {@link https://svelte.dev/docs/svelte/$effect#$effect.tracking Documentation}
 	 */
 	export function tracking(): boolean;
 
@@ -2946,20 +3522,20 @@ 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>
 	 *
 	 * <button onclick={() => cleanup()}>cleanup</button>
 	 * ```
 	 *
-	 * https://svelte.dev/docs/svelte/$effect#$effect.root
+	 * @see {@link https://svelte.dev/docs/svelte/$effect#$effect.root Documentation}
 	 */
 	export function root(fn: () => void | (() => void)): () => void;
 
@@ -2983,6 +3559,9 @@ declare namespace $effect {
 	export const prototype: never;
 	/** @deprecated */
 	export const toString: never;
+
+	// needed to keep private stuff private
+	export {};
 }
 
 /**
@@ -2992,10 +3571,45 @@ declare namespace $effect {
  * let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();
  * ```
  *
- * https://svelte.dev/docs/svelte/$props
+ * @see {@link https://svelte.dev/docs/svelte/$props Documentation}
  */
 declare function $props(): any;
 
+declare namespace $props {
+	/**
+	 * Generates an ID that is unique to the current component instance. When hydrating a server-rendered component,
+	 * the value will be consistent between server and client.
+	 *
+	 * This is useful for linking elements via attributes like `for` and `aria-labelledby`.
+	 * @since 5.20.0
+	 */
+	export function id(): string;
+
+	// prevent intellisense from being unhelpful
+	/** @deprecated */
+	export const apply: never;
+	/** @deprecated */
+	// @ts-ignore
+	export const arguments: never;
+	/** @deprecated */
+	export const bind: never;
+	/** @deprecated */
+	export const call: never;
+	/** @deprecated */
+	export const caller: never;
+	/** @deprecated */
+	export const length: never;
+	/** @deprecated */
+	export const name: never;
+	/** @deprecated */
+	export const prototype: never;
+	/** @deprecated */
+	export const toString: never;
+
+	// needed to keep private stuff private
+	export {};
+}
+
 /**
  * Declares a prop as bindable, meaning the parent component can use `bind:propName={value}` to bind to it.
  *
@@ -3003,10 +3617,36 @@ declare function $props(): any;
  * let { propName = $bindable() }: { propName: boolean } = $props();
  * ```
  *
- * https://svelte.dev/docs/svelte/$bindable
+ * @see {@link https://svelte.dev/docs/svelte/$bindable Documentation}
  */
 declare function $bindable<T>(fallback?: T): T;
 
+declare namespace $bindable {
+	// prevent intellisense from being unhelpful
+	/** @deprecated */
+	export const apply: never;
+	/** @deprecated */
+	// @ts-ignore
+	export const arguments: never;
+	/** @deprecated */
+	export const bind: never;
+	/** @deprecated */
+	export const call: never;
+	/** @deprecated */
+	export const caller: never;
+	/** @deprecated */
+	export const length: never;
+	/** @deprecated */
+	export const name: never;
+	/** @deprecated */
+	export const prototype: never;
+	/** @deprecated */
+	export const toString: never;
+
+	// needed to keep private stuff private
+	export {};
+}
+
 /**
  * Inspects one or more values whenever they, or the properties they contain, change. Example:
  *
@@ -3023,7 +3663,7 @@ declare function $bindable<T>(fallback?: T): T;
  * $inspect(x, y).with(() => { debugger; });
  * ```
  *
- * https://svelte.dev/docs/svelte/$inspect
+ * @see {@link https://svelte.dev/docs/svelte/$inspect Documentation}
  */
 declare function $inspect<T extends any[]>(
 	...values: T
@@ -3045,7 +3685,31 @@ declare namespace $inspect {
 	 *   });
 	 * </script>
 	 */
-	export function trace(name: string): void;
+	export function trace(name?: string): void;
+
+	// prevent intellisense from being unhelpful
+	/** @deprecated */
+	export const apply: never;
+	/** @deprecated */
+	// @ts-ignore
+	export const arguments: never;
+	/** @deprecated */
+	export const bind: never;
+	/** @deprecated */
+	export const call: never;
+	/** @deprecated */
+	export const caller: never;
+	/** @deprecated */
+	export const length: never;
+	/** @deprecated */
+	export const name: never;
+	/** @deprecated */
+	export const prototype: never;
+	/** @deprecated */
+	export const toString: never;
+
+	// needed to keep private stuff private
+	export {};
 }
 
 /**
@@ -3065,8 +3729,34 @@ declare namespace $inspect {
  *
  * Only available inside custom element components, and only on the client-side.
  *
- * https://svelte.dev/docs/svelte/$host
+ * @see {@link https://svelte.dev/docs/svelte/$host Documentation}
  */
 declare function $host<El extends HTMLElement = HTMLElement>(): El;
 
-//# sourceMappingURL=index.d.ts.map
\ No newline at end of file
+declare namespace $host {
+	// prevent intellisense from being unhelpful
+	/** @deprecated */
+	export const apply: never;
+	/** @deprecated */
+	// @ts-ignore
+	export const arguments: never;
+	/** @deprecated */
+	export const bind: never;
+	/** @deprecated */
+	export const call: never;
+	/** @deprecated */
+	export const caller: never;
+	/** @deprecated */
+	export const length: never;
+	/** @deprecated */
+	export const name: never;
+	/** @deprecated */
+	export const prototype: never;
+	/** @deprecated */
+	export const toString: never;
+
+	// needed to keep private stuff private
+	export {};
+}
+
+//# sourceMappingURL=index.d.ts.map
diff --git a/playgrounds/sandbox/index.html b/playgrounds/sandbox/index.html
index 512b5426a9..d70409ffb6 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/main.svelte';
+			import App from '/src/App.svelte';
+
+			globalThis.delayed = (v, ms = 1000) => {
+				return new Promise((f) => {
+					setTimeout(() => f(v), ms);
+				});
+			};
 
 			const root = document.getElementById('root');
 			const render = root.firstChild?.nextSibling ? hydrate : mount;
diff --git a/playgrounds/sandbox/package.json b/playgrounds/sandbox/package.json
index 654a517c9f..12676777cb 100644
--- a/playgrounds/sandbox/package.json
+++ b/playgrounds/sandbox/package.json
@@ -5,18 +5,24 @@
   "type": "module",
   "scripts": {
     "prepare": "node scripts/create-app-svelte.js",
-    "dev": "vite --host",
-    "ssr": "node --conditions=development ./ssr-dev.js",
+    "dev": "SVELTE_INSPECTOR_OPTIONS=false vite --host",
+    "ssr": "SVELTE_INSPECTOR_OPTIONS=false node --conditions=development ./ssr-dev.js",
     "build": "vite build --outDir dist/client && vite build --outDir dist/server --ssr ssr-prod.js",
     "prod": "npm run build && node dist/server/ssr-prod",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "download": "node scripts/download.js",
+    "hash": "node scripts/hash.js",
+    "create-test": "node scripts/create-test.js",
+    "start": "node run.js"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
+    "@sveltejs/vite-plugin-svelte": "^6.2.0",
+    "@types/node": "^24.5.2",
     "polka": "^1.0.0-next.25",
     "svelte": "workspace:*",
-    "tiny-glob": "^0.2.9",
-    "vite": "^5.4.6",
-    "vite-plugin-inspect": "^0.8.4"
+    "tinyglobby": "^0.2.12",
+    "vite": "^7.3.2",
+    "vite-plugin-devtools-json": "^1.0.0",
+    "vite-plugin-inspect": "^11.3.3"
   }
 }
diff --git a/playgrounds/sandbox/run.js b/playgrounds/sandbox/run.js
index 771dcc668e..3b0602f716 100644
--- a/playgrounds/sandbox/run.js
+++ b/playgrounds/sandbox/run.js
@@ -2,8 +2,16 @@ import * as fs from 'node:fs';
 import * as path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { parseArgs } from 'node:util';
-import glob from 'tiny-glob/sync.js';
-import { compile, compileModule, parse, migrate } from 'svelte/compiler';
+import { globSync } from 'tinyglobby';
+import { compile, compileModule, parse, print, migrate } from 'svelte/compiler';
+
+// toggle these to change what gets written to sandbox/output
+const AST = false;
+const MIGRATE = false;
+const FROM_HTML = true;
+const FROM_TREE = false;
+const DEV = false;
+const PRINT = false;
 
 const argv = parseArgs({ options: { runes: { type: 'boolean' } }, args: process.argv.slice(2) });
 
@@ -26,8 +34,17 @@ function mkdirp(dir) {
 	} catch {}
 }
 
-const svelte_modules = glob('**/*.svelte', { cwd: `${cwd}/src` });
-const js_modules = glob('**/*.js', { cwd: `${cwd}/src` });
+/**
+ * @param {string} file
+ * @param {string} contents
+ */
+function write(file, contents) {
+	mkdirp(path.dirname(file));
+	fs.writeFileSync(file, contents);
+}
+
+const svelte_modules = globSync('**/*.svelte', { cwd: `${cwd}/src` });
+const js_modules = globSync('**/*.js', { cwd: `${cwd}/src` });
 
 for (const generate of /** @type {const} */ (['client', 'server'])) {
 	console.error(`\n--- generating ${generate} ---\n`);
@@ -42,48 +59,88 @@ for (const generate of /** @type {const} */ (['client', 'server'])) {
 		mkdirp(path.dirname(output_js));
 
 		if (generate === 'client') {
-			const ast = parse(source, {
-				modern: true
-			});
+			if (AST || PRINT) {
+				const ast = parse(source, {
+					modern: true
+				});
+
+				if (AST) {
+					write(
+						`${cwd}/output/ast/${file}.json`,
+						JSON.stringify(
+							ast,
+							(key, value) => (typeof value === 'bigint' ? ['BigInt', value.toString()] : value),
+							'\t'
+						)
+					);
+				}
+
+				if (PRINT) {
+					const printed = print(ast);
+					write(`${cwd}/output/printed/${file}`, printed.code);
+				}
+			}
 
-			fs.writeFileSync(
-				`${cwd}/output/${file}.json`,
-				JSON.stringify(
-					ast,
-					(key, value) => (typeof value === 'bigint' ? ['BigInt', value.toString()] : value),
-					'\t'
-				)
-			);
-
-			try {
-				const migrated = migrate(source);
-				fs.writeFileSync(`${cwd}/output/${file}.migrated.svelte`, migrated.code);
-			} catch (e) {
-				console.warn(`Error migrating ${file}`, e);
+			if (MIGRATE) {
+				try {
+					const migrated = migrate(source);
+					write(`${cwd}/output/migrated/${file}`, migrated.code);
+				} catch (e) {
+					console.warn(`Error migrating ${file}`, e);
+				}
 			}
 		}
 
-		const compiled = compile(source, {
-			dev: true,
-			filename: input,
-			generate,
-			runes: argv.values.runes
-		});
+		let from_html;
+		let from_tree;
+
+		if (generate === 'server' || FROM_HTML) {
+			from_html = compile(source, {
+				dev: DEV,
+				hmr: DEV,
+				filename: input,
+				generate,
+				runes: argv.values.runes,
+				experimental: {
+					async: true
+				}
+			});
 
-		for (const warning of compiled.warnings) {
-			console.warn(warning.code);
-			console.warn(warning.frame);
+			write(output_js, from_html.js.code + '\n//# sourceMappingURL=' + path.basename(output_map));
+			write(output_map, from_html.js.map.toString());
 		}
 
-		fs.writeFileSync(
-			output_js,
-			compiled.js.code + '\n//# sourceMappingURL=' + path.basename(output_map)
-		);
+		// generate with fragments: 'tree'
+		if (generate === 'client' && FROM_TREE) {
+			from_tree = compile(source, {
+				dev: false,
+				filename: input,
+				generate,
+				runes: argv.values.runes,
+				fragments: 'tree',
+				experimental: {
+					async: true
+				}
+			});
 
-		fs.writeFileSync(output_map, compiled.js.map.toString());
+			const output_js = `${cwd}/output/${generate}/${file}.tree.js`;
+			const output_map = `${cwd}/output/${generate}/${file}.tree.js.map`;
 
-		if (compiled.css) {
-			fs.writeFileSync(output_css, compiled.css.code);
+			write(output_js, from_tree.js.code + '\n//# sourceMappingURL=' + path.basename(output_map));
+			write(output_map, from_tree.js.map.toString());
+		}
+
+		const compiled = from_html ?? from_tree;
+
+		if (compiled) {
+			for (const warning of compiled.warnings) {
+				console.warn(warning.code);
+				console.warn(warning.frame);
+			}
+
+			if (compiled.css) {
+				write(output_css, compiled.css.code);
+			}
 		}
 	}
 
@@ -92,14 +149,17 @@ for (const generate of /** @type {const} */ (['client', 'server'])) {
 		const source = fs.readFileSync(input, 'utf-8');
 
 		const compiled = compileModule(source, {
-			dev: true,
+			dev: false,
 			filename: input,
-			generate
+			generate,
+			experimental: {
+				async: true
+			}
 		});
 
 		const output_js = `${cwd}/output/${generate}/${file}`;
 
 		mkdirp(path.dirname(output_js));
-		fs.writeFileSync(output_js, compiled.js.code);
+		write(output_js, compiled.js.code);
 	}
 }
diff --git a/playgrounds/sandbox/scripts/create-test.js b/playgrounds/sandbox/scripts/create-test.js
new file mode 100644
index 0000000000..d183098b22
--- /dev/null
+++ b/playgrounds/sandbox/scripts/create-test.js
@@ -0,0 +1,165 @@
+// Creates a test from the existing playground. Can be called from anywhere.
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+// Get the directory where this script is located
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Base paths relative to this script's location
+const sandbox_dir = path.resolve(__dirname, '..');
+const src_dir = path.join(sandbox_dir, 'src');
+const tests_dir = path.resolve(__dirname, '../../../packages/svelte/tests');
+
+// Get target folder from command line arguments
+let target_folder = process.argv[2];
+if (!target_folder) {
+	console.error(
+		'Please provide a target folder as an argument. Example: node create-test.js runtime-runes/my-test'
+	);
+	process.exit(1);
+}
+if (!target_folder.includes('/')) {
+	target_folder = 'runtime-runes/' + target_folder;
+}
+if (!target_folder.startsWith('runtime-')) {
+	console.error(
+		'Target folder must start with "runtime-" (can only convert to these kinds of tests)'
+	);
+	process.exit(1);
+}
+target_folder = path.join(
+	path.resolve(tests_dir, target_folder.split('/')[0]),
+	'samples',
+	target_folder.split('/')[1]
+);
+
+const exists = fs.existsSync(target_folder);
+
+// Check if target folder already exists and ask for confirmation
+if (exists) {
+	console.log(`Target folder "${target_folder}" already exists.`);
+	process.stdout.write('Do you want to override the existing test? (Y/n): ');
+
+	// Read user input synchronously
+	const stdin = process.stdin;
+	stdin.setRawMode(true);
+	stdin.resume();
+	stdin.setEncoding('utf8');
+
+	const response = await new Promise((resolve) => {
+		stdin.on('data', (key) => {
+			stdin.setRawMode(false);
+			stdin.pause();
+			process.stdout.write('\n');
+			resolve(key);
+		});
+	});
+
+	if (response.toLowerCase() === 'n') {
+		console.log('Operation cancelled.');
+		process.exit(0);
+	}
+
+	// Clear the existing target folder except for _config.js
+	const files = fs.readdirSync(target_folder);
+	for (const file of files) {
+		if (file !== '_config.js') {
+			const file_path = path.join(target_folder, file);
+			fs.rmSync(file_path, { recursive: true, force: true });
+		}
+	}
+} else {
+	fs.mkdirSync(target_folder, { recursive: true });
+}
+
+// Starting file
+const app_svelte_path = path.join(src_dir, 'App.svelte');
+const collected_files = new Set();
+const processed_files = new Set();
+
+function collect_imports(file_path) {
+	if (processed_files.has(file_path) || !fs.existsSync(file_path)) {
+		return;
+	}
+
+	processed_files.add(file_path);
+	collected_files.add(file_path);
+
+	const content = fs.readFileSync(file_path, 'utf8');
+
+	// Regex to match import statements
+	const import_regex = /import\s+(?:[^'"]*\s+from\s+)?['"]([^'"]+)['"]/g;
+	let match;
+
+	while ((match = import_regex.exec(content)) !== null) {
+		const import_path = match[1];
+
+		// Skip node_modules imports
+		if (!import_path.startsWith('.')) {
+			continue;
+		}
+
+		// Resolve relative import path
+		const resolved_path = path.resolve(path.dirname(file_path), import_path);
+
+		// Try different extensions if file doesn't exist
+		const extensions = ['', '.svelte', '.js', '.ts'];
+		let actual_path = null;
+
+		for (const ext of extensions) {
+			const test_path = resolved_path + ext;
+			if (fs.existsSync(test_path)) {
+				actual_path = test_path;
+				break;
+			}
+		}
+
+		if (actual_path) {
+			collect_imports(actual_path);
+		}
+	}
+}
+
+// Start collecting from App.svelte
+collect_imports(app_svelte_path);
+
+// Copy collected files to target folder
+for (const file_path of collected_files) {
+	const relative_path = path.relative(src_dir, file_path);
+	let target_path = path.join(target_folder, relative_path);
+
+	// Rename App.svelte to main.svelte
+	if (path.basename(file_path) === 'App.svelte') {
+		target_path = path.join(target_folder, path.dirname(relative_path), 'main.svelte');
+	}
+
+	// Ensure target directory exists
+	const target_dir = path.dirname(target_path);
+	if (!fs.existsSync(target_dir)) {
+		fs.mkdirSync(target_dir, { recursive: true });
+	}
+
+	// Copy file
+	fs.copyFileSync(file_path, target_path);
+	console.log(`Copied: ${file_path} -> ${target_path}`);
+}
+
+// Create empty _config.js
+if (!exists) {
+	const config_path = path.join(target_folder, '_config.js');
+	fs.writeFileSync(
+		config_path,
+		`import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+	}
+});
+`
+	);
+	console.log(`Created: ${config_path}`);
+}
+
+console.log(`\nTest files created in: ${target_folder}`);
diff --git a/playgrounds/sandbox/scripts/download.js b/playgrounds/sandbox/scripts/download.js
new file mode 100644
index 0000000000..5b915c8abd
--- /dev/null
+++ b/playgrounds/sandbox/scripts/download.js
@@ -0,0 +1,815 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { parseArgs } from 'node:util';
+import { execSync } from 'node:child_process';
+import readline from 'node:readline/promises';
+import { chromium } from 'playwright';
+
+const { values, positionals } = parseArgs({
+	options: {
+		'create-test': {
+			type: 'string'
+		}
+	},
+	allowPositionals: true
+});
+
+const create_test_name = values['create-test'] ?? null;
+const url_arg = positionals[0];
+
+if (!url_arg) {
+	console.error(`Missing URL argument`);
+	process.exit(1);
+}
+
+const base_dir = import.meta.dirname;
+
+/**
+ * Check if the argument is a local directory path
+ * @param {string} arg
+ * @returns {boolean}
+ */
+function is_local_directory(arg) {
+	try {
+		return fs.existsSync(arg) && fs.statSync(arg).isDirectory();
+	} catch {
+		return false;
+	}
+}
+
+// Check if it's a local directory first (before URL parsing)
+const is_local = is_local_directory(url_arg);
+
+const resolved_test_path = ['runtime-runes', 'runtime-legacy']
+	.map((d) => path.resolve(`${base_dir}/../../../packages/svelte/tests/${d}/samples/${url_arg}`))
+	.find(fs.existsSync);
+
+/** @type {URL | null} */
+let url = null;
+
+if (!is_local && !resolved_test_path) {
+	try {
+		url = new URL(url_arg);
+	} catch (e) {
+		console.error(`${url_arg} is not a valid URL or local directory`);
+		process.exit(1);
+	}
+}
+
+/**
+ * Check if URL is a GitHub repository URL
+ * @param {URL} url
+ * @returns {boolean}
+ */
+function is_github_url(url) {
+	return url.hostname === 'github.com' && url.pathname.split('/').filter(Boolean).length >= 2;
+}
+
+/**
+ * Check if URL is a StackBlitz GitHub project URL
+ * @param {URL} url
+ * @returns {boolean}
+ */
+function is_stackblitz_github_url(url) {
+	return url.hostname === 'stackblitz.com' && url.pathname.startsWith('/github/');
+}
+
+/**
+ * Check if URL is a StackBlitz edit project URL (non-GitHub)
+ * @param {URL} url
+ * @returns {boolean}
+ */
+function is_stackblitz_edit_url(url) {
+	return url.hostname === 'stackblitz.com' && url.pathname.startsWith('/edit/');
+}
+
+/**
+ * Extract GitHub repo info from a StackBlitz GitHub URL
+ * @param {URL} url
+ * @returns {{ owner: string, repo: string, path?: string }}
+ */
+function extract_stackblitz_github_info(url) {
+	// URL format: /github/owner/repo or /github/owner/repo/tree/branch/path
+	const parts = url.pathname.split('/').filter(Boolean);
+	// parts[0] = 'github', parts[1] = owner, parts[2] = repo
+	return {
+		owner: parts[1],
+		repo: parts[2],
+		path: parts.length > 3 ? parts.slice(3).join('/') : undefined
+	};
+}
+
+/**
+ * Clone a GitHub repository to a temporary directory
+ * @param {URL} url
+ * @param {string} target_dir
+ */
+function clone_github_repo(url, target_dir) {
+	// Extract repo URL (handle both https://github.com/owner/repo and https://github.com/owner/repo/tree/branch/path)
+	const parts = url.pathname.split('/').filter(Boolean);
+	const owner = parts[0];
+	const repo = parts[1];
+	const repo_url = `https://github.com/${owner}/${repo}.git`;
+
+	console.log(`Cloning ${repo_url}...`);
+	execSync(`git clone --depth 1 ${repo_url} "${target_dir}"`, { stdio: 'inherit' });
+}
+
+/**
+ * Clone a StackBlitz GitHub project to a temporary directory
+ * (Converts to regular GitHub clone)
+ * @param {URL} url
+ * @param {string} target_dir
+ */
+function clone_stackblitz_github_project(url, target_dir) {
+	const info = extract_stackblitz_github_info(url);
+	const repo_url = `https://github.com/${info.owner}/${info.repo}.git`;
+
+	console.log(`StackBlitz GitHub project detected, cloning from ${repo_url}...`);
+
+	execSync(`git clone --depth 1 ${repo_url} "${target_dir}"`, { stdio: 'inherit' });
+}
+
+/**
+ * Download a StackBlitz project using browser automation
+ * @param {URL} url
+ * @param {string} target_dir
+ */
+async function download_stackblitz_project(url, target_dir) {
+	console.log(`Downloading StackBlitz project via browser automation...`);
+	console.log(`URL: ${url.href}`);
+
+	const browser = await chromium.launch({ headless: true });
+	const context = await browser.newContext({ acceptDownloads: true });
+	const page = await context.newPage();
+
+	try {
+		// Navigate to the StackBlitz project
+		console.log('Loading StackBlitz project (this may take a moment)...');
+		await page.goto(url.href, { waitUntil: 'domcontentloaded', timeout: 20000 });
+
+		// Set up download handler
+		const downloadPromise = page.waitForEvent('download', { timeout: 30000 });
+		await page.locator('button[aria-label*="Download Project" i]', { timeout: 30000 }).click();
+		console.log('Triggering download...');
+
+		// Wait for the download to start
+		const download = await downloadPromise;
+
+		// Save the downloaded file
+		const zip_path = path.join(target_dir, 'project.zip');
+		await download.saveAs(zip_path);
+
+		console.log('Download complete, extracting...');
+
+		// Extract the zip file
+		if (process.platform === 'win32') {
+			execSync(
+				`powershell -Command "Expand-Archive -Path '${zip_path}' -DestinationPath '${target_dir}' -Force"`,
+				{ stdio: 'inherit' }
+			);
+		} else {
+			execSync(`unzip -o "${zip_path}" -d "${target_dir}"`, { stdio: 'inherit' });
+		}
+
+		// Remove the zip file
+		fs.unlinkSync(zip_path);
+
+		// Check if files were extracted into a subdirectory
+		const entries = fs.readdirSync(target_dir);
+		if (entries.length === 1) {
+			const subdir = path.join(target_dir, entries[0]);
+			if (fs.statSync(subdir).isDirectory()) {
+				// Move files from subdirectory to target_dir
+				const subentries = fs.readdirSync(subdir);
+				for (const entry of subentries) {
+					fs.renameSync(path.join(subdir, entry), path.join(target_dir, entry));
+				}
+				fs.rmdirSync(subdir);
+			}
+		}
+
+		console.log('StackBlitz project downloaded successfully');
+	} finally {
+		await browser.close();
+	}
+}
+
+/**
+ * Recursively get all files in a directory
+ * @param {string} dir
+ * @param {string} base
+ * @returns {Array<{path: string, name: string, contents: string}>}
+ */
+function get_all_files(dir, base = '') {
+	/** @type {Array<{path: string, name: string, contents: string}>} */
+	const results = [];
+
+	if (!fs.existsSync(dir)) return results;
+
+	const entries = fs.readdirSync(dir, { withFileTypes: true });
+
+	for (const entry of entries) {
+		const full_path = path.join(dir, entry.name);
+		const relative_path = base ? `${base}/${entry.name}` : entry.name;
+
+		if (entry.isDirectory()) {
+			// Skip node_modules, .git, etc.
+			if (['node_modules', '.git', '.svelte-kit', 'build', 'dist'].includes(entry.name)) {
+				continue;
+			}
+			results.push(...get_all_files(full_path, relative_path));
+		} else if (
+			entry.name.endsWith('.svelte') ||
+			entry.name.endsWith('.js') ||
+			entry.name.endsWith('.ts')
+		) {
+			results.push({
+				path: relative_path,
+				name: entry.name,
+				contents: fs.readFileSync(full_path, 'utf-8')
+			});
+		}
+	}
+
+	return results;
+}
+
+/**
+ * Detect project type from files
+ * @param {Array<{path: string, name: string, contents: string}>} files
+ * @returns {{ type: 'sveltekit' | 'vite', has_app_imports: boolean, has_page_svelte: boolean }}
+ */
+function detect_project_type(files) {
+	let has_app_imports = false;
+	let has_page_svelte = false;
+
+	for (const file of files) {
+		// Check for $app/* imports
+		if (/from\s+['"](\$app\/[^'"]+)['"]/.test(file.contents)) {
+			has_app_imports = true;
+		}
+		// Check for +page.svelte or +layout.svelte
+		if (file.name === '+page.svelte' || file.name === '+layout.svelte') {
+			has_page_svelte = true;
+		}
+	}
+
+	return {
+		type: has_page_svelte ? 'sveltekit' : 'vite',
+		has_app_imports,
+		has_page_svelte
+	};
+}
+
+/**
+ * Convert a route path to a PascalCase component name
+ * @param {string} route_path - e.g., "about", "blog/post"
+ * @returns {string} - e.g., "About", "BlogPost"
+ */
+function route_to_component_name(route_path) {
+	if (!route_path || route_path === '') return 'Page';
+
+	return route_path
+		.split('/')
+		.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+		.join('');
+}
+
+/**
+ * Transform $lib/* imports to relative imports (flattened)
+ * @param {string} content
+ * @returns {string}
+ */
+function transform_lib_imports(content) {
+	// Replace $lib/ imports with relative paths to flattened files
+	return content.replace(/from\s+['"](\$lib\/[^'"]+)['"]/g, (match, import_path) => {
+		// Get just the filename from the lib path
+		const lib_path = import_path.replace('$lib/', '');
+		const filename = path.basename(lib_path);
+		return `from './${filename}'`;
+	});
+}
+
+/**
+ * Build the route tree from SvelteKit files
+ * @param {Array<{path: string, name: string, contents: string}>} files
+ * @param {string} routes_prefix - e.g., "src/routes"
+ * @returns {Map<string, {layout?: {path: string, contents: string}, page?: {path: string, contents: string}}>}
+ */
+function build_route_tree(files, routes_prefix) {
+	/** @type {Map<string, {layout?: {path: string, contents: string}, page?: {path: string, contents: string}}>} */
+	const routes = new Map();
+
+	for (const file of files) {
+		if (!file.path.startsWith(routes_prefix)) continue;
+
+		const relative_to_routes = file.path.slice(routes_prefix.length + 1); // +1 for the slash
+		const dir = path.dirname(relative_to_routes);
+		const route_key = dir === '.' ? '' : dir;
+
+		if (!routes.has(route_key)) {
+			routes.set(route_key, {});
+		}
+
+		const route = routes.get(route_key);
+		if (file.name === '+layout.svelte') {
+			route.layout = { path: file.path, contents: file.contents };
+		} else if (file.name === '+page.svelte') {
+			route.page = { path: file.path, contents: file.contents };
+		}
+	}
+
+	return routes;
+}
+
+/**
+ * Get child routes of a given route
+ * @param {Map<string, any>} routes
+ * @param {string} parent_route
+ * @returns {string[]}
+ */
+function get_child_routes(routes, parent_route) {
+	const children = [];
+	for (const route of routes.keys()) {
+		if (route === parent_route) continue;
+
+		const parent_prefix = parent_route === '' ? '' : parent_route + '/';
+		if (
+			parent_route === ''
+				? !route.includes('/')
+				: route.startsWith(parent_prefix) && !route.slice(parent_prefix.length).includes('/')
+		) {
+			children.push(route);
+		}
+	}
+	return children;
+}
+
+/**
+ * Transform a layout file's content to replace {@render children()} with a component
+ * @param {string} content
+ * @param {string} child_component_name
+ * @returns {string}
+ */
+function transform_layout_content(content, child_component_name) {
+	// Add import for the child component at the top of the script
+	const import_statement = `import ${child_component_name} from './${child_component_name}.svelte';`;
+
+	// Check if there's already a script tag
+	if (/<script[^>]*>/.test(content)) {
+		// Add import after the opening script tag
+		content = content.replace(/(<script[^>]*>)/, `$1\n\t${import_statement}`);
+	} else {
+		// Add a new script block at the beginning
+		content = `<script>\n\t${import_statement}\n</script>\n\n${content}`;
+	}
+
+	// Replace {@render children()} or {@render children?.()} with the component
+	content = content.replace(/\{@render\s+children\?\.\(\)\}/g, `<${child_component_name} />`);
+	content = content.replace(/\{@render\s+children\(\)\}/g, `<${child_component_name} />`);
+
+	return content;
+}
+
+/**
+ * Convert a SvelteKit project to plain Svelte components
+ * @param {string} repo_dir
+ * @returns {Array<{name: string, contents: string}>}
+ */
+function convert_sveltekit_project(repo_dir) {
+	const all_files = get_all_files(repo_dir);
+	/** @type {Array<{name: string, contents: string}>} */
+	const output_files = [];
+
+	// Find the routes directory
+	let routes_prefix = '';
+	for (const file of all_files) {
+		if (file.path.includes('src/routes/')) {
+			routes_prefix = 'src/routes';
+			break;
+		}
+	}
+
+	if (!routes_prefix) {
+		console.error('Could not find src/routes directory');
+		process.exit(1);
+	}
+
+	// Build route tree
+	const routes = build_route_tree(all_files, routes_prefix);
+
+	// Process lib files - flatten them to root level
+	const lib_files = all_files.filter((f) => f.path.startsWith('src/lib/'));
+	for (const file of lib_files) {
+		// Flatten to just the filename
+		const new_path = path.basename(file.path);
+		let contents = file.contents;
+		contents = transform_lib_imports(contents);
+		output_files.push({
+			name: new_path,
+			contents
+		});
+	}
+
+	// Sort routes by depth (deepest first) so we can process children before parents
+	const sorted_routes = [...routes.keys()].sort((a, b) => {
+		const depth_a = a === '' ? 0 : a.split('/').length;
+		const depth_b = b === '' ? 0 : b.split('/').length;
+		return depth_b - depth_a;
+	});
+
+	// Map to store what component each route renders
+	/** @type {Map<string, string>} */
+	const route_component_map = new Map();
+
+	// First pass: convert all pages
+	for (const route_key of sorted_routes) {
+		const route = routes.get(route_key);
+		if (route?.page) {
+			const component_name = route_to_component_name(route_key);
+			let contents = route.page.contents;
+			contents = transform_lib_imports(contents);
+			output_files.push({
+				name: `${component_name}.svelte`,
+				contents
+			});
+			// If no layout, this is what the route renders
+			if (!route.layout) {
+				route_component_map.set(route_key, component_name);
+			}
+		}
+	}
+
+	// Second pass: convert layouts (from deepest to root)
+	for (const route_key of sorted_routes) {
+		const route = routes.get(route_key);
+		if (route?.layout) {
+			const is_root = route_key === '';
+			const component_name = is_root ? 'App' : route_to_component_name(route_key) + 'Layout';
+
+			// Determine what child component this layout should render
+			let child_component = '';
+
+			// Check if there's a page at this route level
+			if (route.page) {
+				child_component = route_to_component_name(route_key);
+			} else {
+				// Find child routes that have content
+				const children = get_child_routes(routes, route_key);
+				if (children.length > 0) {
+					// Use the first child's component (or its layout if it has one)
+					const first_child = children[0];
+					child_component =
+						route_component_map.get(first_child) || route_to_component_name(first_child);
+				}
+			}
+
+			let contents = route.layout.contents;
+			contents = transform_lib_imports(contents);
+
+			if (child_component) {
+				contents = transform_layout_content(contents, child_component);
+			} else {
+				// No child, just remove {@render children()} or {@render children?.()}
+				contents = contents.replace(/\{@render\s+children\?\.\(\)\}/g, '<!-- no child content -->');
+				contents = contents.replace(/\{@render\s+children\(\)\}/g, '<!-- no child content -->');
+			}
+
+			output_files.push({
+				name: `${component_name}.svelte`,
+				contents
+			});
+
+			// This route now renders the layout
+			route_component_map.set(route_key, component_name);
+		}
+	}
+
+	// If there's no root layout but there's a root page, rename it to App.svelte
+	if (!routes.get('')?.layout && routes.get('')?.page) {
+		const page_index = output_files.findIndex((f) => f.name === 'Page.svelte');
+		if (page_index !== -1) {
+			output_files[page_index].name = 'App.svelte';
+		}
+	}
+
+	// If there's no App.svelte yet, create one that imports the first available component
+	if (!output_files.some((f) => f.name === 'App.svelte')) {
+		const first_component = output_files.find(
+			(f) => f.name.endsWith('.svelte') && !f.name.includes('/')
+		);
+		if (first_component) {
+			const comp_name = first_component.name.replace('.svelte', '');
+			output_files.push({
+				name: 'App.svelte',
+				contents: `<script>\n\timport ${comp_name} from './${first_component.name}';\n</script>\n\n<${comp_name} />\n`
+			});
+		}
+	}
+
+	return output_files;
+}
+
+/**
+ * Convert a regular Vite+Svelte project
+ * @param {string} repo_dir
+ * @returns {Array<{name: string, contents: string}>}
+ */
+function convert_vite_project(repo_dir) {
+	const all_files = get_all_files(repo_dir);
+	/** @type {Array<{name: string, contents: string}>} */
+	const output_files = [];
+
+	// Find src directory
+	const src_files = all_files.filter(
+		(f) =>
+			f.path.startsWith('src/') &&
+			(f.name.endsWith('.svelte') || f.name.endsWith('.js') || f.name.endsWith('.ts'))
+	);
+
+	for (const file of src_files) {
+		// Flatten all files to root level (just the filename)
+		const new_path = path.basename(file.path);
+
+		let contents = file.contents;
+		contents = transform_lib_imports(contents);
+
+		output_files.push({
+			name: new_path,
+			contents
+		});
+	}
+
+	return output_files;
+}
+
+/**
+ * Process a local or cloned directory
+ * @param {string} dir_path
+ * @returns {Promise<Array<{name: string, contents: string}> | null>}
+ */
+async function process_directory(dir_path) {
+	const all_files = get_all_files(dir_path);
+	const project_info = detect_project_type(all_files);
+
+	console.log(`Detected project type: ${project_info.type}`);
+
+	// Check for $app/* imports
+	if (project_info.has_app_imports) {
+		console.error('Error: This SvelteKit project uses $app/* imports which cannot be converted.');
+		console.error('The playground does not support SvelteKit runtime features.');
+
+		const fallback_dir = path.resolve(base_dir, '..', '..', 'kit-sandbox-tmp');
+		const should_copy = await prompt_download_to_kit_sandbox_tmp(fallback_dir);
+
+		if (!should_copy) {
+			process.exit(1);
+		}
+
+		copy_project_to_directory(dir_path, fallback_dir);
+		console.log(`Project copied to ${fallback_dir}`);
+
+		return null;
+	}
+
+	// Convert based on project type
+	if (project_info.type === 'sveltekit') {
+		console.log('Converting SvelteKit project to plain Svelte...');
+		return convert_sveltekit_project(dir_path);
+	} else {
+		console.log('Processing Vite+Svelte project...');
+		return convert_vite_project(dir_path);
+	}
+}
+
+/**
+ * Ask whether to copy the project to playgrounds/kit-sandbox-tmp
+ * @param {string} fallback_dir
+ * @returns {Promise<boolean>}
+ */
+async function prompt_download_to_kit_sandbox_tmp(fallback_dir) {
+	if (!process.stdin.isTTY || !process.stdout.isTTY) {
+		return false;
+	}
+
+	const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+
+	try {
+		const answer = await rl.question(
+			`Would you like to copy this project into ${fallback_dir} instead? [y/N] `
+		);
+		return /^(y|yes)$/i.test(answer.trim());
+	} finally {
+		rl.close();
+	}
+}
+
+/**
+ * Copy a project directory while skipping generated and dependency folders
+ * @param {string} source_dir
+ * @param {string} target_dir
+ */
+function copy_project_to_directory(source_dir, target_dir) {
+	const skip_dirs = new Set(['node_modules', '.git', '.svelte-kit', 'build', 'dist']);
+
+	if (fs.existsSync(target_dir)) {
+		fs.rmSync(target_dir, { recursive: true, force: true });
+	}
+
+	/** @param {string} from_dir */
+	function copy_recursive(from_dir) {
+		const relative_dir = path.relative(source_dir, from_dir);
+		const to_dir = relative_dir ? path.join(target_dir, relative_dir) : target_dir;
+
+		fs.mkdirSync(to_dir, { recursive: true });
+
+		for (const entry of fs.readdirSync(from_dir, { withFileTypes: true })) {
+			if (entry.isDirectory() && skip_dirs.has(entry.name)) {
+				continue;
+			}
+
+			const source_path = path.join(from_dir, entry.name);
+			const target_path = path.join(to_dir, entry.name);
+
+			if (entry.isDirectory()) {
+				copy_recursive(source_path);
+			} else if (entry.isFile()) {
+				fs.copyFileSync(source_path, target_path);
+			}
+		}
+	}
+
+	copy_recursive(source_dir);
+}
+
+/**
+ * Reset a directory so it exists and is empty
+ * @param {string} dir_path
+ */
+/**
+ * Create a temporary directory, run an action, and always clean up
+ * @param {string} base_dir
+ * @param {(dir: string) => void | Promise<void>} action
+ */
+async function with_tmp_dir(base_dir, action) {
+	const tmp_dir = path.join(base_dir, '.tmp-repo');
+
+	try {
+		if (fs.existsSync(tmp_dir)) {
+			fs.rmSync(tmp_dir, { recursive: true, force: true });
+		}
+		fs.mkdirSync(tmp_dir, { recursive: true });
+		await action(tmp_dir);
+	} finally {
+		if (fs.existsSync(tmp_dir)) {
+			fs.rmSync(tmp_dir, { recursive: true, force: true });
+		}
+	}
+}
+
+// Main logic
+let files;
+
+// Check if it's a local directory first (before URL parsing)
+if (is_local) {
+	console.log(`Processing local directory: ${url_arg}`);
+	files = await process_directory(url_arg);
+} else if (resolved_test_path) {
+	// Copy files from test
+	console.log(`Processing test ${url_arg}`);
+	files = get_all_files(resolved_test_path)
+		.filter((file) => !file.path.includes('_'))
+		.map((file) => {
+			return {
+				name: file.name === 'main.svelte' ? 'App.svelte' : file.name,
+				contents: file.contents
+			};
+		});
+} else if (url && is_github_url(url)) {
+	// GitHub repository handling
+	await with_tmp_dir(base_dir, async (tmp_dir) => {
+		clone_github_repo(url, tmp_dir);
+		files = await process_directory(tmp_dir);
+	});
+} else if (url && is_stackblitz_github_url(url)) {
+	// StackBlitz GitHub project handling (redirect to GitHub clone)
+	await with_tmp_dir(base_dir, async (tmp_dir) => {
+		clone_stackblitz_github_project(url, tmp_dir);
+		files = await process_directory(tmp_dir);
+	});
+} else if (url && is_stackblitz_edit_url(url)) {
+	// StackBlitz edit URLs - use browser automation to download
+	await with_tmp_dir(base_dir, async (tmp_dir) => {
+		await download_stackblitz_project(url, tmp_dir);
+		files = await process_directory(tmp_dir);
+	});
+} else if (url && url.origin === 'https://svelte.dev' && url.pathname.startsWith('/playground/')) {
+	// Svelte playground URL handling (existing logic)
+	if (url.hash.length > 1) {
+		// Decode percent-encoded characters (e.g., %5F => _), and replace base64 chars.
+		let decoded;
+		try {
+			// First, decode URI components to handle %xx encodings (e.g. %5F -> _) (LLMs calling this script sometimes encode them for some reason)
+			decoded = url.hash.slice(1);
+			decoded = decodeURIComponent(decoded);
+
+			// Now, restore for base64 (replace -/+, _/ /)
+			decoded = atob(decoded.replaceAll('-', '+').replaceAll('_', '/'));
+		} catch (e) {
+			console.error('Failed to decode URL hash:', e);
+			process.exit(1);
+		}
+		// putting it directly into the blob gives a corrupted file
+		const u8 = new Uint8Array(decoded.length);
+		for (let i = 0; i < decoded.length; i++) {
+			u8[i] = decoded.charCodeAt(i);
+		}
+		const stream = new Blob([u8]).stream().pipeThrough(new DecompressionStream('gzip'));
+		const json = await new Response(stream).text();
+
+		files = JSON.parse(json).files;
+	} else {
+		const id = url.pathname.split('/')[2];
+		const response = await fetch(`https://svelte.dev/playground/api/${id}.json`);
+
+		files = (await response.json()).components.map((data) => {
+			const basename = `${data.name}.${data.type}`;
+
+			return {
+				type: 'file',
+				name: basename,
+				basename,
+				contents: data.source,
+				text: true
+			};
+		});
+	}
+} else {
+	console.error(
+		`${url_arg} is not a supported URL (Svelte playground, GitHub repository, or StackBlitz project)`
+	);
+	process.exit(1);
+}
+
+if (files === null) {
+	process.exit(0);
+}
+
+// Output files
+if (create_test_name) {
+	const test_parts = create_test_name.split('/').filter(Boolean);
+
+	if (test_parts.length > 2) {
+		console.error(
+			`Invalid test name "${create_test_name}". Expected e.g. "hello-world" or "runtime-legacy/hello-world"`
+		);
+		process.exit(1);
+	}
+
+	const suite_name = test_parts.length === 2 ? test_parts[0] : 'runtime-runes';
+	const test_name = test_parts[test_parts.length - 1];
+
+	const output_dir = path.join(
+		base_dir,
+		'../../..',
+		'packages/svelte/tests',
+		suite_name,
+		'samples',
+		test_name
+	);
+	if (fs.existsSync(output_dir)) {
+		console.warn(`Test folder "${output_dir}" already exists, overriding its contents`);
+		fs.rmSync(output_dir, { recursive: true, force: true });
+	}
+	fs.mkdirSync(output_dir, { recursive: true });
+
+	for (const file of files) {
+		const output_name = file.name === 'App.svelte' ? 'main.svelte' : file.name;
+		const output_path = path.join(output_dir, output_name);
+
+		fs.mkdirSync(path.dirname(output_path), { recursive: true });
+		fs.writeFileSync(output_path, file.contents);
+	}
+
+	fs.writeFileSync(
+		path.join(output_dir, '_config.js'),
+		`import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+	}
+});
+`
+	);
+
+	console.log(`Test created at ${output_dir}`);
+} else {
+	for (const file of files) {
+		const output_path = path.join(base_dir, '..', 'src', file.name);
+		fs.mkdirSync(path.dirname(output_path), { recursive: true });
+		fs.writeFileSync(output_path, file.contents);
+	}
+
+	console.log(`Files written to ${path.join(base_dir, '..', 'src')}`);
+}
diff --git a/playgrounds/sandbox/scripts/hash.js b/playgrounds/sandbox/scripts/hash.js
new file mode 100644
index 0000000000..fdfe2d1aa7
--- /dev/null
+++ b/playgrounds/sandbox/scripts/hash.js
@@ -0,0 +1,73 @@
+import fs from 'node:fs';
+
+/**
+ * Detects if a file is text or binary by checking for null bytes
+ * and validating UTF-8 encoding
+ * @param {string} filepath - Path to the file
+ * @returns {boolean} - true if file is text, false if binary
+ */
+function is_text_file(filepath) {
+	const buffer = fs.readFileSync(filepath);
+	// Check for null bytes which indicate binary files
+	for (let i = 0; i < buffer.length; i++) {
+		if (buffer[i] === 0) {
+			return false;
+		}
+	}
+	// Validate UTF-8 encoding
+	try {
+		const text = buffer.toString('utf-8');
+		// Verify round-trip encoding to ensure valid UTF-8
+		const encoded = Buffer.from(text, 'utf-8');
+		return buffer.equals(encoded);
+	} catch {
+		return false;
+	}
+}
+
+const files = [];
+
+for (const basename of fs.readdirSync('src')) {
+	if (fs.statSync(`src/${basename}`).isDirectory()) continue;
+
+	const filepath = `src/${basename}`;
+	const text = is_text_file(filepath);
+
+	files.push({
+		type: 'file',
+		name: basename,
+		basename,
+		contents: fs.readFileSync(filepath, text ? 'utf-8' : 'base64'),
+		text
+	});
+}
+
+const payload = JSON.stringify({
+	name: 'sandbox',
+	files
+});
+
+async function compress(payload) {
+	const reader = new Blob([payload])
+		.stream()
+		.pipeThrough(new CompressionStream('gzip'))
+		.getReader();
+
+	let buffer = '';
+	for (;;) {
+		const { done, value } = await reader.read();
+
+		if (done) {
+			reader.releaseLock();
+			return btoa(buffer).replaceAll('+', '-').replaceAll('/', '_');
+		} else {
+			for (let i = 0; i < value.length; i++) {
+				// decoding as utf-8 will make btoa reject the string
+				buffer += String.fromCharCode(value[i]);
+			}
+		}
+	}
+}
+
+const hash = await compress(payload);
+console.log(`https://svelte.dev/playground/untitled#${hash}`);
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 65390b70ca..b770848ad1 100644
--- a/playgrounds/sandbox/ssr-dev.js
+++ b/playgrounds/sandbox/ssr-dev.js
@@ -4,7 +4,7 @@ import path from 'node:path';
 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';
 
@@ -22,12 +22,16 @@ polka()
 	.use(async (req, res) => {
 		const template = fs.readFileSync(path.resolve(__dirname, 'index.html'), 'utf-8');
 		const transformed_template = await vite.transformIndexHtml(req.url, template);
-		const { default: App } = await vite.ssrLoadModule('/src/main.svelte');
-		const { head, body } = render(App);
+
+		const { render } = await vite.ssrLoadModule('svelte/server');
+		const { default: App } = await vite.ssrLoadModule('/src/App.svelte');
+
+		const { head, body } = await render(App);
 
 		const html = transformed_template
-			.replace(`<!--ssr-head-->`, head)
-			.replace(`<!--ssr-body-->`, body)
+			// use function form to prevent any string replacement characters from being interpreted
+			.replace(`<!--ssr-head-->`, () => head)
+			.replace(`<!--ssr-body-->`, () => body)
 			// check that Safari doesn't break hydration
 			.replaceAll('+636-555-3226', '<a href="tel:+636-555-3226">+636-555-3226</a>');
 
diff --git a/playgrounds/sandbox/ssr-prod.js b/playgrounds/sandbox/ssr-prod.js
index c268aac790..e3ece4d5be 100644
--- a/playgrounds/sandbox/ssr-prod.js
+++ b/playgrounds/sandbox/ssr-prod.js
@@ -2,14 +2,16 @@ import fs from 'node:fs';
 import path from 'node:path';
 import polka from 'polka';
 import { render } from 'svelte/server';
-import App from './src/main.svelte';
+import App from './src/App.svelte';
+import './ssr-common.js';
 
-const { head, body } = render(App);
+const { head, body } = await render(App);
 
 const rendered = fs
 	.readFileSync(path.resolve('./dist/client/index.html'), 'utf-8')
-	.replace(`<!--ssr-body-->`, body)
-	.replace(`<!--ssr-head-->`, head);
+	// use function form to prevent any string replacement characters from being interpreted
+	.replace(`<!--ssr-body-->`, () => body)
+	.replace(`<!--ssr-head-->`, () => head);
 
 const types = {
 	'.js': 'application/javascript',
diff --git a/playgrounds/sandbox/svelte.config.js b/playgrounds/sandbox/svelte.config.js
new file mode 100644
index 0000000000..33e8c98908
--- /dev/null
+++ b/playgrounds/sandbox/svelte.config.js
@@ -0,0 +1,12 @@
+export default {
+	/** @type {import('svelte/compiler').CompileOptions} */
+	compilerOptions: {
+		css: 'injected',
+
+		hmr: false,
+
+		experimental: {
+			async: true
+		}
+	}
+};
diff --git a/playgrounds/sandbox/vite.config.js b/playgrounds/sandbox/vite.config.js
index 51bfd0a212..4bf19e7dc8 100644
--- a/playgrounds/sandbox/vite.config.js
+++ b/playgrounds/sandbox/vite.config.js
@@ -1,20 +1,14 @@
 import { defineConfig } from 'vite';
 import inspect from 'vite-plugin-inspect';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
+import devtools from 'vite-plugin-devtools-json';
 
 export default defineConfig({
 	build: {
 		minify: false
 	},
 
-	plugins: [
-		inspect(),
-		svelte({
-			compilerOptions: {
-				hmr: true
-			}
-		})
-	],
+	plugins: [devtools(), inspect(), svelte()],
 
 	optimizeDeps: {
 		// svelte is a local workspace package, optimizing it would require dev server restarts with --force for every change
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 250a03744e..a970a9cf6a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,38 +9,47 @@ importers:
   .:
     devDependencies:
       '@changesets/cli':
-        specifier: ^2.27.8
-        version: 2.27.8
+        specifier: ^2.29.8
+        version: 2.29.8(@types/node@20.19.17)
+      '@eslint/js':
+        specifier: ^10.0.0
+        version: 10.0.1(eslint@10.0.0)
       '@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.9.0(eslint@9.9.1))(eslint-plugin-svelte@2.38.0(eslint@9.9.1)(svelte@packages+svelte))(eslint@9.9.1)(typescript-eslint@8.2.0(eslint@9.9.1)(typescript@5.5.4))(typescript@5.5.4)
+        specifier: ^9.0.0
+        version: 9.0.0(@eslint/js@10.0.1(eslint@10.0.0))(@stylistic/eslint-plugin-js@1.8.0(eslint@10.0.0))(eslint-config-prettier@9.1.0(eslint@10.0.0))(eslint-plugin-n@17.24.0(eslint@10.0.0)(typescript@5.5.4))(eslint-plugin-svelte@3.15.0(eslint@10.0.0)(svelte@packages+svelte))(eslint@10.0.0)(typescript-eslint@8.56.0(eslint@10.0.0)(typescript@5.5.4))(typescript@5.5.4)
       '@svitejs/changesets-changelog-github-compact':
         specifier: ^1.1.0
         version: 1.1.0
       '@types/node':
         specifier: ^20.11.5
-        version: 20.12.7
+        version: 20.19.17
+      '@types/picomatch':
+        specifier: ^4.0.2
+        version: 4.0.2
       '@vitest/coverage-v8':
-        specifier: ^2.0.5
-        version: 2.0.5(vitest@2.0.5(@types/node@20.12.7)(jsdom@25.0.1)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
+        specifier: ^4.1.7
+        version: 4.1.7(vitest@4.1.7)
       eslint:
-        specifier: ^9.9.1
-        version: 9.9.1
+        specifier: ^10.0.0
+        version: 10.0.0
       eslint-plugin-lube:
-        specifier: ^0.4.3
-        version: 0.4.3
+        specifier: ^0.5.1
+        version: 0.5.1(eslint@10.0.0)
+      eslint-plugin-svelte:
+        specifier: ^3.15.0
+        version: 3.15.0(eslint@10.0.0)(svelte@packages+svelte)
       jsdom:
         specifier: 25.0.1
         version: 25.0.1
       playwright:
-        specifier: ^1.46.1
-        version: 1.46.1
+        specifier: ^1.60.0
+        version: 1.60.0
       prettier:
         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
@@ -48,44 +57,53 @@ importers:
         specifier: ^5.5.4
         version: 5.5.4
       typescript-eslint:
-        specifier: ^8.2.0
-        version: 8.2.0(eslint@9.9.1)(typescript@5.5.4)
+        specifier: ^8.56.0
+        version: 8.56.0(eslint@10.0.0)(typescript@5.5.4)
       v8-natives:
         specifier: ^1.2.5
         version: 1.2.5
       vitest:
-        specifier: ^2.0.5
-        version: 2.0.5(@types/node@20.12.7)(jsdom@25.0.1)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
+        specifier: ^4.1.7
+        version: 4.1.7(@types/node@20.19.17)(@vitest/coverage-v8@4.1.7)(jsdom@25.0.1)(vite@7.3.2(@types/node@20.19.17)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
 
   packages/svelte:
     dependencies:
-      '@ampproject/remapping':
-        specifier: ^2.3.0
-        version: 2.3.0
+      '@jridgewell/remapping':
+        specifier: ^2.3.4
+        version: 2.3.4
       '@jridgewell/sourcemap-codec':
         specifier: ^1.5.0
         version: 1.5.0
+      '@sveltejs/acorn-typescript':
+        specifier: ^1.0.10
+        version: 1.0.10(acorn@8.16.0)
       '@types/estree':
         specifier: ^1.0.5
-        version: 1.0.6
+        version: 1.0.8
+      '@types/trusted-types':
+        specifier: ^2.0.7
+        version: 2.0.7
       acorn:
         specifier: ^8.12.1
-        version: 8.12.1
-      acorn-typescript:
-        specifier: ^1.4.13
-        version: 1.4.13(acorn@8.12.1)
+        version: 8.16.0
       aria-query:
-        specifier: ^5.3.1
+        specifier: 5.3.1
         version: 5.3.1
       axobject-query:
         specifier: ^4.1.0
         version: 4.1.0
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      devalue:
+        specifier: ^5.8.1
+        version: 5.8.1
       esm-env:
         specifier: ^1.2.1
         version: 1.2.1
       esrap:
-        specifier: ^1.2.3
-        version: 1.2.3
+        specifier: ^2.2.9
+        version: 2.2.9(@typescript-eslint/types@8.59.4)
       is-reference:
         specifier: ^3.0.3
         version: 3.0.3
@@ -94,77 +112,89 @@ importers:
         version: 3.0.0
       magic-string:
         specifier: ^0.30.11
-        version: 0.30.11
+        version: 0.30.17
       zimmerframe:
         specifier: ^1.1.2
         version: 1.1.2
     devDependencies:
       '@jridgewell/trace-mapping':
         specifier: ^0.3.25
-        version: 0.3.25
+        version: 0.3.31
       '@playwright/test':
-        specifier: ^1.46.1
-        version: 1.46.1
+        specifier: ^1.60.0
+        version: 1.60.0
       '@rollup/plugin-commonjs':
         specifier: ^28.0.1
-        version: 28.0.1(rollup@4.22.4)
+        version: 28.0.1(rollup@4.60.1)
       '@rollup/plugin-node-resolve':
         specifier: ^15.3.0
-        version: 15.3.0(rollup@4.22.4)
+        version: 15.3.0(rollup@4.60.1)
       '@rollup/plugin-terser':
         specifier: ^0.4.4
-        version: 0.4.4(rollup@4.22.4)
+        version: 0.4.4(rollup@4.60.1)
       '@rollup/plugin-virtual':
         specifier: ^3.0.2
-        version: 3.0.2(rollup@4.22.4)
+        version: 3.0.2(rollup@4.60.1)
       '@types/aria-query':
         specifier: ^5.0.4
         version: 5.0.4
       '@types/node':
         specifier: ^20.11.5
-        version: 20.12.7
+        version: 20.19.17
+      baseline-browser-mapping:
+        specifier: ^2.10.32
+        version: 2.10.32
       dts-buddy:
-        specifier: ^0.5.3
-        version: 0.5.3(typescript@5.5.4)
+        specifier: ^0.5.5
+        version: 0.5.5(typescript@5.5.4)
       esbuild:
-        specifier: ^0.21.5
-        version: 0.21.5
+        specifier: ^0.25.10
+        version: 0.25.11
       rollup:
-        specifier: ^4.22.4
-        version: 4.22.4
+        specifier: ^4.59.0
+        version: 4.60.1
       source-map:
         specifier: ^0.7.4
         version: 0.7.4
-      tiny-glob:
-        specifier: ^0.2.9
-        version: 0.2.9
+      tinyglobby:
+        specifier: ^0.2.12
+        version: 0.2.15
       typescript:
         specifier: ^5.5.4
         version: 5.5.4
       vitest:
-        specifier: ^2.0.5
-        version: 2.0.5(@types/node@20.12.7)(jsdom@25.0.1)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
+        specifier: ^4.1.7
+        version: 4.1.7(@types/node@20.19.17)(@vitest/coverage-v8@4.1.7)(jsdom@25.0.1)(vite@7.3.2(@types/node@20.19.17)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
+      web-features:
+        specifier: ^3.29.0
+        version: 3.29.0
 
   playgrounds/sandbox:
     devDependencies:
       '@sveltejs/vite-plugin-svelte':
-        specifier: ^4.0.0-next.6
-        version: 4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
+        specifier: ^6.2.0
+        version: 6.2.0(svelte@packages+svelte)(vite@7.3.2(@types/node@24.5.2)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
+      '@types/node':
+        specifier: ^24.5.2
+        version: 24.5.2
       polka:
         specifier: ^1.0.0-next.25
         version: 1.0.0-next.25
       svelte:
         specifier: workspace:*
         version: link:../../packages/svelte
-      tiny-glob:
-        specifier: ^0.2.9
-        version: 0.2.9
+      tinyglobby:
+        specifier: ^0.2.12
+        version: 0.2.15
       vite:
-        specifier: ^5.4.6
-        version: 5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
+        specifier: ^7.3.2
+        version: 7.3.2(@types/node@24.5.2)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
+      vite-plugin-devtools-json:
+        specifier: ^1.0.0
+        version: 1.0.0(vite@7.3.2(@types/node@24.5.2)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
       vite-plugin-inspect:
-        specifier: ^0.8.4
-        version: 0.8.4(rollup@4.22.4)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
+        specifier: ^11.3.3
+        version: 11.3.3(vite@7.3.2(@types/node@24.5.2)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
 
 packages:
 
@@ -172,279 +202,480 @@ packages:
     resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==}
     engines: {node: '>=0.10.0'}
 
-  '@ampproject/remapping@2.3.0':
-    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
-    engines: {node: '>=6.0.0'}
-
-  '@antfu/utils@0.7.8':
-    resolution: {integrity: sha512-rWQkqXRESdjXtc+7NRfK9lASQjpXJu1ayp7qi1d23zZorY+wBHVLHHoVcMsEnkqEBWTFqbztO7/QdJFzyEcLTg==}
-
-  '@babel/helper-string-parser@7.24.8':
-    resolution: {integrity: sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==}
+  '@babel/helper-string-parser@7.27.1':
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-identifier@7.24.7':
-    resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==}
+  '@babel/helper-validator-identifier@7.28.5':
+    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/parser@7.25.4':
-    resolution: {integrity: sha512-nq+eWrOgdtu3jG5Os4TQP3x3cLA8hR8TvJNjD8vnPa20WGycimcparWnLK4jJhElTK6SDyuJo1weMKO/5LpmLA==}
+  '@babel/parser@7.29.3':
+    resolution: {integrity: sha512-b3ctpQwp+PROvU/cttc4OYl4MzfJUWy6FZg+PMXfzmt/+39iHVF0sDfqay8TQM3JA2EUOyKcFZt75jWriQijsA==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  '@babel/runtime@7.23.8':
-    resolution: {integrity: sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==}
+  '@babel/runtime@7.28.4':
+    resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@7.25.4':
-    resolution: {integrity: sha512-zQ1ijeeCXVEh+aNL0RlmkPkG8HUiDcU2pzQQFjtbntgAczRASFzj4H+6+bV+dy1ntKR14I/DypeuRG1uma98iQ==}
+  '@babel/types@7.29.0':
+    resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
     engines: {node: '>=6.9.0'}
 
-  '@bcoe/v8-coverage@0.2.3':
-    resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
+  '@bcoe/v8-coverage@1.0.2':
+    resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
+    engines: {node: '>=18'}
 
-  '@changesets/apply-release-plan@7.0.5':
-    resolution: {integrity: sha512-1cWCk+ZshEkSVEZrm2fSj1Gz8sYvxgUL4Q78+1ZZqeqfuevPTPk033/yUZ3df8BKMohkqqHfzj0HOOrG0KtXTw==}
+  '@changesets/apply-release-plan@7.0.14':
+    resolution: {integrity: sha512-ddBvf9PHdy2YY0OUiEl3TV78mH9sckndJR14QAt87KLEbIov81XO0q0QAmvooBxXlqRRP8I9B7XOzZwQG7JkWA==}
 
-  '@changesets/assemble-release-plan@6.0.4':
-    resolution: {integrity: sha512-nqICnvmrwWj4w2x0fOhVj2QEGdlUuwVAwESrUo5HLzWMI1rE5SWfsr9ln+rDqWB6RQ2ZyaMZHUcU7/IRaUJS+Q==}
+  '@changesets/assemble-release-plan@6.0.9':
+    resolution: {integrity: sha512-tPgeeqCHIwNo8sypKlS3gOPmsS3wP0zHt67JDuL20P4QcXiw/O4Hl7oXiuLnP9yg+rXLQ2sScdV1Kkzde61iSQ==}
 
-  '@changesets/changelog-git@0.2.0':
-    resolution: {integrity: sha512-bHOx97iFI4OClIT35Lok3sJAwM31VbUM++gnMBV16fdbtBhgYu4dxsphBF/0AZZsyAHMrnM0yFcj5gZM1py6uQ==}
+  '@changesets/changelog-git@0.2.1':
+    resolution: {integrity: sha512-x/xEleCFLH28c3bQeQIyeZf8lFXyDFVn1SgcBiR2Tw/r4IAWlk1fzxCEZ6NxQAjF2Nwtczoen3OA2qR+UawQ8Q==}
 
-  '@changesets/cli@2.27.8':
-    resolution: {integrity: sha512-gZNyh+LdSsI82wBSHLQ3QN5J30P4uHKJ4fXgoGwQxfXwYFTJzDdvIJasZn8rYQtmKhyQuiBj4SSnLuKlxKWq4w==}
+  '@changesets/cli@2.29.8':
+    resolution: {integrity: sha512-1weuGZpP63YWUYjay/E84qqwcnt5yJMM0tep10Up7Q5cS/DGe2IZ0Uj3HNMxGhCINZuR7aO9WBMdKnPit5ZDPA==}
     hasBin: true
 
-  '@changesets/config@3.0.3':
-    resolution: {integrity: sha512-vqgQZMyIcuIpw9nqFIpTSNyc/wgm/Lu1zKN5vECy74u95Qx/Wa9g27HdgO4NkVAaq+BGA8wUc/qvbvVNs93n6A==}
+  '@changesets/config@3.1.2':
+    resolution: {integrity: sha512-CYiRhA4bWKemdYi/uwImjPxqWNpqGPNbEBdX1BdONALFIDK7MCUj6FPkzD+z9gJcvDFUQJn9aDVf4UG7OT6Kog==}
 
   '@changesets/errors@0.2.0':
     resolution: {integrity: sha512-6BLOQUscTpZeGljvyQXlWOItQyU71kCdGz7Pi8H8zdw6BI0g3m43iL4xKUVPWtG+qrrL9DTjpdn8eYuCQSRpow==}
 
-  '@changesets/get-dependents-graph@2.1.2':
-    resolution: {integrity: sha512-sgcHRkiBY9i4zWYBwlVyAjEM9sAzs4wYVwJUdnbDLnVG3QwAaia1Mk5P8M7kraTOZN+vBET7n8KyB0YXCbFRLQ==}
+  '@changesets/get-dependents-graph@2.1.3':
+    resolution: {integrity: sha512-gphr+v0mv2I3Oxt19VdWRRUxq3sseyUpX9DaHpTUmLj92Y10AGy+XOtV+kbM6L/fDcpx7/ISDFK6T8A/P3lOdQ==}
 
   '@changesets/get-github-info@0.5.2':
     resolution: {integrity: sha512-JppheLu7S114aEs157fOZDjFqUDpm7eHdq5E8SSR0gUBTEK0cNSHsrSR5a66xs0z3RWuo46QvA3vawp8BxDHvg==}
 
-  '@changesets/get-release-plan@4.0.4':
-    resolution: {integrity: sha512-SicG/S67JmPTrdcc9Vpu0wSQt7IiuN0dc8iR5VScnnTVPfIaLvKmEGRvIaF0kcn8u5ZqLbormZNTO77bCEvyWw==}
+  '@changesets/get-release-plan@4.0.14':
+    resolution: {integrity: sha512-yjZMHpUHgl4Xl5gRlolVuxDkm4HgSJqT93Ri1Uz8kGrQb+5iJ8dkXJ20M2j/Y4iV5QzS2c5SeTxVSKX+2eMI0g==}
 
   '@changesets/get-version-range-type@0.4.0':
     resolution: {integrity: sha512-hwawtob9DryoGTpixy1D3ZXbGgJu1Rhr+ySH2PvTLHvkZuQ7sRT4oQwMh0hbqZH1weAooedEjRsbrWcGLCeyVQ==}
 
-  '@changesets/git@3.0.1':
-    resolution: {integrity: sha512-pdgHcYBLCPcLd82aRcuO0kxCDbw/yISlOtkmwmE8Odo1L6hSiZrBOsRl84eYG7DRCab/iHnOkWqExqc4wxk2LQ==}
+  '@changesets/git@3.0.4':
+    resolution: {integrity: sha512-BXANzRFkX+XcC1q/d27NKvlJ1yf7PSAgi8JG6dt8EfbHFHi4neau7mufcSca5zRhwOL8j9s6EqsxmT+s+/E6Sw==}
 
   '@changesets/logger@0.1.1':
     resolution: {integrity: sha512-OQtR36ZlnuTxKqoW4Sv6x5YIhOmClRd5pWsjZsddYxpWs517R0HkyiefQPIytCVh4ZcC5x9XaG8KTdd5iRQUfg==}
 
-  '@changesets/parse@0.4.0':
-    resolution: {integrity: sha512-TS/9KG2CdGXS27S+QxbZXgr8uPsP4yNJYb4BC2/NeFUj80Rni3TeD2qwWmabymxmrLo7JEsytXH1FbpKTbvivw==}
+  '@changesets/parse@0.4.2':
+    resolution: {integrity: sha512-Uo5MC5mfg4OM0jU3up66fmSn6/NE9INK+8/Vn/7sMVcdWg46zfbvvUSjD9EMonVqPi9fbrJH9SXHn48Tr1f2yA==}
 
-  '@changesets/pre@2.0.1':
-    resolution: {integrity: sha512-vvBJ/If4jKM4tPz9JdY2kGOgWmCowUYOi5Ycv8dyLnEE8FgpYYUo1mgJZxcdtGGP3aG8rAQulGLyyXGSLkIMTQ==}
+  '@changesets/pre@2.0.2':
+    resolution: {integrity: sha512-HaL/gEyFVvkf9KFg6484wR9s0qjAXlZ8qWPDkTyKF6+zqjBe/I2mygg3MbpZ++hdi0ToqNUF8cjj7fBy0dg8Ug==}
 
-  '@changesets/read@0.6.1':
-    resolution: {integrity: sha512-jYMbyXQk3nwP25nRzQQGa1nKLY0KfoOV7VLgwucI0bUO8t8ZLCr6LZmgjXsiKuRDc+5A6doKPr9w2d+FEJ55zQ==}
+  '@changesets/read@0.6.6':
+    resolution: {integrity: sha512-P5QaN9hJSQQKJShzzpBT13FzOSPyHbqdoIBUd2DJdgvnECCyO6LmAOWSV+O8se2TaZJVwSXjL+v9yhb+a9JeJg==}
 
-  '@changesets/should-skip-package@0.1.1':
-    resolution: {integrity: sha512-H9LjLbF6mMHLtJIc/eHR9Na+MifJ3VxtgP/Y+XLn4BF7tDTEN1HNYtH6QMcjP1uxp9sjaFYmW8xqloaCi/ckTg==}
+  '@changesets/should-skip-package@0.1.2':
+    resolution: {integrity: sha512-qAK/WrqWLNCP22UDdBTMPH5f41elVDlsNyat180A33dWxuUDyNpg6fPi/FyTZwRriVjg0L8gnjJn2F9XAoF0qw==}
 
   '@changesets/types@4.1.0':
     resolution: {integrity: sha512-LDQvVDv5Kb50ny2s25Fhm3d9QSZimsoUGBsUioj6MC3qbMUCuC8GPIvk/M6IvXx3lYhAs0lwWUQLb+VIEUCECw==}
 
-  '@changesets/types@6.0.0':
-    resolution: {integrity: sha512-b1UkfNulgKoWfqyHtzKS5fOZYSJO+77adgL7DLRDr+/7jhChN+QcHnbjiQVOz/U+Ts3PGNySq7diAItzDgugfQ==}
+  '@changesets/types@6.1.0':
+    resolution: {integrity: sha512-rKQcJ+o1nKNgeoYRHKOS07tAMNd3YSN0uHaJOZYjBAgxfV7TUE7JE+z4BzZdQwb5hKaYbayKN5KrYV7ODb2rAA==}
 
-  '@changesets/write@0.3.2':
-    resolution: {integrity: sha512-kDxDrPNpUgsjDbWBvUo27PzKX4gqeKOlhibaOXDJA6kuBisGqNHv/HwGJrAu8U/dSf8ZEFIeHIPtvSlZI1kULw==}
+  '@changesets/write@0.4.0':
+    resolution: {integrity: sha512-CdTLvIOPiCNuH71pyDu3rA+Q0n65cmAbXnwWH84rKGiFumFzkmHNT8KHTMEchcxN+Kl8I54xGUhJ7l3E7X396Q==}
 
-  '@esbuild/aix-ppc64@0.21.5':
-    resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
-    engines: {node: '>=12'}
+  '@esbuild/aix-ppc64@0.25.11':
+    resolution: {integrity: sha512-Xt1dOL13m8u0WE8iplx9Ibbm+hFAO0GsU2P34UNoDGvZYkY8ifSiy6Zuc1lYxfG7svWE2fzqCUmFp5HCn51gJg==}
+    engines: {node: '>=18'}
     cpu: [ppc64]
     os: [aix]
 
-  '@esbuild/android-arm64@0.21.5':
-    resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==}
-    engines: {node: '>=12'}
+  '@esbuild/aix-ppc64@0.27.7':
+    resolution: {integrity: sha512-EKX3Qwmhz1eMdEJokhALr0YiD0lhQNwDqkPYyPhiSwKrh7/4KRjQc04sZ8db+5DVVnZ1LmbNDI1uAMPEUBnQPg==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.25.11':
+    resolution: {integrity: sha512-9slpyFBc4FPPz48+f6jyiXOx/Y4v34TUeDDXJpZqAWQn/08lKGeD8aDp9TMn9jDz2CiEuHwfhRmGBvpnd/PWIQ==}
+    engines: {node: '>=18'}
     cpu: [arm64]
     os: [android]
 
-  '@esbuild/android-arm@0.21.5':
-    resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==}
-    engines: {node: '>=12'}
+  '@esbuild/android-arm64@0.27.7':
+    resolution: {integrity: sha512-62dPZHpIXzvChfvfLJow3q5dDtiNMkwiRzPylSCfriLvZeq0a1bWChrGx/BbUbPwOrsWKMn8idSllklzBy+dgQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.25.11':
+    resolution: {integrity: sha512-uoa7dU+Dt3HYsethkJ1k6Z9YdcHjTrSb5NUy66ZfZaSV8hEYGD5ZHbEMXnqLFlbBflLsl89Zke7CAdDJ4JI+Gg==}
+    engines: {node: '>=18'}
     cpu: [arm]
     os: [android]
 
-  '@esbuild/android-x64@0.21.5':
-    resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==}
-    engines: {node: '>=12'}
+  '@esbuild/android-arm@0.27.7':
+    resolution: {integrity: sha512-jbPXvB4Yj2yBV7HUfE2KHe4GJX51QplCN1pGbYjvsyCZbQmies29EoJbkEc+vYuU5o45AfQn37vZlyXy4YJ8RQ==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.25.11':
+    resolution: {integrity: sha512-Sgiab4xBjPU1QoPEIqS3Xx+R2lezu0LKIEcYe6pftr56PqPygbB7+szVnzoShbx64MUupqoE0KyRlN7gezbl8g==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [android]
 
-  '@esbuild/darwin-arm64@0.21.5':
-    resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==}
-    engines: {node: '>=12'}
+  '@esbuild/android-x64@0.27.7':
+    resolution: {integrity: sha512-x5VpMODneVDb70PYV2VQOmIUUiBtY3D3mPBG8NxVk5CogneYhkR7MmM3yR/uMdITLrC1ml/NV1rj4bMJuy9MCg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.25.11':
+    resolution: {integrity: sha512-VekY0PBCukppoQrycFxUqkCojnTQhdec0vevUL/EDOCnXd9LKWqD/bHwMPzigIJXPhC59Vd1WFIL57SKs2mg4w==}
+    engines: {node: '>=18'}
     cpu: [arm64]
     os: [darwin]
 
-  '@esbuild/darwin-x64@0.21.5':
-    resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==}
-    engines: {node: '>=12'}
+  '@esbuild/darwin-arm64@0.27.7':
+    resolution: {integrity: sha512-5lckdqeuBPlKUwvoCXIgI2D9/ABmPq3Rdp7IfL70393YgaASt7tbju3Ac+ePVi3KDH6N2RqePfHnXkaDtY9fkw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.25.11':
+    resolution: {integrity: sha512-+hfp3yfBalNEpTGp9loYgbknjR695HkqtY3d3/JjSRUyPg/xd6q+mQqIb5qdywnDxRZykIHs3axEqU6l1+oWEQ==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [darwin]
 
-  '@esbuild/freebsd-arm64@0.21.5':
-    resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==}
-    engines: {node: '>=12'}
+  '@esbuild/darwin-x64@0.27.7':
+    resolution: {integrity: sha512-rYnXrKcXuT7Z+WL5K980jVFdvVKhCHhUwid+dDYQpH+qu+TefcomiMAJpIiC2EM3Rjtq0sO3StMV/+3w3MyyqQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.25.11':
+    resolution: {integrity: sha512-CmKjrnayyTJF2eVuO//uSjl/K3KsMIeYeyN7FyDBjsR3lnSJHaXlVoAK8DZa7lXWChbuOk7NjAc7ygAwrnPBhA==}
+    engines: {node: '>=18'}
     cpu: [arm64]
     os: [freebsd]
 
-  '@esbuild/freebsd-x64@0.21.5':
-    resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==}
-    engines: {node: '>=12'}
+  '@esbuild/freebsd-arm64@0.27.7':
+    resolution: {integrity: sha512-B48PqeCsEgOtzME2GbNM2roU29AMTuOIN91dsMO30t+Ydis3z/3Ngoj5hhnsOSSwNzS+6JppqWsuhTp6E82l2w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.25.11':
+    resolution: {integrity: sha512-Dyq+5oscTJvMaYPvW3x3FLpi2+gSZTCE/1ffdwuM6G1ARang/mb3jvjxs0mw6n3Lsw84ocfo9CrNMqc5lTfGOw==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [freebsd]
 
-  '@esbuild/linux-arm64@0.21.5':
-    resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==}
-    engines: {node: '>=12'}
+  '@esbuild/freebsd-x64@0.27.7':
+    resolution: {integrity: sha512-jOBDK5XEjA4m5IJK3bpAQF9/Lelu/Z9ZcdhTRLf4cajlB+8VEhFFRjWgfy3M1O4rO2GQ/b2dLwCUGpiF/eATNQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.25.11':
+    resolution: {integrity: sha512-Qr8AzcplUhGvdyUF08A1kHU3Vr2O88xxP0Tm8GcdVOUm25XYcMPp2YqSVHbLuXzYQMf9Bh/iKx7YPqECs6ffLA==}
+    engines: {node: '>=18'}
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm@0.21.5':
-    resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-arm64@0.27.7':
+    resolution: {integrity: sha512-RZPHBoxXuNnPQO9rvjh5jdkRmVizktkT7TCDkDmQ0W2SwHInKCAV95GRuvdSvA7w4VMwfCjUiPwDi0ZO6Nfe9A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.25.11':
+    resolution: {integrity: sha512-TBMv6B4kCfrGJ8cUPo7vd6NECZH/8hPpBHHlYI3qzoYFvWu2AdTvZNuU/7hsbKWqu/COU7NIK12dHAAqBLLXgw==}
+    engines: {node: '>=18'}
     cpu: [arm]
     os: [linux]
 
-  '@esbuild/linux-ia32@0.21.5':
-    resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-arm@0.27.7':
+    resolution: {integrity: sha512-RkT/YXYBTSULo3+af8Ib0ykH8u2MBh57o7q/DAs3lTJlyVQkgQvlrPTnjIzzRPQyavxtPtfg0EopvDyIt0j1rA==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.25.11':
+    resolution: {integrity: sha512-TmnJg8BMGPehs5JKrCLqyWTVAvielc615jbkOirATQvWWB1NMXY77oLMzsUjRLa0+ngecEmDGqt5jiDC6bfvOw==}
+    engines: {node: '>=18'}
     cpu: [ia32]
     os: [linux]
 
-  '@esbuild/linux-loong64@0.21.5':
-    resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-ia32@0.27.7':
+    resolution: {integrity: sha512-GA48aKNkyQDbd3KtkplYWT102C5sn/EZTY4XROkxONgruHPU72l+gW+FfF8tf2cFjeHaRbWpOYa/uRBz/Xq1Pg==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.25.11':
+    resolution: {integrity: sha512-DIGXL2+gvDaXlaq8xruNXUJdT5tF+SBbJQKbWy/0J7OhU8gOHOzKmGIlfTTl6nHaCOoipxQbuJi7O++ldrxgMw==}
+    engines: {node: '>=18'}
     cpu: [loong64]
     os: [linux]
 
-  '@esbuild/linux-mips64el@0.21.5':
-    resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-loong64@0.27.7':
+    resolution: {integrity: sha512-a4POruNM2oWsD4WKvBSEKGIiWQF8fZOAsycHOt6JBpZ+JN2n2JH9WAv56SOyu9X5IqAjqSIPTaJkqN8F7XOQ5Q==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.25.11':
+    resolution: {integrity: sha512-Osx1nALUJu4pU43o9OyjSCXokFkFbyzjXb6VhGIJZQ5JZi8ylCQ9/LFagolPsHtgw6himDSyb5ETSfmp4rpiKQ==}
+    engines: {node: '>=18'}
     cpu: [mips64el]
     os: [linux]
 
-  '@esbuild/linux-ppc64@0.21.5':
-    resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-mips64el@0.27.7':
+    resolution: {integrity: sha512-KabT5I6StirGfIz0FMgl1I+R1H73Gp0ofL9A3nG3i/cYFJzKHhouBV5VWK1CSgKvVaG4q1RNpCTR2LuTVB3fIw==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.25.11':
+    resolution: {integrity: sha512-nbLFgsQQEsBa8XSgSTSlrnBSrpoWh7ioFDUmwo158gIm5NNP+17IYmNWzaIzWmgCxq56vfr34xGkOcZ7jX6CPw==}
+    engines: {node: '>=18'}
     cpu: [ppc64]
     os: [linux]
 
-  '@esbuild/linux-riscv64@0.21.5':
-    resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-ppc64@0.27.7':
+    resolution: {integrity: sha512-gRsL4x6wsGHGRqhtI+ifpN/vpOFTQtnbsupUF5R5YTAg+y/lKelYR1hXbnBdzDjGbMYjVJLJTd2OFmMewAgwlQ==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.25.11':
+    resolution: {integrity: sha512-HfyAmqZi9uBAbgKYP1yGuI7tSREXwIb438q0nqvlpxAOs3XnZ8RsisRfmVsgV486NdjD7Mw2UrFSw51lzUk1ww==}
+    engines: {node: '>=18'}
     cpu: [riscv64]
     os: [linux]
 
-  '@esbuild/linux-s390x@0.21.5':
-    resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-riscv64@0.27.7':
+    resolution: {integrity: sha512-hL25LbxO1QOngGzu2U5xeXtxXcW+/GvMN3ejANqXkxZ/opySAZMrc+9LY/WyjAan41unrR3YrmtTsUpwT66InQ==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.25.11':
+    resolution: {integrity: sha512-HjLqVgSSYnVXRisyfmzsH6mXqyvj0SA7pG5g+9W7ESgwA70AXYNpfKBqh1KbTxmQVaYxpzA/SvlB9oclGPbApw==}
+    engines: {node: '>=18'}
     cpu: [s390x]
     os: [linux]
 
-  '@esbuild/linux-x64@0.21.5':
-    resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-s390x@0.27.7':
+    resolution: {integrity: sha512-2k8go8Ycu1Kb46vEelhu1vqEP+UeRVj2zY1pSuPdgvbd5ykAw82Lrro28vXUrRmzEsUV0NzCf54yARIK8r0fdw==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.25.11':
+    resolution: {integrity: sha512-HSFAT4+WYjIhrHxKBwGmOOSpphjYkcswF449j6EjsjbinTZbp8PJtjsVK1XFJStdzXdy/jaddAep2FGY+wyFAQ==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [linux]
 
-  '@esbuild/netbsd-x64@0.21.5':
-    resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==}
-    engines: {node: '>=12'}
+  '@esbuild/linux-x64@0.27.7':
+    resolution: {integrity: sha512-hzznmADPt+OmsYzw1EE33ccA+HPdIqiCRq7cQeL1Jlq2gb1+OyWBkMCrYGBJ+sxVzve2ZJEVeePbLM2iEIZSxA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.25.11':
+    resolution: {integrity: sha512-hr9Oxj1Fa4r04dNpWr3P8QKVVsjQhqrMSUzZzf+LZcYjZNqhA3IAfPQdEh1FLVUJSiu6sgAwp3OmwBfbFgG2Xg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-arm64@0.27.7':
+    resolution: {integrity: sha512-b6pqtrQdigZBwZxAn1UpazEisvwaIDvdbMbmrly7cDTMFnw/+3lVxxCTGOrkPVnsYIosJJXAsILG9XcQS+Yu6w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.25.11':
+    resolution: {integrity: sha512-u7tKA+qbzBydyj0vgpu+5h5AeudxOAGncb8N6C9Kh1N4n7wU1Xw1JDApsRjpShRpXRQlJLb9wY28ELpwdPcZ7A==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [netbsd]
 
-  '@esbuild/openbsd-x64@0.21.5':
-    resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==}
-    engines: {node: '>=12'}
+  '@esbuild/netbsd-x64@0.27.7':
+    resolution: {integrity: sha512-OfatkLojr6U+WN5EDYuoQhtM+1xco+/6FSzJJnuWiUw5eVcicbyK3dq5EeV/QHT1uy6GoDhGbFpprUiHUYggrw==}
+    engines: {node: '>=18'}
     cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.25.11':
+    resolution: {integrity: sha512-Qq6YHhayieor3DxFOoYM1q0q1uMFYb7cSpLD2qzDSvK1NAvqFi8Xgivv0cFC6J+hWVw2teCYltyy9/m/14ryHg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
     os: [openbsd]
 
-  '@esbuild/sunos-x64@0.21.5':
-    resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==}
-    engines: {node: '>=12'}
+  '@esbuild/openbsd-arm64@0.27.7':
+    resolution: {integrity: sha512-AFuojMQTxAz75Fo8idVcqoQWEHIXFRbOc1TrVcFSgCZtQfSdc1RXgB3tjOn/krRHENUB4j00bfGjyl2mJrU37A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.25.11':
+    resolution: {integrity: sha512-CN+7c++kkbrckTOz5hrehxWN7uIhFFlmS/hqziSFVWpAzpWrQoAG4chH+nN3Be+Kzv/uuo7zhX716x3Sn2Jduw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.27.7':
+    resolution: {integrity: sha512-+A1NJmfM8WNDv5CLVQYJ5PshuRm/4cI6WMZRg1by1GwPIQPCTs1GLEUHwiiQGT5zDdyLiRM/l1G0Pv54gvtKIg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.25.11':
+    resolution: {integrity: sha512-rOREuNIQgaiR+9QuNkbkxubbp8MSO9rONmwP5nKncnWJ9v5jQ4JxFnLu4zDSRPf3x4u+2VN4pM4RdyIzDty/wQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/openharmony-arm64@0.27.7':
+    resolution: {integrity: sha512-+KrvYb/C8zA9CU/g0sR6w2RBw7IGc5J2BPnc3dYc5VJxHCSF1yNMxTV5LQ7GuKteQXZtspjFbiuW5/dOj7H4Yw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/sunos-x64@0.25.11':
+    resolution: {integrity: sha512-nq2xdYaWxyg9DcIyXkZhcYulC6pQ2FuCgem3LI92IwMgIZ69KHeY8T4Y88pcwoLIjbed8n36CyKoYRDygNSGhA==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [sunos]
 
-  '@esbuild/win32-arm64@0.21.5':
-    resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==}
-    engines: {node: '>=12'}
+  '@esbuild/sunos-x64@0.27.7':
+    resolution: {integrity: sha512-ikktIhFBzQNt/QDyOL580ti9+5mL/YZeUPKU2ivGtGjdTYoqz6jObj6nOMfhASpS4GU4Q/Clh1QtxWAvcYKamA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.25.11':
+    resolution: {integrity: sha512-3XxECOWJq1qMZ3MN8srCJ/QfoLpL+VaxD/WfNRm1O3B4+AZ/BnLVgFbUV3eiRYDMXetciH16dwPbbHqwe1uU0Q==}
+    engines: {node: '>=18'}
     cpu: [arm64]
     os: [win32]
 
-  '@esbuild/win32-ia32@0.21.5':
-    resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==}
-    engines: {node: '>=12'}
+  '@esbuild/win32-arm64@0.27.7':
+    resolution: {integrity: sha512-7yRhbHvPqSpRUV7Q20VuDwbjW5kIMwTHpptuUzV+AA46kiPze5Z7qgt6CLCK3pWFrHeNfDd1VKgyP4O+ng17CA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.25.11':
+    resolution: {integrity: sha512-3ukss6gb9XZ8TlRyJlgLn17ecsK4NSQTmdIXRASVsiS2sQ6zPPZklNJT5GR5tE/MUarymmy8kCEf5xPCNCqVOA==}
+    engines: {node: '>=18'}
     cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-x64@0.21.5':
-    resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==}
-    engines: {node: '>=12'}
+  '@esbuild/win32-ia32@0.27.7':
+    resolution: {integrity: sha512-SmwKXe6VHIyZYbBLJrhOoCJRB/Z1tckzmgTLfFYOfpMAx63BJEaL9ExI8x7v0oAO3Zh6D/Oi1gVxEYr5oUCFhw==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.25.11':
+    resolution: {integrity: sha512-D7Hpz6A2L4hzsRpPaCYkQnGOotdUpDzSGRIv9I+1ITdHROSFUWW95ZPZWQmGka1Fg7W3zFJowyn9WGwMJ0+KPA==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [win32]
 
-  '@eslint-community/eslint-utils@4.4.0':
-    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
+  '@esbuild/win32-x64@0.27.7':
+    resolution: {integrity: sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@eslint-community/eslint-utils@4.9.1':
+    resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
 
-  '@eslint-community/regexpp@4.11.0':
-    resolution: {integrity: sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==}
+  '@eslint-community/regexpp@4.12.2':
+    resolution: {integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
-  '@eslint/config-array@0.18.0':
-    resolution: {integrity: sha512-fTxvnS1sRMu3+JjXwJG0j/i4RT9u4qJ+lqS/yCGap4lH4zZGzQ7tu+xZqQmcMZq5OBZDL4QRxQzRjkWcGt8IVw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@eslint/config-array@0.23.1':
+    resolution: {integrity: sha512-uVSdg/V4dfQmTjJzR0szNczjOH/J+FyUMMjYtr07xFRXR7EDf9i1qdxrD0VusZH9knj1/ecxzCQQxyic5NzAiA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
-  '@eslint/eslintrc@3.1.0':
-    resolution: {integrity: sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@eslint/config-helpers@0.5.2':
+    resolution: {integrity: sha512-a5MxrdDXEvqnIq+LisyCX6tQMPF/dSJpCfBgBauY+pNZ28yCtSsTvyTYrMhaI+LK26bVyCJfJkT0u8KIj2i1dQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
-  '@eslint/js@9.9.1':
-    resolution: {integrity: sha512-xIDQRsfg5hNBqHz04H1R3scSVwmI+KUbqjsQKHKQ1DAUSaUjYPReZZmS/5PNiKu1fUvzDd6H7DEDKACSEhu+TQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@eslint/core@1.1.0':
+    resolution: {integrity: sha512-/nr9K9wkr3P1EzFTdFdMoLuo1PmIxjmwvPozwoSodjNBdefGujXQUF93u1DDZpEaTuDvMsIQddsd35BwtrW9Xw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
-  '@eslint/object-schema@2.1.4':
-    resolution: {integrity: sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@eslint/js@10.0.1':
+    resolution: {integrity: sha512-zeR9k5pd4gxjZ0abRoIaxdc7I3nDktoXZk2qOv9gCNWx3mVwEn32VRhyLaRsDiJjTs0xq/T8mfPtyuXu7GWBcA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+    peerDependencies:
+      eslint: ^10.0.0
+    peerDependenciesMeta:
+      eslint:
+        optional: true
+
+  '@eslint/object-schema@3.0.1':
+    resolution: {integrity: sha512-P9cq2dpr+LU8j3qbLygLcSZrl2/ds/pUpfnHNNuk5HW7mnngHs+6WSq5C9mO3rqRX8A1poxqLTC9cu0KOyJlBg==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  '@eslint/plugin-kit@0.6.0':
+    resolution: {integrity: sha512-bIZEUzOI1jkhviX2cp5vNyXQc6olzb2ohewQubuYlMXZ2Q/XjBO0x0XhGPvc9fjSIiUN0vw+0hq53BJ4eQSJKQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  '@humanfs/core@0.19.1':
+    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/node@0.16.7':
+    resolution: {integrity: sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==}
+    engines: {node: '>=18.18.0'}
 
   '@humanwhocodes/module-importer@1.0.1':
     resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
     engines: {node: '>=12.22'}
 
-  '@humanwhocodes/retry@0.3.0':
-    resolution: {integrity: sha512-d2CGZR2o7fS6sWB7DG/3a95bGKQyHMACZ5aW8qGkkqQpUoZV6C0X7Pc7l4ZNMZkfNBf4VWNe9E1jRsf0G146Ew==}
+  '@humanwhocodes/retry@0.4.3':
+    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
-  '@isaacs/cliui@8.0.2':
-    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
-    engines: {node: '>=12'}
+  '@inquirer/external-editor@1.0.2':
+    resolution: {integrity: sha512-yy9cOoBnx58TlsPrIxauKIFQTiyH+0MK4e97y4sV9ERbI+zDxw7i2hxHLCIEGIE/8PPvDxGhgzIOTSOWcs6/MQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
 
-  '@istanbuljs/schema@0.1.3':
-    resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
-    engines: {node: '>=8'}
+  '@isaacs/balanced-match@4.0.1':
+    resolution: {integrity: sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==}
+    engines: {node: 20 || >=22}
+
+  '@isaacs/brace-expansion@5.0.1':
+    resolution: {integrity: sha512-WMz71T1JS624nWj2n2fnYAuPovhv7EUhk69R6i9dsVyzxt5eM3bjwvgk9L+APE1TRscGysAVMANkB0jh0LQZrQ==}
+    engines: {node: 20 || >=22}
 
   '@jridgewell/gen-mapping@0.3.5':
     resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
     engines: {node: '>=6.0.0'}
 
+  '@jridgewell/remapping@2.3.4':
+    resolution: {integrity: sha512-aG+WvAz17rhbzhKNkSeMLgbkPPK82ovXdONvmucbGhUqcroRFLLVhoGAk4xEI17gHpXgNX3sr0/B1ybRUsbEWw==}
+
   '@jridgewell/resolve-uri@3.1.1':
     resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
     engines: {node: '>=6.0.0'}
@@ -459,8 +690,11 @@ packages:
   '@jridgewell/sourcemap-codec@1.5.0':
     resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
 
-  '@jridgewell/trace-mapping@0.3.25':
-    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
   '@manypkg/find-root@1.1.0':
     resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
@@ -480,12 +714,8 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
-  '@pkgjs/parseargs@0.11.0':
-    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
-    engines: {node: '>=14'}
-
-  '@playwright/test@1.46.1':
-    resolution: {integrity: sha512-Fq6SwLujA/DOIvNC2EL/SojJnkKf/rAwJ//APpJJHRyMi1PdKrY3Az+4XNQ51N4RTbItbIByQ0jgd1tayq1aeA==}
+  '@playwright/test@1.60.0':
+    resolution: {integrity: sha512-O71yZIbAh/PxDMNGns37GHBIfrVkEVyn+AXyIa5dOTfb4/xNvRWV+Vv/NMbNCtODB/pO7vLlF2OTmMVLhmr7Ag==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -537,117 +767,171 @@ packages:
       rollup:
         optional: true
 
-  '@rollup/rollup-android-arm-eabi@4.22.4':
-    resolution: {integrity: sha512-Fxamp4aEZnfPOcGA8KSNEohV8hX7zVHOemC8jVBoBUHu5zpJK/Eu3uJwt6BMgy9fkvzxDaurgj96F/NiLukF2w==}
+  '@rollup/rollup-android-arm-eabi@4.60.1':
+    resolution: {integrity: sha512-d6FinEBLdIiK+1uACUttJKfgZREXrF0Qc2SmLII7W2AD8FfiZ9Wjd+rD/iRuf5s5dWrr1GgwXCvPqOuDquOowA==}
     cpu: [arm]
     os: [android]
 
-  '@rollup/rollup-android-arm64@4.22.4':
-    resolution: {integrity: sha512-VXoK5UMrgECLYaMuGuVTOx5kcuap1Jm8g/M83RnCHBKOqvPPmROFJGQaZhGccnsFtfXQ3XYa4/jMCJvZnbJBdA==}
+  '@rollup/rollup-android-arm64@4.60.1':
+    resolution: {integrity: sha512-YjG/EwIDvvYI1YvYbHvDz/BYHtkY4ygUIXHnTdLhG+hKIQFBiosfWiACWortsKPKU/+dUwQQCKQM3qrDe8c9BA==}
     cpu: [arm64]
     os: [android]
 
-  '@rollup/rollup-darwin-arm64@4.22.4':
-    resolution: {integrity: sha512-xMM9ORBqu81jyMKCDP+SZDhnX2QEVQzTcC6G18KlTQEzWK8r/oNZtKuZaCcHhnsa6fEeOBionoyl5JsAbE/36Q==}
+  '@rollup/rollup-darwin-arm64@4.60.1':
+    resolution: {integrity: sha512-mjCpF7GmkRtSJwon+Rq1N8+pI+8l7w5g9Z3vWj4T7abguC4Czwi3Yu/pFaLvA3TTeMVjnu3ctigusqWUfjZzvw==}
     cpu: [arm64]
     os: [darwin]
 
-  '@rollup/rollup-darwin-x64@4.22.4':
-    resolution: {integrity: sha512-aJJyYKQwbHuhTUrjWjxEvGnNNBCnmpHDvrb8JFDbeSH3m2XdHcxDd3jthAzvmoI8w/kSjd2y0udT+4okADsZIw==}
+  '@rollup/rollup-darwin-x64@4.60.1':
+    resolution: {integrity: sha512-haZ7hJ1JT4e9hqkoT9R/19XW2QKqjfJVv+i5AGg57S+nLk9lQnJ1F/eZloRO3o9Scy9CM3wQ9l+dkXtcBgN5Ew==}
     cpu: [x64]
     os: [darwin]
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.22.4':
-    resolution: {integrity: sha512-j63YtCIRAzbO+gC2L9dWXRh5BFetsv0j0va0Wi9epXDgU/XUi5dJKo4USTttVyK7fGw2nPWK0PbAvyliz50SCQ==}
+  '@rollup/rollup-freebsd-arm64@4.60.1':
+    resolution: {integrity: sha512-czw90wpQq3ZsAVBlinZjAYTKduOjTywlG7fEeWKUA7oCmpA8xdTkxZZlwNJKWqILlq0wehoZcJYfBvOyhPTQ6w==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.60.1':
+    resolution: {integrity: sha512-KVB2rqsxTHuBtfOeySEyzEOB7ltlB/ux38iu2rBQzkjbwRVlkhAGIEDiiYnO2kFOkJp+Z7pUXKyrRRFuFUKt+g==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.60.1':
+    resolution: {integrity: sha512-L+34Qqil+v5uC0zEubW7uByo78WOCIrBvci69E7sFASRl0X7b/MB6Cqd1lky/CtcSVTydWa2WZwFuWexjS5o6g==}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm-musleabihf@4.22.4':
-    resolution: {integrity: sha512-dJnWUgwWBX1YBRsuKKMOlXCzh2Wu1mlHzv20TpqEsfdZLb3WoJW2kIEsGwLkroYf24IrPAvOT/ZQ2OYMV6vlrg==}
+  '@rollup/rollup-linux-arm-musleabihf@4.60.1':
+    resolution: {integrity: sha512-n83O8rt4v34hgFzlkb1ycniJh7IR5RCIqt6mz1VRJD6pmhRi0CXdmfnLu9dIUS6buzh60IvACM842Ffb3xd6Gg==}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-gnu@4.22.4':
-    resolution: {integrity: sha512-AdPRoNi3NKVLolCN/Sp4F4N1d98c4SBnHMKoLuiG6RXgoZ4sllseuGioszumnPGmPM2O7qaAX/IJdeDU8f26Aw==}
+  '@rollup/rollup-linux-arm64-gnu@4.60.1':
+    resolution: {integrity: sha512-Nql7sTeAzhTAja3QXeAI48+/+GjBJ+QmAH13snn0AJSNL50JsDqotyudHyMbO2RbJkskbMbFJfIJKWA6R1LCJQ==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-musl@4.22.4':
-    resolution: {integrity: sha512-Gl0AxBtDg8uoAn5CCqQDMqAx22Wx22pjDOjBdmG0VIWX3qUBHzYmOKh8KXHL4UpogfJ14G4wk16EQogF+v8hmA==}
+  '@rollup/rollup-linux-arm64-musl@4.60.1':
+    resolution: {integrity: sha512-+pUymDhd0ys9GcKZPPWlFiZ67sTWV5UU6zOJat02M1+PiuSGDziyRuI/pPue3hoUwm2uGfxdL+trT6Z9rxnlMA==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-powerpc64le-gnu@4.22.4':
-    resolution: {integrity: sha512-3aVCK9xfWW1oGQpTsYJJPF6bfpWfhbRnhdlyhak2ZiyFLDaayz0EP5j9V1RVLAAxlmWKTDfS9wyRyY3hvhPoOg==}
+  '@rollup/rollup-linux-loong64-gnu@4.60.1':
+    resolution: {integrity: sha512-VSvgvQeIcsEvY4bKDHEDWcpW4Yw7BtlKG1GUT4FzBUlEKQK0rWHYBqQt6Fm2taXS+1bXvJT6kICu5ZwqKCnvlQ==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-loong64-musl@4.60.1':
+    resolution: {integrity: sha512-4LqhUomJqwe641gsPp6xLfhqWMbQV04KtPp7/dIp0nzPxAkNY1AbwL5W0MQpcalLYk07vaW9Kp1PBhdpZYYcEw==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-ppc64-gnu@4.60.1':
+    resolution: {integrity: sha512-tLQQ9aPvkBxOc/EUT6j3pyeMD6Hb8QF2BTBnCQWP/uu1lhc9AIrIjKnLYMEroIz/JvtGYgI9dF3AxHZNaEH0rw==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-ppc64-musl@4.60.1':
+    resolution: {integrity: sha512-RMxFhJwc9fSXP6PqmAz4cbv3kAyvD1etJFjTx4ONqFP9DkTkXsAMU4v3Vyc5BgzC+anz7nS/9tp4obsKfqkDHg==}
     cpu: [ppc64]
     os: [linux]
 
-  '@rollup/rollup-linux-riscv64-gnu@4.22.4':
-    resolution: {integrity: sha512-ePYIir6VYnhgv2C5Xe9u+ico4t8sZWXschR6fMgoPUK31yQu7hTEJb7bCqivHECwIClJfKgE7zYsh1qTP3WHUA==}
+  '@rollup/rollup-linux-riscv64-gnu@4.60.1':
+    resolution: {integrity: sha512-QKgFl+Yc1eEk6MmOBfRHYF6lTxiiiV3/z/BRrbSiW2I7AFTXoBFvdMEyglohPj//2mZS4hDOqeB0H1ACh3sBbg==}
     cpu: [riscv64]
     os: [linux]
 
-  '@rollup/rollup-linux-s390x-gnu@4.22.4':
-    resolution: {integrity: sha512-GqFJ9wLlbB9daxhVlrTe61vJtEY99/xB3C8e4ULVsVfflcpmR6c8UZXjtkMA6FhNONhj2eA5Tk9uAVw5orEs4Q==}
+  '@rollup/rollup-linux-riscv64-musl@4.60.1':
+    resolution: {integrity: sha512-RAjXjP/8c6ZtzatZcA1RaQr6O1TRhzC+adn8YZDnChliZHviqIjmvFwHcxi4JKPSDAt6Uhf/7vqcBzQJy0PDJg==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-s390x-gnu@4.60.1':
+    resolution: {integrity: sha512-wcuocpaOlaL1COBYiA89O6yfjlp3RwKDeTIA0hM7OpmhR1Bjo9j31G1uQVpDlTvwxGn2nQs65fBFL5UFd76FcQ==}
     cpu: [s390x]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-gnu@4.22.4':
-    resolution: {integrity: sha512-87v0ol2sH9GE3cLQLNEy0K/R0pz1nvg76o8M5nhMR0+Q+BBGLnb35P0fVz4CQxHYXaAOhE8HhlkaZfsdUOlHwg==}
+  '@rollup/rollup-linux-x64-gnu@4.60.1':
+    resolution: {integrity: sha512-77PpsFQUCOiZR9+LQEFg9GClyfkNXj1MP6wRnzYs0EeWbPcHs02AXu4xuUbM1zhwn3wqaizle3AEYg5aeoohhg==}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-musl@4.22.4':
-    resolution: {integrity: sha512-UV6FZMUgePDZrFjrNGIWzDo/vABebuXBhJEqrHxrGiU6HikPy0Z3LfdtciIttEUQfuDdCn8fqh7wiFJjCNwO+g==}
+  '@rollup/rollup-linux-x64-musl@4.60.1':
+    resolution: {integrity: sha512-5cIATbk5vynAjqqmyBjlciMJl1+R/CwX9oLk/EyiFXDWd95KpHdrOJT//rnUl4cUcskrd0jCCw3wpZnhIHdD9w==}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-win32-arm64-msvc@4.22.4':
-    resolution: {integrity: sha512-BjI+NVVEGAXjGWYHz/vv0pBqfGoUH0IGZ0cICTn7kB9PyjrATSkX+8WkguNjWoj2qSr1im/+tTGRaY+4/PdcQw==}
+  '@rollup/rollup-openbsd-x64@4.60.1':
+    resolution: {integrity: sha512-cl0w09WsCi17mcmWqqglez9Gk8isgeWvoUZ3WiJFYSR3zjBQc2J5/ihSjpl+VLjPqjQ/1hJRcqBfLjssREQILw==}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@rollup/rollup-openharmony-arm64@4.60.1':
+    resolution: {integrity: sha512-4Cv23ZrONRbNtbZa37mLSueXUCtN7MXccChtKpUnQNgF010rjrjfHx3QxkS2PI7LqGT5xXyYs1a7LbzAwT0iCA==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rollup/rollup-win32-arm64-msvc@4.60.1':
+    resolution: {integrity: sha512-i1okWYkA4FJICtr7KpYzFpRTHgy5jdDbZiWfvny21iIKky5YExiDXP+zbXzm3dUcFpkEeYNHgQ5fuG236JPq0g==}
     cpu: [arm64]
     os: [win32]
 
-  '@rollup/rollup-win32-ia32-msvc@4.22.4':
-    resolution: {integrity: sha512-SiWG/1TuUdPvYmzmYnmd3IEifzR61Tragkbx9D3+R8mzQqDBz8v+BvZNDlkiTtI9T15KYZhP0ehn3Dld4n9J5g==}
+  '@rollup/rollup-win32-ia32-msvc@4.60.1':
+    resolution: {integrity: sha512-u09m3CuwLzShA0EYKMNiFgcjjzwqtUMLmuCJLeZWjjOYA3IT2Di09KaxGBTP9xVztWyIWjVdsB2E9goMjZvTQg==}
     cpu: [ia32]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-msvc@4.22.4':
-    resolution: {integrity: sha512-j8pPKp53/lq9lMXN57S8cFz0MynJk8OWNuUnXct/9KCpKU7DgU3bYMJhwWmcqC0UU29p8Lr0/7KEVcaM6bf47Q==}
+  '@rollup/rollup-win32-x64-gnu@4.60.1':
+    resolution: {integrity: sha512-k+600V9Zl1CM7eZxJgMyTUzmrmhB/0XZnF4pRypKAlAgxmedUA+1v9R+XOFv56W4SlHEzfeMtzujLJD22Uz5zg==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.60.1':
+    resolution: {integrity: sha512-lWMnixq/QzxyhTV6NjQJ4SFo1J6PvOX8vUx5Wb4bBPsEb+8xZ89Bz6kOXpfXj9ak9AHTQVQzlgzBEc1SyM27xQ==}
     cpu: [x64]
     os: [win32]
 
+  '@standard-schema/spec@1.1.0':
+    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
+
   '@stylistic/eslint-plugin-js@1.8.0':
     resolution: {integrity: sha512-jdvnzt+pZPg8TfclZlTZPiUbbima93ylvQ+wNgHLNmup3obY6heQvgewSu9i2CfS61BnRByv+F9fxQLPoNeHag==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: '>=8.40.0'
 
-  '@sveltejs/eslint-config@8.1.0':
-    resolution: {integrity: sha512-cfgp4lPREYBjNd4ZzaP/jA85ufm7vfXiaV7h9vILXNogne80IbZRNhRCQ8XoOqTAOY/pChIzWTBuR8aDNMbAEA==}
+  '@sveltejs/acorn-typescript@1.0.10':
+    resolution: {integrity: sha512-4WfKk68eTih+MiJD4fSbxN7E8kVBmTMPWHUPYjvl2N0rMs53YLTT8/YjKU5Dtnz5LqDjl7LEw4U7lXR2W3J5WA==}
+    peerDependencies:
+      acorn: ^8.9.0
+
+  '@sveltejs/eslint-config@9.0.0':
+    resolution: {integrity: sha512-3u9VUYlU0Mc/8Bhc7eRAPgJuUBMaKHzoE8r50WrnVujoxBLW4zfPckR/BFGGNeVUh0F7QGAtxGkV/5pL6CE1Ng==}
     peerDependencies:
+      '@eslint/js': '>= 10'
       '@stylistic/eslint-plugin-js': '>= 1'
-      eslint: '>= 9'
+      eslint: '>= 10'
       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==}
-    engines: {node: ^18.0.0 || ^20.0.0 || >=22}
+  '@sveltejs/vite-plugin-svelte-inspector@5.0.1':
+    resolution: {integrity: sha512-ubWshlMk4bc8mkwWbg6vNvCeT7lGQojE3ijDh3QTR6Zr/R+GXxsGbyH4PExEPpiFmqPhYiVSVmHBjUcVc1JIrA==}
+    engines: {node: ^20.19 || ^22.12 || >=24}
     peerDependencies:
-      '@sveltejs/vite-plugin-svelte': ^4.0.0-next.0||^4.0.0
-      svelte: ^5.0.0-next.96 || ^5.0.0
-      vite: ^5.0.0
+      '@sveltejs/vite-plugin-svelte': ^6.0.0-next.0
+      svelte: ^5.0.0
+      vite: ^6.3.0 || ^7.0.0
 
-  '@sveltejs/vite-plugin-svelte@4.0.0-next.6':
-    resolution: {integrity: sha512-7+bEFN5F9pthG6nOEHNz9yioHxNXK6yl+0GnTy9WOfxN/SvPykkH/Hs6MqTGjo47a9G2q3QXQnzuxG5WXNX4Tg==}
-    engines: {node: ^18.0.0 || ^20.0.0 || >=22}
+  '@sveltejs/vite-plugin-svelte@6.2.0':
+    resolution: {integrity: sha512-nJsV36+o7rZUDlrnSduMNl11+RoDE1cKqOI0yUEBCcqFoAZOk47TwD3dPKS2WmRutke9StXnzsPBslY7prDM9w==}
+    engines: {node: ^20.19 || ^22.12 || >=24}
     peerDependencies:
-      svelte: ^5.0.0-next.96 || ^5.0.0
-      vite: ^5.0.0
+      svelte: ^5.0.0
+      vite: ^6.3.0 || ^7.0.0
 
   '@svitejs/changesets-changelog-github-compact@1.1.0':
     resolution: {integrity: sha512-qhUGGDHcpbY2zpjW3SwqchuW8J/5EzlPFud7xNntHKA7f3a/mx5+g+ruJKFHSAiVZYo30PALt+AyhmPUNKH/Og==}
@@ -656,14 +940,23 @@ packages:
   '@types/aria-query@5.0.4':
     resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
 
+  '@types/chai@5.2.3':
+    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
+
+  '@types/deep-eql@4.0.2':
+    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
+
   '@types/eslint@8.56.12':
     resolution: {integrity: sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==}
 
-  '@types/estree@1.0.5':
-    resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
+  '@types/esrecurse@4.3.1':
+    resolution: {integrity: sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==}
+
+  '@types/estree@1.0.8':
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
-  '@types/estree@1.0.6':
-    resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
+  '@types/estree@1.0.9':
+    resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
 
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
@@ -671,107 +964,129 @@ packages:
   '@types/node@12.20.55':
     resolution: {integrity: sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==}
 
-  '@types/node@20.12.7':
-    resolution: {integrity: sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==}
+  '@types/node@20.19.17':
+    resolution: {integrity: sha512-gfehUI8N1z92kygssiuWvLiwcbOB3IRktR6hTDgJlXMYh5OvkPSRmgfoBUmfZt+vhwJtX7v1Yw4KvvAf7c5QKQ==}
+
+  '@types/node@24.5.2':
+    resolution: {integrity: sha512-FYxk1I7wPv3K2XBaoyH2cTnocQEu8AOZ60hPbsyukMPLv5/5qr7V1i8PLHdl6Zf87I+xZXFvPCXYjiTFq+YSDQ==}
+
+  '@types/picomatch@4.0.2':
+    resolution: {integrity: sha512-qHHxQ+P9PysNEGbALT8f8YOSHW0KJu6l2xU8DYY0fu/EmGxXdVnuTLvFUvBgPJMSqXq29SYHveejeAha+4AYgA==}
 
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
-  '@types/semver@7.5.6':
-    resolution: {integrity: sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==}
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
-  '@typescript-eslint/eslint-plugin@8.2.0':
-    resolution: {integrity: sha512-02tJIs655em7fvt9gps/+4k4OsKULYGtLBPJfOsmOq1+3cdClYiF0+d6mHu6qDnTcg88wJBkcPLpQhq7FyDz0A==}
+  '@typescript-eslint/eslint-plugin@8.56.0':
+    resolution: {integrity: sha512-lRyPDLzNCuae71A3t9NEINBiTn7swyOhvUj3MyUOxb8x6g6vPEFoOU+ZRmGMusNC3X3YMhqMIX7i8ShqhT74Pw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^8.0.0 || ^8.0.0-alpha.0
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      '@typescript-eslint/parser': ^8.56.0
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/parser@8.2.0':
-    resolution: {integrity: sha512-j3Di+o0lHgPrb7FxL3fdEy6LJ/j2NE8u+AP/5cQ9SKb+JLH6V6UHDqJ+e0hXBkHP1wn1YDFjYCS9LBQsZDlDEg==}
+  '@typescript-eslint/parser@8.56.0':
+    resolution: {integrity: sha512-IgSWvLobTDOjnaxAfDTIHaECbkNlAlKv2j5SjpB2v7QHKv1FIfjwMy8FsDbVfDX/KjmCmYICcw7uGaXLhtsLNg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/project-service@8.56.0':
+    resolution: {integrity: sha512-M3rnyL1vIQOMeWxTWIW096/TtVP+8W3p/XnaFflhmcFp+U4zlxUxWj4XwNs6HbDeTtN4yun0GNTTDBw/SvufKg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/scope-manager@8.2.0':
-    resolution: {integrity: sha512-OFn80B38yD6WwpoHU2Tz/fTz7CgFqInllBoC3WP+/jLbTb4gGPTy9HBSTsbDWkMdN55XlVU0mMDYAtgvlUspGw==}
+  '@typescript-eslint/scope-manager@8.56.0':
+    resolution: {integrity: sha512-7UiO/XwMHquH+ZzfVCfUNkIXlp/yQjjnlYUyYz7pfvlK3/EyyN6BK+emDmGNyQLBtLGaYrTAI6KOw8tFucWL2w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/type-utils@8.2.0':
-    resolution: {integrity: sha512-g1CfXGFMQdT5S+0PSO0fvGXUaiSkl73U1n9LTK5aRAFnPlJ8dLKkXr4AaLFvPedW8lVDoMgLLE3JN98ZZfsj0w==}
+  '@typescript-eslint/tsconfig-utils@8.56.0':
+    resolution: {integrity: sha512-bSJoIIt4o3lKXD3xmDh9chZcjCz5Lk8xS7Rxn+6l5/pKrDpkCwtQNQQwZ2qRPk7TkUYhrq3WPIHXOXlbXP0itg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/types@8.2.0':
-    resolution: {integrity: sha512-6a9QSK396YqmiBKPkJtxsgZZZVjYQ6wQ/TlI0C65z7vInaETuC6HAHD98AGLC8DyIPqHytvNuS8bBVvNLKyqvQ==}
+  '@typescript-eslint/type-utils@8.56.0':
+    resolution: {integrity: sha512-qX2L3HWOU2nuDs6GzglBeuFXviDODreS58tLY/BALPC7iu3Fa+J7EOTwnX9PdNBxUI7Uh0ntP0YWGnxCkXzmfA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/typescript-estree@8.2.0':
-    resolution: {integrity: sha512-kiG4EDUT4dImplOsbh47B1QnNmXSoUqOjWDvCJw/o8LgfD0yr7k2uy54D5Wm0j4t71Ge1NkynGhpWdS0dEIAUA==}
+  '@typescript-eslint/types@8.56.0':
+    resolution: {integrity: sha512-DBsLPs3GsWhX5HylbP9HNG15U0bnwut55Lx12bHB9MpXxQ+R5GC8MwQe+N1UFXxAeQDvEsEDY6ZYwX03K7Z6HQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/types@8.59.4':
+    resolution: {integrity: sha512-F1o7WJcCq+bc8dwcO/YsSEOudAH8RDtaOhM6wcAQhcUsFhnWQl81JKy48q1hoxAU0qrzM89+31GYh1515Zde3Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/typescript-estree@8.56.0':
+    resolution: {integrity: sha512-ex1nTUMWrseMltXUHmR2GAQ4d+WjkZCT4f+4bVsps8QEdh0vlBsaCokKTPlnqBFqqGaxilDNJG7b8dolW2m43Q==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/utils@8.2.0':
-    resolution: {integrity: sha512-O46eaYKDlV3TvAVDNcoDzd5N550ckSe8G4phko++OCSC1dYIb9LTc3HDGYdWqWIAT5qDUKphO6sd9RrpIJJPfg==}
+  '@typescript-eslint/utils@8.56.0':
+    resolution: {integrity: sha512-RZ3Qsmi2nFGsS+n+kjLAYDPVlrzf7UhTffrDIKr+h2yzAlYP/y5ZulU0yeDEPItos2Ph46JAL5P/On3pe7kDIQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/visitor-keys@8.2.0':
-    resolution: {integrity: sha512-sbgsPMW9yLvS7IhCi8IpuK1oBmtbWUNP+hBdwl/I9nzqVsszGnNGti5r9dUtF5RLivHUFFIdRvLiTsPhzSyJ3Q==}
+  '@typescript-eslint/visitor-keys@8.56.0':
+    resolution: {integrity: sha512-q+SL+b+05Ud6LbEE35qe4A99P+htKTKVbyiNEe45eCbJFyh/HVK9QXwlrbz+Q4L8SOW4roxSVwXYj4DMBT7Ieg==}
     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@4.1.7':
+    resolution: {integrity: sha512-qsYPeXc5Q9dFLd1i8Ap+Bx8sQgcp+rFVQo4R0dDsWNBzl26ldVF1qOO+RL24K7FDrR6pA+50XedRLSoSG24bVQ==}
     peerDependencies:
-      vitest: 2.0.5
+      '@vitest/browser': 4.1.7
+      vitest: 4.1.7
+    peerDependenciesMeta:
+      '@vitest/browser':
+        optional: true
+
+  '@vitest/expect@4.1.7':
+    resolution: {integrity: sha512-1R+tw0ortHEbZDGMymm+pN7/AFQ/RkFFdtd7EN+VBpynKmLbP8A3rpEXdshBJ7+8hQ9zBJh/i1s0yKNtxAnU7w==}
 
-  '@vitest/expect@2.0.5':
-    resolution: {integrity: sha512-yHZtwuP7JZivj65Gxoi8upUN2OzHTi3zVfjwdpu2WrvCZPLwsJ2Ey5ILIPccoW23dd/zQBlJ4/dhi7DWNyXCpA==}
+  '@vitest/mocker@4.1.7':
+    resolution: {integrity: sha512-vY7nuamKgfvpA1Koa3oYIw/k7D6kZnpGyNMZW8loow2bsBYla1TFdqTaXncWdRn4pgwNs+90RhnXhJScDwQeJA==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
 
-  '@vitest/pretty-format@2.0.5':
-    resolution: {integrity: sha512-h8k+1oWHfwTkyTkb9egzwNMfJAEx4veaPSnMeKbVSjp4euqGSbQlm5+6VHwTr7u4FJslVVsUG5nopCaAYdOmSQ==}
+  '@vitest/pretty-format@4.1.7':
+    resolution: {integrity: sha512-umgCarTOYQWIaDMvGDRZij+6b9oVeLIyJzfN+AS88e0ZOU3QTgNNSTtjQOpcvWr3np1N0j4WgZj+sb3oYBDscw==}
 
-  '@vitest/runner@2.0.5':
-    resolution: {integrity: sha512-TfRfZa6Bkk9ky4tW0z20WKXFEwwvWhRY+84CnSEtq4+3ZvDlJyY32oNTJtM7AW9ihW90tX/1Q78cb6FjoAs+ig==}
+  '@vitest/runner@4.1.7':
+    resolution: {integrity: sha512-BapjmAQ2aI78WdMEfeUWivnfVzB+VPGwWRQcJE0OUq7qEeEcBsCSf+0T5iREBNE5nBb4wA5Ya0W6IA+sghdEFw==}
 
-  '@vitest/snapshot@2.0.5':
-    resolution: {integrity: sha512-SgCPUeDFLaM0mIUHfaArq8fD2WbaXG/zVXjRupthYfYGzc8ztbFbu6dUNOblBG7XLMR1kEhS/DNnfCZ2IhdDew==}
+  '@vitest/snapshot@4.1.7':
+    resolution: {integrity: sha512-ZacLzja+TmJeZ1h14xW2FB/WpeimUD3haBXQPyJqxvo8jQTmfeA8zv58mtjN2C7EHXZDYVcVYdYmAxjkWVvKCw==}
 
-  '@vitest/spy@2.0.5':
-    resolution: {integrity: sha512-c/jdthAhvJdpfVuaexSrnawxZz6pywlTPe84LUB2m/4t3rl2fTo9NFGBG4oWgaD+FTgDDV8hJ/nibT7IfH3JfA==}
+  '@vitest/spy@4.1.7':
+    resolution: {integrity: sha512-kbkI5LMWakyuTIvs6fUJ5qdIVb1XVKsYJAT4OJ938cHMROYMSfmoQdZy0aaAnjbbc8F61vkoTqz/Az+/HiIu5Q==}
 
-  '@vitest/utils@2.0.5':
-    resolution: {integrity: sha512-d8HKbqIcya+GR67mkZbrzhS5kKhtp8dQLcmRZLGTscGVg7yImT82cIrhtn2L8+VujWcy6KZweApgNmPsTAO/UQ==}
+  '@vitest/utils@4.1.7':
+    resolution: {integrity: sha512-T532WBu791cBxJlCl6SO+J14l81DQx6uQHm1bQbmCDY7nqlEIgkza/UFnSBNaUtSf41unldDFjdOBYEQC4b5Hw==}
 
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  acorn-typescript@1.4.13:
-    resolution: {integrity: sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==}
-    peerDependencies:
-      acorn: '>=8.9.0'
-
-  acorn@8.12.1:
-    resolution: {integrity: sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==}
+  acorn@8.16.0:
+    resolution: {integrity: sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==}
     engines: {node: '>=0.4.0'}
     hasBin: true
 
@@ -790,17 +1105,9 @@ packages:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
 
-  ansi-regex@6.0.1:
-    resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
-    engines: {node: '>=12'}
-
-  ansi-styles@4.3.0:
-    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
-    engines: {node: '>=8'}
-
-  ansi-styles@6.2.1:
-    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
-    engines: {node: '>=12'}
+  ansis@4.1.0:
+    resolution: {integrity: sha512-BGcItUBWSMRgOCe+SVZJ+S7yTRG0eGt9cXAHev72yuGcY23hnLA7Bky5L/xLyPINoSN95geovfBkqoTlNZYa7w==}
+    engines: {node: '>=14'}
 
   anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
@@ -824,6 +1131,9 @@ packages:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
 
+  ast-v8-to-istanbul@1.0.0:
+    resolution: {integrity: sha512-1fSfIwuDICFA4LKkCzRPO7F0hzFf0B7+Xqrl27ynQaa+Rh0e1Es0v6kWHPott3lU10AyAr7oKHa65OppjLn3Rg==}
+
   asynckit@0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
 
@@ -834,22 +1144,27 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
+  baseline-browser-mapping@2.10.32:
+    resolution: {integrity: sha512-wbPvpyjJPC0zdfdKXxqEL3Ea+bOMD/87X4lftiJkkaBiuG6ALQy1SLmEd7BSmVCuwCQsBrCamgBoLyfFDD1EPg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
   better-path-resolve@1.0.0:
     resolution: {integrity: sha512-pbnl5XzGBdrFU/wT4jqmJVPn2B6UHPBOhzMQkY/SPUPB6QtUXtmBHBIwCbXJol93mOpGMnQyP/+BB19q04xj7g==}
     engines: {node: '>=4'}
 
-  binary-extensions@2.2.0:
-    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
+  binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
 
-  brace-expansion@1.1.11:
-    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
+  birpc@2.5.0:
+    resolution: {integrity: sha512-VSWO/W6nNQdyP520F1mhf+Lc2f8pjGQOtoHHm7Ze8Go1kX7akpVIrtTa0fn+HB0QJEDVacl6aO08YE0PgXfdnQ==}
 
-  brace-expansion@2.0.1:
-    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+  brace-expansion@2.0.2:
+    resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}
 
-  braces@3.0.2:
-    resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
   buffer-from@1.1.2:
@@ -859,43 +1174,24 @@ packages:
     resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
     engines: {node: '>=18'}
 
-  cac@6.7.14:
-    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
-    engines: {node: '>=8'}
-
-  callsites@3.1.0:
-    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
-    engines: {node: '>=6'}
-
-  chai@5.1.1:
-    resolution: {integrity: sha512-pT1ZgP8rPNqUgieVaEY+ryQr6Q4HXNg8Ei9UnLUrjN4IA7dvQC5JB+/kxVcPNDHyBcc/26CXPkbNzq3qwrOEKA==}
-    engines: {node: '>=12'}
-
-  chalk@4.1.2:
-    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
-    engines: {node: '>=10'}
-
-  chardet@0.7.0:
-    resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
+  chai@6.2.2:
+    resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
+    engines: {node: '>=18'}
 
-  check-error@2.1.1:
-    resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
-    engines: {node: '>= 16'}
+  chardet@2.1.0:
+    resolution: {integrity: sha512-bNFETTG/pM5ryzQ9Ad0lJOTa6HWD/YsScAR3EnCPZRPlQh77JocYktSHOUHelyhm8IARL+o4c4F1bP5KVOjiRA==}
 
-  chokidar@3.5.3:
-    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
+  chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
 
   ci-info@3.9.0:
     resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
     engines: {node: '>=8'}
 
-  color-convert@2.0.1:
-    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
-    engines: {node: '>=7.0.0'}
-
-  color-name@1.1.4:
-    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
 
   combined-stream@1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
@@ -907,14 +1203,11 @@ packages:
   commondir@1.0.1:
     resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
 
-  concat-map@0.0.1:
-    resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
-
-  cross-spawn@5.1.0:
-    resolution: {integrity: sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==}
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
-  cross-spawn@7.0.3:
-    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
   cssesc@3.0.0:
@@ -933,8 +1226,8 @@ packages:
   dataloader@1.4.0:
     resolution: {integrity: sha512-68s5jYdlvasItOJnCuI2Q9s4q98g0pCyL3HrcKJu8KNugUl8ahgmZYg38ysLTgQjjXX3H8CJLkAvWrclWfcalw==}
 
-  debug@4.3.6:
-    resolution: {integrity: sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==}
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
     engines: {node: '>=6.0'}
     peerDependencies:
       supports-color: '*'
@@ -945,10 +1238,6 @@ packages:
   decimal.js@10.4.3:
     resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==}
 
-  deep-eql@5.0.2:
-    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
-    engines: {node: '>=6'}
-
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
@@ -981,6 +1270,9 @@ packages:
     engines: {node: '>=0.10'}
     hasBin: true
 
+  devalue@5.8.1:
+    resolution: {integrity: sha512-4CXDYRBGqN+57wVJkuXBYmpAVUSg3L6JAQa/DFqm238G73E1wuyc/JhGQJzN7vUf/CMphYau2zXbfWzDR5aTEw==}
+
   dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -989,23 +1281,14 @@ packages:
     resolution: {integrity: sha512-HTlk5nmhkm8F6JcdXvHIzaorzCoziNQT9mGxLPVXW8wJF1TiGSL60ZGB4gHWabHOaMmWmhvk2/lPHfnBiT78AQ==}
     engines: {node: '>=12'}
 
-  dts-buddy@0.5.3:
-    resolution: {integrity: sha512-wS2DC5T+F6R+sG/YNlJ21yn8CKVhy1QQlpKA34G+uO4PUXkwz+JQWbGcIryUByxoJgbH98O0dTGzE2RqsRR3KA==}
+  dts-buddy@0.5.5:
+    resolution: {integrity: sha512-Mu5PJuP7C+EqZIwDtW/bG1tVli1UFhRIyW/dERBVBYk28OviTkribu9S2LpDQ0HF2MbkqnjQIkbbE6HnepdNTQ==}
     hasBin: true
     peerDependencies:
-      typescript: '>=5.0.4 <5.6'
-
-  eastasianwidth@0.2.0:
-    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
-
-  emoji-regex@8.0.0:
-    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
-
-  emoji-regex@9.2.2:
-    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+      typescript: '>=5.0.4 <5.8'
 
-  enhanced-resolve@5.17.1:
-    resolution: {integrity: sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==}
+  enhanced-resolve@5.22.1:
+    resolution: {integrity: sha512-6QEuw3zoX1SJQc7b87aBXke/no+mG2bTBgw29gWMQonLmpEkWoCAVkl+M49e48AZlWzxiDzDZzYdp6kobcyLww==}
     engines: {node: '>=10.13.0'}
 
   enquirer@2.4.1:
@@ -1016,12 +1299,20 @@ packages:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
 
-  error-stack-parser-es@0.1.1:
-    resolution: {integrity: sha512-g/9rfnvnagiNf+DRMHEVGuGuIBlCIMDFoTA616HaP2l9PlCjGjVhD98PNbVSJvmK4TttqT5mV5tInMhoFgi+aA==}
+  error-stack-parser-es@1.0.5:
+    resolution: {integrity: sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA==}
 
-  esbuild@0.21.5:
-    resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
-    engines: {node: '>=12'}
+  es-module-lexer@2.1.0:
+    resolution: {integrity: sha512-n27zTYMjYu1aj4MjCWzSP7G9r75utsaoc8m61weK+W8JMBGGQybd43GstCXZ3WNmSFtGT9wi59qQTW6mhTR5LQ==}
+
+  esbuild@0.25.11:
+    resolution: {integrity: sha512-KohQwyzrKTQmhXDW1PjCv3Tyspn9n5GcY2RTDqeORIdIJY8yKIF7sTSopFmn/wpMPW4rdPXI0UE5LJLuq3bx0Q==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  esbuild@0.27.7:
+    resolution: {integrity: sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==}
+    engines: {node: '>=18'}
     hasBin: true
 
   escape-string-regexp@4.0.0:
@@ -1046,44 +1337,50 @@ packages:
     peerDependencies:
       eslint: '>=8'
 
-  eslint-plugin-lube@0.4.3:
-    resolution: {integrity: sha512-BVO83tRo090d6a04cl45Gb761SD79cOT6wKxxWrpsH7Rv8I0SJvc79ijE11vvyxxCMiGUVq/w4NqqPJAHyYfSQ==}
+  eslint-plugin-lube@0.5.1:
+    resolution: {integrity: sha512-z01UM0LAI/Z+b9qGoVqN3RNycXbYXi6i4/QT0He58LdBVmmOd+z4tJQmvOqEh3A4TVtSQcGYq4/4wX/OebGISQ==}
+    peerDependencies:
+      eslint: '>=9.0.0'
 
-  eslint-plugin-n@17.9.0:
-    resolution: {integrity: sha512-CPSaXDXdrT4nsrOrO4mT4VB6FMUkoySRkHWuuJJHVqsIEjIeZgMY1H7AzSwPbDScikBmLN82KeM1u7ixV7PzGg==}
+  eslint-plugin-n@17.24.0:
+    resolution: {integrity: sha512-/gC7/KAYmfNnPNOb3eu8vw+TdVnV0zhdQwexsw6FLXbhzroVj20vRn2qL8lDWDGnAQ2J8DhdfvXxX9EoxvERvw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     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.15.0:
+    resolution: {integrity: sha512-QKB7zqfuB8aChOfBTComgDptMf2yxiJx7FE04nneCmtQzgTHvY8UJkuh8J2Rz7KB9FFV9aTHX6r7rdYGvG8T9Q==}
+    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 || ^10.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==}
+  eslint-scope@8.4.0:
+    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  eslint-scope@9.1.0:
+    resolution: {integrity: sha512-CkWE42hOJsNj9FJRaoMX9waUFYhqY4jmyLFdAdzZr6VaCg3ynLYx4WnOdkaIifGfH4gsUcBTn4OZbHXkpLD0FQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
   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}
 
-  eslint-visitor-keys@4.0.0:
-    resolution: {integrity: sha512-OtIRv/2GyiF6o/d8K7MYKKbXrOUBIK6SfkIRM4Z0dY3w+LiQ0vy3F57m0Z71bjbyeiWFiHJ8brqnmE6H6/jEuw==}
+  eslint-visitor-keys@4.2.1:
+    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  eslint@9.9.1:
-    resolution: {integrity: sha512-dHvhrbfr4xFQ9/dq+jcVneZMyRYLjggWjk6RVsIiHsP8Rz6yZ8LvZ//iU4TrZF+SXWG+JkNF2OyiZRvzgRDqMg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  eslint-visitor-keys@5.0.0:
+    resolution: {integrity: sha512-A0XeIi7CXU7nPlfHS9loMYEKxUaONu/hTEzHTGba9Huu94Cq1hPivf+DE5erJozZOky0LfvXAyrV/tcswpLI0Q==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  eslint@10.0.0:
+    resolution: {integrity: sha512-O0piBKY36YSJhlFSG8p9VUdPV/SxxS4FYDWVpr/9GJuMaepzwlf4J8I4ov1b+ySQfDTPhc3DtLaxcT1fN0yqCg==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
     hasBin: true
     peerDependencies:
       jiti: '*'
@@ -1098,6 +1395,10 @@ packages:
     resolution: {integrity: sha512-M1M6CpiE6ffoigIOWYO9UDP8TMUw9kqb21tf+08IgDYjCsOvCuDt4jQcZmoYxx+w7zlKw9/N0KXfto+I8/FrXA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  espree@11.1.0:
+    resolution: {integrity: sha512-WFWYhO1fV4iYkqOOvq8FbqIhr2pYfoDY0kCotMkDeNtGpiGGkZ1iov2u8ydjtgM8yF8rzK7oaTbw2NAzbAbehw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
   espree@9.6.1:
     resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1107,12 +1408,17 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
-  esquery@1.5.0:
-    resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
+  esquery@1.7.0:
+    resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==}
     engines: {node: '>=0.10'}
 
-  esrap@1.2.3:
-    resolution: {integrity: sha512-ZlQmCCK+n7SGoqo7DnfKaP1sJZa49P01/dXzmjCASSo04p72w8EksT2NMK8CEX8DhKsfJXANioIw8VyHNsBfvQ==}
+  esrap@2.2.9:
+    resolution: {integrity: sha512-4KijP+NxCWthMCUC3qHbE6n4vCjqgJS1uAYKhuT/GWfFTf1Qyive2TgOjep+gzbSzRfnNyaN/UU9YmdOt8Eg0A==}
+    peerDependencies:
+      '@typescript-eslint/types': ^8.2.0
+    peerDependenciesMeta:
+      '@typescript-eslint/types':
+        optional: true
 
   esrecurse@4.3.0:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
@@ -1132,22 +1438,18 @@ packages:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
 
-  execa@8.0.1:
-    resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
-    engines: {node: '>=16.17'}
+  expect-type@1.3.0:
+    resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
+    engines: {node: '>=12.0.0'}
 
   extendable-error@0.1.7:
     resolution: {integrity: sha512-UOiS2in6/Q0FK0R0q6UY9vYpQ21mr/Qn1KOnte7vsACuNJf514WvCCUHSRCPcgjPT2bAhNIJdlE6bVap1GKmeg==}
 
-  external-editor@3.1.0:
-    resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==}
-    engines: {node: '>=4'}
-
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
-  fast-glob@3.3.2:
-    resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
     engines: {node: '>=8.6.0'}
 
   fast-json-stable-stringify@2.1.0:
@@ -1159,8 +1461,9 @@ packages:
   fastq@1.16.0:
     resolution: {integrity: sha512-ifCoaXsDrsdkWTtiNJX5uzHDsrck5TzfKKDcuFFTIrrc/BS076qgEIfoIy1VeZqViznfKiysPYTh/QeHtnIsYA==}
 
-  fdir@6.3.0:
-    resolution: {integrity: sha512-QOnuT+BOtivR77wYvCWHfGt9s4Pz1VIMbD463vegT5MLqNXy8rYFT/lPVEqf/bhYeT6qmqrNHhsX+rWwe3rOCQ==}
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
     peerDependencies:
       picomatch: ^3 || ^4
     peerDependenciesMeta:
@@ -1171,8 +1474,8 @@ packages:
     resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
     engines: {node: '>=16.0.0'}
 
-  fill-range@7.0.1:
-    resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
   find-up@4.1.0:
@@ -1190,18 +1493,10 @@ packages:
   flatted@3.2.9:
     resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==}
 
-  foreground-child@3.3.0:
-    resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==}
-    engines: {node: '>=14'}
-
   form-data@4.0.0:
     resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
     engines: {node: '>= 6'}
 
-  fs-extra@11.2.0:
-    resolution: {integrity: sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==}
-    engines: {node: '>=14.14'}
-
   fs-extra@7.0.1:
     resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==}
     engines: {node: '>=6 <7 || >=8'}
@@ -1223,15 +1518,8 @@ packages:
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
-  get-func-name@2.0.2:
-    resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==}
-
-  get-stream@8.0.1:
-    resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
-    engines: {node: '>=16'}
-
-  get-tsconfig@4.7.6:
-    resolution: {integrity: sha512-ZAqrLlu18NbDdRaHq+AKXzAmqIUPswPWKUchfytdAjiRFnCe5ojG2bstg6mRiZabkKfCoL/e98pbBELIV/YCeA==}
+  get-tsconfig@4.14.0:
+    resolution: {integrity: sha512-yTb+8DXzDREzgvYmh6s9vHsSVCHeC0G3PI5bEXNBHtmshPnO+S5O7qgLEOn0I5QvMy6kpZN8K1NKGyilLb93wA==}
 
   glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
@@ -1241,20 +1529,17 @@ packages:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
     engines: {node: '>=10.13.0'}
 
-  glob@10.4.5:
-    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
-    hasBin: true
-
-  globals@14.0.0:
-    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+  globals@15.15.0:
+    resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
     engines: {node: '>=18'}
 
-  globals@15.9.0:
-    resolution: {integrity: sha512-SmSKyLLKFbSr6rptvP8izbyxJL4ILwqO9Jg23UA0sDlGlu58V59D1//I3vlc0KJphVdUR7vMjHIplYnzBxorQA==}
+  globals@16.3.0:
+    resolution: {integrity: sha512-bqWEnJ1Nt3neqx2q5SFfGS8r/ahumIakg3HcwtNlrVlwXIeNumWn/c7Pn/wKzGhf6SaW6H6uWXLqC30STCMchQ==}
     engines: {node: '>=18'}
 
-  globalyzer@0.1.0:
-    resolution: {integrity: sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==}
+  globals@17.3.0:
+    resolution: {integrity: sha512-yMqGUQVVCkD4tqjOJf3TnrvaaHDMYp4VlUSObbkIiuCPe/ofdMBFIAcBbCSRFWOnos6qRiTVStDwqPLUclaxIw==}
+    engines: {node: '>=18'}
 
   globby@11.1.0:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
@@ -1266,9 +1551,6 @@ packages:
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
-  graphemer@1.4.0:
-    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
-
   has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
@@ -1292,31 +1574,28 @@ packages:
     resolution: {integrity: sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==}
     engines: {node: '>= 14'}
 
-  human-id@1.0.2:
-    resolution: {integrity: sha512-UNopramDEhHJD+VR+ehk8rOslwSfByxPIZyJRfV739NDhN5LF1fa1MqnzKm2lGTQRjNrjK19Q5fhkgIfjlVUKw==}
-
-  human-signals@5.0.0:
-    resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
-    engines: {node: '>=16.17.0'}
-
-  iconv-lite@0.4.24:
-    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
-    engines: {node: '>=0.10.0'}
+  human-id@4.1.1:
+    resolution: {integrity: sha512-3gKm/gCSUipeLsRYZbbdA1BD83lBoWUkZ7G9VFrhWPAU76KwYo5KR8V28bpoPm/ygy0x5/GCbpRQdY7VLYCoIg==}
+    hasBin: true
 
   iconv-lite@0.6.3:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
 
+  iconv-lite@0.7.0:
+    resolution: {integrity: sha512-cf6L2Ds3h57VVmkZe+Pn+5APsT7FpqJtEhhieDCvrE2MK5Qk9MyffgQyuxQTm6BChfeZNtcOLHp9IcWRVcIcBQ==}
+    engines: {node: '>=0.10.0'}
+
   ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
 
-  immutable@4.3.4:
-    resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==}
+  ignore@7.0.5:
+    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
+    engines: {node: '>= 4'}
 
-  import-fresh@3.3.0:
-    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
-    engines: {node: '>=6'}
+  immutable@4.3.8:
+    resolution: {integrity: sha512-d/Ld9aLbKpNwyl0KiM2CT1WYvkitQ1TSvmRtkcV8FKStiDoA7Slzgjmb/1G2yhKM1p0XeNOieaTbFZmU1d3Xuw==}
 
   imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
@@ -1338,10 +1617,6 @@ packages:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
 
-  is-fullwidth-code-point@3.0.0:
-    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
-    engines: {node: '>=8'}
-
   is-glob@4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
@@ -1358,10 +1633,6 @@ packages:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
-  is-path-inside@3.0.3:
-    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
-    engines: {node: '>=8'}
-
   is-potential-custom-element-name@1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
 
@@ -1371,10 +1642,6 @@ packages:
   is-reference@3.0.3:
     resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==}
 
-  is-stream@3.0.0:
-    resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
   is-subdir@1.2.0:
     resolution: {integrity: sha512-2AT6j+gXe/1ueqbW6fLZJiIw3F8iXGJtt0yDrZaBhAZEG1raiTxKWU+IPqMCzQAXOUCKdA4UDMgacKH25XG2Cw==}
     engines: {node: '>=4'}
@@ -1398,23 +1665,19 @@ packages:
     resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
     engines: {node: '>=10'}
 
-  istanbul-lib-source-maps@5.0.6:
-    resolution: {integrity: sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A==}
-    engines: {node: '>=10'}
-
-  istanbul-reports@3.1.7:
-    resolution: {integrity: sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==}
+  istanbul-reports@3.2.0:
+    resolution: {integrity: sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==}
     engines: {node: '>=8'}
 
-  jackspeak@3.4.3:
-    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+  js-tokens@10.0.0:
+    resolution: {integrity: sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==}
 
-  js-yaml@3.14.1:
-    resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
+  js-yaml@3.14.2:
+    resolution: {integrity: sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==}
     hasBin: true
 
-  js-yaml@4.1.0:
-    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+  js-yaml@4.1.1:
+    resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
     hasBin: true
 
   jsdom@25.0.1:
@@ -1438,9 +1701,6 @@ packages:
   jsonfile@4.0.0:
     resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
 
-  jsonfile@6.1.0:
-    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
-
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
@@ -1448,8 +1708,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==}
@@ -1528,40 +1788,28 @@ packages:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
 
-  lodash.merge@4.6.2:
-    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
-
   lodash.startcase@4.4.0:
     resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==}
 
-  loupe@3.1.1:
-    resolution: {integrity: sha512-edNu/8D5MKVfGVFRhFf8aAxiTM6Wumfz5XsaatSxlD3w4R1d/WEKUTydCdPGbl9K7QG/Ca3GnDV2sIKIpXRQcw==}
-
-  lru-cache@10.4.3:
-    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+  magic-string@0.30.17:
+    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
-  lru-cache@4.1.5:
-    resolution: {integrity: sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==}
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
-  magic-string@0.30.11:
-    resolution: {integrity: sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==}
-
-  magicast@0.3.4:
-    resolution: {integrity: sha512-TyDF/Pn36bBji9rWKHlZe+PZb6Mx5V8IHCSxk7X4aljM4e/vyDvZZYwHewdVaqiA0nb3ghfHU/6AUpDxWoER2Q==}
+  magicast@0.5.3:
+    resolution: {integrity: sha512-pVKE4UdSQ7DvHzivsCIFx2BJn1mHG6KsyrFcaxFx6tONdneEuThrDx0Cj3AMg58KyN4pzYT+LHOotxDQDjNvkw==}
 
   make-dir@4.0.0:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
     engines: {node: '>=10'}
 
-  merge-stream@2.0.0:
-    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
-
   merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
-  micromatch@4.0.5:
-    resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
   mime-db@1.52.0:
@@ -1572,21 +1820,14 @@ packages:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
 
-  mimic-fn@4.0.0:
-    resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
-    engines: {node: '>=12'}
-
-  minimatch@3.1.2:
-    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+  minimatch@10.1.2:
+    resolution: {integrity: sha512-fu656aJ0n2kcXwsnwnv9g24tkU5uSmOlTjd6WyyaKm2Z+h1qmY6bAjrcaIxF/BslFqbZ8UBtbJi7KgQOZD2PTw==}
+    engines: {node: 20 || >=22}
 
   minimatch@9.0.5:
     resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
 
-  minipass@7.1.2:
-    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
-    engines: {node: '>=16 || 14 >=14.17'}
-
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -1595,11 +1836,11 @@ packages:
     resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==}
     engines: {node: '>=10'}
 
-  ms@2.1.2:
-    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
-  nanoid@3.3.7:
-    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
@@ -1619,29 +1860,23 @@ packages:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
 
-  npm-run-path@5.2.0:
-    resolution: {integrity: sha512-W4/tgAXFqFA0iL7fk0+uQ3g7wkL8xJmx3XdK0VGb4cHW//eZTtKGvFBBoRKVTpY7n6ze4NL9ly7rgXcHufqXKg==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
   nwsapi@2.2.12:
     resolution: {integrity: sha512-qXDmcVlZV4XRtKFzddidpfVP4oMSGhga+xdMc25mv8kaLUHtgzCDhUxkrN8exkGdTlLNaXj7CV3GtON7zuGZ+w==}
 
-  onetime@6.0.0:
-    resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
-    engines: {node: '>=12'}
+  obug@2.1.1:
+    resolution: {integrity: sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==}
 
-  open@10.1.0:
-    resolution: {integrity: sha512-mnkeQ1qP5Ue2wd+aivTD3NHd/lZ96Lu0jgf0pwktLPtx6cTZiH7tyeGRRHs0zX0rbrahXPnXlUnbeXyaBBuIaw==}
+  ohash@2.0.11:
+    resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==}
+
+  open@10.2.0:
+    resolution: {integrity: sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==}
     engines: {node: '>=18'}
 
   optionator@0.9.3:
     resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
     engines: {node: '>= 0.8.0'}
 
-  os-tmpdir@1.0.2:
-    resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
-    engines: {node: '>=0.10.0'}
-
   outdent@0.5.0:
     resolution: {integrity: sha512-/jHxFIzoMXdqPzTaCpFzAAWhpkSjZPF4Vsn6jAfNpmbH/ymsmd7Qc6VE9BGn0L6YMj6uwpQLxCECpus4ukKS9Q==}
 
@@ -1673,15 +1908,8 @@ packages:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
 
-  package-json-from-dist@1.0.0:
-    resolution: {integrity: sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==}
-
-  package-manager-detector@0.2.0:
-    resolution: {integrity: sha512-E385OSk9qDcXhcM9LNSe4sdhx8a9mAPrZ4sMLW+tmxl5ZuGtPUcdFu+MPP2jbgiWAZ6Pfe5soGFMd+0Db5Vrog==}
-
-  parent-module@1.0.1:
-    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
-    engines: {node: '>=6'}
+  package-manager-detector@0.2.11:
+    resolution: {integrity: sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ==}
 
   parse5@7.1.2:
     resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
@@ -1694,53 +1922,41 @@ packages:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
 
-  path-key@4.0.0:
-    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
-    engines: {node: '>=12'}
-
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
-  path-scurry@1.11.1:
-    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
-    engines: {node: '>=16 || 14 >=14.18'}
-
   path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
 
-  pathe@1.1.2:
-    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
-
-  pathval@2.0.0:
-    resolution: {integrity: sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==}
-    engines: {node: '>= 14.16'}
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
-  perfect-debounce@1.0.0:
-    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
+  perfect-debounce@2.0.0:
+    resolution: {integrity: sha512-fkEH/OBiKrqqI/yIgjR92lMfs2K8105zt/VT6+7eTjNwisrsh47CeIED9z58zI7DfKdH3uHAn25ziRZn3kgAow==}
 
-  picocolors@1.1.0:
-    resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==}
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
-  picomatch@2.3.1:
-    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+  picomatch@2.3.2:
+    resolution: {integrity: sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==}
     engines: {node: '>=8.6'}
 
-  picomatch@4.0.2:
-    resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
+  picomatch@4.0.4:
+    resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
     engines: {node: '>=12'}
 
   pify@4.0.1:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
     engines: {node: '>=6'}
 
-  playwright-core@1.46.1:
-    resolution: {integrity: sha512-h9LqIQaAv+CYvWzsZ+h3RsrqCStkBHlgo6/TJlFst3cOTlLghBQlJwPOZKQJTKNaD3QIB7aAVQ+gfWbN3NXB7A==}
+  playwright-core@1.60.0:
+    resolution: {integrity: sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA==}
     engines: {node: '>=18'}
     hasBin: true
 
-  playwright@1.46.1:
-    resolution: {integrity: sha512-oPcr1yqoXLCkgKtD5eNUPLiN40rYEM39odNpIb6VE6S7/15gJmA1NzVv6zJYusV0e7tzvkU/utBFNa/Kpxmwng==}
+  playwright@1.60.0:
+    resolution: {integrity: sha512-hheHdokM8cdqCb0lcE3s+zT4t4W+vvjpGxsZlDnikarzx8tSzMebh3UiFtgqwFwnTnjYQcsyMF8ei2mCO/tpeA==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -1760,11 +1976,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==}
@@ -1772,20 +1988,20 @@ 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.4.47:
-    resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==}
+  postcss@8.5.9:
+    resolution: {integrity: sha512-7a70Nsot+EMX9fFU3064K/kdHWZqGVY+BADLyXc8Dfv+mTLLVl6JzJpPaCZ2kQL9gIJvKXSLMHhqdRRjwQeFtw==}
     engines: {node: ^10 || ^12 || >=14}
 
   prelude-ls@1.2.1:
     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
@@ -1800,13 +2016,13 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
-  pseudomap@1.0.2:
-    resolution: {integrity: sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==}
-
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
+  quansync@0.2.11:
+    resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
+
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
@@ -1821,17 +2037,10 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
-  regenerator-runtime@0.14.1:
-    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
-
   regexparam@3.0.0:
     resolution: {integrity: sha512-RSYAtP31mvYLkAHrOlh25pCNQ5hWnT106VukGaaFfuJrZFkGRX5GhUAdPqpSDXxOhA2c4akmRuplv1mRqnBn6Q==}
     engines: {node: '>=8'}
 
-  resolve-from@4.0.0:
-    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
-    engines: {node: '>=4'}
-
   resolve-from@5.0.0:
     resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
     engines: {node: '>=8'}
@@ -1847,8 +2056,8 @@ packages:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
-  rollup@4.22.4:
-    resolution: {integrity: sha512-vD8HJ5raRcWOyymsR6Z3o6+RzfEPCnVLMFJ6vRslO1jt4LO6dUo5Qnpg7y4RkZFM2DMe3WUirkI5c16onjrc6A==}
+  rollup@4.60.1:
+    resolution: {integrity: sha512-VmtB2rFU/GroZ4oL8+ZqXgSA38O6GR8KSIvWmEFv63pQ0G6KaBH9s07PO8XTXP4vI+3UJUEypOfjkGfmSBBR0w==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
@@ -1881,26 +2090,23 @@ packages:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
 
-  semver@7.6.3:
-    resolution: {integrity: sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==}
+  semver@7.7.4:
+    resolution: {integrity: sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  semver@7.8.1:
+    resolution: {integrity: sha512-rkVq3IXh+4FDGch+KwzX3aV9W3kO54GyEgpvBzSyctDA6Xtd7RJQV1xmXbeQp5v7+VzLOfVqiutSE6GICgPFvg==}
     engines: {node: '>=10'}
     hasBin: true
 
   serialize-javascript@6.0.2:
     resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
 
-  shebang-command@1.2.0:
-    resolution: {integrity: sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==}
-    engines: {node: '>=0.10.0'}
-
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
 
-  shebang-regex@1.0.0:
-    resolution: {integrity: sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==}
-    engines: {node: '>=0.10.0'}
-
   shebang-regex@3.0.0:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
@@ -1908,16 +2114,13 @@ packages:
   siginfo@2.0.0:
     resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
 
-  signal-exit@3.0.7:
-    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
-
   signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
-  sirv@2.0.4:
-    resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
-    engines: {node: '>= 10'}
+  sirv@3.0.2:
+    resolution: {integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==}
+    engines: {node: '>=18'}
 
   slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
@@ -1941,8 +2144,8 @@ packages:
     resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
     engines: {node: '>= 8'}
 
-  spawndamnit@2.0.0:
-    resolution: {integrity: sha512-j4JKEcncSjFlqIwU5L/rp2N5SIPsdxaRsIv678+TZxZ0SRDJTm8JrxJMjE/XuiEZNEir3S8l0Fa3Ke339WI4qA==}
+  spawndamnit@3.0.1:
+    resolution: {integrity: sha512-MmnduQUuHCoFckZoWnXsTg7JaiLBJrKFj9UI2MbRPGaJeVpsLcVBu6P/IGZovziM/YBsellCmsprgNA+w0CzVg==}
 
   sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
@@ -1950,37 +2153,17 @@ packages:
   stackback@0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
 
-  std-env@3.7.0:
-    resolution: {integrity: sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==}
-
-  string-width@4.2.3:
-    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
-    engines: {node: '>=8'}
-
-  string-width@5.1.2:
-    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
-    engines: {node: '>=12'}
+  std-env@4.1.0:
+    resolution: {integrity: sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==}
 
   strip-ansi@6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
 
-  strip-ansi@7.1.0:
-    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
-    engines: {node: '>=12'}
-
   strip-bom@3.0.0:
     resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
     engines: {node: '>=4'}
 
-  strip-final-newline@3.0.0:
-    resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
-    engines: {node: '>=12'}
-
-  strip-json-comments@3.1.1:
-    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
-    engines: {node: '>=8'}
-
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -1989,11 +2172,11 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  svelte-eslint-parser@0.41.0:
-    resolution: {integrity: sha512-L6f4hOL+AbgfBIB52Z310pg1d2QjRqm7wy3kI1W6hhdhX5bvu7+f0R6w4ykp5HoDdzq+vGhIJmsisaiJDGmVfA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  svelte-eslint-parser@1.4.1:
+    resolution: {integrity: sha512-1eqkfQ93goAhjAXxZiu1SaKI9+0/sxp4JIWQwUpsz7ybehRE5L8dNuz7Iry7K22R47p5/+s9EM+38nHV2OlgXA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0, pnpm: 10.24.0}
     peerDependencies:
-      svelte: ^3.37.0 || ^4.0.0 || ^5.0.0-next.191
+      svelte: ^3.37.0 || ^4.0.0 || ^5.0.0
     peerDependenciesMeta:
       svelte:
         optional: true
@@ -2001,8 +2184,8 @@ packages:
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
-  tapable@2.2.1:
-    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
+  tapable@2.3.3:
+    resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
     engines: {node: '>=6'}
 
   term-size@2.2.1:
@@ -2014,29 +2197,19 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  test-exclude@7.0.1:
-    resolution: {integrity: sha512-pFYqmTw68LXVjeWJMST4+borgQP2AyMNbg1BpZh9LbyhUeNkeaPF9gzfPGUAnSMV3qPYdWUwDIjjCLiSDOl7vg==}
-    engines: {node: '>=18'}
-
-  text-table@0.2.0:
-    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
-
-  tiny-glob@0.2.9:
-    resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==}
-
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
-  tinypool@1.0.1:
-    resolution: {integrity: sha512-URZYihUbRPcGv95En+sz6MfghfIc2OJ1sv/RmhWZLouPY0/8Vo80viwPvg3dlaS9fuq7fQMEfgRRK7BBZThBEA==}
-    engines: {node: ^18.0.0 || >=20.0.0}
+  tinyexec@1.1.2:
+    resolution: {integrity: sha512-dAqSqE/RabpBKI8+h26GfLq6Vb3JVXs30XYQjdMjaj/c2tS8IYYMbIzP599KtRj7c57/wYApb3QjgRgXmrCukA==}
+    engines: {node: '>=18'}
 
-  tinyrainbow@1.2.0:
-    resolution: {integrity: sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==}
-    engines: {node: '>=14.0.0'}
+  tinyglobby@0.2.15:
+    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
+    engines: {node: '>=12.0.0'}
 
-  tinyspy@3.0.0:
-    resolution: {integrity: sha512-q5nmENpTHgiPVd1cJDDc9cVoYN5x4vCvwT3FMilvKPKneCBZAxn2YWQjDF0UMcE9k0Cay1gBiDfTMU0g+mPMQA==}
+  tinyrainbow@3.1.0:
+    resolution: {integrity: sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==}
     engines: {node: '>=14.0.0'}
 
   tldts-core@6.1.64:
@@ -2046,14 +2219,6 @@ packages:
     resolution: {integrity: sha512-ph4AE5BXWIOsSy9stpoeo7bYe/Cy7VfpciIH4RhVZUPItCJmhqWCN0EVzxd8BOHiyNb42vuJc6NWTjJkg91Tuw==}
     hasBin: true
 
-  tmp@0.0.33:
-    resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
-    engines: {node: '>=0.6.0'}
-
-  to-fast-properties@2.0.0:
-    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
-    engines: {node: '>=4'}
-
   to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -2083,34 +2248,46 @@ packages:
     peerDependencies:
       typescript: '>=4.2.0'
 
+  ts-api-utils@2.4.0:
+    resolution: {integrity: sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==}
+    engines: {node: '>=18.12'}
+    peerDependencies:
+      typescript: '>=4.8.4'
+
+  ts-declaration-location@1.0.7:
+    resolution: {integrity: sha512-EDyGAwH1gO0Ausm9gV6T2nUvBgXT5kGoCMJPllOaooZ+4VvJiKBdZE7wK18N1deEowhcUptS+5GXZK8U/fvpwA==}
+    peerDependencies:
+      typescript: '>=4.0.0'
+
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
 
-  typescript-eslint@8.2.0:
-    resolution: {integrity: sha512-DmnqaPcML0xYwUzgNbM1XaKXpEb7BShYf2P1tkUmmcl8hyeG7Pj08Er7R9bNy6AufabywzJcOybQAtnD/c9DGw==}
+  typescript-eslint@8.56.0:
+    resolution: {integrity: sha512-c7toRLrotJ9oixgdW7liukZpsnq5CZ7PuKztubGYlNppuTqhIoWfhgHo/7EU0v06gS2l/x0i2NEFK1qMIf0rIg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.0.0'
 
   typescript@5.5.4:
     resolution: {integrity: sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==}
     engines: {node: '>=14.17'}
     hasBin: true
 
-  undici-types@5.26.5:
-    resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
+  undici-types@6.21.0:
+    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+
+  undici-types@7.12.0:
+    resolution: {integrity: sha512-goOacqME2GYyOZZfb5Lgtu+1IDmAlAEu5xnD3+xTzS10hT0vzpf0SPjkXwAw9Jm+4n/mQGDP3LO8CPbYROeBfQ==}
 
   universalify@0.1.2:
     resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
     engines: {node: '>= 4.0.0'}
 
-  universalify@2.0.1:
-    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
-    engines: {node: '>= 10.0.0'}
+  unplugin-utils@0.3.0:
+    resolution: {integrity: sha512-JLoggz+PvLVMJo+jZt97hdIIIZ2yTzGgft9e9q8iMrC4ewufl62ekeW7mixBghonn2gVb/ICjyvlmOCUBnJLQg==}
+    engines: {node: '>=20.19.0'}
 
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
@@ -2118,41 +2295,60 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
+  uuid@11.1.0:
+    resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==}
+    hasBin: true
+
   v8-natives@1.2.5:
     resolution: {integrity: sha512-CVNliz6KF2yet3HBIkbFJKZmjlt95C8dsNZDnwoS6X98+QJRpsSz9uxo3TziBqdyJQkWwfD3VG9lRzsQNvF24Q==}
     engines: {node: '>= 0.6.0'}
 
-  vite-node@2.0.5:
-    resolution: {integrity: sha512-LdsW4pxj0Ot69FAoXZ1yTnA9bjGohr2yNBU7QKRxpz8ITSkhuDl6h3zS/tvgz4qrNjeRnvrWeXQ8ZF7Um4W00Q==}
-    engines: {node: ^18.0.0 || >=20.0.0}
-    hasBin: true
+  vite-dev-rpc@1.1.0:
+    resolution: {integrity: sha512-pKXZlgoXGoE8sEKiKJSng4hI1sQ4wi5YT24FCrwrLt6opmkjlqPPVmiPWWJn8M8byMxRGzp1CrFuqQs4M/Z39A==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.1 || ^7.0.0-0
+
+  vite-hot-client@2.1.0:
+    resolution: {integrity: sha512-7SpgZmU7R+dDnSmvXE1mfDtnHLHQSisdySVR7lO8ceAXvM0otZeuQQ6C8LrS5d/aYyP/QZ0hI0L+dIPrm4YlFQ==}
+    peerDependencies:
+      vite: ^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0
+
+  vite-plugin-devtools-json@1.0.0:
+    resolution: {integrity: sha512-MobvwqX76Vqt/O4AbnNMNWoXWGrKUqZbphCUle/J2KXH82yKQiunOeKnz/nqEPosPsoWWPP9FtNuPBSYpiiwkw==}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0
 
-  vite-plugin-inspect@0.8.4:
-    resolution: {integrity: sha512-G0N3rjfw+AiiwnGw50KlObIHYWfulVwaCBUBLh2xTW9G1eM9ocE5olXkEYUbwyTmX+azM8duubi+9w5awdCz+g==}
+  vite-plugin-inspect@11.3.3:
+    resolution: {integrity: sha512-u2eV5La99oHoYPHE6UvbwgEqKKOQGz86wMg40CCosP6q8BkB6e5xPneZfYagK4ojPJSj5anHCrnvC20DpwVdRA==}
     engines: {node: '>=14'}
     peerDependencies:
       '@nuxt/kit': '*'
-      vite: ^3.1.0 || ^4.0.0 || ^5.0.0-0
+      vite: ^6.0.0 || ^7.0.0-0
     peerDependenciesMeta:
       '@nuxt/kit':
         optional: true
 
-  vite@5.4.6:
-    resolution: {integrity: sha512-IeL5f8OO5nylsgzd9tq4qD2QqI0k2CQLGrWD0rCN0EQJZpBK5vJAx0I+GDkMOXxQX/OfFHMuLIx6ddAxGX/k+Q==}
-    engines: {node: ^18.0.0 || >=20.0.0}
+  vite@7.3.2:
+    resolution: {integrity: sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
-      '@types/node': ^18.0.0 || >=20.0.0
-      less: '*'
+      '@types/node': ^20.19.0 || >=22.12.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
       lightningcss: ^1.21.0
-      sass: '*'
-      sass-embedded: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.4.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
     peerDependenciesMeta:
       '@types/node':
         optional: true
+      jiti:
+        optional: true
       less:
         optional: true
       lightningcss:
@@ -2167,32 +2363,52 @@ packages:
         optional: true
       terser:
         optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
 
-  vitefu@0.2.5:
-    resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==}
+  vitefu@1.1.1:
+    resolution: {integrity: sha512-B/Fegf3i8zh0yFbpzZ21amWzHmuNlLlmJT6n7bu5e+pCHUKQIfXSYokrqOBGEMMe9UG2sostKQF9mml/vYaWJQ==}
     peerDependencies:
-      vite: ^3.0.0 || ^4.0.0 || ^5.0.0
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0
     peerDependenciesMeta:
       vite:
         optional: true
 
-  vitest@2.0.5:
-    resolution: {integrity: sha512-8GUxONfauuIdeSl5f9GTgVEpg5BTOlplET4WEDaeY2QBiN8wSm68vxN/tb5z405OwppfoCavnwXafiaYBC/xOA==}
-    engines: {node: ^18.0.0 || >=20.0.0}
+  vitest@4.1.7:
+    resolution: {integrity: sha512-flYyaFd2CgoCoU+0UKt3pxksgC+S02iTDN0n3LtqaMeXsI9SBcdNujc2k0DeFLzUn/0k538yNjOSdwgCqcrwJA==}
+    engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
-      '@types/node': ^18.0.0 || >=20.0.0
-      '@vitest/browser': 2.0.5
-      '@vitest/ui': 2.0.5
+      '@opentelemetry/api': ^1.9.0
+      '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0
+      '@vitest/browser-playwright': 4.1.7
+      '@vitest/browser-preview': 4.1.7
+      '@vitest/browser-webdriverio': 4.1.7
+      '@vitest/coverage-istanbul': 4.1.7
+      '@vitest/coverage-v8': 4.1.7
+      '@vitest/ui': 4.1.7
       happy-dom: '*'
       jsdom: '*'
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
     peerDependenciesMeta:
       '@edge-runtime/vm':
         optional: true
+      '@opentelemetry/api':
+        optional: true
       '@types/node':
         optional: true
-      '@vitest/browser':
+      '@vitest/browser-playwright':
+        optional: true
+      '@vitest/browser-preview':
+        optional: true
+      '@vitest/browser-webdriverio':
+        optional: true
+      '@vitest/coverage-istanbul':
+        optional: true
+      '@vitest/coverage-v8':
         optional: true
       '@vitest/ui':
         optional: true
@@ -2205,6 +2421,9 @@ packages:
     resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
     engines: {node: '>=18'}
 
+  web-features@3.29.0:
+    resolution: {integrity: sha512-r8m0Xj77/PSHXEbv2U3UuLhw5gE4U+YAPek5hCor5DMsS9Qnwtxl5FSfam3dXQo7Gl0gxK9BRrcQLlOBZZZXpw==}
+
   webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
 
@@ -2215,6 +2434,7 @@ packages:
   whatwg-encoding@3.1.1:
     resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
     engines: {node: '>=18'}
+    deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation
 
   whatwg-mimetype@4.0.0:
     resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
@@ -2227,10 +2447,6 @@ packages:
   whatwg-url@5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
 
-  which@1.3.1:
-    resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
-    hasBin: true
-
   which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
@@ -2241,14 +2457,6 @@ packages:
     engines: {node: '>=8'}
     hasBin: true
 
-  wrap-ansi@7.0.0:
-    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
-    engines: {node: '>=10'}
-
-  wrap-ansi@8.1.0:
-    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
-    engines: {node: '>=12'}
-
   ws@8.18.0:
     resolution: {integrity: sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==}
     engines: {node: '>=10.0.0'}
@@ -2261,6 +2469,10 @@ packages:
       utf-8-validate:
         optional: true
 
+  wsl-utils@0.1.0:
+    resolution: {integrity: sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==}
+    engines: {node: '>=18'}
+
   xml-name-validator@5.0.0:
     resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
     engines: {node: '>=18'}
@@ -2268,9 +2480,6 @@ packages:
   xmlchars@2.2.0:
     resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
 
-  yallist@2.1.2:
-    resolution: {integrity: sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==}
-
   yaml@1.10.2:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
@@ -2286,40 +2495,30 @@ snapshots:
 
   '@aashutoshrathi/word-wrap@1.2.6': {}
 
-  '@ampproject/remapping@2.3.0':
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.5
-      '@jridgewell/trace-mapping': 0.3.25
-
-  '@antfu/utils@0.7.8': {}
-
-  '@babel/helper-string-parser@7.24.8': {}
+  '@babel/helper-string-parser@7.27.1': {}
 
-  '@babel/helper-validator-identifier@7.24.7': {}
+  '@babel/helper-validator-identifier@7.28.5': {}
 
-  '@babel/parser@7.25.4':
+  '@babel/parser@7.29.3':
     dependencies:
-      '@babel/types': 7.25.4
+      '@babel/types': 7.29.0
 
-  '@babel/runtime@7.23.8':
-    dependencies:
-      regenerator-runtime: 0.14.1
+  '@babel/runtime@7.28.4': {}
 
-  '@babel/types@7.25.4':
+  '@babel/types@7.29.0':
     dependencies:
-      '@babel/helper-string-parser': 7.24.8
-      '@babel/helper-validator-identifier': 7.24.7
-      to-fast-properties: 2.0.0
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
 
-  '@bcoe/v8-coverage@0.2.3': {}
+  '@bcoe/v8-coverage@1.0.2': {}
 
-  '@changesets/apply-release-plan@7.0.5':
+  '@changesets/apply-release-plan@7.0.14':
     dependencies:
-      '@changesets/config': 3.0.3
+      '@changesets/config': 3.1.2
       '@changesets/get-version-range-type': 0.4.0
-      '@changesets/git': 3.0.1
-      '@changesets/should-skip-package': 0.1.1
-      '@changesets/types': 6.0.0
+      '@changesets/git': 3.0.4
+      '@changesets/should-skip-package': 0.1.2
+      '@changesets/types': 6.1.0
       '@manypkg/get-packages': 1.1.3
       detect-indent: 6.1.0
       fs-extra: 7.0.1
@@ -2327,74 +2526,74 @@ snapshots:
       outdent: 0.5.0
       prettier: 2.8.8
       resolve-from: 5.0.0
-      semver: 7.6.3
+      semver: 7.7.4
 
-  '@changesets/assemble-release-plan@6.0.4':
+  '@changesets/assemble-release-plan@6.0.9':
     dependencies:
       '@changesets/errors': 0.2.0
-      '@changesets/get-dependents-graph': 2.1.2
-      '@changesets/should-skip-package': 0.1.1
-      '@changesets/types': 6.0.0
+      '@changesets/get-dependents-graph': 2.1.3
+      '@changesets/should-skip-package': 0.1.2
+      '@changesets/types': 6.1.0
       '@manypkg/get-packages': 1.1.3
-      semver: 7.6.3
+      semver: 7.7.4
 
-  '@changesets/changelog-git@0.2.0':
+  '@changesets/changelog-git@0.2.1':
     dependencies:
-      '@changesets/types': 6.0.0
+      '@changesets/types': 6.1.0
 
-  '@changesets/cli@2.27.8':
+  '@changesets/cli@2.29.8(@types/node@20.19.17)':
     dependencies:
-      '@changesets/apply-release-plan': 7.0.5
-      '@changesets/assemble-release-plan': 6.0.4
-      '@changesets/changelog-git': 0.2.0
-      '@changesets/config': 3.0.3
+      '@changesets/apply-release-plan': 7.0.14
+      '@changesets/assemble-release-plan': 6.0.9
+      '@changesets/changelog-git': 0.2.1
+      '@changesets/config': 3.1.2
       '@changesets/errors': 0.2.0
-      '@changesets/get-dependents-graph': 2.1.2
-      '@changesets/get-release-plan': 4.0.4
-      '@changesets/git': 3.0.1
+      '@changesets/get-dependents-graph': 2.1.3
+      '@changesets/get-release-plan': 4.0.14
+      '@changesets/git': 3.0.4
       '@changesets/logger': 0.1.1
-      '@changesets/pre': 2.0.1
-      '@changesets/read': 0.6.1
-      '@changesets/should-skip-package': 0.1.1
-      '@changesets/types': 6.0.0
-      '@changesets/write': 0.3.2
+      '@changesets/pre': 2.0.2
+      '@changesets/read': 0.6.6
+      '@changesets/should-skip-package': 0.1.2
+      '@changesets/types': 6.1.0
+      '@changesets/write': 0.4.0
+      '@inquirer/external-editor': 1.0.2(@types/node@20.19.17)
       '@manypkg/get-packages': 1.1.3
-      '@types/semver': 7.5.6
       ansi-colors: 4.1.3
       ci-info: 3.9.0
       enquirer: 2.4.1
-      external-editor: 3.1.0
       fs-extra: 7.0.1
       mri: 1.2.0
-      outdent: 0.5.0
       p-limit: 2.3.0
-      package-manager-detector: 0.2.0
-      picocolors: 1.1.0
+      package-manager-detector: 0.2.11
+      picocolors: 1.1.1
       resolve-from: 5.0.0
-      semver: 7.6.3
-      spawndamnit: 2.0.0
+      semver: 7.7.4
+      spawndamnit: 3.0.1
       term-size: 2.2.1
+    transitivePeerDependencies:
+      - '@types/node'
 
-  '@changesets/config@3.0.3':
+  '@changesets/config@3.1.2':
     dependencies:
       '@changesets/errors': 0.2.0
-      '@changesets/get-dependents-graph': 2.1.2
+      '@changesets/get-dependents-graph': 2.1.3
       '@changesets/logger': 0.1.1
-      '@changesets/types': 6.0.0
+      '@changesets/types': 6.1.0
       '@manypkg/get-packages': 1.1.3
       fs-extra: 7.0.1
-      micromatch: 4.0.5
+      micromatch: 4.0.8
 
   '@changesets/errors@0.2.0':
     dependencies:
       extendable-error: 0.1.7
 
-  '@changesets/get-dependents-graph@2.1.2':
+  '@changesets/get-dependents-graph@2.1.3':
     dependencies:
-      '@changesets/types': 6.0.0
+      '@changesets/types': 6.1.0
       '@manypkg/get-packages': 1.1.3
-      picocolors: 1.1.0
-      semver: 7.6.3
+      picocolors: 1.1.1
+      semver: 7.7.4
 
   '@changesets/get-github-info@0.5.2':
     dependencies:
@@ -2403,189 +2602,291 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
-  '@changesets/get-release-plan@4.0.4':
+  '@changesets/get-release-plan@4.0.14':
     dependencies:
-      '@changesets/assemble-release-plan': 6.0.4
-      '@changesets/config': 3.0.3
-      '@changesets/pre': 2.0.1
-      '@changesets/read': 0.6.1
-      '@changesets/types': 6.0.0
+      '@changesets/assemble-release-plan': 6.0.9
+      '@changesets/config': 3.1.2
+      '@changesets/pre': 2.0.2
+      '@changesets/read': 0.6.6
+      '@changesets/types': 6.1.0
       '@manypkg/get-packages': 1.1.3
 
   '@changesets/get-version-range-type@0.4.0': {}
 
-  '@changesets/git@3.0.1':
+  '@changesets/git@3.0.4':
     dependencies:
       '@changesets/errors': 0.2.0
       '@manypkg/get-packages': 1.1.3
       is-subdir: 1.2.0
-      micromatch: 4.0.5
-      spawndamnit: 2.0.0
+      micromatch: 4.0.8
+      spawndamnit: 3.0.1
 
   '@changesets/logger@0.1.1':
     dependencies:
-      picocolors: 1.1.0
+      picocolors: 1.1.1
 
-  '@changesets/parse@0.4.0':
+  '@changesets/parse@0.4.2':
     dependencies:
-      '@changesets/types': 6.0.0
-      js-yaml: 3.14.1
+      '@changesets/types': 6.1.0
+      js-yaml: 4.1.1
 
-  '@changesets/pre@2.0.1':
+  '@changesets/pre@2.0.2':
     dependencies:
       '@changesets/errors': 0.2.0
-      '@changesets/types': 6.0.0
+      '@changesets/types': 6.1.0
       '@manypkg/get-packages': 1.1.3
       fs-extra: 7.0.1
 
-  '@changesets/read@0.6.1':
+  '@changesets/read@0.6.6':
     dependencies:
-      '@changesets/git': 3.0.1
+      '@changesets/git': 3.0.4
       '@changesets/logger': 0.1.1
-      '@changesets/parse': 0.4.0
-      '@changesets/types': 6.0.0
+      '@changesets/parse': 0.4.2
+      '@changesets/types': 6.1.0
       fs-extra: 7.0.1
       p-filter: 2.1.0
-      picocolors: 1.1.0
+      picocolors: 1.1.1
 
-  '@changesets/should-skip-package@0.1.1':
+  '@changesets/should-skip-package@0.1.2':
     dependencies:
-      '@changesets/types': 6.0.0
+      '@changesets/types': 6.1.0
       '@manypkg/get-packages': 1.1.3
 
   '@changesets/types@4.1.0': {}
 
-  '@changesets/types@6.0.0': {}
+  '@changesets/types@6.1.0': {}
 
-  '@changesets/write@0.3.2':
+  '@changesets/write@0.4.0':
     dependencies:
-      '@changesets/types': 6.0.0
+      '@changesets/types': 6.1.0
       fs-extra: 7.0.1
-      human-id: 1.0.2
+      human-id: 4.1.1
       prettier: 2.8.8
 
-  '@esbuild/aix-ppc64@0.21.5':
+  '@esbuild/aix-ppc64@0.25.11':
+    optional: true
+
+  '@esbuild/aix-ppc64@0.27.7':
+    optional: true
+
+  '@esbuild/android-arm64@0.25.11':
+    optional: true
+
+  '@esbuild/android-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/android-arm@0.25.11':
+    optional: true
+
+  '@esbuild/android-arm@0.27.7':
+    optional: true
+
+  '@esbuild/android-x64@0.25.11':
+    optional: true
+
+  '@esbuild/android-x64@0.27.7':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.25.11':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/darwin-x64@0.25.11':
+    optional: true
+
+  '@esbuild/darwin-x64@0.27.7':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.25.11':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.25.11':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-arm64@0.25.11':
+    optional: true
+
+  '@esbuild/linux-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-arm@0.25.11':
+    optional: true
+
+  '@esbuild/linux-arm@0.27.7':
+    optional: true
+
+  '@esbuild/linux-ia32@0.25.11':
+    optional: true
+
+  '@esbuild/linux-ia32@0.27.7':
+    optional: true
+
+  '@esbuild/linux-loong64@0.25.11':
+    optional: true
+
+  '@esbuild/linux-loong64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.25.11':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.27.7':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.25.11':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.25.11':
     optional: true
 
-  '@esbuild/android-arm64@0.21.5':
+  '@esbuild/linux-riscv64@0.27.7':
     optional: true
 
-  '@esbuild/android-arm@0.21.5':
+  '@esbuild/linux-s390x@0.25.11':
     optional: true
 
-  '@esbuild/android-x64@0.21.5':
+  '@esbuild/linux-s390x@0.27.7':
     optional: true
 
-  '@esbuild/darwin-arm64@0.21.5':
+  '@esbuild/linux-x64@0.25.11':
     optional: true
 
-  '@esbuild/darwin-x64@0.21.5':
+  '@esbuild/linux-x64@0.27.7':
     optional: true
 
-  '@esbuild/freebsd-arm64@0.21.5':
+  '@esbuild/netbsd-arm64@0.25.11':
     optional: true
 
-  '@esbuild/freebsd-x64@0.21.5':
+  '@esbuild/netbsd-arm64@0.27.7':
     optional: true
 
-  '@esbuild/linux-arm64@0.21.5':
+  '@esbuild/netbsd-x64@0.25.11':
     optional: true
 
-  '@esbuild/linux-arm@0.21.5':
+  '@esbuild/netbsd-x64@0.27.7':
     optional: true
 
-  '@esbuild/linux-ia32@0.21.5':
+  '@esbuild/openbsd-arm64@0.25.11':
     optional: true
 
-  '@esbuild/linux-loong64@0.21.5':
+  '@esbuild/openbsd-arm64@0.27.7':
     optional: true
 
-  '@esbuild/linux-mips64el@0.21.5':
+  '@esbuild/openbsd-x64@0.25.11':
     optional: true
 
-  '@esbuild/linux-ppc64@0.21.5':
+  '@esbuild/openbsd-x64@0.27.7':
     optional: true
 
-  '@esbuild/linux-riscv64@0.21.5':
+  '@esbuild/openharmony-arm64@0.25.11':
     optional: true
 
-  '@esbuild/linux-s390x@0.21.5':
+  '@esbuild/openharmony-arm64@0.27.7':
     optional: true
 
-  '@esbuild/linux-x64@0.21.5':
+  '@esbuild/sunos-x64@0.25.11':
     optional: true
 
-  '@esbuild/netbsd-x64@0.21.5':
+  '@esbuild/sunos-x64@0.27.7':
     optional: true
 
-  '@esbuild/openbsd-x64@0.21.5':
+  '@esbuild/win32-arm64@0.25.11':
     optional: true
 
-  '@esbuild/sunos-x64@0.21.5':
+  '@esbuild/win32-arm64@0.27.7':
     optional: true
 
-  '@esbuild/win32-arm64@0.21.5':
+  '@esbuild/win32-ia32@0.25.11':
     optional: true
 
-  '@esbuild/win32-ia32@0.21.5':
+  '@esbuild/win32-ia32@0.27.7':
     optional: true
 
-  '@esbuild/win32-x64@0.21.5':
+  '@esbuild/win32-x64@0.25.11':
     optional: true
 
-  '@eslint-community/eslint-utils@4.4.0(eslint@9.9.1)':
+  '@esbuild/win32-x64@0.27.7':
+    optional: true
+
+  '@eslint-community/eslint-utils@4.9.1(eslint@10.0.0)':
     dependencies:
-      eslint: 9.9.1
+      eslint: 10.0.0
       eslint-visitor-keys: 3.4.3
 
-  '@eslint-community/regexpp@4.11.0': {}
+  '@eslint-community/regexpp@4.12.2': {}
 
-  '@eslint/config-array@0.18.0':
+  '@eslint/config-array@0.23.1':
     dependencies:
-      '@eslint/object-schema': 2.1.4
-      debug: 4.3.6
-      minimatch: 3.1.2
+      '@eslint/object-schema': 3.0.1
+      debug: 4.4.3
+      minimatch: 10.1.2
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/eslintrc@3.1.0':
+  '@eslint/config-helpers@0.5.2':
     dependencies:
-      ajv: 6.12.6
-      debug: 4.3.6
-      espree: 10.1.0
-      globals: 14.0.0
-      ignore: 5.3.2
-      import-fresh: 3.3.0
-      js-yaml: 4.1.0
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
+      '@eslint/core': 1.1.0
+
+  '@eslint/core@1.1.0':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
+  '@eslint/js@10.0.1(eslint@10.0.0)':
+    optionalDependencies:
+      eslint: 10.0.0
+
+  '@eslint/object-schema@3.0.1': {}
+
+  '@eslint/plugin-kit@0.6.0':
+    dependencies:
+      '@eslint/core': 1.1.0
+      levn: 0.4.1
 
-  '@eslint/js@9.9.1': {}
+  '@humanfs/core@0.19.1': {}
 
-  '@eslint/object-schema@2.1.4': {}
+  '@humanfs/node@0.16.7':
+    dependencies:
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.4.3
 
   '@humanwhocodes/module-importer@1.0.1': {}
 
-  '@humanwhocodes/retry@0.3.0': {}
+  '@humanwhocodes/retry@0.4.3': {}
 
-  '@isaacs/cliui@8.0.2':
+  '@inquirer/external-editor@1.0.2(@types/node@20.19.17)':
     dependencies:
-      string-width: 5.1.2
-      string-width-cjs: string-width@4.2.3
-      strip-ansi: 7.1.0
-      strip-ansi-cjs: strip-ansi@6.0.1
-      wrap-ansi: 8.1.0
-      wrap-ansi-cjs: wrap-ansi@7.0.0
+      chardet: 2.1.0
+      iconv-lite: 0.7.0
+    optionalDependencies:
+      '@types/node': 20.19.17
 
-  '@istanbuljs/schema@0.1.3': {}
+  '@isaacs/balanced-match@4.0.1': {}
+
+  '@isaacs/brace-expansion@5.0.1':
+    dependencies:
+      '@isaacs/balanced-match': 4.0.1
 
   '@jridgewell/gen-mapping@0.3.5':
     dependencies:
       '@jridgewell/set-array': 1.2.1
       '@jridgewell/sourcemap-codec': 1.5.0
-      '@jridgewell/trace-mapping': 0.3.25
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.4':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/trace-mapping': 0.3.31
 
   '@jridgewell/resolve-uri@3.1.1': {}
 
@@ -2594,25 +2895,27 @@ snapshots:
   '@jridgewell/source-map@0.3.6':
     dependencies:
       '@jridgewell/gen-mapping': 0.3.5
-      '@jridgewell/trace-mapping': 0.3.25
+      '@jridgewell/trace-mapping': 0.3.31
 
   '@jridgewell/sourcemap-codec@1.5.0': {}
 
-  '@jridgewell/trace-mapping@0.3.25':
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.1
       '@jridgewell/sourcemap-codec': 1.5.0
 
   '@manypkg/find-root@1.1.0':
     dependencies:
-      '@babel/runtime': 7.23.8
+      '@babel/runtime': 7.28.4
       '@types/node': 12.20.55
       find-up: 4.1.0
       fs-extra: 8.1.0
 
   '@manypkg/get-packages@1.1.3':
     dependencies:
-      '@babel/runtime': 7.23.8
+      '@babel/runtime': 7.28.4
       '@changesets/types': 4.1.0
       '@manypkg/find-root': 1.1.0
       fs-extra: 8.1.0
@@ -2631,144 +2934,174 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.16.0
 
-  '@pkgjs/parseargs@0.11.0':
-    optional: true
-
-  '@playwright/test@1.46.1':
+  '@playwright/test@1.60.0':
     dependencies:
-      playwright: 1.46.1
+      playwright: 1.60.0
 
   '@polka/url@1.0.0-next.25': {}
 
-  '@rollup/plugin-commonjs@28.0.1(rollup@4.22.4)':
+  '@rollup/plugin-commonjs@28.0.1(rollup@4.60.1)':
     dependencies:
-      '@rollup/pluginutils': 5.1.0(rollup@4.22.4)
+      '@rollup/pluginutils': 5.1.0(rollup@4.60.1)
       commondir: 1.0.1
       estree-walker: 2.0.2
-      fdir: 6.3.0(picomatch@4.0.2)
+      fdir: 6.5.0(picomatch@4.0.4)
       is-reference: 1.2.1
-      magic-string: 0.30.11
-      picomatch: 4.0.2
+      magic-string: 0.30.17
+      picomatch: 4.0.4
     optionalDependencies:
-      rollup: 4.22.4
+      rollup: 4.60.1
 
-  '@rollup/plugin-node-resolve@15.3.0(rollup@4.22.4)':
+  '@rollup/plugin-node-resolve@15.3.0(rollup@4.60.1)':
     dependencies:
-      '@rollup/pluginutils': 5.1.0(rollup@4.22.4)
+      '@rollup/pluginutils': 5.1.0(rollup@4.60.1)
       '@types/resolve': 1.20.2
       deepmerge: 4.3.1
       is-module: 1.0.0
       resolve: 1.22.8
     optionalDependencies:
-      rollup: 4.22.4
+      rollup: 4.60.1
 
-  '@rollup/plugin-terser@0.4.4(rollup@4.22.4)':
+  '@rollup/plugin-terser@0.4.4(rollup@4.60.1)':
     dependencies:
       serialize-javascript: 6.0.2
       smob: 1.4.1
       terser: 5.27.0
     optionalDependencies:
-      rollup: 4.22.4
+      rollup: 4.60.1
 
-  '@rollup/plugin-virtual@3.0.2(rollup@4.22.4)':
+  '@rollup/plugin-virtual@3.0.2(rollup@4.60.1)':
     optionalDependencies:
-      rollup: 4.22.4
+      rollup: 4.60.1
 
-  '@rollup/pluginutils@5.1.0(rollup@4.22.4)':
+  '@rollup/pluginutils@5.1.0(rollup@4.60.1)':
     dependencies:
-      '@types/estree': 1.0.6
+      '@types/estree': 1.0.8
       estree-walker: 2.0.2
-      picomatch: 2.3.1
+      picomatch: 2.3.2
     optionalDependencies:
-      rollup: 4.22.4
+      rollup: 4.60.1
+
+  '@rollup/rollup-android-arm-eabi@4.60.1':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.60.1':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.60.1':
+    optional: true
 
-  '@rollup/rollup-android-arm-eabi@4.22.4':
+  '@rollup/rollup-darwin-x64@4.60.1':
     optional: true
 
-  '@rollup/rollup-android-arm64@4.22.4':
+  '@rollup/rollup-freebsd-arm64@4.60.1':
     optional: true
 
-  '@rollup/rollup-darwin-arm64@4.22.4':
+  '@rollup/rollup-freebsd-x64@4.60.1':
     optional: true
 
-  '@rollup/rollup-darwin-x64@4.22.4':
+  '@rollup/rollup-linux-arm-gnueabihf@4.60.1':
     optional: true
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.22.4':
+  '@rollup/rollup-linux-arm-musleabihf@4.60.1':
     optional: true
 
-  '@rollup/rollup-linux-arm-musleabihf@4.22.4':
+  '@rollup/rollup-linux-arm64-gnu@4.60.1':
     optional: true
 
-  '@rollup/rollup-linux-arm64-gnu@4.22.4':
+  '@rollup/rollup-linux-arm64-musl@4.60.1':
     optional: true
 
-  '@rollup/rollup-linux-arm64-musl@4.22.4':
+  '@rollup/rollup-linux-loong64-gnu@4.60.1':
     optional: true
 
-  '@rollup/rollup-linux-powerpc64le-gnu@4.22.4':
+  '@rollup/rollup-linux-loong64-musl@4.60.1':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-gnu@4.22.4':
+  '@rollup/rollup-linux-ppc64-gnu@4.60.1':
     optional: true
 
-  '@rollup/rollup-linux-s390x-gnu@4.22.4':
+  '@rollup/rollup-linux-ppc64-musl@4.60.1':
     optional: true
 
-  '@rollup/rollup-linux-x64-gnu@4.22.4':
+  '@rollup/rollup-linux-riscv64-gnu@4.60.1':
     optional: true
 
-  '@rollup/rollup-linux-x64-musl@4.22.4':
+  '@rollup/rollup-linux-riscv64-musl@4.60.1':
     optional: true
 
-  '@rollup/rollup-win32-arm64-msvc@4.22.4':
+  '@rollup/rollup-linux-s390x-gnu@4.60.1':
     optional: true
 
-  '@rollup/rollup-win32-ia32-msvc@4.22.4':
+  '@rollup/rollup-linux-x64-gnu@4.60.1':
     optional: true
 
-  '@rollup/rollup-win32-x64-msvc@4.22.4':
+  '@rollup/rollup-linux-x64-musl@4.60.1':
     optional: true
 
-  '@stylistic/eslint-plugin-js@1.8.0(eslint@9.9.1)':
+  '@rollup/rollup-openbsd-x64@4.60.1':
+    optional: true
+
+  '@rollup/rollup-openharmony-arm64@4.60.1':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.60.1':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.60.1':
+    optional: true
+
+  '@rollup/rollup-win32-x64-gnu@4.60.1':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.60.1':
+    optional: true
+
+  '@standard-schema/spec@1.1.0': {}
+
+  '@stylistic/eslint-plugin-js@1.8.0(eslint@10.0.0)':
     dependencies:
       '@types/eslint': 8.56.12
-      acorn: 8.12.1
+      acorn: 8.16.0
       escape-string-regexp: 4.0.0
-      eslint: 9.9.1
+      eslint: 10.0.0
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
 
-  '@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.9.0(eslint@9.9.1))(eslint-plugin-svelte@2.38.0(eslint@9.9.1)(svelte@packages+svelte))(eslint@9.9.1)(typescript-eslint@8.2.0(eslint@9.9.1)(typescript@5.5.4))(typescript@5.5.4)':
+  '@sveltejs/acorn-typescript@1.0.10(acorn@8.16.0)':
+    dependencies:
+      acorn: 8.16.0
+
+  '@sveltejs/eslint-config@9.0.0(@eslint/js@10.0.1(eslint@10.0.0))(@stylistic/eslint-plugin-js@1.8.0(eslint@10.0.0))(eslint-config-prettier@9.1.0(eslint@10.0.0))(eslint-plugin-n@17.24.0(eslint@10.0.0)(typescript@5.5.4))(eslint-plugin-svelte@3.15.0(eslint@10.0.0)(svelte@packages+svelte))(eslint@10.0.0)(typescript-eslint@8.56.0(eslint@10.0.0)(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.9.0(eslint@9.9.1)
-      eslint-plugin-svelte: 2.38.0(eslint@9.9.1)(svelte@packages+svelte)
-      globals: 15.9.0
+      '@eslint/js': 10.0.1(eslint@10.0.0)
+      '@stylistic/eslint-plugin-js': 1.8.0(eslint@10.0.0)
+      eslint: 10.0.0
+      eslint-config-prettier: 9.1.0(eslint@10.0.0)
+      eslint-plugin-n: 17.24.0(eslint@10.0.0)(typescript@5.5.4)
+      eslint-plugin-svelte: 3.15.0(eslint@10.0.0)(svelte@packages+svelte)
+      globals: 17.3.0
       typescript: 5.5.4
-      typescript-eslint: 8.2.0(eslint@9.9.1)(typescript@5.5.4)
+      typescript-eslint: 8.56.0(eslint@10.0.0)(typescript@5.5.4)
 
-  '@sveltejs/vite-plugin-svelte-inspector@3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))':
+  '@sveltejs/vite-plugin-svelte-inspector@5.0.1(@sveltejs/vite-plugin-svelte@6.2.0(svelte@packages+svelte)(vite@7.3.2(@types/node@24.5.2)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@7.3.2(@types/node@24.5.2)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
-      debug: 4.3.6
+      '@sveltejs/vite-plugin-svelte': 6.2.0(svelte@packages+svelte)(vite@7.3.2(@types/node@24.5.2)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
+      debug: 4.4.3
       svelte: link:packages/svelte
-      vite: 5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
+      vite: 7.3.2(@types/node@24.5.2)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))':
+  '@sveltejs/vite-plugin-svelte@6.2.0(svelte@packages+svelte)(vite@7.3.2(@types/node@24.5.2)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 3.0.0-next.2(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
-      debug: 4.3.6
+      '@sveltejs/vite-plugin-svelte-inspector': 5.0.1(@sveltejs/vite-plugin-svelte@6.2.0(svelte@packages+svelte)(vite@7.3.2(@types/node@24.5.2)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@7.3.2(@types/node@24.5.2)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
+      debug: 4.4.3
       deepmerge: 4.3.1
-      kleur: 4.1.5
-      magic-string: 0.30.11
+      magic-string: 0.30.17
       svelte: link:packages/svelte
-      vite: 5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
-      vitefu: 0.2.5(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
+      vite: 7.3.2(@types/node@24.5.2)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
+      vitefu: 1.1.1(vite@7.3.2(@types/node@24.5.2)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
     transitivePeerDependencies:
       - supports-color
 
@@ -2781,172 +3114,200 @@ snapshots:
 
   '@types/aria-query@5.0.4': {}
 
+  '@types/chai@5.2.3':
+    dependencies:
+      '@types/deep-eql': 4.0.2
+      assertion-error: 2.0.1
+
+  '@types/deep-eql@4.0.2': {}
+
   '@types/eslint@8.56.12':
     dependencies:
-      '@types/estree': 1.0.6
+      '@types/estree': 1.0.9
       '@types/json-schema': 7.0.15
 
-  '@types/estree@1.0.5': {}
+  '@types/esrecurse@4.3.1': {}
 
-  '@types/estree@1.0.6': {}
+  '@types/estree@1.0.8': {}
+
+  '@types/estree@1.0.9': {}
 
   '@types/json-schema@7.0.15': {}
 
   '@types/node@12.20.55': {}
 
-  '@types/node@20.12.7':
+  '@types/node@20.19.17':
+    dependencies:
+      undici-types: 6.21.0
+
+  '@types/node@24.5.2':
     dependencies:
-      undici-types: 5.26.5
+      undici-types: 7.12.0
+
+  '@types/picomatch@4.0.2': {}
 
   '@types/resolve@1.20.2': {}
 
-  '@types/semver@7.5.6': {}
+  '@types/trusted-types@2.0.7': {}
 
-  '@typescript-eslint/eslint-plugin@8.2.0(@typescript-eslint/parser@8.2.0(eslint@9.9.1)(typescript@5.5.4))(eslint@9.9.1)(typescript@5.5.4)':
+  '@typescript-eslint/eslint-plugin@8.56.0(@typescript-eslint/parser@8.56.0(eslint@10.0.0)(typescript@5.5.4))(eslint@10.0.0)(typescript@5.5.4)':
     dependencies:
-      '@eslint-community/regexpp': 4.11.0
-      '@typescript-eslint/parser': 8.2.0(eslint@9.9.1)(typescript@5.5.4)
-      '@typescript-eslint/scope-manager': 8.2.0
-      '@typescript-eslint/type-utils': 8.2.0(eslint@9.9.1)(typescript@5.5.4)
-      '@typescript-eslint/utils': 8.2.0(eslint@9.9.1)(typescript@5.5.4)
-      '@typescript-eslint/visitor-keys': 8.2.0
-      eslint: 9.9.1
-      graphemer: 1.4.0
-      ignore: 5.3.2
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.56.0(eslint@10.0.0)(typescript@5.5.4)
+      '@typescript-eslint/scope-manager': 8.56.0
+      '@typescript-eslint/type-utils': 8.56.0(eslint@10.0.0)(typescript@5.5.4)
+      '@typescript-eslint/utils': 8.56.0(eslint@10.0.0)(typescript@5.5.4)
+      '@typescript-eslint/visitor-keys': 8.56.0
+      eslint: 10.0.0
+      ignore: 7.0.5
       natural-compare: 1.4.0
-      ts-api-utils: 1.3.0(typescript@5.5.4)
-    optionalDependencies:
+      ts-api-utils: 2.4.0(typescript@5.5.4)
       typescript: 5.5.4
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.2.0(eslint@9.9.1)(typescript@5.5.4)':
+  '@typescript-eslint/parser@8.56.0(eslint@10.0.0)(typescript@5.5.4)':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.2.0
-      '@typescript-eslint/types': 8.2.0
-      '@typescript-eslint/typescript-estree': 8.2.0(typescript@5.5.4)
-      '@typescript-eslint/visitor-keys': 8.2.0
-      debug: 4.3.6
-      eslint: 9.9.1
-    optionalDependencies:
+      '@typescript-eslint/scope-manager': 8.56.0
+      '@typescript-eslint/types': 8.56.0
+      '@typescript-eslint/typescript-estree': 8.56.0(typescript@5.5.4)
+      '@typescript-eslint/visitor-keys': 8.56.0
+      debug: 4.4.3
+      eslint: 10.0.0
       typescript: 5.5.4
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@8.2.0':
+  '@typescript-eslint/project-service@8.56.0(typescript@5.5.4)':
     dependencies:
-      '@typescript-eslint/types': 8.2.0
-      '@typescript-eslint/visitor-keys': 8.2.0
+      '@typescript-eslint/tsconfig-utils': 8.56.0(typescript@5.5.4)
+      '@typescript-eslint/types': 8.56.0
+      debug: 4.4.3
+      typescript: 5.5.4
+    transitivePeerDependencies:
+      - supports-color
 
-  '@typescript-eslint/type-utils@8.2.0(eslint@9.9.1)(typescript@5.5.4)':
+  '@typescript-eslint/scope-manager@8.56.0':
     dependencies:
-      '@typescript-eslint/typescript-estree': 8.2.0(typescript@5.5.4)
-      '@typescript-eslint/utils': 8.2.0(eslint@9.9.1)(typescript@5.5.4)
-      debug: 4.3.6
-      ts-api-utils: 1.3.0(typescript@5.5.4)
-    optionalDependencies:
+      '@typescript-eslint/types': 8.56.0
+      '@typescript-eslint/visitor-keys': 8.56.0
+
+  '@typescript-eslint/tsconfig-utils@8.56.0(typescript@5.5.4)':
+    dependencies:
+      typescript: 5.5.4
+
+  '@typescript-eslint/type-utils@8.56.0(eslint@10.0.0)(typescript@5.5.4)':
+    dependencies:
+      '@typescript-eslint/types': 8.56.0
+      '@typescript-eslint/typescript-estree': 8.56.0(typescript@5.5.4)
+      '@typescript-eslint/utils': 8.56.0(eslint@10.0.0)(typescript@5.5.4)
+      debug: 4.4.3
+      eslint: 10.0.0
+      ts-api-utils: 2.4.0(typescript@5.5.4)
       typescript: 5.5.4
     transitivePeerDependencies:
-      - eslint
       - supports-color
 
-  '@typescript-eslint/types@8.2.0': {}
+  '@typescript-eslint/types@8.56.0': {}
+
+  '@typescript-eslint/types@8.59.4':
+    optional: true
 
-  '@typescript-eslint/typescript-estree@8.2.0(typescript@5.5.4)':
+  '@typescript-eslint/typescript-estree@8.56.0(typescript@5.5.4)':
     dependencies:
-      '@typescript-eslint/types': 8.2.0
-      '@typescript-eslint/visitor-keys': 8.2.0
-      debug: 4.3.6
-      globby: 11.1.0
-      is-glob: 4.0.3
+      '@typescript-eslint/project-service': 8.56.0(typescript@5.5.4)
+      '@typescript-eslint/tsconfig-utils': 8.56.0(typescript@5.5.4)
+      '@typescript-eslint/types': 8.56.0
+      '@typescript-eslint/visitor-keys': 8.56.0
+      debug: 4.4.3
       minimatch: 9.0.5
-      semver: 7.6.3
-      ts-api-utils: 1.3.0(typescript@5.5.4)
-    optionalDependencies:
+      semver: 7.7.4
+      tinyglobby: 0.2.15
+      ts-api-utils: 2.4.0(typescript@5.5.4)
       typescript: 5.5.4
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.2.0(eslint@9.9.1)(typescript@5.5.4)':
+  '@typescript-eslint/utils@8.56.0(eslint@10.0.0)(typescript@5.5.4)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.9.1)
-      '@typescript-eslint/scope-manager': 8.2.0
-      '@typescript-eslint/types': 8.2.0
-      '@typescript-eslint/typescript-estree': 8.2.0(typescript@5.5.4)
-      eslint: 9.9.1
+      '@eslint-community/eslint-utils': 4.9.1(eslint@10.0.0)
+      '@typescript-eslint/scope-manager': 8.56.0
+      '@typescript-eslint/types': 8.56.0
+      '@typescript-eslint/typescript-estree': 8.56.0(typescript@5.5.4)
+      eslint: 10.0.0
+      typescript: 5.5.4
     transitivePeerDependencies:
       - supports-color
-      - typescript
 
-  '@typescript-eslint/visitor-keys@8.2.0':
+  '@typescript-eslint/visitor-keys@8.56.0':
     dependencies:
-      '@typescript-eslint/types': 8.2.0
-      eslint-visitor-keys: 3.4.3
+      '@typescript-eslint/types': 8.56.0
+      eslint-visitor-keys: 5.0.0
 
-  '@vitest/coverage-v8@2.0.5(vitest@2.0.5(@types/node@20.12.7)(jsdom@25.0.1)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))':
+  '@vitest/coverage-v8@4.1.7(vitest@4.1.7)':
     dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@bcoe/v8-coverage': 0.2.3
-      debug: 4.3.6
+      '@bcoe/v8-coverage': 1.0.2
+      '@vitest/utils': 4.1.7
+      ast-v8-to-istanbul: 1.0.0
       istanbul-lib-coverage: 3.2.2
       istanbul-lib-report: 3.0.1
-      istanbul-lib-source-maps: 5.0.6
-      istanbul-reports: 3.1.7
-      magic-string: 0.30.11
-      magicast: 0.3.4
-      std-env: 3.7.0
-      test-exclude: 7.0.1
-      tinyrainbow: 1.2.0
-      vitest: 2.0.5(@types/node@20.12.7)(jsdom@25.0.1)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
-    transitivePeerDependencies:
-      - supports-color
+      istanbul-reports: 3.2.0
+      magicast: 0.5.3
+      obug: 2.1.1
+      std-env: 4.1.0
+      tinyrainbow: 3.1.0
+      vitest: 4.1.7(@types/node@20.19.17)(@vitest/coverage-v8@4.1.7)(jsdom@25.0.1)(vite@7.3.2(@types/node@20.19.17)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
 
-  '@vitest/expect@2.0.5':
+  '@vitest/expect@4.1.7':
     dependencies:
-      '@vitest/spy': 2.0.5
-      '@vitest/utils': 2.0.5
-      chai: 5.1.1
-      tinyrainbow: 1.2.0
+      '@standard-schema/spec': 1.1.0
+      '@types/chai': 5.2.3
+      '@vitest/spy': 4.1.7
+      '@vitest/utils': 4.1.7
+      chai: 6.2.2
+      tinyrainbow: 3.1.0
 
-  '@vitest/pretty-format@2.0.5':
+  '@vitest/mocker@4.1.7(vite@7.3.2(@types/node@20.19.17)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))':
     dependencies:
-      tinyrainbow: 1.2.0
+      '@vitest/spy': 4.1.7
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 7.3.2(@types/node@20.19.17)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
 
-  '@vitest/runner@2.0.5':
+  '@vitest/pretty-format@4.1.7':
     dependencies:
-      '@vitest/utils': 2.0.5
-      pathe: 1.1.2
+      tinyrainbow: 3.1.0
 
-  '@vitest/snapshot@2.0.5':
+  '@vitest/runner@4.1.7':
     dependencies:
-      '@vitest/pretty-format': 2.0.5
-      magic-string: 0.30.11
-      pathe: 1.1.2
+      '@vitest/utils': 4.1.7
+      pathe: 2.0.3
 
-  '@vitest/spy@2.0.5':
+  '@vitest/snapshot@4.1.7':
     dependencies:
-      tinyspy: 3.0.0
+      '@vitest/pretty-format': 4.1.7
+      '@vitest/utils': 4.1.7
+      magic-string: 0.30.21
+      pathe: 2.0.3
 
-  '@vitest/utils@2.0.5':
-    dependencies:
-      '@vitest/pretty-format': 2.0.5
-      estree-walker: 3.0.3
-      loupe: 3.1.1
-      tinyrainbow: 1.2.0
+  '@vitest/spy@4.1.7': {}
 
-  acorn-jsx@5.3.2(acorn@8.12.1):
+  '@vitest/utils@4.1.7':
     dependencies:
-      acorn: 8.12.1
+      '@vitest/pretty-format': 4.1.7
+      convert-source-map: 2.0.0
+      tinyrainbow: 3.1.0
 
-  acorn-typescript@1.4.13(acorn@8.12.1):
+  acorn-jsx@5.3.2(acorn@8.16.0):
     dependencies:
-      acorn: 8.12.1
+      acorn: 8.16.0
 
-  acorn@8.12.1: {}
+  acorn@8.16.0: {}
 
   agent-base@7.1.1:
     dependencies:
-      debug: 4.3.6
+      debug: 4.4.3
     transitivePeerDependencies:
       - supports-color
 
@@ -2961,18 +3322,12 @@ snapshots:
 
   ansi-regex@5.0.1: {}
 
-  ansi-regex@6.0.1: {}
-
-  ansi-styles@4.3.0:
-    dependencies:
-      color-convert: 2.0.1
-
-  ansi-styles@6.2.1: {}
+  ansis@4.1.0: {}
 
   anymatch@3.1.3:
     dependencies:
       normalize-path: 3.0.0
-      picomatch: 2.3.1
+      picomatch: 2.3.2
     optional: true
 
   argparse@1.0.10:
@@ -2987,31 +3342,36 @@ snapshots:
 
   assertion-error@2.0.1: {}
 
+  ast-v8-to-istanbul@1.0.0:
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      estree-walker: 3.0.3
+      js-tokens: 10.0.0
+
   asynckit@0.4.0: {}
 
   axobject-query@4.1.0: {}
 
   balanced-match@1.0.2: {}
 
+  baseline-browser-mapping@2.10.32: {}
+
   better-path-resolve@1.0.0:
     dependencies:
       is-windows: 1.0.2
 
-  binary-extensions@2.2.0:
+  binary-extensions@2.3.0:
     optional: true
 
-  brace-expansion@1.1.11:
-    dependencies:
-      balanced-match: 1.0.2
-      concat-map: 0.0.1
+  birpc@2.5.0: {}
 
-  brace-expansion@2.0.1:
+  brace-expansion@2.0.2:
     dependencies:
       balanced-match: 1.0.2
 
-  braces@3.0.2:
+  braces@3.0.3:
     dependencies:
-      fill-range: 7.0.1
+      fill-range: 7.1.1
 
   buffer-from@1.1.2: {}
 
@@ -3019,31 +3379,14 @@ snapshots:
     dependencies:
       run-applescript: 7.0.0
 
-  cac@6.7.14: {}
-
-  callsites@3.1.0: {}
-
-  chai@5.1.1:
-    dependencies:
-      assertion-error: 2.0.1
-      check-error: 2.1.1
-      deep-eql: 5.0.2
-      loupe: 3.1.1
-      pathval: 2.0.0
-
-  chalk@4.1.2:
-    dependencies:
-      ansi-styles: 4.3.0
-      supports-color: 7.2.0
-
-  chardet@0.7.0: {}
+  chai@6.2.2: {}
 
-  check-error@2.1.1: {}
+  chardet@2.1.0: {}
 
-  chokidar@3.5.3:
+  chokidar@3.6.0:
     dependencies:
       anymatch: 3.1.3
-      braces: 3.0.2
+      braces: 3.0.3
       glob-parent: 5.1.2
       is-binary-path: 2.1.0
       is-glob: 4.0.3
@@ -3055,11 +3398,7 @@ snapshots:
 
   ci-info@3.9.0: {}
 
-  color-convert@2.0.1:
-    dependencies:
-      color-name: 1.1.4
-
-  color-name@1.1.4: {}
+  clsx@2.1.1: {}
 
   combined-stream@1.0.8:
     dependencies:
@@ -3069,15 +3408,9 @@ snapshots:
 
   commondir@1.0.1: {}
 
-  concat-map@0.0.1: {}
+  convert-source-map@2.0.0: {}
 
-  cross-spawn@5.1.0:
-    dependencies:
-      lru-cache: 4.1.5
-      shebang-command: 1.2.0
-      which: 1.3.1
-
-  cross-spawn@7.0.3:
+  cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
       shebang-command: 2.0.0
@@ -3096,14 +3429,12 @@ snapshots:
 
   dataloader@1.4.0: {}
 
-  debug@4.3.6:
+  debug@4.4.3:
     dependencies:
-      ms: 2.1.2
+      ms: 2.1.3
 
   decimal.js@10.4.3: {}
 
-  deep-eql@5.0.2: {}
-
   deep-is@0.1.4: {}
 
   deepmerge@4.3.1: {}
@@ -3124,35 +3455,30 @@ snapshots:
   detect-libc@1.0.3:
     optional: true
 
+  devalue@5.8.1: {}
+
   dir-glob@3.0.1:
     dependencies:
       path-type: 4.0.0
 
   dotenv@16.3.2: {}
 
-  dts-buddy@0.5.3(typescript@5.5.4):
+  dts-buddy@0.5.5(typescript@5.5.4):
     dependencies:
       '@jridgewell/source-map': 0.3.6
       '@jridgewell/sourcemap-codec': 1.5.0
-      globrex: 0.1.2
       kleur: 4.1.5
       locate-character: 3.0.0
-      magic-string: 0.30.11
+      magic-string: 0.30.17
       sade: 1.8.1
-      tiny-glob: 0.2.9
+      tinyglobby: 0.2.15
       ts-api-utils: 1.3.0(typescript@5.5.4)
       typescript: 5.5.4
 
-  eastasianwidth@0.2.0: {}
-
-  emoji-regex@8.0.0: {}
-
-  emoji-regex@9.2.2: {}
-
-  enhanced-resolve@5.17.1:
+  enhanced-resolve@5.22.1:
     dependencies:
       graceful-fs: 4.2.11
-      tapable: 2.2.1
+      tapable: 2.3.3
 
   enquirer@2.4.1:
     dependencies:
@@ -3161,120 +3487,161 @@ snapshots:
 
   entities@4.5.0: {}
 
-  error-stack-parser-es@0.1.1: {}
+  error-stack-parser-es@1.0.5: {}
 
-  esbuild@0.21.5:
+  es-module-lexer@2.1.0: {}
+
+  esbuild@0.25.11:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.25.11
+      '@esbuild/android-arm': 0.25.11
+      '@esbuild/android-arm64': 0.25.11
+      '@esbuild/android-x64': 0.25.11
+      '@esbuild/darwin-arm64': 0.25.11
+      '@esbuild/darwin-x64': 0.25.11
+      '@esbuild/freebsd-arm64': 0.25.11
+      '@esbuild/freebsd-x64': 0.25.11
+      '@esbuild/linux-arm': 0.25.11
+      '@esbuild/linux-arm64': 0.25.11
+      '@esbuild/linux-ia32': 0.25.11
+      '@esbuild/linux-loong64': 0.25.11
+      '@esbuild/linux-mips64el': 0.25.11
+      '@esbuild/linux-ppc64': 0.25.11
+      '@esbuild/linux-riscv64': 0.25.11
+      '@esbuild/linux-s390x': 0.25.11
+      '@esbuild/linux-x64': 0.25.11
+      '@esbuild/netbsd-arm64': 0.25.11
+      '@esbuild/netbsd-x64': 0.25.11
+      '@esbuild/openbsd-arm64': 0.25.11
+      '@esbuild/openbsd-x64': 0.25.11
+      '@esbuild/openharmony-arm64': 0.25.11
+      '@esbuild/sunos-x64': 0.25.11
+      '@esbuild/win32-arm64': 0.25.11
+      '@esbuild/win32-ia32': 0.25.11
+      '@esbuild/win32-x64': 0.25.11
+
+  esbuild@0.27.7:
     optionalDependencies:
-      '@esbuild/aix-ppc64': 0.21.5
-      '@esbuild/android-arm': 0.21.5
-      '@esbuild/android-arm64': 0.21.5
-      '@esbuild/android-x64': 0.21.5
-      '@esbuild/darwin-arm64': 0.21.5
-      '@esbuild/darwin-x64': 0.21.5
-      '@esbuild/freebsd-arm64': 0.21.5
-      '@esbuild/freebsd-x64': 0.21.5
-      '@esbuild/linux-arm': 0.21.5
-      '@esbuild/linux-arm64': 0.21.5
-      '@esbuild/linux-ia32': 0.21.5
-      '@esbuild/linux-loong64': 0.21.5
-      '@esbuild/linux-mips64el': 0.21.5
-      '@esbuild/linux-ppc64': 0.21.5
-      '@esbuild/linux-riscv64': 0.21.5
-      '@esbuild/linux-s390x': 0.21.5
-      '@esbuild/linux-x64': 0.21.5
-      '@esbuild/netbsd-x64': 0.21.5
-      '@esbuild/openbsd-x64': 0.21.5
-      '@esbuild/sunos-x64': 0.21.5
-      '@esbuild/win32-arm64': 0.21.5
-      '@esbuild/win32-ia32': 0.21.5
-      '@esbuild/win32-x64': 0.21.5
+      '@esbuild/aix-ppc64': 0.27.7
+      '@esbuild/android-arm': 0.27.7
+      '@esbuild/android-arm64': 0.27.7
+      '@esbuild/android-x64': 0.27.7
+      '@esbuild/darwin-arm64': 0.27.7
+      '@esbuild/darwin-x64': 0.27.7
+      '@esbuild/freebsd-arm64': 0.27.7
+      '@esbuild/freebsd-x64': 0.27.7
+      '@esbuild/linux-arm': 0.27.7
+      '@esbuild/linux-arm64': 0.27.7
+      '@esbuild/linux-ia32': 0.27.7
+      '@esbuild/linux-loong64': 0.27.7
+      '@esbuild/linux-mips64el': 0.27.7
+      '@esbuild/linux-ppc64': 0.27.7
+      '@esbuild/linux-riscv64': 0.27.7
+      '@esbuild/linux-s390x': 0.27.7
+      '@esbuild/linux-x64': 0.27.7
+      '@esbuild/netbsd-arm64': 0.27.7
+      '@esbuild/netbsd-x64': 0.27.7
+      '@esbuild/openbsd-arm64': 0.27.7
+      '@esbuild/openbsd-x64': 0.27.7
+      '@esbuild/openharmony-arm64': 0.27.7
+      '@esbuild/sunos-x64': 0.27.7
+      '@esbuild/win32-arm64': 0.27.7
+      '@esbuild/win32-ia32': 0.27.7
+      '@esbuild/win32-x64': 0.27.7
 
   escape-string-regexp@4.0.0: {}
 
-  eslint-compat-utils@0.5.1(eslint@9.9.1):
+  eslint-compat-utils@0.5.1(eslint@10.0.0):
     dependencies:
-      eslint: 9.9.1
-      semver: 7.6.3
+      eslint: 10.0.0
+      semver: 7.8.1
 
-  eslint-config-prettier@9.1.0(eslint@9.9.1):
+  eslint-config-prettier@9.1.0(eslint@10.0.0):
     dependencies:
-      eslint: 9.9.1
+      eslint: 10.0.0
 
-  eslint-plugin-es-x@7.8.0(eslint@9.9.1):
+  eslint-plugin-es-x@7.8.0(eslint@10.0.0):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.9.1)
-      '@eslint-community/regexpp': 4.11.0
-      eslint: 9.9.1
-      eslint-compat-utils: 0.5.1(eslint@9.9.1)
+      '@eslint-community/eslint-utils': 4.9.1(eslint@10.0.0)
+      '@eslint-community/regexpp': 4.12.2
+      eslint: 10.0.0
+      eslint-compat-utils: 0.5.1(eslint@10.0.0)
 
-  eslint-plugin-lube@0.4.3: {}
+  eslint-plugin-lube@0.5.1(eslint@10.0.0):
+    dependencies:
+      eslint: 10.0.0
 
-  eslint-plugin-n@17.9.0(eslint@9.9.1):
+  eslint-plugin-n@17.24.0(eslint@10.0.0)(typescript@5.5.4):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.9.1)
-      enhanced-resolve: 5.17.1
-      eslint: 9.9.1
-      eslint-plugin-es-x: 7.8.0(eslint@9.9.1)
-      get-tsconfig: 4.7.6
-      globals: 15.9.0
+      '@eslint-community/eslint-utils': 4.9.1(eslint@10.0.0)
+      enhanced-resolve: 5.22.1
+      eslint: 10.0.0
+      eslint-plugin-es-x: 7.8.0(eslint@10.0.0)
+      get-tsconfig: 4.14.0
+      globals: 15.15.0
+      globrex: 0.1.2
       ignore: 5.3.2
-      minimatch: 9.0.5
-      semver: 7.6.3
+      semver: 7.8.1
+      ts-declaration-location: 1.0.7(typescript@5.5.4)
+    transitivePeerDependencies:
+      - typescript
 
-  eslint-plugin-svelte@2.38.0(eslint@9.9.1)(svelte@packages+svelte):
+  eslint-plugin-svelte@3.15.0(eslint@10.0.0)(svelte@packages+svelte):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.9.1)
+      '@eslint-community/eslint-utils': 4.9.1(eslint@10.0.0)
       '@jridgewell/sourcemap-codec': 1.5.0
-      debug: 4.3.6
-      eslint: 9.9.1
-      eslint-compat-utils: 0.5.1(eslint@9.9.1)
+      eslint: 10.0.0
       esutils: 2.0.3
-      known-css-properties: 0.30.0
-      postcss: 8.4.47
-      postcss-load-config: 3.1.4(postcss@8.4.47)
-      postcss-safe-parser: 6.0.0(postcss@8.4.47)
-      postcss-selector-parser: 6.1.2
-      semver: 7.6.3
-      svelte-eslint-parser: 0.41.0(svelte@packages+svelte)
+      globals: 16.3.0
+      known-css-properties: 0.37.0
+      postcss: 8.5.9
+      postcss-load-config: 3.1.4(postcss@8.5.9)
+      postcss-safe-parser: 7.0.1(postcss@8.5.9)
+      semver: 7.7.4
+      svelte-eslint-parser: 1.4.1(svelte@packages+svelte)
     optionalDependencies:
       svelte: link:packages/svelte
     transitivePeerDependencies:
-      - supports-color
       - ts-node
 
-  eslint-scope@7.2.2:
+  eslint-scope@8.4.0:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 5.3.0
 
-  eslint-scope@8.0.2:
+  eslint-scope@9.1.0:
     dependencies:
+      '@types/esrecurse': 4.3.1
+      '@types/estree': 1.0.8
       esrecurse: 4.3.0
       estraverse: 5.3.0
 
   eslint-visitor-keys@3.4.3: {}
 
-  eslint-visitor-keys@4.0.0: {}
+  eslint-visitor-keys@4.2.1: {}
 
-  eslint@9.9.1:
+  eslint-visitor-keys@5.0.0: {}
+
+  eslint@10.0.0:
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.9.1)
-      '@eslint-community/regexpp': 4.11.0
-      '@eslint/config-array': 0.18.0
-      '@eslint/eslintrc': 3.1.0
-      '@eslint/js': 9.9.1
+      '@eslint-community/eslint-utils': 4.9.1(eslint@10.0.0)
+      '@eslint-community/regexpp': 4.12.2
+      '@eslint/config-array': 0.23.1
+      '@eslint/config-helpers': 0.5.2
+      '@eslint/core': 1.1.0
+      '@eslint/plugin-kit': 0.6.0
+      '@humanfs/node': 0.16.7
       '@humanwhocodes/module-importer': 1.0.1
-      '@humanwhocodes/retry': 0.3.0
-      '@nodelib/fs.walk': 1.2.8
+      '@humanwhocodes/retry': 0.4.3
+      '@types/estree': 1.0.8
       ajv: 6.12.6
-      chalk: 4.1.2
-      cross-spawn: 7.0.3
-      debug: 4.3.6
+      cross-spawn: 7.0.6
+      debug: 4.4.3
       escape-string-regexp: 4.0.0
-      eslint-scope: 8.0.2
-      eslint-visitor-keys: 4.0.0
-      espree: 10.1.0
-      esquery: 1.5.0
+      eslint-scope: 9.1.0
+      eslint-visitor-keys: 5.0.0
+      espree: 11.1.0
+      esquery: 1.7.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
       file-entry-cache: 8.0.0
@@ -3283,15 +3650,10 @@ snapshots:
       ignore: 5.3.2
       imurmurhash: 0.1.4
       is-glob: 4.0.3
-      is-path-inside: 3.0.3
       json-stable-stringify-without-jsonify: 1.0.1
-      levn: 0.4.1
-      lodash.merge: 4.6.2
-      minimatch: 3.1.2
+      minimatch: 10.1.2
       natural-compare: 1.4.0
       optionator: 0.9.3
-      strip-ansi: 6.0.1
-      text-table: 0.2.0
     transitivePeerDependencies:
       - supports-color
 
@@ -3299,26 +3661,33 @@ snapshots:
 
   espree@10.1.0:
     dependencies:
-      acorn: 8.12.1
-      acorn-jsx: 5.3.2(acorn@8.12.1)
-      eslint-visitor-keys: 4.0.0
+      acorn: 8.16.0
+      acorn-jsx: 5.3.2(acorn@8.16.0)
+      eslint-visitor-keys: 4.2.1
+
+  espree@11.1.0:
+    dependencies:
+      acorn: 8.16.0
+      acorn-jsx: 5.3.2(acorn@8.16.0)
+      eslint-visitor-keys: 5.0.0
 
   espree@9.6.1:
     dependencies:
-      acorn: 8.12.1
-      acorn-jsx: 5.3.2(acorn@8.12.1)
+      acorn: 8.16.0
+      acorn-jsx: 5.3.2(acorn@8.16.0)
       eslint-visitor-keys: 3.4.3
 
   esprima@4.0.1: {}
 
-  esquery@1.5.0:
+  esquery@1.7.0:
     dependencies:
       estraverse: 5.3.0
 
-  esrap@1.2.3:
+  esrap@2.2.9(@typescript-eslint/types@8.59.4):
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
-      '@types/estree': 1.0.6
+    optionalDependencies:
+      '@typescript-eslint/types': 8.59.4
 
   esrecurse@4.3.0:
     dependencies:
@@ -3330,39 +3699,23 @@ snapshots:
 
   estree-walker@3.0.3:
     dependencies:
-      '@types/estree': 1.0.6
+      '@types/estree': 1.0.8
 
   esutils@2.0.3: {}
 
-  execa@8.0.1:
-    dependencies:
-      cross-spawn: 7.0.3
-      get-stream: 8.0.1
-      human-signals: 5.0.0
-      is-stream: 3.0.0
-      merge-stream: 2.0.0
-      npm-run-path: 5.2.0
-      onetime: 6.0.0
-      signal-exit: 4.1.0
-      strip-final-newline: 3.0.0
+  expect-type@1.3.0: {}
 
   extendable-error@0.1.7: {}
 
-  external-editor@3.1.0:
-    dependencies:
-      chardet: 0.7.0
-      iconv-lite: 0.4.24
-      tmp: 0.0.33
-
   fast-deep-equal@3.1.3: {}
 
-  fast-glob@3.3.2:
+  fast-glob@3.3.3:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
       '@nodelib/fs.walk': 1.2.8
       glob-parent: 5.1.2
       merge2: 1.4.1
-      micromatch: 4.0.5
+      micromatch: 4.0.8
 
   fast-json-stable-stringify@2.1.0: {}
 
@@ -3372,15 +3725,15 @@ snapshots:
     dependencies:
       reusify: 1.0.4
 
-  fdir@6.3.0(picomatch@4.0.2):
+  fdir@6.5.0(picomatch@4.0.4):
     optionalDependencies:
-      picomatch: 4.0.2
+      picomatch: 4.0.4
 
   file-entry-cache@8.0.0:
     dependencies:
       flat-cache: 4.0.1
 
-  fill-range@7.0.1:
+  fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
 
@@ -3401,23 +3754,12 @@ snapshots:
 
   flatted@3.2.9: {}
 
-  foreground-child@3.3.0:
-    dependencies:
-      cross-spawn: 7.0.3
-      signal-exit: 4.1.0
-
   form-data@4.0.0:
     dependencies:
       asynckit: 0.4.0
       combined-stream: 1.0.8
       mime-types: 2.1.35
 
-  fs-extra@11.2.0:
-    dependencies:
-      graceful-fs: 4.2.11
-      jsonfile: 6.1.0
-      universalify: 2.0.1
-
   fs-extra@7.0.1:
     dependencies:
       graceful-fs: 4.2.11
@@ -3438,11 +3780,7 @@ snapshots:
 
   function-bind@1.1.2: {}
 
-  get-func-name@2.0.2: {}
-
-  get-stream@8.0.1: {}
-
-  get-tsconfig@4.7.6:
+  get-tsconfig@4.14.0:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
@@ -3454,26 +3792,17 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
-  glob@10.4.5:
-    dependencies:
-      foreground-child: 3.3.0
-      jackspeak: 3.4.3
-      minimatch: 9.0.5
-      minipass: 7.1.2
-      package-json-from-dist: 1.0.0
-      path-scurry: 1.11.1
+  globals@15.15.0: {}
 
-  globals@14.0.0: {}
+  globals@16.3.0: {}
 
-  globals@15.9.0: {}
-
-  globalyzer@0.1.0: {}
+  globals@17.3.0: {}
 
   globby@11.1.0:
     dependencies:
       array-union: 2.1.0
       dir-glob: 3.0.1
-      fast-glob: 3.3.2
+      fast-glob: 3.3.3
       ignore: 5.3.2
       merge2: 1.4.1
       slash: 3.0.0
@@ -3482,8 +3811,6 @@ snapshots:
 
   graceful-fs@4.2.11: {}
 
-  graphemer@1.4.0: {}
-
   has-flag@4.0.0: {}
 
   hasown@2.0.0:
@@ -3499,44 +3826,39 @@ snapshots:
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.1
-      debug: 4.3.6
+      debug: 4.4.3
     transitivePeerDependencies:
       - supports-color
 
   https-proxy-agent@7.0.5:
     dependencies:
       agent-base: 7.1.1
-      debug: 4.3.6
+      debug: 4.4.3
     transitivePeerDependencies:
       - supports-color
 
-  human-id@1.0.2: {}
+  human-id@4.1.1: {}
 
-  human-signals@5.0.0: {}
-
-  iconv-lite@0.4.24:
+  iconv-lite@0.6.3:
     dependencies:
       safer-buffer: 2.1.2
 
-  iconv-lite@0.6.3:
+  iconv-lite@0.7.0:
     dependencies:
       safer-buffer: 2.1.2
 
   ignore@5.3.2: {}
 
-  immutable@4.3.4:
-    optional: true
+  ignore@7.0.5: {}
 
-  import-fresh@3.3.0:
-    dependencies:
-      parent-module: 1.0.1
-      resolve-from: 4.0.0
+  immutable@4.3.8:
+    optional: true
 
   imurmurhash@0.1.4: {}
 
   is-binary-path@2.1.0:
     dependencies:
-      binary-extensions: 2.2.0
+      binary-extensions: 2.3.0
     optional: true
 
   is-core-module@2.13.1:
@@ -3547,8 +3869,6 @@ snapshots:
 
   is-extglob@2.1.1: {}
 
-  is-fullwidth-code-point@3.0.0: {}
-
   is-glob@4.0.3:
     dependencies:
       is-extglob: 2.1.1
@@ -3561,19 +3881,15 @@ snapshots:
 
   is-number@7.0.0: {}
 
-  is-path-inside@3.0.3: {}
-
   is-potential-custom-element-name@1.0.1: {}
 
   is-reference@1.2.1:
     dependencies:
-      '@types/estree': 1.0.6
+      '@types/estree': 1.0.8
 
   is-reference@3.0.3:
     dependencies:
-      '@types/estree': 1.0.6
-
-  is-stream@3.0.0: {}
+      '@types/estree': 1.0.8
 
   is-subdir@1.2.0:
     dependencies:
@@ -3595,31 +3911,19 @@ snapshots:
       make-dir: 4.0.0
       supports-color: 7.2.0
 
-  istanbul-lib-source-maps@5.0.6:
-    dependencies:
-      '@jridgewell/trace-mapping': 0.3.25
-      debug: 4.3.6
-      istanbul-lib-coverage: 3.2.2
-    transitivePeerDependencies:
-      - supports-color
-
-  istanbul-reports@3.1.7:
+  istanbul-reports@3.2.0:
     dependencies:
       html-escaper: 2.0.2
       istanbul-lib-report: 3.0.1
 
-  jackspeak@3.4.3:
-    dependencies:
-      '@isaacs/cliui': 8.0.2
-    optionalDependencies:
-      '@pkgjs/parseargs': 0.11.0
+  js-tokens@10.0.0: {}
 
-  js-yaml@3.14.1:
+  js-yaml@3.14.2:
     dependencies:
       argparse: 1.0.10
       esprima: 4.0.1
 
-  js-yaml@4.1.0:
+  js-yaml@4.1.1:
     dependencies:
       argparse: 2.0.1
 
@@ -3661,19 +3965,13 @@ snapshots:
     optionalDependencies:
       graceful-fs: 4.2.11
 
-  jsonfile@6.1.0:
-    dependencies:
-      universalify: 2.0.1
-    optionalDependencies:
-      graceful-fs: 4.2.11
-
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
 
   kleur@4.1.5: {}
 
-  known-css-properties@0.30.0: {}
+  known-css-properties@0.37.0: {}
 
   levn@0.4.1:
     dependencies:
@@ -3734,43 +4032,32 @@ snapshots:
     dependencies:
       p-locate: 5.0.0
 
-  lodash.merge@4.6.2: {}
-
   lodash.startcase@4.4.0: {}
 
-  loupe@3.1.1:
-    dependencies:
-      get-func-name: 2.0.2
-
-  lru-cache@10.4.3: {}
-
-  lru-cache@4.1.5:
+  magic-string@0.30.17:
     dependencies:
-      pseudomap: 1.0.2
-      yallist: 2.1.2
+      '@jridgewell/sourcemap-codec': 1.5.0
 
-  magic-string@0.30.11:
+  magic-string@0.30.21:
     dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/sourcemap-codec': 1.5.5
 
-  magicast@0.3.4:
+  magicast@0.5.3:
     dependencies:
-      '@babel/parser': 7.25.4
-      '@babel/types': 7.25.4
+      '@babel/parser': 7.29.3
+      '@babel/types': 7.29.0
       source-map-js: 1.2.1
 
   make-dir@4.0.0:
     dependencies:
-      semver: 7.6.3
-
-  merge-stream@2.0.0: {}
+      semver: 7.7.4
 
   merge2@1.4.1: {}
 
-  micromatch@4.0.5:
+  micromatch@4.0.8:
     dependencies:
-      braces: 3.0.2
-      picomatch: 2.3.1
+      braces: 3.0.3
+      picomatch: 2.3.2
 
   mime-db@1.52.0: {}
 
@@ -3778,25 +4065,21 @@ snapshots:
     dependencies:
       mime-db: 1.52.0
 
-  mimic-fn@4.0.0: {}
-
-  minimatch@3.1.2:
+  minimatch@10.1.2:
     dependencies:
-      brace-expansion: 1.1.11
+      '@isaacs/brace-expansion': 5.0.1
 
   minimatch@9.0.5:
     dependencies:
-      brace-expansion: 2.0.1
-
-  minipass@7.1.2: {}
+      brace-expansion: 2.0.2
 
   mri@1.2.0: {}
 
   mrmime@2.0.0: {}
 
-  ms@2.1.2: {}
+  ms@2.1.3: {}
 
-  nanoid@3.3.7: {}
+  nanoid@3.3.11: {}
 
   natural-compare@1.4.0: {}
 
@@ -3807,22 +4090,18 @@ snapshots:
   normalize-path@3.0.0:
     optional: true
 
-  npm-run-path@5.2.0:
-    dependencies:
-      path-key: 4.0.0
-
   nwsapi@2.2.12: {}
 
-  onetime@6.0.0:
-    dependencies:
-      mimic-fn: 4.0.0
+  obug@2.1.1: {}
 
-  open@10.1.0:
+  ohash@2.0.11: {}
+
+  open@10.2.0:
     dependencies:
       default-browser: 5.2.1
       define-lazy-prop: 3.0.0
       is-inside-container: 1.0.0
-      is-wsl: 3.1.0
+      wsl-utils: 0.1.0
 
   optionator@0.9.3:
     dependencies:
@@ -3833,8 +4112,6 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
-  os-tmpdir@1.0.2: {}
-
   outdent@0.5.0: {}
 
   p-filter@2.1.0:
@@ -3861,13 +4138,9 @@ snapshots:
 
   p-try@2.2.0: {}
 
-  package-json-from-dist@1.0.0: {}
-
-  package-manager-detector@0.2.0: {}
-
-  parent-module@1.0.1:
+  package-manager-detector@0.2.11:
     dependencies:
-      callsites: 3.1.0
+      quansync: 0.2.11
 
   parse5@7.1.2:
     dependencies:
@@ -3877,36 +4150,27 @@ snapshots:
 
   path-key@3.1.1: {}
 
-  path-key@4.0.0: {}
-
   path-parse@1.0.7: {}
 
-  path-scurry@1.11.1:
-    dependencies:
-      lru-cache: 10.4.3
-      minipass: 7.1.2
-
   path-type@4.0.0: {}
 
-  pathe@1.1.2: {}
+  pathe@2.0.3: {}
 
-  pathval@2.0.0: {}
+  perfect-debounce@2.0.0: {}
 
-  perfect-debounce@1.0.0: {}
+  picocolors@1.1.1: {}
 
-  picocolors@1.1.0: {}
+  picomatch@2.3.2: {}
 
-  picomatch@2.3.1: {}
-
-  picomatch@4.0.2: {}
+  picomatch@4.0.4: {}
 
   pify@4.0.1: {}
 
-  playwright-core@1.46.1: {}
+  playwright-core@1.60.0: {}
 
-  playwright@1.46.1:
+  playwright@1.60.0:
     dependencies:
-      playwright-core: 1.46.1
+      playwright-core: 1.60.0
     optionalDependencies:
       fsevents: 2.3.2
 
@@ -3915,35 +4179,35 @@ snapshots:
       '@polka/url': 1.0.0-next.25
       trouter: 4.0.0
 
-  postcss-load-config@3.1.4(postcss@8.4.47):
+  postcss-load-config@3.1.4(postcss@8.5.9):
     dependencies:
       lilconfig: 2.1.0
       yaml: 1.10.2
     optionalDependencies:
-      postcss: 8.4.47
+      postcss: 8.5.9
 
-  postcss-safe-parser@6.0.0(postcss@8.4.47):
+  postcss-safe-parser@7.0.1(postcss@8.5.9):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.5.9
 
-  postcss-scss@4.0.9(postcss@8.4.47):
+  postcss-scss@4.0.9(postcss@8.5.9):
     dependencies:
-      postcss: 8.4.47
+      postcss: 8.5.9
 
-  postcss-selector-parser@6.1.2:
+  postcss-selector-parser@7.1.0:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
-  postcss@8.4.47:
+  postcss@8.5.9:
     dependencies:
-      nanoid: 3.3.7
-      picocolors: 1.1.0
+      nanoid: 3.3.11
+      picocolors: 1.1.1
       source-map-js: 1.2.1
 
   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
@@ -3952,10 +4216,10 @@ snapshots:
 
   prettier@3.2.4: {}
 
-  pseudomap@1.0.2: {}
-
   punycode@2.3.1: {}
 
+  quansync@0.2.11: {}
+
   queue-microtask@1.2.3: {}
 
   randombytes@2.1.0:
@@ -3965,21 +4229,17 @@ snapshots:
   read-yaml-file@1.1.0:
     dependencies:
       graceful-fs: 4.2.11
-      js-yaml: 3.14.1
+      js-yaml: 3.14.2
       pify: 4.0.1
       strip-bom: 3.0.0
 
   readdirp@3.6.0:
     dependencies:
-      picomatch: 2.3.1
+      picomatch: 2.3.2
     optional: true
 
-  regenerator-runtime@0.14.1: {}
-
   regexparam@3.0.0: {}
 
-  resolve-from@4.0.0: {}
-
   resolve-from@5.0.0: {}
 
   resolve-pkg-maps@1.0.0: {}
@@ -3992,26 +4252,35 @@ snapshots:
 
   reusify@1.0.4: {}
 
-  rollup@4.22.4:
+  rollup@4.60.1:
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.8
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.22.4
-      '@rollup/rollup-android-arm64': 4.22.4
-      '@rollup/rollup-darwin-arm64': 4.22.4
-      '@rollup/rollup-darwin-x64': 4.22.4
-      '@rollup/rollup-linux-arm-gnueabihf': 4.22.4
-      '@rollup/rollup-linux-arm-musleabihf': 4.22.4
-      '@rollup/rollup-linux-arm64-gnu': 4.22.4
-      '@rollup/rollup-linux-arm64-musl': 4.22.4
-      '@rollup/rollup-linux-powerpc64le-gnu': 4.22.4
-      '@rollup/rollup-linux-riscv64-gnu': 4.22.4
-      '@rollup/rollup-linux-s390x-gnu': 4.22.4
-      '@rollup/rollup-linux-x64-gnu': 4.22.4
-      '@rollup/rollup-linux-x64-musl': 4.22.4
-      '@rollup/rollup-win32-arm64-msvc': 4.22.4
-      '@rollup/rollup-win32-ia32-msvc': 4.22.4
-      '@rollup/rollup-win32-x64-msvc': 4.22.4
+      '@rollup/rollup-android-arm-eabi': 4.60.1
+      '@rollup/rollup-android-arm64': 4.60.1
+      '@rollup/rollup-darwin-arm64': 4.60.1
+      '@rollup/rollup-darwin-x64': 4.60.1
+      '@rollup/rollup-freebsd-arm64': 4.60.1
+      '@rollup/rollup-freebsd-x64': 4.60.1
+      '@rollup/rollup-linux-arm-gnueabihf': 4.60.1
+      '@rollup/rollup-linux-arm-musleabihf': 4.60.1
+      '@rollup/rollup-linux-arm64-gnu': 4.60.1
+      '@rollup/rollup-linux-arm64-musl': 4.60.1
+      '@rollup/rollup-linux-loong64-gnu': 4.60.1
+      '@rollup/rollup-linux-loong64-musl': 4.60.1
+      '@rollup/rollup-linux-ppc64-gnu': 4.60.1
+      '@rollup/rollup-linux-ppc64-musl': 4.60.1
+      '@rollup/rollup-linux-riscv64-gnu': 4.60.1
+      '@rollup/rollup-linux-riscv64-musl': 4.60.1
+      '@rollup/rollup-linux-s390x-gnu': 4.60.1
+      '@rollup/rollup-linux-x64-gnu': 4.60.1
+      '@rollup/rollup-linux-x64-musl': 4.60.1
+      '@rollup/rollup-openbsd-x64': 4.60.1
+      '@rollup/rollup-openharmony-arm64': 4.60.1
+      '@rollup/rollup-win32-arm64-msvc': 4.60.1
+      '@rollup/rollup-win32-ia32-msvc': 4.60.1
+      '@rollup/rollup-win32-x64-gnu': 4.60.1
+      '@rollup/rollup-win32-x64-msvc': 4.60.1
       fsevents: 2.3.3
 
   rrweb-cssom@0.7.1: {}
@@ -4032,8 +4301,8 @@ snapshots:
 
   sass@1.70.0:
     dependencies:
-      chokidar: 3.5.3
-      immutable: 4.3.4
+      chokidar: 3.6.0
+      immutable: 4.3.8
       source-map-js: 1.2.1
     optional: true
 
@@ -4041,31 +4310,25 @@ snapshots:
     dependencies:
       xmlchars: 2.2.0
 
-  semver@7.6.3: {}
+  semver@7.7.4: {}
+
+  semver@7.8.1: {}
 
   serialize-javascript@6.0.2:
     dependencies:
       randombytes: 2.1.0
 
-  shebang-command@1.2.0:
-    dependencies:
-      shebang-regex: 1.0.0
-
   shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0
 
-  shebang-regex@1.0.0: {}
-
   shebang-regex@3.0.0: {}
 
   siginfo@2.0.0: {}
 
-  signal-exit@3.0.7: {}
-
   signal-exit@4.1.0: {}
 
-  sirv@2.0.4:
+  sirv@3.0.2:
     dependencies:
       '@polka/url': 1.0.0-next.25
       mrmime: 2.0.0
@@ -4086,92 +4349,63 @@ snapshots:
 
   source-map@0.7.4: {}
 
-  spawndamnit@2.0.0:
+  spawndamnit@3.0.1:
     dependencies:
-      cross-spawn: 5.1.0
-      signal-exit: 3.0.7
+      cross-spawn: 7.0.6
+      signal-exit: 4.1.0
 
   sprintf-js@1.0.3: {}
 
   stackback@0.0.2: {}
 
-  std-env@3.7.0: {}
-
-  string-width@4.2.3:
-    dependencies:
-      emoji-regex: 8.0.0
-      is-fullwidth-code-point: 3.0.0
-      strip-ansi: 6.0.1
-
-  string-width@5.1.2:
-    dependencies:
-      eastasianwidth: 0.2.0
-      emoji-regex: 9.2.2
-      strip-ansi: 7.1.0
+  std-env@4.1.0: {}
 
   strip-ansi@6.0.1:
     dependencies:
       ansi-regex: 5.0.1
 
-  strip-ansi@7.1.0:
-    dependencies:
-      ansi-regex: 6.0.1
-
   strip-bom@3.0.0: {}
 
-  strip-final-newline@3.0.0: {}
-
-  strip-json-comments@3.1.1: {}
-
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelte-eslint-parser@0.41.0(svelte@packages+svelte):
+  svelte-eslint-parser@1.4.1(svelte@packages+svelte):
     dependencies:
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
-      postcss: 8.4.47
-      postcss-scss: 4.0.9(postcss@8.4.47)
+      eslint-scope: 8.4.0
+      eslint-visitor-keys: 4.2.1
+      espree: 10.1.0
+      postcss: 8.5.9
+      postcss-scss: 4.0.9(postcss@8.5.9)
+      postcss-selector-parser: 7.1.0
     optionalDependencies:
       svelte: link:packages/svelte
 
   symbol-tree@3.2.4: {}
 
-  tapable@2.2.1: {}
+  tapable@2.3.3: {}
 
   term-size@2.2.1: {}
 
   terser@5.27.0:
     dependencies:
       '@jridgewell/source-map': 0.3.6
-      acorn: 8.12.1
+      acorn: 8.16.0
       commander: 2.20.3
       source-map-support: 0.5.21
 
-  test-exclude@7.0.1:
-    dependencies:
-      '@istanbuljs/schema': 0.1.3
-      glob: 10.4.5
-      minimatch: 9.0.5
-
-  text-table@0.2.0: {}
-
-  tiny-glob@0.2.9:
-    dependencies:
-      globalyzer: 0.1.0
-      globrex: 0.1.2
-
   tinybench@2.9.0: {}
 
-  tinypool@1.0.1: {}
+  tinyexec@1.1.2: {}
 
-  tinyrainbow@1.2.0: {}
+  tinyglobby@0.2.15:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
 
-  tinyspy@3.0.0: {}
+  tinyrainbow@3.1.0: {}
 
   tldts-core@6.1.64: {}
 
@@ -4179,12 +4413,6 @@ snapshots:
     dependencies:
       tldts-core: 6.1.64
 
-  tmp@0.0.33:
-    dependencies:
-      os-tmpdir: 1.0.2
-
-  to-fast-properties@2.0.0: {}
-
   to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0
@@ -4209,28 +4437,42 @@ snapshots:
     dependencies:
       typescript: 5.5.4
 
+  ts-api-utils@2.4.0(typescript@5.5.4):
+    dependencies:
+      typescript: 5.5.4
+
+  ts-declaration-location@1.0.7(typescript@5.5.4):
+    dependencies:
+      picomatch: 4.0.4
+      typescript: 5.5.4
+
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
 
-  typescript-eslint@8.2.0(eslint@9.9.1)(typescript@5.5.4):
+  typescript-eslint@8.56.0(eslint@10.0.0)(typescript@5.5.4):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 8.2.0(@typescript-eslint/parser@8.2.0(eslint@9.9.1)(typescript@5.5.4))(eslint@9.9.1)(typescript@5.5.4)
-      '@typescript-eslint/parser': 8.2.0(eslint@9.9.1)(typescript@5.5.4)
-      '@typescript-eslint/utils': 8.2.0(eslint@9.9.1)(typescript@5.5.4)
-    optionalDependencies:
+      '@typescript-eslint/eslint-plugin': 8.56.0(@typescript-eslint/parser@8.56.0(eslint@10.0.0)(typescript@5.5.4))(eslint@10.0.0)(typescript@5.5.4)
+      '@typescript-eslint/parser': 8.56.0(eslint@10.0.0)(typescript@5.5.4)
+      '@typescript-eslint/typescript-estree': 8.56.0(typescript@5.5.4)
+      '@typescript-eslint/utils': 8.56.0(eslint@10.0.0)(typescript@5.5.4)
+      eslint: 10.0.0
       typescript: 5.5.4
     transitivePeerDependencies:
-      - eslint
       - supports-color
 
   typescript@5.5.4: {}
 
-  undici-types@5.26.5: {}
+  undici-types@6.21.0: {}
+
+  undici-types@7.12.0: {}
 
   universalify@0.1.2: {}
 
-  universalify@2.0.1: {}
+  unplugin-utils@0.3.0:
+    dependencies:
+      pathe: 2.0.3
+      picomatch: 4.0.4
 
   uri-js@4.4.1:
     dependencies:
@@ -4238,96 +4480,109 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
+  uuid@11.1.0: {}
+
   v8-natives@1.2.5: {}
 
-  vite-node@2.0.5(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0):
+  vite-dev-rpc@1.1.0(vite@7.3.2(@types/node@24.5.2)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)):
     dependencies:
-      cac: 6.7.14
-      debug: 4.3.6
-      pathe: 1.1.2
-      tinyrainbow: 1.2.0
-      vite: 5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
-    transitivePeerDependencies:
-      - '@types/node'
-      - less
-      - lightningcss
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-
-  vite-plugin-inspect@0.8.4(rollup@4.22.4)(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)):
-    dependencies:
-      '@antfu/utils': 0.7.8
-      '@rollup/pluginutils': 5.1.0(rollup@4.22.4)
-      debug: 4.3.6
-      error-stack-parser-es: 0.1.1
-      fs-extra: 11.2.0
-      open: 10.1.0
-      perfect-debounce: 1.0.0
-      picocolors: 1.1.0
-      sirv: 2.0.4
-      vite: 5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
+      birpc: 2.5.0
+      vite: 7.3.2(@types/node@24.5.2)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
+      vite-hot-client: 2.1.0(vite@7.3.2(@types/node@24.5.2)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
+
+  vite-hot-client@2.1.0(vite@7.3.2(@types/node@24.5.2)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)):
+    dependencies:
+      vite: 7.3.2(@types/node@24.5.2)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
+
+  vite-plugin-devtools-json@1.0.0(vite@7.3.2(@types/node@24.5.2)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)):
+    dependencies:
+      uuid: 11.1.0
+      vite: 7.3.2(@types/node@24.5.2)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
+
+  vite-plugin-inspect@11.3.3(vite@7.3.2(@types/node@24.5.2)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)):
+    dependencies:
+      ansis: 4.1.0
+      debug: 4.4.3
+      error-stack-parser-es: 1.0.5
+      ohash: 2.0.11
+      open: 10.2.0
+      perfect-debounce: 2.0.0
+      sirv: 3.0.2
+      unplugin-utils: 0.3.0
+      vite: 7.3.2(@types/node@24.5.2)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
+      vite-dev-rpc: 1.1.0(vite@7.3.2(@types/node@24.5.2)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
     transitivePeerDependencies:
-      - rollup
       - supports-color
 
-  vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0):
+  vite@7.3.2(@types/node@20.19.17)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0):
+    dependencies:
+      esbuild: 0.27.7
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
+      postcss: 8.5.9
+      rollup: 4.60.1
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 20.19.17
+      fsevents: 2.3.3
+      lightningcss: 1.23.0
+      sass: 1.70.0
+      terser: 5.27.0
+
+  vite@7.3.2(@types/node@24.5.2)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0):
     dependencies:
-      esbuild: 0.21.5
-      postcss: 8.4.47
-      rollup: 4.22.4
+      esbuild: 0.27.7
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
+      postcss: 8.5.9
+      rollup: 4.60.1
+      tinyglobby: 0.2.15
     optionalDependencies:
-      '@types/node': 20.12.7
+      '@types/node': 24.5.2
       fsevents: 2.3.3
       lightningcss: 1.23.0
       sass: 1.70.0
       terser: 5.27.0
 
-  vitefu@0.2.5(vite@5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)):
+  vitefu@1.1.1(vite@7.3.2(@types/node@24.5.2)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)):
     optionalDependencies:
-      vite: 5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
-
-  vitest@2.0.5(@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
-      '@vitest/expect': 2.0.5
-      '@vitest/pretty-format': 2.0.5
-      '@vitest/runner': 2.0.5
-      '@vitest/snapshot': 2.0.5
-      '@vitest/spy': 2.0.5
-      '@vitest/utils': 2.0.5
-      chai: 5.1.1
-      debug: 4.3.6
-      execa: 8.0.1
-      magic-string: 0.30.11
-      pathe: 1.1.2
-      std-env: 3.7.0
+      vite: 7.3.2(@types/node@24.5.2)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
+
+  vitest@4.1.7(@types/node@20.19.17)(@vitest/coverage-v8@4.1.7)(jsdom@25.0.1)(vite@7.3.2(@types/node@20.19.17)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)):
+    dependencies:
+      '@vitest/expect': 4.1.7
+      '@vitest/mocker': 4.1.7(vite@7.3.2(@types/node@20.19.17)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
+      '@vitest/pretty-format': 4.1.7
+      '@vitest/runner': 4.1.7
+      '@vitest/snapshot': 4.1.7
+      '@vitest/spy': 4.1.7
+      '@vitest/utils': 4.1.7
+      es-module-lexer: 2.1.0
+      expect-type: 1.3.0
+      magic-string: 0.30.21
+      obug: 2.1.1
+      pathe: 2.0.3
+      picomatch: 4.0.4
+      std-env: 4.1.0
       tinybench: 2.9.0
-      tinypool: 1.0.1
-      tinyrainbow: 1.2.0
-      vite: 5.4.6(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
-      vite-node: 2.0.5(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
+      tinyexec: 1.1.2
+      tinyglobby: 0.2.15
+      tinyrainbow: 3.1.0
+      vite: 7.3.2(@types/node@20.19.17)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 20.12.7
+      '@types/node': 20.19.17
+      '@vitest/coverage-v8': 4.1.7(vitest@4.1.7)
       jsdom: 25.0.1
     transitivePeerDependencies:
-      - less
-      - lightningcss
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
+      - msw
 
   w3c-xmlserializer@5.0.0:
     dependencies:
       xml-name-validator: 5.0.0
 
+  web-features@3.29.0: {}
+
   webidl-conversions@3.0.1: {}
 
   webidl-conversions@7.0.0: {}
@@ -4348,10 +4603,6 @@ snapshots:
       tr46: 0.0.3
       webidl-conversions: 3.0.1
 
-  which@1.3.1:
-    dependencies:
-      isexe: 2.0.0
-
   which@2.0.2:
     dependencies:
       isexe: 2.0.0
@@ -4361,26 +4612,16 @@ snapshots:
       siginfo: 2.0.0
       stackback: 0.0.2
 
-  wrap-ansi@7.0.0:
-    dependencies:
-      ansi-styles: 4.3.0
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
+  ws@8.18.0: {}
 
-  wrap-ansi@8.1.0:
+  wsl-utils@0.1.0:
     dependencies:
-      ansi-styles: 6.2.1
-      string-width: 5.1.2
-      strip-ansi: 7.1.0
-
-  ws@8.18.0: {}
+      is-wsl: 3.1.0
 
   xml-name-validator@5.0.0: {}
 
   xmlchars@2.2.0: {}
 
-  yallist@2.1.2: {}
-
   yaml@1.10.2: {}
 
   yocto-queue@0.1.0: {}
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-xhtml-environment.ts b/vitest-xhtml-environment.ts
new file mode 100644
index 0000000000..4535f5a5e3
--- /dev/null
+++ b/vitest-xhtml-environment.ts
@@ -0,0 +1,19 @@
+import { type Environment, builtinEnvironments } from 'vitest/runtime';
+
+const xhtml_page = `<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body></body></html>`;
+
+export default <Environment>{
+	name: 'jsdom-xhtml',
+	viteEnvironment: 'client',
+	setup(global, { jsdom = {} }) {
+		return builtinEnvironments.jsdom.setup(global, {
+			jsdom: {
+				...jsdom,
+				html: xhtml_page,
+				contentType: 'application/xhtml+xml'
+			}
+		});
+	}
+};
diff --git a/vitest.config.js b/vitest.config.js
index caeda27e30..116dfae9d8 100644
--- a/vitest.config.js
+++ b/vitest.config.js
@@ -29,6 +29,11 @@ export default defineConfig({
 	test: {
 		dir: '.',
 		reporters: ['dot'],
+		// A handful of dev-mode tests trigger Svelte's `effect_update_depth_exceeded`
+		// guard, which involves ~1000 Error objects per flush for stack tracking —
+		// slow enough under vitest 4's deeper async stacks (and CI's slower workers)
+		// to overrun the 5s default.
+		testTimeout: 30_000,
 		include: [
 			'packages/svelte/**/*.test.ts',
 			'packages/svelte/tests/*/test.ts',
@@ -39,7 +44,7 @@ export default defineConfig({
 			provider: 'v8',
 			reporter: ['lcov', 'html'],
 			include: ['packages/svelte/src/**'],
-			reportsDirectory: 'sites/svelte-5-preview/static/coverage',
+			reportsDirectory: 'coverage',
 			reportOnFailure: true
 		}
 	}