Add editor experience features: auto-run, layouts, resizable panels, Emmet, vim/emacs

- Auto-run toggle with localStorage persistence (toolbar checkbox)
- Layout selector: default, top/bottom, editor-only, preview-only
- Resizable panels via drag dividers with double-click reset
- Emmet abbreviation expansion for HTML, CSS, and JSX
- Vim and Emacs keybinding modes with lazy-loaded CDN libraries
- Shared preferences module for localStorage management
- Editor hooks for tab switch and mode change callbacks

public/js/editors.js

@@ -61,6 +61,8 @@ let currentMode = 'html-css-js';
 let activeTab = null;
 let cssType = 'css';
 let onChangeCallback = null;
+let onTabSwitchCallback = null;
+let onModeChangeCallback = null;
 
 const tabBar = () => document.getElementById('tab-bar');
 const editorArea = () => document.getElementById('editor-area');
@@ -69,6 +71,27 @@ export function setOnChange(cb) {
   onChangeCallback = cb;
 }
 
+export function setOnTabSwitch(cb) {
+  onTabSwitchCallback = cb;
+}
+
+export function setOnModeChange(cb) {
+  onModeChangeCallback = cb;
+}
+
+export function getActiveEditor() {
+  if (activeTab && editors[activeTab]) return editors[activeTab];
+  return null;
+}
+
+export function relayoutEditors() {
+  const tabs = MODE_TABS[currentMode];
+  if (!tabs) return;
+  tabs.forEach((tab) => {
+    if (editors[tab.id]) editors[tab.id].layout();
+  });
+}
+
 export function getCurrentMode() {
   return currentMode;
 }
@@ -213,6 +236,8 @@ export function switchMode(mode) {
   });
 
   switchTab(tabs[0].id);
+
+  if (onModeChangeCallback) onModeChangeCallback(mode);
 }
 
 export function switchTab(tabId) {
@@ -237,6 +262,8 @@ export function switchTab(tabId) {
     editors[tabId].layout();
     editors[tabId].focus();
   }
+
+  if (onTabSwitchCallback) onTabSwitchCallback(tabId, editors[tabId]);
 }
 
 export function getEditorValues() {