draply-dev 1.5.5 → 1.5.6

package/src/overlay.js

@@ -9,7 +9,7 @@
     dragSX: 0, dragSY: 0, dragOrigL: 0, dragOrigT: 0,
     dragOrigPositions: [], // [{el, origL, origT, prevL, prevT}] for multi-drag
     resizeDir: '', resizeOrigW: 0, resizeOrigH: 0, resizeOrigX: 0, resizeOrigY: 0, resizeOrigL: 0, resizeOrigT: 0,
-    isPro: true, // set to true when user has paid
+    isPro: window.__DRAPLY_PRO__ === true, // set via cli.js injection
     changes: []
   };
 
@@ -201,6 +201,10 @@
       background: #1e1e2e;
       margin: 5px 6px;
     }
+    .pro-font {
+      color: #5cdb4f;
+      font-weight: 700;
+    }
 
     /* ── SUB-PANELS ───────────────────────────────────── */
     .ps-sub {
@@ -612,31 +616,119 @@
         <div class="ps-sec" style="padding:8px 0 4px">Font</div>
         <select class="ps-select" id="__typ_font__" style="width:100%;margin-bottom:6px">
           <option value="">— keep current —</option>
-          <optgroup label="Sans-serif">
+          <optgroup label="Free Sans-Serif">
             <option value="Inter">Inter</option>
             <option value="Roboto">Roboto</option>
+            <option value="Open Sans">Open Sans</option>
+            <option value="Lato">Lato</option>
+            <option value="Montserrat">Montserrat</option>
             <option value="Poppins">Poppins</option>
-            <option value="Manrope">Manrope</option>
-            <option value="DM Sans">DM Sans</option>
-            <option value="Outfit">Outfit</option>
-            <option value="Plus Jakarta Sans">Plus Jakarta Sans</option>
+            <option value="Raleway">Raleway</option>
+            <option value="Nunito">Nunito</option>
+            <option value="Ubuntu">Ubuntu</option>
+            <option value="Rubik">Rubik</option>
+            <option value="Work Sans">Work Sans</option>
+            <option value="Quicksand">Quicksand</option>
+            <option value="Karla">Karla</option>
+            <option value="Josefin Sans">Josefin Sans</option>
+            <option value="Asap">Asap</option>
+            <option value="Hind">Hind</option>
+            <option value="Dosis">Dosis</option>
+            <option value="Cabin">Cabin</option>
+            <option value="Mukta">Mukta</option>
+            <option value="PT Sans">PT Sans</option>
+          </optgroup>
+          <optgroup label="Pro Sans-Serif">
+            <option value="Manrope" class="pro-font">Manrope ✦ PRO</option>
+            <option value="DM Sans" class="pro-font">DM Sans ✦ PRO</option>
+            <option value="Outfit" class="pro-font">Outfit ✦ PRO</option>
+            <option value="Plus Jakarta Sans" class="pro-font">Plus Jakarta Sans ✦ PRO</option>
+            <option value="Sora" class="pro-font">Sora ✦ PRO</option>
+            <option value="Epilogue" class="pro-font">Epilogue ✦ PRO</option>
+            <option value="Lexend" class="pro-font">Lexend ✦ PRO</option>
+            <option value="Urbanist" class="pro-font">Urbanist ✦ PRO</option>
+            <option value="Archivo" class="pro-font">Archivo ✦ PRO</option>
+            <option value="Bricolage Grotesque" class="pro-font">Bricolage Grotesque ✦ PRO</option>
+            <option value="Albert Sans" class="pro-font">Albert Sans ✦ PRO</option>
+            <option value="Schibsted Grotesk" class="pro-font">Schibsted Grotesk ✦ PRO</option>
+            <option value="Figtree" class="pro-font">Figtree ✦ PRO</option>
+            <option value="Hanken Grotesk" class="pro-font">Hanken Grotesk ✦ PRO</option>
+            <option value="Public Sans" class="pro-font">Public Sans ✦ PRO</option>
+            <option value="Be Vietnam Pro" class="pro-font">Be Vietnam Pro ✦ PRO</option>
+            <option value="Sen" class="pro-font">Sen ✦ PRO</option>
+            <option value="Chivo" class="pro-font">Chivo ✦ PRO</option>
+            <option value="Questrial" class="pro-font">Questrial ✦ PRO</option>
+            <option value="Jost" class="pro-font">Jost ✦ PRO</option>
           </optgroup>
-          <optgroup label="Serif">
+          <optgroup label="Free Serif">
             <option value="Playfair Display">Playfair Display</option>
             <option value="Merriweather">Merriweather</option>
             <option value="Lora">Lora</option>
+            <option value="PT Serif">PT Serif</option>
+            <option value="Noto Serif">Noto Serif</option>
+            <option value="Libre Baskerville">Libre Baskerville</option>
+            <option value="Arvo">Arvo</option>
+            <option value="Roboto Slab">Roboto Slab</option>
+            <option value="Bitter">Bitter</option>
+            <option value="Crimson Text">Crimson Text</option>
           </optgroup>
-          <optgroup label="Display / Hero">
-            <option value="Bebas Neue">Bebas Neue</option>
+          <optgroup label="Pro Serif">
+            <option value="EB Garamond" class="pro-font">EB Garamond ✦ PRO</option>
+            <option value="Cormorant" class="pro-font">Cormorant ✦ PRO</option>
+            <option value="Crimson Pro" class="pro-font">Crimson Pro ✦ PRO</option>
+            <option value="Zilla Slab" class="pro-font">Zilla Slab ✦ PRO</option>
+            <option value="Spectral" class="pro-font">Spectral ✦ PRO</option>
+            <option value="Fraunces" class="pro-font">Fraunces ✦ PRO</option>
+            <option value="Literata" class="pro-font">Literata ✦ PRO</option>
+            <option value="Petrona" class="pro-font">Petrona ✦ PRO</option>
+            <option value="Tinos" class="pro-font">Tinos ✦ PRO</option>
+            <option value="Domine" class="pro-font">Domine ✦ PRO</option>
+            <option value="Vesper Libre" class="pro-font">Vesper Libre ✦ PRO</option>
+            <option value="Prata" class="pro-font">Prata ✦ PRO</option>
+            <option value="Alice" class="pro-font">Alice ✦ PRO</option>
+          </optgroup>
+          <optgroup label="Free Display">
             <option value="Oswald">Oswald</option>
-            <option value="Syne">Syne</option>
-            <option value="Space Grotesk">Space Grotesk</option>
-            <option value="Cabinet Grotesk">Cabinet Grotesk</option>
+            <option value="Bebas Neue">Bebas Neue</option>
+            <option value="Righteous">Righteous</option>
+            <option value="Fjalla One">Fjalla One</option>
+            <option value="Lobster">Lobster</option>
+            <option value="Pacifico">Pacifico</option>
+            <option value="Shadows Into Light">Shadows Into Light</option>
+            <option value="Dancing Script">Dancing Script</option>
+            <option value="Caveat">Caveat</option>
+          </optgroup>
+          <optgroup label="Pro Display">
+            <option value="Syne" class="pro-font">Syne ✦ PRO</option>
+            <option value="Space Grotesk" class="pro-font">Space Grotesk ✦ PRO</option>
+            <option value="Anton" class="pro-font">Anton ✦ PRO</option>
+            <option value="Titan One" class="pro-font">Titan One ✦ PRO</option>
+            <option value="Knewave" class="pro-font">Knewave ✦ PRO</option>
+            <option value="Bungee" class="pro-font">Bungee ✦ PRO</option>
+            <option value="Abril Fatface" class="pro-font">Abril Fatface ✦ PRO</option>
+            <option value="Cinzel" class="pro-font">Cinzel ✦ PRO</option>
+            <option value="Permanent Marker" class="pro-font">Permanent Marker ✦ PRO</option>
+            <option value="Alfa Slab One" class="pro-font">Alfa Slab One ✦ PRO</option>
+            <option value="Bangers" class="pro-font">Bangers ✦ PRO</option>
+            <option value="Creepster" class="pro-font">Creepster ✦ PRO</option>
+            <option value="Monoton" class="pro-font">Monoton ✦ PRO</option>
+            <option value="Black Ops One" class="pro-font">Black Ops One ✦ PRO</option>
+            <option value="Faster One" class="pro-font">Faster One ✦ PRO</option>
           </optgroup>
-          <optgroup label="Mono">
+          <optgroup label="Free Mono">
             <option value="Space Mono">Space Mono</option>
-            <option value="JetBrains Mono">JetBrains Mono</option>
             <option value="Fira Code">Fira Code</option>
+            <option value="Roboto Mono">Roboto Mono</option>
+            <option value="Inconsolata">Inconsolata</option>
+            <option value="Source Code Pro">Source Code Pro</option>
+          </optgroup>
+          <optgroup label="Pro Mono">
+            <option value="JetBrains Mono" class="pro-font">JetBrains Mono ✦ PRO</option>
+            <option value="IBM Plex Mono" class="pro-font">IBM Plex Mono ✦ PRO</option>
+            <option value="Ubuntu Mono" class="pro-font">Ubuntu Mono ✦ PRO</option>
+            <option value="PT Mono" class="pro-font">PT Mono ✦ PRO</option>
+            <option value="Anonymous Pro" class="pro-font">Anonymous Pro ✦ PRO</option>
+            <option value="Cousine" class="pro-font">Cousine ✦ PRO</option>
           </optgroup>
         </select>
 
@@ -699,16 +791,15 @@
     <div id="__ps_tst__"></div>
 
     <!-- PAYWALL MODAL -->
-    <div id="__ps_paywall__" style="display:none;position:fixed;inset:0;z-index:2147483645;background:rgba(0,0,0,.82);backdrop-filter:blur(8px);align-items:center;justify-content:center;">
-      <div style="background:linear-gradient(160deg,#0d0d1f 0%,#0a0a16 60%,#0d1a0d 100%);border:1px solid #2a2a4a;border-radius:16px;padding:32px 28px 24px;width:290px;text-align:center;box-shadow:0 24px 80px rgba(0,0,0,.9),0 0 0 1px rgba(127,255,110,.08);position:relative;overflow:hidden;">
-        <div style="position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:160px;height:160px;background:radial-gradient(circle,rgba(127,255,110,.12) 0%,transparent 70%);pointer-events:none"></div>
-        <div style="font-size:30px;margin-bottom:12px;position:relative">🔒</div>
-        <div style="color:#fff;font-size:13px;font-weight:700;margin-bottom:4px;letter-spacing:.8px;position:relative">PRO FEATURE</div>
-        <div id="__pw_tool_name__" style="color:#7fff6e;font-size:18px;font-weight:700;margin-bottom:12px;letter-spacing:.5px;position:relative"></div>
-        <div style="color:#44445a;font-size:10px;line-height:1.6;margin-bottom:20px;position:relative">Inspect, Resize, Colors, Typography and Assets are available in <span style="color:#7fff6e;font-weight:600">Draply Pro</span>.<br>Select and Move are always free.</div>
-        <div style="position:relative;display:flex;flex-direction:column;gap:8px">
-          <a id="__pw_upgrade__" href="https://draply.dev" target="_blank" style="background:linear-gradient(135deg,#7fff6e,#00e5ff);color:#000;border:none;border-radius:8px;padding:11px;font-size:11px;font-weight:800;cursor:pointer;letter-spacing:.6px;text-decoration:none;display:block">GET DRAPLY PRO →</a>
-          <button id="__pw_close__" style="background:none;border:1px solid #1e1e3a;color:#44445a;border-radius:8px;padding:9px;font-size:10px;cursor:pointer;letter-spacing:.3px">Maybe later</button>
+    <div id="__ps_paywall__" style="display:none;position:fixed;inset:0;z-index:2147483645;background:rgba(0,0,0,.82);backdrop-filter:blur(8px);align-items:center;justify-content:center;font-family:system-ui,-apple-system,sans-serif;">
+      <div style="background:#131313;border:1px solid #2a2a3a;border-radius:16px;padding:48px 36px;width:340px;text-align:center;box-shadow:0 24px 80px rgba(0,0,0,.9),0 0 0 1px rgba(92,219,79,.1);position:relative;overflow:hidden;">
+        <div style="position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:200px;height:200px;background:radial-gradient(circle,rgba(92,219,79,.1) 0%,transparent 70%);pointer-events:none"></div>
+        <div style="color:#fff;font-size:13px;font-weight:800;margin-bottom:8px;letter-spacing:1px;position:relative;text-transform:uppercase;">PRO FEATURE</div>
+        <div id="__pw_tool_name__" style="color:#5cdb4f;font-size:24px;font-weight:800;margin-bottom:16px;letter-spacing:.5px;position:relative"></div>
+        <div style="color:#a0a0b8;font-size:13px;line-height:1.6;margin-bottom:32px;position:relative">Inspect, Resize, Colors, Typography and Assets are available in <span style="color:#5cdb4f;font-weight:600">Draply Pro</span>.<br><br>Select and Move are always free.</div>
+        <div style="position:relative;display:flex;flex-direction:column;gap:12px">
+          <a id="__pw_upgrade__" href="http://localhost:3000" target="_blank" style="background:#5cdb4f;color:#131313;border:none;border-radius:10px;padding:14px;font-size:13px;font-weight:800;cursor:pointer;letter-spacing:.6px;text-decoration:none;display:block;">GET DRAPLY PRO →</a>
+          <button id="__pw_close__" style="background:none;border:1px solid #2a2a3a;color:#a0a0b8;border-radius:10px;padding:12px;font-size:12px;cursor:pointer;letter-spacing:.3px;">Maybe later</button>
         </div>
       </div>
     </div>
@@ -772,8 +863,8 @@
 
   Object.entries(toolBtns).forEach(([t, btn]) => btn.onclick = () => setT(t));
 
-  // Freemium: only sel + mov are free
-  const FREE_TOOLS = ['sel', 'mov'];
+  // Freemium: only sel, mov, typ are free
+  const FREE_TOOLS = ['sel', 'mov', 'typ'];
   const TOOL_LABELS = { ins: 'Inspect', rsz: 'Resize', clr: 'Colors', typ: 'Typography', ast: 'Assets' };
   const paywall = document.getElementById('__ps_paywall__');
   const pwToolName = document.getElementById('__pw_tool_name__');
@@ -829,1225 +920,1241 @@
 
   // ── 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;
+    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.add('__ps__');
+        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__');
+        }
       }
