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>

index.html

@@ -28,7 +28,16 @@
 			</div>
 		</section>
 		<section id="screen-forest" class="screen"></section>
-		<section id="screen-lesson" class="screen"></section>
+		<section id="screen-lesson" class="screen">
+			<div class="lesson">
+				<div class="lesson__letter-area" id="letter-area">
+					<!-- Current letter appears here -->
+				</div>
+				<div class="lesson__keyboard" id="lesson-keyboard">
+					<!-- Keyboard rendered here -->
+				</div>
+			</div>
+		</section>
 		<section id="screen-reward" class="screen"></section>
 		<section id="screen-parent" class="screen"></section>
 

src/app.ts

@@ -1,8 +1,9 @@
-import type { ScreenName } from "./types";
+import type { ScreenName, KeyboardLayout } from "./types";
-import { openDB, getProgress } from "./storage/db";
+import { openDB, getProgress, saveProgress } from "./storage/db";
-import { initWelcomeScreen } from "./ui/screens";
+import { initWelcomeScreen, initLessonScreen } from "./ui/screens";
 
 let db: IDBDatabase;
+let lessonCleanup: (() => void) | null = null;
 
 export function showScreen(name: ScreenName): void {
 	document.querySelectorAll(".screen").forEach((el) => {
@@ -18,14 +19,57 @@ export function getDB(): IDBDatabase {
 	return db;
 }
 
+export async function startLesson(
+	level: number,
+	layout: KeyboardLayout,
+): Promise<void> {
+	// Clean up previous lesson if any
+	if (lessonCleanup) {
+		lessonCleanup();
+		lessonCleanup = null;
+	}
+
+	showScreen("lesson");
+
+	lessonCleanup = initLessonScreen(db, level, layout, async (completedLevel: number) => {
+		// Update progress after lesson completion
+		const progress = await getProgress(db);
+		if (!progress) return;
+
+		// Add level to completedLevels if not already there
+		if (!progress.completedLevels.includes(completedLevel)) {
+			progress.completedLevels.push(completedLevel);
+		}
+
+		// Advance to next level if this was the current level (LEVL-02, LEVL-03)
+		if (completedLevel === progress.currentLevel) {
+			progress.currentLevel = completedLevel + 1;
+		}
+
+		// Increment session count
+		progress.totalSessions++;
+
+		// Add today's date if not already recorded
+		const today = new Date().toISOString().split("T")[0]!;
+		if (!progress.sessionDates.includes(today)) {
+			progress.sessionDates.push(today);
+		}
+
+		await saveProgress(db, progress);
+
+		// Navigate to forest (per D-07: skip reward in Phase 1)
+		showScreen("forest");
+	});
+}
+
 export async function initApp(): Promise<void> {
 	db = await openDB();
 	const progress = await getProgress(db);
 	if (progress && progress.selectedCharacter) {
-		// Returning user — skip welcome, go to forest
+		// Returning user -- go to forest
 		showScreen("forest");
 	} else {
-		// First time — show welcome
+		// First time -- show welcome
 		initWelcomeScreen(db, showScreen);
 		showScreen("welcome");
 	}

src/styles/main.css

@@ -162,6 +162,59 @@ h3 {
 	cursor: not-allowed;
 }
 
+/* Lesson screen */
+.lesson {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 2rem;
+	padding: 2rem;
+	min-height: 100vh;
+	background: var(--bg-cream);
+}
+
+.lesson__letter-area {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 200px;
+	height: 200px;
+}
+
+.falling-letter {
+	font-family: "Quicksand", sans-serif;
+	font-size: 5rem;
+	font-weight: 700;
+	color: var(--accent-green);
+	animation: letter-float 2s ease-in-out infinite;
+}
+
+@keyframes letter-float {
+	0%,
+	100% {
+		transform: translateY(0);
+	}
+	50% {
+		transform: translateY(-10px);
+	}
+}
+
+.falling-letter--dissolve {
+	animation: letter-dissolve 0.3s ease-out forwards;
+}
+
+@keyframes letter-dissolve {
+	0% {
+		transform: scale(1);
+		opacity: 1;
+	}
+	100% {
+		transform: scale(1.5);
+		opacity: 0;
+	}
+}
+
 /* Keyboard */
 .keyboard {
 	display: flex;

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 = "";
+	};
+}