components/properties-panel.js

class CustomPropertiesPanel extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .panel {
          width: 300px;
          background-color: white;
          border-left: 1px solid #e5e7eb;
          padding: 1rem;
          overflow-y: auto;
        }
        
        .dark .panel {
          background-color: #1f2937;
          border-left-color: #374151;
        }
        
        .panel-header {
          font-size: 1.125rem;
          font-weight: 600;
          margin-bottom: 1rem;
          color: #111827;
        }
        
        .dark .panel-header {
          color: #f3f4f6;
        }
        
        .property-group {
          margin-bottom: 1.5rem;
        }
        
        .property-label {
          display: block;
          margin-bottom: 0.5rem;
          font-size: 0.875rem;
          color: #4b5563;
        }
        
        .dark .property-label {
          color: #9ca3af;
        }
        
        .property-input {
          width: 100%;
          padding: 0.5rem;
          border-radius: 0.375rem;
          border: 1px solid #d1d5db;
          background-color: #f9fafb;
        }
        
        .dark .property-input {
          border-color: #4b5563;
          background-color: #374151;
          color: #f3f4f6;
        }
        
        .color-palette {
          display: flex;
          gap: 0.5rem;
          margin-top: 0.5rem;
        }
        
        .color-option {
          width: 1.5rem;
          height: 1.5rem;
          border-radius: 9999px;
          cursor: pointer;
          border: 2px solid transparent;
        }
        
        .color-option.selected {
          border-color: #6366f1;
        }
      </style>
      
      <div class="panel">
        <h3 class="panel-header">Propriedades</h3>
        
        <div class="property-group" id="text-properties">
          <label class="property-label">Texto</label>
          <input type="text" class="property-input" id="text-content">
          
          <label class="property-label">Fonte</label>
          <select class="property-input" id="text-font">
            <option>Inter</option>
            <option>Arial</option>
            <option>Helvetica</option>
            <option>Times New Roman</option>
            <option>Courier New</option>
          </select>
          
          <label class="property-label">Tamanho</label>
          <input type="number" class="property-input" id="text-size" min="8" max="72" value="20">
          
          <label class="property-label">Cor</label>
          <div class="color-palette" id="text-colors"></div>
        </div>
        
        <div class="property-group" id="shape-properties">
          <label class="property-label">Cor de preenchimento</label>
          <div class="color-palette" id="fill-colors"></div>
          
          <label class="property-label">Cor da borda</label>
          <div class="color-palette" id="stroke-colors"></div>
          
          <label class="property-label">Espessura da borda</label>
          <input type="range" class="property-input" id="stroke-width" min="0" max="10" value="1">
        </div>
      </div>
    `;

    // Initialize color palettes
    this.initColorPalettes();
  }

  initColorPalettes() {
    const colors = ['#6366F1', '#F59E0B', '#10B981', '#EF4444', '#3B82F6', '#8B5CF6', '#EC4899'];
    const textColors = this.shadowRoot.getElementById('text-colors');
    const fillColors = this.shadowRoot.getElementById('fill-colors');
    const strokeColors = this.shadowRoot.getElementById('stroke-colors');

    colors.forEach(color => {
      const textColor = document.createElement('div');
      textColor.className = 'color-option';
      textColor.style.backgroundColor = color;
      textColor.addEventListener('click', () => this.setElementProperty('color', color));
      textColors.appendChild(textColor);

      const fillColor = document.createElement('div');
      fillColor.className = 'color-option';
      fillColor.style.backgroundColor = color;
      fillColor.addEventListener('click', () => this.setElementProperty('fill', color));
      fillColors.appendChild(fillColor);

      const strokeColor = document.createElement('div');
      strokeColor.className = 'color-option';
      strokeColor.style.backgroundColor = color;
      strokeColor.addEventListener('click', () => this.setElementProperty('stroke', color));
      strokeColors.appendChild(strokeColor);
    });
  }

  setElementProperty(property, value) {
    if (window.state.selectedElement) {
      window.state.selectedElement.setAttr(property, value);
      window.designStage.batchDraw();
    }
  }
}

customElements.define('custom-properties-panel', CustomPropertiesPanel);