Monaco Diff Viewer POC-4: Comprehensive (File Loading + Theme Sync)

This page validates the production-ready component combining file loading and theme synchronization.

Test Case 1: File Loading with Theme Sync

Expected: Diff renders with markdown files, theme matches VitePress toggle

Test Instructions:

1. Verify diff renders with content from both files
2. Click VitePress theme toggle (top right)
3. Verify Monaco theme updates immediately

---

Test Case 2: Props-Based Content with Theme Sync

Expected: Diff renders with inline content, theme switches work

Test Instructions:

1. Verify diff renders with JavaScript syntax highlighting
2. Toggle theme multiple times
3. Verify no console errors

---

Test Case 3: Missing File Error

Expected: Error message displayed, theme toggle still works

---

Test Case 4: Invalid Prop Combination Error

Expected: Error message displayed

---

Test Case 5: Multi-Language Syntax Highlighting (POC-6)

Expected: Dropdown selector loads all 8 languages with syntax highlighting

Select Language:TypeScriptJavaScriptVueHTMLCSSJSONYAMLMarkdownCurrent: TypeScript

Test Instructions:

1. Select each language from dropdown
2. Verify syntax highlighting differs between languages
3. Verify diff highlighting (green/red) visible
4. Toggle VitePress theme to verify consistency
5. Check console for errors