improve error handling with 'builder'-type structure

src/lib/ErrorBox.svelte

@@ -1,18 +1,28 @@
 <script lang="ts">
 	import type { ClassValue } from 'svelte/elements';
-	import type { ErrorMessage } from './error';
+	import { ErrorMessage, type RawError } from './error';
 
 	interface Props {
-		error: ErrorMessage | null;
+		/** Error in the form of an ErrorMessage */
+		error?: ErrorMessage | null;
+		/** Raw error that can be converted to an ErrorMessage */
+		rawError?: RawError | null;
+		/** Additional CSS classes for the error box */
 		class?: ClassValue | null;
 	}
 
-	let { error, class: classValue }: Props = $props();
+	let { error, rawError, class: classValue }: Props = $props();
+
+	let errorMessage = $derived.by(() => {
+		if (error) return error;
+		if (rawError) return new ErrorMessage(rawError);
+	});
 </script>
 
-{#if error}
-	<!-- eslint-disable svelte/no-at-html-tags -->
+{#if errorMessage && errorMessage.hasError()}
 	<div class={['bg-sui-accent text-sui-background my-4 rounded-xs px-6 py-4', classValue]}>
-		{@html error.message}
+		{#each errorMessage.lines as line}
+			<p>{line}</p>
+		{/each}
 	</div>
 {/if}