+      // Show handle on primary if any selected
+      if (state.selectedEl) placeHdl(state.selectedEl);
+      else hdl.classList.remove('v');
+      return;
     }
-    // Show handle on primary if any selected
-    if (state.selectedEl) placeHdl(state.selectedEl);
-    else hdl.classList.remove('v');
-    return;
+
+    // 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');
   }
 
-  // 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');
-}
-
-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' };
-  });
+  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: Math.round(origL) + 'px', prevT: Math.round(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';
+    state.dragging = true;
   });
-  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.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 });
+  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');
     }
   });
-  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.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;
+  });
+
+  // ══════════════════════════════════════════
+  // 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].style.left = pos[d][0] + 'px';
-    rhs[d].style.top = pos[d][1] + 'px';
-    rhs[d].classList.add('v');
+    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;
+    });
   });
-}
 
-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();
+  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);
-    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;
+    // 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;
   });
-});
-
-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',
+
+  // ══════════════════════════════════════════
+  // 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';
   };
-  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',
+  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';
   };
-  if (newSize.width !== prevProps.width || newSize.height !== prevProps.height || newSize.left !== prevProps.left || newSize.top !== prevProps.top) {
-    rec(rzEl, newSize, prevProps);
+
+  function isTransparent(color) {
+    return !color || color === 'transparent' || color === 'rgba(0, 0, 0, 0)';
   }
-  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;
+
+  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;
+    }
+
+    // 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';
+    }
+
+    // #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 || ''
+    };
+
+    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('');
   }
 
