From b12e8688590cfbe2ea03e4f576e6efec3102de10 Mon Sep 17 00:00:00 2001
From: Max Richter <git@max-richter.dev>
Date: Sat, 11 Oct 2025 11:49:07 +0200
Subject: [PATCH] feat: reorder playground

---
 .../src/lib/components/Playground.svelte      | 38 +++++++++----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/playground/src/lib/components/Playground.svelte b/playground/src/lib/components/Playground.svelte
index 7c10be6..3a25338 100644
--- a/playground/src/lib/components/Playground.svelte
+++ b/playground/src/lib/components/Playground.svelte
@@ -141,6 +141,24 @@ My favourite baguette recipe
 
 <div class="flex flex-1 overflow-hidden">
 	<div class="grid flex-1 grid-cols-1 overflow-hidden lg:grid-cols-3">
+		<EditorPanel
+			title="Markdown"
+			bind:value={markdownValue}
+			placeholder="Enter your markdown content here..."
+			timing={timings?.markdown_parsing}
+			subtitle="Your source content"
+			langExtension={markdown()}
+		>
+			{#snippet headerActions()}
+				<button
+					onclick={resetMarkdown}
+					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"
+				>
+					Reset
+				</button>
+			{/snippet}
+		</EditorPanel>
+
 		<EditorPanel
 			title="Template"
 			bind:value={templateValue}
@@ -154,7 +172,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)}
@@ -164,24 +182,6 @@ My favourite baguette recipe
 			{/snippet}
 		</EditorPanel>
 
-		<EditorPanel
-			title="Markdown"
-			bind:value={markdownValue}
-			placeholder="Enter your markdown content here..."
-			timing={timings?.markdown_parsing}
-			subtitle="Your source content"
-			langExtension={markdown()}
-		>
-			{#snippet headerActions()}
-				<button
-					onclick={resetMarkdown}
-					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"
-				>
-					Reset
-				</button>
-			{/snippet}
-		</EditorPanel>
-
 		<EditorPanel
 			title="Data"
 			value={jsonOutput}