From 132dfd00cede99443b2a47205de911f12dde32c9 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 14 Oct 2024 14:39:42 -0400
Subject: [PATCH 1/8] fix tooltips

---
 .../site-kit/src/lib/components/Text.svelte   |  2 +-
 packages/site-kit/src/lib/docs/Tooltip.svelte | 36 ++++++++++++++-----
 packages/site-kit/src/lib/docs/hover.ts       |  8 ++---
 .../site-kit/src/lib/markdown/renderer.ts     | 28 +++++++++++++--
 .../src/lib/styles/utils/twoslash.css         | 16 +++++++++
 5 files changed, 75 insertions(+), 15 deletions(-)

diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index b29497c034..d4ab644baa 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -99,7 +99,7 @@
 			margin-top: 5rem;
 		}
 
-		code,
+		code:not(pre *),
 		kbd {
 			white-space: pre-wrap;
 			padding: 0.2rem 0.4rem;
diff --git a/packages/site-kit/src/lib/docs/Tooltip.svelte b/packages/site-kit/src/lib/docs/Tooltip.svelte
index 47150d6676..ba1990a39c 100644
--- a/packages/site-kit/src/lib/docs/Tooltip.svelte
+++ b/packages/site-kit/src/lib/docs/Tooltip.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { tick } from 'svelte';
+	import Text from '../components/Text.svelte';
 
 	let {
 		html = '',
@@ -39,30 +40,43 @@
 	style:--offset="{Math.min(-10, window.innerWidth - (x + width + 10))}px"
 >
 	<div bind:this={tooltip} class="tooltip">
-		<span>{@html html}</span>
+		<Text>
+			<span>{@html html}</span>
+		</Text>
 	</div>
 </div>
 
 <style>
 	.tooltip-container {
-		--bg: var(--sk-theme-2);
+		--bg: var(--sk-back-2);
 		--arrow-size: 0.4rem;
 		position: absolute;
 		transform: translate(var(--offset), calc(2rem + var(--arrow-size)));
+		z-index: 2;
 	}
 
 	.tooltip {
 		margin: 0 2rem 0 0;
 		background-color: var(--bg);
-		color: #fff;
 		text-align: left;
-		padding: 0.4rem 0.6rem;
+		padding: 2rem;
 		border-radius: var(--sk-border-radius);
 		font-family: var(--sk-font-family-mono);
-		font-size: 1.2rem;
-		white-space: pre-wrap;
+		/* font-size: 1.2rem; */
+		/* white-space: pre-wrap; */
 		z-index: 100;
-		filter: drop-shadow(2px 4px 6px #67677866);
+		filter: var(--sk-shadow);
+		max-width: var(--sk-page-content-width);
+		max-height: 30rem;
+		overflow-y: auto;
+
+		:global {
+			p,
+			ol,
+			ul {
+				font: var(--sk-font-body-small);
+			}
+		}
 	}
 
 	.tooltip::after {
@@ -74,8 +88,14 @@
 		border-bottom-color: var(--bg);
 	}
 
-	.tooltip :global(a) {
+	/* .tooltip :global(a) {
 		color: white;
 		text-decoration: underline;
+	} */
+
+	span {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
 	}
 </style>
diff --git a/packages/site-kit/src/lib/docs/hover.ts b/packages/site-kit/src/lib/docs/hover.ts
index 458c6c8371..694062d32b 100644
--- a/packages/site-kit/src/lib/docs/hover.ts
+++ b/packages/site-kit/src/lib/docs/hover.ts
@@ -17,8 +17,8 @@ export function setupDocsHovers() {
 					tooltip = null;
 				}
 
-				const rect = target?.getBoundingClientRect();
-				const html = target?.innerHTML;
+				const rect = target.getBoundingClientRect();
+				const html = target.querySelector('.twoslash-popup-container')!.innerHTML;
 
 				const x = (rect.left + rect.right) / 2 + window.scrollX;
 				const y = rect.top + window.scrollY;
@@ -35,7 +35,7 @@ export function setupDocsHovers() {
 							},
 							onmouseleave: () => {
 								clearTimeout(timeout);
-								unmount(tooltip);
+								// unmount(tooltip);
 								tooltip = null;
 							}
 						}
@@ -48,7 +48,7 @@ export function setupDocsHovers() {
 			const target = event.target as HTMLElement;
 			if (target.classList?.contains('twoslash-hover')) {
 				timeout = setTimeout(() => {
-					unmount(tooltip);
+					// unmount(tooltip);
 					tooltip = null;
 				}, 200);
 			}
diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index eb260ca9bd..d22703a34b 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -185,11 +185,11 @@ const snippets = await create_snippet_cache();
 export async function render_content_markdown(
 	filename: string,
 	body: string,
-	options: { check?: boolean },
+	options?: { check?: boolean },
 	twoslashBanner?: TwoslashBanner
 ) {
 	const headings: string[] = [];
-	const { check = true } = options;
+	const { check = true } = options ?? {};
 
 	return await transform(body, {
 		async walkTokens(token) {
@@ -675,6 +675,30 @@ async function syntax_highlight({
 			});
 
 			html = html.replace(/ {27,}/g, () => redactions.shift()!);
+
+			if (check) {
+				// munge the twoslash output so that it renders sensibly
+				const replacements: Array<{ start: number; end: number; content: string }> = [];
+
+				for (const match of html.matchAll(/<div class="twoslash-popup-docs">([^]+?)<\/div>/g)) {
+					replacements.push({
+						start: match.index,
+						end: match.index + match[0].length,
+						content: await render_content_markdown('<twoslash>', match[1], { check: false })
+					});
+				}
+
+				while (replacements.length > 0) {
+					const { start, end, content } = replacements.pop()!;
+
+					html =
+						html.slice(0, start) +
+						'<div class="twoslash-popup-docs">' +
+						content +
+						'</div>' +
+						html.slice(end);
+				}
+			}
 		} catch (e) {
 			console.error((e as Error).message);
 			console.warn(prelude + redacted);
diff --git a/packages/site-kit/src/lib/styles/utils/twoslash.css b/packages/site-kit/src/lib/styles/utils/twoslash.css
index 2fefa12605..0c7578d1e7 100644
--- a/packages/site-kit/src/lib/styles/utils/twoslash.css
+++ b/packages/site-kit/src/lib/styles/utils/twoslash.css
@@ -10,3 +10,19 @@
 	visibility: hidden;
 	height: 0;
 }
+
+.twoslash-popup-container {
+	display: flex;
+	flex-direction: column;
+	font: var(--sk-font-mono);
+	gap: 1rem;
+}
+
+.twoslash-popup-code {
+	background: transparent !important;
+	margin: 0 !important;
+	font: var(--sk-font-mono);
+	display: block;
+	width: 100%;
+	padding: 0 !important;
+}

From ee31ac11cd835f49cde45b456a98f01bbe6fdffb Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 14 Oct 2024 15:55:41 -0400
Subject: [PATCH 2/8] various fixes and improvements

---
 packages/site-kit/src/lib/docs/Tooltip.svelte |  2 +-
 packages/site-kit/src/lib/docs/hover.ts       | 93 ++++++++++++-------
 .../src/lib/styles/utils/twoslash.css         | 10 ++
 3 files changed, 73 insertions(+), 32 deletions(-)

diff --git a/packages/site-kit/src/lib/docs/Tooltip.svelte b/packages/site-kit/src/lib/docs/Tooltip.svelte
index ba1990a39c..17b1c609fa 100644
--- a/packages/site-kit/src/lib/docs/Tooltip.svelte
+++ b/packages/site-kit/src/lib/docs/Tooltip.svelte
@@ -59,7 +59,7 @@
 		margin: 0 2rem 0 0;
 		background-color: var(--bg);
 		text-align: left;
-		padding: 2rem;
+		padding: 1.6rem;
 		border-radius: var(--sk-border-radius);
 		font-family: var(--sk-font-family-mono);
 		/* font-size: 1.2rem; */
diff --git a/packages/site-kit/src/lib/docs/hover.ts b/packages/site-kit/src/lib/docs/hover.ts
index 694062d32b..7e6b4de6b9 100644
--- a/packages/site-kit/src/lib/docs/hover.ts
+++ b/packages/site-kit/src/lib/docs/hover.ts
@@ -1,56 +1,87 @@
 import { mount, onMount, unmount } from 'svelte';
 import Tooltip from './Tooltip.svelte';
 
+const CLASSNAME = 'highlight';
+
 export function setupDocsHovers() {
 	onMount(() => {
 		let tooltip: any;
+		let hovered: HTMLSpanElement | null = null;
 		let timeout: NodeJS.Timeout;
 
+		function clear() {
+			if (!tooltip) return;
+
+			unmount(tooltip);
+			hovered?.classList.remove(CLASSNAME);
+			tooltip = hovered = null;
+		}
+
 		function over(event: MouseEvent) {
-			const target = event.target as HTMLElement;
+			if (event.buttons !== 0) return; // probably selecting
+
+			let target = event.target as HTMLSpanElement;
+
+			if (!target.classList?.contains('twoslash-hover')) {
+				return;
+			}
+
+			clearTimeout(timeout);
+
+			if (target === hovered) return;
 
-			if (target.classList?.contains('twoslash-hover')) {
-				clearTimeout(timeout);
+			clear();
 
-				if (tooltip) {
-					unmount(tooltip);
-					tooltip = null;
+			const container = target.querySelector('.twoslash-popup-container')!;
+
+			const code = container.querySelector('.twoslash-popup-code pre code');
+			if (code && code.children.length === 2) {
+				// for reasons I don't really understand, generated types are duplicated.
+				// this is the easiest way to fix it
+				const [a, b] = code.children;
+				if (a.outerHTML === b.outerHTML) {
+					b.remove();
 				}
+			}
 
-				const rect = target.getBoundingClientRect();
-				const html = target.querySelector('.twoslash-popup-container')!.innerHTML;
+			const html = container.innerHTML;
 
+			if (html) {
+				const rect = target.getBoundingClientRect();
 				const x = (rect.left + rect.right) / 2 + window.scrollX;
 				const y = rect.top + window.scrollY;
 
-				if (html) {
-					tooltip = mount(Tooltip, {
-						target: document.body,
-						props: {
-							html,
-							x,
-							y,
-							onmouseenter: () => {
-								clearTimeout(timeout);
-							},
-							onmouseleave: () => {
-								clearTimeout(timeout);
-								// unmount(tooltip);
-								tooltip = null;
-							}
+				tooltip = mount(Tooltip, {
+					target: document.body,
+					props: {
+						html,
+						x,
+						y,
+						onmouseenter: () => {
+							clearTimeout(timeout);
+						},
+						onmouseleave: () => {
+							clearTimeout(timeout);
+							timeout = setTimeout(clear, 0);
 						}
-					});
-				}
+					}
+				});
+
+				hovered = target;
+				hovered.classList.add(CLASSNAME);
 			}
 		}
 
 		function out(event: MouseEvent) {
-			const target = event.target as HTMLElement;
-			if (target.classList?.contains('twoslash-hover')) {
-				timeout = setTimeout(() => {
-					// unmount(tooltip);
-					tooltip = null;
-				}, 200);
+			let target = event.target as HTMLElement | null;
+
+			while (target) {
+				if (target.classList.contains('twoslash-hover')) {
+					timeout = setTimeout(clear, 0);
+					return;
+				}
+
+				target = target.parentElement;
 			}
 		}
 
diff --git a/packages/site-kit/src/lib/styles/utils/twoslash.css b/packages/site-kit/src/lib/styles/utils/twoslash.css
index 0c7578d1e7..74004015fe 100644
--- a/packages/site-kit/src/lib/styles/utils/twoslash.css
+++ b/packages/site-kit/src/lib/styles/utils/twoslash.css
@@ -1,6 +1,16 @@
 .twoslash-hover {
 	position: relative;
 
+	&.highlight::after {
+		/* ensure contiguous hover area */
+		content: '';
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: calc(100% + 1rem);
+	}
+
 	.twoslash-popup-container {
 		display: none;
 	}

From cf42b3d8d3d93ac2f52ab0a3549e878275e852f6 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 14 Oct 2024 16:30:53 -0400
Subject: [PATCH 3/8] fixes

---
 packages/site-kit/src/lib/docs/Tooltip.svelte | 13 +++++-
 .../site-kit/src/lib/markdown/renderer.ts     | 45 +++++++++++++++----
 2 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/packages/site-kit/src/lib/docs/Tooltip.svelte b/packages/site-kit/src/lib/docs/Tooltip.svelte
index 17b1c609fa..ee515fb990 100644
--- a/packages/site-kit/src/lib/docs/Tooltip.svelte
+++ b/packages/site-kit/src/lib/docs/Tooltip.svelte
@@ -61,7 +61,7 @@
 		text-align: left;
 		padding: 1.6rem;
 		border-radius: var(--sk-border-radius);
-		font-family: var(--sk-font-family-mono);
+		font: var(--sk-font-body-small);
 		/* font-size: 1.2rem; */
 		/* white-space: pre-wrap; */
 		z-index: 100;
@@ -76,6 +76,17 @@
 			ul {
 				font: var(--sk-font-body-small);
 			}
+
+			.tags {
+				display: grid;
+				grid-template-columns: 6rem 1fr;
+				align-items: baseline;
+
+				.tag,
+				.param {
+					font: var(--sk-font-mono);
+				}
+			}
 		}
 	}
 
diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index d22703a34b..e0e9e4e0df 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -3,6 +3,7 @@ import { createHash, Hash } from 'node:crypto';
 import fs from 'node:fs';
 import path from 'node:path';
 import ts from 'typescript';
+import * as marked from 'marked';
 import { codeToHtml, createCssVariablesTheme } from 'shiki';
 import { transformerTwoslash } from '@shikijs/twoslash';
 import { SHIKI_LANGUAGE_MAP, slugify, smart_quotes, transform } from './utils';
@@ -677,26 +678,54 @@ async function syntax_highlight({
 			html = html.replace(/ {27,}/g, () => redactions.shift()!);
 
 			if (check) {
-				// munge the twoslash output so that it renders sensibly
+				// munge the twoslash output so that it renders sensibly. the order of operations
+				// here is important — we need to work backwards, to avoid corrupting the offsets
 				const replacements: Array<{ start: number; end: number; content: string }> = [];
 
 				for (const match of html.matchAll(/<div class="twoslash-popup-docs">([^]+?)<\/div>/g)) {
+					const content = await render_content_markdown('<twoslash>', match[1], { check: false });
+
 					replacements.push({
 						start: match.index,
 						end: match.index + match[0].length,
-						content: await render_content_markdown('<twoslash>', match[1], { check: false })
+						content: '<div class="twoslash-popup-docs">' + content + '</div>'
 					});
 				}
 
 				while (replacements.length > 0) {
 					const { start, end, content } = replacements.pop()!;
+					html = html.slice(0, start) + content + html.slice(end);
+				}
+
+				for (const match of html.matchAll(
+					/<span class="twoslash-popup-docs-tag"><span class="twoslash-popup-docs-tag-name">([^]+?)<\/span><span class="twoslash-popup-docs-tag-value">([^]+?)<\/span><\/span>/g
+				)) {
+					const tag = match[1];
+					let value = match[2];
+
+					let content = `<span class="tag">${tag}</span><span class="value">`;
+
+					if (tag === '@param') {
+						const words = value.split(' ');
+						const param = words.shift();
+						value = words.join(' ');
+
+						content += `<span class="param">${param}</span> `;
+					}
+
+					content += marked.parseInline(value);
+					content += '</span>';
 
-					html =
-						html.slice(0, start) +
-						'<div class="twoslash-popup-docs">' +
-						content +
-						'</div>' +
-						html.slice(end);
+					replacements.push({
+						start: match.index,
+						end: match.index + match[0].length,
+						content: '<div class="tags">' + content + '</div>'
+					});
+				}
+
+				while (replacements.length > 0) {
+					const { start, end, content } = replacements.pop()!;
+					html = html.slice(0, start) + content + html.slice(end);
 				}
 			}
 		} catch (e) {

From 387e002a39c5590de8dd7796f43212f0b5e033c8 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 14 Oct 2024 17:20:39 -0400
Subject: [PATCH 4/8] ok i think we're good now

---
 packages/site-kit/src/lib/docs/Tooltip.svelte | 76 ++++++++++---------
 1 file changed, 42 insertions(+), 34 deletions(-)

diff --git a/packages/site-kit/src/lib/docs/Tooltip.svelte b/packages/site-kit/src/lib/docs/Tooltip.svelte
index ee515fb990..76b52a9682 100644
--- a/packages/site-kit/src/lib/docs/Tooltip.svelte
+++ b/packages/site-kit/src/lib/docs/Tooltip.svelte
@@ -2,31 +2,40 @@
 	import { tick } from 'svelte';
 	import Text from '../components/Text.svelte';
 
-	let {
-		html = '',
-		x = 0,
-		y = 0,
-		onmouseenter,
-		onmouseleave
-	}: {
-		html?: string;
-		x?: number;
-		y?: number;
-		onmouseenter?: (event: any) => void;
-		onmouseleave?: (event: any) => void;
-	} = $props();
-
-	let width = $state(1);
-	let tooltip = $state() as HTMLDivElement | undefined;
+	interface Props {
+		html: string;
+		x: number;
+		y: number;
+		onmouseenter: (event: any) => void;
+		onmouseleave: (event: any) => void;
+	}
+
+	let { html, x, y, onmouseenter, onmouseleave }: Props = $props();
+
+	let visible = $state(false);
+	let tooltip: HTMLDivElement;
+	let offset = $state(0);
 
 	// bit of a gross hack but it works — this prevents the
 	// tooltip from disappearing off the side of the screen
 	$effect(() => {
-		if (html && tooltip) {
-			tick().then(() => {
-				width = tooltip!.getBoundingClientRect().width;
-			});
-		}
+		(async () => {
+			// first, measure the window with the tooltip hidden
+			const width = window.innerWidth;
+
+			// then, display the tooltip
+			visible = true;
+			await tick();
+
+			// then, figure out how much padding we need
+			const container_width = parseFloat(getComputedStyle(tooltip.parentElement!).width);
+			const padding = (width - container_width) / 2;
+
+			// then, calculate the necessary offset to ensure the
+			// right edge of the tooltip is inside the padding
+			const rect = tooltip.getBoundingClientRect();
+			offset = Math.min(width - padding - rect.right, -20);
+		})();
 	});
 </script>
 
@@ -35,9 +44,10 @@
 	{onmouseleave}
 	role="tooltip"
 	class="tooltip-container"
+	class:visible
 	style:left="{x}px"
 	style:top="{y}px"
-	style:--offset="{Math.min(-10, window.innerWidth - (x + width + 10))}px"
+	style:--offset="{offset}px"
 >
 	<div bind:this={tooltip} class="tooltip">
 		<Text>
@@ -49,24 +59,27 @@
 <style>
 	.tooltip-container {
 		--bg: var(--sk-back-2);
-		--arrow-size: 0.4rem;
+		--arrow-size: 0.6rem;
+		display: none;
 		position: absolute;
 		transform: translate(var(--offset), calc(2rem + var(--arrow-size)));
 		z-index: 2;
+		filter: var(--sk-shadow);
+		width: calc(100vw - 2 * var(--sk-page-padding-side));
+
+		&.visible {
+			display: block;
+		}
 	}
 
 	.tooltip {
-		margin: 0 2rem 0 0;
 		background-color: var(--bg);
 		text-align: left;
 		padding: 1.6rem;
 		border-radius: var(--sk-border-radius);
 		font: var(--sk-font-body-small);
-		/* font-size: 1.2rem; */
-		/* white-space: pre-wrap; */
-		z-index: 100;
-		filter: var(--sk-shadow);
-		max-width: var(--sk-page-content-width);
+		display: inline-block;
+		max-width: min(var(--sk-page-content-width), calc(100vw - 2 * var(--sk-page-padding-side)));
 		max-height: 30rem;
 		overflow-y: auto;
 
@@ -99,11 +112,6 @@
 		border-bottom-color: var(--bg);
 	}
 
-	/* .tooltip :global(a) {
-		color: white;
-		text-decoration: underline;
-	} */
-
 	span {
 		display: flex;
 		flex-direction: column;

From df8c7ceb5baece0aabcbee7c7c45b129d0578561 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 14 Oct 2024 17:58:15 -0400
Subject: [PATCH 5/8] fix build

---
 apps/svelte.dev/package.json |  2 +-
 pnpm-lock.yaml               | 48 +++++++++++++++++++++++-------------
 2 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
index 3c5b747365..74b90edc89 100644
--- a/apps/svelte.dev/package.json
+++ b/apps/svelte.dev/package.json
@@ -64,7 +64,7 @@
 		"@supabase/supabase-js": "^2.43.4",
 		"@sveltejs/adapter-vercel": "^5.4.3",
 		"@sveltejs/enhanced-img": "^0.3.4",
-		"@sveltejs/kit": "^2.6.3",
+		"@sveltejs/kit": "^2.7.0",
 		"@sveltejs/site-kit": "workspace:*",
 		"@sveltejs/vite-plugin-svelte": "4.0.0-next.6",
 		"@types/cookie": "^0.6.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e296097944..b197e877bb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -73,7 +73,7 @@ importers:
         version: 1.22.0(typescript@5.5.4)
       '@sveltejs/amp':
         specifier: ^1.1.3
-        version: 1.1.3(@sveltejs/kit@2.6.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 1.1.3(@sveltejs/kit@2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/repl':
         specifier: workspace:*
         version: link:../../packages/repl
@@ -91,7 +91,7 @@ importers:
         version: 3.1.0
       '@vercel/speed-insights':
         specifier: ^1.0.0
-        version: 1.0.11(@sveltejs/kit@2.6.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)
+        version: 1.0.11(@sveltejs/kit@2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)
       '@webcontainer/api':
         specifier: ^1.1.5
         version: 1.1.9
@@ -149,13 +149,13 @@ importers:
         version: 2.43.4
       '@sveltejs/adapter-vercel':
         specifier: ^5.4.3
-        version: 5.4.3(@sveltejs/kit@2.6.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
+        version: 5.4.3(@sveltejs/kit@2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))
       '@sveltejs/enhanced-img':
         specifier: ^0.3.4
         version: 0.3.4(rollup@4.21.2)(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/kit':
-        specifier: ^2.6.3
-        version: 2.6.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+        specifier: ^2.7.0
+        version: 2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@sveltejs/site-kit':
         specifier: workspace:*
         version: link:../../packages/site-kit
@@ -1101,8 +1101,8 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
-  '@polka/url@1.0.0-next.25':
-    resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==}
+  '@polka/url@1.0.0-next.28':
+    resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==}
 
   '@replit/codemirror-lang-svelte@6.0.0':
     resolution: {integrity: sha512-U2OqqgMM6jKelL0GNWbAmqlu1S078zZNoBqlJBW+retTc5M4Mha6/Y2cf4SVg6ddgloJvmcSpt4hHrVoM4ePRA==}
@@ -1380,6 +1380,15 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.0
       vite: ^5.0.3
 
+  '@sveltejs/kit@2.7.0':
+    resolution: {integrity: sha512-4XyY1SCB/Eyz8E9G7SEBKViysYwVtDftuA7kyQ5bmuFNPWC1KZC4988rMvaJxhH2BbCTsbLPjNOZwiEGXt8/2g==}
+    engines: {node: '>=18.13'}
+    hasBin: true
+    peerDependencies:
+      '@sveltejs/vite-plugin-svelte': ^3.0.0 || ^4.0.0-next.1
+      svelte: ^4.0.0 || ^5.0.0-next.0
+      vite: ^5.0.3
+
   '@sveltejs/package@2.3.1':
     resolution: {integrity: sha512-JvR2J4ost1oCn1CSdqenYRwGX/1RX+7LN+VZ71aPnz3JAlIFaEKQd1pBxlb+OSQTfeugJO0W39gB9voAbBO5ow==}
     engines: {node: ^16.14 || >=18}
@@ -2694,6 +2703,9 @@ packages:
   set-cookie-parser@2.6.0:
     resolution: {integrity: sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==}
 
+  set-cookie-parser@2.7.0:
+    resolution: {integrity: sha512-lXLOiqpkUumhRdFF3k1osNXCy9akgx/dyPZ5p8qAg9seJzXr5ZrlqZuWIMuY6ejOsVLE6flJ5/h3lsn57fQ/PQ==}
+
   sharp@0.33.4:
     resolution: {integrity: sha512-7i/dt5kGl7qR4gwPRD2biwD2/SvBn3O04J77XKFgL2OnZtQw+AG9wnuS/csmu80nPRHLYE9E41fyEiG8nhH6/Q==}
     engines: {libvips: '>=8.15.2', node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@@ -3934,7 +3946,7 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.17.1
 
-  '@polka/url@1.0.0-next.25': {}
+  '@polka/url@1.0.0-next.28': {}
 
   '@replit/codemirror-lang-svelte@6.0.0(@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.28.0)(@lezer/common@1.2.2))(@codemirror/lang-css@6.2.1(@codemirror/view@6.28.0))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.2)(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.28.0)(@lezer/common@1.2.2)(@lezer/highlight@1.2.1)(@lezer/javascript@1.4.17)(@lezer/lr@1.4.1)':
     dependencies:
@@ -4170,18 +4182,18 @@ snapshots:
       '@sveltejs/kit': 2.6.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.260)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.260)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-vercel@5.4.3(@sveltejs/kit@2.6.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/adapter-vercel@5.4.3(@sveltejs/kit@2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.6.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@vercel/nft': 0.27.2
       esbuild: 0.21.5
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  '@sveltejs/amp@1.1.3(@sveltejs/kit@2.6.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
+  '@sveltejs/amp@1.1.3(@sveltejs/kit@2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))':
     dependencies:
-      '@sveltejs/kit': 2.6.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
 
   '@sveltejs/enhanced-img@0.3.4(rollup@4.21.2)(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
@@ -4211,7 +4223,7 @@ snapshots:
       tiny-glob: 0.2.9
       vite: 5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)
 
-  '@sveltejs/kit@2.6.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
+  '@sveltejs/kit@2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))':
     dependencies:
       '@sveltejs/vite-plugin-svelte': 4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       '@types/cookie': 0.6.0
@@ -4223,7 +4235,7 @@ snapshots:
       magic-string: 0.30.11
       mrmime: 2.0.0
       sade: 1.8.1
-      set-cookie-parser: 2.6.0
+      set-cookie-parser: 2.7.0
       sirv: 2.0.4
       svelte: 5.0.0-next.264
       tiny-glob: 0.2.9
@@ -4382,9 +4394,9 @@ snapshots:
       - encoding
       - supports-color
 
-  '@vercel/speed-insights@1.0.11(@sveltejs/kit@2.6.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)':
+  '@vercel/speed-insights@1.0.11(@sveltejs/kit@2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)':
     optionalDependencies:
-      '@sveltejs/kit': 2.6.3(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
+      '@sveltejs/kit': 2.7.0(@sveltejs/vite-plugin-svelte@4.0.0-next.6(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1)))(svelte@5.0.0-next.264)(vite@5.4.7(@types/node@20.14.2)(lightningcss@1.25.1))
       svelte: 5.0.0-next.264
 
   '@vitest/expect@2.1.2':
@@ -5546,6 +5558,8 @@ snapshots:
 
   set-cookie-parser@2.6.0: {}
 
+  set-cookie-parser@2.7.0: {}
+
   sharp@0.33.4:
     dependencies:
       color: 4.2.3
@@ -5597,7 +5611,7 @@ snapshots:
 
   sirv@2.0.4:
     dependencies:
-      '@polka/url': 1.0.0-next.25
+      '@polka/url': 1.0.0-next.28
       mrmime: 2.0.0
       totalist: 3.0.1
 

From 4dfad2ef38732d3a69ee0729e4068f9c93c73332 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 14 Oct 2024 18:07:10 -0400
Subject: [PATCH 6/8] fix some css

---
 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 10707a6793..c8946afac6 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -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: drop-shadow(0px 0px 0 1px var(--sk-back-4));
+		--sk-shadow: drop-shadow(1px 2px 16px rgb(0 0 0 / 0.5));
 
 		--sk-theme-1-variant: hsl(15, 100%, 40%);
 		--sk-theme-2-variant: hsl(240, 8%, 35%);

From 20cc9134923c51b23154fbe64740b17b0ad07212 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 14 Oct 2024 18:11:23 -0400
Subject: [PATCH 7/8] fix

---
 packages/site-kit/src/lib/docs/Tooltip.svelte  |  2 +-
 packages/site-kit/src/lib/markdown/renderer.ts | 12 ++++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/site-kit/src/lib/docs/Tooltip.svelte b/packages/site-kit/src/lib/docs/Tooltip.svelte
index 76b52a9682..30acbe5beb 100644
--- a/packages/site-kit/src/lib/docs/Tooltip.svelte
+++ b/packages/site-kit/src/lib/docs/Tooltip.svelte
@@ -92,7 +92,7 @@
 
 			.tags {
 				display: grid;
-				grid-template-columns: 6rem 1fr;
+				grid-template-columns: 8rem 1fr;
 				align-items: baseline;
 
 				.tag,
diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index e0e9e4e0df..d5355076bd 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -705,11 +705,19 @@ async function syntax_highlight({
 
 					let content = `<span class="tag">${tag}</span><span class="value">`;
 
-					if (tag === '@param') {
+					if (tag === '@param' || tag === '@throws') {
 						const words = value.split(' ');
-						const param = words.shift();
+						let param = words.shift()!;
 						value = words.join(' ');
 
+						if (tag === '@throws') {
+							if (param[0] !== '{' || param[param.length - 1] !== '}') {
+								throw new Error('TODO robustify @throws handling');
+							}
+
+							param = param.slice(1, -1);
+						}
+
 						content += `<span class="param">${param}</span> `;
 					}
 

From 682ae9ea5d2319b2df89b55c3a73b50549490691 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 14 Oct 2024 19:48:51 -0400
Subject: [PATCH 8/8] please let this be the end of it

---
 packages/site-kit/src/lib/docs/Tooltip.svelte | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/site-kit/src/lib/docs/Tooltip.svelte b/packages/site-kit/src/lib/docs/Tooltip.svelte
index 30acbe5beb..5c82a7ba2d 100644
--- a/packages/site-kit/src/lib/docs/Tooltip.svelte
+++ b/packages/site-kit/src/lib/docs/Tooltip.svelte
@@ -16,12 +16,15 @@
 	let tooltip: HTMLDivElement;
 	let offset = $state(0);
 
+	// container starts out at maxium size, then shrinks to prevent page scrolling to the right
+	let width = $state('calc(100vw - 2 * var(--sk-page-padding-side))');
+
 	// bit of a gross hack but it works — this prevents the
 	// tooltip from disappearing off the side of the screen
 	$effect(() => {
 		(async () => {
 			// first, measure the window with the tooltip hidden
-			const width = window.innerWidth;
+			const window_width = window.innerWidth;
 
 			// then, display the tooltip
 			visible = true;
@@ -29,12 +32,14 @@
 
 			// then, figure out how much padding we need
 			const container_width = parseFloat(getComputedStyle(tooltip.parentElement!).width);
-			const padding = (width - container_width) / 2;
+			const padding = (window_width - container_width) / 2;
 
 			// then, calculate the necessary offset to ensure the
 			// right edge of the tooltip is inside the padding
 			const rect = tooltip.getBoundingClientRect();
-			offset = Math.min(width - padding - rect.right, -20);
+			offset = Math.min(window_width - padding - rect.right, -20);
+
+			width = rect.width + 'px';
 		})();
 	});
 </script>
@@ -45,6 +50,7 @@
 	role="tooltip"
 	class="tooltip-container"
 	class:visible
+	style:width
 	style:left="{x}px"
 	style:top="{y}px"
 	style:--offset="{offset}px"
@@ -65,7 +71,6 @@
 		transform: translate(var(--offset), calc(2rem + var(--arrow-size)));
 		z-index: 2;
 		filter: var(--sk-shadow);
-		width: calc(100vw - 2 * var(--sk-page-padding-side));
 
 		&.visible {
 			display: block;