make context menu work properly

Author: Rich-Harris

apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte

@@ -1,41 +1,33 @@
 <!-- @component
      A context menu for the tutorial's file tree
 -->
-<script module>
-	import { writable } from 'svelte/store';
+<script module lang="ts">
+	import type { MenuItem } from '$lib/tutorial';
 
-	/**
-	 * @type {import("svelte/store").Writable<{x: number; y: number; items: import('$lib/tutorial').MenuItem[]} | null>}
-	 */
-	let menu_items = writable(null);
+	let menu_items: { x: number; y: number; items: MenuItem[] } | null = $state(null);
 
-	/**
-	 * @param {number} x
-	 * @param {number} y
-	 * @param {import('$lib/tutorial').MenuItem[]} items
-	 */
-	export function open(x, y, items) {
+	export function open(x: number, y: number, items: MenuItem[]) {
 		if (items.length > 0) {
-			menu_items.set({ x, y, items });
+			menu_items = { x, y, items };
 		}
 	}
 </script>
 
-{#if $menu_items}
-	<nav style="position: fixed; z-index: 5; top:{$menu_items.y}px; left:{$menu_items.x}px">
+{#if menu_items}
+	<nav style="position: fixed; z-index: 5; top:{menu_items.y}px; left:{menu_items.x}px">
 		<div class="context-menu">
 			<ul>
-				{#each $menu_items.items as item}
+				{#each menu_items.items as item}
 					<li>
-						<button on:click={item.fn}>{item.label}</button>
+						<button onclick={item.fn}>{item.label}</button>
 					</li>
 				{/each}
 			</ul>
 		</div>
 	</nav>
 {/if}
 
-<svelte:window on:click={() => menu_items.set(null)} />
+<svelte:window onclick={() => (menu_items = null)} />
 
 <style>
 	.context-menu {

apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte

@@ -2,6 +2,7 @@
 	import { tick } from 'svelte';
 	import { open } from './ContextMenu.svelte';
 	import type { MenuItem } from '$lib/tutorial';
+	import { forcefocus } from '@sveltejs/site-kit/actions';
 
 	interface Props {
 		basename?: string;
@@ -63,7 +64,7 @@
 		<!-- svelte-ignore a11y_autofocus -->
 		<input
 			type="text"
-			autofocus
+			use:forcefocus
 			autocomplete="off"
 			spellcheck="false"
 			value={basename}
@@ -135,7 +136,7 @@
 	}
 
 	input {
-		background: var(--sk-bg-1);
+		background: var(--sk-bg-3);
 		margin: 0 0.5rem 0 calc(0.5rem + var(--inset));
 		border: 2px solid transparent;
 		padding: 0 0.5rem;