markpaper.js

'use strict';

/**
 * @file markpaper.js
 * @description A clean and academic Markdown renderer for the web.
 * Includes support for extended syntax (alerts, footnotes), KaTeX, PrismJS, and theme management.
 * @version 1.2.0
 */

// ============================================================================
// 1. CONFIGURATION & CONSTANTS
// ============================================================================

/**
 * Global configuration object containing whitelists and regex patterns.
 * @constant {Object}
 */
const CONFIG = {
  /**
   * List of HTML tags allowed in the final output.
   * Used by the sanitization function to prevent XSS attacks.
   */
  ALLOWED_TAGS: [
    'strong', 'b', 'em', 'i', 'u', 's', 'del', 'ins', 'mark',
    'span', 'div', 'p', 'br', 'hr', 'code', 'pre',
    'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
    'ul', 'ol', 'li', 'dl', 'dt', 'dd',
    'blockquote', 'q', 'cite',
    'table', 'thead', 'tbody', 'tr', 'th', 'td',
    'a', 'img', 'sub', 'sup', 'small', 'abbr', 'time',
    'figure', 'figcaption',
    'iframe', 'details', 'summary',
    // Allowed MathML/HTML tags generated by KaTeX
    'math', 'semantics', 'mrow', 'mi', 'mo', 'mn', 'msup', 'msub', 'annotation'
  ],

  /**
   * List of HTML attributes allowed on the tags above.
   */
  ALLOWED_ATTRIBUTES: [
    'class', 'id', 'style', 'title', 'lang', 'dir',
    'href', 'target', 'rel', // specific to <a>
    'src', 'alt', 'width', 'height', // specific to <img>
    'colspan', 'rowspan', // specific to <table>
    'datetime', 'cite', 'type', 'disabled', 'checked', // specific to <input>, <time>
    'frameborder', 'allow', 'allowfullscreen', 'loading', // video embeds
    'aria-hidden' // Accessibility for KaTeX
  ],

  /**
   * Regular expression patterns to identify Markdown syntax elements.
   * Compiled once here for performance efficiency.
   */
  PATTERNS: {
    METADATA: /^(\w+):\s*(.+)$/, // Metadata key: value
    H1: /^#\s+(.*)/, // # Title
    HEADING: /^(#{2,6})\s+(.*)/, // ##... Subtitles
    HR: /^(\*{3,}|-{3,}|_{3,})$/, // Horizontal Rule
    LIST_UL: /^(\s*)\*\s+(.*)$/, // Unordered list
    LIST_OL: /^(\s*)(-|\d+\.)\s+(.*)$/, // Ordered list
    CHECKBOX: /^\[([xX ]?)\]\s+(.*)$/, // Task list checkbox
    BLOCKQUOTE: /^> ?(.*)/, // Blockquote
    ALERT: /^\[!(NOTE|WARNING|IMPORTANT|TIP|CAUTION)\]$/, // GitHub-style alerts
    FENCE_START: /^(```+|````+)(\w*)/, // Code block start
    MATH_BLOCK_START: /^\$\$/, // Math block start/end
    TABLE_ROW: /^\s*\|?(.+)\|?\s*$/, // Table row
    IMAGE: /^!\[([^\]]*)\]\(([^)]+)\)/, // Image syntax
    FOOTNOTE_DEF: /^\[\^([^\]]+)\]:\s*(.+)$/, // Footnote definition
    // Regex for auto-embedding videos (standalone lines)
    VIDEO_YOUTUBE: /^https?:\/\/(?:www\.|m\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([\w-]+)(?:[\?&][\w=-]+)*$/,
    VIDEO_VIMEO: /^https?:\/\/(?:www\.)?vimeo\.com\/(\d+)$/,
    // Detect lines starting with Block HTML tags to prevent <p> wrapping
    BLOCK_HTML_START: /^\s*<\/?(dl|dt|dd|details|summary|div|figure|figcaption|iframe|video|audio)[\s>]/i
  },

  /**
   * Default values for CSS variables used in the theme system.
   */
  DEFAULTS: {
    '--font-base-size': '16px',
    '--text-color': '#212529',
    '--background-color': '#FFFFFF',
    '--accent-color': '#4a6a70',
    '--current-font-family': 'serif',
    '--border-color': '#e9ecef',
    '--modal-header-bg': '#f8f9fa',
    '--light-gray-color': '#f8f9fa',
    '--code-background': '#f8f9fa'
  }
};

// ============================================================================
// 2. PARSER CORE
// ============================================================================

/**
 * Main class responsible for parsing raw Markdown text into HTML.
 * It handles state management for nested blocks (lists, code, tables).
 */
class MarkPaperParser {
  /**
   * Initializes the parser.
   */
  constructor() {
    this.reset();
  }

  /**
   * Resets the internal state of the parser.
   * Must be called before parsing a new file.
   */
  reset() {
    this.html = '';
    this.globalFigureNum = 0;
    this.currentFileName = '';

    // Section Numbering State
    this.chapterNum = 0;
    this.sectionNum = 0;
    this.currentSectionLevel = 0; // 1=h1, 2=h2...

    // Footnote State
    this.footnotesDef = {};        // Stores footnote content (id -> content)
    this.sectionFootnotes = [];    // Tracks footnotes used in the current section

    // Block Context State
    this.state = {
      inCodeBlock: false, codeFence: '', codeLang: '', codeBuffer: [],
      inMathBlock: false, mathBuffer: [],
      inTable: false, tableHeader: null, tableRows: [],
      inBlockquote: false, blockquoteBuffer: [],
      inAlert: false, alertType: '', alertBuffer: [],
      listStack: [], listCounters: [] // Handles nested lists
    };
  }

  /**
   * The main method to convert Markdown to HTML.
   * @param {string} markdown - The raw Markdown text.
   * @param {string} fileName - The name of the file (used for metadata/footer).
   * @returns {string} - The compiled and sanitized HTML string.
   */
  parse(markdown, fileName = 'unknown file') {
    this.reset();
    this.currentFileName = fileName;

    const rawLines = markdown.split(/\r?\n/);
    // Preprocess to extract footnote definitions from the bottom/text
    const lines = this.preprocess(rawLines);

    for (let i = 0; i < lines.length; i++) {
      const line = lines[i].trimEnd();

      // 1. Handle Code Blocks (Highest priority)
      if (this.processCodeBlock(line)) continue;
      if (this.state.inCodeBlock) {
        this.state.codeBuffer.push(line);
        continue;
      }

      // 2. Handle Math Blocks
      if (this.processMathBlock(line)) continue;
      if (this.state.inMathBlock) {
        this.state.mathBuffer.push(line);
        continue;
      }

      // 3. Handle Empty Lines (Triggers block closures)
      if (line.trim() === '') {
        this.processEmptyLine();
        continue;
      }

      // 4. Handle Indented Code Blocks
      if (this.processIndentedCode(line)) continue;

      // 5. Handle Headings
      if (this.processHeadings(line, i, lines)) continue;

      // 6. Handle Horizontal Rules
      if (CONFIG.PATTERNS.HR.test(line.trim())) {
        this.closeAllBlocks();
        this.html += '<hr>\n';
        continue;
      }

      // 7. Handle Lists
      if (this.processLists(line)) continue;

      // 8. Handle Tables
      if (this.processTables(line, i, lines)) continue;

      // 9. Handle Blockquotes & Alerts
      if (this.processQuotesAndAlerts(line)) continue;

      // 10. Handle Standalone Images
      if (this.processStandaloneImage(line)) continue;

      // 11. Handle Video Embeds (YouTube/Vimeo)
      if (this.processMediaEmbeds(line)) continue;

      // 12. Handle Raw Block HTML
      if (this.processBlockHtml(line)) continue;

      // 13. Default: Paragraph
      // Close strictly block-level elements before starting a paragraph
      this.closeList();
      this.closeTable();
      this.closeBlockquote();
      this.closeAlert();

      this.html += `<p>${this.escapeInline(line)}</p>\n`;
    }

    // Final Cleanup (Close any open blocks at EOF)
    this.closeAllBlocks();
    this.appendSectionFootnotes();
    this.html += this.generateFooter();

    return this.html;
  }

  /**
   * Pre-processes lines to extract footnote definitions.
   * Definitions are stored and removed from the main flow.
   * @param {string[]} lines - The array of markdown lines.
   * @returns {string[]} - The filtered array of lines.
   */
  preprocess(lines) {
    const cleanedLines = [];
    for (let i = 0; i < lines.length; i++) {
      const line = lines[i];
      const fnMatch = line.match(CONFIG.PATTERNS.FOOTNOTE_DEF);
      if (fnMatch) {
        this.footnotesDef[fnMatch[1]] = fnMatch[2];
        continue;
      }
      cleanedLines.push(line);
    }
    return cleanedLines;
  }

  // --- Block Handlers ---

  /**
   * Detects and manages the state of code blocks (```).
   * @param {string} line - Current line.
   * @returns {boolean} - True if line was consumed.
   */
  processCodeBlock(line) {
    const match = line.match(CONFIG.PATTERNS.FENCE_START);
    if (match) {
      const fence = match[1];
      const lang = match[2];
      if (this.state.inCodeBlock) {
        // Check if closing fence matches opening fence
        if (fence === this.state.codeFence) {
          this.flushCodeBlock();
          return true;
        }
        return false;
      } else {
        // Start new block
        this.closeAllBlocks();
        this.state.inCodeBlock = true;
        this.state.codeFence = fence;
        this.state.codeLang = lang;
        this.state.codeBuffer = [];
        return true;
      }
    }
    return false;
  }

  /**
   * Detects and manages Math blocks ($$).
   * @param {string} line - Current line.
   * @returns {boolean} - True if line was consumed.
   */
  processMathBlock(line) {
    const match = line.match(CONFIG.PATTERNS.MATH_BLOCK_START);
    // Handle inline display math: $$...$$ on a single line
    const singleLineMatch = line.match(/^\$\$(.+)\$\$$/);
    if (singleLineMatch && !this.state.inMathBlock) {
      this.closeAllBlocks();
      this.html += this.renderKaTeX(singleLineMatch[1], true);
      return true;
    }
    if (match) {
      if (this.state.inMathBlock) {
        this.flushMathBlock();
        return true;
      } else {
        this.closeAllBlocks();
        this.state.inMathBlock = true;
        this.state.mathBuffer = [];
        return true;
      }
    }
    return false;
  }

  /**
   * Handles indented code blocks (4 spaces or tab).
   * @param {string} line - Current line.
   * @returns {boolean} - True if line was consumed.
   */
  processIndentedCode(line) {
    if ((line.startsWith('    ') || line.startsWith('\t')) &&
      !CONFIG.PATTERNS.LIST_UL.test(line) &&
      !CONFIG.PATTERNS.LIST_OL.test(line) &&
      !this.state.inMathBlock) {
      this.closeList();
      const codeText = line.replace(/^(    |\t)/, '');
      this.html += `<div class="code-block-container"><button class="copy-btn">Copy</button><pre><code class="language-plaintext">${this.escapeHTML(codeText)}</code></pre></div>\n`;
      return true;
    }
    return false;
  }

  /**
   * Processes headings (#) and metadata blocks at the top of the file.
   * @param {string} line - Current line.
   * @param {number} index - Current line index.
   * @param {string[]} lines - All lines (to read ahead for metadata).
   * @returns {boolean} - True if line was consumed.
   */
  processHeadings(line, index, lines) {
    const h1Match = line.match(CONFIG.PATTERNS.H1);
    if (h1Match) {
      this.closeAllBlocks();
      this.appendSectionFootnotes();
      this.currentSectionLevel = 1;
      let metadata = {};

      // Look ahead for metadata (author: ...)
      let k = index + 1;
      while (k < lines.length) {
        const nextLine = lines[k].trim();
        if (nextLine === '') { k++; continue; }
        const metaMatch = nextLine.match(CONFIG.PATTERNS.METADATA);
        if (metaMatch) {
          metadata[metaMatch[1]] = metaMatch[2];
          lines[k] = ''; // Consume line
          k++;
        } else { break; }
      }
      this.html += this.renderDocumentHeader(h1Match[1], metadata);
      return true;
    }

    const hMatch = line.match(CONFIG.PATTERNS.HEADING);
    if (hMatch) {
      this.closeAllBlocks();
      const level = hMatch[1].length;
      const text = hMatch[2];

      // Flush footnotes when section level changes appropriately
      if (level <= this.currentSectionLevel || this.currentSectionLevel >= 3) {
        this.appendSectionFootnotes();
      }
      this.currentSectionLevel = level;

      // Auto-numbering logic for H2 and H3
      let displayText = text;
      if (level === 2) {
        this.chapterNum++; this.sectionNum = 0;
        displayText = `${this.chapterNum} ${text}`;
      } else if (level === 3) {
        this.sectionNum++;
        displayText = `${this.chapterNum}.${this.sectionNum} ${text}`;
      }
      // Generate ID for TOC
      const id = `section-${this.chapterNum}-${this.sectionNum}`;
      this.html += `<h${level} id="${id}">${this.escapeInline(displayText)}</h${level}>\n`;
      return true;
    }
    return false;
  }

  /**
   * Processes unordered and ordered lists, including nesting.
   * Uses adaptive indentation to prevent numbering gaps.
   * @param {string} line - Current line.
   * @returns {boolean} - True if line was consumed.
   */
  processLists(line) {
    let match, type, content;
    const ulMatch = line.match(CONFIG.PATTERNS.LIST_UL);
    const olMatch = line.match(CONFIG.PATTERNS.LIST_OL);

    if (ulMatch) { match = ulMatch; type = 'ul'; content = match[2]; }
    else if (olMatch) { match = olMatch; type = 'ol'; content = match[3]; }
    else { return false; }

    this.closeBlockquote(); this.closeAlert(); this.closeTable();

    const indent = match[1].length;

    // Adaptive Indentation Logic:
    // Instead of hardcoding "2 spaces = 1 level", we compare with the current stack
    let targetLevel = 0;

    if (this.state.listStack.length > 0) {
      // Find the deepest list in the stack that has indentation <= current line
      let bestMatchIndex = -1;

      for (let i = this.state.listStack.length - 1; i >= 0; i--) {
        const stackItem = this.state.listStack[i];
        if (indent > stackItem.indent) {
          // It's a child of this item -> Target is one level deeper
          bestMatchIndex = i + 1;
          break;
        } else if (indent === stackItem.indent) {
          // It's a sibling of this item -> Target is same level
          bestMatchIndex = i;
          break;
        }
      }

      // If indent is smaller than everything, it resets to root (level 0)
      if (bestMatchIndex === -1 && indent < this.state.listStack[0].indent) {
        targetLevel = 0;
      } else {
        // Default to calculated index, or 0 if stack was empty/logic fell through
        targetLevel = bestMatchIndex > -1 ? bestMatchIndex : 0;
      }
    }

    // Close nested levels if we need to go back up
    while (this.state.listStack.length > targetLevel + 1) {
      this.closeOneListLevel();
    }

    // Open new level if needed (Target is deeper than current)
    // Using 'while' handles cases where we might need to recover structure,
    // though adaptive logic usually results in just 1 iteration max.
    while (this.state.listStack.length <= targetLevel) {
      if (this.state.listStack.length === targetLevel + 1 && this.state.listStack[targetLevel].type !== type) {
        this.closeOneListLevel(); // Switch type (ul <-> ol)
      }

      if (this.state.listStack.length <= targetLevel) {
        this.html += `<${type}>\n`;
        // Store 'indent' in the stack to compare against future lines
        this.state.listStack.push({ type: type, level: targetLevel, indent: indent });
      }
    }

    // Handle Task List Items [x]
    const taskMatch = content.match(CONFIG.PATTERNS.CHECKBOX);
    if (taskMatch) {
      const checked = taskMatch[1].toLowerCase() === 'x' ? 'checked' : '';
      const text = taskMatch[2];
      this.html += `<li class="task-list-item"><input type="checkbox" disabled ${checked}> ${this.escapeInline(text)}</li>\n`;
    } else {
      this.html += `<li>${this.escapeInline(content)}</li>\n`;
    }
    return true;
  }

  /**
   * Processes table rows and headers.
   * @param {string} line - Current line.
   * @param {number} index - Current line index.
   * @param {string[]} lines - All lines.
   * @returns {boolean} - True if line was consumed.
   */
  processTables(line, index, lines) {
    if (!line.includes('|')) return false;
    const match = line.match(CONFIG.PATTERNS.TABLE_ROW);
    if (!match) return false;
    const cells = match[1].split('|').map(c => c.trim()).filter(c => c !== '');

    // Detect separator line |---|---|
    const isSeparator = cells.every(c => /^[-\s:]+$/.test(c));
    if (isSeparator) return true; // Consume but do nothing

    this.closeList(); this.closeBlockquote(); this.closeAlert();
    if (!this.state.inTable) {
      this.state.inTable = true;
      // Look ahead to check if next line is separator (implies current is header)
      const nextLine = (index + 1 < lines.length) ? lines[index + 1] : '';
      if (nextLine.includes('|') && nextLine.includes('-')) {
        this.state.tableHeader = cells;
      } else {
        this.state.tableRows.push(cells);
      }
    } else {
      this.state.tableRows.push(cells);
    }
    return true;
  }

  /**
   * Processes blockquotes (>) and GitHub-style alerts.
   * @param {string} line - Current line.
   * @returns {boolean} - True if line was consumed.
   */
  processQuotesAndAlerts(line) {
    const isQuoteChar = line.startsWith('>');
    if (!isQuoteChar && !this.state.inAlert && !this.state.inBlockquote) return false;

    let content = '';
    if (isQuoteChar) { content = line.slice(1).trim(); }
    else {
      // Handle multi-line content inside block
      if (this.state.inAlert) content = line;
      else if (this.state.inBlockquote) content = line;
      else return false;
    }

    // Check if it's the start of an Alert
    const alertMatch = content.match(CONFIG.PATTERNS.ALERT);
    if (alertMatch) {
      this.closeList(); this.closeAlert(); this.closeBlockquote();
      this.state.inAlert = true;
      this.state.alertType = alertMatch[1].toLowerCase();
      return true;
    }

    if (this.state.inAlert) { this.state.alertBuffer.push(content); return true; }

    // If not alert, assume blockquote
    this.closeList(); this.closeAlert();
    if (!this.state.inBlockquote) this.state.inBlockquote = true;
    this.state.blockquoteBuffer.push(content);
    return true;
  }

  /**
   * Processes standalone images (figures with captions).
   * @param {string} line - Current line.
   * @returns {boolean} - True if line was consumed.
   */
  processStandaloneImage(line) {
    const match = line.match(CONFIG.PATTERNS.IMAGE);
    if (match) {
      // Check for width attributes syntax {width=50%}
      const fullMatch = line.match(/^!\[([^\]]*)\]\(([^)]+)\)\s*(?:\{([^}]+)\})?$/);
      if (fullMatch) {
        this.closeAllBlocks();
        const [_, alt, src, attrs] = fullMatch;
        let style = '';
        if (attrs) {
          const w = attrs.match(/width\s*=\s*"?([^"}]+)"?/);
          if (w) style = ` style="width: ${this.escapeHTML(w[1])};"`;
        }
        this.html += `<figure class="image-figure">`;
        this.html += `<img src="${src}" alt="${this.escapeHTML(alt)}"${style} />`;
        if (alt && alt.trim()) {
          this.globalFigureNum++;
          this.html += `<figcaption>Fig ${this.globalFigureNum} ${this.escapeHTML(alt)}</figcaption>`;
        }
        this.html += `</figure>\n`;
        return true;
      }
    }
    return false;
  }

  /**
   * Detects standalone YouTube or Vimeo links and converts them to responsive iframes.
   * @param {string} line - Current line.
   * @returns {boolean} - True if line was consumed.
   */
  processMediaEmbeds(line) {
    const trimmed = line.trim();

    // Check YouTube
    const ytMatch = trimmed.match(CONFIG.PATTERNS.VIDEO_YOUTUBE);
    if (ytMatch) {
      this.closeAllBlocks();
      const videoId = ytMatch[1];
      // Responsive wrapper for 16:9 aspect ratio
      this.html += `<div class="video-container" style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin-bottom:1.75rem;">
        <iframe 
          src="https://www.youtube.com/embed/${videoId}" 
          style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;border-radius:4px;" 
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
          allowfullscreen 
          loading="lazy">
        </iframe>
      </div>\n`;
      return true;
    }

    // Check Vimeo
    const vimeoMatch = trimmed.match(CONFIG.PATTERNS.VIDEO_VIMEO);
    if (vimeoMatch) {
      this.closeAllBlocks();
      const videoId = vimeoMatch[1];
      this.html += `<div class="video-container" style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin-bottom:1.75rem;">
        <iframe 
          src="https://player.vimeo.com/video/${videoId}" 
          style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;border-radius:4px;" 
          allow="autoplay; fullscreen; picture-in-picture" 
          allowfullscreen 
          loading="lazy">
        </iframe>
      </div>\n`;
      return true;
    }

    return false;
  }

  /**
   * Detects lines starting with block-level HTML tags (dl, details, etc.)
   * and renders them directly without wrapping in <p> tags.
   * @param {string} line - Current line.
   * @returns {boolean} - True if line was consumed.
   */
  processBlockHtml(line) {
    if (CONFIG.PATTERNS.BLOCK_HTML_START.test(line)) {
      this.closeList();
      this.closeTable();
      this.closeBlockquote();
      this.closeAlert();

      // Render the line using escapeInline to ensure sanitization (XSS protection) 
      // but do NOT wrap it in <p>.
      this.html += `${this.escapeInline(line)}\n`;
      return true;
    }
    return false;
  }

  /**
   * Handles empty lines to determine if blocks should be closed.
   */
  processEmptyLine() {
    if (this.state.inCodeBlock) this.state.codeBuffer.push('');
    else if (this.state.inMathBlock) this.state.mathBuffer.push('');
    else if (this.state.inAlert) this.state.alertBuffer.push('');
    else if (this.state.inBlockquote) this.state.blockquoteBuffer.push('');
    else {
      // General close for blocks that end on double newline
      this.closeList(); this.closeTable(); this.closeBlockquote(); this.closeAlert();
    }
  }

  // --- Closers & Rendering Helper Methods ---

  /** Converts buffered code lines into HTML. */
  flushCodeBlock() {
    if (!this.state.inCodeBlock) return;
    const rawLang = this.state.codeLang.toLowerCase() || 'plaintext';
    // Map short codes to PrismJS classes
    const lang = rawLang === 'js' ? 'javascript' : rawLang === 'py' ? 'python' : rawLang;
    const langClass = ` class="language-${lang}"`;

    this.html += `<div class="code-block-container"><button class="copy-btn">Copy</button><pre><code${langClass}>`;
    this.html += this.state.codeBuffer.map(l => this.escapeHTML(l)).join('\n');
    this.html += `</code></pre></div>\n`;

    this.state.inCodeBlock = false; this.state.codeBuffer = []; this.state.codeLang = '';
  }

  /** Converts buffered math lines into KaTeX HTML. */
  flushMathBlock() {
    if (!this.state.inMathBlock) return;
    const tex = this.state.mathBuffer.join('\n');
    this.html += this.renderKaTeX(tex, true);
    this.state.inMathBlock = false; this.state.mathBuffer = [];
  }

  /** Closes one level of list nesting. */
  closeOneListLevel() {
    if (this.state.listStack.length === 0) return;
    const item = this.state.listStack.pop();
    this.html += `</${item.type}>\n`;
  }

  /** Closes all open lists. */
  closeList() { while (this.state.listStack.length > 0) this.closeOneListLevel(); }

  /** Renders the buffered table data. */
  closeTable() {
    if (!this.state.inTable) return;
    this.html += '<table>\n';
    if (this.state.tableHeader) {
      this.html += '<thead>\n<tr>\n';
      this.state.tableHeader.forEach(h => this.html += `<th>${this.escapeInline(h)}</th>\n`);
      this.html += '</tr>\n</thead>\n';
    }
    if (this.state.tableRows.length > 0) {
      this.html += '<tbody>\n';
      this.state.tableRows.forEach(row => {
        this.html += '<tr>\n';
        row.forEach(cell => this.html += `<td>${this.escapeInline(cell)}</td>\n`);
        this.html += '</tr>\n';
      });
      this.html += '</tbody>\n';
    }
    this.html += '</table>\n';
    this.state.inTable = false; this.state.tableHeader = null; this.state.tableRows = [];
  }

  /** Renders buffered blockquote text. */
  closeBlockquote() {
    if (!this.state.inBlockquote) return;
    this.html += '<blockquote>';
    this.html += this.renderBufferedParagraphs(this.state.blockquoteBuffer);
    this.html += '</blockquote>\n';
    this.state.inBlockquote = false; this.state.blockquoteBuffer = [];
  }

  /** Renders buffered alert text with proper styling. */
  closeAlert() {
    if (!this.state.inAlert) return;
    const titles = { 'note': 'Note', 'warning': 'Warning', 'important': 'Important', 'tip': 'Tip', 'caution': 'Caution' };
    const title = titles[this.state.alertType] || 'Alert';

    this.html += `<div class="alert alert-${this.state.alertType}">`;
    this.html += `<div class="alert-header"><span class="alert-title">${title}</span></div>`;
    this.html += `<div class="alert-content">`;
    this.html += this.renderBufferedParagraphs(this.state.alertBuffer);
    this.html += `</div></div>\n`;

    this.state.inAlert = false; this.state.alertBuffer = []; this.state.alertType = '';
  }

  /** Helper to close everything at once (used at EOF or HR). */
  closeAllBlocks() {
    this.flushCodeBlock(); this.flushMathBlock(); this.closeList();
    this.closeTable(); this.closeAlert(); this.closeBlockquote();
  }

  /**
   * Renders array of text lines as HTML paragraphs.
   * @param {string[]} lines - Lines of text.
   * @returns {string} - HTML string.
   */
  renderBufferedParagraphs(lines) {
    let output = ''; let pBuffer = [];
    const flushP = () => {
      if (pBuffer.length > 0) {
        const text = pBuffer.map(l => this.escapeInline(l)).join(' ');
        output += `<p>${text}</p>`; pBuffer = [];
      }
    };
    lines.forEach(l => { if (l === '') flushP(); else pBuffer.push(l); });
    flushP();
    return output;
  }

  /** Generates the document title header. */
  renderDocumentHeader(title, meta) {
    let h = `<header class="document-header">\n`;
    h += `<h1>${this.escapeInline(title)}</h1>\n`;
    if (meta.author) h += `<div class="author">${this.escapeHTML(meta.author)}</div>\n`;
    if (meta.date) h += `<div class="date">${this.escapeHTML(meta.date)}</div>\n`;
    if (meta.institution) h += `<div class="institution">${this.escapeHTML(meta.institution)}</div>\n`;
    if (meta.editor) h += `<div class="editor">Edited by ${this.escapeHTML(meta.editor)}</div>\n`;
    h += `</header>\n`;
    return h;
  }

  /** Generates the footer. */
  generateFooter() {
    return `
    <footer class="markpaper-footer">
      <p id="generated-by">Generated by <a href="https://github.com/rubensbraz/MarkPaper" target="_blank">MarkPaper</a>.</p><br>
      <p><b>Original project: <a href="https://github.com/TetsuakiBaba/MarkPaper" target="_blank">MarkPaper (Tetsuaki Baba)</a>.</b></p>
      <p><b>Refactor (this version): <a href="https://github.com/rubensbraz/MarkPaper" target="_blank">MarkPaper (Rubens Braz)</a>.</b></p>
    </footer>`;
  }

  /** Renders footnotes collected for the current section. */
  appendSectionFootnotes() {
    if (this.sectionFootnotes.length === 0) return;
    this.html += '<div class="footnotes">\n';
    this.sectionFootnotes.forEach(id => {
      if (this.footnotesDef[id]) {
        this.html += `<div class="footnote" id="footnote-${id}"><sup>${id}</sup> ${this.escapeInline(this.footnotesDef[id])}</div>\n`;
      }
    });
    this.html += '</div>\n';
    this.sectionFootnotes = [];
  }

  /** Wrapper for KaTeX rendering with error handling. */
  renderKaTeX(tex, displayMode = false) {
    if (typeof katex === 'undefined') return displayMode ? `<pre>${tex}</pre>` : `<code>${tex}</code>`;
    try {
      return katex.renderToString(tex, { displayMode: displayMode, throwOnError: false });
    } catch (e) {
      console.error('KaTeX error:', e); return `<span style="color:red">Error parsing math</span>`;
    }
  }

  // --- Sanitization & Escaping ---

  /** Escapes basic HTML characters. */
  escapeHTML(text) {
    return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
  }

  /**
   * Sanitizes HTML string using whitelist.
   * Removes dangerous attributes (on*, javascript:).
   */
  sanitizeHTML(text) {
    return text.replace(/<(\/?)([\w-]+)([^>]*)>/gi, (match, slash, tag, attrs) => {
      const tagLower = tag.toLowerCase();
      // Filter tag name
      if (!CONFIG.ALLOWED_TAGS.includes(tagLower)) return match.replace(/</g, '&lt;').replace(/>/g, '&gt;');

      if (slash === '/') return `</${tag}>`;

      let safeAttrs = '';
      if (attrs.trim()) {
        const attrMatches = attrs.match(/\s+([^=\s]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/g);
        if (attrMatches) {
          attrMatches.forEach(attrMatch => {
            const parts = attrMatch.trim().match(/^([^=\s]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?$/);
            if (parts) {
              const name = parts[1].toLowerCase();
              const val = parts[2] || parts[3] || parts[4] || '';
              // Filter attribute name
              if (CONFIG.ALLOWED_ATTRIBUTES.includes(name)) {
                // Filter dangerous protocols
                const isJs = /^(javascript:|vbscript:|data:|about:)/i.test(val);
                if ((name === 'href' || name === 'src') && isJs) return;
                safeAttrs += ` ${name}="${val.replace(/"/g, '&quot;')}"`;
              }
            }
          });
        }
      }
      return `<${tag}${safeAttrs}>`;
    });
  }

  /**
   * Parses inline Markdown syntax (bold, italic, links, etc.).
   * Uses protection maps to prevent recursive parsing of protected blocks.
   * @param {string} text - The line text.
   * @returns {string} - HTML string.
   */
  escapeInline(text) {
    const mathMap = new Map(); let mCounter = 0;

    // Protect Inline Math ($...$)
    text = text.replace(/\$((?:[^\$]|\\\$)+)\$/g, (match, tex) => {
      const key = `__MATH_${mCounter++}__`;
      mathMap.set(key, this.renderKaTeX(tex, false));
      return key;
    });

    // Sanitize raw HTML
    let escaped = this.sanitizeHTML(text);

    // Protect Valid HTML Tags
    const protectionMap = new Map(); let pCounter = 0;
    escaped = escaped.replace(/<(\/?)([\w-]+)([^>]*)>/g, (match, slash, tag) => {
      if (CONFIG.ALLOWED_TAGS.includes(tag.toLowerCase())) {
        const key = `__TAG_${pCounter++}__`;
        protectionMap.set(key, match); return key;
      }
      return match;
    });

    // Escape special chars outside protected areas
    escaped = escaped.replace(/&(?![a-zA-Z0-9#]+;)/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');

    // Restore protections
    protectionMap.forEach((val, key) => { escaped = escaped.replace(key, val); });
    mathMap.forEach((val, key) => { escaped = escaped.replace(key, val); });

    // Parse Markdown Syntax
    escaped = escaped.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
    escaped = escaped.replace(/\*(.+?)\*/g, '<em>$1</em>');
    escaped = escaped.replace(/~~(.+?)~~/g, '<s>$1</s>');
    escaped = escaped.replace(/`([^`]+)`/g, '<code>$1</code>');

    // Images
    escaped = escaped.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (match, alt, src) => {
      return `<img src="${src}" alt="${this.escapeHTML(alt)}">`;
    });

    // Links
    escaped = escaped.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');

    // Footnote References
    escaped = escaped.replace(/\[\^([^\]]+)\]/g, (match, id) => {
      if (!this.sectionFootnotes.includes(id)) this.sectionFootnotes.push(id);
      return `<sup><a href="#footnote-${id}" class="footnote-ref">${id}</a></sup>`;
    });

    // Auto Links
    const urlPattern = /(https?:\/\/[^\s<>"']+|ftp:\/\/[^\s<>"']+)/g;
    escaped = escaped.replace(urlPattern, (match) => { return `<a href="${match}" target="_blank" rel="noopener noreferrer">${match}</a>`; });

    // Fix nested links bug
    escaped = escaped.replace(/href="<a href="([^"]+)"[^>]*>[^<]+<\/a>"/g, 'href="$1"');

    return escaped;
  }
}

// ============================================================================
// 3. UI & DOM CONTROLLER
// ============================================================================

/**
 * Manages DOM elements, Event Listeners, and interactive UI components.
 */
class MarkPaperUI {
  constructor() {
    this.dom = {};
    this.settings = new SettingsController(this);
  }

  /** Initializes all UI components. */
  init() {
    this.createDomElements();
    this.setupMenu();
    this.setupToc();
    this.setupScrollSpy();
    this.setupCopyButtons();
    this.triggerSyntaxHighlight();
    this.updateDocumentTitle();
    this.setupProgressBar();
    this.setupAnchors();
    this.setupScrollHistory();
    this.settings.init();
  }

  /** Triggers PrismJS highlighting if available. */
  triggerSyntaxHighlight() {
    if (typeof Prism !== 'undefined') {
      Prism.highlightAll();
    } else {
      setTimeout(() => { if (typeof Prism !== 'undefined') Prism.highlightAll(); }, 500);
    }
  }

  /** Sets the document <title> based on the H1. */
  updateDocumentTitle() {
    const h1 = document.querySelector('h1');
    if (h1) {
      document.title = h1.innerText + ' - MarkPaper';
    }
  }

  /** Restores scroll position on page load. */
  setupScrollHistory() {
    const savedPos = localStorage.getItem('markpaper_scrollpos');
    const currentFile = window.location.search || 'default';
    if (savedPos) {
      try {
        const data = JSON.parse(savedPos);
        if (data.file === currentFile) {
          setTimeout(() => window.scrollTo(0, data.y), 100);
        }
      } catch (e) { console.error('Error reading scroll history', e); }
    }
    // Save scroll position
    window.addEventListener('scroll', () => {
      const state = { file: currentFile, y: window.scrollY };
      localStorage.setItem('markpaper_scrollpos', JSON.stringify(state));
    }, { passive: true });
  }

  /** Updates the top progress bar as the user scrolls. */
  setupProgressBar() {
    const bar = document.getElementById('reading-progress');
    if (!bar) return;
    window.addEventListener('scroll', () => {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      const scrolled = (scrollTop / scrollHeight) * 100;
      bar.style.width = scrolled + "%";
    }, { passive: true });
  }

  /** Adds clickable anchor links (#) next to headings. */
  setupAnchors() {
    const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
    headings.forEach(h => {
      if (!h.id) return;
      const anchor = document.createElement('a');
      anchor.className = 'heading-anchor';
      anchor.href = `#${h.id}`;
      anchor.innerHTML = '#';
      anchor.title = 'Copy link to this section';
      anchor.setAttribute('aria-hidden', 'true');
      anchor.onclick = (e) => {
        e.preventDefault();
        const url = window.location.origin + window.location.pathname + window.location.search + '#' + h.id;
        navigator.clipboard.writeText(url).then(() => {
          anchor.style.color = 'var(--accent-hover-color)';
          setTimeout(() => anchor.style.color = '', 500);
        });
        history.pushState(null, null, `#${h.id}`);
        h.scrollIntoView({ behavior: 'smooth' });
      };
      h.appendChild(anchor);
    });
  }

  /** Creates basic DOM elements (buttons, menu, overlay). */
  createDomElements() {
    // Hamburger Menu Button
    const btn = document.createElement('button');
    btn.className = 'hamburger-btn';
    btn.innerHTML = `<span></span><span></span><span></span>`;
    document.body.prepend(btn);
    this.dom.hamburger = btn;

    // Settings Button
    const settingsBtn = document.createElement('button');
    settingsBtn.className = 'settings-btn';
    settingsBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>`;
    settingsBtn.title = "Settings";
    settingsBtn.onclick = () => this.settings.toggle();
    document.body.prepend(settingsBtn);
    this.dom.settingsBtn = settingsBtn;

    // Side Menu Container
    const nav = document.createElement('nav');
    nav.className = 'side-menu';
    nav.innerHTML = `
      <div class="side-menu-header"><h3>Menu</h3></div>
      <ul id="table-of-contents" class="table-of-contents"></ul>
    `;
    document.body.insertBefore(nav, btn.nextSibling);
    this.dom.menu = nav;
    this.dom.toc = nav.querySelector('#table-of-contents');

    // Overlay (for mobile/menu background)
    const overlay = document.createElement('div');
    overlay.className = 'overlay';
    document.body.appendChild(overlay);
    this.dom.overlay = overlay;

    // Progress Bar element
    const prog = document.createElement('div');
    prog.className = 'reading-progress';
    prog.id = 'reading-progress';
    document.body.appendChild(prog);
  }

  /** Sets up event listeners for opening/closing the menu. */
  setupMenu() {
    const toggle = () => {
      this.dom.menu.classList.toggle('open');
      this.dom.overlay.classList.toggle('show');
      this.dom.hamburger.classList.toggle('active');
    };
    this.dom.hamburger.addEventListener('click', (e) => { e.preventDefault(); toggle(); });
    this.dom.overlay.addEventListener('click', () => {
      if (this.settings.visible) {
        this.settings.close();
      } else {
        toggle();
      }
    });
    document.addEventListener('keydown', (e) => { if (e.key === 'Escape') { this.closeMenu(); this.settings.close(); } });
  }

  /** Closes the side menu. */
  closeMenu() {
    this.dom.menu.classList.remove('open');
    this.dom.overlay.classList.remove('show');
    this.dom.hamburger.classList.remove('active');
  }

  /**
   * Generates the Table of Contents from H2 and H3 tags.
   * Includes indentation for subtitles (H3).
   */
  setupToc() {
    // Select both H2 and H3
    const headings = document.querySelectorAll('#content h2, #content h3');
    this.dom.toc.innerHTML = '';

    headings.forEach((h, i) => {
      if (!h.id) h.id = `section-${i}`;

      const li = document.createElement('li');
      const a = document.createElement('a');
      a.href = `#${h.id}`;
      a.textContent = h.textContent;

      // Indentation Logic for Subtitles
      if (h.tagName === 'H3') {
        // Apply padding to create visual hierarchy in the menu
        a.style.paddingLeft = '40px'; // 20px base + 20px indent
        a.style.fontSize = '0.9em';
      }

      a.onclick = (e) => {
        e.preventDefault();
        this.closeMenu();
        h.scrollIntoView({ behavior: 'smooth' });
        history.pushState(null, null, `#${h.id}`);
      };

      li.appendChild(a);
      this.dom.toc.appendChild(li);
    });
  }

  /** Highlights the current section in the TOC while scrolling. */
  setupScrollSpy() {
    const headings = document.querySelectorAll('#content h2, #content h3');
    const links = this.dom.toc.querySelectorAll('a');

    if (headings.length === 0) return;

    const onScroll = () => {
      let currentId = '';
      const offset = 150; // Offset for fixed headers
      headings.forEach(h => {
        if (window.scrollY + offset >= h.offsetTop) currentId = h.id;
      });
      links.forEach(l => {
        l.classList.toggle('active', l.getAttribute('href') === `#${currentId}`);
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll(); // Initial check
  }

  /** Adds logic to "Copy" buttons in code blocks. */
  setupCopyButtons() {
    document.querySelectorAll('.code-block-container').forEach(container => {
      const btn = container.querySelector('.copy-btn');
      const code = container.querySelector('code');
      if (!btn || !code) return;
      btn.addEventListener('click', () => {
        navigator.clipboard.writeText(code.innerText).then(() => {
          btn.textContent = 'Copied!';
          btn.classList.add('copied');
          setTimeout(() => {
            btn.textContent = 'Copy';
            btn.classList.remove('copied');
          }, 2000);
        });
      });
    });
  }
}

// ============================================================================
// 4. SETTINGS CONTROLLER
// ============================================================================

/**
 * Handles the Settings Modal, User Preferences, and Theme Switching.
 */
class SettingsController {
  /**
   * @param {MarkPaperUI} ui - Reference to the UI controller.
   */
  constructor(ui) {
    this.ui = ui;
    this.visible = false;
    this.prefs = this.loadPrefs();
  }

  /** Initializes settings modal and applies defaults. */
  init() {
    this.renderModal();
    this.applyPrefs();
  }

  /** Loads preferences from LocalStorage. */
  loadPrefs() {
    const saved = localStorage.getItem('markpaper_settings');
    return saved ? { ...CONFIG.DEFAULTS, ...JSON.parse(saved) } : { ...CONFIG.DEFAULTS };
  }

  /** Saves current preferences to LocalStorage. */
  savePrefs() {
    localStorage.setItem('markpaper_settings', JSON.stringify(this.prefs));
    this.applyPrefs();
  }

  /**
   * Applies the current preferences to the CSS variables.
   * Also handles the dynamic switching of the PrismJS theme (Light/Dark).
   */
  applyPrefs() {
    const root = document.documentElement;

    // Detect if Dark Mode is active based on background color
    const isDark = this.prefs['--background-color'] === '#1a1a1a';

    // Toggle a class on body for specific CSS overrides (if needed)
    document.body.classList.toggle('theme-dark', isDark);

    // Dynamic PrismJS Theme Switching
    const prismLink = document.getElementById('prism-theme-link');
    if (prismLink) {
      const lightThemeUrl = 'https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-ghcolors.min.css';
      const darkThemeUrl = 'https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-atom-dark.min.css';

      // Update the stylesheet link href
      prismLink.href = isDark ? darkThemeUrl : lightThemeUrl;
    }

    // Apply CSS Variables to :root
    for (const [key, value] of Object.entries(this.prefs)) {
      if (key === '--current-font-family') {
        let stack = value;
        // Map short names to full font stacks
        if (value === 'serif') stack = 'var(--font-serif)';
        if (value === 'sans') stack = 'var(--font-sans-serif)';
        if (value === 'mono') stack = 'var(--font-monospace)';
        root.style.setProperty(key, stack);
      } else {
        root.style.setProperty(key, value);
      }
    }
  }

  /** Generates the HTML for the Settings Modal. */
  renderModal() {
    const modal = document.createElement('div');
    modal.className = 'settings-modal';
    modal.innerHTML = `
      <div class="settings-header">
        <h3>Settings</h3>
        <button class="close-settings">&times;</button>
      </div>
      <div class="settings-body">
        
        <div class="setting-group">
            <label>Theme Preset</label>
            <div class="theme-buttons">
                <button class="btn-theme-light">Light</button>
                <button class="btn-theme-dark">Dark Mode</button>
            </div>
        </div>

        <div class="setting-group">
          <label>Font Size (<span id="fs-val">${this.prefs['--font-base-size']}</span>)</label>
          <input type="range" min="12" max="24" step="1" id="input-font-size" value="${parseInt(this.prefs['--font-base-size'])}">
        </div>

        <div class="setting-group">
          <label>Font Family</label>
          <select id="input-font-family">
            <option value="serif">Serif (Classic)</option>
            <option value="sans">Sans-Serif (Modern)</option>
            <option value="mono">Monospace (Code)</option>
          </select>
        </div>

        <div class="setting-group">
          <label>Background Color</label>
          <input type="color" id="input-bg-color" value="${this.prefs['--background-color']}">
        </div>

        <div class="setting-group">
          <label>Text Color</label>
          <input type="color" id="input-text-color" value="${this.prefs['--text-color']}">
        </div>

        <div class="setting-group">
          <label>Link/Accent Color</label>
          <input type="color" id="input-accent-color" value="${this.prefs['--accent-color']}">
        </div>
        
        <div class="setting-actions">
            <button class="btn-reset">Reset Defaults</button>
        </div>
      </div>
    `;
    document.body.appendChild(modal);
    this.domModal = modal;
    this.bindEvents();
  }

  /** Binds event listeners to the settings inputs. */
  bindEvents() {
    const closeBtn = this.domModal.querySelector('.close-settings');
    closeBtn.onclick = () => this.close();

    // Font Size Slider
    const fsInput = this.domModal.querySelector('#input-font-size');
    const fsDisplay = this.domModal.querySelector('#fs-val');
    fsInput.oninput = (e) => {
      const val = e.target.value + 'px';
      this.prefs['--font-base-size'] = val;
      fsDisplay.textContent = val;
      this.savePrefs();
    };

    // Font Family Select
    const ffInput = this.domModal.querySelector('#input-font-family');
    const current = this.prefs['--current-font-family'];
    if (current === 'var(--font-sans-serif)' || current === 'sans') ffInput.value = 'sans';
    else if (current === 'var(--font-monospace)' || current === 'mono') ffInput.value = 'mono';
    else ffInput.value = 'serif';

    ffInput.onchange = (e) => {
      this.prefs['--current-font-family'] = e.target.value;
      this.savePrefs();
    };

    // Color Pickers Helper
    const bindColor = (id, key) => {
      const el = this.domModal.querySelector(id);
      el.oninput = (e) => {
        this.prefs[key] = e.target.value;
        this.savePrefs();
      };
      return el;
    };

    const bgInput = bindColor('#input-bg-color', '--background-color');
    const txtInput = bindColor('#input-text-color', '--text-color');
    const accInput = bindColor('#input-accent-color', '--accent-color');

    // Theme Preset Buttons
    this.domModal.querySelector('.btn-theme-dark').onclick = () => {
      // Set Dark Theme variables
      this.prefs['--background-color'] = '#1a1a1a';
      this.prefs['--text-color'] = '#e0e0e0';
      this.prefs['--accent-color'] = '#76b5c5';
      this.prefs['--modal-header-bg'] = '#2d2d2d';
      this.prefs['--border-color'] = '#444444';
      this.prefs['--light-gray-color'] = '#2d2d2d';
      this.prefs['--code-background'] = '#2d2d2d';

      // Update UI inputs
      bgInput.value = '#1a1a1a';
      txtInput.value = '#e0e0e0';
      accInput.value = '#76b5c5';
      this.savePrefs();
    };

    this.domModal.querySelector('.btn-theme-light').onclick = () => {
      // Restore Defaults
      this.prefs['--background-color'] = CONFIG.DEFAULTS['--background-color'];
      this.prefs['--text-color'] = CONFIG.DEFAULTS['--text-color'];
      this.prefs['--accent-color'] = CONFIG.DEFAULTS['--accent-color'];
      this.prefs['--modal-header-bg'] = CONFIG.DEFAULTS['--modal-header-bg'];
      this.prefs['--border-color'] = CONFIG.DEFAULTS['--border-color'];
      this.prefs['--light-gray-color'] = CONFIG.DEFAULTS['--light-gray-color'];
      this.prefs['--code-background'] = CONFIG.DEFAULTS['--code-background'];

      bgInput.value = CONFIG.DEFAULTS['--background-color'];
      txtInput.value = CONFIG.DEFAULTS['--text-color'];
      accInput.value = CONFIG.DEFAULTS['--accent-color'];
      this.savePrefs();
    };

    // Reset All Button
    this.domModal.querySelector('.btn-reset').onclick = () => {
      this.prefs = { ...CONFIG.DEFAULTS };
      fsInput.value = 16;
      fsDisplay.textContent = '16px';
      ffInput.value = 'serif';
      bgInput.value = CONFIG.DEFAULTS['--background-color'];
      txtInput.value = CONFIG.DEFAULTS['--text-color'];
      accInput.value = CONFIG.DEFAULTS['--accent-color'];
      this.savePrefs();
    };
  }

  /** Toggles the visibility of the settings modal. */
  toggle() {
    this.visible = !this.visible;
    if (this.visible) {
      this.domModal.classList.add('open');
      this.ui.dom.overlay.classList.add('show');
    } else {
      this.close();
    }
  }

  /** Closes the settings modal. */
  close() {
    this.visible = false;
    this.domModal.classList.remove('open');
    if (!this.ui.dom.menu.classList.contains('open')) {
      this.ui.dom.overlay.classList.remove('show');
    }
  }
}

// ============================================================================
// 5. APPLICATION ENTRY
// ============================================================================

(function () {
  const parser = new MarkPaperParser();
  const ui = new MarkPaperUI();

  /**
   * Fetches and renders the markdown file.
   * @param {string} path - The relative path to the markdown file.
   */
  const loadFile = (path) => {
    const target = document.getElementById('content');
    target.innerHTML = '<div class="loading">Loading...</div>';

    fetch(path)
      .then(res => {
        if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
        return res.text();
      })
      .then(markdown => {
        const html = parser.parse(markdown, path.split('/').pop());
        target.innerHTML = html;
        ui.init();
      })
      .catch(err => {
        const msg = `> [!CAUTION]\n> Failed to load file: "${path}".\n>\n> **Error:** ${err.message}`;
        target.innerHTML = parser.parse(msg);
      });
  };

  /**
   * Initializes the app when DOM is ready.
   * Checks for URL parameters to load a specific file.
   */
  document.addEventListener('DOMContentLoaded', () => {
    const params = new URLSearchParams(window.location.search);
    const file = params.get('file') || 'README.md';

    // Auto-detect if file is in content folder or root
    if (!file.includes('/')) {
      const tryPath = `content/${file}`;
      fetch(tryPath)
        .then(res => {
          if (res.ok) loadFile(tryPath);
          else loadFile(file); // Fallback to root
        })
        .catch(() => loadFile(file));
    } else {
      loadFile(file);
    }
  });
})();