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/devtools.js

@@ -0,0 +1,31 @@
+let activeTab = 'console';
+const clearHandlers = {};
+
+export function registerClearHandler(tabId, fn) {
+  clearHandlers[tabId] = fn;
+}
+
+export function switchDevtoolsTab(tabId) {
+  activeTab = tabId;
+  document.querySelectorAll('.devtools-tab').forEach(btn => {
+    btn.classList.toggle('active', btn.dataset.tab === tabId);
+  });
+  document.querySelectorAll('.devtools-panel').forEach(panel => {
+    panel.classList.toggle('active', panel.id === `panel-${tabId}`);
+  });
+}
+
+export function getActiveDevtoolsTab() {
+  return activeTab;
+}
+
+export function initDevtools() {
+  document.querySelectorAll('.devtools-tab').forEach(btn => {
+    btn.addEventListener('click', () => switchDevtoolsTab(btn.dataset.tab));
+  });
+
+  document.getElementById('btn-clear-devtools').addEventListener('click', () => {
+    const handler = clearHandlers[activeTab];
+    if (handler) handler();
+  });
+}