From 25906e11f5cbedf3cbf0a2f39ef7a31e7fd5bf44 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 13 Oct 2024 23:35:10 -0400
Subject: [PATCH 1/4] make dropdown menus more consistent etc

---
 .../(authed)/playground/[id]/UserMenu.svelte  |   8 +-
 packages/repl/src/lib/Input/Migrate.svelte    |   4 +-
 packages/repl/src/lib/Input/RunesInfo.svelte  | 109 +++++++-----------
 .../repl/src/lib/Input/runes-off-dark.svg     |   1 +
 .../repl/src/lib/Input/runes-off-light.svg    |   1 +
 packages/repl/src/lib/Input/runes-on-dark.svg |   1 +
 .../repl/src/lib/Input/runes-on-light.svg     |   1 +
 .../src/lib/components/Dropdown.svelte        |  30 +----
 .../src/lib/components/HoverMenu.svelte       |  42 +++++++
 .../site-kit/src/lib/components/Icons.svelte  |   6 +-
 .../src/lib/components/LinksDropdown.svelte   |  17 +--
 packages/site-kit/src/lib/components/index.ts |   1 +
 packages/site-kit/src/lib/nav/Nav.svelte      |  78 +++++++++----
 packages/site-kit/src/lib/styles/tokens.css   |   4 +-
 14 files changed, 159 insertions(+), 144 deletions(-)
 create mode 100644 packages/repl/src/lib/Input/runes-off-dark.svg
 create mode 100644 packages/repl/src/lib/Input/runes-off-light.svg
 create mode 100644 packages/repl/src/lib/Input/runes-on-dark.svg
 create mode 100644 packages/repl/src/lib/Input/runes-on-light.svg
 create mode 100644 packages/site-kit/src/lib/components/HoverMenu.svelte

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 813bc70f38..79d2ce4aea 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Dropdown, Icon } from '@sveltejs/site-kit/components';
+	import { Dropdown, HoverMenu, Icon } from '@sveltejs/site-kit/components';
 	import { get_app_context } from '../../app-context';
 	import type { User } from '$lib/db/session';
 
@@ -19,8 +19,10 @@
 	</div>
 
 	{#snippet dropdown()}
-		<a href="/apps">Your saved apps</a>
-		<button onclick={logout}>Log out</button>
+		<HoverMenu>
+			<a href="/apps">Your saved apps</a>
+			<button onclick={logout}>Log out</button>
+		</HoverMenu>
 	{/snippet}
 </Dropdown>
 
diff --git a/packages/repl/src/lib/Input/Migrate.svelte b/packages/repl/src/lib/Input/Migrate.svelte
index c28dfe5a18..88fb089b93 100644
--- a/packages/repl/src/lib/Input/Migrate.svelte
+++ b/packages/repl/src/lib/Input/Migrate.svelte
@@ -5,7 +5,9 @@
 </script>
 
 <div class="container">
-	<button on:click={migrate} title="Migrate this component towards the new syntax">migrate</button>
+	<button class="raised" on:click={migrate} title="Migrate this component towards the new syntax"
+		>migrate</button
+	>
 </div>
 
 <style>
diff --git a/packages/repl/src/lib/Input/RunesInfo.svelte b/packages/repl/src/lib/Input/RunesInfo.svelte
index 893536b0f8..ea009057d8 100644
--- a/packages/repl/src/lib/Input/RunesInfo.svelte
+++ b/packages/repl/src/lib/Input/RunesInfo.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Dropdown } from '@sveltejs/site-kit/components';
 	import { get_repl_context } from '../context';
 
 	let { runes }: { runes: boolean } = $props();
@@ -14,40 +15,35 @@
 	}}
 />
 
-<div class="container">
-	<button class:active={runes} class:open onclick={() => (open = !open)}>
-		<svg viewBox="0 0 24 24">
-			<path d="M9.4,1H19l-5.9,7.7h8L8.3,23L11,12.6H3.5L9.4,1z" />
-		</svg>
+<Dropdown align="right">
+	<div class="target">
+		<span class="lightning" class:active={runes} role="presentation"></span>
 
