@accelerated-agency/visual-editor 0.5.3 → 0.5.4

package/dist/vite.js

@@ -3,6 +3,108 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 
 // src/visualEditorProxyPlugin.ts
+
+// src/croSections.ts
+var CRO_SECTION_IMAGE_ROUTE = "/vvveb-editor-images/cro-sections/";
+function croSectionImageFilename(key) {
+  return key.replace(/\//g, "-") + ".png";
+}
+var CRO_SECTIONS_BASE = [
+  {
+    key: "cro/hero",
+    name: "CRO Hero",
+    icon: "\u{1F3AF}",
+    desc: "High-converting hero section",
+    html: '<section style="background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;padding:80px 20px;text-align:center"><div style="max-width:700px;margin:0 auto"><h1 style="font-size:2.8rem;font-weight:800;margin-bottom:16px;color:white">Your Compelling Headline Here</h1><p style="font-size:1.15rem;margin-bottom:28px;opacity:0.9">A clear, benefit-focused subheadline that explains exactly what visitors get from you.</p><a href="#" style="display:inline-block;background:#f59e0b;color:white;padding:16px 40px;border-radius:6px;font-size:1.1rem;font-weight:700;text-decoration:none">Get Started Free &rarr;</a><p style="margin-top:14px;font-size:13px;opacity:0.65">&#10003; No credit card required &nbsp;&middot;&nbsp; &#10003; 14-day free trial</p></div></section>'
+  },
+  {
+    key: "cro/social-proof",
+    name: "Social Proof",
+    icon: "\u2B50",
+    desc: "Star rating + 3-column testimonials",
+    html: '<section style="padding:60px 20px;background:#f9fafb"><div style="max-width:1000px;margin:0 auto"><div style="text-align:center;margin-bottom:36px"><div style="font-size:2rem;color:#f59e0b;letter-spacing:4px">&#9733;&#9733;&#9733;&#9733;&#9733;</div><p style="font-weight:700;font-size:1.2rem;margin-top:4px">4.9 / 5 from 2,400+ verified reviews</p></div><div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px"><div style="background:white;border-radius:8px;padding:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08)"><div style="color:#f59e0b;font-size:1.1rem;margin-bottom:10px">&#9733;&#9733;&#9733;&#9733;&#9733;</div><p style="font-size:14px;color:#444;margin-bottom:16px">"This product completely transformed our results. 40% increase in conversions within the first month."</p><div style="display:flex;align-items:center;gap:10px"><div style="width:36px;height:36px;border-radius:50%;background:#e0e7ff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px">SJ</div><div><div style="font-weight:600;font-size:13px">Sarah Johnson</div><div style="font-size:11px;color:#888">VP Marketing, TechCorp</div></div></div></div><div style="background:white;border-radius:8px;padding:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08)"><div style="color:#f59e0b;font-size:1.1rem;margin-bottom:10px">&#9733;&#9733;&#9733;&#9733;&#9733;</div><p style="font-size:14px;color:#444;margin-bottom:16px">"The ROI was immediate. Best investment we have made this year. Highly recommend to any serious marketer."</p><div style="display:flex;align-items:center;gap:10px"><div style="width:36px;height:36px;border-radius:50%;background:#dcfce7;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px">MC</div><div><div style="font-weight:600;font-size:13px">Mark Chen</div><div style="font-size:11px;color:#888">Founder, GrowthLabs</div></div></div></div><div style="background:white;border-radius:8px;padding:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08)"><div style="color:#f59e0b;font-size:1.1rem;margin-bottom:10px">&#9733;&#9733;&#9733;&#9733;&#9733;</div><p style="font-size:14px;color:#444;margin-bottom:16px">"Incredible support and the product delivers exactly what it promises. Our entire team loves it."</p><div style="display:flex;align-items:center;gap:10px"><div style="width:36px;height:36px;border-radius:50%;background:#fee2e2;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px">AT</div><div><div style="font-weight:600;font-size:13px">Amanda Torres</div><div style="font-size:11px;color:#888">CMO, ScaleUp Inc</div></div></div></div></div></div></section>'
+  },
+  {
+    key: "cro/urgency-banner",
+    name: "Urgency Banner",
+    icon: "\u23F0",
+    desc: "Countdown timer + limited-time offer",
+    html: '<div style="background:#ef4444;color:white;text-align:center;padding:14px;font-size:14px;font-weight:500">&#128293; Limited time offer: <strong>50% OFF</strong> ends in <span style="font-family:monospace;font-size:1rem;font-weight:700;background:rgba(0,0,0,0.2);padding:2px 10px;border-radius:4px;margin:0 6px">23:47:12</span>&mdash; <a href="#" style="color:white;font-weight:700;text-decoration:underline">Claim your discount &rarr;</a></div>'
+  },
+  {
+    key: "cro/trust-badges",
+    name: "Trust Badges",
+    icon: "\u{1F6E1}\uFE0F",
+    desc: "Security seals, payment icons, guarantees",
+    html: '<div style="padding:28px 20px;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;background:white"><div style="display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:32px;max-width:700px;margin:0 auto"><div style="text-align:center;font-size:12px;color:#555"><div style="font-size:28px;margin-bottom:6px">&#128274;</div><div style="font-weight:600">SSL Secure</div><div style="font-size:10px;color:#888">256-bit encryption</div></div><div style="text-align:center;font-size:12px;color:#555"><div style="font-size:28px;margin-bottom:6px">&#8629;</div><div style="font-weight:600">30-Day Guarantee</div><div style="font-size:10px;color:#888">Money back, no questions</div></div><div style="text-align:center;font-size:12px;color:#555"><div style="font-size:28px;margin-bottom:6px">&#11088;</div><div style="font-weight:600">4.9 / 5 Rating</div><div style="font-size:10px;color:#888">From 2,400+ reviews</div></div><div style="text-align:center;font-size:12px;color:#555"><div style="font-size:28px;margin-bottom:6px">&#128179;</div><div style="font-weight:600">Secure Payment</div><div style="font-size:10px;color:#888">Visa &middot; MC &middot; PayPal</div></div></div></div>'
+  },
+  {
+    key: "cro/cta-block",
+    name: "CTA Block",
+    icon: "\u{1F4E3}",
+    desc: "Dark high-impact call-to-action section",
+    html: '<section style="background:#1a1a2e;color:white;padding:64px 20px;text-align:center"><div style="max-width:600px;margin:0 auto"><h2 style="font-size:2rem;font-weight:800;color:white;margin-bottom:10px">Ready to get started?</h2><p style="opacity:0.7;margin-bottom:32px">Join 10,000+ companies already seeing results with our platform.</p><div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap"><a href="#" style="display:inline-block;background:#f59e0b;color:white;padding:14px 36px;border-radius:6px;font-weight:700;text-decoration:none;font-size:1rem">Start Free Trial</a><a href="#" style="display:inline-block;border:2px solid rgba(255,255,255,0.4);color:white;padding:14px 36px;border-radius:6px;font-weight:600;text-decoration:none;font-size:1rem">Schedule Demo</a></div><p style="font-size:12px;margin-top:18px;opacity:0.45">No credit card required &middot; Cancel anytime</p></div></section>'
+  },
+  {
+    key: "cro/feature-grid",
+    name: "Feature Grid",
+    icon: "\u2728",
+    desc: "3-column key benefits grid",
+    html: '<section style="padding:60px 20px;background:white"><div style="max-width:900px;margin:0 auto"><h2 style="text-align:center;font-size:1.8rem;font-weight:800;margin-bottom:48px">Why choose us?</h2><div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px;text-align:center"><div><div style="font-size:2.5rem;margin-bottom:14px">&#128640;</div><h5 style="font-weight:700;margin-bottom:8px">Fast Results</h5><p style="color:#666;font-size:14px">See improvements in your conversion rate within the first 30 days or your money back.</p></div><div><div style="font-size:2.5rem;margin-bottom:14px">&#128202;</div><h5 style="font-weight:700;margin-bottom:8px">Data-Driven</h5><p style="color:#666;font-size:14px">Every decision backed by real user data and statistical significance testing.</p></div><div><div style="font-size:2.5rem;margin-bottom:14px">&#127919;</div><h5 style="font-weight:700;margin-bottom:8px">Precision Targeting</h5><p style="color:#666;font-size:14px">Target the right audience segments with personalized, high-converting experiences.</p></div></div></div></section>'
+  },
+  {
+    key: "cro/exit-intent-bar",
+    name: "Exit Intent Bar",
+    icon: "\u{1F6AA}",
+    desc: "Sticky bottom bar for exit-intent capture",
+    html: `<div style="position:fixed;bottom:0;left:0;right:0;background:#1e293b;color:white;padding:14px 20px;display:flex;align-items:center;justify-content:center;gap:16px;z-index:9999;box-shadow:0 -4px 20px rgba(0,0,0,0.2)"><span style="font-size:14px">&#128276; <strong>Wait!</strong> Don't leave empty-handed &mdash; get 20% off your first order.</span><a href="#" style="background:#f59e0b;color:white;padding:8px 20px;border-radius:4px;font-weight:700;text-decoration:none;font-size:13px;white-space:nowrap">Claim Offer</a><a href="#" style="color:rgba(255,255,255,0.5);font-size:12px;text-decoration:none">No thanks</a></div>`
+  },
+  {
+    key: "cro/pricing-table",
+    name: "Pricing Table",
+    icon: "\u{1F4B0}",
+    desc: "3-tier pricing with highlighted plan",
+    html: '<section style="padding:60px 20px;background:#f8fafc"><div style="max-width:900px;margin:0 auto"><h2 style="text-align:center;font-weight:800;font-size:1.8rem;margin-bottom:8px">Simple, transparent pricing</h2><p style="text-align:center;color:#666;margin-bottom:48px">No hidden fees. Cancel anytime.</p><div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px"><div style="background:white;border:1px solid #e5e5e5;border-radius:10px;padding:28px"><h3 style="font-weight:700;margin-bottom:6px">Starter</h3><div style="font-size:2rem;font-weight:800;margin-bottom:16px">$29<span style="font-size:1rem;font-weight:400;color:#888">/mo</span></div><ul style="list-style:none;padding:0;font-size:14px;color:#555;margin-bottom:24px"><li style="padding:6px 0;border-bottom:1px solid #f0f0f0">&#10003; Up to 10,000 visitors/mo</li><li style="padding:6px 0;border-bottom:1px solid #f0f0f0">&#10003; 5 A/B tests</li><li style="padding:6px 0">&#10003; Email support</li></ul><a href="#" style="display:block;text-align:center;border:2px solid #e5e5e5;padding:10px;border-radius:6px;font-weight:600;text-decoration:none;color:#333">Get started</a></div><div style="background:#3b82f6;border-radius:10px;padding:28px;position:relative;transform:scale(1.04);box-shadow:0 8px 32px rgba(59,130,246,0.3)"><div style="position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#f59e0b;color:white;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px">MOST POPULAR</div><h3 style="font-weight:700;margin-bottom:6px;color:white">Pro</h3><div style="font-size:2rem;font-weight:800;margin-bottom:16px;color:white">$79<span style="font-size:1rem;font-weight:400;opacity:0.7">/mo</span></div><ul style="list-style:none;padding:0;font-size:14px;color:rgba(255,255,255,0.85);margin-bottom:24px"><li style="padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.15)">&#10003; Up to 100,000 visitors/mo</li><li style="padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.15)">&#10003; Unlimited A/B tests</li><li style="padding:6px 0">&#10003; Priority support</li></ul><a href="#" style="display:block;text-align:center;background:white;color:#3b82f6;padding:10px;border-radius:6px;font-weight:700;text-decoration:none">Get started</a></div><div style="background:white;border:1px solid #e5e5e5;border-radius:10px;padding:28px"><h3 style="font-weight:700;margin-bottom:6px">Enterprise</h3><div style="font-size:2rem;font-weight:800;margin-bottom:16px">Custom</div><ul style="list-style:none;padding:0;font-size:14px;color:#555;margin-bottom:24px"><li style="padding:6px 0;border-bottom:1px solid #f0f0f0">&#10003; Unlimited visitors</li><li style="padding:6px 0;border-bottom:1px solid #f0f0f0">&#10003; White-label option</li><li style="padding:6px 0">&#10003; Dedicated support</li></ul><a href="#" style="display:block;text-align:center;border:2px solid #e5e5e5;padding:10px;border-radius:6px;font-weight:600;text-decoration:none;color:#333">Contact sales</a></div></div></div></section>'
+  }
+];
+var CRO_SECTIONS = CRO_SECTIONS_BASE.map((section) => ({
+  ...section,
+  image: croSectionImageFilename(section.key)
+}));
+
+// src/visualEditorProxyPlugin.ts
+var PACKAGE_ROOT = path.dirname(fileURLToPath(import.meta.url));
+function resolveCroSectionImagePath(filename) {
+  const safe = path.basename(filename);
+  if (!safe || safe !== filename) return null;
+  const candidates = [
+    path.join(PACKAGE_ROOT, "images", "cro-sections", safe),
+    path.join(PACKAGE_ROOT, "..", "src", "images", "cro-sections", safe),
+    path.join(process.cwd(), "src", "images", "cro-sections", safe)
+  ];
+  for (const candidate of candidates) {
+    try {
+      if (fs.existsSync(candidate)) return candidate;
+    } catch (_) {
+    }
+  }
+  return null;
+}
+function listCroSectionImageFiles() {
+  const dirs = [
+    path.join(PACKAGE_ROOT, "images", "cro-sections"),
+    path.join(PACKAGE_ROOT, "..", "src", "images", "cro-sections"),
+    path.join(process.cwd(), "src", "images", "cro-sections")
+  ];
+  for (const dir of dirs) {
+    try {
+      if (!fs.existsSync(dir)) continue;
+      return fs.readdirSync(dir).filter((name) => name.endsWith(".png")).map((name) => path.join(dir, name));
+    } catch (_) {
+    }
+  }
+  return [];
+}
 var DEFAULT_TRACKING_MARKERS = [
   "snowplow",
   "taboola",
@@ -254,64 +356,6 @@ catch(_){}})();</script>`;
 var AI_SYSTEM_PROMPT = `You are a CRO expert. Return JSON only with: hypothesis, mutations, summary. Keep 2-6 precise mutations and only valid selectors from snapshot.`;
 var BRIDGE_SCRIPT = `(function(){if(window.__CONVERSION_BRIDGE_LOADED__)return;window.__CONVERSION_BRIDGE_LOADED__=true;var CHANNEL='conversion-editor';var highlightEl=null;function send(payload){window.parent.postMessage({channel:CHANNEL,payload:payload},'*');}function qs(selector){try{return document.querySelector(selector);}catch(_){return null;}}function getSelector(el){if(!el||el.nodeType!==1)return'';if(el.id)return'#'+CSS.escape(el.id);var parts=[];var current=el;var depth=0;while(current&&current.nodeType===1&&depth<5){var part=current.tagName.toLowerCase();if(current.classList&&current.classList.length){part+='.'+Array.from(current.classList).slice(0,2).map(function(c){return CSS.escape(c);}).join('.');}var parent=current.parentElement;if(parent){var siblings=Array.from(parent.children).filter(function(s){return s.tagName===current.tagName;});if(siblings.length>1)part+=':nth-of-type('+(siblings.indexOf(current)+1)+')';}parts.unshift(part);current=parent;depth+=1;}return parts.join(' > ');}function payloadOf(el){var rect=el.getBoundingClientRect();var style=window.getComputedStyle(el);return{selector:getSelector(el),tagName:el.tagName.toLowerCase(),textContent:(el.textContent||'').trim().slice(0,500),computedStyles:{color:style.color,backgroundColor:style.backgroundColor,fontSize:style.fontSize,fontWeight:style.fontWeight,lineHeight:style.lineHeight,display:style.display},rect:{top:rect.top,left:rect.left,width:rect.width,height:rect.height}};}function applyMutation(m){var el=qs(m.selector);if(!el)return;switch(m.action){case'setStyle':if(m.property)el.style[m.property]=m.value;break;case'setText':el.textContent=m.value;break;case'setHTML':el.innerHTML=m.value;break;case'setAttribute':if(m.property)el.setAttribute(m.property,m.value);break;case'hide':el.style.display='none';break;case'show':el.style.display='';break;case'insertHTML':if(m.position)el.insertAdjacentHTML(m.position,m.value||'');break;case'insertSection':if(m.position)el.insertAdjacentHTML(m.position,m.sectionHtml||m.value||'');break;case'reorderElement':if(!m.targetSelector)break;var target=qs(m.targetSelector);if(!target||!target.parentNode||!el.parentNode)break;if(m.insertPosition==='before')target.parentNode.insertBefore(el,target);else target.parentNode.insertBefore(el,target.nextSibling);break;default:break;}}function revertMutation(m){var el=qs(m.selector);if(!el)return;switch(m.action){case'setStyle':if(m.property)el.style[m.property]=m.previous||'';break;case'setText':el.textContent=m.previous||'';break;case'setHTML':el.innerHTML=m.previous||'';break;case'setAttribute':if(m.property){if(m.previous!=null)el.setAttribute(m.property,m.previous);else el.removeAttribute(m.property);}break;case'hide':case'show':el.style.display=m.previous||'';break;default:break;}}function captureSnapshot(){var elements=Array.from(document.querySelectorAll('h1,h2,h3,p,button,a,input,select,img,section,div')).slice(0,700).map(function(el){var rect=el.getBoundingClientRect();var cs=window.getComputedStyle(el);return{selector:getSelector(el),parentSelector:el.parentElement?getSelector(el.parentElement):null,tagName:el.tagName.toLowerCase(),textContent:(el.textContent||'').trim().slice(0,300),attributes:Array.from(el.attributes||[]).reduce(function(acc,a){acc[a.name]=a.value;return acc;},{}),computedStyles:{color:cs.color,backgroundColor:cs.backgroundColor,fontSize:cs.fontSize,fontWeight:cs.fontWeight,display:cs.display},childrenCount:el.children?el.children.length:0,aboveFold:rect.top<window.innerHeight,depth:(function(){var d=0,p=el.parentElement;while(p&&d<25){d++;p=p.parentElement;}return d;})()};});send({type:'snapshotCaptured',snapshot:{url:window.location.href,title:document.title,viewport:{width:window.innerWidth,height:window.innerHeight},elements:elements}});}function captureTree(){function toNode(el,depth){var rect=el.getBoundingClientRect();var tag=el.tagName.toLowerCase();var type='generic';if(tag==='section')type='section';else if(tag==='img')type='image';else if(tag==='a')type='link';else if(tag==='button')type='button';else if(tag==='form')type='form';else if(['p','h1','h2','h3','h4','h5','h6','span'].indexOf(tag)>=0)type='text';else if(['div','main','article','aside','header','footer','nav'].indexOf(tag)>=0)type='container';var children=Array.from(el.children||[]).slice(0,50).map(function(c){return toNode(c,depth+1);});return{id:getSelector(el),selector:getSelector(el),tagName:tag,label:(el.getAttribute('aria-label')||el.getAttribute('id')||el.className||tag).toString().slice(0,80),type:type,children:children,depth:depth,isAboveFold:rect.top<window.innerHeight,rect:{top:rect.top,left:rect.left,width:rect.width,height:rect.height}};}send({type:'pageTreeCaptured',tree:[toNode(document.body,0)]});}window.addEventListener('message',function(e){var msg=e.data;if(!msg||msg.channel!==CHANNEL||!msg.payload)return;var p=msg.payload;switch(p.type){case'ping':send({type:'pong'});break;case'applyMutation':applyMutation(p.mutation);break;case'applyMutationBatch':(p.mutations||[]).forEach(applyMutation);break;case'revert':revertMutation(p.mutation);break;case'clearAllMutations':window.location.reload();break;case'captureSnapshot':captureSnapshot();break;case'validateSelectors':send({type:'selectorsValidated',results:(p.selectors||[]).map(function(s){var el=qs(s);return{selector:s,found:!!el,tagName:el?el.tagName.toLowerCase():null};})});break;case'scrollToElement':case'selectElement':var target=qs(p.selector);if(target){target.scrollIntoView({behavior:'smooth',block:'center'});send({type:'elementSelected',element:payloadOf(target)});}break;case'hoverElement':var h=qs(p.selector);if(h){if(highlightEl)highlightEl.style.outline='';h.style.outline='2px solid #3b82f6';highlightEl=h;}break;case'capturePageTree':captureTree();break;default:break;}});document.addEventListener('click',function(e){var el=e.target;if(!(el instanceof Element))return;send({type:'elementSelected',element:payloadOf(el)});},true);send({type:'bridgeReady'});})();`;
 function buildVvvebEditorHtml() {
-  const CRO_SECTIONS = [
-    {
-      key: "cro/hero",
-      name: "CRO Hero",
-      icon: "\u{1F3AF}",
-      desc: "High-converting hero section",
-      html: '<section style="background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;padding:80px 20px;text-align:center"><div style="max-width:700px;margin:0 auto"><h1 style="font-size:2.8rem;font-weight:800;margin-bottom:16px;color:white">Your Compelling Headline Here</h1><p style="font-size:1.15rem;margin-bottom:28px;opacity:0.9">A clear, benefit-focused subheadline that explains exactly what visitors get from you.</p><a href="#" style="display:inline-block;background:#f59e0b;color:white;padding:16px 40px;border-radius:6px;font-size:1.1rem;font-weight:700;text-decoration:none">Get Started Free &rarr;</a><p style="margin-top:14px;font-size:13px;opacity:0.65">&#10003; No credit card required &nbsp;&middot;&nbsp; &#10003; 14-day free trial</p></div></section>'
-    },
-    {
-      key: "cro/social-proof",
-      name: "Social Proof",
-      icon: "\u2B50",
-      desc: "Star rating + 3-column testimonials",
-      html: '<section style="padding:60px 20px;background:#f9fafb"><div style="max-width:1000px;margin:0 auto"><div style="text-align:center;margin-bottom:36px"><div style="font-size:2rem;color:#f59e0b;letter-spacing:4px">&#9733;&#9733;&#9733;&#9733;&#9733;</div><p style="font-weight:700;font-size:1.2rem;margin-top:4px">4.9 / 5 from 2,400+ verified reviews</p></div><div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px"><div style="background:white;border-radius:8px;padding:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08)"><div style="color:#f59e0b;font-size:1.1rem;margin-bottom:10px">&#9733;&#9733;&#9733;&#9733;&#9733;</div><p style="font-size:14px;color:#444;margin-bottom:16px">"This product completely transformed our results. 40% increase in conversions within the first month."</p><div style="display:flex;align-items:center;gap:10px"><div style="width:36px;height:36px;border-radius:50%;background:#e0e7ff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px">SJ</div><div><div style="font-weight:600;font-size:13px">Sarah Johnson</div><div style="font-size:11px;color:#888">VP Marketing, TechCorp</div></div></div></div><div style="background:white;border-radius:8px;padding:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08)"><div style="color:#f59e0b;font-size:1.1rem;margin-bottom:10px">&#9733;&#9733;&#9733;&#9733;&#9733;</div><p style="font-size:14px;color:#444;margin-bottom:16px">"The ROI was immediate. Best investment we have made this year. Highly recommend to any serious marketer."</p><div style="display:flex;align-items:center;gap:10px"><div style="width:36px;height:36px;border-radius:50%;background:#dcfce7;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px">MC</div><div><div style="font-weight:600;font-size:13px">Mark Chen</div><div style="font-size:11px;color:#888">Founder, GrowthLabs</div></div></div></div><div style="background:white;border-radius:8px;padding:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08)"><div style="color:#f59e0b;font-size:1.1rem;margin-bottom:10px">&#9733;&#9733;&#9733;&#9733;&#9733;</div><p style="font-size:14px;color:#444;margin-bottom:16px">"Incredible support and the product delivers exactly what it promises. Our entire team loves it."</p><div style="display:flex;align-items:center;gap:10px"><div style="width:36px;height:36px;border-radius:50%;background:#fee2e2;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px">AT</div><div><div style="font-weight:600;font-size:13px">Amanda Torres</div><div style="font-size:11px;color:#888">CMO, ScaleUp Inc</div></div></div></div></div></div></section>'
-    },
-    {
-      key: "cro/urgency-banner",
-      name: "Urgency Banner",
-      icon: "\u23F0",
-      desc: "Countdown timer + limited-time offer",
-      html: '<div style="background:#ef4444;color:white;text-align:center;padding:14px;font-size:14px;font-weight:500">&#128293; Limited time offer: <strong>50% OFF</strong> ends in <span style="font-family:monospace;font-size:1rem;font-weight:700;background:rgba(0,0,0,0.2);padding:2px 10px;border-radius:4px;margin:0 6px">23:47:12</span>&mdash; <a href="#" style="color:white;font-weight:700;text-decoration:underline">Claim your discount &rarr;</a></div>'
-    },
-    {
-      key: "cro/trust-badges",
-      name: "Trust Badges",
-      icon: "\u{1F6E1}\uFE0F",
-      desc: "Security seals, payment icons, guarantees",
-      html: '<div style="padding:28px 20px;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;background:white"><div style="display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:32px;max-width:700px;margin:0 auto"><div style="text-align:center;font-size:12px;color:#555"><div style="font-size:28px;margin-bottom:6px">&#128274;</div><div style="font-weight:600">SSL Secure</div><div style="font-size:10px;color:#888">256-bit encryption</div></div><div style="text-align:center;font-size:12px;color:#555"><div style="font-size:28px;margin-bottom:6px">&#8629;</div><div style="font-weight:600">30-Day Guarantee</div><div style="font-size:10px;color:#888">Money back, no questions</div></div><div style="text-align:center;font-size:12px;color:#555"><div style="font-size:28px;margin-bottom:6px">&#11088;</div><div style="font-weight:600">4.9 / 5 Rating</div><div style="font-size:10px;color:#888">From 2,400+ reviews</div></div><div style="text-align:center;font-size:12px;color:#555"><div style="font-size:28px;margin-bottom:6px">&#128179;</div><div style="font-weight:600">Secure Payment</div><div style="font-size:10px;color:#888">Visa &middot; MC &middot; PayPal</div></div></div></div>'
-    },
-    {
-      key: "cro/cta-block",
-      name: "CTA Block",
-      icon: "\u{1F4E3}",
-      desc: "Dark high-impact call-to-action section",
-      html: '<section style="background:#1a1a2e;color:white;padding:64px 20px;text-align:center"><div style="max-width:600px;margin:0 auto"><h2 style="font-size:2rem;font-weight:800;color:white;margin-bottom:10px">Ready to get started?</h2><p style="opacity:0.7;margin-bottom:32px">Join 10,000+ companies already seeing results with our platform.</p><div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap"><a href="#" style="display:inline-block;background:#f59e0b;color:white;padding:14px 36px;border-radius:6px;font-weight:700;text-decoration:none;font-size:1rem">Start Free Trial</a><a href="#" style="display:inline-block;border:2px solid rgba(255,255,255,0.4);color:white;padding:14px 36px;border-radius:6px;font-weight:600;text-decoration:none;font-size:1rem">Schedule Demo</a></div><p style="font-size:12px;margin-top:18px;opacity:0.45">No credit card required &middot; Cancel anytime</p></div></section>'
-    },
-    {
-      key: "cro/feature-grid",
-      name: "Feature Grid",
-      icon: "\u2728",
-      desc: "3-column key benefits grid",
-      html: '<section style="padding:60px 20px;background:white"><div style="max-width:900px;margin:0 auto"><h2 style="text-align:center;font-size:1.8rem;font-weight:800;margin-bottom:48px">Why choose us?</h2><div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px;text-align:center"><div><div style="font-size:2.5rem;margin-bottom:14px">&#128640;</div><h5 style="font-weight:700;margin-bottom:8px">Fast Results</h5><p style="color:#666;font-size:14px">See improvements in your conversion rate within the first 30 days or your money back.</p></div><div><div style="font-size:2.5rem;margin-bottom:14px">&#128202;</div><h5 style="font-weight:700;margin-bottom:8px">Data-Driven</h5><p style="color:#666;font-size:14px">Every decision backed by real user data and statistical significance testing.</p></div><div><div style="font-size:2.5rem;margin-bottom:14px">&#127919;</div><h5 style="font-weight:700;margin-bottom:8px">Precision Targeting</h5><p style="color:#666;font-size:14px">Target the right audience segments with personalized, high-converting experiences.</p></div></div></div></section>'
-    },
-    {
-      key: "cro/exit-intent-bar",
-      name: "Exit Intent Bar",
-      icon: "\u{1F6AA}",
-      desc: "Sticky bottom bar for exit-intent capture",
-      html: `<div style="position:fixed;bottom:0;left:0;right:0;background:#1e293b;color:white;padding:14px 20px;display:flex;align-items:center;justify-content:center;gap:16px;z-index:9999;box-shadow:0 -4px 20px rgba(0,0,0,0.2)"><span style="font-size:14px">&#128276; <strong>Wait!</strong> Don't leave empty-handed &mdash; get 20% off your first order.</span><a href="#" style="background:#f59e0b;color:white;padding:8px 20px;border-radius:4px;font-weight:700;text-decoration:none;font-size:13px;white-space:nowrap">Claim Offer</a><a href="#" style="color:rgba(255,255,255,0.5);font-size:12px;text-decoration:none">No thanks</a></div>`
-    },
-    {
-      key: "cro/pricing-table",
-      name: "Pricing Table",
-      icon: "\u{1F4B0}",
-      desc: "3-tier pricing with highlighted plan",
-      html: '<section style="padding:60px 20px;background:#f8fafc"><div style="max-width:900px;margin:0 auto"><h2 style="text-align:center;font-weight:800;font-size:1.8rem;margin-bottom:8px">Simple, transparent pricing</h2><p style="text-align:center;color:#666;margin-bottom:48px">No hidden fees. Cancel anytime.</p><div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px"><div style="background:white;border:1px solid #e5e5e5;border-radius:10px;padding:28px"><h3 style="font-weight:700;margin-bottom:6px">Starter</h3><div style="font-size:2rem;font-weight:800;margin-bottom:16px">$29<span style="font-size:1rem;font-weight:400;color:#888">/mo</span></div><ul style="list-style:none;padding:0;font-size:14px;color:#555;margin-bottom:24px"><li style="padding:6px 0;border-bottom:1px solid #f0f0f0">&#10003; Up to 10,000 visitors/mo</li><li style="padding:6px 0;border-bottom:1px solid #f0f0f0">&#10003; 5 A/B tests</li><li style="padding:6px 0">&#10003; Email support</li></ul><a href="#" style="display:block;text-align:center;border:2px solid #e5e5e5;padding:10px;border-radius:6px;font-weight:600;text-decoration:none;color:#333">Get started</a></div><div style="background:#3b82f6;border-radius:10px;padding:28px;position:relative;transform:scale(1.04);box-shadow:0 8px 32px rgba(59,130,246,0.3)"><div style="position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#f59e0b;color:white;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px">MOST POPULAR</div><h3 style="font-weight:700;margin-bottom:6px;color:white">Pro</h3><div style="font-size:2rem;font-weight:800;margin-bottom:16px;color:white">$79<span style="font-size:1rem;font-weight:400;opacity:0.7">/mo</span></div><ul style="list-style:none;padding:0;font-size:14px;color:rgba(255,255,255,0.85);margin-bottom:24px"><li style="padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.15)">&#10003; Up to 100,000 visitors/mo</li><li style="padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.15)">&#10003; Unlimited A/B tests</li><li style="padding:6px 0">&#10003; Priority support</li></ul><a href="#" style="display:block;text-align:center;background:white;color:#3b82f6;padding:10px;border-radius:6px;font-weight:700;text-decoration:none">Get started</a></div><div style="background:white;border:1px solid #e5e5e5;border-radius:10px;padding:28px"><h3 style="font-weight:700;margin-bottom:6px">Enterprise</h3><div style="font-size:2rem;font-weight:800;margin-bottom:16px">Custom</div><ul style="list-style:none;padding:0;font-size:14px;color:#555;margin-bottom:24px"><li style="padding:6px 0;border-bottom:1px solid #f0f0f0">&#10003; Unlimited visitors</li><li style="padding:6px 0;border-bottom:1px solid #f0f0f0">&#10003; White-label option</li><li style="padding:6px 0">&#10003; Dedicated support</li></ul><a href="#" style="display:block;text-align:center;border:2px solid #e5e5e5;padding:10px;border-radius:6px;font-weight:600;text-decoration:none;color:#333">Contact sales</a></div></div></div></section>'
-    }
-  ];
   const sectionsJson = JSON.stringify(CRO_SECTIONS);
   return `<!DOCTYPE html>
 <html lang="en">
@@ -319,27 +363,39 @@ function buildVvvebEditorHtml() {
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Visual Editor V2</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
 <style>
 /* \u2500\u2500 Reset \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 *{box-sizing:border-box;margin:0;padding:0}
-html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,sans-serif;font-size:13px;color:#1e293b;background:#f1f5f9}
+html,body{height:100%;overflow:hidden;font-family:var(--font-sans);font-size:13px;color:#1e293b;background:#f1f5f9}
 
 /* \u2500\u2500 CSS variables \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 :root{
+  --font-inter:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
+  --font-roboto:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
+  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
+  --font-sans:var(--font-inter),var(--font-roboto),-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
   --bg:         #ffffff;
   --bg-sub:     #f8fafc;
-  --bg-hover:   #f1f5f9;
+  --bg-hover:   #F5F5F5;
   --border:     #e2e8f0;
   --border-sub: #f1f5f9;
   --text:       #404040;
   --text-2:     #475569;
   --text-3:     #94a3b8;
-  --accent:     #6366f1;
-  --accent-bg:  #eef2ff;
+  --accent:     #262626;
+  --accent-bg:  #f5f5f5;
   --accent-txt: #404040;
 }
 
+/* \u2500\u2500 Font utilities \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.inter{font-family:var(--font-inter)}
+.roboto{font-family:var(--font-roboto)}
+.mono{font-family:var(--font-mono)}
+
 /* \u2500\u2500 Layout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 #app{display:flex;flex-direction:column;height:100vh}
 #main{display:flex;flex:1;overflow:hidden;min-height:0}
@@ -417,9 +473,32 @@ box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.20), 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1p
   border-color:transparent;
 }
   .tb-dev-menu input#dev-zoom-level{
-  max-width: fit-content;
-  margin-left: auto;
+  max-width:72px;
+  margin-left:0;
   }
+.tb-dev-menu .row-zoom .zoom-controls{
+  display:flex;
+  align-items:center;
+  gap:6px;
+  margin-left:auto;
+}
+.tb-dev-menu .dev-zoom-fit-btn{
+  width:30px;
+  height:30px;
+  flex-shrink:0;
+  border:none;
+  border-radius:6px;
+  background:#fff;
+  cursor:pointer;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  color:#404040;
+  box-shadow:0 0 1px 0 rgba(0,0,0,.20),0 1px 2px 0 rgba(0,0,0,.05),0 1px 1px 0 rgba(0,0,0,.01);
+  transition:background .12s,color .12s;
+}
+.tb-dev-menu .dev-zoom-fit-btn:hover{background:#f4f4f5;color:#171717}
+.tb-dev-menu .dev-zoom-fit-btn svg{display:block;width:16px;height:16px}
 .tb-dev-menu input:focus{
   border-color:#1A1A1A;
   box-shadow:0 0 0 2px rgba(99,102,241,.14)
@@ -449,19 +528,10 @@ box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.20), 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1p
     text-overflow: ellipsis;
     font-size: var(--font-size-sm, 14px);
     font-style: normal;
-    font-weight: 500;
+    font-weight: 500;#
     line-height: var(--font-leading-4, 16px);
 }
 .tb-dev-menu .vp-preset-btn:hover,.tb-dev-menu .vp-preset-btn.active{background:#f4f4f5}
-.tb-dev-menu .ft{
-  margin-top:10px;padding-top:8px;border-top:1px solid #ececf0;
-  display:flex;justify-content:flex-end
-}
-.tb-dev-menu .apply-btn{
-  border:1px solid #d4d4d8;background:#f8fafc;color:#111827;border-radius:6px;
-  height:30px;padding:0 10px;font-size:12px;font-weight:600;cursor:pointer
-}
-.tb-dev-menu .apply-btn:hover{background:#eef2ff;border-color:#a5b4fc}
 /* Dark icon buttons */
 .tb-dk-btn{width:28px;height:28px;background:transparent;border:none;border-radius:5px;cursor:pointer;color:#71717a;display:flex;align-items:center;justify-content:center;font-size:13px;transition:all .12s;flex-shrink:0}
 .tb-dk-btn:hover{color:#e4e4e7;background:rgba(255,255,255,.07)}
@@ -492,9 +562,29 @@ box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.20), 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1p
 .tb-sim-btn{background:transparent;border:1px solid #e5e7eb;border-radius:6px;color:#404040;cursor:pointer;font-size:14px;font-weight:500;padding:6px 10px;display:flex;align-items:center;gap:5px;transition:all .15s;white-space:nowrap;font-family:inherit}
 .tb-sim-btn:hover{background:rgba(255,255,255,.06);border-color:#52525b}
 .tb-sim-btn i{font-size:11px}
-.tb-fin-btn{background:#09090b;border:1px solid #3f3f46;border-radius:6px;color:#fafafa;cursor:pointer;font-size:14px;font-weight:600;padding:5px 14px;transition:all .15s;white-space:nowrap;font-family:inherit}
-.tb-fin-btn:hover{background:#000;border-color:#52525b}
-
+.tb-fin-btn{    border: none;
+    cursor: pointer;
+    transition: all .15s;
+    white-space: nowrap;
+        border-radius: var(--radius-md, 6px);
+    background: var(--bg-primary-default, #262626);
+    padding: 7px 10px;
+    color: var(--content-on-color, #FFF);
+    text-align: center;
+    font-family: Inter;
+    font-size: var(--font-size-sm, 14px);
+    font-style: normal;
+    font-weight: 500;
+    line-height: var(--font-leading-4, 16px);
+    }
+.tb-fin-btn:hover{opacity:0.8;}
+.tb-fin-btn#btn-save{
+    background: var(--bg-interactive-default, #FFF);
+    box-shadow: 0 0 1px 0 var(--Black-20, rgba(0, 0, 0, 0.20)), 0 1px 2px 0 var(--Black-5, rgba(0, 0, 0, 0.05)), 0 1px 1px 0 rgba(0, 0, 0, 0.01);
+    border: none;
+    color: var(--content-success-default, #00C951);
+    font-weight: 500;
+}
 /* \u2500\u2500 Page loading hint (toolbar + sidebar) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 .tb-page-loading{
   display:none;flex-shrink:0;align-items:center;margin:0 10px 0 4px;
@@ -551,14 +641,17 @@ box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.20), 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1p
 
 /* \u2500\u2500 Left panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 #left-panel{
-  width:232px;background:#FFFFFF;border-right:1px solid var(--border);
-  display:flex;flex-direction:column;flex-shrink:0;min-height:0;overflow:hidden
+  width:288px;
+  display:flex;flex-direction:column;flex-shrink:0;min-height:0;overflow:hidden;
+  border-right: 1px solid var(--border-default, #E5E5E5);
+   background: var(--cu-Background-Main, #FFF);
 }
 
 /* \u2500\u2500 Iframe panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 #iframe-panel{
   flex:1;background:#e8ecf0;display:flex;flex-direction:column;
-  align-items:center;justify-content:flex-start;overflow:auto;position:relative
+  align-items:center;justify-content:flex-start;overflow:hidden;position:relative;
+  min-height:0;min-width:0
 }
 
 /* \u2500\u2500 Floating selection toolbar (above iframe selection) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@@ -579,13 +672,34 @@ box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.20), 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1p
 #selection-floater .sf-sep{width:1px;height:16px;background:var(--border);margin:0 2px;flex-shrink:0}
 
 /* \u2500\u2500 DOM tree (Elements tab) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-.dt-tree{font-size:11px;padding:0px 0 0px 20px;user-select:none}
+.dt-tree{user-select:none}
 .dt-row{
-  width:fit-content;display:flex;align-items:center;gap:2px;min-height:26px;padding:2px 8px 2px 4px;
-  cursor:pointer;color:var(--text-2);border-radius:4px;margin:0 4px
+        width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    min-height: 26px;
+    padding: 10px 8px 10px 4px;
+    cursor: pointer;
+    color: var(--text-2);
+    position: relative;
 }
 .dt-row:hover{background:var(--bg-hover);color:var(--text)}
-.dt-row.dt-selected{background:#e0e7ff!important;color:var(--accent-txt)!important;outline:1px solid #a5b4fc}
+.dt-row.dt-selected{position:relative;background:var(--bg-hover);}
+.dt-row.dt-selected::before, .dt-row:hover::before{
+      display: block;
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0px;
+    height: 100%;
+    width: 2px;
+    background: #262626;
+}
+.dt-row.dt-selected .dt-lbl .dt-tag{
+  background: var(--bg-primary-default, #262626)!important;
+  color: var(--text-primary-default, #FFF)!important;
+}
 .dt-chev{
   width:16px;height:16px;flex-shrink:0;border:none;background:transparent;
   cursor:pointer;color:var(--text-3);display:flex;align-items:center;justify-content:center;
@@ -594,22 +708,36 @@ box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.20), 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1p
 .dt-chev:hover{color:var(--text)}
 .dt-chev.dt-spacer{visibility:hidden;pointer-events:none}
 .dt-ico{width:16px;flex-shrink:0;text-align:center;color:var(--text-3);font-size:12px}
-.dt-lbl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,monospace;font-size:10px}
+.dt-lbl{
+flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--content-strong, #171717);
+    font-family: "JetBrains Mono";
+}
 .dt-muted{padding:16px 12px;text-align:center;color:var(--text-3);font-size:11px;line-height:1.4}
 #section-components-panel{
   max-height: 50%;
   overflow-y: auto;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
 }
+#section-components-panel .lp-body.collapsed{display:none}
 /* \u2500\u2500 Right panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 #right-panel{
-  width:252px;background:var(--bg);border-left:1px solid var(--border);
+  width:288px;
+  border-left: 1px solid var(--border-default, #E5E5E5);
+  background: var(--cu-Background-Main, #FFF);
   display:flex;flex-direction:column;flex-shrink:0;overflow:hidden
 }
 
 /* \u2500\u2500 Breadcrumb \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 #breadcrumb{
+  display:none;
   height:26px;background:var(--bg);border-top:1px solid var(--border);
-  display:flex;align-items:center;padding:0 12px;font-size:11px;
+  align-items:center;padding:0 12px;font-size:11px;
   color:var(--text-3);flex-shrink:0;gap:5px;overflow:hidden
 }
 
@@ -622,9 +750,13 @@ box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.20), 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1p
 
 /* \u2500\u2500 Device frame \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 #device-frame{
-  width:100%;min-height:100%;display:flex;align-items:stretch;
-  justify-content:center;transform-origin:top center;
-  transition:max-width .3s ease,width .2s ease,height .2s ease
+      width: 100%;
+    min-height: 100%;
+    display: flex;
+    align-items: center;
+    transform-origin: top left;
+    transition: max-width .3s ease,width .2s ease,height .2s ease;
+    flex-shrink: 0;
 }
 #device-frame.desktop{
   max-width:1440px;
@@ -675,33 +807,51 @@ box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.20), 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1p
 }
 
 /* \u2500\u2500 Left panel sections \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-.lp-sec{border-bottom:1px solid var(--border);flex-shrink:0;padding: 24px;}
+.lp-sec{border-bottom:1px solid var(--border);flex-shrink:0;padding: 24px 16px;}
 .lp-sec-no-border{border-bottom:none!important}
 .lp-sec-hd{
   margin-bottom: 12px;
   font-size:14px;font-weight:600;
+  line-height: 20px;
   color:#404040;display:flex;align-items:center;justify-content:space-between;gap:5px
 }
 .lp-sec-hd-left{display:flex;align-items:center;gap:5px}
 #active-var-label{display:none;color:var(--accent-txt);font-size:10px;font-weight:500}
 .lp-info-icon{font-size:11px;color:var(--text-3);cursor:default;opacity:.7}
 .lp-add-btn{
-  background:none;border:none;color:var(--text);font-size:14px;font-weight:500;
-  cursor:pointer;padding:2px 5px;border-radius:4px;transition:all .12s;flex-shrink:0
+     background: none;
+    border: none;
+    cursor: pointer;
+    padding: 2px 5px;
+    border-radius: 4px;
+    transition: all .12s;
+    flex-shrink: 0;
+        color: var(--content-default, #404040);
+    text-align: center;
+    font-family: Inter;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 14px;
 }
-.lp-add-btn:hover{background:var(--bg-hover);color:var(--accent-txt)}
+.lp-add-btn:hover{opacity:0.8}
 
 /* \u2500\u2500 Variation tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 #variation-tabs{display:flex;flex-direction:column; gap:8px;}
 .var-tab{
-  border-radius: 4px;
-  border: 1px solid #e5e7eb;
-  background:transparent;color:var(--text);
-  cursor:pointer;font-size:12px;font-weight:500;padding:6px 12px;transition:background .12s,color .12s;
+    border-radius: var(--radius-md, 6px);
+    border:1px solid transparent;
+    background: var(--bg-interactive-default, #FFF);
+    box-shadow: 0 0 1px 0 var(--Black-20, rgba(0, 0, 0, 0.20)), 0 1px 2px 0 var(--Black-5, rgba(0, 0, 0, 0.05)), 0 1px 1px 0 rgba(0, 0, 0, 0.01);
+  cursor:pointer;font-size:15px;font-weight:500;padding:7px 10px;transition:background .12s,color .12s,border-color .12s;
   width:100%;text-align:left;display:flex;align-items:center;gap:8px;
+  line-height: 16px;
 }
 .var-tab:hover{background:var(--bg-hover);color:var(--text)}
-.var-tab.active{background:var(--accent-bg);color:var(--accent-txt);font-weight: 700;}
+button.var-tab.active{
+  color:var(--accent-txt);
+  border-color:var(--var-tab-color, transparent);
+}
 .var-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
 .var-add-row{
   display:none!important;
@@ -715,51 +865,207 @@ box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.20), 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1p
 .var-add-row:hover{color:var(--accent-txt)}
 
 /* \u2500\u2500 Search \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.lp-search-container{margin-bottom:8px}
+.lp-search-field{
+  position:relative;
+  display:flex;
+  align-items:center;
+  width:100%;
+}
+.lp-search-icon{
+  position:absolute;
+  left:12px;
+  top:50%;
+  transform:translateY(-50%);
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  width:16px;
+  height:16px;
+  pointer-events:none;
+  color:var(--base-sub-2,#B5B5B5);
+  flex-shrink:0;
+}
+.lp-search-icon svg{display:block;width:16px;height:16px}
+.lp-search-icon svg path{stroke:currentColor}
 #comp-search{
-  background:#fff;border:1px solid var(--border);border-radius:6px;
-  color:var(--text);font-size:12px;padding:6px 10px;width:100%;outline:none
+  border:1px solid var(--border);
+  color:var(--text);
+  font-size:12px;
+  padding:9px 12px 9px 36px;
+  width:100%;
+  outline:none;
+  border-radius:6px;
+  background:var(--Greyscale-0,#FFF);
+  box-shadow:0 0 1px 0 var(--Black-20,rgba(0,0,0,.20)),0 1px 2px 0 var(--Black-5,rgba(0,0,0,.05)),0 1px 1px 0 rgba(0,0,0,.01);
 }
-#comp-search::placeholder{color:var(--text-3)}
-#comp-search:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.12)}
-
+#comp-search::placeholder{
+  color:var(--base-sub-2,#B5B5B5);
+  font-size:var(--font-size-sm,14px);
+  font-style:normal;
+  font-weight:500;
+}
+#comp-search:focus{border-color:#000;}
 /* \u2500\u2500 Left tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-.lp-tabs, .section-components-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;background:#fff}
-.lp-tab{
-  flex:1;padding:8px 2px;text-align:center;font-size:10px;color:var(--text-3);
-  cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;font-weight:600;line-height:1.15
+.lp-tabs-container{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
 }
-.lp-tab.close-section-components-panel{
-        padding: 4px 10px;
-    background: #000;
+.lp-tabs{
+      width: 100%;
+      padding: 4px 10px;
+    flex: 1;
     display: flex;
-    max-width: fit-content;
+    border-radius: 6px;
+    background: var(--base-soft-2,#F0F0F0);
+    padding: 4px 6px;
+    flex-shrink: 0;
+    gap: 6px;
+    align-items: center;
+    white-space: nowrap;
+}
+.lp-tab{
+      flex: 1;
+    text-align: center;
+    color: #404040;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: all .15s;
+    line-height: 1.15;
+    font-size: var(--font-size-sm,14px);
+    font-weight: 500;
+      padding:4px 10px;
+}
+.section-components-tabs-container{
+      display: flex;
     align-items: center;
-    justify-content: center;
-    border-radius: 2px;
-    margin: 2px;
-    color: #fff;
+    justify-content: space-between;
+    flex-shrink: 0;
+    padding: 12px 16px;
+    border-bottom: 1px solid #F5F5F5;
+}
+.section-components-tabs-container .lp-tabs{
+  flex:1;
 }
+.lp-tab.close-section-components-panel{
+  flex:0 0 auto;
+  flex-shrink:0;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  width:24px;
+  height:24px;
+  padding:0;
+  background:none;
+  border-radius:4px;
+  color:var(--content-default,#404040);
+  line-height:1;
+  white-space:nowrap;
+}
+.lp-tab.close-section-components-panel i{
+  font-size:14px;
+  line-height:1;
+  transition:transform .15s;
+}
+.lp-tab.close-section-components-panel.collapsed i{transform:rotate(-180deg)}
 .lp-tab:hover{color:var(--text-2)}
-.lp-tab.active{color:var(--accent-txt);border-bottom-color:var(--accent)}
+.lp-tab.active{
+  border-radius:4px;
+  background:var(--bg-interactive-default,#FFF);
+  box-shadow:0 0 1px 0 var(--Black-20,rgba(0,0,0,.20)),0 1px 2px 0 var(--Black-5,rgba(0,0,0,.05)),0 1px 1px 0 rgba(0,0,0,.01);
+}
+.lp-tab.close-section-components-panel:hover{opacity:.8;color:var(--text-2)}
+.lp-tab.close-section-components-panel.active{
+  background:none;
+  box-shadow:none;
+  border-radius:4px;
+}
 .future-hidden{display:none!important}
 
 /* \u2500\u2500 Left panel body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.lp-body #tab-dom-tree, .lp-body #tab-elements{
+padding-top:4px;
+}
+.lp-body #tab-elements .dt-lbl{
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 14px;
+    letter-spacing: -0.1px;
+}
+.lp-body #tab-elements #elements-root > .dt-row{
+padding-left: 16px!important;
+}
+.lp-body #dom-tree-root .dt-lbl{
+color: var(--content-subtle, #737373);
+font-style: normal;
+font-weight: 400;
+line-height: var(--font-leading-3, 12px); /* 100% */
+letter-spacing: -0.1px;
+}
+.lp-body #dom-tree-root .dt-lbl .dt-tag{
+    color: var(--content-strong, #171717);
+    font-family: "JetBrains Mono";
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 14px;
+    letter-spacing: -0.1px;
+    border-radius: 4px;
+background: var(--bg-surface-subtle, #F5F5F5);
+padding:3px 6px;
+display:inline-block;
+margin-right:4px;
+}
+.lp-body #tab-elements .dt-row .dt-chev.dt-spacer{display:none;}
+.lp-body #tab-dom-tree .dt-row .dt-ico{display:none;}
 .lp-body, .section-components-body{flex:1;overflow-y:auto}
 .lp-body::-webkit-scrollbar, .section-components-body::-webkit-scrollbar{width:3px}
 .lp-body::-webkit-scrollbar-thumb, .section-components-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}
 .tab-pane, .section-components-tab-pane{display:none}.tab-pane.active, .section-components-tab-pane.active{display:block}
 
 /* \u2500\u2500 Component grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-.cg-hdr{padding:8px 10px 4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
-.cg-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;padding:0 8px 8px}
+.cg-hdr{    padding: 12px 12px;
+    text-transform: uppercase;
+    letter-spacing: .06em;
+        color: var(--content-subtle, #737373);
+    font-family: Inter;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: normal;
+    }
+.cg-grid{    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    padding: 0 12px 12px;
+    column-gap: 8px;
+    row-gap: 12px;}
 .cg-item{
-  background:#fff;border:1px solid var(--border);border-radius:8px;cursor:pointer;
-  padding:10px 4px 8px;text-align:center;transition:all .15s;color:var(--text-2);user-select:none
+      background: #fff;
+    cursor: pointer;
+    padding: 15px 11px;
+    text-align: center;
+    transition: all .15s;
+    color: var(--text-2);
+    user-select: none;
+    border-radius: 6px;
+    border: 1px solid var(--border-default, #E5E5E5);
 }
 .cg-item:hover{background:var(--accent-bg);border-color:var(--accent);color:var(--accent-txt);transform:translateY(-1px);box-shadow:0 2px 8px rgba(99,102,241,.15)}
 .cg-item:active{transform:translateY(0);box-shadow:none}
-.cg-icon{font-size:18px;margin-bottom:4px}
-.cg-name{font-size:10px;line-height:1.2}
+.cg-icon{    margin-bottom: 6px;
+    color: var(--content-default, #404040);
+    font-family: Inter;
+    font-size: var(--font-size-sm, 14px);
+    font-style: normal;
+    font-weight: 500;
+    line-height: var(--font-leading-4, 16px);}
+.cg-name{    color: var(--content-subtle, #737373);
+    font-family: Inter;
+    font-size: var(--font-size-xs, 12px);
+    font-style: normal;
+    font-weight: 400;
+    line-height: var(--font-leading-3, 12px);}
 
 /* \u2500\u2500 Section list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 .sec-item{
@@ -768,8 +1074,12 @@ box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.20), 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1p
 }
 .sec-item:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 12px rgba(99,102,241,.12)}
 .sec-thumb{
-  background:var(--bg-sub);height:52px;display:flex;align-items:center;
-  justify-content:center;font-size:22px;border-bottom:1px solid var(--border)
+  background:var(--bg-sub);height:72px;display:flex;align-items:center;
+  justify-content:center;font-size:22px;border-bottom:1px solid var(--border);
+  overflow:hidden;
+}
+.sec-thumb img{
+  width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
 }
 .sec-info{padding:7px 9px}
 .sec-name{font-size:11px;font-weight:600;color:var(--text)}
@@ -785,9 +1095,9 @@ box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.20), 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1p
 #no-sel .ns-icon{font-size:32px;margin-bottom:10px;opacity:.4}
 
 /* \u2500\u2500 Element info header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-#el-info{padding:8px 12px;border-bottom:1px solid var(--border);background:var(--bg-sub);flex-shrink:0}
-#el-info-tag{font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;font-family:monospace}
-#el-info-sel{font-size:10px;color:var(--accent-txt);font-family:monospace;margin-top:2px;word-break:break-all;opacity:.8}
+#el-info{padding:8px 12px;border-bottom:1px solid var(--border);background:var(--bg-sub);flex-shrink:0;display:none;}
+#el-info-tag{font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;font-family:var(--font-mono)}
+#el-info-sel{font-size:10px;color:var(--accent-txt);font-family:var(--font-mono);margin-top:2px;word-break:break-all;opacity:.8}
 
 /* \u2500\u2500 Accordion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 .acc-section{border-bottom:1px solid var(--border-sub)}
@@ -842,7 +1152,7 @@ box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.20), 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1p
 .custom-css-close:hover{background:var(--bg-hover);color:var(--text)}
 #custom-css-modal-textarea{
   width:100%;min-height:360px;max-height:58vh;resize:vertical;border:none;outline:none;
-  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+  font-family:var(--font-mono);
   font-size:12px;line-height:1.5;padding:12px;background:#0b1220;color:#e2e8f0
 }
 .custom-css-actions{
@@ -885,7 +1195,7 @@ select.pr-inp{cursor:pointer;background:#fff}
 .adv-section{padding:10px}
 .adv-row{margin-bottom:8px}
 .adv-key{font-size:10px;color:var(--text-3);margin-bottom:3px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
-.adv-val{font-size:11px;color:var(--text-2);word-break:break-all;background:var(--bg-sub);padding:5px 7px;border-radius:5px;font-family:monospace;border:1px solid var(--border)}
+.adv-val{font-size:11px;color:var(--text-2);word-break:break-all;background:var(--bg-sub);padding:5px 7px;border-radius:5px;font-family:var(--font-mono);border:1px solid var(--border)}
 
 /* \u2500\u2500 Selected element ring + drag affordance \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 /* Selection chrome is injected into the iframe (see injectIframeSelectionStyles); rules here are fallback only */
@@ -919,14 +1229,37 @@ select.pr-inp{cursor:pointer;background:#fff}
 .img-add:hover{border-color:var(--accent);color:var(--accent-txt);background:var(--accent-bg)}
 
 /* \u2500\u2500 Right panel main tabs (Design / States / History) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-#main-tabs{display:flex;border-bottom:1px solid var(--border);background:#fff;flex-shrink:0}
+#main-tabs{
+  display:flex;
+  align-items:center;
+  gap:6px;
+  margin:12px 16px 8px;
+  padding:4px 6px;
+  border-radius:6px;
+  background:var(--base-soft-2,#F0F0F0);
+  flex-shrink:0;
+}
 .main-tab{
-  flex:1;padding:10px 4px;text-align:center;font-size:12px;color:var(--text-3);
-  cursor:pointer;border:none;background:transparent;border-bottom:2px solid transparent;
-  transition:all .15s;font-weight:600;font-family:inherit
+  flex:1;
+  padding:4px 10px;
+  text-align:center;
+  font-size:var(--font-size-sm,14px);
+  font-weight:500;
+  line-height:1.15;
+  color:#404040;
+  white-space:nowrap;
+  cursor:pointer;
+  border:none;
+  background:transparent;
+  transition:all .15s;
+  font-family:inherit;
 }
 .main-tab:hover{color:var(--text-2)}
-.main-tab.active{color:var(--accent-txt);border-bottom-color:var(--accent)}
+.main-tab.active{
+  border-radius:4px;
+  background:var(--bg-interactive-default,#FFF);
+  box-shadow:0 0 1px 0 var(--Black-20,rgba(0,0,0,.20)),0 1px 2px 0 var(--Black-5,rgba(0,0,0,.05)),0 1px 1px 0 rgba(0,0,0,.01);
+}
 .rp-pane{flex:1;overflow-y:auto;overflow-x:hidden;min-width:0;display:none}
 .rp-pane.active{display:block}
 
@@ -935,13 +1268,13 @@ select.pr-inp{cursor:pointer;background:#fff}
 .states-empty i{font-size:30px;display:block;margin-bottom:10px;opacity:.3}
 .state-group{border-bottom:1px solid var(--border-sub)}
 .state-group-sel{
-  padding:8px 12px 3px;font-size:10px;font-family:monospace;
+  padding:8px 12px 3px;font-size:10px;font-family:var(--font-mono);
   color:var(--text-3);font-weight:700;word-break:break-all;letter-spacing:-.01em
 }
 .state-item{display:flex;align-items:center;padding:4px 10px 4px 18px;gap:6px}
 .state-item-label{flex:1;font-size:11px;color:var(--text-2)}
 .state-item-val{
-  font-size:10px;color:var(--accent-txt);font-family:monospace;
+  font-size:10px;color:var(--accent-txt);font-family:var(--font-mono);
   max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
   background:var(--accent-bg);padding:1px 5px;border-radius:3px
 }
@@ -1069,7 +1402,17 @@ select.pr-inp{cursor:pointer;background:#fff}
         <div id="dev-more-menu" class="tb-dev-menu" aria-hidden="true">
           <div class="row row-zoom">
             <label for="dev-zoom-level">Zoom</label>
-            <input id="dev-zoom-level" type="number" min="25" max="200" step="5" value="100" />
+            <div class="zoom-controls">
+              <button type="button" id="dev-zoom-fit-btn" class="dev-zoom-fit-btn" title="Reset zoom to fit window" aria-label="Reset zoom to fit window">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                  <path d="M2.66699 5.33333V2.66667C2.66699 2.48986 2.73723 2.32029 2.86225 2.19526C2.98727 2.07024 3.15684 2 3.33366 2H6.00033" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+                  <path d="M10 2H12.6667C12.8435 2 13.013 2.07024 13.1381 2.19526C13.2631 2.32029 13.3333 2.48986 13.3333 2.66667V5.33333" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+                  <path d="M13.333 10.6667V13.3333C13.333 13.5101 13.2628 13.6797 13.1377 13.8047C13.0127 13.9298 12.8432 14 12.6663 14H10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+                  <path d="M6 14H3.33333C3.15652 14 2.98695 13.9298 2.86193 13.8047C2.73691 13.6797 2.66667 13.5101 2.66667 13.3333V10.6667" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </button>
+              <input id="dev-zoom-level" type="number" min="25" max="200" step="5" value="100" />
+            </div>
           </div>
           <div class="row row-split row-width height-width-row">
             <div class="row" style="margin:0">
@@ -1094,9 +1437,6 @@ select.pr-inp{cursor:pointer;background:#fff}
             <button type="button" class="vp-preset-btn" data-preset="iphone-7">iPhone 7</button>
             <button type="button" class="vp-preset-btn" data-preset="responsive">Responsive</button>
           </div>
-          <div class="ft">
-            <button type="button" class="apply-btn" id="dev-apply-btn">Apply</button>
-          </div>
         </div>
       </div>
       <button class="tb-dk-btn" id="btn-undo" title="Undo (\u2318Z)"><i class="bi bi-arrow-counterclockwise"></i></button>
@@ -1124,15 +1464,16 @@ select.pr-inp{cursor:pointer;background:#fff}
         <span class="tb-save-txt"></span>
         <span id="tb-save-time" class="tb-save-time"></span>
       </div>
+      <button class="tb-fin-btn" id="btn-save">Save Changes</button>
       <div class="tb-dev-3btns">
       <button class="tb-dk-btn active" id="btn-mode-editor" onclick="setMode('editor')" title="Edit mode \u2014 click elements to edit"><i class="bi bi-pencil"></i></button>
-      <button class="tb-dk-btn" id="btn-mode-nav" onclick="setMode('navigate')" title="Navigate mode \u2014 interact with page normally"><i class="bi bi-magic"></i></button>
+      <button class="tb-dk-btn" id="btn-mode-nav" onclick="setMode('navigate')" title="Navigate mode \u2014 interact with page normally"><i class="bi bi-cursor"></i></button>
       <button class="tb-dk-btn" title="Comments"><i class="bi bi-chat-dots"></i></button>
       </div>
-      <button class="tb-sim-btn" id="btn-simulate" onclick="simulateExperiment()"><i class="bi bi-lightning-charge-fill"></i> Simulate</button>
-      <button class="tb-fin-btn" id="btn-save">Save Changes</button>
+      <button class="tb-sim-btn" id="btn-simulate" onclick="simulateExperiment()">See Preview</button>
+      
       <!-- btn-close: kept for JS event listener -->
-      <button class="tb-fin-btn" id="btn-close">Close</button>
+      <button class="tb-fin-btn" id="btn-close">Exit Editor</button>
     </div>
 
     <!-- url-bar: hidden, kept for JS compatibility -->
@@ -1170,22 +1511,28 @@ select.pr-inp{cursor:pointer;background:#fff}
 
       <!-- Elements -->
       <div class="lp-sec lp-sec-no-border">
-        <div class="lp-sec-hd">
-          <span class="lp-sec-hd-left">Elements <i style="display:none" class="bi bi-info-circle lp-info-icon" title="Page elements"></i></span>
-          <button class="lp-add-btn" id="btn-add-element" title="Add element">+ Add</button>
-        </div>
-
         <!-- Search (hidden, kept for JS) -->
-      <div>
-        <input type="search" id="comp-search" placeholder="Search layers\u2026" autocomplete="off">
+      <div class="lp-search-container">
+        <div class="lp-search-field">
+          <span class="lp-search-icon" aria-hidden="true">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <path d="M11.333 11.3333L13.9997 13.9999" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+              <path d="M12.6667 7.33333C12.6667 4.38781 10.2789 2 7.33333 2C4.38781 2 2 4.38781 2 7.33333C2 10.2789 4.38781 12.6667 7.33333 12.6667C10.2789 12.6667 12.6667 10.2789 12.6667 7.33333Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </span>
+          <input type="search" id="comp-search" placeholder="Search" autocomplete="off">
+        </div>
       </div>
 
 
       <!-- Tabs (hidden, kept for JS) -->
-      <div class="lp-tabs" >
-      <div class="lp-tab active" onclick="switchLeftTab('elements')">Elements</div>
+      <div class="lp-tabs-container">
+      <div class="lp-tabs">
+        <div class="lp-tab active" onclick="switchLeftTab('elements')">Elements</div>
         <div class="lp-tab" onclick="switchLeftTab('dom-tree')">DOM Tree</div>
       </div>
+      <button class="lp-add-btn" id="btn-add-element" title="Add element">+ Add</button>
+      </div>
 
       </div>
 
@@ -1214,11 +1561,11 @@ select.pr-inp{cursor:pointer;background:#fff}
 
       <!-- Floating toolbar for selected element (positioned over iframe) -->
       <div id="selection-floater" aria-label="Selection actions">
+        <button type="button" class="sf-btn" id="sf-add" title="Add element"><i class="bi bi-plus-lg"></i></button>
+        <span class="sf-sep"></span>
         <button type="button" class="sf-btn" id="sf-move-up" title="Move up"><i class="bi bi-arrow-up"></i></button>
         <button type="button" class="sf-btn" id="sf-move-down" title="Move down"><i class="bi bi-arrow-down"></i></button>
         <span class="sf-sep"></span>
-        <button type="button" class="sf-btn" id="sf-resize" disabled title="Resize (coming soon)"><i class="bi bi-arrows-angle-expand"></i></button>
-        <button type="button" class="sf-btn" id="sf-rotate" disabled title="Rotate (coming soon)"><i class="bi bi-arrow-repeat"></i></button>
         <button type="button" class="sf-btn" id="sf-dup" title="Duplicate"><i class="bi bi-files"></i></button>
         <button type="button" class="sf-btn" id="sf-hide" title="Hide"><i class="bi bi-eye-slash"></i></button>
         <button type="button" class="sf-btn" id="sf-del" title="Delete"><i class="bi bi-trash"></i></button>
@@ -1242,14 +1589,16 @@ select.pr-inp{cursor:pointer;background:#fff}
 
     <!-- Right panel -->
     <div id="right-panel">
-      <div id="section-components-panel" style="display:none">
+      <div id="section-components-panel">
         <!-- Left-tab controls moved here -->
-        <div class="section-components-tabs">
-          <div class="lp-tab" onclick="switchSectionComponentsTab('components')">Components</div>
-          <div class="lp-tab" onclick="switchSectionComponentsTab('sections')">Sections</div>
-          <div class="lp-tab close-section-components-panel" onclick="toggleSectionComponentsPanel()"> Close</div>
+        <div class="lp-tabs-container section-components-tabs-container">
+          <div class="lp-tabs">
+            <div class="lp-tab" onclick="switchSectionComponentsTab('components')">Components</div>
+            <div class="lp-tab" onclick="switchSectionComponentsTab('sections')">Sections</div>
+          </div>
+          <div class="lp-tab close-section-components-panel collapsed" onclick="toggleSectionComponentsBody()" title="Toggle components list"><i class="bi bi-chevron-down"></i></div>
         </div>
-        <div class="lp-body">
+        <div class="lp-body collapsed">
           <div id="tab-components" class="tab-pane"></div>
           <div id="tab-sections" class="tab-pane"></div>
         </div>
@@ -1262,7 +1611,7 @@ select.pr-inp{cursor:pointer;background:#fff}
       <!-- \u2500\u2500 3 main tabs \u2500\u2500 -->
       <div id="main-tabs">
         <button class="main-tab active" onclick="switchMainTab('design')">Design</button>
-        <button class="main-tab"        onclick="switchMainTab('states')">States</button>
+        <button class="main-tab" style="display:none"        onclick="switchMainTab('states')">States</button>
         <button class="main-tab"        onclick="switchMainTab('history')">History</button>
       </div>
 
@@ -1452,26 +1801,35 @@ if (window.Vvveb && window.Vvveb.Components) {
 
 // \u2500\u2500 CRO definitions + Base components \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 var CRO_SECTIONS = ${sectionsJson};
+var CRO_SECTION_IMAGE_ROUTE = ${JSON.stringify(CRO_SECTION_IMAGE_ROUTE)};
+
+function renderCroSectionThumb(sec) {
+  if (sec && sec.image) {
+    return '<img src="' + CRO_SECTION_IMAGE_ROUTE + sec.image + '" alt="' + esc(sec.name || '') + '" loading="lazy">';
+  }
+  return sec && sec.icon ? sec.icon : '\u{1F4E6}';
+}
 
 var BASE_COMPONENTS = [
-  { name:'Heading',    icon:'bi-type-h1',              html:'<h2>Your Heading</h2>' },
-  { name:'Paragraph',  icon:'bi-paragraph',             html:'<p>Your text here. Click to edit.</p>' },
-  { name:'Image',      icon:'bi-image',                 html:'<img src="https://placehold.co/600x300/1a1a2e/a78bfa?text=Image" alt="Image" style="max-width:100%">' },
-  { name:'Button',     icon:'bi-hand-index',            html:'<button class="btn btn-primary">Click me</button>' },
-  { name:'Link',       icon:'bi-link-45deg',            html:'<a href="#">Link text</a>' },
-  { name:'Divider',    icon:'bi-dash-lg',               html:'<hr>' },
-  { name:'List',       icon:'bi-list-ul',               html:'<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>' },
-  { name:'Video',      icon:'bi-play-circle',           html:'<video controls style="max-width:100%"><source src="" type="video/mp4"></video>' },
-  { name:'Form',       icon:'bi-ui-radios',             html:'<form class="p-3"><div class="mb-3"><label class="form-label">Name</label><input type="text" class="form-control"></div><div class="mb-3"><label class="form-label">Email</label><input type="email" class="form-control"></div><button type="submit" class="btn btn-primary">Submit</button></form>' },
-  { name:'Input',      icon:'bi-input-cursor-text',     html:'<input type="text" class="form-control" placeholder="Enter text">' },
-  { name:'Textarea',   icon:'bi-textarea-resize',       html:'<textarea class="form-control" rows="3" placeholder="Enter text"></textarea>' },
-  { name:'Select',     icon:'bi-menu-button-wide',      html:'<select class="form-select"><option>Option 1</option><option>Option 2</option></select>' },
-  { name:'Card',       icon:'bi-card-text',             html:'<div class="card"><div class="card-body"><h5 class="card-title">Card Title</h5><p class="card-text">Card content here.</p><a href="#" class="btn btn-primary">Action</a></div></div>' },
-  { name:'Alert',      icon:'bi-exclamation-triangle',  html:'<div class="alert alert-info" role="alert">This is an alert message.</div>' },
-  { name:'Badge',      icon:'bi-tag',                   html:'<span class="badge bg-primary">New</span>' },
-  { name:'Container',  icon:'bi-layout-three-columns',  html:'<div class="container py-4"><div class="row g-3"><div class="col"><p>Column 1</p></div><div class="col"><p>Column 2</p></div><div class="col"><p>Column 3</p></div></div></div>' },
-  { name:'2 Cols',     icon:'bi-layout-split',          html:'<div class="row g-3"><div class="col-md-6"><p>Left column</p></div><div class="col-md-6"><p>Right column</p></div></div>' },
-  { name:'Navbar',     icon:'bi-layout-navbar',         html:'<nav class="navbar navbar-expand-lg navbar-dark bg-dark"><div class="container-fluid"><a class="navbar-brand" href="#">Brand</a></div></nav>' },
+  { name:'Heading',    icon:'bi-type-h1',              defaultAccSection:'typography', html:'<h2 style="margin:0 0 12px;font-size:28px;font-weight:700;line-height:1.2;color:#0f172a">Your Heading</h2>' },
+  { name:'Paragraph',  icon:'bi-paragraph',             defaultAccSection:'typography', html:'<p style="margin:0 0 12px;font-size:16px;line-height:1.6;color:#334155">Your text here. Click to edit.</p>' },
+  { name:'Image',      icon:'bi-image',                 defaultAccSection:'image', html:'<img src="https://placehold.co/600x300/1a1a2e/a78bfa?text=Image" alt="Image" style="display:block;max-width:100%;height:auto;border-radius:8px">' },
+  { name:'Button',     icon:'bi-hand-index',            defaultAccSection:'background', html:'<button type="button" style="display:inline-block;padding:10px 20px;font-size:14px;font-weight:600;line-height:1.2;color:#fff;background:#2563eb;border:none;border-radius:6px;cursor:pointer">Click me</button>' },
+  { name:'Link',       icon:'bi-link-45deg',            defaultAccSection:'typography', html:'<a href="#" style="font-size:16px;font-weight:500;color:#2563eb;text-decoration:underline">Link text</a>' },
+  { name:'Divider',    icon:'bi-dash-lg',               defaultAccSection:'background', html:'<hr style="margin:16px 0;border:none;border-top:1px solid #e2e8f0">' },
+  { name:'List',       icon:'bi-list-ul',               defaultAccSection:'typography', html:'<ul style="margin:0 0 12px;padding-left:20px;font-size:16px;line-height:1.6;color:#334155"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>' },
+  { name:'Video',      icon:'bi-play-circle',           defaultAccSection:'content', html:'<video controls style="display:block;width:100%;max-width:100%;border-radius:8px;background:#000"><source src="" type="video/mp4"></video>' },
+  { name:'Youtube Video', icon:'bi-youtube',            defaultAccSection:'content', html:'<iframe data-youtube-id="" src="about:blank" title="YouTube video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="display:block;width:100%;max-width:100%;aspect-ratio:16/9;border:none;border-radius:8px;background:#000"></iframe>' },
+  { name:'Vimeo Video', icon:'bi-vimeo',                defaultAccSection:'content', html:'<iframe data-vimeo-id="" src="about:blank" title="Vimeo video" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="display:block;width:100%;max-width:100%;aspect-ratio:16/9;border:none;border-radius:8px;background:#000"></iframe>' },
+  { name:'Form',       icon:'bi-ui-radios',             defaultAccSection:'content', html:'<form style="padding:16px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;max-width:400px;box-sizing:border-box"><div style="margin-bottom:12px"><label style="display:block;margin-bottom:4px;font-size:14px;font-weight:500;color:#334155">Name</label><input type="text" style="width:100%;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;box-sizing:border-box"></div><div style="margin-bottom:12px"><label style="display:block;margin-bottom:4px;font-size:14px;font-weight:500;color:#334155">Email</label><input type="email" style="width:100%;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;box-sizing:border-box"></div><button type="submit" style="display:inline-block;padding:10px 20px;font-size:14px;font-weight:600;color:#fff;background:#2563eb;border:none;border-radius:6px;cursor:pointer">Submit</button></form>' },
+  { name:'Input',      icon:'bi-input-cursor-text',     defaultAccSection:'size', html:'<input type="text" placeholder="Enter text" style="width:100%;max-width:320px;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;box-sizing:border-box">' },
+  { name:'Textarea',   icon:'bi-textarea-resize',       defaultAccSection:'size', html:'<textarea rows="3" placeholder="Enter text" style="width:100%;max-width:320px;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;box-sizing:border-box;resize:vertical"></textarea>' },
+  { name:'Select',     icon:'bi-menu-button-wide',      defaultAccSection:'size', html:'<select style="width:100%;max-width:320px;padding:8px 12px;font-size:14px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;box-sizing:border-box"><option>Option 1</option><option>Option 2</option></select>' },
+  { name:'Card',       icon:'bi-card-text',             defaultAccSection:'shadow', html:'<div style="border:1px solid #e2e8f0;border-radius:8px;background:#fff;overflow:hidden;max-width:360px;box-shadow:0 1px 3px rgba(0,0,0,.08)"><div style="padding:20px"><h5 style="margin:0 0 8px;font-size:18px;font-weight:700;color:#0f172a">Card Title</h5><p style="margin:0 0 16px;font-size:14px;line-height:1.5;color:#475569">Card content here.</p><a href="#" style="display:inline-block;padding:8px 16px;font-size:14px;font-weight:600;color:#fff;background:#2563eb;border-radius:6px;text-decoration:none">Action</a></div></div>' },
+  { name:'Alert',      icon:'bi-exclamation-triangle',  defaultAccSection:'background', html:'<div role="alert" style="padding:12px 16px;font-size:14px;line-height:1.5;color:#0c4a6e;background:#e0f2fe;border:1px solid #7dd3fc;border-radius:6px">This is an alert message.</div>' },
+  { name:'Badge',      icon:'bi-tag',                   defaultAccSection:'typography', html:'<span style="display:inline-flex;align-items:center;padding:4px 10px;font-size:12px;font-weight:600;line-height:1;letter-spacing:.02em;color:#fff;background:#2563eb;border-radius:999px">New</span>' },
+  { name:'Container',  icon:'bi-layout-three-columns',  defaultAccSection:'spacing', html:'<div style="width:100%;max-width:960px;margin:0 auto;padding:16px;box-sizing:border-box"><div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px"><div style="padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px"><p style="margin:0">Column 1</p></div><div style="padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px"><p style="margin:0">Column 2</p></div><div style="padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px"><p style="margin:0">Column 3</p></div></div></div>' },
+  { name:'2 Cols',     icon:'bi-layout-split',          defaultAccSection:'spacing', html:'<div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%;box-sizing:border-box"><div style="padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;min-height:80px;box-sizing:border-box"><p style="margin:0">Left column</p></div><div style="padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;min-height:80px;box-sizing:border-box"><p style="margin:0">Right column</p></div></div>' },
 ];
 
 // \u2500\u2500 PostMessage bridge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
@@ -1625,7 +1983,7 @@ var leftPanelCollapsed = false;
 var viewportPreset  = 'desktop';
 var viewportWidth   = 1440;
 var viewportHeight  = 1024;
-var viewportZoom    = 1;
+var viewportZoom    = null;
 var selectedEl      = null;
 /** Stable selector fingerprint for resilient selection recovery after DOM churn. */
 var selectedElFingerprint = '';
@@ -1645,6 +2003,7 @@ var iframeSyncRetryTimer = null;
 var iframeSyncAttempts = 0;
 var selectionScrollWin = null;
 var selectionResizeBound = false;
+var selectionPanelScrollBound = false;
 var clickAttachDoc = null;
 var hoverAttachDoc = null;
 var changeObserver = null;
@@ -1896,16 +2255,22 @@ function clampViewportNumber(v, fallback, min, max) {
 
 function getViewportFitZoom() {
   var panel = document.getElementById('iframe-panel');
-  var available = panel ? Math.max(260, panel.clientWidth - 24) : viewportWidth;
-  if (!viewportWidth || viewportWidth <= 0) return 1;
-  return Math.min(1, available / viewportWidth);
+  if (!panel || !viewportWidth || viewportWidth <= 0 || !viewportHeight || viewportHeight <= 0) return 1;
+  var availW = Math.max(260, panel.clientWidth);
+  var availH = Math.max(200, panel.clientHeight);
+  return Math.min(1, availW / viewportWidth, availH / viewportHeight);
 }
 
 function getAppliedViewportZoom() {
-  var z = Number(viewportZoom);
-  if (!Number.isFinite(z) || z <= 0) z = 1;
-  z = Math.max(0.25, Math.min(2, z));
-  return Math.min(z, getViewportFitZoom());
+  var fit = getViewportFitZoom();
+  var z = viewportZoom != null ? Number(viewportZoom) : fit;
+  if (!Number.isFinite(z) || z <= 0) z = fit;
+  return Math.max(0.25, Math.min(2, z));
+}
+
+function resetViewportZoomToFit() {
+  viewportZoom = null;
+  applyViewportFrame();
 }
 
 function updateViewportLabel() {
@@ -1926,20 +2291,28 @@ function syncViewportMenuControls() {
       presetButtons[i].classList.toggle('active', key === viewportPreset);
     }
   }
-  if (widthInp) widthInp.value = String(viewportWidth);
-  if (heightInp) heightInp.value = String(viewportHeight);
+  if (widthInp && document.activeElement !== widthInp) widthInp.value = String(viewportWidth);
+  if (heightInp && document.activeElement !== heightInp) heightInp.value = String(viewportHeight);
   if (zoomInp) zoomInp.value = String(Math.round(getAppliedViewportZoom() * 100));
 }
 
 function applyViewportFrame() {
   var frame = document.getElementById('device-frame');
   var iframe = document.getElementById('iframeId');
+  var panel = document.getElementById('iframe-panel');
   if (!frame) return;
   frame.className = currentDevice;
   frame.style.width = viewportWidth + 'px';
   frame.style.height = viewportHeight + 'px';
   frame.style.maxWidth = 'none';
-  frame.style.zoom = String(getAppliedViewportZoom());
+  var zoom = getAppliedViewportZoom();
+  var fit = getViewportFitZoom();
+  frame.style.zoom = String(zoom);
+  if (panel) {
+    var zoomedIn = zoom > fit + 0.001;
+    panel.style.overflow = zoomedIn ? 'auto' : 'hidden';
+    panel.style.alignItems = zoomedIn ? 'flex-start' : 'center';
+  }
   if (iframe) {
     iframe.style.height = viewportHeight + 'px';
     iframe.style.minHeight = viewportHeight + 'px';
@@ -1956,6 +2329,7 @@ function setViewportPreset(presetKey) {
   viewportWidth = preset.width;
   viewportHeight = preset.height;
   currentDevice = preset.device || 'desktop';
+  viewportZoom = null;
   ['desktop','tablet','mobile'].forEach(function(d) {
     document.getElementById('dev-' + d).classList.toggle('active', d === currentDevice);
   });
@@ -1968,20 +2342,26 @@ function setDevice(device) {
   var preset = DEVICE_PRESETS[device] || DEVICE_PRESETS.desktop;
   viewportWidth = preset.width;
   viewportHeight = preset.height;
+  viewportZoom = null;
   ['desktop','tablet','mobile'].forEach(function(d) {
     document.getElementById('dev-' + d).classList.toggle('active', d === device);
   });
   applyViewportFrame();
 }
 
-function setViewportCustomFromInputs() {
+function setViewportCustomFromInputs(opts) {
+  opts = opts || {};
   var widthInp = document.getElementById('dev-custom-width');
   var heightInp = document.getElementById('dev-custom-height');
-  var zoomInp = document.getElementById('dev-zoom-level');
-  viewportWidth = clampViewportNumber(widthInp ? widthInp.value : '', viewportWidth, 240, 3840);
-  viewportHeight = clampViewportNumber(heightInp ? heightInp.value : '', viewportHeight, 320, 3840);
-  var z = clampViewportNumber(zoomInp ? zoomInp.value : '', Math.round(getAppliedViewportZoom() * 100), 25, 200);
-  viewportZoom = z / 100;
+  var rawW = widthInp ? widthInp.value : '';
+  var rawH = heightInp ? heightInp.value : '';
+  if (!opts.force) {
+    if (widthInp && document.activeElement === widthInp && rawW === '') return;
+    if (heightInp && document.activeElement === heightInp && rawH === '') return;
+  }
+  viewportWidth = clampViewportNumber(rawW, viewportWidth, 240, 3840);
+  viewportHeight = clampViewportNumber(rawH, viewportHeight, 320, 3840);
+  viewportZoom = null;
   viewportPreset = 'custom';
   currentDevice = viewportWidth <= 480 ? 'mobile' : (viewportWidth <= 1024 ? 'tablet' : 'desktop');
   ['desktop','tablet','mobile'].forEach(function(d) {
@@ -1990,6 +2370,22 @@ function setViewportCustomFromInputs() {
   applyViewportFrame();
 }
 
+var customViewportApplyTimer = null;
+function scheduleCustomViewportApply() {
+  if (customViewportApplyTimer) clearTimeout(customViewportApplyTimer);
+  customViewportApplyTimer = setTimeout(function() {
+    customViewportApplyTimer = null;
+    setViewportCustomFromInputs();
+  }, 300);
+}
+function applyCustomViewportNow() {
+  if (customViewportApplyTimer) {
+    clearTimeout(customViewportApplyTimer);
+    customViewportApplyTimer = null;
+  }
+  setViewportCustomFromInputs({ force: true });
+}
+
 function closeViewportMenu() {
   var menu = document.getElementById('dev-more-menu');
   if (!menu) return;
@@ -2010,8 +2406,10 @@ function bindViewportControls() {
   var menu = document.getElementById('dev-more-menu');
   var leftPanelToggleLabel = document.getElementById('left-panel-toggle-label');
   var presetButtons = document.querySelectorAll('#dev-preset-list .vp-preset-btn');
-  var applyBtn = document.getElementById('dev-apply-btn');
+  var widthInp = document.getElementById('dev-custom-width');
+  var heightInp = document.getElementById('dev-custom-height');
   var zoomInp = document.getElementById('dev-zoom-level');
+  var zoomFitBtn = document.getElementById('dev-zoom-fit-btn');
   var viewportBtn = document.querySelector('.tb-viewport');
   function updateLeftPanelToggleLabel() {
     if (!leftPanelToggleLabel) return;
@@ -2041,11 +2439,21 @@ function bindViewportControls() {
     e.stopPropagation();
     toggleViewportMenu();
   });
-  if (applyBtn) applyBtn.addEventListener('click', function(e) {
-    e.preventDefault();
-    setViewportCustomFromInputs();
-    closeViewportMenu();
-  });
+  if (widthInp) {
+    widthInp.addEventListener('input', scheduleCustomViewportApply);
+    widthInp.addEventListener('change', applyCustomViewportNow);
+  }
+  if (heightInp) {
+    heightInp.addEventListener('input', scheduleCustomViewportApply);
+    heightInp.addEventListener('change', applyCustomViewportNow);
+  }
+  if (zoomFitBtn) {
+    zoomFitBtn.addEventListener('click', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      resetViewportZoomToFit();
+    });
+  }
   if (zoomInp) {
     zoomInp.addEventListener('change', function() {
       var z = clampViewportNumber(zoomInp.value, Math.round(getAppliedViewportZoom() * 100), 25, 200);
@@ -2080,7 +2488,7 @@ function bindViewportControls() {
 function switchLeftTab(tab) {
   if (tab !== 'elements' && tab !== 'dom-tree') return;
   currentLeftTab = tab;
-  var tabs = document.querySelectorAll('.lp-tabs .lp-tab');
+  var tabs = document.querySelectorAll('#left-panel .lp-tabs .lp-tab');
   for (var i = 0; i < tabs.length; i++) {
     var oc = tabs[i].getAttribute('onclick') || '';
     tabs[i].classList.toggle('active', oc.indexOf("switchLeftTab('" + tab + "')") >= 0);
@@ -2092,18 +2500,26 @@ function switchLeftTab(tab) {
   }
   var inp = document.getElementById('comp-search');
   if (tab === 'elements') {
-    inp.placeholder = 'Search elements\u2026';
     renderElementsTree(inp.value);
   } else if (tab === 'dom-tree') {
-    inp.placeholder = 'Search layers\u2026';
     renderDomTree(inp.value);
   }
 }
 
+function expandSectionComponentsBody() {
+  var panel = document.getElementById('section-components-panel');
+  if (!panel) return;
+  var body = panel.querySelector('.lp-body');
+  var toggle = panel.querySelector('.close-section-components-panel');
+  if (body) body.classList.remove('collapsed');
+  if (toggle) toggle.classList.remove('collapsed');
+}
+
 function switchSectionComponentsTab(tab) {
   if (tab !== 'components' && tab !== 'sections') return;
+  expandSectionComponentsBody();
   currentSectionComponentsTab = tab;
-  var tabs = document.querySelectorAll('.section-components-tabs .lp-tab');
+  var tabs = document.querySelectorAll('#section-components-panel .lp-tabs .lp-tab');
   for (var i = 0; i < tabs.length; i++) {
     var oc = tabs[i].getAttribute('onclick') || '';
     tabs[i].classList.toggle('active', oc.indexOf("switchSectionComponentsTab('" + tab + "')") >= 0);
@@ -2113,29 +2529,67 @@ function switchSectionComponentsTab(tab) {
   if (compPane) compPane.classList.toggle('active', tab === 'components');
   if (secPane) secPane.classList.toggle('active', tab === 'sections');
   var inp = document.getElementById('comp-search');
-  if (inp) inp.placeholder = tab === 'sections' ? 'Search sections\u2026' : 'Search components\u2026';
+  if (inp) inp.placeholder = tab === 'sections' ? 'Search' : 'Search';
   renderSidebar(inp ? inp.value : '');
 }
 
+function toggleSectionComponentsBody() {
+  var panel = document.getElementById('section-components-panel');
+  if (!panel) return;
+  var body = panel.querySelector('.lp-body');
+  var toggle = panel.querySelector('.close-section-components-panel');
+  if (!body) return;
+  var collapsed = body.classList.toggle('collapsed');
+  if (toggle) toggle.classList.toggle('collapsed', collapsed);
+}
+
 function toggleSectionComponentsPanel(forceVisible) {
   var panel = document.getElementById('section-components-panel');
   if (!panel) return;
-  var shouldShow =
+  var body = panel.querySelector('.lp-body');
+  var toggle = panel.querySelector('.close-section-components-panel');
+  if (!body) return;
+  var isCollapsed = body.classList.contains('collapsed');
+  var shouldExpand =
     typeof forceVisible === 'boolean'
       ? forceVisible
-      : panel.style.display === 'none';
-  panel.style.display = shouldShow ? '' : 'none';
-  if (shouldShow) {
+      : isCollapsed;
+  body.classList.toggle('collapsed', !shouldExpand);
+  if (toggle) toggle.classList.toggle('collapsed', !shouldExpand);
+  if (shouldExpand) {
     switchSectionComponentsTab(currentSectionComponentsTab || 'components');
   }
 }
 
+function handleAddElementClick(e) {
+  if (e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  toggleSectionComponentsPanel();
+}
+
 // \u2500\u2500 Accordion toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 function toggleAcc(name) {
   var sec = document.getElementById('acc-' + name);
   if (sec) sec.classList.toggle('open');
 }
 
+function focusDesignAccordionSection(name) {
+  if (!name) return;
+  if (currentMainTab !== 'design') switchMainTab('design');
+  var sec = document.getElementById('acc-' + name);
+  if (!sec || sec.style.display === 'none') return;
+  sec.classList.add('open');
+  requestAnimationFrame(function() {
+    try {
+      sec.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    } catch(_) {
+      sec.scrollIntoView(true);
+    }
+  });
+}
+
 // \u2500\u2500 Main tab switching (Design / States / History) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 function switchMainTab(tab) {
   currentMainTab = tab;
@@ -2200,9 +2654,19 @@ var PROP_META = {
   'pp-id':      {label:'ID',                      cssProp:null},
   'pp-href':    {label:'Href',                    cssProp:null},
   'pp-target':  {label:'Target',                  cssProp:null},
+  'pp-rel':     {label:'Rel',                     cssProp:null},
+  'pp-download':{label:'Download',                cssProp:null},
+  'pp-link-title': {label:'Title',                cssProp:null},
+  'pp-hreflang':{label:'Hreflang',                cssProp:null},
+  'pp-link-type': {label:'Link type',             cssProp:null},
+  'pp-referrerpolicy': {label:'Referrer policy',  cssProp:null},
   'pp-src':     {label:'Src',                     cssProp:null},
+  'pp-video-src': {label:'Src',                   cssProp:null},
+  'pp-youtube-id': {label:'YouTube video ID',     cssProp:null},
+  'pp-vimeo-id': {label:'Vimeo video ID',       cssProp:null},
   'pp-alt':     {label:'Alt',                     cssProp:null},
   'pp-ph':      {label:'Placeholder',             cssProp:null},
+  'pp-value':   {label:'Value',                   cssProp:null},
   'pp-text':    {label:'Inner text',              cssProp:null},
   'pp-html':    {label:'Inner HTML',              cssProp:null},
   'pp-mob-css': {label:'Mobile CSS',              cssProp:null},
@@ -2225,9 +2689,19 @@ function getOriginalValue(inputId, el) {
     case 'pp-id':      return el.id             || '';
     case 'pp-href':    return el.getAttribute('href')        || '';
     case 'pp-target':  return el.getAttribute('target')      || '';
+    case 'pp-rel':     return el.getAttribute('rel')         || '';
+    case 'pp-download': return el.getAttribute('download')   || '';
+    case 'pp-link-title': return el.getAttribute('title')    || '';
+    case 'pp-hreflang': return el.getAttribute('hreflang')  || '';
+    case 'pp-link-type': return el.getAttribute('type')      || '';
+    case 'pp-referrerpolicy': return el.getAttribute('referrerpolicy') || '';
     case 'pp-src':     return el.getAttribute('src')         || '';
+    case 'pp-video-src': return getVideoSrc(el);
+    case 'pp-youtube-id': return getYoutubeVideoId(el);
+    case 'pp-vimeo-id': return getVimeoVideoId(el);
     case 'pp-alt':     return el.getAttribute('alt')         || '';
     case 'pp-ph':      return el.getAttribute('placeholder') || '';
+    case 'pp-value':   return getFormControlValue(el);
     case 'pp-css':     return el.getAttribute('style')       || '';
     case 'pp-mob-css': return el.dataset.mobileCss           || '';
     case 'pp-tab-css': return el.dataset.tabletCss           || '';
@@ -2364,9 +2838,19 @@ function revertChangeOnDom(change) {
       case 'pp-css':    orig ? el.setAttribute('style', orig) : el.removeAttribute('style'); break;
       case 'pp-href':   orig ? el.setAttribute('href',   orig) : el.removeAttribute('href');   break;
       case 'pp-target': orig ? el.setAttribute('target', orig) : el.removeAttribute('target'); break;
+      case 'pp-rel':    orig ? el.setAttribute('rel',    orig) : el.removeAttribute('rel');    break;
+      case 'pp-download': orig ? el.setAttribute('download', orig) : el.removeAttribute('download'); break;
+      case 'pp-link-title': orig ? el.setAttribute('title', orig) : el.removeAttribute('title'); break;
+      case 'pp-hreflang': orig ? el.setAttribute('hreflang', orig) : el.removeAttribute('hreflang'); break;
+      case 'pp-link-type': orig ? el.setAttribute('type', orig) : el.removeAttribute('type'); break;
+      case 'pp-referrerpolicy': orig ? el.setAttribute('referrerpolicy', orig) : el.removeAttribute('referrerpolicy'); break;
       case 'pp-src':    orig ? el.setAttribute('src',    orig) : el.removeAttribute('src');    break;
+      case 'pp-video-src': orig ? setVideoSrc(el, orig) : setVideoSrc(el, ''); break;
+      case 'pp-youtube-id': orig ? setYoutubeVideoId(el, orig) : setYoutubeVideoId(el, ''); break;
+      case 'pp-vimeo-id': orig ? setVimeoVideoId(el, orig) : setVimeoVideoId(el, ''); break;
       case 'pp-alt':    orig ? el.setAttribute('alt',    orig) : el.removeAttribute('alt');    break;
       case 'pp-ph':     orig ? el.setAttribute('placeholder', orig) : el.removeAttribute('placeholder'); break;
+      case 'pp-value':  el.value = orig; break;
       case 'pp-mob-css': el.dataset.mobileCss = orig; break;
       case 'pp-tab-css': el.dataset.tabletCss = orig; break;
       default: console.warn('[V2] revertChangeOnDom: no revert handler for', change.inputId);
@@ -2390,11 +2874,28 @@ function syncDesignInput(change) {
 function removeStateChange(idx) {
   var change = stateChanges[idx];
   if (!change) return;
+  if (
+    change.isStructuralLive &&
+    normalizeChangesetType({ type: change.structuralType }) === 'insert'
+  ) {
+    var instId = historyInsertInstanceId(null, change);
+    if (instId) {
+      removeEditorInsertByInstanceId(instId);
+      commitStateChangesForActiveVariation();
+      renderStatesTab();
+      if (currentMainTab === 'history') renderHistoryTab();
+      try {
+        delete varHtmlCache[activeVarId];
+      } catch(_) {}
+      saveCurrentVariationHtml();
+      recomputeEditorDirty();
+      scheduleDomTreeRefresh();
+      return;
+    }
+  }
   if (change.isStructuralLive) {
-    removeSessionStructuralRowByTimestamp(
-      change.structuralVarId || activeVarId,
-      change.vveTs,
-    );
+    var varId = change.structuralVarId || activeVarId;
+    removeSessionStructuralRowByTimestamp(varId, change.vveTs);
     stateChanges.splice(idx, 1);
     commitStateChangesForActiveVariation();
     renderStatesTab();
@@ -2492,10 +2993,28 @@ function captureChangesetSnapshotBeforeApply(entry, el, iframeDoc) {
       break;
     case 'attribute':
       if (entry.attribute) {
+        var attrVal = el.getAttribute(entry.attribute);
+        if (
+          String(entry.attribute).toLowerCase() === 'src' &&
+          el.tagName &&
+          el.tagName.toLowerCase() === 'video'
+        ) {
+          attrVal = getVideoSrc(el);
+        } else if (
+          String(entry.attribute).toLowerCase() === 'data-youtube-id' &&
+          isYoutubeVideoElement(el)
+        ) {
+          attrVal = getYoutubeVideoId(el);
+        } else if (
+          String(entry.attribute).toLowerCase() === 'data-vimeo-id' &&
+          isVimeoVideoElement(el)
+        ) {
+          attrVal = getVimeoVideoId(el);
+        }
         appliedChangesetSnapshots[k] = {
           kind: 'attribute',
           name: entry.attribute,
-          v: el.getAttribute(entry.attribute),
+          v: attrVal,
         };
       }
       break;
@@ -2544,6 +3063,13 @@ function revertChangesetEntryOnDom(entry) {
   var iframeDoc = document.getElementById('iframeId').contentDocument;
   if (!iframeDoc) return false;
   var k = entrySnapshotKey(entry);
+  if (normalizeChangesetType(entry) === 'insert') {
+    var instId = instanceIdFromInsertHtml(entry.html);
+    delete appliedChangesetSnapshots[k];
+    if (instId && removeEditorInsertByInstanceId(instId)) return false;
+    softReloadEditorIframe();
+    return true;
+  }
   var snap = appliedChangesetSnapshots[k];
   var el = querySelectorResolved(iframeDoc, entry.selector);
   if (!snap || !el) {
@@ -2562,7 +3088,23 @@ function revertChangesetEntryOnDom(entry) {
     if (snap.v) el.setAttribute('style', snap.v);
     else el.removeAttribute('style');
   } else if (snap.kind === 'attribute' && snap.name) {
-    if (snap.v == null || snap.v === '') el.removeAttribute(snap.name);
+    if (
+      String(snap.name).toLowerCase() === 'src' &&
+      el.tagName &&
+      el.tagName.toLowerCase() === 'video'
+    ) {
+      setVideoSrc(el, snap.v == null ? '' : snap.v);
+    } else if (
+      String(snap.name).toLowerCase() === 'data-youtube-id' &&
+      isYoutubeVideoElement(el)
+    ) {
+      setYoutubeVideoId(el, snap.v == null ? '' : snap.v);
+    } else if (
+      String(snap.name).toLowerCase() === 'data-vimeo-id' &&
+      isVimeoVideoElement(el)
+    ) {
+      setVimeoVideoId(el, snap.v == null ? '' : snap.v);
+    } else if (snap.v == null || snap.v === '') el.removeAttribute(snap.name);
     else el.setAttribute(snap.name, snap.v);
   } else if (snap.kind === 'display') el.style.display = snap.v;
   else {
@@ -2643,6 +3185,42 @@ function formatHistoryRelativeTime(ts) {
   return day + ' day' + (day === 1 ? '' : 's') + ' ago';
 }
 
+function findSessionInsertRowForChange(change) {
+  if (!change) return null;
+  var varId = change.structuralVarId || activeVarId;
+  var arr = varId && sessionStructuralChainRowsByVarId[varId];
+  if (!arr || !arr.length) return null;
+  var instId = '';
+  try {
+    if (change.targetEl && change.targetEl.getAttribute) {
+      instId = change.targetEl.getAttribute('data-vve-instance') || '';
+    }
+  } catch(_) {}
+  for (var i = 0; i < arr.length; i++) {
+    var row = arr[i];
+    if (!row || normalizeChangesetType(row) !== 'insert') continue;
+    if (change.vveTs && row.vveTs === change.vveTs) return row;
+    if (instId && instanceIdFromInsertHtml(row.html) === instId) return row;
+  }
+  return null;
+}
+
+function historyInsertInstanceId(entry, change) {
+  if (entry && normalizeChangesetType(entry) === 'insert') {
+    return instanceIdFromInsertHtml(entry.html);
+  }
+  if (change && change.isStructuralLive && normalizeChangesetType({ type: change.structuralType }) === 'insert') {
+    var row = findSessionInsertRowForChange(change);
+    if (row) return instanceIdFromInsertHtml(row.html);
+    try {
+      if (change.targetEl && change.targetEl.getAttribute) {
+        return change.targetEl.getAttribute('data-vve-instance') || '';
+      }
+    } catch(_) {}
+  }
+  return '';
+}
+
 function getUnifiedHistoryItems() {
   var out = [];
   var v = getActiveVariationForHistory();
@@ -2652,6 +3230,7 @@ function getUnifiedHistoryItems() {
     out.push({
       source: 'saved',
       idx: i,
+      insertInstanceId: historyInsertInstanceId(e, null),
       selector: (e && e.selector) || '(unknown)',
       label: historyEntryTypeLabel(e),
       value: historyEntryValuePreview(e),
@@ -2668,6 +3247,7 @@ function getUnifiedHistoryItems() {
     out.push({
       source: 'live',
       idx: j,
+      insertInstanceId: historyInsertInstanceId(null, c),
       selector: c.selector || '(unknown)',
       label: c.label || 'Live change',
       value: c.value != null ? String(c.value).slice(0, 120) : '',
@@ -2701,11 +3281,15 @@ function renderHistoryTab() {
     var title = 'Edit - ' + (it.label || 'Change');
     var avatarLabel = it.source === 'live' ? 'Y' : 'S';
     var timeText = formatHistoryRelativeTime(it.ts) || (it.tsLabel || '');
+    var removeOnclick = it.insertInstanceId
+      ? 'removeHistoryItem(&quot;' + esc(it.source) + '&quot;,' + it.idx + ', event, &quot;' + esc(it.insertInstanceId) + '&quot;)'
+      : 'removeHistoryItem(&quot;' + esc(it.source) + '&quot;,' + it.idx + ', event)';
     html +=
       '<div class="history-item" role="button" tabindex="0" title="Jump to element in iframe" onclick="focusHistoryItem(&quot;' +
       esc(it.source) +
       '&quot;,' +
       it.idx +
+      (it.insertInstanceId ? ', &quot;' + esc(it.insertInstanceId) + '&quot;' : '') +
       ')">' +
       '<span class="history-dot"></span>' +
       '<div class="history-card">' +
@@ -2716,18 +3300,16 @@ function renderHistoryTab() {
       '</div>' +
       '<div class="history-time">' + esc(timeText || 'n/a') + '</div>' +
       '</div>' +
-      '<button type="button" class="state-remove history-remove" title="Remove this change" onclick="removeHistoryItem(&quot;' +
-      esc(it.source) +
-      '&quot;,' +
-      it.idx +
-      ', event)">&#x2715;</button>' +
+      '<button type="button" class="state-remove history-remove" title="Remove this change" onclick="' +
+      removeOnclick +
+      '">&#x2715;</button>' +
       '</div>';
   }
   html += '</div>';
   container.innerHTML = html;
 }
 
-function focusHistoryItem(source, idx) {
+function focusHistoryItem(source, idx, insertInstanceId) {
   if (source === 'live') {
     var change = stateChanges[idx];
     if (!change || !change.selector) return;
@@ -2735,6 +3317,20 @@ function focusHistoryItem(source, idx) {
       var iframe = document.getElementById('iframeId');
       var iframeDoc = iframe && iframe.contentDocument;
       if (!iframeDoc) return;
+      var instId = insertInstanceId || historyInsertInstanceId(null, change);
+      if (instId) {
+        var safeInst = String(instId).split('"').join('\\"');
+        var insertedEl = iframeDoc.querySelector('[data-vve-instance="' + safeInst + '"]');
+        if (insertedEl) {
+          selectElement(insertedEl);
+          try {
+            insertedEl.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
+          } catch(_) {
+            insertedEl.scrollIntoView();
+          }
+          return;
+        }
+      }
       var el = querySelectorResolved(iframeDoc, change.selector);
       if (!el) return;
       selectElement(el);
@@ -2746,12 +3342,25 @@ function focusHistoryItem(source, idx) {
     } catch(_) {}
     return;
   }
-  focusHistoryChangeset(idx);
+  focusHistoryChangeset(idx, insertInstanceId);
 }
 
-function removeHistoryItem(source, idx, evt) {
+function removeHistoryItem(source, idx, evt, insertInstanceId) {
+  if (evt && evt.stopPropagation) evt.stopPropagation();
+  if (insertInstanceId) {
+    removeEditorInsertByInstanceId(insertInstanceId);
+    commitStateChangesForActiveVariation();
+    try {
+      delete varHtmlCache[activeVarId];
+    } catch(_) {}
+    saveCurrentVariationHtml();
+    recomputeEditorDirty();
+    if (currentMainTab === 'states') renderStatesTab();
+    if (currentMainTab === 'history') renderHistoryTab();
+    scheduleDomTreeRefresh();
+    return;
+  }
   if (source === 'live') {
-    if (evt && evt.stopPropagation) evt.stopPropagation();
     removeStateChange(idx);
     if (currentMainTab === 'history') renderHistoryTab();
     return;
@@ -2790,7 +3399,7 @@ function isStyleOnlyChangesetEntry(entry) {
   return false;
 }
 
-function focusHistoryChangeset(idx) {
+function focusHistoryChangeset(idx, insertInstanceId) {
   var v = getActiveVariationForHistory();
   if (!v) return;
   var arr = parseVariationChangesets(v);
@@ -2801,6 +3410,20 @@ function focusHistoryChangeset(idx) {
     var iframe = document.getElementById('iframeId');
     var iframeDoc = iframe && iframe.contentDocument;
     if (!iframeDoc) return;
+    var instId = insertInstanceId || historyInsertInstanceId(entry, null);
+    if (instId) {
+      var safeInst = String(instId).split('"').join('\\"');
+      var insertedEl = iframeDoc.querySelector('[data-vve-instance="' + safeInst + '"]');
+      if (insertedEl) {
+        selectElement(insertedEl);
+        try {
+          insertedEl.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
+        } catch(_) {
+          insertedEl.scrollIntoView();
+        }
+        return;
+      }
+    }
     var el = querySelectorResolved(iframeDoc, entry.selector);
     if (!el) return;
     selectElement(el);
@@ -2842,6 +3465,10 @@ function removeHistoryChangeset(idx, evt) {
   var removedIsStructural = removedType === 'insert' || removedType === 'reorder';
   if (didReload) {
     /* revertChangesetEntryOnDom already kicked off iframe reload */
+  } else if (removedType === 'insert') {
+    try {
+      saveCurrentVariationHtml();
+    } catch(_) {}
   } else if (removedIsStructural) {
     softReloadEditorIframe();
   } else if (hasStructuralRemaining) {
@@ -3510,6 +4137,14 @@ function loadPage(proxyUrl) {
 // \u2500\u2500 Variation management \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 var VAR_COLORS = ['#0069A8','#CA3500','#00786F','#ec4899','#14b8a6','#f59e0b','#8b5cf6','#ef4444'];
 
+function varColorAlpha(hex, alpha) {
+  var h = hex.slice(1);
+  return 'rgba(' +
+    parseInt(h.slice(0, 2), 16) + ',' +
+    parseInt(h.slice(2, 4), 16) + ',' +
+    parseInt(h.slice(4, 6), 16) + ',' + alpha + ')';
+}
+
 function renderVariationTabs() {
   var container = document.getElementById('variation-tabs');
   container.innerHTML = '';
@@ -3521,7 +4156,12 @@ function renderVariationTabs() {
     btn.onclick = function() { switchVariation(v._id); };
     var dot = document.createElement('span');
     dot.className = 'var-dot';
-    dot.style.background = VAR_COLORS[i % VAR_COLORS.length];
+    var color = VAR_COLORS[i % VAR_COLORS.length];
+    btn.setAttribute('data-color', color);
+    btn.style.setProperty('--var-tab-color', color);
+    dot.setAttribute('data-color', color);
+    dot.style.background = color;
+    dot.style.boxShadow = '0 0 0 3px ' + varColorAlpha(color, 0.5);
     btn.appendChild(dot);
     btn.appendChild(document.createTextNode(label));
     container.appendChild(btn);
@@ -3722,6 +4362,29 @@ function removeSessionStructuralRowByTimestamp(varId, ts) {
   }
 }
 
+function removeStructuralStateChangeByTimestamp(varId, ts) {
+  if (!varId || !ts) return;
+  for (var i = stateChanges.length - 1; i >= 0; i--) {
+    var c = stateChanges[i];
+    if (
+      c &&
+      c.isStructuralLive &&
+      c.vveTs === ts &&
+      (c.structuralVarId || activeVarId) === varId
+    ) {
+      stateChanges.splice(i, 1);
+    }
+  }
+}
+
+/** Undo a session insert when its root node is deleted \u2014 avoids orphan remove rows that match re-inserts at the same slot. */
+function cancelSessionInsertForElement(varId, el) {
+  if (!varId || !el) return false;
+  var inst = el.getAttribute && el.getAttribute('data-vve-instance');
+  if (!inst || !String(inst).trim()) return false;
+  return removeEditorInsertByInstanceId(inst, { skipDom: true, varId: varId });
+}
+
 /** One States-tab row -> Conversion.io chain-set shape (matches applyChangesetEntry). */
 function stateChangeToChainSet(c) {
   if (!c || !c.selector) return null;
@@ -3747,12 +4410,32 @@ function stateChangeToChainSet(c) {
       return { selector: c.selector, type: 'attribute', attribute: 'href', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     case 'pp-target':
       return { selector: c.selector, type: 'attribute', attribute: 'target', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
+    case 'pp-rel':
+      return { selector: c.selector, type: 'attribute', attribute: 'rel', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
+    case 'pp-download':
+      return { selector: c.selector, type: 'attribute', attribute: 'download', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
+    case 'pp-link-title':
+      return { selector: c.selector, type: 'attribute', attribute: 'title', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
+    case 'pp-hreflang':
+      return { selector: c.selector, type: 'attribute', attribute: 'hreflang', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
+    case 'pp-link-type':
+      return { selector: c.selector, type: 'attribute', attribute: 'type', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
+    case 'pp-referrerpolicy':
+      return { selector: c.selector, type: 'attribute', attribute: 'referrerpolicy', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     case 'pp-src':
       return { selector: c.selector, type: 'attribute', attribute: 'src', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
+    case 'pp-video-src':
+      return { selector: c.selector, type: 'attribute', attribute: 'src', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
+    case 'pp-youtube-id':
+      return { selector: c.selector, type: 'attribute', attribute: 'data-youtube-id', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
+    case 'pp-vimeo-id':
+      return { selector: c.selector, type: 'attribute', attribute: 'data-vimeo-id', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     case 'pp-alt':
       return { selector: c.selector, type: 'attribute', attribute: 'alt', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     case 'pp-ph':
       return { selector: c.selector, type: 'attribute', attribute: 'placeholder', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
+    case 'pp-value':
+      return { selector: c.selector, type: 'attribute', attribute: 'value', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     case 'pp-css':
       return { selector: c.selector, type: 'attribute', attribute: 'style', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     case 'pp-mob-css':
@@ -4012,7 +4695,25 @@ function applyChangesetEntry(entry, iframeDoc) {
     case 'attribute':
       if (entry.attribute && entry.value != null) {
         if (String(entry.attribute).toLowerCase() === 'style') break;
-        el.setAttribute(entry.attribute, entry.value);
+        if (
+          String(entry.attribute).toLowerCase() === 'src' &&
+          el.tagName &&
+          el.tagName.toLowerCase() === 'video'
+        ) {
+          setVideoSrc(el, entry.value);
+        } else if (
+          String(entry.attribute).toLowerCase() === 'data-youtube-id' &&
+          isYoutubeVideoElement(el)
+        ) {
+          setYoutubeVideoId(el, entry.value);
+        } else if (
+          String(entry.attribute).toLowerCase() === 'data-vimeo-id' &&
+          isVimeoVideoElement(el)
+        ) {
+          setVimeoVideoId(el, entry.value);
+        } else {
+          el.setAttribute(entry.attribute, entry.value);
+        }
       }
       break;
     case 'insert': {
@@ -4021,9 +4722,12 @@ function applyChangesetEntry(entry, iframeDoc) {
       if (structuralDedupeKey) appliedStructuralChangesetKeys[structuralDedupeKey] = true;
       break;
     }
-    case 'remove':
+    case 'remove': {
+      var inst = el.getAttribute && el.getAttribute('data-vve-instance');
+      if (inst && String(entry.selector || '').indexOf('data-vve-instance') < 0) break;
       el.style.display = 'none';
       break;
+    }
     case 'reorder': {
       var target = entry.targetSelector ? querySelectorResolved(iframeDoc, entry.targetSelector) : null;
       if (!target || !el.parentNode || !target.parentNode) break;
@@ -4243,7 +4947,11 @@ function deselectElement(options) {
     document.getElementById('rp-accordion').style.display = 'none';
     document.getElementById('bc-path').textContent = 'No element selected';
     document.getElementById('bc-path').style.color = 'var(--text-3)';
-    switchMainTab('design');
+    var preserveMainTab =
+      !!(options && options.preserveMainTab) ||
+      currentMainTab === 'history' ||
+      currentMainTab === 'states';
+    if (!preserveMainTab) switchMainTab('design');
     if (!skipToolbarUpdate) updateSelectionToolbar();
     syncDomTreeSelection();
   } finally {
@@ -4330,6 +5038,30 @@ function setDragHandleActive(on) {
   }
 }
 
+function getIframeElementVisualRect(el) {
+  var iframe = document.getElementById('iframeId');
+  if (!el || !iframe) return null;
+  // Element rects from the iframe document are in iframe viewport space, not the shell viewport.
+  var elR = el.getBoundingClientRect();
+  var iframeR = iframe.getBoundingClientRect();
+  var cw = iframe.clientWidth || iframe.offsetWidth || 1;
+  var ch = iframe.clientHeight || iframe.offsetHeight || 1;
+  var scaleX = iframeR.width / cw;
+  var scaleY = iframeR.height / ch;
+  var top = iframeR.top + elR.top * scaleY;
+  var left = iframeR.left + elR.left * scaleX;
+  var width = elR.width * scaleX;
+  var height = elR.height * scaleY;
+  return {
+    left: left,
+    top: top,
+    width: width,
+    height: height,
+    right: left + width,
+    bottom: top + height,
+  };
+}
+
 function positionSelectionToolbar() {
   var bar = document.getElementById('selection-floater');
   var iframe = document.getElementById('iframeId');
@@ -4341,16 +5073,20 @@ function positionSelectionToolbar() {
     renderRightPanel(liveSelected);
     syncDomTreeSelection();
   }
-  var elR = selectedEl.getBoundingClientRect();
-  var iframeR = iframe.getBoundingClientRect();
+  var elR = getIframeElementVisualRect(selectedEl);
+  if (!elR) return;
   var panelR = panel.getBoundingClientRect();
-  var left = iframeR.left - panelR.left + elR.left + elR.width / 2 - bar.offsetWidth / 2;
-  var top = iframeR.top - panelR.top + elR.top - bar.offsetHeight - 8;
-  if (top < 6) top = iframeR.top - panelR.top + elR.bottom + 8;
-  var maxL = Math.max(6, panel.clientWidth - bar.offsetWidth - 8);
-  left = Math.max(6, Math.min(left, maxL));
+  var panelScrollLeft = panel.scrollLeft || 0;
+  var panelScrollTop = panel.scrollTop || 0;
+  var left = elR.left - panelR.left + panelScrollLeft + elR.width / 2 - bar.offsetWidth / 2;
+  var top = elR.top - panelR.top + panelScrollTop - bar.offsetHeight - 8;
+  if (top < panelScrollTop + 6) top = elR.bottom - panelR.top + panelScrollTop + 8;
+  var minL = panelScrollLeft + 6;
+  var maxL = panelScrollLeft + Math.max(6, panel.clientWidth - bar.offsetWidth - 8);
+  left = Math.max(minL, Math.min(left, maxL));
   bar.style.left = Math.round(left) + 'px';
   bar.style.top = Math.round(top) + 'px';
+  syncMoveFloaterButtons(selectedEl);
 }
 
 function updateSelectionToolbar() {
@@ -4368,6 +5104,7 @@ function updateSelectionToolbar() {
   if (selectedEl !== liveSelected) selectedEl = liveSelected;
   selectedElFingerprint = buildSelector(liveSelected);
   bar.style.display = 'flex';
+  syncMoveFloaterButtons(liveSelected);
   requestAnimationFrame(function() { positionSelectionToolbar(); });
 }
 
@@ -4384,6 +5121,11 @@ function bindSelectionToolbarScroll() {
   }
   selectionScrollWin = w;
   w.addEventListener('scroll', onFloaterScroll, true);
+  var panel = document.getElementById('iframe-panel');
+  if (panel && !selectionPanelScrollBound) {
+    selectionPanelScrollBound = true;
+    panel.addEventListener('scroll', onFloaterScroll, { passive: true });
+  }
   if (!selectionResizeBound) {
     selectionResizeBound = true;
     window.addEventListener('resize', onFloaterScroll);
@@ -4405,7 +5147,6 @@ function scrollIframeElementIntoView(el) {
 function selectElementFromTree(el) {
   selectElement(el);
   scrollIframeElementIntoView(el);
-  if (currentMainTab !== 'design') switchMainTab('design');
 }
 
 function duplicateSelectedEl() {
@@ -4478,12 +5219,26 @@ function toggleHideSelectedEl() {
 
 function deleteSelectedEl() {
   if (!selectedEl || !selectedEl.parentNode) return;
+  var inst = selectedEl.getAttribute && selectedEl.getAttribute('data-vve-instance');
+  if (inst && activeVarId && removeEditorInsertByInstanceId(inst)) {
+    saveCurrentVariationHtml();
+    recomputeEditorDirty();
+    deselectElement();
+    scheduleDomTreeRefresh();
+    if (currentMainTab === 'history') renderHistoryTab();
+    return;
+  }
   var delSel = buildSelector(selectedEl);
+  var cancelledInsert =
+    activeVarId && cancelSessionInsertForElement(activeVarId, selectedEl);
   selectedEl.remove();
-  if (activeVarId) {
+  if (activeVarId && !cancelledInsert) {
     var delRow = { selector: delSel, type: 'remove' };
     appendSessionStructuralChainRow(activeVarId, delRow);
     logStructuralStateChange(delRow, 'Deleted via toolbar', 'Element removed', null);
+  } else if (cancelledInsert) {
+    commitStateChangesForActiveVariation();
+    if (currentMainTab === 'history') renderHistoryTab();
   }
   saveCurrentVariationHtml();
   recomputeEditorDirty();
@@ -4510,14 +5265,13 @@ function syncDomTreeSelection() {
 }
 
 function scheduleDomTreeRefresh() {
-  if (currentLeftTab !== 'elements' && currentLeftTab !== 'dom-tree') return;
   if (domTreeRefreshTimer) clearTimeout(domTreeRefreshTimer);
   domTreeRefreshTimer = setTimeout(function() {
     domTreeRefreshTimer = null;
     var inp = document.getElementById('comp-search');
     var q = inp ? inp.value : '';
-    if (currentLeftTab === 'elements') renderElementsTree(q);
-    else if (currentLeftTab === 'dom-tree') renderDomTree(q);
+    renderElementsTree(q);
+    if (currentLeftTab === 'dom-tree') renderDomTree(q);
   }, 150);
 }
 
@@ -4540,6 +5294,162 @@ function domTreePathSegment(el) {
   return tag + '[' + idx + ']';
 }
 
+function instanceIdFromInsertHtml(html) {
+  var m = String(html || '').match(/data-vve-instance=["']([^"']+)["']/);
+  return m ? m[1] : '';
+}
+
+function resolveInsertedElementFromEntry(doc, entry) {
+  if (!doc || !entry) return null;
+  var instId = instanceIdFromInsertHtml(entry.html);
+  if (!instId) return null;
+  try {
+    var safe = String(instId).split('"').join('\\"');
+    return doc.querySelector('[data-vve-instance="' + safe + '"]');
+  } catch(_) {
+    return null;
+  }
+}
+
+function removeInsertFromDomByEntry(entry, iframeDoc) {
+  if (!entry || !iframeDoc) return false;
+  var insertedEl = resolveInsertedElementFromEntry(iframeDoc, entry);
+  if (!insertedEl || !insertedEl.parentNode) return false;
+  if (
+    selectedEl &&
+    (selectedEl === insertedEl || (insertedEl.contains && insertedEl.contains(selectedEl)))
+  ) {
+    deselectElement();
+  }
+  insertedEl.remove();
+  return true;
+}
+
+/** Remove an editor insert everywhere (DOM + session + saved changesets + live history), keyed by data-vve-instance. */
+function removeEditorInsertByInstanceId(instId, opts) {
+  if (!instId || !String(instId).trim()) return false;
+  opts = opts || {};
+  var varId = opts.varId || activeVarId;
+  if (!varId) return false;
+  var needle = 'data-vve-instance="' + String(instId).split('"').join('\\"') + '"';
+  var didWork = false;
+
+  if (!opts.skipDom) {
+    var iframeDoc = document.getElementById('iframeId').contentDocument;
+    if (iframeDoc) {
+      try {
+        var safe = String(instId).split('"').join('\\"');
+        var el = iframeDoc.querySelector('[data-vve-instance="' + safe + '"]');
+        if (el && el.parentNode) {
+          if (
+            selectedEl &&
+            (selectedEl === el || (el.contains && el.contains(selectedEl)))
+          ) {
+            deselectElement();
+          }
+          el.remove();
+          didWork = true;
+        }
+      } catch(_) {}
+    }
+  }
+
+  var sessionArr = sessionStructuralChainRowsByVarId[varId];
+  if (sessionArr && sessionArr.length) {
+    for (var i = sessionArr.length - 1; i >= 0; i--) {
+      var row = sessionArr[i];
+      if (!row || normalizeChangesetType(row) !== 'insert' || !row.html) continue;
+      if (String(row.html).indexOf(needle) < 0) continue;
+      var ts = row.vveTs;
+      try {
+        var k = structuralChangesetDedupKey(row);
+        if (k) delete appliedStructuralChangesetKeys[k];
+      } catch(_) {}
+      sessionArr.splice(i, 1);
+      removeStructuralStateChangeByTimestamp(varId, ts);
+      didWork = true;
+    }
+  }
+
+  var v = variations.find(function(x) { return x._id === varId; });
+  if (v) {
+    var saved = parseVariationChangesets(v);
+    var savedChanged = false;
+    for (var si = saved.length - 1; si >= 0; si--) {
+      var entry = saved[si];
+      if (!entry || normalizeChangesetType(entry) !== 'insert' || !entry.html) continue;
+      if (String(entry.html).indexOf(needle) < 0) continue;
+      try {
+        delete appliedChangesetSnapshots[entrySnapshotKey(entry)];
+      } catch(_) {}
+      saved.splice(si, 1);
+      savedChanged = true;
+      didWork = true;
+    }
+    if (savedChanged && varId === activeVarId) persistActiveVariationChangesets(saved);
+  }
+
+  for (var j = stateChanges.length - 1; j >= 0; j--) {
+    var c = stateChanges[j];
+    if (!c || !c.isStructuralLive) continue;
+    if (normalizeChangesetType({ type: c.structuralType }) !== 'insert') continue;
+    var match = false;
+    try {
+      if (c.targetEl && c.targetEl.getAttribute && c.targetEl.getAttribute('data-vve-instance') === instId) {
+        match = true;
+      }
+    } catch(_) {}
+    if (match) {
+      stateChanges.splice(j, 1);
+      didWork = true;
+    }
+  }
+
+  return didWork;
+}
+
+/** Live DOM nodes inserted via the visual editor, ordered by changeset/session insert order. */
+function collectEditorInsertedElements(doc) {
+  if (!doc || !doc.body) return [];
+  var byInst = {};
+  var els;
+  try {
+    els = doc.querySelectorAll('[data-vve-instance]');
+  } catch(_) {
+    els = [];
+  }
+  for (var i = 0; i < els.length; i++) {
+    var el = els[i];
+    if (!el || el.nodeType !== 1) continue;
+    var inst = el.getAttribute('data-vve-instance');
+    if (inst && String(inst).trim()) byInst[String(inst)] = el;
+  }
+
+  var ordered = [];
+  var seen = {};
+  function addEl(el) {
+    if (!el || !el.isConnected) return;
+    var k = el.getAttribute && el.getAttribute('data-vve-instance');
+    if (!k || seen[k]) return;
+    seen[k] = true;
+    ordered.push(el);
+  }
+
+  if (activeVarId) {
+    var variation = variations.find(function(v) { return v._id === activeVarId; });
+    if (variation) {
+      var cs = buildPersistedChainSetsForVariation(variation);
+      for (var j = 0; j < cs.length; j++) {
+        var row = cs[j];
+        if (normalizeChangesetType(row) !== 'insert') continue;
+        var instId = instanceIdFromInsertHtml(row.html);
+        if (instId && byInst[instId]) addEl(byInst[instId]);
+      }
+    }
+  }
+  return ordered;
+}
+
 function renderElementsTree(filterRaw) {
   var filterText = (filterRaw || '').toLowerCase().trim();
   var root = document.getElementById('elements-root');
@@ -4547,14 +5457,10 @@ function renderElementsTree(filterRaw) {
   var iframe = document.getElementById('iframeId');
   var doc = iframe && iframe.contentDocument;
   if (!isIframeDomReady(iframe, doc)) {
-    root.innerHTML = '<div class="dt-muted">Load a page to see the elements.</div>';
+    root.innerHTML = '<div class="dt-muted">Load a page to see added elements.</div>';
     return;
   }
 
-  function skippable(el) {
-    return isDomTreeSkippableTagName(el.tagName);
-  }
-
   function nodeIcon(tag) {
     tag = (tag || '').toLowerCase();
     if (/^h[1-6]$/.test(tag)) return 'bi bi-type-h1';
@@ -4574,50 +5480,10 @@ function renderElementsTree(filterRaw) {
     return tag.toUpperCase();
   }
 
-  function isListableNode(el) {
-    if (!el || el.nodeType !== 1) return false;
-    if (skippable(el)) return false;
-    var tag = (el.tagName || '').toLowerCase();
-    if (tag !== 'svg') {
-      var p = el.parentElement;
-      while (p) {
-        if ((p.tagName || '').toLowerCase() === 'svg') return false;
-        p = p.parentElement;
-      }
-    }
-    return true;
-  }
-
-  var nodes = [];
-  var i, cursor;
-  try {
-    cursor = doc.createTreeWalker(doc.body, NodeFilter.SHOW_ELEMENT, null);
-  } catch(_) {
-    cursor = null;
-  }
-  if (cursor) {
-    while (cursor.nextNode()) {
-      var node = cursor.currentNode;
-      if (isListableNode(node)) nodes.push(node);
-      if (nodes.length > 4000) break;
-    }
-  } else {
-    function collectFlat(el) {
-      if (!el || !el.children) return;
-      for (var j = 0; j < el.children.length; j++) {
-        var c = el.children[j];
-        if (!isListableNode(c)) continue;
-        nodes.push(c);
-        if (nodes.length > 4000) return;
-        collectFlat(c);
-        if (nodes.length > 4000) return;
-      }
-    }
-    collectFlat(doc.body);
-  }
+  var nodes = collectEditorInsertedElements(doc);
 
   root.innerHTML = '';
-  for (i = 0; i < nodes.length; i++) {
+  for (var i = 0; i < nodes.length; i++) {
     var el = nodes[i];
     var lblText = labelFor(el);
     if (filterText && lblText.toLowerCase().indexOf(filterText) < 0) continue;
@@ -4655,14 +5521,39 @@ function renderElementsTree(filterRaw) {
 
   if (!root.querySelector('.dt-row')) {
     root.innerHTML = filterText
-      ? '<div class="dt-muted">No elements match your search.</div>'
-      : '<div class="dt-muted">No elements found.</div>';
+      ? '<div class="dt-muted">No added elements match your search.</div>'
+      : '<div class="dt-muted">No elements added yet. Use Components or Sections to insert.</div>';
   }
   root.onmouseleave = function() {
     clearTreeHoverHighlight();
   };
 }
 
+function domTreeLabelSuffix(el) {
+  if (el.id != null && el.id !== '') return '#' + String(el.id).slice(0, 40);
+  var cn = el.className && typeof el.className === 'string' ? el.className.trim() : '';
+  if (cn) {
+    var parts = cn.split(/s+/).filter(function(x) { return x.indexOf('vve-') !== 0; }).slice(0, 2).join('.');
+    if (parts) return '.' + parts.slice(0, 56);
+  }
+  return '';
+}
+
+function domTreeLabelFor(el) {
+  return (el.tagName || '').toLowerCase() + domTreeLabelSuffix(el);
+}
+
+function setDomTreeLabelContent(lbl, el) {
+  var tag = (el.tagName || '').toLowerCase();
+  lbl.textContent = '';
+  var tagSpan = document.createElement('span');
+  tagSpan.className = 'dt-tag';
+  tagSpan.textContent = tag;
+  lbl.appendChild(tagSpan);
+  var suffix = domTreeLabelSuffix(el);
+  if (suffix) lbl.appendChild(document.createTextNode(suffix));
+}
+
 function renderDomTree(filterRaw) {
   var filterText = (filterRaw || '').toLowerCase().trim();
   var root = document.getElementById('dom-tree-root');
@@ -4680,14 +5571,7 @@ function renderDomTree(filterRaw) {
   }
 
   function labelFor(el) {
-    var tag = el.tagName.toLowerCase();
-    if (el.id != null && el.id !== '') return tag + '#' + String(el.id).slice(0, 40);
-    var cn = el.className && typeof el.className === 'string' ? el.className.trim() : '';
-    if (cn) {
-      var parts = cn.split(/s+/).filter(function(x) { return x.indexOf('vve-') !== 0; }).slice(0, 2).join('.');
-      if (parts) return tag + '.' + parts.slice(0, 56);
-    }
-    return tag;
+    return domTreeLabelFor(el);
   }
 
   function skippable(el) {
@@ -4764,7 +5648,7 @@ function renderDomTree(filterRaw) {
 
     var lbl = document.createElement('div');
     lbl.className = 'dt-lbl';
-    lbl.textContent = labelFor(el);
+    setDomTreeLabelContent(lbl, el);
     lbl.title = buildSelector(el);
 
     row.appendChild(chev);
@@ -4815,6 +5699,189 @@ function pr2(l1, i1, l2, i2) {
          '<div class="pr2-item"><div class="pr2-lbl">'+l2+'</div>'+i2+'</div></div>';
 }
 function subLbl(text) { return '<div class="sub-lbl">'+text+'</div>'; }
+
+function isLinkElement(el) {
+  if (!el || el.nodeType !== 1) return false;
+  var tag = (el.tagName || '').toLowerCase();
+  if (tag === 'a') return true;
+  try {
+    return el.getAttribute && el.getAttribute('role') === 'link';
+  } catch(_) {}
+  return false;
+}
+
+function isFormControlElement(el) {
+  if (!el || el.nodeType !== 1) return false;
+  var tag = (el.tagName || '').toLowerCase();
+  return tag === 'input' || tag === 'textarea' || tag === 'select';
+}
+
+function getFormControlValue(el) {
+  if (!isFormControlElement(el)) return '';
+  try {
+    return el.value != null ? String(el.value) : '';
+  } catch(_) {
+    return '';
+  }
+}
+
+function getVideoSrc(el) {
+  if (!el || el.nodeType !== 1) return '';
+  try {
+    var source = el.querySelector && el.querySelector('source');
+    if (source && source.getAttribute('src')) return source.getAttribute('src') || '';
+    return el.getAttribute('src') || '';
+  } catch(_) {
+    return '';
+  }
+}
+
+function setVideoSrc(el, value) {
+  if (!el || el.nodeType !== 1) return;
+  var v = value == null ? '' : String(value);
+  try {
+    var source = el.querySelector && el.querySelector('source');
+    if (source) {
+      if (v) source.setAttribute('src', v);
+      else source.removeAttribute('src');
+    } else if (v) {
+      el.setAttribute('src', v);
+    } else {
+      el.removeAttribute('src');
+    }
+    try {
+      el.load();
+    } catch(_) {}
+  } catch(_) {}
+}
+
+function isYoutubeVideoElement(el) {
+  if (!el || el.nodeType !== 1) return false;
+  if ((el.tagName || '').toLowerCase() !== 'iframe') return false;
+  if (el.hasAttribute && el.hasAttribute('data-youtube-id')) return true;
+  var src = el.getAttribute('src') || '';
+  return src.indexOf('youtube.com/embed/') !== -1 || src.indexOf('youtu.be/') !== -1;
+}
+
+function normalizeYoutubeVideoId(input) {
+  var raw = String(input || '').trim();
+  if (!raw) return '';
+  var m = raw.match(new RegExp('(?:youtube\\.com/(?:embed/|watch\\?(?:.*&)?v=|shorts/|live/)|youtu\\.be/)([A-Za-z0-9_-]{11})', 'i'));
+  if (m) return m[1];
+  var bare = raw.match(/^([A-Za-z0-9_-]{11})$/);
+  return bare ? bare[1] : raw;
+}
+
+function getYoutubeVideoId(el) {
+  if (!isYoutubeVideoElement(el)) return '';
+  try {
+    var explicit = el.getAttribute('data-youtube-id');
+    if (explicit != null && String(explicit).trim()) return String(explicit).trim();
+    var src = el.getAttribute('src') || '';
+    var m = src.match(new RegExp('(?:youtube\\.com/embed/|youtu\\.be/)([A-Za-z0-9_-]{11})', 'i'));
+    return m ? m[1] : '';
+  } catch(_) {
+    return '';
+  }
+}
+
+function setYoutubeVideoId(el, value) {
+  if (!el || el.nodeType !== 1) return;
+  var id = normalizeYoutubeVideoId(value);
+  try {
+    if (id) {
+      el.setAttribute('data-youtube-id', id);
+      el.setAttribute('src', 'https://www.youtube.com/embed/' + id);
+    } else {
+      el.removeAttribute('data-youtube-id');
+      el.setAttribute('src', 'about:blank');
+    }
+  } catch(_) {}
+}
+
+function isVimeoVideoElement(el) {
+  if (!el || el.nodeType !== 1) return false;
+  if ((el.tagName || '').toLowerCase() !== 'iframe') return false;
+  if (el.hasAttribute && el.hasAttribute('data-vimeo-id')) return true;
+  var src = el.getAttribute('src') || '';
+  return src.indexOf('player.vimeo.com/video/') !== -1 || src.indexOf('vimeo.com/video/') !== -1;
+}
+
+function isEmbeddedVideoIframe(el) {
+  return isYoutubeVideoElement(el) || isVimeoVideoElement(el);
+}
+
+function normalizeVimeoVideoId(input) {
+  var raw = String(input || '').trim();
+  if (!raw) return '';
+  var m = raw.match(new RegExp('(?:player\\.vimeo\\.com/video/|vimeo\\.com/(?:video/)?)([0-9]+)', 'i'));
+  if (m) return m[1];
+  var bare = raw.match(/^([0-9]+)$/);
+  return bare ? bare[1] : raw.replace(/[^d]/g, '');
+}
+
+function getVimeoVideoId(el) {
+  if (!isVimeoVideoElement(el)) return '';
+  try {
+    var explicit = el.getAttribute('data-vimeo-id');
+    if (explicit != null && String(explicit).trim()) return String(explicit).trim();
+    var src = el.getAttribute('src') || '';
+    var m = src.match(new RegExp('(?:player\\.vimeo\\.com/video/|vimeo\\.com/video/)([0-9]+)', 'i'));
+    return m ? m[1] : '';
+  } catch(_) {
+    return '';
+  }
+}
+
+function setVimeoVideoId(el, value) {
+  if (!el || el.nodeType !== 1) return;
+  var id = normalizeVimeoVideoId(value);
+  try {
+    if (id) {
+      el.setAttribute('data-vimeo-id', id);
+      el.setAttribute('src', 'https://player.vimeo.com/video/' + id);
+    } else {
+      el.removeAttribute('data-vimeo-id');
+      el.setAttribute('src', 'about:blank');
+    }
+  } catch(_) {}
+}
+
+function buildAnchorContentFieldsHtml(el) {
+  return (
+    subLbl('Link attributes') +
+    pr('Href', '<input class="pr-inp" id="pp-href" type="text" value="'+esc(el.getAttribute('href')||'')+'" placeholder="https:// or #section">') +
+    pr2(
+      'Target',
+      '<select class="pr-inp" id="pp-target">'+selOpts(['','_self','_blank','_parent','_top'],el.getAttribute('target')||'')+'</select>',
+      'Rel',
+      '<input class="pr-inp" id="pp-rel" type="text" value="'+esc(el.getAttribute('rel')||'')+'" placeholder="noopener noreferrer">'
+    ) +
+    pr2(
+      'Download',
+      '<input class="pr-inp" id="pp-download" type="text" value="'+esc(el.getAttribute('download')||'')+'" placeholder="filename">',
+      'Title',
+      '<input class="pr-inp" id="pp-link-title" type="text" value="'+esc(el.getAttribute('title')||'')+'">'
+    ) +
+    pr2(
+      'Hreflang',
+      '<input class="pr-inp" id="pp-hreflang" type="text" value="'+esc(el.getAttribute('hreflang')||'')+'" placeholder="en">',
+      'Type',
+      '<input class="pr-inp" id="pp-link-type" type="text" value="'+esc(el.getAttribute('type')||'')+'" placeholder="MIME type">'
+    ) +
+    pr(
+      'Referrer policy',
+      '<select class="pr-inp" id="pp-referrerpolicy">'+selOpts(['','no-referrer','no-referrer-when-downgrade','origin','origin-when-cross-origin','same-origin','strict-origin','strict-origin-when-cross-origin','unsafe-url'],el.getAttribute('referrerpolicy')||'')+'</select>'
+    )
+  );
+}
+
+function setOptionalAnchorAttr(el, name, value) {
+  if (!el || !name) return;
+  var v = value == null ? '' : String(value).trim();
+  if (v) el.setAttribute(name, v);
+  else el.removeAttribute(name);
+}
 function openCustomCssModal() {
   var modal = document.getElementById('custom-css-modal');
   var ta = document.getElementById('custom-css-modal-textarea');
@@ -5040,7 +6107,7 @@ function renderRightPanel(el) {
 
   // \u2500\u2500 Typography \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
   document.getElementById('acc-body-typography').innerHTML =
-    pr('Color', '<input type="color" class="pr-color" id="pp-color" value="'+esc(rgbToHex(cs.color))+'"><span style="font-size:11px;color:var(--text-3);flex:1;font-family:monospace">'+esc(cs.color)+'</span>') +
+    pr('Color', '<input type="color" class="pr-color" id="pp-color" value="'+esc(rgbToHex(cs.color))+'"><span style="font-size:11px;color:var(--text-3);flex:1;font-family:var(--font-mono)">'+esc(cs.color)+'</span>') +
     pr2('Font size', '<input class="pr-inp" type="number" id="pp-fs" min="8" max="200" value="'+parseInt(cs.fontSize||'16')+'">',
         'Font weight', '<select class="pr-inp" id="pp-fw">'+weightOpts(cs.fontWeight)+'</select>') +
     pr('Font family', '<input class="pr-inp" id="pp-ff" type="text" value="'+esc(el.style.fontFamily||'')+'" placeholder="inherit">') +
@@ -5052,7 +6119,7 @@ function renderRightPanel(el) {
   // \u2500\u2500 Background \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
   var bgiVal = (el.style.backgroundImage||'').replace(/url(['"]?([^'"]+)['"]?)/,'$1');
   document.getElementById('acc-body-background').innerHTML =
-    pr('Color', '<input type="color" class="pr-color" id="pp-bg" value="'+esc(rgbToHex(cs.backgroundColor))+'"><span style="font-size:11px;color:var(--text-3);flex:1;font-family:monospace">'+esc(cs.backgroundColor)+'</span>') +
+    pr('Color', '<input type="color" class="pr-color" id="pp-bg" value="'+esc(rgbToHex(cs.backgroundColor))+'"><span style="font-size:11px;color:var(--text-3);flex:1;font-family:var(--font-mono)">'+esc(cs.backgroundColor)+'</span>') +
     pr('Image URL', '<input class="pr-inp" id="pp-bgi" type="url" value="'+esc(bgiVal)+'" placeholder="https://\u2026">') +
     pr2('Size', '<select class="pr-inp" id="pp-bgs">'+selOpts(['auto','cover','contain'],el.style.backgroundSize||'auto')+'</select>',
         'Repeat', '<select class="pr-inp" id="pp-bgr">'+selOpts(['repeat','no-repeat','repeat-x','repeat-y'],el.style.backgroundRepeat||'repeat')+'</select>');
@@ -5122,9 +6189,9 @@ function renderRightPanel(el) {
   // \u2500\u2500 Device styling rules \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
   document.getElementById('acc-body-device').innerHTML =
     subLbl('Mobile (\u2264768px)') +
-    '<textarea class="pr-inp" id="pp-mob-css" style="width:100%;min-height:60px;font-family:monospace;font-size:11px;margin-bottom:8px" placeholder="/* styles for mobile */">'+esc(el.dataset.mobileCss||'')+'</textarea>' +
+    '<textarea class="pr-inp" id="pp-mob-css" style="width:100%;min-height:60px;font-family:var(--font-mono);font-size:11px;margin-bottom:8px" placeholder="/* styles for mobile */">'+esc(el.dataset.mobileCss||'')+'</textarea>' +
     subLbl('Tablet (\u22641024px)') +
-    '<textarea class="pr-inp" id="pp-tab-css" style="width:100%;min-height:60px;font-family:monospace;font-size:11px" placeholder="/* styles for tablet */">'+esc(el.dataset.tabletCss||'')+'</textarea>';
+    '<textarea class="pr-inp" id="pp-tab-css" style="width:100%;min-height:60px;font-family:var(--font-mono);font-size:11px" placeholder="/* styles for tablet */">'+esc(el.dataset.tabletCss||'')+'</textarea>';
 
   // \u2500\u2500 CSS and Classes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
   document.getElementById('acc-body-css').innerHTML =
@@ -5135,27 +6202,54 @@ function renderRightPanel(el) {
         '<i class="bi bi-fullscreen"></i>' +
       '</button>' +
     '</div>' +
-    '<textarea class="pr-inp" id="pp-css" style="width:100%;min-height:80px;font-family:monospace;font-size:11px" placeholder="color: red; font-size: 16px;">'+esc(el.getAttribute('style')||'')+'</textarea>';
+    '<textarea class="pr-inp" id="pp-css" style="width:100%;min-height:80px;font-family:var(--font-mono);font-size:11px" placeholder="color: red; font-size: 16px;">'+esc(el.getAttribute('style')||'')+'</textarea>';
 
   // \u2500\u2500 Attributes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
   var attrHtml =
     pr('ID', '<input class="pr-inp" id="pp-id" type="text" value="'+esc(el.id||'')+'" placeholder="element-id">');
-  if (tag==='a') attrHtml +=
-    pr('Href', '<input class="pr-inp" id="pp-href" type="url" value="'+esc(el.getAttribute('href')||'')+'" placeholder="https://">') +
-    pr('Target', '<select class="pr-inp" id="pp-target">'+selOpts(['','_blank','_self','_parent'],el.getAttribute('target')||'')+'</select>');
   if (tag==='img') attrHtml +=
     pr('Src', '<input class="pr-inp" id="pp-src" type="url" value="'+esc(el.getAttribute('src')||'')+'">') +
     pr('Alt', '<input class="pr-inp" id="pp-alt" type="text" value="'+esc(el.getAttribute('alt')||'')+'">');
-  if (tag==='input'||tag==='textarea') attrHtml +=
+  if (tag==='textarea') attrHtml +=
     pr('Placeholder', '<input class="pr-inp" id="pp-ph" type="text" value="'+esc(el.getAttribute('placeholder')||'')+'">');
   document.getElementById('acc-body-attributes').innerHTML = attrHtml;
 
   // \u2500\u2500 HTML Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-  document.getElementById('acc-body-content').innerHTML =
-    subLbl('Inner Text') +
-    '<textarea class="pr-inp" id="pp-text" style="width:100%;min-height:60px;margin-bottom:8px">'+esc(el.innerText||'')+'</textarea>' +
-    subLbl('Inner HTML') +
-    '<textarea class="pr-inp" id="pp-html" style="width:100%;min-height:70px;font-family:monospace;font-size:11px">'+esc(el.innerHTML||'')+'</textarea>';
+  var contentHtml = '';
+  if (isLinkElement(el)) contentHtml += buildAnchorContentFieldsHtml(el);
+  if (isFormControlElement(el)) {
+    contentHtml +=
+      subLbl('Value') +
+      '<textarea class="pr-inp" id="pp-value" style="width:100%;min-height:44px;margin-bottom:8px">'+esc(getFormControlValue(el))+'</textarea>';
+  }
+  if (tag==='input') {
+    contentHtml +=
+      subLbl('Placeholder') +
+      '<input class="pr-inp" id="pp-ph" type="text" value="'+esc(el.getAttribute('placeholder')||'')+'" style="width:100%;margin-bottom:8px">';
+  }
+  if (tag==='video') {
+    contentHtml +=
+      subLbl('Src') +
+      '<input class="pr-inp" id="pp-video-src" type="url" value="'+esc(getVideoSrc(el))+'" placeholder="https://example.com/video.mp4" style="width:100%;margin-bottom:8px">';
+  }
+  if (isYoutubeVideoElement(el)) {
+    contentHtml +=
+      subLbl('YouTube video ID') +
+      '<input class="pr-inp" id="pp-youtube-id" type="text" value="'+esc(getYoutubeVideoId(el))+'" placeholder="dQw4w9WgXcQ" style="width:100%;margin-bottom:8px">';
+  }
+  if (isVimeoVideoElement(el)) {
+    contentHtml +=
+      subLbl('Vimeo video ID') +
+      '<input class="pr-inp" id="pp-vimeo-id" type="text" value="'+esc(getVimeoVideoId(el))+'" placeholder="76979871" style="width:100%;margin-bottom:8px">';
+  }
+  if (tag!=='input' && tag!=='video' && !isEmbeddedVideoIframe(el)) {
+    contentHtml +=
+      subLbl('Inner Text') +
+      '<textarea class="pr-inp" id="pp-text" style="width:100%;min-height:60px;margin-bottom:8px">'+esc(el.innerText||'')+'</textarea>' +
+      subLbl('Inner HTML') +
+      '<textarea class="pr-inp" id="pp-html" style="width:100%;min-height:70px;font-family:var(--font-mono);font-size:11px">'+esc(el.innerHTML||'')+'</textarea>';
+  }
+  document.getElementById('acc-body-content').innerHTML = contentHtml;
 
   // \u2500\u2500 Wire up all inputs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
   var bindings = [
@@ -5206,13 +6300,20 @@ function renderRightPanel(el) {
     ['pp-cls',    function(v){el.className=v}],
     ['pp-css',    function(v){el.setAttribute('style',v)}],
     ['pp-id',     function(v){el.id=v}],
-    ['pp-href',   function(v){el.setAttribute('href',v)}],
-    ['pp-target', function(v){el.setAttribute('target',v)}],
+    ['pp-href',   function(v){setOptionalAnchorAttr(el,'href',v)}],
+    ['pp-target', function(v){setOptionalAnchorAttr(el,'target',v)}],
+    ['pp-rel',    function(v){setOptionalAnchorAttr(el,'rel',v)}],
+    ['pp-download', function(v){setOptionalAnchorAttr(el,'download',v)}],
+    ['pp-link-title', function(v){setOptionalAnchorAttr(el,'title',v)}],
+    ['pp-hreflang', function(v){setOptionalAnchorAttr(el,'hreflang',v)}],
+    ['pp-link-type', function(v){setOptionalAnchorAttr(el,'type',v)}],
+    ['pp-referrerpolicy', function(v){setOptionalAnchorAttr(el,'referrerpolicy',v)}],
     ['pp-src',    function(v){el.setAttribute('src',v)}],
+    ['pp-video-src', function(v){setVideoSrc(el, v)}],
+    ['pp-youtube-id', function(v){setYoutubeVideoId(el, v)}],
+    ['pp-vimeo-id', function(v){setVimeoVideoId(el, v)}],
     ['pp-alt',    function(v){el.setAttribute('alt',v)}],
     ['pp-ph',     function(v){el.setAttribute('placeholder',v)}],
-    ['pp-text',   function(v){el.innerText=v}],
-    ['pp-html',   function(v){el.innerHTML=v}],
   ];
   var sel = buildSelector(el);
   bindings.forEach(function(b){
@@ -5237,6 +6338,45 @@ function renderRightPanel(el) {
       inp.addEventListener('change', onValueChange);
     }
   });
+  wireContentFieldSync(el, sel);
+}
+
+function wireContentFieldSync(el, sel) {
+  var textInp = document.getElementById('pp-text');
+  var htmlInp = document.getElementById('pp-html');
+  var valueInp = document.getElementById('pp-value');
+  var syncing = false;
+  function applyContentChange(changedId) {
+    if (syncing) return;
+    syncing = true;
+    try {
+      var orig = getOriginalValue(changedId, el);
+      if (changedId === 'pp-value') {
+        el.value = valueInp.value;
+        logChange(sel, 'pp-value', valueInp.value, el, orig);
+      } else if (changedId === 'pp-text') {
+        el.innerText = textInp.value;
+        htmlInp.value = el.innerHTML;
+        logChange(sel, 'pp-text', textInp.value, el, orig);
+      } else {
+        el.innerHTML = htmlInp.value;
+        textInp.value = el.innerText;
+        logChange(sel, 'pp-html', htmlInp.value, el, orig);
+      }
+    } finally {
+      syncing = false;
+    }
+  }
+  if (valueInp && isFormControlElement(el)) {
+    valueInp.addEventListener('input', function() { applyContentChange('pp-value'); });
+    valueInp.addEventListener('change', function() { applyContentChange('pp-value'); });
+  }
+  if (textInp && htmlInp) {
+    textInp.addEventListener('input', function() { applyContentChange('pp-text'); });
+    textInp.addEventListener('change', function() { applyContentChange('pp-text'); });
+    htmlInp.addEventListener('input', function() { applyContentChange('pp-html'); });
+    htmlInp.addEventListener('change', function() { applyContentChange('pp-html'); });
+  }
 }
 
 // \u2500\u2500 Selector helper \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
@@ -5457,6 +6597,100 @@ function repositionDragSibling(dragEl, clientY) {
   }
 }
 
+function isMoveSwapSkippableSibling(el) {
+  if (!el || el.nodeType !== 1) return true;
+  if (isDomTreeSkippableTagName(el.tagName)) return true;
+  try {
+    if (el.hasAttribute && el.hasAttribute('hidden')) return true;
+    if (el.getAttribute && el.getAttribute('data-vve-hidden') === '1') return true;
+  } catch(_) {}
+  try {
+    if (el.style && el.style.display === 'none') return true;
+    if (el.style && el.style.visibility === 'hidden') return true;
+  } catch(_) {}
+  try {
+    var view = el.ownerDocument && el.ownerDocument.defaultView;
+    var cs = view && view.getComputedStyle ? view.getComputedStyle(el) : null;
+    if (cs && (cs.display === 'none' || cs.visibility === 'hidden')) return true;
+  } catch(_) {}
+  return false;
+}
+
+function findMoveSwapSibling(el, direction) {
+  if (!el) return null;
+  var node = direction < 0 ? el.previousElementSibling : el.nextElementSibling;
+  while (node && isMoveSwapSkippableSibling(node)) {
+    node = direction < 0 ? node.previousElementSibling : node.nextElementSibling;
+  }
+  return node;
+}
+
+function isMoveParentEscapeBlocked(parent) {
+  if (!parent || parent.nodeType !== 1) return true;
+  var tag = (parent.tagName || '').toLowerCase();
+  if (tag === 'html' || tag === 'body') return true;
+  try {
+    var doc = parent.ownerDocument;
+    if (doc && (parent === doc.documentElement || parent === doc.body)) return true;
+  } catch(_) {}
+  return false;
+}
+
+/** When no visual sibling exists, lift the node to the grandparent (before/after its parent). */
+function canMoveEscapeToParent(el, direction) {
+  if (!el || !el.parentElement) return false;
+  var parent = el.parentElement;
+  if (isMoveParentEscapeBlocked(parent) || !parent.parentElement) return false;
+  if (findMoveSwapSibling(el, direction)) return false;
+  return true;
+}
+
+function canMoveElDirection(el, direction) {
+  if (!el || !el.parentElement) return false;
+  return !!findMoveSwapSibling(el, direction) || canMoveEscapeToParent(el, direction);
+}
+
+function moveElByDirection(el, direction) {
+  if (!el || !el.parentElement) return false;
+  var parent = el.parentElement;
+  var sibling = findMoveSwapSibling(el, direction);
+  if (sibling) {
+    if (direction < 0) parent.insertBefore(el, sibling);
+    else parent.insertBefore(sibling, el);
+    return true;
+  }
+  if (!canMoveEscapeToParent(el, direction)) return false;
+  var grandparent = parent.parentElement;
+  if (!grandparent) return false;
+  if (direction < 0) grandparent.insertBefore(el, parent);
+  else grandparent.insertBefore(el, parent.nextSibling);
+  return true;
+}
+
+function syncMoveFloaterButtons(el) {
+  var upBtn = document.getElementById('sf-move-up');
+  var downBtn = document.getElementById('sf-move-down');
+  if (!upBtn || !downBtn) return;
+  var canUp = canMoveElDirection(el, -1);
+  var canDown = canMoveElDirection(el, 1);
+  upBtn.disabled = !canUp;
+  downBtn.disabled = !canDown;
+  if (canUp) {
+    upBtn.title = findMoveSwapSibling(el, -1)
+      ? 'Move up'
+      : 'Move up (out of container)';
+  } else {
+    upBtn.title = 'Cannot move up';
+  }
+  if (canDown) {
+    downBtn.title = findMoveSwapSibling(el, 1)
+      ? 'Move down'
+      : 'Move down (out of container)';
+  } else {
+    downBtn.title = 'Cannot move down';
+  }
+}
+
 function recordReorderAfterDrag(movedEl) {
   if (!activeVarId || !movedEl || !movedEl.parentElement) return;
   var prev = movedEl.previousElementSibling;
@@ -5485,13 +6719,11 @@ function recordReorderAfterDrag(movedEl) {
 }
 
 function moveSelectedElByDirection(direction) {
-  if (!selectedEl || !selectedEl.parentElement) return;
-  var p = selectedEl.parentElement;
-  var sibling = direction < 0 ? selectedEl.previousElementSibling : selectedEl.nextElementSibling;
-  if (!sibling) return;
-  if (direction < 0) p.insertBefore(selectedEl, sibling);
-  else p.insertBefore(sibling, selectedEl);
-  recordReorderAfterDrag(selectedEl);
+  var el = recoverSelectedElement(false) || selectedEl;
+  if (!el || !el.parentElement) return;
+  selectedEl = el;
+  if (!moveElByDirection(el, direction)) return;
+  recordReorderAfterDrag(el);
   saveCurrentVariationHtml();
   recomputeEditorDirty();
   scheduleDomTreeRefresh();
@@ -5591,6 +6823,7 @@ function attachClickHandler() {
         deselectElement(); return;
       }
       selectElement(target);
+      if (currentMainTab !== 'design') switchMainTab('design');
     }, true);
   } catch(_) {}
 }
@@ -5695,15 +6928,18 @@ function syncIframeInteractions(reason) {
 // \u2500\u2500 HTML insertion (Components / Sections) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 /** Full snippets for Vvveb keys whose html field is placeholder text, not markup. */
 var VVVEB_INSERT_HTML_OVERRIDES = {
-  'html/gridrow': '<div class="row g-3"><div class="col-sm-4"><p>Column 1</p></div><div class="col-sm-4"><p>Column 2</p></div><div class="col-sm-4"><p>Column 3</p></div></div>',
-  'html/gridcolumn': '<div class="col-sm-6"><p>New column</p></div>',
-  'html/container': '<div class="container py-3"><p>Container</p></div>',
-  'html/btn-link': '<a class="btn btn-primary" href="#">Primary button</a>',
-  'html/btn': '<button type="button" class="btn btn-primary">Primary</button>',
-  'html/pageitem': '<li class="page-item"><a class="page-link" href="#">1</a></li>',
-  'html/breadcrumbitem': '<li class="breadcrumb-item"><a href="#">Item</a></li>',
-  'html/listitem': '<li class="list-group-item">List item</li>',
-  'html/tablebody': '<tbody><tr><td>Cell</td></tr></tbody>',
+  'html/gridrow': '<div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:100%;box-sizing:border-box"><div style="padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px"><p style="margin:0">Column 1</p></div><div style="padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px"><p style="margin:0">Column 2</p></div><div style="padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px"><p style="margin:0">Column 3</p></div></div>',
+  'html/gridcolumn': '<div style="padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;min-height:60px;box-sizing:border-box"><p style="margin:0">New column</p></div>',
+  'html/container': '<div style="width:100%;max-width:960px;margin:0 auto;padding:16px;box-sizing:border-box"><p style="margin:0">Container</p></div>',
+  'html/btn-link': '<a href="#" style="display:inline-block;padding:10px 20px;font-size:14px;font-weight:600;line-height:1.2;color:#fff;background:#2563eb;border-radius:6px;text-decoration:none">Primary button</a>',
+  'html/btn': '<button type="button" style="display:inline-block;padding:10px 20px;font-size:14px;font-weight:600;line-height:1.2;color:#fff;background:#2563eb;border:none;border-radius:6px;cursor:pointer">Primary</button>',
+  'html/badge': '<span style="display:inline-flex;align-items:center;padding:4px 10px;font-size:12px;font-weight:600;line-height:1;letter-spacing:.02em;color:#fff;background:#2563eb;border-radius:999px">Badge</span>',
+  'html/alert': '<div role="alert" style="padding:12px 16px;font-size:14px;line-height:1.5;color:#0c4a6e;background:#e0f2fe;border:1px solid #7dd3fc;border-radius:6px">Alert message</div>',
+  'html/card': '<div style="border:1px solid #e2e8f0;border-radius:8px;background:#fff;overflow:hidden;max-width:360px;box-shadow:0 1px 3px rgba(0,0,0,.08)"><div style="padding:20px"><h5 style="margin:0 0 8px;font-size:18px;font-weight:700;color:#0f172a">Card title</h5><p style="margin:0;font-size:14px;line-height:1.5;color:#475569">Card content</p></div></div>',
+  'html/pageitem': '<li style="display:inline-block;margin:0 4px"><a href="#" style="display:inline-block;padding:6px 12px;font-size:14px;color:#2563eb;border:1px solid #cbd5e1;border-radius:6px;text-decoration:none">1</a></li>',
+  'html/breadcrumbitem': '<li style="display:inline;font-size:14px;color:#64748b"><a href="#" style="color:#2563eb;text-decoration:none">Item</a></li>',
+  'html/listitem': '<li style="padding:10px 14px;font-size:14px;color:#334155;border:1px solid #e2e8f0;border-radius:6px;background:#fff">List item</li>',
+  'html/tablebody': '<tbody><tr><td style="padding:10px 12px;border:1px solid #e2e8f0;font-size:14px">Cell</td></tr></tbody>',
 };
 
 function buildHtmlFromVvvebComponent(comp, typeKey) {
@@ -5731,7 +6967,7 @@ function insertVvvebComponent(typeKey) {
   insertHtml(html);
 }
 
-function insertHtml(html) {
+function insertHtml(html, options) {
   if (!html) return;
   try {
     var iframe = document.getElementById('iframeId');
@@ -5759,7 +6995,17 @@ function insertHtml(html) {
     } else {
       doc.body.appendChild(frag);
     }
+    if (firstEl) {
+      try {
+        firstEl.setAttribute('data-vve-instance', generateVveInstanceId());
+      } catch(_) {}
+      htmlStr = firstEl.outerHTML;
+    }
     if (firstEl) selectElement(firstEl);
+    var accSection = options && options.defaultAccSection;
+    if (accSection) {
+      requestAnimationFrame(function() { focusDesignAccordionSection(accSection); });
+    }
     if (activeVarId) {
       var insertRow = {
         selector: anchorSel,
@@ -5791,7 +7037,7 @@ function renderSidebar(filter) {
     baseFiltered.forEach(function(c) {
       var item = document.createElement('div'); item.className = 'cg-item'; item.title = 'Insert ' + c.name;
       item.innerHTML = '<div class="cg-icon"><i class="bi ' + c.icon + '"></i></div><div class="cg-name">' + c.name + '</div>';
-      item.onclick = function() { insertHtml(c.html); };
+      item.onclick = function() { insertHtml(c.html, { defaultAccSection: c.defaultAccSection }); };
       g1.appendChild(item);
     });
     compTab.appendChild(g1);
@@ -5831,7 +7077,7 @@ function renderSidebar(filter) {
     var ch = document.createElement('div'); ch.className = 'cg-hdr'; ch.textContent = 'CRO Components'; secTab.appendChild(ch);
     croFiltered.forEach(function(sec) {
       var item = document.createElement('div'); item.className = 'sec-item';
-      item.innerHTML = '<div class="sec-thumb">'+(sec.icon||'\u{1F4E6}')+'</div><div class="sec-info"><div class="sec-name">'+sec.name+'</div>'+(sec.desc?'<div class="sec-desc">'+sec.desc+'</div>':'')+'</div>';
+      item.innerHTML = '<div class="sec-thumb">'+renderCroSectionThumb(sec)+'</div><div class="sec-info"><div class="sec-name">'+sec.name+'</div>'+(sec.desc?'<div class="sec-desc">'+sec.desc+'</div>':'')+'</div>';
       item.onclick = function() { insertHtml(sec.html); };
       secTab.appendChild(item);
     });
@@ -5861,11 +7107,7 @@ document.getElementById('comp-search').addEventListener('input', function() {
 });
 var btnAddElement = document.getElementById('btn-add-element');
 if (btnAddElement) {
-  btnAddElement.addEventListener('click', function(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    toggleSectionComponentsPanel();
-  });
+  btnAddElement.addEventListener('click', handleAddElementClick);
 }
 
 // \u2500\u2500 Save / Close \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
@@ -6070,13 +7312,19 @@ function bindLoadingTooltipPositioning() {
 // \u2500\u2500 Init \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 function registerCROSections() {
   if (typeof Vvveb === 'undefined' || !Vvveb.Sections) return;
-  CRO_SECTIONS.forEach(function(sec) { Vvveb.Sections.add(sec.key, { name: sec.name, image: '', html: sec.html }); });
+  CRO_SECTIONS.forEach(function(sec) {
+    Vvveb.Sections.add(sec.key, {
+      name: sec.name,
+      image: sec.image ? (CRO_SECTION_IMAGE_ROUTE + sec.image) : '',
+      html: sec.html,
+    });
+  });
 }
 
 window.addEventListener('load', function() {
   registerCROSections();
   bindViewportControls();
-  switchSectionComponentsTab(currentSectionComponentsTab);
+  // switchSectionComponentsTab(currentSectionComponentsTab);
   renderElementsTree(document.getElementById('comp-search').value);
   vvvebReady = true;
   bindLoadingTooltipPositioning();
@@ -6149,6 +7397,10 @@ window.addEventListener('load', function() {
     syncIframeInteractions('iframe-load');
   });
 
+  var sfAdd = document.getElementById('sf-add');
+  if (sfAdd) {
+    sfAdd.addEventListener('click', handleAddElementClick);
+  }
   var sfMoveUp = document.getElementById('sf-move-up');
   if (sfMoveUp) {
     sfMoveUp.addEventListener('click', function(e) {
@@ -6248,6 +7500,20 @@ function createVisualEditorMiddleware(options) {
       res.end(buildVvvebEditorHtml());
       return;
     }
+    if (pathname.startsWith(CRO_SECTION_IMAGE_ROUTE)) {
+      const filename = pathname.slice(CRO_SECTION_IMAGE_ROUTE.length);
+      const filePath = resolveCroSectionImagePath(filename);
+      if (!filePath) {
+        res.statusCode = 404;
+        res.end("Not found");
+        return;
+      }
+      res.setHeader("Content-Type", "image/png");
+      res.setHeader("Cache-Control", "public, max-age=86400");
+      setFrameHeaders(req, res);
+      res.end(fs.readFileSync(filePath));
+      return;
+    }
     if (pathname === "/api/generate-test" && enableGenerateTestApi) {
       if (req.method === "OPTIONS") {
         res.setHeader("Access-Control-Allow-Origin", "*");
@@ -6386,7 +7652,6 @@ function createVisualEditorMiddleware(options) {
         const trackingMarkersForRequest = mergeTrackingMarkers(
           extraTrackingMarkersForRequest
         );
-        console.log("trackingMarkersForRequest", trackingMarkersForRequest);
         const strictFreezeParam = (url.searchParams.get("strictObserverFreeze") || "").toLowerCase();
         const strictObserverFreezeForRequest = strictFreezeParam === "1" || strictFreezeParam === "true" || strictFreezeParam === "yes" ? true : strictFreezeParam === "0" || strictFreezeParam === "false" || strictFreezeParam === "no" ? false : strictObserverFreeze;
         if (!targetUrl) {
@@ -7087,6 +8352,13 @@ function visualEditorProxyPlugin(options) {
     generateBundle() {
       this.emitFile({ type: "asset", fileName: "bridge.js", source: BRIDGE_SCRIPT });
       this.emitFile({ type: "asset", fileName: "vvveb-editor/index.html", source: buildVvvebEditorHtml() });
+      for (const imagePath of listCroSectionImageFiles()) {
+        this.emitFile({
+          type: "asset",
+          fileName: path.join("images", "cro-sections", path.basename(imagePath)),
+          source: fs.readFileSync(imagePath)
+        });
+      }
     },
     configureServer(server) {
       server.middlewares.use(mw);