From 0f0d71241367d1bac3681022bfc841cc03051cec Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 13 Oct 2024 18:24:47 -0400
Subject: [PATCH 1/9] start adding tutorial nav

---
 .../src/lib/components/SecondaryNav.svelte    | 29 +++++++++++++++++++
 .../playground/[id]/AppControls.svelte        | 23 ++-------------
 .../routes/tutorial/[...slug]/+page.svelte    |  2 ++
 .../routes/tutorial/[...slug]/Controls.svelte | 13 +++++++++
 .../routes/tutorial/[...slug]/Sidebar.svelte  |  2 +-
 5 files changed, 48 insertions(+), 21 deletions(-)
 create mode 100644 apps/svelte.dev/src/lib/components/SecondaryNav.svelte
 create mode 100644 apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte

diff --git a/apps/svelte.dev/src/lib/components/SecondaryNav.svelte b/apps/svelte.dev/src/lib/components/SecondaryNav.svelte
new file mode 100644
index 0000000000..91c6e97da7
--- /dev/null
+++ b/apps/svelte.dev/src/lib/components/SecondaryNav.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { children }: { children: Snippet } = $props();
+</script>
+
+<div class="secondary-nav">
+	{@render children()}
+</div>
+
+<style>
+	.secondary-nav {
+		width: 100%;
+		height: var(--sk-secondary-nav-height);
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.6rem var(--sk-page-padding-side);
+		background-color: var(--sk-back-2);
+		color: var(--sk-text-1);
+		white-space: nowrap;
+		flex: 0;
+		gap: 1rem;
+
+		@media (min-width: 800px) {
+			padding-top: 1rem;
+		}
+	}
+</style>
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
index accb4f5714..eaa708c6bd 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -13,6 +13,7 @@
 	import { browser } from '$app/environment';
 	import SelectIcon from '$lib/components/SelectIcon.svelte';
 	import { untrack } from 'svelte';
