Add HTML export UI with dropdown menu and state management

- Top toolbar with "Export as..." dropdown menu (HTML format)
- Copy/Download buttons work in both markdown and export modes
- Export displays in editor sidebar (read-only)
- "Back to Edit" restores markdown without resetting content
- Main equation display stays visible throughout
- Simplified state management: no savedMarkdown variable
- Export mode blocks preview updates via isExportMode flag
- Comprehensive Playwright tests (5 tests, all passing)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: stared

index.html

@@ -58,7 +58,14 @@ <h1 id="equation-title">Interactive Equations</h1>
           <button id="toggle-editor-btn" class="toolbar-btn" title="Show/hide editor">
             <span class="icon">◀</span>
           </button>
-          <a id="source-link" class="toolbar-link" href="#" target="_blank" rel="noopener">View source</a>
+          <div class="export-dropdown">
+            <button id="export-btn" class="toolbar-btn" title="Export">Export as...</button>
+            <div id="export-menu" class="export-menu" style="display: none;">
+              <button class="export-option" data-format="html">HTML</button>
+            </div>
+          </div>
+          <button id="copy-btn" class="toolbar-btn" title="Copy to clipboard">Copy</button>
+          <button id="download-btn" class="toolbar-btn" title="Download file">Download</button>
           <a href="https://github.com/stared/equations-explained-colorfully" class="toolbar-link" target="_blank" rel="noopener">Contribute</a>
         </div>
         <div id="editor-container" class="editor-container"></div>

src/exporter.ts

@@ -415,15 +415,6 @@ function injectColorsIntoLatex(latex: string, termOrder: string[], colorScheme:
   return result;
 }
 
-/**
- * Convert hex color to format supported by KaTeX
- * KaTeX supports hex colors directly like #RRGGBB
- */
-function convertHexToLatexColor(hex: string): string {
-  // KaTeX supports hex colors directly
-  return hex;
-}
-
 /**
  * Apply colors to description HTML (spans with term-X classes)
  */

src/main.ts

@@ -5,7 +5,7 @@ import { CodeJar } from 'codejar';
 import Prism from 'prismjs';
 import './prism-custom';
 import { applyTermColors, markErrors } from './prism-custom';
