wip

playground/src/lib/components/EditorPanel.svelte

@@ -11,6 +11,7 @@
 		subtitle?: string;
 		status?: 'success' | 'error';
 		timing?: number;
+		pillText?: string;
 	}
 
 	let {
@@ -22,7 +23,8 @@
 		headerActions,
 		subtitle,
 		status,
-		timing
+		timing,
+		pillText
 	}: Props = $props();
 </script>
 
@@ -60,7 +62,14 @@
 			</svg>
 		{/if}
 		<div class="flex-1">
-			<h2 class="text-sm font-semibold tracking-wide text-gray-900 uppercase">{title}</h2>
+			<h2 class="text-sm font-semibold tracking-wide text-gray-900 uppercase flex items-center">
+				{title}
+				{#if pillText}
+					<span class="ml-2 inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800">
+						{pillText}
+					</span>
+				{/if}
+			</h2>
 			{#if subtitle}
 				<p class="text-xs text-gray-500">{subtitle}</p>
 			{/if}

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 templates = $state([] as string[]);
-	let templateValue = $state(``);
-	let templates = $state<StringArray>([]);
 
+	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>