-		runes
-	</button>
+		<span>runes</span>
+	</div>
 
-	{#if open}
-		<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions
-			(This is taken care of by the <svelte:window> above) -->
-		<div class="modal-backdrop" onclick={() => (open = false)}></div>
+	{#snippet dropdown()}
 		<div class="popup">
 			{#if $selected_name.endsWith('.svelte.js')}
 				<p>
 					Files with a <code>.svelte.js</code> extension are always in
-					<a href="https://svelte.dev/blog/runes">runes mode</a>.
+					<a href="/blog/runes">runes mode</a>.
 				</p>
 			{:else if $selected_name.endsWith('.js')}
 				<p>
-					To use <a href="https://svelte.dev/blog/runes">runes</a> in a JavaScript file, change the
-					extension to <code>.svelte.js</code>.
+					To use <a href="/blog/runes">runes</a> in a JavaScript file, change the extension to
+					<code>.svelte.js</code>.
 				</p>
 			{:else if $selected_name.endsWith('.svelte')}
 				{#if runes}
 					<p>
 						This component is in
-						<a href="https://svelte.dev/blog/runes">runes mode</a>.
+						<a href="/blog/runes">runes mode</a>.
 					</p>
 					<p>To disable runes mode, add the following to the top of your component:</p>
 					<pre><code>&lt;svelte:options runes={'{false}'} /&gt;</code></pre>
 				{:else}
-					<p>This component is not in <a href="https://svelte.dev/blog/runes">runes mode</a>.</p>
+					<p>This component is not in <a href="/blog/runes">runes mode</a>.</p>
 					<p>
 						To enable runes mode, either start using runes in your code, or add the following to the
 						top of your component:
@@ -57,85 +53,68 @@
 			{:else}
 				<p>
 					Edit a <code>.svelte</code>, <code>.svelte.js</code> or <code>.js</code> file to see
-					information on <a href="https://svelte.dev/blog/runes">runes mode</a>
+					information on <a href="/blog/runes">runes mode</a>
 				</p>
 			{/if}
 		</div>
-	{/if}
-</div>
+	{/snippet}
+</Dropdown>
 
 <style>
-	button {
-		position: relative;
-		display: flex;
+	.target {
 		text-transform: uppercase;
 		font: var(--sk-font-ui-small);
-		padding: 0.8rem;
-		gap: 0.5rem;
-		margin-right: 0.3rem;
-		z-index: 9999;
-	}
-
-	button.open {
-		background: var(--sk-back-3);
-	}
+		position: relative;
+		display: flex;
+		align-items: center;
 
-	svg {
-		width: 1.6rem !important;
-		height: 1.6rem !important;
-		top: 0.05rem;
+		height: 100%;
+		padding: 0 0.8rem 0 3rem;
+		gap: 0.5rem;
 	}
 
-	path {
-		stroke: #ccc;
-		fill: transparent;
-		transition:
-			stroke 0.2s,
-			fill 0.2s;
-	}
+	span.lightning {
+		--icon-size: 1.8rem;
+		width: 1.8rem;
+		height: 1.8rem;
+		z-index: 9999;
+		background: url(./runes-off-light.svg) no-repeat 50% 50%;
+		background-size: contain;
 
-	.active svg {
-		animation: bump 0.4s;
-	}
+		:root.dark &:not(.active) {
+			background-image: url(./runes-off-dark.svg);
+		}
 
-	.active path {
-		stroke: #ff3e00;
-		fill: #ff3e00;
+		&.active {
+			background-image: url(./runes-on-light.svg);
+			animation: bump 0.4s;
+		}
 	}
 
 	@keyframes bump {
 		0% {
-			transform: scale(1);
+			background-size: var(--icon-size);
 		}
 		50% {
-			transform: scale(1.3);
+			background-size: calc(1.3 * var(--icon-size));
 		}
 		100% {
-			transform: scale(1);
+			background-size: var(--icon-size);
 		}
 	}
 
-	.modal-backdrop {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100vw;
-		height: 100vh;
-		background: var(--sk-back-1);
-		opacity: 0.7;
-		backdrop-filter: blur(5px);
-		z-index: 9998;
-	}
-
 	.popup {
 		position: absolute;
-		top: 2.2em;
-		right: 0;
+		right: -6rem;
 		width: 100vw;
 		max-width: 320px;
 		z-index: 9999;
 		background: var(--sk-back-3);
 		padding: 1em;
+
+		p {
+			font: var(--sk-font-ui-medium);
+		}
 	}
 
 	.popup p:first-child {
diff --git a/packages/repl/src/lib/Input/runes-off-dark.svg b/packages/repl/src/lib/Input/runes-off-dark.svg
new file mode 100644
index 0000000000..388d96ef63
--- /dev/null
+++ b/packages/repl/src/lib/Input/runes-off-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#d4d4d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.513 4.856 13.12 2.17a.5.5 0 0 1 .86.46l-1.377 4.317"/><path d="M15.656 10H20a1 1 0 0 1 .78 1.63l-1.72 1.773"/><path d="M16.273 16.273 10.88 21.83a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14H4a1 1 0 0 1-.78-1.63l4.507-4.643"/><path d="m2 2 20 20"/></svg>
diff --git a/packages/repl/src/lib/Input/runes-off-light.svg b/packages/repl/src/lib/Input/runes-off-light.svg
new file mode 100644
index 0000000000..7a2d4ecb52
--- /dev/null
+++ b/packages/repl/src/lib/Input/runes-off-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.513 4.856 13.12 2.17a.5.5 0 0 1 .86.46l-1.377 4.317"/><path d="M15.656 10H20a1 1 0 0 1 .78 1.63l-1.72 1.773"/><path d="M16.273 16.273 10.88 21.83a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14H4a1 1 0 0 1-.78-1.63l4.507-4.643"/><path d="m2 2 20 20"/></svg>
diff --git a/packages/repl/src/lib/Input/runes-on-dark.svg b/packages/repl/src/lib/Input/runes-on-dark.svg
new file mode 100644
index 0000000000..90d811b4d1
--- /dev/null
+++ b/packages/repl/src/lib/Input/runes-on-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#d4d4d4" stroke="#d4d4d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg>
diff --git a/packages/repl/src/lib/Input/runes-on-light.svg b/packages/repl/src/lib/Input/runes-on-light.svg
new file mode 100644
index 0000000000..8cdfeee904
--- /dev/null
+++ b/packages/repl/src/lib/Input/runes-on-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ff3e00" stroke="#ff3e00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg>
diff --git a/packages/site-kit/src/lib/components/Dropdown.svelte b/packages/site-kit/src/lib/components/Dropdown.svelte
index 93ca37b817..8551b1c694 100644
--- a/packages/site-kit/src/lib/components/Dropdown.svelte
+++ b/packages/site-kit/src/lib/components/Dropdown.svelte
@@ -32,42 +32,14 @@
 		top: calc(50% + min(50%, 1.5rem));
 		background-color: var(--sk-back-2);
 		z-index: 1;
-		box-shadow: var(--sk-shadow);
+		filter: var(--sk-shadow);
 		border-radius: var(--sk-border-radius);
-		overflow: hidden;
 		z-index: 999;
 
 		&.align-right {
 			left: auto;
 			right: -1rem;
 		}
-
-		:global {
-			a,
-			button {
-				color: var(--sk-text-2);
-				padding: 1rem 1.3rem;
-				display: block;
-				font: var(--sk-font-ui-medium);
-				text-decoration: none;
-				line-height: 1;
-				width: 100%;
-				text-align: left;
-
-				&:first-child {
-					padding-top: 1.3rem;
-				}
-
-				&:last-child {
-					padding-bottom: 1.3rem;
-				}
-			}
-
-			a:hover,
-			button:hover {
-				background-color: var(--sk-back-4);
-			}
-		}
 	}
 
 	.dropdown:hover .dropdown-content,
diff --git a/packages/site-kit/src/lib/components/HoverMenu.svelte b/packages/site-kit/src/lib/components/HoverMenu.svelte
new file mode 100644
index 0000000000..8c2e3d3e6d
--- /dev/null
+++ b/packages/site-kit/src/lib/components/HoverMenu.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { children }: { children: Snippet } = $props();
+</script>
+
+<div class="hover-menu">
+	{@render children()}
+</div>
+
+<style>
+	.hover-menu {
+		:global {
+			a,
+			button {
+				color: var(--sk-text-2);
+				padding: 1rem 1.3rem;
+				display: block;
+				font: var(--sk-font-ui-medium);
+				text-decoration: none;
+				line-height: 1;
+				width: 100%;
+				text-align: left;
+
+				&:first-child {
+					padding-top: 1.3rem;
+					border-radius: var(--sk-border-radius) var(--sk-border-radius) 0 0;
+				}
+
+				&:last-child {
+					padding-bottom: 1.3rem;
+					border-radius: 0 0 var(--sk-border-radius) var(--sk-border-radius);
+				}
+			}
+
+			a:hover,
+			button:hover {
+				background-color: var(--sk-back-4);
+			}
+		}
+	}
+</style>
diff --git a/packages/site-kit/src/lib/components/Icons.svelte b/packages/site-kit/src/lib/components/Icons.svelte
index eabce1c942..f1cf8a5a8c 100644
--- a/packages/site-kit/src/lib/components/Icons.svelte
+++ b/packages/site-kit/src/lib/components/Icons.svelte
@@ -137,16 +137,12 @@ Provides a list of svg icons that can be referenced through the `Icon` component
 			/>
 		</symbol>
 
-		<symbol id="chevron" class="icon" viewBox="0 0 24 24">
-			<path d="M2,7 L12,17 L20,7" />
-		</symbol>
-
 		<symbol id="chevron-up" class="icon" viewBox="0 0 24 24">
 			<polyline points="18 15 12 9 6 15" />
 		</symbol>
 
 		<symbol id="chevron-down" class="icon" viewBox="0 0 24 24">
-			<polyline points="6 9 12 15 18 9" />
+			<path d="m6 9 6 6 6-6" />
 		</symbol>
 
 		<symbol id="delete" class="icon" viewBox="0 0 24 24">
diff --git a/packages/site-kit/src/lib/components/LinksDropdown.svelte b/packages/site-kit/src/lib/components/LinksDropdown.svelte
index ca299db77e..8ae2a336bc 100644
--- a/packages/site-kit/src/lib/components/LinksDropdown.svelte
+++ b/packages/site-kit/src/lib/components/LinksDropdown.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/stores';
+	// import { Icon } from './Icon.svelte';
 	import type { NavigationLink } from '../types';
 	import Dropdown from './Dropdown.svelte';
 
@@ -13,21 +14,7 @@
 	>
 		{link.title}
 
-		<svg
-			width="1.8rem"
-			height="1.8rem"
-			viewBox="0 0 24 24"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				d="M6 9.5L12 15.5L18 9.5"
-				stroke="currentColor"
-				stroke-width="1.5"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			/>
-		</svg>
+		<Icon name="chevron-down" />
 	</a>
 
 	{#snippet dropdown()}
diff --git a/packages/site-kit/src/lib/components/index.ts b/packages/site-kit/src/lib/components/index.ts
index c1476449f3..a52652d01d 100644
--- a/packages/site-kit/src/lib/components/index.ts
+++ b/packages/site-kit/src/lib/components/index.ts
@@ -1,5 +1,6 @@
 export { default as Banners, defineBanner, fetchBanner } from './Banners.svelte';
 export { default as Dropdown } from './Dropdown.svelte';
+export { default as HoverMenu } from './HoverMenu.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as Icons } from './Icons.svelte';
 export { default as Section } from './Section.svelte';
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index 685a4c6242..3ca38ced78 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -13,7 +13,8 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	import Separator from './Separator.svelte';
 	import type { NavigationLink } from '../types';
 	import type { Snippet } from 'svelte';
-	import LinksDropdown from '../components/LinksDropdown.svelte';
+	import Dropdown from '../components/Dropdown.svelte';
+	import { HoverMenu } from '../components';
 
 	interface Props {
 		home_title?: string;
@@ -81,7 +82,32 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		<div class="menu">
 			{#each links as link}
 				{#if link.sections?.[0].path}
-					<LinksDropdown {link} />
+					<Dropdown>
+						<a
+							href="/{link.slug}"
+							aria-current={$page.url.pathname.startsWith(`/${link.slug}`) ? 'page' : undefined}
+						>
+							{link.title}
+
+							<Icon name="chevron-down" />
+						</a>
+
+						{#snippet dropdown()}
+							<HoverMenu>
+								{#each link.sections! as section}
+									<a
+										class="secondary"
+										href={section.path}
+										aria-current={$page.url.pathname === section.path || $page.url.pathname.startsWith(section.path!)
+									? 'page'
+									: undefined}
+									>
+										{section.title}
+									</a>
+								{/each}
+							</HoverMenu>
+						{/snippet}
+					</Dropdown>
 				{:else}
 					<a
 						href="/{link.slug}"
@@ -178,31 +204,35 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		display: flex;
 		width: 100%;
 
-		:global {
-			a {
-				color: var(--sk-text-2);
-				font: var(--sk-font-ui-medium);
-
-				white-space: nowrap;
-				height: 100%;
-				display: flex;
-				align-items: center;
-				text-decoration: none;
-				outline-offset: -2px;
-
-				&:hover {
-					box-shadow: inset 0 -1px 0 0 var(--sk-back-5);
-				}
-
-				&[aria-current='page'] {
-					color: var(--sk-theme-1);
-					box-shadow: inset 0 -1px 0 0 currentColor;
-				}
+		/* :global { */
+		a {
+			color: var(--sk-text-2);
+			font: var(--sk-font-ui-medium);
+
+			white-space: nowrap;
+			height: 100%;
+			display: flex;
+			align-items: center;
+			text-decoration: none;
+			outline-offset: -2px;
+
+			&:hover {
+				box-shadow: inset 0 -1px 0 0 var(--sk-back-5);
 			}
 
-			& > a {
-				padding: 0.1rem 0.5rem 0 0.5rem;
+			&[aria-current='page'] {
+				color: var(--sk-theme-1);
+				box-shadow: inset 0 -1px 0 0 currentColor;
 			}
+
+			&.secondary {
+				box-shadow: none;
+				line-height: 1;
+			}
+		}
+
+		& > a {
+			padding: 0.1rem 0.8rem 0 0.8rem;
 		}
 	}
 
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index f7573ce365..fec5d38489 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -67,7 +67,7 @@
 	--sk-text-3: hsl(0 0 27);
 	--sk-text-4: hsl(0 0 45);
 	--sk-scrollbar: rgba(0, 0, 0, 0.3);
-	--sk-shadow: 0px 0px 14px rgba(0, 0, 0, 0.1);
+	--sk-shadow: drop-shadow(0px 0px 14px rgba(0 0 0 / 0.1));
 
 	/* same in light mode, different in dark mode */
 	--sk-theme-1-variant: hsl(15, 100%, 50%);
@@ -132,7 +132,7 @@
 		--sk-text-4: hsl(0, 0%, 45%);
 		--sk-text-translucent: hsla(0, 0%, 100%, 0.9);
 		--sk-scrollbar: rgba(255, 255, 255, 0.3);
-		--sk-shadow: 0px 0px 0 1px var(--sk-back-4);
+		--sk-shadow: drop-shadow(0px 0px 0 1px var(--sk-back-4));
 
 		--sk-theme-1-variant: hsl(15, 100%, 40%);
 		--sk-theme-2-variant: hsl(240, 8%, 35%);

From 4f4fa34edf03e8b28f8920c8d702b8b1bc2ea67e Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 13 Oct 2024 23:36:30 -0400
Subject: [PATCH 2/4] tweak

---
 packages/repl/src/lib/Input/runes-off-dark.svg  | 2 +-
 packages/repl/src/lib/Input/runes-off-light.svg | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/repl/src/lib/Input/runes-off-dark.svg b/packages/repl/src/lib/Input/runes-off-dark.svg
index 388d96ef63..d03bff31fa 100644
--- a/packages/repl/src/lib/Input/runes-off-dark.svg
+++ b/packages/repl/src/lib/Input/runes-off-dark.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#d4d4d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.513 4.856 13.12 2.17a.5.5 0 0 1 .86.46l-1.377 4.317"/><path d="M15.656 10H20a1 1 0 0 1 .78 1.63l-1.72 1.773"/><path d="M16.273 16.273 10.88 21.83a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14H4a1 1 0 0 1-.78-1.63l4.507-4.643"/><path d="m2 2 20 20"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.513 4.856 13.12 2.17a.5.5 0 0 1 .86.46l-1.377 4.317"/><path d="M15.656 10H20a1 1 0 0 1 .78 1.63l-1.72 1.773"/><path d="M16.273 16.273 10.88 21.83a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14H4a1 1 0 0 1-.78-1.63l4.507-4.643"/><path d="m2 2 20 20"/></svg>
diff --git a/packages/repl/src/lib/Input/runes-off-light.svg b/packages/repl/src/lib/Input/runes-off-light.svg
index 7a2d4ecb52..0c25c33501 100644
--- a/packages/repl/src/lib/Input/runes-off-light.svg
+++ b/packages/repl/src/lib/Input/runes-off-light.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.513 4.856 13.12 2.17a.5.5 0 0 1 .86.46l-1.377 4.317"/><path d="M15.656 10H20a1 1 0 0 1 .78 1.63l-1.72 1.773"/><path d="M16.273 16.273 10.88 21.83a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14H4a1 1 0 0 1-.78-1.63l4.507-4.643"/><path d="m2 2 20 20"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.513 4.856 13.12 2.17a.5.5 0 0 1 .86.46l-1.377 4.317"/><path d="M15.656 10H20a1 1 0 0 1 .78 1.63l-1.72 1.773"/><path d="M16.273 16.273 10.88 21.83a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14H4a1 1 0 0 1-.78-1.63l4.507-4.643"/><path d="m2 2 20 20"/></svg>

From 61b3d96b5d71b4955f9f2f5608790ec4758b84b7 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 13 Oct 2024 23:42:57 -0400
Subject: [PATCH 3/4] tweak some playground styles

---
 .../repl/src/lib/Input/ComponentSelector.svelte  | 16 ++++++----------
 packages/repl/src/lib/Input/Migrate.svelte       | 16 ++++++----------
 packages/repl/src/lib/Input/RunesInfo.svelte     |  3 ++-
 3 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index 864d67e745..52ae36cf5b 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -277,9 +277,12 @@
 		title="add new component"
 	></button>
 
-	<div class="runes-info"><RunesInfo {runes} /></div>
+	<div class="runes">
+		<RunesInfo {runes} />
+		<Migrate />
+	</div>
 
-	<div class="migrate-info"><Migrate /></div>
+	<!-- <div class="migrate-info"></div> -->
 </div>
 
 <style>
@@ -429,20 +432,13 @@
 		color: var(--sk-theme-3) !important;
 	}
 
-	.runes-info {
+	.runes {
 		flex: 1;
 		display: flex;
 		align-items: center;
 		justify-content: flex-end;
 	}
 
-	.migrate-info {
-		flex: 0 1 0;
-		display: flex;
-		align-items: center;
-		justify-content: flex-end;
-	}
-
 	svg {
 		position: relative;
 		overflow: hidden;
diff --git a/packages/repl/src/lib/Input/Migrate.svelte b/packages/repl/src/lib/Input/Migrate.svelte
index 88fb089b93..f5d19bb5d2 100644
--- a/packages/repl/src/lib/Input/Migrate.svelte
+++ b/packages/repl/src/lib/Input/Migrate.svelte
@@ -4,22 +4,18 @@
 	const { migrate } = get_repl_context();
 </script>
 
-<div class="container">
-	<button class="raised" on:click={migrate} title="Migrate this component towards the new syntax"
-		>migrate</button
-	>
-</div>
+<button class="raised" on:click={migrate} title="Migrate this component towards the new syntax">
+	migrate
+</button>
 
 <style>
-	/* TODO this is duplicated with RunesInfo.svelte */
 	button {
 		position: relative;
 		display: flex;
+		align-items: center;
 		text-transform: uppercase;
 		font: var(--sk-font-ui-small);
-		padding: 0.8rem;
-		gap: 0.5rem;
-		margin-right: 0.3rem;
-		z-index: 9999;
+		padding: 0 0.8rem;
+		height: 3.2rem;
 	}
 </style>
diff --git a/packages/repl/src/lib/Input/RunesInfo.svelte b/packages/repl/src/lib/Input/RunesInfo.svelte
index ea009057d8..94c32147e5 100644
--- a/packages/repl/src/lib/Input/RunesInfo.svelte
+++ b/packages/repl/src/lib/Input/RunesInfo.svelte
@@ -69,8 +69,9 @@
 		align-items: center;
 
 		height: 100%;
-		padding: 0 0.8rem 0 3rem;
+		padding: 0 0.8rem;
 		gap: 0.5rem;
+		z-index: 2;
 	}
 
 	span.lightning {

From ee74a4c4e67b9bc9679b3db9e302babedc0a981c Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 13 Oct 2024 23:46:51 -0400
Subject: [PATCH 4/4] delete

---
 .../src/lib/components/LinksDropdown.svelte   | 39 -------------------
 packages/site-kit/src/lib/components/index.ts |  1 -
 2 files changed, 40 deletions(-)
 delete mode 100644 packages/site-kit/src/lib/components/LinksDropdown.svelte

diff --git a/packages/site-kit/src/lib/components/LinksDropdown.svelte b/packages/site-kit/src/lib/components/LinksDropdown.svelte
deleted file mode 100644
index 8ae2a336bc..0000000000
--- a/packages/site-kit/src/lib/components/LinksDropdown.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script lang="ts">
-	import { page } from '$app/stores';
-	// import { Icon } from './Icon.svelte';
-	import type { NavigationLink } from '../types';
-	import Dropdown from './Dropdown.svelte';
-
-	let { link }: { link: NavigationLink } = $props();
-</script>
-
-<Dropdown>
-	<a
-		href="/{link.slug}"
-		aria-current={$page.url.pathname.startsWith(`/${link.slug}`) ? 'page' : undefined}
-	>
-		{link.title}
-
-		<Icon name="chevron-down" />
-	</a>
-
-	{#snippet dropdown()}
-		{#each link.sections! as section}
-			<a
-				class="secondary"
-				href={section.path}
-				aria-current={$page.url.pathname === section.path || $page.url.pathname.startsWith(section.path!)
-					? 'page'
-					: undefined}
-			>
-				{section.title}
-			</a>
-		{/each}
-	{/snippet}
-</Dropdown>
-
-<style>
-	.secondary {
-		box-shadow: none !important;
-	}
-</style>
diff --git a/packages/site-kit/src/lib/components/index.ts b/packages/site-kit/src/lib/components/index.ts
index a52652d01d..78ccf8d20d 100644
--- a/packages/site-kit/src/lib/components/index.ts
+++ b/packages/site-kit/src/lib/components/index.ts
@@ -7,4 +7,3 @@ export { default as Section } from './Section.svelte';
 export { default as Shell } from './Shell.svelte';
 export { default as Text } from './Text.svelte';
 export { default as ThemeToggle } from './ThemeToggle.svelte';
-export { default as LinksDropdown } from './LinksDropdown.svelte';