From 7687360bb4733119b06bbece293f45c8342df82b Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Thu, 15 Jan 2026 12:26:44 +0100
Subject: [PATCH] fix: handle playground mode as HTML mode in preview rendering
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Playground mode was falling through to the CSS branch, wrapping user code
in a <style> tag. This prevented HTML elements and font styles from rendering
correctly. Now playground mode is treated like HTML mode, allowing templates
with <style> blocks and HTML content to work properly.

🤖 Generated with [Claude Code](https://claude.com/claude-code)
---
 src/impl/LessonEngine.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/impl/LessonEngine.js b/src/impl/LessonEngine.js
index 3c6c53f..bc3781d 100644
--- a/src/impl/LessonEngine.js
+++ b/src/impl/LessonEngine.js
@@ -206,8 +206,8 @@ export class LessonEngine {
 		const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
 		iframeDoc.open();
 
-		if (mode === "html") {
-			// For HTML mode, user code IS the HTML content
+		if (mode === "html" || mode === "playground") {
+			// For HTML/playground mode, user code IS the HTML content (may include <style> blocks)
 			const userHtml = this.userCode || "";
 			iframeDoc.write(`
       <!DOCTYPE html>
@@ -301,8 +301,8 @@ export class LessonEngine {
 		const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
 		iframeDoc.open();
 
-		if (mode === "html") {
-			// For HTML mode, solution code IS the HTML content
+		if (mode === "html" || mode === "playground") {
+			// For HTML/playground mode, solution code IS the HTML content
 			iframeDoc.write(`
       <!DOCTYPE html>
       <html>
