@ashraf_mizo/htmlcanvas 1.0.0

package/editor/assets.js

@@ -0,0 +1,724 @@
+// editor/assets.js — Asset browser, component library, shape insertion, image replace
+//
+// Exports:
+//   initAssets(iframe, iframeDoc, canvasArea)
+//   SHAPE_TEMPLATES
+//   loadAssets()
+//
+// Imports: serializer (stripHcIds, recordChange, recordDeletion), history (push), selection, coords
+
+import { stripHcIds, recordChange, recordDeletion } from './serializer.js';
+import { push } from './history.js';
+import { getSelectedElement, getSelectedHcId } from './selection.js';
+import { canvasToIframe } from './coords.js';
+import { getTopZIndex, notifyLayersChanged } from './layers.js';
+
+/**
+ * Returns the currently visible .page element (accounts for slide panel mode).
+ * Uses getCurrentSlideIndex if available, otherwise falls back to first visible page.
+ */
+function getVisiblePage(iframeDoc) {
+  const pages = iframeDoc.querySelectorAll('.page');
+  if (pages.length === 0) return iframeDoc.body;
+
+  // If slide panel is tracking a current index, use that
+  try {
+    const { getCurrentSlideIndex, isSlideMode } = window._slidePanelAPI || {};
+    if (isSlideMode && isSlideMode() && getCurrentSlideIndex) {
+      const idx = getCurrentSlideIndex();
+      if (pages[idx]) return pages[idx];
+    }
+  } catch (_) {}
+
+  // Fallback: first visible page
+  for (const page of pages) {
+    if (page.style.display !== 'none') return page;
+  }
+  return pages[0] || iframeDoc.body;
+}
+
+// ── Shape templates ──────────────────────────────────────────────────────────
+
+export const SHAPE_TEMPLATES = {
+  // ── Basic shapes — CSS divs: border always traces shape, scales perfectly ──
+  rect:        '<div style="display:block;width:100px;height:60px;background:#E87420;box-sizing:border-box;"></div>',
+  'round-rect':'<div style="display:block;width:100px;height:60px;background:#E87420;border-radius:12px;box-sizing:border-box;"></div>',
+  'pill':      '<div style="display:block;width:120px;height:48px;background:#E87420;border-radius:9999px;box-sizing:border-box;"></div>',
+  circle:      '<div style="display:block;width:80px;height:80px;background:#E87420;border-radius:50%;box-sizing:border-box;"></div>',
+  ellipse:     '<div style="display:block;width:100px;height:60px;background:#E87420;border-radius:50%;box-sizing:border-box;"></div>',
+  badge:       '<div style="display:block;width:100px;height:40px;background:#E87420;border-radius:6px;box-sizing:border-box;"></div>',
+
+  // ── SVG shapes — viewBox ensures scaling; overflow:visible prevents stroke clip ──
+  triangle:    '<svg viewBox="0 0 80 70" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="80" height="70" overflow="visible"><polygon points="40,1 79,69 1,69" fill="#E87420" stroke="none"/></svg>',
+  'right-tri': '<svg viewBox="0 0 80 70" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="80" height="70" overflow="visible"><polygon points="1,1 79,69 1,69" fill="#E87420" stroke="none"/></svg>',
+  diamond:     '<svg viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="70" height="70" overflow="visible"><polygon points="35,1 69,35 35,69 1,35" fill="#E87420" stroke="none"/></svg>',
+  pentagon:    '<svg viewBox="0 0 80 76" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="80" height="76" overflow="visible"><polygon points="40,1 79,29 64,75 16,75 1,29" fill="#E87420" stroke="none"/></svg>',
+  hexagon:     '<svg viewBox="0 0 80 70" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="80" height="70" overflow="visible"><polygon points="21,1 59,1 79,35 59,69 21,69 1,35" fill="#E87420" stroke="none"/></svg>',
+  octagon:     '<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="80" height="80" overflow="visible"><polygon points="25,1 55,1 79,25 79,55 55,79 25,79 1,55 1,25" fill="#E87420" stroke="none"/></svg>',
+
+  // ── Stars & complex ──
+  star5:       '<svg viewBox="0 0 80 76" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" width="80" height="76" overflow="visible"><polygon points="40,1 49,29 79,29 55,47 64,75 40,58 16,75 25,47 1,29 31,29" fill="#E87420" stroke="none"/></svg>',
+  star4:       '<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" width="80" height="80" overflow="visible"><polygon points="40,1 50,30 79,40 50,50 40,79 30,50 1,40 30,30" fill="#E87420" stroke="none"/></svg>',
+  star6:       '<svg viewBox="0 0 80 70" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" width="80" height="70" overflow="visible"><polygon points="40,1 50,20 72,7 60,28 79,35 60,42 72,63 50,50 40,69 30,50 8,63 20,42 1,35 20,28 8,7 30,20" fill="#E87420" stroke="none"/></svg>',
+  cross:       '<svg viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="70" height="70" overflow="visible"><polygon points="21,1 49,1 49,21 69,21 69,49 49,49 49,69 21,69 21,49 1,49 1,21 21,21" fill="#E87420" stroke="none"/></svg>',
+  heart:       '<svg viewBox="0 0 80 72" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" width="80" height="72" overflow="visible"><path d="M40,70 C20,50 1,35 1,19 A19,19,0,0,1,40,15 A19,19,0,0,1,79,19 C79,35 60,50 40,70Z" fill="#E87420" stroke="none"/></svg>',
+
+  // ── Arrows ──
+  line:        '<svg viewBox="0 0 100 4" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="100" height="4" overflow="visible"><line x1="0" y1="2" x2="100" y2="2" stroke="#333" stroke-width="2"/></svg>',
+  arrow:       '<svg viewBox="0 0 100 20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="100" height="20" overflow="visible"><line x1="0" y1="10" x2="88" y2="10" stroke="#333" stroke-width="2"/><polygon points="88,4 100,10 88,16" fill="#333" stroke="none"/></svg>',
+  'double-arrow':'<svg viewBox="0 0 100 20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="100" height="20" overflow="visible"><line x1="12" y1="10" x2="88" y2="10" stroke="#333" stroke-width="2"/><polygon points="88,4 100,10 88,16" fill="#333" stroke="none"/><polygon points="12,4 0,10 12,16" fill="#333" stroke="none"/></svg>',
+  'block-arrow':'<svg viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="100" height="50" overflow="visible"><polygon points="1,15 65,15 65,1 99,25 65,49 65,35 1,35" fill="#E87420" stroke="none"/></svg>',
+  chevron:     '<svg viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="100" height="50" overflow="visible"><polygon points="1,1 79,1 99,25 79,49 1,49 21,25" fill="#E87420" stroke="none"/></svg>',
+
+  // ── Callouts ──
+  callout:     '<svg viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="120" height="80" overflow="visible"><path d="M1,1 H119 V54 H40 L25,79 L30,54 H1 Z" fill="#E87420" stroke="none"/></svg>',
+  'callout-round':'<svg viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="120" height="80" overflow="visible"><path d="M8,1 H112 Q119,1 119,8 V46 Q119,54 112,54 H40 L25,79 L30,54 H8 Q1,54 1,46 V8 Q1,1 8,1Z" fill="#E87420" stroke="none"/></svg>',
+};
+
+/** Shape categories for the picker UI */
+export const SHAPE_CATEGORIES = [
+  {
+    name: 'Basic',
+    shapes: [
+      { id: 'rect',       label: 'Rectangle',         icon: '<rect x="1" y="3" width="14" height="10" rx="0"/>' },
+      { id: 'round-rect', label: 'Rounded Rectangle',  icon: '<rect x="1" y="3" width="14" height="10" rx="3"/>' },
+      { id: 'pill',       label: 'Pill',               icon: '<rect x="1" y="4" width="14" height="8" rx="4"/>' },
+      { id: 'circle',     label: 'Circle',             icon: '<circle cx="8" cy="8" r="6"/>' },
+      { id: 'ellipse',    label: 'Ellipse',            icon: '<ellipse cx="8" cy="8" rx="7" ry="4.5"/>' },
+      { id: 'triangle',   label: 'Triangle',           icon: '<polygon points="8,1 15,14 1,14"/>' },
+      { id: 'right-tri',  label: 'Right Triangle',     icon: '<polygon points="1,1 15,14 1,14"/>' },
+      { id: 'diamond',    label: 'Diamond',            icon: '<polygon points="8,1 15,8 8,15 1,8"/>' },
+      { id: 'pentagon',   label: 'Pentagon',           icon: '<polygon points="8,1 15,6 13,14 3,14 1,6"/>' },
+      { id: 'hexagon',    label: 'Hexagon',            icon: '<polygon points="4,1 12,1 15,8 12,15 4,15 1,8"/>' },
+      { id: 'octagon',    label: 'Octagon',            icon: '<polygon points="5,1 11,1 15,5 15,11 11,15 5,15 1,11 1,5"/>' },
+    ]
+  },
+  {
+    name: 'Stars & Badges',
+    shapes: [
+      { id: 'star5',  label: '5-Point Star',  icon: '<polygon points="8,1 9.8,5.8 15,5.8 10.9,9.2 12.4,14.2 8,11.2 3.6,14.2 5.1,9.2 1,5.8 6.2,5.8"/>' },
+      { id: 'star4',  label: '4-Point Star',  icon: '<polygon points="8,1 9.5,6 15,8 9.5,10 8,15 6.5,10 1,8 6.5,6"/>' },
+      { id: 'star6',  label: '6-Point Star',  icon: '<polygon points="8,1 10,5 14,2 12,7 16,8 12,9 14,14 10,11 8,15 6,11 2,14 4,9 0,8 4,7 2,2 6,5"/>' },
+      { id: 'cross',  label: 'Cross / Plus',  icon: '<polygon points="5,1 11,1 11,5 15,5 15,11 11,11 11,15 5,15 5,11 1,11 1,5 5,5"/>' },
+      { id: 'heart',  label: 'Heart',         icon: '<path d="M8,14 C5,11 1,8 1,5 A3.5,3.5,0,0,1,8,4 A3.5,3.5,0,0,1,15,5 C15,8 11,11 8,14Z"/>' },
+      { id: 'badge',  label: 'Badge',         icon: '<rect x="1" y="4" width="14" height="8" rx="2"/>' },
+    ]
+  },
+  {
+    name: 'Lines & Arrows',
+    shapes: [
+      { id: 'line',         label: 'Line',          icon: '<line x1="2" y1="14" x2="14" y2="2"/>' },
+      { id: 'arrow',        label: 'Arrow',         icon: '<line x1="2" y1="8" x2="12" y2="8"/><polyline points="9,4 14,8 9,12" fill="none"/>' },
+      { id: 'double-arrow', label: 'Double Arrow',  icon: '<line x1="5" y1="8" x2="11" y2="8"/><polyline points="9,4 14,8 9,12" fill="none"/><polyline points="7,4 2,8 7,12" fill="none"/>' },
+      { id: 'block-arrow',  label: 'Block Arrow',   icon: '<polygon points="1,5 9,5 9,1 15,8 9,15 9,11 1,11"/>' },
+      { id: 'chevron',      label: 'Chevron',       icon: '<polygon points="1,1 11,1 15,8 11,15 1,15 5,8"/>' },
+    ]
+  },
+  {
+    name: 'Callouts',
+    shapes: [
+      { id: 'callout',       label: 'Callout',         icon: '<path d="M1,1 H15 V10 H7 L4,15 L5,10 H1 Z"/>' },
+      { id: 'callout-round', label: 'Rounded Callout', icon: '<path d="M3,1 H13 Q15,1 15,3 V8 Q15,10 13,10 H7 L4,15 L5,10 H3 Q1,10 1,8 V3 Q1,1 3,1Z"/>' },
+    ]
+  },
+];
+
+// ── Module state ──────────────────────────────────────────────────────────────
+
+let _iframe = null;
+let _iframeDoc = null;
+let _canvasArea = null;
+let _contextMenu = null;
+
+// ── ID management ─────────────────────────────────────────────────────────────
+
+/**
+ * Scans all data-hc-id values in the document and returns max+1.
+ */
+function getNextHcId(iframeDoc) {
+  const allTagged = iframeDoc.querySelectorAll('[data-hc-id]');
+  let max = 0;
+  for (const el of allTagged) {
+    const id = el.getAttribute('data-hc-id');
+    const m = id.match(/^hc-(\d+)$/);
+    if (m) max = Math.max(max, parseInt(m[1], 10));
+  }
+  return max + 1;
+}
+
+/**
+ * Assigns fresh data-hc-id attributes to element and all its descendants.
+ */
+function assignFreshIds(element, startId) {
+  let counter = startId;
+  element.setAttribute('data-hc-id', `hc-${counter++}`);
+  const descendants = element.querySelectorAll('*');
+  for (const desc of descendants) {
+    if (desc.nodeType === 1 && desc.tagName) {
+      const tag = desc.tagName.toLowerCase();
+      if (tag !== 'script' && tag !== 'style') {
+        desc.setAttribute('data-hc-id', `hc-${counter++}`);
+      }
+    }
+  }
+  return counter;
+}
+
+// ── Insert command factory ────────────────────────────────────────────────────
+
+/**
+ * Creates a Command (push-compatible) that inserts an element into the document.
+ *
+ * @param {string} html - HTML string for the element to insert
+ * @param {Document} iframeDoc - The iframe's contentDocument
+ * @param {Element} targetParent - Parent element to append into
+ * @param {{ x: number, y: number } | null} position - iframe-space coords for absolute positioning
+ * @returns {{ description: string, execute: Function, undo: Function }}
+ */
+function makeInsertCommand(html, iframeDoc, targetParent, position) {
+  const temp = iframeDoc.createElement('div');
+  temp.innerHTML = html;
+  const newElement = temp.firstElementChild;
+  if (!newElement) return null;
+
+  const startId = getNextHcId(iframeDoc);
+  assignFreshIds(newElement, startId);
+  const newHcId = newElement.getAttribute('data-hc-id');
+
+  // Apply absolute positioning if position provided
+  if (position) {
+    newElement.style.position = 'absolute';
+    newElement.style.left = Math.round(position.x) + 'px';
+    newElement.style.top = Math.round(position.y) + 'px';
+  }
+
+  // Place new element on top of all existing siblings
+  // z-index requires a positioned element — ensure at least position: relative
+  const topZ = getTopZIndex(targetParent);
+  newElement.style.zIndex = String(topZ);
+  if (!newElement.style.position || newElement.style.position === 'static') {
+    newElement.style.position = 'relative';
+  }
+
+  const cleanHTML = stripHcIds(newElement.outerHTML);
+
+  return {
+    description: `Insert <${newElement.tagName.toLowerCase()}>`,
+
+    execute() {
+      targetParent.appendChild(newElement);
+      recordChange(newHcId, cleanHTML);
+      notifyLayersChanged();
+    },
+
+    undo() {
+      newElement.remove();
+      recordDeletion(newHcId);
+      notifyLayersChanged();
+    }
+  };
+}
+
+// ── Asset panel ───────────────────────────────────────────────────────────────
+
+/**
+ * Fetches the asset list from the server and populates the asset grid.
+ */
+export async function loadAssets() {
+  const grid = document.getElementById('asset-grid');
+  if (!grid) return;
+
+  try {
+    const res = await fetch('/api/assets');
+    const { assets } = await res.json();
+
+    if (!assets || assets.length === 0) {
+      grid.innerHTML = '<p class="panel-placeholder">No assets found</p>';
+      return;
+    }
+
+    grid.innerHTML = '';
+    for (const asset of assets) {
+      const wrapper = document.createElement('div');
+      wrapper.className = 'asset-item';
+
+      const thumb = document.createElement('img');
+      thumb.src = asset.url;
+      thumb.alt = asset.name;
+      thumb.title = asset.name;
+      thumb.className = 'asset-thumb';
+      thumb.dataset.url = asset.url;
+      thumb.dataset.type = asset.type;
+      thumb.draggable = true;
+
+      thumb.addEventListener('dragstart', (e) => {
+        e.dataTransfer.setData('text/hc-asset-url', asset.url);
+        e.dataTransfer.effectAllowed = 'copy';
+      });
+
+      wrapper.appendChild(thumb);
+      grid.appendChild(wrapper);
+    }
+  } catch (err) {
+    console.warn('Failed to load assets:', err);
+    grid.innerHTML = '<p class="panel-placeholder">Could not load assets</p>';
+  }
+}
+
+// ── Component library ─────────────────────────────────────────────────────────
+
+/**
+ * Fetches the saved component list and populates the component panel.
+ */
+export async function loadComponents() {
+  const list = document.getElementById('component-list');
+  if (!list) return;
+
+  try {
+    const res = await fetch('/api/components');
+    const { components } = await res.json();
+
+    if (!components || components.length === 0) {
+      list.innerHTML = '<p class="panel-placeholder">No components saved</p>';
+      return;
+    }
+
+    list.innerHTML = '';
+    for (const comp of components) {
+      const item = document.createElement('div');
+      item.className = 'component-item';
+      item.title = comp.name;
+      item.textContent = comp.name;
+      item.draggable = true;
+      item.dataset.html = comp.html;
+
+      item.addEventListener('dragstart', (e) => {
+        e.dataTransfer.setData('text/hc-component-html', comp.html);
+        e.dataTransfer.effectAllowed = 'copy';
+      });
+
+      list.appendChild(item);
+    }
+  } catch (err) {
+    console.warn('Failed to load components:', err);
+    list.innerHTML = '<p class="panel-placeholder">Could not load components</p>';
+  }
+}
+
+/**
+ * Saves the selected element as a reusable component.
+ * Strips hc-ids from the HTML, prompts for a name, then POSTs to /api/components.
+ *
+ * @param {Element} element - The element to save
+ */
+async function saveAsComponent(element) {
+  if (!element) return;
+
+  const html = stripHcIds(element.outerHTML);
+  const name = window.prompt('Name this component:', element.tagName.toLowerCase() + '-component');
+  if (!name) return;
+
+  try {
+    const res = await fetch('/api/components', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name, html }),
+    });
+    if (!res.ok) throw new Error((await res.json()).error);
+    await loadComponents();
+  } catch (err) {
+    console.warn('Failed to save component:', err);
+    alert('Could not save component: ' + err.message);
+  }
+}
+
+// ── Context menu ──────────────────────────────────────────────────────────────
+
+function createContextMenu() {
+  const menu = document.createElement('div');
+  menu.className = 'context-menu';
+  menu.style.display = 'none';
+  document.body.appendChild(menu);
+  return menu;
+}
+
+function showContextMenu(x, y) {
+  if (!_contextMenu) return;
+
+  _contextMenu.innerHTML = '';
+
+  const saveItem = document.createElement('div');
+  saveItem.className = 'context-menu-item';
+  saveItem.textContent = 'Save as Component';
+  saveItem.addEventListener('click', () => {
+    hideContextMenu();
+    const el = getSelectedElement();
+    if (el) saveAsComponent(el);
+  });
+
+  _contextMenu.appendChild(saveItem);
+  _contextMenu.style.left = x + 'px';
+  _contextMenu.style.top = y + 'px';
+  _contextMenu.style.display = 'block';
+}
+
+function hideContextMenu() {
+  if (_contextMenu) _contextMenu.style.display = 'none';
+}
+
+// ── Canvas drop handling ──────────────────────────────────────────────────────
+
+function onCanvasDragOver(e) {
+  e.preventDefault();
+  e.dataTransfer.dropEffect = 'copy';
+}
+
+function onCanvasDrop(e) {
+  e.preventDefault();
+
+  if (!_iframeDoc || !_iframe) return;
+
+  // Convert drop position to iframe coordinates
+  const canvasArea = _canvasArea;
+  const canvasRect = canvasArea.getBoundingClientRect();
+  const canvasX = e.clientX - canvasRect.left + canvasArea.scrollLeft;
+  const canvasY = e.clientY - canvasRect.top + canvasArea.scrollTop;
+  const iframePos = canvasToIframe(canvasX, canvasY, _iframe, canvasArea);
+
+  // Determine target parent: use currently visible .page or body
+  const targetParent = getVisiblePage(_iframeDoc);
+
+  const assetUrl = e.dataTransfer.getData('text/hc-asset-url');
+  const componentHtml = e.dataTransfer.getData('text/hc-component-html');
+
+  let html = null;
+
+  if (assetUrl) {
+    html = `<img src="${assetUrl}" alt="asset" style="max-width:200px;">`;
+  } else if (componentHtml) {
+    html = componentHtml;
+  }
+
+  if (!html) return;
+
+  const cmd = makeInsertCommand(html, _iframeDoc, targetParent, iframePos);
+  if (cmd) {
+    push(cmd);
+  }
+}
+
+// ── Shape insertion ───────────────────────────────────────────────────────────
+
+function insertShape(shapeName) {
+  if (!_iframeDoc || !_iframe || !_canvasArea) return;
+
+  const html = SHAPE_TEMPLATES[shapeName];
+  if (!html) return;
+
+  const targetParent = getVisiblePage(_iframeDoc);
+
+  // Position relative to the target slide/page center
+  const pageW = targetParent.offsetWidth || 794;
+  const pageH = targetParent.offsetHeight || 1123;
+  const iframePos = {
+    x: Math.round(pageW / 2 - 50),
+    y: Math.round(pageH / 4)
+  };
+
+  const cmd = makeInsertCommand(html, _iframeDoc, targetParent, iframePos);
+  if (cmd) {
+    push(cmd);
+  }
+}
+
+// ── Image replacement ─────────────────────────────────────────────────────────
+
+/**
+ * Triggers image replacement for the currently selected <img> element.
+ * Opens a file picker, uploads the file, then swaps src via a Command.
+ */
+function replaceImage() {
+  const el = getSelectedElement();
+  const hcId = getSelectedHcId();
+  if (!el || !hcId || el.tagName.toLowerCase() !== 'img') return;
+
+  const input = document.createElement('input');
+  input.type = 'file';
+  input.accept = 'image/*';
+  input.style.display = 'none';
+  document.body.appendChild(input);
+
+  input.addEventListener('change', async () => {
+    const file = input.files[0];
+    if (!file) { input.remove(); return; }
+
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+
+      const res = await fetch('/api/upload', { method: 'POST', body: formData });
+      if (!res.ok) {
+        const text = await res.text();
+        let msg = `Upload failed (${res.status})`;
+        try { msg = JSON.parse(text).error || msg; } catch (_) {}
+        throw new Error(msg);
+      }
+      const { url } = await res.json();
+
+      const oldSrc = el.src;
+      const cmd = {
+        description: 'Replace image',
+        execute() {
+          el.src = url;
+          recordChange(hcId, stripHcIds(el.outerHTML));
+        },
+        undo() {
+          el.src = oldSrc;
+          recordChange(hcId, stripHcIds(el.outerHTML));
+        }
+      };
+      push(cmd);
+    } catch (err) {
+      console.warn('Image upload failed:', err);
+      alert('Could not upload image: ' + err.message);
+    } finally {
+      input.remove();
+    }
+  });
+
+  input.click();
+}
+
+// ── Collapsible panel sections ────────────────────────────────────────────────
+
+function initCollapsibleSections() {
+  document.querySelectorAll('.panel-header-collapsible').forEach(header => {
+    header.addEventListener('click', () => {
+      const body = header.nextElementSibling;
+      if (!body) return;
+      const isVisible = body.style.display !== 'none';
+      body.style.display = isVisible ? 'none' : 'block';
+      header.classList.toggle('collapsed', isVisible);
+    });
+  });
+}
+
+// ── Shape picker dropdown ──────────────────────────────────────────────────────
+
+let _shapePickerOpen = false;
+
+let _shapePickerInited = false;
+export function initShapePicker() {
+  if (_shapePickerInited) return;
+  _shapePickerInited = true;
+  const btn = document.getElementById('btn-shapes');
+  const dropdown = document.getElementById('shape-picker');
+  if (!btn || !dropdown) return;
+
+  // Build the dropdown content from SHAPE_CATEGORIES
+  dropdown.innerHTML = '';
+  for (const cat of SHAPE_CATEGORIES) {
+    const catLabel = document.createElement('div');
+    catLabel.className = 'shape-picker-cat';
+    catLabel.textContent = cat.name;
+    dropdown.appendChild(catLabel);
+
+    const grid = document.createElement('div');
+    grid.className = 'shape-picker-grid';
+
+    for (const shape of cat.shapes) {
+      const item = document.createElement('button');
+      item.className = 'shape-picker-item';
+      item.title = shape.label;
+      item.dataset.shape = shape.id;
+      item.innerHTML = `<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.3">${shape.icon}</svg>`;
+      item.addEventListener('click', () => {
+        insertShape(shape.id);
+        closeShapePicker();
+      });
+      grid.appendChild(item);
+    }
+    dropdown.appendChild(grid);
+  }
+
+  // Toggle dropdown
+  btn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    if (_shapePickerOpen) closeShapePicker();
+    else openShapePicker();
+  });
+
+  // Close on click outside
+  document.addEventListener('mousedown', (e) => {
+    if (_shapePickerOpen && !dropdown.contains(e.target) && e.target !== btn && !btn.contains(e.target)) {
+      closeShapePicker();
+    }
+  });
+
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && _shapePickerOpen) closeShapePicker();
+  });
+}
+
+function openShapePicker() {
+  const dropdown = document.getElementById('shape-picker');
+  if (!dropdown) return;
+  dropdown.style.display = 'block';
+  _shapePickerOpen = true;
+}
+
+function closeShapePicker() {
+  const dropdown = document.getElementById('shape-picker');
+  if (!dropdown) return;
+  dropdown.style.display = 'none';
+  _shapePickerOpen = false;
+}
+
+function initShapeButtons() {
+  // Legacy support: wire any remaining data-shape buttons
+  document.querySelectorAll('[data-shape]').forEach(btn => {
+    if (btn.closest('.shape-picker-dropdown')) return; // handled by picker
+    btn.addEventListener('click', () => insertShape(btn.dataset.shape));
+  });
+}
+
+// ── Insert image from file picker ────────────────────────────────────────────
+
+function insertImageFromFile() {
+  console.log('[IMAGE] insertImageFromFile called, iframeDoc:', !!_iframeDoc, 'iframe:', !!_iframe, 'canvasArea:', !!_canvasArea);
+  if (!_iframeDoc || !_iframe || !_canvasArea) {
+    alert('Open an HTML file first, then insert an image.');
+    return;
+  }
+
+  const input = document.createElement('input');
+  input.type = 'file';
+  input.accept = 'image/*';
+  input.style.display = 'none';
+  document.body.appendChild(input);
+
+  input.addEventListener('change', async () => {
+    const file = input.files[0];
+    if (!file) { input.remove(); return; }
+
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+
+      const res = await fetch('/api/upload', { method: 'POST', body: formData });
+      if (!res.ok) {
+        const text = await res.text();
+        let msg = `Upload failed (${res.status})`;
+        try { msg = JSON.parse(text).error || msg; } catch (_) {}
+        throw new Error(msg);
+      }
+      const { url } = await res.json();
+
+      // Use absolute URL so the iframe's <base> tag doesn't redirect it
+      const absUrl = new URL(url, window.location.origin).href;
+      const html = `<img src="${absUrl}" alt="${file.name}" style="max-width:300px;">`;
+      const targetParent = getVisiblePage(_iframeDoc);
+
+      // Position relative to the target slide/page center
+      const pageW = targetParent.offsetWidth || 794;
+      const pageH = targetParent.offsetHeight || 1123;
+      // Place near center of the page (offset slightly so it's visible)
+      const iframePos = {
+        x: Math.round(pageW / 2 - 150),
+        y: Math.round(pageH / 4)
+      };
+
+      const cmd = makeInsertCommand(html, _iframeDoc, targetParent, iframePos);
+      if (cmd) push(cmd);
+    } catch (err) {
+      console.warn('Image insert failed:', err);
+      alert('Could not insert image: ' + err.message);
+    } finally {
+      input.remove();
+    }
+  });
+
+  input.click();
+}
+
+// ── Canvas drop event wiring ──────────────────────────────────────────────────
+
+function initCanvasDrop() {
+  const canvasArea = document.getElementById('canvas-area');
+  if (!canvasArea) return;
+  canvasArea.addEventListener('dragover', onCanvasDragOver);
+  canvasArea.addEventListener('drop', onCanvasDrop);
+}
+
+// ── Context menu wiring (iframe contextmenu event) ────────────────────────────
+
+function initContextMenu(iframeDoc) {
+  _contextMenu = _contextMenu || createContextMenu();
+
+  // Listen for contextmenu inside the iframe
+  iframeDoc.addEventListener('contextmenu', (e) => {
+    e.preventDefault();
+
+    // Only show if an element is selected
+    const selected = getSelectedElement();
+    if (!selected) return;
+
+    // Convert iframe viewport coords to editor viewport coords
+    const iframeRect = _iframe.getBoundingClientRect();
+    const menuX = iframeRect.left + e.clientX;
+    const menuY = iframeRect.top + e.clientY;
+
+    showContextMenu(menuX, menuY);
+  });
+
+  // Hide on click outside
+  document.addEventListener('click', (e) => {
+    if (_contextMenu && !_contextMenu.contains(e.target)) {
+      hideContextMenu();
+    }
+  });
+
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') hideContextMenu();
+  });
+}
+
+// ── Replace image button in properties panel ─────────────────────────────────
+
+function updateReplaceImageButton() {
+  // Expose replaceImage on window so the properties panel can call it
+  window._hcReplaceImage = replaceImage;
+}
+
+// ── Init ──────────────────────────────────────────────────────────────────────
+
+/**
+ * Initialises the asset/component browser, shapes, and image replacement.
+ *
+ * @param {HTMLIFrameElement} iframe
+ * @param {Document} iframeDoc
+ * @param {HTMLElement} canvasArea
+ */
+export function initAssets(iframe, iframeDoc, canvasArea) {
+  _iframe = iframe;
+  _iframeDoc = iframeDoc;
+  _canvasArea = canvasArea;
+
+  initCollapsibleSections();
+  initShapePicker();
+  initShapeButtons();
+  initCanvasDrop();
+  initContextMenu(iframeDoc);
+  updateReplaceImageButton();
+
+  // Wire "Insert Image" toolbar button (once only)
+  const btnInsertImage = document.getElementById('btn-insert-image');
+  if (btnInsertImage && !btnInsertImage._hcBound) {
+    btnInsertImage._hcBound = true;
+    btnInsertImage.addEventListener('click', () => insertImageFromFile());
+  }
+
+  // Load assets and components
+  loadAssets();
+  loadComponents();
+}