npm - @accelerated-agency/visual-editor - Versions diffs - 0.5.3 → 0.5.5 - Mend

@accelerated-agency/visual-editor 0.5.3 → 0.5.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/dist/images/cro-sections/cro-cta-block.png +0 -0
package/dist/images/cro-sections/cro-exit-intent-bar.png +0 -0
package/dist/images/cro-sections/cro-feature-grid.png +0 -0
package/dist/images/cro-sections/cro-hero.png +0 -0
package/dist/images/cro-sections/cro-pricing-table.png +0 -0
package/dist/images/cro-sections/cro-social-proof.png +0 -0
package/dist/images/cro-sections/cro-trust-badges.png +0 -0
package/dist/images/cro-sections/cro-urgency-banner.png +0 -0
package/dist/index.js +1 -1
package/dist/vite.cjs +2047 -383
package/dist/vite.js +2047 -383
package/package.json +10 -2
package/src/images/cro-sections/cro-cta-block.png +0 -0
package/src/images/cro-sections/cro-exit-intent-bar.png +0 -0
package/src/images/cro-sections/cro-feature-grid.png +0 -0
package/src/images/cro-sections/cro-hero.png +0 -0
package/src/images/cro-sections/cro-pricing-table.png +0 -0
package/src/images/cro-sections/cro-social-proof.png +0 -0
package/src/images/cro-sections/cro-trust-badges.png +0 -0
package/src/images/cro-sections/cro-urgency-banner.png +0 -0

package/dist/vite.js CHANGED Viewed