+	import SecondaryNav from '$lib/components/SecondaryNav.svelte';
 
 	interface Props {
 		examples: Array<{ title: string; examples: any[] }>;
@@ -228,7 +229,7 @@ export default app;`
 
 <svelte:window on:keydown={handleKeydown} />
 
-<div class="app-controls">
+<SecondaryNav>
 	<SelectIcon
 		bind:this={select}
 		title="examples"
@@ -302,27 +303,9 @@ export default app;`
 			</button>
 		{/if}
 	</div>
-</div>
+</SecondaryNav>
 
 <style>
-	.app-controls {
-		width: 100%;
-		height: var(--sk-secondary-nav-height);
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 0.6rem var(--sk-page-padding-side);
-		background-color: var(--sk-back-2);
-		color: var(--sk-text-1);
-		white-space: nowrap;
-		flex: 0;
-		gap: 1rem;
-
-		@media (min-width: 800px) {
-			padding-top: 1rem;
-		}
-	}
-
 	.buttons {
 		display: flex;
 		align-items: center;
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
index c4895a7215..44d3dd607d 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
@@ -22,6 +22,7 @@
 	import { needs_webcontainers, text_files } from './shared';
 	import OutputRollup from './OutputRollup.svelte';
 	import { page } from '$app/stores';
+	import Controls from './Controls.svelte';
 
 	export let data;
 
@@ -241,6 +242,7 @@
 <ContextMenu />
 
 <div class="container" class:mobile>
+	<Controls />
 	<div class="top" class:offset={show_editor}>
 		<SplitPane id="main" type="horizontal" min="360px" max="50%" pos="33%">
 			<section slot="a" class="content">
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
new file mode 100644
index 0000000000..6653f2617b
--- /dev/null
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
@@ -0,0 +1,13 @@
+<script>
+	import SecondaryNav from '$lib/components/SecondaryNav.svelte';
+	import SelectIcon from '$lib/components/SelectIcon.svelte';
+</script>
+
+<SecondaryNav>
+	<SelectIcon>
+		<option>hello</option>
+	</SelectIcon>
+</SecondaryNav>
+
+<style>
+</style>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
index 5cd2c1f4b5..2ec52804b7 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
@@ -122,7 +122,7 @@
 		flex: 1 1 auto;
 		padding: 2.2rem 3rem;
 		border-right: 1px solid var(--sk-back-4);
-		background: var(--sk-back-3);
+		background: var(--sk-back-1);
 
 		:global {
 			pre {

From 46c27252beeec8cee981fcc06ba05e5e0ea8f8be Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 13 Oct 2024 19:34:55 -0400
Subject: [PATCH 2/9] move stuff

---
 .../routes/tutorial/[...slug]/+page.svelte    |  2 +-
 .../routes/tutorial/[...slug]/Controls.svelte | 80 ++++++++++++++++++-
 .../routes/tutorial/[...slug]/Sidebar.svelte  |  2 +-
 3 files changed, 79 insertions(+), 5 deletions(-)

diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
index 44d3dd607d..547cb4e77d 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
@@ -242,7 +242,7 @@
 <ContextMenu />
 
 <div class="container" class:mobile>
-	<Controls />
+	<Controls index={data.index} exercise={data.exercise} />
 	<div class="top" class:offset={show_editor}>
 		<SplitPane id="main" type="horizontal" min="360px" max="50%" pos="33%">
 			<section slot="a" class="content">
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
index 6653f2617b..503c96ff79 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
@@ -1,13 +1,87 @@
-<script>
+<script lang="ts">
+	import { goto } from '$app/navigation';
 	import SecondaryNav from '$lib/components/SecondaryNav.svelte';
 	import SelectIcon from '$lib/components/SelectIcon.svelte';
+	import type { Exercise, PartStub } from '$lib/tutorial';
+	import { Icon } from '@sveltejs/site-kit/components';
+
+	let { index, exercise }: { index: PartStub[]; exercise: Exercise } = $props();
+
+	$inspect({ index, exercise });
+
+	// TODO this really sucks, why is `exercise.slug` not the slug?
+	let actual_slug = $derived.by(() => {
+		const parts = exercise.slug.split('/');
+		return `${parts[1]}/${parts[3]}`;
+	});
 </script>
 
 <SecondaryNav>
-	<SelectIcon>
-		<option>hello</option>
+	<SelectIcon
+		value={actual_slug}
+		onchange={(e) => {
+			goto(`/tutorial/${e.currentTarget.value}`);
+		}}
+	>
+		{#each index as part}
+			<optgroup label={part.title}>
+				{#each part.chapters as chapter}
+					<option disabled>{chapter.title}</option>
+
+					{#each chapter.exercises as exercise}
+						<option value={exercise.slug}>{exercise.title}</option>
+					{/each}
+				{/each}
+			</optgroup>
+		{/each}
 	</SelectIcon>
+
+	<a
+		href={exercise.prev ? `/tutorial/${exercise.prev?.slug}` : undefined}
+		aria-label={exercise.prev && 'Previous exercise'}
+	>
+		<Icon name="arrow-left" size={18} />
+	</a>
+	<a
+		href={exercise.next ? `/tutorial/${exercise.next?.slug}` : undefined}
+		aria-label={exercise.next && 'Next exercise'}
+	>
+		<Icon name="arrow-right" size={18} />
+	</a>
+
+	<div class="breadcrumbs">
+		<span>{exercise.part.title}</span>
+		<span>{exercise.chapter.title}</span>
+		<span>{exercise.title}</span>
+	</div>
+
+	<button class="raised"> solve </button>
 </SecondaryNav>
 
 <style>
+	a {
+		color: inherit;
+
+		&:not([href]) {
+			opacity: 0.1;
+			cursor: default;
+		}
+	}
+
+	.breadcrumbs {
+		flex: 1;
+		font: var(--sk-font-ui-medium);
+
+		span:not(:last-child)::after {
+			content: ' / ';
+			color: var(--sk-text-4);
+			font: var(--sk-font-ui-small);
+		}
+	}
+
+	button {
+		height: 3.2rem;
+		padding: 0 1rem;
+		font: var(--sk-font-ui-small);
+	}
 </style>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
index 2ec52804b7..b4b53f220f 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
@@ -21,7 +21,7 @@
 	let show_modal = false;
 </script>
 
-<Menu {index} current={exercise} />
+<!-- <Menu {index} current={exercise} /> -->
 
 <section bind:this={sidebar}>
 	<div

From 465b8d08744026cfd7fecc94591206af7672e616 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 13 Oct 2024 19:49:53 -0400
Subject: [PATCH 3/9] move solve button

---
 .../routes/tutorial/[...slug]/+page.svelte    | 25 +++++++------------
 .../routes/tutorial/[...slug]/Controls.svelte | 19 +++++++++++---
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
index 547cb4e77d..7f60e4c10e 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
@@ -242,7 +242,15 @@
 <ContextMenu />
 
 <div class="container" class:mobile>
-	<Controls index={data.index} exercise={data.exercise} />
+	<Controls
+		index={data.index}
+		exercise={data.exercise}
+		{completed}
+		toggle={() => {
+			reset_files(Object.values(completed ? a : b));
+		}}
+	/>
+
 	<div class="top" class:offset={show_editor}>
 		<SplitPane id="main" type="horizontal" min="360px" max="50%" pos="33%">
 			<section slot="a" class="content">
@@ -282,21 +290,6 @@
 										}}
 									/>
 								{/if}
-
-								<button
-									class="solve"
-									class:completed
-									disabled={!data.exercise.has_solution}
-									on:click={() => {
-										reset_files(Object.values(completed ? a : b));
-									}}
-								>
-									{#if completed && data.exercise.has_solution}
-										reset
-									{:else}
-										solve <Icon name="arrow-right" />
-									{/if}
-								</button>
 							</section>
 
 							<section class="editor-container" slot="b">
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
index 503c96ff79..a58bc9931d 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
@@ -2,12 +2,17 @@
 	import { goto } from '$app/navigation';
 	import SecondaryNav from '$lib/components/SecondaryNav.svelte';
 	import SelectIcon from '$lib/components/SelectIcon.svelte';
-	import type { Exercise, PartStub } from '$lib/tutorial';
+	import type { Exercise, PartStub, Stub } from '$lib/tutorial';
 	import { Icon } from '@sveltejs/site-kit/components';
 
-	let { index, exercise }: { index: PartStub[]; exercise: Exercise } = $props();
+	interface Props {
+		index: PartStub[];
+		exercise: Exercise;
+		completed: boolean;
+		toggle: () => void;
+	}
 
-	$inspect({ index, exercise });
+	let { index, exercise, completed, toggle }: Props = $props();
 
 	// TODO this really sucks, why is `exercise.slug` not the slug?
 	let actual_slug = $derived.by(() => {
@@ -55,7 +60,13 @@
 		<span>{exercise.title}</span>
 	</div>
 
-	<button class="raised"> solve </button>
+	<button class="raised" class:completed disabled={!exercise.has_solution} onclick={toggle}>
+		{#if completed && exercise.has_solution}
+			reset
+		{:else}
+			solve
+		{/if}
+	</button>
 </SecondaryNav>
 
 <style>

From 2209780757bc24034c25b1babfbeee42e5c92a71 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 13 Oct 2024 20:38:01 -0400
Subject: [PATCH 4/9] fix

---
 .../src/routes/(authed)/playground/[id]/UserMenu.svelte    | 2 +-
 apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte | 2 +-
 .../src/routes/tutorial/[...slug]/Controls.svelte          | 2 +-
 packages/site-kit/src/lib/components/Dropdown.svelte       | 7 ++++---
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte
index cff72a7291..813bc70f38 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte
@@ -30,7 +30,7 @@
 		display: flex;
 		align-items: center;
 		padding: 0em 0 0 0.4rem;
-		height: calc(var(--sk-secondary-nav-height) - 1.5rem);
+		/* height: calc(var(--sk-secondary-nav-height) - 1.5rem); */
 		z-index: 99;
 	}
 
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
index 7f60e4c10e..da70ac7fe0 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
@@ -345,7 +345,7 @@
 	.container {
 		display: flex;
 		flex-direction: column;
-		height: calc(100dvh - var(--sk-nav-height));
+		height: 100%;
 		/** necessary for innerWidth to be correct, so we can determine `mobile` */
 		width: 100vw;
 		overflow: hidden;
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
index a58bc9931d..baa2758a8e 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
@@ -2,7 +2,7 @@
 	import { goto } from '$app/navigation';
 	import SecondaryNav from '$lib/components/SecondaryNav.svelte';
 	import SelectIcon from '$lib/components/SelectIcon.svelte';
-	import type { Exercise, PartStub, Stub } from '$lib/tutorial';
+	import type { Exercise, PartStub } from '$lib/tutorial';
 	import { Icon } from '@sveltejs/site-kit/components';
 
 	interface Props {
diff --git a/packages/site-kit/src/lib/components/Dropdown.svelte b/packages/site-kit/src/lib/components/Dropdown.svelte
index 31c08cbc70..93ca37b817 100644
--- a/packages/site-kit/src/lib/components/Dropdown.svelte
+++ b/packages/site-kit/src/lib/components/Dropdown.svelte
@@ -27,8 +27,9 @@
 		opacity: 0;
 		pointer-events: none;
 		position: absolute;
-		left: 0;
-		top: calc(100% - 1rem);
+		left: -1rem;
+		/* this is a bit of a kludge, but it ensures a contiguous hit area (50% + 50%) while also working for tall links like `Docs` (50% + 1.5rem) */
+		top: calc(50% + min(50%, 1.5rem));
 		background-color: var(--sk-back-2);
 		z-index: 1;
 		box-shadow: var(--sk-shadow);
@@ -38,7 +39,7 @@
 
 		&.align-right {
 			left: auto;
-			right: 0;
+			right: -1rem;
 		}
 
 		:global {

From 6241b32ddbe7463f66468a9922b100805c1a67d3 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 13 Oct 2024 20:57:28 -0400
Subject: [PATCH 5/9] various tweaks

---
 .../src/routes/tutorial/[...slug]/+page.svelte    |  1 +
 .../src/routes/tutorial/[...slug]/Sidebar.svelte  |  4 ++--
 .../tutorial/[...slug]/filetree/Filetree.svelte   | 12 +-----------
 .../tutorial/[...slug]/filetree/Item.svelte       | 15 +--------------
 packages/site-kit/src/lib/styles/base.css         |  1 -
 packages/site-kit/src/lib/styles/index.css        |  1 +
 .../site-kit/src/lib/styles/utils/dividers.css    |  6 ++++++
 7 files changed, 12 insertions(+), 28 deletions(-)
 create mode 100644 packages/site-kit/src/lib/styles/utils/dividers.css

diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
index da70ac7fe0..5b823e1938 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
@@ -360,6 +360,7 @@
 		/* we transform the default state, rather than the editor state, because otherwise
 		   the positioning of tooltips is wrong (doesn't take into account transforms) */
 		transform: translate(50%, 0);
+		border-top: 1px solid var(--sk-back-5);
 	}
 
 	.top.offset {
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
index b4b53f220f..c018bd750e 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
@@ -120,8 +120,8 @@
 
 	.text {
 		flex: 1 1 auto;
-		padding: 2.2rem 3rem;
-		border-right: 1px solid var(--sk-back-4);
+		padding: 2.2rem var(--sk-page-padding-side);
+		/* border-right: 1px solid var(--sk-back-5); */
 		background: var(--sk-back-1);
 
 		:global {
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 a02fe56e2b..ceccbd0081 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte
@@ -185,7 +185,7 @@
 		overflow-x: hidden;
 		padding: 1rem 0rem;
 		margin: 0;
-		background: var(--sk-back-1);
+		background: var(--sk-back-3);
 		list-style: none;
 	}
 
@@ -193,16 +193,6 @@
 		height: 100%;
 	}
 
-	.filetree:not(.mobile)::before {
-		content: '';
-		position: absolute;
-		width: 0;
-		height: 100%;
-		top: 0;
-		right: 0;
-		border-right: 1px solid var(--sk-back-4);
-	}
-
 	.modal-contents p {
 		white-space: pre-line;
 	}
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 de9a7cd717..0bb225623e 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
@@ -98,7 +98,7 @@
 
 <style>
 	li {
-		--bg: var(--sk-back-1);
+		--bg: var(--sk-back-3);
 		--inset: calc((var(--depth) * 1.2rem) + 1.5rem);
 		display: flex;
 		position: relative;
@@ -189,19 +189,6 @@
 		color: var(--sk-theme-1);
 	}
 
-	[aria-current='true']::after {
-		content: '';
-		position: absolute;
-		width: 1rem;
-		height: 1rem;
-		top: 0.3rem;
-		right: calc(-0.6rem - 2px);
-		background-color: var(--sk-back-3);
-		border: 1px solid var(--sk-back-4);
-		transform: translate(0, 0.2rem) rotate(45deg);
-		z-index: 2;
-	}
-
 	[aria-current='true']:has(:focus-visible)::after,
 	:global(.mobile-filetree) [aria-current='true']::after {
 		display: none;
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index c31208e035..ad40421c7e 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -156,7 +156,6 @@ button {
 	background-color: transparent;
 	border: none;
 	color: currentColor;
-	cursor: pointer;
 }
 
 button[disabled] {
diff --git a/packages/site-kit/src/lib/styles/index.css b/packages/site-kit/src/lib/styles/index.css
index b8cacdbb1f..a0a925c9e4 100644
--- a/packages/site-kit/src/lib/styles/index.css
+++ b/packages/site-kit/src/lib/styles/index.css
@@ -10,4 +10,5 @@
 @import './base.css';
 @import './text.css';
 @import './utils/buttons.css';
+@import './utils/dividers.css';
 @import './utils/twoslash.css';
diff --git a/packages/site-kit/src/lib/styles/utils/dividers.css b/packages/site-kit/src/lib/styles/utils/dividers.css
new file mode 100644
index 0000000000..c43f3e1840
--- /dev/null
+++ b/packages/site-kit/src/lib/styles/utils/dividers.css
@@ -0,0 +1,6 @@
+.divider {
+	z-index: 2;
+	&::after {
+		background-color: var(--sk-back-5) !important;
+	}
+}

From 058676dcfa2202438088d424a32fbc1fc5790f9f Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 13 Oct 2024 21:41:43 -0400
Subject: [PATCH 6/9] tweaks

---
 .../routes/tutorial/[...slug]/Chrome.svelte   | 40 +++++++++----------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
index 19ce85223a..51bf179f68 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
@@ -19,7 +19,11 @@
 </script>
 
 <div class="chrome">
-	<button disabled={loading || !refresh} class="reload icon" onclick={refresh} aria-label="reload"
+	<button
+		disabled={loading || !refresh}
+		class="reload icon raised"
+		onclick={refresh}
+		aria-label="reload"
 	></button>
 
 	<input
@@ -37,17 +41,18 @@
 		}}
 	/>
 
-	<a
+	<!-- TODO maybe reinstate in future, if we can make it work with non-webcontainer exercises -->
+	<!-- <a
 		{href}
 		class="new-tab icon"
 		target="_blank"
 		aria-label={href ? 'open in new tab' : undefined}
 		tabindex="0"
-	></a>
+	></a> -->
 
 	<button
 		disabled={loading || !toggle_terminal}
-		class="terminal icon"
+		class="terminal icon raised"
 		onclick={() => toggle_terminal?.()}
 		aria-label="toggle terminal"
 	></button>
@@ -59,6 +64,8 @@
 		height: 4rem;
 		display: flex;
 		border-top: 1px solid var(--sk-back-4);
+		padding: 0.2rem;
+		gap: 0.2rem;
 	}
 
 	button {
@@ -67,14 +74,15 @@
 
 	input {
 		flex: 1;
-		padding: 0.5rem 1rem 0.4rem 1rem;
-		border: none;
-		background-color: var(--sk-back-3);
+		padding: 0.2rem 0.6rem;
+		border: 1px solid var(--sk-back-4);
+		/* TODO this should apply to all buttons/inputs? */
+		border-radius: var(--sk-border-radius);
 		color: var(--sk-text-1);
 		font: var(--sk-font-ui-medium);
+		height: 3.2rem;
 	}
 
-	a:focus-visible,
 	button:focus-visible,
 	input:focus-visible {
 		outline-offset: -2px;
@@ -83,18 +91,9 @@
 	.icon,
 	.icon::after {
 		position: relative;
-		height: 100%;
+		width: 3.2rem;
 		aspect-ratio: 1;
-		background: var(--sk-back-4) no-repeat 50% 50%;
-		background-size: 2rem;
-	}
-
-	a:not([href]) {
-		opacity: 0.5;
-	}
-
-	.new-tab {
-		background-image: url($lib/icons/external.svg);
+		background-size: 1.8rem;
 	}
 
 	.terminal {
@@ -106,7 +105,8 @@
 		position: absolute;
 		left: 0;
 		top: 0;
-		background-image: url($lib/icons/refresh.svg);
+		background: url($lib/icons/refresh.svg) no-repeat 50% 50%;
+		background-size: 1.8rem;
 		transition: 0.2s ease-out;
 	}
 

From d2ac92f9fe55af53448fc34f6affe812c93d8100 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 13 Oct 2024 21:47:26 -0400
Subject: [PATCH 7/9] tidy up

---
 .../routes/tutorial/[...slug]/+page.svelte    |   1 -
 .../src/routes/tutorial/[...slug]/Menu.svelte | 435 ------------------
 .../routes/tutorial/[...slug]/Sidebar.svelte  |   6 -
 3 files changed, 442 deletions(-)
 delete mode 100644 apps/svelte.dev/src/routes/tutorial/[...slug]/Menu.svelte

diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
index 5b823e1938..7827ef26b6 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
@@ -256,7 +256,6 @@
 			<section slot="a" class="content">
 				<Sidebar
 					bind:sidebar
-					index={data.index}
 					exercise={data.exercise}
 					on:select={(e) => {
 						navigate_to_file(e.detail.file);
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Menu.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Menu.svelte
deleted file mode 100644
index 3aef2bc36a..0000000000
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Menu.svelte
+++ /dev/null
@@ -1,435 +0,0 @@
-<script>
-	import { page } from '$app/stores';
-	import { click_outside, focus_outside } from '@sveltejs/site-kit/actions';
-	import { Icon } from '@sveltejs/site-kit/components';
-	import { open_nav } from '@sveltejs/site-kit/nav';
-	import { mql, reduced_motion } from '@sveltejs/site-kit/stores';
-	import { expoOut } from 'svelte/easing';
-	import { slide } from 'svelte/transition';
-
-	/** @type {import('$lib/tutorial').PartStub[]}*/
-	export let index;
-
-	/** @type {import('$lib/tutorial').Exercise} */
-	export let current;
-
-	const is_mobile = mql('(max-width: 799px)');
-
-	const duration = $reduced_motion ? 0 : 200;
-
-	let is_open = false;
-
-	$: expanded_part = current.part.slug;
-	$: expanded_chapter = current.chapter.slug;
-</script>
-
-<svelte:window on:keydown={(e) => e.key === 'Escape' && (is_open = false)} />
-
-<div
-	class="container"
-	use:focus_outside={() => (is_open = false)}
-	use:click_outside={() => (is_open = false)}
->
-	<header>
-		<a
-			class="prev-button"
-			href={current.prev ? `/tutorial/${current.prev.slug}` : undefined}
-			aria-label={current.prev && 'Previous'}
-		>
-			<Icon name="arrow-left" size={16} />
-		</a>
-
-		<div class="menu" class:open={is_open}>
-			<button on:click={() => ($is_mobile ? open_nav() : (is_open = !is_open))}>
-				<h1>
-					<div class="mobile">
-						<div class="heading-row">
-							<strong>{current.title}</strong>
-						</div>
-						<div class="heading-row">
-							<span class="part-title">{current.part.label}</span>
-							<span class="separator">/</span>
-							<span class="chapter-title">{current.chapter.title}</span>
-						</div>
-					</div>
-
-					<div class="desktop">
-						<span class="part-title">{current.part.title}</span><span class="separator">/</span>
-						<span class="chapter-title">{current.chapter.title}</span><span class="separator"
-							>/</span
-						><strong>{current.title}</strong>
-					</div>
-
-					<span style="flex: 1 1 auto"></span>
-				</h1>
-
-				<span class="expand-icon" class:inverted={is_open}>
-					<Icon name="chevron-down" />
-				</span>
-			</button>
-
-			{#if is_open}
-				<nav
-					aria-label="tutorial exercises"
-					transition:slide={{ axis: 'y', easing: expoOut, duration: $reduced_motion ? 0 : 400 }}
-				>
-					<div class="exercises">
-						<ul>
-							{#each index as part, i (part.slug)}
-								<li
-									class="part"
-									class:expanded={part.slug === expanded_part}
-									aria-current={part.slug === current.part.slug ? 'step' : undefined}
-									transition:slide={{ duration }}
-								>
-									<button
-										on:click={() => {
-											if (expanded_part !== part.slug) {
-												expanded_part = part.slug;
-												expanded_chapter = part.chapters[0].slug;
-											}
-										}}
-									>
-										Part {i + 1}: {part.title}
-									</button>
-
-									{#if part.slug === expanded_part}
-										<ul class="chapter" transition:slide={{ duration }}>
-											{#each part.chapters as chapter (chapter.slug)}
-												<li
-													class="chapter"
-													class:expanded={chapter.slug === expanded_chapter}
-													aria-current={chapter.slug === current.chapter.slug ? 'step' : undefined}
-												>
-													<button
-														on:click={() => (expanded_chapter = chapter.slug)}
-														style="width: 100%; text-align: start;"
-													>
-														<!-- <img src={arrow} alt="Arrow icon" /> -->
-														<Icon name="arrow-right-chevron" size={16} />
-														{chapter.title}
-													</button>
-
-													{#if chapter.slug === expanded_chapter}
-														<ul transition:slide={{ duration }}>
-															{#each chapter.exercises as exercise (exercise.slug)}
-																<li
-																	transition:slide={{ duration }}
-																	class="exercise"
-																	aria-current={$page.url.pathname === `/tutorial/${exercise.slug}`
-																		? 'page'
-																		: undefined}
-																>
-																	<a
-																		href="/tutorial/{exercise.slug}"
-																		on:click={() => (is_open = false)}
-																	>
-																		{exercise.title}
-																	</a>
-																</li>
-															{/each}
-														</ul>
-													{/if}
-												</li>
-											{/each}
-										</ul>
-									{/if}
-								</li>
-							{/each}
-						</ul>
-					</div>
-				</nav>
-			{/if}
-		</div>
-
-		<a
-			class="next-button"
-			href={current.next ? `/tutorial/${current.next.slug}` : undefined}
-			aria-label="Next"
-		>
-			<Icon name="arrow-right" size={16} />
-		</a>
-	</header>
-</div>
-
-<style>
-	.container {
-		position: relative;
-
-		display: flex;
-		justify-content: center;
-
-		border-right: 1px solid var(--sk-back-4);
-
-		width: 100%;
-		padding: 1rem 0;
-
-		background-color: transparent;
-
-		isolation: isolate;
-		z-index: 4;
-	}
-
-	header {
-		position: relative;
-
-		display: grid;
-		grid-template-columns: 4rem minmax(0, 1fr) 4rem;
-		gap: 0.5rem;
-		align-items: center;
-
-		padding: 0;
-		padding-right: 4px;
-		height: var(--menu-width);
-		width: 100%;
-	}
-
-	header strong,
-	h1 {
-		font-family: inherit;
-	}
-
-	header strong {
-		color: var(--sk-theme-1);
-	}
-
-	.menu {
-		flex: 1;
-
-		position: relative;
-
-		top: 0.15rem;
-		height: 100%;
-		min-width: 0;
-		width: 100%;
-		max-width: 100%;
-
-		padding: 0 1.5rem;
-
-		transition: 0.4s var(--quint-out);
-		transition-property: background, box-shadow;
-
-		background-color: var(--sk-back-2);
-
-		border-radius: var(--sk-border-radius);
-		box-shadow: var(--sk-shadow);
-
-		cursor: pointer;
-
-		&.open {
-			border-radius: var(--sk-border-radius) var(--sk-border-radius) 0 0;
-		}
-
-		& > button {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			gap: 0.4ch;
-			width: 100%;
-			height: 100%;
-		}
-	}
-
-	h1 {
-		display: flex;
-
-		width: 100%;
-		height: 100%;
-
-		z-index: 3;
-
-		overflow: hidden;
-
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		text-align: center;
-		color: var(--sk-text-2);
-		font: var(--sk-font-ui-medium);
-
-		.desktop {
-			display: flex;
-			gap: 0.5ch;
-			align-items: center;
-		}
-
-		.mobile {
-			display: none;
-		}
-	}
-
-	.expand-icon :global(svg) {
-		transition: transform 0.4s var(--quint-out);
-		transform-origin: center;
-	}
-
-	.expand-icon.inverted :global(svg) {
-		transform: rotate3d(0, 0, 1, 180deg);
-	}
-
-	.separator {
-		position: relative;
-		font: var(--sk-font-ui-small);
-		opacity: 0.3;
-		display: inline-block;
-	}
-
-	header a:not([href]) {
-		opacity: 0.1;
-		cursor: default;
-	}
-
-	nav {
-		--transform-transition: transform 0.2s;
-		position: absolute;
-		top: var(--menu-width);
-		left: 0;
-		width: 100%;
-		height: auto;
-		max-height: 70vh;
-		background: var(--sk-back-2);
-		z-index: -1;
-		box-shadow: var(--sk-shadow);
-		border-radius: 0 0 var(--sk-border-radius) var(--sk-border-radius);
-		display: flex;
-		flex-direction: column;
-	}
-
-	nav a {
-		justify-content: start !important;
-		display: flex;
-	}
-
-	.exercises {
-		padding: 2rem 0;
-		flex: 1;
-		overflow: auto;
-	}
-
-	ul {
-		position: relative;
-		list-style: none;
-		padding: 0 0 0 1.5rem;
-		margin: 0;
-	}
-
-	ul.chapter {
-		padding: 0 0 0 1rem;
-	}
-
-	li {
-		position: relative;
-	}
-
-	li[aria-current='page'] a,
-	li[aria-current='step']:not(.expanded) > button {
-		color: var(--sk-theme-1);
-	}
-
-	li :global(svg) {
-		top: 0.1rem;
-		width: 2rem;
-		height: 2rem;
-		transition: transform 0.2s;
-		stroke-width: 0 !important;
-	}
-
-	li.expanded > button > :global(svg) {
-		transform: rotate(90deg);
-	}
-
-	.exercise {
-		--dot-size: 1.2rem;
-		--color: var(--sk-text-2);
-	}
-
-	a,
-	button {
-		color: var(--sk-text-2);
-		padding: 0 0 0 0.5rem;
-		display: block;
-		box-sizing: border-box;
-		font: var(--sk-font-ui-medium);
-		font-variant-numeric: tabular-nums;
-	}
-
-	li button {
-		position: relative;
-		display: flex;
-		width: 100%;
-		gap: 0.5rem;
-	}
-
-	li a {
-		padding-left: 2rem;
-	}
-
-	header > a {
-		height: 100%;
-		width: 100%;
-
-		display: flex;
-		align-items: center;
-		justify-content: center;
-
-		padding: 0;
-		padding: 0;
-		margin: 0;
-		border: 0;
-	}
-
-	a:focus-visible,
-	.exercises button:focus-visible {
-		outline-offset: -2px;
-	}
-
-	@media screen and (max-width: 799px) {
-		.container {
-			border-right: none;
-		}
-
-		/* Remove all styles */
-		.menu {
-			box-shadow: none;
-			background-color: transparent;
-
-			padding: 0;
-
-			justify-content: start;
-		}
-
-		.expand-icon {
-			display: none;
-		}
-
-		h1 {
-			display: flex;
-			flex-direction: column;
-			column-gap: 0.5ch;
-			align-items: flex-start;
-			grid-template-rows: repeat(2, auto);
-
-			width: 100%;
-			height: max-content;
-		}
-
-		h1 .mobile {
-			display: block;
-		}
-
-		h1 .desktop {
-			display: none;
-		}
-
-		.heading-row {
-			display: flex;
-			gap: 0.5ch;
-			align-items: center;
-		}
-
-		h1 :where(.part-title, .chapter-title) {
-			grid-row: 2 / span 1;
-			font: var(--sk-font-ui-small);
-			color: var(--sk-text-3);
-		}
-	}
-</style>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
index c018bd750e..4eaf488cb1 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
@@ -1,12 +1,8 @@
 <script>
 	import { createEventDispatcher } from 'svelte';
 	import Modal from '$lib/components/Modal.svelte';
-	import Menu from './Menu.svelte';
 	import { Text } from '@sveltejs/site-kit/components';
 
-	/** @type {import('$lib/tutorial').PartStub[]} */
-	export let index;
-
 	/** @type {import('$lib/tutorial').Exercise} */
 	export let exercise;
 
@@ -21,8 +17,6 @@
 	let show_modal = false;
 </script>
 
-<!-- <Menu {index} current={exercise} /> -->
-
 <section bind:this={sidebar}>
 	<div
 		class="text"

From a61cb553c1b4e4a4e4a62a292187b31cff72a918 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 13 Oct 2024 21:56:50 -0400
Subject: [PATCH 8/9] fix

---
 apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte    | 2 +-
 apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
index 7827ef26b6..bc9c5b5f5f 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
@@ -344,7 +344,7 @@
 	.container {
 		display: flex;
 		flex-direction: column;
-		height: 100%;
+		height: calc(100dvh - var(--sk-nav-height));
 		/** necessary for innerWidth to be correct, so we can determine `mobile` */
 		width: 100vw;
 		overflow: hidden;
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
index baa2758a8e..8f8f052132 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
@@ -82,6 +82,8 @@
 	.breadcrumbs {
 		flex: 1;
 		font: var(--sk-font-ui-medium);
+		overflow: hidden;
+		text-overflow: ellipsis;
 
 		span:not(:last-child)::after {
 			content: ' / ';

From 93b07bbfbd6a098a707623af2d78f1bf8ac22330 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 13 Oct 2024 21:58:28 -0400
Subject: [PATCH 9/9] drive-by fix

---
 packages/site-kit/src/lib/styles/tokens.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index 6a74b62ce2..f7573ce365 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -16,7 +16,7 @@
 	--sk-secondary-nav-height: 5rem;
 	--sk-page-padding-top: 6rem;
 	--sk-page-padding-bottom: 6rem;
-	--sk-page-padding-side: 2.4rem;
+	--sk-page-padding-side: 1.6rem;
 	--sk-thick-border-width: 0.3rem;
 	--sk-border-radius: 0.4rem;
 	--sk-page-content-width: 84rem;