From f3a819362ede6dfe5ad9e212c8423b632fe18668 Mon Sep 17 00:00:00 2001
From: 7nik <kifiranet@gmail.com>
Date: Mon, 14 Apr 2025 16:43:59 +0300
Subject: [PATCH 1/2] add reset button to REPL

---
 packages/repl/src/lib/Output/Output.svelte   | 24 ++++++++++++++++++++
 packages/repl/src/lib/Output/Viewer.svelte   |  4 ++++
 packages/repl/src/lib/Output/reset-dark.svg  |  4 ++++
 packages/repl/src/lib/Output/reset-light.svg |  4 ++++
 4 files changed, 36 insertions(+)
 create mode 100644 packages/repl/src/lib/Output/reset-dark.svg
 create mode 100644 packages/repl/src/lib/Output/reset-light.svg

diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
index bccdfc064b..1950854529 100644
--- a/packages/repl/src/lib/Output/Output.svelte
+++ b/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 {
diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte
index ddb224bf81..44684f69ad 100644
--- a/packages/repl/src/lib/Output/Viewer.svelte
+++ b/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(
diff --git a/packages/repl/src/lib/Output/reset-dark.svg b/packages/repl/src/lib/Output/reset-dark.svg
new file mode 100644
index 0000000000..7ab0bb4529
--- /dev/null
+++ b/packages/repl/src/lib/Output/reset-dark.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.364 18.364C16.7353 19.9927 14.4853 21 12 21C7.02945 21 3 16.9706 3 12C3 7.02945 7.02945 3 12 3C14.4853 3 16.7353 4.00736 18.364 5.63605C19.193 6.46505 21 8.5 21 8.5" stroke="#d4d4d4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 4V8.5H16.5" stroke="#d4d4d4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/repl/src/lib/Output/reset-light.svg b/packages/repl/src/lib/Output/reset-light.svg
new file mode 100644
index 0000000000..55faa02fa3
--- /dev/null
+++ b/packages/repl/src/lib/Output/reset-light.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.364 18.364C16.7353 19.9927 14.4853 21 12 21C7.02945 21 3 16.9706 3 12C3 7.02945 7.02945 3 12 3C14.4853 3 16.7353 4.00736 18.364 5.63605C19.193 6.46505 21 8.5 21 8.5" stroke="#262626" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 4V8.5H16.5" stroke="#262626" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

From b72abad19fe4e251c8a6df0fd0e2567fbfc8411a Mon Sep 17 00:00:00 2001
From: 7nik <kifiranet@gmail.com>
Date: Thu, 17 Apr 2025 01:00:40 +0300
Subject: [PATCH 2/2] reuse existing icon

---
 packages/repl/src/lib/Output/Output.svelte   | 16 ++++++++--------
 packages/repl/src/lib/Output/reset-dark.svg  |  4 ----
 packages/repl/src/lib/Output/reset-light.svg |  4 ----
 3 files changed, 8 insertions(+), 16 deletions(-)
 delete mode 100644 packages/repl/src/lib/Output/reset-dark.svg
 delete mode 100644 packages/repl/src/lib/Output/reset-light.svg

diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
index 1950854529..f687228487 100644
--- a/packages/repl/src/lib/Output/Output.svelte
+++ b/packages/repl/src/lib/Output/Output.svelte
@@ -198,8 +198,8 @@
 				onclick={() => {
 					view = 'result';
 					resultTab.reset();
-				}}
-			></button>
+				}}><span class="icon"></span></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>
@@ -292,14 +292,14 @@
 		}
 
 		&.reset-result {
-			width: 2em;
+			height: 100%;
 			vertical-align: bottom;
-			background: url(./reset-light.svg) 50% 50% no-repeat;
-			background-size: 1em;
-			margin-left: -1ch;
+			margin-left: -1em;
 			cursor: pointer;
-			:root.dark & {
-				background-image: url(./reset-dark.svg);
+
+			.icon {
+				background: currentColor;
+				mask: url(icons/refresh) 50% / 1.2em no-repeat;
 			}
 		}
 	}
diff --git a/packages/repl/src/lib/Output/reset-dark.svg b/packages/repl/src/lib/Output/reset-dark.svg
deleted file mode 100644
index 7ab0bb4529..0000000000
--- a/packages/repl/src/lib/Output/reset-dark.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.364 18.364C16.7353 19.9927 14.4853 21 12 21C7.02945 21 3 16.9706 3 12C3 7.02945 7.02945 3 12 3C14.4853 3 16.7353 4.00736 18.364 5.63605C19.193 6.46505 21 8.5 21 8.5" stroke="#d4d4d4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M21 4V8.5H16.5" stroke="#d4d4d4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/packages/repl/src/lib/Output/reset-light.svg b/packages/repl/src/lib/Output/reset-light.svg
deleted file mode 100644
index 55faa02fa3..0000000000
--- a/packages/repl/src/lib/Output/reset-light.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.364 18.364C16.7353 19.9927 14.4853 21 12 21C7.02945 21 3 16.9706 3 12C3 7.02945 7.02945 3 12 3C14.4853 3 16.7353 4.00736 18.364 5.63605C19.193 6.46505 21 8.5 21 8.5" stroke="#262626" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M21 4V8.5H16.5" stroke="#262626" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>