@ashraf_mizo/htmlcanvas 1.0.0

package/editor/properties.js

@@ -0,0 +1,1583 @@
+// editor/properties.js — Properties panel: read and write CSS on selected elements
+//
+// Exports:
+//   initProperties(iframe, iframeDoc)
+//   readProperty(element, cssProp)      — returns { value, locked }
+//   applyStyleProperty(element, hcId, cssProp, newValue) — creates + pushes Command
+//
+// Approach:
+//   - Two-source read: inline style (raw) for var() detection, computed for displayed value
+//   - var()-backed properties are locked (read-only) with a visible warning
+//   - Writes go through Command Pattern (history.js) for full undo/redo support
+//   - Panel sections are collapsible; controls are grayed out when nothing is selected
+
+import { hasVarReference } from './cssVars.js';
+import { push } from './history.js';
+import { recordChange } from './serializer.js';
+import { getSelectedElement, getSelectedHcId } from './selection.js';
+import { isTextEditActive, applyStyleToSelection } from './textEdit.js';
+import { startCrop } from './crop.js';
+
+// ── Recent colors (persisted in session) ────────────────────────────────────
+const MAX_RECENT_COLORS = 12;
+let _recentColors = [];
+
+function addRecentColor(hex) {
+  if (!hex || hex === '#000000') return;
+  _recentColors = [hex, ..._recentColors.filter(c => c !== hex)].slice(0, MAX_RECENT_COLORS);
+  _renderRecentColors();
+}
+
+function _renderRecentColors() {
+  document.querySelectorAll('.prop-recent-colors').forEach(container => {
+    container.innerHTML = '';
+    const cssProp = container.dataset.cssProp;
+    for (const color of _recentColors) {
+      const btn = document.createElement('button');
+      btn.className = 'prop-recent-swatch';
+      btn.style.background = color;
+      btn.title = color;
+      btn.addEventListener('click', () => {
+        applyColorProp(cssProp || 'color', color);
+        // Sync visible swatch/hex inputs
+        const section = container.closest('.prop-section-body');
+        if (section) {
+          const swatch = section.querySelector('.prop-color-swatch');
+          const hex = section.querySelector('.prop-hex-input');
+          if (swatch) swatch.value = color;
+          if (hex) hex.value = color;
+        }
+      });
+      container.appendChild(btn);
+    }
+  });
+}
+
+// ── Debounce helper for input events ─────────────────────────────────────────
+const _debounceTimers = new Map();
+function debounceApply(key, fn, delay = 300) {
+  if (_debounceTimers.has(key)) clearTimeout(_debounceTimers.get(key));
+  _debounceTimers.set(key, setTimeout(() => {
+    _debounceTimers.delete(key);
+    fn();
+  }, delay));
+}
+
+// ── Aspect ratio lock state ──────────────────────────────────────────────────
+let _aspectLocked = false;
+let _aspectRatio = 1;
+
+// ── SVG shape helpers ────────────────────────────────────────────────────────
+
+const SVG_SHAPE_TAGS = new Set(['rect', 'circle', 'ellipse', 'line', 'polygon', 'polyline', 'path']);
+
+/**
+ * If the element is an <svg>, returns the first child shape element.
+ * Otherwise returns null.
+ */
+function getSvgShape(element) {
+  if (!element || element.tagName.toLowerCase() !== 'svg') return null;
+  for (const child of element.children) {
+    if (SVG_SHAPE_TAGS.has(child.tagName.toLowerCase())) return child;
+  }
+  return null;
+}
+
+/**
+ * Reads an SVG attribute from a shape element and returns a hex color.
+ */
+function readSvgColor(shape, attr) {
+  if (!shape) return null;
+  const val = shape.getAttribute(attr);
+  if (!val || val === 'none') return val === 'none' ? 'none' : null;
+  // Could be a named color, hex, rgb()
+  if (/^#[0-9a-fA-F]{3,6}$/.test(val)) return val;
+  const hex = rgbToHex(val);
+  if (hex) return hex;
+  // Named color: create a temp element to resolve
+  const tmp = document.createElement('div');
+  tmp.style.color = val;
+  document.body.appendChild(tmp);
+  const resolved = getComputedStyle(tmp).color;
+  document.body.removeChild(tmp);
+  return rgbToHex(resolved) || val;
+}
+
+// ── DOM refs ──────────────────────────────────────────────────────────────────
+
+const panelBody = document.querySelector('.panel-properties .panel-body-properties');
+
+// ── readProperty ──────────────────────────────────────────────────────────────
+
+/**
+ * Reads a CSS property from an element using two sources:
+ *   1. element.style (inline) — checked for var() references (locked protection)
+ *   2. getComputedStyle — actual resolved display value
+ *
+ * @param {Element} element - Live iframe DOM element
+ * @param {string} cssProp  - CSS property name (e.g. 'color', 'font-size')
+ * @returns {{ value: string, locked: boolean }}
+ */
+export function readProperty(element, cssProp) {
+  const inlineVal = element.style.getPropertyValue(cssProp) || '';
+  const locked = hasVarReference(inlineVal);
+
+  const computedVal = getComputedStyle(element).getPropertyValue(cssProp).trim();
+  return { value: computedVal, locked };
+}
+
+// ── applyStyleProperty ────────────────────────────────────────────────────────
+
+/**
+ * Writes a CSS property to an element via the Command Pattern.
+ * Returns null (no-op) if the existing inline value contains var().
+ *
+ * @param {Element} element    - Live iframe DOM element
+ * @param {string}  hcId       - data-hc-id of the element
+ * @param {string}  cssProp    - CSS property to write
+ * @param {string}  newValue   - New value to apply
+ * @returns {object|null} The created Command, or null if locked
+ */
+export function applyStyleProperty(element, hcId, cssProp, newValue) {
+  const existingInline = element.style.getPropertyValue(cssProp) || '';
+  if (hasVarReference(existingInline)) return null;
+
+  const beforeVal = existingInline;
+
+  const command = {
+    description: `Set ${cssProp}`,
+
+    execute() {
+      element.style.setProperty(cssProp, newValue);
+      recordChange(hcId, element.outerHTML);
+    },
+
+    undo() {
+      if (beforeVal === '') {
+        element.style.removeProperty(cssProp);
+      } else {
+        element.style.setProperty(cssProp, beforeVal);
+      }
+      recordChange(hcId, element.outerHTML);
+    },
+  };
+
+  push(command);
+  return command;
+}
+
+// ── Panel population ──────────────────────────────────────────────────────────
+
+/**
+ * Reads a property and populates the corresponding input/warning UI.
+ *
+ * @param {Element} element
+ * @param {string}  cssProp
+ * @param {HTMLElement} input     - Text/number input to set value on
+ * @param {HTMLElement} [lockEl]  - .prop-var-lock warning element (optional)
+ * @param {HTMLElement} [swatch]  - color swatch <input type="color"> (optional)
+ */
+function populateControl(element, cssProp, input, lockEl, swatch) {
+  const { value, locked } = readProperty(element, cssProp);
+
+  if (locked) {
+    input.disabled = true;
+    input.classList.add('prop-locked');
+    if (swatch) { swatch.disabled = true; swatch.classList.add('prop-locked'); }
+    if (lockEl) lockEl.style.display = '';
+  } else {
+    input.disabled = false;
+    input.classList.remove('prop-locked');
+    if (swatch) { swatch.disabled = false; swatch.classList.remove('prop-locked'); }
+    if (lockEl) lockEl.style.display = 'none';
+  }
+
+  // Set display value
+  if (input.type === 'color') {
+    // color inputs need a valid hex; fall back silently
+    const hex = rgbToHex(value);
+    if (hex) input.value = hex;
+  } else if (input.type === 'number') {
+    const num = parseFloat(value);
+    if (!isNaN(num)) input.value = num;
+    else input.value = '';
+  } else {
+    input.value = value;
+  }
+
+  if (swatch && swatch.type === 'color') {
+    const hex = rgbToHex(value);
+    if (hex) swatch.value = hex;
+  }
+}
+
+// ── updatePanel ────────────────────────────────────────────────────────────────
+
+/**
+ * Populates all panel controls with the selected element's computed styles.
+ * @param {Element} element
+ * @param {Document} iframeDoc
+ */
+function updatePanel(element, iframeDoc) {
+  if (!panelBody) return;
+
+  // Enable all sections
+  panelBody.querySelectorAll('.prop-section').forEach(s => s.classList.remove('prop-disabled'));
+  // Remove placeholder
+  const placeholder = panelBody.querySelector('.panel-placeholder');
+  if (placeholder) placeholder.style.display = 'none';
+  // Show sections
+  panelBody.querySelectorAll('.prop-section').forEach(s => s.style.display = '');
+
+  // ── Detect element type ──
+  const tag = element.tagName.toLowerCase();
+  const isSvg = tag === 'svg';
+  const isImg = tag === 'img';
+  const svgShape = getSvgShape(element);
+
+  // ── Context-sensitive action buttons ──
+  const actionsSection = panelBody.querySelector('.prop-section-actions');
+  const editTextBtn = document.getElementById('prop-edit-text');
+  const replaceImgBtn = document.getElementById('prop-replace-image');
+  const cropImgBtn = document.getElementById('prop-crop-image');
+  if (actionsSection) {
+    actionsSection.style.display = '';
+    if (replaceImgBtn) replaceImgBtn.style.display = isImg ? '' : 'none';
+    if (cropImgBtn) cropImgBtn.style.display = isImg ? '' : 'none';
+    if (editTextBtn) editTextBtn.style.display = (isImg || isSvg) ? 'none' : '';
+  }
+
+  // ── Dimensions ──
+  const readPx = (prop) => {
+    const val = getComputedStyle(element).getPropertyValue(prop).trim();
+    const num = parseFloat(val);
+    return isNaN(num) ? '' : Math.round(num);
+  };
+
+  const inpX = document.getElementById('prop-x');
+  const inpY = document.getElementById('prop-y');
+  const inpW = document.getElementById('prop-w');
+  const inpH = document.getElementById('prop-h');
+  if (inpX) inpX.value = readPx('left');
+  if (inpY) inpY.value = readPx('top');
+  if (inpW) inpW.value = readPx('width');
+  if (inpH) inpH.value = readPx('height');
+
+  // Rotation: parse transform rotate()
+  const inpR = document.getElementById('prop-rotation');
+  if (inpR) {
+    const transform = getComputedStyle(element).transform;
+    inpR.value = extractRotation(transform);
+  }
+
+  // ── Text ──
+  const fontPicker = document.getElementById('prop-font-family');
+  if (fontPicker) {
+    const { value: fontVal, locked: fontLocked } = readProperty(element, 'font-family');
+    const firstFont = fontVal.split(',')[0].trim().replace(/['"]/g, '');
+    updateFontPicker(fontPicker, firstFont, iframeDoc);
+    fontPicker.classList.toggle('prop-locked', fontLocked);
+  }
+
+  const inpFontSize   = document.getElementById('prop-font-size');
+  const inpLineHeight = document.getElementById('prop-line-height');
+  const selWeight     = document.getElementById('prop-font-weight');
+
+  if (inpFontSize)   populateControl(element, 'font-size',   inpFontSize);
+  if (inpLineHeight) populateControl(element, 'line-height', inpLineHeight);
+  if (selWeight) {
+    const { value: wVal, locked: wLocked } = readProperty(element, 'font-weight');
+    setSelectValue(selWeight, Math.round(parseFloat(wVal)).toString());
+    selWeight.disabled = wLocked;
+    selWeight.classList.toggle('prop-locked', wLocked);
+  }
+
+  // ── Color (text) ──
+  const swatchColor    = document.getElementById('prop-color');
+  const hexColor       = document.getElementById('prop-color-hex');
+  const lockColor      = document.querySelector('#prop-color-hex ~ .prop-var-lock');
+  if (swatchColor && hexColor) {
+    const { value: colorVal, locked: colorLocked } = readProperty(element, 'color');
+    const hex = rgbToHex(colorVal);
+    if (hex) { swatchColor.value = hex; hexColor.value = hex; }
+    swatchColor.disabled = colorLocked;
+    hexColor.disabled    = colorLocked;
+    swatchColor.classList.toggle('prop-locked', colorLocked);
+    hexColor.classList.toggle('prop-locked', colorLocked);
+    const colorLockEl = document.getElementById('prop-color-lock');
+    if (colorLockEl) colorLockEl.style.display = colorLocked ? '' : 'none';
+  }
+
+  // ── Fill (background or SVG fill) ──
+  const swatchBg  = document.getElementById('prop-bg-color');
+  const hexBg     = document.getElementById('prop-bg-hex');
+  if (swatchBg && hexBg) {
+    if (svgShape) {
+      // SVG shape: read fill attribute
+      const fillColor = readSvgColor(svgShape, 'fill') || '#E87420';
+      if (fillColor !== 'none') {
+        swatchBg.value = fillColor;
+        hexBg.value = fillColor;
+      } else {
+        swatchBg.value = '#ffffff';
+        hexBg.value = 'none';
+      }
+      swatchBg.disabled = false;
+      hexBg.disabled = false;
+      swatchBg.classList.remove('prop-locked');
+      hexBg.classList.remove('prop-locked');
+      const bgLockEl = document.getElementById('prop-bg-lock');
+      if (bgLockEl) bgLockEl.style.display = 'none';
+    } else {
+      const { value: bgVal, locked: bgLocked } = readProperty(element, 'background-color');
+      const hex = rgbToHex(bgVal);
+      if (hex) { swatchBg.value = hex; hexBg.value = hex; }
+      else { hexBg.value = bgVal; }
+      swatchBg.disabled = bgLocked;
+      hexBg.disabled    = bgLocked;
+      swatchBg.classList.toggle('prop-locked', bgLocked);
+      hexBg.classList.toggle('prop-locked', bgLocked);
+      const bgLockEl = document.getElementById('prop-bg-lock');
+      if (bgLockEl) bgLockEl.style.display = bgLocked ? '' : 'none';
+    }
+  }
+
+  // ── Fill chip state ──
+  {
+    const chipColor  = document.getElementById('prop-fill-chip-color');
+    const chipNone   = document.getElementById('prop-fill-chip-none');
+    const colorRow   = document.getElementById('prop-fill-color-row');
+    if (chipColor && chipNone && colorRow) {
+      let hasFill;
+      if (svgShape) {
+        const f = readSvgColor(svgShape, 'fill');
+        hasFill = f !== 'none' && f !== '';
+      } else {
+        const { value: bgVal } = readProperty(element, 'background-color');
+        hasFill = bgVal && bgVal !== 'transparent' && bgVal !== 'rgba(0, 0, 0, 0)';
+      }
+      chipColor.classList.toggle('active', !!hasFill);
+      chipNone.classList.toggle('active', !hasFill);
+      colorRow.style.display = hasFill ? '' : 'none';
+    }
+  }
+
+  // ── Typography extras ──
+  const inpLetterSpacing = document.getElementById('prop-letter-spacing');
+  if (inpLetterSpacing) {
+    const { value: lsVal } = readProperty(element, 'letter-spacing');
+    const lsNum = parseFloat(lsVal);
+    inpLetterSpacing.value = (!isNaN(lsNum) && lsVal !== 'normal') ? Math.round(lsNum * 10) / 10 : '';
+  }
+
+  // Text align buttons
+  const textAlignGroup = document.getElementById('prop-text-align');
+  if (textAlignGroup) {
+    const { value: taVal } = readProperty(element, 'text-align');
+    const align = taVal.replace('start', 'left').replace('end', 'right');
+    textAlignGroup.querySelectorAll('.prop-btn-toggle').forEach(btn => {
+      btn.classList.toggle('active', btn.dataset.value === align);
+    });
+  }
+
+  // V Align buttons — reads justify-content (column flex main-axis = vertical)
+  const textVAlignGroup = document.getElementById('prop-text-valign');
+  if (textVAlignGroup) {
+    const display        = getComputedStyle(element).display;
+    const justifyContent = getComputedStyle(element).justifyContent;
+    let valign = 'flex-start'; // default: top
+    if (display === 'flex' || display === 'inline-flex') {
+      if (justifyContent === 'center')   valign = 'center';
+      else if (justifyContent === 'flex-end') valign = 'flex-end';
+      else valign = 'flex-start';
+    }
+    textVAlignGroup.querySelectorAll('.prop-btn-toggle').forEach(btn => {
+      btn.classList.toggle('active', btn.dataset.value === valign);
+    });
+  }
+
+  // Text style buttons (underline, uppercase, italic)
+  const textStyleGroup = document.getElementById('prop-text-style');
+  if (textStyleGroup) {
+    const { value: tdVal } = readProperty(element, 'text-decoration');
+    const { value: ttVal } = readProperty(element, 'text-transform');
+    const { value: fsVal } = readProperty(element, 'font-style');
+    textStyleGroup.querySelectorAll('.prop-btn-toggle').forEach(btn => {
+      const prop = btn.dataset.prop;
+      const val = btn.dataset.value;
+      if (prop === 'text-decoration') btn.classList.toggle('active', tdVal.includes('underline'));
+      else if (prop === 'text-transform') btn.classList.toggle('active', ttVal === 'uppercase');
+      else if (prop === 'font-style') btn.classList.toggle('active', fsVal === 'italic');
+    });
+  }
+
+  // ── Border (CSS border or SVG stroke) ──
+  const inpBorderWidth  = document.getElementById('prop-border-width');
+  const selBorderStyle  = document.getElementById('prop-border-style');
+  const swatchBorder    = document.getElementById('prop-border-color');
+  const hexBorder       = document.getElementById('prop-border-hex');
+  const inpBorderRadius = document.getElementById('prop-border-radius');
+
+  if (svgShape) {
+    // SVG: read stroke/stroke-width attributes
+    const strokeColor = readSvgColor(svgShape, 'stroke');
+    const strokeWidth = svgShape.getAttribute('stroke-width');
+    if (inpBorderWidth) {
+      inpBorderWidth.value = strokeWidth ? parseFloat(strokeWidth) : 0;
+      inpBorderWidth.disabled = false;
+      inpBorderWidth.classList.remove('prop-locked');
+    }
+    if (selBorderStyle) {
+      setSelectValue(selBorderStyle, strokeColor && strokeColor !== 'none' ? 'solid' : 'none');
+      selBorderStyle.disabled = false;
+    }
+    if (swatchBorder && hexBorder) {
+      const hex = (strokeColor && strokeColor !== 'none') ? strokeColor : '#000000';
+      swatchBorder.value = hex;
+      hexBorder.value = hex;
+      swatchBorder.disabled = false;
+      hexBorder.disabled = false;
+    }
+    if (inpBorderRadius) {
+      const rx = svgShape.getAttribute('rx');
+      inpBorderRadius.value = rx ? parseFloat(rx) : 0;
+      inpBorderRadius.disabled = false;
+      inpBorderRadius.classList.remove('prop-locked');
+    }
+  } else {
+    if (inpBorderWidth) populateControl(element, 'border-top-width', inpBorderWidth);
+    if (inpBorderRadius) populateControl(element, 'border-radius', inpBorderRadius);
+    if (selBorderStyle) {
+      const { value: bsVal, locked: bsLocked } = readProperty(element, 'border-top-style');
+      setSelectValue(selBorderStyle, bsVal.trim());
+      selBorderStyle.disabled = bsLocked;
+    }
+    if (swatchBorder && hexBorder) {
+      const { value: bcVal, locked: bcLocked } = readProperty(element, 'border-top-color');
+      const hex = rgbToHex(bcVal);
+      if (hex) { swatchBorder.value = hex; hexBorder.value = hex; }
+      swatchBorder.disabled = bcLocked;
+      hexBorder.disabled    = bcLocked;
+    }
+  }
+
+  // ── Border chip state ──
+  {
+    const chipOn       = document.getElementById('prop-border-chip-on');
+    const chipNone     = document.getElementById('prop-border-chip-none');
+    const borderCtrls  = document.getElementById('prop-border-controls');
+    if (chipOn && chipNone && borderCtrls) {
+      let hasBorder;
+      if (svgShape) {
+        const s = readSvgColor(svgShape, 'stroke');
+        hasBorder = s && s !== 'none' && s !== '';
+      } else {
+        const { value: bsVal } = readProperty(element, 'border-top-style');
+        hasBorder = bsVal && bsVal !== 'none';
+      }
+      chipOn.classList.toggle('active', !!hasBorder);
+      chipNone.classList.toggle('active', !hasBorder);
+      borderCtrls.style.display = hasBorder ? '' : 'none';
+    }
+  }
+
+  // ── Opacity ──
+  const inpOpacity    = document.getElementById('prop-opacity');
+  const inpOpacityVal = document.getElementById('prop-opacity-val');
+  if (inpOpacity && inpOpacityVal) {
+    const { value: opVal } = readProperty(element, 'opacity');
+    const op = parseFloat(opVal);
+    if (!isNaN(op)) {
+      inpOpacity.value = op;
+      inpOpacityVal.value = Math.round(op * 100);
+    }
+  }
+
+  // ── Shadow ──
+  const computed = getComputedStyle(element);
+  const shadow = computed.boxShadow;
+  if (shadow && shadow !== 'none') {
+    const sm = shadow.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)\s+(-?[\d.]+)px\s+(-?[\d.]+)px\s+([\d.]+)px\s+([-\d.]+)px/);
+    if (sm) {
+      const sX = document.getElementById('prop-shadow-x');
+      const sY = document.getElementById('prop-shadow-y');
+      const sBlur = document.getElementById('prop-shadow-blur');
+      const sSpread = document.getElementById('prop-shadow-spread');
+      const sColor = document.getElementById('prop-shadow-color');
+      const sHex = document.getElementById('prop-shadow-hex');
+      if (sX) sX.value = parseFloat(sm[5]);
+      if (sY) sY.value = parseFloat(sm[6]);
+      if (sBlur) sBlur.value = parseFloat(sm[7]);
+      if (sSpread) sSpread.value = parseFloat(sm[8]);
+      const hex = rgbToHex(`rgb(${sm[1]}, ${sm[2]}, ${sm[3]})`);
+      if (hex && sColor) sColor.value = hex;
+      if (hex && sHex) sHex.value = hex;
+    }
+  }
+
+  // ── Spacing (padding/margin) ──
+  ['padding-top', 'padding-right', 'padding-bottom', 'padding-left',
+   'margin-top', 'margin-right', 'margin-bottom', 'margin-left'].forEach(prop => {
+    const id = 'prop-' + prop;
+    const inp = document.getElementById(id);
+    if (inp) {
+      const val = computed.getPropertyValue(prop);
+      const num = parseFloat(val);
+      inp.value = isNaN(num) ? '' : Math.round(num);
+    }
+  });
+
+  // ── Aspect ratio ──
+  const w = parseFloat(computed.width);
+  const h = parseFloat(computed.height);
+  if (w > 0 && h > 0) _aspectRatio = w / h;
+}
+
+// ── updatePanelMulti ──────────────────────────────────────────────────────────
+
+/**
+ * Populates the panel for a multi-selection. Shows shared values where all
+ * selected elements agree; shows empty inputs where values differ.
+ *
+ * @param {Element[]} elements
+ * @param {Document}  iframeDoc
+ */
+function updatePanelMulti(elements, iframeDoc) {
+  if (!panelBody || !elements || elements.length === 0) return;
+
+  // Enable all sections and show them
+  panelBody.querySelectorAll('.prop-section').forEach(s => {
+    s.classList.remove('prop-disabled');
+    s.style.display = '';
+  });
+  const placeholder = panelBody.querySelector('.panel-placeholder');
+  if (placeholder) placeholder.style.display = 'none';
+
+  // Helper: get shared value across all elements, or '' if they differ
+  const sharedPx = (prop) => {
+    const vals = elements.map(el => {
+      const v = getComputedStyle(el).getPropertyValue(prop).trim();
+      return isNaN(parseFloat(v)) ? '' : Math.round(parseFloat(v));
+    });
+    const allSame = vals.every(v => v === vals[0]);
+    return allSame ? vals[0] : '';
+  };
+
+  const inpX = document.getElementById('prop-x');
+  const inpY = document.getElementById('prop-y');
+  const inpW = document.getElementById('prop-w');
+  const inpH = document.getElementById('prop-h');
+  const inpR = document.getElementById('prop-rotation');
+  if (inpX) inpX.value = sharedPx('left');
+  if (inpY) inpY.value = sharedPx('top');
+  if (inpW) inpW.value = sharedPx('width');
+  if (inpH) inpH.value = sharedPx('height');
+  if (inpR) inpR.value = '';
+
+  // Text: show shared font-size
+  const inpFontSize = document.getElementById('prop-font-size');
+  if (inpFontSize) {
+    const vals = elements.map(el => Math.round(parseFloat(getComputedStyle(el).fontSize)));
+    inpFontSize.value = vals.every(v => v === vals[0]) ? vals[0] : '';
+  }
+
+  // Gray out inputs that have mixed values (placeholder shows they differ)
+  panelBody.querySelectorAll('.prop-input').forEach(inp => {
+    if (inp.value === '') inp.placeholder = 'Mixed';
+  });
+}
+
+// ── clearPanel ────────────────────────────────────────────────────────────────
+
+/**
+ * Resets all controls to empty/defaults and grays out all sections.
+ * Skips clearing if text editing is active (panel should stay populated).
+ */
+export function clearPanel() {
+  if (!panelBody) return;
+  if (isTextEditActive()) return;
+
+  panelBody.querySelectorAll('.prop-section').forEach(s => {
+    s.classList.add('prop-disabled');
+    s.style.display = 'none';
+  });
+
+  const placeholder = panelBody.querySelector('.panel-placeholder');
+  if (placeholder) placeholder.style.display = '';
+
+  // Reset inputs
+  panelBody.querySelectorAll('.prop-input, .prop-select').forEach(el => {
+    if (el.type === 'color') el.value = '#000000';
+    else el.value = '';
+  });
+}
+
+// ── Stored event handler references (module-level for proper removal) ─────────
+
+let _onSelectionChanged = null;
+let _onSelectionCleared = null;
+let _onMultiSelectionChanged = null;
+let _wired = false;
+
+// ── initProperties ────────────────────────────────────────────────────────────
+
+/**
+ * Initialises (or re-initialises) the properties panel for a new iframe.
+ * Wires up all input change events and listens for selection events.
+ *
+ * @param {HTMLIFrameElement} iframe
+ * @param {Document} iframeDoc
+ */
+export function initProperties(iframe, iframeDoc) {
+  // Start with panel cleared (force clear even during text edit by calling inner logic)
+  if (panelBody) {
+    panelBody.querySelectorAll('.prop-section').forEach(s => {
+      s.classList.add('prop-disabled');
+      s.style.display = 'none';
+    });
+    const placeholder = panelBody.querySelector('.panel-placeholder');
+    if (placeholder) placeholder.style.display = '';
+    panelBody.querySelectorAll('.prop-input, .prop-select').forEach(el => {
+      if (el.type === 'color') el.value = '#000000';
+      else el.value = '';
+    });
+  }
+
+  // ── Selection event listeners (properly removable via module-level refs) ──
+
+  // Remove previous listeners if they exist
+  if (_onSelectionChanged) window.removeEventListener('hc:selection-changed', _onSelectionChanged);
+  if (_onSelectionCleared) window.removeEventListener('hc:selection-cleared', _onSelectionCleared);
+  if (_onMultiSelectionChanged) window.removeEventListener('hc:multi-selection-changed', _onMultiSelectionChanged);
+
+  _onSelectionChanged = (e) => {
+    const { element } = e.detail || {};
+    if (element) updatePanel(element, iframeDoc);
+  };
+
+  _onSelectionCleared = () => {
+    clearPanel();
+  };
+
+  _onMultiSelectionChanged = (e) => {
+    const { elements } = e.detail || {};
+    if (!elements || elements.length === 0) {
+      clearPanel();
+      return;
+    }
+    if (elements.length === 1) {
+      updatePanel(elements[0], iframeDoc);
+      return;
+    }
+    updatePanelMulti(elements, iframeDoc);
+  };
+
+  window.addEventListener('hc:selection-changed', _onSelectionChanged);
+  window.addEventListener('hc:selection-cleared', _onSelectionCleared);
+  window.addEventListener('hc:multi-selection-changed', _onMultiSelectionChanged);
+
+  // ── Wire all change events (only once — input elements persist across iframe reloads) ──
+
+  if (_wired) return;
+  _wired = true;
+
+  // ── Shape mask picker ──────────────────────────────────────────────────────
+  const MASK_SHAPES = [
+    { id: 'circle',    label: 'Circle',          icon: '<circle cx="8" cy="8" r="6"/>',                                                   clipPath: 'circle(50% at 50% 50%)' },
+    { id: 'ellipse',   label: 'Ellipse',          icon: '<ellipse cx="8" cy="8" rx="7" ry="4.5"/>',                                        clipPath: 'ellipse(50% 35% at 50% 50%)' },
+    { id: 'round',     label: 'Rounded',          icon: '<rect x="1" y="1" width="14" height="14" rx="4"/>',                               clipPath: 'inset(0% round 15%)' },
+    { id: 'pill',      label: 'Pill',             icon: '<rect x="1" y="3" width="14" height="10" rx="5"/>',                               clipPath: 'inset(0% round 50%)' },
+    { id: 'triangle',  label: 'Triangle',         icon: '<polygon points="8,1 15,15 1,15"/>',                                              clipPath: 'polygon(50% 0%, 0% 100%, 100% 100%)' },
+    { id: 'rtriangle', label: 'Right Triangle',   icon: '<polygon points="1,1 15,15 1,15"/>',                                              clipPath: 'polygon(0% 0%, 100% 100%, 0% 100%)' },
+    { id: 'diamond',   label: 'Diamond',          icon: '<polygon points="8,1 15,8 8,15 1,8"/>',                                           clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)' },
+    { id: 'pentagon',  label: 'Pentagon',         icon: '<polygon points="8,1 15,6 13,14 3,14 1,6"/>',                                     clipPath: 'polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)' },
+    { id: 'hexagon',   label: 'Hexagon',          icon: '<polygon points="4,1 12,1 15,8 12,15 4,15 1,8"/>',                                clipPath: 'polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)' },
+    { id: 'star',      label: '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"/>', clipPath: 'polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)' },
+    { id: 'arrow',     label: 'Arrow',            icon: '<polygon points="1,5 9,5 9,1 15,8 9,15 9,11 1,11"/>',                             clipPath: 'polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%)' },
+    { id: 'chevron',   label: 'Chevron',          icon: '<polygon points="1,1 11,1 15,8 11,15 1,15 5,8"/>',                                clipPath: 'polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%)' },
+  ];
+
+  (function initMaskPicker() {
+    const btn     = document.getElementById('prop-mask-shape');
+    const picker  = document.getElementById('mask-picker');
+    if (!btn || !picker) return;
+
+    // Build grid
+    const grid = document.createElement('div');
+    grid.className = 'mask-picker-grid';
+    for (const shape of MASK_SHAPES) {
+      const item = document.createElement('button');
+      item.className = 'mask-picker-item';
+      item.title = shape.label;
+      item.dataset.maskId = shape.id;
+      item.innerHTML = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3">${shape.icon}</svg>`;
+      item.addEventListener('click', () => {
+        const target = getSelectedElement();
+        const hcId   = getSelectedHcId();
+        if (!target || !hcId) return;
+        const old = target.style.clipPath || '';
+        const cmd = {
+          description: `Mask to ${shape.label}`,
+          execute() { target.style.clipPath = shape.clipPath; recordChange(hcId, target.outerHTML); window.dispatchEvent(new CustomEvent('hc:zoom-changed')); },
+          undo()    { target.style.clipPath = old;            recordChange(hcId, target.outerHTML); window.dispatchEvent(new CustomEvent('hc:zoom-changed')); },
+        };
+        push(cmd);
+        // Mark active
+        grid.querySelectorAll('.mask-picker-item').forEach(i => i.classList.remove('active'));
+        item.classList.add('active');
+        picker.style.display = 'none';
+      });
+      grid.appendChild(item);
+    }
+    picker.appendChild(grid);
+
+    // Remove mask button
+    const removeBtn = document.createElement('button');
+    removeBtn.className = 'mask-picker-remove';
+    removeBtn.textContent = 'Remove mask';
+    removeBtn.addEventListener('click', () => {
+      const target = getSelectedElement();
+      const hcId   = getSelectedHcId();
+      if (!target || !hcId) return;
+      const old = target.style.clipPath || '';
+      if (!old) { picker.style.display = 'none'; return; }
+      const cmd = {
+        description: 'Remove mask',
+        execute() { target.style.removeProperty('clip-path'); recordChange(hcId, target.outerHTML); window.dispatchEvent(new CustomEvent('hc:zoom-changed')); },
+        undo()    { target.style.clipPath = old;               recordChange(hcId, target.outerHTML); window.dispatchEvent(new CustomEvent('hc:zoom-changed')); },
+      };
+      push(cmd);
+      grid.querySelectorAll('.mask-picker-item').forEach(i => i.classList.remove('active'));
+      picker.style.display = 'none';
+    });
+    picker.appendChild(removeBtn);
+
+    // Toggle open/close
+    let _open = false;
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      _open = !_open;
+      picker.style.display = _open ? 'block' : 'none';
+      if (_open) {
+        // Highlight current mask
+        const target = getSelectedElement();
+        const cur = target?.style.clipPath || '';
+        grid.querySelectorAll('.mask-picker-item').forEach(item => {
+          const shape = MASK_SHAPES.find(s => s.id === item.dataset.maskId);
+          item.classList.toggle('active', !!shape && shape.clipPath === cur);
+        });
+      }
+    });
+    document.addEventListener('mousedown', (e) => {
+      if (_open && !picker.contains(e.target) && e.target !== btn && !btn.contains(e.target)) {
+        _open = false;
+        picker.style.display = 'none';
+      }
+    });
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && _open) { _open = false; picker.style.display = 'none'; }
+    });
+  })();
+
+  // Text-related CSS properties that can apply to inline selections
+  const INLINE_TEXT_PROPS = new Set([
+    'font-family', 'font-size', 'font-weight', 'line-height', 'color',
+    'letter-spacing', 'text-decoration', 'text-transform', 'font-style',
+  ]);
+
+  // Helper: wire a single input to applyStyleProperty (or inline selection if text editing)
+  function wire(id, cssProp, transform) {
+    const el = document.getElementById(id);
+    if (!el) return;
+    el.addEventListener('change', () => {
+      const target = getSelectedElement();
+      const hcId   = getSelectedHcId();
+      if (!target || !hcId) return;
+      const val = transform ? transform(el.value) : el.value;
+
+      // During text editing with a selection, apply to the selected text only
+      if (isTextEditActive() && INLINE_TEXT_PROPS.has(cssProp)) {
+        if (applyStyleToSelection(cssProp, val)) return;
+      }
+
+      applyStyleProperty(target, hcId, cssProp, val);
+    });
+  }
+
+  // Helper: wire input that checks for SVG shape and applies SVG attribute instead
+  function wireSvgAware(id, cssProp, svgAttr, cssTransform, svgTransform) {
+    const el = document.getElementById(id);
+    if (!el) return;
+    el.addEventListener('change', () => {
+      const target = getSelectedElement();
+      const hcId   = getSelectedHcId();
+      if (!target || !hcId) return;
+      const shape = getSvgShape(target);
+      if (shape) {
+        const val = svgTransform ? svgTransform(el.value) : el.value;
+        applySvgAttribute(target, hcId, shape, svgAttr, val);
+      } else {
+        const val = cssTransform ? cssTransform(el.value) : el.value;
+        applyStyleProperty(target, hcId, cssProp, val);
+      }
+    });
+  }
+
+  // Dimensions
+  wire('prop-x',        'left',   v => v + 'px');
+  wire('prop-y',        'top',    v => v + 'px');
+  wire('prop-w',        'width',  v => v + 'px');
+  wire('prop-h',        'height', v => v + 'px');
+
+  // Rotation (writes transform)
+  const inpR = document.getElementById('prop-rotation');
+  if (inpR) {
+    inpR.addEventListener('change', () => {
+      const target = getSelectedElement();
+      const hcId   = getSelectedHcId();
+      if (!target || !hcId) return;
+      applyStyleProperty(target, hcId, 'transform', `rotate(${inpR.value}deg)`);
+    });
+  }
+
+  // Text properties — font picker (custom searchable dropdown)
+  initFontPicker();
+
+  wire('prop-font-size',   'font-size',   v => v + 'px');
+  wire('prop-font-weight', 'font-weight');
+  wire('prop-line-height', 'line-height');
+
+  // Text color: swatch + hex text sync
+  wireColorPair('prop-color', 'prop-color-hex', 'color');
+
+  // Fill chip: Color / None toggle
+  {
+    const chipColor  = document.getElementById('prop-fill-chip-color');
+    const chipNone   = document.getElementById('prop-fill-chip-none');
+    const colorRow   = document.getElementById('prop-fill-color-row');
+    if (chipColor && chipNone) {
+      chipColor.addEventListener('click', () => {
+        const target = getSelectedElement();
+        const hcId   = getSelectedHcId();
+        if (!target || !hcId) return;
+        const shape = getSvgShape(target);
+        const color = document.getElementById('prop-bg-color')?.value || '#E87420';
+        chipColor.classList.add('active');
+        chipNone.classList.remove('active');
+        if (colorRow) colorRow.style.display = '';
+        if (shape) applySvgAttribute(target, hcId, shape, 'fill', color);
+        else applyStyleProperty(target, hcId, 'background-color', color);
+      });
+      chipNone.addEventListener('click', () => {
+        const target = getSelectedElement();
+        const hcId   = getSelectedHcId();
+        if (!target || !hcId) return;
+        const shape = getSvgShape(target);
+        chipNone.classList.add('active');
+        chipColor.classList.remove('active');
+        if (colorRow) colorRow.style.display = 'none';
+        if (shape) applySvgAttribute(target, hcId, shape, 'fill', 'none');
+        else applyStyleProperty(target, hcId, 'background-color', 'transparent');
+      });
+    }
+  }
+
+  // Fill: background color (or SVG fill)
+  wireColorPair('prop-bg-color', 'prop-bg-hex', 'background-color');
+
+  // Typography extras
+  wire('prop-letter-spacing', 'letter-spacing', v => v + 'px');
+
+  // Text align toggle buttons
+  const textAlignGroup = document.getElementById('prop-text-align');
+  if (textAlignGroup) {
+    textAlignGroup.querySelectorAll('.prop-btn-toggle').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const target = getSelectedElement();
+        const hcId   = getSelectedHcId();
+        if (!target || !hcId) return;
+        applyStyleProperty(target, hcId, 'text-align', btn.dataset.value);
+        // Update active state
+        textAlignGroup.querySelectorAll('.prop-btn-toggle').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+      });
+    });
+  }
+
+  // Text style toggle buttons (underline, uppercase, italic)
+  const textStyleGroup = document.getElementById('prop-text-style');
+  if (textStyleGroup) {
+    textStyleGroup.querySelectorAll('.prop-btn-toggle').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const target = getSelectedElement();
+        const hcId   = getSelectedHcId();
+        if (!target || !hcId) return;
+        const prop = btn.dataset.prop;
+        const val  = btn.dataset.value;
+        const isActive = btn.classList.contains('active');
+
+        let newVal;
+        if (prop === 'text-decoration') newVal = isActive ? 'none' : val;
+        else if (prop === 'text-transform') newVal = isActive ? 'none' : val;
+        else if (prop === 'font-style') newVal = isActive ? 'normal' : val;
+        else newVal = val;
+
+        if (isTextEditActive() && INLINE_TEXT_PROPS.has(prop)) {
+          if (applyStyleToSelection(prop, newVal)) {
+            btn.classList.toggle('active');
+            return;
+          }
+        }
+        applyStyleProperty(target, hcId, prop, newVal);
+        btn.classList.toggle('active');
+      });
+    });
+  }
+
+  // V Align toggle buttons — uses justify-content (column flex main-axis = vertical).
+  //
+  // Why a single atomic command instead of multiple applyStyleProperty calls:
+  //   - Each applyStyleProperty pushes a separate history entry. Intermediate states
+  //     (e.g. display:flex without flex-direction yet) can cause brief layout glitches.
+  //   - A single command means one clean undo step.
+  //
+  // Why we do NOT touch height / width / box-sizing:
+  //   Switching display from block → flex does not change the CSS box model for
+  //   the element itself — height/padding/border are resolved identically in both
+  //   modes. Leaving those properties untouched means the element's rendered size
+  //   is guaranteed to stay the same, and text boxes can still grow while typing.
+  const textVAlignGroup = document.getElementById('prop-text-valign');
+  if (textVAlignGroup) {
+    textVAlignGroup.querySelectorAll('.prop-btn-toggle').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const target = getSelectedElement();
+        const hcId   = getSelectedHcId();
+        if (!target || !hcId) return;
+        const val     = btn.dataset.value;
+        const display = getComputedStyle(target).display;
+        const isAlreadyFlex = display === 'flex' || display === 'inline-flex';
+
+        if (isAlreadyFlex) {
+          // Already flex — just update justify-content (single command, no size change)
+          applyStyleProperty(target, hcId, 'justify-content', val);
+        } else {
+          // Capture only the flex-related before-state for clean single undo.
+          // We intentionally do NOT touch height, width, or box-sizing —
+          // switching display from block→flex does not change the box model
+          // interpretation of those properties, so dimensions stay stable.
+          const before = {
+            display:        target.style.display        || '',
+            flexDirection:  target.style.flexDirection  || '',
+            justifyContent: target.style.justifyContent || '',
+          };
+
+          const cmd = {
+            description: 'Set vertical alignment',
+            execute() {
+              target.style.display        = 'flex';
+              target.style.flexDirection  = 'column';
+              target.style.justifyContent = val;
+              recordChange(hcId, target.outerHTML);
+            },
+            undo() {
+              const set = (cssProp, jsKey, v) => {
+                if (v) target.style[jsKey] = v;
+                else   target.style.removeProperty(cssProp);
+              };
+              set('display',          'display',       before.display);
+              set('flex-direction',   'flexDirection', before.flexDirection);
+              set('justify-content',  'justifyContent',before.justifyContent);
+              recordChange(hcId, target.outerHTML);
+            },
+          };
+          push(cmd);
+        }
+
+        textVAlignGroup.querySelectorAll('.prop-btn-toggle').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+      });
+    });
+  }
+
+  // Border chip: On / None toggle
+  {
+    const chipOn      = document.getElementById('prop-border-chip-on');
+    const chipNone    = document.getElementById('prop-border-chip-none');
+    const borderCtrls = document.getElementById('prop-border-controls');
+    if (chipOn && chipNone) {
+      chipOn.addEventListener('click', () => {
+        const target = getSelectedElement();
+        const hcId   = getSelectedHcId();
+        if (!target || !hcId) return;
+        const shape = getSvgShape(target);
+        chipOn.classList.add('active');
+        chipNone.classList.remove('active');
+        if (borderCtrls) borderCtrls.style.display = '';
+        const width = parseInt(document.getElementById('prop-border-width')?.value) || 2;
+        const color = document.getElementById('prop-border-color')?.value || '#000000';
+        if (shape) {
+          applySvgAttribute(target, hcId, shape, 'stroke', color);
+          applySvgAttribute(target, hcId, shape, 'stroke-width', String(width));
+        } else {
+          applyStyleProperty(target, hcId, 'border-style', 'solid');
+          applyStyleProperty(target, hcId, 'border-width', width + 'px');
+          applyStyleProperty(target, hcId, 'border-color', color);
+        }
+      });
+      chipNone.addEventListener('click', () => {
+        const target = getSelectedElement();
+        const hcId   = getSelectedHcId();
+        if (!target || !hcId) return;
+        const shape = getSvgShape(target);
+        chipNone.classList.add('active');
+        chipOn.classList.remove('active');
+        if (borderCtrls) borderCtrls.style.display = 'none';
+        if (shape) {
+          applySvgAttribute(target, hcId, shape, 'stroke', 'none');
+        } else {
+          applyStyleProperty(target, hcId, 'border-style', 'none');
+        }
+      });
+    }
+  }
+
+  // Border (CSS or SVG stroke)
+  wireSvgAware('prop-border-width', 'border-width', 'stroke-width', v => v + 'px', v => v);
+  wire('prop-border-style',  'border-style');
+  wireSvgAware('prop-border-radius', 'border-radius', 'rx', v => v + 'px', v => v);
+  wireColorPair('prop-border-color', 'prop-border-hex', 'border-color');
+
+  // Opacity: range slider + number input sync
+  const inpOpacity    = document.getElementById('prop-opacity');
+  const inpOpacityVal = document.getElementById('prop-opacity-val');
+  if (inpOpacity && inpOpacityVal) {
+    inpOpacity.addEventListener('input', () => {
+      inpOpacityVal.value = Math.round(inpOpacity.value * 100);
+      const target = getSelectedElement();
+      const hcId   = getSelectedHcId();
+      if (!target || !hcId) return;
+      debounceApply('opacity', () => applyStyleProperty(target, hcId, 'opacity', inpOpacity.value));
+    });
+    inpOpacityVal.addEventListener('change', () => {
+      const v = Math.max(0, Math.min(100, parseInt(inpOpacityVal.value) || 100));
+      inpOpacity.value = v / 100;
+      inpOpacityVal.value = v;
+      const target = getSelectedElement();
+      const hcId   = getSelectedHcId();
+      if (!target || !hcId) return;
+      applyStyleProperty(target, hcId, 'opacity', String(v / 100));
+    });
+  }
+
+  // Shadow: composite box-shadow from individual inputs
+  function applyShadow() {
+    const target = getSelectedElement();
+    const hcId   = getSelectedHcId();
+    if (!target || !hcId) return;
+    const sx = document.getElementById('prop-shadow-x')?.value || '0';
+    const sy = document.getElementById('prop-shadow-y')?.value || '4';
+    const sb = document.getElementById('prop-shadow-blur')?.value || '8';
+    const ss = document.getElementById('prop-shadow-spread')?.value || '0';
+    const sc = document.getElementById('prop-shadow-hex')?.value || document.getElementById('prop-shadow-color')?.value || '#00000040';
+    applyStyleProperty(target, hcId, 'box-shadow', `${sx}px ${sy}px ${sb}px ${ss}px ${sc}`);
+  }
+
+  ['prop-shadow-x', 'prop-shadow-y', 'prop-shadow-blur', 'prop-shadow-spread'].forEach(id => {
+    const el = document.getElementById(id);
+    if (el) el.addEventListener('change', applyShadow);
+  });
+
+  const shadowColor = document.getElementById('prop-shadow-color');
+  const shadowHex = document.getElementById('prop-shadow-hex');
+  let _shadowStartValue = null;
+
+  // Helper: build shadow string from current inputs
+  function buildShadowValue() {
+    const sx = document.getElementById('prop-shadow-x')?.value || '0';
+    const sy = document.getElementById('prop-shadow-y')?.value || '4';
+    const sb = document.getElementById('prop-shadow-blur')?.value || '8';
+    const ss = document.getElementById('prop-shadow-spread')?.value || '0';
+    const sc = shadowHex?.value || shadowColor?.value || '#00000040';
+    return `${sx}px ${sy}px ${sb}px ${ss}px ${sc}`;
+  }
+
+  if (shadowColor) {
+    // Capture before-value on mousedown (same pattern as wireColorPair)
+    shadowColor.addEventListener('mousedown', () => {
+      const target = getSelectedElement();
+      if (!target) { _shadowStartValue = null; return; }
+      _shadowStartValue = target.style.getPropertyValue('box-shadow') || '';
+    });
+
+    // Live preview: apply directly to DOM, no history push
+    shadowColor.addEventListener('input', () => {
+      if (shadowHex) shadowHex.value = shadowColor.value;
+      const target = getSelectedElement();
+      if (target) target.style.setProperty('box-shadow', buildShadowValue());
+    });
+
+    // Commit to history on release (single entry)
+    shadowColor.addEventListener('change', () => {
+      applyShadow();
+      _shadowStartValue = null;
+    });
+  }
+  if (shadowHex) {
+    shadowHex.addEventListener('change', () => {
+      const clean = shadowHex.value.trim();
+      if (/^#[0-9a-fA-F]{3,8}$/.test(clean)) {
+        if (shadowColor) shadowColor.value = clean.slice(0, 7);
+        applyShadow();
+      }
+    });
+  }
+
+  const removeShadowBtn = document.getElementById('prop-shadow-remove');
+  if (removeShadowBtn) {
+    removeShadowBtn.addEventListener('click', () => {
+      const target = getSelectedElement();
+      const hcId   = getSelectedHcId();
+      if (!target || !hcId) return;
+      applyStyleProperty(target, hcId, 'box-shadow', 'none');
+    });
+  }
+
+  // Spacing (padding/margin)
+  ['padding-top', 'padding-right', 'padding-bottom', 'padding-left',
+   'margin-top', 'margin-right', 'margin-bottom', 'margin-left'].forEach(prop => {
+    wire('prop-' + prop, prop, v => v + 'px');
+  });
+
+  // Aspect ratio lock toggle
+  const aspectLockBtn = document.getElementById('prop-aspect-lock');
+  if (aspectLockBtn) {
+    aspectLockBtn.addEventListener('click', () => {
+      _aspectLocked = !_aspectLocked;
+      aspectLockBtn.classList.toggle('active', _aspectLocked);
+      // Capture current ratio
+      const target = getSelectedElement();
+      if (target) {
+        const w = parseFloat(getComputedStyle(target).width);
+        const h = parseFloat(getComputedStyle(target).height);
+        if (w > 0 && h > 0) _aspectRatio = w / h;
+      }
+    });
+  }
+
+  // W/H linked updates when aspect locked
+  const inpW = document.getElementById('prop-w');
+  const inpH = document.getElementById('prop-h');
+  if (inpW) {
+    inpW.addEventListener('input', () => {
+      if (_aspectLocked && _aspectRatio > 0) {
+        const w = parseFloat(inpW.value);
+        if (!isNaN(w)) inpH.value = Math.round(w / _aspectRatio);
+      }
+    });
+  }
+  if (inpH) {
+    inpH.addEventListener('input', () => {
+      if (_aspectLocked && _aspectRatio > 0) {
+        const h = parseFloat(inpH.value);
+        if (!isNaN(h)) inpW.value = Math.round(h * _aspectRatio);
+      }
+    });
+  }
+
+  // ── Action buttons ──
+  const editTextBtn = document.getElementById('prop-edit-text');
+  if (editTextBtn) {
+    editTextBtn.addEventListener('click', () => {
+      // Dispatch a custom event that textEdit.js can listen for
+      window.dispatchEvent(new CustomEvent('hc:request-text-edit'));
+    });
+  }
+
+  const replaceImgBtn = document.getElementById('prop-replace-image');
+  if (replaceImgBtn) {
+    replaceImgBtn.addEventListener('click', () => {
+      if (window._hcReplaceImage) window._hcReplaceImage();
+    });
+  }
+
+  const cropImgBtn = document.getElementById('prop-crop-image');
+  if (cropImgBtn) {
+    cropImgBtn.addEventListener('click', () => {
+      startCrop();
+    });
+  }
+
+  // ── Collapsible section headers ──
+  panelBody.querySelectorAll('.prop-section-header').forEach(header => {
+    header.addEventListener('click', () => {
+      const section = header.closest('.prop-section');
+      if (section) section.classList.toggle('prop-section-collapsed');
+    });
+  });
+}
+
+// ── Helper: wire color swatch + hex text pair ─────────────────────────────────
+//
+// Strategy: separate live preview from history commitment.
+//   - mousedown: capture the value before the user starts dragging
+//   - input:     apply directly to DOM for smooth live preview (no history push)
+//   - change:    push exactly ONE command to history with correct before/after values
+//
+// This prevents the history stack from being flooded with intermediary states
+// and ensures undo always jumps back to the value before the drag started.
+
+function wireColorPair(swatchId, hexId, cssProp) {
+  const swatch = document.getElementById(swatchId);
+  const hexInput = document.getElementById(hexId);
+  if (!swatch || !hexInput) return;
+
+  // Value captured just before the user starts dragging the color picker
+  let _startValue = null;
+
+  swatch.addEventListener('mousedown', () => {
+    const target = getSelectedElement();
+    if (!target) { _startValue = null; return; }
+    const shape = getSvgShape(target);
+    if (shape) {
+      const attr = cssProp === 'background-color' ? 'fill' : cssProp === 'border-color' ? 'stroke' : cssProp;
+      _startValue = shape.getAttribute(attr) || '';
+    } else {
+      _startValue = target.style.getPropertyValue(cssProp) || '';
+    }
+  });
+
+  // Live preview while dragging — apply directly to DOM, no history entry
+  swatch.addEventListener('input', () => {
+    hexInput.value = swatch.value;
+    const target = getSelectedElement();
+    if (!target) return;
+    const shape = getSvgShape(target);
+    if (shape) {
+      const attr = cssProp === 'background-color' ? 'fill' : cssProp === 'border-color' ? 'stroke' : cssProp;
+      shape.setAttribute(attr, swatch.value);
+    } else if (isTextEditActive() && cssProp === 'color') {
+      // In text edit mode, apply preview only to selected text via a span.
+      // NEVER fall through to whole-element setProperty here:
+      //   - It runs without a history entry, so it can't be undone
+      //   - It leaves an inline color on the element that subsequent span
+      //     operations (e.g. font-size via applyStyleToSelection) will inherit,
+      //     making the text appear in the wrong color
+      // If no text is selected the preview is skipped; change fires on release.
+      applyStyleToSelection('color', swatch.value);
+    } else {
+      target.style.setProperty(cssProp, swatch.value);
+    }
+  });
+
+  // Commit to history when the user finishes picking (change fires once on release)
+  swatch.addEventListener('change', () => {
+    const finalValue = swatch.value;
+    const target = getSelectedElement();
+    const hcId   = getSelectedHcId();
+    if (!target || !hcId) { _startValue = null; return; }
+
+    if (/^#[0-9a-fA-F]{3,6}$/.test(finalValue)) addRecentColor(finalValue);
+
+    const startVal = _startValue ?? '';
+    _startValue = null;
+
+    // No-op guard: if nothing changed don't pollute history
+    if (startVal === finalValue) return;
+
+    const shape = getSvgShape(target);
+    if (shape) {
+      const attr = cssProp === 'background-color' ? 'fill' : cssProp === 'border-color' ? 'stroke' : cssProp;
+      // DOM is already at finalValue from live preview. Build command manually
+      // so undo() knows the correct start value.
+      const cmd = {
+        description: `Set SVG ${attr}`,
+        execute() { shape.setAttribute(attr, finalValue); recordChange(hcId, target.outerHTML); },
+        undo()    { if (startVal) shape.setAttribute(attr, startVal); else shape.removeAttribute(attr); recordChange(hcId, target.outerHTML); },
+      };
+      // push() calls execute() — that re-applies finalValue and records. Fine.
+      push(cmd);
+    } else {
+      // Handle text-edit inline selection
+      if (isTextEditActive() && cssProp === 'color') {
+        if (applyStyleToSelection('color', finalValue)) return;
+      }
+      const cmd = {
+        description: `Set ${cssProp}`,
+        execute() { target.style.setProperty(cssProp, finalValue); recordChange(hcId, target.outerHTML); },
+        undo()    { if (startVal === '') target.style.removeProperty(cssProp); else target.style.setProperty(cssProp, startVal); recordChange(hcId, target.outerHTML); },
+      };
+      push(cmd);
+    }
+  });
+
+  hexInput.addEventListener('change', () => {
+    const clean = hexInput.value.trim();
+    if (/^#[0-9a-fA-F]{3,6}$/.test(clean)) {
+      swatch.value = clean;
+      applyColorProp(cssProp, clean);
+    }
+  });
+}
+
+function applyColorProp(cssProp, value) {
+  const target = getSelectedElement();
+  const hcId   = getSelectedHcId();
+  if (!target || !hcId) return;
+
+  // Track recent colors
+  if (/^#[0-9a-fA-F]{3,6}$/.test(value)) addRecentColor(value);
+
+  // During text editing, apply color to selected text only
+  if (isTextEditActive() && cssProp === 'color') {
+    if (applyStyleToSelection('color', value)) return;
+  }
+
+  // SVG shape: map CSS props to SVG attributes
+  const shape = getSvgShape(target);
+  if (shape) {
+    if (cssProp === 'background-color') {
+      applySvgAttribute(target, hcId, shape, 'fill', value);
+      return;
+    }
+    if (cssProp === 'border-color') {
+      applySvgAttribute(target, hcId, shape, 'stroke', value);
+      return;
+    }
+  }
+
+  applyStyleProperty(target, hcId, cssProp, value);
+}
+
+/**
+ * Applies an SVG attribute change via the Command Pattern.
+ */
+function applySvgAttribute(svgElement, hcId, shape, attr, newValue) {
+  const oldValue = shape.getAttribute(attr) || '';
+  const command = {
+    description: `Set SVG ${attr}`,
+    execute() {
+      shape.setAttribute(attr, newValue);
+      recordChange(hcId, svgElement.outerHTML);
+    },
+    undo() {
+      if (oldValue) shape.setAttribute(attr, oldValue);
+      else shape.removeAttribute(attr);
+      recordChange(hcId, svgElement.outerHTML);
+    },
+  };
+  push(command);
+  return command;
+}
+
+// ── Utilities ─────────────────────────────────────────────────────────────────
+
+/**
+ * Convert rgb(r, g, b) or rgba(r, g, b, a) to #rrggbb hex.
+ * Returns null if conversion fails.
+ */
+function rgbToHex(value) {
+  if (!value) return null;
+  if (/^#[0-9a-fA-F]{3,6}$/.test(value.trim())) return value.trim();
+
+  const m = value.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+  if (!m) return null;
+
+  const r = parseInt(m[1]).toString(16).padStart(2, '0');
+  const g = parseInt(m[2]).toString(16).padStart(2, '0');
+  const b = parseInt(m[3]).toString(16).padStart(2, '0');
+  return `#${r}${g}${b}`;
+}
+
+/**
+ * Extract rotation degrees from a CSS transform matrix string.
+ * Returns 0 if no rotation found.
+ */
+function extractRotation(transform) {
+  if (!transform || transform === 'none') return 0;
+
+  // matrix(a, b, c, d, tx, ty) — rotation = atan2(b, a)
+  const m = transform.match(/matrix\(([^)]+)\)/);
+  if (m) {
+    const parts = m[1].split(',').map(Number);
+    const angle = Math.round(Math.atan2(parts[1], parts[0]) * (180 / Math.PI));
+    return angle;
+  }
+
+  // rotate(Xdeg) shorthand
+  const r = transform.match(/rotate\(([-\d.]+)deg\)/);
+  if (r) return parseFloat(r[1]);
+
+  return 0;
+}
+
+/**
+ * Set a <select> element's value, case-insensitively.
+ */
+function setSelectValue(select, value) {
+  if (!value) return;
+  const lower = value.toLowerCase();
+  for (const opt of select.options) {
+    if (opt.value.toLowerCase() === lower || opt.text.toLowerCase() === lower) {
+      select.value = opt.value;
+      return;
+    }
+  }
+}
+
+// ── Custom font picker (searchable dropdown) ─────────────────────────────────
+
+const DEFAULT_FONTS = [
+  'DM Sans', 'Inter', 'Fraunces', 'Roboto', 'Open Sans', 'Lato',
+  'Montserrat', 'Poppins', 'Raleway', 'Playfair Display', 'Source Sans 3',
+  'Merriweather', 'Nunito', 'PT Sans', 'Fira Sans',
+  'Georgia', 'Arial', 'Helvetica', 'Times New Roman', 'Courier New',
+];
+
+let _fontPickerWired = false;
+let _fontPickerOpen = false;
+
+/**
+ * Updates the font picker display value and rebuilds options with document
+ * fonts prioritized at the top.
+ */
+function updateFontPicker(picker, currentFont, iframeDoc) {
+  if (!picker) return;
+  const valueEl = picker.querySelector('.font-picker-value');
+  if (valueEl) valueEl.textContent = currentFont || 'DM Sans';
+  picker._currentValue = currentFont || 'DM Sans';
+
+  // Detect fonts used in the iframe document
+  const usedFonts = new Set();
+  if (iframeDoc) {
+    try {
+      iframeDoc.fonts.forEach(f => usedFonts.add(f.family.replace(/['"]/g, '').trim()));
+    } catch {}
+  }
+
+  // Build ordered font list: used fonts first, separator, then rest
+  const used = DEFAULT_FONTS.filter(f => usedFonts.has(f));
+  const rest = DEFAULT_FONTS.filter(f => !usedFonts.has(f));
+  picker._fonts = used.length > 0 ? [...used, '---', ...rest] : [...DEFAULT_FONTS];
+}
+
+/**
+ * Wires the font picker trigger, search, and option selection. Called once.
+ */
+function initFontPicker() {
+  if (_fontPickerWired) return;
+  _fontPickerWired = true;
+
+  const picker = document.getElementById('prop-font-family');
+  if (!picker) return;
+
+  const trigger = picker.querySelector('.font-picker-trigger');
+  const dropdown = picker.querySelector('.font-picker-dropdown');
+  const search = picker.querySelector('.font-picker-search');
+  const list = picker.querySelector('.font-picker-list');
+  if (!trigger || !dropdown || !search || !list) return;
+
+  picker._currentValue = 'DM Sans';
+  picker._fonts = [...DEFAULT_FONTS];
+
+  function openDropdown() {
+    if (_fontPickerOpen) return;
+    _fontPickerOpen = true;
+    picker.classList.add('open');
+
+    // Position dropdown below the trigger, using fixed positioning
+    const rect = trigger.getBoundingClientRect();
+    dropdown.style.left = rect.left + 'px';
+    dropdown.style.top = (rect.bottom + 2) + 'px';
+    dropdown.style.width = Math.max(rect.width, 200) + 'px';
+    dropdown.style.display = 'flex';
+
+    search.value = '';
+    renderFontList('');
+    search.focus();
+  }
+
+  function closeDropdown() {
+    if (!_fontPickerOpen) return;
+    _fontPickerOpen = false;
+    picker.classList.remove('open');
+    dropdown.style.display = 'none';
+  }
+
+  function selectFont(fontName) {
+    picker._currentValue = fontName;
+    const valueEl = picker.querySelector('.font-picker-value');
+    if (valueEl) valueEl.textContent = fontName;
+    closeDropdown();
+
+    // Apply to element or inline selection
+    const target = getSelectedElement();
+    const hcId = getSelectedHcId();
+    if (!target || !hcId) return;
+
+    if (isTextEditActive() && applyStyleToSelection('font-family', fontName)) return;
+    applyStyleProperty(target, hcId, 'font-family', fontName);
+  }
+
+  function renderFontList(filter) {
+    list.innerHTML = '';
+    const lower = filter.toLowerCase();
+    const fonts = (picker._fonts || DEFAULT_FONTS);
+
+    for (const font of fonts) {
+      if (font === '---') {
+        if (!filter) {
+          const sep = document.createElement('div');
+          sep.className = 'font-picker-separator';
+          list.appendChild(sep);
+        }
+        continue;
+      }
+
+      if (lower && !font.toLowerCase().includes(lower)) continue;
+
+      const option = document.createElement('div');
+      option.className = 'font-picker-option';
+      option.textContent = font;
+      option.style.fontFamily = `'${font}', sans-serif`;
+      if (font === picker._currentValue) option.classList.add('active');
+
+      option.addEventListener('mousedown', (e) => {
+        e.preventDefault(); // prevent search blur
+        selectFont(font);
+      });
+
+      list.appendChild(option);
+    }
+  }
+
+  // Toggle on trigger click
+  trigger.addEventListener('click', () => {
+    if (_fontPickerOpen) closeDropdown();
+    else openDropdown();
+  });
+
+  // Filter as you type
+  search.addEventListener('input', () => {
+    renderFontList(search.value);
+  });
+
+  // Keyboard navigation
+  search.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      e.stopPropagation();
+      closeDropdown();
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      const first = list.querySelector('.font-picker-option');
+      if (first) selectFont(first.textContent);
+    }
+  });
+
+  // Close on click outside
+  document.addEventListener('mousedown', (e) => {
+    if (_fontPickerOpen && !picker.contains(e.target)) {
+      closeDropdown();
+    }
+  });
+}