-  // 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';
+  // ══════════════════════════════════════════
+  // 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);
   }
-  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';
+
+  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);
   }
 
-  // #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 || ''
+  // Live preview when font changes
+  typFont.onchange = () => {
+    const selectedOpt = typFont.options[typFont.selectedIndex];
+    if (selectedOpt && selectedOpt.classList.contains('pro-font') && !state.isPro) {
+      showPaywall('Premium Fonts');
+      typFont.value = ''; // Revert to empty or you could store the previous value
+      return;
+    }
+    if (typFont.value) {
+      loadGoogleFont(typFont.value);
+      if (state.selectedEl) previewTypo(state.selectedEl);
+    }
   };
 
-  if (el.namespaceURI === 'http://www.w3.org/2000/svg') {
-    el.style.fill = cpFg.value;
-    el.style.stroke = cpBdTrans.checked ? 'none' : bdVal;
+  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); });
   }
 
-  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';
+  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`;
+    }
   }
-  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!');
-      }
+
+  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',
     };
-    el.addEventListener('blur', finishEdit);
+    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);
+    });
   }
 
-  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 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);
   }
-}
-
-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;
+
+  // 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);
   }
-  // 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');
+
+  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 {
+        // 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 {
-          toast('⚠ Upload failed');
+          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!');
         }
-      } 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 {
-      // 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!');
-      }
+      // PLACE mode (standard)
+      const x = e.clientX - 60;
+      const y = e.clientY - 60;
+      placeAsset(pendingAsset, x, y, 120, 120);
     }
-  } else {
-    // PLACE mode (standard)
-    const x = e.clientX - 60;
-    const y = e.clientY - 60;
-    placeAsset(pendingAsset, x, y, 120, 120);
+    cancelPlacing();
   }
-  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);
-  });
 
-  // Make placed asset draggable
-  wrap.addEventListener('mousedown', e => {
-    if (ps(e.target)) return;
-    e.preventDefault();
+  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');
     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;
-  });
+    return wrap;
+  }
 
-  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;
+  // 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';
   }
 
-  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';
+  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;
     }
 
-    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] : '');
+    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';
+      }
 
-    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 = [];
-const redoHistory = [];
-
-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] || '';
+      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 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);
     });
   }
 
-  // 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;
+  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 !== (Math.round(astDragOL) + 'px') || newTop !== (Math.round(astDragOT) + 'px')) {
+      rec(astDragEl, { left: newLeft, top: newTop }, { left: Math.round(astDragOL) + 'px', top: Math.round(astDragOT) + 'px' });
+    }
+    astDragEl.style.cursor = 'grab';
+    astDragEl = null;
+  });
+
+  // ══════════════════════════════════════════
+  // RECORD + SAVE
+  // ══════════════════════════════════════════
+  // Full history — every individual action
+  const history = [];
+  const redoHistory = [];
+
+  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;
+          }
         }
       }
+      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 parentSel = isCreate && el.parentElement && el.parentElement !== document.body ? gsel(el.parentElement) : null;
+    const ch = {
+      type: isCreate ? 'create' : (el.dataset.pixelshiftId ? 'inline' : 'css'),
+      isCreate,
+      pixelshiftId: el.dataset.pixelshiftId || null,
+      selector,
+      parentSelector: parentSel,
+      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,
+      parent: isCreate ? el.parentElement : null,
+      nextSibling: isCreate ? el.nextElementSibling : null
+    });
+
+    // Clear redo stack on new action
+    redoHistory.length = 0;
+
+    updateUnsUI();
   }
-  if (!changed) return;
-
-  // Push to history
-  const hid = Date.now() + Math.random();
-  history.push({ 
-    hid, el, props, prevProps, selector: key, isCreate,
-    parent: isCreate ? el.parentElement : null,
-    nextSibling: isCreate ? el.nextElementSibling : null
-  });
-  
-  // Clear redo stack on new action
-  redoHistory.length = 0;
-
-  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 = `
+
+  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);
-  });
-}
-
-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;
+      row.querySelector('button').onclick = () => revertChange(h);
+      unsList.appendChild(row);
     });