@@ -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:auto;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,11 +1095,26 @@ 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 */
+#tab-design.rp-pane.active{
+  display:flex;
+  flex-direction:column;
+  min-height:0;
+  overflow-y:auto;
+  overflow-x:hidden;
+}
+#rp-accordion.rp-accordion{
+  flex:1;
+  min-height:0;
+  overflow-y:auto;
+  overflow-x:hidden;
+}
+#rp-accordion.rp-accordion::-webkit-scrollbar{width:3px}
+#rp-accordion.rp-accordion::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:2px}
 .acc-section{border-bottom:1px solid var(--border-sub)}
 .acc-hd{
   display:flex;align-items:center;padding:11px 14px;cursor:pointer;
@@ -842,7 +1167,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 +1210,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 */
@@ -918,15 +1243,48 @@ select.pr-inp{cursor:pointer;background:#fff}
 }
 .img-add:hover{border-color:var(--accent);color:var(--accent-txt);background:var(--accent-bg)}
+/* \u2500\u2500 Video properties 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 */
+.video-preview{
+  width:100%;height:120px;object-fit:contain;border:1px solid var(--border);
+  border-radius:6px;background:#000;margin-bottom:8px;display:block
+}
+.embed-preview{
+  width:100%;aspect-ratio:16/9;border:1px solid var(--border);
+  border-radius:6px;background:#000;margin-bottom:8px;display:block;border:none
+}
 /* \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 +1293,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
 }
@@ -1036,9 +1394,56 @@ select.pr-inp{cursor:pointer;background:#fff}
 .history-remove{
   margin-top:2px;
 }
+/* \u2500\u2500 Minimum screen size gate \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+#ve-min-screen-notice{
+  display:none;
+  position:fixed;
+  inset:0;
+  z-index:99999;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  gap:12px;
+  padding:24px;
+  text-align:center;
+  background:#f1f5f9;
+  color:#404040;
+}
+#ve-min-screen-notice .ve-min-screen-icon{
+  font-size:40px;
+  color:#737373;
+  line-height:1;
+}
+#ve-min-screen-notice .ve-min-screen-title{
+  font-size:18px;
+  font-weight:600;
+  color:#262626;
+  max-width:420px;
+}
+#ve-min-screen-notice .ve-min-screen-desc{
+  font-size:14px;
+  color:#737373;
+  max-width:420px;
+  line-height:1.5;
+}
+@media (max-width:1100px){
+  #app,
+  #custom-css-modal{
+    display:none!important;
+  }
+  #ve-min-screen-notice{
+    display:flex;
+  }
+}
 </style>
 </head>
 <body class="mode-editor">
+<div id="ve-min-screen-notice" aria-live="polite">
+  <div class="ve-min-screen-icon"><i class="bi bi-display"></i></div>
+  <div class="ve-min-screen-title">Please switch to greater or bigger screen to use Visual Editor</div>
+  <div class="ve-min-screen-desc">The Visual Editor requires a screen width of at least 1100px.</div>
+</div>
 <div id="app">
   <!-- \u2500\u2500 Toolbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->
   <div id="toolbar">
@@ -1069,7 +1474,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 +1509,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 +1536,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 +1583,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 +1633,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,15 +1661,17 @@ 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 active" 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 id="tab-components" class="tab-pane"></div>
+        <div class="lp-body collapsed">
+          <div id="tab-components" class="tab-pane active"></div>
           <div id="tab-sections" class="tab-pane"></div>
         </div>
       </div>
@@ -1262,7 +1683,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>
@@ -1272,15 +1693,33 @@ select.pr-inp{cursor:pointer;background:#fff}
           <div class="ns-icon"><i class="bi bi-cursor-text"></i></div>
           Click any element on the page to edit its properties
         </div>
-        <div id="rp-accordion" style="display:none">
+        <div id="rp-accordion" class="rp-accordion" style="display:none">
           <!-- Image section \u2014 only shown when an <img> is selected -->
-          <div class="acc-section open" id="acc-image" style="display:none">
+          <div class="acc-section" id="acc-image" style="display:none">
             <div class="acc-hd" onclick="toggleAcc('image')">Image<i class="bi bi-chevron-right acc-arrow"></i></div>
             <div class="acc-body" id="acc-body-image"></div>
           </div>
-          <div class="acc-section open" id="acc-content">
+          <!-- Video section \u2014 only shown when a <video> is selected -->
+          <div class="acc-section" id="acc-video" style="display:none">
+            <div class="acc-hd" onclick="toggleAcc('video')">Video<i class="bi bi-chevron-right acc-arrow"></i></div>
+            <div class="acc-body" id="acc-body-video"></div>
+          </div>
+          <!-- YouTube section \u2014 only shown when a YouTube iframe is selected -->
+          <div class="acc-section" id="acc-youtube" style="display:none">
+            <div class="acc-hd" onclick="toggleAcc('youtube')">YouTube Video<i class="bi bi-chevron-right acc-arrow"></i></div>
+            <div class="acc-body" id="acc-body-youtube"></div>
+          </div>
+          <!-- Vimeo section \u2014 only shown when a Vimeo iframe is selected -->
+          <div class="acc-section" id="acc-vimeo" style="display:none">
+            <div class="acc-hd" onclick="toggleAcc('vimeo')">Vimeo Video<i class="bi bi-chevron-right acc-arrow"></i></div>
+            <div class="acc-body" id="acc-body-vimeo"></div>
+          </div>
+          <div class="acc-section" id="acc-content">
             <div class="acc-hd" onclick="toggleAcc('content')">HTML Content<i class="bi bi-chevron-right acc-arrow"></i></div>
             <div class="acc-body" id="acc-body-content"></div>
           </div>
@@ -1452,28 +1891,101 @@ 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:'content', 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:'content', 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:'content', 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:'content', 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:'content', 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:'video', 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:'youtube', 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:'vimeo', 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:'content', 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:'content', 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:'content', 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:'content', 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:'content', 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:'content', 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>' },
 ];
+var baseComponentAccRegistry = null;
+function buildBaseComponentAccRegistry() {
+  if (baseComponentAccRegistry) return baseComponentAccRegistry;
+  var matchers = [];
+  var tagFallback = {};
+  BASE_COMPONENTS.forEach(function(comp) {
+    var section = comp.defaultAccSection || 'content';
+    var html = String(comp.html || '').trim();
+    if (!html) return;
+    var tagMatch = html.match(/^<([a-z0-9-]+)/i);
+    if (!tagMatch) return;
+    var rootTag = tagMatch[1].toLowerCase();
+    var matcher = { tag: rootTag, section: section };
+    if (rootTag === 'div') {
+      if (html.indexOf('role="alert"') >= 0) matcher.role = 'alert';
+      else if (html.indexOf('repeat(2') >= 0) matcher.gridCols = 2;
+      else if (html.indexOf('repeat(3') >= 0) matcher.gridCols = 3;
+    }
+    if (matcher.role || matcher.gridCols) matchers.push(matcher);
+    else if (tagFallback[rootTag] === undefined) tagFallback[rootTag] = section;
+  });
+  ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(function(tag) {
+    if (tagFallback[tag] === undefined) tagFallback[tag] = tagFallback.h2 || 'content';
+  });
+  if (tagFallback.ol === undefined) tagFallback.ol = tagFallback.ul || 'content';
+  baseComponentAccRegistry = { matchers: matchers, tagFallback: tagFallback };
+  return baseComponentAccRegistry;
+}
+function matchesBaseComponentAccMatcher(el, matcher) {
+  if (!el || !matcher || el.tagName.toLowerCase() !== matcher.tag) return false;
+  if (matcher.role) return el.getAttribute('role') === matcher.role;
+  if (matcher.gridCols) {
+    var style = (el.getAttribute('style') || '').toLowerCase();
+    return style.indexOf('grid-template-columns') >= 0 &&
+      style.indexOf('repeat(' + matcher.gridCols) >= 0;
+  }
+  return true;
+}
+function getTypeDefaultAccSection(el) {
+  if (!el) return 'content';
+  if (isYoutubeVideoElement(el)) return 'youtube';
+  if (isVimeoVideoElement(el)) return 'vimeo';
+  var registry = buildBaseComponentAccRegistry();
+  var i;
+  for (i = 0; i < registry.matchers.length; i++) {
+    if (matchesBaseComponentAccMatcher(el, registry.matchers[i])) {
+      return registry.matchers[i].section;
+    }
+  }
+  var tag = el.tagName.toLowerCase();
+  if (registry.tagFallback[tag]) return registry.tagFallback[tag];
+  return 'content';
+}
 // \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
 var CHANNEL = 'vvveb-bridge';
@@ -1625,7 +2137,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 +2157,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 +2409,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 +2445,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 +2483,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 +2496,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 +2524,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 +2560,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 +2593,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 +2642,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 +2654,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,27 +2683,141 @@ 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);
+  if (!collapsed) {
+    switchSectionComponentsTab(currentSectionComponentsTab || 'components');
+  }
+}
 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 closeAllAccSections(exceptName) {
+  var sections = document.querySelectorAll('#rp-accordion .acc-section');
+  for (var i = 0; i < sections.length; i++) {
+    var sec = sections[i];
+    var id = sec.id || '';
+    var name = id.replace(/^acc-/, '');
+    if (exceptName && name === exceptName) continue;
+    sec.classList.remove('open');
+  }
+}
+function getRpAccordion() {
+  return document.getElementById('rp-accordion');
+}
+function scrollRpAccordionContainerToTop() {
+  var accordion = getRpAccordion();
+  if (!accordion) return;
+  try {
+    accordion.scrollIntoView({ block: 'start', inline: 'nearest' });
+  } catch(_) {
+    try { accordion.scrollIntoView(true); } catch(__) {}
+  }
+  var node = accordion.parentElement;
+  while (node) {
+    try {
+      var style = window.getComputedStyle(node);
+      var canScroll = (style.overflowY === 'auto' || style.overflowY === 'scroll') &&
+        node.scrollHeight > node.clientHeight;
+      if (canScroll) {
+        var ar = accordion.getBoundingClientRect();
+        var nr = node.getBoundingClientRect();
+        node.scrollTop = Math.max(0, node.scrollTop + (ar.top - nr.top));
+        break;
+      }
+    } catch(_) {}
+    node = node.parentElement;
+  }
+}
+function scrollOpenAccSectionIntoView(sec) {
+  var accordion = getRpAccordion();
+  if (!accordion) return;
+  var openSec =
+    (sec && sec.classList.contains('open') && sec.style.display !== 'none')
+      ? sec
+      : accordion.querySelector('.acc-section.open');
+  if (!openSec || openSec.style.display === 'none') return;
+  function doScroll() {
+    scrollRpAccordionContainerToTop();
+    var ar = accordion.getBoundingClientRect();
+    var sr = openSec.getBoundingClientRect();
+    accordion.scrollTop = Math.max(0, accordion.scrollTop + (sr.top - ar.top));
+  }
+  requestAnimationFrame(function() {
+    doScroll();
+    requestAnimationFrame(function() {
+      doScroll();
+      setTimeout(doScroll, 0);
+    });
+  });
+}
+function openAccSection(name, options) {
+  if (!name) return null;
+  var sec = document.getElementById('acc-' + name);
+  if (!sec || sec.style.display === 'none') return null;
+  closeAllAccSections(name);
+  sec.classList.add('open');
+  if (!options || options.scroll !== false) scrollOpenAccSectionIntoView(sec);
+  return sec;
+}
 function toggleAcc(name) {
   var sec = document.getElementById('acc-' + name);
-  if (sec) sec.classList.toggle('open');
+  if (!sec || sec.style.display === 'none') return;
+  if (sec.classList.contains('open')) {
+    sec.classList.remove('open');
+    return;
+  }
+  openAccSection(name);
+}
+function focusDesignAccordionSection(name) {
+  if (!name) return;
+  if (currentMainTab !== 'design') switchMainTab('design');
+  openAccSection(name);
 }
 // \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
@@ -2200,9 +2884,20 @@ 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-video-poster': {label:'Poster',             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 +2920,20 @@ 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-video-poster': return el.getAttribute('poster') || '';
+    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 +3070,20 @@ 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-video-poster': orig ? el.setAttribute('poster', orig) : el.removeAttribute('poster'); 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 +3107,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 +3226,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 +3296,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 +3321,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 +3418,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 +3463,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 +3480,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 +3514,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 +3533,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 +3550,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 +3575,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 +3632,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 +3643,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 +3698,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 +4370,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 +4389,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 +4595,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 +4643,34 @@ 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-video-poster':
+      return { selector: c.selector, type: 'attribute', attribute: 'poster', 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 +4930,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 +4957,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;
@@ -4200,7 +5139,7 @@ function startIframeContentApplyWatcher(navGen, prevDocRef) {
 }
 // \u2500\u2500 Element selection \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 selectElement(el) {
+function selectElement(el, options) {
   beginSuppressIframeMutationDirty();
   try {
     if (selectedEl) { try { selectedEl.classList.remove('vve-selected'); } catch(_) {} }
@@ -4214,7 +5153,7 @@ function selectElement(el) {
   document.getElementById('bc-path').textContent = buildSelector(el);
   document.getElementById('bc-path').style.color = 'var(--accent-txt)';
   document.getElementById('no-sel').style.display = 'none';
-  renderRightPanel(el);
+  renderRightPanel(el, options);
   updateSelectionToolbar();
   if (currentLeftTab === 'elements' || currentLeftTab === 'dom-tree') {
     var treeRootId = currentLeftTab === 'elements' ? 'elements-root' : 'dom-tree-root';
@@ -4243,7 +5182,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 +5273,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 +5308,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 +5339,7 @@ function updateSelectionToolbar() {
   if (selectedEl !== liveSelected) selectedEl = liveSelected;
   selectedElFingerprint = buildSelector(liveSelected);
   bar.style.display = 'flex';
+  syncMoveFloaterButtons(liveSelected);
   requestAnimationFrame(function() { positionSelectionToolbar(); });
 }
@@ -4384,6 +5356,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 +5382,6 @@ function scrollIframeElementIntoView(el) {
 function selectElementFromTree(el) {
   selectElement(el);
   scrollIframeElementIntoView(el);
-  if (currentMainTab !== 'design') switchMainTab('design');
 }
 function duplicateSelectedEl() {
@@ -4478,12 +5454,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();
@@ -4509,35 +5499,190 @@ 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);
-  }, 150);
+function scheduleDomTreeRefresh() {
+  if (domTreeRefreshTimer) clearTimeout(domTreeRefreshTimer);
+  domTreeRefreshTimer = setTimeout(function() {
+    domTreeRefreshTimer = null;
+    var inp = document.getElementById('comp-search');
+    var q = inp ? inp.value : '';
+    renderElementsTree(q);
+    if (currentLeftTab === 'dom-tree') renderDomTree(q);
+  }, 150);
+}
+function setDomTreeStatus(mode) {
+  var root = document.getElementById('dom-tree-root');
+  if (!root) return;
+  if (mode === 'empty') {
+    root.innerHTML = '<div class="dt-muted">Load a page to see the DOM tree.</div>';
+  }
+}
+function domTreePathSegment(el) {
+  var tag = el.tagName.toLowerCase();
+  var idx = 1;
+  var s = el.previousElementSibling;
+  while (s) {
+    if (s.tagName === el.tagName) idx++;
+    s = s.previousElementSibling;
+  }
+  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;
 }
-function setDomTreeStatus(mode) {
-  var root = document.getElementById('dom-tree-root');
-  if (!root) return;
-  if (mode === 'empty') {
-    root.innerHTML = '<div class="dt-muted">Load a page to see the DOM tree.</div>';
+/** 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;
   }
-}
-function domTreePathSegment(el) {
-  var tag = el.tagName.toLowerCase();
-  var idx = 1;
-  var s = el.previousElementSibling;
-  while (s) {
-    if (s.tagName === el.tagName) idx++;
-    s = s.previousElementSibling;
+  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);
   }
-  return tag + '[' + idx + ']';
+  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) {
@@ -4547,14 +5692,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 +5715,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 +5756,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 +5806,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 +5883,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 +5934,203 @@ 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 shouldShowInnerContentFields(el) {
+  if (!el || el.nodeType !== 1) return false;
+  var tag = (el.tagName || '').toLowerCase();
+  if (tag === 'input' || tag === 'textarea' || tag === 'video') return false;
+  if (isEmbeddedVideoIframe(el)) return false;
+  return true;
+}
+function elementHasHtmlChildren(el) {
+  if (!el || el.nodeType !== 1) return false;
+  try {
+    var nodes = el.childNodes;
+    for (var i = 0; i < nodes.length; i++) {
+      if (nodes[i].nodeType === 1) return true;
+    }
+  } catch(_) {}
+  return false;
+}
+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">'
+    ) +
+    pr('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');
@@ -5015,8 +6331,122 @@ function removeSizesEntry(i) {
   }
 }
+// \u2500\u2500 Video section state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 _videoEl = null;
+function renderVideoSection(el) {
+  _videoEl = el;
+  var sel = buildSelector(el);
+  var src = getVideoSrc(el);
+  var html = '';
+  if (src) {
+    html += '<video class="video-preview" src="'+esc(src)+'" controls muted></video>';
+  }
+  html += pr('Src', '<input class="pr-inp" id="pp-video-src" type="url" value="'+esc(src)+'" placeholder="https://example.com/video.mp4">');
+  html += pr('Poster', '<input class="pr-inp" id="pp-video-poster" type="url" value="'+esc(el.getAttribute('poster')||'')+'" placeholder="https://\u2026">');
+  document.getElementById('acc-body-video').innerHTML = html;
+  var srcInp = document.getElementById('pp-video-src');
+  if (srcInp) srcInp.addEventListener('input', function() {
+    var orig = getOriginalValue('pp-video-src', el);
+    setVideoSrc(el, srcInp.value);
+    var prev = document.querySelector('.video-preview');
+    if (prev) {
+      prev.src = srcInp.value;
+      prev.style.display = srcInp.value ? '' : 'none';
+    } else if (srcInp.value) {
+      renderVideoSection(el);
+    }
+    logChange(sel, 'pp-video-src', srcInp.value, el, orig);
+  });
+  var posterInp = document.getElementById('pp-video-poster');
+  if (posterInp) posterInp.addEventListener('input', function() {
+    var orig = el.getAttribute('poster') || '';
+    if (posterInp.value) el.setAttribute('poster', posterInp.value);
+    else el.removeAttribute('poster');
+    var prev = document.querySelector('.video-preview');
+    if (prev) prev.poster = posterInp.value;
+    logChange(sel, 'pp-video-poster', posterInp.value, el, orig);
+  });
+}
+// \u2500\u2500 YouTube / Vimeo section state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 _youtubeEl = null;
+var _vimeoEl = null;
+function renderYoutubeSection(el) {
+  _youtubeEl = el;
+  var sel = buildSelector(el);
+  var id = getYoutubeVideoId(el);
+  var html = '';
+  if (id) {
+    html += '<iframe class="embed-preview" src="https://www.youtube.com/embed/'+esc(id)+'" title="YouTube video preview" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>';
+  }
+  html += pr('YouTube video ID', '<input class="pr-inp" id="pp-youtube-id" type="text" value="'+esc(id)+'" placeholder="dQw4w9WgXcQ">');
+  document.getElementById('acc-body-youtube').innerHTML = html;
+  var idInp = document.getElementById('pp-youtube-id');
+  if (idInp) idInp.addEventListener('input', function() {
+    var orig = getOriginalValue('pp-youtube-id', el);
+    setYoutubeVideoId(el, idInp.value);
+    var normalized = normalizeYoutubeVideoId(idInp.value);
+    var prev = document.querySelector('#acc-body-youtube .embed-preview');
+    if (prev) {
+      if (normalized) {
+        prev.src = 'https://www.youtube.com/embed/' + normalized;
+        prev.style.display = '';
+      } else {
+        prev.style.display = 'none';
+      }
+    } else if (normalized) {
+      renderYoutubeSection(el);
+    }
+    logChange(sel, 'pp-youtube-id', idInp.value, el, orig);
+  });
+}
+function renderVimeoSection(el) {
+  _vimeoEl = el;
+  var sel = buildSelector(el);
+  var id = getVimeoVideoId(el);
+  var html = '';
+  if (id) {
+    html += '<iframe class="embed-preview" src="https://player.vimeo.com/video/'+esc(id)+'" title="Vimeo video preview" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>';
+  }
+  html += pr('Vimeo video ID', '<input class="pr-inp" id="pp-vimeo-id" type="text" value="'+esc(id)+'" placeholder="76979871">');
+  document.getElementById('acc-body-vimeo').innerHTML = html;
+  var idInp = document.getElementById('pp-vimeo-id');
+  if (idInp) idInp.addEventListener('input', function() {
+    var orig = getOriginalValue('pp-vimeo-id', el);
+    setVimeoVideoId(el, idInp.value);
+    var normalized = normalizeVimeoVideoId(idInp.value);
+    var prev = document.querySelector('#acc-body-vimeo .embed-preview');
+    if (prev) {
+      if (normalized) {
+        prev.src = 'https://player.vimeo.com/video/' + normalized;
+        prev.style.display = '';
+      } else {
+        prev.style.display = 'none';
+      }
+    } else if (normalized) {
+      renderVimeoSection(el);
+    }
+    logChange(sel, 'pp-vimeo-id', idInp.value, el, orig);
+  });
+}
 // \u2500\u2500 Right panel rendering (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
-function renderRightPanel(el) {
+function renderRightPanel(el, options) {
   if (!el) return;
   var cs = el.ownerDocument.defaultView.getComputedStyle(el);
   var tag = el.tagName.toLowerCase();
@@ -5027,20 +6457,54 @@ function renderRightPanel(el) {
   document.getElementById('el-info').style.display = '';
   document.getElementById('rp-accordion').style.display = '';
-  // \u2500\u2500 Image section (show + auto-open for <img>) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  // \u2500\u2500 Image / video accordions (show matching section at top) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
   var imgSec = document.getElementById('acc-image');
   if (tag === 'img') {
     imgSec.style.display = '';
-    if (!imgSec.classList.contains('open')) imgSec.classList.add('open');
     renderImageSection(el);
   } else {
     imgSec.style.display = 'none';
+    imgSec.classList.remove('open');
     _imageEl = null;
   }
+  var videoSec = document.getElementById('acc-video');
+  if (tag === 'video') {
+    videoSec.style.display = '';
+    renderVideoSection(el);
+  } else {
+    videoSec.style.display = 'none';
+    videoSec.classList.remove('open');
+    _videoEl = null;
+  }
+  var youtubeSec = document.getElementById('acc-youtube');
+  if (isYoutubeVideoElement(el)) {
+    youtubeSec.style.display = '';
+    renderYoutubeSection(el);
+  } else {
+    youtubeSec.style.display = 'none';
+    youtubeSec.classList.remove('open');
+    _youtubeEl = null;
+  }
+  var vimeoSec = document.getElementById('acc-vimeo');
+  if (isVimeoVideoElement(el)) {
+    vimeoSec.style.display = '';
+    renderVimeoSection(el);
+  } else {
+    vimeoSec.style.display = 'none';
+    vimeoSec.classList.remove('open');
+    _vimeoEl = null;
+  }
+  var activeAccSection =
+    (options && options.preferredAccSection) ||
+    getTypeDefaultAccSection(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 +6516,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 +6586,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 +6599,41 @@ 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 +=
-    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' || tag==='textarea') {
+    contentHtml +=
+      subLbl('Placeholder') +
+      '<input class="pr-inp" id="pp-ph" type="text" value="'+esc(el.getAttribute('placeholder')||'')+'" style="width:100%;margin-bottom:8px">';
+  }
+  if (shouldShowInnerContentFields(el)) {
+    if (elementHasHtmlChildren(el)) {
+      contentHtml +=
+        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>';
+    } else {
+      contentHtml +=
+        subLbl('Inner Text') +
+        '<textarea class="pr-inp" id="pp-text" style="width:100%;min-height:60px;margin-bottom:8px">'+esc(el.innerText||'')+'</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 +6684,16 @@ 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-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-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 +6718,52 @@ function renderRightPanel(el) {
       inp.addEventListener('change', onValueChange);
     }
   });
+  wireContentFieldSync(el, sel);
+  requestAnimationFrame(function() {
+    requestAnimationFrame(function() {
+      openAccSection(activeAccSection);
+    });
+  });
+}
+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;
+        if (htmlInp) htmlInp.value = el.innerHTML;
+        logChange(sel, 'pp-text', textInp.value, el, orig);
+      } else {
+        el.innerHTML = htmlInp.value;
+        if (textInp) 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) {
+    textInp.addEventListener('input', function() { applyContentChange('pp-text'); });
+    textInp.addEventListener('change', function() { applyContentChange('pp-text'); });
+  }
+  if (htmlInp) {
+    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 +6984,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 +7106,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 +7210,7 @@ function attachClickHandler() {
         deselectElement(); return;
       }
       selectElement(target);
+      if (currentMainTab !== 'design') switchMainTab('design');
     }, true);
   } catch(_) {}
 }
@@ -5695,15 +7315,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 +7354,7 @@ function insertVvvebComponent(typeKey) {
   insertHtml(html);
 }
-function insertHtml(html) {
+function insertHtml(html, options) {
   if (!html) return;
   try {
     var iframe = document.getElementById('iframeId');
@@ -5759,7 +7382,18 @@ function insertHtml(html) {
     } else {
       doc.body.appendChild(frag);
     }
-    if (firstEl) selectElement(firstEl);
+    if (firstEl) {
+      try {
+        firstEl.setAttribute('data-vve-instance', generateVveInstanceId());
+      } catch(_) {}
+      htmlStr = firstEl.outerHTML;
+    }
+    if (firstEl) {
+      if (currentMainTab !== 'design') switchMainTab('design');
+      selectElement(firstEl, {
+        preferredAccSection: options && options.defaultAccSection,
+      });
+    }
     if (activeVarId) {
       var insertRow = {
         selector: anchorSel,
@@ -5791,7 +7425,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,8 +7465,10 @@ 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.onclick = function() { insertHtml(sec.html); };
+      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, { defaultAccSection: sec.defaultAccSection || 'content' });
+      };
       secTab.appendChild(item);
     });
   }
@@ -5845,7 +7481,9 @@ function renderSidebar(filter) {
       if (!hasVv) { hasVv = true; var sh = document.createElement('div'); sh.className = 'cg-hdr'; sh.textContent = 'Bootstrap Sections'; secTab.appendChild(sh); }
       var sel = document.createElement('div'); sel.className = 'sec-item';
       sel.innerHTML = '<div class="sec-thumb">\u{1F4D0}</div><div class="sec-info"><div class="sec-name">'+snm+'</div></div>';
-      sel.onclick = (function(s){ return function(){ insertHtml(s.html||''); }; })(sec);
+      sel.onclick = (function(s){ return function(){
+        insertHtml(s.html || '', { defaultAccSection: 'content' });
+      }; })(sec);
       secTab.appendChild(sel);
     }
   }
@@ -5861,11 +7499,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 +7704,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 +7789,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 +7892,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 +8044,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 +8744,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);