add AST toggle UI

Author: Rich-Harris

packages/repl/src/lib/Output/AstView.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Checkbox } from '@sveltejs/site-kit/components';
 	import Message from '../Message.svelte';
 	import AstNode from './AstNode.svelte';
 	import type { CompileResult } from 'svelte/compiler';
@@ -65,7 +66,20 @@
 			{/if}
 		</code>
 	</pre>
+
 	<Message kind="info">The AST is not public API and may change at any point in time</Message>
+
+	<label>
+		modern
+
+		<!-- TODO wire up -->
+		<Checkbox
+			checked={false}
+			onchange={(value) => {
+				// TODO
+			}}
+		/>
+	</label>
 </div>
 
 <style>
@@ -99,4 +113,14 @@
 		margin: 0;
 		list-style-type: none;
 	}
+
+	label {
+		position: absolute;
+		top: 1rem;
+		right: 1rem;
+		display: inline-flex;
+		gap: 1rem;
+		align-items: center;
+		font: var(--sk-font-ui-small);
+	}
 </style>

packages/site-kit/src/lib/components/Checkbox.svelte

@@ -12,8 +12,7 @@
 		/* display: block; */
 		position: relative;
 		height: 1em;
-		width: calc(100% - 0.6em);
-		max-width: 2em;
+		width: 2em;
 		top: -2px;
 		border-radius: 0.5em;
 		-webkit-appearance: none;