diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
index 16b6c3e87d..e71d460dc1 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
@@ -9,14 +9,7 @@
 	import Output from './Output.svelte';
 	import { ScreenToggle } from '@sveltejs/site-kit/components';
 	import Sidebar from './Sidebar.svelte';
-	import {
-		creating,
-		files,
-		reset_files,
-		selected_file,
-		selected_name,
-		solution
-	} from './state.svelte';
+	import { solution, workspace } from './state.svelte';
 	import { create_directories } from './utils';
 	import { needs_webcontainers, text_files } from './shared';
 	import OutputRollup from './OutputRollup.svelte';
@@ -93,10 +86,8 @@
 		return files;
 	}
 
-	// for the things we can't do with media queries
-
 	beforeNavigate(() => {
-		previous_files = $files;
+		previous_files = workspace.files;
 	});
 
 	afterNavigate(async () => {
@@ -105,7 +96,7 @@
 		const will_delete = previous_files.some((file) => !(file.name in a));
 
 		if (data.exercise.path !== path || will_delete) paused = true;
-		await reset($files);
+		await reset(workspace.files);
 
 		path = data.exercise.path;
 		paused = false;
@@ -137,40 +128,40 @@
 	}
 
 	function select_file(name: string | null) {
-		const file = name && $files.find((file) => file.name === name);
+		const file = name && workspace.files.find((file) => file.name === name);
 
 		if (!file && name) {
 			// trigger file creation input. first, create any intermediate directories
-			const new_directories = create_directories(name, $files);
+			const new_directories = create_directories(name, workspace.files);
 
 			if (new_directories.length > 0) {
-				reset_files([...$files, ...new_directories]);
+				workspace.reset_files([...workspace.files, ...new_directories]);
 			}
 
 			// find the parent directory
 			const parent = name.split('/').slice(0, -1).join('/');
 
-			creating.set({
+			workspace.creating = {
 				parent,
 				type: 'file'
-			});
+			};
 
 			show_filetree = true;
 		} else {
 			show_filetree = false;
-			selected_name.set(name);
+			workspace.selected_name = name;
 		}
 
 		show_editor = true;
 	}
 
 	function navigate_to_file(name: string) {
-		if (name === $selected_name) return;
+		if (name === workspace.selected_name) return;
 
 		select_file(name);
 
 		if (mobile) {
-			const q = new URLSearchParams({ file: $selected_name || '' });
+			const q = new URLSearchParams({ file: workspace.selected_name || '' });
 			history.pushState({}, '', `?${q}`);
 		}
 	}
@@ -191,10 +182,12 @@
 
 	let a = $derived(create_files(data.exercise.a));
 	let b = $derived(create_files({ ...data.exercise.a, ...data.exercise.b }));
+
+	// for the things we can't do with media queries
 	let mobile = $derived(w < 800);
 
 	$effect(() => {
-		files.set(Object.values(a));
+		workspace.files = Object.values(a);
 	});
 
 	$effect(() => {
@@ -202,10 +195,10 @@
 	});
 
 	$effect(() => {
-		selected_name.set(data.exercise.focus);
+		workspace.selected_name = data.exercise.focus;
 	});
 
-	let completed = $derived(is_completed($files, b));
+	let completed = $derived(is_completed(workspace.files, b));
 </script>
 
 <svelte:head>
@@ -248,7 +241,7 @@
 		exercise={data.exercise}
 		{completed}
 		toggle={() => {
-			reset_files(Object.values(completed ? a : b));
+			workspace.reset_files(Object.values(completed ? a : b));
 		}}
 	/>
 
@@ -277,7 +270,7 @@
 							<section slot="a" class="navigator">
 								{#if mobile}
 									<button class="file" onclick={() => (show_filetree = !show_filetree)}>
-										{$selected_file?.name.replace(
+										{workspace.selected_name?.replace(
 											data.exercise.scope.prefix,
 											data.exercise.scope.name + '/'
 										) ?? 'Files'}
@@ -294,7 +287,7 @@
 
 							<section slot="b" class="editor-container">
 								<Editor exercise={data.exercise} warnings={adapter_state.warnings} />
-								<ImageViewer selected={$selected_file} />
+								<ImageViewer selected={workspace.selected_file} />
 
 								{#if mobile && show_filetree}
 									<div class="mobile-filetree">
@@ -333,7 +326,7 @@
 				const url = new URL(location.origin + location.pathname);
 
 				if (show_editor) {
-					url.searchParams.set('file', $selected_name ?? '');
+					url.searchParams.set('file', workspace.selected_name ?? '');
 				}
 
 				history.pushState({}, '', url); // TODO use SvelteKit pushState
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Editor.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Editor.svelte
index eb8e5a0535..c1977e3145 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Editor.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Editor.svelte
@@ -13,7 +13,7 @@
 	import { svelteTheme } from '@sveltejs/repl/theme';
 	import { basicSetup } from 'codemirror';
 	import { onMount, tick } from 'svelte';
-	import { files, selected_file, selected_name, update_file } from './state.svelte';
+	import { workspace } from './state.svelte';
 	import { autocomplete_for_svelte } from '@sveltejs/site-kit/codemirror';
 	import type { Diagnostic } from '@codemirror/lint';
 	import type { Exercise, Stub } from '$lib/tutorial';
@@ -48,8 +48,7 @@
 
 	let installed_vim = false;
 
-	/** @param {import('$lib/tutorial').Stub[]} $files */
-	async function reset($files: Stub[]) {
+	async function reset(files: Stub[]) {
 		if (skip_reset) return;
 
 		let should_install_vim = localStorage.getItem('vim') === 'true';
@@ -66,7 +65,7 @@
 			extensions.push(vim());
 		}
 
-		for (const file of $files) {
+		for (const file of files) {
 			if (file.type !== 'file') continue;
 
 			let state = editor_states.get(file.name);
@@ -86,7 +85,7 @@
 					editor_states.set(file.name, transaction.state);
 					state = transaction.state;
 
-					if ($selected_name === file.name) {
+					if (workspace.selected_name === file.name) {
 						editor_view.setState(state);
 					}
 				}
@@ -101,9 +100,9 @@
 					lang = [
 						svelte(),
 						...autocomplete_for_svelte(
-							() => $selected_file!.name,
+							() => workspace.selected_name!,
 							() =>
-								$files
+								files
 									.filter(
 										(file) =>
 											file.type === 'file' &&
@@ -127,11 +126,11 @@
 		}
 	}
 
-	function select_state($selected_name: string | null) {
+	function select_state(selected_name: string | null) {
 		if (skip_reset) return;
 
 		const state =
-			($selected_name && editor_states.get($selected_name)) ||
+			(selected_name && editor_states.get(selected_name)) ||
 			EditorState.create({
 				doc: '',
 				extensions: [EditorState.readOnly.of(true)]
@@ -146,17 +145,17 @@
 			async dispatch(transaction) {
 				editor_view.update([transaction]);
 
-				if (transaction.docChanged && $selected_file) {
+				if (transaction.docChanged && workspace.selected_file) {
 					skip_reset = true;
 
-					// TODO do we even need to update `$files`? maintaining separate editor states is probably sufficient
-					update_file({
-						...$selected_file,
+					// TODO do we even need to update `workspace.files`? maintaining separate editor states is probably sufficient
+					workspace.update_file({
+						...workspace.selected_file,
 						contents: editor_view.state.doc.toString()
 					});
 
 					// keep `editor_states` updated so that undo/redo history is preserved for files independently
-					editor_states.set($selected_file.name, editor_view.state);
+					editor_states.set(workspace.selected_file.name, editor_view.state);
 
 					await tick();
 					skip_reset = false;
@@ -177,26 +176,26 @@
 		skip_reset = false;
 
 		editor_states.clear();
-		await reset($files);
+		await reset(workspace.files);
 
 		if (editor_view) {
 			// could be false if onMount returned early
-			select_state($selected_name);
+			select_state(workspace.selected_name);
 		}
 	});
 
 	$effect(() => {
-		reset($files);
+		reset(workspace.files);
 	});
 
 	$effect(() => {
-		select_state($selected_name);
+		select_state(workspace.selected_name);
 	});
 
 	$effect(() => {
 		if (editor_view) {
-			if ($selected_name) {
-				const current_warnings = warnings[$selected_name] || [];
+			if (workspace.selected_name) {
+				const current_warnings = warnings[workspace.selected_name] || [];
 				const diagnostics = current_warnings.map((warning) => {
 					/** @type {import('@codemirror/lint').Diagnostic} */
 					const diagnostic: Diagnostic = {
@@ -245,15 +244,15 @@
 		}, 200);
 	}}
 >
-	{#if !browser && $selected_file}
+	{#if !browser && workspace.selected_file}
 		<div class="fake">
 			<div class="fake-gutter">
-				{#each $selected_file.contents.split('\n') as _, i}
+				{#each workspace.selected_file.contents.split('\n') as _, i}
 					<div class="fake-line">{i + 1}</div>
 				{/each}
 			</div>
 			<div class="fake-content">
-				{#each $selected_file.contents.split('\n') as line}
+				{#each workspace.selected_file.contents.split('\n') as line}
 					<pre>{line || ' '}</pre>
 				{/each}
 			</div>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte
index 52cdc2c6e0..be0399145b 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { load_webcontainer, reset } from './adapter.svelte';
-	import { files } from './state.svelte';
+	import { workspace } from './state.svelte';
 
 	interface Props {
 		initial: boolean;
@@ -69,7 +69,7 @@
 							onclick={async () => {
 								error = null;
 								load_webcontainer(true);
-								await reset($files);
+								await reset(workspace.files);
 							}}>clicking here</button
 						>.
 					</p>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte
index b1aa5038f6..88e65c2b82 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte
@@ -1,40 +1,43 @@
-<script>
+<script lang="ts">
 	import * as context from './context.js';
 	import Item from './Item.svelte';
 	import file_icon from '$lib/icons/file.svg';
-	import { selected_name, solution } from '../state.svelte';
+	import { solution, workspace } from '../state.svelte';
+	import type { FileStub, MenuItem } from '$lib/tutorial';
 
-	/** @type {import('$lib/tutorial').FileStub} */
-	export let file;
+	interface Props {
+		file: FileStub;
+		depth: number;
+	}
 
-	/** @type {number} */
-	export let depth;
+	let { file, depth }: Props = $props();
 
 	const { rename, remove, select } = context.get();
 
-	let renaming = false;
+	let renaming = $state(false);
 
-	$: can_remove = !$solution[file.name];
+	let can_remove = $derived(!$solution[file.name]);
 
-	/** @type {import('$lib/tutorial').MenuItem[]} */
-	$: actions = can_remove
-		? [
-				{
-					icon: 'rename',
-					label: 'Rename',
-					fn: () => {
-						renaming = true;
+	let actions: MenuItem[] = $derived(
+		can_remove
+			? [
+					{
+						icon: 'rename',
+						label: 'Rename',
+						fn: () => {
+							renaming = true;
+						}
+					},
+					{
+						icon: 'delete',
+						label: 'Delete',
+						fn: () => {
+							remove(file);
+						}
 					}
-				},
-				{
-					icon: 'delete',
-					label: 'Delete',
-					fn: () => {
-						remove(file);
-					}
-				}
-			]
-		: [];
+				]
+			: []
+	);
 </script>
 
 <Item
@@ -43,16 +46,16 @@
 	{renaming}
 	basename={file.basename}
 	icon={file_icon}
-	selected={file.name === $selected_name}
+	selected={file.name === workspace.selected_name}
 	{actions}
-	on:click={() => select(file.name)}
-	on:edit={() => {
+	onclick={() => select(file.name)}
+	onedit={() => {
 		renaming = true;
 	}}
-	on:rename={(e) => {
-		rename(file, e.detail.basename);
+	onrename={(basename) => {
+		rename(file, basename);
 	}}
-	on:cancel={() => {
+	oncancel={() => {
 		renaming = false;
 	}}
 />
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte
index 1cd9649978..c5e5f3de2a 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte
@@ -1,26 +1,28 @@
-<script>
+<script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 	import { writable } from 'svelte/store';
 	import Folder from './Folder.svelte';
 	import * as context from './context.js';
 	import Modal from '$lib/components/Modal.svelte';
-	import { files, solution, reset_files, selected_name } from '../state.svelte';
+	import { solution, workspace } from '../state.svelte';
 	import { create_directories } from '../utils';
 	import { afterNavigate } from '$app/navigation';
+	import type { Exercise, Stub } from '$lib/tutorial';
 
-	/** @type {import('$lib/tutorial').Exercise} */
-	export let exercise;
+	interface Props {
+		exercise: Exercise;
+		mobile?: boolean;
+	}
 
-	export let mobile = false;
+	let { exercise, mobile = false }: Props = $props();
 
 	const dispatch = createEventDispatcher();
 
 	const hidden = new Set(['__client.js', 'node_modules', '__delete']);
 
-	let modal_text = '';
+	let modal_text = $state('');
 
-	/** @type {import('svelte/store').Writable<Record<string, boolean>>}*/
-	const collapsed = writable({});
+	const collapsed = writable({} as Record<string, boolean>);
 
 	afterNavigate(() => {
 		collapsed.set({});
@@ -44,21 +46,24 @@
 				return;
 			}
 
-			const existing = $files.find((file) => file.name === name);
+			const existing = workspace.files.find((file) => file.name === name);
 			if (existing) {
 				modal_text = `A ${existing.type} already exists with this name`;
 				return;
 			}
 
-			const basename = /** @type {string} */ (name.split('/').pop());
+			const basename = name.split('/').pop()!;
 
-			/** @type {import('$lib/tutorial').Stub} */
-			const file =
+			const file: Stub =
 				type === 'file'
 					? { type, name, basename, text: true, contents: '' }
 					: { type, name, basename };
 
-			reset_files([...$files, ...create_directories(name, $files), file]);
+			workspace.reset_files([
+				...workspace.files,
+				...create_directories(name, workspace.files),
+				file
+			]);
 
 			if (type === 'file') {
 				dispatch('select', { name });
@@ -68,7 +73,7 @@
 		rename: async (to_rename, new_name) => {
 			const new_full_name = to_rename.name.slice(0, -to_rename.basename.length) + new_name;
 
-			if ($files.some((f) => f.name === new_full_name)) {
+			if (workspace.files.some((f) => f.name === new_full_name)) {
 				modal_text = `A file or folder named ${new_full_name} already exists`;
 				return;
 			}
@@ -88,19 +93,22 @@
 			}
 
 			if (to_rename.type === 'directory') {
-				for (const file of $files) {
+				for (const file of workspace.files) {
 					if (file.name.startsWith(to_rename.name + '/')) {
 						file.name = new_full_name + file.name.slice(to_rename.name.length);
 					}
 				}
 			}
 
-			const was_selected = $selected_name === to_rename.name;
+			const was_selected = workspace.selected_name === to_rename.name;
 
-			to_rename.basename = /** @type {string} */ (new_full_name.split('/').pop());
+			to_rename.basename = new_full_name.split('/').pop()!;
 			to_rename.name = new_full_name;
 
-			reset_files([...$files, ...create_directories(new_full_name, $files)]);
+			workspace.reset_files([
+				...workspace.files,
+				...create_directories(new_full_name, workspace.files)
+			]);
 
 			if (was_selected) {
 				dispatch('select', { name: new_full_name });
@@ -117,8 +125,8 @@
 
 			dispatch('select', { name: null });
 
-			reset_files(
-				$files.filter((f) => {
+			workspace.reset_files(
+				workspace.files.filter((f) => {
 					if (f === file) return false;
 					if (f.name.startsWith(file.name + '/')) return false;
 					return true;
@@ -131,8 +139,7 @@
 		}
 	});
 
-	/** @param {import('$lib/tutorial').Stub} file */
-	function is_deleted(file) {
+	function is_deleted(file: Stub) {
 		if (file.type === 'directory') return `${file.name}/__delete` in exercise.a;
 		if (file.text) return file.contents.startsWith('__delete');
 
@@ -140,15 +147,15 @@
 	}
 </script>
 
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <ul
 	class="filetree"
 	class:mobile
-	on:keydown={(e) => {
+	onkeydown={(e) => {
 		if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
 			e.preventDefault();
 			const lis = Array.from(e.currentTarget.querySelectorAll('li'));
-			const focused = lis.findIndex((li) => li.contains(/** @type {HTMLElement} */ (e.target)));
+			const focused = lis.findIndex((li) => li.contains( (e.target as HTMLElement)));
 
 			const d = e.key === 'ArrowUp' ? -1 : +1;
 
@@ -164,7 +171,7 @@
 			name: '',
 			basename: exercise.scope.name
 		}}
-		contents={$files.filter((file) => !hidden.has(file.basename) && !is_deleted(file))}
+		contents={workspace.files.filter((file) => !hidden.has(file.basename) && !is_deleted(file))}
 	/>
 </ul>
 
@@ -173,7 +180,7 @@
 		<div class="modal-contents">
 			<h2>This action is not allowed</h2>
 			<p>{modal_text}</p>
-			<button on:click={() => (modal_text = '')}>OK</button>
+			<button onclick={() => (modal_text = '')}>OK</button>
 		</div>
 	</Modal>
 {/if}
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Folder.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Folder.svelte
index 70e6b46916..279a1867e2 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Folder.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Folder.svelte
@@ -1,54 +1,52 @@
-<script>
+<script lang="ts">
+	import Folder from './Folder.svelte';
 	import File from './File.svelte';
 	import * as context from './context.js';
 	import { get_depth } from '$lib/utils/path.js';
 	import Item from './Item.svelte';
 	import folder_closed from '$lib/icons/folder.svg';
 	import folder_open from '$lib/icons/folder-open.svg';
-	import { files, solution, creating } from '../state.svelte';
-
-	/** @type {import('$lib/tutorial').DirectoryStub} */
-	export let directory;
-
-	/** @type {string} */
-	export let prefix;
-
-	/** @type {number} */
-	export let depth;
+	import { solution, workspace } from '../state.svelte';
+	import type { DirectoryStub, FileStub, MenuItem, Stub } from '$lib/tutorial';
+
+	interface Props {
+		directory: DirectoryStub;
+		prefix: string;
+		depth: number;
+		contents: Stub[];
+	}
 
-	/** @type {Array<import('$lib/tutorial').Stub>} */
-	export let contents;
+	let { directory, prefix, depth, contents }: Props = $props();
 
-	let renaming = false;
+	let renaming = $state(false);
 
 	const { collapsed, rename, add, remove } = context.get();
 
-	$: segments = get_depth(prefix);
-
-	$: children = contents
-		.filter((file) => file.name.startsWith(prefix))
-		.sort((a, b) => (a.name < b.name ? -1 : 1));
+	let segments = $derived(get_depth(prefix));
 
-	$: child_directories = children.filter(
-		(child) => get_depth(child.name) === segments && child.type === 'directory'
+	let children = $derived(
+		contents
+			.filter((file) => file.name.startsWith(prefix))
+			.sort((a, b) => (a.name < b.name ? -1 : 1))
 	);
 
-	// prettier-ignore
-	$: child_files = (
-		/** @type {import('$lib/tutorial').FileStub[]} */ (
-			children.filter((child) => get_depth(child.name) === segments && child.type === 'file')
-		)
+	let child_directories = $derived(
+		children.filter((child) => get_depth(child.name) === segments && child.type === 'directory')
 	);
 
-	const can_create = { file: false, directory: false };
+	let child_files = $derived(
+		children.filter((child) => get_depth(child.name) === segments && child.type === 'file')
+	) as FileStub[];
 
-	$: {
-		can_create.file = false;
-		can_create.directory = false;
+	const can_create = $derived.by(() => {
+		const result = {
+			file: false,
+			directory: false
+		};
 
 		const child_prefixes = [];
 
-		for (const file of $files) {
+		for (const file of workspace.files) {
 			if (
 				file.type === 'directory' &&
 				file.name.startsWith(prefix) &&
@@ -61,40 +59,41 @@
 		for (const file of Object.values($solution)) {
 			if (!file.name.startsWith(prefix)) continue;
 
-			// if already exists in $files, bail
-			if ($files.find((f) => f.name === file.name)) continue;
+			// if already exists in workspace.files, bail
+			if (workspace.files.find((f) => f.name === file.name)) continue;
 
 			// if intermediate directory exists, bail
 			if (child_prefixes.some((prefix) => file.name.startsWith(prefix))) continue;
 
-			can_create[file.type] = true;
+			result[file.type] = true;
 		}
-	}
+
+		return result;
+	});
 
 	// fake root directory has no name
-	$: can_remove = directory.name ? !$solution[directory.name] : false;
+	let can_remove = $derived(directory.name ? !$solution[directory.name] : false);
 
-	// prettier-ignore
-	$: actions = (
-		/** @type {import('$lib/tutorial').MenuItem[]} */ ([
+	let actions = $derived(
+		[
 			can_create.file && {
 				icon: 'file-new',
 				label: 'New file',
 				fn: () => {
-					creating.set({
+					workspace.creating = {
 						parent: directory.name,
 						type: 'file'
-					});
+					};
 				}
 			},
 			can_create.directory && {
 				icon: 'folder-new',
 				label: 'New folder',
 				fn: () => {
-					creating.set({
+					workspace.creating = {
 						parent: directory.name,
 						type: 'directory'
-					});
+					};
 				}
 			},
 			can_remove && {
@@ -111,8 +110,8 @@
 					remove(directory);
 				}
 			}
-		].filter(Boolean))
-	);
+		].filter(Boolean)
+	) as MenuItem[];
 </script>
 
 <Item
@@ -122,19 +121,19 @@
 	can_rename={can_remove}
 	{renaming}
 	{actions}
-	on:click={() => {
+	onclick={() => {
 		$collapsed[directory.name] = !$collapsed[directory.name];
 	}}
-	on:edit={() => {
+	onedit={() => {
 		renaming = true;
 	}}
-	on:rename={(e) => {
-		rename(directory, e.detail.basename);
+	onrename={(basename) => {
+		rename(directory, basename);
 	}}
-	on:cancel={() => {
+	oncancel={() => {
 		renaming = false;
 	}}
-	on:keydown={(e) => {
+	onkeydown={(e) => {
 		if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
 			$collapsed[directory.name] = e.key === 'ArrowLeft';
 		}
@@ -142,32 +141,37 @@
 />
 
 {#if !$collapsed[directory.name]}
-	{#if $creating?.parent === directory.name && $creating.type === 'directory'}
+	{#if workspace.creating?.parent === directory.name && workspace.creating.type === 'directory'}
 		<Item
 			depth={depth + 1}
 			renaming
-			on:rename={(e) => {
-				add(prefix + e.detail.basename, 'directory');
+			onrename={(basename) => {
+				add(prefix + basename, 'directory');
 			}}
-			on:cancel={() => {
-				creating.set(null);
+			oncancel={() => {
+				workspace.creating = null;
 			}}
 		/>
 	{/if}
 
 	{#each child_directories as directory}
-		<svelte:self {directory} prefix={directory.name + '/'} depth={depth + 1} contents={children} />
+		<Folder
+			directory={directory as DirectoryStub}
+			prefix={directory.name + '/'}
+			depth={depth + 1}
+			contents={children}
+		/>
 	{/each}
 
-	{#if $creating?.parent === directory.name && $creating.type === 'file'}
+	{#if workspace.creating?.parent === directory.name && workspace.creating.type === 'file'}
 		<Item
 			depth={depth + 1}
 			renaming
-			on:rename={(e) => {
-				add(prefix + e.detail.basename, 'file');
+			onrename={(basename) => {
+				add(prefix + basename, 'file');
 			}}
-			on:cancel={() => {
-				creating.set(null);
+			oncancel={() => {
+				workspace.creating = null;
 			}}
 		/>
 	{/if}
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
index 09e0d75dd7..b916b7e94a 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
@@ -1,31 +1,44 @@
-<script>
-	import { createEventDispatcher, tick } from 'svelte';
+<script lang="ts">
+	import { tick } from 'svelte';
 	import { open } from './ContextMenu.svelte';
-
-	export let basename = '';
-	export let icon = '';
-	export let depth = 0;
-
-	export let selected = false;
-
-	/** @type {boolean} */
-	export let can_rename = false;
-
-	/** @type {boolean} */
-	export let renaming;
-
-	/** @type {import('$lib/tutorial').MenuItem[]} */
-	export let actions = [];
-
-	const dispatch = createEventDispatcher();
-
-	let cancelling = false;
-
-	/** @param {Event} e */
-	function commit(e) {
-		const input = /** @type {HTMLInputElement} */ (e.target);
+	import type { MenuItem } from '$lib/tutorial';
+
+	interface Props {
+		basename?: string;
+		icon?: string;
+		depth?: number;
+		selected?: boolean;
+		can_rename?: boolean;
+		renaming: boolean;
+		actions?: MenuItem[];
+		onclick?: (e: MouseEvent) => void;
+		onkeydown?: (e: KeyboardEvent) => void;
+		onrename?: (basename: string) => void;
+		oncancel?: () => void;
+		onedit?: () => void;
+	}
+
+	let {
+		basename = '',
+		icon = '',
+		depth = 0,
+		selected = false,
+		can_rename = false,
+		renaming,
+		actions = [],
+		onclick,
+		onkeydown,
+		onrename,
+		oncancel,
+		onedit
+	}: Props = $props();
+
+	let cancelling = $state(false);
+
+	function commit(e: Event) {
+		const input = e.target as HTMLInputElement;
 		if (input.value && input.value !== basename) {
-			dispatch('rename', { basename: input.value });
+			onrename?.(input.value);
 		}
 
 		cancel();
@@ -33,33 +46,33 @@
 
 	async function cancel() {
 		cancelling = true;
-		dispatch('cancel');
+		oncancel?.();
 		await tick();
 		cancelling = false;
 	}
 </script>
 
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <li
 	aria-current={selected ? 'true' : undefined}
 	style:--depth={depth}
 	style:--icon="url(&quot;{icon}&quot;)"
-	on:keydown
+	{onkeydown}
 >
 	{#if renaming}
-		<!-- svelte-ignore a11y-autofocus -->
+		<!-- svelte-ignore a11y_autofocus -->
 		<input
 			type="text"
 			autofocus
 			autocomplete="off"
 			spellcheck="false"
 			value={basename}
-			on:blur={(e) => {
+			onblur={(e) => {
 				if (!cancelling) {
 					commit(e);
 				}
 			}}
-			on:keyup={(e) => {
+			onkeyup={(e) => {
 				if (e.key === 'Enter') {
 					commit(e);
 				}
@@ -72,13 +85,14 @@
 	{:else}
 		<button
 			class="basename"
-			on:click
-			on:dblclick={() => {
+			{onclick}
+			ondblclick={() => {
 				if (can_rename) {
-					dispatch('edit');
+					onedit?.();
 				}
 			}}
-			on:contextmenu|preventDefault={(e) => {
+			oncontextmenu={(e) => {
+				e.preventDefault();
 				open(e.clientX, e.clientY, actions);
 			}}
 		>
@@ -88,8 +102,7 @@
 		{#if actions.length > 0}
 			<div class="actions">
 				{#each actions as action}
-					<button aria-label={action.label} class="icon {action.icon}" on:click={action.fn}
-					></button>
+					<button aria-label={action.label} class="icon {action.icon}" onclick={action.fn}></button>
 				{/each}
 			</div>
 		{/if}
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/state.svelte.ts b/apps/svelte.dev/src/routes/tutorial/[...slug]/state.svelte.ts
index c687eb45ad..8eb461967b 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/state.svelte.ts
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/state.svelte.ts
@@ -1,42 +1,46 @@
-import { derived, writable, type Writable } from 'svelte/store';
+import { writable } from 'svelte/store';
 import * as adapter from './adapter.svelte';
 import type { FileStub, Stub } from '$lib/tutorial';
 
-// TODO convert to state
+class Workspace {
+	files = $state.raw<Stub[]>([]);
+	creating = $state.raw<{ parent: string; type: 'file' | 'directory' } | null>(null);
+	selected_name = $state<string | null>(null);
 
-export const files = writable([] as Stub[]);
+	get selected_file() {
+		for (const file of this.files) {
+			if (file.name === this.selected_name) return file as FileStub;
+		}
 
-export const solution = writable({} as Record<string, Stub>);
-
-export const creating: Writable<{ parent: string; type: 'file' | 'directory' } | null> =
-	writable(null);
-
-export const selected_name: Writable<string | null> = writable(null);
+		return null;
+	}
 
-export const selected_file = derived([files, selected_name], ([$files, $selected_name]) => {
-	return ($files.find((stub) => stub.name === $selected_name) as FileStub) ?? null;
-});
-
-export function update_file(file: FileStub) {
-	files.update(($files) => {
-		return $files.map((old) => {
+	update_file(file: FileStub) {
+		this.files = this.files.map((old) => {
 			if (old.name === file.name) {
 				return file;
 			}
 			return old;
 		});
-	});
 
-	adapter.update(file);
-}
+		// TODO decouple
+		adapter.update(file);
+	}
 
-export function reset_files(new_files: Stub[]) {
-	// if the selected file no longer exists, clear it
-	selected_name.update(($selected_name) => {
-		const file = new_files.find((file) => file.name === $selected_name);
-		return file?.name ?? null;
-	});
+	reset_files(new_files: Stub[]) {
+		// if the selected file no longer exists, clear it
+		if (!new_files.find((file) => file.name === this.selected_name)) {
+			this.selected_name = null;
+		}
 
-	files.set(new_files);
-	adapter.reset(new_files);
+		this.files = new_files;
+
+		// TODO decouple
+		adapter.reset(new_files);
+	}
 }
+
+export const workspace = new Workspace();
+
+// this is separate to the workspace
+export const solution = writable({} as Record<string, Stub>);