Class TutorialOverlay

src/tutorial/tutorialOverlay.js:7–233

import { tutorialSteps } from './steps.js';

export class TutorialOverlay {
  constructor(tutorialManager, applyCode) {
    this.manager = tutorialManager;
    this.applyCode = applyCode;
    this.element = null;
    this.visible = false;

    this.createOverlay();
    this.setupEventListeners();
  }

  /**
   * Create overlay DOM structure
   */
  createOverlay() {
    // Overlay container
    this.element = document.createElement('div');
    this.element.className = 'tutorial-overlay';
    this.element.style.display = 'none';

    // Content card
    const card = document.createElement('div');
    card.className = 'tutorial-card';

    // Header
    const header = document.createElement('div');
    header.className = 'tutorial-header';

    this.titleElement = document.createElement('h3');
    this.titleElement.className = 'tutorial-title';
    header.appendChild(this.titleElement);

    this.progressElement = document.createElement('div');
    this.progressElement.className = 'tutorial-progress';
    header.appendChild(this.progressElement);

    const closeBtn = document.createElement('button');
    closeBtn.className = 'tutorial-close btn';
    closeBtn.textContent = '×';
    closeBtn.setAttribute('aria-label', 'Close tutorial');
    closeBtn.onclick = () => this.hide();
    header.appendChild(closeBtn);

    card.appendChild(header);

    // Content
    this.contentElement = document.createElement('div');
    this.contentElement.className = 'tutorial-content';
    card.appendChild(this.contentElement);

    // Action prompt
    this.actionElement = document.createElement('div');
    this.actionElement.className = 'tutorial-action';
    card.appendChild(this.actionElement);

    // Navigation
    const nav = document.createElement('div');
    nav.className = 'tutorial-nav';