feat: add HTML lessons mode and side-by-side comparison UI

- Add HTML mode support with new validation types (element_exists,
  element_count, attribute_value, element_text, parent_child, sibling)
- Create 3 HTML lesson modules: Elements, Forms Basic, Forms Validation
- Implement side-by-side preview comparison (Your Output vs Expected)
- Add merge animation with "Perfect Match!" overlay on validation success
- Render expected output from solutionCode field in lesson JSON
- Update schema to support HTML mode and solutionCode
- Reorder modules: HTML first, then CSS, then Tailwind
- Update tests for new functionality

tests/unit/validator.test.js

@@ -36,7 +36,7 @@ describe("CSS Validator", () => {
 			const result = validateUserCode(userCode, lesson);
 
 			expect(result.isValid).toBe(true);
-			expect(result.message).toBe("Your code looks good!");
+			expect(result.message).toBe("Your CODE looks CRISPY!");
 		});
 
 		it('should validate "contains" rule correctly', () => {
@@ -225,3 +225,148 @@ describe("CSS Validator", () => {
 		});
 	});
 });
+
+describe("HTML Validator", () => {
+	describe("validateUserCode with mode: html", () => {
+		it("should validate element_exists correctly", () => {
+			const userHtml = "<p>Hello world</p>";
+			const lesson = {
+				mode: "html",
+				validations: [
+					{ type: "element_exists", value: "p", message: "Add a paragraph" }
+				]
+			};
+
+			const result = validateUserCode(userHtml, lesson);
+			expect(result.isValid).toBe(true);
+
+			const failResult = validateUserCode(userHtml, {
+				mode: "html",
+				validations: [
+					{ type: "element_exists", value: "div", message: "Add a div" }
+				]
+			});
+			expect(failResult.isValid).toBe(false);
+			expect(failResult.message).toBe("Add a div");
+		});
+
+		it("should validate element_count correctly", () => {
+			const userHtml = "<ul><li>One</li><li>Two</li><li>Three</li></ul>";
+			const lesson = {
+				mode: "html",
+				validations: [
+					{ type: "element_count", value: { selector: "li", count: 3 }, message: "Need 3 items" }
+				]
+			};
+
+			const result = validateUserCode(userHtml, lesson);
+			expect(result.isValid).toBe(true);
+
+			const failLesson = {
+				mode: "html",
+				validations: [
+					{ type: "element_count", value: { selector: "li", count: 5 }, message: "Need 5 items" }
+				]
+			};
+			const failResult = validateUserCode(userHtml, failLesson);
+			expect(failResult.isValid).toBe(false);
+		});
+
+		it("should validate element_count with min correctly", () => {
+			const userHtml = "<div><span>A</span><span>B</span></div>";
+			const lesson = {
+				mode: "html",
+				validations: [
+					{ type: "element_count", value: { selector: "span", min: 2 }, message: "Need at least 2 spans" }
+				]
+			};
+
+			const result = validateUserCode(userHtml, lesson);
+			expect(result.isValid).toBe(true);
+		});
+
+		it("should validate attribute_value correctly", () => {
+			const userHtml = '<input type="email" required>';
+			const lesson = {
+				mode: "html",
+				validations: [
+					{ type: "attribute_value", value: { selector: "input", attr: "type", value: "email" } }
+				]
+			};
+
+			const result = validateUserCode(userHtml, lesson);
+			expect(result.isValid).toBe(true);
+
+			// Test boolean attribute (required)
+			const boolLesson = {
+				mode: "html",
+				validations: [
+					{ type: "attribute_value", value: { selector: "input", attr: "required", value: true } }
+				]
+			};
+			const boolResult = validateUserCode(userHtml, boolLesson);
+			expect(boolResult.isValid).toBe(true);
+		});
+
+		it("should validate parent_child correctly", () => {
+			const userHtml = "<form><label>Name</label><input></form>";
+			const lesson = {
+				mode: "html",
+				validations: [
+					{ type: "parent_child", value: { parent: "form", child: "input" }, message: "Input should be inside form" }
+				]
+			};
+
+			const result = validateUserCode(userHtml, lesson);
+			expect(result.isValid).toBe(true);
+
+			const failHtml = "<label>Name</label><input>";
+			const failResult = validateUserCode(failHtml, lesson);
+			expect(failResult.isValid).toBe(false);
+		});
+
+		it("should validate element_text correctly", () => {
+			const userHtml = "<button>Submit</button>";
+			const lesson = {
+				mode: "html",
+				validations: [
+					{ type: "element_text", value: { selector: "button", text: "Submit" } }
+				]
+			};
+
+			const result = validateUserCode(userHtml, lesson);
+			expect(result.isValid).toBe(true);
+
+			const failLesson = {
+				mode: "html",
+				validations: [
+					{ type: "element_text", value: { selector: "button", text: "Cancel" }, message: "Button should say Cancel" }
+				]
+			};
+			const failResult = validateUserCode(userHtml, failLesson);
+			expect(failResult.isValid).toBe(false);
+		});
+
+		it("should validate contains for HTML mode", () => {
+			const userHtml = '<div class="container">Content</div>';
+			const lesson = {
+				mode: "html",
+				validations: [
+					{ type: "contains", value: "container" }
+				]
+			};
+
+			const result = validateUserCode(userHtml, lesson);
+			expect(result.isValid).toBe(true);
+		});
+
+		it("should pass with no validations in HTML mode", () => {
+			const userHtml = "<p>Hello</p>";
+			const lesson = { mode: "html" };
+
+			const result = validateUserCode(userHtml, lesson);
+			expect(result.isValid).toBe(true);
+			expect(result.message).toContain("No validations specified");
+		});
+	});
+});