Use error overlay

sites/svelte-5-preview/src/lib/Output/ErrorOverlay.svelte

@@ -1,15 +1,15 @@
 <script>
 	import { get_repl_context } from '$lib/context';
 
-	/** @type {{error: import('svelte/compiler').CompileError}} */
-	let { error } = $props();
+	/** @type {{ error: {message: string, start?: {line: number, column: number, character: number}}, title: string }} */
+	let { error, title } = $props();
 
 	const { go_to_warning_pos } = get_repl_context();
 </script>
 
 <div class="error-overlay">
 	<div class="error">
-		<h2>Error compiling {error.filename ?? 'component'}</h2>
+		<h2>{title}</h2>
 		<pre><code>{error.message}</code></pre>
 
 		{#if error.start}

sites/svelte-5-preview/src/lib/Output/Viewer.svelte

@@ -42,10 +42,6 @@
 	let ready = false;
 	let inited = false;
 
-	let log_height = 90;
-	/** @type {number} */
-	let prev_height;
-
 	/** @type {import('./console/console').Log} */
 	let last_console_event;
 
@@ -234,15 +230,6 @@
 		}
 	}
 
-	function on_toggle_console() {
-		if (log_height < 90) {
-			prev_height = log_height;
-			log_height = 90;
-		} else {
-			log_height = prev_height || 45;
-		}
-	}
-
 	function clear_logs() {
 		current_log_group = logs = [];
 	}
@@ -271,7 +258,12 @@
 				></iframe>
 
 				{#if $bundle?.error}
-					<ErrorOverlay error={$bundle.error} />
+					<ErrorOverlay
+						error={$bundle.error}
+						title="Error compiling {$bundle.error.filename ?? 'component'}"
+					/>
+				{:else if error}
+					<ErrorOverlay {error} title="Runtime error" />
 				{/if}
 			</div>
 		{/snippet}
@@ -295,9 +287,7 @@
 	</PaneWithPanel>
 
 	<div class="overlay">
-		{#if error}
-			<Message kind="error" details={error} />
-		{:else if status || !$bundle}
+		{#if status || !$bundle}
 			<Message kind="info" truncate>{status || 'loading Svelte compiler...'}</Message>
 		{/if}
 	</div>