```
class OverlayManager {
  /**
   * Creates an instance of OverlayManager.
   * @param {HTMLElement} targetElement - The element to be overlaid.
   * @param {Object} [options] - Optional settings.
   * @param {HTMLElement|Function|string} [options.content] - Content to insert into the overlay.
   */
  constructor(targetElement, options = {}) {
    if (!(targetElement instanceof HTMLElement)) {
      throw new Error('targetElement must be a valid HTMLElement');
    }
    this.targetElement = targetElement;
    this.overlay = null;
    this.isActive = false;
    this.options = options;
    this.init();
  }

  /**
   * Initializes the overlay by checking if it already exists.
   * If not, creates and appends a hidden overlay to the target element.
   * Also inserts any provided content into the overlay.
   */
  init() {
    // Check if the overlay already exists by looking for a specific class
    const existingOverlay = this.targetElement.querySelector('.overlay-manager-overlay');
    if (existingOverlay) {
      this.overlay = existingOverlay;
      return;
    }

    // Ensure the target element has a positioning context
    const computedStyle = window.getComputedStyle(this.targetElement);
    if (
      computedStyle.position !== 'absolute' &&
      computedStyle.position !== 'relative' &&
      computedStyle.position !== 'fixed'
    ) {
      this.targetElement.style.position = 'relative';
    }

    // Create the overlay element
    this.overlay = document.createElement('div');
    this.overlay.classList.add('overlay-manager-overlay');

    // Style the overlay to cover the target element
    Object.assign(this.overlay.style, {
      position: 'absolute',
      top: '0',
      left: '0',
      width: '100%',
      height: '100%',
      display: 'none', // Hidden by default
      pointerEvents: 'none', // Let clicks pass through unless in draw state
      zIndex: '1000', // Ensure it's on top
    });

    // Insert content into the overlay if provided
    if (this.options.content) {
      let contentElement;

      if (typeof this.options.content === 'function') {
        // If content is a function, call it to get the element
        contentElement = this.options.content();
      } else if (typeof this.options.content === 'string') {
        // If content is a string, set it as innerHTML
        this.overlay.innerHTML = this.options.content;
      } else if (this.options.content instanceof HTMLElement) {
        // If content is an HTMLElement, append it directly
        contentElement = this.options.content;
      } else {
        console.warn('Unsupported content type for overlay.');
      }

      if (contentElement instanceof HTMLElement) {
        this.overlay.appendChild(contentElement);
      }
    }

    // Append the overlay to the target element
    this.targetElement.appendChild(this.overlay);
  }

  /**
   * Starts the overlay by displaying it and entering the draw state.
   */
  start() {
    if (!this.overlay) {
      console.warn('Overlay has not been initialized.');
      return;
    }

    this.overlay.style.display = 'block';
    this.overlay.style.pointerEvents = 'auto'; // Capture events if needed
    this.isActive = true;

    // You can add additional logic for the draw state here
    // For example, adding event listeners for drawing
  }

  /**
   * Stops the overlay by hiding it and returning to the normal state.
   */
  stop() {
    if (!this.overlay) {
      console.warn('Overlay has not been initialized.');
      return;
    }

    this.overlay.style.display = 'none';
    this.overlay.style.pointerEvents = 'none'; // Release event capture
    this.isActive = false;

    // You can add additional logic for the normal state here
    // For example, removing event listeners related to drawing
  }

  /**
   * Optionally, allows updating the overlay content after initialization.
   * @param {HTMLElement|Function|string} newContent - New content to insert into the overlay.
   */
  setContent(newContent) {
    // Clear existing content
    this.overlay.innerHTML = '';

    if (newContent) {
      let contentElement;

      if (typeof newContent === 'function') {
        contentElement = newContent();
      } else if (typeof newContent === 'string') {
        this.overlay.innerHTML = newContent;
      } else if (newContent instanceof HTMLElement) {
        contentElement = newContent;
      } else {
        console.warn('Unsupported content type for overlay.');
      }

      if (contentElement instanceof HTMLElement) {
        this.overlay.appendChild(contentElement);
      }
    }
  }
}
```
should we init at construction?