wip

playground/src/lib/components/Playground.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
 	import type { ParseResult } from '../wasm';
+	import {
+		getTemplate,
+		listTemplates,
+		parseMarkdown,
+		parseMarkdownWithTemplate,
+		wasmReady
+	} from '../wasm';
+	import EditorPanel from './EditorPanel.svelte';
 
-	type StringArray = string[];
-	let templateValue = $state(``);
-	let templates = $state<StringArray>([]);
+	let templates = $state([] as string[]);
 
+	let templateValue = $state('');
 	let markdownValue = $state(`---
 _type: Recipe
 author.name: Max Richter
@@ -24,6 +31,15 @@ My favourite baguette recipe
 2. Bake the bread`);
 
 	let jsonOutput = $state('');
+	let detectedSchemaName = $derived.by(() => {
+		try {
+			const parsed = JSON.parse(jsonOutput);
+			return parsed['_schema'];
+		} catch (err) {
+			return undefined;
+		}
+	});
+
 	let timings = $state<ParseResult['timings'] | null>(null);
 	let status = $state<'success' | 'error' | undefined>(undefined);
 
@@ -77,7 +93,7 @@ My favourite baguette recipe
 		{#snippet headerActions()}
 			<select
 				onchange={(e) => loadTemplate(e.currentTarget.value)}
-				class="rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 shadow-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none"
+				class="rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
 			>
 				<option value="">Load a template</option>
 				{#each templates as template (template)}
@@ -102,5 +118,8 @@ My favourite baguette recipe
 		readonly={true}
 		{status}
 		subtitle="Parsed JSON output"
+		pillText={!templateValue && detectedSchemaName
+			? `Detected Template: ${detectedSchemaName}`
+			: undefined}
 	/>
 </div>