@accelerated-agency/visual-editor 0.3.4 → 0.3.7

package/dist/vite.js

@@ -3,6 +3,42 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 
 // src/visualEditorProxyPlugin.ts
+var SCRAPER_PROXY_HOST = process.env.SCRAPERAPI_PROXY_HOST || "proxy-server.scraperapi.com";
+var SCRAPER_PROXY_PORT = Number(process.env.SCRAPERAPI_PROXY_PORT || "8001");
+var SCRAPER_PROXY_USERNAME_BASE = process.env.SCRAPERAPI_PROXY_USERNAME_BASE || "scraperapi";
+var SCRAPER_PROXY_USERNAME_PARAMS = process.env.SCRAPERAPI_PROXY_USERNAME_PARAMS || "render=true.wait_for_selector=body.follow_redirect=false.keep_headers=true";
+var SCRAPER_PROXY_USERNAME = process.env.SCRAPERAPI_PROXY_USERNAME || [
+  SCRAPER_PROXY_USERNAME_BASE,
+  SCRAPER_PROXY_USERNAME_PARAMS
+].filter(Boolean).join(".");
+var SCRAPER_PROXY_PASSWORD = process.env.SCRAPERAPI_PROXY_PASSWORD || process.env.SCRAPERAPI_API_KEY || "e0252333bde7cbf61d2d388e8c4a962a";
+var SCRAPER_API_ENDPOINT = process.env.SCRAPERAPI_ENDPOINT || "https://api.scraperapi.com/";
+var SCRAPER_REQUEST_TLS_REJECT_UNAUTHORIZED_RAW = process.env.SCRAPERAPI_REQUEST_TLS_REJECT_UNAUTHORIZED || "false";
+var SCRAPER_REQUEST_TLS_REJECT_UNAUTHORIZED = !["0", "false", "no"].includes(
+  SCRAPER_REQUEST_TLS_REJECT_UNAUTHORIZED_RAW.toLowerCase()
+);
+var scraperProxyClientPromise = null;
+async function getScraperProxyClient() {
+  if (scraperProxyClientPromise) return scraperProxyClientPromise;
+  scraperProxyClientPromise = (async () => {
+    try {
+      const undici = await import('undici');
+      const proxyUrl = "http://" + encodeURIComponent(SCRAPER_PROXY_USERNAME) + ":" + encodeURIComponent(SCRAPER_PROXY_PASSWORD) + "@" + SCRAPER_PROXY_HOST + ":" + String(SCRAPER_PROXY_PORT);
+      return {
+        dispatcher: new undici.ProxyAgent({
+          uri: proxyUrl,
+          requestTls: {
+            rejectUnauthorized: SCRAPER_REQUEST_TLS_REJECT_UNAUTHORIZED
+          }
+        }),
+        fetchFn: undici.fetch
+      };
+    } catch (_) {
+      return null;
+    }
+  })();
+  return scraperProxyClientPromise;
+}
 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(){
@@ -347,21 +383,21 @@ html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFo
 .lp-sec{border-bottom:1px solid var(--border);flex-shrink:0;padding: 24px;}
 .lp-sec-no-border{border-bottom:none!important}
 .lp-sec-hd{
-  padding:10px 12px 8px;font-size:14px;font-weight:600;
+  margin-bottom: 12px;
+  font-size:14px;font-weight:600;
   color:#404040;display:flex;align-items:center;justify-content:space-between;gap:5px
 }
 .lp-sec-hd-left{display:flex;align-items:center;gap:5px}
 #active-var-label{display:none;color:var(--accent-txt);font-size:10px;font-weight:500}
 .lp-info-icon{font-size:11px;color:var(--text-3);cursor:default;opacity:.7}
 .lp-add-btn{
-  display:none;
   background:none;border:none;color:var(--text);font-size:14px;font-weight:500;
   cursor:pointer;padding:2px 5px;border-radius:4px;transition:all .12s;flex-shrink:0
 }
 .lp-add-btn:hover{background:var(--bg-hover);color:var(--accent-txt)}
 
 /* \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:2px 0 6px;display:flex;flex-direction:column; gap:8px;}
+#variation-tabs{display:flex;flex-direction:column; gap:8px;}
 .var-tab{
   border-radius: 4px;
   border: 1px solid #e5e7eb;
@@ -392,7 +428,7 @@ html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFo
 #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-tabs, .section-components-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;background:#fff}
 .lp-tab{
   flex:1;padding:8px 2px;text-align:center;font-size:10px;color:var(--text-3);
   cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;font-weight:600;line-height:1.15
@@ -402,10 +438,10 @@ html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFo
 .future-hidden{display:none!important}
 
 /* \u2500\u2500 Left panel body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-.lp-body{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}
+.lp-body, .section-components-body{flex:1;overflow-y:auto}
+.lp-body::-webkit-scrollbar, .section-components-body::-webkit-scrollbar{width:3px}
+.lp-body::-webkit-scrollbar-thumb, .section-components-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}
+.tab-pane, .section-components-tab-pane{display:none}.tab-pane.active, .section-components-tab-pane.active{display:block}
 
 /* \u2500\u2500 Component grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 .cg-hdr{padding:8px 10px 4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
@@ -617,12 +653,83 @@ select.pr-inp{cursor:pointer;background:#fff}
 }
 #states-clear:hover{border-color:#fca5a5;color:#ef4444;background:#fef2f2}
 #history-clear{
-  display:block;width:calc(100% - 24px);margin:10px 12px;
+  display:block;width:calc(100% - 24px);margin:10px 12px 8px;
   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
 }
 #history-clear:hover{border-color:#fca5a5;color:#ef4444;background:#fef2f2}
+.history-timeline{
+  position:relative;
+  margin:8px 0 12px;
+  padding:0 12px 0 36px;
+}
+.history-timeline::before{
+  content:'';
+  position:absolute;
+  left:20px;
+  top:4px;
+  bottom:4px;
+  width:2px;
+  background:#eceff3;
+  border-radius:2px;
+}
+.history-item{
+  position:relative;
+  display:flex;
+  align-items:flex-start;
+  gap:10px;
+  padding:10px 8px 10px 0;
+  cursor:pointer;
+}
+.history-dot{
+  position:absolute;
+  left:-20px;
+  top:18px;
+  width:10px;
+  height:10px;
+  border-radius:50%;
+  background:#fff;
+  border:2px solid #d7dde6;
+}
+.history-card{
+  flex:1;
+  min-width:0;
+}
+.history-title{
+  font-size:14px;
+  font-weight:600;
+  color:var(--text);
+  line-height:1.3;
+}
+.history-meta{
+  margin-top:4px;
+  display:flex;
+  align-items:center;
+  gap:6px;
+  color:var(--text-2);
+  font-size:11px;
+}
+.history-avatar{
+  width:18px;
+  height:18px;
+  border-radius:50%;
+  background:#e9e5ff;
+  color:#5b47d6;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  font-size:10px;
+  font-weight:700;
+}
+.history-time{
+  margin-top:3px;
+  font-size:11px;
+  color:var(--text-3);
+}
+.history-remove{
+  margin-top:2px;
+}
 </style>
 </head>
 <body class="mode-editor">
@@ -704,7 +811,7 @@ select.pr-inp{cursor:pointer;background:#fff}
       <div class="lp-sec">
         <div class="lp-sec-hd">
           <span class="lp-sec-hd-left">Variations <span id="active-var-label"></span></span>
-          <button class="lp-add-btn" title="Add variation">+ Add</button>
+          <button class="lp-add-btn" style="display:none" title="Add variation">+ Add</button>
         </div>
         <div id="variation-tabs"></div>
       </div>
@@ -729,27 +836,39 @@ select.pr-inp{cursor:pointer;background:#fff}
           <span class="lp-sec-hd-left">Elements <i class="bi bi-info-circle lp-info-icon" title="Page elements"></i></span>
           <button class="lp-add-btn" title="Add element">+ Add</button>
         </div>
-      </div>
 
-      <!-- Search (hidden, kept for JS) -->
-      <div style="display:none">
+        <!-- Search (hidden, kept for JS) -->
+      <div>
         <input type="search" id="comp-search" placeholder="Search layers\u2026" autocomplete="off">
       </div>
 
+
       <!-- Tabs (hidden, kept for JS) -->
-      <div class="lp-tabs" style="display:none">
-        <div class="lp-tab active" onclick="switchLeftTab('elements')">Elements</div>
-        <div class="lp-tab future-hidden" onclick="switchLeftTab('components')">Components</div>
-        <div class="lp-tab future-hidden" onclick="switchLeftTab('sections')">Sections</div>
+      <div class="lp-tabs" >
+      <div class="lp-tab active" onclick="switchLeftTab('elements')">Elements</div>
+        <div class="lp-tab" onclick="switchLeftTab('dom-tree')">DOM Tree</div>
+      </div>
+
       </div>
 
       <!-- Tab content -->
       <div class="lp-body">
-        <div id="tab-elements" class="tab-pane active"><div id="dom-tree-root" class="dt-tree"></div></div>
-        <div id="tab-components" class="tab-pane future-hidden"></div>
-        <div id="tab-sections" class="tab-pane future-hidden"></div>
+        <div id="tab-dom-tree" class="tab-pane">
+        <div id="dom-tree-root" class="dt-tree">
+        </div>
+        </div>
+        <div id="tab-elements" class="tab-pane active">
+        <div id="elements-root" class="elements-tree">
+        </div>
+        </div>
       </div>
 
+      
+
+      
+
+      
+
     </div><!-- #left-panel -->
 
     <!-- Center / iframe panel -->
@@ -757,7 +876,8 @@ select.pr-inp{cursor:pointer;background:#fff}
 
       <!-- Floating toolbar for selected element (positioned over iframe) -->
       <div id="selection-floater" aria-label="Selection actions">
-        <button type="button" class="sf-btn" id="sf-drag" title="Move up/down (drag on page after activating)"><i class="bi bi-arrows-move"></i></button>
+        <button type="button" class="sf-btn" id="sf-move-up" title="Move up"><i class="bi bi-arrow-up"></i></button>
+        <button type="button" class="sf-btn" id="sf-move-down" title="Move down"><i class="bi bi-arrow-down"></i></button>
         <span class="sf-sep"></span>
         <button type="button" class="sf-btn" id="sf-resize" disabled title="Resize (coming soon)"><i class="bi bi-arrows-angle-expand"></i></button>
         <button type="button" class="sf-btn" id="sf-rotate" disabled title="Rotate (coming soon)"><i class="bi bi-arrow-repeat"></i></button>
@@ -784,13 +904,20 @@ select.pr-inp{cursor:pointer;background:#fff}
 
     <!-- Right panel -->
     <div id="right-panel">
-
+      <!-- Left-tab controls moved here -->
+      <div class="section-components-tabs">
+        <div class="lp-tab" onclick="switchSectionComponentsTab('components')">Components</div>
+        <div class="lp-tab" onclick="switchSectionComponentsTab('sections')">Sections</div>
+      </div>
+      <div class="lp-body">
+        <div id="tab-components" class="tab-pane"></div>
+        <div id="tab-sections" class="tab-pane"></div>
+      </div>
       <!-- 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>
@@ -872,12 +999,7 @@ select.pr-inp{cursor:pointer;background:#fff}
 
       <!-- \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 id="states-list"></div>
       </div><!-- #tab-states -->
 
       <!-- \u2500\u2500 History pane (saved DB changesets for active variation) \u2500\u2500 -->
@@ -1125,6 +1247,7 @@ var suppressClickUntil = 0;
 var dragAttachDoc     = null;
 var currentMainTab  = 'design';
 var currentLeftTab  = 'elements';
+var currentSectionComponentsTab = 'components';
 var dragHandleActive = false;
 var domTreeCollapsed = {};
 var domTreeRefreshTimer = null;
@@ -1156,6 +1279,13 @@ var stateChangesByVarId = {};
 var appliedChangesetSnapshots = {};
 /** Canonical JSON fingerprints of persisted changesets per variation (last load / finalize) */
 var baselineChangesetsByVarId = {};
+/** Monotonic timestamp key for ordering mixed live + saved history rows. */
+var vveHistorySeq = 0;
+
+function nextHistoryTimestamp() {
+  vveHistorySeq += 1;
+  return Date.now() * 1000 + vveHistorySeq;
+}
 
 // \u2500\u2500 Dirty tracking (compare DB baseline + session stateChanges vs current export) \u2500\u2500
 function beginSuppressIframeMutationDirty() {
@@ -1371,27 +1501,45 @@ function setDevice(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) {
+  if (tab !== 'elements' && tab !== 'dom-tree') return;
   currentLeftTab = tab;
-  var tabs = document.querySelectorAll('.lp-tab');
-  tabs[0].classList.toggle('active', tab === 'elements');
-  tabs[1].classList.toggle('active', tab === 'components');
-  tabs[2].classList.toggle('active', tab === 'sections');
-  document.getElementById('tab-elements').classList.toggle('active', tab === 'elements');
-  document.getElementById('tab-components').classList.toggle('active', tab === 'components');
-  document.getElementById('tab-sections').classList.toggle('active', tab === 'sections');
+  var tabs = document.querySelectorAll('.lp-tabs .lp-tab');
+  for (var i = 0; i < tabs.length; i++) {
+    var oc = tabs[i].getAttribute('onclick') || '';
+    tabs[i].classList.toggle('active', oc.indexOf("switchLeftTab('" + tab + "')") >= 0);
+  }
+  var paneNames = ['elements', 'dom-tree'];
+  for (var p = 0; p < paneNames.length; p++) {
+    var pane = document.getElementById('tab-' + paneNames[p]);
+    if (pane) pane.classList.toggle('active', paneNames[p] === tab);
+  }
   var inp = document.getElementById('comp-search');
   if (tab === 'elements') {
+    inp.placeholder = 'Search elements\u2026';
+    renderElementsTree(inp.value);
+  } else if (tab === 'dom-tree') {
     inp.placeholder = 'Search layers\u2026';
     renderDomTree(inp.value);
-  } else if (tab === 'sections') {
-    inp.placeholder = 'Search sections\u2026';
-    renderSidebar(inp.value);
-  } else {
-    inp.placeholder = 'Search components\u2026';
-    renderSidebar(inp.value);
   }
 }
 
+function switchSectionComponentsTab(tab) {
+  if (tab !== 'components' && tab !== 'sections') return;
+  currentSectionComponentsTab = tab;
+  var tabs = document.querySelectorAll('.section-components-tabs .lp-tab');
+  for (var i = 0; i < tabs.length; i++) {
+    var oc = tabs[i].getAttribute('onclick') || '';
+    tabs[i].classList.toggle('active', oc.indexOf("switchSectionComponentsTab('" + tab + "')") >= 0);
+  }
+  var compPane = document.getElementById('tab-components');
+  var secPane = document.getElementById('tab-sections');
+  if (compPane) compPane.classList.toggle('active', tab === 'components');
+  if (secPane) secPane.classList.toggle('active', tab === 'sections');
+  var inp = document.getElementById('comp-search');
+  if (inp) inp.placeholder = tab === 'sections' ? 'Search sections\u2026' : 'Search components\u2026';
+  renderSidebar(inp ? inp.value : '');
+}
+
 // \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);
@@ -1514,42 +1662,20 @@ function logChange(selector, inputId, value, targetEl, originalValue) {
       : (originalValue != null ? originalValue : '');
     var entry = {
       selector: selector, inputId: inputId, label: meta.label,
-      cssProp: meta.cssProp, value: value, targetEl: targetEl, originalValue: orig
+      cssProp: meta.cssProp, value: value, targetEl: targetEl, originalValue: orig, vveTs: nextHistoryTimestamp()
     };
     if (idx >= 0) { stateChanges[idx] = entry; } else { stateChanges.push(entry); }
   }
   if (currentMainTab === 'states') renderStatesTab();
+  if (currentMainTab === 'history') renderHistoryTab();
   commitStateChangesForActiveVariation();
   recomputeEditorDirty();
 }
 
 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;
+  if (!container) return;
+  container.innerHTML = '';
 }
 
 // Resolve a live DOM element for a state-change entry.
