Add responsive preview, editor themes, template gallery, devtools, and autocomplete

- Device breakpoint toggles (mobile 375px / tablet 768px / desktop 100%)
- Editor theme selector with 6 themes (VS Dark/Light, High Contrast, Monokai, Dracula, GitHub Dark)
- Starter template gallery with 8 pre-built templates (Todo, API Fetch, CSS Animation, etc.)
- Code autocomplete with DOM/React type definitions and snippet completions
- Devtools panels: console, network, elements, performance
- Code formatter (Prettier), diff view, and linter integration

public/js/performance-panel.js

@@ -0,0 +1,54 @@
+import { registerClearHandler } from './devtools.js';
+
+function timeColor(ms, thresholds) {
+  if (ms < thresholds[0]) return 'perf-green';
+  if (ms < thresholds[1]) return 'perf-yellow';
+  return 'perf-red';
+}
+
+function renderCard(label, value, unit, colorClass) {
+  return `<div class="perf-card">
+    <div class="perf-card-label">${label}</div>
+    <div class="perf-card-value ${colorClass}">${value}<span style="font-size:12px;font-weight:400;margin-left:2px">${unit}</span></div>
+  </div>`;
+}
+
+function render(metrics) {
+  const out = document.getElementById('performance-output');
+  let html = '';
+
+  if (metrics.scriptDuration !== undefined) {
+    html += renderCard('Script Execution', Math.round(metrics.scriptDuration), 'ms',
+      timeColor(metrics.scriptDuration, [50, 200]));
+  }
+  if (metrics.domContentLoaded !== undefined) {
+    html += renderCard('DOM Content Loaded', Math.round(metrics.domContentLoaded), 'ms',
+      timeColor(metrics.domContentLoaded, [100, 500]));
+  }
+  if (metrics.loadEvent !== undefined) {
+    html += renderCard('Page Load', Math.round(metrics.loadEvent), 'ms',
+      timeColor(metrics.loadEvent, [200, 1000]));
+  }
+  if (metrics.domNodes !== undefined) {
+    html += renderCard('DOM Nodes', metrics.domNodes, '',
+      metrics.domNodes > 1500 ? 'perf-red' : metrics.domNodes > 800 ? 'perf-yellow' : 'perf-neutral');
+  }
+  if (metrics.resourceCount !== undefined) {
+    html += renderCard('Resources Loaded', metrics.resourceCount, '', 'perf-neutral');
+  }
+
+  out.innerHTML = html;
+}
+
+export function clearPerformance() {
+  document.getElementById('performance-output').innerHTML = '';
+}
+
+export function initPerformance() {
+  registerClearHandler('performance', clearPerformance);
+
+  window.addEventListener('message', (e) => {
+    if (!e.data || e.data.type !== 'devtools' || e.data.tab !== 'performance') return;
+    if (e.data.metrics) render(e.data.metrics);
+  });
+}