diff --git a/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-inspecting-state/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-inspecting-state/+assets/app-a/src/lib/App.svelte
new file mode 100644
index 0000000000..6d358a4c02
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-inspecting-state/+assets/app-a/src/lib/App.svelte
@@ -0,0 +1,15 @@
+<script>
+	let numbers = $state([1, 2, 3, 4]);
+	let total = $derived(numbers.reduce((t, n) => t + n, 0));
+
+	function addNumber() {
+		numbers.push(numbers.length + 1);
+		console.log(numbers);
+	}
+</script>
+
+<p>{numbers.join(' + ')} = {total}</p>
+
+<button onclick={addNumber}>
+	Add a number
+</button>
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-inspecting-state/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-inspecting-state/+assets/app-b/src/lib/App.svelte
new file mode 100644
index 0000000000..a30cc2e1a2
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-inspecting-state/+assets/app-b/src/lib/App.svelte
@@ -0,0 +1,16 @@
+<script>
+	let numbers = $state([1, 2, 3, 4]);
+	let total = $derived(numbers.reduce((t, n) => t + n, 0));
+
+	function addNumber() {
+		numbers.push(numbers.length + 1);
+	}
+
+	$inspect(numbers).with(console.trace);
+</script>
+
+<p>{numbers.join(' + ')} = {total}</p>
+
+<button onclick={addNumber}>
+	Add a number
+</button>
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-inspecting-state/index.md b/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-inspecting-state/index.md
new file mode 100644
index 0000000000..eb06a46466
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-inspecting-state/index.md
@@ -0,0 +1,36 @@
+---
+title: Inspecting state
+---
+
+It's often useful to be able to track the value of a piece of state as it changes over time.
+
+Inside the `addNumber` function, we've added a `console.log` statement. But if you click the button and open the console drawer (using the button to the right of the URL bar), you'll see a warning, and a message saying the message could not be cloned.
+
+That's because `numbers` is a reactive [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). There's a couple of things we can do. Firstly, we can create a non-reactive _snapshot_ of the state with `$state.snapshot(...)`:
+
+```js
+/// file: App.svelte
+function addNumber() {
+	numbers.push(numbers.length + 1);
+	console.log(+++$state.snapshot(numbers)+++);
+}
+```
+
+Alternatively, we can use the `$inspect` rune to automatically log a snapshot of the state whenever it changes. This code will automatically be stripped out of your production build:
+
+```js
+/// file: App.svelte
+function addNumber() {
+	numbers.push(numbers.length + 1);
+	---console.log($state.snapshot(numbers));---
+}
+
++++$inspect(numbers);+++
+```
+
+You can customise how the information is displayed by using `$inspect(...).with(fn)` — for example, you can use `console.trace` to see where the state change originated from:
+
+```js
+/// file: App.svelte
+$inspect(numbers)+++.with(console.trace)+++;
+```
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-effects/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/05-effects/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-effects/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/05-effects/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-effects/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/05-effects/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-effects/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/05-effects/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-effects/index.md b/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/05-effects/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/04-effects/index.md
rename to apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/05-effects/index.md
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/05-universal-reactivity/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/06-universal-reactivity/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/05-universal-reactivity/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/06-universal-reactivity/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/05-universal-reactivity/+assets/app-a/src/lib/Counter.svelte b/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/06-universal-reactivity/+assets/app-a/src/lib/Counter.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/05-universal-reactivity/+assets/app-a/src/lib/Counter.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/06-universal-reactivity/+assets/app-a/src/lib/Counter.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/05-universal-reactivity/+assets/app-a/src/lib/shared.js b/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/06-universal-reactivity/+assets/app-a/src/lib/shared.js
similarity index 100%
rename from apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/05-universal-reactivity/+assets/app-a/src/lib/shared.js
rename to apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/06-universal-reactivity/+assets/app-a/src/lib/shared.js
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/05-universal-reactivity/+assets/app-b/src/lib/Counter.svelte b/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/06-universal-reactivity/+assets/app-b/src/lib/Counter.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/05-universal-reactivity/+assets/app-b/src/lib/Counter.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/06-universal-reactivity/+assets/app-b/src/lib/Counter.svelte
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/05-universal-reactivity/+assets/app-b/src/lib/shared.js b/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/06-universal-reactivity/+assets/app-b/src/lib/shared.js
similarity index 100%
rename from apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/05-universal-reactivity/+assets/app-b/src/lib/shared.js
rename to apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/06-universal-reactivity/+assets/app-b/src/lib/shared.js
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/05-universal-reactivity/+assets/app-b/src/lib/shared.svelte.js b/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/06-universal-reactivity/+assets/app-b/src/lib/shared.svelte.js
similarity index 100%
rename from apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/05-universal-reactivity/+assets/app-b/src/lib/shared.svelte.js
rename to apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/06-universal-reactivity/+assets/app-b/src/lib/shared.svelte.js
diff --git a/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/05-universal-reactivity/index.md b/apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/06-universal-reactivity/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/05-universal-reactivity/index.md
rename to apps/svelte.dev/content/tutorial/01-svelte/02-reactivity/06-universal-reactivity/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/01-transition/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/01-transition/+assets/app-a/src/lib/App.svelte
similarity index 83%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/01-transition/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/09-transitions/01-transition/+assets/app-a/src/lib/App.svelte
index 6f955a5b15..17a3feb89f 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/01-transition/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/01-transition/+assets/app-a/src/lib/App.svelte
@@ -1,5 +1,5 @@
 <script>