-import { exportContent, type ExportFormat, type ColorScheme as ExportColorScheme } from './exporter';
+import { exportContent, getFileExtension, type ExportFormat, type ColorScheme as ExportColorScheme } from './exporter';
 
 // Equation metadata
 interface EquationInfo {
@@ -74,6 +74,7 @@ let parsedContent: ParsedContent | null = null;
 let editor: any = null;
 let currentMarkdown = '';
 let previewTimeout: number | null = null;
+let isExportMode = false;
 
 function applyColorScheme(schemeName: string) {
   const scheme = colorSchemes[schemeName];
@@ -345,6 +346,11 @@ function initializeEditor() {
 
   // Update preview on change (debounced)
   editor.onUpdate((code: string) => {
+    // Don't update preview when in export mode
+    if (isExportMode) {
+      return;
+    }
+
     currentMarkdown = code;
 
     // Clear previous timeout
@@ -433,6 +439,123 @@ function setupEditorControls() {
   }
 }
 
+function setupExportUI() {
+  const exportBtn = document.getElementById('export-btn');
+  const exportMenu = document.getElementById('export-menu');
+  const copyBtn = document.getElementById('copy-btn');
+  const downloadBtn = document.getElementById('download-btn');
+  const editorContainer = document.getElementById('editor-container');
+
+  let currentExport = '';
+  let currentFormat: ExportFormat = 'html';
+
+  // Toggle export menu
+  if (exportBtn && exportMenu) {
+    exportBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+
+      if (isExportMode) {
+        // Back to edit mode
+        isExportMode = false;
+        if (editor) {
+          editor.updateCode(currentMarkdown);
+          editorContainer?.classList.remove('export-mode');
+          // Make editor editable again
+          const codeElement = editorContainer?.querySelector('code');
+          if (codeElement) {
+            (codeElement as HTMLElement).contentEditable = 'true';
+          }
+        }
+        exportBtn.textContent = 'Export as...';
+        exportMenu.style.display = 'none';
+      } else {
+        // Toggle menu
+        const isVisible = exportMenu.style.display === 'block';
+        exportMenu.style.display = isVisible ? 'none' : 'block';
+      }
+    });
+
+    // Close menu when clicking outside
+    document.addEventListener('click', () => {
+      if (!isExportMode) {
+        exportMenu.style.display = 'none';
+      }
+    });
+
+    // Handle format selection
+    exportMenu.querySelectorAll('.export-option').forEach((option) => {
+      option.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const format = (option as HTMLElement).dataset.format as ExportFormat;
+
+        try {
+          // Generate export
+          currentFormat = format;
+          currentExport = generateExport(format);
+
+          // Show export in editor (read-only)
+          if (editor) {
+            isExportMode = true;
+            editor.updateCode(currentExport);
+            editorContainer?.classList.add('export-mode');
+            // Make editor read-only
+            const codeElement = editorContainer?.querySelector('code');
+            if (codeElement) {
+              (codeElement as HTMLElement).contentEditable = 'false';
+            }
+            exportBtn.textContent = 'Back to Edit';
+            exportMenu.style.display = 'none';
+          }
+        } catch (error) {
+          console.error('Export failed:', error);
+          alert(`Export failed: ${error instanceof Error ? error.message : String(error)}`);
+        }
+      });
+    });
+  }
+
+  if (copyBtn) {
+    copyBtn.addEventListener('click', async () => {
+      try {
+        const contentToCopy = isExportMode ? currentExport : currentMarkdown;
+        await navigator.clipboard.writeText(contentToCopy);
+
+        const originalText = copyBtn.textContent;
+        copyBtn.textContent = 'Copied!';
+        setTimeout(() => {
+          copyBtn.textContent = originalText;
+        }, 2000);
+      } catch (error) {
+        console.error('Copy failed:', error);
+        alert('Failed to copy to clipboard');
+      }
+    });
+  }
+
+  if (downloadBtn) {
+    downloadBtn.addEventListener('click', () => {
+      try {
+        const content = isExportMode ? currentExport : currentMarkdown;
+        const extension = isExportMode ? getFileExtension(currentFormat) : 'md';
+        const mimeType = isExportMode ? 'text/html' : 'text/markdown';
+
+        const blob = new Blob([content], { type: mimeType });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${parsedContent?.title || 'equation'}.${extension}`.toLowerCase().replace(/[^a-z0-9.]+/g, '-');
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+      } catch (error) {
+        console.error('Download failed:', error);
+        alert('Failed to download file');
+      }
+    });
+  }
+}
+
 /**
  * Generate export for current content
  * UI will be added in Commit 6
@@ -466,6 +589,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     // Initialize editor
     initializeEditor();
     setupEditorControls();
+    setupExportUI();
 
     // Load equation from URL hash or default
     const initialEquation = getEquationFromHash();

src/style.css

@@ -251,15 +251,16 @@ h1 {
   padding: 0;
   border: none;
   background: none;
-  color: var(--text-color);
-  font-size: 1rem;
+  color: #6b7280;
+  font-size: 0.875rem;
   cursor: pointer;
   font-family: inherit;
-  transition: opacity 0.2s ease;
+  transition: color 0.2s ease;
+  white-space: nowrap;
 }
 
 .toolbar-btn:hover {
-  opacity: 0.6;
+  color: var(--text-color);
 }
 
 .toolbar-link {
@@ -340,6 +341,48 @@ h1 {
   text-underline-offset: 3px;
 }
 
+/* Export dropdown */
+.export-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.export-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background-color: #ffffff;
+  border: 1px solid var(--border-color);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  min-width: 120px;
+  margin-top: 0.25rem;
+}
+
+.export-option {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 1rem;
+  border: none;
+  background: none;
+  color: var(--text-color);
+  font-size: 0.875rem;
+  cursor: pointer;
+  font-family: inherit;
+  text-align: left;
+  transition: background-color 0.2s ease;
+}
+
+.export-option:hover {
+  background-color: #f9fafb;
+}
+
+/* Editor in export mode */
+.editor-container.export-mode code {
+  color: #6a737d;
+  font-size: 0.75rem;
+}
+
 /* Responsive design */
 @media (max-width: 1200px) {
   .editor-sidebar {