@accelerated-agency/visual-editor 0.3.1 → 0.3.3

package/dist/vite.js

@@ -3,8 +3,20 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 
 // 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 consentAllowCss = `<style id="__ce_consent_allow">#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"]{display:revert!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;height:auto!important;overflow:visible!important;}</style>`;
+var iframeAlwaysShowCss = `<style id="__ce_force_show">#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"]{display:revert!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;height:auto!important;max-height:none!important;overflow:visible!important;}</style>`;
+var iframeAlwaysShowCssGuardScript = `<script id="__ce_force_show_guard">(function(){try{
+function ensureForceShowStyleLast(){
+  var style=document.getElementById("__ce_force_show");
+  if(!style||!document.head)return;
+  if(document.head.lastElementChild!==style){
+    document.head.appendChild(style);
+  }
+}
+ensureForceShowStyleLast();
+var mo=new MutationObserver(function(){ensureForceShowStyleLast();});
+if(document.head){mo.observe(document.head,{childList:true});}
+window.addEventListener("beforeunload",function(){try{mo.disconnect();}catch(_){}});}
+catch(_){}})();</script>`;
 var AI_SYSTEM_PROMPT = `You are a CRO expert. Return JSON only with: hypothesis, mutations, summary. Keep 2-6 precise mutations and only valid selectors from snapshot.`;
 var BRIDGE_SCRIPT = `(function(){if(window.__CONVERSION_BRIDGE_LOADED__)return;window.__CONVERSION_BRIDGE_LOADED__=true;var CHANNEL='conversion-editor';var highlightEl=null;function send(payload){window.parent.postMessage({channel:CHANNEL,payload:payload},'*');}function qs(selector){try{return document.querySelector(selector);}catch(_){return null;}}function getSelector(el){if(!el||el.nodeType!==1)return'';if(el.id)return'#'+CSS.escape(el.id);var parts=[];var current=el;var depth=0;while(current&&current.nodeType===1&&depth<5){var part=current.tagName.toLowerCase();if(current.classList&&current.classList.length){part+='.'+Array.from(current.classList).slice(0,2).map(function(c){return CSS.escape(c);}).join('.');}var parent=current.parentElement;if(parent){var siblings=Array.from(parent.children).filter(function(s){return s.tagName===current.tagName;});if(siblings.length>1)part+=':nth-of-type('+(siblings.indexOf(current)+1)+')';}parts.unshift(part);current=parent;depth+=1;}return parts.join(' > ');}function payloadOf(el){var rect=el.getBoundingClientRect();var style=window.getComputedStyle(el);return{selector:getSelector(el),tagName:el.tagName.toLowerCase(),textContent:(el.textContent||'').trim().slice(0,500),computedStyles:{color:style.color,backgroundColor:style.backgroundColor,fontSize:style.fontSize,fontWeight:style.fontWeight,lineHeight:style.lineHeight,display:style.display},rect:{top:rect.top,left:rect.left,width:rect.width,height:rect.height}};}function applyMutation(m){var el=qs(m.selector);if(!el)return;switch(m.action){case'setStyle':if(m.property)el.style[m.property]=m.value;break;case'setText':el.textContent=m.value;break;case'setHTML':el.innerHTML=m.value;break;case'setAttribute':if(m.property)el.setAttribute(m.property,m.value);break;case'hide':el.style.display='none';break;case'show':el.style.display='';break;case'insertHTML':if(m.position)el.insertAdjacentHTML(m.position,m.value||'');break;case'insertSection':if(m.position)el.insertAdjacentHTML(m.position,m.sectionHtml||m.value||'');break;case'reorderElement':if(!m.targetSelector)break;var target=qs(m.targetSelector);if(!target||!target.parentNode||!el.parentNode)break;if(m.insertPosition==='before')target.parentNode.insertBefore(el,target);else target.parentNode.insertBefore(el,target.nextSibling);break;default:break;}}function revertMutation(m){var el=qs(m.selector);if(!el)return;switch(m.action){case'setStyle':if(m.property)el.style[m.property]=m.previous||'';break;case'setText':el.textContent=m.previous||'';break;case'setHTML':el.innerHTML=m.previous||'';break;case'setAttribute':if(m.property){if(m.previous!=null)el.setAttribute(m.property,m.previous);else el.removeAttribute(m.property);}break;case'hide':case'show':el.style.display=m.previous||'';break;default:break;}}function captureSnapshot(){var elements=Array.from(document.querySelectorAll('h1,h2,h3,p,button,a,input,select,img,section,div')).slice(0,700).map(function(el){var rect=el.getBoundingClientRect();var cs=window.getComputedStyle(el);return{selector:getSelector(el),parentSelector:el.parentElement?getSelector(el.parentElement):null,tagName:el.tagName.toLowerCase(),textContent:(el.textContent||'').trim().slice(0,300),attributes:Array.from(el.attributes||[]).reduce(function(acc,a){acc[a.name]=a.value;return acc;},{}),computedStyles:{color:cs.color,backgroundColor:cs.backgroundColor,fontSize:cs.fontSize,fontWeight:cs.fontWeight,display:cs.display},childrenCount:el.children?el.children.length:0,aboveFold:rect.top<window.innerHeight,depth:(function(){var d=0,p=el.parentElement;while(p&&d<25){d++;p=p.parentElement;}return d;})()};});send({type:'snapshotCaptured',snapshot:{url:window.location.href,title:document.title,viewport:{width:window.innerWidth,height:window.innerHeight},elements:elements}});}function captureTree(){function toNode(el,depth){var rect=el.getBoundingClientRect();var tag=el.tagName.toLowerCase();var type='generic';if(tag==='section')type='section';else if(tag==='img')type='image';else if(tag==='a')type='link';else if(tag==='button')type='button';else if(tag==='form')type='form';else if(['p','h1','h2','h3','h4','h5','h6','span'].indexOf(tag)>=0)type='text';else if(['div','main','article','aside','header','footer','nav'].indexOf(tag)>=0)type='container';var children=Array.from(el.children||[]).slice(0,50).map(function(c){return toNode(c,depth+1);});return{id:getSelector(el),selector:getSelector(el),tagName:tag,label:(el.getAttribute('aria-label')||el.getAttribute('id')||el.className||tag).toString().slice(0,80),type:type,children:children,depth:depth,isAboveFold:rect.top<window.innerHeight,rect:{top:rect.top,left:rect.left,width:rect.width,height:rect.height}};}send({type:'pageTreeCaptured',tree:[toNode(document.body,0)]});}window.addEventListener('message',function(e){var msg=e.data;if(!msg||msg.channel!==CHANNEL||!msg.payload)return;var p=msg.payload;switch(p.type){case'ping':send({type:'pong'});break;case'applyMutation':applyMutation(p.mutation);break;case'applyMutationBatch':(p.mutations||[]).forEach(applyMutation);break;case'revert':revertMutation(p.mutation);break;case'clearAllMutations':window.location.reload();break;case'captureSnapshot':captureSnapshot();break;case'validateSelectors':send({type:'selectorsValidated',results:(p.selectors||[]).map(function(s){var el=qs(s);return{selector:s,found:!!el,tagName:el?el.tagName.toLowerCase():null};})});break;case'scrollToElement':case'selectElement':var target=qs(p.selector);if(target){target.scrollIntoView({behavior:'smooth',block:'center'});send({type:'elementSelected',element:payloadOf(target)});}break;case'hoverElement':var h=qs(p.selector);if(h){if(highlightEl)highlightEl.style.outline='';h.style.outline='2px solid #3b82f6';highlightEl=h;}break;case'capturePageTree':captureTree();break;default:break;}});document.addEventListener('click',function(e){var el=e.target;if(!(el instanceof Element))return;send({type:'elementSelected',element:payloadOf(el)});},true);send({type:'bridgeReady'});})();`;
 function buildVvvebEditorHtml() {
@@ -140,6 +152,17 @@ html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFo
 .tb-save-txt{font-size:14px;color:#00C951;white-space:nowrap}
 .tb-save-txt::before{content:'Saved'}
 #dirty-dot.on~.tb-save-txt::before{content:'Unsaved'}
+
+/* \u2500\u2500 In-editor toast notification \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+#ve-notification{
+  position:fixed;right:16px;top:64px;z-index:13000;max-width:360px;
+  padding:10px 12px;border-radius:8px;font-size:12px;line-height:1.35;
+  border:1px solid var(--border);background:#fff;color:var(--text);
+  box-shadow:0 10px 24px rgba(2,6,23,.18);display:none
+}
+#ve-notification.show{display:block}
+#ve-notification.error{border-color:#fecaca;background:#fef2f2;color:#991b1b}
+#ve-notification.success{border-color:#bbf7d0;background:#f0fdf4;color:#166534}
 .tb-save-time{font-size:12px;color:#52525b;white-space:nowrap}
 #dirty-dot.on~.tb-save-time{display:none}
 /* Simulate + Finalize buttons */
@@ -235,7 +258,7 @@ html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFo
 /* \u2500\u2500 DOM tree (Elements tab) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 .dt-tree{font-size:11px;padding:0px 0 0px 20px;user-select:none}
 .dt-row{
-  display:flex;align-items:center;gap:2px;min-height:26px;padding:2px 8px 2px 4px;
+  width:fit-content;display:flex;align-items:center;gap:2px;min-height:26px;padding:2px 8px 2px 4px;
   cursor:pointer;color:var(--text-2);border-radius:4px;margin:0 4px
 }
 .dt-row:hover{background:var(--bg-hover);color:var(--text)}
@@ -447,6 +470,49 @@ html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFo
 /* \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}
+.sub-lbl-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0 5px}
+.sub-lbl-row .sub-lbl{margin:0}
+.css-expand-btn{
+  width:22px;height:22px;border:1px solid var(--border);border-radius:5px;background:#fff;
+  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-3);
+  transition:all .15s
+}
+.css-expand-btn:hover{border-color:var(--accent);color:var(--accent-txt);background:var(--accent-bg)}
+
+/* \u2500\u2500 Custom CSS modal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+#custom-css-modal{
+  position:fixed;inset:0;z-index:12000;background:rgba(15,23,42,.5);
+  display:none;align-items:center;justify-content:center;padding:20px
+}
+#custom-css-modal.open{display:flex}
+.custom-css-dialog{
+  width:min(860px,96vw);max-height:86vh;background:#fff;border:1px solid var(--border);
+  border-radius:10px;box-shadow:0 20px 40px rgba(2,6,23,.35);display:flex;flex-direction:column;overflow:hidden
+}
+.custom-css-head{
+  display:flex;align-items:center;justify-content:space-between;gap:10px;
+  padding:10px 12px;border-bottom:1px solid var(--border);background:#fff
+}
+.custom-css-title{font-size:12px;font-weight:700;color:var(--text)}
+.custom-css-close{
+  border:none;background:transparent;color:var(--text-3);cursor:pointer;width:24px;height:24px;border-radius:5px
+}
+.custom-css-close:hover{background:var(--bg-hover);color:var(--text)}
+#custom-css-modal-textarea{
+  width:100%;min-height:360px;max-height:58vh;resize:vertical;border:none;outline:none;
+  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+  font-size:12px;line-height:1.5;padding:12px;background:#0b1220;color:#e2e8f0
+}
+.custom-css-actions{
+  display:flex;justify-content:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--border);background:#fff
+}
+.custom-css-btn{
+  border:1px solid var(--border);background:#fff;color:var(--text-2);border-radius:6px;padding:6px 10px;cursor:pointer;
+  font-size:12px;font-weight:600;font-family:inherit
+}
+.custom-css-btn:hover{background:var(--bg-hover)}
+.custom-css-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
+.custom-css-btn.primary:hover{filter:brightness(.97)}
 
 /* \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}
@@ -618,10 +684,10 @@ select.pr-inp{cursor:pointer;background:#fff}
       <button class="tb-dk-btn" id="btn-mode-nav" onclick="setMode('navigate')" title="Navigate mode \u2014 interact with page normally"><i class="bi bi-magic"></i></button>
       <button class="tb-dk-btn" title="Comments"><i class="bi bi-chat-dots"></i></button>
       </div>
-      <!-- btn-close: hidden visually, kept for JS event listener -->
-      <button id="btn-close" style="display:none" title="Close editor"></button>
       <button class="tb-sim-btn" id="btn-simulate" onclick="simulateExperiment()"><i class="bi bi-lightning-charge-fill"></i> Simulate</button>
-      <button class="tb-fin-btn" id="btn-save">Finalize</button>
+      <button class="tb-fin-btn" id="btn-save">Save Changes</button>
+      <!-- btn-close: kept for JS event listener -->
+      <button class="tb-fin-btn" id="btn-close">Close</button>
     </div>
 
     <!-- url-bar: hidden, kept for JS compatibility -->
@@ -836,6 +902,23 @@ select.pr-inp{cursor:pointer;background:#fff}
 
 </div><!-- #app -->
 
+<!-- Custom CSS full-screen modal -->
+<div id="custom-css-modal" aria-hidden="true">
+  <div class="custom-css-dialog" role="dialog" aria-modal="true" aria-labelledby="custom-css-modal-title">
+    <div class="custom-css-head">
+      <div class="custom-css-title" id="custom-css-modal-title"><i class="bi bi-code-slash"></i> Custom CSS</div>
+      <button type="button" class="custom-css-close" onclick="closeCustomCssModal()" title="Close">
+        <i class="bi bi-x-lg"></i>
+      </button>
+    </div>
+    <textarea id="custom-css-modal-textarea" spellcheck="false" placeholder="Type your css here"></textarea>
+    <div class="custom-css-actions">
+      <button type="button" class="custom-css-btn" onclick="closeCustomCssModal()">Cancel</button>
+      <button type="button" class="custom-css-btn primary" onclick="applyCustomCssModal()">Add</button>
+    </div>
+  </div>
+</div>
+
 <!-- 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>
@@ -907,13 +990,37 @@ function send(type, payload) {
   window.parent.postMessage({ channel: CHANNEL, type: type, payload: payload || {} }, '*');
 }
 
+var notificationTimer = null;
+function showEditorNotification(message, kind, durationMs) {
+  var id = 've-notification';
+  var el = document.getElementById(id);
+  if (!el) {
+    el = document.createElement('div');
+    el.id = id;
+    el.setAttribute('role', 'status');
+    el.setAttribute('aria-live', 'polite');
+    document.body.appendChild(el);
+  }
+  el.className = '';
+  el.classList.add(kind === 'success' ? 'success' : 'error');
+  el.classList.add('show');
+  el.textContent = String(message || 'Something went wrong');
+  if (notificationTimer) clearTimeout(notificationTimer);
+  notificationTimer = setTimeout(function() {
+    var cur = document.getElementById(id);
+    if (!cur) return;
+    cur.classList.remove('show');
+  }, Math.max(1200, durationMs || 2600));
+}
+
 function generatePreviewUrlString(args) {
   var baseUrl = (args && args.url) || '';
   var test = (args && args.test) || {};
   var variation = (args && args.variation) || {};
   if (!baseUrl) return '';
-  var testId = test.iid || test.experimentId || test._id || '';
-  var variationId = variation.iid || variation._id || '';
+  var testId = test.iid || '';
+  var variationId = variation.iid || '';
+  if (!testId || !variationId) return '';
   var cId = String(testId || '') + '_' + String(variationId || '');
   var hasQueryParams = String(baseUrl).indexOf('?') >= 0;
   return (
@@ -937,6 +1044,10 @@ function simulateExperiment() {
     test.pageUrl ||
     (test.metadata_1 && test.metadata_1.editor_url) ||
     '';
+  if (!test.iid || !activeVariation || !activeVariation.iid) {
+    showEditorNotification('Cannot simulate: missing test.iid or variation.iid.', 'error', 3200);
+    return;
+  }
   var url = generatePreviewUrlString({
     url: targetUrl,
     test: test,
@@ -944,6 +1055,7 @@ function simulateExperiment() {
   });
   if (!url) {
     console.warn('[V2] simulateExperiment: missing target URL');
+    showEditorNotification('Cannot simulate: missing target URL.', 'error', 3200);
     return;
   }
   try {
@@ -961,6 +1073,19 @@ window.addEventListener('message', function(e) {
   }
 });
 
+document.addEventListener('keydown', function(e) {
+  if (e.key !== 'Escape') return;
+  var modal = document.getElementById('custom-css-modal');
+  if (!modal || !modal.classList.contains('open')) return;
+  closeCustomCssModal();
+});
+
+document.addEventListener('click', function(e) {
+  var modal = document.getElementById('custom-css-modal');
+  if (!modal || !modal.classList.contains('open')) return;
+  if (e.target === modal) closeCustomCssModal();
+});
+
 // \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      = [];
@@ -981,6 +1106,8 @@ var iframeContentNavGen = 0;
 var iframeContentApplyTimer = null;
 var iframeEarlyGranularPrimedForGen = null;
 var iframeEarlySyncPrimedForGen = null;
+var iframeEarlyDomSignature = '';
+var iframeEarlyDomSignatureNavGen = 0;
 /** insert/reorder entries are applied from early granular + full apply \u2014 skip exact duplicates per iframe nav */
 var appliedStructuralChangesetKeys = {};
 var isDirty         = false;
@@ -992,6 +1119,7 @@ var selectedEl      = null;
 var selectedElFingerprint = '';
 var selectedElRecoverMisses = 0;
 var MAX_SELECTED_RECOVER_MISSES = 12;
+var hoveredTreeEl = null;
 var isDeselectingSelection = false;
 var suppressClickUntil = 0;
 var dragAttachDoc     = null;
@@ -1005,6 +1133,7 @@ var iframeSyncAttempts = 0;
 var selectionScrollWin = null;
 var selectionResizeBound = false;
 var clickAttachDoc = null;
+var hoverAttachDoc = null;
 var changeObserver = null;
 var changeObserverDoc = null;
 /** Incremented while applying changesets / selection chrome so MutationObserver does not mark dirty */
@@ -1040,14 +1169,17 @@ function endSuppressIframeMutationDirty() {
 function commitStateChangesForActiveVariation() {
   if (!activeVarId) return;
   stateChangesByVarId[activeVarId] = (stateChanges || []).slice();
+  refreshPersistentChangesetStyleTagForActiveVariation();
 }
 
 function loadStateChangesForActiveVariation() {
   if (!activeVarId) {
     stateChanges = [];
+    refreshPersistentChangesetStyleTagForActiveVariation();
     return;
   }
   stateChanges = (stateChangesByVarId[activeVarId] || []).slice();
+  refreshPersistentChangesetStyleTagForActiveVariation();
 }
 
 function recoverSelectedElement(forceDeselectOnMiss) {
@@ -1214,6 +1346,7 @@ function setMode(mode) {
   document.getElementById('btn-mode-editor').classList.toggle('active', mode === 'editor');
   document.getElementById('btn-mode-nav').classList.toggle('active', mode === 'navigate');
   if (mode === 'navigate') {
+    clearTreeHoverHighlight();
     setDragHandleActive(false);
     deselectElement();
   } else if (mode === 'editor') {
@@ -1527,24 +1660,26 @@ function persistActiveVariationChangesets(arr) {
       }
     }
   }
+  refreshPersistentChangesetStyleTagForActiveVariation();
 }
 
 function entrySnapshotKey(entry) {
   if (!entry || !entry.selector) return '';
+  var SEP = '__vve_sep__';
   var selKey = sanitizeSelectorForMatch(entry.selector) || entry.selector;
   return (
     selKey +
-    '\0' +
+    SEP +
     normalizeChangesetType(entry) +
-    '\0' +
+    SEP +
     String(entry.property || '') +
-    '\0' +
+    SEP +
     String(entry.attribute || '') +
-    '\0' +
+    SEP +
     String(entry.action || '') +
-    '\0' +
+    SEP +
     String(entry.html != null ? 'h' + String(entry.html).length : '') +
-    '\0' +
+    SEP +
     String(entry.value != null ? 'v:' + entry.value : '')
   );
 }
@@ -1594,15 +1729,15 @@ function softReloadEditorIframe() {
   var navGen = nextIframeContentNavGen();
   resetIframeBindings();
   setIframePageLoadingUi(true);
-  iframe.src = '';
   iframe.src = appendIframeReloadBust(src);
-  startIframeContentApplyWatcher(navGen);
+  startIframeContentApplyWatcher(navGen, iframe.contentDocument || null);
   scheduleDomTreeRefresh();
 }
 
 /** @returns {boolean} true if a full iframe reload was started */
 function revertChangesetEntryOnDom(entry) {
   if (!entry) return false;
+  var styleOnly = isStyleOnlyChangesetEntry(entry);
   if (entry.selector === '__vvveb_body__') {
     var iframeDoc0 = document.getElementById('iframeId').contentDocument;
     if (!iframeDoc0 || !iframeDoc0.body) return false;
@@ -1623,6 +1758,11 @@ function revertChangesetEntryOnDom(entry) {
   var snap = appliedChangesetSnapshots[k];
   var el = querySelectorResolved(iframeDoc, entry.selector);
   if (!snap || !el) {
+    if (styleOnly) {
+      refreshPersistentChangesetStyleTagForActiveVariation();
+      delete appliedChangesetSnapshots[k];
+      return false;
+    }
     softReloadEditorIframe();
     delete appliedChangesetSnapshots[k];
     return true;
@@ -1637,6 +1777,11 @@ function revertChangesetEntryOnDom(entry) {
     else el.setAttribute(snap.name, snap.v);
   } else if (snap.kind === 'display') el.style.display = snap.v;
   else {
+    if (styleOnly) {
+      refreshPersistentChangesetStyleTagForActiveVariation();
+      delete appliedChangesetSnapshots[k];
+      return false;
+    }
     softReloadEditorIframe();
     delete appliedChangesetSnapshots[k];
     return true;
@@ -1696,7 +1841,9 @@ function renderHistoryTab() {
       var lab = historyEntryTypeLabel(item.entry);
       var val = historyEntryValuePreview(item.entry);
       html +=
-        '<div class="state-item">' +
+        '<div class="state-item" role="button" tabindex="0" title="Jump to element in iframe" onclick="focusHistoryChangeset(' +
+        item.idx +
+        ')">' +
         '<span class="state-item-idx" style="opacity:0.55;font-size:10px;min-width:2.2em;display:inline-block" title="Order in saved changesets">#' +
         item.idx +
         '</span>' +
@@ -1712,7 +1859,7 @@ function renderHistoryTab() {
         item.idx +
         ')" onclick="removeHistoryChangeset(' +
         item.idx +
-        ')">&#x2715;</button>' +
+        ', event)">&#x2715;</button>' +
         '</div>';
     });
     html += '</div>';
@@ -1730,7 +1877,38 @@ function changesetListHasStructural(arr) {
   return false;
 }
 
-function removeHistoryChangeset(idx) {
+function isStyleOnlyChangesetEntry(entry) {
+  if (!entry) return false;
+  var t = normalizeChangesetType(entry);
+  if (t === 'style') return true;
+  if (t === 'attribute' && String(entry.attribute || '').toLowerCase() === 'style') return true;
+  return false;
+}
+
+function focusHistoryChangeset(idx) {
+  var v = getActiveVariationForHistory();
+  if (!v) return;
+  var arr = parseVariationChangesets(v);
+  if (idx < 0 || idx >= arr.length) return;
+  var entry = arr[idx];
+  if (!entry || !entry.selector || entry.selector === '__vvveb_body__') return;
+  try {
+    var iframe = document.getElementById('iframeId');
+    var iframeDoc = iframe && iframe.contentDocument;
+    if (!iframeDoc) return;
+    var el = querySelectorResolved(iframeDoc, entry.selector);
+    if (!el) return;
+    selectElement(el);
+    try {
+      el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
+    } catch(_) {
+      el.scrollIntoView();
+    }
+  } catch(_) {}
+}
+
+function removeHistoryChangeset(idx, evt) {
+  if (evt && evt.stopPropagation) evt.stopPropagation();
   var v = getActiveVariationForHistory();
   if (!v) return;
   var arr = parseVariationChangesets(v);
@@ -1738,6 +1916,16 @@ function removeHistoryChangeset(idx) {
   var removed = arr[idx];
   arr.splice(idx, 1);
   persistActiveVariationChangesets(arr);
+  if (isStyleOnlyChangesetEntry(removed)) {
+    try {
+      refreshPersistentChangesetStyleTagForActiveVariation();
+      saveCurrentVariationHtml();
+    } catch(_) {}
+    if (currentMainTab === 'history') renderHistoryTab();
+    recomputeEditorDirty();
+    scheduleDomTreeRefresh();
+    return;
+  }
   var didReload = revertChangesetEntryOnDom(removed);
   try {
     delete varHtmlCache[activeVarId];
@@ -1745,15 +1933,19 @@ function removeHistoryChangeset(idx) {
   // Re-applying remaining rows on top of current DOM duplicates insert/reorder nodes; reload when any
   // structural row remains or was removed (revert may already have started a reload for insert/body).
   var removedType = normalizeChangesetType(removed);
-  var needsStructuralReload =
-    !didReload &&
-    (removedType === 'insert' ||
-      removedType === 'reorder' ||
-      changesetListHasStructural(arr));
+  var hasStructuralRemaining = changesetListHasStructural(arr);
+  var removedIsStructural = removedType === 'insert' || removedType === 'reorder';
   if (didReload) {
     /* revertChangesetEntryOnDom already kicked off iframe reload */
-  } else if (needsStructuralReload) {
+  } else if (removedIsStructural) {
     softReloadEditorIframe();
+  } else if (hasStructuralRemaining) {
+    // Keep current DOM state (already reverted for removed row) and only refresh style layer.
+    // Avoid full reload and avoid re-applying all rows, which can duplicate structural insert/reorder entries.
+    try {
+      refreshPersistentChangesetStyleTagForActiveVariation();
+      saveCurrentVariationHtml();
+    } catch(_) {}
   } else {
     try {
       appliedStructuralChangesetKeys = {};
@@ -2017,6 +2209,27 @@ function bodyHasFirstPaintChild(body) {
   return false;
 }
 
+function computeIframeDomSignature(doc) {
+  if (!doc || !doc.body) return '';
+  var body = doc.body;
+  var tags = [];
+  var walker = null;
+  try {
+    walker = doc.createTreeWalker(body, NodeFilter.SHOW_ELEMENT, null);
+  } catch(_) {
+    walker = null;
+  }
+  var count = 0;
+  if (walker) {
+    while (walker.nextNode() && count < 400) {
+      var node = walker.currentNode;
+      tags.push((node && node.tagName) ? String(node.tagName).toLowerCase() : '');
+      count += 1;
+    }
+  }
+  return String(body.children ? body.children.length : 0) + '|' + String(count) + '|' + tags.join(',');
+}
+
 /** True when at least one granular changeset selector already matches (nested content painted). */
 function granularAnySelectorMatches(doc, cs) {
   if (!doc || !cs || !cs.length) return false;
@@ -2121,7 +2334,7 @@ function runConsistencyReconcile() {
   if (!cs.length || changesetsHaveBodySnapshot(cs)) return;
   var granular = filterGranularChangesetEntries(cs);
   var unresolved = countUnresolvedGranularSelectors(doc, granular);
-  if (unresolved > 0 || changesetListHasStructural(cs)) {
+  if (unresolved > 0 || hasUnappliedStructuralChangesets(cs)) {
     reapplyActiveVariationGranular(doc);
     registerPendingGranularChangesets(cs, doc);
   }
@@ -2171,6 +2384,7 @@ function resetIframeBindings() {
   appliedStructuralChangesetKeys = {};
   clickAttachDoc = null;
   dragAttachDoc = null;
+  hoverAttachDoc = null;
   changeObserverDoc = null;
   clearPendingGranularChangesets();
   if (changeObserver) {
@@ -2199,7 +2413,7 @@ function loadPage(proxyUrl) {
   iframe.style.display = 'block';
   setIframePageLoadingUi(true);
   iframe.src = appendIframeReloadBust(proxyUrl);
-  startIframeContentApplyWatcher(navGen);
+  startIframeContentApplyWatcher(navGen, iframe.contentDocument || null);
   scheduleDomTreeRefresh();
 }
 
@@ -2271,7 +2485,7 @@ function switchVariation(varId) {
       iframe.src = appendIframeReloadBust(src);
       // Do not sync here: the document is still the previous navigation until the
       // iframe load event; an eager sync attached observers / DOM tree to the wrong document.
-      startIframeContentApplyWatcher(navGen);
+      startIframeContentApplyWatcher(navGen, iframe.contentDocument || null);
       scheduleDomTreeRefresh();
     }
   } catch(_) {}
@@ -2491,24 +2705,136 @@ function flushPendingGranularChangesets() {
 function structuralChangesetDedupKey(entry) {
   var nt = normalizeChangesetType(entry);
   if (!entry || (nt !== 'insert' && nt !== 'reorder')) return '';
+  var SEP = '__vve_sep__';
   var vid = activeVarId || '';
   try {
     return (
       vid +
-      '\0' +
+      SEP +
       nt +
-      '\0' +
+      SEP +
       entry.selector +
-      '\0' +
+      SEP +
       String(entry.action || '') +
-      '\0' +
+      SEP +
       String(entry.html != null ? entry.html : '').slice(0, 240) +
-      '\0' +
+      SEP +
       String(entry.targetSelector || '')
     );
   } catch(_) {
-    return vid + '\0' + nt + '\0' + entry.selector;
+    return vid + SEP + nt + SEP + entry.selector;
+  }
+}
+
+function hasUnappliedStructuralChangesets(cs) {
+  if (!cs || !cs.length) return false;
+  for (var i = 0; i < cs.length; i++) {
+    var e = cs[i];
+    var t = normalizeChangesetType(e);
+    if (t !== 'insert' && t !== 'reorder') continue;
+    var k = structuralChangesetDedupKey(e);
+    if (!k) return true;
+    if (!appliedStructuralChangesetKeys[k]) return true;
+  }
+  return false;
+}
+
+function parseInlineStyleDeclarations(styleText) {
+  var out = [];
+  if (styleText == null) return out;
+  var s = String(styleText);
+  if (!s.trim()) return out;
+  var parts = s.split(';');
+  for (var i = 0; i < parts.length; i++) {
+    var seg = parts[i];
+    if (!seg) continue;
+    var idx = seg.indexOf(':');
+    if (idx <= 0) continue;
+    var prop = seg.slice(0, idx).trim();
+    var value = seg.slice(idx + 1).trim();
+    if (!prop || !value) continue;
+    out.push({ prop: prop, value: value });
+  }
+  return out;
+}
+
+function buildPersistentStyleRulesForActiveVariation() {
+  if (!activeVarId) return '';
+  var v = variations.find(function(x) { return x && x._id === activeVarId; });
+  var parsed = parseVariationChangesets(v);
+  var map = {};
+  var order = [];
+  function put(selector, prop, value) {
+    if (!selector || !prop) return;
+    if (value == null || value === '') return;
+    var sel = sanitizeSelectorForMatch(String(selector)) || String(selector);
+    var pr = String(prop).trim();
+    var val = String(value).trim();
+    if (!sel || !pr || !val) return;
+    var k = sel + '__vve_sep__' + pr;
+    if (!map[k]) order.push(k);
+    map[k] = { selector: sel, property: pr, value: val };
+  }
+  for (var i = 0; i < parsed.length; i++) {
+    var e = parsed[i];
+    if (!e) continue;
+    var t = normalizeChangesetType(e);
+    if (t === 'style') {
+      put(e.selector, e.property || e.cssProp, e.value);
+      continue;
+    }
+    if (t === 'attribute' && String(e.attribute || '').toLowerCase() === 'style') {
+      var decls = parseInlineStyleDeclarations(e.value);
+      for (var di = 0; di < decls.length; di++) {
+        put(e.selector, decls[di].prop, decls[di].value);
+      }
+    }
   }
+  for (var j = 0; j < stateChanges.length; j++) {
+    var c = stateChanges[j];
+    if (!c) continue;
+    if (c.cssProp) {
+      put(c.selector, c.cssProp, c.value);
+      continue;
+    }
+    if (c.inputId === 'pp-css') {
+      var liveDecls = parseInlineStyleDeclarations(c.value);
+      for (var ldi = 0; ldi < liveDecls.length; ldi++) {
+        put(c.selector, liveDecls[ldi].prop, liveDecls[ldi].value);
+      }
+    }
+  }
+  var lines = [];
+  for (var oi = 0; oi < order.length; oi++) {
+    var row = map[order[oi]];
+    lines.push(row.selector + ' { ' + row.property + ': ' + row.value + ' !important; }');
+  }
+  return lines.join('\\n');
+}
+
+function upsertPersistentChangesetStyleTag(iframeDoc, rulesText) {
+  if (!iframeDoc) return;
+  var STYLE_ID = '__vve_persist_changesets_style__';
+  var prev = iframeDoc.getElementById(STYLE_ID);
+  if (!rulesText) {
+    if (prev && prev.parentNode) prev.parentNode.removeChild(prev);
+    return;
+  }
+  var head = iframeDoc.head || iframeDoc.getElementsByTagName('head')[0];
+  if (!head) return;
+  var styleEl = prev || iframeDoc.createElement('style');
+  styleEl.id = STYLE_ID;
+  if (styleEl.textContent !== rulesText) styleEl.textContent = rulesText;
+  if (!styleEl.parentNode) head.appendChild(styleEl);
+}
+
+function refreshPersistentChangesetStyleTagForActiveVariation() {
+  try {
+    var iframe = document.getElementById('iframeId');
+    var iframeDoc = iframe && iframe.contentDocument;
+    if (!iframeDoc) return;
+    upsertPersistentChangesetStyleTag(iframeDoc, buildPersistentStyleRulesForActiveVariation());
+  } catch(_) {}
 }
 
 /**
@@ -2545,23 +2871,11 @@ function applyChangesetEntry(entry, iframeDoc) {
       else if (entry.value != null) el.textContent = entry.value;
       break;
     case 'style':
-      if (entry.property) {
-        var propKebab = entry.property;
-        var cam = camelize(propKebab);
-        if (entry.value == null || entry.value === '') {
-          try { el.style.removeProperty(propKebab); } catch(_) {}
-          try { if (cam in el.style) el.style[cam] = ''; } catch(__) {}
-        } else {
-          try {
-            el.style.setProperty(propKebab, entry.value, 'important');
-          } catch(_) {
-            el.style[cam] = entry.value;
-          }
-        }
-      }
+      // Style changes are applied via persistent stylesheet injection.
       break;
     case 'attribute':
       if (entry.attribute && entry.value != null) {
+        if (String(entry.attribute).toLowerCase() === 'style') break;
         el.setAttribute(entry.attribute, entry.value);
       }
       break;
@@ -2598,6 +2912,7 @@ function applyActiveVariationHtml() {
 
   var variation = variations.find(function(v) { return v._id === activeVarId; });
   var cs = parseVariationChangesets(variation);
+  refreshPersistentChangesetStyleTagForActiveVariation();
 
   beginSuppressIframeMutationDirty();
   try {
@@ -2612,6 +2927,7 @@ function applyActiveVariationHtml() {
     for (var i = 0; i < cs.length; i++) {
       applyChangesetEntry(cs[i], iframeDoc);
     }
+    refreshPersistentChangesetStyleTagForActiveVariation();
     // Selectors often miss on first paint (client-rendered sections). Retry via timer + mutations.
     registerPendingGranularChangesets(cs, iframeDoc);
   } finally {
@@ -2660,6 +2976,7 @@ function applyVariationGranularOnly(iframeDoc) {
     for (var i = 0; i < cs.length; i++) {
       applyChangesetEntry(cs[i], iframeDoc);
     }
+    refreshPersistentChangesetStyleTagForActiveVariation();
     registerPendingGranularChangesets(cs, iframeDoc);
   } finally {
     endSuppressIframeMutationDirty();
@@ -2678,16 +2995,19 @@ function reapplyActiveVariationGranular(iframeDoc) {
     for (var i = 0; i < cs.length; i++) {
       applyChangesetEntry(cs[i], iframeDoc);
     }
+    refreshPersistentChangesetStyleTagForActiveVariation();
   } finally {
     endSuppressIframeMutationDirty();
   }
 }
 
 /** Poll iframe document during navigation; apply granular edits as soon as DOM can match selectors. */
-function startIframeContentApplyWatcher(navGen) {
+function startIframeContentApplyWatcher(navGen, prevDocRef) {
   stopIframeContentApplyWatcher();
   iframeEarlyGranularPrimedForGen = null;
   iframeEarlySyncPrimedForGen = null;
+  iframeEarlyDomSignature = '';
+  iframeEarlyDomSignatureNavGen = navGen;
   var iframe = document.getElementById('iframeId');
   iframeContentApplyTimer = setInterval(function() {
     if (navGen !== iframeContentNavGen) {
@@ -2697,6 +3017,7 @@ function startIframeContentApplyWatcher(navGen) {
     try {
       var doc = iframe.contentDocument;
       if (!doc || !doc.body) return;
+      if (prevDocRef && doc === prevDocRef) return;
       var docUrl = '';
       try { docUrl = String(doc.URL || ''); } catch(_) {}
       if (docUrl === 'about:blank') return;
@@ -2731,6 +3052,7 @@ function startIframeContentApplyWatcher(navGen) {
           }
           if (iframeEarlySyncPrimedForGen !== navGen) {
             iframeEarlySyncPrimedForGen = navGen;
+            iframeEarlyDomSignature = computeIframeDomSignature(doc);
             syncIframeInteractions('iframe-early-paint');
           }
         }
@@ -2800,6 +3122,8 @@ function injectIframeSelectionStyles(doc) {
   st.textContent =
     '.vve-selected{outline:2px solid #6366f1!important;outline-offset:2px!important;' +
     'box-shadow:0 0 0 2px rgba(99,102,241,.28),inset 0 0 0 1px rgba(99,102,241,.18)!important;}' +
+    '.vve-tree-hover{outline:2px solid #6366f1!important;outline-offset:2px!important;' +
+    'box-shadow:0 0 0 2px rgba(99,102,241,.22),inset 0 0 0 1px rgba(99,102,241,.12)!important;}' +
     'html.vve-drag-armed .vve-selected{cursor:grab!important;}' +
     '.vve-dragging{opacity:0.92!important;outline:2px dashed #f59e0b!important;' +
     'outline-offset:2px!important;cursor:grabbing!important;box-shadow:none!important;}';
@@ -2811,6 +3135,47 @@ function injectIframeSelectionStyles(doc) {
   }
 }
 
+function clearTreeHoverHighlight() {
+  if (!hoveredTreeEl) return;
+  beginSuppressIframeMutationDirty();
+  try {
+    if (hoveredTreeEl.classList) hoveredTreeEl.classList.remove('vve-tree-hover');
+  } catch(_) {
+  } finally {
+    endSuppressIframeMutationDirty();
+    hoveredTreeEl = null;
+  }
+}
+
+function setTreeHoverHighlight(el) {
+  if (!el || el.nodeType !== 1) {
+    clearTreeHoverHighlight();
+    return;
+  }
+  if (hoveredTreeEl === el) return;
+  clearTreeHoverHighlight();
+  beginSuppressIframeMutationDirty();
+  try {
+    if (el.classList) el.classList.add('vve-tree-hover');
+    hoveredTreeEl = el;
+  } catch(_) {
+    hoveredTreeEl = null;
+  } finally {
+    endSuppressIframeMutationDirty();
+  }
+}
+
+function isTreeHoverOnlyClassMutation(mutation) {
+  if (!mutation || mutation.type !== 'attributes' || mutation.attributeName !== 'class') return false;
+  var oldClass = String(mutation.oldValue || '');
+  var target = mutation.target;
+  var nextClass = '';
+  try {
+    nextClass = target && typeof target.className === 'string' ? target.className : '';
+  } catch(_) {}
+  return oldClass.indexOf('vve-tree-hover') >= 0 || String(nextClass).indexOf('vve-tree-hover') >= 0;
+}
+
 function setDragHandleActive(on) {
   dragHandleActive = !!on;
   var b = document.getElementById('sf-drag');
@@ -3131,6 +3496,9 @@ function renderDomTree(filterRaw) {
       if (e.target.closest && e.target.closest('.dt-chev')) return;
       selectElementFromTree(el);
     };
+    row.onmouseenter = function() {
+      setTreeHoverHighlight(el);
+    };
     root.appendChild(row);
 
     if (!hasKids || collapsed) return;
@@ -3149,6 +3517,9 @@ function renderDomTree(filterRaw) {
       ? '<div class="dt-muted">No elements match your search.</div>'
       : '<div class="dt-muted">No visible elements yet.</div>';
   }
+  root.onmouseleave = function() {
+    clearTreeHoverHighlight();
+  };
 }
 
 // \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
@@ -3166,6 +3537,40 @@ function pr2(l1, i1, l2, i2) {
          '<div class="pr2-item"><div class="pr2-lbl">'+l2+'</div>'+i2+'</div></div>';
 }
 function subLbl(text) { return '<div class="sub-lbl">'+text+'</div>'; }
+function openCustomCssModal() {
+  var modal = document.getElementById('custom-css-modal');
+  var ta = document.getElementById('custom-css-modal-textarea');
+  if (!modal || !ta) return;
+  var inp = document.getElementById('pp-css');
+  var v = inp ? inp.value : (selectedEl && selectedEl.getAttribute ? (selectedEl.getAttribute('style') || '') : '');
+  ta.value = v || '';
+  modal.classList.add('open');
+  modal.setAttribute('aria-hidden', 'false');
+  setTimeout(function() {
+    try { ta.focus(); ta.setSelectionRange(ta.value.length, ta.value.length); } catch(_) {}
+  }, 0);
+}
+function closeCustomCssModal() {
+  var modal = document.getElementById('custom-css-modal');
+  if (!modal) return;
+  modal.classList.remove('open');
+  modal.setAttribute('aria-hidden', 'true');
+}
+function applyCustomCssModal() {
+  var ta = document.getElementById('custom-css-modal-textarea');
+  var inp = document.getElementById('pp-css');
+  if (!ta || !inp) {
+    closeCustomCssModal();
+    return;
+  }
+  inp.value = ta.value || '';
+  try {
+    inp.dispatchEvent(new Event('input', { bubbles: true }));
+  } catch(_) {
+    if (typeof inp.oninput === 'function') inp.oninput();
+  }
+  closeCustomCssModal();
+}
 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']]
@@ -3446,7 +3851,12 @@ function renderRightPanel(el) {
   // \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') +
+    '<div class="sub-lbl-row">' +
+      '<div class="sub-lbl">Custom CSS</div>' +
+      '<button type="button" class="css-expand-btn" title="Open full-screen editor" onclick="openCustomCssModal()">' +
+        '<i class="bi bi-fullscreen"></i>' +
+      '</button>' +
+    '</div>' +
     '<textarea class="pr-inp" id="pp-css" style="width:100%;min-height:80px;font-family:monospace;font-size:11px" placeholder="color: red; font-size: 16px;">'+esc(el.getAttribute('style')||'')+'</textarea>';
 
   // \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
@@ -3529,12 +3939,25 @@ function renderRightPanel(el) {
   var sel = buildSelector(el);
   bindings.forEach(function(b){
     var inp = document.getElementById(b[0]);
-    if (inp) inp.addEventListener('input', function(){
+    if (inp) {
+      var onValueChange = 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);
-    });
+      var valueToLog = inp.value;
+      try {
+        console.log('[V2] input changed', {
+          inputId: b[0],
+          rawValue: inp.value,
+          appliedValue: valueToLog,
+          selector: sel,
+        });
+      } catch(_) {}
+      logChange(sel, b[0], valueToLog, el, orig);
+      };
+      inp.addEventListener('input', onValueChange);
+      inp.addEventListener('change', onValueChange);
+    }
   });
 }
 
@@ -3797,6 +4220,32 @@ function attachClickHandler() {
   } catch(_) {}
 }
 
+function attachIframeHoverHandler() {
+  try {
+    var iframe = document.getElementById('iframeId');
+    var doc = iframe && iframe.contentDocument;
+    if (!doc || !doc.body) return;
+    if (hoverAttachDoc === doc) return;
+    hoverAttachDoc = doc;
+    doc.addEventListener('mousemove', function(e) {
+      if (currentMode !== 'editor') {
+        clearTreeHoverHighlight();
+        return;
+      }
+      var target = e.target;
+      if (!target || target === doc.body || target === doc.documentElement) {
+        clearTreeHoverHighlight();
+        return;
+      }
+      setTreeHoverHighlight(target);
+    }, true);
+    doc.addEventListener('mouseout', function(e) {
+      if (e.relatedTarget) return;
+      clearTreeHoverHighlight();
+    }, true);
+  } catch(_) {}
+}
+
 function attachChangeObserver() {
   try {
     var iframe = document.getElementById('iframeId');
@@ -3809,27 +4258,15 @@ function attachChangeObserver() {
       changeObserverDoc = null;
     }
     changeObserver = new MutationObserver(function(mutations) {
-      // Dirty state is derived from changesets baseline + stateChanges (not raw DOM mutations).
-      var bodyReplaced = false;
+      var hasMeaningfulMutation = false;
       for (var mi = 0; mi < mutations.length; mi++) {
-        var m = mutations[mi];
-        if (
-          m &&
-          m.type === 'childList' &&
-          m.target === doc.body &&
-          m.addedNodes &&
-          m.removedNodes &&
-          m.addedNodes.length > 0 &&
-          m.removedNodes.length > 0
-        ) {
-          bodyReplaced = true;
+        if (!isTreeHoverOnlyClassMutation(mutations[mi])) {
+          hasMeaningfulMutation = true;
           break;
         }
       }
-      if (bodyReplaced) {
-        // Page JS replaced body children; allow structural rows (insert/reorder) to apply again.
-        appliedStructuralChangesetKeys = {};
-      }
+      if (!hasMeaningfulMutation) return;
+      // Dirty state is derived from changesets baseline + stateChanges (not raw DOM mutations).
       // Host scripts can replace selected nodes every few frames (e.g. A/B tool observers).
       // Keep selection sticky by re-resolving from fingerprint.
       recoverSelectedElement(false);
@@ -3839,7 +4276,7 @@ function attachChangeObserver() {
       updateSelectionToolbar();
     });
     changeObserver.observe(doc.body, {
-      childList: true, subtree: true, attributes: true, characterData: true
+      childList: true, subtree: true, attributes: true, characterData: true, attributeOldValue: true
     });
     changeObserverDoc = doc;
   } catch(_) {}
@@ -3863,7 +4300,9 @@ function syncIframeInteractions(reason) {
     }
     showNoUrl(false);
     injectIframeSelectionStyles(doc);
+    refreshPersistentChangesetStyleTagForActiveVariation();
     attachClickHandler();
+    attachIframeHoverHandler();
     attachDragReposition();
     attachChangeObserver();
     startConsistencyWatchdog(doc);
@@ -4222,10 +4661,9 @@ window.addEventListener('load', function() {
   var iframe = document.getElementById('iframeId');
   iframe.addEventListener('load', function() {
     if (!iframe.src || iframe.src === 'about:blank' || iframe.src === window.location.href) return;
-    // New iframe navigation: always drop bindings tied to the previous document.
-    resetIframeBindings();
     var doc = iframe.contentDocument;
     if (!doc) {
+      resetIframeBindings();
       syncIframeInteractions('iframe-load-no-doc');
       return;
     }
@@ -4234,14 +4672,32 @@ window.addEventListener('load', function() {
     // Stale events: src may already be the proxy URL while the document is still
     // about:blank (e.g. src cleared then reset to force reload). Ask sync path to retry.
     if (docUrl === 'about:blank') {
+      resetIframeBindings();
       syncIframeInteractions('iframe-load-about-blank');
       return;
     }
+    // If early-paint and final load DOM signatures match, avoid a second full apply/reset
+    // that steals focus from sidebar controls while the page is still stabilizing.
+    var shouldRefreshOnFinalLoad = true;
+    if (
+      iframeEarlyDomSignatureNavGen === iframeContentNavGen &&
+      iframeEarlySyncPrimedForGen === iframeContentNavGen &&
+      iframeEarlyDomSignature
+    ) {
+      var finalDomSignature = computeIframeDomSignature(doc);
+      if (finalDomSignature && finalDomSignature === iframeEarlyDomSignature) {
+        shouldRefreshOnFinalLoad = false;
+      }
+    }
+    if (clickAttachDoc !== doc || dragAttachDoc !== doc || changeObserverDoc !== doc || hoverAttachDoc !== doc) {
+      resetIframeBindings();
+    }
     attachIframeLoadingUntilComplete(iframe);
     if (doc.body && iframeDocMatchesNavigatedSrc(iframe, doc)) {
       stopIframeContentApplyWatcher();
-      deselectElement();
-      applyActiveVariationHtml();
+      if (shouldRefreshOnFinalLoad) {
+        applyActiveVariationHtml();
+      }
     }
     // Always attempt sync; it has its own readiness checks + retry loop.
     syncIframeInteractions('iframe-load');
@@ -4583,9 +5039,12 @@ function createVisualEditorMiddleware(options) {
           }
         );
         if (html.includes("</head>")) {
-          html = html.replace("</head>", `${popupHideCss}
-${consentAllowCss}
-</head>`);
+          html = html.replace(
+            "</head>",
+            `${iframeAlwaysShowCss}
+${iframeAlwaysShowCssGuardScript}
+</head>`
+          );
         }
         html = html.replace(
           /<meta[^>]+http-equiv=["']?\s*(x-frame-options|content-security-policy)\s*["']?[^>]*>/gi,