enhance the sim - first, clean up the layout and add a palette from which I can drag elements - we need a proper EM construction kit - coils and cores and wires etc

components/control-panel.js

@@ -23,31 +23,88 @@ class CustomControlPanel extends HTMLElement {
         .btn:hover {
           transform: translateY(-2px);
         }
+        .component-palette {
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          gap: 0.5rem;
+        }
+        .component-item {
+          padding: 0.5rem;
+          border-radius: 0.5rem;
+          background: rgba(55, 65, 81, 0.5);
+          cursor: grab;
+          text-align: center;
+          transition: all 0.2s ease;
+        }
+        .component-item:hover {
+          background: rgba(59, 130, 246, 0.5);
+          transform: translateY(-2px);
+        }
+        .component-icon {
+          width: 24px;
+          height: 24px;
+          margin: 0 auto 0.25rem;
+        }
       </style>
       <div class="panel p-6 rounded-xl shadow-lg border border-gray-700">
-        <h2 class="text-xl font-semibold mb-4">Control Panel</h2>
+        <h2 class="text-xl font-semibold mb-4">EM Construction Kit</h2>
         
-        <div class="space-y-4">
+        <div class="space-y-6">
           <div>
-            <label class="block text-sm font-medium mb-1">Number of Magnets</label>
-            <input type="range" min="1" max="4" value="2" 
-                   class="slider w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
+            <h3 class="text-sm font-medium mb-2 uppercase tracking-wider text-gray-400">Components</h3>
+            <div class="component-palette">
+              <div class="component-item" data-type="coil">
+                <i data-feather="circle" class="component-icon text-yellow-500"></i>
+                <div class="text-xs">Coil</div>
+              </div>
+              <div class="component-item" data-type="core">
+                <i data-feather="box" class="component-icon text-gray-400"></i>
+                <div class="text-xs">Core</div>
+              </div>
+              <div class="component-item" data-type="wire">
+                <i data-feather="zap" class="component-icon text-blue-400"></i>
+                <div class="text-xs">Wire</div>
+              </div>
+              <div class="component-item" data-type="magnet">
+                <i data-feather="compass" class="component-icon text-red-500"></i>
+                <div class="text-xs">Magnet</div>
+              </div>
+              <div class="component-item" data-type="battery">
+                <i data-feather="battery" class="component-icon text-green-500"></i>
+                <div class="text-xs">Battery</div>
+              </div>
+              <div class="component-item" data-type="switch">
+                <i data-feather="toggle-right" class="component-icon text-purple-500"></i>
+                <div class="text-xs">Switch</div>
+              </div>
+            </div>
           </div>
           
           <div>
-            <label class="block text-sm font-medium mb-1">Field Strength</label>
-            <input type="range" min="0.1" max="1" step="0.1" value="0.7" 
-                   class="slider w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
+            <h3 class="text-sm font-medium mb-2 uppercase tracking-wider text-gray-400">Properties</h3>
+            <div class="space-y-4">
+              <div>
+                <label class="block text-sm font-medium mb-1">Current</label>
+                <input type="range" min="0" max="1" step="0.1" value="0.5" 
+                       class="slider w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
+              </div>
+              
+              <div>
+                <label class="block text-sm font-medium mb-1">Turns</label>
+                <input type="range" min="1" max="10" value="5" 
+                       class="slider w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
+              </div>
+            </div>
           </div>
           
           <div class="pt-2">
             <button class="btn w-full bg-primary-500 hover:bg-primary-600 text-white py-2 px-4 rounded-lg">
-              Reset Simulation
+              Reset Circuit
             </button>
           </div>
         </div>
       </div>
-    `;
+`;
   }
 }
 

components/em-component.js

@@ -0,0 +1,87 @@
+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);

components/navbar.js

