From 8fb48eda3f673af1c291f6449523a3385c899a82 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 18 Oct 2024 21:35:51 -0400
Subject: [PATCH 01/19] rename

---
 .../01-contenteditable-bindings/+assets/app-a/src/lib/App.svelte  | 0
 .../01-contenteditable-bindings/+assets/app-b/src/lib/App.svelte  | 0
 .../01-contenteditable-bindings/index.md                          | 0
 .../02-each-block-bindings/+assets/app-a/src/lib/App.svelte       | 0
 .../02-each-block-bindings/+assets/app-b/src/lib/App.svelte       | 0
 .../02-each-block-bindings/index.md                               | 0
 .../03-media-elements/+assets/app-a/src/lib/App.svelte            | 0
 .../03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte    | 0
 .../03-media-elements/+assets/app-a/src/lib/pause.svg             | 0
 .../03-media-elements/+assets/app-a/src/lib/play.svg              | 0
 .../03-media-elements/+assets/app-a/src/lib/tracks.js             | 0
 .../03-media-elements/+assets/app-b/src/lib/AudioPlayer.svelte    | 0
 .../03-media-elements/index.md                                    | 0
 .../04-dimensions/+assets/app-a/src/lib/App.svelte                | 0
 .../04-dimensions/+assets/app-b/src/lib/App.svelte                | 0
 .../{05-bindings => 05-advanced-bindings}/04-dimensions/index.md  | 0
 .../05-bind-this/+assets/app-a/src/lib/App.svelte                 | 0
 .../05-bind-this/+assets/app-a/src/lib/gradient.js                | 0
 .../05-bind-this/+assets/app-a/src/lib/svelte-logo-mask.svg       | 0
 .../05-bind-this/+assets/app-b/src/lib/App.svelte                 | 0
 .../{05-bindings => 05-advanced-bindings}/05-bind-this/index.md   | 0
 .../06-component-bindings/+assets/app-a/src/lib/App.svelte        | 0
 .../06-component-bindings/+assets/app-a/src/lib/Keypad.svelte     | 0
 .../06-component-bindings/+assets/app-b/src/lib/App.svelte        | 0
 .../06-component-bindings/index.md                                | 0
 .../07-component-this/+assets/app-a/src/lib/App.svelte            | 0
 .../07-component-this/+assets/app-a/src/lib/Canvas.svelte         | 0
 .../07-component-this/+assets/app-a/src/lib/actions.js            | 0
 .../07-component-this/+assets/app-b/src/lib/App.svelte            | 0
 .../07-component-this/+assets/app-b/src/lib/Canvas.svelte         | 0
 .../07-component-this/index.md                                    | 0
 .../{05-bindings => 05-advanced-bindings}/index.md                | 0
 32 files changed, 0 insertions(+), 0 deletions(-)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/01-contenteditable-bindings/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/01-contenteditable-bindings/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/01-contenteditable-bindings/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/02-each-block-bindings/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/02-each-block-bindings/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/02-each-block-bindings/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/03-media-elements/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/03-media-elements/+assets/app-a/src/lib/pause.svg (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/03-media-elements/+assets/app-a/src/lib/play.svg (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/03-media-elements/+assets/app-a/src/lib/tracks.js (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/03-media-elements/+assets/app-b/src/lib/AudioPlayer.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/03-media-elements/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/04-dimensions/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/04-dimensions/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/04-dimensions/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/05-bind-this/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/05-bind-this/+assets/app-a/src/lib/gradient.js (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/05-bind-this/+assets/app-a/src/lib/svelte-logo-mask.svg (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/05-bind-this/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/05-bind-this/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/06-component-bindings/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/06-component-bindings/+assets/app-a/src/lib/Keypad.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/06-component-bindings/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/06-component-bindings/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/07-component-this/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/07-component-this/+assets/app-a/src/lib/Canvas.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/07-component-this/+assets/app-a/src/lib/actions.js (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/07-component-this/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/07-component-this/+assets/app-b/src/lib/Canvas.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/07-component-this/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-bindings => 05-advanced-bindings}/index.md (100%)

diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/01-contenteditable-bindings/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/01-contenteditable-bindings/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/01-contenteditable-bindings/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/01-contenteditable-bindings/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/01-contenteditable-bindings/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/01-contenteditable-bindings/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/01-contenteditable-bindings/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/01-contenteditable-bindings/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/01-contenteditable-bindings/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/01-contenteditable-bindings/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/01-contenteditable-bindings/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/01-contenteditable-bindings/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/02-each-block-bindings/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/02-each-block-bindings/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/+assets/app-a/src/lib/pause.svg b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-a/src/lib/pause.svg
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/+assets/app-a/src/lib/pause.svg
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-a/src/lib/pause.svg
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/+assets/app-a/src/lib/play.svg b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-a/src/lib/play.svg
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/+assets/app-a/src/lib/play.svg
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-a/src/lib/play.svg
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/+assets/app-a/src/lib/tracks.js b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-a/src/lib/tracks.js
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/+assets/app-a/src/lib/tracks.js
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-a/src/lib/tracks.js
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/+assets/app-b/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-b/src/lib/AudioPlayer.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/+assets/app-b/src/lib/AudioPlayer.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-b/src/lib/AudioPlayer.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/04-dimensions/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/04-dimensions/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/04-dimensions/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/04-dimensions/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/04-dimensions/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/04-dimensions/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/04-dimensions/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/04-dimensions/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/04-dimensions/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/04-dimensions/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/04-dimensions/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/04-dimensions/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/+assets/app-a/src/lib/gradient.js b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/+assets/app-a/src/lib/gradient.js
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/+assets/app-a/src/lib/gradient.js
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/+assets/app-a/src/lib/gradient.js
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/+assets/app-a/src/lib/svelte-logo-mask.svg b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/+assets/app-a/src/lib/svelte-logo-mask.svg
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/+assets/app-a/src/lib/svelte-logo-mask.svg
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/+assets/app-a/src/lib/svelte-logo-mask.svg
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/+assets/app-a/src/lib/Keypad.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-a/src/lib/Keypad.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/+assets/app-a/src/lib/Keypad.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-a/src/lib/Keypad.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/+assets/app-a/src/lib/Canvas.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-a/src/lib/Canvas.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/+assets/app-a/src/lib/Canvas.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-a/src/lib/Canvas.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/+assets/app-a/src/lib/actions.js b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-a/src/lib/actions.js
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/+assets/app-a/src/lib/actions.js
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-a/src/lib/actions.js
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/+assets/app-b/src/lib/Canvas.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-b/src/lib/Canvas.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/+assets/app-b/src/lib/Canvas.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-b/src/lib/Canvas.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/index.md

From 9a82f05b5487047d02fba50d3650538bb9fe4aaf Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 18 Oct 2024 22:27:33 -0400
Subject: [PATCH 02/19] stores

---
 .../+assets/app-a/src/lib/App.svelte          |  7 ++++
 .../+assets/app-a/src/lib/Counter.svelte      |  7 ++++
 .../+assets/app-a/src/lib/shared.js           |  1 +
 .../+assets/app-b/src/lib/Counter.svelte      |  7 ++++
 .../+assets/app-b/src/lib/shared.js           |  3 ++
 .../03-stores/01-introducing-stores/index.md  | 42 +++++++++++++++++++
 .../+assets/app-a/src/lib/App.svelte          | 12 +++---
 .../+assets/app-b/src/lib/App.svelte          | 12 +++---
 .../02-tweens}/index.md                       |  6 +--
 .../+assets/app-a/src/lib/App.svelte          |  6 +--
 .../+assets/app-b/src/lib/App.svelte          |  6 +--
 .../03-springs}/index.md                      |  0
 .../{04-motion => 03-stores}/index.md         |  2 +-
 13 files changed, 88 insertions(+), 23 deletions(-)
 create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/App.svelte
 create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/Counter.svelte
 create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/shared.js
 create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-b/src/lib/Counter.svelte
 create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-b/src/lib/shared.js
 create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/index.md
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{04-motion/01-tweens => 03-stores/02-tweens}/+assets/app-a/src/lib/App.svelte (50%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{04-motion/01-tweens => 03-stores/02-tweens}/+assets/app-b/src/lib/App.svelte (57%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{04-motion/01-tweens => 03-stores/02-tweens}/index.md (84%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{04-motion/02-springs => 03-stores/03-springs}/+assets/app-a/src/lib/App.svelte (90%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{04-motion/02-springs => 03-stores/03-springs}/+assets/app-b/src/lib/App.svelte (91%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{04-motion/02-springs => 03-stores/03-springs}/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{04-motion => 03-stores}/index.md (85%)

diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/App.svelte
new file mode 100644
index 0000000000..19091f01dc
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/App.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Counter from './Counter.svelte';
+</script>
+
+<Counter />
+<Counter />
+<Counter />
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/Counter.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/Counter.svelte
new file mode 100644
index 0000000000..7fe1abb301
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/Counter.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { count } from './shared.js';
+</script>
+
+<button onclick={() => {}}>
+	clicks: {count}
+</button>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/shared.js b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/shared.js
new file mode 100644
index 0000000000..a0e4ecaff7
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/shared.js
@@ -0,0 +1 @@
+export let count = 0;
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-b/src/lib/Counter.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-b/src/lib/Counter.svelte
new file mode 100644
index 0000000000..97de4a80a0
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-b/src/lib/Counter.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { count } from './shared.js';
+</script>
+
+<button onclick={() => $count += 1}>
+	clicks: {$count}
+</button>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-b/src/lib/shared.js b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-b/src/lib/shared.js
new file mode 100644
index 0000000000..75ca870c54
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-b/src/lib/shared.js
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export let count = writable(0);
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/index.md
new file mode 100644
index 0000000000..5806b49b70
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/index.md
@@ -0,0 +1,42 @@
+---
+title: Introducing stores
+---
+
+Prior to the introduction of runes in Svelte 5, stores were the idiomatic way to handle reactive state outside components. That's no longer the case, but you'll still encounter stores when using Svelte (including in SvelteKit, for now), so it's worth knowing how to use them.
+
+> [!NOTE] We won't cover how to create your own custom stores — for that, [consult the documentation](/docs/svelte/stores).
+
+Let's revisit the example from the [universal reactivity](universal-reactivity) exercise, but this time implement the shared state using a store.
+
+In `shared.js` we're currently exporting `count`, which is a number. Turn it into a writable store:
+
+```js
+/// file: shared.js
++++import { writable } from 'svelte/store';+++
+
+export const count = +++writable(0)+++;
+```
+
+To reference the value of the store, we prefix it with a `$` symbol. In `Counter.svelte`, update the text inside the `<button>` so that it no longer says `[object Object]`:
+
+```svelte
+/// file: Counter.svelte
+<button onclick={() => {}}>
+	clicks: {+++$count+++}
+</button>
+```
+
+Finally, add the event handler. Because this is a writable store, we can update the value programmatically using its `set` or `update` method...
+
+```js
+count.update((n) => n + 1);
+```
+
+...but since we're in a component we can continue using the `$` prefix:
+
+```svelte
+/// file: Counter.svelte
+<button onclick={() => +++$count += 1+++}>
+	clicks: {$count}
+</button>
+```
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/01-tweens/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/+assets/app-a/src/lib/App.svelte
similarity index 50%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/01-tweens/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/+assets/app-a/src/lib/App.svelte
index f0d3d3d1cf..d32c05b8da 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/01-tweens/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/+assets/app-a/src/lib/App.svelte
@@ -1,28 +1,28 @@
 <script>
 	import { writable } from 'svelte/store';
 
-	const progress = writable(0);
+	const progress = writable(0.5);
 </script>
 
 <progress value={$progress}></progress>
 
-<button on:click={() => progress.set(0)}>
+<button onclick={() => progress.set(0)}>
 	0%
 </button>
 
-<button on:click={() => progress.set(0.25)}>
+<button onclick={() => progress.set(0.25)}>
 	25%
 </button>
 
-<button on:click={() => progress.set(0.5)}>
+<button onclick={() => progress.set(0.5)}>
 	50%
 </button>
 
-<button on:click={() => progress.set(0.75)}>
+<button onclick={() => progress.set(0.75)}>
 	75%
 </button>
 
-<button on:click={() => progress.set(1)}>
+<button onclick={() => progress.set(1)}>
 	100%
 </button>
 
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/01-tweens/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/+assets/app-b/src/lib/App.svelte
similarity index 57%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/01-tweens/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/+assets/app-b/src/lib/App.svelte
index ffe7716e1b..661576c6ac 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/01-tweens/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/+assets/app-b/src/lib/App.svelte
@@ -2,7 +2,7 @@
 	import { tweened } from 'svelte/motion';
 	import { cubicOut } from 'svelte/easing';
 
-	const progress = tweened(0, {
+	const progress = tweened(0.5, {
 		duration: 400,
 		easing: cubicOut
 	});
@@ -10,23 +10,23 @@
 
 <progress value={$progress}></progress>
 
-<button on:click={() => progress.set(0)}>
+<button onclick={() => progress.set(0)}>
 	0%
 </button>
 
-<button on:click={() => progress.set(0.25)}>
+<button onclick={() => progress.set(0.25)}>
 	25%
 </button>
 
-<button on:click={() => progress.set(0.5)}>
+<button onclick={() => progress.set(0.5)}>
 	50%
 </button>
 
-<button on:click={() => progress.set(0.75)}>
+<button onclick={() => progress.set(0.75)}>
 	75%
 </button>
 
-<button on:click={() => progress.set(1)}>
+<button onclick={() => progress.set(1)}>
 	100%
 </button>
 
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/01-tweens/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/index.md
similarity index 84%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/01-tweens/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/index.md
index 38f5f708da..04cfc2751a 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/01-tweens/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/index.md
@@ -1,10 +1,8 @@
 ---
-title: Tweens
+title: Tweened values
 ---
 
-Now that we've covered the basics, it's time to learn some advanced Svelte techniques, starting with _motion_.
-
-Setting values and watching the DOM update automatically is cool. Know what's even cooler? Tweening those values. Svelte includes tools to help you build slick user interfaces that use animation to communicate changes.
+Alongside the `writable` and `readable` stores, Svelte ships stores for adding motion to your user interfaces.
 
 Let's start by changing the `progress` store to a `tweened` store:
 
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/02-springs/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/+assets/app-a/src/lib/App.svelte
similarity index 90%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/02-springs/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/+assets/app-a/src/lib/App.svelte
index 92805f88ca..977097b152 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/02-springs/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/+assets/app-a/src/lib/App.svelte
@@ -6,11 +6,11 @@
 </script>
 
 <svg
-	on:mousemove={(e) => {
+	onmousemove={(e) => {
 		coords.set({ x: e.clientX, y: e.clientY });
 	}}
-	on:mousedown={() => size.set(30)}
-	on:mouseup={() => size.set(10)}
+	onmousedown={() => size.set(30)}
+	onmouseup={() => size.set(10)}
 	role="presentation"
 >
 	<circle
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/02-springs/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/+assets/app-b/src/lib/App.svelte
similarity index 91%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/02-springs/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/+assets/app-b/src/lib/App.svelte
index 18c28a4a7b..4f9169b321 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/02-springs/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/+assets/app-b/src/lib/App.svelte
@@ -10,11 +10,11 @@
 </script>
 
 <svg
-	on:mousemove={(e) => {
+	onmousemove={(e) => {
 		coords.set({ x: e.clientX, y: e.clientY });
 	}}
-	on:mousedown={() => size.set(30)}
-	on:mouseup={() => size.set(10)}
+	onmousedown={() => size.set(30)}
+	onmouseup={() => size.set(10)}
 	role="presentation"
 >
 	<circle
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/02-springs/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/02-springs/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/index.md
similarity index 85%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/index.md
index 9876cf5c14..4650becb32 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/index.md
@@ -1,5 +1,5 @@
 ---
-title: Motion
+title: Stores
 scope: { 'prefix': '/src/lib/', 'name': 'src' }
 focus: /src/lib/App.svelte
 ---

From de3134430dd2cf7269c3a91d42ebc3652d27e1ed Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 18 Oct 2024 22:37:13 -0400
Subject: [PATCH 03/19] updates

---
 .../+assets/app-a/src/lib/App.svelte          |  2 +-
 .../+assets/app-b/src/lib/App.svelte          |  2 +-
 .../+assets/app-a/src/lib/App.svelte          | 12 +++++-----
 .../+assets/app-b/src/lib/App.svelte          | 12 +++++-----
 .../02-each-block-bindings/index.md           |  4 +---
 .../+assets/app-a/src/lib/AudioPlayer.svelte  | 22 +++++++++----------
 .../+assets/app-b/src/lib/AudioPlayer.svelte  | 17 ++++++--------
 .../03-media-elements/index.md                | 18 +++++++--------
 8 files changed, 41 insertions(+), 48 deletions(-)

diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/01-contenteditable-bindings/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/01-contenteditable-bindings/+assets/app-a/src/lib/App.svelte
index 2724120acc..399e1af63a 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/01-contenteditable-bindings/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/01-contenteditable-bindings/+assets/app-a/src/lib/App.svelte
@@ -1,5 +1,5 @@
 <script>
-	let html = '<p>Write some text!</p>';
+	let html = $state('<p>Write some text!</p>');
 </script>
 
 <div contenteditable></div>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/01-contenteditable-bindings/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/01-contenteditable-bindings/+assets/app-b/src/lib/App.svelte
index d805856406..2f3b7dc886 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/01-contenteditable-bindings/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/01-contenteditable-bindings/+assets/app-b/src/lib/App.svelte
@@ -1,5 +1,5 @@
 <script>
-	let html = '<p>Write some text!</p>';
+	let html = $state('<p>Write some text!</p>');
 </script>
 
 <div bind:innerHTML={html} contenteditable></div>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte
index 88835e5870..bb9e235320 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte
@@ -1,12 +1,12 @@
 <script>
-	let todos = [
+	let todos = $state([
 		{ done: false, text: 'finish Svelte tutorial' },
 		{ done: false, text: 'build an app' },
 		{ done: false, text: 'world domination' }
-	];
+	]);
 
 	function add() {
-		todos = todos.concat({
+		todos.push({
 			done: false,
 			text: ''
 		});
@@ -16,7 +16,7 @@
 		todos = todos.filter((t) => !t.done);
 	}
 
-	$: remaining = todos.filter((t) => !t.done).length;
+	let remaining = $derived(todos.filter((t) => !t.done).length);
 </script>
 
 <div class="centered">
@@ -41,11 +41,11 @@
 
 	<p>{remaining} remaining</p>
 
-	<button on:click={add}>
+	<button onclick={add}>
 		Add new
 	</button>
 
-	<button on:click={clear}>
+	<button onclick={clear}>
 		Clear completed
 	</button>
 </div>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte
index e30133a939..2845e2fd22 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte
@@ -1,12 +1,12 @@
 <script>
-	let todos = [
+	let todos = $state([
 		{ done: false, text: 'finish Svelte tutorial' },
 		{ done: false, text: 'build an app' },
 		{ done: false, text: 'world domination' }
-	];
+	]);
 
 	function add() {
-		todos = todos.concat({
+		todos.push({
 			done: false,
 			text: ''
 		});
@@ -16,7 +16,7 @@
 		todos = todos.filter((t) => !t.done);
 	}
 
-	$: remaining = todos.filter((t) => !t.done).length;
+	let remaining = $derived(todos.filter((t) => !t.done).length);
 </script>
 
 <div class="centered">
@@ -41,11 +41,11 @@
 
 	<p>{remaining} remaining</p>
 
-	<button on:click={add}>
+	<button onclick={add}>
 		Add new
 	</button>
 
-	<button on:click={clear}>
+	<button onclick={clear}>
 		Clear completed
 	</button>
 </div>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/02-each-block-bindings/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/02-each-block-bindings/index.md
index 884fa6e70f..b5efd3ea20 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/02-each-block-bindings/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/02-each-block-bindings/index.md
@@ -2,7 +2,7 @@
 title: Each block bindings
 ---
 
-You can even bind to properties inside an `each` block.
+You can bind to properties inside an `each` block.
 
 ```svelte
 /// file: App.svelte
@@ -21,5 +21,3 @@ You can even bind to properties inside an `each` block.
 	</li>
 {/each}
 ```
-
-> [!NOTE] Note that interacting with these `<input>` elements will mutate the array. If you prefer to work with immutable data, you should avoid these bindings and use event handlers instead.
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte
index a310cb004a..e556a56646 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte
@@ -1,11 +1,9 @@
 <script>
-	export let src;
-	export let title;
-	export let artist;
+	let { src, title, artist } = $props();
 
-	let time = 0;
-	let duration = 0;
-	let paused = true;
+	let time = $state(0);
+	let duration = $state(0);
+	let paused = $state(true);
 
 	function format(time) {
 		if (isNaN(time)) return '...';
@@ -33,16 +31,16 @@
 			<span>{format(time)}</span>
 			<div
 				class="slider"
-				on:pointerdown={e => {
+				onpointerdown={e => {
 					const div = e.currentTarget;
-					
+
 					function seek(e) {
 						const { left, width } = div.getBoundingClientRect();
 
 						let p = (e.clientX - left) / width;
 						if (p < 0) p = 0;
 						if (p > 1) p = 1;
-						
+
 						// TODO update the time
 					}
 
@@ -82,7 +80,7 @@
 		color: var(--fg-1);
 		filter: drop-shadow(0.5em 0.5em 1em rgba(0,0,0,0.1));
 	}
-	
+
 	button {
 		width: 100%;
 		aspect-ratio: 1;
@@ -90,7 +88,7 @@
 		background-position: 50% 50%;
 		border-radius: 50%;
 	}
-	
+
 	[aria-label="pause"] {
 		background-image: url(./pause.svg);
 	}
@@ -133,4 +131,4 @@
 		height: 100%;
 		background: var(--bg-3);
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-b/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-b/src/lib/AudioPlayer.svelte
index 2eec5dd0b3..47ba2148a5 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-b/src/lib/AudioPlayer.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-b/src/lib/AudioPlayer.svelte
@@ -1,11 +1,9 @@
 <script>
-	export let src;
-	export let title;
-	export let artist;
+	let { src, title, artist } = $props();
 
-	let time = 0;
-	let duration = 0;
-	let paused = true;
+	let time = $state(0);
+	let duration = $state(0);
+	let paused = $state(true);
 
 	function format(time) {
 		if (isNaN(time)) return '...';
@@ -23,8 +21,7 @@
 		bind:currentTime={time}
 		bind:duration
 		bind:paused
-		preload="metadata"
-		on:ended={() => {
+		onended={() => {
 			time = 0;
 		}}
 	></audio>
@@ -32,7 +29,7 @@
 	<button
 		class="play"
 		aria-label={paused ? 'play' : 'pause'}
-		on:click={() => paused = !paused}
+		onclick={() => paused = !paused}
 	></button>
 
 	<div class="info">
@@ -45,7 +42,7 @@
 			<span>{format(time)}</span>
 			<div
 				class="slider"
-				on:pointerdown={e => {
+				onpointerdown={e => {
 					const div = e.currentTarget;
 
 					function seek(e) {
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/index.md
index 30ca4b8d05..8ae0e5cd6c 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/index.md
@@ -29,7 +29,7 @@ Next, add an event handler to the `<button>` that toggles `paused`:
 <button
 	class="play"
 	aria-label={paused ? 'play' : 'pause'}
-	+++on:click={() => paused = !paused}+++
+	+++onclick={() => paused = !paused}+++
 ></button>
 ```
 
@@ -57,7 +57,7 @@ When the track ends, be kind — rewind:
 	bind:currentTime={time}
 	bind:duration
 	bind:paused
-+++	on:ended={() => {
++++	onended={() => {
 		time = 0;
 	}}+++
 ></audio>
@@ -65,13 +65,13 @@ When the track ends, be kind — rewind:
 
 The complete set of bindings for `<audio>` and `<video>` is as follows — seven _readonly_ bindings...
 
-- `duration` (readonly) — the total duration, in seconds
-- `buffered` (readonly) — an array of `{start, end}` objects
-- `seekable` (readonly) — ditto
-- `played` (readonly) — ditto
-- `seeking` (readonly) — boolean
-- `ended` (readonly) — boolean
-- `readyState` (readonly) — number between (and including) 0 and 4
+- `duration` — the total duration, in seconds
+- `buffered` — an array of `{start, end}` objects
+- `seekable` — ditto
+- `played` — ditto
+- `seeking` — boolean
+- `ended` — boolean
+- `readyState` — number between (and including) 0 and 4
 
 ...and five _two-way_ bindings:
 

From 9cd38add218ee0405bf4981ab11aaa4208832e3c Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 18 Oct 2024 22:43:37 -0400
Subject: [PATCH 04/19] update

---
 .../04-dimensions/+assets/app-a/src/lib/App.svelte   | 12 +++++++-----
 .../04-dimensions/+assets/app-b/src/lib/App.svelte   | 12 +++++++-----
 .../05-advanced-bindings/04-dimensions/index.md      |  8 +-------
 .../src/lib/codemirror/autocompletionDataProvider.js |  8 ++++----
 4 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/04-dimensions/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/04-dimensions/+assets/app-a/src/lib/App.svelte
index a7e13a3f80..a9897ecbfc 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/04-dimensions/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/04-dimensions/+assets/app-a/src/lib/App.svelte
@@ -1,8 +1,7 @@
 <script>
-	let w;
-	let h;
-	let size = 42;
-	let text = 'edit this text';
+	let w = $state();
+	let h = $state();
+	let size = $state(42);
 </script>
 
 <label>
@@ -11,7 +10,10 @@
 </label>
 
 <div>
-	<span style="font-size: {size}px" contenteditable>{text}</span>
+	<span style="font-size: {size}px" contenteditable>
+		edit this text
+	</span>
+
 	<span class="size">{w} x {h}px</span>
 </div>
 
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/04-dimensions/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/04-dimensions/+assets/app-b/src/lib/App.svelte
index 3ccf4e8ec2..52f4442418 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/04-dimensions/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/04-dimensions/+assets/app-b/src/lib/App.svelte
@@ -1,8 +1,7 @@
 <script>
-	let w;
-	let h;
-	let size = 42;
-	let text = 'edit this text';
+	let w = $state();
+	let h = $state();
+	let size = $state(42);
 </script>
 
 <label>
@@ -11,7 +10,10 @@
 </label>
 
 <div bind:clientWidth={w} bind:clientHeight={h}>
-	<span style="font-size: {size}px" contenteditable>{text}</span>
+	<span style="font-size: {size}px" contenteditable>
+		edit this text
+	</span>
+
 	<span class="size">{w} x {h}px</span>
 </div>
 
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/04-dimensions/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/04-dimensions/index.md
index 392da6fcd5..99b443fc02 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/04-dimensions/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/04-dimensions/index.md
@@ -2,7 +2,7 @@
 title: Dimensions
 ---
 
-Every block-level element has `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bindings:
+You can add `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bindings to any element:
 
 ```svelte
 /// file: App.svelte
@@ -13,9 +13,3 @@ Every block-level element has `clientWidth`, `clientHeight`, `offsetWidth` and `
 ```
 
 These bindings are readonly — changing the values of `w` and `h` won't have any effect on the element.
-
-TODO this next thing is no longer true I think?
-
-> [!NOTE] Elements are measured using a technique similar to [this one](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/). There is some overhead involved, so it's not recommended to use this for large numbers of elements.
->
-> `display: inline` elements cannot be measured with this approach; nor can elements that can't contain other elements (such as `<canvas>`). In these cases you will need to measure a wrapper element instead.
diff --git a/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js b/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js
index b7579d39ac..8cf10cea4d 100644
--- a/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js
+++ b/packages/site-kit/src/lib/codemirror/autocompletionDataProvider.js
@@ -135,19 +135,19 @@ export const svelteAttributes = [
 	},
 	{
 		name: 'bind:clientWidth',
-		description: 'Available for block level elements. (read-only)'
+		description: 'Available on all visible elements. (read-only)'
 	},
 	{
 		name: 'bind:clientHeight',
-		description: 'Available for block level elements. (read-only)'
+		description: 'Available on all visible elements. (read-only)'
 	},
 	{
 		name: 'bind:offsetWidth',
-		description: 'Available for block level elements. (read-only)'
+		description: 'Available on all visible elements. (read-only)'
 	},
 	{
 		name: 'bind:offsetHeight',
-		description: 'Available for block level elements. (read-only)'
+		description: 'Available on all visible elements. (read-only)'
 	},
 	{
 		name: 'bind:this',

From f4efafa86784bccc57a366cd7bb4ac900dbdfd53 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 18 Oct 2024 22:52:03 -0400
Subject: [PATCH 05/19] update

---
 .../+assets/app-a/src/lib/App.svelte          |  9 +----
 .../+assets/app-b/src/lib/App.svelte          |  9 +----
 .../05-bind-this/index.md                     | 38 +++++++------------
 3 files changed, 17 insertions(+), 39 deletions(-)

diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/+assets/app-a/src/lib/App.svelte
index 582abc630a..09accf3dcd 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/+assets/app-a/src/lib/App.svelte
@@ -1,9 +1,7 @@
 <script>
-	import { onMount } from 'svelte';
 	import { paint } from './gradient.js';
 
-	onMount(() => {
-		const canvas = document.querySelector('canvas')
+	$effect(() => {
 		const context = canvas.getContext('2d');
 
 		let frame = requestAnimationFrame(function loop(t) {
@@ -17,10 +15,7 @@
 	});
 </script>
 
-<canvas
-	width={32}
-	height={32}
-></canvas>
+<canvas width={32} height={32}></canvas>
 
 <style>
 	canvas {
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/+assets/app-b/src/lib/App.svelte
index 70410bc761..6696fac0d4 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/+assets/app-b/src/lib/App.svelte
@@ -1,10 +1,9 @@
 <script>
-	import { onMount } from 'svelte';
 	import { paint } from './gradient.js';
 
 	let canvas;
 
-	onMount(() => {
+	$effect(() => {
 		const context = canvas.getContext('2d');
 
 		let frame = requestAnimationFrame(function loop(t) {
@@ -18,11 +17,7 @@
 	});
 </script>
 
-<canvas
-	bind:this={canvas}
-	width={32}
-	height={32}
-></canvas>
+<canvas bind:this={canvas} width={32} height={32}></canvas>
 
 <style>
 	canvas {
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/index.md
index 401714fec3..9a2d23429f 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/index.md
@@ -2,40 +2,28 @@
 title: This
 ---
 
-> TODO the next sentence is no longer true
+You can use the special `bind:this` directive to get a readonly binding to an element in your component.
 
-In a previous exercise, we learned how to use the `onMount` lifecycle function to paint to a canvas.
+The `$effect` in this exercise attempts to create a canvas context, but `canvas` is `undefined`. Begin by declaring it at the top level of the component...
 
-But the example is buggy — it's using `document.querySelector('canvas')`, which will always return the first `<canvas>` found on the page, which might not be the one belonging to our component.
-
-Instead, we can use the readonly `this` binding to get a reference to the element:
-
-```js
+```svelte
 /// file: App.svelte
-+++let canvas;+++
+<script>
+	import { paint } from './gradient.js';
 
-onMount(() => {
-	---const canvas = document.querySelector('canvas')---
-	const context = canvas.getContext('2d');
+	+++let canvas;+++
 
-	let frame = requestAnimationFrame(function loop(t) {
-		frame = requestAnimationFrame(loop);
-		paint(context, t);
+	$effect(() => {
+		// ...
 	});
-
-	return () => {
-		cancelAnimationFrame(frame);
-	};
-});
+</script>
 ```
 
+...then add the directive to the `<canvas>` element:
+
 ```svelte
 /// file: App.svelte
-<canvas
-	+++bind:this={canvas}+++
-	width={32}
-	height={32}
-></canvas>
+<canvas +++bind:this={canvas}+++ width={32} height={32}></canvas>
 ```
 
-Note that the value of `canvas` will be `undefined` until the component has mounted.
+Note that the value of `canvas` will remain `undefined` until the component has mounted — in other words you can't access it until the `$effect` runs.

From be132ec6197222d545f6510b3914ce3a42934fd8 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 18 Oct 2024 23:01:25 -0400
Subject: [PATCH 06/19] update

---
 .../+assets/app-a/src/lib/App.svelte          | 13 +++---
 .../+assets/app-a/src/lib/Keypad.svelte       | 41 +++++++++----------
 .../+assets/app-b/src/lib/App.svelte          | 14 +++----
 .../+assets/app-b/src/lib/Keypad.svelte       | 41 +++++++++++++++++++
 .../06-component-bindings/index.md            | 16 +++++---
 5 files changed, 83 insertions(+), 42 deletions(-)
 create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-b/src/lib/Keypad.svelte

diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-a/src/lib/App.svelte
index 4f31d4ca8c..8898b3e70e 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-a/src/lib/App.svelte
@@ -1,12 +1,13 @@
 <script>
 	import Keypad from './Keypad.svelte';
 
-	let pin;
-	$: view = pin
+	let pin = $state('');
+
+	let view = $derived(pin
 		? pin.replace(/\d(?!$)/g, '•')
-		: 'enter your pin';
+		: 'enter your pin');
 
-	function handleSubmit() {
+	function onsubmit() {
 		alert(`submitted ${pin}`);
 	}
 </script>
@@ -15,6 +16,4 @@
 	{view}
 </h1>
 
-<Keypad
-	on:submit={handleSubmit}
-/>
+<Keypad {onsubmit} />
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-a/src/lib/Keypad.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-a/src/lib/Keypad.svelte
index b94e94453e..cdb94f9db5 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-a/src/lib/Keypad.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-a/src/lib/Keypad.svelte
@@ -1,33 +1,30 @@
 <script>
-	import { createEventDispatcher } from 'svelte';
-
-	export let value = '';
-
-	const dispatch = createEventDispatcher();
+	let { value, onsubmit } = $props();
 
 	const select = (num) => () => (value += num);
 	const clear = () => (value = '');
-	const submit = () => dispatch('submit');
 </script>
 
 <div class="keypad">
-	<button on:click={select(1)}>1</button>
-	<button on:click={select(2)}>2</button>
-	<button on:click={select(3)}>3</button>
-	<button on:click={select(4)}>4</button>
-	<button on:click={select(5)}>5</button>
-	<button on:click={select(6)}>6</button>
-	<button on:click={select(7)}>7</button>
-	<button on:click={select(8)}>8</button>
-	<button on:click={select(9)}>9</button>
+	<button onclick={select(1)}>1</button>
+	<button onclick={select(2)}>2</button>
+	<button onclick={select(3)}>3</button>
+	<button onclick={select(4)}>4</button>
+	<button onclick={select(5)}>5</button>
+	<button onclick={select(6)}>6</button>
+	<button onclick={select(7)}>7</button>
+	<button onclick={select(8)}>8</button>
+	<button onclick={select(9)}>9</button>
+
+	<button disabled={!value} onclick={clear}>
+		clear
+	</button>
+
+	<button onclick={select(0)}>0</button>
 
-	<button disabled={!value} on:click={clear}
-		>clear</button
-	>
-	<button on:click={select(0)}>0</button>
-	<button disabled={!value} on:click={submit}
-		>submit</button
-	>
+	<button disabled={!value} onclick={onsubmit}>
+		submit
+	</button>
 </div>
 
 <style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-b/src/lib/App.svelte
index fb30a1e3ff..67b63571ab 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-b/src/lib/App.svelte
@@ -1,12 +1,13 @@
 <script>
 	import Keypad from './Keypad.svelte';
 
-	let pin;
-	$: view = pin
+	let pin = $state('');
+
+	let view = $derived(pin
 		? pin.replace(/\d(?!$)/g, '•')
-		: 'enter your pin';
+		: 'enter your pin');
 
-	function handleSubmit() {
+	function onsubmit() {
 		alert(`submitted ${pin}`);
 	}
 </script>
@@ -15,7 +16,4 @@
 	{view}
 </h1>
 
-<Keypad
-	bind:value={pin}
-	on:submit={handleSubmit}
-/>
+<Keypad bind:value={pin} {onsubmit} />
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-b/src/lib/Keypad.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-b/src/lib/Keypad.svelte
new file mode 100644
index 0000000000..cdbd3b0ee0
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-b/src/lib/Keypad.svelte
@@ -0,0 +1,41 @@
+<script>
+	let { value = $bindable(), onsubmit } = $props();
+
+	const select = (num) => () => (value += num);
+	const clear = () => (value = '');
+</script>
+
+<div class="keypad">
+	<button onclick={select(1)}>1</button>
+	<button onclick={select(2)}>2</button>
+	<button onclick={select(3)}>3</button>
+	<button onclick={select(4)}>4</button>
+	<button onclick={select(5)}>5</button>
+	<button onclick={select(6)}>6</button>
+	<button onclick={select(7)}>7</button>
+	<button onclick={select(8)}>8</button>
+	<button onclick={select(9)}>9</button>
+
+	<button disabled={!value} onclick={clear}>
+		clear
+	</button>
+
+	<button onclick={select(0)}>0</button>
+
+	<button disabled={!value} onclick={onsubmit}>
+		submit
+	</button>
+</div>
+
+<style>
+	.keypad {
+		display: grid;
+		grid-template-columns: repeat(3, 5em);
+		grid-template-rows: repeat(4, 3em);
+		grid-gap: 0.5em;
+	}
+
+	button {
+		margin: 0;
+	}
+</style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/index.md
index 761092049c..946175ae10 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/index.md
@@ -2,14 +2,20 @@
 title: Component bindings
 ---
 
-Just as you can bind to properties of DOM elements, you can bind to component props. For example, we can bind to the `value` prop of this `<Keypad>` component as though it were a form element:
+Just as you can bind to properties of DOM elements, you can bind to component props. For example, we can bind to the `value` prop of this `<Keypad>` component as though it were a form element.
+
+First, we need to mark the prop as _bindable_. Inside `Keypad.svelte`, update the `$props()` declaration to use the `$bindable` rune:
+
+```js
+/// file: Keypad.svelte
+let { value +++= $bindable('')+++, onsubmit } = $props();
+```
+
+Then, in `App.svelte`, add a `bind:` directive:
 
 ```svelte
 /// file: App.svelte
-<Keypad
-	+++bind:value={pin}+++
-	on:submit={handleSubmit}
-/>
+<Keypad +++bind:value={pin}+++ {onsubmit} />
 ```
 
 Now, when the user interacts with the keypad, the value of `pin` in the parent component is immediately updated.

From e7fa7d8068a42a08ac219c321942c1e79d12a42a Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 18 Oct 2024 23:28:29 -0400
Subject: [PATCH 07/19] more

---
 .../+assets/app-a/src/lib/App.svelte          | 27 +++++++----
 .../+assets/app-a/src/lib/Canvas.svelte       | 48 +++++++------------
 .../src/lib/{actions.js => actions.svelte.js} | 13 +++--
 .../+assets/app-b/src/lib/App.svelte          | 29 ++++++-----
 .../+assets/app-b/src/lib/Canvas.svelte       | 48 +++++++------------
 .../07-component-this/index.md                | 31 ++++++------
 packages/editor/src/lib/Editor.svelte         |  1 +
 packages/repl/src/lib/Output/Viewer.svelte    | 29 +++++++++++
 8 files changed, 119 insertions(+), 107 deletions(-)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-a/src/lib/{actions.js => actions.svelte.js} (85%)

diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-a/src/lib/App.svelte
index c685770d1f..81c8f1a686 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-a/src/lib/App.svelte
@@ -1,12 +1,12 @@
 <script>
 	import Canvas from './Canvas.svelte';
-	import { trapFocus } from './actions.js';
+	import { trapFocus } from './actions.svelte.js';
 
 	const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet', 'white', 'black'];
-	let selected = colors[0];
-	let size = 10;
 
-	let showMenu = true;
+	let selected = $state(colors[0]);
+	let size = $state(10);
+	let showMenu = $state(true);
 </script>
 
 <div class="container">
@@ -14,10 +14,17 @@
 
 	{#if showMenu}
 		<div
+			role="presentation"
 			class="modal-background"
-			on:click|self={() => showMenu = false}
-			on:keydown={(e) => {
-				if (e.key === 'Escape') showMenu = false;
+			onclick={(event) => {
+				if (event.target === event.currentTarget) {
+					showMenu = false;
+				}
+			}}
+			onkeydown={(e) => {
+				if (e.key === 'Escape') {
+					showMenu = false;
+				}
 			}}
 		>
 			<div class="menu" use:trapFocus>
@@ -28,7 +35,7 @@
 							aria-label={color}
 							aria-current={selected === color}
 							style="--color: {color}"
-							on:click={() => {
+							onclick={() => {
 								selected = color;
 							}}
 						></button>
@@ -45,7 +52,7 @@
 	{/if}
 
 	<div class="controls">
-		<button class="show-menu" on:click={() => showMenu = !showMenu}>
+		<button class="show-menu" onclick={() => showMenu = !showMenu}>
 			{showMenu ? 'close' : 'menu'}
 		</button>
 	</div>
@@ -125,4 +132,4 @@
 	.menu input {
 		flex: 1;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-a/src/lib/Canvas.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-a/src/lib/Canvas.svelte
index e723693d96..4768f17c1f 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-a/src/lib/Canvas.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-a/src/lib/Canvas.svelte
@@ -1,22 +1,11 @@
 <script>
-	import { onMount } from "svelte";
+	let { color, size } = $props();
 
-	export let color;
-	export let size;
+	let canvas = $state();
+	let context = $state();
+	let coords = $state();
 
-	let canvas;
-	let context;
-	let previous;
-
-	function get_coords(e) {
-		const { clientX, clientY } = e;
-		const { left, top } = canvas.getBoundingClientRect();
-		const x = clientX - left;
-		const y = clientY - top;
-		return { x, y };
-	}
-
-	onMount(() => {
+	$effect(() => {
 		context = canvas.getContext('2d');
 
 		function resize() {
@@ -33,24 +22,23 @@
 	});
 </script>
 
-
-
 <canvas
 	bind:this={canvas}
-	on:pointerdown={(e) => {
-		const coords = get_coords(e);
+	onpointerdown={(e) => {
+		coords = { x: e.offsetX, y: e.offsetY };
+
 		context.fillStyle = color;
 		context.beginPath();
 		context.arc(coords.x, coords.y, size / 2, 0, 2 * Math.PI);
 		context.fill();
-
-		previous = coords;
 	}}
-	on:pointerleave={() => {
-		previous = null;
+	onpointerleave={() => {
+		coords = null;
 	}}
-	on:pointermove={(e) => {
-		const coords = get_coords(e);
+	onpointermove={(e) => {
+		const previous = coords;
+
+		coords = { x: e.offsetX, y: e.offsetY };
 
 		if (e.buttons === 1) {
 			e.preventDefault();
@@ -63,15 +51,13 @@
 			context.lineTo(coords.x, coords.y);
 			context.stroke();
 		}
-
-		previous = coords;
 	}}
 ></canvas>
 
-{#if previous}
+{#if coords}
 	<div
 		class="preview"
-		style="--color: {color}; --size: {size}px; --x: {previous.x}px; --y: {previous.y}px" 
+		style="--color: {color}; --size: {size}px; --x: {coords.x}px; --y: {coords.y}px"
 	></div>
 {/if}
 
@@ -96,4 +82,4 @@
 		opacity: 0.5;
 		pointer-events: none;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-a/src/lib/actions.js b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-a/src/lib/actions.svelte.js
similarity index 85%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-a/src/lib/actions.js
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-a/src/lib/actions.svelte.js
index 8d5feade1b..3d93a0df6f 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-a/src/lib/actions.js
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-a/src/lib/actions.svelte.js
@@ -25,14 +25,13 @@ export function trapFocus(node) {
 		}
 	}
 
-	focusable()[0]?.focus();
+	$effect(() => {
+		focusable()[0]?.focus();
+		node.addEventListener('keydown', handleKeydown);
 
-	node.addEventListener('keydown', handleKeydown);
-
-	return {
-		destroy() {
+		return () => {
 			node.removeEventListener('keydown', handleKeydown);
 			previous?.focus();
-		}
-	};
+		};
+	});
 }
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-b/src/lib/App.svelte
index 59303f5463..0c7d37e819 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-b/src/lib/App.svelte
@@ -1,12 +1,12 @@
 <script>
 	import Canvas from './Canvas.svelte';
-	import { trapFocus } from './actions.js';
+	import { trapFocus } from './actions.svelte.js';
 
 	const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet', 'white', 'black'];
-	let selected = colors[0];
-	let size = 10;
 
-	let showMenu = true;
+	let selected = $state(colors[0]);
+	let size = $state(10);
+	let showMenu = $state(true);
 
 	let canvas;
 </script>
@@ -16,10 +16,17 @@
 
 	{#if showMenu}
 		<div
+			role="presentation"
 			class="modal-background"
-			on:click|self={() => showMenu = false}
-			on:keydown={(e) => {
-				if (e.key === 'Escape') showMenu = false;
+			onclick={(event) => {
+				if (event.target === event.currentTarget) {
+					showMenu = false;
+				}
+			}}
+			onkeydown={(e) => {
+				if (e.key === 'Escape') {
+					showMenu = false;
+				}
 			}}
 		>
 			<div class="menu" use:trapFocus>
@@ -30,7 +37,7 @@
 							aria-label={color}
 							aria-current={selected === color}
 							style="--color: {color}"
-							on:click={() => {
+							onclick={() => {
 								selected = color;
 							}}
 						></button>
@@ -47,11 +54,11 @@
 	{/if}
 
 	<div class="controls">
-		<button class="show-menu" on:click={() => showMenu = !showMenu}>
+		<button class="show-menu" onclick={() => showMenu = !showMenu}>
 			{showMenu ? 'close' : 'menu'}
 		</button>
 
-		<button on:click={() => canvas.clear()}>
+		<button onclick={() => canvas.clear()}>
 			clear
 		</button>
 	</div>
@@ -131,4 +138,4 @@
 	.menu input {
 		flex: 1;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-b/src/lib/Canvas.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-b/src/lib/Canvas.svelte
index fec3ead180..385967e792 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-b/src/lib/Canvas.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-b/src/lib/Canvas.svelte
@@ -1,26 +1,15 @@
 <script>
-	import { onMount } from "svelte";
+	let { color, size } = $props();
 
-	export let color;
-	export let size;
+	let canvas = $state();
+	let context = $state();
+	let coords = $state();
 
 	export function clear() {
 		context.clearRect(0, 0, canvas.width, canvas.height);
 	}
 
-	let canvas;
-	let context;
-	let previous;
-
-	function get_coords(e) {
-		const { clientX, clientY } = e;
-		const { left, top } = canvas.getBoundingClientRect();
-		const x = clientX - left;
-		const y = clientY - top;
-		return { x, y };
-	}
-
-	onMount(() => {
+	$effect(() => {
 		context = canvas.getContext('2d');
 
 		function resize() {
@@ -37,24 +26,23 @@
 	});
 </script>
 
-
-
 <canvas
 	bind:this={canvas}
-	on:pointerdown={(e) => {
-		const coords = get_coords(e);
+	onpointerdown={(e) => {
+		coords = { x: e.offsetX, y: e.offsetY };
+
 		context.fillStyle = color;
 		context.beginPath();
 		context.arc(coords.x, coords.y, size / 2, 0, 2 * Math.PI);
 		context.fill();
-
-		previous = coords;
 	}}
-	on:pointerleave={() => {
-		previous = null;
+	onpointerleave={() => {
+		coords = null;
 	}}
-	on:pointermove={(e) => {
-		const coords = get_coords(e);
+	onpointermove={(e) => {
+		const previous = coords;
+
+		coords = { x: e.offsetX, y: e.offsetY };
 
 		if (e.buttons === 1) {
 			e.preventDefault();
@@ -67,15 +55,13 @@
 			context.lineTo(coords.x, coords.y);
 			context.stroke();
 		}
-
-		previous = coords;
 	}}
 ></canvas>
 
-{#if previous}
+{#if coords}
 	<div
 		class="preview"
-		style="--color: {color}; --size: {size}px; --x: {previous.x}px; --y: {previous.y}px" 
+		style="--color: {color}; --size: {size}px; --x: {coords.x}px; --y: {coords.y}px"
 	></div>
 {/if}
 
@@ -100,4 +86,4 @@
 		opacity: 0.5;
 		pointer-events: none;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/index.md
index 52c4df41a1..cab11f0688 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/index.md
@@ -10,8 +10,9 @@ First, let's export a function from `Canvas.svelte`:
 
 ```svelte
 /// file: Canvas.svelte
-export let color;
-export let size;
+let canvas = $state();
+let context = $state();
+let coords = $state();
 
 +++export function clear() {
 	context.clearRect(0, 0, canvas.width, canvas.height);
@@ -20,22 +21,18 @@ export let size;
 
 Then, create a reference to the component instance:
 
-```svelte
+```js
 /// file: App.svelte
-<script>
-	import Canvas from './Canvas.svelte';
-	import { trapFocus } from './actions.js';
-
-	const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet', 'white', 'black'];
-	let selected = colors[0];
-	let size = 10;
+let selected = $state(colors[0]);
+let size = $state(10);
+let showMenu = $state(true);
 
-	let showMenu = true;
-	+++let canvas;+++
-</script>
++++let canvas;+++
+```
 
-<div class="container">
-	<Canvas +++bind:this={canvas}+++ color={selected} size={size} />
+```svelte
+/// file: App.svelte
+<Canvas +++bind:this={canvas}+++ color={selected} size={size} />
 ```
 
 Finally, add a button that calls the `clear` function:
@@ -43,11 +40,11 @@ Finally, add a button that calls the `clear` function:
 ```svelte
 /// file: App.svelte
 <div class="controls">
-	<button class="show-menu" on:click={() => showMenu = !showMenu}>
+	<button class="show-menu" onclick={() => showMenu = !showMenu}>
 		{showMenu ? 'close' : 'menu'}
 	</button>
 
-+++	<button on:click={() => canvas.clear()}>
++++	<button onclick={() => canvas.clear()}>
 		clear
 	</button>+++
 </div>
diff --git a/packages/editor/src/lib/Editor.svelte b/packages/editor/src/lib/Editor.svelte
index 1635daadbb..8e7da5981a 100644
--- a/packages/editor/src/lib/Editor.svelte
+++ b/packages/editor/src/lib/Editor.svelte
@@ -90,6 +90,7 @@
 	}}
 	onmessage={(e) => {
 		if (preserve_editor_focus && e.data.type === 'iframe_took_focus') {
+			console.log('reclaiming focus');
 			editor_view.focus();
 		}
 	}}
diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte
index db47045d3b..6f1f45946a 100644
--- a/packages/repl/src/lib/Output/Viewer.svelte
+++ b/packages/repl/src/lib/Output/Viewer.svelte
@@ -110,6 +110,35 @@
 				await proxy?.eval(`
 					${injectedJS}
 
+					if (!window.__setup_focus_handling) {
+						console.log('setting up focus handling');
+
+						let can_focus = false;
+
+						window.addEventListener('pointerdown', (e) => (can_focus = true));
+						window.addEventListener('pointerup', (e) => (can_focus = false));
+						window.addEventListener('keydown', (e) => (can_focus = true));
+						window.addEventListener('keyup', (e) => (can_focus = false));
+
+						/**
+						 * The iframe sometimes takes focus control in ways we can't prevent
+						 * while the editor is focused. Refocus the editor in these cases.
+						 */
+						window.addEventListener('focusin', (e) => {
+							// if focusin happened as a result of a mouse/keyboard event, allow it
+							if (can_focus) return;
+
+							// if \`e.target\` is the \`<body>\` and there's a \`relatedTarget\`,
+							// assume the focusin was the result of a user navigation — allow it
+							if (e.target.tagName === 'BODY' && e.relatedTarget) return;
+
+							// otherwise, broadcast an event that causes the editor to reclaim focus
+							parent.postMessage({ type: 'iframe_took_focus' }, '*');
+						});
+
+						window.__setup_focus_handling = true;
+					}
+
 					{
 						const styles = document.querySelectorAll('style[id^=svelte-]');
 

From 93d8a006deae83423e40edcd79e69b16d50a16d7 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 18 Oct 2024 23:37:06 -0400
Subject: [PATCH 08/19] update

---
 .../+assets/app-a/src/lib/App.svelte          | 20 +++++++---
 .../+assets/app-a/src/lib/TodoList.svelte     | 19 +++-------
 .../+assets/app-a/src/lib/todos.js            | 37 -------------------
 .../+assets/app-b/src/lib/TodoList.svelte     | 19 +++-------
 .../09-deferred-transitions/index.md          |  2 +-
 5 files changed, 27 insertions(+), 70 deletions(-)
 delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-a/src/lib/todos.js

diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-a/src/lib/App.svelte
index 3183660663..45918631a8 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-a/src/lib/App.svelte
@@ -1,8 +1,7 @@
 <script>
-	import { createTodoStore } from './todos.js';
 	import TodoList from './TodoList.svelte';
 
-	const todos = createTodoStore([
+	const todos = $state([
 		{ done: false, description: 'write some docs' },
 		{ done: false, description: 'start writing blog post' },
 		{ done: true, description: 'buy some milk' },
@@ -10,27 +9,36 @@
 		{ done: false, description: 'feed the turtle' },
 		{ done: false, description: 'fix some bugs' }
 	]);
+
+	function remove(todo) {
+		const index = todos.indexOf(todo);
+		todos.splice(index, 1);
+	}
 </script>
 
 <div class="board">
 	<input
 		placeholder="what needs to be done?"
-		on:keydown={(e) => {
+		onkeydown={(e) => {
 			if (e.key !== 'Enter') return;
 
-			todos.add(e.currentTarget.value);
+			todos.push({
+				done: false,
+				text: e.currentTarget.value
+			});
+
 			e.currentTarget.value = '';
 		}}
 	/>
 
 	<div class="todo">
 		<h2>todo</h2>
-		<TodoList store={todos} done={false} />
+		<TodoList todos={todos.filter((t) => !t.done)} {remove} />
 	</div>
 
 	<div class="done">
 		<h2>done</h2>
-		<TodoList store={todos} done={true} />
+		<TodoList todos={todos.filter((t) => t.done)} {remove} />
 	</div>
 </div>
 
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte
index ddd1fcfe30..bee5ab9dc2 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte
@@ -1,23 +1,16 @@
 <script>
-	export let store;
-	export let done;
+	let { todos, remove } = $props();
 </script>
 
 <ul class="todos">
-	{#each $store.filter((todo) => todo.done === done) as todo (todo.id)}
+	{#each todos as todo (todo)}
 		<li
-			class:done
+			class:done={todo.done}
 		>
 			<label>
-				<input
-					type="checkbox"
-					checked={todo.done}
-					on:change={(e) => store.mark(todo, e.currentTarget.checked)}
-				/>
-
+				<input type="checkbox" bind:checked={todo.done}/>
 				<span>{todo.description}</span>
-
-				<button on:click={() => store.remove(todo)} aria-label="Remove"></button>
+				<button onclick={() => remove(todo)} aria-label="Remove"></button>
 			</label>
 		</li>
 	{/each}
@@ -37,4 +30,4 @@
 	button {
 		background-image: url(./remove.svg);
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-a/src/lib/todos.js b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-a/src/lib/todos.js
deleted file mode 100644
index 82d12ecfe7..0000000000
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-a/src/lib/todos.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { writable } from 'svelte/store';
-
-export function createTodoStore(initial) {
-	let uid = 1;
-
-	const todos = initial.map(({ done, description }) => {
-		return {
-			id: uid++,
-			done,
-			description
-		};
-	});
-
-	const { subscribe, update } = writable(todos);
-
-	return {
-		subscribe,
-		add: description => {
-			const todo = {
-				id: uid++,
-				done: false,
-				description
-			};
-
-			update($todos => [...$todos, todo])
-		},
-		remove: todo => {
-			update($todos => $todos.filter((t) => t !== todo));
-		},
-		mark: (todo, done) => {
-			update($todos => [
-				...$todos.filter((t) => t !== todo),
-				{ ...todo, done }
-			]);
-		}
-	};
-}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte
index 680de1fd96..6639712f63 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte
@@ -1,27 +1,20 @@
 <script>
 	import { send, receive } from './transition.js';
 
-	export let store;
-	export let done;
+	let { todos, remove } = $props();
 </script>
 
 <ul class="todos">
-	{#each $store.filter((todo) => todo.done === done) as todo (todo.id)}
+	{#each todos as todo (todo)}
 		<li
-			class:done
+			class:done={todo.done}
 			in:receive={{ key: todo.id }}
 			out:send={{ key: todo.id }}
 		>
 			<label>
-				<input
-					type="checkbox"
-					checked={todo.done}
-					on:change={(e) => store.mark(todo, e.currentTarget.checked)}
-				/>
-
+				<input type="checkbox" bind:checked={todo.done}/>
 				<span>{todo.description}</span>
-
-				<button on:click={() => store.remove(todo)} aria-label="Remove"></button>
+				<button onclick={() => remove(todo)} aria-label="Remove"></button>
 			</label>
 		</li>
 	{/each}
@@ -41,4 +34,4 @@
 	button {
 		background-image: url(./remove.svg);
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/index.md
index 8a3a945fb5..6c35d49e7f 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/index.md
@@ -31,4 +31,4 @@ Then, add them to the `<li>` element, using the `todo.id` property as a key to m
 >
 ```
 
-Now, when you toggle items, they move smoothly to their new location. The non-transitioning items still jump around awkwardly — we can fix that in the next chapter.
+Now, when you toggle items, they move smoothly to their new location. The non-transitioning items still jump around awkwardly — we can fix that in the next exercise.

From 15ff54e9264f57ca6a14e9eaaefbbe4c7f0172f6 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 18 Oct 2024 23:40:47 -0400
Subject: [PATCH 09/19] update

---
 .../+assets/app-a/src/lib/App.svelte          |  0
 .../+assets/app-a/src/lib/TodoList.svelte     |  0
 .../+assets/app-a/src/lib/remove.svg          |  0
 .../+assets/app-a/src/lib/transition.js       |  0
 .../+assets/app-b/src/lib/TodoList.svelte     |  0
 .../index.md                                  |  3 +--
 .../+assets/app-b/src/lib/TodoList.svelte     | 23 +++++--------------
 .../01-animate => 02-animations}/index.md     |  5 ++--
 .../10-animations/index.md                    |  5 ----
 9 files changed, 9 insertions(+), 27 deletions(-)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/{09-deferred-transitions => 01-deferred-transitions}/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/{09-deferred-transitions => 01-deferred-transitions}/+assets/app-a/src/lib/TodoList.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/{09-deferred-transitions => 01-deferred-transitions}/+assets/app-a/src/lib/remove.svg (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/{09-deferred-transitions => 01-deferred-transitions}/+assets/app-a/src/lib/transition.js (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/{09-deferred-transitions => 01-deferred-transitions}/+assets/app-b/src/lib/TodoList.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/{09-deferred-transitions => 01-deferred-transitions}/index.md (97%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/{10-animations/01-animate => 02-animations}/+assets/app-b/src/lib/TodoList.svelte (55%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/{10-animations/01-animate => 02-animations}/index.md (95%)
 delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/10-animations/index.md

diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-a/src/lib/remove.svg b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/remove.svg
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-a/src/lib/remove.svg
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/remove.svg
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-a/src/lib/transition.js b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/transition.js
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-a/src/lib/transition.js
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/transition.js
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/01-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/01-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/01-deferred-transitions/index.md
similarity index 97%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/01-deferred-transitions/index.md
index 6c35d49e7f..09b15210f3 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/01-deferred-transitions/index.md
@@ -15,8 +15,7 @@ Open `TodoList.svelte`. First, import the `send` and `receive` transitions from
 <script>
 	+++import { send, receive } from './transition.js';+++
 
-	export let store;
-	export let done;
+	let { todos, remove } = $props();
 </script>
 ```
 
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/10-animations/01-animate/+assets/app-b/src/lib/TodoList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/02-animations/+assets/app-b/src/lib/TodoList.svelte
similarity index 55%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/10-animations/01-animate/+assets/app-b/src/lib/TodoList.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/02-animations/+assets/app-b/src/lib/TodoList.svelte
index 7d62582a2b..e213d2717c 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/10-animations/01-animate/+assets/app-b/src/lib/TodoList.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/02-animations/+assets/app-b/src/lib/TodoList.svelte
@@ -2,28 +2,21 @@
 	import { flip } from 'svelte/animate';
 	import { send, receive } from './transition.js';
 
-	export let store;
-	export let done;
+	let { todos, remove } = $props();
 </script>
 
 <ul class="todos">
-	{#each $store.filter((todo) => todo.done === done) as todo (todo.id)}
+	{#each todos as todo (todo)}
 		<li
-			class:done
+			class:done={todo.done}
 			in:receive={{ key: todo.id }}
 			out:send={{ key: todo.id }}
 			animate:flip={{ duration: 200 }}
 		>
 			<label>
-				<input
-					type="checkbox"
-					checked={todo.done}
-					on:change={(e) => store.mark(todo, e.currentTarget.checked)}
-				/>
-
+				<input type="checkbox" bind:checked={todo.done}/>
 				<span>{todo.description}</span>
-
-				<button on:click={() => store.remove(todo)} aria-label="Remove"></button>
+				<button onclick={() => remove(todo)} aria-label="Remove"></button>
 			</label>
 		</li>
 	{/each}
@@ -36,10 +29,6 @@
 		display: flex;
 	}
 
-	.done {
-		opacity: 0.5;
-	}
-
 	span {
 		flex: 1;
 	}
@@ -47,4 +36,4 @@
 	button {
 		background-image: url(./remove.svg);
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/10-animations/01-animate/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/02-animations/index.md
similarity index 95%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/10-animations/01-animate/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/02-animations/index.md
index bcd3e0dd58..6c31a4a94b 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/10-animations/01-animate/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/02-animations/index.md
@@ -1,5 +1,5 @@
 ---
-title: The animate directive
+title: Animations
 ---
 
 In the [previous chapter](/tutorial/svelte/deferred-transitions), we used deferred transitions to create the illusion of motion as elements move from one todo list to the other.
@@ -14,8 +14,7 @@ First, import the `flip` function — flip stands for ['First, Last, Invert, Pla
 	+++import { flip } from 'svelte/animate';+++
 	import { send, receive } from './transition.js';
 
-	export let store;
-	export let done;
+	let { todos, remove } = $props();
 </script>
 ```
 
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/10-animations/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/10-animations/index.md
deleted file mode 100644
index 82c3077d45..0000000000
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/10-animations/index.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-title: Animations
-scope: { 'prefix': '/src/lib/', 'name': 'src' }
-focus: /src/lib/TodoList.svelte
----

From 763604b4845fa7bfa639d2148cf11df3d06f0fd4 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 19 Oct 2024 00:03:23 -0400
Subject: [PATCH 10/19] update context example

---
 .../+assets/app-a/src/lib/Canvas.svelte       | 36 +++-----
 .../+assets/app-a/src/lib/Square.svelte       |  7 +-
 .../+assets/app-b/src/lib/Canvas.svelte       | 41 +++-------
 .../+assets/app-b/src/lib/Square.svelte       |  7 +-
 .../08-context/01-context-api/index.md        | 82 ++++++++-----------
 5 files changed, 63 insertions(+), 110 deletions(-)

diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/+assets/app-a/src/lib/Canvas.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/+assets/app-a/src/lib/Canvas.svelte
index 4fe93cf1ef..13272e2ec0 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/+assets/app-a/src/lib/Canvas.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/+assets/app-a/src/lib/Canvas.svelte
@@ -1,42 +1,28 @@
 <script>
-	import { afterUpdate, onMount, tick } from 'svelte';
+	import { SvelteSet } from 'svelte/reactivity';
 
-	export let width = 100;
-	export let height = 100;
+	let { width = 100, height = 100, children } = $props();
 
-	let canvas, ctx;
-	let items = new Set();
-	let scheduled = false;
-
-	onMount(() => {
-		ctx = canvas.getContext('2d');
-	});
+	let canvas;
+	let items = new SvelteSet();
 
 	function addItem(fn) {
-		onMount(() => {
+		$effect(() => {
 			items.add(fn);
 			return () => items.delete(fn);
 		});
-		
-		afterUpdate(async () => {
-			if (scheduled) return;
-			
-			scheduled = true;
-			await tick();
-			scheduled = false;
-
-			draw();
-		});
 	}
 
-	function draw() {
+	$effect(() => {
+		const ctx = canvas.getContext('2d');
+
 		ctx.clearRect(0, 0, width, height);
 		items.forEach(fn => fn(ctx));
-	}
+	});
 </script>
 
 <canvas bind:this={canvas} {width} {height}>
-	<slot />
+	{@render children()}
 </canvas>
 
 <style>
@@ -44,4 +30,4 @@
 		width: 100%;
 		height: 100%;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/+assets/app-a/src/lib/Square.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/+assets/app-a/src/lib/Square.svelte
index a8970a3584..0697852920 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/+assets/app-a/src/lib/Square.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/+assets/app-a/src/lib/Square.svelte
@@ -1,8 +1,5 @@
 <script>
-	export let x;
-	export let y;
-	export let size;
-	export let rotate;
+	let { x, y, size, rotate } = $props();
 
 	function draw(ctx) {
 		ctx.save();
@@ -15,4 +12,4 @@
 
 		ctx.restore();
 	}
-</script>
\ No newline at end of file
+</script>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/+assets/app-b/src/lib/Canvas.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/+assets/app-b/src/lib/Canvas.svelte
index 55bee3bc80..13015e0cdf 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/+assets/app-b/src/lib/Canvas.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/+assets/app-b/src/lib/Canvas.svelte
@@ -1,46 +1,31 @@
 <script>
-	import { setContext, afterUpdate, onMount, tick } from 'svelte';
+	import { setContext } from 'svelte';
+	import { SvelteSet } from 'svelte/reactivity';
 
-	export let width = 100;
-	export let height = 100;
+	let { width = 100, height = 100, children } = $props();
 
-	let canvas, ctx;
-	let items = new Set();
-	let scheduled = false;
+	let canvas;
+	let items = new SvelteSet();
 
-	onMount(() => {
-		ctx = canvas.getContext('2d');
-	});
-
-	setContext('canvas', {
-		addItem
-	});
+	setContext('canvas', { addItem });
 
 	function addItem(fn) {
-		onMount(() => {
+		$effect(() => {
 			items.add(fn);
 			return () => items.delete(fn);
 		});
-		
-		afterUpdate(async () => {
-			if (scheduled) return;
-			
-			scheduled = true;
-			await tick();
-			scheduled = false;
-
-			draw();
-		});
 	}
 
-	function draw() {
+	$effect(() => {
+		const ctx = canvas.getContext('2d');
+
 		ctx.clearRect(0, 0, width, height);
 		items.forEach(fn => fn(ctx));
-	}
+	});
 </script>
 
 <canvas bind:this={canvas} {width} {height}>
-	<slot />
+	{@render children()}
 </canvas>
 
 <style>
@@ -48,4 +33,4 @@
 		width: 100%;
 		height: 100%;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/+assets/app-b/src/lib/Square.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/+assets/app-b/src/lib/Square.svelte
index 9e98f97cc8..468feb7e5c 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/+assets/app-b/src/lib/Square.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/+assets/app-b/src/lib/Square.svelte
@@ -1,10 +1,7 @@
 <script>
 	import { getContext } from 'svelte';
 
-	export let x;
-	export let y;
-	export let size;
-	export let rotate;
+	let { x, y, size, rotate } = $props();
 
 	getContext('canvas').addItem(draw);
 
@@ -19,4 +16,4 @@
 
 		ctx.restore();
 	}
-</script>
\ No newline at end of file
+</script>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/index.md
index 3eec88a0c5..405f33b066 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/index.md
@@ -6,43 +6,35 @@ The context API provides a mechanism for components to 'talk' to each other with
 
 Inside `Canvas.svelte`, there's an `addItem` function that adds an item to the canvas. We can make it available to components inside `<Canvas>`, like `<Square>`, with `setContext`:
 
-```svelte
+```js
 /// file: Canvas.svelte
-<script>
-	import { +++setContext+++, afterUpdate, onMount, tick } from 'svelte';
++++import { setContext } from 'svelte';+++
+import { SvelteSet } from 'svelte/reactivity';
 
-	// ...
+let { width = 100, height = 100, children } = $props();
 
-	onMount(() => {
-		ctx = canvas.getContext('2d');
-	});
+let canvas;
+let items = new SvelteSet();
 
-+++	setContext('canvas', {
-		addItem
-	});+++
++++setContext('canvas', { addItem });+++
 
-	function addItem(fn) {...}
-
-	function draw() {...}
-</script>
+function addItem(fn) {
+	$effect(() => {
+		items.add(fn);
+		return () => items.delete(fn);
+	});
+}
 ```
 
 Inside child components, we can now get the context with, well, `getContext`:
 
-```svelte
+```js
 /// file: Square.svelte
-<script>
-	+++import { getContext } from 'svelte';+++
++++import { getContext } from 'svelte';+++
 
-	export let x;
-	export let y;
-	export let size;
-	export let rotate;
+let { x, y, size, rotate } = $props();
 
-	+++getContext('canvas').addItem(draw);+++
-
-	function draw(ctx) {...}
-</script>
++++getContext('canvas').addItem(draw);+++
 ```
 
 So far, so... boring. Let's add some randomness to the grid:
@@ -65,25 +57,21 @@ So far, so... boring. Let's add some randomness to the grid:
 </div>
 ```
 
-Like lifecycle functions such as `onMount`, `setContext` and `getContext` must be called during component initialisation. (The context key (`'canvas'` in this case) can be anything you like, including non-strings, which is useful for controlling who can access the context.)
-
-Your context object can include anything, including stores. This allows you to pass values that change over time to child components:
-
-```js
-// in a parent component
-import { setContext } from 'svelte';
-import { writable } from 'svelte/store';
-
-setContext('my-context', {
-	count: writable(0)
-});
-```
-
-```js
-// in a child component
-import { getContext } from 'svelte';
-
-const { count } = getContext('my-context');
-
-$: console.log({ count: $count });
-```
+`setContext` and `getContext` must be called during component initialisation, so that the context can be correctly bound. The key — `'canvas'` in this case — can be anything you like, including non-strings, which is useful for controlling who can access the context.
+
+> [!NOTE] Your context object can include anything, including reactive state. This allows you to pass values that change over time to child components:
+>
+> ```js
+> // in a parent component
+> import { setContext } from 'svelte';
+>
+> let context = $state({...});
+> setContext('my-context', context);
+> ```
+>
+> ```js
+> // in a child component
+> import { getContext } from 'svelte';
+>
+> const context = getContext('my-context');
+> ```

From 70ab43d1594a43d211106f71b582794fd053fae4 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 19 Oct 2024 00:14:35 -0400
Subject: [PATCH 11/19] more

---
 .../+assets/app-a/src/lib/App.svelte          |   6 +-
 .../+assets/app-b/src/lib/App.svelte          |   8 +--
 .../index.md                                  |   4 +-
 .../+assets/app-a/src/lib/App.svelte          |  25 -------
 .../+assets/app-a/src/lib/BlueThing.svelte    |   7 --
 .../+assets/app-a/src/lib/GreenThing.svelte   |   7 --
 .../+assets/app-a/src/lib/RedThing.svelte     |   7 --
 .../+assets/app-b/src/lib/App.svelte          |  21 ------
 .../02-svelte-component/index.md              |  33 ---------
 .../+assets/app-a/src/lib/App.svelte          |   0
 .../+assets/app-a/src/lib/deepsea.webp        | Bin
 .../+assets/app-b/src/lib/App.svelte          |   0
 .../index.md                                  |   0
 .../+assets/app-a/src/lib/App.svelte          |  67 ------------------
 .../+assets/app-a/src/lib/Board.svelte        |  25 -------
 .../+assets/app-a/src/lib/utils.js            |  19 -----
 .../+assets/app-b/src/lib/App.svelte          |  67 ------------------
 .../10-svelte-fragment/index.md               |  28 --------
 .../+assets/app-a/src/lib/App.svelte          |   0
 .../+assets/app-a/src/lib/File.svelte         |   0
 .../+assets/app-a/src/lib/Folder.svelte       |   0
 .../+assets/app-a/src/lib/data.js             |   0
 .../+assets/app-b/src/lib/Folder.svelte       |   0
 .../01-svelte-self/index.md                   |   0
 24 files changed, 9 insertions(+), 315 deletions(-)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/{04-svelte-window => 01-svelte-window}/+assets/app-a/src/lib/App.svelte (89%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/{04-svelte-window => 01-svelte-window}/+assets/app-b/src/lib/App.svelte (85%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/{04-svelte-window => 01-svelte-window}/index.md (55%)
 delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-component/+assets/app-a/src/lib/App.svelte
 delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-component/+assets/app-a/src/lib/BlueThing.svelte
 delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-component/+assets/app-a/src/lib/GreenThing.svelte
 delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-component/+assets/app-a/src/lib/RedThing.svelte
 delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-component/+assets/app-b/src/lib/App.svelte
 delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-component/index.md
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/{05-svelte-window-bindings => 02-svelte-window-bindings}/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/{05-svelte-window-bindings => 02-svelte-window-bindings}/+assets/app-a/src/lib/deepsea.webp (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/{05-svelte-window-bindings => 02-svelte-window-bindings}/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/{05-svelte-window-bindings => 02-svelte-window-bindings}/index.md (100%)
 delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/10-svelte-fragment/+assets/app-a/src/lib/App.svelte
 delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/10-svelte-fragment/+assets/app-a/src/lib/Board.svelte
 delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/10-svelte-fragment/+assets/app-a/src/lib/utils.js
 delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/10-svelte-fragment/+assets/app-b/src/lib/App.svelte
 delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/10-svelte-fragment/index.md
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{09-special-elements => 11-misc}/01-svelte-self/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{09-special-elements => 11-misc}/01-svelte-self/+assets/app-a/src/lib/File.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{09-special-elements => 11-misc}/01-svelte-self/+assets/app-a/src/lib/Folder.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{09-special-elements => 11-misc}/01-svelte-self/+assets/app-a/src/lib/data.js (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{09-special-elements => 11-misc}/01-svelte-self/+assets/app-b/src/lib/Folder.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{09-special-elements => 11-misc}/01-svelte-self/index.md (100%)

diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-window/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-window/+assets/app-a/src/lib/App.svelte
similarity index 89%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-window/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-window/+assets/app-a/src/lib/App.svelte
index c1d9205f11..e5e2297729 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-window/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-window/+assets/app-a/src/lib/App.svelte
@@ -1,8 +1,8 @@
 <script>
-	let key;
-	let keyCode;
+	let key = $state();
+	let keyCode = $state();
 
-	function handleKeydown(event) {
+	function onkeydown(event) {
 		key = event.key;
 		keyCode = event.keyCode;
 	}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-window/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-window/+assets/app-b/src/lib/App.svelte
similarity index 85%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-window/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-window/+assets/app-b/src/lib/App.svelte
index 68f5fa4cdc..cef72d84c1 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-window/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-window/+assets/app-b/src/lib/App.svelte
@@ -1,14 +1,14 @@
 <script>
-	let key;
-	let keyCode;
+	let key = $state();
+	let keyCode = $state();
 
-	function handleKeydown(event) {
+	function onkeydown(event) {
 		key = event.key;
 		keyCode = event.keyCode;
 	}
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
+<svelte:window {onkeydown} />
 
 <div style="text-align: center">
 	{#if key}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-window/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-window/index.md
similarity index 55%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-window/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-window/index.md
index 6f80878e53..6fa4786750 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-window/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-window/index.md
@@ -4,9 +4,9 @@ title: <svelte:window>
 
 Just as you can add event listeners to any DOM element, you can add event listeners to the `window` object with `<svelte:window>`.
 
-We've already got a `handleKeydown` function declared — now all we need to do is add a `keydown` listener:
+We've already got an `onkeydown` function declared — now all we need to do is wire it up:
 
 ```svelte
 /// file: App.svelte
-<svelte:window +++onkeydown={handleKeydown}+++ />
+<svelte:window +++{onkeydown}+++ />
 ```
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-component/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-component/+assets/app-a/src/lib/App.svelte
deleted file mode 100644
index 0d5132fc78..0000000000
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-component/+assets/app-a/src/lib/App.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script>
-	import RedThing from './RedThing.svelte';
-	import GreenThing from './GreenThing.svelte';
-	import BlueThing from './BlueThing.svelte';
-
-	const options = [
-		{ color: 'red', component: RedThing },
-		{ color: 'green', component: GreenThing },
-		{ color: 'blue', component: BlueThing }
-	];
-
-	let selected = options[0];
-</script>
-
-<select bind:value={selected}>
-	{#each options as option}
-		<option value={option}>{option.color}</option>
-	{/each}
-</select>
-
-{#if selected.color === 'red'}
-	<RedThing />
-{:else}
-	<p>TODO others</p>
-{/if}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-component/+assets/app-a/src/lib/BlueThing.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-component/+assets/app-a/src/lib/BlueThing.svelte
deleted file mode 100644
index 16ac89136b..0000000000
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-component/+assets/app-a/src/lib/BlueThing.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<p>Blue thing</p>
-
-<style>
-	p {
-		color: blue;
-	}
-</style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-component/+assets/app-a/src/lib/GreenThing.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-component/+assets/app-a/src/lib/GreenThing.svelte
deleted file mode 100644
index 302da2bdcf..0000000000
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-component/+assets/app-a/src/lib/GreenThing.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<p>Green thing</p>
-
-<style>
-	p {
-		color: green;
-	}
-</style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-component/+assets/app-a/src/lib/RedThing.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-component/+assets/app-a/src/lib/RedThing.svelte
deleted file mode 100644
index 6fd2a61b4c..0000000000
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-component/+assets/app-a/src/lib/RedThing.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<p>Red thing</p>
-
-<style>
-	p {
-		color: red;
-	}
-</style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-component/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-component/+assets/app-b/src/lib/App.svelte
deleted file mode 100644
index 69e51253fc..0000000000
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-component/+assets/app-b/src/lib/App.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-	import RedThing from './RedThing.svelte';
-	import GreenThing from './GreenThing.svelte';
-	import BlueThing from './BlueThing.svelte';
-
-	const options = [
-		{ color: 'red', component: RedThing },
-		{ color: 'green', component: GreenThing },
-		{ color: 'blue', component: BlueThing }
-	];
-
-	let selected = options[0];
-</script>
-
-<select bind:value={selected}>
-	{#each options as option}
-		<option value={option}>{option.color}</option>
-	{/each}
-</select>
-
-<svelte:component this={selected.component} />
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-component/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-component/index.md
deleted file mode 100644
index bc16deb01e..0000000000
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-component/index.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-title: <svelte:component>
----
-
-A component can change its type altogether with `<svelte:component>`. In this exercise, we want to show `RedThing.svelte` if the `color` is `red`, `GreenThing.svelte` if it's `green`, and so on.
-
-We _could_ do this with a sequence of `if` blocks...
-
-```svelte
-/// file: App.svelte
-{#if selected.color === 'red'}
-	<RedThing/>
-{:else if selected.color === 'green'}
-	<GreenThing/>
-{:else if selected.color === 'blue'}
-	<BlueThing/>
-{/if}
-```
-
-...but it's a little cumbersome. Instead, we can create a single dynamic component:
-
-```svelte
-/// file: App.svelte
-<select bind:value={selected}>
-	{#each options as option}
-		<option value={option}>{option.color}</option>
-	{/each}
-</select>
-
-+++<svelte:component this={selected.component} />+++
-```
-
-The `this` value can be any component constructor, or a falsy value — if it's falsy, no component is rendered.
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-window-bindings/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-window-bindings/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-window-bindings/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-window-bindings/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-window-bindings/+assets/app-a/src/lib/deepsea.webp b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-window-bindings/+assets/app-a/src/lib/deepsea.webp
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-window-bindings/+assets/app-a/src/lib/deepsea.webp
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-window-bindings/+assets/app-a/src/lib/deepsea.webp
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-window-bindings/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-window-bindings/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-window-bindings/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-window-bindings/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-window-bindings/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-window-bindings/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-window-bindings/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-window-bindings/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/10-svelte-fragment/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/10-svelte-fragment/+assets/app-a/src/lib/App.svelte
deleted file mode 100644
index fe27a98eec..0000000000
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/10-svelte-fragment/+assets/app-a/src/lib/App.svelte
+++ /dev/null
@@ -1,67 +0,0 @@
-<script>
-	import Board from './Board.svelte';
-	import { getWinningLine } from './utils.js';
-
-	let squares = Array(9).fill('');
-	let next = 'x';
-
-	$: winningLine = getWinningLine(squares);
-</script>
-
-<div class="container">
-	<Board size={3}>
-		<div slot="game">
-			{#each squares as square, i}
-				<button
-					class="square"
-					class:winning={winningLine?.includes(i)}
-					disabled={square}
-					on:click={() => {
-						squares[i] = next;
-						next = next === 'x' ? 'o' : 'x';
-					}}
-				>
-					{square}
-				</button>
-			{/each}
-		</div>
-
-		<div slot="controls">
-			<button on:click={() => {
-				squares = Array(9).fill('');
-				next = 'x';
-			}}>
-				Reset
-			</button>
-		</div>
-	</Board>
-</div>
-
-<style>
-	.container {
-		display: flex;
-		flex-direction: column;
-		gap: 1em;
-		align-items: center;
-		justify-content: center;
-		height: 100%;
-		margin: 0 auto;
-	}
-
-	.square, .square:disabled {
-		background: white;
-		border-radius: 0;
-		color: #222;
-		opacity: 1;
-		font-size: 2em;
-		padding: 0;
-	}
-
-	.winning {
-		font-weight: bold;
-	}
-
-	.container:has(.winning) .square:not(.winning) {
-		color: #ccc;
-	}
-</style>
\ No newline at end of file
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/10-svelte-fragment/+assets/app-a/src/lib/Board.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/10-svelte-fragment/+assets/app-a/src/lib/Board.svelte
deleted file mode 100644
index db87c6c5dd..0000000000
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/10-svelte-fragment/+assets/app-a/src/lib/Board.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script>
-	export let size;
-</script>
-
-<div class="board" style="--size: {size}">
-	<slot name="game" />
-</div>
-
-<slot name="controls" />
-
-<style>
-	.board {
-		display: grid;
-		grid-template-columns: repeat(var(--size), 1fr);
-		grid-template-rows: repeat(var(--size), 1fr);
-		height: 100%;
-		max-height: 20em;
-		aspect-ratio: 1;
-		background: black;
-		gap: 1px;
-		padding: 0.5em;
-		border-radius: 0.2em;
-		filter: drop-shadow(0.2em 0.2em 1em rgba(0,0,0,0.3));
-	}
-</style>
\ No newline at end of file
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/10-svelte-fragment/+assets/app-a/src/lib/utils.js b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/10-svelte-fragment/+assets/app-a/src/lib/utils.js
deleted file mode 100644
index 543248b5cb..0000000000
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/10-svelte-fragment/+assets/app-a/src/lib/utils.js
+++ /dev/null
@@ -1,19 +0,0 @@
-const lines = [
-	[0, 1, 2],
-	[3, 4, 5],
-	[6, 7, 8],
-	[0, 3, 6],
-	[1, 4, 7],
-	[2, 5, 8],
-	[0, 4, 8],
-	[2, 4, 6]
-];
-
-export function getWinningLine(squares) {
-	for (const line of lines) {
-		const [a, b, c] = line;
-		if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
-			return line;
-		}
-	}
-}
\ No newline at end of file
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/10-svelte-fragment/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/10-svelte-fragment/+assets/app-b/src/lib/App.svelte
deleted file mode 100644
index 7b32fa0079..0000000000
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/10-svelte-fragment/+assets/app-b/src/lib/App.svelte
+++ /dev/null
@@ -1,67 +0,0 @@
-<script>
-	import Board from './Board.svelte';
-	import { getWinningLine } from './utils.js';
-
-	let squares = Array(9).fill('');
-	let next = 'x';
-
-	$: winningLine = getWinningLine(squares);
-</script>
-
-<div class="container">
-	<Board size={3}>
-		<svelte:fragment slot="game">
-			{#each squares as square, i}
-				<button
-					class="square"
-					class:winning={winningLine?.includes(i)}
-					disabled={square}
-					on:click={() => {
-						squares[i] = next;
-						next = next === 'x' ? 'o' : 'x';
-					}}
-				>
-					{square}
-				</button>
-			{/each}
-		</svelte:fragment>
-
-		<div slot="controls">
-			<button on:click={() => {
-				squares = Array(9).fill('');
-				next = 'x';
-			}}>
-				Reset
-			</button>
-		</div>
-	</Board>
-</div>
-
-<style>
-	.container {
-		display: flex;
-		flex-direction: column;
-		gap: 1em;
-		align-items: center;
-		justify-content: center;
-		height: 100%;
-		margin: 0 auto;
-	}
-
-	.square, .square:disabled {
-		background: white;
-		border-radius: 0;
-		color: #222;
-		opacity: 1;
-		font-size: 2em;
-		padding: 0;
-	}
-
-	.winning {
-		font-weight: bold;
-	}
-
-	.container:has(.winning) .square:not(.winning) {
-		color: #ccc;
-	}
-</style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/10-svelte-fragment/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/10-svelte-fragment/index.md
deleted file mode 100644
index 9b479f47b9..0000000000
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/10-svelte-fragment/index.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: <svelte:fragment>
----
-
-The `<svelte:fragment>` element allows you to place content in a named slot without wrapping it in a container DOM element.
-
-In this exercise, we're making a Tic-Tac-Toe game. To form a grid, the `<button>` elements in `App.svelte` should be direct descendants of the `<div class="board">` element in `Board.svelte`.
-
-At the moment, it's horribly broken, because they're children of `<div slot="game">` instead. Let's fix it:
-
-```svelte
-/// file: App.svelte
-<+++svelte:fragment+++ slot="game">
-	{#each squares as square, i}
-		<button
-			class="square"
-			class:winning={winningLine?.includes(i)}
-			disabled={square}
-			on:click={() => {
-				squares[i] = next;
-				next = next === 'x' ? 'o' : 'x';
-			}}
-		>
-			{square}
-		</button>
-	{/each}
-</+++svelte:fragment+++>
-```
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-self/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-self/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-self/+assets/app-a/src/lib/File.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/+assets/app-a/src/lib/File.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-self/+assets/app-a/src/lib/File.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/+assets/app-a/src/lib/File.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-self/+assets/app-a/src/lib/Folder.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/+assets/app-a/src/lib/Folder.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-self/+assets/app-a/src/lib/Folder.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/+assets/app-a/src/lib/Folder.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-self/+assets/app-a/src/lib/data.js b/apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/+assets/app-a/src/lib/data.js
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-self/+assets/app-a/src/lib/data.js
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/+assets/app-a/src/lib/data.js
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-self/+assets/app-b/src/lib/Folder.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/+assets/app-b/src/lib/Folder.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-self/+assets/app-b/src/lib/Folder.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/+assets/app-b/src/lib/Folder.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-self/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-self/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/index.md

From 7e8c772eaafc857e95e4b78a3232a6b400cfa8bc Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 19 Oct 2024 00:19:10 -0400
Subject: [PATCH 12/19] another

---
 .../+assets/app-a/src/lib/App.svelte            |  2 +-
 .../+assets/app-b/src/lib/App.svelte            |  2 +-
 .../03-svelte-element/index.md                  | 17 +++++++++++------
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-element/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-element/+assets/app-a/src/lib/App.svelte
index 7967d323f1..3adda11dca 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-element/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-element/+assets/app-a/src/lib/App.svelte
@@ -1,6 +1,6 @@
 <script>
 	const options = ['h1', 'h2', 'h3', 'p', 'marquee'];
-	let selected = options[0];
+	let selected = $state(options[0]);
 </script>
 
 <select bind:value={selected}>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-element/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-element/+assets/app-b/src/lib/App.svelte
index b63a9c9d2d..1fdaa512a2 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-element/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-element/+assets/app-b/src/lib/App.svelte
@@ -1,6 +1,6 @@
 <script>
 	const options = ['h1', 'h2', 'h3', 'p', 'marquee'];
-	let selected = options[0];
+	let selected = $state(options[0]);
 </script>
 
 <select bind:value={selected}>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-element/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-element/index.md
index b167488a6f..1112d9d2b1 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-element/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-element/index.md
@@ -2,16 +2,21 @@
 title: <svelte:element>
 ---
 
-Similarly, we don't always know in advance what kind of DOM element to render. `<svelte:element>` comes in handy here. As with the [previous exercise](svelte-component), we can replace a long sequence of `if` blocks with a single dynamic element:
+Sometimes you don't know in advance which element needs to be rendered. Rather than having a long list of `{#if ...}` blocks...
 
 ```svelte
 /// file: App.svelte
-<select bind:value={selected}>
-	{#each options as option}
-		<option value={option}>{option}</option>
-	{/each}
-</select>
+{#if selected === 'h1'}
+	<h1>I'm a <code>&lt;h1&gt;</code> element</h1>
+{:else}
+	<p>TODO others</p>
+{/if}
+```
+
+...we can use `<svelte:element>`:
 
+```svelte
+/// file: App.svelte
 +++<svelte:element this={selected}>
 	I'm a <code>&lt;{selected}&gt;</code> element
 </svelte:element>+++

From c7ed244f80f624b31fe82d7d646aefc2ab5fd7c6 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 19 Oct 2024 00:25:42 -0400
Subject: [PATCH 13/19] more

---
 .../+assets/app-a/src/lib/App.svelte                      | 2 +-
 .../+assets/app-b/src/lib/App.svelte                      | 2 +-
 .../06-svelte-body/+assets/app-a/src/lib/App.svelte       | 2 +-
 .../06-svelte-body/+assets/app-b/src/lib/App.svelte       | 6 +++---
 .../09-special-elements/06-svelte-body/index.md           | 6 +++---
 .../07-svelte-document/+assets/app-a/src/lib/App.svelte   | 6 ++++--
 .../07-svelte-document/+assets/app-b/src/lib/App.svelte   | 8 +++++---
 .../09-special-elements/07-svelte-document/index.md       | 4 ++--
 8 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-window-bindings/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-window-bindings/+assets/app-a/src/lib/App.svelte
index 9be638f6b5..935a6be4cc 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-window-bindings/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-window-bindings/+assets/app-a/src/lib/App.svelte
@@ -1,5 +1,5 @@
 <script>
-	let y = 0;
+	let y = $state(0);
 </script>
 
 <svelte:window />
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-window-bindings/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-window-bindings/+assets/app-b/src/lib/App.svelte
index 870b684f7b..ed2c5d2e11 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-window-bindings/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-window-bindings/+assets/app-b/src/lib/App.svelte
@@ -1,5 +1,5 @@
 <script>
-	let y = 0;
+	let y = $state(0);
 </script>
 
 <svelte:window bind:scrollY={y} />
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-body/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-body/+assets/app-a/src/lib/App.svelte
index 34a17800ae..8585df6463 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-body/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-body/+assets/app-a/src/lib/App.svelte
@@ -1,7 +1,7 @@
 <script>
 	import kitten from './kitten.png';
 
-	let hereKitty = false;
+	let hereKitty = $state(false);
 </script>
 
 <svelte:body />
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-body/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-body/+assets/app-b/src/lib/App.svelte
index 262359b0e1..5bd3e3cbd8 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-body/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-body/+assets/app-b/src/lib/App.svelte
@@ -1,12 +1,12 @@
 <script>
 	import kitten from './kitten.png';
 
-	let hereKitty = false;
+	let hereKitty = $state(false);
 </script>
 
 <svelte:body
-	on:mouseenter={() => hereKitty = true}
-	on:mouseleave={() => hereKitty = false}
+	onmouseenter={() => hereKitty = true}
+	onmouseleave={() => hereKitty = false}
 />
 
 <!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-body/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-body/index.md
index ada28707ba..4a985a2e51 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-body/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-body/index.md
@@ -4,13 +4,13 @@ title: <svelte:body>
 
 Similar to `<svelte:window>`, the `<svelte:body>` element allows you to listen for events that fire on `document.body`. This is useful with the `mouseenter` and `mouseleave` events, which don't fire on `window`.
 
-Add these `mouseenter` and `mouseleave` handlers to the `<svelte:body>` tag...
+Add `onmouseenter` and `onmouseleave` handlers to the `<svelte:body>` tag...
 
 ```svelte
 /// file: App.svelte
 <svelte:body
-	+++on:mouseenter={() => hereKitty = true}+++
-	+++on:mouseleave={() => hereKitty = false}+++
+	+++onmouseenter={() => hereKitty = true}+++
+	+++onmouseleave={() => hereKitty = false}+++
 />
 ```
 
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/07-svelte-document/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/07-svelte-document/+assets/app-a/src/lib/App.svelte
index 1687a99a1b..6fa8647b9e 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/07-svelte-document/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/07-svelte-document/+assets/app-a/src/lib/App.svelte
@@ -1,7 +1,9 @@
 <script>
-	let selection = '';
+	let selection = $state('');
 
-	const handleSelectionChange = (e) => selection = document.getSelection();
+	const onselectionchange = (e) => {
+		selection = document.getSelection().toString();
+	};
 </script>
 
 <svelte:document />
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/07-svelte-document/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/07-svelte-document/+assets/app-b/src/lib/App.svelte
index d205e6340e..cd6e72458b 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/07-svelte-document/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/07-svelte-document/+assets/app-b/src/lib/App.svelte
@@ -1,10 +1,12 @@
 <script>
-	let selection = '';
+	let selection = $state('');
 
-	const handleSelectionChange = (e) => selection = document.getSelection();
+	const onselectionchange = (e) => {
+		selection = document.getSelection().toString();
+	};
 </script>
 
-<svelte:document on:selectionchange={handleSelectionChange} />
+<svelte:document {onselectionchange} />
 
 <h1>Select this text to fire events</h1>
 <p>Selection: {selection}</p>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/07-svelte-document/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/07-svelte-document/index.md
index 7d7ad36732..e6856c81c6 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/07-svelte-document/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/07-svelte-document/index.md
@@ -4,11 +4,11 @@ title: <svelte:document>
 
 The `<svelte:document>` element allows you to listen for events that fire on `document`. This is useful with events like `selectionchange`, which doesn't fire on `window`.
 
-Add the `selectionchange` handler to the `<svelte:document>` tag:
+Add the `onselectionchange` handler to the `<svelte:document>` tag:
 
 ```svelte
 /// file: App.svelte
-<svelte:document +++on:selectionchange={handleSelectionChange}+++ />
+<svelte:document +++{onselectionchange}+++ />
 ```
 
 > [!NOTE] Avoid `mouseenter` and `mouseleave` handlers on this element, as these events are not fired on `document` in all browsers. Use `<svelte:body>` instead.

From bf637c61b3d6aa088c54e32bff99ad794366ca89 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 19 Oct 2024 00:26:51 -0400
Subject: [PATCH 14/19] shuffle

---
 .../+assets/app-a/src/lib/App.svelte                |   0
 .../+assets/app-b/src/lib/App.svelte                |   0
 .../index.md                                        |   0
 .../+assets/app-a/src/lib/App.svelte                |   0
 .../+assets/app-a/src/lib/kitten.png                | Bin
 .../+assets/app-b/src/lib/App.svelte                |   0
 .../{06-svelte-body => 04-svelte-body}/index.md     |   2 +-
 .../+assets/app-a/src/lib/App.svelte                |   0
 .../+assets/app-b/src/lib/App.svelte                |   0
 .../{08-svelte-head => 05-svelte-head}/index.md     |   0
 .../+assets/app-a/src/lib/App.svelte                |   0
 .../+assets/app-b/src/lib/App.svelte                |   0
 .../index.md                                        |   0
 13 files changed, 1 insertion(+), 1 deletion(-)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/{07-svelte-document => 03-svelte-document}/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/{07-svelte-document => 03-svelte-document}/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/{07-svelte-document => 03-svelte-document}/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/{06-svelte-body => 04-svelte-body}/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/{06-svelte-body => 04-svelte-body}/+assets/app-a/src/lib/kitten.png (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/{06-svelte-body => 04-svelte-body}/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/{06-svelte-body => 04-svelte-body}/index.md (54%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/{08-svelte-head => 05-svelte-head}/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/{08-svelte-head => 05-svelte-head}/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/{08-svelte-head => 05-svelte-head}/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/{03-svelte-element => 06-svelte-element}/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/{03-svelte-element => 06-svelte-element}/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/{03-svelte-element => 06-svelte-element}/index.md (100%)

diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/07-svelte-document/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-document/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/07-svelte-document/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-document/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/07-svelte-document/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-document/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/07-svelte-document/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-document/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/07-svelte-document/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-document/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/07-svelte-document/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-document/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-body/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-body/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-body/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-body/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-body/+assets/app-a/src/lib/kitten.png b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-body/+assets/app-a/src/lib/kitten.png
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-body/+assets/app-a/src/lib/kitten.png
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-body/+assets/app-a/src/lib/kitten.png
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-body/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-body/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-body/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-body/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-body/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-body/index.md
similarity index 54%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-body/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-body/index.md
index 4a985a2e51..8b707ceb73 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-body/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-body/index.md
@@ -2,7 +2,7 @@
 title: <svelte:body>
 ---
 
-Similar to `<svelte:window>`, the `<svelte:body>` element allows you to listen for events that fire on `document.body`. This is useful with the `mouseenter` and `mouseleave` events, which don't fire on `window`.
+Similar to `<svelte:window>` and `<svelte:document>`, the `<svelte:body>` element allows you to listen for events that fire on `document.body`. This is useful with the `mouseenter` and `mouseleave` events, which don't fire on `window`.
 
 Add `onmouseenter` and `onmouseleave` handlers to the `<svelte:body>` tag...
 
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-head/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-head/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-head/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-head/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-head/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-head/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-element/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-element/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-element/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-element/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-element/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-element/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-element/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-element/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-element/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-element/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-element/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-element/index.md

From 7586e25c735ffc0679df3e469436fcaa8f6ea29c Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 19 Oct 2024 00:28:30 -0400
Subject: [PATCH 15/19] more

---
 .../+assets/app-a/src/lib/App.svelte          |  4 +-
 .../+assets/app-b/src/lib/App.svelte          |  4 +-
 .../05-svelte-head/index.md                   |  2 +-
 .../+assets/app-a/src/lib/App.svelte          | 42 -------------------
 .../+assets/app-a/src/lib/Todo.svelte         | 21 ----------
 .../+assets/app-a/src/lib/flash.js            | 13 ------
 .../+assets/app-b/src/lib/Todo.svelte         | 23 ----------
 .../09-svelte-options/index.md                | 31 --------------
 8 files changed, 5 insertions(+), 135 deletions(-)
 delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/09-svelte-options/+assets/app-a/src/lib/App.svelte
 delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/09-svelte-options/+assets/app-a/src/lib/Todo.svelte
 delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/09-svelte-options/+assets/app-a/src/lib/flash.js
 delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/09-svelte-options/+assets/app-b/src/lib/Todo.svelte
 delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/09-svelte-options/index.md

diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-head/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-head/+assets/app-a/src/lib/App.svelte
index aac3200ac7..0bd377a3cf 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-head/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-head/+assets/app-a/src/lib/App.svelte
@@ -1,6 +1,6 @@
 <script>
 	const themes = ['margaritaville', 'retrowave', 'spaaaaace', 'halloween'];
-	let selected = themes[0];
+	let selected = $state(themes[0]);
 </script>
 
 <h1>Welcome to my site!</h1>
@@ -11,4 +11,4 @@
 	{#each themes as theme}
 		<option>{theme}</option>
 	{/each}
-</select>
\ No newline at end of file
+</select>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-head/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-head/+assets/app-b/src/lib/App.svelte
index 368e24d5a6..0f1392254d 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-head/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-head/+assets/app-b/src/lib/App.svelte
@@ -1,6 +1,6 @@
 <script>
 	const themes = ['margaritaville', 'retrowave', 'spaaaaace', 'halloween'];
-	let selected = themes[0];
+	let selected = $state(themes[0]);
 </script>
 
 <svelte:head>
@@ -15,4 +15,4 @@
 	{#each themes as theme}
 		<option>{theme}</option>
 	{/each}
-</select>
\ No newline at end of file
+</select>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-head/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-head/index.md
index 082b8a02fa..eb64b0d81b 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-head/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-head/index.md
@@ -10,7 +10,7 @@ Since those are quite hard to show in the context of this tutorial, we'll use it
 /// file: App.svelte
 <script>
 	const themes = ['margaritaville', 'retrowave', 'spaaaaace', 'halloween'];
-	let selected = themes[0];
+	let selected = $state(themes[0]);
 </script>
 
 +++<svelte:head>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/09-svelte-options/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/09-svelte-options/+assets/app-a/src/lib/App.svelte
deleted file mode 100644
index fefdc91be5..0000000000
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/09-svelte-options/+assets/app-a/src/lib/App.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script>
-	import Todo from './Todo.svelte';
-
-	let todos = [
-		{ id: 1, done: true, text: 'wash the car' },
-		{ id: 2, done: false, text: 'take the dog for a walk' },
-		{ id: 3, done: false, text: 'mow the lawn' }
-	];
-
-	function toggle(toggled) {
-		todos = todos.map((todo) => {
-			if (todo === toggled) {
-				// return a new object
-				return {
-					id: todo.id,
-					text: todo.text,
-					done: !todo.done
-				};
-			}
-
-			// return the same object
-			return todo;
-		});
-	}
-</script>
-
-<div class="centered">
-	<h1>todos</h1>
-
-	<ul class="todos">
-		{#each todos as todo (todo.id)}
-			<Todo {todo} on:change={() => toggle(todo)} />
-		{/each}
-	</ul>
-</div>
-
-<style>
-	.centered {
-		max-width: 20em;
-		margin: 0 auto;
-	}
-</style>
\ No newline at end of file
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/09-svelte-options/+assets/app-a/src/lib/Todo.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/09-svelte-options/+assets/app-a/src/lib/Todo.svelte
deleted file mode 100644
index 4ae03ce154..0000000000
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/09-svelte-options/+assets/app-a/src/lib/Todo.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-	import { afterUpdate } from 'svelte';
-	import flash from './flash.js';
-
-	export let todo;
-
-	let element;
-
-	afterUpdate(() => {
-		flash(element);
-	});
-</script>
-
-<!-- the text will flash red whenever
-     the `todo` object changes -->
-<li bind:this={element}>
-	<label>
-		<input type="checkbox" checked={todo.done} on:change />
-		{todo.text}
-	</label>
-</li>
\ No newline at end of file
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/09-svelte-options/+assets/app-a/src/lib/flash.js b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/09-svelte-options/+assets/app-a/src/lib/flash.js
deleted file mode 100644
index 481038d009..0000000000
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/09-svelte-options/+assets/app-a/src/lib/flash.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export default function flash(element) {
-	requestAnimationFrame(() => {
-		element.style.transition = 'none';
-		element.style.color = 'rgba(255,62,0,1)';
-		element.style.backgroundColor = 'rgba(255,62,0,0.2)';
-
-		setTimeout(() => {
-			element.style.transition = 'color 1s, background 1s';
-			element.style.color = '';
-			element.style.backgroundColor = '';
-		});
-	});
-}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/09-svelte-options/+assets/app-b/src/lib/Todo.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/09-svelte-options/+assets/app-b/src/lib/Todo.svelte
deleted file mode 100644
index 9bee186de4..0000000000
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/09-svelte-options/+assets/app-b/src/lib/Todo.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<svelte:options immutable />
-
-<script>
-	import { afterUpdate } from 'svelte';
-	import flash from './flash.js';
-
-	export let todo;
-
-	let element;
-
-	afterUpdate(() => {
-		flash(element);
-	});
-</script>
-
-<!-- the text will flash red whenever
-     the `todo` object changes -->
-<li bind:this={element}>
-	<label>
-		<input type="checkbox" checked={todo.done} on:change />
-		{todo.text}
-	</label>
-</li>
\ No newline at end of file
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/09-svelte-options/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/09-svelte-options/index.md
deleted file mode 100644
index 0530054951..0000000000
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/09-svelte-options/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-title: <svelte:options>
----
-
-The `<svelte:options>` element allows you to specify compiler options.
-
-We'll use the `immutable` option as an example. In this app, the `<Todo>` component flashes whenever it receives new data. Clicking on one of the items toggles its `done` state by creating an updated `todos` array. This causes the _other_ `<Todo>` items to flash, even though they don't end up making any changes to the DOM.
-
-We can optimise this by telling the `<Todo>` component to expect _immutable_ data. This means that we're promising never to _mutate_ the `todo` prop, but will instead create new todo objects whenever things change.
-
-Add this to the top of `Todo.svelte`:
-
-```svelte
-/// file: Todo.svelte
-<svelte:options immutable={true} />
-```
-
-> [!NOTE] You can shorten this to `<svelte:options immutable/>` if you prefer.
-
-Now, when you toggle todos by clicking on them, only the updated component flashes.
-
-The options that can be set here are:
-
-- `immutable={true}` — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed
-- `immutable={false}` — the default. Svelte will be more conservative about whether or not mutable objects have changed
-- `accessors={true}` — adds getters and setters for the component's props
-- `accessors={false}` — the default
-- `namespace="..."` — the namespace where this component will be used, most commonly `"svg"`
-- `customElement="..."` — the name to use when compiling this component as a custom element
-
-Consult the [API reference](https://svelte.dev/docs) for more information on these options.

From efbb7cfafc2bff919d547e2d93c4b528d3bc9822 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 19 Oct 2024 00:38:09 -0400
Subject: [PATCH 16/19] update

---
 .../+assets/app-a/src/lib/App.svelte          |  2 +-
 .../+assets/app-a/src/lib/AudioPlayer.svelte  | 18 ++++++++---------
 .../+assets/app-a/src/lib/pause.svg           |  0
 .../+assets/app-a/src/lib/play.svg            |  0
 .../+assets/app-a/src/lib/tracks.js           |  0
 .../+assets/app-b/src/lib/AudioPlayer.svelte  | 20 +++++++++----------
 .../01-sharing-code/index.md                  |  4 ++--
 .../+assets/app-b/src/lib/App.svelte          |  0
 .../+assets/app-b/src/lib/AudioPlayer.svelte  |  0
 .../02-module-exports/index.md                |  0
 .../index.md                                  |  2 +-
 11 files changed, 21 insertions(+), 25 deletions(-)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{10-module-context => 10-script-module}/01-sharing-code/+assets/app-a/src/lib/App.svelte (97%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{10-module-context => 10-script-module}/01-sharing-code/+assets/app-a/src/lib/AudioPlayer.svelte (91%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{10-module-context => 10-script-module}/01-sharing-code/+assets/app-a/src/lib/pause.svg (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{10-module-context => 10-script-module}/01-sharing-code/+assets/app-a/src/lib/play.svg (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{10-module-context => 10-script-module}/01-sharing-code/+assets/app-a/src/lib/tracks.js (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{10-module-context => 10-script-module}/01-sharing-code/+assets/app-b/src/lib/AudioPlayer.svelte (91%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{10-module-context => 10-script-module}/01-sharing-code/index.md (96%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{10-module-context => 10-script-module}/02-module-exports/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{10-module-context => 10-script-module}/02-module-exports/+assets/app-b/src/lib/AudioPlayer.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{10-module-context => 10-script-module}/02-module-exports/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{10-module-context => 10-script-module}/index.md (78%)

diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/+assets/app-a/src/lib/App.svelte
similarity index 97%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/+assets/app-a/src/lib/App.svelte
index 96d28fe254..4e93a6d4fa 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/+assets/app-a/src/lib/App.svelte
@@ -19,4 +19,4 @@
 		max-width: 40em;
 		margin: 0 auto;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/+assets/app-a/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/+assets/app-a/src/lib/AudioPlayer.svelte
similarity index 91%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/+assets/app-a/src/lib/AudioPlayer.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/+assets/app-a/src/lib/AudioPlayer.svelte
index 2cc409342f..47ba2148a5 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/+assets/app-a/src/lib/AudioPlayer.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/+assets/app-a/src/lib/AudioPlayer.svelte
@@ -1,11 +1,9 @@
 <script>
-	export let src;
-	export let title;
-	export let artist;
+	let { src, title, artist } = $props();
 
-	let time = 0;
-	let duration = 0;
-	let paused = true;
+	let time = $state(0);
+	let duration = $state(0);
+	let paused = $state(true);
 
 	function format(time) {
 		if (isNaN(time)) return '...';
@@ -19,11 +17,11 @@
 
 <div class="player" class:paused>
 	<audio
-		src={src}
+		{src}
 		bind:currentTime={time}
 		bind:duration
 		bind:paused
-		on:ended={() => {
+		onended={() => {
 			time = 0;
 		}}
 	></audio>
@@ -31,7 +29,7 @@
 	<button
 		class="play"
 		aria-label={paused ? 'play' : 'pause'}
-		on:click={() => paused = !paused}
+		onclick={() => paused = !paused}
 	></button>
 
 	<div class="info">
@@ -44,7 +42,7 @@
 			<span>{format(time)}</span>
 			<div
 				class="slider"
-				on:pointerdown={e => {
+				onpointerdown={e => {
 					const div = e.currentTarget;
 
 					function seek(e) {
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/+assets/app-a/src/lib/pause.svg b/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/+assets/app-a/src/lib/pause.svg
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/+assets/app-a/src/lib/pause.svg
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/+assets/app-a/src/lib/pause.svg
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/+assets/app-a/src/lib/play.svg b/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/+assets/app-a/src/lib/play.svg
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/+assets/app-a/src/lib/play.svg
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/+assets/app-a/src/lib/play.svg
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/+assets/app-a/src/lib/tracks.js b/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/+assets/app-a/src/lib/tracks.js
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/+assets/app-a/src/lib/tracks.js
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/+assets/app-a/src/lib/tracks.js
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/+assets/app-b/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/+assets/app-b/src/lib/AudioPlayer.svelte
similarity index 91%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/+assets/app-b/src/lib/AudioPlayer.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/+assets/app-b/src/lib/AudioPlayer.svelte
index dea02efa15..fb06db4d32 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/+assets/app-b/src/lib/AudioPlayer.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/+assets/app-b/src/lib/AudioPlayer.svelte
@@ -3,13 +3,11 @@
 </script>
 
 <script>
-	export let src;
-	export let title;
-	export let artist;
+	let { src, title, artist } = $props();
 
-	let time = 0;
-	let duration = 0;
-	let paused = true;
+	let time = $state(0);
+	let duration = $state(0);
+	let paused = $state(true);
 
 	function format(time) {
 		if (isNaN(time)) return '...';
@@ -23,11 +21,11 @@
 
 <div class="player" class:paused>
 	<audio
-		src={src}
+		{src}
 		bind:currentTime={time}
 		bind:duration
 		bind:paused
-		on:play={(e) => {
+		onplay={(e) => {
 			const audio = e.currentTarget;
 
 			if (audio !== current) {
@@ -35,7 +33,7 @@
 				current = audio;
 			}
 		}}
-		on:ended={() => {
+		onended={() => {
 			time = 0;
 		}}
 	></audio>
@@ -43,7 +41,7 @@
 	<button
 		class="play"
 		aria-label={paused ? 'play' : 'pause'}
-		on:click={() => paused = !paused}
+		onclick={() => paused = !paused}
 	></button>
 
 	<div class="info">
@@ -56,7 +54,7 @@
 			<span>{format(time)}</span>
 			<div
 				class="slider"
-				on:pointerdown={e => {
+				onpointerdown={e => {
 					const div = e.currentTarget;
 
 					function seek(e) {
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/index.md
similarity index 96%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/index.md
index 4e30d9623f..d8bf645d82 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/01-sharing-code/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/index.md
@@ -24,7 +24,7 @@ It's now possible for the components to 'talk' to each other without any state m
 	bind:currentTime={time}
 	bind:duration
 	bind:paused
-+++	on:play={(e) => {
++++	onplay={(e) => {
 		const audio = e.currentTarget;
 
 		if (audio !== current) {
@@ -32,7 +32,7 @@ It's now possible for the components to 'talk' to each other without any state m
 			current = audio;
 		}
 	}}+++
-	on:ended={() => {
+	onended={() => {
 		time = 0;
 	}}
 />
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/02-module-exports/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/02-module-exports/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/02-module-exports/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/02-module-exports/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/02-module-exports/+assets/app-b/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/02-module-exports/+assets/app-b/src/lib/AudioPlayer.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/02-module-exports/+assets/app-b/src/lib/AudioPlayer.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/02-module-exports/+assets/app-b/src/lib/AudioPlayer.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/02-module-exports/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/02-module-exports/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/02-module-exports/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/02-module-exports/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/index.md
similarity index 78%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/index.md
index cc67a49fe4..b3dcced1a8 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-module-context/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/index.md
@@ -1,5 +1,5 @@
 ---
-title: Module context
+title: <script module>
 scope: { 'prefix': '/src/lib/', 'name': 'src' }
 focus: /src/lib/App.svelte
 ---

From 3ff8cfac19836c358ee977fe26bdf91cfb2dbee8 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 19 Oct 2024 00:40:33 -0400
Subject: [PATCH 17/19] another

---
 .../+assets/app-b/src/lib/App.svelte          |  4 ++--
 .../+assets/app-b/src/lib/AudioPlayer.svelte  | 22 +++++++++----------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/02-module-exports/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/02-module-exports/+assets/app-b/src/lib/App.svelte
index 404861cebb..585b2ca410 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/02-module-exports/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/02-module-exports/+assets/app-b/src/lib/App.svelte
@@ -8,7 +8,7 @@
 		<AudioPlayer {...track} />
 	{/each}
 
-	<button on:click={stopAll}>
+	<button onclick={stopAll}>
 		stop all
 	</button>
 </div>
@@ -23,4 +23,4 @@
 		max-width: 40em;
 		margin: 0 auto;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/02-module-exports/+assets/app-b/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/02-module-exports/+assets/app-b/src/lib/AudioPlayer.svelte
index 8f665be5ea..30bdad76f8 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/02-module-exports/+assets/app-b/src/lib/AudioPlayer.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/02-module-exports/+assets/app-b/src/lib/AudioPlayer.svelte
@@ -7,13 +7,11 @@
 </script>
 
 <script>
-	export let src;
-	export let title;
-	export let artist;
+	let { src, title, artist } = $props();
 
-	let time = 0;
-	let duration = 0;
-	let paused = true;
+	let time = $state(0);
+	let duration = $state(0);
+	let paused = $state(true);
 
 	function format(time) {
 		if (isNaN(time)) return '...';
@@ -27,11 +25,11 @@
 
 <div class="player" class:paused>
 	<audio
-		src={src}
+		{src}
 		bind:currentTime={time}
 		bind:duration
 		bind:paused
-		on:play={(e) => {
+		onplay={(e) => {
 			const audio = e.currentTarget;
 
 			if (audio !== current) {
@@ -39,7 +37,7 @@
 				current = audio;
 			}
 		}}
-		on:ended={() => {
+		onended={() => {
 			time = 0;
 		}}
 	></audio>
@@ -47,7 +45,7 @@
 	<button
 		class="play"
 		aria-label={paused ? 'play' : 'pause'}
-		on:click={() => paused = !paused}
+		onclick={() => paused = !paused}
 	></button>
 
 	<div class="info">
@@ -60,7 +58,7 @@
 			<span>{format(time)}</span>
 			<div
 				class="slider"
-				on:pointerdown={e => {
+				onpointerdown={e => {
 					const div = e.currentTarget;
 
 					function seek(e) {
@@ -160,4 +158,4 @@
 		height: 100%;
 		background: var(--bg-3);
 	}
-</style>
\ No newline at end of file
+</style>

From 8c79e8caaacf597a203de4ca3130cacab88fe85b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 19 Oct 2024 00:52:10 -0400
Subject: [PATCH 18/19] more

---
 .../+assets/app-a/src/lib/data.js             | 29 ---------------
 .../02-advanced-svelte/11-misc/index.md       |  5 ---
 .../+assets/app-a/src/lib/App.svelte          | 36 +++++++++----------
 .../12-next-steps/01-congratulations/index.md |  2 +-
 .../01-debug/+assets/app-a/src/lib/App.svelte |  4 +--
 .../01-debug/+assets/app-b/src/lib/App.svelte |  4 +--
 .../01-debug/index.md                         |  2 +-
 .../+assets/app-a/src/lib/App.svelte          |  0
 .../+assets/app-a/src/lib/File.svelte         |  8 +++--
 .../+assets/app-a/src/lib/Folder.svelte       |  6 ++--
 .../+assets/app-a/src/lib/data.js             | 29 +++++++++++++++
 .../+assets/app-b/src/lib/Folder.svelte       |  9 +++--
 .../01-svelte-self/index.md                   |  0
 13 files changed, 63 insertions(+), 71 deletions(-)
 delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/+assets/app-a/src/lib/data.js
 delete mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/index.md
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{11-misc => xx-currently-unused}/01-debug/+assets/app-a/src/lib/App.svelte (90%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{11-misc => xx-currently-unused}/01-debug/+assets/app-b/src/lib/App.svelte (90%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{11-misc => xx-currently-unused}/01-debug/index.md (96%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{11-misc => xx-currently-unused}/01-svelte-self/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{11-misc => xx-currently-unused}/01-svelte-self/+assets/app-a/src/lib/File.svelte (65%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{11-misc => xx-currently-unused}/01-svelte-self/+assets/app-a/src/lib/Folder.svelte (86%)
 create mode 100644 apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-a/src/lib/data.js
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{11-misc => xx-currently-unused}/01-svelte-self/+assets/app-b/src/lib/Folder.svelte (80%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{11-misc => xx-currently-unused}/01-svelte-self/index.md (100%)

diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/+assets/app-a/src/lib/data.js b/apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/+assets/app-a/src/lib/data.js
deleted file mode 100644
index a59df5fe15..0000000000
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/+assets/app-a/src/lib/data.js
+++ /dev/null
@@ -1,29 +0,0 @@
-export const files = [
-    {
-        name: 'Important work stuff',
-        files: [{ name: 'quarterly-results.xlsx' }]
-    },
-    {
-        name: 'Animal GIFs',
-        files: [
-            {
-                name: 'Dogs',
-                files: [
-                    { name: 'treadmill.gif' },
-                    { name: 'rope-jumping.gif' }
-                ]
-            },
-            {
-                name: 'Goats',
-                files: [
-                    { name: 'parkour.gif' },
-                    { name: 'rampage.gif' }
-                ]
-            },
-            { name: 'cat-roomba.gif' },
-            { name: 'duck-shuffle.gif' },
-            { name: 'monkey-on-a-pig.gif' }
-        ]
-    },
-    { name: 'README.md' }
-];
\ No newline at end of file
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/index.md
deleted file mode 100644
index c18e8aa2f8..0000000000
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/index.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-title: Miscellaneous
-scope: { 'prefix': '/src/lib/', 'name': 'src' }
-focus: /src/lib/App.svelte
----
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/12-next-steps/01-congratulations/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/12-next-steps/01-congratulations/+assets/app-a/src/lib/App.svelte
index 1f8071e63b..d575ccc7bf 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/12-next-steps/01-congratulations/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/12-next-steps/01-congratulations/+assets/app-a/src/lib/App.svelte
@@ -1,9 +1,7 @@
 <script>
-	import { onMount } from 'svelte';
-
 	let characters = ['🥳', '🎉', '✨'];
 
-	let confetti = new Array(100)
+	let confetti = $state(new Array(100)
 		.fill()
 		.map((_, i) => {
 			return {
@@ -14,32 +12,32 @@
 				r: 0.1 + Math.random() * 1
 			};
 		})
-		.sort((a, b) => a.r - b.r);
-
-	onMount(() => {
-		let frame;
+		.sort((a, b) => a.r - b.r));
 
-		function loop() {
+	$effect(() => {
+		let frame = requestAnimationFrame(function loop() {
 			frame = requestAnimationFrame(loop);
 
-			confetti = confetti.map((emoji) => {
-				emoji.y += 0.3 * emoji.r;
-				if (emoji.y > 120) emoji.y = -20;
-				return emoji;
-			});
-		}
+			for (const confetto of confetti) {
+				confetto.y += 0.3 * confetto.r;
+				if (confetto.y > 120) confetto.y = -20;
+			}
+		});
 
-		loop();
-
-		return () => cancelAnimationFrame(frame);
+		return () => {
+			cancelAnimationFrame(frame);
+		}
 	});
 </script>
 
 {#each confetti as c}
 	<span
-		style="left: {c.x}%; top: {c.y}%; transform: scale({c.r})"
-		>{c.character}</span
+		style:left="{c.x}%"
+		style:top="{c.y}%"
+		style:scale={c.r}
 	>
+		{c.character}
+	</span>
 {/each}
 
 <style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/12-next-steps/01-congratulations/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/12-next-steps/01-congratulations/index.md
index 0d170149fa..7ed395e671 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/12-next-steps/01-congratulations/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/12-next-steps/01-congratulations/index.md
@@ -9,7 +9,7 @@ The next two parts of the tutorial will focus on SvelteKit, a full-fledged frame
 If you're suffering from information overload and aren't ready to go through the SvelteKit tutorial yet, don't worry! You can use your existing Svelte knowledge without learning all of SvelteKit. Just run this in your terminal and follow the prompts...
 
 ```bash
-npm create svelte@latest
+npx sv create
 ```
 
 ...and start editing `src/routes/+page.svelte`. When you're ready, click the link below to continue your journey.
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-debug/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-debug/+assets/app-a/src/lib/App.svelte
similarity index 90%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-debug/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-debug/+assets/app-a/src/lib/App.svelte
index c76bd76cd8..5d25988452 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-debug/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-debug/+assets/app-a/src/lib/App.svelte
@@ -1,8 +1,8 @@
 <script>
-	let user = {
+	let user = $state({
 		firstname: 'Ada',
 		lastname: 'Lovelace'
-	};
+	});
 </script>
 
 <label>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-debug/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-debug/+assets/app-b/src/lib/App.svelte
similarity index 90%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-debug/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-debug/+assets/app-b/src/lib/App.svelte
index 46f5b0f0f7..3808485310 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-debug/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-debug/+assets/app-b/src/lib/App.svelte
@@ -1,8 +1,8 @@
 <script>
-	let user = {
+	let user = $state({
 		firstname: 'Ada',
 		lastname: 'Lovelace'
-	};
+	});
 </script>
 
 <label>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-debug/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-debug/index.md
similarity index 96%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-debug/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-debug/index.md
index bdad768199..51cde82f8c 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-debug/index.md
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-debug/index.md
@@ -8,7 +8,7 @@ One approach is to use `console.log(...)` inside your markup. If you want to pau
 
 ```svelte
 /// file: App.svelte
-{@debug user}
++++{@debug user}+++
 
 <h1>Hello {user.firstname}!</h1>
 ```
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/+assets/app-a/src/lib/File.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-a/src/lib/File.svelte
similarity index 65%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/+assets/app-a/src/lib/File.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-a/src/lib/File.svelte
index 8ba92ec7ec..520dfe53c8 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/+assets/app-a/src/lib/File.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-a/src/lib/File.svelte
@@ -1,12 +1,14 @@
 <script>
-	export let name;
-	$: type = name.slice(name.lastIndexOf('.') + 1);
+	let { name } = $props();
+
+	let type = $derived(name.slice(name.lastIndexOf('.') + 1));
 </script>
 
 <span
 	style="background-image: url(/tutorial/icons/{type}.svg)"
-	>{name}</span
 >
+	{name}
+</span>
 
 <style>
 	span {
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/+assets/app-a/src/lib/Folder.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-a/src/lib/Folder.svelte
similarity index 86%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/+assets/app-a/src/lib/Folder.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-a/src/lib/Folder.svelte
index b3de866431..ca58b19403 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/+assets/app-a/src/lib/Folder.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-a/src/lib/Folder.svelte
@@ -1,16 +1,14 @@
 <script>
 	import File from './File.svelte';
 
-	export let expanded = false;
-	export let name;
-	export let files;
+	let { expanded, name, files } = $props();
 
 	function toggle() {
 		expanded = !expanded;
 	}
 </script>
 
-<button class:expanded on:click={toggle}>{name}</button>
+<button class:expanded onclick={toggle}>{name}</button>
 
 {#if expanded}
 	<ul>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-a/src/lib/data.js b/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-a/src/lib/data.js
new file mode 100644
index 0000000000..2bed77686a
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-a/src/lib/data.js
@@ -0,0 +1,29 @@
+export const files = [
+	{
+		name: 'Important work stuff',
+		files: [{ name: 'quarterly-results.xlsx' }]
+	},
+	{
+		name: 'Animal GIFs',
+		files: [
+			{
+				name: 'Dogs',
+				files: [
+					{ name: 'treadmill.gif' },
+					{ name: 'rope-jumping.gif' }
+				]
+			},
+			{
+				name: 'Goats',
+				files: [
+					{ name: 'parkour.gif' },
+					{ name: 'rampage.gif' }
+				]
+			},
+			{ name: 'cat-roomba.gif' },
+			{ name: 'duck-shuffle.gif' },
+			{ name: 'monkey-on-a-pig.gif' }
+		]
+	},
+	{ name: 'README.md' }
+];
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/+assets/app-b/src/lib/Folder.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-b/src/lib/Folder.svelte
similarity index 80%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/+assets/app-b/src/lib/Folder.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-b/src/lib/Folder.svelte
index d45136d59a..5de935c96f 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/+assets/app-b/src/lib/Folder.svelte
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/+assets/app-b/src/lib/Folder.svelte
@@ -1,23 +1,22 @@
 <script>
+	import Folder from './Folder.svelte';
 	import File from './File.svelte';
 
-	export let expanded = false;
-	export let name;
-	export let files;
+	let { expanded = $bindable(false), name, files } = $props();
 
 	function toggle() {
 		expanded = !expanded;
 	}
 </script>
 
-<button class:expanded on:click={toggle}>{name}</button>
+<button class:expanded onclick={toggle}>{name}</button>
 
 {#if expanded}
 	<ul>
 		{#each files as file}
 			<li>
 				{#if file.files}
-					<svelte:self {...file} />
+					<Folder {...file} />
 				{:else}
 					<File {...file} />
 				{/if}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/11-misc/01-svelte-self/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/xx-currently-unused/01-svelte-self/index.md

From 33adfc1ec98ad7d4e1267c3e60bd654ead182927 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 19 Oct 2024 00:53:08 -0400
Subject: [PATCH 19/19] rename stuff

---
 .../+assets/app-a/src/lib/App.svelte                |   0
 .../+assets/app-b/src/lib/App.svelte                |   0
 .../01-contenteditable-bindings/index.md            |   0
 .../+assets/app-a/src/lib/App.svelte                |   0
 .../+assets/app-b/src/lib/App.svelte                |   0
 .../02-each-block-bindings/index.md                 |   0
 .../+assets/app-a/src/lib/App.svelte                |   0
 .../+assets/app-a/src/lib/AudioPlayer.svelte        |   0
 .../+assets/app-a/src/lib/pause.svg                 |   0
 .../+assets/app-a/src/lib/play.svg                  |   0
 .../+assets/app-a/src/lib/tracks.js                 |   0
 .../+assets/app-b/src/lib/AudioPlayer.svelte        |   0
 .../03-media-elements/index.md                      |   0
 .../04-dimensions/+assets/app-a/src/lib/App.svelte  |   0
 .../04-dimensions/+assets/app-b/src/lib/App.svelte  |   0
 .../04-dimensions/index.md                          |   0
 .../05-bind-this/+assets/app-a/src/lib/App.svelte   |   0
 .../05-bind-this/+assets/app-a/src/lib/gradient.js  |   0
 .../+assets/app-a/src/lib/svelte-logo-mask.svg      |   0
 .../05-bind-this/+assets/app-b/src/lib/App.svelte   |   0
 .../05-bind-this/index.md                           |   0
 .../+assets/app-a/src/lib/App.svelte                |   0
 .../+assets/app-a/src/lib/Keypad.svelte             |   0
 .../+assets/app-b/src/lib/App.svelte                |   0
 .../+assets/app-b/src/lib/Keypad.svelte             |   0
 .../06-component-bindings/index.md                  |   0
 .../+assets/app-a/src/lib/App.svelte                |   0
 .../+assets/app-a/src/lib/Canvas.svelte             |   0
 .../+assets/app-a/src/lib/actions.svelte.js         |   0
 .../+assets/app-b/src/lib/App.svelte                |   0
 .../+assets/app-b/src/lib/Canvas.svelte             |   0
 .../07-component-this/index.md                      |   0
 .../index.md                                        |   0
 .../+assets/app-a/src/lib/App.svelte                |   0
 .../+assets/app-a/src/lib/TodoList.svelte           |   0
 .../+assets/app-a/src/lib/remove.svg                |   0
 .../+assets/app-a/src/lib/transition.js             |   0
 .../+assets/app-b/src/lib/TodoList.svelte           |   0
 .../01-deferred-transitions/index.md                |   0
 .../+assets/app-b/src/lib/TodoList.svelte           |   0
 .../02-animations/index.md                          |   0
 .../index.md                                        |   0
 .../01-context-api/+assets/app-a/src/lib/App.svelte |   0
 .../+assets/app-a/src/lib/Canvas.svelte             |   0
 .../+assets/app-a/src/lib/Square.svelte             |   0
 .../01-context-api/+assets/app-b/src/lib/App.svelte |   0
 .../+assets/app-b/src/lib/Canvas.svelte             |   0
 .../+assets/app-b/src/lib/Square.svelte             |   0
 .../01-context-api/index.md                         |   0
 .../{08-context => 06-context}/index.md             |   0
 .../+assets/app-a/src/lib/App.svelte                |   0
 .../+assets/app-b/src/lib/App.svelte                |   0
 .../01-svelte-window/index.md                       |   0
 .../+assets/app-a/src/lib/App.svelte                |   0
 .../+assets/app-a/src/lib/deepsea.webp              | Bin
 .../+assets/app-b/src/lib/App.svelte                |   0
 .../02-svelte-window-bindings/index.md              |   0
 .../+assets/app-a/src/lib/App.svelte                |   0
 .../+assets/app-b/src/lib/App.svelte                |   0
 .../03-svelte-document/index.md                     |   0
 .../04-svelte-body/+assets/app-a/src/lib/App.svelte |   0
 .../04-svelte-body/+assets/app-a/src/lib/kitten.png | Bin
 .../04-svelte-body/+assets/app-b/src/lib/App.svelte |   0
 .../04-svelte-body/index.md                         |   0
 .../05-svelte-head/+assets/app-a/src/lib/App.svelte |   0
 .../05-svelte-head/+assets/app-b/src/lib/App.svelte |   0
 .../05-svelte-head/index.md                         |   0
 .../+assets/app-a/src/lib/App.svelte                |   0
 .../+assets/app-b/src/lib/App.svelte                |   0
 .../06-svelte-element/index.md                      |   0
 .../index.md                                        |   0
 .../+assets/app-a/src/lib/App.svelte                |   0
 .../+assets/app-a/src/lib/AudioPlayer.svelte        |   0
 .../01-sharing-code/+assets/app-a/src/lib/pause.svg |   0
 .../01-sharing-code/+assets/app-a/src/lib/play.svg  |   0
 .../01-sharing-code/+assets/app-a/src/lib/tracks.js |   0
 .../+assets/app-b/src/lib/AudioPlayer.svelte        |   0
 .../01-sharing-code/index.md                        |   0
 .../+assets/app-b/src/lib/App.svelte                |   0
 .../+assets/app-b/src/lib/AudioPlayer.svelte        |   0
 .../02-module-exports/index.md                      |   0
 .../{10-script-module => 08-script-module}/index.md |   0
 .../+assets/app-a/src/lib/App.svelte                |   0
 .../01-congratulations/index.md                     |   0
 .../{12-next-steps => 09-next-steps}/index.md       |   0
 85 files changed, 0 insertions(+), 0 deletions(-)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/01-contenteditable-bindings/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/01-contenteditable-bindings/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/01-contenteditable-bindings/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/02-each-block-bindings/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/02-each-block-bindings/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/02-each-block-bindings/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/03-media-elements/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/03-media-elements/+assets/app-a/src/lib/pause.svg (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/03-media-elements/+assets/app-a/src/lib/play.svg (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/03-media-elements/+assets/app-a/src/lib/tracks.js (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/03-media-elements/+assets/app-b/src/lib/AudioPlayer.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/03-media-elements/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/04-dimensions/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/04-dimensions/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/04-dimensions/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/05-bind-this/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/05-bind-this/+assets/app-a/src/lib/gradient.js (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/05-bind-this/+assets/app-a/src/lib/svelte-logo-mask.svg (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/05-bind-this/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/05-bind-this/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/06-component-bindings/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/06-component-bindings/+assets/app-a/src/lib/Keypad.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/06-component-bindings/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/06-component-bindings/+assets/app-b/src/lib/Keypad.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/06-component-bindings/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/07-component-this/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/07-component-this/+assets/app-a/src/lib/Canvas.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/07-component-this/+assets/app-a/src/lib/actions.svelte.js (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/07-component-this/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/07-component-this/+assets/app-b/src/lib/Canvas.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/07-component-this/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{05-advanced-bindings => 04-advanced-bindings}/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{06-advanced-transitions => 05-advanced-transitions}/01-deferred-transitions/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{06-advanced-transitions => 05-advanced-transitions}/01-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{06-advanced-transitions => 05-advanced-transitions}/01-deferred-transitions/+assets/app-a/src/lib/remove.svg (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{06-advanced-transitions => 05-advanced-transitions}/01-deferred-transitions/+assets/app-a/src/lib/transition.js (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{06-advanced-transitions => 05-advanced-transitions}/01-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{06-advanced-transitions => 05-advanced-transitions}/01-deferred-transitions/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{06-advanced-transitions => 05-advanced-transitions}/02-animations/+assets/app-b/src/lib/TodoList.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{06-advanced-transitions => 05-advanced-transitions}/02-animations/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{06-advanced-transitions => 05-advanced-transitions}/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{08-context => 06-context}/01-context-api/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{08-context => 06-context}/01-context-api/+assets/app-a/src/lib/Canvas.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{08-context => 06-context}/01-context-api/+assets/app-a/src/lib/Square.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{08-context => 06-context}/01-context-api/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{08-context => 06-context}/01-context-api/+assets/app-b/src/lib/Canvas.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{08-context => 06-context}/01-context-api/+assets/app-b/src/lib/Square.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{08-context => 06-context}/01-context-api/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{08-context => 06-context}/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{09-special-elements => 07-special-elements}/01-svelte-window/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{09-special-elements => 07-special-elements}/01-svelte-window/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{09-special-elements => 07-special-elements}/01-svelte-window/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{09-special-elements => 07-special-elements}/02-svelte-window-bindings/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{09-special-elements => 07-special-elements}/02-svelte-window-bindings/+assets/app-a/src/lib/deepsea.webp (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{09-special-elements => 07-special-elements}/02-svelte-window-bindings/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{09-special-elements => 07-special-elements}/02-svelte-window-bindings/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{09-special-elements => 07-special-elements}/03-svelte-document/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{09-special-elements => 07-special-elements}/03-svelte-document/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{09-special-elements => 07-special-elements}/03-svelte-document/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{09-special-elements => 07-special-elements}/04-svelte-body/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{09-special-elements => 07-special-elements}/04-svelte-body/+assets/app-a/src/lib/kitten.png (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{09-special-elements => 07-special-elements}/04-svelte-body/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{09-special-elements => 07-special-elements}/04-svelte-body/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{09-special-elements => 07-special-elements}/05-svelte-head/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{09-special-elements => 07-special-elements}/05-svelte-head/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{09-special-elements => 07-special-elements}/05-svelte-head/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{09-special-elements => 07-special-elements}/06-svelte-element/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{09-special-elements => 07-special-elements}/06-svelte-element/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{09-special-elements => 07-special-elements}/06-svelte-element/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{09-special-elements => 07-special-elements}/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{10-script-module => 08-script-module}/01-sharing-code/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{10-script-module => 08-script-module}/01-sharing-code/+assets/app-a/src/lib/AudioPlayer.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{10-script-module => 08-script-module}/01-sharing-code/+assets/app-a/src/lib/pause.svg (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{10-script-module => 08-script-module}/01-sharing-code/+assets/app-a/src/lib/play.svg (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{10-script-module => 08-script-module}/01-sharing-code/+assets/app-a/src/lib/tracks.js (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{10-script-module => 08-script-module}/01-sharing-code/+assets/app-b/src/lib/AudioPlayer.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{10-script-module => 08-script-module}/01-sharing-code/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{10-script-module => 08-script-module}/02-module-exports/+assets/app-b/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{10-script-module => 08-script-module}/02-module-exports/+assets/app-b/src/lib/AudioPlayer.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{10-script-module => 08-script-module}/02-module-exports/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{10-script-module => 08-script-module}/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{12-next-steps => 09-next-steps}/01-congratulations/+assets/app-a/src/lib/App.svelte (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{12-next-steps => 09-next-steps}/01-congratulations/index.md (100%)
 rename apps/svelte.dev/content/tutorial/02-advanced-svelte/{12-next-steps => 09-next-steps}/index.md (100%)

diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/01-contenteditable-bindings/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/01-contenteditable-bindings/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/01-contenteditable-bindings/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/01-contenteditable-bindings/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/01-contenteditable-bindings/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/01-contenteditable-bindings/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/01-contenteditable-bindings/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/01-contenteditable-bindings/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/01-contenteditable-bindings/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/01-contenteditable-bindings/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/01-contenteditable-bindings/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/01-contenteditable-bindings/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/02-each-block-bindings/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/02-each-block-bindings/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-a/src/lib/pause.svg b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-a/src/lib/pause.svg
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-a/src/lib/pause.svg
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-a/src/lib/pause.svg
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-a/src/lib/play.svg b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-a/src/lib/play.svg
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-a/src/lib/play.svg
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-a/src/lib/play.svg
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-a/src/lib/tracks.js b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-a/src/lib/tracks.js
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-a/src/lib/tracks.js
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-a/src/lib/tracks.js
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-b/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-b/src/lib/AudioPlayer.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/+assets/app-b/src/lib/AudioPlayer.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-b/src/lib/AudioPlayer.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/03-media-elements/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/04-dimensions/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/04-dimensions/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/04-dimensions/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/04-dimensions/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/04-dimensions/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/04-dimensions/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/04-dimensions/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/04-dimensions/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/04-dimensions/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/04-dimensions/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/04-dimensions/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/04-dimensions/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/05-bind-this/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/05-bind-this/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/+assets/app-a/src/lib/gradient.js b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/05-bind-this/+assets/app-a/src/lib/gradient.js
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/+assets/app-a/src/lib/gradient.js
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/05-bind-this/+assets/app-a/src/lib/gradient.js
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/+assets/app-a/src/lib/svelte-logo-mask.svg b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/05-bind-this/+assets/app-a/src/lib/svelte-logo-mask.svg
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/+assets/app-a/src/lib/svelte-logo-mask.svg
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/05-bind-this/+assets/app-a/src/lib/svelte-logo-mask.svg
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/05-bind-this/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/05-bind-this/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/05-bind-this/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/05-bind-this/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/05-bind-this/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/06-component-bindings/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/06-component-bindings/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-a/src/lib/Keypad.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/06-component-bindings/+assets/app-a/src/lib/Keypad.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-a/src/lib/Keypad.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/06-component-bindings/+assets/app-a/src/lib/Keypad.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/06-component-bindings/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/06-component-bindings/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-b/src/lib/Keypad.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/06-component-bindings/+assets/app-b/src/lib/Keypad.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/+assets/app-b/src/lib/Keypad.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/06-component-bindings/+assets/app-b/src/lib/Keypad.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/06-component-bindings/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/06-component-bindings/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/06-component-bindings/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/07-component-this/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/07-component-this/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-a/src/lib/Canvas.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/07-component-this/+assets/app-a/src/lib/Canvas.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-a/src/lib/Canvas.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/07-component-this/+assets/app-a/src/lib/Canvas.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-a/src/lib/actions.svelte.js b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/07-component-this/+assets/app-a/src/lib/actions.svelte.js
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-a/src/lib/actions.svelte.js
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/07-component-this/+assets/app-a/src/lib/actions.svelte.js
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/07-component-this/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/07-component-this/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-b/src/lib/Canvas.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/07-component-this/+assets/app-b/src/lib/Canvas.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/+assets/app-b/src/lib/Canvas.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/07-component-this/+assets/app-b/src/lib/Canvas.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/07-component-this/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/07-component-this/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/07-component-this/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-bindings/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/remove.svg b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/remove.svg
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/remove.svg
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/remove.svg
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/transition.js b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/transition.js
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/transition.js
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-a/src/lib/transition.js
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/01-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/01-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/01-deferred-transitions/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/01-deferred-transitions/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/01-deferred-transitions/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/02-animations/+assets/app-b/src/lib/TodoList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/+assets/app-b/src/lib/TodoList.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/02-animations/+assets/app-b/src/lib/TodoList.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/+assets/app-b/src/lib/TodoList.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/02-animations/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/02-animations/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-context/01-context-api/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/06-context/01-context-api/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/+assets/app-a/src/lib/Canvas.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-context/01-context-api/+assets/app-a/src/lib/Canvas.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/+assets/app-a/src/lib/Canvas.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/06-context/01-context-api/+assets/app-a/src/lib/Canvas.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/+assets/app-a/src/lib/Square.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-context/01-context-api/+assets/app-a/src/lib/Square.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/+assets/app-a/src/lib/Square.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/06-context/01-context-api/+assets/app-a/src/lib/Square.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-context/01-context-api/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/06-context/01-context-api/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/+assets/app-b/src/lib/Canvas.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-context/01-context-api/+assets/app-b/src/lib/Canvas.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/+assets/app-b/src/lib/Canvas.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/06-context/01-context-api/+assets/app-b/src/lib/Canvas.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/+assets/app-b/src/lib/Square.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-context/01-context-api/+assets/app-b/src/lib/Square.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/+assets/app-b/src/lib/Square.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/06-context/01-context-api/+assets/app-b/src/lib/Square.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-context/01-context-api/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/01-context-api/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/06-context/01-context-api/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-context/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/08-context/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/06-context/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-window/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/01-svelte-window/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-window/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/01-svelte-window/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-window/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/01-svelte-window/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-window/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/01-svelte-window/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-window/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/01-svelte-window/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/01-svelte-window/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/01-svelte-window/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-window-bindings/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/02-svelte-window-bindings/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-window-bindings/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/02-svelte-window-bindings/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-window-bindings/+assets/app-a/src/lib/deepsea.webp b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/02-svelte-window-bindings/+assets/app-a/src/lib/deepsea.webp
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-window-bindings/+assets/app-a/src/lib/deepsea.webp
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/02-svelte-window-bindings/+assets/app-a/src/lib/deepsea.webp
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-window-bindings/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/02-svelte-window-bindings/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-window-bindings/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/02-svelte-window-bindings/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-window-bindings/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/02-svelte-window-bindings/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/02-svelte-window-bindings/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/02-svelte-window-bindings/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-document/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/03-svelte-document/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-document/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/03-svelte-document/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-document/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/03-svelte-document/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-document/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/03-svelte-document/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-document/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/03-svelte-document/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/03-svelte-document/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/03-svelte-document/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-body/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/04-svelte-body/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-body/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/04-svelte-body/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-body/+assets/app-a/src/lib/kitten.png b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/04-svelte-body/+assets/app-a/src/lib/kitten.png
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-body/+assets/app-a/src/lib/kitten.png
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/04-svelte-body/+assets/app-a/src/lib/kitten.png
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-body/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/04-svelte-body/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-body/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/04-svelte-body/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-body/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/04-svelte-body/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/04-svelte-body/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/04-svelte-body/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-head/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-head/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-head/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-head/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-head/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-head/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-head/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-head/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-head/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-head/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-head/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/05-svelte-head/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-element/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/06-svelte-element/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-element/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/06-svelte-element/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-element/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/06-svelte-element/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-element/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/06-svelte-element/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-element/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/06-svelte-element/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/06-svelte-element/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/06-svelte-element/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/09-special-elements/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-special-elements/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/+assets/app-a/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-a/src/lib/AudioPlayer.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/+assets/app-a/src/lib/AudioPlayer.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-a/src/lib/AudioPlayer.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/+assets/app-a/src/lib/pause.svg b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-a/src/lib/pause.svg
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/+assets/app-a/src/lib/pause.svg
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-a/src/lib/pause.svg
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/+assets/app-a/src/lib/play.svg b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-a/src/lib/play.svg
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/+assets/app-a/src/lib/play.svg
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-a/src/lib/play.svg
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/+assets/app-a/src/lib/tracks.js b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-a/src/lib/tracks.js
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/+assets/app-a/src/lib/tracks.js
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-a/src/lib/tracks.js
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/+assets/app-b/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-b/src/lib/AudioPlayer.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/+assets/app-b/src/lib/AudioPlayer.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/+assets/app-b/src/lib/AudioPlayer.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/01-sharing-code/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/01-sharing-code/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/02-module-exports/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/02-module-exports/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/02-module-exports/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/02-module-exports/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/02-module-exports/+assets/app-b/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/02-module-exports/+assets/app-b/src/lib/AudioPlayer.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/02-module-exports/+assets/app-b/src/lib/AudioPlayer.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/02-module-exports/+assets/app-b/src/lib/AudioPlayer.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/02-module-exports/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/02-module-exports/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/02-module-exports/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/02-module-exports/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/10-script-module/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/08-script-module/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/12-next-steps/01-congratulations/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-next-steps/01-congratulations/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/12-next-steps/01-congratulations/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/09-next-steps/01-congratulations/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/12-next-steps/01-congratulations/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-next-steps/01-congratulations/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/12-next-steps/01-congratulations/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/09-next-steps/01-congratulations/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/12-next-steps/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/09-next-steps/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/12-next-steps/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/09-next-steps/index.md