feat(01-04): wire lesson screen UI with keyboard and falling letters

- Lesson screen HTML with letter-area and keyboard containers
- initLessonScreen: renders keyboard, shows letters, handles keypress
- Correct key dissolves letter with animation, advances to next
- Wrong key does nothing (per D-03), correct key stays highlighted
- startLesson in app.ts: manages lesson lifecycle and cleanup
- onComplete: updates progress, unlocks next level, saves to IndexedDB
- CSS: floating letter animation, dissolve effect on correct press

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/ui/screens.ts

@@ -6,6 +6,12 @@ import type {
 } from "../types";
 import { companions } from "../companion/characters";
 import { saveProgress } from "../storage/db";
+import {
+	createExerciseState,
+	handleKeyPress,
+	getCurrentLetter,
+} from "../game/typing";
+import { renderKeyboard, highlightKey, pressKey } from "../game/keyboard";
 
 export function initWelcomeScreen(
 	db: IDBDatabase,
@@ -67,3 +73,67 @@ export function initWelcomeScreen(
 		navigateTo("forest");
 	});
 }
+
+export function initLessonScreen(
+	_db: IDBDatabase,
+	level: number,
+	layout: KeyboardLayout,
+	onComplete: (level: number) => void,
+): () => void {
+	const letterArea = document.getElementById("letter-area")!;
+	const keyboardContainer = document.getElementById("lesson-keyboard")!;
+	const state = createExerciseState(level);
+
+	// Render keyboard
+	renderKeyboard(keyboardContainer, layout, level);
+
+	// Show current letter
+	function showCurrentLetter(): void {
+		const letter = getCurrentLetter(state);
+		if (!letter) return;
+		letterArea.innerHTML = "";
+		const letterEl = document.createElement("div");
+		letterEl.className = "falling-letter";
+		letterEl.textContent = letter === " " ? "\u2423" : letter.toUpperCase();
+		letterArea.appendChild(letterEl);
+		highlightKey(letter);
+	}
+
+	showCurrentLetter();
+
+	// Keyboard handler
+	function onKeyDown(e: KeyboardEvent): void {
+		// Ignore modifier keys, function keys, etc.
+		if (e.key.length > 1 && e.key !== " ") return;
+		e.preventDefault();
+
+		const result = handleKeyPress(state, e.key);
+		pressKey(e.key);
+
+		if (result.correct) {
+			// Correct: dissolve letter with animation
+			const currentEl = letterArea.querySelector(".falling-letter");
+			if (currentEl) {
+				currentEl.classList.add("falling-letter--dissolve");
+			}
+
+			if (result.exerciseComplete) {
+				// Lesson complete
+				document.removeEventListener("keydown", onKeyDown);
+				onComplete(level);
+			} else {
+				// Show next letter after brief delay
+				setTimeout(() => showCurrentLetter(), 300);
+			}
+		}
+		// Wrong: do nothing to letter (per D-03), correct key already highlighted
+	}
+
+	document.addEventListener("keydown", onKeyDown);
+
+	// Return cleanup function
+	return () => {
+		document.removeEventListener("keydown", onKeyDown);
+		letterArea.innerHTML = "";
+	};
+}