@@ -21,8 +21,8 @@ class CustomNavbar extends HTMLElement {
                 <div class="container mx-auto flex justify-between items-center">
                     <div class="flex items-center space-x-2">
                         <i data-feather="compass" class="text-primary-500"></i>
-                        <span class="text-xl font-bold bg-gradient-to-r from-primary-500 to-secondary-500 bg-clip-text text-transparent">MagneSight</span>
-                    </div>
+                        <span class="text-xl font-bold bg-gradient-to-r from-primary-500 to-secondary-500 bg-clip-text text-transparent">EM Constructor</span>
+</div>
                     
                     <div class="hidden md:flex space-x-6">
                         <a href="#" class="nav-link text-gray-300 hover:text-primary-500">Simulator</a>

index.html

@@ -28,40 +28,65 @@
 </head>
 <body class="bg-gray-900 text-gray-100 min-h-screen">
     <custom-navbar></custom-navbar>
-    
     <main class="container mx-auto px-4 py-8">
         <div class="flex flex-col lg:flex-row gap-8">
             <div class="lg:w-1/4">
                 <custom-control-panel></custom-control-panel>
             </div>
             
-            <div class="lg:w-3/4">
+            <div class="lg:w-3/4 space-y-6">
                 <div class="bg-gray-800 rounded-xl p-4 shadow-lg">
                     <div id="visualization-container" class="relative w-full h-96 lg:h-[32rem] rounded-lg overflow-hidden">
                         <canvas id="fieldCanvas" class="absolute inset-0 w-full h-full"></canvas>
+                        <div id="component-overlay" class="absolute inset-0 pointer-events-none"></div>
                     </div>
                 </div>
                 
-                <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
-                    <div class="bg-gray-800 p-4 rounded-xl shadow">
-                        <h3 class="text-lg font-semibold mb-2">Field Strength</h3>
-                        <div id="strength-meter" class="h-4 bg-gray-700 rounded-full overflow-hidden">
-                            <div class="h-full bg-primary-500 rounded-full" style="width: 50%"></div>
+                <div class="bg-gray-800 p-4 rounded-xl shadow grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <div>
+                        <h3 class="text-sm font-medium mb-2 uppercase tracking-wider text-gray-400">Measurements</h3>
+                        <div class="space-y-2">
+                            <div class="flex justify-between">
+                                <span>Magnetic Flux:</span>
+                                <span class="font-mono">0.42 T</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span>Current:</span>
+                                <span class="font-mono">1.5 A</span>
+                            </div>
                         </div>
                     </div>
-                    <div class="bg-gray-800 p-4 rounded-xl shadow">
-                        <h3 class="text-lg font-semibold mb-2">Polarity</h3>
-                        <div class="flex items-center gap-2">
-                            <span id="polarity-indicator" class="inline-block w-6 h-6 rounded-full bg-red-500"></span>
-                            <span id="polarity-text">North</span>
+                    <div>
+                        <h3 class="text-sm font-medium mb-2 uppercase tracking-wider text-gray-400">Field</h3>
+                        <div class="space-y-2">
+                            <div class="flex justify-between">
+                                <span>Strength:</span>
+                                <span class="font-mono">0.67</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span>Direction:</span>
+                                <span class="font-mono">N→S</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div>
+                        <h3 class="text-sm font-medium mb-2 uppercase tracking-wider text-gray-400">Components</h3>
+                        <div class="space-y-2">
+                            <div class="flex justify-between">
+                                <span>Active:</span>
+                                <span class="font-mono">4</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span>Connections:</span>
+                                <span class="font-mono">3</span>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </main>
-
-    <script src="components/navbar.js"></script>
+<script src="components/navbar.js"></script>
     <script src="components/control-panel.js"></script>
     <script src="script.js"></script>
     <script>

script.js

@@ -1,9 +1,21 @@
 
 document.addEventListener('DOMContentLoaded', () => {
-    let magnets = [
-        { x: 0.3, y: 0.5, strength: 0.7, polarity: 1 },
-        { x: 0.7, y: 0.5, strength: 0.7, polarity: -1 }
-    ];
+    // Components data structure
+    const components = {
+        magnets: [
+            { x: 0.3, y: 0.5, strength: 0.7, polarity: 1, type: 'magnet' },
+            { x: 0.7, y: 0.5, strength: 0.7, polarity: -1, type: 'magnet' }
+        ],
+        coils: [],
+        cores: [],
+        wires: [],
+        batteries: [],
+        switches: []
+    };
+
+    let draggedComponent = null;
+    let isDraggingFromPalette = false;
+    let currentTool = null;
 const canvas = document.getElementById('fieldCanvas');
     const ctx = canvas.getContext('2d');
 // Set canvas to full size of container