components/editor-panel.js

class EditorPanel extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          height: 100%;
        }
        .editor-container {
          height: 100%;
          position: relative;
        }
        .editor-tabs {
          display: flex;
          border-bottom: 1px solid #e5e7eb;
          background: #f9fafb;
          padding-left: 1rem;
        }
        .tab {
          padding: 0.75rem 1rem;
          border-right: 1px solid #e5e7eb;
          cursor: pointer;
          position: relative;
        }
        .tab.active {
          background: white;
          border-bottom: 2px solid #3b82f6;
        }
        .tab-close {
          margin-left: 0.5rem;
          color: #9ca3af;
        }
        .monaco-editor {
          height: calc(100% - 42px);
        }
      </style>
      <div class="editor-container">
        <div class="editor-tabs">
          <div class="tab active">
            index.js
            <span class="tab-close">&times;</span>
          </div>
          <div class="tab">
            + New File
          </div>
        </div>
        <div id="editor" class="monaco-editor"></div>
      </div>
    `;
  }
}
customElements.define('editor-panel', EditorPanel);