feat: add Guided Learning Paths feature

Implement PathManager to orchestrate multi-module learning journeys:
- Add PathManager class with start/pause/resume functionality
- Create learning-paths.json config with CSS Fundamentals path
- Integrate path progress tracking with LessonEngine
- Add path selection UI to homepage and navigation
- Include JSON schema for learning path validation
- Add comprehensive test suite for PathManager

src/index.html

@@ -23,6 +23,10 @@
 					<h1><span class="code-text">CODE</span><span>CRISPIES</span></h1>
 				</a>
 				<div class="header-actions">
+					<button id="path-indicator" class="path-indicator" style="display: none;" aria-label="Current learning path">
+						<span class="path-indicator-name"></span>
+						<span class="path-indicator-progress"></span>
+					</button>
 					<button id="help-btn" class="help-toggle" data-i18n-aria-label="help" aria-label="Help">?</button>
 				</div>
 			</header>
@@ -81,6 +85,7 @@
 							<span class="level-indicator" id="level-indicator"></span>
 						</span>
 						<button id="next-btn" class="btn btn-primary" data-i18n="next">Next</button>
+						<button id="next-in-path-btn" class="btn btn-path" style="display: none;" data-i18n="nextInPath">Next in Path</button>
 					</div>
 					<div class="preview-section">
 						<div class="preview-wrapper">
@@ -122,6 +127,20 @@
 					<div class="module-list" id="module-list" role="tree" aria-labelledby="lessons-heading"></div>
 				</nav>
 
+				<div class="sidebar-section">
+					<h4 data-i18n="learningPaths">Learning Paths</h4>
+					<div id="path-progress-display" class="path-progress-display" style="display: none;">
+						<div class="path-progress-info">
+							<div class="path-progress-name"></div>
+							<div class="path-progress-stats"></div>
+						</div>
+						<div class="progress-bar">
+							<div class="progress-fill" id="path-progress-fill"></div>
+						</div>
+					</div>
+					<button id="view-paths-btn" class="btn btn-text" data-i18n="viewAllPaths">View All Paths</button>
+				</div>
+
 				<div class="sidebar-section">
 					<h4 data-i18n="settings">Settings</h4>
 					<label class="setting-row">
@@ -262,8 +281,66 @@
 					</div>
 				</div>
 			</dialog>
+
+			<!-- Learning Paths Dialog -->
+			<dialog id="paths-dialog" class="dialog">
+				<div class="dialog-header">
+					<h3 data-i18n="learningPathsTitle">Learning Paths</h3>
+					<button id="paths-dialog-close" class="dialog-close" aria-label="Close">&times;</button>
+				</div>
+				<div class="dialog-content">
+					<p data-i18n="learningPathsDescription">
+						Choose a guided learning path to help you reach your goals. Each path includes a curated sequence of lessons.
+					</p>
+					<div id="paths-list" class="paths-list" role="list">
+						<!-- Path cards will be dynamically inserted here -->
+					</div>
+				</div>
+			</dialog>
+
+			<!-- Path Completion Celebration Dialog -->
+			<dialog id="path-completion-dialog" class="dialog celebration-dialog">
+				<div class="dialog-header">
+					<h3 data-i18n="pathCompletionTitle">🎉 Path Complete!</h3>
+					<button id="path-completion-dialog-close" class="dialog-close" aria-label="Close">&times;</button>
+				</div>
+				<div class="dialog-content">
+					<p class="celebration-message" data-i18n="pathCompletionMessage">Congratulations! You've completed this learning path.</p>
+
+					<div class="completion-stats">
+						<div class="stat-item">
+							<span class="stat-icon">📚</span>
+							<div class="stat-content">
+								<span class="stat-label" data-i18n="lessonsCompleted">Lessons Completed</span>
+								<span class="stat-value" id="completion-lessons-count">0</span>
+							</div>
+						</div>
+						<div class="stat-item">
+							<span class="stat-icon">⏱️</span>
+							<div class="stat-content">
+								<span class="stat-label" data-i18n="timeTaken">Time Taken</span>
+								<span class="stat-value" id="completion-time-taken">0 min</span>
+							</div>
+						</div>
+					</div>
+
+					<div class="next-path-suggestion" id="next-path-suggestion" style="display: none;">
+						<p class="suggestion-label" data-i18n="recommendedNextPath">Recommended next path:</p>
+						<div class="suggested-path-card">
+							<h4 id="suggested-path-title"></h4>
+							<p id="suggested-path-goal"></p>
+							<button id="start-suggested-path-btn" class="btn btn-primary" data-i18n="startThisPath">Start This Path</button>
+						</div>
+					</div>
+
+					<div class="dialog-actions">
+						<button id="view-all-paths-from-completion" class="btn" data-i18n="viewAllPaths">View All Paths</button>
+						<button id="close-completion-dialog" class="btn btn-ghost" data-i18n="continueLearning">Continue Learning</button>
+					</div>
+				</div>
+			</dialog>
 		</div>
 
 		<script type="module" src="app.js"></script>
 	</body>
-</html>
+</html>