-    // 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 and add to redo stack
-  const idx = history.findIndex(x => x.hid === h.hid);
-  if (idx >= 0) {
-    redoHistory.push(history[idx]);
-    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);
+
+  function revertChange(h) {
+    if (h.isCreate) {
+      h.el.remove();
     } 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
+      // 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;
     }
-  });
-  updateUnsUI();
-
-  if (state.selectedEl) {
-    const isVisible = document.body.contains(state.selectedEl) && getComputedStyle(state.selectedEl).display !== 'none';
-    if (isVisible) {
-      if (state.tool === 'mov') placeHdl(state.selectedEl);
-      if (state.tool === 'rsz') placeRH(state.selectedEl);
-    } else if (state.selectedEl === h.el) {
-      state.selectedEl.classList.remove('__ps__', '__ps_multi__');
-      state.selectedEl = null;
-      state.selectedEls = [];
-      hdl.classList.remove('v');
-      Object.values(rhs).forEach(rh => rh.classList.remove('v'));
+    // Remove from history and add to redo stack
+    const idx = history.findIndex(x => x.hid === h.hid);
+    if (idx >= 0) {
+      redoHistory.push(history[idx]);
+      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();
+
+    if (state.selectedEl) {
+      const isVisible = document.body.contains(state.selectedEl) && getComputedStyle(state.selectedEl).display !== 'none';
+      if (isVisible) {
+        if (state.tool === 'mov') placeHdl(state.selectedEl);
+        if (state.tool === 'rsz') placeRH(state.selectedEl);
+      } else if (state.selectedEl === h.el) {
+        state.selectedEl.classList.remove('__ps__', '__ps_multi__');
+        state.selectedEl = null;
+        state.selectedEls = [];
+        hdl.classList.remove('v');
+        Object.values(rhs).forEach(rh => rh.classList.remove('v'));
+      }
+    }
+
+    toast('↩ Reverted');
   }
 
-  toast('↩ Reverted');
-}
+  function redoChange() {
+    if (redoHistory.length === 0) {
+      toast('Nothing to redo');
+      return;
+    }
+    const h = redoHistory.pop();
 
-function redoChange() {
-  if (redoHistory.length === 0) {
-    toast('Nothing to redo');
-    return;
-  }
-  const h = redoHistory.pop();
-  
-  if (h.isCreate) {
-    if (h.parent) {
-      if (h.nextSibling) {
-        h.parent.insertBefore(h.el, h.nextSibling);
+    if (h.isCreate) {
+      if (h.parent) {
+        if (h.nextSibling) {
+          h.parent.insertBefore(h.el, h.nextSibling);
+        } else {
+          h.parent.appendChild(h.el);
+        }
       } else {
-        h.parent.appendChild(h.el);
+        document.body.appendChild(h.el);
       }
     } else {
-      document.body.appendChild(h.el);
+      // Re-apply properties
+      Object.entries(h.props).forEach(([prop, val]) => {
+        const camel = prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+        h.el.style[camel] = val;
+      });
+      if (h.props.innerHTML !== undefined) h.el.innerHTML = h.props.innerHTML;
+      if (h.props.innerText !== undefined) h.el.innerText = h.props.innerText;
     }
-  } else {
-    // Re-apply properties
-    Object.entries(h.props).forEach(([prop, val]) => {
-      const camel = prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
-      h.el.style[camel] = val;
+
+    history.push(h);
+
+    // Rebuild state.changes 
+    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
+        });
+      }
     });
-    if (h.props.innerHTML !== undefined) h.el.innerHTML = h.props.innerHTML;
-    if (h.props.innerText !== undefined) h.el.innerText = h.props.innerText;
+
+    updateUnsUI();
+
+    if (state.selectedEl) {
+      const isVisible = document.body.contains(state.selectedEl) && getComputedStyle(state.selectedEl).display !== 'none';
+      if (isVisible) {
+        if (state.tool === 'mov') placeHdl(state.selectedEl);
+        if (state.tool === 'rsz') placeRH(state.selectedEl);
+      } else if (state.selectedEl === h.el) {
+        state.selectedEl.classList.remove('__ps__', '__ps_multi__');
+        state.selectedEl = null;
+        state.selectedEls = [];
+        hdl.classList.remove('v');
+        Object.values(rhs).forEach(rh => rh.classList.remove('v'));
+      }
+    }
+
+    toast('↷ Redone');
   }
-  
-  history.push(h);
 
-  // Rebuild state.changes 
-  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
+  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 / gemini / 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 */ }
+
+        const configPayload = { apiKey: key.trim(), provider: provider.trim() };
+
+        await fetch('/draply-config', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(configPayload) });
+        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');
     }
