feat: some experiments

playground/src/lib/components/EditorPanel.svelte

@@ -15,6 +15,7 @@
 		children?: Snippet;
 		headerActions?: Snippet;
 		subtitle?: string;
+		error?: string;
 		status?: 'success' | 'error' | 'indeterminate';
 		timing?: number;
 		pillText?: string;
@@ -23,6 +24,7 @@
 
 	let {
 		title,
+		error,
 		value = $bindable(),
 		placeholder = '',
 		readonly = false,
@@ -69,21 +71,20 @@
 			<div class="ml-4 text-xs text-gray-500">{timing}ms</div>
 		{/if}
 	</div>
-	<div class="group relative flex flex-1 flex-col overflow-hidden">
-		<div class="flex-1 overflow-auto">
-			<CodeMirror
-				bind:value
-				extensions={[basicSetup, langExtension].filter(Boolean) as Extension[]}
-				{placeholder}
-				{readonly}
-				class="text-sm"
-			/>
-		</div>
 
-		<div
-			class="pointer-events-none absolute inset-0 bg-black opacity-0 transition-opacity duration-200 group-hover:opacity-5"
-		></div>
-	</div>
+	{#if error}
+		<div class="border-b border-gray-200 bg-red-300 p-4 text-xs">
+			<pre>{error}</pre>
+		</div>
+	{/if}
+
+	<CodeMirror
+		bind:value
+		extensions={[basicSetup, langExtension].filter(Boolean) as Extension[]}
+		{placeholder}
+		{readonly}
+		class="text-sm"
+	/>
 
 	{#if children}
 		{@render children()}

playground/src/lib/components/Playground.svelte

@@ -4,7 +4,6 @@
 	import {
 		getTemplate,
 		listTemplates,
-		matchBlocks,
 		parseMarkdown,
 		parseMarkdownWithTemplate,
 		wasmReady,
@@ -57,6 +56,7 @@ My favourite baguette recipe
 	let timings = $state<ParseResultSuccess['timings'] | null>(null);
 	let templateStatus = $state<'success' | 'error' | 'indeterminate' | undefined>(undefined);
 	let dataStatus = $state<'success' | 'error' | 'indeterminate' | undefined>(undefined);
+	let templateError = $state<string | undefined>();
 
 	$effect(() => {
 		if (typeof window !== 'undefined') {
@@ -91,11 +91,13 @@ My favourite baguette recipe
 				: parseMarkdown(markdownValue);
 
 			if ('error' in result) {
-				jsonOutput = result.error;
+				jsonOutput = '';
 				if (result.error.startsWith('failed to compile template')) {
+					templateError = result.error.replaceAll(' -> ', '\n ⟶ ');
 					templateStatus = 'error';
 					dataStatus = 'indeterminate';
 				} else {
+					templateError = undefined;
 					templateStatus = undefined;
 					dataStatus = 'error';
 				}
@@ -138,6 +140,7 @@ My favourite baguette recipe
 			title="Template"
 			bind:value={templateValue}
 			placeholder="Enter your Marka template here..."
+			error={templateError}
 			status={templateStatus}
 			timing={timings?.template_compilation}
 			subtitle="Define your mapping schema"