@@ -1628,7 +1754,9 @@ function removeStateChange(idx) {
   stateChanges.splice(idx, 1);
   commitStateChangesForActiveVariation();
   renderStatesTab();
+  if (currentMainTab === 'history') renderHistoryTab();
   recomputeEditorDirty();
+  scheduleDomTreeRefresh();
 }
 
 function clearAllStates() {
@@ -1639,7 +1767,9 @@ function clearAllStates() {
   stateChanges = [];
   commitStateChangesForActiveVariation();
   renderStatesTab();
+  if (currentMainTab === 'history') renderHistoryTab();
   recomputeEditorDirty();
+  scheduleDomTreeRefresh();
 }
 
 // \u2500\u2500 History tab (saved changesets from DB for active variation) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
@@ -1812,61 +1942,169 @@ function historyEntryValuePreview(entry) {
   return '';
 }
 
+function getHistoryTimestampValue(raw, fallback) {
+  var n = Number(raw);
+  if (Number.isFinite(n) && n > 0) return n;
+  return fallback;
+}
+
+function historyTimestampForChangeset(entry, idx) {
+  var base = idx + 1;
+  if (!entry) return base;
+  return getHistoryTimestampValue(
+    entry.vveTs != null ? entry.vveTs : (entry.timestamp != null ? entry.timestamp : entry.ts),
+    base,
+  );
+}
+
+function historyTimestampForStateChange(change, idx) {
+  return getHistoryTimestampValue(change && change.vveTs, idx + 1);
+}
+
+function formatHistoryTimestamp(ts) {
+  if (!Number.isFinite(ts) || ts <= 0) return '';
+  var ms = ts > 9999999999999 ? Math.floor(ts / 1000) : ts;
+  var d = new Date(ms);
+  if (isNaN(d.getTime())) return '';
+  return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+}
+
+function formatHistoryRelativeTime(ts) {
+  if (!Number.isFinite(ts) || ts <= 0) return '';
+  var ms = ts > 9999999999999 ? Math.floor(ts / 1000) : ts;
+  var diff = Math.max(0, Date.now() - ms);
+  var sec = Math.floor(diff / 1000);
+  if (sec < 5) return 'just now';
+  if (sec < 60) return sec + ' seconds ago';
+  var min = Math.floor(sec / 60);
+  if (min < 60) return min + ' minute' + (min === 1 ? '' : 's') + ' ago';
+  var hr = Math.floor(min / 60);
+  if (hr < 24) return hr + ' hour' + (hr === 1 ? '' : 's') + ' ago';
+  var day = Math.floor(hr / 24);
+  return day + ' day' + (day === 1 ? '' : 's') + ' ago';
+}
+
+function getUnifiedHistoryItems() {
+  var out = [];
+  var v = getActiveVariationForHistory();
+  var saved = v ? parseVariationChangesets(v) : [];
+  for (var i = 0; i < saved.length; i++) {
+    var e = saved[i];
+    out.push({
+      source: 'saved',
+      idx: i,
+      selector: (e && e.selector) || '(unknown)',
+      label: historyEntryTypeLabel(e),
+      value: historyEntryValuePreview(e),
+      ts: historyTimestampForChangeset(e, i),
+      tsLabel: formatHistoryTimestamp(historyTimestampForChangeset(e, i)),
+      actor: 'Saved changeset',
+    });
+  }
+  var live = stateChanges || [];
+  for (var j = 0; j < live.length; j++) {
+    var c = live[j];
+    if (!c) continue;
+    var ts = historyTimestampForStateChange(c, j + saved.length);
+    out.push({
+      source: 'live',
+      idx: j,
+      selector: c.selector || '(unknown)',
+      label: c.label || 'Live change',
+      value: c.value != null ? String(c.value).slice(0, 120) : '',
+      ts: ts,
+      tsLabel: formatHistoryTimestamp(ts),
+      actor: 'You',
+    });
+  }
+  out.sort(function(a, b) {
+    if (b.ts !== a.ts) return b.ts - a.ts;
+    if (a.source !== b.source) return a.source === 'live' ? -1 : 1;
+    return b.idx - a.idx;
+  });
+  return out;
+}
+
 function renderHistoryTab() {
   var container = document.getElementById('history-list');
   if (!container) return;
-  var v = getActiveVariationForHistory();
-  var arr = v ? parseVariationChangesets(v) : [];
-  if (!arr.length) {
+  var items = getUnifiedHistoryItems();
+  if (!items.length) {
     container.innerHTML =
-      '<div class="states-empty"><i class="bi bi-clock-history"></i>No saved changesets for this variation \u2014 use Finalize to persist edits to the server</div>';
+      '<div class="states-empty"><i class="bi bi-clock-history"></i>No changes yet</div>';
     return;
   }
-  var groups = {};
-  var order = [];
-  for (var gi = 0; gi < arr.length; gi++) {
-    var entry = arr[gi];
-    var sel = entry.selector || '(unknown)';
-    if (!groups[sel]) {
-      groups[sel] = [];
-      order.push(sel);
-    }
-    groups[sel].push({ entry: entry, idx: gi });
-  }
   var html =
-    '<button type="button" id="history-clear" onclick="clearAllHistoryChangesets()"><i class="bi bi-trash3"></i> Clear all saved changes</button>';
-  order.forEach(function(sel) {
-    html += '<div class="state-group"><div class="state-group-sel">' + esc(sel) + '</div>';
-    groups[sel].forEach(function(item) {
-      var lab = historyEntryTypeLabel(item.entry);
-      var val = historyEntryValuePreview(item.entry);
-      html +=
-        '<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>' +
-        '<span class="state-item-label">' +
-        esc(lab) +
-        '</span>' +
-        '<span class="state-item-val" title="' +
-        esc(val) +
-        '">' +
-        esc(val) +
-        '</span>' +
-        '<button type="button" class="state-remove" title="Remove this saved row (#' +
-        item.idx +
-        ')" onclick="removeHistoryChangeset(' +
-        item.idx +
-        ', event)">&#x2715;</button>' +
-        '</div>';
-    });
-    html += '</div>';
-  });
+    '<button type="button" id="history-clear" onclick="clearAllUnifiedHistory()"><i class="bi bi-trash3"></i> Clear all changes</button>';
+  html += '<div class="history-timeline">';
+  for (var i = 0; i < items.length; i++) {
+    var it = items[i];
+    var title = 'Edit - ' + (it.label || 'Change');
+    var avatarLabel = it.source === 'live' ? 'Y' : 'S';
+    var timeText = formatHistoryRelativeTime(it.ts) || (it.tsLabel || '');
+    html +=
+      '<div class="history-item" role="button" tabindex="0" title="Jump to element in iframe" onclick="focusHistoryItem(&quot;' +
+      esc(it.source) +
+      '&quot;,' +
+      it.idx +
+      ')">' +
+      '<span class="history-dot"></span>' +
+      '<div class="history-card">' +
+      '<div class="history-title">' + esc(title) + '</div>' +
+      '<div class="history-meta">' +
+      '<span class="history-avatar">' + esc(avatarLabel) + '</span>' +
+      '<span>' + esc(it.actor || 'Editor') + '</span>' +
+      '</div>' +
+      '<div class="history-time">' + esc(timeText || 'n/a') + '</div>' +
+      '</div>' +
+      '<button type="button" class="state-remove history-remove" title="Remove this change" onclick="removeHistoryItem(&quot;' +
+      esc(it.source) +
+      '&quot;,' +
+      it.idx +
+      ', event)">&#x2715;</button>' +
+      '</div>';
+  }
+  html += '</div>';
   container.innerHTML = html;
 }
 
+function focusHistoryItem(source, idx) {
+  if (source === 'live') {
+    var change = stateChanges[idx];
+    if (!change || !change.selector) return;
+    try {
+      var iframe = document.getElementById('iframeId');
+      var iframeDoc = iframe && iframe.contentDocument;
+      if (!iframeDoc) return;
+      var el = querySelectorResolved(iframeDoc, change.selector);
+      if (!el) return;
+      selectElement(el);
+      try {
+        el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
+      } catch(_) {
+        el.scrollIntoView();
+      }
+    } catch(_) {}
+    return;
+  }
+  focusHistoryChangeset(idx);
+}
+
+function removeHistoryItem(source, idx, evt) {
+  if (source === 'live') {
+    if (evt && evt.stopPropagation) evt.stopPropagation();
+    removeStateChange(idx);
+    if (currentMainTab === 'history') renderHistoryTab();
+    return;
+  }
+  removeHistoryChangeset(idx, evt);
+}
+
+function getLatestHistoryUndoTarget() {
+  var list = getUnifiedHistoryItems();
+  return list.length ? list[0] : null;
+}
+
 function changesetListHasStructural(arr) {
   if (!arr || !arr.length) return false;
   for (var i = 0; i < arr.length; i++) {
@@ -1978,6 +2216,12 @@ function clearAllHistoryChangesets() {
   softReloadEditorIframe();
 }
 
+function clearAllUnifiedHistory() {
+  clearAllStates();
+  clearAllHistoryChangesets();
+  if (currentMainTab === 'history') renderHistoryTab();
+}
+
 // \u2500\u2500 Persisted active variation (survives iframe / full page reload) \u2500\u2500\u2500\u2500\u2500\u2500\u2500
 /** All Visual Editor iframe keys in localStorage use this prefix \u2014 cleared on close. */
 var VVE_LOCAL_STORAGE_PREFIX = 'vve:';
@@ -2243,13 +2487,7 @@ function granularAnySelectorMatches(doc, cs) {
 
 /** Bust bfcache / same-URL no-op reloads so the iframe actually re-parses (loading \u2192 interactive). */
 function appendIframeReloadBust(url) {
-  if (!url || url === 'about:blank') return url;
-  var stamp = Date.now();
-  if (url.indexOf('__ve_reload=') !== -1) {
-    return url.replace(/([&?])__ve_reload=[0-9]+/, '$1__ve_reload=' + stamp);
-  }
-  var sep = url.indexOf('?') !== -1 ? '&' : '?';
-  return url + sep + '__ve_reload=' + stamp;
+  return url;
 }
 
 // True when the iframe contentDocument belongs to the current iframe.src navigation.
@@ -2269,13 +2507,7 @@ function iframeDocMatchesNavigatedSrc(iframe, doc) {
   try {
     var base = window.location.href;
     var su = new URL(src, base);
-    if (su.searchParams && su.searchParams.has('__ve_reload')) {
-      su.searchParams.delete('__ve_reload');
-    }
     var du = new URL(loc, base);
-    if (du.searchParams && du.searchParams.has('__ve_reload')) {
-      du.searchParams.delete('__ve_reload');
-    }
     // Same-origin proxy that keeps document address aligned with iframe src
     if (su.origin === du.origin && su.pathname + su.search === du.pathname + du.search) {
       return true;
@@ -2331,7 +2563,7 @@ function runConsistencyReconcile() {
   var doc = iframe && iframe.contentDocument;
   if (!doc || !doc.body) return;
   var variation = variations.find(function(v) { return v._id === activeVarId; });
-  var cs = parseVariationChangesets(variation);
+  var cs = buildPersistedChainSetsForVariation(variation);
   if (!cs.length || changesetsHaveBodySnapshot(cs)) return;
   var granular = filterGranularChangesetEntries(cs);
   var unresolved = countUnresolvedGranularSelectors(doc, granular);
@@ -2405,6 +2637,43 @@ function isIframeDomReady(iframe, doc) {
   return true;
 }
 
+function parseEditorUrlPayload(rawUrl) {
+  if (!rawUrl) return null;
+  try {
+    var parsed = new URL(String(rawUrl), window.location.href);
+    var nestedUrl = parsed.searchParams.get('url');
+    var nestedPassword = parsed.searchParams.get('password');
+    if (nestedUrl || nestedPassword) {
+      return {
+        url: nestedUrl || undefined,
+        password: nestedPassword || undefined,
+      };
+    }
+    return {
+      url: parsed.toString(),
+      password:
+        (experimentData && experimentData.editorPassword)
+          ? String(experimentData.editorPassword)
+          : undefined,
+    };
+  } catch(_) {
+    return null;
+  }
+}
+
+var lastEditorUrlPayloadKey = '';
+function emitEditorUrlChangedPayload(payload) {
+  if (!payload) return;
+  var key = String(payload.url || '') + '|' + String(payload.password || '');
+  if (key === lastEditorUrlPayloadKey) return;
+  lastEditorUrlPayloadKey = key;
+  send('editor-url-changed', payload);
+}
+function emitEditorUrlChanged(rawUrl) {
+  var payload = parseEditorUrlPayload(rawUrl);
+  emitEditorUrlChangedPayload(payload);
+}
+
 function loadPage(proxyUrl) {
   showNoUrl(false);
   lastLoadedProxyUrl = proxyUrl;
@@ -2414,6 +2683,7 @@ function loadPage(proxyUrl) {
   iframe.style.display = 'block';
   setIframePageLoadingUi(true);
   iframe.src = appendIframeReloadBust(proxyUrl);
+  emitEditorUrlChanged(proxyUrl);
   startIframeContentApplyWatcher(navGen, iframe.contentDocument || null);
   scheduleDomTreeRefresh();
 }
@@ -2591,6 +2861,7 @@ function mergeGranularChainSets(baseList, overlayList) {
 function appendSessionStructuralChainRow(varId, row) {
   if (!varId || !row) return;
   if (!sessionStructuralChainRowsByVarId[varId]) sessionStructuralChainRowsByVarId[varId] = [];
+  if (row.vveTs == null) row.vveTs = nextHistoryTimestamp();
   sessionStructuralChainRowsByVarId[varId].push(row);
 }
 
@@ -2598,33 +2869,33 @@ function appendSessionStructuralChainRow(varId, row) {
 function stateChangeToChainSet(c) {
   if (!c || !c.selector) return null;
   if (c.cssProp) {
-    return { selector: c.selector, type: 'style', property: c.cssProp, value: c.value };
+    return { selector: c.selector, type: 'style', property: c.cssProp, value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
   }
   switch (c.inputId) {
     case 'pp-text':
-      return { selector: c.selector, type: 'content', value: c.value };
+      return { selector: c.selector, type: 'content', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     case 'pp-html':
-      return { selector: c.selector, type: 'content', html: c.value };
+      return { selector: c.selector, type: 'content', html: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     case 'pp-cls':
-      return { selector: c.selector, type: 'attribute', attribute: 'class', value: c.value };
+      return { selector: c.selector, type: 'attribute', attribute: 'class', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     case 'pp-id':
-      return { selector: c.selector, type: 'attribute', attribute: 'id', value: c.value };
+      return { selector: c.selector, type: 'attribute', attribute: 'id', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     case 'pp-href':
-      return { selector: c.selector, type: 'attribute', attribute: 'href', value: c.value };
+      return { selector: c.selector, type: 'attribute', attribute: 'href', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     case 'pp-target':
-      return { selector: c.selector, type: 'attribute', attribute: 'target', value: c.value };
+      return { selector: c.selector, type: 'attribute', attribute: 'target', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     case 'pp-src':
-      return { selector: c.selector, type: 'attribute', attribute: 'src', value: c.value };
+      return { selector: c.selector, type: 'attribute', attribute: 'src', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     case 'pp-alt':
-      return { selector: c.selector, type: 'attribute', attribute: 'alt', value: c.value };
+      return { selector: c.selector, type: 'attribute', attribute: 'alt', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     case 'pp-ph':
-      return { selector: c.selector, type: 'attribute', attribute: 'placeholder', value: c.value };
+      return { selector: c.selector, type: 'attribute', attribute: 'placeholder', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     case 'pp-css':
-      return { selector: c.selector, type: 'attribute', attribute: 'style', value: c.value };
+      return { selector: c.selector, type: 'attribute', attribute: 'style', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     case 'pp-mob-css':
-      return { selector: c.selector, type: 'attribute', attribute: 'data-mobile-css', value: c.value };
+      return { selector: c.selector, type: 'attribute', attribute: 'data-mobile-css', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     case 'pp-tab-css':
-      return { selector: c.selector, type: 'attribute', attribute: 'data-tablet-css', value: c.value };
+      return { selector: c.selector, type: 'attribute', attribute: 'data-tablet-css', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     default:
       return null;
   }
@@ -2912,7 +3183,7 @@ function applyActiveVariationHtml() {
   if (!iframeDoc || !iframeDoc.body) return;
 
   var variation = variations.find(function(v) { return v._id === activeVarId; });
-  var cs = parseVariationChangesets(variation);
+  var cs = buildPersistedChainSetsForVariation(variation);
   refreshPersistentChangesetStyleTagForActiveVariation();
 
   beginSuppressIframeMutationDirty();
@@ -2970,7 +3241,7 @@ function applyVariationGranularOnly(iframeDoc) {
   if (!activeVarId || !iframeDoc || !iframeDoc.body) return;
   if (varHtmlCache[activeVarId]) return;
   var variation = variations.find(function(v) { return v._id === activeVarId; });
-  var cs = parseVariationChangesets(variation);
+  var cs = buildPersistedChainSetsForVariation(variation);
   if (!cs.length || changesetsHaveBodySnapshot(cs)) return;
   beginSuppressIframeMutationDirty();
   try {
@@ -2989,7 +3260,7 @@ function reapplyActiveVariationGranular(iframeDoc) {
   if (!activeVarId || !iframeDoc || !iframeDoc.body) return;
   if (varHtmlCache[activeVarId]) return;
   var variation = variations.find(function(v) { return v._id === activeVarId; });
-  var cs = parseVariationChangesets(variation);
+  var cs = buildPersistedChainSetsForVariation(variation);
   if (!cs.length || changesetsHaveBodySnapshot(cs)) return;
   beginSuppressIframeMutationDirty();
   try {
@@ -3033,7 +3304,7 @@ function startIframeContentApplyWatcher(navGen, prevDocRef) {
 
       if (doc.readyState === 'loading') {
         var variation = variations.find(function(v) { return v._id === activeVarId; });
-        var cs0 = parseVariationChangesets(variation);
+        var cs0 = buildPersistedChainSetsForVariation(variation);
         if (!cs0.length || changesetsHaveBodySnapshot(cs0)) return;
         var granular = filterGranularChangesetEntries(cs0);
         if (!granular.length) return;
@@ -3079,8 +3350,9 @@ function selectElement(el) {
   document.getElementById('no-sel').style.display = 'none';
   renderRightPanel(el);
   updateSelectionToolbar();
-  if (currentLeftTab === 'elements') {
-    var dr = document.getElementById('dom-tree-root');
+  if (currentLeftTab === 'elements' || currentLeftTab === 'dom-tree') {
+    var treeRootId = currentLeftTab === 'elements' ? 'elements-root' : 'dom-tree-root';
+    var dr = document.getElementById(treeRootId);
     if (dr && dr.querySelector('.dt-row')) syncDomTreeSelection();
     else scheduleDomTreeRefresh();
   }
@@ -3343,27 +3615,32 @@ function deleteSelectedEl() {
 }
 
 function syncDomTreeSelection() {
-  var root = document.getElementById('dom-tree-root');
-  if (!root) return;
-  var rows = root.querySelectorAll('.dt-row');
-  for (var i = 0; i < rows.length; i++) {
-    rows[i].classList.toggle('dt-selected', !!(selectedEl && rows[i]._dtEl === selectedEl));
-  }
-  if (!selectedEl) return;
-  var found = null;
-  for (var j = 0; j < rows.length; j++) {
-    if (rows[j]._dtEl === selectedEl) { found = rows[j]; break; }
+  var roots = ['dom-tree-root', 'elements-root'];
+  for (var r = 0; r < roots.length; r++) {
+    var root = document.getElementById(roots[r]);
+    if (!root) continue;
+    var rows = root.querySelectorAll('.dt-row');
+    for (var i = 0; i < rows.length; i++) {
+      rows[i].classList.toggle('dt-selected', !!(selectedEl && rows[i]._dtEl === selectedEl));
+    }
+    if (!selectedEl) continue;
+    var found = null;
+    for (var j = 0; j < rows.length; j++) {
+      if (rows[j]._dtEl === selectedEl) { found = rows[j]; break; }
+    }
+    if (found) found.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
   }
-  if (found) found.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
 }
 
 function scheduleDomTreeRefresh() {
-  if (currentLeftTab !== 'elements') return;
+  if (currentLeftTab !== 'elements' && currentLeftTab !== 'dom-tree') return;
   if (domTreeRefreshTimer) clearTimeout(domTreeRefreshTimer);
   domTreeRefreshTimer = setTimeout(function() {
     domTreeRefreshTimer = null;
     var inp = document.getElementById('comp-search');
-    renderDomTree(inp ? inp.value : '');
+    var q = inp ? inp.value : '';
+    if (currentLeftTab === 'elements') renderElementsTree(q);
+    else if (currentLeftTab === 'dom-tree') renderDomTree(q);
   }, 150);
 }
 
@@ -3386,6 +3663,129 @@ function domTreePathSegment(el) {
   return tag + '[' + idx + ']';
 }
 
+function renderElementsTree(filterRaw) {
+  var filterText = (filterRaw || '').toLowerCase().trim();
+  var root = document.getElementById('elements-root');
+  if (!root) return;
+  var iframe = document.getElementById('iframeId');
+  var doc = iframe && iframe.contentDocument;
+  if (!isIframeDomReady(iframe, doc)) {
+    root.innerHTML = '<div class="dt-muted">Load a page to see the elements.</div>';
+    return;
+  }
+
+  function skippable(el) {
+    return isDomTreeSkippableTagName(el.tagName);
+  }
+
+  function nodeIcon(tag) {
+    tag = (tag || '').toLowerCase();
+    if (/^h[1-6]$/.test(tag)) return 'bi bi-type-h1';
+    if (tag === 'a') return 'bi bi-link-45deg';
+    if (tag === 'img') return 'bi bi-image';
+    if (tag === 'section' || tag === 'main' || tag === 'article' || tag === 'header' || tag === 'footer' || tag === 'nav') return 'bi bi-layout-three-columns';
+    if (tag === 'button' || tag === 'input' || tag === 'select' || tag === 'textarea') return 'bi bi-ui-radios';
+    if (tag === 'ul' || tag === 'ol') return 'bi bi-list-ul';
+    if (tag === 'li') return 'bi bi-dot';
+    if (tag === 'svg') return 'bi bi-bezier2';
+    if (tag === 'p' || tag === 'span') return 'bi bi-text-left';
+    return 'bi bi-square';
+  }
+
+  function labelFor(el) {
+    var tag = (el.tagName || '').toLowerCase();
+    return tag.toUpperCase();
+  }
+
+  function isListableNode(el) {
+    if (!el || el.nodeType !== 1) return false;
+    if (skippable(el)) return false;
+    var tag = (el.tagName || '').toLowerCase();
+    if (tag !== 'svg') {
+      var p = el.parentElement;
+      while (p) {
+        if ((p.tagName || '').toLowerCase() === 'svg') return false;
+        p = p.parentElement;
+      }
+    }
+    return true;
+  }
+
+  var nodes = [];
+  var i, cursor;
+  try {
+    cursor = doc.createTreeWalker(doc.body, NodeFilter.SHOW_ELEMENT, null);
+  } catch(_) {
+    cursor = null;
+  }
+  if (cursor) {
+    while (cursor.nextNode()) {
+      var node = cursor.currentNode;
+      if (isListableNode(node)) nodes.push(node);
+      if (nodes.length > 4000) break;
+    }
+  } else {
+    function collectFlat(el) {
+      if (!el || !el.children) return;
+      for (var j = 0; j < el.children.length; j++) {
+        var c = el.children[j];
+        if (!isListableNode(c)) continue;
+        nodes.push(c);
+        if (nodes.length > 4000) return;
+        collectFlat(c);
+        if (nodes.length > 4000) return;
+      }
+    }
+    collectFlat(doc.body);
+  }
+
+  root.innerHTML = '';
+  for (i = 0; i < nodes.length; i++) {
+    var el = nodes[i];
+    var lblText = labelFor(el);
+    if (filterText && lblText.toLowerCase().indexOf(filterText) < 0) continue;
+
+    var row = document.createElement('div');
+    row.className = 'dt-row';
+    row._dtEl = el;
+    if (el === selectedEl) row.classList.add('dt-selected');
+    row.style.paddingLeft = '4px';
+
+    var spacer = document.createElement('button');
+    spacer.type = 'button';
+    spacer.className = 'dt-chev dt-spacer';
+
+    var ico = document.createElement('div');
+    ico.className = 'dt-ico';
+    ico.innerHTML = '<i class="' + nodeIcon(el.tagName) + '"></i>';
+
+    var lbl = document.createElement('div');
+    lbl.className = 'dt-lbl';
+    lbl.textContent = lblText;
+    lbl.title = buildSelector(el);
+
+    row.appendChild(spacer);
+    row.appendChild(ico);
+    row.appendChild(lbl);
+    row.onclick = (function(targetEl) {
+      return function() { selectElementFromTree(targetEl); };
+    })(el);
+    row.onmouseenter = (function(targetEl) {
+      return function() { setTreeHoverHighlight(targetEl); };
+    })(el);
+    root.appendChild(row);
+  }
+
+  if (!root.querySelector('.dt-row')) {
+    root.innerHTML = filterText
+      ? '<div class="dt-muted">No elements match your search.</div>'
+      : '<div class="dt-muted">No elements found.</div>';
+  }
+  root.onmouseleave = function() {
+    clearTreeHoverHighlight();
+  };
+}
+
 function renderDomTree(filterRaw) {
   var filterText = (filterRaw || '').toLowerCase().trim();
   var root = document.getElementById('dom-tree-root');
@@ -4124,6 +4524,20 @@ function recordReorderAfterDrag(movedEl) {
   }
 }
 
+function moveSelectedElByDirection(direction) {
+  if (!selectedEl || !selectedEl.parentElement) return;
+  var p = selectedEl.parentElement;
+  var sibling = direction < 0 ? selectedEl.previousElementSibling : selectedEl.nextElementSibling;
+  if (!sibling) return;
+  if (direction < 0) p.insertBefore(selectedEl, sibling);
+  else p.insertBefore(sibling, selectedEl);
+  recordReorderAfterDrag(selectedEl);
+  saveCurrentVariationHtml();
+  recomputeEditorDirty();
+  scheduleDomTreeRefresh();
+  updateSelectionToolbar();
+}
+
 function attachDragReposition() {
   try {
     var iframe = document.getElementById('iframeId');
@@ -4310,7 +4724,9 @@ function syncIframeInteractions(reason) {
     scheduleConsistencyReconcile();
     bindSelectionToolbarScroll();
     var inp = document.getElementById('comp-search');
-    renderDomTree(inp ? inp.value : '');
+    var q = inp ? inp.value : '';
+    if (currentLeftTab === 'elements') renderElementsTree(q);
+    else if (currentLeftTab === 'dom-tree') renderDomTree(q);
     updateSelectionToolbar();
     recomputeEditorDirty();
   } catch(_) {}
@@ -4474,8 +4890,11 @@ function renderSidebar(filter) {
 }
 
 document.getElementById('comp-search').addEventListener('input', function() {
-  if (currentLeftTab === 'elements') renderDomTree(this.value);
-  else renderSidebar(this.value);
+  if (currentLeftTab === 'elements') renderElementsTree(this.value);
+  else if (currentLeftTab === 'dom-tree') renderDomTree(this.value);
+  if (currentSectionComponentsTab === 'components' || currentSectionComponentsTab === 'sections') {
+    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
@@ -4541,19 +4960,11 @@ document.addEventListener('keydown', function(e) {
   var k = (e.key || '').toLowerCase();
   if (meta && !e.shiftKey && k === 'z') {
     e.preventDefault();
-    if (typeof Vvveb !== 'undefined' && Vvveb.Undo) {
-      Vvveb.Undo.undo();
-      saveCurrentVariationHtml();
-      recomputeEditorDirty();
-    }
+    runEditorUndo();
   }
   if (meta && e.shiftKey && k === 'z') {
     e.preventDefault();
-    if (typeof Vvveb !== 'undefined' && Vvveb.Undo) {
-      Vvveb.Undo.redo();
-      saveCurrentVariationHtml();
-      recomputeEditorDirty();
-    }
+    runEditorRedo();
   }
   if (meta && e.key === 's') { e.preventDefault(); handleSave(); }
   if (e.key === 'Escape') {
@@ -4573,8 +4984,39 @@ document.addEventListener('keydown', function(e) {
     if (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(); });
+function runEditorUndo() {
+  var target = getLatestHistoryUndoTarget();
+  if (target) {
+    removeHistoryItem(target.source, target.idx);
+    return;
+  }
+  if (!(typeof Vvveb !== 'undefined' && Vvveb.Undo)) return;
+  Vvveb.Undo.undo();
+  saveCurrentVariationHtml();
+  recomputeEditorDirty();
+  scheduleDomTreeRefresh();
+  updateSelectionToolbar();
+}
+
+function runEditorRedo() {
+  if (!(typeof Vvveb !== 'undefined' && Vvveb.Undo)) return;
+  Vvveb.Undo.redo();
+  saveCurrentVariationHtml();
+  recomputeEditorDirty();
+  scheduleDomTreeRefresh();
+  updateSelectionToolbar();
+}
+
+document.getElementById('btn-undo').addEventListener('click', function(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  runEditorUndo();
+});
+document.getElementById('btn-redo').addEventListener('click', function(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  runEditorRedo();
+});
 
 function layoutLoadingTooltip(host) {
   var tip = host.querySelector('.ve-pl-tooltip');
@@ -4650,8 +5092,8 @@ function registerCROSections() {
 
 window.addEventListener('load', function() {
   registerCROSections();
-  renderSidebar();
-  renderDomTree(document.getElementById('comp-search').value);
+  switchSectionComponentsTab(currentSectionComponentsTab);
+  renderElementsTree(document.getElementById('comp-search').value);
   vvvebReady = true;
   bindLoadingTooltipPositioning();
 
@@ -4660,6 +5102,18 @@ window.addEventListener('load', function() {
 
   // After each iframe load: apply variation, wire click+mutation handlers
   var iframe = document.getElementById('iframeId');
+  window.addEventListener('message', function(ev) {
+    try {
+      var d = ev && ev.data;
+      if (!d || d.channel !== 'vvveb-proxy-url' || d.type !== 'editor-url-changed') return;
+      if (!iframe || !iframe.contentWindow || ev.source !== iframe.contentWindow) return;
+      var payload = d.payload || {};
+      emitEditorUrlChangedPayload({
+        url: payload.url || undefined,
+        password: payload.password || undefined,
+      });
+    } catch(_) {}
+  });
   iframe.addEventListener('load', function() {
     if (!iframe.src || iframe.src === 'about:blank' || iframe.src === window.location.href) return;
     var doc = iframe.contentDocument;
@@ -4670,6 +5124,7 @@ window.addEventListener('load', function() {
     }
     var docUrl = '';
     try { docUrl = String(doc.URL || ''); } catch(_) {}
+    emitEditorUrlChanged(iframe.src || docUrl);
     // 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') {
@@ -4704,12 +5159,22 @@ window.addEventListener('load', function() {
     syncIframeInteractions('iframe-load');
   });
 
-  document.getElementById('sf-drag').addEventListener('click', function(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!selectedEl) return;
-    setDragHandleActive(!dragHandleActive);
-  });
+  var sfMoveUp = document.getElementById('sf-move-up');
+  if (sfMoveUp) {
+    sfMoveUp.addEventListener('click', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      moveSelectedElByDirection(-1);
+    });
+  }
+  var sfMoveDown = document.getElementById('sf-move-down');
+  if (sfMoveDown) {
+    sfMoveDown.addEventListener('click', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      moveSelectedElByDirection(1);
+    });
+  }
   document.getElementById('sf-dup').addEventListener('click', function(e) {
     e.preventDefault();
     e.stopPropagation();
@@ -4924,6 +5389,8 @@ function createVisualEditorMiddleware(options) {
         const targetUrl = url.searchParams.get("url");
         const password = url.searchParams.get("password") || "";
         const strictFreezeParam = (url.searchParams.get("strictObserverFreeze") || "").toLowerCase();
+        const proxyParam = (url.searchParams.get("proxy") || "").toLowerCase();
+        const useScraperProxy = proxyParam === "1" || proxyParam === "true" || proxyParam === "yes";
         const strictObserverFreezeForRequest = strictFreezeParam === "1" || strictFreezeParam === "true" || strictFreezeParam === "yes" ? true : strictFreezeParam === "0" || strictFreezeParam === "false" || strictFreezeParam === "no" ? false : strictObserverFreeze;
         if (!targetUrl) {
           res.statusCode = 400;
@@ -4933,13 +5400,37 @@ function createVisualEditorMiddleware(options) {
         const parsed = new URL(targetUrl);
         const origin = parsed.origin;
         const method = (req.method || "GET").toUpperCase();
+        const scraperProxyClient = useScraperProxy ? await getScraperProxyClient() : null;
+        if (useScraperProxy && !scraperProxyClient) {
+          res.statusCode = 500;
+          res.setHeader("Content-Type", "application/json");
+          res.end(
+            JSON.stringify({
+              error: "ScraperAPI proxy is not configured. Set SCRAPERAPI_PROXY_PASSWORD or SCRAPERAPI_API_KEY."
+            })
+          );
+          return;
+        }
+        if (!SCRAPER_PROXY_PASSWORD) ;
+        const upstreamFetch = (input, init = {}) => {
+          if (!useScraperProxy || !scraperProxyClient) {
+            const scraperUrl = new URL(SCRAPER_API_ENDPOINT);
+            scraperUrl.searchParams.set("api_key", SCRAPER_PROXY_PASSWORD);
+            scraperUrl.searchParams.set("url", input);
+            return fetch(scraperUrl.toString(), init);
+          }
+          return scraperProxyClient.fetchFn(input, {
+            ...init,
+            dispatcher: scraperProxyClient.dispatcher
+          });
+        };
         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`, {
+          const passResp = await upstreamFetch(`${origin}/password`, {
             method: "POST",
             headers: {
               "Content-Type": "application/x-www-form-urlencoded",
@@ -4986,7 +5477,7 @@ function createVisualEditorMiddleware(options) {
         const timeoutId = setTimeout(() => ac.abort(), upstreamTimeoutMs);
         let upstream;
         try {
-          upstream = await fetch(targetUrl, {
+          upstream = await upstreamFetch(targetUrl, {
             method,
             headers: fetchHeaders,
             body: requestBody ? Buffer.from(requestBody) : null,
@@ -4996,11 +5487,27 @@ function createVisualEditorMiddleware(options) {
         } catch (fetchErr) {
           clearTimeout(timeoutId);
           const aborted = fetchErr?.name === "AbortError";
+          const fetchCause = fetchErr?.cause;
           res.statusCode = aborted ? 504 : 502;
           res.setHeader("Content-Type", "application/json");
           res.end(
             JSON.stringify({
-              error: aborted ? `Upstream request timed out after ${upstreamTimeoutMs / 1e3}s` : fetchErr?.message || "Upstream fetch failed"
+              error: aborted ? `Upstream request timed out after ${upstreamTimeoutMs / 1e3}s` : fetchErr?.message || "Upstream fetch failed",
+              phase: useScraperProxy ? "scraperapi-proxy-fetch" : "scraperapi-simple-fetch",
+              fetchMode: useScraperProxy ? "proxy" : "simple",
+              scraperapi: {
+                host: SCRAPER_PROXY_HOST,
+                port: SCRAPER_PROXY_PORT,
+                username: SCRAPER_PROXY_USERNAME,
+                endpoint: SCRAPER_API_ENDPOINT,
+                hasProxyPassword: Boolean(SCRAPER_PROXY_PASSWORD),
+                requestTlsRejectUnauthorized: SCRAPER_REQUEST_TLS_REJECT_UNAUTHORIZED
+              },
+              cause: fetchCause && typeof fetchCause === "object" ? {
+                name: fetchCause.name,
+                code: fetchCause.code,
+                message: fetchCause.message
+              } : fetchCause ? String(fetchCause) : null
             })
           );
           return;
@@ -5031,7 +5538,7 @@ function createVisualEditorMiddleware(options) {
         }
         html = html.replace(/(href|src|action)="\/(?!\/)/g, `$1="${origin}/`);
         const escapedOrigin = origin.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-        const proxyBase = `/api/conversion-proxy?__ve_reload=${Date.now()}&password=${encodeURIComponent(password)}&url=`;
+        const proxyBase = `/api/conversion-proxy?password=${encodeURIComponent(password)}&url=`;
         html = html.replace(
           new RegExp(`(href|action)="${escapedOrigin}(/[^"]*)"`, "g"),
           (match, attr, urlPath) => {
@@ -5042,6 +5549,12 @@ function createVisualEditorMiddleware(options) {
             return `${attr}="${proxyBase}${encodeURIComponent(origin + urlPath)}"`;
           }
         );
+        html = html.replace(
+          /data-link="\/(?!\/)([^"]*)"/g,
+          (_match, pathPart) => `data-link="/api/conversion-proxy?password=${encodeURIComponent(password)}&url=${encodeURIComponent(
+            `${origin}/${pathPart}`
+          )}"`
+        );
         if (html.includes("</head>")) {
           html = html.replace(
             "</head>",
@@ -5063,10 +5576,18 @@ var TARGET_ORIGIN=${JSON.stringify(origin)};
 var TARGET_PAGE_URL=${JSON.stringify(targetUrl)};
 var PROXY_PASSWORD=${JSON.stringify(password)};
 var STRICT_OBSERVER_FREEZE=${JSON.stringify(strictObserverFreezeForRequest)};
+var PARENT_URL_CHANNEL="vvveb-proxy-url";
 window.__CONVERSION_EDITOR_ACTIVE__=true;
+function getEditorUrlPayload(){try{var u=new URL(window.location.href);var nested=u.searchParams.get("url");return{url:nested||u.toString(),password:u.searchParams.get("password")||undefined};}catch(_){return null;}}
+function notifyEditorUrlChanged(){try{var payload=getEditorUrlPayload();if(!payload)return;if(window.parent){window.parent.postMessage({channel:PARENT_URL_CHANNEL,type:"editor-url-changed",payload:payload},"*");}}catch(_){}}
+try{notifyEditorUrlChanged();}catch(_){}
+try{if(window.history&&typeof window.history.pushState==="function"){var nativePushState=window.history.pushState;window.history.pushState=function(){var ret=nativePushState.apply(window.history,arguments);setTimeout(notifyEditorUrlChanged,0);return ret;};}}catch(_){}
+try{if(window.history&&typeof window.history.replaceState==="function"){var nativeReplaceState=window.history.replaceState;window.history.replaceState=function(){var ret=nativeReplaceState.apply(window.history,arguments);setTimeout(notifyEditorUrlChanged,0);return ret;};}}catch(_){}
+try{window.addEventListener("popstate",notifyEditorUrlChanged,true);}catch(_){}
+try{window.addEventListener("hashchange",notifyEditorUrlChanged,true);}catch(_){}
 function isSkippable(raw){if(!raw||typeof raw!=="string")return true;return raw.startsWith("data:")||raw.startsWith("blob:")||raw.startsWith("javascript:")||raw.startsWith("#");}
 function toAbsolute(raw){if(isSkippable(raw))return raw;try{var base=raw.startsWith("/")||raw.startsWith("//")?TARGET_ORIGIN:TARGET_PAGE_URL;return new URL(raw,base).toString();}catch(_){return raw;}}
-function toProxy(raw){if(isSkippable(raw))return null;var abs=toAbsolute(raw);if(!abs||typeof abs!=="string")return null;try{var parsed=new URL(abs);if(parsed.origin!==TARGET_ORIGIN)return null;return "/api/conversion-proxy?__ve_reload="+Date.now()+"&password="+encodeURIComponent(PROXY_PASSWORD||"")+"&url="+encodeURIComponent(parsed.toString());}catch(_){return null;}}
+function toProxy(raw){if(isSkippable(raw))return null;var abs=toAbsolute(raw);if(!abs||typeof abs!=="string")return null;try{var parsed=new URL(abs);if(parsed.origin!==TARGET_ORIGIN)return null;return "/api/conversion-proxy?password="+encodeURIComponent(PROXY_PASSWORD||"")+"&url="+encodeURIComponent(parsed.toString());}catch(_){return null;}}
 var nativeAssign=window.location.assign?window.location.assign.bind(window.location):null;
 var nativeReplace=window.location.replace?window.location.replace.bind(window.location):null;
 function safeNavigate(raw,mode){var abs=toAbsolute(raw);var prox=toProxy(raw);if(!prox){try{console.warn("[conversion-proxy] redirect blocked",{mode:mode,requested:raw,resolved:abs,origin:TARGET_ORIGIN});}catch(_){}return false;}try{console.info("[conversion-proxy] redirect intercepted",{mode:mode,requested:raw,resolved:abs,proxied:prox});if(mode==="replace"&&nativeReplace){nativeReplace(prox);return true;}if(nativeAssign){nativeAssign(prox);return true;}window.location.href=prox;return true;}catch(err){try{console.warn("[conversion-proxy] redirect interception failed",{mode:mode,requested:raw,resolved:abs,proxied:prox,error:err&&err.message?err.message:String(err)});}catch(_){}return false;}}
@@ -5147,9 +5668,9 @@ if(window.fetch){
 }
 if(window.XMLHttpRequest&&window.XMLHttpRequest.prototype&&window.XMLHttpRequest.prototype.open){var _open=window.XMLHttpRequest.prototype.open;window.XMLHttpRequest.prototype.open=function(method,url){try{var u=resolveUrl(String(url));if(u&&isNestedMalformedProxy(u)){arguments[1]=EMPTY_JSON_DATA;}else{arguments[1]=toAbsoluteOriginUrl(url);}}catch(_){}return _open.apply(this,arguments);};}
 if(window.navigator&&typeof window.navigator.sendBeacon==="function"){var _beacon=window.navigator.sendBeacon.bind(window.navigator);window.navigator.sendBeacon=function(url,data){try{if(skipNestedProxyNetwork(String(url)))return true;}catch(_){}return _beacon(url,data);};}
-function withReloadBust(urlRaw){try{var u=resolveUrl(String(urlRaw||""));if(!u)return null;var p=u.pathname||"";var isRootProxyPath=p==="/api/conversion-proxy"||p.indexOf("/api/conversion-proxy/")===0;if(!isRootProxyPath)return null;u.searchParams.set("__ve_reload",String(Date.now()));return u.toString();}catch(_){return null;}}
-document.addEventListener("click",function(ev){try{var t=ev&&ev.target;if(!t||!t.closest)return;var a=t.closest("a[href]");if(!a)return;var href=a.getAttribute("href")||a.href;var bust=withReloadBust(href);if(bust)a.setAttribute("href",bust);}catch(_){}},true);
-document.addEventListener("submit",function(ev){try{var f=ev&&ev.target;if(!f||!f.getAttribute)return;var act=f.getAttribute("action")||"";var bust=withReloadBust(act);if(bust)f.setAttribute("action",bust);}catch(_){}},true);
+function withReloadBust(urlRaw){try{var u=resolveUrl(String(urlRaw||""));if(!u)return null;var p=u.pathname||"";var isRootProxyPath=p==="/api/conversion-proxy"||p.indexOf("/api/conversion-proxy/")===0;if(!isRootProxyPath)return null;return u.toString();}catch(_){return null;}}
+document.addEventListener("click",function(ev){try{var t=ev&&ev.target;if(!t||!t.closest)return;var a=t.closest("a[href]");if(a){var href=a.getAttribute("href")||a.href||"";var hasModifier=!!(ev.metaKey||ev.ctrlKey||ev.shiftKey||ev.altKey);var targetAttr=(a.getAttribute("target")||"").toLowerCase();var isNewTab=targetAttr==="_blank";var isDownload=!!a.getAttribute("download");if(hasModifier||isNewTab||isDownload)return;var prox=toProxy(href);if(!prox)return;a.setAttribute("href",prox);if(ev&&typeof ev.preventDefault==="function")ev.preventDefault();safeNavigate(href,"assign");return;}var summary=t.closest("summary[data-link]");if(summary&&summary.getAttribute){var raw=summary.getAttribute("data-link")||"";if(raw){var prox2=toProxy(raw);if(prox2){summary.setAttribute("data-link",prox2);if(ev&&typeof ev.preventDefault==="function")ev.preventDefault();safeNavigate(raw,"assign");}}}}catch(_){}},true);
+document.addEventListener("submit",function(ev){try{var f=ev&&ev.target;if(!f||!f.getAttribute)return;var act=f.getAttribute("action")||window.location.href;var prox=toProxy(act);if(prox)f.setAttribute("action",prox);}catch(_){}},true);
 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>")) {