@ashraf_mizo/htmlcanvas 1.0.0

package/editor/editor.js

@@ -0,0 +1,833 @@
+// HTMLCanvas — client-side editor wiring (ES module)
+
+import { injectIds } from './domModel.js';
+import { serialize, clearChanges, hasChanges } from './serializer.js';
+import { initZoom, zoomIn, zoomOut, zoomReset, setZoom, getZoom, zoomToFit } from './zoom.js';
+import { detectSlides } from './slides.js';
+import { undo, redo, clearHistory, push, makeDeleteCommand, markSaved, isDirty } from './history.js';
+import { initShortcuts, attachIframeRelay } from './shortcuts.js';
+import { initSelection, getSelectedElement, getSelectedHcId, clearSelection, selectElement } from './selection.js';
+import { initLayers, makeZIndexCommand, getTopZIndex, notifyLayersChanged } from './layers.js';
+import { initManipulation } from './manipulation.js';
+import { toggleSnap } from './snap.js';
+import { copySelected, makePasteCommand } from './clipboard.js';
+import { initTextEdit, isTextEditActive } from './textEdit.js';
+import { initProperties } from './properties.js';
+import { initAssets, loadAssets, initShapePicker } from './assets.js';
+import { initMultiSelect, getSelectedElements, getSelectedHcIds, makeGroupCommand, makeUngroupCommand, clearMultiSelection } from './multiSelect.js';
+import { alignElements, distributeElements } from './alignment.js';
+import { initGuides, toggleGuides } from './guides.js';
+import { initSlidePanel } from './slidePanel.js';
+import { initCrop, startCrop } from './crop.js';
+
+
+// ── State ────────────────────────────────────────────────────────────────────
+window._editorState = {
+  path: null,
+  content: null,
+  filename: null,
+  pathKnown: false
+};
+
+// ── DOM refs ─────────────────────────────────────────────────────────────────
+const welcomeScreen     = document.getElementById('welcome-screen');
+const currentFilename   = document.getElementById('current-filename');
+const btnOpen           = document.getElementById('btn-open');
+const btnSave           = document.getElementById('btn-save');
+const btnExport         = document.getElementById('btn-export');
+const btnExportPdf      = document.getElementById('btn-export-pdf');
+const recentFilesList   = document.getElementById('recent-files-list');
+const toolbarStatus     = document.getElementById('toolbar-status');
+const canvasEmptyState  = document.getElementById('canvas-empty-state');
+const iframeContainer   = document.getElementById('iframe-container');
+const renderIframe      = document.getElementById('render-iframe');
+const dropOverlay       = document.getElementById('drop-overlay');
+const fileChangedBanner = document.getElementById('file-changed-banner');
+const btnBannerReload   = document.getElementById('btn-banner-reload');
+const btnBannerDismiss  = document.getElementById('btn-banner-dismiss');
+const btnZoomIn         = document.getElementById('btn-zoom-in');
+const btnZoomOut        = document.getElementById('btn-zoom-out');
+const btnZoomLevel      = document.getElementById('btn-zoom-level');
+const slideCount        = document.getElementById('slide-count');
+const btnSnap           = document.getElementById('btn-snap');
+const btnUndo           = document.getElementById('btn-undo');
+const btnRedo           = document.getElementById('btn-redo');
+const btnDeselect       = document.getElementById('btn-deselect');
+
+// ── Undo / Redo / Deselect helpers ──────────────────────────────────────────
+function doUndo() {
+  const desc = undo();
+  if (desc) {
+    showStatus(`Undo: ${desc}`);
+    window.dispatchEvent(new CustomEvent('hc:zoom-changed'));
+  } else {
+    showStatus('Nothing to undo');
+  }
+}
+
+function doRedo() {
+  const desc = redo();
+  if (desc) {
+    showStatus(`Redo: ${desc}`);
+    window.dispatchEvent(new CustomEvent('hc:zoom-changed'));
+  } else {
+    showStatus('Nothing to redo');
+  }
+}
+
+function doDeselect() {
+  clearSelection();
+}
+
+// ── Keyboard shortcuts ────────────────────────────────────────────────────────
+initShortcuts({
+  undo: doUndo,
+  redo: doRedo,
+  deleteSelected: () => {
+    const el    = getSelectedElement();
+    const hcId  = getSelectedHcId();
+    if (!el || !hcId) return;
+    const cmd = makeDeleteCommand(hcId, el);
+    push(cmd);
+  },
+  copy: () => {
+    const el = getSelectedElement();
+    if (!el) return;
+    if (copySelected(el)) {
+      showStatus('Copied');
+    }
+  },
+  cut: () => {
+    // Ctrl+X = duplicate: copy element and paste right next to original
+    const el = getSelectedElement();
+    const iframeDoc = document.getElementById('render-iframe')?.contentDocument;
+    if (!el || !iframeDoc) return;
+    if (copySelected(el)) {
+      const cmd = makePasteCommand(iframeDoc);
+      if (cmd) {
+        push(cmd);
+        showStatus('Duplicated');
+        window.dispatchEvent(new CustomEvent('hc:zoom-changed'));
+      }
+    }
+  },
+  paste: () => {
+    const iframeDoc = document.getElementById('render-iframe')?.contentDocument;
+    if (!iframeDoc) return;
+    const cmd = makePasteCommand(iframeDoc);
+    if (cmd) {
+      push(cmd);
+      showStatus('Pasted');
+      window.dispatchEvent(new CustomEvent('hc:zoom-changed'));
+    }
+  },
+  selectAll: () => {
+    const iframeDoc = document.getElementById('render-iframe')?.contentDocument;
+    if (!iframeDoc) return;
+    clearMultiSelection();
+    import('./multiSelect.js').then(({ addToSelection }) => {
+      let count = 0;
+      const elements = iframeDoc.querySelectorAll('[data-hc-id]');
+      for (const el of elements) {
+        if (el.classList.contains('page') || el.tagName === 'BODY') continue;
+        addToSelection(el);
+        count++;
+      }
+      showStatus(`Selected ${count} elements`);
+    });
+  },
+  escape:         doDeselect,
+  save:           () => doSave(),
+  exportFile:     () => doExport(),
+  zoomIn,
+  zoomOut,
+  zoomReset,
+  group: () => {
+    const elements = getSelectedElements();
+    const hcIds    = getSelectedHcIds();
+    const iframeDoc = document.getElementById('render-iframe')?.contentDocument;
+    if (elements.length < 2 || !iframeDoc) return;
+    const cmd = makeGroupCommand(elements, hcIds, iframeDoc);
+    push(cmd);
+    clearMultiSelection();
+    showStatus('Grouped');
+    window.dispatchEvent(new CustomEvent('hc:zoom-changed'));
+  },
+  ungroup: () => {
+    const el    = getSelectedElement();
+    const iframeDoc = document.getElementById('render-iframe')?.contentDocument;
+    if (!el || !iframeDoc) return;
+    if (!el.hasAttribute('data-hc-group')) return;
+    const cmd = makeUngroupCommand(el, iframeDoc);
+    push(cmd);
+    clearSelection();
+    showStatus('Ungrouped');
+    window.dispatchEvent(new CustomEvent('hc:zoom-changed'));
+  },
+});
+
+// ── Toolbar status flash ──────────────────────────────────────────────────────
+let statusTimer = null;
+function showStatus(msg, duration = 2000) {
+  toolbarStatus.textContent = msg;
+  toolbarStatus.classList.add('visible');
+  clearTimeout(statusTimer);
+  statusTimer = setTimeout(() => toolbarStatus.classList.remove('visible'), duration);
+}
+
+// ── On file opened ────────────────────────────────────────────────────────────
+async function onFileOpened({ path, content, filename, pathKnown = true }) {
+  slideCount.style.display = 'none';
+  window._editorState = { path, content, filename, pathKnown };
+
+  // Reset undo/redo history and clear any stale selection when a new file is opened
+  clearHistory();
+  clearSelection();
+
+  // Build DOM model with stable IDs
+  const { annotatedHTML } = injectIds(content);
+  window._editorState.annotatedHTML = annotatedHTML;
+
+  document.title = `HTMLCanvas — ${filename}`;
+  currentFilename.textContent = filename;
+  welcomeScreen.style.display = 'none';
+
+  // Hide empty state, show iframe with rendered content
+  canvasEmptyState.style.display = 'none';
+  iframeContainer.style.display = 'block';
+
+  // Send annotated HTML to server for iframe rendering
+  await fetch('/api/set-annotated', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ content: annotatedHTML })
+  });
+
+  // Load the rendered HTML into the iframe
+  renderIframe.src = '/render?t=' + Date.now();
+
+  // Wait for iframe to load, then size it to content
+  renderIframe.onload = () => {
+    try {
+      const iframeDoc = renderIframe.contentDocument || renderIframe.contentWindow.document;
+      const canvasArea = document.getElementById('canvas-area');
+      // Use clientWidth (CSS layout width) — getBoundingClientRect is affected by CSS zoom
+      const canvasW = canvasArea.clientWidth;
+
+      // Check for .page elements (A4 slide decks) first
+      const pages = iframeDoc.querySelectorAll('.page');
+      let contentWidth, contentHeight;
+
+      if (pages.length > 0) {
+        // Slide deck: use .page width, measure full stacked height
+        renderIframe.style.width = '10000px';
+        renderIframe.style.height = 'auto';
+        void iframeDoc.documentElement.offsetHeight;
+
+        const firstPage = pages[0];
+        contentWidth = Math.max(firstPage.offsetWidth, 794);
+        contentHeight = iframeDoc.documentElement.scrollHeight;
+      } else {
+        // Responsive HTML: use a sensible viewport width (canvas width or 1200px max)
+        contentWidth = Math.min(Math.max(canvasW - 80, 794), 1200);
+        renderIframe.style.width = contentWidth + 'px';
+        renderIframe.style.height = 'auto';
+        void iframeDoc.documentElement.offsetHeight;
+        contentHeight = Math.max(iframeDoc.documentElement.scrollHeight, 400);
+      }
+
+      renderIframe.style.width = contentWidth + 'px';
+      renderIframe.style.height = contentHeight + 'px';
+      iframeContainer.style.width = contentWidth + 'px';
+      iframeContainer.style.height = contentHeight + 'px';
+
+      console.log(`iframe sized: ${contentWidth}x${contentHeight} (${pages.length > 0 ? 'slide deck' : 'responsive'})`);
+
+      // Initialize zoom and auto-fit to canvas width
+      initZoom(iframeContainer, (level) => {
+        btnZoomLevel.textContent = Math.round(level * 100) + '%';
+      });
+      zoomToFit(contentWidth, canvasW);
+
+      // Detect slides (.page elements)
+      const { count } = detectSlides(iframeDoc);
+      if (count > 0) {
+        slideCount.textContent = `${count} slide${count !== 1 ? 's' : ''}`;
+        slideCount.style.display = '';
+      } else {
+        slideCount.style.display = 'none';
+      }
+
+      // Relay keyboard events from iframe to top-level document (for hotkeys-js)
+      attachIframeRelay(iframeDoc);
+
+      // Intercept Ctrl+wheel inside the iframe to prevent browser zoom
+      iframeDoc.addEventListener('wheel', (e) => {
+        if (e.ctrlKey || e.metaKey) {
+          e.preventDefault();
+          if (e.deltaY < 0) zoomIn();
+          else zoomOut();
+        }
+      }, { passive: false });
+
+      // Initialise selection module with the new iframe
+      initSelection(renderIframe, iframeDoc, canvasArea);
+
+      // Initialise manipulation (Moveable drag/resize/rotate) after selection
+      initManipulation(renderIframe, iframeDoc, canvasArea);
+
+      // Initialise inline text editing (double-click to edit contenteditable)
+      initTextEdit(renderIframe, iframeDoc, canvasArea);
+
+      // Initialise layer panel with the new iframe document
+      initLayers(renderIframe, iframeDoc, canvasArea);
+
+      // Initialise properties panel (right sidebar)
+      initProperties(renderIframe, iframeDoc);
+
+      // Initialise multi-select (shift-click + marquee drag + group/ungroup)
+      initMultiSelect(renderIframe, iframeDoc, canvasArea);
+
+      // Initialise asset browser & component library
+      initAssets(renderIframe, iframeDoc, canvasArea);
+      loadAssets();
+
+      // Initialise image crop tool
+      initCrop(renderIframe, iframeDoc, canvasArea);
+
+      // Initialise rulers and guides
+      initGuides(canvasArea, iframeContainer, renderIframe);
+
+      // Initialise slide panel (continuous scroll + thumbnail sync for multi-page decks)
+      if (pages.length > 1) {
+        initSlidePanel(renderIframe, iframeDoc, canvasArea, iframeContainer);
+      }
+
+      // Dispatch custom event for other modules (zoom, slide awareness)
+      window.dispatchEvent(new CustomEvent('hc:iframe-ready', {
+        detail: { iframe: renderIframe, doc: iframeDoc, width: contentWidth, height: contentHeight }
+      }));
+    } catch (err) {
+      console.error('Could not access iframe content:', err);
+    }
+  };
+
+  // Save button availability
+  if (pathKnown) {
+    btnSave.disabled = false;
+    btnSave.title = '';
+  } else {
+    btnSave.disabled = true;
+    btnSave.title = 'Save not available — file opened via drag-and-drop. Use Export instead.';
+  }
+}
+
+// ── Load recent files on startup ──────────────────────────────────────────────
+async function loadRecents() {
+  try {
+    const res = await fetch('/api/recents');
+    const { recents } = await res.json();
+
+    if (!recents || recents.length === 0) {
+      recentFilesList.innerHTML = '<li><span class="recent-files-empty">No recent files</span></li>';
+      return;
+    }
+
+    recentFilesList.innerHTML = '';
+    for (const filePath of recents) {
+      const li = document.createElement('li');
+      const filename = filePath.split(/[\\/]/).pop();
+      const dir = filePath.substring(0, filePath.lastIndexOf(filePath.split(/[\\/]/).pop()) - 1);
+      li.innerHTML = `
+        <span class="recent-filename">${filename}</span>
+        <span class="recent-path">${dir}</span>
+      `;
+      li.addEventListener('click', () => openFileByPath(filePath));
+      recentFilesList.appendChild(li);
+    }
+  } catch (err) {
+    console.error('Failed to load recents:', err);
+    recentFilesList.innerHTML = '<li><span class="recent-files-empty">Could not load recent files</span></li>';
+  }
+}
+
+// ── Open file by absolute path (recent files) ─────────────────────────────────
+async function openFileByPath(filePath) {
+  try {
+    const res = await fetch(`/api/file?path=${encodeURIComponent(filePath)}`);
+    if (!res.ok) throw new Error(`Server error ${res.status}`);
+    const data = await res.json();
+    await onFileOpened({ ...data, pathKnown: true });
+  } catch (err) {
+    console.error('Failed to open file by path:', err);
+    alert(`Could not open file: ${err.message}`);
+  }
+}
+
+// ── Open file dialog button ───────────────────────────────────────────────────
+btnOpen.addEventListener('click', async () => {
+  try {
+    btnOpen.disabled = true;
+    btnOpen.textContent = 'Opening…';
+    const res = await fetch('/api/open-dialog');
+    const data = await res.json();
+    if (data.cancelled) return;
+    await onFileOpened({ ...data, pathKnown: true });
+  } catch (err) {
+    console.error('Failed to open file:', err);
+    alert(`Could not open file: ${err.message}`);
+  } finally {
+    btnOpen.disabled = false;
+    btnOpen.textContent = 'Open File';
+  }
+});
+
+// ── Drag and drop ─────────────────────────────────────────────────────────────
+let dragCounter = 0;
+
+document.addEventListener('dragenter', (e) => {
+  e.preventDefault();
+  dragCounter++;
+  dropOverlay.classList.add('active');
+});
+
+document.addEventListener('dragleave', () => {
+  dragCounter--;
+  if (dragCounter <= 0) {
+    dragCounter = 0;
+    dropOverlay.classList.remove('active');
+  }
+});
+
+document.addEventListener('dragover', (e) => {
+  e.preventDefault();
+});
+
+document.addEventListener('drop', (e) => {
+  e.preventDefault();
+  dragCounter = 0;
+  dropOverlay.classList.remove('active');
+
+  const file = e.dataTransfer.files[0];
+  if (!file) return;
+
+  const reader = new FileReader();
+  reader.onload = async (evt) => {
+    const content = evt.target.result;
+    try {
+      const res = await fetch('/api/register-drag', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ content, filename: file.name })
+      });
+      const data = await res.json();
+      if (data.ok) {
+        await onFileOpened({ path: null, content, filename: file.name, pathKnown: false });
+      }
+    } catch (err) {
+      console.error('Drag register failed:', err);
+    }
+  };
+  reader.readAsText(file);
+});
+
+// ── Save (Ctrl+S) ─────────────────────────────────────────────────────────────
+async function doSave() {
+  const state = window._editorState;
+  if (!state.pathKnown) {
+    showStatus('No path — use Export (Ctrl+Shift+S)');
+    return;
+  }
+  try {
+    // Use serializer to produce clean output (strips data-hc-id, byte-identical when no edits)
+    const output = serialize();
+
+    const res = await fetch('/api/save', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ content: output })
+    });
+    if (!res.ok) throw new Error((await res.json()).error);
+
+    clearChanges();
+    markSaved();
+    showStatus('Saved');
+  } catch (err) {
+    console.error('Save failed:', err);
+    showStatus('Save failed');
+  }
+}
+
+btnSave.addEventListener('click', doSave);
+
+// ── Export (Ctrl+Shift+S) ─────────────────────────────────────────────────────
+async function doExport() {
+  const state = window._editorState;
+  if (!state.content) {
+    showStatus('No file open');
+    return;
+  }
+  try {
+    const dialogRes = await fetch('/api/export-dialog');
+    const dialogData = await dialogRes.json();
+    if (dialogData.cancelled) return;
+
+    // Use serializer to produce clean output (strips data-hc-id, byte-identical when no edits)
+    const output = serialize();
+
+    const exportRes = await fetch('/api/export', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ content: output, exportPath: dialogData.exportPath })
+    });
+    if (!exportRes.ok) throw new Error((await exportRes.json()).error);
+    showStatus('Exported');
+  } catch (err) {
+    console.error('Export failed:', err);
+    showStatus('Export failed');
+  }
+}
+
+btnExport.addEventListener('click', doExport);
+
+// ── Export PDF ────────────────────────────────────────────────────────────────
+async function doExportPdf() {
+  const state = window._editorState;
+  if (!state.content) {
+    showStatus('No file open');
+    return;
+  }
+  try {
+    btnExportPdf.disabled = true;
+    btnExportPdf.textContent = 'Exporting…';
+    showStatus('Generating PDF…', 10000);
+
+    const output = serialize();
+
+    const res = await fetch('/api/export-pdf', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ content: output })
+    });
+    const data = await res.json();
+    if (data.cancelled) {
+      showStatus('PDF export cancelled');
+      return;
+    }
+    if (!res.ok) throw new Error(data.error);
+    showStatus('PDF exported');
+  } catch (err) {
+    console.error('PDF export failed:', err);
+    showStatus('PDF export failed');
+  } finally {
+    btnExportPdf.disabled = false;
+    btnExportPdf.textContent = 'PDF';
+  }
+}
+
+btnExportPdf.addEventListener('click', doExportPdf);
+
+// ── Undo / Redo / Deselect buttons ───────────────────────────────────────────
+btnUndo.addEventListener('click', doUndo);
+btnRedo.addEventListener('click', doRedo);
+btnDeselect.addEventListener('click', doDeselect);
+
+// ── Zoom controls ────────────────────────────────────────────────────────────
+btnZoomIn.addEventListener('click', zoomIn);
+btnZoomOut.addEventListener('click', zoomOut);
+btnZoomLevel.addEventListener('click', zoomReset);
+
+// ── Snap toggle ───────────────────────────────────────────────────────────────
+btnSnap.addEventListener('click', () => {
+  const enabled = toggleSnap();
+  if (enabled) {
+    btnSnap.classList.add('active');
+  } else {
+    btnSnap.classList.remove('active');
+  }
+});
+
+// ── Guides toggle ─────────────────────────────────────────────────────────────
+const btnGuides = document.getElementById('btn-guides');
+btnGuides.addEventListener('click', () => {
+  const visible = toggleGuides();
+  if (visible) {
+    btnGuides.classList.add('active');
+  } else {
+    btnGuides.classList.remove('active');
+  }
+});
+
+// ── Mouse wheel zoom — intercept globally to prevent browser zoom ────────────
+// Ctrl+wheel on the canvas zooms the slide; Ctrl+wheel elsewhere is blocked
+// so the browser never zooms the whole page (panels stay fixed size).
+const canvasArea = document.getElementById('canvas-area');
+document.addEventListener('wheel', (e) => {
+  if (e.ctrlKey || e.metaKey) {
+    e.preventDefault();
+    // Only apply canvas zoom when hovering over the canvas area
+    if (canvasArea && canvasArea.contains(e.target)) {
+      if (e.deltaY < 0) zoomIn();
+      else zoomOut();
+    }
+  }
+}, { passive: false });
+
+// Also block Ctrl+plus/minus browser zoom globally — redirect to canvas zoom
+document.addEventListener('keydown', (e) => {
+  if ((e.ctrlKey || e.metaKey) && (e.key === '=' || e.key === '+' || e.key === '-' || e.key === '0')) {
+    e.preventDefault();
+    if (e.key === '=' || e.key === '+') zoomIn();
+    else if (e.key === '-') zoomOut();
+    else if (e.key === '0') zoomReset();
+  }
+});
+
+// ── WebSocket: file-changed notifications ─────────────────────────────────────
+function connectWebSocket() {
+  const wsUrl = `ws://localhost:${location.port}`;
+  let ws;
+  try {
+    ws = new WebSocket(wsUrl);
+  } catch (err) {
+    console.warn('WebSocket connection failed:', err);
+    return;
+  }
+
+  ws.addEventListener('message', (event) => {
+    try {
+      const msg = JSON.parse(event.data);
+      if (msg.type === 'file-changed') {
+        // Auto-reload the file if no unsaved editor changes
+        const state = window._editorState;
+        if (state.path && !isDirty()) {
+          openFileByPath(state.path).then(() => showStatus('Auto-reloaded'));
+        } else {
+          fileChangedBanner.classList.add('visible');
+        }
+      }
+    } catch {
+      // ignore malformed messages
+    }
+  });
+
+  ws.addEventListener('close', () => {
+    // Reconnect after 3s if connection drops
+    setTimeout(connectWebSocket, 3000);
+  });
+
+  ws.addEventListener('error', () => {
+    ws.close();
+  });
+}
+
+btnBannerReload.addEventListener('click', async () => {
+  fileChangedBanner.classList.remove('visible');
+  const state = window._editorState;
+  if (state.path) {
+    await openFileByPath(state.path);
+    showStatus('Reloaded from disk');
+  }
+});
+
+btnBannerDismiss.addEventListener('click', () => {
+  fileChangedBanner.classList.remove('visible');
+});
+
+// ── Layer panel: hc:select-request (panel item clicked) ───────────────────────
+// When the layer panel item is clicked, simulate a click on the iframe element
+// so selection.js picks it up through its normal onIframeClick path.
+// Guard: ignore selection requests while text editing is active.
+window.addEventListener('hc:select-request', (e) => {
+  if (isTextEditActive()) return; // don't interrupt text editing
+  const { element } = e.detail || {};
+  if (!element) return;
+  selectElement(element);
+});
+
+// ── Alignment toolbar ────────────────────────────────────────────────────────
+const toolbarAlign = document.getElementById('toolbar-align');
+
+// Show alignment buttons when something is selected
+window.addEventListener('hc:selection-changed', () => {
+  if (toolbarAlign) toolbarAlign.style.display = '';
+});
+window.addEventListener('hc:selection-cleared', () => {
+  if (toolbarAlign) toolbarAlign.style.display = 'none';
+});
+window.addEventListener('hc:multi-selection-changed', (e) => {
+  const { elements } = e.detail || {};
+  if (toolbarAlign) toolbarAlign.style.display = (elements && elements.length > 0) ? '' : '';
+});
+
+// Wire alignment buttons
+document.querySelectorAll('[data-align]').forEach(btn => {
+  btn.addEventListener('click', () => {
+    const dir = btn.dataset.align;
+    // Try multi-selection first, fall back to single
+    let elements = getSelectedElements();
+    let hcIds = getSelectedHcIds();
+    if (elements.length < 2) {
+      const el = getSelectedElement();
+      const hcId = getSelectedHcId();
+      if (el && hcId) {
+        elements = [el];
+        hcIds = [hcId];
+      }
+    }
+    if (elements.length > 0) {
+      alignElements(elements, hcIds, dir);
+      window.dispatchEvent(new CustomEvent('hc:zoom-changed'));
+      showStatus(`Align ${dir}`);
+    }
+  });
+});
+
+// Wire distribution buttons
+document.querySelectorAll('[data-distribute]').forEach(btn => {
+  btn.addEventListener('click', () => {
+    const axis = btn.dataset.distribute;
+    const elements = getSelectedElements();
+    const hcIds = getSelectedHcIds();
+    if (elements.length >= 3) {
+      distributeElements(elements, hcIds, axis);
+      window.dispatchEvent(new CustomEvent('hc:zoom-changed'));
+      showStatus(`Distribute ${axis}`);
+    } else {
+      showStatus('Need 3+ elements to distribute');
+    }
+  });
+});
+
+// ── Z-order buttons (layer ordering) ────────────────────────────────────────
+document.querySelectorAll('[data-zorder]').forEach(btn => {
+  btn.addEventListener('click', () => {
+    const el    = getSelectedElement();
+    const hcId  = getSelectedHcId();
+    if (!el || !hcId) return;
+
+    const parent = el.parentElement;
+    if (!parent) return;
+
+    const siblings = Array.from(parent.children).filter(c => c.getAttribute('data-hc-id'));
+    const action = btn.dataset.zorder;
+    const oldZ = el.style.zIndex || '';
+
+    let newZ;
+    if (action === 'front') {
+      newZ = getTopZIndex(parent);
+    } else if (action === 'back') {
+      // Find lowest z-index among siblings, go below it
+      let min = Infinity;
+      for (const s of siblings) {
+        const z = parseInt(s.style.zIndex, 10);
+        if (!isNaN(z) && z < min) min = z;
+      }
+      newZ = (min === Infinity || min <= 0) ? 0 : min - 1;
+    } else if (action === 'forward') {
+      // Find next higher z-index and go above it
+      const curZ = parseInt(oldZ, 10) || 0;
+      let nextUp = null;
+      for (const s of siblings) {
+        if (s === el) continue;
+        const z = parseInt(s.style.zIndex, 10) || 0;
+        if (z > curZ && (nextUp === null || z < nextUp)) nextUp = z;
+      }
+      newZ = nextUp !== null ? nextUp + 1 : curZ + 1;
+    } else if (action === 'backward') {
+      // Find next lower z-index and go below it
+      const curZ = parseInt(oldZ, 10) || 0;
+      let nextDown = null;
+      for (const s of siblings) {
+        if (s === el) continue;
+        const z = parseInt(s.style.zIndex, 10) || 0;
+        if (z < curZ && (nextDown === null || z > nextDown)) nextDown = z;
+      }
+      newZ = nextDown !== null ? nextDown - 1 : curZ - 1;
+    }
+
+    // z-index only works on positioned elements — ensure at least position: relative
+    if (!el.style.position || el.style.position === 'static') {
+      el.style.position = 'relative';
+    }
+    const cmd = makeZIndexCommand(el, hcId, oldZ, newZ);
+    push(cmd);
+    notifyLayersChanged();
+    showStatus(`Layer: ${action}`);
+    window.dispatchEvent(new CustomEvent('hc:zoom-changed'));
+  });
+});
+
+// ── Unsaved changes guard ─────────────────────────────────────────────────────
+// Prompt the user before navigating away (refresh, close tab) if there are
+// unsaved edits. Works for both normal refresh and hard refresh.
+window.addEventListener('beforeunload', (e) => {
+  if (isDirty() || hasChanges()) {
+    e.preventDefault();
+    // Modern browsers ignore custom messages but require returnValue to be set
+    e.returnValue = '';
+  }
+});
+
+// ── Expose for external scripts (demo, embeds) ───────────────────────────────
+window._hcOpenFileByPath = openFileByPath;
+window._hcOpenFile = ({ content, filename }) => {
+  onFileOpened({ path: null, content, filename, pathKnown: false });
+};
+
+// ── Collapsible panels ───────────────────────────────────────────────────────
+const editorLayout = document.querySelector('.editor-layout');
+const panelLeft    = document.getElementById('panel-left');
+const panelRight   = document.getElementById('panel-right');
+const btnToggleLeft  = document.getElementById('btn-toggle-left');
+const btnToggleRight = document.getElementById('btn-toggle-right');
+
+function togglePanel(side) {
+  const cls = side + '-collapsed';
+  const panel = side === 'left' ? panelLeft : panelRight;
+  const isCollapsed = editorLayout.classList.toggle(cls);
+  panel.classList.toggle('collapsed', isCollapsed);
+  try { localStorage.setItem('hc-panel-' + side, isCollapsed ? '1' : '0'); } catch {}
+  // Let zoom / selection recalculate after transition
+  setTimeout(() => window.dispatchEvent(new CustomEvent('hc:zoom-changed')), 260);
+}
+
+btnToggleLeft.addEventListener('click', () => togglePanel('left'));
+btnToggleRight.addEventListener('click', () => togglePanel('right'));
+
+// Restore saved panel state (both default open)
+function restorePanelState() {
+  // Reset stale preferences from previous layout version
+  if (localStorage.getItem('hc-panel-v') !== '2') {
+    localStorage.removeItem('hc-panel-left');
+    localStorage.removeItem('hc-panel-right');
+    localStorage.setItem('hc-panel-v', '2');
+  }
+  const leftPref  = localStorage.getItem('hc-panel-left');
+  const rightPref = localStorage.getItem('hc-panel-right');
+  const leftCollapsed  = leftPref === '1';
+  const rightCollapsed = rightPref === '1';
+  if (leftCollapsed) {
+    editorLayout.classList.add('left-collapsed');
+    panelLeft.classList.add('collapsed');
+  } else {
+    editorLayout.classList.remove('left-collapsed');
+    panelLeft.classList.remove('collapsed');
+  }
+  if (rightCollapsed) {
+    editorLayout.classList.add('right-collapsed');
+    panelRight.classList.add('collapsed');
+  }
+}
+restorePanelState();
+
+// Alt+1 / Alt+2 keyboard shortcuts for panel toggles
+document.addEventListener('keydown', (e) => {
+  if (e.altKey && e.key === '1') { e.preventDefault(); togglePanel('left'); }
+  if (e.altKey && e.key === '2') { e.preventDefault(); togglePanel('right'); }
+});
+
+// ── Init ──────────────────────────────────────────────────────────────────────
+initShapePicker();
+loadRecents();
+connectWebSocket();