+
+    state.changes = []; history.length = 0; redoHistory.length = 0;
+    sv.innerHTML = 'Save'; sv.textContent = 'Save';
+    updateUnsUI();
   });
 
-  updateUnsUI();
-
-  if (state.selectedEl) {
-    const isVisible = document.body.contains(state.selectedEl) && getComputedStyle(state.selectedEl).display !== 'none';
-    if (isVisible) {
-      if (state.tool === 'mov') placeHdl(state.selectedEl);
-      if (state.tool === 'rsz') placeRH(state.selectedEl);
-    } else if (state.selectedEl === h.el) {
-      state.selectedEl.classList.remove('__ps__', '__ps_multi__');
-      state.selectedEl = null;
-      state.selectedEls = [];
-      hdl.classList.remove('v');
-      Object.values(rhs).forEach(rh => rh.classList.remove('v'));
-    }
-  }
+  document.getElementById('__uns_clear__').onclick = () => {
+    state.changes = []; history.length = 0; redoHistory.length = 0; updateUnsUI();
+    toast('🗑 History cleared');
+  };
+
+  document.getElementById('__uns_save__').onclick = () => sv.click();
 
-  toast('↷ Redone');
-}
-
-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 / gemini / ollama):', 'groq');
-    if (!provider) { toast('Save aborted'); return; }
+  document.getElementById('__ps_ai_cfg__').onclick = async () => {
+    const provider = prompt('Change AI Provider (groq / openai / anthropic / gemini / ollama):', 'groq');
+    if (!provider) 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');
+
+    if (!key && provider !== 'ollama') {
+      toast('⚠ 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');
-  }
+    toast('Verifying...');
+    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'); return;
+      }
+    } catch { /* ignore validation fail */ }
 
