diff --git a/demo/.gitignore b/demo/.gitignore
index 8f6c617..79518f7 100644
--- a/demo/.gitignore
+++ b/demo/.gitignore
@@ -1,12 +1,21 @@
-.DS_Store
 node_modules
-/build
+
+# Output
+.output
+.vercel
 /.svelte-kit
-/package
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
 .env
 .env.*
 !.env.example
-.vercel
-.output
+!.env.test
+
+# Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
diff --git a/demo/README.md b/demo/README.md
index 435a567..df05227 100644
--- a/demo/README.md
+++ b/demo/README.md
@@ -9,10 +9,10 @@ If you're seeing this, you've probably already done this step. Congrats!
 
 ```bash
 # create a new project in the current directory
-npm create svelte@latest
+npx sv create
 
 # create a new project in my-app
-npm create svelte@latest my-app
+npx sv create my-app
 ```
 
 ## Developing
@@ -38,4 +38,4 @@ npm run build
 You can preview the production build with `npm run preview`.
 
 > To deploy your app, you may need to install an
-> [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+> [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
diff --git a/demo/tsconfig.json b/demo/jsconfig.json
similarity index 77%
rename from demo/tsconfig.json
rename to demo/jsconfig.json
index 34aadc0..f4d0a0e 100644
--- a/demo/tsconfig.json
+++ b/demo/jsconfig.json
@@ -11,7 +11,8 @@
     "strict": true,
     "moduleResolution": "bundler"
   }
-  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+  // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+  // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
   //
   // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
   // from the referenced tsconfig.json - TypeScript does not merge them in
diff --git a/demo/package.json b/demo/package.json
index 436a43a..4266038 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -1,24 +1,26 @@
 {
   "name": "demo",
   "version": "0.0.1",
+  "type": "module",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
     "preview": "vite preview",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+    "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch"
   },
-  "dependencies": {
-    "@fontsource/fira-mono": "^5.0.8",
-    "@neoconfetti/svelte": "^2.2.1",
-    "@sveltejs/kit": "^2.0.6",
-    "@sveltejs/vite-plugin-svelte": "^3.0.1",
-    "svelte": "^4.2.8",
-    "svelte-check": "^3.6.2",
-    "sveltekit-adapter-deno": "^0.15.0",
-    "tslib": "^2.6.2",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.10"
+  "devDependencies": {
+    "@fontsource/fira-mono": "^5.0.0",
+    "@neoconfetti/svelte": "^2.0.0",
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.3"
   },
-  "type": "module"
+  "dependencies": {
+    "sveltekit-adapter-deno": "^0.15.0"
+  }
 }
diff --git a/demo/src/routes/styles.css b/demo/src/app.css
similarity index 100%
rename from demo/src/routes/styles.css
rename to demo/src/app.css
diff --git a/demo/src/app.d.ts b/demo/src/app.d.ts
index ede601a..63ae0eb 100644
--- a/demo/src/app.d.ts
+++ b/demo/src/app.d.ts
@@ -1,4 +1,4 @@
-// See https://kit.svelte.dev/docs/types#app
+// See https://svelte.dev/docs/kit/types#app
 // for information about these interfaces
 declare global {
   namespace App {
diff --git a/demo/src/routes/+layout.svelte b/demo/src/routes/+layout.svelte
index 9c7445f..3f4c2ed 100644
--- a/demo/src/routes/+layout.svelte
+++ b/demo/src/routes/+layout.svelte
@@ -1,17 +1,22 @@
 <script>
 	import Header from './Header.svelte';
-	import './styles.css';
+	import '../app.css';
+
+	/** @type {{children: import('svelte').Snippet}} */
+	let { children } = $props();
 </script>
 
 <div class="app">
 	<Header />
 
 	<main>
-		<slot />
+		{@render children()}
 	</main>
 
 	<footer>
-		<p>visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to learn SvelteKit</p>
+		<p>
+			visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to learn about SvelteKit
+		</p>
 	</footer>
 </div>
 
diff --git a/demo/src/routes/+page.ts b/demo/src/routes/+page.js
similarity index 100%
rename from demo/src/routes/+page.ts
rename to demo/src/routes/+page.js
diff --git a/demo/src/routes/+page.svelte b/demo/src/routes/+page.svelte
index 97201ef..8834cb5 100644
--- a/demo/src/routes/+page.svelte
+++ b/demo/src/routes/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import Counter from './Counter.svelte';
 	import welcome from '$lib/images/svelte-welcome.webp';
-	import welcome_fallback from '$lib/images/svelte-welcome.png';
+	import welcomeFallback from '$lib/images/svelte-welcome.png';
 </script>
 
 <svelte:head>
@@ -14,7 +14,7 @@
 		<span class="welcome">
 			<picture>
 				<source srcset={welcome} type="image/webp" />
-				<img src={welcome_fallback} alt="Welcome" />
+				<img src={welcomeFallback} alt="Welcome" />
 			</picture>
 		</span>
 
diff --git a/demo/src/routes/Counter.svelte b/demo/src/routes/Counter.svelte
index 96ef556..40a347d 100644
--- a/demo/src/routes/Counter.svelte
+++ b/demo/src/routes/Counter.svelte
@@ -1,20 +1,28 @@
-<script lang="ts">
+<script>
 	import { spring } from 'svelte/motion';
 
-	let count = 0;
+	let count = $state(0);
 
-	const displayed_count = spring();
-	$: displayed_count.set(count);
-	$: offset = modulo($displayed_count, 1);
+	// svelte-ignore state_referenced_locally
+	const displayedCount = spring(count);
 
-	function modulo(n: number, m: number) {
+	$effect(() => {
+		displayedCount.set(count);
+	});
+	let offset = $derived(modulo($displayedCount, 1));
+
+	/**
+	 * @param {number} n
+	 * @param {number} m
+	 */
+	function modulo(n, m) {
 		// handle negative numbers
 		return ((n % m) + m) % m;
 	}
 </script>
 
 <div class="counter">
-	<button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
+	<button onclick={() => (count -= 1)} aria-label="Decrease the counter by one">
 		<svg aria-hidden="true" viewBox="0 0 1 1">
 			<path d="M0,0.5 L1,0.5" />
 		</svg>
@@ -22,12 +30,12 @@
 
 	<div class="counter-viewport">
 		<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
-			<strong class="hidden" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
-			<strong>{Math.floor($displayed_count)}</strong>
+			<strong class="hidden" aria-hidden="true">{Math.floor($displayedCount + 1)}</strong>
+			<strong>{Math.floor($displayedCount)}</strong>
 		</div>
 	</div>
 
-	<button on:click={() => (count += 1)} aria-label="Increase the counter by one">
+	<button onclick={() => (count += 1)} aria-label="Increase the counter by one">
 		<svg aria-hidden="true" viewBox="0 0 1 1">
 			<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
 		</svg>
diff --git a/demo/src/routes/Header.svelte b/demo/src/routes/Header.svelte
index 368b721..b4d2283 100644
--- a/demo/src/routes/Header.svelte
+++ b/demo/src/routes/Header.svelte
@@ -6,7 +6,7 @@
 
 <header>
 	<div class="corner">
-		<a href="https://kit.svelte.dev">
+		<a href="https://svelte.dev/docs/kit">
 			<img src={logo} alt="SvelteKit" />
 		</a>
 	</div>
diff --git a/demo/src/routes/about/+page.ts b/demo/src/routes/about/+page.js
similarity index 100%
rename from demo/src/routes/about/+page.ts
rename to demo/src/routes/about/+page.js
diff --git a/demo/src/routes/about/+page.svelte b/demo/src/routes/about/+page.svelte
index 7f7946d..2345261 100644
--- a/demo/src/routes/about/+page.svelte
+++ b/demo/src/routes/about/+page.svelte
@@ -7,11 +7,11 @@
 	<h1>About this app</h1>
 
 	<p>
-		This is a <a href="https://kit.svelte.dev">SvelteKit</a> app. You can make your own by typing the
-		following into your command line and following the prompts:
+		This is a <a href="https://svelte.dev/docs/kit">SvelteKit</a> app. You can make your own by typing
+		the following into your command line and following the prompts:
 	</p>
 
-	<pre>npm create svelte@latest</pre>
+	<pre>npx sv create</pre>
 
 	<p>
 		The page you're looking at is purely static HTML, with no client-side interactivity needed.
diff --git a/demo/src/routes/sverdle/+page.server.ts b/demo/src/routes/sverdle/+page.server.js
similarity index 80%
rename from demo/src/routes/sverdle/+page.server.ts
rename to demo/src/routes/sverdle/+page.server.js
index c44d446..91938eb 100644
--- a/demo/src/routes/sverdle/+page.server.ts
+++ b/demo/src/routes/sverdle/+page.server.js
@@ -1,8 +1,8 @@
 import { fail } from "@sveltejs/kit";
 import { Game } from "./game";
-import type { Actions, PageServerLoad } from "./$types";
 
-export const load = (({ cookies }) => {
+/** @satisfies {import('./$types').PageServerLoad} */
+export const load = ({ cookies }) => {
   const game = new Game(cookies.get("sverdle"));
 
   return {
@@ -22,8 +22,9 @@ export const load = (({ cookies }) => {
      */
     answer: game.answers.length >= 6 ? game.answer : null,
   };
-}) satisfies PageServerLoad;
+};
 
+/** @satisfies {import('./$types').Actions} */
 export const actions = {
   /**
    * Modify game state in reaction to a keypress. If client-side JavaScript
@@ -43,7 +44,7 @@ export const actions = {
       game.guesses[i] += key;
     }
 
-    cookies.set("sverdle", game.toString(), { path: "" });
+    cookies.set("sverdle", game.toString(), { path: "/" });
   },
 
   /**
@@ -54,16 +55,16 @@ export const actions = {
     const game = new Game(cookies.get("sverdle"));
 
     const data = await request.formData();
-    const guess = data.getAll("guess") as string[];
+    const guess = /** @type {string[]} */ (data.getAll("guess"));
 
     if (!game.enter(guess)) {
       return fail(400, { badGuess: true });
     }
 
-    cookies.set("sverdle", game.toString(), { path: "" });
+    cookies.set("sverdle", game.toString(), { path: "/" });
   },
 
   restart: async ({ cookies }) => {
-    cookies.delete("sverdle", { path: "" });
+    cookies.delete("sverdle", { path: "/" });
   },
-} satisfies Actions;
+};
diff --git a/demo/src/routes/sverdle/+page.svelte b/demo/src/routes/sverdle/+page.svelte
index 517abd8..1c38efe 100644
--- a/demo/src/routes/sverdle/+page.svelte
+++ b/demo/src/routes/sverdle/+page.svelte
@@ -1,47 +1,54 @@
-<script lang="ts">
-	import { confetti } from '@neoconfetti/svelte';
+<script>
 	import { enhance } from '$app/forms';
-	import type { PageData, ActionData } from './$types';
-	import { reduced_motion } from './reduced-motion';
+	import { confetti } from '@neoconfetti/svelte';
+
+	import { reducedMotion } from './reduced-motion';
 
-	export let data: PageData;
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('./$types').PageData} data
+	 * @property {import('./$types').ActionData} form
+	 */
 
-	export let form: ActionData;
+	/**
+	 * @type {Props}
+	 */
+	let { data, form = $bindable() } = $props();
 
 	/** Whether or not the user has won */
-	$: won = data.answers.at(-1) === 'xxxxx';
+	let won = $derived(data.answers.at(-1) === 'xxxxx');
 
 	/** The index of the current guess */
-	$: i = won ? -1 : data.answers.length;
+	let i = $derived(won ? -1 : data.answers.length);
 
 	/** The current guess */
-	$: currentGuess = data.guesses[i] || '';
+	// svelte-ignore state_referenced_locally
+	let currentGuess = $state(data.guesses[i] || '');
 
-	/** Whether the current guess can be submitted */
-	$: submittable = currentGuess.length === 5;
-
-	/**
-	 * A map of classnames for all letters that have been guessed,
-	 * used for styling the keyboard
-	 */
-	let classnames: Record<string, 'exact' | 'close' | 'missing'>;
-
-	/**
-	 * A map of descriptions for all letters that have been guessed,
-	 * used for adding text for assistive technology (e.g. screen readers)
-	 */
-	let description: Record<string, string>;
-
-	$: {
-		classnames = {};
-		description = {};
+	$effect(() => {
+		currentGuess = data.guesses[i] || '';
+	});
 
+	/** Whether the current guess can be submitted */
+	let submittable = $derived(currentGuess.length === 5);
+
+	const { classnames, description } = $derived.by(() => {
+		/**
+		 * A map of classnames for all letters that have been guessed,
+		 * used for styling the keyboard
+		 * @type {Record<string, 'exact' | 'close' | 'missing'>}
+		 */
+		let classnames = {};
+		/**
+		 * A map of descriptions for all letters that have been guessed,
+		 * used for adding text for assistive technology (e.g. screen readers)
+		 * @type {Record<string, string>}
+		 */
+		let description = {};
 		data.answers.forEach((answer, i) => {
 			const guess = data.guesses[i];
-
 			for (let i = 0; i < 5; i += 1) {
 				const letter = guess[i];
-
 				if (answer[i] === 'x') {
 					classnames[letter] = 'exact';
 					description[letter] = 'correct';
@@ -51,16 +58,17 @@
 				}
 			}
 		});
-	}
+		return { classnames, description };
+	});
 
 	/**
 	 * Modify the game state without making a trip to the server,
 	 * if client-side JavaScript is enabled
+	 * @param {MouseEvent} event
 	 */
-	function update(event: MouseEvent) {
-		const key = (event.target as HTMLButtonElement).getAttribute(
-			'data-key'
-		);
+	function update(event) {
+		event.preventDefault();
+		const key = /** @type {HTMLButtonElement} */ (event.target).getAttribute('data-key');
 
 		if (key === 'backspace') {
 			currentGuess = currentGuess.slice(0, -1);
@@ -73,8 +81,9 @@
 	/**
 	 * Trigger form logic in response to a keydown event, so that
 	 * desktop users can use the keyboard to play the game
+	 * @param {KeyboardEvent} event
 	 */
-	function keydown(event: KeyboardEvent) {
+	function keydown(event) {
 		if (event.metaKey) return;
 
 		if (event.key === 'Enter' && !submittable) return;
@@ -85,7 +94,7 @@
 	}
 </script>
 
-<svelte:window on:keydown={keydown} />
+<svelte:window onkeydown={keydown} />
 
 <svelte:head>
 	<title>Sverdle</title>
@@ -95,7 +104,7 @@
 <h1 class="visually-hidden">Sverdle</h1>
 
 <form
-	method="POST"
+	method="post"
 	action="?/enter"
 	use:enhance={() => {
 		// prevent default callback from resetting the form
@@ -152,7 +161,7 @@
 				<button data-key="enter" class:selected={submittable} disabled={!submittable}>enter</button>
 
 				<button
-					on:click|preventDefault={update}
+					onclick={update}
 					data-key="backspace"
 					formaction="?/update"
 					name="key"
@@ -165,7 +174,7 @@
 					<div class="row">
 						{#each row as letter}
 							<button
-								on:click|preventDefault={update}
+								onclick={update}
 								data-key={letter}
 								class={classnames[letter]}
 								disabled={submittable}
@@ -188,13 +197,13 @@
 	<div
 		style="position: absolute; left: 50%; top: 30%"
 		use:confetti={{
-			particleCount: $reduced_motion ? 0 : undefined,
+			particleCount: $reducedMotion ? 0 : undefined,
 			force: 0.7,
 			stageWidth: window.innerWidth,
 			stageHeight: window.innerHeight,
 			colors: ['#ff3e00', '#40b3ff', '#676778']
 		}}
-	/>
+	></div>
 {/if}
 
 <style>
diff --git a/demo/src/routes/sverdle/game.ts b/demo/src/routes/sverdle/game.js
similarity index 89%
rename from demo/src/routes/sverdle/game.ts
rename to demo/src/routes/sverdle/game.js
index 5723e2d..da4f9e8 100644
--- a/demo/src/routes/sverdle/game.ts
+++ b/demo/src/routes/sverdle/game.js
@@ -1,15 +1,11 @@
 import { allowed, words } from "./words.server";
 
 export class Game {
-  index: number;
-  guesses: string[];
-  answers: string[];
-  answer: string;
-
   /**
    * Create a game object from the player's cookie, or initialise a new game
+   * @param {string | undefined} serialized
    */
-  constructor(serialized: string | undefined = undefined) {
+  constructor(serialized = undefined) {
     if (serialized) {
       const [index, guesses, answers] = serialized.split("-");
 
@@ -19,7 +15,7 @@ export class Game {
     } else {
       this.index = Math.floor(Math.random() * words.length);
       this.guesses = ["", "", "", "", "", ""];
-      this.answers = [];
+      this.answers = /** @type {string[]} */ ([]);
     }
 
     this.answer = words[this.index];
@@ -28,8 +24,9 @@ export class Game {
   /**
    * Update game state based on a guess of a five-letter word. Returns
    * true if the guess was valid, false otherwise
+   * @param {string[]} letters
    */
-  enter(letters: string[]) {
+  enter(letters) {
     const word = letters.join("");
     const valid = allowed.has(word);
 
diff --git a/demo/src/routes/sverdle/how-to-play/+page.ts b/demo/src/routes/sverdle/how-to-play/+page.js
similarity index 100%
rename from demo/src/routes/sverdle/how-to-play/+page.ts
rename to demo/src/routes/sverdle/how-to-play/+page.js
diff --git a/demo/src/routes/sverdle/reduced-motion.js b/demo/src/routes/sverdle/reduced-motion.js
new file mode 100644
index 0000000..9e7c54d
--- /dev/null
+++ b/demo/src/routes/sverdle/reduced-motion.js
@@ -0,0 +1,26 @@
+import { readable } from "svelte/store";
+import { browser } from "$app/environment";
+
+const reducedMotionQuery = "(prefers-reduced-motion: reduce)";
+
+const getInitialMotionPreference = () => {
+  if (!browser) return false;
+  return window.matchMedia(reducedMotionQuery).matches;
+};
+
+export const reducedMotion = readable(getInitialMotionPreference(), (set) => {
+  if (browser) {
+    /**
+     * @param {MediaQueryListEvent} event
+     */
+    const setReducedMotion = (event) => {
+      set(event.matches);
+    };
+    const mediaQueryList = window.matchMedia(reducedMotionQuery);
+    mediaQueryList.addEventListener("change", setReducedMotion);
+
+    return () => {
+      mediaQueryList.removeEventListener("change", setReducedMotion);
+    };
+  }
+});
diff --git a/demo/src/routes/sverdle/reduced-motion.ts b/demo/src/routes/sverdle/reduced-motion.ts
deleted file mode 100644
index f7d91d7..0000000
--- a/demo/src/routes/sverdle/reduced-motion.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { readable } from "svelte/store";
-import { browser } from "$app/environment";
-
-const reduced_motion_query = "(prefers-reduced-motion: reduce)";
-
-const get_initial_motion_preference = () => {
-  if (!browser) return false;
-  return window.matchMedia(reduced_motion_query).matches;
-};
-
-export const reduced_motion = readable(
-  get_initial_motion_preference(),
-  (set) => {
-    if (browser) {
-      const set_reduced_motion = (event: MediaQueryListEvent) => {
-        set(event.matches);
-      };
-      const media_query_list = window.matchMedia(reduced_motion_query);
-      media_query_list.addEventListener("change", set_reduced_motion);
-
-      return () => {
-        media_query_list.removeEventListener("change", set_reduced_motion);
-      };
-    }
-  },
-);
diff --git a/demo/src/routes/sverdle/words.server.ts b/demo/src/routes/sverdle/words.server.js
similarity index 100%
rename from demo/src/routes/sverdle/words.server.ts
rename to demo/src/routes/sverdle/words.server.js
diff --git a/demo/svelte.config.js b/demo/svelte.config.js
index ad9f33e..ea86f7f 100644
--- a/demo/svelte.config.js
+++ b/demo/svelte.config.js
@@ -1,10 +1,11 @@
 import adapter from "sveltekit-adapter-deno";
-import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-  preprocess: vitePreprocess(),
   kit: {
+    // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
+    // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+    // See https://svelte.dev/docs/kit/adapters for more information about adapters.
     adapter: adapter({
       buildOptions: {
         banner: {
diff --git a/demo/vite.config.ts b/demo/vite.config.js
similarity index 100%
rename from demo/vite.config.ts
rename to demo/vite.config.js