-	let visible = true;
+	let visible = $state(true);
 </script>
 
 <label>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/01-transition/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/01-transition/+assets/app-b/src/lib/App.svelte
similarity index 87%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/01-transition/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/09-transitions/01-transition/+assets/app-b/src/lib/App.svelte
index 1700bfbb0b..6c5b0cdc54 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/01-transition/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/01-transition/+assets/app-b/src/lib/App.svelte
@@ -1,6 +1,7 @@
 <script>
 	import { fade } from 'svelte/transition';
-	let visible = true;
+
+	let visible = $state(true);
 </script>
 
 <label>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/01-transition/index.md b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/01-transition/index.md
similarity index 94%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/01-transition/index.md
rename to apps/svelte.dev/content/tutorial/01-svelte/09-transitions/01-transition/index.md
index 7eb3ddc8a0..8d7967032d 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/01-transition/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/01-transition/index.md
@@ -10,7 +10,8 @@ First, import the `fade` function from `svelte/transition`...
 /// file: App.svelte
 <script>
 	+++import { fade } from 'svelte/transition';+++
-	let visible = true;
+
+	let visible = $state(true);
 </script>
 ```
 
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/02-adding-parameters-to-transitions/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/02-adding-parameters-to-transitions/+assets/app-b/src/lib/App.svelte
similarity index 88%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/02-adding-parameters-to-transitions/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/09-transitions/02-adding-parameters-to-transitions/+assets/app-b/src/lib/App.svelte
index b38c77a87f..81b9bbb0eb 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/02-adding-parameters-to-transitions/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/02-adding-parameters-to-transitions/+assets/app-b/src/lib/App.svelte
@@ -1,6 +1,7 @@
 <script>
 	import { fly } from 'svelte/transition';
-	let visible = true;
+
+	let visible = $state(true);
 </script>
 
 <label>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/02-adding-parameters-to-transitions/index.md b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/02-adding-parameters-to-transitions/index.md
similarity index 95%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/02-adding-parameters-to-transitions/index.md
rename to apps/svelte.dev/content/tutorial/01-svelte/09-transitions/02-adding-parameters-to-transitions/index.md
index 09457a1979..31ed7318f1 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/02-adding-parameters-to-transitions/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/02-adding-parameters-to-transitions/index.md
@@ -8,7 +8,8 @@ Transition functions can accept parameters. Replace the `fade` transition with `
 /// file: App.svelte
 <script>
 	import { +++fly+++ } from 'svelte/transition';
