components/em-component.js

class EMComponent extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.type = this.getAttribute('type') || 'magnet';
        this.x = 0;
        this.y = 0;
        this.rotation = 0;
        this.properties = {};
    }

    connectedCallback() {
        this.render();
        this.setupDrag();
    }

    render() {
        const colors = {
            magnet: '#ef4444',
            coil: '#f59e0b',
            core: '#6b7280',
            wire: '#3b82f6',
            battery: '#10b981',
            switch: '#8b5cf6'
        };

        this.shadowRoot.innerHTML = `
            <style>
                .component {
                    position: absolute;
                    cursor: move;
                    touch-action: none;
                    transform-origin: center;
                }
                .component-icon {
                    pointer-events: none;
                }
            </style>
            <div class="component" style="left: ${this.x}px; top: ${this.y}px;">
                <i data-feather="${this.getIcon()}" class="component-icon" 
                   style="color: ${colors[this.type] || '#ffffff'}; width: 32px; height: 32px;"></i>
            </div>
        `;
        feather.replace();
    }

    getIcon() {
        const icons = {
            magnet: 'compass',
            coil: 'circle',
            core: 'box',
            wire: 'zap',
            battery: 'battery',
            switch: 'toggle-right'
        };
        return icons[this.type] || 'help-circle';
    }

    setupDrag() {
        const component = this.shadowRoot.querySelector('.component');
        
        component.addEventListener('mousedown', (e) => {
            e.preventDefault();
            const startX = e.clientX;
            const startY = e.clientY;
            const startLeft = parseInt(component.style.left) || 0;
            const startTop = parseInt(component.style.top) || 0;

            function moveHandler(e) {
                const dx = e.clientX - startX;
                const dy = e.clientY - startY;
                component.style.left = `${startLeft + dx}px`;
                component.style.top = `${startTop + dy}px`;
            }

            function upHandler() {
                document.removeEventListener('mousemove', moveHandler);
                document.removeEventListener('mouseup', upHandler);
            }

            document.addEventListener('mousemove', moveHandler);
            document.addEventListener('mouseup', upHandler);
        });
    }
}

customElements.define('em-component', EMComponent);