add reset button to REPL

Author: 7nik

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

@@ -66,6 +66,8 @@
 
 	let current = $derived(workspace.current_compiled);
 
+	let resultTab: Viewer;
+
 	// TODO this effect is a bit of a code smell
 	$effect(() => {
 		if (current?.error) {
@@ -189,6 +191,15 @@
 			<button class="active">Markdown</button>
 		{:else}
 			<button aria-current={view === 'result'} onclick={() => (view = 'result')}>Result</button>
+			<button
+				aria-current={view === 'result'}
+				aria-label="Reset result"
+				class="reset-result"
+				onclick={() => {
+					view = 'result';
+					resultTab.reset();
+				}}
+			></button>
 			<button aria-current={view === 'js'} onclick={() => (view = 'js')}>JS output</button>
 			<button aria-current={view === 'css'} onclick={() => (view = 'css')}>CSS output</button>
 			<button aria-current={view === 'ast'} onclick={() => (view = 'ast')}>AST output</button>
@@ -199,6 +210,7 @@
 <!-- component viewer -->
 <div class="tab-content" class:visible={!is_markdown && view === 'result'}>
 	<Viewer
+		bind:this={resultTab}
 		bind:error={runtimeError}
 		{status}
 		{relaxed}
@@ -278,6 +290,18 @@
 		&[aria-current='true'] {
 			border-bottom: 1px solid var(--sk-fg-accent);
 		}
+
+		&.reset-result {
+			width: 2em;
+			vertical-align: bottom;
+			background: url(./reset-light.svg) 50% 50% no-repeat;
+			background-size: 1em;
+			margin-left: -1ch;
+			cursor: pointer;
+			:root.dark & {
+				background-image: url(./reset-dark.svg);
+			}
+		}
 	}
 
 	.tab-content {

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

@@ -231,6 +231,10 @@
 		}
 	});
 
+	export const reset = () => {
+		if (ready) apply_bundle(bundle);
+	};
+
 	$effect(() => {
 		if (injectedCSS && proxy && ready) {
 			proxy.eval(