draply-dev 1.5.1 → 1.5.3

package/src/overlay.js

@@ -824,1105 +824,1113 @@
     const subLay = document.getElementById('__sub_lay__');
     if (subLay) subLay.classList.remove('v');
   }
-  }
+
 
   // ── HOVER ────────────────────────────────────────────────────────────────
   document.addEventListener('mouseover', e => {
-    if (!state.tool || ps(e.target)) return;
-    document.querySelectorAll('.__ph__').forEach(el => el.classList.remove('__ph__'));
-    e.target.classList.add('__ph__');
-    if (state.tool === 'ins') {
-      const r = e.target.getBoundingClientRect(), cs = getComputedStyle(e.target);
-      tip.textContent = `${Math.round(r.width)}×${Math.round(r.height)}  ${cs.position}  ${cs.display}`;
-      tip.classList.add('v');
-    }
-  });
-  document.addEventListener('mouseout', e => {
-    if (!ps(e.target)) e.target.classList.remove('__ph__');
-    if (state.tool === 'ins') tip.classList.remove('v');
-  });
-  document.addEventListener('mousemove', e => {
-    if (state.tool === 'ins') { tip.style.left = (e.clientX + 14) + 'px'; tip.style.top = (e.clientY - 28) + 'px'; }
-    if (state.dragging || state.resizing) { tip.style.left = (e.clientX + 14) + 'px'; tip.style.top = (e.clientY - 28) + 'px'; }
-  });
-
-  // ── CLICK SELECT ─────────────────────────────────────────────────────────
-  document.addEventListener('click', e => {
-    if (!state.tool || ps(e.target) || state.tool === 'ins') return;
-    e.preventDefault(); e.stopPropagation();
-
-    if (state.tool === 'mov' && e.ctrlKey) {
-      // Ctrl+click: toggle element in multi-select
-      const t = e.target;
-      const idx = state.selectedEls.indexOf(t);
-      if (idx >= 0) {
-        // Already in selection — remove it
-        state.selectedEls.splice(idx, 1);
-        t.classList.remove('__ps_multi__');
-        t.classList.remove('__ps__');
-        // If we removed the primary, promote the first remaining to primary
-        if (t === state.selectedEl) {
-          state.selectedEl = state.selectedEls[0] || null;
-          if (state.selectedEl) {
-            state.selectedEl.classList.remove('__ps_multi__');
-            state.selectedEl.classList.add('__ps__');
-          }
-        }
-      } else {
-        // Add to selection
-        state.selectedEls.push(t);
-        t.classList.add('__ps_multi__');
-        // If no primary yet, make this primary
-        if (!state.selectedEl) {
-          state.selectedEl = t;
-          t.classList.remove('__ps_multi__');
-          t.classList.add('__ps__');
+  if (!state.tool || ps(e.target)) return;
+  document.querySelectorAll('.__ph__').forEach(el => el.classList.remove('__ph__'));
+  e.target.classList.add('__ph__');
+  if (state.tool === 'ins') {
+    const r = e.target.getBoundingClientRect(), cs = getComputedStyle(e.target);
+    tip.textContent = `${Math.round(r.width)}×${Math.round(r.height)}  ${cs.position}  ${cs.display}`;
+    tip.classList.add('v');
+  }
+});
+document.addEventListener('mouseout', e => {
+  if (!ps(e.target)) e.target.classList.remove('__ph__');
+  if (state.tool === 'ins') tip.classList.remove('v');
+});
+document.addEventListener('mousemove', e => {
+  if (state.tool === 'ins') { tip.style.left = (e.clientX + 14) + 'px'; tip.style.top = (e.clientY - 28) + 'px'; }
+  if (state.dragging || state.resizing) { tip.style.left = (e.clientX + 14) + 'px'; tip.style.top = (e.clientY - 28) + 'px'; }
+});
+
+// ── CLICK SELECT ─────────────────────────────────────────────────────────
+document.addEventListener('click', e => {
+  if (!state.tool || ps(e.target) || state.tool === 'ins') return;
+  e.preventDefault(); e.stopPropagation();
+
+  if (state.tool === 'mov' && e.ctrlKey) {
+    // Ctrl+click: toggle element in multi-select
+    const t = e.target;
+    const idx = state.selectedEls.indexOf(t);
+    if (idx >= 0) {
+      // Already in selection — remove it
+      state.selectedEls.splice(idx, 1);
+      t.classList.remove('__ps_multi__');
+      t.classList.remove('__ps__');
+      // If we removed the primary, promote the first remaining to primary
+      if (t === state.selectedEl) {
+        state.selectedEl = state.selectedEls[0] || null;
+        if (state.selectedEl) {
+          state.selectedEl.classList.remove('__ps_multi__');
+          state.selectedEl.classList.add('__ps__');
         }
       }
-      // Show handle on primary if any selected
-      if (state.selectedEl) placeHdl(state.selectedEl);
-      else hdl.classList.remove('v');
-      return;
+    } else {
+      // Add to selection
+      state.selectedEls.push(t);
+      t.classList.add('__ps_multi__');
+      // If no primary yet, make this primary
+      if (!state.selectedEl) {
+        state.selectedEl = t;
+        t.classList.remove('__ps_multi__');
+        t.classList.add('__ps__');
+      }
     }
-
-    // Normal click (no Ctrl): clear all and select just this
-    document.querySelectorAll('.__ps__, .__ps_multi__').forEach(el => {
-      el.classList.remove('__ps__');
-      el.classList.remove('__ps_multi__');
-    });
-    state.selectedEls = [e.target];
-    state.selectedEl = e.target;
-    e.target.classList.add('__ps__');
-
-    if (state.tool === 'mov') { dEl = null; placeHdl(e.target); }
-    if (state.tool === 'rsz') { rzEl = null; rzDir = null; placeRH(e.target); }
-    if (state.tool === 'clr') populateColors(e.target);
-    if (state.tool === 'typ') populateTypo(e.target);
-  }, true);
-
-  // ══════════════════════════════════════════
-  // MOVE
-  // ══════════════════════════════════════════
-  function placeHdl(el) {
-    const r = el.getBoundingClientRect();
-    const hdlW = 80; // approximate handle width
-    // Center above element, but clamp inside viewport
-    let left = r.left + r.width / 2 - hdlW / 2;
-    let top = r.top - 36;
-    // Clamp horizontally
-    left = Math.max(8, Math.min(left, window.innerWidth - hdlW - 8));
-    // If element is at top, show handle below instead
-    if (top < 8) top = r.bottom + 8;
-    hdl.style.left = left + 'px';
-    hdl.style.top = top + 'px';
-    hdl.classList.add('v');
+    // Show handle on primary if any selected
+    if (state.selectedEl) placeHdl(state.selectedEl);
+    else hdl.classList.remove('v');
+    return;
   }
 
-  let dEl;
-  hdl.addEventListener('mousedown', e => {
-    if (!state.selectedEl) return;
-    e.preventDefault();
-    dEl = state.selectedEl;
-    state.dragSX = e.clientX; state.dragSY = e.clientY;
-
-    // Snapshot original positions for ALL selected elements
-    const els = state.selectedEls.length > 0 ? state.selectedEls : [state.selectedEl];
-    state.dragOrigPositions = els.map(el => {
-      const cs = getComputedStyle(el);
-      const origL = parseFloat(cs.left) || 0;
-      const origT = parseFloat(cs.top) || 0;
-      if (cs.position === 'static') el.style.position = 'relative';
-      el.style.transition = 'none';
-      return { el, origL, origT, prevL: origL + 'px', prevT: origT + 'px' };
-    });
-
-    state.dragging = true;
-  });
-  document.addEventListener('mousemove', e => {
-    if (!state.dragging) return;
-    const dx = e.clientX - state.dragSX, dy = e.clientY - state.dragSY;
-    state.dragOrigPositions.forEach(({ el, origL, origT }) => {
-      el.style.left = (origL + dx) + 'px';
-      el.style.top = (origT + dy) + 'px';
-    });
-    if (dEl) {
-      placeHdl(dEl);
-      const { origL, origT } = state.dragOrigPositions[0];
-      tip.textContent = `x:${Math.round(origL + dx)}  y:${Math.round(origT + dy)}`;
-      tip.classList.add('v');
-    }
+  // Normal click (no Ctrl): clear all and select just this
+  document.querySelectorAll('.__ps__, .__ps_multi__').forEach(el => {
+    el.classList.remove('__ps__');
+    el.classList.remove('__ps_multi__');
   });
-  document.addEventListener('mouseup', () => {
-    if (!state.dragging) return;
-    state.dragging = false; tip.classList.remove('v');
-    // Record each element separately
-    state.dragOrigPositions.forEach(({ el, prevL, prevT }) => {
-      const cs = getComputedStyle(el);
-      const newLeft = Math.round(parseFloat(cs.left)) + 'px';
-      const newTop = Math.round(parseFloat(cs.top)) + 'px';
-      if (newLeft !== prevL || newTop !== prevT) {
-        rec(el, { left: newLeft, top: newTop }, { left: prevL, top: prevT });
-      }
-    });
-    state.dragOrigPositions = [];
-    dEl = null;
+  state.selectedEls = [e.target];
+  state.selectedEl = e.target;
+  e.target.classList.add('__ps__');
+
+  if (state.tool === 'mov') { dEl = null; placeHdl(e.target); }
+  if (state.tool === 'rsz') { rzEl = null; rzDir = null; placeRH(e.target); }
+  if (state.tool === 'clr') populateColors(e.target);
+  if (state.tool === 'typ') populateTypo(e.target);
+}, true);
+
+// ══════════════════════════════════════════
+// MOVE
+// ══════════════════════════════════════════
+function placeHdl(el) {
+  const r = el.getBoundingClientRect();
+  const hdlW = 80; // approximate handle width
+  // Center above element, but clamp inside viewport
+  let left = r.left + r.width / 2 - hdlW / 2;
+  let top = r.top - 36;
+  // Clamp horizontally
+  left = Math.max(8, Math.min(left, window.innerWidth - hdlW - 8));
+  // If element is at top, show handle below instead
+  if (top < 8) top = r.bottom + 8;
+  hdl.style.left = left + 'px';
+  hdl.style.top = top + 'px';
+  hdl.classList.add('v');
+}
+
+let dEl;
+hdl.addEventListener('mousedown', e => {
+  if (!state.selectedEl) return;
+  e.preventDefault();
+  dEl = state.selectedEl;
+  state.dragSX = e.clientX; state.dragSY = e.clientY;
+
+  // Snapshot original positions for ALL selected elements
+  const els = state.selectedEls.length > 0 ? state.selectedEls : [state.selectedEl];
+  state.dragOrigPositions = els.map(el => {
+    const cs = getComputedStyle(el);
+    const origL = parseFloat(cs.left) || 0;
+    const origT = parseFloat(cs.top) || 0;
+    if (cs.position === 'static') el.style.position = 'relative';
+    el.style.transition = 'none';
+    return { el, origL, origT, prevL: origL + 'px', prevT: origT + 'px' };
   });
 
-  // ══════════════════════════════════════════
-  // RESIZE
-  // ══════════════════════════════════════════
-  function placeRH(el) {
-    const r = el.getBoundingClientRect();
-    // Use viewport coords (fixed position handles need viewport coords, not page)
-    const t = r.top, l = r.left;
-    const hw = r.width, hh = r.height;
-    const hs = 5; // half handle size for centering
-
-    const pos = {
-      nw: [l - hs, t - hs],
-      n: [l + hw / 2 - hs, t - hs],
-      ne: [l + hw - hs, t - hs],
-      w: [l - hs, t + hh / 2 - hs],
-      e: [l + hw - hs, t + hh / 2 - hs],
-      sw: [l - hs, t + hh - hs],
-      s: [l + hw / 2 - hs, t + hh - hs],
-      se: [l + hw - hs, t + hh - hs],
-    };
-    rhDirs.forEach(d => {
-      rhs[d].style.left = pos[d][0] + 'px';
-      rhs[d].style.top = pos[d][1] + 'px';
-      rhs[d].classList.add('v');
-    });
-  }
-
-  let rzEl = null, rzDir = null;
-  rhDirs.forEach(d => {
-    rhs[d].addEventListener('mousedown', e => {
-      if (!state.selectedEl) return;
-      e.preventDefault(); e.stopPropagation();
-      rzEl = state.selectedEl; rzDir = d;
-      const r = rzEl.getBoundingClientRect();
-      const cs = getComputedStyle(rzEl);
-      state.resizeOrigW = r.width; state.resizeOrigH = r.height;
-      state.resizeOrigX = e.clientX; state.resizeOrigY = e.clientY;
-      state.resizeOrigL = parseFloat(cs.left) || 0;
-      state.resizeOrigT = parseFloat(cs.top) || 0;
-      if (cs.position === 'static') rzEl.style.position = 'relative';
-      rzEl.style.transition = 'none';
-      state.resizing = true;
-    });
+  state.dragging = true;
+});
+document.addEventListener('mousemove', e => {
+  if (!state.dragging) return;
+  const dx = e.clientX - state.dragSX, dy = e.clientY - state.dragSY;
+  state.dragOrigPositions.forEach(({ el, origL, origT }) => {
+    el.style.left = (origL + dx) + 'px';
+    el.style.top = (origT + dy) + 'px';
   });
-
-  document.addEventListener('mousemove', e => {
-    if (!state.resizing || !rzEl) return;
-    const dx = e.clientX - state.resizeOrigX, dy = e.clientY - state.resizeOrigY;
-    let w = state.resizeOrigW, h = state.resizeOrigH;
-    let l = state.resizeOrigL, t = state.resizeOrigT;
-
-    if (rzDir.includes('e')) w = Math.max(20, w + dx);
-    if (rzDir.includes('s')) h = Math.max(20, h + dy);
-    if (rzDir.includes('w')) { w = Math.max(20, w - dx); l = state.resizeOrigL + (state.resizeOrigW - w); }
-    if (rzDir.includes('n')) { h = Math.max(20, h - dy); t = state.resizeOrigT + (state.resizeOrigH - h); }
-
-    rzEl.style.width = Math.round(w) + 'px';
-    rzEl.style.height = Math.round(h) + 'px';
-    rzEl.style.left = Math.round(l) + 'px';
-    rzEl.style.top = Math.round(t) + 'px';
-    placeRH(rzEl);
-    tip.textContent = `${Math.round(w)}×${Math.round(h)}`;
+  if (dEl) {
+    placeHdl(dEl);
+    const { origL, origT } = state.dragOrigPositions[0];
+    tip.textContent = `x:${Math.round(origL + dx)}  y:${Math.round(origT + dy)}`;
     tip.classList.add('v');
-  });
-
-  document.addEventListener('mouseup', () => {
-    if (!state.resizing || !rzEl) return;
-    state.resizing = false; tip.classList.remove('v');
-    const cs = getComputedStyle(rzEl);
-    // prevProps = original values before resize started
-    const prevProps = {
-      width: Math.round(state.resizeOrigW) + 'px',
-      height: Math.round(state.resizeOrigH) + 'px',
-      left: Math.round(state.resizeOrigL) + 'px',
-      top: Math.round(state.resizeOrigT) + 'px',
-    };
-    const newSize = {
-      width: Math.round(parseFloat(cs.width)) + 'px',
-      height: Math.round(parseFloat(cs.height)) + 'px',
-      left: Math.round(parseFloat(cs.left)) + 'px',
-      top: Math.round(parseFloat(cs.top)) + 'px',
-    };
-    if (newSize.width !== prevProps.width || newSize.height !== prevProps.height || newSize.left !== prevProps.left || newSize.top !== prevProps.top) {
-      rec(rzEl, newSize, prevProps);
-    }
-    rzEl = null; rzDir = null;
-  });
-
-  // ══════════════════════════════════════════
-  // COLORS
-  // ══════════════════════════════════════════
-  const clrElName = document.getElementById('__clr_el_name__');
-  const swBg = document.getElementById('__sw_bg__'), cpBg = document.getElementById('__cp_bg__');
-  const swFg = document.getElementById('__sw_fg__'), cpFg = document.getElementById('__cp_fg__');
-  const swBd = document.getElementById('__sw_bd__'), cpBd = document.getElementById('__cp_bd__');
-  const cpBgTrans = document.getElementById('__cp_bg_trans__');
-  const cpBdTrans = document.getElementById('__cp_bd_trans__');
-
-  function setupSwatch(sw, cp) {
-    sw.onclick = () => cp.click();
-    cp.oninput = () => { sw.style.background = cp.value; };
   }
-  setupSwatch(swBg, cpBg);
-  setupSwatch(swFg, cpFg);
-  setupSwatch(swBd, cpBd);
-
-  // Transparent checkbox toggles swatch appearance
-  cpBgTrans.onchange = () => {
-    swBg.style.background = cpBgTrans.checked
-      ? 'repeating-conic-gradient(#444 0% 25%, #222 0% 50%) 0 0/10px 10px'
-      : cpBg.value;
-    swBg.style.opacity = cpBgTrans.checked ? '0.6' : '1';
-  };
-  cpBdTrans.onchange = () => {
-    swBd.style.background = cpBdTrans.checked
-      ? 'repeating-conic-gradient(#444 0% 25%, #222 0% 50%) 0 0/10px 10px'
-      : cpBd.value;
-    swBd.style.opacity = cpBdTrans.checked ? '0.6' : '1';
-  };
-
-  function isTransparent(color) {
-    return !color || color === 'transparent' || color === 'rgba(0, 0, 0, 0)';
-  }
-
-  function populateColors(el) {
+});
+document.addEventListener('mouseup', () => {
+  if (!state.dragging) return;
+  state.dragging = false; tip.classList.remove('v');
+  // Record each element separately
+  state.dragOrigPositions.forEach(({ el, prevL, prevT }) => {
     const cs = getComputedStyle(el);
-    clrElName.textContent = el.tagName.toLowerCase() + (el.id ? '#' + el.id : el.className ? '.' + [...el.classList][0] : '');
-    let bg = cs.backgroundColor;
-    let fg = cs.color || '#000000';
-    let bd = cs.borderColor || '#cccccc';
-    const bw = cs.borderWidth;
-
-    // #14: Support SVG fill/stroke (#14)
-    const isSvg = el.namespaceURI === 'http://www.w3.org/2000/svg';
-    if (isSvg) {
-       fg = cs.fill;
-       bd = cs.stroke;
-    }
-
-    // Background — detect transparent
-    if (isTransparent(bg)) {
-      cpBgTrans.checked = true;
-      swBg.style.background = 'repeating-conic-gradient(#444 0% 25%, #222 0% 50%) 0 0/10px 10px';
-      swBg.style.opacity = '0.6';
-    } else {
-      cpBgTrans.checked = false;
-      cpBg.value = rgb2hex(bg);
-      swBg.style.background = cpBg.value;
-      swBg.style.opacity = '1';
-    }
-    cpFg.value = rgb2hex(fg); swFg.style.background = cpFg.value;
-    // Border — detect none/transparent
-    if (isTransparent(bd) || bw === '0px') {
-      cpBdTrans.checked = true;
-      swBd.style.background = 'repeating-conic-gradient(#444 0% 25%, #222 0% 50%) 0 0/10px 10px';
-      swBd.style.opacity = '0.6';
-    } else {
-      cpBdTrans.checked = false;
-      cpBd.value = rgb2hex(bd);
-      swBd.style.background = cpBd.value;
-      swBd.style.opacity = '1';
+    const newLeft = Math.round(parseFloat(cs.left)) + 'px';
+    const newTop = Math.round(parseFloat(cs.top)) + 'px';
+    if (newLeft !== prevL || newTop !== prevT) {
+      rec(el, { left: newLeft, top: newTop }, { left: prevL, top: prevT });
     }
-
-    // #11: Advanced styles detection
-    const opVal = parseFloat(cs.opacity) || 1;
-    document.getElementById('__st_opacity__').value = opVal;
-    document.getElementById('__st_opacity_val__').textContent = opVal.toFixed(2);
-    document.getElementById('__st_radius__').value = parseInt(cs.borderRadius) || 0;
-    document.getElementById('__st_shadow__').value = cs.boxShadow === 'none' ? 'none' : '0 4px 12px rgba(0,0,0,0.15)'; // simple match
-  }
-
-  // #11: Live preview for advanced styles
-  document.getElementById('__st_opacity__').oninput = e => {
-     const v = e.target.value;
-     document.getElementById('__st_opacity_val__').textContent = parseFloat(v).toFixed(2);
-     if (state.selectedEl) state.selectedEl.style.opacity = v;
+  });
+  state.dragOrigPositions = [];
+  dEl = null;
+});
+
+// ══════════════════════════════════════════
+// RESIZE
+// ══════════════════════════════════════════
+function placeRH(el) {
+  const r = el.getBoundingClientRect();
+  // Use viewport coords (fixed position handles need viewport coords, not page)
+  const t = r.top, l = r.left;
+  const hw = r.width, hh = r.height;
+  const hs = 5; // half handle size for centering
+
+  const pos = {
+    nw: [l - hs, t - hs],
+    n: [l + hw / 2 - hs, t - hs],
+    ne: [l + hw - hs, t - hs],
+    w: [l - hs, t + hh / 2 - hs],
+    e: [l + hw - hs, t + hh / 2 - hs],
+    sw: [l - hs, t + hh - hs],
+    s: [l + hw / 2 - hs, t + hh - hs],
+    se: [l + hw - hs, t + hh - hs],
   };
-  document.getElementById('__st_radius__').oninput = e => {
-     if (state.selectedEl) state.selectedEl.style.borderRadius = e.target.value + 'px';
+  rhDirs.forEach(d => {
+    rhs[d].style.left = pos[d][0] + 'px';
+    rhs[d].style.top = pos[d][1] + 'px';
+    rhs[d].classList.add('v');
+  });
+}
+
+let rzEl = null, rzDir = null;
+rhDirs.forEach(d => {
+  rhs[d].addEventListener('mousedown', e => {
+    if (!state.selectedEl) return;
+    e.preventDefault(); e.stopPropagation();
+    rzEl = state.selectedEl; rzDir = d;
+    const r = rzEl.getBoundingClientRect();
+    const cs = getComputedStyle(rzEl);
+    state.resizeOrigW = r.width; state.resizeOrigH = r.height;
+    state.resizeOrigX = e.clientX; state.resizeOrigY = e.clientY;
+    state.resizeOrigL = parseFloat(cs.left) || 0;
+    state.resizeOrigT = parseFloat(cs.top) || 0;
+    if (cs.position === 'static') rzEl.style.position = 'relative';
+    rzEl.style.transition = 'none';
+    state.resizing = true;
+  });
+});
+
+document.addEventListener('mousemove', e => {
+  if (!state.resizing || !rzEl) return;
+  const dx = e.clientX - state.resizeOrigX, dy = e.clientY - state.resizeOrigY;
+  let w = state.resizeOrigW, h = state.resizeOrigH;
+  let l = state.resizeOrigL, t = state.resizeOrigT;
+
+  if (rzDir.includes('e')) w = Math.max(20, w + dx);
+  if (rzDir.includes('s')) h = Math.max(20, h + dy);
+  if (rzDir.includes('w')) { w = Math.max(20, w - dx); l = state.resizeOrigL + (state.resizeOrigW - w); }
+  if (rzDir.includes('n')) { h = Math.max(20, h - dy); t = state.resizeOrigT + (state.resizeOrigH - h); }
+
+  rzEl.style.width = Math.round(w) + 'px';
+  rzEl.style.height = Math.round(h) + 'px';
+  rzEl.style.left = Math.round(l) + 'px';
+  rzEl.style.top = Math.round(t) + 'px';
+  placeRH(rzEl);
+  tip.textContent = `${Math.round(w)}×${Math.round(h)}`;
+  tip.classList.add('v');
+});
+
+document.addEventListener('mouseup', () => {
+  if (!state.resizing || !rzEl) return;
+  state.resizing = false; tip.classList.remove('v');
+  const cs = getComputedStyle(rzEl);
+  // prevProps = original values before resize started
+  const prevProps = {
+    width: Math.round(state.resizeOrigW) + 'px',
+    height: Math.round(state.resizeOrigH) + 'px',
+    left: Math.round(state.resizeOrigL) + 'px',
+    top: Math.round(state.resizeOrigT) + 'px',
   };
-  document.getElementById('__st_shadow__').onchange = e => {
-     if (state.selectedEl) state.selectedEl.style.boxShadow = e.target.value === 'none' ? '' : e.target.value;
+  const newSize = {
+    width: Math.round(parseFloat(cs.width)) + 'px',
+    height: Math.round(parseFloat(cs.height)) + 'px',
+    left: Math.round(parseFloat(cs.left)) + 'px',
+    top: Math.round(parseFloat(cs.top)) + 'px',
   };
+  if (newSize.width !== prevProps.width || newSize.height !== prevProps.height || newSize.left !== prevProps.left || newSize.top !== prevProps.top) {
+    rec(rzEl, newSize, prevProps);
   }
-
-  document.getElementById('__clr_apply__').onclick = () => {
-    if (!state.selectedEl) { toast('⚠ Select an element first'); return; }
-    const el = state.selectedEl;
-    const bgVal = cpBgTrans.checked ? 'transparent' : cpBg.value;
-    const bdVal = cpBdTrans.checked ? 'none' : cpBd.value;
-    const opVal = document.getElementById('__st_opacity__').value;
-    const radVal = document.getElementById('__st_radius__').value + 'px';
-    const shVal = document.getElementById('__st_shadow__').value;
-
-    const prevProps = {
-      'background-color': el.style.backgroundColor || '',
-      'color': el.style.color || '',
-      'border': el.style.border || '',
-      'opacity': el.style.opacity || '',
-      'border-radius': el.style.borderRadius || '',
-      'box-shadow': el.style.boxShadow || ''
-    };
-
-    if (el.namespaceURI === 'http://www.w3.org/2000/svg') {
-       el.style.fill = cpFg.value;
-       el.style.stroke = cpBdTrans.checked ? 'none' : bdVal;
-    }
-
-    el.style.backgroundColor = bgVal;
-    el.style.color = cpFg.value;
-    el.style.opacity = opVal;
-    el.style.borderRadius = radVal;
-    el.style.boxShadow = shVal === 'none' ? '' : shVal;
-
-    if (cpBdTrans.checked) {
-      el.style.border = 'none';
-    } else {
-      el.style.borderColor = bdVal;
-      if (getComputedStyle(el).borderWidth === '0px') el.style.borderWidth = '1px';
-      if (getComputedStyle(el).borderStyle === 'none') el.style.borderStyle = 'solid';
-    }
-    rec(el, { 
-       'background-color': bgVal, color: cpFg.value, 
-       'border': cpBdTrans.checked ? 'none' : `1px solid ${bdVal}`,
-       'opacity': opVal, 'border-radius': radVal, 'box-shadow': shVal === 'none' ? '' : shVal
-    }, prevProps);
-    toast('🎨 Styles applied!');
-  };
-
-  function rgb2hex(rgb) {
-    if (rgb.startsWith('#')) return rgb;
-    const m = rgb.match(/\d+/g);
-    if (!m || m.length < 3) return '#000000';
-    return '#' + m.slice(0, 3).map(x => parseInt(x).toString(16).padStart(2, '0')).join('');
+  rzEl = null; rzDir = null;
+});
+
+// ══════════════════════════════════════════
+// COLORS
+// ══════════════════════════════════════════
+const clrElName = document.getElementById('__clr_el_name__');
+const swBg = document.getElementById('__sw_bg__'), cpBg = document.getElementById('__cp_bg__');
+const swFg = document.getElementById('__sw_fg__'), cpFg = document.getElementById('__cp_fg__');
+const swBd = document.getElementById('__sw_bd__'), cpBd = document.getElementById('__cp_bd__');
+const cpBgTrans = document.getElementById('__cp_bg_trans__');
+const cpBdTrans = document.getElementById('__cp_bd_trans__');
+
+function setupSwatch(sw, cp) {
+  sw.onclick = () => cp.click();
+  cp.oninput = () => { sw.style.background = cp.value; };
+}
+setupSwatch(swBg, cpBg);
+setupSwatch(swFg, cpFg);
+setupSwatch(swBd, cpBd);
+
+// Transparent checkbox toggles swatch appearance
+cpBgTrans.onchange = () => {
+  swBg.style.background = cpBgTrans.checked
+    ? 'repeating-conic-gradient(#444 0% 25%, #222 0% 50%) 0 0/10px 10px'
+    : cpBg.value;
+  swBg.style.opacity = cpBgTrans.checked ? '0.6' : '1';
+};
+cpBdTrans.onchange = () => {
+  swBd.style.background = cpBdTrans.checked
+    ? 'repeating-conic-gradient(#444 0% 25%, #222 0% 50%) 0 0/10px 10px'
+    : cpBd.value;
+  swBd.style.opacity = cpBdTrans.checked ? '0.6' : '1';
+};
+
+function isTransparent(color) {
+  return !color || color === 'transparent' || color === 'rgba(0, 0, 0, 0)';
+}
+
+function populateColors(el) {
+  const cs = getComputedStyle(el);
+  clrElName.textContent = el.tagName.toLowerCase() + (el.id ? '#' + el.id : el.className ? '.' + [...el.classList][0] : '');
+  let bg = cs.backgroundColor;
+  let fg = cs.color || '#000000';
+  let bd = cs.borderColor || '#cccccc';
+  const bw = cs.borderWidth;
+
+  // #14: Support SVG fill/stroke (#14)
+  const isSvg = el.namespaceURI === 'http://www.w3.org/2000/svg';
+  if (isSvg) {
+    fg = cs.fill;
+    bd = cs.stroke;
   }
 
-  // ══════════════════════════════════════════
-  // TYPOGRAPHY
-  // ══════════════════════════════════════════
-  const typElName = document.getElementById('__typ_el_name__');
-  const typSz = document.getElementById('__typ_sz__');
-  const typLh = document.getElementById('__typ_lh__');
-  const typLs = document.getElementById('__typ_ls__');
-  const typFont = document.getElementById('__typ_font__');
-  const typBold = document.getElementById('__typ_bold__');
-  const typItalic = document.getElementById('__typ_italic__');
-  const typUnder = document.getElementById('__typ_under__');
-  const typStrike = document.getElementById('__typ_strike__');
-  const typUpper = document.getElementById('__typ_upper__');
-  const typLower = document.getElementById('__typ_lower__');
-
-  // Track toggle states
-  const typState = { bold: false, italic: false, under: false, strike: false, upper: false, lower: false };
-
-  function setStyleBtn(btn, key, val) {
-    typState[key] = val;
-    btn.classList.toggle('on', val);
+  // Background — detect transparent
+  if (isTransparent(bg)) {
+    cpBgTrans.checked = true;
+    swBg.style.background = 'repeating-conic-gradient(#444 0% 25%, #222 0% 50%) 0 0/10px 10px';
+    swBg.style.opacity = '0.6';
+  } else {
+    cpBgTrans.checked = false;
+    cpBg.value = rgb2hex(bg);
+    swBg.style.background = cpBg.value;
+    swBg.style.opacity = '1';
   }
-
-  typBold.onclick = () => setStyleBtn(typBold, 'bold', !typState.bold);
-  typItalic.onclick = () => setStyleBtn(typItalic, 'italic', !typState.italic);
-  typUnder.onclick = () => setStyleBtn(typUnder, 'under', !typState.under);
-  typStrike.onclick = () => setStyleBtn(typStrike, 'strike', !typState.strike);
-  typUpper.onclick = () => { setStyleBtn(typUpper, 'upper', !typState.upper); if (typState.upper) setStyleBtn(typLower, 'lower', false); };
-  typLower.onclick = () => { setStyleBtn(typLower, 'lower', !typState.lower); if (typState.lower) setStyleBtn(typUpper, 'upper', false); };
-
-  // Loaded Google Fonts cache
-  const loadedFonts = new Set();
-  function loadGoogleFont(name) {
-    if (!name || loadedFonts.has(name)) return;
-    loadedFonts.add(name);
-    const link = document.createElement('link');
-    link.rel = 'stylesheet';
-    link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(name)}:wght@400;700&display=swap`;
-    document.head.appendChild(link);
+  cpFg.value = rgb2hex(fg); swFg.style.background = cpFg.value;
+  // Border — detect none/transparent
+  if (isTransparent(bd) || bw === '0px') {
+    cpBdTrans.checked = true;
+    swBd.style.background = 'repeating-conic-gradient(#444 0% 25%, #222 0% 50%) 0 0/10px 10px';
+    swBd.style.opacity = '0.6';
+  } else {
+    cpBdTrans.checked = false;
+    cpBd.value = rgb2hex(bd);
+    swBd.style.background = cpBd.value;
+    swBd.style.opacity = '1';
   }
 
-  // Live preview when font changes
-  typFont.onchange = () => {
-    if (typFont.value) loadGoogleFont(typFont.value);
+  // #11: Advanced styles detection
+  const opVal = parseFloat(cs.opacity) || 1;
+  document.getElementById('__st_opacity__').value = opVal;
+  document.getElementById('__st_opacity_val__').textContent = opVal.toFixed(2);
+  document.getElementById('__st_radius__').value = parseInt(cs.borderRadius) || 0;
+  document.getElementById('__st_shadow__').value = cs.boxShadow === 'none' ? 'none' : '0 4px 12px rgba(0,0,0,0.15)'; // simple match
+}
+
+// #11: Live preview for advanced styles
+document.getElementById('__st_opacity__').oninput = e => {
+  const v = e.target.value;
+  document.getElementById('__st_opacity_val__').textContent = parseFloat(v).toFixed(2);
+  if (state.selectedEl) state.selectedEl.style.opacity = v;
+};
+document.getElementById('__st_radius__').oninput = e => {
+  if (state.selectedEl) state.selectedEl.style.borderRadius = e.target.value + 'px';
+};
+document.getElementById('__st_shadow__').onchange = e => {
+  if (state.selectedEl) state.selectedEl.style.boxShadow = e.target.value === 'none' ? '' : e.target.value;
+};
+
+document.getElementById('__clr_apply__').onclick = () => {
+  if (!state.selectedEl) { toast('⚠ Select an element first'); return; }
+  const el = state.selectedEl;
+  const bgVal = cpBgTrans.checked ? 'transparent' : cpBg.value;
+  const bdVal = cpBdTrans.checked ? 'none' : cpBd.value;
+  const opVal = document.getElementById('__st_opacity__').value;
+  const radVal = document.getElementById('__st_radius__').value + 'px';
+  const shVal = document.getElementById('__st_shadow__').value;
+
+  const prevProps = {
+    'background-color': el.style.backgroundColor || '',
+    'color': el.style.color || '',
+    'border': el.style.border || '',
+    'opacity': el.style.opacity || '',
+    'border-radius': el.style.borderRadius || '',
+    'box-shadow': el.style.boxShadow || ''
   };
 
-  function populateTypo(el) {
-    // Make text directly editable
-    if (!el.isContentEditable) {
-      el.contentEditable = 'true';
-      el.dataset.origText = el.innerHTML || '';
-      el.focus();
-      
-      const finishEdit = () => {
-        el.contentEditable = 'false';
-        el.removeEventListener('blur', finishEdit);
-        if (el.innerHTML !== el.dataset.origText) {
-          rec(el, { innerHTML: el.innerHTML }, { innerHTML: el.dataset.origText });
-          toast('Text updated!');
-        }
-      };
-      el.addEventListener('blur', finishEdit);
-    }
-
-    const cs = getComputedStyle(el);
-    typElName.textContent = el.tagName.toLowerCase() + (el.id ? '#' + el.id : el.className ? '.' + [...el.classList].filter(c => !c.startsWith('__'))[0] : '');
-    typSz.value = Math.round(parseFloat(cs.fontSize)) || 16;
-    typLh.value = parseFloat(cs.lineHeight) ? (parseFloat(cs.lineHeight) / parseFloat(cs.fontSize)).toFixed(1) : '1.5';
-    typLs.value = parseFloat(cs.letterSpacing) || 0;
-    typFont.value = '';
-
-    // Detect current styles
-    setStyleBtn(typBold, 'bold', parseInt(cs.fontWeight) >= 700);
-    setStyleBtn(typItalic, 'italic', cs.fontStyle === 'italic');
-    setStyleBtn(typUnder, 'under', cs.textDecoration.includes('underline'));
-    setStyleBtn(typStrike, 'strike', cs.textDecoration.includes('line-through'));
-    setStyleBtn(typUpper, 'upper', cs.textTransform === 'uppercase');
-    setStyleBtn(typLower, 'lower', cs.textTransform === 'lowercase');
-
-    // Live preview on input change
-    [typSz, typLh, typLs].forEach(inp => { inp.oninput = () => previewTypo(el); });
+  if (el.namespaceURI === 'http://www.w3.org/2000/svg') {
+    el.style.fill = cpFg.value;
+    el.style.stroke = cpBdTrans.checked ? 'none' : bdVal;
   }
 
-  function previewTypo(el) {
-    el.style.fontSize = typSz.value + 'px';
-    el.style.lineHeight = typLh.value;
-    el.style.letterSpacing = typLs.value + 'px';
-    el.style.setProperty('font-weight', typState.bold ? '700' : '400', 'important');
-    el.style.setProperty('font-style', typState.italic ? 'italic' : 'normal', 'important');
-    const deco = [typState.under && 'underline', typState.strike && 'line-through'].filter(Boolean).join(' ') || 'none';
-    el.style.setProperty('text-decoration', deco, 'important');
-    el.style.textTransform = typState.upper ? 'uppercase' : typState.lower ? 'lowercase' : 'none';
-    if (typFont.value) {
-      loadGoogleFont(typFont.value);
-      el.style.fontFamily = `'${typFont.value}', sans-serif`;
-    }
+  el.style.backgroundColor = bgVal;
+  el.style.color = cpFg.value;
+  el.style.opacity = opVal;
+  el.style.borderRadius = radVal;
+  el.style.boxShadow = shVal === 'none' ? '' : shVal;
+
+  if (cpBdTrans.checked) {
+    el.style.border = 'none';
+  } else {
+    el.style.borderColor = bdVal;
+    if (getComputedStyle(el).borderWidth === '0px') el.style.borderWidth = '1px';
+    if (getComputedStyle(el).borderStyle === 'none') el.style.borderStyle = 'solid';
   }
-
-  document.getElementById('__typ_apply__').onclick = () => {
-    if (!state.selectedEl) { toast('⚠ Select a text element first'); return; }
-    const el = state.selectedEl;
-    const deco = [typState.under && 'underline', typState.strike && 'line-through'].filter(Boolean).join(' ') || 'none';
-    const props = {
-      'font-size': typSz.value + 'px',
-      'font-weight': typState.bold ? '700' : '400',
-      'font-style': typState.italic ? 'italic' : 'normal',
-      'text-decoration': deco,
-      'text-transform': typState.upper ? 'uppercase' : typState.lower ? 'lowercase' : 'none',
-      'line-height': typLh.value,
-      'letter-spacing': typLs.value + 'px',
-    };
-    if (typFont.value) {
-      props['font-family'] = `'${typFont.value}', sans-serif`;
-      props['googleFont'] = typFont.value;
-    }
-    // Snapshot BEFORE previewTypo applies styles
-    const prevProps = {};
-    Object.keys(props).forEach(p => {
-      const camel = p.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
-      prevProps[p] = el.style[camel] || '';
-    });
-    previewTypo(el);
-    rec(el, props, prevProps);
-    toast('📝 Typography applied!');
-  };
-
-  // ══════════════════════════════════════════
-  // ASSETS
-  // ══════════════════════════════════════════
-  const astDrop = document.getElementById('__ast_drop__');
-  const astFile = document.getElementById('__ast_file__');
-  const astList = document.getElementById('__ast_list__');
-  const astHint = document.getElementById('__ast_hint__');
-  const astStore = []; // { id, name, src, url }
-  let pendingAsset = null; // asset waiting to be placed
-  let placingEl = null; // the ghost element following cursor
-  let astDragEl = null; // placed asset being moved
-  let astDragSX, astDragSY, astDragOL, astDragOT;
-
-  // Upload via click or drop
-  astDrop.onclick = () => astFile.click();
-  astFile.onchange = e => loadAssets(e.target.files);
-  astDrop.ondragover = e => { e.preventDefault(); astDrop.style.borderColor = '#7fff6e'; };
-  astDrop.ondragleave = () => { astDrop.style.borderColor = ''; };
-  astDrop.ondrop = e => {
-    e.preventDefault(); astDrop.style.borderColor = '';
-    loadAssets(e.dataTransfer.files);
-  };
-
-  function loadAssets(files) {
-    [...files].forEach(file => {
-      if (!file.type.startsWith('image/')) return;
-      const reader = new FileReader();
-      reader.onload = async ev => {
-        try {
-          const res = await fetch('/draply-upload', {
-            method: 'POST',
-            body: JSON.stringify({ name: file.name, base64: ev.target.result })
-          });
-          const data = await res.json();
-          if (data.ok) {
-            const asset = { id: Date.now() + Math.random(), name: file.name, src: data.url };
-            astStore.push(asset);
-            addThumb(asset);
-            astHint.style.display = 'block';
-            toast('🖼️ ' + file.name + ' loaded');
-          } else {
-            toast('⚠ Upload failed');
-          }
-        } catch(e) {
-           toast('⚠ Upload failed');
-        }
-      };
-      reader.readAsDataURL(file);
-    });
-  }
-
-  function addThumb(asset) {
-    const img = document.createElement('img');
-    img.className = 'ps-ast-thumb';
-    img.src = asset.src;
-    img.title = asset.name;
-    img.dataset.assetId = asset.id;
-    img.onclick = () => {
-      // Deselect all thumbs
-      document.querySelectorAll('.ps-ast-thumb').forEach(t => t.classList.remove('active'));
-      img.classList.add('active');
-      startPlacing(asset);
+  rec(el, {
+    'background-color': bgVal, color: cpFg.value,
+    'border': cpBdTrans.checked ? 'none' : `1px solid ${bdVal}`,
+    'opacity': opVal, 'border-radius': radVal, 'box-shadow': shVal === 'none' ? '' : shVal
+  }, prevProps);
+  toast('🎨 Styles applied!');
+};
+
+function rgb2hex(rgb) {
+  if (rgb.startsWith('#')) return rgb;
+  const m = rgb.match(/\d+/g);
+  if (!m || m.length < 3) return '#000000';
+  return '#' + m.slice(0, 3).map(x => parseInt(x).toString(16).padStart(2, '0')).join('');
+}
+
+// ══════════════════════════════════════════
+// TYPOGRAPHY
+// ══════════════════════════════════════════
+const typElName = document.getElementById('__typ_el_name__');
+const typSz = document.getElementById('__typ_sz__');
+const typLh = document.getElementById('__typ_lh__');
+const typLs = document.getElementById('__typ_ls__');
+const typFont = document.getElementById('__typ_font__');
+const typBold = document.getElementById('__typ_bold__');
+const typItalic = document.getElementById('__typ_italic__');
+const typUnder = document.getElementById('__typ_under__');
+const typStrike = document.getElementById('__typ_strike__');
+const typUpper = document.getElementById('__typ_upper__');
+const typLower = document.getElementById('__typ_lower__');
+
+// Track toggle states
+const typState = { bold: false, italic: false, under: false, strike: false, upper: false, lower: false };
+
+function setStyleBtn(btn, key, val) {
+  typState[key] = val;
+  btn.classList.toggle('on', val);
+}
+
+typBold.onclick = () => setStyleBtn(typBold, 'bold', !typState.bold);
+typItalic.onclick = () => setStyleBtn(typItalic, 'italic', !typState.italic);
+typUnder.onclick = () => setStyleBtn(typUnder, 'under', !typState.under);
+typStrike.onclick = () => setStyleBtn(typStrike, 'strike', !typState.strike);
+typUpper.onclick = () => { setStyleBtn(typUpper, 'upper', !typState.upper); if (typState.upper) setStyleBtn(typLower, 'lower', false); };
+typLower.onclick = () => { setStyleBtn(typLower, 'lower', !typState.lower); if (typState.lower) setStyleBtn(typUpper, 'upper', false); };
+
+// Loaded Google Fonts cache
+const loadedFonts = new Set();
+function loadGoogleFont(name) {
+  if (!name || loadedFonts.has(name)) return;
+  loadedFonts.add(name);
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(name)}:wght@400;700&display=swap`;
+  document.head.appendChild(link);
+}
+
+// Live preview when font changes
+typFont.onchange = () => {
+  if (typFont.value) loadGoogleFont(typFont.value);
+};
+
+function populateTypo(el) {
+  // Make text directly editable
+  if (!el.isContentEditable) {
+    el.contentEditable = 'true';
+    el.dataset.origText = el.innerHTML || '';
+    el.focus();
+
+    const finishEdit = () => {
+      el.contentEditable = 'false';
+      el.removeEventListener('blur', finishEdit);
+      if (el.innerHTML !== el.dataset.origText) {
+        rec(el, { innerHTML: el.innerHTML }, { innerHTML: el.dataset.origText });
+        toast('Text updated!');
+      }
     };
-    astList.appendChild(img);
+    el.addEventListener('blur', finishEdit);
   }
 
-  // Start placing: attach ghost image to cursor
-  function startPlacing(asset) {
-    cancelPlacing();
-    pendingAsset = asset;
-
-    // Create ghost
-    placingEl = document.createElement('div');
-    placingEl.className = 'ps-asset-placed placing';
-    placingEl.style.cssText = 'width:120px;height:120px;pointer-events:none;opacity:.75;';
-    placingEl.innerHTML = `<img src="${asset.src}" draggable="false">`;
-    document.body.appendChild(placingEl);
-
-    toast('Click anywhere on page to place');
-    document.addEventListener('mousemove', onPlacingMove);
-    document.addEventListener('click', onPlacingClick, true);
-    document.addEventListener('keydown', onPlacingCancel);
+  const cs = getComputedStyle(el);
+  typElName.textContent = el.tagName.toLowerCase() + (el.id ? '#' + el.id : el.className ? '.' + [...el.classList].filter(c => !c.startsWith('__'))[0] : '');
+  typSz.value = Math.round(parseFloat(cs.fontSize)) || 16;
+  typLh.value = parseFloat(cs.lineHeight) ? (parseFloat(cs.lineHeight) / parseFloat(cs.fontSize)).toFixed(1) : '1.5';
+  typLs.value = parseFloat(cs.letterSpacing) || 0;
+  typFont.value = '';
+
+  // Detect current styles
+  setStyleBtn(typBold, 'bold', parseInt(cs.fontWeight) >= 700);
+  setStyleBtn(typItalic, 'italic', cs.fontStyle === 'italic');
+  setStyleBtn(typUnder, 'under', cs.textDecoration.includes('underline'));
+  setStyleBtn(typStrike, 'strike', cs.textDecoration.includes('line-through'));
+  setStyleBtn(typUpper, 'upper', cs.textTransform === 'uppercase');
+  setStyleBtn(typLower, 'lower', cs.textTransform === 'lowercase');
+
+  // Live preview on input change
+  [typSz, typLh, typLs].forEach(inp => { inp.oninput = () => previewTypo(el); });
+}
+
+function previewTypo(el) {
+  el.style.fontSize = typSz.value + 'px';
+  el.style.lineHeight = typLh.value;
+  el.style.letterSpacing = typLs.value + 'px';
+  el.style.setProperty('font-weight', typState.bold ? '700' : '400', 'important');
+  el.style.setProperty('font-style', typState.italic ? 'italic' : 'normal', 'important');
+  const deco = [typState.under && 'underline', typState.strike && 'line-through'].filter(Boolean).join(' ') || 'none';
+  el.style.setProperty('text-decoration', deco, 'important');
+  el.style.textTransform = typState.upper ? 'uppercase' : typState.lower ? 'lowercase' : 'none';
+  if (typFont.value) {
+    loadGoogleFont(typFont.value);
+    el.style.fontFamily = `'${typFont.value}', sans-serif`;
   }
-
-  function onPlacingMove(e) {
-    if (!placingEl) return;
-    placingEl.style.left = (e.clientX - 60) + 'px';
-    placingEl.style.top = (e.clientY - 60) + 'px';
+}
+
+document.getElementById('__typ_apply__').onclick = () => {
+  if (!state.selectedEl) { toast('⚠ Select a text element first'); return; }
+  const el = state.selectedEl;
+  const deco = [typState.under && 'underline', typState.strike && 'line-through'].filter(Boolean).join(' ') || 'none';
+  const props = {
+    'font-size': typSz.value + 'px',
+    'font-weight': typState.bold ? '700' : '400',
+    'font-style': typState.italic ? 'italic' : 'normal',
+    'text-decoration': deco,
+    'text-transform': typState.upper ? 'uppercase' : typState.lower ? 'lowercase' : 'none',
+    'line-height': typLh.value,
+    'letter-spacing': typLs.value + 'px',
+  };
+  if (typFont.value) {
+    props['font-family'] = `'${typFont.value}', sans-serif`;
+    props['googleFont'] = typFont.value;
   }
-
-  function onPlacingClick(e) {
-    if (ps(e.target)) return; // ignore clicks inside our panel
-    e.preventDefault(); e.stopPropagation();
-    if (!pendingAsset || !placingEl) return;
-
-    if (e.shiftKey || e.altKey) {
-      // #6: Better insertion targeting
-      const target = e.target;
-      if (target.tagName.toLowerCase() === 'img') {
-        const prevSrc = target.getAttribute('src');
-        target.src = pendingAsset.src;
-        rec(target, { src: pendingAsset.src }, { src: prevSrc || '' });
-        toast('🖼️ Image replaced!');
-      } else {
-        // Option to insert INSIDE clicked container if Alt is held
-        if (e.altKey) {
-           placeAsset(pendingAsset, 0, 0, 120, 120, target);
-           toast('✦ Placed inside ' + target.tagName.toLowerCase());
+  // Snapshot BEFORE previewTypo applies styles
+  const prevProps = {};
+  Object.keys(props).forEach(p => {
+    const camel = p.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+    prevProps[p] = el.style[camel] || '';
+  });
+  previewTypo(el);
+  rec(el, props, prevProps);
+  toast('📝 Typography applied!');
+};
+
+// ══════════════════════════════════════════
+// ASSETS
+// ══════════════════════════════════════════
+const astDrop = document.getElementById('__ast_drop__');
+const astFile = document.getElementById('__ast_file__');
+const astList = document.getElementById('__ast_list__');
+const astHint = document.getElementById('__ast_hint__');
+const astStore = []; // { id, name, src, url }
+let pendingAsset = null; // asset waiting to be placed
+let placingEl = null; // the ghost element following cursor
+let astDragEl = null; // placed asset being moved
+let astDragSX, astDragSY, astDragOL, astDragOT;
+
+// Upload via click or drop
+astDrop.onclick = () => astFile.click();
+astFile.onchange = e => loadAssets(e.target.files);
+astDrop.ondragover = e => { e.preventDefault(); astDrop.style.borderColor = '#7fff6e'; };
+astDrop.ondragleave = () => { astDrop.style.borderColor = ''; };
+astDrop.ondrop = e => {
+  e.preventDefault(); astDrop.style.borderColor = '';
+  loadAssets(e.dataTransfer.files);
+};
+
+function loadAssets(files) {
+  [...files].forEach(file => {
+    if (!file.type.startsWith('image/')) return;
+    const reader = new FileReader();
+    reader.onload = async ev => {
+      try {
+        const res = await fetch('/draply-upload', {
+          method: 'POST',
+          body: JSON.stringify({ name: file.name, base64: ev.target.result })
+        });
+        const data = await res.json();
+        if (data.ok) {
+          const asset = { id: Date.now() + Math.random(), name: file.name, src: data.url };
+          astStore.push(asset);
+          addThumb(asset);
+          astHint.style.display = 'block';
+          toast('🖼️ ' + file.name + ' loaded');
         } else {
-           const cs = getComputedStyle(target);
-           const prevBg = cs.backgroundImage;
-           target.style.backgroundImage = `url('${pendingAsset.src}')`;
-           target.style.backgroundSize = 'cover';
-           rec(target, { backgroundImage: `url('${pendingAsset.src}')`, backgroundSize: 'cover' }, { backgroundImage: prevBg });
-           toast('🖼️ Background set!');
+          toast('⚠ Upload failed');
         }
+      } catch (e) {
+        toast('⚠ Upload failed');
       }
+    };
+    reader.readAsDataURL(file);
+  });
+}
+
+function addThumb(asset) {
+  const img = document.createElement('img');
+  img.className = 'ps-ast-thumb';
+  img.src = asset.src;
+  img.title = asset.name;
+  img.dataset.assetId = asset.id;
+  img.onclick = () => {
+    // Deselect all thumbs
+    document.querySelectorAll('.ps-ast-thumb').forEach(t => t.classList.remove('active'));
+    img.classList.add('active');
+    startPlacing(asset);
+  };
+  astList.appendChild(img);
+}
+
+// Start placing: attach ghost image to cursor
+function startPlacing(asset) {
+  cancelPlacing();
+  pendingAsset = asset;
+
+  // Create ghost
+  placingEl = document.createElement('div');
+  placingEl.className = 'ps-asset-placed placing';
+  placingEl.style.cssText = 'width:120px;height:120px;pointer-events:none;opacity:.75;';
+  placingEl.innerHTML = `<img src="${asset.src}" draggable="false">`;
+  document.body.appendChild(placingEl);
+
+  toast('Click anywhere on page to place');
+  document.addEventListener('mousemove', onPlacingMove);
+  document.addEventListener('click', onPlacingClick, true);
+  document.addEventListener('keydown', onPlacingCancel);
+}
+
+function onPlacingMove(e) {
+  if (!placingEl) return;
+  placingEl.style.left = (e.clientX - 60) + 'px';
+  placingEl.style.top = (e.clientY - 60) + 'px';
+}
+
+function onPlacingClick(e) {
+  if (ps(e.target)) return; // ignore clicks inside our panel
+  e.preventDefault(); e.stopPropagation();
+  if (!pendingAsset || !placingEl) return;
+
+  if (e.shiftKey || e.altKey) {
+    // #6: Better insertion targeting
+    const target = e.target;
+    if (target.tagName.toLowerCase() === 'img') {
+      const prevSrc = target.getAttribute('src');
+      target.src = pendingAsset.src;
+      rec(target, { src: pendingAsset.src }, { src: prevSrc || '' });
+      toast('🖼️ Image replaced!');
     } else {
-      // PLACE mode (standard)
-      const x = e.clientX - 60;
-      const y = e.clientY - 60;
-      placeAsset(pendingAsset, x, y, 120, 120);
+      // Option to insert INSIDE clicked container if Alt is held
+      if (e.altKey) {
+        placeAsset(pendingAsset, 0, 0, 120, 120, target);
+        toast('✦ Placed inside ' + target.tagName.toLowerCase());
+      } else {
+        const cs = getComputedStyle(target);
+        const prevBg = cs.backgroundImage;
+        target.style.backgroundImage = `url('${pendingAsset.src}')`;
+        target.style.backgroundSize = 'cover';
+        rec(target, { backgroundImage: `url('${pendingAsset.src}')`, backgroundSize: 'cover' }, { backgroundImage: prevBg });
+        toast('🖼️ Background set!');
+      }
     }
-    cancelPlacing();
-  }
+  } else {
+    // PLACE mode (standard)
+    const x = e.clientX - 60;
+    const y = e.clientY - 60;
+    placeAsset(pendingAsset, x, y, 120, 120);
   }
+  cancelPlacing();
+}
+
+function onPlacingCancel(e) {
+  if (e.key === 'Escape') cancelPlacing();
+}
+
+function cancelPlacing() {
+  if (placingEl) { placingEl.remove(); placingEl = null; }
+  pendingAsset = null;
+  document.querySelectorAll('.ps-ast-thumb').forEach(t => t.classList.remove('active'));
+  document.removeEventListener('mousemove', onPlacingMove);
+  document.removeEventListener('click', onPlacingClick, true);
+  document.removeEventListener('keydown', onPlacingCancel);
+}
+
+// #6: Place asset permanently on page (optionally inside a parent)
+function placeAsset(asset, x, y, w, h, parent = document.body) {
+  const wrap = document.createElement('div');
+  wrap.className = 'ps-asset-placed';
+  const uid = 'ps-asset-' + Date.now();
+  wrap.id = uid;
+
+  // If we have a specific parent, use relative positioning if needed
+  const posType = parent === document.body ? 'fixed' : 'absolute';
+  wrap.style.cssText = `position:${posType};left:${Math.round(x)}px;top:${Math.round(y)}px;width:${w}px;height:${h}px;z-index:1;`;
+  wrap.innerHTML = `<img src="${asset.src}" draggable="false" alt="${asset.name}">`;
+  parent.appendChild(wrap);
+
+
+  // Click to select this placed asset (for z-index control)
+  wrap.addEventListener('click', e => {
+    if (ps(e.target)) return;
+    selectPlaced(wrap);
+  });
 
-  function onPlacingCancel(e) {
-    if (e.key === 'Escape') cancelPlacing();
-  }
-
-  function cancelPlacing() {
-    if (placingEl) { placingEl.remove(); placingEl = null; }
-    pendingAsset = null;
-    document.querySelectorAll('.ps-ast-thumb').forEach(t => t.classList.remove('active'));
-    document.removeEventListener('mousemove', onPlacingMove);
-    document.removeEventListener('click', onPlacingClick, true);
-    document.removeEventListener('keydown', onPlacingCancel);
-  }
-
-  // #6: Place asset permanently on page (optionally inside a parent)
-  function placeAsset(asset, x, y, w, h, parent = document.body) {
-    const wrap = document.createElement('div');
-    wrap.className = 'ps-asset-placed';
-    const uid = 'ps-asset-' + Date.now();
-    wrap.id = uid;
-    
-    // If we have a specific parent, use relative positioning if needed
-    const posType = parent === document.body ? 'fixed' : 'absolute';
-    wrap.style.cssText = `position:${posType};left:${Math.round(x)}px;top:${Math.round(y)}px;width:${w}px;height:${h}px;z-index:1;`;
-    wrap.innerHTML = `<img src="${asset.src}" draggable="false" alt="${asset.name}">`;
-    parent.appendChild(wrap);
-
-
-    // Click to select this placed asset (for z-index control)
-    wrap.addEventListener('click', e => {
-      if (ps(e.target)) return;
-      selectPlaced(wrap);
-    });
-
-    // Make placed asset draggable
-    wrap.addEventListener('mousedown', e => {
-      if (ps(e.target)) return;
-      e.preventDefault();
-      selectPlaced(wrap);
-      astDragEl = wrap;
-      astDragSX = e.clientX; astDragSY = e.clientY;
-      astDragOL = parseFloat(wrap.style.left) || 0;
-      astDragOT = parseFloat(wrap.style.top) || 0;
-      wrap.style.cursor = 'grabbing';
-      state.dragging = true;
-    });
-
-    rec(wrap, {
-      src: asset.src,
-      left: Math.round(x) + 'px',
-      top: Math.round(y) + 'px',
-      width: w + 'px',
-      height: h + 'px',
-      'z-index': '1',
-    }, null, true); // true = isCreate
-
-    toast('✦ Placed — drag to reposition');
+  // Make placed asset draggable
+  wrap.addEventListener('mousedown', e => {
+    if (ps(e.target)) return;
+    e.preventDefault();
     selectPlaced(wrap);
-    return wrap;
-  }
+    astDragEl = wrap;
+    astDragSX = e.clientX; astDragSY = e.clientY;
+    astDragOL = parseFloat(wrap.style.left) || 0;
+    astDragOT = parseFloat(wrap.style.top) || 0;
+    wrap.style.cursor = 'grabbing';
+    state.dragging = true;
+  });
 
-  // Track selected placed asset for z-index controls
-  let selectedPlaced = null;
-  const zCtrl = document.getElementById('__ast_zctrl__');
-  const zVal = document.getElementById('__z_val__');
-  const zFront = document.getElementById('__z_front__');
-  const zBack = document.getElementById('__z_back__');
-  const zSet = document.getElementById('__z_set__');
-
-  function selectPlaced(wrap) {
-    // Deselect previous
-    if (selectedPlaced) selectedPlaced.style.outline = '';
-    selectedPlaced = wrap;
-    wrap.style.outline = '2px solid #7fff6e';
-    zVal.value = parseInt(wrap.style.zIndex) || 1;
-    zCtrl.style.display = 'block';
+  rec(wrap, {
+    src: asset.src,
+    left: Math.round(x) + 'px',
+    top: Math.round(y) + 'px',
+    width: w + 'px',
+    height: h + 'px',
+    'z-index': '1',
+  }, null, true); // true = isCreate
+
+  toast('✦ Placed — drag to reposition');
+  selectPlaced(wrap);
+  return wrap;
+}
+
+// Track selected placed asset for z-index controls
+let selectedPlaced = null;
+const zCtrl = document.getElementById('__ast_zctrl__');
+const zVal = document.getElementById('__z_val__');
+const zFront = document.getElementById('__z_front__');
+const zBack = document.getElementById('__z_back__');
+const zSet = document.getElementById('__z_set__');
+
+function selectPlaced(wrap) {
+  // Deselect previous
+  if (selectedPlaced) selectedPlaced.style.outline = '';
+  selectedPlaced = wrap;
+  wrap.style.outline = '2px solid #7fff6e';
+  zVal.value = parseInt(wrap.style.zIndex) || 1;
+  zCtrl.style.display = 'block';
+}
+
+zFront.onclick = () => {
+  if (!selectedPlaced) return;
+  // Find max z-index of all placed assets
+  const max = Math.max(0, ...[...document.querySelectorAll('.ps-asset-placed')].map(el => parseInt(el.style.zIndex) || 0));
+  const nz = max + 1;
+  selectedPlaced.style.zIndex = nz;
+  zVal.value = nz;
+  rec(selectedPlaced, { 'z-index': String(nz) });
+  toast('▲ Moved to front (z:' + nz + ')');
+};
+
+zBack.onclick = () => {
+  if (!selectedPlaced) return;
+  const min = Math.min(0, ...[...document.querySelectorAll('.ps-asset-placed')].map(el => parseInt(el.style.zIndex) || 0));
+  const nz = min - 1;
+  selectedPlaced.style.zIndex = nz;
+  zVal.value = nz;
+  rec(selectedPlaced, { 'z-index': String(nz) });
+  toast('▼ Moved to back (z:' + nz + ')');
+};
+
+// #12: LAYERS PANEL LOGIC
+function updateLayers() {
+  const list = document.getElementById('__lay_list__');
+  list.innerHTML = '';
+
+  // Find interesting elements (headers, sections, divs with classes, images)
+  const items = document.querySelectorAll('body > *:not(#__ps__), section *, header *, .container *');
+  const filtered = [...items].filter(el => {
+    if (ps(el)) return false;
+    return el.tagName !== 'SCRIPT' && el.tagName !== 'STYLE' && (el.children.length === 0 || el.id || el.className);
+  }).slice(0, 50); // limit for performance
+
+  if (!filtered.length) {
+    list.innerHTML = '<div style="color:#444;font-size:10px;text-align:center;padding:10px">No elements found</div>';
+    return;
   }
 
-  zFront.onclick = () => {
-    if (!selectedPlaced) return;
-    // Find max z-index of all placed assets
-    const max = Math.max(0, ...[...document.querySelectorAll('.ps-asset-placed')].map(el => parseInt(el.style.zIndex) || 0));
-    const nz = max + 1;
-    selectedPlaced.style.zIndex = nz;
-    zVal.value = nz;
-    rec(selectedPlaced, { 'z-index': String(nz) });
-    toast('▲ Moved to front (z:' + nz + ')');
-  };
-
-  zBack.onclick = () => {
-    if (!selectedPlaced) return;
-    const min = Math.min(0, ...[...document.querySelectorAll('.ps-asset-placed')].map(el => parseInt(el.style.zIndex) || 0));
-    const nz = min - 1;
-    selectedPlaced.style.zIndex = nz;
-    zVal.value = nz;
-    rec(selectedPlaced, { 'z-index': String(nz) });
-    toast('▼ Moved to back (z:' + nz + ')');
-  };
-
-  // #12: LAYERS PANEL LOGIC
-  function updateLayers() {
-    const list = document.getElementById('__lay_list__');
-    list.innerHTML = '';
-    
-    // Find interesting elements (headers, sections, divs with classes, images)
-    const items = document.querySelectorAll('body > *:not(#__ps__), section *, header *, .container *');
-    const filtered = [...items].filter(el => {
-       if (ps(el)) return false;
-       return el.tagName !== 'SCRIPT' && el.tagName !== 'STYLE' && (el.children.length === 0 || el.id || el.className);
-    }).slice(0, 50); // limit for performance
-    
-    if (!filtered.length) {
-       list.innerHTML = '<div style="color:#444;font-size:10px;text-align:center;padding:10px">No elements found</div>';
-       return;
+  filtered.forEach(el => {
+    const row = document.createElement('div');
+    row.style.cssText = 'padding:6px 8px;border-radius:4px;background:#1a1a2a;border:1px solid #2a2a3a;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:10px;color:#8080a8';
+    if (state.selectedEl === el) {
+      row.style.borderColor = '#7fff6e';
+      row.style.background = 'rgba(127,255,110,0.1)';
+      row.style.color = '#7fff6e';
     }
-    
-    filtered.forEach(el => {
-       const row = document.createElement('div');
-       row.style.cssText = 'padding:6px 8px;border-radius:4px;background:#1a1a2a;border:1px solid #2a2a3a;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:10px;color:#8080a8';
-       if (state.selectedEl === el) {
-          row.style.borderColor = '#7fff6e';
-          row.style.background = 'rgba(127,255,110,0.1)';
-          row.style.color = '#7fff6e';
-       }
-       
-       const icon = el.tagName === 'IMG' ? '🖼️' : el.tagName.match(/H[1-6]/) ? 'Tt' : '📦';
-       const name = el.tagName.toLowerCase() + (el.id ? '#' + el.id : el.className ? '.' + el.className.split(' ')[0] : '');
-       
-       row.innerHTML = `<span>${icon}</span> <span style="flex:1;overflow:hidden;text-overflow:ellipsis">${name}</span>`;
-       row.onclick = () => {
-          select(el);
-          updateLayers();
-       };
-       list.appendChild(row);
-    });
-  }
-
-  zSet.onclick = () => {
-    if (!selectedPlaced) return;
-    const nz = parseInt(zVal.value) || 0;
-    selectedPlaced.style.zIndex = nz;
-    rec(selectedPlaced, { 'z-index': String(nz) });
-    toast('z-index set to ' + nz);
-  };
-
-  zVal.onkeydown = e => { if (e.key === 'Enter') zSet.click(); };
-
-  // Drag placed assets
-  document.addEventListener('mousemove', e => {
-    if (!astDragEl || !state.dragging) return;
-    const dx = e.clientX - astDragSX, dy = e.clientY - astDragSY;
-    astDragEl.style.left = (astDragOL + dx) + 'px';
-    astDragEl.style.top = (astDragOT + dy) + 'px';
-    tip.textContent = `x:${Math.round(astDragOL + dx)}  y:${Math.round(astDragOT + dy)}`;
-    tip.style.left = (e.clientX + 14) + 'px'; tip.style.top = (e.clientY - 28) + 'px';
-    tip.classList.add('v');
-  });
 
-  document.addEventListener('mouseup', () => {
-    if (!astDragEl) return;
-    tip.classList.remove('v');
-    const cs = getComputedStyle(astDragEl);
-    const newLeft = Math.round(parseFloat(cs.left)) + 'px';
-    const newTop = Math.round(parseFloat(cs.top)) + 'px';
-    if (newLeft !== (astDragOL + 'px') || newTop !== (astDragOT + 'px')) {
-      rec(astDragEl, { left: newLeft, top: newTop });
-    }
-    astDragEl.style.cursor = 'grab';
-    astDragEl = null;
-  });
+    const icon = el.tagName === 'IMG' ? '🖼️' : el.tagName.match(/H[1-6]/) ? 'Tt' : '📦';
+    const name = el.tagName.toLowerCase() + (el.id ? '#' + el.id : el.className ? '.' + el.className.split(' ')[0] : '');
 
-  // ══════════════════════════════════════════
-  // RECORD + SAVE
-  // ══════════════════════════════════════════
-  // Full history — every individual action
-  const history = [];
-
-  function rec(el, props, prevPropsOverride, isCreate = false) {
-    const selector = el.dataset.pixelshiftId ? null : gsel(el);
-    const key = el.dataset.pixelshiftId || selector;
-
-    // Use provided prevProps if given (snapshot taken before style was applied),
-    // otherwise snapshot current inline values (for tools like Colors/Typography that call rec before apply)
-    const prevProps = prevPropsOverride || {};
-    if (!prevPropsOverride) {
-      Object.keys(props).forEach(p => {
-        const camel = p.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
-        prevProps[p] = el.style[camel] || '';
+    row.innerHTML = `<span>${icon}</span> <span style="flex:1;overflow:hidden;text-overflow:ellipsis">${name}</span>`;
+    row.onclick = () => {
+      // Select element (inline logic — no separate select() function)
+      document.querySelectorAll('.__ps__, .__ps_multi__').forEach(el2 => {
+        el2.classList.remove('__ps__', '__ps_multi__');
       });
-    }
+      state.selectedEls = [el];
+      state.selectedEl = el;
+      el.classList.add('__ps__');
+      if (state.tool === 'mov') placeHdl(el);
+      if (state.tool === 'rsz') placeRH(el);
+      if (state.tool === 'clr') populateColors(el);
+      if (state.tool === 'typ') populateTypo(el);
+      updateLayers();
+    };
+    list.appendChild(row);
+  });
+}
+
+zSet.onclick = () => {
+  if (!selectedPlaced) return;
+  const nz = parseInt(zVal.value) || 0;
+  selectedPlaced.style.zIndex = nz;
+  rec(selectedPlaced, { 'z-index': String(nz) });
+  toast('z-index set to ' + nz);
+};
+
+zVal.onkeydown = e => { if (e.key === 'Enter') zSet.click(); };
+
+// Drag placed assets
+document.addEventListener('mousemove', e => {
+  if (!astDragEl || !state.dragging) return;
+  const dx = e.clientX - astDragSX, dy = e.clientY - astDragSY;
+  astDragEl.style.left = (astDragOL + dx) + 'px';
+  astDragEl.style.top = (astDragOT + dy) + 'px';
+  tip.textContent = `x:${Math.round(astDragOL + dx)}  y:${Math.round(astDragOT + dy)}`;
+  tip.style.left = (e.clientX + 14) + 'px'; tip.style.top = (e.clientY - 28) + 'px';
+  tip.classList.add('v');
+});
+
+document.addEventListener('mouseup', () => {
+  if (!astDragEl) return;
+  tip.classList.remove('v');
+  const cs = getComputedStyle(astDragEl);
+  const newLeft = Math.round(parseFloat(cs.left)) + 'px';
+  const newTop = Math.round(parseFloat(cs.top)) + 'px';
+  if (newLeft !== (astDragOL + 'px') || newTop !== (astDragOT + 'px')) {
+    rec(astDragEl, { left: newLeft, top: newTop });
+  }
+  astDragEl.style.cursor = 'grab';
+  astDragEl = null;
+});
+
+// ══════════════════════════════════════════
+// RECORD + SAVE
+// ══════════════════════════════════════════
+// Full history — every individual action
+const history = [];
+
+function rec(el, props, prevPropsOverride, isCreate = false) {
+  const selector = el.dataset.pixelshiftId ? null : gsel(el);
+  const key = el.dataset.pixelshiftId || selector;
+
+  // Use provided prevProps if given (snapshot taken before style was applied),
+  // otherwise snapshot current inline values (for tools like Colors/Typography that call rec before apply)
+  const prevProps = prevPropsOverride || {};
+  if (!prevPropsOverride) {
+    Object.keys(props).forEach(p => {
+      const camel = p.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+      prevProps[p] = el.style[camel] || '';
+    });
+  }
 
-    // Extract exact file from React Fiber if available
-    function getReactSource(element) {
-      for (const key in element) {
-        if (key.startsWith('__reactFiber$')) {
-          let fiber = element[key];
-          while (fiber) {
-            if (fiber._debugSource && fiber._debugSource.fileName) return fiber._debugSource.fileName;
-            fiber = fiber.return;
-          }
+  // Extract exact file from React Fiber if available
+  function getReactSource(element) {
+    for (const key in element) {
+      if (key.startsWith('__reactFiber$')) {
+        let fiber = element[key];
+        while (fiber) {
+          if (fiber._debugSource && fiber._debugSource.fileName) return fiber._debugSource.fileName;
+          fiber = fiber.return;
         }
       }
-      return null;
     }
+    return null;
+  }
 
-    // Merge into state.changes (for save/apply)
-    const ch = {
-      type: isCreate ? 'create' : (el.dataset.pixelshiftId ? 'inline' : 'css'),
-      isCreate,
-      pixelshiftId: el.dataset.pixelshiftId || null,
-      selector,
-      exactFile: getReactSource(el) || window.location.pathname.replace(/^\//, '') || null, // fallback for vanilla HTML (#7)
-      file: el.dataset.pixelshiftFile || null,
-      props,
-      tagName: el.tagName.toLowerCase(),
-      outerHTML: el.outerHTML // Send the whole element for 'create' actions
-    };
-    const i = state.changes.findIndex(c => (c.pixelshiftId || c.selector) === key);
-    if (i >= 0) Object.assign(state.changes[i].props, props); else state.changes.push(ch);
+  // Merge into state.changes (for save/apply)
+  const ch = {
+    type: isCreate ? 'create' : (el.dataset.pixelshiftId ? 'inline' : 'css'),
+    isCreate,
+    pixelshiftId: el.dataset.pixelshiftId || null,
+    selector,
+    exactFile: getReactSource(el) || window.location.pathname.replace(/^\//, '') || null, // fallback for vanilla HTML (#7)
+    file: el.dataset.pixelshiftFile || null,
+    props,
+    tagName: el.tagName.toLowerCase(),
+    outerHTML: el.outerHTML // Send the whole element for 'create' actions
+  };
+  const i = state.changes.findIndex(c => (c.pixelshiftId || c.selector) === key);
+  if (i >= 0) Object.assign(state.changes[i].props, props); else state.changes.push(ch);
 
-    // Deep check: only record if at least one property actually changed
-    let changed = isCreate;
-    if (!isCreate) {
-      for (const p in props) {
-        if (String(props[p]) !== String(prevProps[p])) { changed = true; break; }
-      }
+  // Deep check: only record if at least one property actually changed
+  let changed = isCreate;
+  if (!isCreate) {
+    for (const p in props) {
+      if (String(props[p]) !== String(prevProps[p])) { changed = true; break; }
     }
-    if (!changed) return;
-
-    // Push to history
-    const hid = Date.now() + Math.random();
-    history.push({ hid, el, props, prevProps, selector: key, isCreate });
-
-    updateUnsUI();
   }
-
-  function updateUnsUI() {
-    const n = state.changes.length;
-    sv.disabled = n === 0; nb.textContent = history.length;
-    uns.style.display = history.length ? 'flex' : 'none';
-
-    // Rebuild history list (newest first)
-    unsList.innerHTML = '';
-    [...history].reverse().forEach(h => {
-      const propStr = Object.entries(h.props).map(([k, v]) => `${k}: ${v}`).join(', ');
-      const row = document.createElement('div');
-      row.style.cssText = 'display:flex;align-items:flex-start;gap:6px;background:#0d0d1a;border:1px solid #1e1e3a;border-radius:5px;padding:6px 8px;font-size:9px;';
-      row.innerHTML = `
+  if (!changed) return;
+
+  // Push to history
+  const hid = Date.now() + Math.random();
+  history.push({ hid, el, props, prevProps, selector: key, isCreate });
+
+  updateUnsUI();
+}
+
+function updateUnsUI() {
+  const n = state.changes.length;
+  sv.disabled = n === 0; nb.textContent = history.length;
+  uns.style.display = history.length ? 'flex' : 'none';
+
+  // Rebuild history list (newest first)
+  unsList.innerHTML = '';
+  [...history].reverse().forEach(h => {
+    const propStr = Object.entries(h.props).map(([k, v]) => `${k}: ${v}`).join(', ');
+    const row = document.createElement('div');
+    row.style.cssText = 'display:flex;align-items:flex-start;gap:6px;background:#0d0d1a;border:1px solid #1e1e3a;border-radius:5px;padding:6px 8px;font-size:9px;';
+    row.innerHTML = `
                         <div style="flex:1;overflow:hidden">
                             <div style="color:#7fff6e;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${h.selector || 'placed element'}</div>
                             <div style="color:#555577;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${propStr}</div>
                         </div>
                         <button data-hid="${h.hid}" style="background:none;border:1px solid #2a2a44;color:#555577;border-radius:3px;padding:2px 6px;font-size:9px;cursor:pointer;white-space:nowrap;flex-shrink:0">↩ revert</button>
                     `;
-      row.querySelector('button').onclick = () => revertChange(h);
-      unsList.appendChild(row);
+    row.querySelector('button').onclick = () => revertChange(h);
+    unsList.appendChild(row);
+  });
+}
+
+function revertChange(h) {
+  if (h.isCreate) {
+    h.el.remove();
+  } else {
+    // Re-apply previous inline values
+    Object.entries(h.prevProps).forEach(([prop, val]) => {
+      const camel = prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+      h.el.style[camel] = val;
     });
+    // Also handle text/html
+    if (h.prevProps.innerHTML !== undefined) h.el.innerHTML = h.prevProps.innerHTML;
+    if (h.prevProps.innerText !== undefined) h.el.innerText = h.prevProps.innerText;
   }
-
-  function revertChange(h) {
-    if (h.isCreate) {
-       h.el.remove();
+  // Remove from history
+  const idx = history.findIndex(x => x.hid === h.hid);
+  if (idx >= 0) history.splice(idx, 1);
+  // Rebuild state.changes — preserve all original fields (#1, #2)
+  state.changes = [];
+  history.forEach(x => {
+    const key = x.selector;
+    const i = state.changes.findIndex(c => (c.pixelshiftId || c.selector) === key);
+    if (i >= 0) {
+      Object.assign(state.changes[i].props, x.props);
     } else {
-      // Re-apply previous inline values
-      Object.entries(h.prevProps).forEach(([prop, val]) => {
-        const camel = prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
-        h.el.style[camel] = val;
+      state.changes.push({
+        type: x.isCreate ? 'create' : 'css',
+        isCreate: x.isCreate || false,
+        selector: key,
+        props: { ...x.props },
+        outerHTML: x.isCreate && x.el ? x.el.outerHTML : undefined,
+        tagName: x.el ? x.el.tagName?.toLowerCase() : undefined
       });
-      // Also handle text/html
-      if (h.prevProps.innerHTML !== undefined) h.el.innerHTML = h.prevProps.innerHTML;
-      if (h.prevProps.innerText !== undefined) h.el.innerText = h.prevProps.innerText;
     }
-    // Remove from history
-    const idx = history.findIndex(x => x.hid === h.hid);
-    if (idx >= 0) history.splice(idx, 1);
-    // Rebuild state.changes — preserve all original fields (#1, #2)
-    state.changes = [];
-    history.forEach(x => {
-      const key = x.selector;
-      const i = state.changes.findIndex(c => (c.pixelshiftId || c.selector) === key);
-      if (i >= 0) {
-        Object.assign(state.changes[i].props, x.props);
-      } else {
-        state.changes.push({
-          type: x.isCreate ? 'create' : 'css',
-          isCreate: x.isCreate || false,
-          selector: key,
-          props: { ...x.props },
-          outerHTML: x.isCreate && x.el ? x.el.outerHTML : undefined,
-          tagName: x.el ? x.el.tagName?.toLowerCase() : undefined
-        });
-      }
-    });
-    updateUnsUI();
-    toast('↩ Reverted');
+  });
+  updateUnsUI();
+  toast('↩ Reverted');
+}
+
+sv.addEventListener('click', async () => {
+  // Check key config status
+  let hasKey = false;
+  let cfgProvider = 'groq';
+  try {
+    const cfgRes = await fetch('/draply-config');
+    const cfg = await cfgRes.json();
+    hasKey = cfg.hasKey;
+    cfgProvider = cfg.provider || 'groq';
+  } catch (e) { }
+
+  if (!hasKey) {
+    // Ask for provider first (#8)
+    const provider = prompt('Draply AI Save: Choose provider (groq / openai / anthropic / ollama):', 'groq');
+    if (!provider) { toast('Save aborted'); return; }
+    const key = provider === 'ollama' ? 'local' : prompt(`Enter your ${provider.toUpperCase()} API key:`);
+    if (key) {
+      sv.disabled = true; sv.textContent = 'Validating...';
+      try {
+        const vRes = await fetch('/draply-validate-key', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ apiKey: key.trim(), provider: provider.trim() }) });
+        const vData = await vRes.json();
+        if (!vData.valid && provider !== 'ollama') {
+          toast('⚠ Invalid API key'); sv.disabled = false; sv.textContent = 'Save'; return;
+        }
+      } catch { /* allow through if validation endpoint unavailable */ }
+      await fetch('/draply-config', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ apiKey: key.trim(), provider: provider.trim() }) });
+      sv.disabled = false; sv.textContent = 'Save';
+    } else {
+      toast('Save aborted: API Key required');
+      return;
+    }
   }
 
-  sv.addEventListener('click', async () => {
-    // Check key config status
-    let hasKey = false;
-    let cfgProvider = 'groq';
-    try {
-       const cfgRes = await fetch('/draply-config');
-       const cfg = await cfgRes.json();
-       hasKey = cfg.hasKey;
-       cfgProvider = cfg.provider || 'groq';
-    } catch (e) {}
-
-    if (!hasKey) {
-       // Ask for provider first (#8)
-       const provider = prompt('Draply AI Save: Choose provider (groq / openai / anthropic / ollama):', 'groq');
-       if (!provider) { toast('Save aborted'); return; }
-       const key = provider === 'ollama' ? 'local' : prompt(`Enter your ${provider.toUpperCase()} API key:`);
-       if (key) {
-         sv.disabled = true; sv.textContent = 'Validating...';
-         try {
-           const vRes = await fetch('/draply-validate-key', { method: 'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ apiKey: key.trim(), provider: provider.trim() }) });
-           const vData = await vRes.json();
-           if (!vData.valid && provider !== 'ollama') {
-             toast('⚠ Invalid API key'); sv.disabled = false; sv.textContent = 'Save'; return;
-           }
-         } catch { /* allow through if validation endpoint unavailable */ }
-         await fetch('/draply-config', { method: 'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ apiKey: key.trim(), provider: provider.trim() }) });
-         sv.disabled = false; sv.textContent = 'Save';
-       } else {
-         toast('Save aborted: API Key required');
-         return;
-       }
-    }
+  // Progress indicator with animation (#9)
+  sv.disabled = true;
+  sv.textContent = '';
+  sv.innerHTML = '<span style="display:inline-flex;align-items:center;gap:4px"><span style="animation:spin 1s linear infinite;display:inline-block">@</span> Applying...</span>';
+  // Add spin keyframe if not exists
+  if (!document.getElementById('__ps_spin_style__')) {
+    const spinStyle = document.createElement('style');
+    spinStyle.id = '__ps_spin_style__';
+    spinStyle.textContent = '@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }';
+    document.head.appendChild(spinStyle);
+  }
+  try {
+    const r = await fetch('/draply-ai-apply', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ changes: state.changes })
+    });
+    const d = await r.json();
+    if (d.ok) {
+      const msg = d.fallback ? 'Saved to draply.css (No AI Key)' : `✅ AI Applied ${d.applied || ''}/${d.total || ''} to Source!`;
+      toast(msg);
+    } else toast('⚠ Error: ' + (d.error || 'unknown'));
+  } catch {
+    toast('⚠ Server unreachable');
+  }
 
-    // Progress indicator with animation (#9)
-    sv.disabled = true;
-    sv.textContent = '';
-    sv.innerHTML = '<span style="display:inline-flex;align-items:center;gap:4px"><span style="animation:spin 1s linear infinite;display:inline-block">@</span> Applying...</span>';
-    // Add spin keyframe if not exists
-    if (!document.getElementById('__ps_spin_style__')) {
-      const spinStyle = document.createElement('style');
-      spinStyle.id = '__ps_spin_style__';
-      spinStyle.textContent = '@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }';
-      document.head.appendChild(spinStyle);
-    }
-    try {
-      const r = await fetch('/draply-ai-apply', {
-        method: 'POST', headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ changes: state.changes })
-      });
-      const d = await r.json();
-      if (d.ok) {
-        const msg = d.fallback ? 'Saved to draply.css (No AI Key)' : `✅ AI Applied ${d.applied || ''}/${d.total || ''} to Source!`;
-        toast(msg);
-      } else toast('⚠ Error: ' + (d.error || 'unknown'));
-    } catch {
-      toast('⚠ Server unreachable');
-    }
-    
-    state.changes = []; history.length = 0; 
-    sv.innerHTML = 'Save'; sv.textContent = 'Save';
-    updateUnsUI();
-  });
+  state.changes = []; history.length = 0;
+  sv.innerHTML = 'Save'; sv.textContent = 'Save';
+  updateUnsUI();
+});
 
-  document.getElementById('__uns_clear__').onclick = () => {
-    state.changes = []; history.length = 0; updateUnsUI();
-    toast('🗑 History cleared');
-  };
+document.getElementById('__uns_clear__').onclick = () => {
+  state.changes = []; history.length = 0; updateUnsUI();
+  toast('🗑 History cleared');
+};
 
-  document.getElementById('__uns_save__').onclick = () => sv.click();
+document.getElementById('__uns_save__').onclick = () => sv.click();
 
-  // ══════════════════════════════════════════
-  // KEYBOARD SHORTCUTS (#4, #5, #15)
-  // ══════════════════════════════════════════
-  document.addEventListener('keydown', e => {
-    // Ignore if typing in an input/textarea/contenteditable
-    const tag = e.target.tagName.toLowerCase();
-    if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) return;
+// ══════════════════════════════════════════
+// KEYBOARD SHORTCUTS (#4, #5, #15)
+// ══════════════════════════════════════════
+document.addEventListener('keydown', e => {
+  // Ignore if typing in an input/textarea/contenteditable
+  const tag = e.target.tagName.toLowerCase();
+  if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) return;
 
-    // Ctrl+Z — Undo last change (#4)
-    if ((e.ctrlKey || e.metaKey) && !e.shiftKey && e.key === 'z') {
-      e.preventDefault();
-      if (history.length > 0) {
-        revertChange(history[history.length - 1]);
-      } else {
-        toast('Nothing to undo');
-      }
-      return;
-    }
-
-    // Ctrl+Shift+Z — Redo (not implemented yet, just prevent default)
-    if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'z') {
-      e.preventDefault();
-      toast('Redo not available yet');
-      return;
-    }
-
-    // Delete / Backspace — remove selected element (#5)
-    if (e.key === 'Delete' || e.key === 'Backspace') {
-      if (state.selectedEl && !ps(state.selectedEl)) {
-        e.preventDefault();
-        const el = state.selectedEl;
-        // Record removal in history
-        rec(el, { display: 'none' }, { display: el.style.display || '' });
-        el.style.display = 'none';
-        // Deselect
-        el.classList.remove('__ps__', '__ps_multi__');
-        state.selectedEl = null;
-        state.selectedEls = [];
-        hdl.classList.remove('v');
-        toast('🗑 Element hidden (Delete)');
-      }
-      return;
+  // Ctrl+Z — Undo last change (#4)
+  if ((e.ctrlKey || e.metaKey) && !e.shiftKey && e.key === 'z') {
+    e.preventDefault();
+    if (history.length > 0) {
+      revertChange(history[history.length - 1]);
+    } else {
+      toast('Nothing to undo');
     }
+    return;
+  }
 
-    // Preview mode toggle: P key (#15)
-    if (e.key === 'p' || e.key === 'P') {
-      if (!e.ctrlKey && !e.metaKey) {
-        e.preventDefault();
-        togglePreview();
-      }
-      return;
-    }
-  });
+  // Ctrl+Shift+Z — Redo (not implemented yet, just prevent default)
+  if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'z') {
+    e.preventDefault();
+    toast('Redo not available yet');
+    return;
+  }
 
-  // ══════════════════════════════════════════
-  // PREVIEW MODE (#15)
-  // ══════════════════════════════════════════
-  let previewMode = false;
-  function togglePreview() {
-    previewMode = !previewMode;
-    const psRoot = document.getElementById('__ps__');
-    if (previewMode) {
-      psRoot.style.display = 'none';
-      // Remove all selection highlights
-      document.querySelectorAll('.__ps__, .__ps_multi__, .__ph__').forEach(el => {
-        el.classList.remove('__ps__', '__ps_multi__', '__ph__');
-      });
+  // Delete / Backspace — remove selected element (#5)
+  if (e.key === 'Delete' || e.key === 'Backspace') {
+    if (state.selectedEl && !ps(state.selectedEl)) {
+      e.preventDefault();
+      const el = state.selectedEl;
+      // Record removal in history
+      rec(el, { display: 'none' }, { display: el.style.display || '' });
+      el.style.display = 'none';
+      // Deselect
+      el.classList.remove('__ps__', '__ps_multi__');
+      state.selectedEl = null;
+      state.selectedEls = [];
       hdl.classList.remove('v');
-      Object.values(rhs).forEach(h => h.classList.remove('v'));
-      toast('👁 Preview mode — press P to exit');
-    } else {
-      psRoot.style.display = '';
-      toast('Editor restored');
+      toast('🗑 Element hidden (Delete)');
     }
+    return;
   }
 
-  // ══════════════════════════════════════════
-  // UTILS
-  // ══════════════════════════════════════════
-  function ps(el) { return el && el.closest('#__ps__'); }
-  function gsel(el) {
-    if (el.id) return '#' + el.id;
-    // Build unique path up the DOM
-    const parts = [];
-    let cur = el;
-    while (cur && cur !== document.body && cur !== document.documentElement) {
-      if (cur.id) { parts.unshift('#' + cur.id); break; }
-      const tag = cur.tagName.toLowerCase();
-      const cls = [...cur.classList].filter(c => !c.startsWith('__') && !c.startsWith('ps-')).join('.');
-      const siblings = cur.parentElement
-        ? [...cur.parentElement.children].filter(c => c.tagName === cur.tagName)
-        : [];
-      const idx = siblings.length > 1 ? `:nth-of-type(${siblings.indexOf(cur) + 1})` : '';
-      parts.unshift(cls ? `${tag}.${cls}${idx}` : `${tag}${idx}`);
-      cur = cur.parentElement;
+  // Preview mode toggle: P key (#15)
+  if (e.key === 'p' || e.key === 'P') {
+    if (!e.ctrlKey && !e.metaKey) {
+      e.preventDefault();
+      togglePreview();
     }
-    return parts.join(' > ');
+    return;
+  }
+});
+
+// ══════════════════════════════════════════
+// PREVIEW MODE (#15)
+// ══════════════════════════════════════════
+let previewMode = false;
+function togglePreview() {
+  previewMode = !previewMode;
+  const psRoot = document.getElementById('__ps__');
+  if (previewMode) {
+    psRoot.style.display = 'none';
+    // Remove all selection highlights
+    document.querySelectorAll('.__ps__, .__ps_multi__, .__ph__').forEach(el => {
+      el.classList.remove('__ps__', '__ps_multi__', '__ph__');
+    });
+    hdl.classList.remove('v');
+    Object.values(rhs).forEach(h => h.classList.remove('v'));
+    toast('👁 Preview mode — press P to exit');
+  } else {
+    psRoot.style.display = '';
+    toast('Editor restored');
   }
-  function toast(msg) {
-    tst.textContent = msg; tst.classList.add('v');
-    clearTimeout(tst._t); tst._t = setTimeout(() => tst.classList.remove('v'), 2800);
+}
+
+// ══════════════════════════════════════════
+// UTILS
+// ══════════════════════════════════════════
+function ps(el) { return el && el.closest('#__ps__'); }
+function gsel(el) {
+  if (el.id) return '#' + el.id;
+  // Build unique path up the DOM
+  const parts = [];
+  let cur = el;
+  while (cur && cur !== document.body && cur !== document.documentElement) {
+    if (cur.id) { parts.unshift('#' + cur.id); break; }
+    const tag = cur.tagName.toLowerCase();
+    const cls = [...cur.classList].filter(c => !c.startsWith('__') && !c.startsWith('ps-')).join('.');
+    const siblings = cur.parentElement
+      ? [...cur.parentElement.children].filter(c => c.tagName === cur.tagName)
+      : [];
+    const idx = siblings.length > 1 ? `:nth-of-type(${siblings.indexOf(cur) + 1})` : '';
+    parts.unshift(cls ? `${tag}.${cls}${idx}` : `${tag}${idx}`);
+    cur = cur.parentElement;
   }
-})();
+  return parts.join(' > ');
+}
+function toast(msg) {
+  tst.textContent = msg; tst.classList.add('v');
+  clearTimeout(tst._t); tst._t = setTimeout(() => tst.classList.remove('v'), 2800);
+}
+}) ();