-	let visible = true;
+
+	let visible = $state(true);
 </script>
 ```
 
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/03-in-and-out/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/03-in-and-out/+assets/app-b/src/lib/App.svelte
similarity index 89%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/03-in-and-out/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/09-transitions/03-in-and-out/+assets/app-b/src/lib/App.svelte
index 91269886aa..0da9757b65 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/03-in-and-out/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/03-in-and-out/+assets/app-b/src/lib/App.svelte
@@ -1,6 +1,7 @@
 <script>
 	import { fade, fly } from 'svelte/transition';
-	let visible = true;
+
+	let visible = $state(true);
 </script>
 
 <label>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/03-in-and-out/index.md b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/03-in-and-out/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/03-in-and-out/index.md
rename to apps/svelte.dev/content/tutorial/01-svelte/09-transitions/03-in-and-out/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/04-custom-css-transitions/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/+assets/app-a/src/lib/App.svelte
similarity index 95%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/04-custom-css-transitions/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/+assets/app-a/src/lib/App.svelte
index 8ebb6e4630..849b25bac5 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/04-custom-css-transitions/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/+assets/app-a/src/lib/App.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { fade } from 'svelte/transition';
 
-	let visible = true;
+	let visible = $state(true);
 
 	function spin(node, { duration }) {
 		return {
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/04-custom-css-transitions/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/+assets/app-b/src/lib/App.svelte
similarity index 96%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/04-custom-css-transitions/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/+assets/app-b/src/lib/App.svelte
index d0c84c2c2a..1a5d821c29 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/04-custom-css-transitions/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/+assets/app-b/src/lib/App.svelte
@@ -2,7 +2,7 @@
 	import { fade } from 'svelte/transition';
 	import { elasticOut } from 'svelte/easing';
 
-	let visible = true;
+	let visible = $state(true);
 
 	function spin(node, { duration }) {
 		return {
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/04-custom-css-transitions/index.md b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/04-custom-css-transitions/index.md
rename to apps/svelte.dev/content/tutorial/01-svelte/09-transitions/04-custom-css-transitions/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/05-custom-js-transitions/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/05-custom-js-transitions/+assets/app-a/src/lib/App.svelte
similarity index 93%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/05-custom-js-transitions/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/09-transitions/05-custom-js-transitions/+assets/app-a/src/lib/App.svelte
index 803d0bad63..9f53319e3a 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/05-custom-js-transitions/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/05-custom-js-transitions/+assets/app-a/src/lib/App.svelte
@@ -1,5 +1,5 @@
 <script>
-	let visible = false;
+	let visible = $state(false);
 
 	function typewriter(node, { speed = 1 }) {
 		const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/05-custom-js-transitions/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/05-custom-js-transitions/+assets/app-b/src/lib/App.svelte
similarity index 95%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/05-custom-js-transitions/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/09-transitions/05-custom-js-transitions/+assets/app-b/src/lib/App.svelte
index 87fad80c59..b444bc2a15 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/05-custom-js-transitions/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/05-custom-js-transitions/+assets/app-b/src/lib/App.svelte
@@ -1,5 +1,5 @@
 <script>
-	let visible = false;
+	let visible = $state(false);
 
 	function typewriter(node, { speed = 1 }) {
 		const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/05-custom-js-transitions/index.md b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/05-custom-js-transitions/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/05-custom-js-transitions/index.md
rename to apps/svelte.dev/content/tutorial/01-svelte/09-transitions/05-custom-js-transitions/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/06-transition-events/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/06-transition-events/+assets/app-a/src/lib/App.svelte
similarity index 64%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/06-transition-events/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/09-transitions/06-transition-events/+assets/app-a/src/lib/App.svelte
index e7d48c1e3c..441349d89f 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/06-transition-events/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/06-transition-events/+assets/app-a/src/lib/App.svelte
@@ -1,8 +1,8 @@
 <script>
 	import { fly } from 'svelte/transition';
 
-	let visible = true;
-	let status = 'waiting...';
+	let visible = $state(true);
+	let status = $state('waiting...');
 </script>
 
 <p>status: {status}</p>
@@ -13,7 +13,9 @@
 </label>
 
 {#if visible}
-	<p transition:fly={{ y: 200, duration: 2000 }}>
+	<p
+		transition:fly={{ y: 200, duration: 2000 }}
+	>
 		Flies in and out
 	</p>
 {/if}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/06-transition-events/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/06-transition-events/+assets/app-b/src/lib/App.svelte
similarity index 51%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/06-transition-events/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/09-transitions/06-transition-events/+assets/app-b/src/lib/App.svelte
index f52074ddc8..57ebb184fc 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/06-transition-events/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/06-transition-events/+assets/app-b/src/lib/App.svelte
@@ -1,8 +1,8 @@
 <script>
 	import { fly } from 'svelte/transition';
 
-	let visible = true;
-	let status = 'waiting...';
+	let visible = $state(true);
+	let status = $state('waiting...');
 </script>
 
 <p>status: {status}</p>
@@ -15,10 +15,10 @@
 {#if visible}
 	<p
 		transition:fly={{ y: 200, duration: 2000 }}
-		on:introstart={() => status = 'intro started'}
-		on:outrostart={() => status = 'outro started'}
-		on:introend={() => status = 'intro ended'}
-		on:outroend={() => status = 'outro ended'}
+		onintrostart={() => status = 'intro started'}
+		onoutrostart={() => status = 'outro started'}
+		onintroend={() => status = 'intro ended'}
+		onoutroend={() => status = 'outro ended'}
 	>
 		Flies in and out
 	</p>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/06-transition-events/index.md b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/06-transition-events/index.md
similarity index 60%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/06-transition-events/index.md
rename to apps/svelte.dev/content/tutorial/01-svelte/09-transitions/06-transition-events/index.md
index e318ca5fc8..2d929d7c72 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/06-transition-events/index.md
+++ b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/06-transition-events/index.md
@@ -8,10 +8,10 @@ It can be useful to know when transitions are beginning and ending. Svelte dispa
 /// file: App.svelte
 <p
 	transition:fly={{ y: 200, duration: 2000 }}
-	+++on:introstart={() => status = 'intro started'}
-	on:outrostart={() => status = 'outro started'}
-	on:introend={() => status = 'intro ended'}
-	on:outroend={() => status = 'outro ended'}+++
++++	onintrostart={() => status = 'intro started'}
+	onoutrostart={() => status = 'outro started'}
+	onintroend={() => status = 'intro ended'}
+	onoutroend={() => status = 'outro ended'}+++
 >
 	Flies in and out
 </p>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/07-global-transitions/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/07-global-transitions/+assets/app-a/src/lib/App.svelte
similarity index 90%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/07-global-transitions/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/09-transitions/07-global-transitions/+assets/app-a/src/lib/App.svelte
index 9700f945b4..dd5206f17b 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/07-global-transitions/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/07-global-transitions/+assets/app-a/src/lib/App.svelte
@@ -1,9 +1,10 @@
 <script>
 	import { slide } from 'svelte/transition';
 
-	let showItems = true;
-	let i = 5;
 	let items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
+
+	let showItems = $state(true);
+	let i = $state(5);
 </script>
 
 <label>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/07-global-transitions/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/07-global-transitions/+assets/app-b/src/lib/App.svelte
similarity index 90%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/07-global-transitions/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/09-transitions/07-global-transitions/+assets/app-b/src/lib/App.svelte
index 93de6a0cdc..50d0ad7d5f 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/07-global-transitions/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/07-global-transitions/+assets/app-b/src/lib/App.svelte
@@ -1,9 +1,10 @@
 <script>
 	import { slide } from 'svelte/transition';
 
-	let showItems = true;
-	let i = 5;
 	let items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
+
+	let showItems = $state(true);
+	let i = $state(5);
 </script>
 
 <label>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/07-global-transitions/index.md b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/07-global-transitions/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/07-global-transitions/index.md
rename to apps/svelte.dev/content/tutorial/01-svelte/09-transitions/07-global-transitions/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/08-key-blocks/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/08-key-blocks/+assets/app-a/src/lib/App.svelte
similarity index 83%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/08-key-blocks/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/09-transitions/08-key-blocks/+assets/app-a/src/lib/App.svelte
index 3ca3c06572..247b74a770 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/08-key-blocks/+assets/app-a/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/08-key-blocks/+assets/app-a/src/lib/App.svelte
@@ -1,11 +1,10 @@
 <script>
-	import { onMount } from 'svelte';
 	import { typewriter } from './transition.js';
 	import { messages } from './loading-messages.js';
 
-	let i = -1;
+	let i = $state(-1);
 
-	onMount(() => {
+	$effect(() => {
 		const interval = setInterval(() => {
 			i += 1;
 			i %= messages.length;
@@ -21,4 +20,4 @@
 
 <p in:typewriter={{ speed: 10 }}>
 	{messages[i] || ''}
-</p>
\ No newline at end of file
+</p>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/08-key-blocks/+assets/app-a/src/lib/loading-messages.js b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/08-key-blocks/+assets/app-a/src/lib/loading-messages.js
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/08-key-blocks/+assets/app-a/src/lib/loading-messages.js
rename to apps/svelte.dev/content/tutorial/01-svelte/09-transitions/08-key-blocks/+assets/app-a/src/lib/loading-messages.js
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/08-key-blocks/+assets/app-a/src/lib/transition.js b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/08-key-blocks/+assets/app-a/src/lib/transition.js
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/08-key-blocks/+assets/app-a/src/lib/transition.js
rename to apps/svelte.dev/content/tutorial/01-svelte/09-transitions/08-key-blocks/+assets/app-a/src/lib/transition.js
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/08-key-blocks/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/08-key-blocks/+assets/app-b/src/lib/App.svelte
similarity index 83%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/08-key-blocks/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/01-svelte/09-transitions/08-key-blocks/+assets/app-b/src/lib/App.svelte
index 730fd09148..401cfac272 100644
--- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/08-key-blocks/+assets/app-b/src/lib/App.svelte
+++ b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/08-key-blocks/+assets/app-b/src/lib/App.svelte
@@ -1,11 +1,10 @@
 <script>
-	import { onMount } from 'svelte';
 	import { typewriter } from './transition.js';
 	import { messages } from './loading-messages.js';
 
-	let i = -1;
+	let i = $state(-1);
 
-	onMount(() => {
+	$effect(() => {
 		const interval = setInterval(() => {
 			i += 1;
 			i %= messages.length;
@@ -23,4 +22,4 @@
 	<p in:typewriter={{ speed: 10 }}>
 		{messages[i] || ''}
 	</p>
-{/key}
\ No newline at end of file
+{/key}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/08-key-blocks/index.md b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/08-key-blocks/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/08-key-blocks/index.md
rename to apps/svelte.dev/content/tutorial/01-svelte/09-transitions/08-key-blocks/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/index.md b/apps/svelte.dev/content/tutorial/01-svelte/09-transitions/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/index.md
rename to apps/svelte.dev/content/tutorial/01-svelte/09-transitions/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/01-raw-state/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/01-raw-state/+assets/app-a/src/lib/App.svelte
new file mode 100644
index 0000000000..2505bf3d80
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/01-raw-state/+assets/app-a/src/lib/App.svelte
@@ -0,0 +1,87 @@
+<script>
+	import { scale } from './utils.js';
+	import { poll } from './data.js';
+
+	let data = poll();
+
+	let w = $state(1);
+	let h = $state(1);
+
+	const min = $derived(Math.min(...data) - 5);
+	const max = $derived(Math.max(...data) + 5);
+	const x = $derived(scale([0, data.length], [0, w]));
+	const y = $derived(scale([min, max], [h, 0]));
+
+	const ticks = $derived.by(() => {
+		const result = [];
+		let n = 10 * Math.ceil(min / 10);
+		while (n < max) {
+			result.push(n);
+			n += 10;
+		}
+		return result;
+	});
+
+	$effect(() => {
+		const interval = setInterval(() => {
+			data = poll();
+		}, 200);
+
+		return () => {
+			clearInterval(interval);
+		};
+	});
+</script>
+
+<div class="outer">
+	<svg width={w} height={h} bind:clientWidth={w} bind:clientHeight={h}>
+		<line y1={h} y2={h} x2={w} />
+
+		{#each ticks as tick}
+			<g class="tick" transform="translate(0,{y(tick)})">
+				<line x2={w} />
+				<text x={-5}>{tick}</text>
+			</g>
+		{/each}
+
+		<polyline points={data.map((d, i) => [x(i), y(d)]).join(' ')} />
+
+		<text x={10} y={10} font-size={36}>$SVLT</text>
+	</svg>
+</div>
+
+<style>
+	.outer {
+		width: 100%;
+		height: 100%;
+		padding: 2em;
+		box-sizing: border-box;
+	}
+
+	svg {
+		width: 100%;
+		height: 100%;
+		overflow: visible;
+	}
+
+	polyline {
+		fill: none;
+		stroke: #ff3e00;
+		stroke-width: 2;
+		stroke-linejoin: round;
+		stroke-linecap: round;
+	}
+
+	line {
+		stroke: #aaa;
+	}
+
+	.tick {
+		stroke-dasharray: 2 2;
+
+		text {
+			text-anchor: end;
+			dominant-baseline: middle;
+		}
+	}
+</style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/01-raw-state/+assets/app-a/src/lib/data.js b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/01-raw-state/+assets/app-a/src/lib/data.js
new file mode 100644
index 0000000000..f785f17244
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/01-raw-state/+assets/app-a/src/lib/data.js
@@ -0,0 +1,17 @@
+let previous = 50;
+let data = [];
+
+function next() {
+	const value = previous + Math.random() - 0.4;
+	previous = value;
+
+	return value;
+}
+
+for (let i = 0; i < 100; i += 1) {
+	data.push(next());
+}
+
+export function poll() {
+	return data = [...data.slice(1), next()];
+}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/01-raw-state/+assets/app-a/src/lib/utils.js b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/01-raw-state/+assets/app-a/src/lib/utils.js
new file mode 100644
index 0000000000..3425fbc6b9
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/01-raw-state/+assets/app-a/src/lib/utils.js
@@ -0,0 +1,16 @@
+export function scale(domain, range) {
+	const m = (range[1] - range[0]) / (domain[1] - domain[0]);
+	return (value) => range[0] + m * (value - domain[0]);
+}
+
+export function getTicks(min, max) {
+	const ticks = [];
+	let n = 10 * Math.ceil(min / 10);
+
+	while (n < max) {
+		ticks.push(n);
+		n += 10;
+	}
+
+	return ticks;
+}
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/01-raw-state/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/01-raw-state/+assets/app-b/src/lib/App.svelte
new file mode 100644
index 0000000000..f2c2b0b465
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/01-raw-state/+assets/app-b/src/lib/App.svelte
@@ -0,0 +1,87 @@
+<script>
+	import { scale } from './utils.js';
+	import { poll } from './data.js';
+
+	let data = $state.raw(poll());
+
+	let w = $state(1);
+	let h = $state(1);
+
+	const min = $derived(Math.min(...data) - 5);
+	const max = $derived(Math.max(...data) + 5);
+	const x = $derived(scale([0, data.length], [0, w]));
+	const y = $derived(scale([min, max], [h, 0]));
+
+	const ticks = $derived.by(() => {
+		const result = [];
+		let n = 10 * Math.ceil(min / 10);
+		while (n < max) {
+			result.push(n);
+			n += 10;
+		}
+		return result;
+	});
+
+	$effect(() => {
+		const interval = setInterval(() => {
+			data = poll();
+		}, 200);
+
+		return () => {
+			clearInterval(interval);
+		};
+	});
+</script>
+
+<div class="outer">
+	<svg width={w} height={h} bind:clientWidth={w} bind:clientHeight={h}>
+		<line y1={h} y2={h} x2={w} />
+
+		{#each ticks as tick}
+			<g class="tick" transform="translate(0,{y(tick)})">
+				<line x2={w} />
+				<text x={-5}>{tick}</text>
+			</g>
+		{/each}
+
+		<polyline points={data.map((d, i) => [x(i), y(d)]).join(' ')} />
+
+		<text x={10} y={10} font-size={36}>$SVLT</text>
+	</svg>
+</div>
+
+<style>
+	.outer {
+		width: 100%;
+		height: 100%;
+		padding: 2em;
+		box-sizing: border-box;
+	}
+
+	svg {
+		width: 100%;
+		height: 100%;
+		overflow: visible;
+	}
+
+	polyline {
+		fill: none;
+		stroke: #ff3e00;
+		stroke-width: 2;
+		stroke-linejoin: round;
+		stroke-linecap: round;
+	}
+
+	line {
+		stroke: #aaa;
+	}
+
+	.tick {
+		stroke-dasharray: 2 2;
+
+		text {
+			text-anchor: end;
+			dominant-baseline: middle;
+		}
+	}
+</style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/01-raw-state/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/01-raw-state/index.md
new file mode 100644
index 0000000000..937fa219d2
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/01-raw-state/index.md
@@ -0,0 +1,23 @@
+---
+title: Raw state
+---
+
+In previous exercises, we learned that state is [deeply reactive](deep-state) — if you (for example) change a property of an object, or push to an array, it will cause the UI to update. This works by creating a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) that intercepts reads and writes.
+
+Occasionally, that's not what you want. If you're not changing individual properties, or if it's important to main referential equality, then you can use _raw state_ instead.
+
+In this example, we have a chart of Svelte's steadily increasing stock price. We want the chart to update when new data comes in, which we could achieve by turning `data` into state...
+
+```js
+/// file: App.svelte
+let data = +++$state(poll())+++;
+```
+
+...but there's no need to make it deeply reactive when it will be discarded a few milliseconds later. Instead, use `$state.raw`:
+
+```js
+/// file: App.svelte
+let data = +++$state.raw(poll())+++;
+```
+
+> [!NOTE] Mutating raw state will have no direct effect. In general, mutating non-reactive state is strongly discouraged.
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/02-reactive-classes/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/02-reactive-classes/+assets/app-a/src/lib/App.svelte
new file mode 100644
index 0000000000..20b040e74b
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/02-reactive-classes/+assets/app-a/src/lib/App.svelte
@@ -0,0 +1,66 @@
+<script>
+	const MAX_SIZE = 200;
+
+	class Box {
+		width = 0;
+		height = 0;
+		area = 0;
+
+		constructor(width, height) {
+			this.width = width;
+			this.height = height;
+		}
+
+		embiggen(amount) {
+			this.width += amount;
+			this.height += amount;
+		}
+	}
+
+	const box = new Box(100, 100);
+</script>
+
+<label>
+	<input type="range" bind:value={box.width} min={0} max={MAX_SIZE} />
+	{box.width}
+</label>
+
+<label>
+	<input type="range" bind:value={box.height} min={0} max={MAX_SIZE} />
+	{box.height}
+</label>
+
+<button onclick={() => box.embiggen(10)}>embiggen</button>
+
+<hr>
+
+<div
+	class="box"
+	style:width="{box.width}px"
+	style:height="{box.height}px"
+>
+	{box.area}
+</div>
+
+<style>
+	label {
+		display: flex;
+		align-items: center;
+	}
+
+	hr {
+		margin: 1em 0;
+		border: none;
+		border-bottom: 1px solid #888;
+	}
+
+	.box {
+		background: radial-gradient(at 25% 25%, hsl(15 100 60), hsl(15 100 50)) ;
+		border-radius: 2px;
+		filter: drop-shadow(0 0 10px hsl(15 100 50 / 0.3));
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+	}
+</style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/02-reactive-classes/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/02-reactive-classes/+assets/app-b/src/lib/App.svelte
new file mode 100644
index 0000000000..aed4c7e3c0
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/02-reactive-classes/+assets/app-b/src/lib/App.svelte
@@ -0,0 +1,66 @@
+<script>
+	const MAX_SIZE = 200;
+
+	class Box {
+		width = $state(0);
+		height = $state(0);
+		area = $derived(this.width * this.height);
+
+		constructor(width, height) {
+			this.width = width;
+			this.height = height;
+		}
+
+		embiggen(amount) {
+			this.width += amount;
+			this.height += amount;
+		}
+	}
+
+	const box = new Box(100, 100);
+</script>
+
+<label>
+	<input type="range" bind:value={box.width} min={0} max={MAX_SIZE} />
+	{box.width}
+</label>
+
+<label>
+	<input type="range" bind:value={box.height} min={0} max={MAX_SIZE} />
+	{box.height}
+</label>
+
+<button onclick={() => box.embiggen(10)}>embiggen</button>
+
+<hr>
+
+<div
+	class="box"
+	style:width="{box.width}px"
+	style:height="{box.height}px"
+>
+	{box.area}
+</div>
+
+<style>
+	label {
+		display: flex;
+		align-items: center;
+	}
+
+	hr {
+		margin: 1em 0;
+		border: none;
+		border-bottom: 1px solid #888;
+	}
+
+	.box {
+		background: radial-gradient(at 25% 25%, hsl(15 100 60), hsl(15 100 50)) ;
+		border-radius: 2px;
+		filter: drop-shadow(0 0 10px hsl(15 100 50 / 0.3));
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+	}
+</style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/02-reactive-classes/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/02-reactive-classes/index.md
new file mode 100644
index 0000000000..b6fbd60601
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/02-reactive-classes/index.md
@@ -0,0 +1,33 @@
+---
+title: Reactive classes
+---
+
+It's not just variables that can be made reactive — in Svelte, we can also make properties of classes reactive.
+
+Let's make the `width` and `height` properties of our `Box` class reactive:
+
+```js
+/// file: App.svelte
+class Box {
+	width = +++$state(0);+++
+	height = +++$state(0);+++
+	area = 0;
+
+	// ...
+}
+```
+
+Now, when we interact with the range inputs or click the 'embiggen' button, the box reacts.
+
+We can also use `$derived`, so that `box.area` updates reactively:
+
+```js
+/// file: App.svelte
+class Box {
+	width = $state(0);
+	height = $state(0);
+	area = +++$derived(this.width * this.height);+++
+
+	// ...
+}
+```
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/03-getters-and-setters/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/03-getters-and-setters/+assets/app-b/src/lib/App.svelte
new file mode 100644
index 0000000000..8d458e66fe
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/03-getters-and-setters/+assets/app-b/src/lib/App.svelte
@@ -0,0 +1,82 @@
+<script>
+	const MAX_SIZE = 200;
+
+	class Box {
+		#width = $state(0);
+		#height = $state(0);
+		area = $derived(this.#width * this.#height);
+
+		constructor(width, height) {
+			this.#width = width;
+			this.#height = height;
+		}
+
+		get width() {
+			return this.#width;
+		}
+
+		get height() {
+			return this.#height;
+		}
+
+		set width(value) {
+			this.#width = Math.max(0, Math.min(MAX_SIZE, value));
+		}
+
+		set height(value) {
+			this.#height = Math.max(0, Math.min(MAX_SIZE, value));
+		}
+
+		embiggen(amount) {
+			this.width += amount;
+			this.height += amount;
+		}
+	}
+
+	const box = new Box(100, 100);
+</script>
+
+<label>
+	<input type="range" bind:value={box.width} min={0} max={MAX_SIZE} />
+	{box.width}
+</label>
+
+<label>
+	<input type="range" bind:value={box.height} min={0} max={MAX_SIZE} />
+	{box.height}
+</label>
+
+<button onclick={() => box.embiggen(10)}>embiggen</button>
+
+<hr>
+
+<div
+	class="box"
+	style:width="{box.width}px"
+	style:height="{box.height}px"
+>
+	{box.area}
+</div>
+
+<style>
+	label {
+		display: flex;
+		align-items: center;
+	}
+
+	hr {
+		margin: 1em 0;
+		border: none;
+		border-bottom: 1px solid #888;
+	}
+
+	.box {
+		background: radial-gradient(at 25% 25%, hsl(15 100 60), hsl(15 100 50)) ;
+		border-radius: 2px;
+		filter: drop-shadow(0 0 10px hsl(15 100 50 / 0.3));
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+	}
+</style>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/03-getters-and-setters/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/03-getters-and-setters/index.md
new file mode 100644
index 0000000000..1b06750885
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/03-getters-and-setters/index.md
@@ -0,0 +1,68 @@
+---
+title: Getters and setters
+---
+
+Classes are particularly useful when you need to validate data. In the case of this `Box` class, it shouldn't be possible to keep embiggening past the maximum allowed by the sliders, but that's exactly what happens.
+
+We can fix that by replacing `width` and `height` with _getters_ and _setters_, otherwise known as _accessors_. First, convert them to [private properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_properties):
+
+```js
+/// file: App.svelte
+class Box {
+	+++#width+++ = $state(0);
+	+++#height+++ = $state(0);
+	area = $derived(this.+++#width+++ * this.+++#height+++);
+
+	constructor(width, height) {
+		this.+++#width+++ = width;
+		this.+++#height+++ = height;
+	}
+
+	// ...
+}
+```
+
+Then, create some getters and setters:
+
+```js
+/// file: App.svelte
+class Box {
+	// ...
+
++++	get width() {
+		return this.#width;
+	}
+
+	get height() {
+		return this.#height;
+	}
+
+	set width(value) {
+		this.#width = value;
+	}
+
+	set height(value) {
+		this.#height = value;
+	}+++
+
+	embiggen(amount) {
+		this.width += amount;
+		this.height += amount;
+	}
+}
+```
+
+Finally, add the validation to the setters:
+
+```js
+/// file: App.svelte
+set width(value) {
+	this.#width = +++Math.max(0, Math.min(MAX_SIZE, value));+++
+}
+
+set height(value) {
+	this.#height = +++Math.max(0, Math.min(MAX_SIZE, value));+++
+}
+```
+
+It's now impossible to increase the box size past safe limits, whether through the `bind:value` on the range inputs, or the `embiggen` method, no matter how hard you press the button.
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/04-reactive-builtins/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/04-reactive-builtins/+assets/app-a/src/lib/App.svelte
new file mode 100644
index 0000000000..3a586642e3
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/04-reactive-builtins/+assets/app-a/src/lib/App.svelte
@@ -0,0 +1,17 @@
+<script>
+	let date = new Date();
+
+	const pad = (n) => n < 10 ? '0' + n : n;
+
+	$effect(() => {
+		const interval = setInterval(() => {
+			date.setTime(Date.now());
+		}, 1000);
+
+		return () => {
+			clearInterval(interval);
+		};
+	});
+</script>
+
+<p>The time is {date.getHours()}:{pad(date.getMinutes())}:{pad(date.getSeconds())}</p>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/04-reactive-builtins/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/04-reactive-builtins/+assets/app-b/src/lib/App.svelte
new file mode 100644
index 0000000000..6ab80fa2cc
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/04-reactive-builtins/+assets/app-b/src/lib/App.svelte
@@ -0,0 +1,19 @@
+<script>
+	import { SvelteDate } from 'svelte/reactivity';
+
+	let date = new SvelteDate();
+
+	const pad = (n) => n < 10 ? '0' + n : n;
+
+	$effect(() => {
+		const interval = setInterval(() => {
+			date.setTime(Date.now());
+		}, 1000);
+
+		return () => {
+			clearInterval(interval);
+		};
+	});
+</script>
+
+<p>The time is {date.getHours()}:{pad(date.getMinutes())}:{pad(date.getSeconds())}</p>
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/04-reactive-builtins/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/04-reactive-builtins/index.md
new file mode 100644
index 0000000000..b185d49559
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/04-reactive-builtins/index.md
@@ -0,0 +1,18 @@
+---
+title: Reactive built-ins
+---
+
+Svelte ships with several reactive classes that you can use in place of JavaScript built-in objects — namely `Map`, `Set`, `Date`, `URL` and `URLSearchParams`.
+
+In this exercise, we _could_ declare `date` using `$state(new Date())` and reassign it inside the `setInterval`. But a nicer alternative is to use `SvelteDate` from [`svelte/reactivity`](/docs/svelte/svelte-reactivity):
+
+```svelte
+/// file: App.svelte
+<script>
+	+++import { SvelteDate } from 'svelte/reactivity';+++
+
+	let date = new +++SvelteDate();+++
+
+	// ...
+</script>
+```
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/index.md
new file mode 100644
index 0000000000..57a9ff0ec1
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/index.md
@@ -0,0 +1,5 @@
+---
+title: Advanced reactivity
+scope: { 'prefix': '/src/lib/', 'name': 'src' }
+focus: /src/lib/App.svelte
+---
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-motion/01-tweens/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/01-tweens/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/01-motion/01-tweens/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/01-tweens/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-motion/01-tweens/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/01-tweens/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/01-motion/01-tweens/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/01-tweens/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-motion/01-tweens/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/01-tweens/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/01-motion/01-tweens/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/01-tweens/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-motion/02-springs/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/02-springs/+assets/app-a/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/01-motion/02-springs/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/02-springs/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-motion/02-springs/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/02-springs/+assets/app-b/src/lib/App.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/01-motion/02-springs/+assets/app-b/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/02-springs/+assets/app-b/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-motion/02-springs/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/02-springs/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/01-motion/02-springs/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/02-springs/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/01-motion/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/01-motion/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-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
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/09-deferred-transitions/+assets/app-a/src/lib/App.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-a/src/lib/App.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-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
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/09-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-a/src/lib/TodoList.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/09-deferred-transitions/+assets/app-a/src/lib/remove.svg b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-a/src/lib/remove.svg
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/09-deferred-transitions/+assets/app-a/src/lib/remove.svg
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-a/src/lib/remove.svg
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-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
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/09-deferred-transitions/+assets/app-a/src/lib/todos.js
rename to 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/02-transitions/09-deferred-transitions/+assets/app-a/src/lib/transition.js b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-a/src/lib/transition.js
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/09-deferred-transitions/+assets/app-a/src/lib/transition.js
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-a/src/lib/transition.js
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-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
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/09-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/+assets/app-b/src/lib/TodoList.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/09-deferred-transitions/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/02-transitions/09-deferred-transitions/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/09-deferred-transitions/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-animations/01-animate/+assets/app-b/src/lib/TodoList.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/10-animations/01-animate/+assets/app-b/src/lib/TodoList.svelte
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/03-animations/01-animate/+assets/app-b/src/lib/TodoList.svelte
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/10-animations/01-animate/+assets/app-b/src/lib/TodoList.svelte
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-animations/01-animate/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/10-animations/01-animate/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/03-animations/01-animate/index.md
rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/10-animations/01-animate/index.md
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-animations/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/10-animations/index.md
similarity index 100%
rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/03-animations/index.md
rename to 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/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/index.md
new file mode 100644
index 0000000000..ab372656aa
--- /dev/null
+++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/06-advanced-transitions/index.md
@@ -0,0 +1,5 @@
+---
+title: Advanced transitions
+scope: { 'prefix': '/src/lib/', 'name': 'src' }
+focus: /src/lib/App.svelte
+---