-  state.changes = []; history.length = 0; redoHistory.length = 0;
-  sv.innerHTML = 'Save'; sv.textContent = 'Save';
-  updateUnsUI();
-});
-
-document.getElementById('__uns_clear__').onclick = () => {
-  state.changes = []; history.length = 0; redoHistory.length = 0; updateUnsUI();
-  toast('🗑 History cleared');
-};
-
-document.getElementById('__uns_save__').onclick = () => sv.click();
-
-document.getElementById('__ps_ai_cfg__').onclick = async () => {
-  const provider = prompt('Change AI Provider (groq / openai / anthropic / gemini / ollama):', 'groq');
-  if (!provider) return;
-  const key = provider === 'ollama' ? 'local' : prompt(`Enter your ${provider.toUpperCase()} API key:`);
-  
-  if (!key && provider !== 'ollama') {
-    toast('⚠ API Key required');
-    return;
-  }
-  
-  toast('Verifying...');
-  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'); return;
-    }
-  } catch { /* ignore validation fail */ }
-  
-  await fetch('/draply-config', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ apiKey: key.trim(), provider: provider.trim() }) });
-  toast('✅ AI Provider saved!');
-};
-
-// ══════════════════════════════════════════
-// 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.toLowerCase() === 'z') {
-    e.preventDefault();
-    if (history.length > 0) {
-      revertChange(history[history.length - 1]);
-    } else {
-      toast('Nothing to undo');
-    }
-    return;
-  }
+    const configPayload = { apiKey: key.trim(), provider: provider.trim() };
 
