@accelerated-agency/visual-editor 0.1.5 → 0.1.7

package/dist/vite.cjs

@@ -0,0 +1,2067 @@
+'use strict';
+
+var fs = require('fs');
+var path = require('path');
+var url = require('url');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var fs__default = /*#__PURE__*/_interopDefault(fs);
+var path__default = /*#__PURE__*/_interopDefault(path);
+
+// src/visualEditorProxyPlugin.ts
+var popupHideCss = `<style id="__ce_popup_hide">#CybotCookiebotDialog,#CybotCookiebotDialogBodyUnderlay,#onetrust-consent-sdk,#onetrust-banner-sdk,.cc-window,.cc-banner,.cc-overlay,#cookie-notice,#cookie-banner,#cookie-consent,.cookie-notice,.cookie-banner,.cookie-consent,.cookie-popup,.cookie-bar,.cookie-message,.cookie-alert,.gdpr-banner,.gdpr-consent,.gdpr-popup,.gdpr-overlay,#gdpr-consent,#gdpr-banner,.consent-banner,.consent-popup,.consent-overlay,#consent-banner,#consent-popup,[class*="cookie-consent"],[class*="cookie-banner"],[class*="cookie-notice"],[class*="CookieConsent"],[class*="CookieBanner"],[id*="cookie-consent"],[id*="cookie-banner"],[id*="cookie-notice"],[aria-label*="cookie" i],[aria-label*="consent" i],.klaro,.klaro .cookie-modal,#usercentrics-root,.trustarc-banner,#truste-consent-track,#hs-eu-cookie-confirmation,.osano-cm-window,.osano-cm-dialog,.evidon-banner,#_evidon_banner,.js-cookie-consent,.cookie-disclaimer,.shopify-section-cookies,#shopify-section-cookies,#shopify-pc__banner,#shopify-pc__modal,.privacy-banner,.privacy-popup,[data-testid="cookie-banner"],[data-testid="consent-banner"],.amgdprcookie-bar-container,[data-amcookie-js="bar"],.amgdprjs-bar-template,.amgdprcookie-modal-container,.amgdprcookie-modal-overlay,#cmplz-cookiebanner-container,.cmplz-cookiebanner,#iubenda-cs-banner,.iubenda-cs-container,#qc-cmp2-container,.qc-cmp2-consent-info,#didomi-host,.didomi-popup-container,.didomi-notice,#termly-code-snippet-support,[class*="termly"],[class*="gdprcookie"],[class*="amgdpr"],[id*="gdpr-cookie"],[class*="cookie-modal"],[id*="cookie-modal"],[class*="cookieConsent"],[id*="cookieConsent"],.klaviyo-form,.klaviyo-modal,.klaviyo-popup,[class*="klaviyo"],.privy-popup,.privy-flyout,[id*="privy"],#PopupSignupForm,.popup-signup,.newsletter-popup,.newsletter-modal,[class*="newsletter-popup"],[class*="newsletter-modal"],[id*="newsletter-popup"],.email-popup,.email-modal,[class*="email-popup"],[class*="email-modal"],.signup-popup,.signup-modal,[class*="signup-popup"],[class*="signup-modal"],.subscribe-popup,.subscribe-modal,[class*="subscribe-popup"],#mc_embed_signup,.mc-modal,.mc-banner,.mc-closeModal,.omniconvert-popup,[class*="omniconvert"],.optinmonster-popup,[id*="om-"][class*="campaign"],.sumo-overlay,.sumome-overlay,[class*="sumome"],.hustle-modal,.hustle-popup,[class*="hustle-"],.popup-overlay,.popup-modal,.modal-overlay,[class*="exit-intent"],[class*="exitintent"],.wheelio-popup,[class*="wheelio"],.spin-wheel-popup,.justuno-popup,[class*="justuno"],.wisepops,.wisepops-overlay,[class*="wisepops"],.elegantmodal,.elegant-popup,#zipify-popup,[class*="zipify"],.age-gate,.age-verification,.age-popup,[class*="age-gate"],[class*="age-verif"],[class*="popup-overlay"],[class*="modal-overlay"],[class*="popup-backdrop"]{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;height:0!important;overflow:hidden!important;}body.klaviyo-open,body.modal-open,body.popup-open,body.no-scroll,body.noscroll{overflow:auto!important;position:static!important;}</style>`;
+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">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Visual Editor V2</title>
+<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}
+
+/* \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{
+  --bg:         #ffffff;
+  --bg-sub:     #f8fafc;
+  --bg-hover:   #f1f5f9;
+  --border:     #e2e8f0;
+  --border-sub: #f1f5f9;
+  --text:       #1e293b;
+  --text-2:     #475569;
+  --text-3:     #94a3b8;
+  --accent:     #6366f1;
+  --accent-bg:  #eef2ff;
+  --accent-txt: #4f46e5;
+}
+
+/* \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}
+
+/* \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\u2500\u2500 */
+#toolbar{
+  height:48px;background:var(--bg);border-bottom:1px solid var(--border);
+  display:flex;align-items:center;padding:0 12px;gap:6px;flex-shrink:0;z-index:100;
+  box-shadow:0 1px 3px rgba(0,0,0,.04)
+}
+
+/* \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:var(--bg-sub);border-right:1px solid var(--border);
+  display:flex;flex-direction:column;flex-shrink:0;overflow:hidden
+}
+
+/* \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
+}
+
+/* \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);
+  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{
+  height:26px;background:var(--bg);border-top:1px solid var(--border);
+  display:flex;align-items:center;padding:0 12px;font-size:11px;
+  color:var(--text-3);flex-shrink:0;gap:5px;overflow:hidden
+}
+
+/* \u2500\u2500 Loading overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+#loading{
+  position:absolute;inset:0;background:rgba(248,250,252,.95);display:flex;
+  flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:50;
+  backdrop-filter:blur(2px)
+}
+#loading.hidden{display:none}
+.spinner{width:32px;height:32px;border:2.5px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
+@keyframes spin{to{transform:rotate(360deg)}}
+
+/* \u2500\u2500 No-URL overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+#no-url{
+  display:none;position:absolute;inset:0;flex-direction:column;
+  align-items:center;justify-content:center;gap:10px;color:var(--text-3);text-align:center;padding:40px
+}
+#no-url .nu-icon{font-size:48px;opacity:.3}
+
+/* \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;transition:max-width .3s ease
+}
+#device-frame.tablet{
+  max-width:768px;
+  box-shadow:0 0 0 1px var(--border),0 4px 24px rgba(0,0,0,.08)
+}
+#device-frame.mobile{
+  max-width:390px;
+  box-shadow:0 0 0 1px var(--border),0 8px 40px rgba(0,0,0,.12)
+}
+#iframeId{flex:1;border:0;background:#fff;display:none;min-height:100%}
+
+/* \u2500\u2500 Toolbar atoms \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-btn{
+  background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text-2);
+  cursor:pointer;font-size:12px;font-weight:500;padding:5px 11px;transition:all .15s;
+  white-space:nowrap;display:flex;align-items:center;gap:5px
+}
+.tb-btn:hover{background:var(--bg-hover);color:var(--text);border-color:#cbd5e1}
+.tb-btn.active,.tb-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
+.tb-btn.primary:hover{background:#4338ca;border-color:#4338ca}
+.tb-btn.icon{width:32px;height:32px;padding:0;justify-content:center;flex-shrink:0}
+.tb-btn.close-btn{color:#94a3b8}
+.tb-btn.close-btn:hover{background:#fef2f2;border-color:#fca5a5;color:#ef4444}
+.tb-sep{width:1px;height:20px;background:var(--border);flex-shrink:0}
+.tb-space{flex:1}
+
+/* \u2500\u2500 Toggle group \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.tg{display:flex;background:var(--bg-sub);border-radius:8px;padding:2px;border:1px solid var(--border);gap:1px}
+.tg-btn{
+  background:transparent;border:none;color:var(--text-3);cursor:pointer;
+  padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;
+  transition:all .15s;white-space:nowrap;display:flex;align-items:center;gap:4px
+}
+.tg-btn:hover{color:var(--text);background:var(--bg-hover)}
+.tg-btn.active{background:#fff;color:var(--accent-txt);box-shadow:0 1px 3px rgba(0,0,0,.1)}
+.tg-btn.icon-only{padding:4px 8px}
+
+/* \u2500\u2500 Dirty dot \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+#dirty-dot{width:6px;height:6px;border-radius:50%;background:transparent;flex-shrink:0;transition:background .2s}
+#dirty-dot.on{background:#f59e0b}
+
+/* \u2500\u2500 URL bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+#url-bar{
+  flex:1;max-width:280px;background:var(--bg-sub);border:1px solid var(--border);border-radius:20px;
+  color:var(--text-2);font-size:11px;padding:4px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
+}
+
+/* \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}
+.lp-sec-hd{
+  padding:8px 12px 6px;font-size:10px;font-weight:700;text-transform:uppercase;
+  letter-spacing:.08em;color:var(--text-3);display:flex;align-items:center;justify-content:space-between
+}
+.lp-sec-hd span{color:var(--accent-txt);font-size:10px;font-weight:500;text-transform:none;letter-spacing:0}
+
+/* \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{padding:4px 8px 8px;display:flex;flex-direction:column;gap:4px}
+.var-tab{
+  background:#fff;border:1px solid var(--border);border-radius:20px;color:var(--text-2);
+  cursor:pointer;font-size:11px;font-weight:600;padding:5px 12px;transition:all .15s;
+  width:100%;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
+}
+.var-tab:hover{background:var(--bg-hover);border-color:#cbd5e1;color:var(--text)}
+.var-tab.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 1px 4px rgba(99,102,241,.3)}
+
+/* \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 */
+#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
+}
+#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)}
+
+/* \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{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;background:#fff}
+.lp-tab{
+  flex:1;padding:8px 4px;text-align:center;font-size:11px;color:var(--text-3);
+  cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;font-weight:600
+}
+.lp-tab:hover{color:var(--text-2)}
+.lp-tab.active{color:var(--accent-txt);border-bottom-color:var(--accent)}
+
+/* \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{flex:1;overflow-y:auto}
+.lp-body::-webkit-scrollbar{width:3px}
+.lp-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}
+.tab-pane{display:none}.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-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
+}
+.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}
+
+/* \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{
+  background:#fff;border:1px solid var(--border);border-radius:8px;
+  margin:0 8px 6px;overflow:hidden;transition:all .15s;cursor:pointer
+}
+.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)
+}
+.sec-info{padding:7px 9px}
+.sec-name{font-size:11px;font-weight:600;color:var(--text)}
+.sec-desc{font-size:10px;color:var(--text-3);margin-top:2px;line-height:1.3}
+
+/* \u2500\u2500 Right 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 */
+.rp-body{flex:1;overflow-y:auto;overflow-x:hidden;background:#fff;min-width:0}
+.rp-body::-webkit-scrollbar{width:3px}
+.rp-body::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:2px}
+
+/* \u2500\u2500 No-selection placeholder \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+#no-sel{padding:32px 16px;text-align:center;color:var(--text-3)}
+#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}
+
+/* \u2500\u2500 Accordion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.acc-section{border-bottom:1px solid var(--border-sub)}
+.acc-hd{
+  display:flex;align-items:center;padding:11px 14px;cursor:pointer;
+  user-select:none;transition:background .12s;
+  font-size:13px;font-weight:500;color:var(--text)
+}
+.acc-hd:hover{background:var(--bg-hover)}
+.acc-arrow{margin-left:auto;font-size:10px;color:var(--text-3);transition:transform .2s;flex-shrink:0}
+.acc-section.open .acc-arrow{transform:rotate(90deg)}
+.acc-body{display:none;padding:8px 12px 12px;background:#fff;overflow:hidden;box-sizing:border-box}
+.acc-section.open .acc-body{display:block}
+
+/* \u2500\u2500 2-col property 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 */
+.pr2{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:7px;min-width:0}
+/* min-width:0 prevents grid children from overflowing their track */
+.pr2-item{display:flex;flex-direction:column;gap:3px;min-width:0;overflow:hidden}
+.pr2-item .pr-inp{width:100%;min-width:0}
+.pr2-lbl{font-size:10px;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
+
+/* \u2500\u2500 Subgroup label \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.sub-lbl{font-size:10px;text-transform:uppercase;color:var(--text-3);font-weight:700;letter-spacing:.05em;margin:8px 0 5px}
+.sub-lbl:first-child{margin-top:0}
+
+/* \u2500\u2500 Shadow presets \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.shadow-presets{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
+.shadow-preset{background:var(--bg-sub);border:1px solid var(--border);border-radius:5px;cursor:pointer;padding:3px 8px;font-size:11px;color:var(--text-2);font-family:inherit}
+.shadow-preset:hover{border-color:var(--accent);color:var(--accent-txt);background:var(--accent-bg)}
+
+/* \u2500\u2500 Opacity row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.op-wrap{display:flex;align-items:center;gap:8px}
+input[type=range].op-slider{flex:1;accent-color:var(--accent);cursor:pointer}
+
+/* \u2500\u2500 Property groups \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.pg{padding:10px 10px 4px;border-bottom:1px solid var(--border-sub)}
+.pg-lbl{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--text-3);letter-spacing:.06em;margin-bottom:8px}
+.pr{display:flex;align-items:center;gap:6px;margin-bottom:7px}
+.pr-lbl{font-size:11px;color:var(--text-2);width:68px;flex-shrink:0}
+.pr-inp{
+  flex:1;background:var(--bg-sub);border:1px solid var(--border);border-radius:5px;
+  color:var(--text);font-size:12px;padding:4px 7px;outline:none;min-width:0
+}
+.pr-inp:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(99,102,241,.12);background:#fff}
+textarea.pr-inp{resize:vertical;min-height:54px;font-family:inherit}
+select.pr-inp{cursor:pointer;background:#fff}
+.pr-color{width:28px;height:28px;padding:0;background:transparent;border-radius:5px;cursor:pointer;flex-shrink:0;border:1px solid var(--border)}
+.pr-num{width:58px;flex:none}
+.pr-unit{font-size:11px;color:var(--text-3)}
+
+/* \u2500\u2500 Advanced 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 */
+.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)}
+
+/* \u2500\u2500 Selected element ring \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.vve-selected{outline:2px solid var(--accent) !important;outline-offset:1px !important}
+
+/* iframe is always interactive \u2014 mode behaviour is controlled by JS handlers */
+#iframeId{pointer-events:all}
+
+/* \u2500\u2500 Image 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 */
+.img-preview{
+  width:100%;height:72px;object-fit:contain;border:1px solid var(--border);
+  border-radius:6px;background:var(--bg-sub);margin-bottom:8px;display:block
+}
+.img-row{display:flex;align-items:center;gap:4px;margin-bottom:5px;min-width:0}
+.img-row .pr-inp{min-width:0}
+.img-desc{width:58px!important;flex:none!important}
+.img-cond-op{width:100px!important;flex:none!important}
+.img-cond-val{width:62px!important;flex:none!important}
+.img-remove{
+  background:none;border:none;cursor:pointer;color:var(--text-3);
+  font-size:13px;padding:2px 5px;line-height:1;border-radius:4px;
+  font-family:inherit;flex-shrink:0
+}
+.img-remove:hover{color:#ef4444;background:#fef2f2}
+.img-add{
+  display:flex;align-items:center;gap:6px;width:100%;padding:5px 8px;
+  border:1px dashed var(--border);border-radius:6px;cursor:pointer;
+  color:var(--text-3);font-size:11px;background:none;font-family:inherit;
+  transition:all .15s;margin-top:2px
+}
+.img-add:hover{border-color:var(--accent);color:var(--accent-txt);background:var(--accent-bg)}
+
+/* \u2500\u2500 Right panel main tabs (Design / States / History) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+#main-tabs{display:flex;border-bottom:1px solid var(--border);background:#fff;flex-shrink:0}
+.main-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
+}
+.main-tab:hover{color:var(--text-2)}
+.main-tab.active{color:var(--accent-txt);border-bottom-color:var(--accent)}
+.rp-pane{flex:1;overflow-y:auto;overflow-x:hidden;min-width:0;display:none}
+.rp-pane.active{display:block}
+
+/* \u2500\u2500 States 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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.states-empty{padding:36px 16px;text-align:center;color:var(--text-3);font-size:12px}
+.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;
+  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;
+  max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+  background:var(--accent-bg);padding:1px 5px;border-radius:3px
+}
+.state-remove{
+  background:none;border:none;cursor:pointer;color:var(--text-3);
+  font-size:13px;padding:2px 5px;line-height:1;border-radius:4px;
+  font-family:inherit;flex-shrink:0
+}
+.state-remove:hover{color:#ef4444;background:#fef2f2}
+#states-clear{
+  display:block;width:calc(100% - 24px);margin:10px 12px;
+  background:none;border:1px solid var(--border);border-radius:6px;
+  padding:6px;font-size:11px;color:var(--text-2);cursor:pointer;font-family:inherit;
+  transition:all .15s
+}
+#states-clear:hover{border-color:#fca5a5;color:#ef4444;background:#fef2f2}
+
+/* \u2500\u2500 History tab (placeholder) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-ph{padding:40px 16px;text-align:center;color:var(--text-3)}
+.tab-ph i{font-size:30px;display:block;margin-bottom:10px;opacity:.3}
+.tab-ph p{font-size:12px;line-height:1.6;margin-top:6px}
+</style>
+</head>
+<body class="mode-editor">
+<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">
+    <span style="font-size:10px;font-weight:800;color:var(--accent-txt);letter-spacing:.06em;flex-shrink:0;background:var(--accent-bg);border:1px solid #c7d2fe;padding:2px 6px;border-radius:4px">V2</span>
+    <div id="dirty-dot" title="Unsaved changes"></div>
+    <div class="tb-sep"></div>
+
+    <!-- Edit / Navigate mode -->
+    <div class="tg">
+      <button class="tg-btn active" id="btn-mode-editor" onclick="setMode('editor')" title="Edit mode \u2014 click elements to edit">
+        <i class="bi bi-pencil-square"></i> Edit
+      </button>
+      <button class="tg-btn" id="btn-mode-nav" onclick="setMode('navigate')" title="Navigate mode \u2014 interact with page normally">
+        <i class="bi bi-cursor"></i> Navigate
+      </button>
+    </div>
+
+    <div class="tb-sep"></div>
+
+    <!-- Device width -->
+    <div class="tg">
+      <button class="tg-btn icon-only active" id="dev-desktop" onclick="setDevice('desktop')" title="Desktop \u2014 full width">
+        <i class="bi bi-display"></i>
+      </button>
+      <button class="tg-btn icon-only" id="dev-tablet" onclick="setDevice('tablet')" title="Tablet \u2014 768 px">
+        <i class="bi bi-tablet"></i>
+      </button>
+      <button class="tg-btn icon-only" id="dev-mobile" onclick="setDevice('mobile')" title="Mobile \u2014 390 px">
+        <i class="bi bi-phone"></i>
+      </button>
+    </div>
+    <span id="dev-label" style="font-size:11px;color:var(--text-3);min-width:56px">Desktop</span>
+
+    <div class="tb-sep"></div>
+    <div id="url-bar" title="">No page loaded</div>
+    <div class="tb-space"></div>
+
+    <!-- Undo / Redo -->
+    <button class="tb-btn icon" id="btn-undo" title="Undo (\u2318Z)"><i class="bi bi-arrow-counterclockwise"></i></button>
+    <button class="tb-btn icon" id="btn-redo" title="Redo (\u2318\u21E7Z)"><i class="bi bi-arrow-clockwise"></i></button>
+    <div class="tb-sep"></div>
+
+    <button class="tb-btn primary" id="btn-save"><i class="bi bi-floppy"></i> Save</button>
+    <button class="tb-btn icon close-btn" id="btn-close" title="Close editor"><i class="bi bi-x-lg"></i></button>
+  </div>
+
+  <!-- \u2500\u2500 Main \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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="main">
+
+    <!-- Left panel -->
+    <div id="left-panel">
+
+      <!-- Variations -->
+      <div class="lp-sec">
+        <div class="lp-sec-hd">
+          Variations
+          <span id="active-var-label"></span>
+        </div>
+        <div id="variation-tabs"></div>
+      </div>
+
+      <!-- Search -->
+      <div style="padding:8px;flex-shrink:0">
+        <input type="search" id="comp-search" placeholder="Search components&hellip;" autocomplete="off">
+      </div>
+
+      <!-- Tabs -->
+      <div class="lp-tabs" style="flex-shrink:0">
+        <div class="lp-tab active" onclick="switchLeftTab('components')">Components</div>
+        <div class="lp-tab" onclick="switchLeftTab('sections')">Sections</div>
+      </div>
+
+      <!-- Tab content -->
+      <div class="lp-body">
+        <div id="tab-components" class="tab-pane active"></div>
+        <div id="tab-sections" class="tab-pane"></div>
+      </div>
+
+    </div><!-- #left-panel -->
+
+    <!-- Center / iframe panel -->
+    <div id="iframe-panel">
+
+      <!-- Loading overlay (absolute, covers center) -->
+      <div id="loading">
+        <div class="spinner"></div>
+        <div id="load-status" style="font-size:12px;color:var(--text-3)">Initialising&hellip;</div>
+      </div>
+
+      <!-- No-URL overlay (absolute, covers center) -->
+      <div id="no-url">
+        <div class="nu-icon"><i class="bi bi-globe"></i></div>
+        <div style="font-weight:600;font-size:14px;color:var(--text-2)">No page loaded</div>
+        <div style="font-size:12px;color:var(--text-3)">Waiting for experiment data&hellip;</div>
+      </div>
+
+      <!-- Device frame containing the editing iframe -->
+      <div id="device-frame">
+        <iframe id="iframeId" name="iframeId" allowfullscreen></iframe>
+      </div>
+
+    </div><!-- #iframe-panel -->
+
+    <!-- Right panel -->
+    <div id="right-panel">
+
+      <!-- Element badge (hidden until selection) -->
+      <div id="el-info" style="display:none">
+        <div id="el-info-tag"></div>
+        <div id="el-info-sel"></div>
+      </div>
+
+      <!-- \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"        onclick="switchMainTab('history')">History</button>
+      </div>
+
+      <!-- \u2500\u2500 Design pane (all accordion sections) \u2500\u2500 -->
+      <div id="tab-design" class="rp-pane active">
+        <div id="no-sel">
+          <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">
+
+          <!-- Image section \u2014 only shown when an <img> is selected -->
+          <div class="acc-section open" 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">
+            <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>
+
+          <div class="acc-section" id="acc-typography">
+            <div class="acc-hd" onclick="toggleAcc('typography')">Typography<i class="bi bi-chevron-right acc-arrow"></i></div>
+            <div class="acc-body" id="acc-body-typography"></div>
+          </div>
+
+          <div class="acc-section" id="acc-background">
+            <div class="acc-hd" onclick="toggleAcc('background')">Background<i class="bi bi-chevron-right acc-arrow"></i></div>
+            <div class="acc-body" id="acc-body-background"></div>
+          </div>
+
+          <div class="acc-section" id="acc-opacity">
+            <div class="acc-hd" onclick="toggleAcc('opacity')">Opacity<i class="bi bi-chevron-right acc-arrow"></i></div>
+            <div class="acc-body" id="acc-body-opacity"></div>
+          </div>
+
+          <div class="acc-section" id="acc-border">
+            <div class="acc-hd" onclick="toggleAcc('border')">Border<i class="bi bi-chevron-right acc-arrow"></i></div>
+            <div class="acc-body" id="acc-body-border"></div>
+          </div>
+
+          <div class="acc-section" id="acc-shadow">
+            <div class="acc-hd" onclick="toggleAcc('shadow')">Shadow<i class="bi bi-chevron-right acc-arrow"></i></div>
+            <div class="acc-body" id="acc-body-shadow"></div>
+          </div>
+
+          <div class="acc-section" id="acc-spacing">
+            <div class="acc-hd" onclick="toggleAcc('spacing')">Spacing<i class="bi bi-chevron-right acc-arrow"></i></div>
+            <div class="acc-body" id="acc-body-spacing"></div>
+          </div>
+
+          <div class="acc-section" id="acc-size">
+            <div class="acc-hd" onclick="toggleAcc('size')">Size &amp; Position<i class="bi bi-chevron-right acc-arrow"></i></div>
+            <div class="acc-body" id="acc-body-size"></div>
+          </div>
+
+          <div class="acc-section" id="acc-device">
+            <div class="acc-hd" onclick="toggleAcc('device')">Device styling rules<i class="bi bi-chevron-right acc-arrow"></i></div>
+            <div class="acc-body" id="acc-body-device"></div>
+          </div>
+
+          <div class="acc-section" id="acc-css">
+            <div class="acc-hd" onclick="toggleAcc('css')">CSS and Classes<i class="bi bi-chevron-right acc-arrow"></i></div>
+            <div class="acc-body" id="acc-body-css"></div>
+          </div>
+
+          <div class="acc-section" id="acc-attributes">
+            <div class="acc-hd" onclick="toggleAcc('attributes')">Attributes<i class="bi bi-chevron-right acc-arrow"></i></div>
+            <div class="acc-body" id="acc-body-attributes"></div>
+          </div>
+
+        </div><!-- #rp-accordion -->
+      </div><!-- #tab-design -->
+
+      <!-- \u2500\u2500 States pane \u2500\u2500 -->
+      <div id="tab-states" class="rp-pane">
+        <div id="states-list">
+          <div class="states-empty">
+            <i class="bi bi-layers"></i>
+            No changes yet \u2014 edit elements on the page to see states here
+          </div>
+        </div>
+      </div><!-- #tab-states -->
+
+      <!-- \u2500\u2500 History pane (future) \u2500\u2500 -->
+      <div id="tab-history" class="rp-pane">
+        <div class="tab-ph">
+          <i class="bi bi-clock-history"></i>
+          <strong style="display:block;font-size:13px;color:var(--text-2)">History</strong>
+          <p>Full edit history with time-travel undo is coming in a future release.</p>
+        </div>
+      </div><!-- #tab-history -->
+
+    </div><!-- #right-panel -->
+
+  </div><!-- #main -->
+
+  <!-- Breadcrumb -->
+  <div id="breadcrumb">
+    <i class="bi bi-code-slash" style="opacity:.4"></i>
+    <span id="bc-path" style="color:var(--text-3)">No element selected</span>
+  </div>
+
+</div><!-- #app -->
+
+<!-- CDN scripts -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/givanz/VvvebJs@master/libs/builder/builder.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/givanz/VvvebJs@master/libs/builder/undo.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/givanz/VvvebJs@master/libs/builder/inputs.js"></script>
+<!-- components.js defines shared colour-class arrays used by bootstrap5/widgets components -->
+<script src="https://cdn.jsdelivr.net/gh/givanz/VvvebJs@master/libs/builder/components.js"></script>
+<script>
+/* Safety stub: if components.js didn't define these, create empty arrays so
+   components-bootstrap5.js doesn't throw ReferenceError on load. */
+if (typeof bgcolorClasses === 'undefined') window.bgcolorClasses = [];
+if (typeof colorClasses    === 'undefined') window.colorClasses    = [];
+if (typeof textColorClasses=== 'undefined') window.textColorClasses= [];
+if (typeof borderClasses   === 'undefined') window.borderClasses   = [];
+if (typeof sizeClasses     === 'undefined') window.sizeClasses     = [];
+</script>
+<script src="https://cdn.jsdelivr.net/gh/givanz/VvvebJs@master/libs/builder/components-bootstrap5.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/givanz/VvvebJs@master/libs/builder/components-widgets.js"></script>
+
+<script>
+'use strict';
+
+// \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 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>' },
+];
+
+// \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';
+
+function send(type, payload) {
+  window.parent.postMessage({ channel: CHANNEL, type: type, payload: payload || {} }, '*');
+}
+
+window.addEventListener('message', function(e) {
+  if (!e.data || e.data.channel !== CHANNEL) return;
+  switch (e.data.type) {
+    case 'load-experiment':  handleLoadExperiment(e.data.payload); break;
+    case 'close-editor':     handleClose(); break;
+  }
+});
+
+// \u2500\u2500 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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+var experimentData  = null;
+var variations      = [];
+var activeVarId     = null;
+var varHtmlCache    = {};
+var isDirty         = false;
+var vvvebReady      = false;
+var currentMode     = 'editor';
+var currentDevice   = 'desktop';
+var selectedEl      = null;
+var currentMainTab  = 'design';
+// Each entry: {selector, label, cssProp, value, targetEl}
+// cssProp is null for non-CSS attributes (href, alt, classes\u2026)
+var stateChanges    = [];
+
+// \u2500\u2500 Dirty tracking \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 markDirty() {
+  isDirty = true;
+  document.getElementById('dirty-dot').classList.add('on');
+  send('mutations-changed', {});
+}
+function markClean() {
+  isDirty = false;
+  document.getElementById('dirty-dot').classList.remove('on');
+}
+
+// \u2500\u2500 Mode 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\u2500\u2500\u2500\u2500\u2500
+function setMode(mode) {
+  currentMode = mode;
+  document.body.className = 'mode-' + mode;
+  document.getElementById('btn-mode-editor').classList.toggle('active', mode === 'editor');
+  document.getElementById('btn-mode-nav').classList.toggle('active', mode === 'navigate');
+  if (mode === 'navigate') deselectElement();
+}
+
+// \u2500\u2500 Device 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\u2500\u2500\u2500
+var DEVICE_LABELS = { desktop: 'Desktop', tablet: 'Tablet \xB7 768px', mobile: 'Mobile \xB7 390px' };
+function setDevice(device) {
+  currentDevice = device;
+  var frame = document.getElementById('device-frame');
+  frame.className = device === 'desktop' ? '' : device;
+  ['desktop','tablet','mobile'].forEach(function(d) {
+    document.getElementById('dev-' + d).classList.toggle('active', d === device);
+  });
+  document.getElementById('dev-label').textContent = DEVICE_LABELS[device] || device;
+}
+
+// \u2500\u2500 Left panel tab switch \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 switchLeftTab(tab) {
+  document.querySelectorAll('.lp-tab').forEach(function(t, i) {
+    t.classList.toggle('active', (i === 0 && tab === 'components') || (i === 1 && tab === 'sections'));
+  });
+  document.getElementById('tab-components').classList.toggle('active', tab === 'components');
+  document.getElementById('tab-sections').classList.toggle('active', tab === 'sections');
+}
+
+// \u2500\u2500 Accordion toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+function toggleAcc(name) {
+  var sec = document.getElementById('acc-' + name);
+  if (sec) sec.classList.toggle('open');
+}
+
+// \u2500\u2500 Main tab switching (Design / States / History) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+function switchMainTab(tab) {
+  currentMainTab = tab;
+  document.querySelectorAll('.main-tab').forEach(function(btn, i) {
+    btn.classList.toggle('active', ['design','states','history'][i] === tab);
+  });
+  ['design','states','history'].forEach(function(t) {
+    var pane = document.getElementById('tab-' + t);
+    if (pane) pane.classList.toggle('active', t === tab);
+  });
+  if (tab === 'states') renderStatesTab();
+}
+
+// \u2500\u2500 Change log (States 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
+// Map of input-id \u2192 {label, cssProp} used by logChange
+var PROP_META = {
+  'pp-color':   {label:'Text color',              cssProp:'color'},
+  'pp-fs':      {label:'Font size',               cssProp:'font-size'},
+  'pp-fw':      {label:'Font weight',             cssProp:'font-weight'},
+  'pp-ff':      {label:'Font family',             cssProp:'font-family'},
+  'pp-ta':      {label:'Text align',              cssProp:'text-align'},
+  'pp-lh':      {label:'Line height',             cssProp:'line-height'},
+  'pp-ls':      {label:'Letter spacing',          cssProp:'letter-spacing'},
+  'pp-td':      {label:'Text decoration',         cssProp:'text-decoration'},
+  'pp-bg':      {label:'Background color',        cssProp:'background-color'},
+  'pp-bgi':     {label:'Background image',        cssProp:'background-image'},
+  'pp-bgs':     {label:'Background size',         cssProp:'background-size'},
+  'pp-bgr':     {label:'Background repeat',       cssProp:'background-repeat'},
+  'pp-op':      {label:'Opacity',                 cssProp:'opacity'},
+  'pp-op-range':{label:'Opacity',                 cssProp:'opacity'},
+  'pp-bst':     {label:'Border style',            cssProp:'border-style'},
+  'pp-bw':      {label:'Border width',            cssProp:'border-width'},
+  'pp-bc':      {label:'Border color',            cssProp:'border-color'},
+  'pp-brtl':    {label:'Radius top-left',         cssProp:'border-top-left-radius'},
+  'pp-brtr':    {label:'Radius top-right',        cssProp:'border-top-right-radius'},
+  'pp-brbl':    {label:'Radius bottom-left',      cssProp:'border-bottom-left-radius'},
+  'pp-brbr':    {label:'Radius bottom-right',     cssProp:'border-bottom-right-radius'},
+  'pp-bs':      {label:'Box shadow',              cssProp:'box-shadow'},
+  'pp-mt':      {label:'Margin top',              cssProp:'margin-top'},
+  'pp-mr':      {label:'Margin right',            cssProp:'margin-right'},
+  'pp-mb':      {label:'Margin bottom',           cssProp:'margin-bottom'},
+  'pp-ml':      {label:'Margin left',             cssProp:'margin-left'},
+  'pp-pt':      {label:'Padding top',             cssProp:'padding-top'},
+  'pp-pr':      {label:'Padding right',           cssProp:'padding-right'},
+  'pp-pb':      {label:'Padding bottom',          cssProp:'padding-bottom'},
+  'pp-pl':      {label:'Padding left',            cssProp:'padding-left'},
+  'pp-w':       {label:'Width',                   cssProp:'width'},
+  'pp-h':       {label:'Height',                  cssProp:'height'},
+  'pp-minw':    {label:'Min width',               cssProp:'min-width'},
+  'pp-minh':    {label:'Min height',              cssProp:'min-height'},
+  'pp-maxw':    {label:'Max width',               cssProp:'max-width'},
+  'pp-maxh':    {label:'Max height',              cssProp:'max-height'},
+  'pp-disp':    {label:'Display',                 cssProp:'display'},
+  'pp-pos':     {label:'Position',                cssProp:'position'},
+  'pp-top':     {label:'Top',                     cssProp:'top'},
+  'pp-left':    {label:'Left',                    cssProp:'left'},
+  'pp-bottom':  {label:'Bottom',                  cssProp:'bottom'},
+  'pp-right':   {label:'Right',                   cssProp:'right'},
+  'pp-cls':     {label:'Classes',                 cssProp:null},
+  'pp-css':     {label:'Custom CSS',              cssProp:null},
+  'pp-id':      {label:'ID',                      cssProp:null},
+  'pp-href':    {label:'Href',                    cssProp:null},
+  'pp-target':  {label:'Target',                  cssProp:null},
+  'pp-src':     {label:'Src',                     cssProp:null},
+  'pp-alt':     {label:'Alt',                     cssProp:null},
+  'pp-ph':      {label:'Placeholder',             cssProp:null},
+  'pp-text':    {label:'Inner text',              cssProp:null},
+  'pp-html':    {label:'Inner HTML',              cssProp:null},
+  'pp-mob-css': {label:'Mobile CSS',              cssProp:null},
+  'pp-tab-css': {label:'Tablet CSS',              cssProp:null},
+};
+
+// Read the element's CURRENT value for a given inputId (called BEFORE the change is applied).
+function getOriginalValue(inputId, el) {
+  var meta = PROP_META[inputId];
+  if (!meta) return '';
+  if (meta.cssProp) {
+    // Inline style value (may be empty string if not set)
+    var camel = meta.cssProp.replace(/-([a-z])/g, function(_, l){ return l.toUpperCase(); });
+    return el.style[camel] || '';
+  }
+  switch (inputId) {
+    case 'pp-text':    return el.innerText      || '';
+    case 'pp-html':    return el.innerHTML      || '';
+    case 'pp-cls':     return el.className      || '';
+    case 'pp-id':      return el.id             || '';
+    case 'pp-href':    return el.getAttribute('href')        || '';
+    case 'pp-target':  return el.getAttribute('target')      || '';
+    case 'pp-src':     return el.getAttribute('src')         || '';
+    case 'pp-alt':     return el.getAttribute('alt')         || '';
+    case 'pp-ph':      return el.getAttribute('placeholder') || '';
+    case 'pp-css':     return el.getAttribute('style')       || '';
+    case 'pp-mob-css': return el.dataset.mobileCss           || '';
+    case 'pp-tab-css': return el.dataset.tabletCss           || '';
+    default:           return '';
+  }
+}
+
+function logChange(selector, inputId, value, targetEl, originalValue) {
+  var meta = PROP_META[inputId];
+  if (!meta) return;
+  var key = selector + '||' + inputId;
+  // Skip trivially empty / reset values \u2014 remove from log if present
+  if (value === '' || value === 'none' || value === 'auto' || value === 'normal') {
+    stateChanges = stateChanges.filter(function(c) {
+      return !(c.selector === selector && c.inputId === inputId);
+    });
+  } else {
+    var idx = stateChanges.findIndex(function(c) { return (c.selector + '||' + c.inputId) === key; });
+    // Preserve originalValue from the first entry \u2014 don't overwrite on subsequent edits
+    var orig = (idx >= 0 && stateChanges[idx].originalValue != null)
+      ? stateChanges[idx].originalValue
+      : (originalValue != null ? originalValue : '');
+    var entry = {
+      selector: selector, inputId: inputId, label: meta.label,
+      cssProp: meta.cssProp, value: value, targetEl: targetEl, originalValue: orig
+    };
+    if (idx >= 0) { stateChanges[idx] = entry; } else { stateChanges.push(entry); }
+  }
+  if (currentMainTab === 'states') renderStatesTab();
+}
+
+function renderStatesTab() {
+  var container = document.getElementById('states-list');
+  if (!stateChanges.length) {
+    container.innerHTML = '<div class="states-empty"><i class="bi bi-layers"></i>No changes yet \u2014 edit elements on the page to see states here</div>';
+    return;
+  }
+  // Group by selector
+  var groups = {};
+  var order  = [];
+  stateChanges.forEach(function(c) {
+    if (!groups[c.selector]) { groups[c.selector] = []; order.push(c.selector); }
+    groups[c.selector].push(c);
+  });
+  var html = '<button id="states-clear" onclick="clearAllStates()"><i class="bi bi-trash3"></i> Clear all changes</button>';
+  order.forEach(function(sel) {
+    html += '<div class="state-group"><div class="state-group-sel">'+esc(sel)+'</div>';
+    groups[sel].forEach(function(c) {
+      var idx = stateChanges.indexOf(c);
+      html += '<div class="state-item">' +
+        '<span class="state-item-label">'+esc(c.label)+'</span>' +
+        '<span class="state-item-val" title="'+esc(c.value)+'">'+esc(c.value)+'</span>' +
+        '<button class="state-remove" title="Remove this change" onclick="removeStateChange('+idx+')">&#x2715;</button>' +
+      '</div>';
+    });
+    html += '</div>';
+  });
+  container.innerHTML = html;
+}
+
+// Resolve a live DOM element for a state-change entry.
+// Tries the stored direct reference first; if it's detached or missing,
+// falls back to querySelector(selector) inside the iframe document.
+function resolveChangeEl(change) {
+  try {
+    var iframeDoc = document.getElementById('iframeId').contentDocument;
+    if (!iframeDoc) return null;
+    // Prefer the direct reference when still attached to the iframe document
+    if (change.targetEl && iframeDoc.contains(change.targetEl)) {
+      return change.targetEl;
+    }
+    // Fallback: re-query by the stored CSS selector
+    return iframeDoc.querySelector(change.selector) || null;
+  } catch (e) {
+    console.warn('[V2] resolveChangeEl:', e);
+    return null;
+  }
+}
+
+function revertChangeOnDom(change) {
+  var el = resolveChangeEl(change);
+  if (!el) {
+    console.warn('[V2] revertChangeOnDom: element not found for selector:', change.selector);
+    return;
+  }
+  var orig = change.originalValue != null ? change.originalValue : '';
+
+  if (change.cssProp) {
+    // CSS inline style \u2014 remove the property so the stylesheet takes over
+    el.style.removeProperty(change.cssProp);
+    // Also clear camelCase alias to handle shorthand setters
+    try {
+      var camel = change.cssProp.replace(/-([a-z])/g, function(_, l){ return l.toUpperCase(); });
+      if (camel in el.style) el.style[camel] = '';
+    } catch(_) {}
+  } else {
+    // Non-CSS attribute / content \u2014 restore the original value
+    switch (change.inputId) {
+      case 'pp-text':   el.innerText = orig; break;
+      case 'pp-html':   el.innerHTML = orig; break;
+      case 'pp-cls':    el.className = orig; break;
+      case 'pp-id':     el.id = orig; break;
+      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-src':    orig ? el.setAttribute('src',    orig) : el.removeAttribute('src');    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-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);
+    }
+  }
+}
+
+// After reverting a change, sync the Design-tab input back to the original value.
+// Also handles linked inputs (opacity slider \u2194 number, etc.).
+function syncDesignInput(change) {
+  var orig = change.originalValue != null ? change.originalValue : '';
+  var inp = document.getElementById(change.inputId);
+  if (inp) inp.value = orig;
+  // Keep paired opacity inputs in sync
+  if (change.inputId === 'pp-op' || change.inputId === 'pp-op-range') {
+    var paired = document.getElementById(change.inputId === 'pp-op' ? 'pp-op-range' : 'pp-op');
+    if (paired) paired.value = orig;
+  }
+}
+
+function removeStateChange(idx) {
+  var change = stateChanges[idx];
+  if (!change) return;
+  revertChangeOnDom(change);
+  syncDesignInput(change);
+  stateChanges.splice(idx, 1);
+  renderStatesTab();
+  markDirty();
+}
+
+function clearAllStates() {
+  stateChanges.forEach(function(c) {
+    revertChangeOnDom(c);
+    syncDesignInput(c);
+  });
+  stateChanges = [];
+  renderStatesTab();
+  markDirty();
+}
+
+// \u2500\u2500 Experiment loading \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 handleLoadExperiment(data) {
+  experimentData = data;
+  variations = Array.isArray(data.variations) ? data.variations : [];
+  var firstNonControl = variations.find(function(v) { return !v.baseline; });
+  activeVarId = (firstNonControl || variations[0] || {})._id || null;
+  renderVariationTabs();
+
+  var pageUrl = data.pageUrl || '';
+  if (!pageUrl) {
+    document.getElementById('loading').classList.add('hidden');
+    showNoUrl(true);
+    return;
+  }
+  var urlBar = document.getElementById('url-bar');
+  urlBar.textContent = pageUrl;
+  urlBar.title = pageUrl;
+  var proxyUrl = '/api/proxy?password=' + encodeURIComponent(data.editorPassword || '') +
+                 '&url=' + encodeURIComponent(pageUrl);
+  loadPage(proxyUrl);
+}
+
+function showNoUrl(show) {
+  document.getElementById('no-url').style.display = show ? 'flex' : 'none';
+}
+
+function loadPage(proxyUrl) {
+  showNoUrl(false);
+  var loading = document.getElementById('loading');
+  loading.classList.remove('hidden');
+  document.getElementById('load-status').textContent = 'Loading page\u2026';
+  var iframe = document.getElementById('iframeId');
+  iframe.style.display = 'block';
+  iframe.src = 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
+function renderVariationTabs() {
+  var container = document.getElementById('variation-tabs');
+  container.innerHTML = '';
+  variations.forEach(function(v) {
+    var label = v.name || (v.baseline ? 'Control' : 'Variation');
+    var btn = document.createElement('button');
+    btn.className = 'var-tab' + (v._id === activeVarId ? ' active' : '');
+    btn.textContent = label;
+    btn.title = label;
+    btn.onclick = function() { switchVariation(v._id); };
+    container.appendChild(btn);
+  });
+  var active = variations.find(function(v) { return v._id === activeVarId; });
+  document.getElementById('active-var-label').textContent = active ? active.name || '' : '';
+}
+
+function switchVariation(varId) {
+  if (varId === activeVarId) return;
+  saveCurrentVariationHtml();
+  activeVarId = varId;
+  renderVariationTabs();
+  deselectElement();
+  try {
+    var iframe = document.getElementById('iframeId');
+    var saved = varHtmlCache[varId];
+    if (saved) {
+      iframe.contentDocument.body.innerHTML = saved;
+      attachClickHandler();
+      attachChangeObserver();
+    } else {
+      var loading = document.getElementById('loading');
+      loading.classList.remove('hidden');
+      document.getElementById('load-status').textContent = 'Switching variation\u2026';
+      var src = iframe.src;
+      iframe.src = '';
+      iframe.src = src;
+    }
+  } catch(_) {}
+}
+
+function saveCurrentVariationHtml() {
+  if (!activeVarId) return;
+  try {
+    varHtmlCache[activeVarId] = document.getElementById('iframeId').contentDocument.body.innerHTML;
+  } catch(_) {}
+}
+
+/** Convert a kebab-case CSS property to camelCase for el.style access */
+function camelize(str) {
+  return (str || '').replace(/-([a-z])/g, function(_, c) { return c.toUpperCase(); });
+}
+
+/**
+ * Apply a single changeset entry to an element inside the editor iframe.
+ * Handles the Conversion.io backend format:
+ *   { selector, type: 'content'|'style'|'attribute'|'insert'|'remove', ... }
+ * and the V2 full-body snapshot:
+ *   { selector: '__vvveb_body__', html: '<full body html>' }
+ */
+function applyChangesetEntry(entry, iframeDoc) {
+  if (!entry || !entry.selector) return;
+
+  // \u2500\u2500 V2 full-body snapshot \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  if (entry.selector === '__vvveb_body__' && entry.html != null) {
+    iframeDoc.body.innerHTML = entry.html;
+    varHtmlCache[activeVarId] = entry.html;
+    return;
+  }
+
+  // \u2500\u2500 Standard granular changeset \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 el = null;
+  try { el = iframeDoc.querySelector(entry.selector); } catch(_) {}
+  if (!el) return;
+
+  switch (entry.type) {
+    case 'content':
+      if (entry.html != null)   el.innerHTML    = entry.html;
+      else if (entry.value != null) el.textContent = entry.value;
+      break;
+    case 'style':
+      if (entry.property && entry.value != null) {
+        el.style[camelize(entry.property)] = entry.value;
+      }
+      break;
+    case 'attribute':
+      if (entry.attribute && entry.value != null) {
+        el.setAttribute(entry.attribute, entry.value);
+      }
+      break;
+    case 'insert': {
+      var pos = entry.action === 'before' ? 'beforebegin' : 'afterend';
+      if (entry.html) el.insertAdjacentHTML(pos, entry.html);
+      break;
+    }
+    case 'remove':
+      el.style.display = 'none';
+      break;
+    default: break;
+  }
+}
+
+function applyActiveVariationHtml() {
+  if (!activeVarId) return;
+
+  // If we have an in-session HTML snapshot, use it (user edited in this session)
+  var saved = varHtmlCache[activeVarId];
+  if (saved) {
+    try { document.getElementById('iframeId').contentDocument.body.innerHTML = saved; } catch(_) {}
+    return;
+  }
+
+  // Apply pre-existing changesets from the loaded experiment
+  var variation = variations.find(function(v) { return v._id === activeVarId; });
+  if (!variation || !variation.changesets) return;
+  try {
+    var cs = JSON.parse(variation.changesets);
+    if (!Array.isArray(cs) || cs.length === 0) return;
+    var iframeDoc = document.getElementById('iframeId').contentDocument;
+    cs.forEach(function(entry) { applyChangesetEntry(entry, iframeDoc); });
+  } catch(_) {}
+}
+
+// \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) {
+  if (selectedEl) { try { selectedEl.classList.remove('vve-selected'); } catch(_) {} }
+  selectedEl = el;
+  try { el.classList.add('vve-selected'); } catch(_) {}
+  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);
+}
+
+function deselectElement() {
+  if (selectedEl) { try { selectedEl.classList.remove('vve-selected'); } catch(_) {} selectedEl = null; }
+  document.getElementById('no-sel').style.display = '';
+  document.getElementById('el-info').style.display = 'none';
+  document.getElementById('rp-accordion').style.display = 'none';
+  document.getElementById('bc-path').textContent = 'No element selected';
+  document.getElementById('bc-path').style.color = 'var(--text-3)';
+  // Switch back to Design tab so no-sel message is visible
+  switchMainTab('design');
+}
+
+// \u2500\u2500 Utility helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 esc(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
+function rgbToHex(rgb) {
+  var m = (rgb||'').match(/\\d+/g);
+  if (!m || m.length < 3) return '#000000';
+  return '#' + m.slice(0,3).map(function(n){ return ('0'+parseInt(n).toString(16)).slice(-2); }).join('');
+}
+function pr(label, inputHtml) {
+  return '<div class="pr"><span class="pr-lbl">'+label+'</span>'+inputHtml+'</div>';
+}
+function pr2(l1, i1, l2, i2) {
+  return '<div class="pr2"><div class="pr2-item"><div class="pr2-lbl">'+l1+'</div>'+i1+'</div>' +
+         '<div class="pr2-item"><div class="pr2-lbl">'+l2+'</div>'+i2+'</div></div>';
+}
+function subLbl(text) { return '<div class="sub-lbl">'+text+'</div>'; }
+function weightOpts(cur) {
+  return [['100','Thin'],['200','Extra Light'],['300','Light'],['400','Normal'],['500','Medium'],
+          ['600','Semi Bold'],['700','Bold'],['800','Extra Bold'],['900','Black']]
+    .map(function(p){return '<option value="'+p[0]+'"'+(cur===p[0]?' selected':'')+'>'+p[1]+'</option>';}).join('');
+}
+function selOpts(arr, cur) {
+  return arr.map(function(v){return '<option value="'+v+'"'+(cur===v?' selected':'')+'>'+v+'</option>';}).join('');
+}
+
+// \u2500\u2500 Shadow preset helper (called from data-val buttons) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+function applyShadowPreset(val) {
+  var inp = document.getElementById('pp-bs');
+  if (!inp) return;
+  inp.value = val;
+  inp.dispatchEvent(new Event('input'));
+}
+
+// \u2500\u2500 Image 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 _imageEl      = null;  // the <img> element currently being edited
+var _srcsetEntries = [];   // [{url, descriptor}]
+var _sizesEntries  = [];   // [{condition, value}]
+
+function parseSrcset(str) {
+  if (!str) return [];
+  return str.split(',').map(function(s) {
+    var p = s.trim().split(/s+/);
+    return {url: p[0] || '', descriptor: p[1] || ''};
+  }).filter(function(e){ return e.url; });
+}
+function buildSrcset(entries) {
+  return entries.map(function(e){ return e.descriptor ? e.url+' '+e.descriptor : e.url; }).join(', ');
+}
+function parseSizes(str) {
+  if (!str) return [];
+  return str.split(',').map(function(s) {
+    s = s.trim();
+    var m = s.match(/^(([^)]+))s+(.+)$/);
+    return m ? {condition: m[1], value: m[2]} : {condition: '', value: s};
+  }).filter(function(e){ return e.value; });
+}
+function buildSizes(entries) {
+  return entries.map(function(e){ return e.condition ? '('+e.condition+') '+e.value : e.value; }).join(', ');
+}
+
+function renderImageSection(el) {
+  _imageEl       = el;
+  _srcsetEntries = parseSrcset(el.getAttribute('srcset'));
+  _sizesEntries  = parseSizes(el.getAttribute('sizes'));
+  var sel = buildSelector(el);
+  var html = '';
+
+  // Live preview thumbnail
+  if (el.getAttribute('src')) {
+    html += '<img class="img-preview" src="'+esc(el.getAttribute('src'))+'" alt="">';
+  }
+
+  // Src + Alt
+  html += pr('Src', '<input class="pr-inp" id="pp-img-src" type="url" value="'+esc(el.getAttribute('src')||'')+'" placeholder="https://\u2026">');
+  html += pr('Alt', '<input class="pr-inp" id="pp-img-alt" type="text" value="'+esc(el.getAttribute('alt')||'')+'">');
+
+  // Srcset entries
+  html += subLbl('Srcset');
+  _srcsetEntries.forEach(function(entry, i) {
+    html += '<div class="img-row">' +
+      '<input class="pr-inp" type="url" id="pp-se-url-'+i+'" value="'+esc(entry.url)+'" placeholder="https://img.jpg">' +
+      '<input class="pr-inp img-desc" type="text" id="pp-se-desc-'+i+'" value="'+esc(entry.descriptor)+'" placeholder="760w">' +
+      '<button class="img-remove" type="button" onclick="removeSrcsetEntry('+i+')">&#x2715;</button>' +
+    '</div>';
+  });
+  html += '<button class="img-add" type="button" onclick="addSrcsetEntry()"><i class="bi bi-plus-lg"></i> Add srcset entry</button>';
+
+  // Sizes / media conditions
+  html += subLbl('Media conditions');
+  _sizesEntries.forEach(function(entry, i) {
+    html += '<div class="img-row">' +
+      '<select class="pr-inp img-cond-op" id="pp-sz-op-'+i+'">' +
+        ['max-width','min-width','max-height','min-height'].map(function(op){
+          return '<option value="'+op+'"'+(entry.condition.split(':')[0].trim()===op?' selected':'')+'>'+op+'</option>';
+        }).join('') +
+      '</select>' +
+      '<input class="pr-inp img-cond-val" type="text" id="pp-sz-val-'+i+'" value="'+esc((entry.condition.split(':')[1]||'').trim()||'')+'" placeholder="760px">' +
+      '<input class="pr-inp" type="text" id="pp-sz-size-'+i+'" value="'+esc(entry.value)+'" placeholder="760px">' +
+      '<button class="img-remove" type="button" onclick="removeSizesEntry('+i+')">&#x2715;</button>' +
+    '</div>';
+  });
+  html += '<button class="img-add" type="button" onclick="addSizesEntry()"><i class="bi bi-plus-lg"></i> Add media condition</button>';
+
+  document.getElementById('acc-body-image').innerHTML = html;
+
+  // Wire src + alt
+  var srcInp = document.getElementById('pp-img-src');
+  if (srcInp) srcInp.addEventListener('input', function() {
+    var orig = getOriginalValue('pp-src', el);
+    el.setAttribute('src', srcInp.value);
+    var prev = document.querySelector('.img-preview');
+    if (prev) prev.src = srcInp.value;
+    logChange(sel, 'pp-src', srcInp.value, el, orig);
+    markDirty();
+  });
+  var altInp = document.getElementById('pp-img-alt');
+  if (altInp) altInp.addEventListener('input', function() {
+    var orig = getOriginalValue('pp-alt', el);
+    el.setAttribute('alt', altInp.value);
+    logChange(sel, 'pp-alt', altInp.value, el, orig);
+    markDirty();
+  });
+
+  // Wire srcset entry inputs
+  _srcsetEntries.forEach(function(entry, i) {
+    var uInp = document.getElementById('pp-se-url-'+i);
+    var dInp = document.getElementById('pp-se-desc-'+i);
+    function flushSrcset() {
+      el.setAttribute('srcset', buildSrcset(_srcsetEntries));
+      markDirty();
+    }
+    if (uInp) uInp.addEventListener('input', function(){ _srcsetEntries[i].url = uInp.value; flushSrcset(); });
+    if (dInp) dInp.addEventListener('input', function(){ _srcsetEntries[i].descriptor = dInp.value; flushSrcset(); });
+  });
+
+  // Wire sizes/condition inputs
+  _sizesEntries.forEach(function(entry, i) {
+    var opInp   = document.getElementById('pp-sz-op-'+i);
+    var valInp  = document.getElementById('pp-sz-val-'+i);
+    var sizeInp = document.getElementById('pp-sz-size-'+i);
+    function buildCondition() {
+      var op  = opInp  ? opInp.value  : (_sizesEntries[i].condition.split(':')[0].trim());
+      var val = valInp ? valInp.value : '';
+      _sizesEntries[i].condition = op + ': ' + val;
+    }
+    function flushSizes() {
+      el.setAttribute('sizes', buildSizes(_sizesEntries));
+      markDirty();
+    }
+    if (opInp)   opInp.addEventListener('change', function(){ buildCondition(); flushSizes(); });
+    if (valInp)  valInp.addEventListener('input',  function(){ buildCondition(); flushSizes(); });
+    if (sizeInp) sizeInp.addEventListener('input', function(){ _sizesEntries[i].value = sizeInp.value; flushSizes(); });
+  });
+}
+
+function addSrcsetEntry() {
+  _srcsetEntries.push({url:'', descriptor:''});
+  if (_imageEl) renderImageSection(_imageEl);
+}
+function removeSrcsetEntry(i) {
+  _srcsetEntries.splice(i, 1);
+  if (_imageEl) { _imageEl.setAttribute('srcset', buildSrcset(_srcsetEntries)); renderImageSection(_imageEl); markDirty(); }
+}
+function addSizesEntry() {
+  _sizesEntries.push({condition:'max-width: 760px', value:'760px'});
+  if (_imageEl) renderImageSection(_imageEl);
+}
+function removeSizesEntry(i) {
+  _sizesEntries.splice(i, 1);
+  if (_imageEl) { _imageEl.setAttribute('sizes', buildSizes(_sizesEntries)); renderImageSection(_imageEl); markDirty(); }
+}
+
+// \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) {
+  if (!el) return;
+  var cs = el.ownerDocument.defaultView.getComputedStyle(el);
+  var tag = el.tagName.toLowerCase();
+
+  // Show element info header
+  document.getElementById('el-info-tag').textContent = '<'+tag+'>';
+  document.getElementById('el-info-sel').textContent = buildSelector(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
+  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';
+    _imageEl = null;
+  }
+
+  // \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>') +
+    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">') +
+    pr('Text align', '<select class="pr-inp" id="pp-ta">'+selOpts(['left','center','right','justify'],cs.textAlign)+'</select>') +
+    pr2('Line height', '<input class="pr-inp" type="text" id="pp-lh" value="'+esc(el.style.lineHeight||'')+'" placeholder="normal">',
+        'Letter spacing', '<input class="pr-inp" type="text" id="pp-ls" value="'+esc(el.style.letterSpacing||'')+'" placeholder="0">') +
+    pr('Text decoration', '<select class="pr-inp" id="pp-td">'+selOpts(['none','underline','line-through','overline'],cs.textDecoration.split(' ')[0])+'</select>');
+
+  // \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('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>');
+
+  // \u2500\u2500 Opacity \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 opVal = parseFloat(cs.opacity||'1').toFixed(2);
+  document.getElementById('acc-body-opacity').innerHTML =
+    '<div class="op-wrap">' +
+      '<input type="range" class="op-slider" id="pp-op-range" min="0" max="1" step="0.01" value="'+opVal+'">' +
+      '<input class="pr-inp pr-num" type="number" id="pp-op" min="0" max="1" step="0.01" value="'+opVal+'" style="width:54px;flex:none">' +
+    '</div>';
+
+  // \u2500\u2500 Border \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-border').innerHTML =
+    pr2('Style', '<select class="pr-inp" id="pp-bst">'+selOpts(['none','solid','dashed','dotted','double'],cs.borderStyle)+'</select>',
+        'Color', '<input type="color" class="pr-color" id="pp-bc" value="'+esc(rgbToHex(cs.borderColor))+'">') +
+    pr('Width', '<input class="pr-inp pr-num" type="number" id="pp-bw" min="0" max="20" value="'+parseInt(cs.borderWidth||'0')+'"><span class="pr-unit">px</span>') +
+    subLbl('Border Radius') +
+    '<div class="pr2">' +
+      '<div class="pr2-item"><div class="pr2-lbl">Top Left</div><input class="pr-inp" type="number" id="pp-brtl" min="0" value="'+parseInt(cs.borderTopLeftRadius||'0')+'"></div>' +
+      '<div class="pr2-item"><div class="pr2-lbl">Top Right</div><input class="pr-inp" type="number" id="pp-brtr" min="0" value="'+parseInt(cs.borderTopRightRadius||'0')+'"></div>' +
+      '<div class="pr2-item"><div class="pr2-lbl">Bottom Left</div><input class="pr-inp" type="number" id="pp-brbl" min="0" value="'+parseInt(cs.borderBottomLeftRadius||'0')+'"></div>' +
+      '<div class="pr2-item"><div class="pr2-lbl">Bottom Right</div><input class="pr-inp" type="number" id="pp-brbr" min="0" value="'+parseInt(cs.borderBottomRightRadius||'0')+'"></div>' +
+    '</div>';
+
+  // \u2500\u2500 Shadow \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-shadow').innerHTML =
+    pr('Box Shadow', '<input class="pr-inp" id="pp-bs" type="text" value="'+esc(el.style.boxShadow||'')+'" placeholder="none">') +
+    '<div class="shadow-presets">' +
+      [['None','none'],['xs','0 1px 2px rgba(0,0,0,.1)'],['sm','0 2px 8px rgba(0,0,0,.15)'],['md','0 4px 24px rgba(0,0,0,.2)'],['lg','0 8px 40px rgba(0,0,0,.3)']].map(function(p){
+        return '<button class="shadow-preset" type="button" onclick="applyShadowPreset(this.dataset.val)" data-val="'+esc(p[1])+'">'+p[0]+'</button>';
+      }).join('') +
+    '</div>';
+
+  // \u2500\u2500 Spacing \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-spacing').innerHTML =
+    subLbl('Margin') +
+    '<div class="pr2">' +
+      '<div class="pr2-item"><div class="pr2-lbl">Top</div><input class="pr-inp" type="number" id="pp-mt" value="'+parseInt(cs.marginTop||'0')+'"></div>' +
+      '<div class="pr2-item"><div class="pr2-lbl">Right</div><input class="pr-inp" type="number" id="pp-mr" value="'+parseInt(cs.marginRight||'0')+'"></div>' +
+      '<div class="pr2-item"><div class="pr2-lbl">Bottom</div><input class="pr-inp" type="number" id="pp-mb" value="'+parseInt(cs.marginBottom||'0')+'"></div>' +
+      '<div class="pr2-item"><div class="pr2-lbl">Left</div><input class="pr-inp" type="number" id="pp-ml" value="'+parseInt(cs.marginLeft||'0')+'"></div>' +
+    '</div>' +
+    subLbl('Padding') +
+    '<div class="pr2">' +
+      '<div class="pr2-item"><div class="pr2-lbl">Top</div><input class="pr-inp" type="number" id="pp-pt" value="'+parseInt(cs.paddingTop||'0')+'"></div>' +
+      '<div class="pr2-item"><div class="pr2-lbl">Right</div><input class="pr-inp" type="number" id="pp-pr" value="'+parseInt(cs.paddingRight||'0')+'"></div>' +
+      '<div class="pr2-item"><div class="pr2-lbl">Bottom</div><input class="pr-inp" type="number" id="pp-pb" value="'+parseInt(cs.paddingBottom||'0')+'"></div>' +
+      '<div class="pr2-item"><div class="pr2-lbl">Left</div><input class="pr-inp" type="number" id="pp-pl" value="'+parseInt(cs.paddingLeft||'0')+'"></div>' +
+    '</div>';
+
+  // \u2500\u2500 Size & Position \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-size').innerHTML =
+    pr2('Width',     '<input class="pr-inp" type="text" id="pp-w"    value="'+esc(el.style.width||'')+'"    placeholder="auto">',
+        'Height',    '<input class="pr-inp" type="text" id="pp-h"    value="'+esc(el.style.height||'')+'"   placeholder="auto">') +
+    pr2('Min Width', '<input class="pr-inp" type="text" id="pp-minw" value="'+esc(el.style.minWidth||'')+'" placeholder="0">',
+        'Min Height','<input class="pr-inp" type="text" id="pp-minh" value="'+esc(el.style.minHeight||'')+'">') +
+    pr2('Max Width', '<input class="pr-inp" type="text" id="pp-maxw" value="'+esc(el.style.maxWidth||'')+'" placeholder="none">',
+        'Max Height','<input class="pr-inp" type="text" id="pp-maxh" value="'+esc(el.style.maxHeight||'')+'">') +
+    pr2('Display',  '<select class="pr-inp" id="pp-disp">'+selOpts(['block','inline-block','flex','inline-flex','grid','inline','none'],cs.display)+'</select>',
+        'Position', '<select class="pr-inp" id="pp-pos">'+selOpts(['static','relative','absolute','fixed','sticky'],cs.position)+'</select>') +
+    pr2('Top',    '<input class="pr-inp" type="text" id="pp-top"    value="'+esc(el.style.top||'')+'"    placeholder="auto">',
+        'Left',   '<input class="pr-inp" type="text" id="pp-left"   value="'+esc(el.style.left||'')+'"   placeholder="auto">') +
+    pr2('Bottom', '<input class="pr-inp" type="text" id="pp-bottom" value="'+esc(el.style.bottom||'')+'" placeholder="auto">',
+        'Right',  '<input class="pr-inp" type="text" id="pp-right"  value="'+esc(el.style.right||'')+'"  placeholder="auto">');
+
+  // \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>' +
+    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>';
+
+  // \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 =
+    pr('Classes', '<input class="pr-inp" id="pp-cls" type="text" value="'+esc(el.className||'')+'" placeholder="class1 class2">') +
+    subLbl('Custom CSS') +
+    '<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>';
+
+  // \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>';
+
+  // \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 = [
+    ['pp-color',  function(v){el.style.color=v}],
+    ['pp-fs',     function(v){el.style.fontSize=v+'px'}],
+    ['pp-fw',     function(v){el.style.fontWeight=v}],
+    ['pp-ff',     function(v){el.style.fontFamily=v}],
+    ['pp-ta',     function(v){el.style.textAlign=v}],
+    ['pp-lh',     function(v){el.style.lineHeight=v}],
+    ['pp-ls',     function(v){el.style.letterSpacing=v}],
+    ['pp-td',     function(v){el.style.textDecoration=v}],
+    ['pp-bg',     function(v){el.style.backgroundColor=v}],
+    ['pp-bgi',    function(v){el.style.backgroundImage=v?'url('+v+')':''}],
+    ['pp-bgs',    function(v){el.style.backgroundSize=v}],
+    ['pp-bgr',    function(v){el.style.backgroundRepeat=v}],
+    ['pp-op',     function(v){el.style.opacity=v;var r=document.getElementById('pp-op-range');if(r)r.value=v}],
+    ['pp-op-range',function(v){el.style.opacity=v;var i=document.getElementById('pp-op');if(i)i.value=parseFloat(v).toFixed(2)}],
+    ['pp-bst',    function(v){el.style.borderStyle=v}],
+    ['pp-bw',     function(v){el.style.borderWidth=v+'px';if(parseInt(v)>0&&!el.style.borderStyle)el.style.borderStyle='solid'}],
+    ['pp-bc',     function(v){el.style.borderColor=v}],
+    ['pp-brtl',   function(v){el.style.borderTopLeftRadius=v+'px'}],
+    ['pp-brtr',   function(v){el.style.borderTopRightRadius=v+'px'}],
+    ['pp-brbl',   function(v){el.style.borderBottomLeftRadius=v+'px'}],
+    ['pp-brbr',   function(v){el.style.borderBottomRightRadius=v+'px'}],
+    ['pp-bs',     function(v){el.style.boxShadow=v}],
+    ['pp-mt',     function(v){el.style.marginTop=v+'px'}],
+    ['pp-mr',     function(v){el.style.marginRight=v+'px'}],
+    ['pp-mb',     function(v){el.style.marginBottom=v+'px'}],
+    ['pp-ml',     function(v){el.style.marginLeft=v+'px'}],
+    ['pp-pt',     function(v){el.style.paddingTop=v+'px'}],
+    ['pp-pr',     function(v){el.style.paddingRight=v+'px'}],
+    ['pp-pb',     function(v){el.style.paddingBottom=v+'px'}],
+    ['pp-pl',     function(v){el.style.paddingLeft=v+'px'}],
+    ['pp-w',      function(v){el.style.width=v}],
+    ['pp-h',      function(v){el.style.height=v}],
+    ['pp-minw',   function(v){el.style.minWidth=v}],
+    ['pp-minh',   function(v){el.style.minHeight=v}],
+    ['pp-maxw',   function(v){el.style.maxWidth=v}],
+    ['pp-maxh',   function(v){el.style.maxHeight=v}],
+    ['pp-disp',   function(v){el.style.display=v}],
+    ['pp-pos',    function(v){el.style.position=v}],
+    ['pp-top',    function(v){el.style.top=v}],
+    ['pp-left',   function(v){el.style.left=v}],
+    ['pp-bottom', function(v){el.style.bottom=v}],
+    ['pp-right',  function(v){el.style.right=v}],
+    ['pp-mob-css',function(v){el.dataset.mobileCss=v}],
+    ['pp-tab-css',function(v){el.dataset.tabletCss=v}],
+    ['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-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){
+    var inp = document.getElementById(b[0]);
+    if (inp) inp.addEventListener('input', function(){
+      // Read the original value BEFORE applying the change so we can revert later
+      var orig = getOriginalValue(b[0], el);
+      b[1](inp.value);
+      logChange(sel, b[0], inp.value, el, orig);
+      markDirty();
+    });
+  });
+}
+
+// \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
+function buildSelector(el) {
+  if (!el) return '';
+  if (el.id) return '#' + el.id;
+  var parts = [], node = el, depth = 0;
+  while (node && node.nodeType === 1 && depth < 5) {
+    if (node.id) { parts.unshift('#' + node.id); break; }
+    var p = node.tagName.toLowerCase();
+    if (node.classList && node.classList.length) p += '.' + Array.from(node.classList).slice(0,2).join('.');
+    var idx = 1, sib = node.previousElementSibling;
+    while (sib) { if (sib.tagName === node.tagName) idx++; sib = sib.previousElementSibling; }
+    if (idx > 1) p += ':nth-of-type(' + idx + ')';
+    parts.unshift(p);
+    node = node.parentElement;
+    depth++;
+  }
+  return parts.join(' > ');
+}
+
+// \u2500\u2500 Iframe interaction \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 attachClickHandler() {
+  try {
+    var iframe = document.getElementById('iframeId');
+    var doc = iframe.contentDocument;
+    doc.addEventListener('click', function(e) {
+      if (currentMode !== 'editor') return;
+      e.preventDefault();
+      e.stopPropagation();
+      var target = e.target;
+      if (!target || target === doc.body || target === doc.documentElement) {
+        deselectElement(); return;
+      }
+      selectElement(target);
+    }, true);
+  } catch(_) {}
+}
+
+function attachChangeObserver() {
+  try {
+    var iframe = document.getElementById('iframeId');
+    var obs = new MutationObserver(function() { markDirty(); });
+    obs.observe(iframe.contentDocument.body, {
+      childList: true, subtree: true, attributes: true, characterData: true
+    });
+  } catch(_) {}
+}
+
+// \u2500\u2500 HTML insertion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 insertHtml(html) {
+  if (!html) return;
+  try {
+    var iframe = document.getElementById('iframeId');
+    var doc = iframe.contentDocument;
+    var tmp = doc.createElement('div');
+    tmp.innerHTML = html;
+    var node = tmp.firstElementChild || tmp;
+    if (selectedEl && selectedEl !== doc.body && selectedEl.parentNode) {
+      selectedEl.parentNode.insertBefore(node, selectedEl.nextSibling);
+    } else {
+      doc.body.appendChild(node);
+    }
+    selectElement(node);
+    markDirty();
+  } catch(err) { console.warn('[V2] insertHtml:', err); }
+}
+
+// \u2500\u2500 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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 renderSidebar(filter) {
+  var q = (filter || '').toLowerCase();
+
+  // Components tab
+  var compTab = document.getElementById('tab-components');
+  compTab.innerHTML = '';
+  var baseFiltered = BASE_COMPONENTS.filter(function(c) { return !q || c.name.toLowerCase().indexOf(q) >= 0; });
+  if (baseFiltered.length > 0) {
+    var h1 = document.createElement('div'); h1.className = 'cg-hdr'; h1.textContent = 'Base Elements'; compTab.appendChild(h1);
+    var g1 = document.createElement('div'); g1.className = 'cg-grid';
+    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); };
+      g1.appendChild(item);
+    });
+    compTab.appendChild(g1);
+  }
+  if (!q && typeof Vvveb !== 'undefined' && Vvveb.Components && Vvveb.Components.list) {
+    var vvItems = [], clist = Vvveb.Components.list;
+    for (var ck in clist) { if (Object.prototype.hasOwnProperty.call(clist,ck)) vvItems.push({ name:(clist[ck].name||ck).slice(0,14), html:clist[ck].html||'' }); }
+    if (vvItems.length > 0) {
+      var h2 = document.createElement('div'); h2.className = 'cg-hdr'; h2.textContent = 'Bootstrap 5'; compTab.appendChild(h2);
+      var g2 = document.createElement('div'); g2.className = 'cg-grid';
+      vvItems.slice(0,21).forEach(function(c) {
+        var item = document.createElement('div'); item.className = 'cg-item'; item.title = c.name;
+        item.innerHTML = '<div class="cg-icon"><i class="bi bi-puzzle"></i></div><div class="cg-name">' + c.name + '</div>';
+        item.onclick = function() { insertHtml(c.html); };
+        g2.appendChild(item);
+      });
+      compTab.appendChild(g2);
+    }
+  }
+  if (!compTab.children.length) compTab.innerHTML = '<div style="padding:20px;text-align:center;color:#444;font-size:12px">No components match</div>';
+
+  // Sections tab
+  var secTab = document.getElementById('tab-sections');
+  secTab.innerHTML = '';
+  var croFiltered = CRO_SECTIONS.filter(function(s) { return !q || s.name.toLowerCase().indexOf(q) >= 0 || (s.desc||'').toLowerCase().indexOf(q) >= 0; });
+  if (croFiltered.length > 0) {
+    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); };
+      secTab.appendChild(item);
+    });
+  }
+  if (typeof Vvveb !== 'undefined' && Vvveb.Sections && Vvveb.Sections.list) {
+    var slist = Vvveb.Sections.list, hasVv = false;
+    for (var sk in slist) {
+      if (!Object.prototype.hasOwnProperty.call(slist,sk)) continue;
+      var sec = slist[sk], snm = sec.name || sk;
+      if (q && snm.toLowerCase().indexOf(q) < 0) continue;
+      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);
+      secTab.appendChild(sel);
+    }
+  }
+  if (!secTab.children.length) secTab.innerHTML = '<div style="padding:20px;text-align:center;color:#444;font-size:12px">No sections match</div>';
+}
+
+document.getElementById('comp-search').addEventListener('input', function() { renderSidebar(this.value); });
+
+// \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
+document.getElementById('btn-save').addEventListener('click', handleSave);
+document.getElementById('btn-close').addEventListener('click', handleClose);
+
+function handleSave() {
+  saveCurrentVariationHtml();
+  var updatedVariations = variations.map(function(v) {
+    var saved = varHtmlCache[v._id];
+    if (!saved) return Object.assign({}, v);
+    return Object.assign({}, v, { changesets: JSON.stringify([{ selector: '__vvveb_body__', html: saved, mutations: [] }]) });
+  });
+  send('save-experiment', { experimentId: experimentData ? experimentData.experimentId : null, variations: updatedVariations });
+  markClean();
+}
+
+function handleClose() {
+  if (isDirty && !confirm('You have unsaved changes. Discard them?')) return;
+  send('close-editor', {});
+}
+
+// \u2500\u2500 Keyboard shortcuts \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.addEventListener('keydown', function(e) {
+  var meta = e.metaKey || e.ctrlKey;
+  if (meta && !e.shiftKey && e.key === 'z') { e.preventDefault(); if (typeof Vvveb !== 'undefined' && Vvveb.Undo) Vvveb.Undo.undo(); }
+  if (meta &&  e.shiftKey && e.key === 'z') { e.preventDefault(); if (typeof Vvveb !== 'undefined' && Vvveb.Undo) Vvveb.Undo.redo(); }
+  if (meta && e.key === 's') { e.preventDefault(); handleSave(); }
+  if (e.key === 'Escape' && selectedEl) deselectElement();
+});
+document.getElementById('btn-undo').addEventListener('click', function() { if (typeof Vvveb !== 'undefined' && Vvveb.Undo) Vvveb.Undo.undo(); });
+document.getElementById('btn-redo').addEventListener('click', function() { if (typeof Vvveb !== 'undefined' && Vvveb.Undo) Vvveb.Undo.redo(); });
+
+// \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 }); });
+}
+
+window.addEventListener('load', function() {
+  registerCROSections();
+  renderSidebar();
+  vvvebReady = true;
+
+  // CDN scripts loaded \u2014 hide spinner, show no-url state until experiment arrives
+  document.getElementById('loading').classList.add('hidden');
+  showNoUrl(true);
+
+  // After each iframe load: apply variation, wire click+mutation handlers
+  var iframe = document.getElementById('iframeId');
+  iframe.addEventListener('load', function() {
+    if (!iframe.src || iframe.src === 'about:blank' || iframe.src === window.location.href) return;
+    document.getElementById('loading').classList.add('hidden');
+    showNoUrl(false);
+    deselectElement();
+    applyActiveVariationHtml();
+    attachClickHandler();
+    attachChangeObserver();
+  });
+
+  send('editor-ready', {});
+});
+</script>
+</body>
+</html>`;
+}
+var getDefaultAnthropicApiKey = () => {
+  if (process.env.ANTHROPIC_API_KEY) return process.env.ANTHROPIC_API_KEY;
+  try {
+    const currentDir = path__default.default.dirname(url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('vite.cjs', document.baseURI).href))));
+    const envPath = path__default.default.resolve(
+      currentDir,
+      "../../../conversion-visual-editor/.env.local"
+    );
+    const envFile = fs__default.default.readFileSync(envPath, "utf-8");
+    const match = envFile.match(/ANTHROPIC_API_KEY=(.+)/);
+    return match ? match[1].trim() : "";
+  } catch {
+    return "";
+  }
+};
+function createVisualEditorMiddleware(options) {
+  const anthropicApiKey = options?.anthropicApiKey || getDefaultAnthropicApiKey();
+  const enableGenerateTestApi = options?.enableGenerateTestApi ?? true;
+  const allowedFrameOrigins = options?.allowedFrameOrigins ?? ["*"];
+  function setFrameHeaders(req, res) {
+    res.removeHeader("X-Frame-Options");
+    const requestOrigin = req.headers?.["origin"] || req.headers?.["referer"] || "";
+    if (allowedFrameOrigins.includes("*")) {
+      let frameOrigin = "*";
+      if (requestOrigin) {
+        try {
+          frameOrigin = new URL(requestOrigin).origin;
+        } catch {
+          frameOrigin = "*";
+        }
+      }
+      res.setHeader("Content-Security-Policy", `frame-ancestors 'self' ${frameOrigin}`);
+    } else {
+      res.setHeader(
+        "Content-Security-Policy",
+        `frame-ancestors 'self' ${allowedFrameOrigins.join(" ")}`
+      );
+    }
+  }
+  return async (req, res, next) => {
+    const pathname = (req.url || "").split("?")[0];
+    if (pathname === "/bridge.js") {
+      res.removeHeader("X-Frame-Options");
+      res.setHeader("Content-Type", "application/javascript; charset=utf-8");
+      res.setHeader("Cache-Control", "no-store");
+      res.end(BRIDGE_SCRIPT);
+      return;
+    }
+    if (pathname === "/vvveb-editor") {
+      res.setHeader("Content-Type", "text/html; charset=utf-8");
+      res.setHeader("Cache-Control", "no-store");
+      setFrameHeaders(req, res);
+      res.end(buildVvvebEditorHtml());
+      return;
+    }
+    if (pathname === "/api/generate-test" && enableGenerateTestApi) {
+      if (req.method === "OPTIONS") {
+        res.setHeader("Access-Control-Allow-Origin", "*");
+        res.setHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
+        res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+        res.statusCode = 204;
+        res.end();
+        return;
+      }
+      if (req.method !== "POST") {
+        res.statusCode = 405;
+        res.end(JSON.stringify({ error: "Method not allowed" }));
+        return;
+      }
+      if (!anthropicApiKey) {
+        res.statusCode = 500;
+        res.setHeader("Content-Type", "application/json");
+        res.end(
+          JSON.stringify({ error: "ANTHROPIC_API_KEY is not configured" })
+        );
+        return;
+      }
+      try {
+        const chunks = [];
+        for await (const chunk of req) chunks.push(chunk);
+        const body = JSON.parse(Buffer.concat(chunks).toString());
+        if (!body.prompt || !body.pageSnapshot) {
+          res.statusCode = 400;
+          res.setHeader("Content-Type", "application/json");
+          res.end(JSON.stringify({ error: "Missing prompt or pageSnapshot" }));
+          return;
+        }
+        const parts = [
+          "## Optimization Goal",
+          body.prompt,
+          "",
+          "## Page Snapshot",
+          JSON.stringify(body.pageSnapshot, null, 2)
+        ];
+        const anthropicRes = await fetch("https://api.anthropic.com/v1/messages", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key": anthropicApiKey,
+            "anthropic-version": "2023-06-01"
+          },
+          body: JSON.stringify({
+            model: "claude-sonnet-4-20250514",
+            max_tokens: 4096,
+            system: AI_SYSTEM_PROMPT,
+            messages: [{ role: "user", content: parts.join("\n") }]
+          })
+        });
+        if (!anthropicRes.ok) {
+          const errText = await anthropicRes.text();
+          res.statusCode = 502;
+          res.setHeader("Content-Type", "application/json");
+          res.end(
+            JSON.stringify({
+              error: `Anthropic API returned ${anthropicRes.status}`,
+              detail: errText
+            })
+          );
+          return;
+        }
+        const anthropicData = await anthropicRes.json();
+        const textBlock = anthropicData.content?.find((b) => b.type === "text");
+        if (!textBlock?.text) {
+          res.statusCode = 502;
+          res.setHeader("Content-Type", "application/json");
+          res.end(JSON.stringify({ error: "No text in Anthropic response" }));
+          return;
+        }
+        let cleaned = textBlock.text.trim();
+        if (cleaned.startsWith("```")) {
+          cleaned = cleaned.replace(/^```[a-zA-Z]*\n?/, "").replace(/\n?```\s*$/, "").trim();
+        }
+        let parsed;
+        try {
+          parsed = JSON.parse(cleaned);
+        } catch {
+          res.statusCode = 502;
+          res.setHeader("Content-Type", "application/json");
+          res.end(JSON.stringify({ error: "Invalid JSON from Claude", raw: cleaned }));
+          return;
+        }
+        const now = Date.now();
+        if (parsed.mutations) {
+          parsed.mutations = parsed.mutations.map((m, i) => ({
+            ...m,
+            id: m.id || `ai_mut_${String(i + 1).padStart(3, "0")}`,
+            timestamp: now + i
+          }));
+        }
+        res.setHeader("Content-Type", "application/json");
+        res.setHeader("Access-Control-Allow-Origin", "*");
+        res.end(JSON.stringify(parsed));
+      } catch (err) {
+        res.statusCode = 500;
+        res.setHeader("Content-Type", "application/json");
+        res.end(JSON.stringify({ error: err.message }));
+      }
+      return;
+    }
+    if (pathname.startsWith("/api/proxy")) {
+      try {
+        const url = new URL(req.url || "", "http://localhost");
+        const targetUrl = url.searchParams.get("url");
+        const password = url.searchParams.get("password") || "";
+        if (!targetUrl) {
+          res.statusCode = 400;
+          res.end(JSON.stringify({ error: "Missing url parameter" }));
+          return;
+        }
+        const parsed = new URL(targetUrl);
+        const origin = parsed.origin;
+        const method = (req.method || "GET").toUpperCase();
+        const headers = {
+          "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36",
+          Accept: "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8"
+        };
+        let cookieHeader = "";
+        if (password) {
+          const passResp = await fetch(`${origin}/password`, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/x-www-form-urlencoded",
+              ...headers
+            },
+            body: `form_type=storefront_password&utf8=%E2%9C%93&password=${encodeURIComponent(
+              password
+            )}`,
+            redirect: "manual"
+          });
+          const setCookies = passResp.headers.getSetCookie?.() || [];
+          cookieHeader = setCookies.map((c) => c.split(";")[0]).join("; ");
+        }
+        const fetchHeaders = { ...headers };
+        Object.entries(req.headers || {}).forEach(([key, value]) => {
+          const lowerKey = key.toLowerCase();
+          if (!value || [
+            "host",
+            "connection",
+            "content-length",
+            "accept-encoding",
+            "origin",
+            "referer"
+          ].includes(lowerKey)) {
+            return;
+          }
+          fetchHeaders[key] = Array.isArray(value) ? value.join(",") : String(value);
+        });
+        fetchHeaders.Origin = origin;
+        fetchHeaders.Referer = targetUrl;
+        if (cookieHeader) {
+          fetchHeaders.Cookie = fetchHeaders.Cookie ? `${fetchHeaders.Cookie}; ${cookieHeader}` : cookieHeader;
+        }
+        let requestBody;
+        if (!["GET", "HEAD"].includes(method)) {
+          const chunks = [];
+          for await (const chunk of req) {
+            chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk));
+          }
+          if (chunks.length > 0) requestBody = Buffer.concat(chunks);
+        }
+        const upstream = await fetch(targetUrl, {
+          method,
+          headers: fetchHeaders,
+          body: requestBody ? Buffer.from(requestBody) : null,
+          redirect: "follow"
+        });
+        const responseContentType = upstream.headers.get("content-type") || "";
+        const isHtmlResponse = responseContentType.includes("text/html");
+        const secFetchDest = (req.headers?.["sec-fetch-dest"] || "").toLowerCase();
+        const isNavigationRequest = secFetchDest === "iframe" || secFetchDest === "document" || secFetchDest === "";
+        if (!isHtmlResponse || !isNavigationRequest) {
+          const binary = Buffer.from(await upstream.arrayBuffer());
+          res.statusCode = upstream.status;
+          if (responseContentType) {
+            res.setHeader("Content-Type", responseContentType);
+          }
+          res.setHeader("Access-Control-Allow-Origin", "*");
+          res.end(binary);
+          return;
+        }
+        let html = await upstream.text();
+        if (html.includes("form_type") && html.includes("storefront_password")) {
+          res.statusCode = 401;
+          res.end(JSON.stringify({ error: "Password authentication failed." }));
+          return;
+        }
+        html = html.replace(/(href|src|action)="\/(?!\/)/g, `$1="${origin}/`);
+        const escapedOrigin = origin.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+        const proxyBase = `/api/proxy?password=${encodeURIComponent(password)}&url=`;
+        html = html.replace(
+          new RegExp(`(href|action)="${escapedOrigin}(/[^"]*)"`, "g"),
+          (match, attr, urlPath) => {
+            const lastSegment = urlPath.split("?")[0].split("#")[0].split("/").pop() || "";
+            if (attr === "href" && /\.\w{1,5}$/.test(lastSegment)) {
+              return match;
+            }
+            return `${attr}="${proxyBase}${encodeURIComponent(origin + urlPath)}"`;
+          }
+        );
+        if (html.includes("</head>")) {
+          html = html.replace("</head>", `${popupHideCss}
+</head>`);
+        }
+        const runtimeProxyScript = `<script>(function(){try{var TARGET_ORIGIN=${JSON.stringify(origin)};var TARGET_PAGE_URL=${JSON.stringify(targetUrl)};function isSkippable(raw){if(!raw||typeof raw!=="string")return true;return raw.startsWith("data:")||raw.startsWith("blob:")||raw.startsWith("javascript:")||raw.startsWith("#")||raw.startsWith("http")||raw.startsWith("//");}function toAbsoluteOriginUrl(raw){if(isSkippable(raw))return raw;try{var base=raw.startsWith("/")?TARGET_ORIGIN:TARGET_PAGE_URL;var abs=new URL(raw,base);if(abs.origin!==TARGET_ORIGIN)return raw;return abs.toString();}catch(_){return raw;}}if(window.fetch){var _fetch=window.fetch.bind(window);window.fetch=function(input,init){try{if(typeof input==="string"){input=toAbsoluteOriginUrl(input);}else if(input&&input.url){var next=toAbsoluteOriginUrl(input.url);if(next!==input.url){input=new Request(next,input);}}}catch(_){}return _fetch(input,init);};}if(window.XMLHttpRequest&&window.XMLHttpRequest.prototype&&window.XMLHttpRequest.prototype.open){var _open=window.XMLHttpRequest.prototype.open;window.XMLHttpRequest.prototype.open=function(method,url){try{arguments[1]=toAbsoluteOriginUrl(url);}catch(_){}return _open.apply(this,arguments);};}if(window.navigator&&window.navigator.serviceWorker&&typeof window.navigator.serviceWorker.register==="function"){window.navigator.serviceWorker.register=function(){return Promise.resolve({scope:"disabled-in-editor-proxy"});};}}catch(_){}})();</script>`;
+        if (html.includes("</head>")) {
+          html = html.replace("</head>", `${runtimeProxyScript}
+</head>`);
+        } else {
+          html = runtimeProxyScript + html;
+        }
+        const bridgeScript = `<script src="/bridge.js"></script>`;
+        html = html.includes("</body>") ? html.replace("</body>", `${bridgeScript}
+</body>`) : html + bridgeScript;
+        res.setHeader("Content-Type", "text/html; charset=utf-8");
+        res.setHeader("Access-Control-Allow-Origin", "*");
+        setFrameHeaders(req, res);
+        res.end(html);
+      } catch (err) {
+        res.statusCode = 500;
+        res.end(JSON.stringify({ error: err.message }));
+      }
+      return;
+    }
+    next();
+  };
+}
+function visualEditorProxyPlugin(options) {
+  const mw = createVisualEditorMiddleware(options);
+  return {
+    name: "visual-editor-proxy",
+    generateBundle() {
+      this.emitFile({ type: "asset", fileName: "bridge.js", source: BRIDGE_SCRIPT });
+      this.emitFile({ type: "asset", fileName: "vvveb-editor/index.html", source: buildVvvebEditorHtml() });
+    },
+    configureServer(server) {
+      server.middlewares.use(mw);
+    },
+    configurePreviewServer(server) {
+      server.middlewares.use(mw);
+    }
+  };
+}
+
+exports.createVisualEditorMiddleware = createVisualEditorMiddleware;
+exports.visualEditorProxyPlugin = visualEditorProxyPlugin;