-  // Ctrl+Shift+Z — Redo (implemented)
-  if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key.toLowerCase() === 'z') {
-    e.preventDefault();
-    redoChange();
-    return;
-  }
+    await fetch('/draply-config', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(configPayload) });
+    toast('✅ AI Provider saved!');
+  };
+
+  // ══════════════════════════════════════════
+  // 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;
 
-  // Delete / Backspace — remove selected element (#5)
-  if (e.key === 'Delete' || e.key === 'Backspace') {
-    if (state.selectedEl && !ps(state.selectedEl)) {
+    // Ctrl+Z — Undo last change (#4)
+    if ((e.ctrlKey || e.metaKey) && !e.shiftKey && e.key.toLowerCase() === 'z') {
       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)');
+      if (history.length > 0) {
+        revertChange(history[history.length - 1]);
+      } else {
+        toast('Nothing to undo');
+      }
+      return;
     }
-    return;
-  }
 
-  // Preview mode toggle: P key (#15)
-  if (e.key === 'p' || e.key === 'P') {
-    if (!e.ctrlKey && !e.metaKey) {
+    // Ctrl+Shift+Z — Redo (implemented)
+    if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key.toLowerCase() === 'z') {
       e.preventDefault();
-      togglePreview();
+      redoChange();
+      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;
+    }
+
+    // Preview mode toggle: P key (#15)
+    if (e.key === 'p' || e.key === 'P') {
+      if (!e.ctrlKey && !e.metaKey) {
+        e.preventDefault();
+        togglePreview();
+      }
+      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');
     }
-    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');
+
+  // ══════════════════════════════════════════
+  // 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(' > ');
   }
-}
-
-// ══════════════════════════════════════════
-// 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;
+  function toast(msg) {
+    tst.textContent = msg; tst.classList.add('v');
+    clearTimeout(tst._t); tst._t = setTimeout(() => tst.classList.remove('v'), 2800);
   }
-  return parts.join(' > ');
-}
-function toast(msg) {
-  tst.textContent = msg; tst.classList.add('v');
-  clearTimeout(tst._t); tst._t = setTimeout(() => tst.classList.remove('v'), 2800);
-}
-}) ();
+})();