@accelerated-agency/visual-editor 0.4.3 → 0.4.5

package/dist/vite.cjs

@@ -86,17 +86,26 @@ function hasTrackingMarker(input, markers) {
   }
   return false;
 }
+function patchKnownUnsafeEditorPatterns(scriptTag) {
+  let out = String(scriptTag || "");
+  out = out.replace(
+    /dragRegion\.addEventListener\((['"])pointerdown\1,\s*onPointerDown\);?/g,
+    "if (typeof dragRegion !== 'undefined' && dragRegion) dragRegion.addEventListener($1pointerdown$1, onPointerDown);"
+  );
+  return out;
+}
 function stripTrackingScriptsFromScrapedHtml(html, markers) {
   let removedCount = 0;
   let out = html;
   out = out.replace(/<script\b[\s\S]*?<\/script>/gi, (tag) => {
+    var patchedTag = patchKnownUnsafeEditorPatterns(tag);
     const srcMatch = tag.match(/\bsrc\s*=\s*(["'])(.*?)\1/i);
     const src = srcMatch?.[2] || "";
     if (hasTrackingMarker(src, markers) || hasTrackingMarker(tag, markers)) {
       removedCount += 1;
       return "";
     }
-    return tag;
+    return patchedTag;
   });
   out = out.replace(/<noscript\b[\s\S]*?<\/noscript>/gi, (tag) => {
     if (!hasTrackingMarker(tag, markers)) return tag;
@@ -271,8 +280,97 @@ html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFo
 .tb-viewport #dev-label{font-size:14px;font-weight:500;color:##404040;min-width:auto;background:none;border:none;padding:0;overflow:visible;white-space:nowrap;text-overflow:clip;border-radius:0;max-width:none}
 .tb-viewport i{font-size:9px;color:##404040}
 /* Device toggle buttons */
+.tb-dev-wrap{position:relative;display:flex;align-items:center}
 .tb-dev-btns{display:flex;align-items:center;gap:1px;padding:8px 4px;background:#F0F0F0;border-radius:7px; height: 30px;width: 116px;}
 .tb-dev-3btns{display:flex;align-items:center;gap:2px;padding:8px 4px;background:#F0F0F0;border-radius:7px; height: 30px;width: 100px;}
+.tb-dev-menu{
+  position:absolute;top:calc(100% + 8px);right:0;z-index:12040;display:none;
+  width:264px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:4px 4px;
+  box-shadow:0 12px 28px rgba(2,6,23,.18);color:#27272a
+}
+.tb-dev-menu.open{display:block}
+.tb-dev-menu .hd{font-size:12px;font-weight:600;color:#3f3f46;margin-bottom:10px}
+.tb-dev-menu .row{display:flex;align-items:center;gap:8px;}
+.tb-dev-menu .row.height-width-row .row{
+  flex-direction: column;
+  align-items: flex-start;
+}
+.tb-dev-menu .row.height-width-row label{
+  color: var(--content-subtle, #737373);
+font-size: 12px;
+font-style: normal;
+font-weight: 500;
+line-height: 14px; /* 116.667% */
+}
+.tb-dev-menu > .row{
+padding: 4px 12px;
+}
+.tb-dev-menu label{    flex-shrink: 0;
+    overflow: hidden;
+    color: var(--base-surface, #646465);
+    font-size: var(--font-size-sm, 14px);
+    font-style: normal;
+    font-weight: 500;
+    line-height: var(--font-leading-4, 16px);
+    white-space: nowrap;
+    min-width: fit-content;}
+.tb-dev-menu input{
+box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.20), 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 1px 0 rgba(0, 0, 0, 0.01);
+  width:100%;height:30px;border-radius:6px;
+  padding:0 8px;
+  font-size:12px;
+  color:#18181b;
+  background:#fff;
+  outline:none;
+  color:#404040;
+  border-color:transparent;
+}
+  .tb-dev-menu input#dev-zoom-level{
+  max-width: fit-content;
+  margin-left: auto;
+  }
+.tb-dev-menu input:focus{
+  border-color:#1A1A1A;
+  box-shadow:0 0 0 2px rgba(99,102,241,.14)
+}
+.tb-dev-menu .row-split > *{flex:1}
+.tb-dev-menu .panel-toggle label{width:100%}
+.tb-dev-menu .panel-toggle-label{
+  overflow:hidden;
+  color:var(--content-subtle, #737373);
+  text-overflow:ellipsis;
+  font-size:var(--font-size-sm, 14px);
+  font-style:normal;
+  font-weight:500;
+  line-height:var(--font-leading-4, 16px);
+  white-space:nowrap;
+  cursor:pointer;
+}
+.tb-dev-menu .vp-presets{
+  margin-top:8px;padding-top:8px;border-top:1px dashed #ececf0;
+  display:flex;flex-direction:column;gap:2px
+}
+.tb-dev-menu .vp-preset-btn{
+  border:none;background:transparent;text-align:left;cursor:pointer;
+  border-radius:6px;
+  padding:8px 12px;
+    color: var(--content-subtle, #737373);
+    text-overflow: ellipsis;
+    font-size: var(--font-size-sm, 14px);
+    font-style: normal;
+    font-weight: 500;
+    line-height: var(--font-leading-4, 16px);
+}
+.tb-dev-menu .vp-preset-btn:hover,.tb-dev-menu .vp-preset-btn.active{background:#f4f4f5}
+.tb-dev-menu .ft{
+  margin-top:10px;padding-top:8px;border-top:1px solid #ececf0;
+  display:flex;justify-content:flex-end
+}
+.tb-dev-menu .apply-btn{
+  border:1px solid #d4d4d8;background:#f8fafc;color:#111827;border-radius:6px;
+  height:30px;padding:0 10px;font-size:12px;font-weight:600;cursor:pointer
+}
+.tb-dev-menu .apply-btn:hover{background:#eef2ff;border-color:#a5b4fc}
 /* Dark icon buttons */
 .tb-dk-btn{width:28px;height:28px;background:transparent;border:none;border-radius:5px;cursor:pointer;color:#71717a;display:flex;align-items:center;justify-content:center;font-size:13px;transition:all .12s;flex-shrink:0}
 .tb-dk-btn:hover{color:#e4e4e7;background:rgba(255,255,255,.07)}
@@ -431,7 +529,12 @@ html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFo
 /* \u2500\u2500 Device frame \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 #device-frame{
   width:100%;min-height:100%;display:flex;align-items:stretch;
-  justify-content:center;transition:max-width .3s ease
+  justify-content:center;transform-origin:top center;
+  transition:max-width .3s ease,width .2s ease,height .2s ease
+}
+#device-frame.desktop{
+  max-width:1440px;
+  box-shadow:0 0 0 1px var(--border),0 4px 24px rgba(0,0,0,.08)
 }
 #device-frame.tablet{
   max-width:768px;
@@ -832,10 +935,8 @@ select.pr-inp{cursor:pointer;background:#fff}
 </head>
 <body class="mode-editor">
 <div id="app">
-
   <!-- \u2500\u2500 Toolbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->
   <div id="toolbar">
-
     <!-- Left: Logo + Breadcrumb -->
     <div class="tb-left">
       <span class="tb-logo">\u2733</span>
@@ -853,14 +954,48 @@ select.pr-inp{cursor:pointer;background:#fff}
         <span id="dev-label">1440px</span>
         <i class="bi bi-chevron-down"></i>
       </div>
-      <div class="tb-dev-btns">
-        <button class="tb-dk-btn active" id="dev-desktop" onclick="setDevice('desktop')" title="Desktop \u2014 full width"><i class="bi bi-display"></i></button>
-        <button class="tb-dk-btn" id="dev-tablet" onclick="setDevice('tablet')" title="Tablet \u2014 768px"><i class="bi bi-tablet"></i></button>
-        <button class="tb-dk-btn" id="dev-mobile" onclick="setDevice('mobile')" title="Mobile \u2014 390px"><i class="bi bi-phone"></i></button>
-        <button class="tb-dk-btn" title="More options"><i class="bi bi-three-dots"></i></button>
+      <div class="tb-dev-wrap">
+        <div class="tb-dev-btns">
+          <button class="tb-dk-btn active" id="dev-desktop" onclick="setDevice('desktop')" title="Desktop \u2014 1440x1024"><i class="bi bi-display"></i></button>
+          <button class="tb-dk-btn" id="dev-tablet" onclick="setDevice('tablet')" title="Tablet \u2014 768x1024"><i class="bi bi-tablet"></i></button>
+          <button class="tb-dk-btn" id="dev-mobile" onclick="setDevice('mobile')" title="Mobile \u2014 390x844"><i class="bi bi-phone"></i></button>
+          <button class="tb-dk-btn" id="dev-more-btn" title="More options"><i class="bi bi-three-dots"></i></button>
+        </div>
+        <div id="dev-more-menu" class="tb-dev-menu" aria-hidden="true">
+          <div class="row row-zoom">
+            <label for="dev-zoom-level">Zoom</label>
+            <input id="dev-zoom-level" type="number" min="25" max="200" step="5" value="100" />
+          </div>
+          <div class="row row-split row-width height-width-row">
+            <div class="row" style="margin:0">
+              <label for="dev-custom-width">Width</label>
+              <input id="dev-custom-width" type="number" min="240" max="3840" step="1" value="1440" />
+            </div>
+            <div class="row row-height" style="margin:0">
+              <label for="dev-custom-height">Height</label>
+              <input id="dev-custom-height" type="number" min="320" max="3840" step="1" value="1024" />
+            </div>
+          </div>
+          <div class="row panel-toggle">
+            <label id="left-panel-toggle-label" class="panel-toggle-label">Collapse left panel</label>
+          </div>
+          
+          <div class="vp-presets" id="dev-preset-list" aria-label="Device presets">
+            <button type="button" class="vp-preset-btn" data-preset="desktop">Desktop</button>
+            <button type="button" class="vp-preset-btn" data-preset="mobile">iPhone 13</button>
+            <button type="button" class="vp-preset-btn" data-preset="galaxy-s22">Galaxy S22</button>
+            <button type="button" class="vp-preset-btn" data-preset="tablet">iPad</button>
+            <button type="button" class="vp-preset-btn" data-preset="galaxy-j1">Galaxy J1</button>
+            <button type="button" class="vp-preset-btn" data-preset="iphone-7">iPhone 7</button>
+            <button type="button" class="vp-preset-btn" data-preset="responsive">Responsive</button>
+          </div>
+          <div class="ft">
+            <button type="button" class="apply-btn" id="dev-apply-btn">Apply</button>
+          </div>
+        </div>
       </div>
       <button class="tb-dk-btn" id="btn-undo" title="Undo (\u2318Z)"><i class="bi bi-arrow-counterclockwise"></i></button>
-      <button class="tb-dk-btn" id="btn-redo" title="Redo (\u2318\u21E7Z)"><i class="bi bi-arrow-clockwise"></i></button>
+      <button class="tb-dk-btn" id="btn-redo" title="Redo (\u2318\u21E7Z)" style="display:none"><i class="bi bi-arrow-clockwise"></i></button>
     </div>
 
     <div id="iframe-loading-toolbar" class="tb-page-loading" aria-live="polite" aria-atomic="true">
@@ -931,8 +1066,8 @@ select.pr-inp{cursor:pointer;background:#fff}
       <!-- Elements -->
       <div class="lp-sec lp-sec-no-border">
         <div class="lp-sec-hd">
-          <span class="lp-sec-hd-left">Elements <i class="bi bi-info-circle lp-info-icon" title="Page elements"></i></span>
-          <button class="lp-add-btn" title="Add element">+ Add</button>
+          <span class="lp-sec-hd-left">Elements <i style="display:none" class="bi bi-info-circle lp-info-icon" title="Page elements"></i></span>
+          <button class="lp-add-btn" id="btn-add-element" title="Add element">+ Add</button>
         </div>
 
         <!-- Search (hidden, kept for JS) -->
@@ -994,7 +1129,7 @@ select.pr-inp{cursor:pointer;background:#fff}
       </div>
 
       <!-- Device frame containing the editing iframe -->
-      <div id="device-frame">
+      <div id="device-frame" class="desktop">
         <iframe id="iframeId" name="iframeId" allowfullscreen></iframe>
       </div>
 
@@ -1002,14 +1137,16 @@ 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 id="section-components-panel" style="display:none">
+        <!-- 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>
       </div>
       <!-- Element badge (hidden until selection) -->
       <div id="el-info" style="display:none">
@@ -1362,6 +1499,11 @@ var isDirty         = false;
 var vvvebReady      = false;
 var currentMode     = 'editor';
 var currentDevice   = 'desktop';
+var leftPanelCollapsed = false;
+var viewportPreset  = 'desktop';
+var viewportWidth   = 1440;
+var viewportHeight  = 1024;
+var viewportZoom    = 1;
 var selectedEl      = null;
 /** Stable selector fingerprint for resilient selection recovery after DOM churn. */
 var selectedElFingerprint = '';
@@ -1614,15 +1756,202 @@ function setMode(mode) {
 }
 
 // \u2500\u2500 Device toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-var DEVICE_LABELS = { desktop: '1440px', tablet: '768px', mobile: '390px' };
+var DEVICE_PRESETS = {
+  desktop:    { label: 'Desktop', width: 1440, height: 1024, device: 'desktop' },
+  tablet:     { label: 'iPad', width: 768, height: 1024, device: 'tablet' },
+  mobile:     { label: 'iPhone 13', width: 390, height: 844, device: 'mobile' },
+  'galaxy-s22': { label: 'Galaxy S22', width: 360, height: 780, device: 'mobile' },
+  'iphone-7': { label: 'iPhone 7', width: 375, height: 667, device: 'mobile' },
+  'galaxy-j1': { label: 'Galaxy J1', width: 360, height: 640, device: 'mobile' },
+  responsive: { label: 'Responsive', width: 1280, height: 800, device: 'desktop' },
+};
+
+function clampViewportNumber(v, fallback, min, max) {
+  var n = parseInt(v, 10);
+  if (!Number.isFinite(n)) return fallback;
+  return Math.max(min, Math.min(max, n));
+}
+
+function getViewportFitZoom() {
+  var panel = document.getElementById('iframe-panel');
+  var available = panel ? Math.max(260, panel.clientWidth - 24) : viewportWidth;
+  if (!viewportWidth || viewportWidth <= 0) return 1;
+  return Math.min(1, available / viewportWidth);
+}
+
+function getAppliedViewportZoom() {
+  var z = Number(viewportZoom);
+  if (!Number.isFinite(z) || z <= 0) z = 1;
+  z = Math.max(0.25, Math.min(2, z));
+  return Math.min(z, getViewportFitZoom());
+}
+
+function updateViewportLabel() {
+  var lbl = document.getElementById('dev-label');
+  if (!lbl) return;
+  var zoomPct = Math.round(getAppliedViewportZoom() * 100);
+  lbl.textContent = viewportWidth + 'x' + viewportHeight + ' \xB7 ' + zoomPct + '%';
+}
+
+function syncViewportMenuControls() {
+  var presetButtons = document.querySelectorAll('#dev-preset-list .vp-preset-btn');
+  var widthInp = document.getElementById('dev-custom-width');
+  var heightInp = document.getElementById('dev-custom-height');
+  var zoomInp = document.getElementById('dev-zoom-level');
+  if (presetButtons && presetButtons.length) {
+    for (var i = 0; i < presetButtons.length; i++) {
+      var key = presetButtons[i].getAttribute('data-preset') || '';
+      presetButtons[i].classList.toggle('active', key === viewportPreset);
+    }
+  }
+  if (widthInp) widthInp.value = String(viewportWidth);
+  if (heightInp) heightInp.value = String(viewportHeight);
+  if (zoomInp) zoomInp.value = String(Math.round(getAppliedViewportZoom() * 100));
+}
+
+function applyViewportFrame() {
+  var frame = document.getElementById('device-frame');
+  var iframe = document.getElementById('iframeId');
+  if (!frame) return;
+  frame.className = currentDevice;
+  frame.style.width = viewportWidth + 'px';
+  frame.style.height = viewportHeight + 'px';
+  frame.style.maxWidth = 'none';
+  frame.style.zoom = String(getAppliedViewportZoom());
+  if (iframe) {
+    iframe.style.height = viewportHeight + 'px';
+    iframe.style.minHeight = viewportHeight + 'px';
+  }
+  updateViewportLabel();
+  syncViewportMenuControls();
+  if (selectedEl && currentMode === 'editor') requestAnimationFrame(function() { positionSelectionToolbar(); });
+}
+
+function setViewportPreset(presetKey) {
+  var preset = DEVICE_PRESETS[presetKey];
+  if (!preset) return;
+  viewportPreset = presetKey;
+  viewportWidth = preset.width;
+  viewportHeight = preset.height;
+  currentDevice = preset.device || 'desktop';
+  ['desktop','tablet','mobile'].forEach(function(d) {
+    document.getElementById('dev-' + d).classList.toggle('active', d === currentDevice);
+  });
+  applyViewportFrame();
+}
+
 function setDevice(device) {
+  viewportPreset = device;
   currentDevice = device;
-  var frame = document.getElementById('device-frame');
-  frame.className = device === 'desktop' ? '' : device;
+  var preset = DEVICE_PRESETS[device] || DEVICE_PRESETS.desktop;
+  viewportWidth = preset.width;
+  viewportHeight = preset.height;
   ['desktop','tablet','mobile'].forEach(function(d) {
     document.getElementById('dev-' + d).classList.toggle('active', d === device);
   });
-  document.getElementById('dev-label').textContent = DEVICE_LABELS[device] || device;
+  applyViewportFrame();
+}
+
+function setViewportCustomFromInputs() {
+  var widthInp = document.getElementById('dev-custom-width');
+  var heightInp = document.getElementById('dev-custom-height');
+  var zoomInp = document.getElementById('dev-zoom-level');
+  viewportWidth = clampViewportNumber(widthInp ? widthInp.value : '', viewportWidth, 240, 3840);
+  viewportHeight = clampViewportNumber(heightInp ? heightInp.value : '', viewportHeight, 320, 3840);
+  var z = clampViewportNumber(zoomInp ? zoomInp.value : '', Math.round(getAppliedViewportZoom() * 100), 25, 200);
+  viewportZoom = z / 100;
+  viewportPreset = 'custom';
+  currentDevice = viewportWidth <= 480 ? 'mobile' : (viewportWidth <= 1024 ? 'tablet' : 'desktop');
+  ['desktop','tablet','mobile'].forEach(function(d) {
+    document.getElementById('dev-' + d).classList.toggle('active', d === currentDevice);
+  });
+  applyViewportFrame();
+}
+
+function closeViewportMenu() {
+  var menu = document.getElementById('dev-more-menu');
+  if (!menu) return;
+  menu.classList.remove('open');
+  menu.setAttribute('aria-hidden', 'true');
+}
+
+function toggleViewportMenu() {
+  var menu = document.getElementById('dev-more-menu');
+  if (!menu) return;
+  var shouldOpen = !menu.classList.contains('open');
+  menu.classList.toggle('open', shouldOpen);
+  menu.setAttribute('aria-hidden', shouldOpen ? 'false' : 'true');
+}
+
+function bindViewportControls() {
+  var btn = document.getElementById('dev-more-btn');
+  var menu = document.getElementById('dev-more-menu');
+  var leftPanelToggleLabel = document.getElementById('left-panel-toggle-label');
+  var presetButtons = document.querySelectorAll('#dev-preset-list .vp-preset-btn');
+  var applyBtn = document.getElementById('dev-apply-btn');
+  var zoomInp = document.getElementById('dev-zoom-level');
+  var viewportBtn = document.querySelector('.tb-viewport');
+  function updateLeftPanelToggleLabel() {
+    if (!leftPanelToggleLabel) return;
+    leftPanelToggleLabel.textContent = leftPanelCollapsed ? 'Expand left panel' : 'Collapse left panel';
+  }
+  function setLeftPanelCollapsed(collapsed) {
+    var panel = document.getElementById('left-panel');
+    leftPanelCollapsed = !!collapsed;
+    if (panel) panel.style.display = leftPanelCollapsed ? 'none' : '';
+    updateLeftPanelToggleLabel();
+    applyViewportFrame();
+  }
+  if (leftPanelToggleLabel) {
+    leftPanelToggleLabel.addEventListener('click', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      setLeftPanelCollapsed(!leftPanelCollapsed);
+    });
+  }
+  if (btn) btn.addEventListener('click', function(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    toggleViewportMenu();
+  });
+  if (viewportBtn) viewportBtn.addEventListener('click', function(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    toggleViewportMenu();
+  });
+  if (applyBtn) applyBtn.addEventListener('click', function(e) {
+    e.preventDefault();
+    setViewportCustomFromInputs();
+    closeViewportMenu();
+  });
+  if (zoomInp) {
+    zoomInp.addEventListener('change', function() {
+      var z = clampViewportNumber(zoomInp.value, Math.round(getAppliedViewportZoom() * 100), 25, 200);
+      viewportZoom = z / 100;
+      applyViewportFrame();
+    });
+  }
+  if (presetButtons && presetButtons.length) {
+    for (var i = 0; i < presetButtons.length; i++) {
+      presetButtons[i].addEventListener('click', function(e) {
+        e.preventDefault();
+        var key = this.getAttribute('data-preset');
+        if (!key) return;
+        setViewportPreset(key);
+      });
+    }
+  }
+  document.addEventListener('click', function(e) {
+    if (!menu || !menu.classList.contains('open')) return;
+    if (menu.contains(e.target) || (btn && btn.contains(e.target)) || (viewportBtn && viewportBtn.contains(e.target))) return;
+    closeViewportMenu();
+  });
+  document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') closeViewportMenu();
+  });
+  window.addEventListener('resize', function() { applyViewportFrame(); });
+  updateLeftPanelToggleLabel();
+  applyViewportFrame();
 }
 
 // \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
@@ -1666,6 +1995,19 @@ function switchSectionComponentsTab(tab) {
   renderSidebar(inp ? inp.value : '');
 }
 
+function toggleSectionComponentsPanel(forceVisible) {
+  var panel = document.getElementById('section-components-panel');
+  if (!panel) return;
+  var shouldShow =
+    typeof forceVisible === 'boolean'
+      ? forceVisible
+      : panel.style.display === 'none';
+  panel.style.display = shouldShow ? '' : 'none';
+  if (shouldShow) {
+    switchSectionComponentsTab(currentSectionComponentsTab || 'components');
+  }
+}
+
 // \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);
@@ -1771,9 +2113,60 @@ function getOriginalValue(inputId, el) {
   }
 }
 
+var PX_DEFAULT_INPUT_IDS = {
+  'pp-mt': true, 'pp-mr': true, 'pp-mb': true, 'pp-ml': true,
+  'pp-pt': true, 'pp-pr': true, 'pp-pb': true, 'pp-pl': true,
+};
+
+var PX_DEFAULT_CSS_PROPS = {
+  'margin-top': true, 'margin-right': true, 'margin-bottom': true, 'margin-left': true,
+  'padding-top': true, 'padding-right': true, 'padding-bottom': true, 'padding-left': true,
+};
+
+function normalizeCssValueForProperty(prop, value) {
+  var p = prop == null ? '' : String(prop).trim();
+  var pKebab = p
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .replace(/_/g, '-')
+    .replace(/!important/gi, '')
+    .replace(/[^a-zA-Z-]/g, '')
+    .toLowerCase();
+  var raw = value == null ? '' : String(value).trim();
+  var rawClean = raw.replace(/[\u200B\u200C\u200D\uFEFF]/g, '').trim();
+  var numericCandidate = rawClean.replace(/[, ]+/g, '');
+  var isSpacingProp = /^(?:margin|padding)(?:-(?:top|right|bottom|left))?$/.test(pKebab);
+  if (!pKebab || !rawClean) return rawClean;
+  var numericValue = Number(numericCandidate);
+  var shouldAddPx =
+    isSpacingProp &&
+    numericCandidate !== '' &&
+    Number.isFinite(numericValue) &&
+    /^[-+]?(?:[0-9]+(?:[.][0-9]+)?|[.][0-9]+)$/.test(numericCandidate);
+  var out = shouldAddPx ? numericCandidate + 'px' : rawClean;
+  return out;
+}
+
+function normalizeChainSetRowUnits(row) {
+  if (!row) return row;
+  if (normalizeChangesetType(row) === 'style') {
+    row.value = normalizeCssValueForProperty(row.property || row.cssProp, row.value);
+  }
+  return row;
+}
+
+function normalizeLoggedValue(inputId, value) {
+  var raw = value == null ? '' : String(value).trim();
+  if (!raw) return raw;
+  if (PX_DEFAULT_INPUT_IDS[inputId] && /^-?d+(?:.d+)?$/.test(raw)) {
+    return raw + 'px';
+  }
+  return raw;
+}
+
 function logChange(selector, inputId, value, targetEl, originalValue) {
   var meta = PROP_META[inputId];
   if (!meta) return;
+  value = normalizeLoggedValue(inputId, value);
   var key = selector + '||' + inputId;
   // Skip trivially empty / reset values \u2014 remove from log if present
   if (value === '' || value === 'none' || value === 'auto' || value === 'normal') {
@@ -1875,6 +2268,24 @@ function syncDesignInput(change) {
 function removeStateChange(idx) {
   var change = stateChanges[idx];
   if (!change) return;
+  if (change.isStructuralLive) {
+    removeSessionStructuralRowByTimestamp(
+      change.structuralVarId || activeVarId,
+      change.vveTs,
+    );
+    stateChanges.splice(idx, 1);
+    commitStateChangesForActiveVariation();
+    renderStatesTab();
+    if (currentMainTab === 'history') renderHistoryTab();
+    try {
+      delete varHtmlCache[activeVarId];
+    } catch(_) {}
+    appliedStructuralChangesetKeys = {};
+    recomputeEditorDirty();
+    scheduleDomTreeRefresh();
+    softReloadEditorIframe();
+    return;
+  }
   revertChangeOnDom(change);
   syncDesignInput(change);
   stateChanges.splice(idx, 1);
@@ -2231,6 +2642,14 @@ function getLatestHistoryUndoTarget() {
   return list.length ? list[0] : null;
 }
 
+function getLatestLiveUndoTarget() {
+  var list = getUnifiedHistoryItems();
+  for (var i = 0; i < list.length; i++) {
+    if (list[i] && list[i].source === 'live') return list[i];
+  }
+  return null;
+}
+
 function changesetListHasStructural(arr) {
   if (!arr || !arr.length) return false;
   for (var i = 0; i < arr.length; i++) {
@@ -2329,8 +2748,15 @@ function removeHistoryChangeset(idx, evt) {
 function clearAllHistoryChangesets() {
   var v = getActiveVariationForHistory();
   if (!v) return;
-  if (!parseVariationChangesets(v).length) return;
+  var hasSavedChangesets = parseVariationChangesets(v).length > 0;
+  var hasSessionStructural =
+    !!(activeVarId && sessionStructuralChainRowsByVarId[activeVarId] && sessionStructuralChainRowsByVarId[activeVarId].length);
+  if (!hasSavedChangesets && !hasSessionStructural) return;
+
   persistActiveVariationChangesets([]);
+  if (activeVarId) {
+    sessionStructuralChainRowsByVarId[activeVarId] = [];
+  }
   appliedChangesetSnapshots = {};
   appliedStructuralChangesetKeys = {};
   try {
@@ -2343,6 +2769,10 @@ function clearAllHistoryChangesets() {
 }
 
 function clearAllUnifiedHistory() {
+  if (activeVarId) {
+    // Ensure structural unsaved rows are also removed by "Clear all changes".
+    sessionStructuralChainRowsByVarId[activeVarId] = [];
+  }
   clearAllStates();
   clearAllHistoryChangesets();
   if (currentMainTab === 'history') renderHistoryTab();
@@ -2354,15 +2784,32 @@ var VVE_LOCAL_STORAGE_PREFIX = 'vve:';
 
 function clearVisualEditorLocalStorage() {
   try {
-    for (var i = localStorage.length - 1; i >= 0; i--) {
-      var k = localStorage.key(i);
-      if (k && k.indexOf(VVE_LOCAL_STORAGE_PREFIX) === 0) {
-        localStorage.removeItem(k);
+    var stores = [];
+    try { stores.push(localStorage); } catch(_) {}
+    try { stores.push(sessionStorage); } catch(_) {}
+    for (var si = 0; si < stores.length; si++) {
+      var store = stores[si];
+      if (!store) continue;
+      for (var i = store.length - 1; i >= 0; i--) {
+        var k = store.key(i);
+        if (k && k.indexOf(VVE_LOCAL_STORAGE_PREFIX) === 0) {
+          store.removeItem(k);
+        }
       }
     }
   } catch(_) {}
 }
 
+function clearPersistedActiveVariationForData(data) {
+  try {
+    var sk = activeVariationStorageKeyFromPayload(data);
+    if (sk && sk !== VVE_LOCAL_STORAGE_PREFIX + 'activeVar::') {
+      try { localStorage.removeItem(sk); } catch(_) {}
+      try { sessionStorage.removeItem(sk); } catch(_) {}
+    }
+  } catch(_) {}
+}
+
 function activeVariationStorageKeyFromPayload(data) {
   return (
     VVE_LOCAL_STORAGE_PREFIX +
@@ -2401,22 +2848,41 @@ function writePersistedActiveVariationId(varId) {
  * @param allowPrevMemory when true, keep in-session activeVarId if still valid (skip-reload path).
  */
 function pickActiveVariationIdForLoad(data, variationsArr, prevMemoryId, allowPrevMemory) {
-  var baseline = variationsArr.find(function(v) { return v.baseline; });
-  var fallback = (baseline || variationsArr[0] || {})._id || null;
+  var firstNonBaseline = variationsArr.find(function(v) { return !v.baseline; });
+  var fallback = (firstNonBaseline || variationsArr[0] || {})._id || null;
   if (!variationsArr.length) return null;
   if (allowPrevMemory && prevMemoryId && variationsArr.some(function(v) { return v._id === prevMemoryId; })) {
     return prevMemoryId;
   }
   var stored = readPersistedActiveVariationId(data);
   if (stored && variationsArr.some(function(v) { return v._id === stored; })) {
+    var storedVar = variationsArr.find(function(v) { return v._id === stored; });
+    if (storedVar && storedVar.baseline && firstNonBaseline && firstNonBaseline._id) {
+      return firstNonBaseline._id;
+    }
     return stored;
   }
   return fallback;
 }
 
+function updateExperimentNameLabel(data) {
+  var el = document.getElementById('tb-exp-name');
+  if (!el) return;
+  var name = '';
+  try {
+    name = data && data.name != null ? String(data.name).trim() : '';
+  } catch(_) {
+    name = '';
+  }
+  if (!name) name = 'Visual Editor';
+  el.textContent = name;
+  el.title = name;
+}
+
 // \u2500\u2500 Experiment loading \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 function handleLoadExperiment(data) {
   clearPendingGranularChangesets();
+  updateExperimentNameLabel(data);
   var prevKey = experimentData
     ? String(experimentData.experimentId || '') + '|' + String(experimentData.pageUrl || '')
     : '';
@@ -2632,7 +3098,13 @@ function granularAnySelectorMatches(doc, cs) {
 
 /** Bust bfcache / same-URL no-op reloads so the iframe actually re-parses (loading \u2192 interactive). */
 function appendIframeReloadBust(url) {
-  return url;
+  try {
+    var u = new URL(String(url || ''), window.location.href);
+    u.searchParams.set('_vve_reload', String(Date.now()));
+    return u.toString();
+  } catch(_) {
+    return url;
+  }
 }
 
 // True when the iframe contentDocument belongs to the current iframe.src navigation.
@@ -3010,11 +3482,55 @@ function appendSessionStructuralChainRow(varId, row) {
   sessionStructuralChainRowsByVarId[varId].push(row);
 }
 
+function markStructuralRowApplied(row) {
+  try {
+    var k = structuralChangesetDedupKey(row);
+    if (k) appliedStructuralChangesetKeys[k] = true;
+  } catch(_) {}
+}
+
+function logStructuralStateChange(row, label, value, targetEl) {
+  if (!row || !row.selector) return;
+  stateChanges.push({
+    selector: row.selector,
+    inputId: 'vve-struct',
+    label: label || 'Structure change',
+    cssProp: null,
+    value: value != null ? String(value) : String(row.type || ''),
+    targetEl: targetEl || null,
+    originalValue: '',
+    vveTs: row.vveTs || nextHistoryTimestamp(),
+    isStructuralLive: true,
+    structuralVarId: activeVarId || null,
+    structuralType: row.type || '',
+  });
+  if (currentMainTab === 'history') renderHistoryTab();
+  commitStateChangesForActiveVariation();
+}
+
+function removeSessionStructuralRowByTimestamp(varId, ts) {
+  if (!varId || !ts) return;
+  var arr = sessionStructuralChainRowsByVarId[varId];
+  if (!arr || !arr.length) return;
+  for (var i = arr.length - 1; i >= 0; i--) {
+    if (arr[i] && arr[i].vveTs === ts) {
+      arr.splice(i, 1);
+      return;
+    }
+  }
+}
+
 /** One States-tab row -> Conversion.io chain-set shape (matches applyChangesetEntry). */
 function stateChangeToChainSet(c) {
   if (!c || !c.selector) return null;
   if (c.cssProp) {
-    return { selector: c.selector, type: 'style', property: c.cssProp, value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
+    return {
+      selector: c.selector,
+      type: 'style',
+      property: c.cssProp,
+      value: normalizeCssValueForProperty(c.cssProp, c.value),
+      vveTs: c.vveTs || nextHistoryTimestamp()
+    };
   }
   switch (c.inputId) {
     case 'pp-text':
@@ -3186,7 +3702,7 @@ function buildPersistentStyleRulesForActiveVariation() {
     if (value == null || value === '') return;
     var sel = sanitizeSelectorForMatch(String(selector)) || String(selector);
     var pr = String(prop).trim();
-    var val = String(value).trim();
+    var val = normalizeCssValueForProperty(pr, value);
     if (!sel || !pr || !val) return;
     var k = sel + '__vve_sep__' + pr;
     if (!map[k]) order.push(k);
@@ -3224,7 +3740,8 @@ function buildPersistentStyleRulesForActiveVariation() {
   var lines = [];
   for (var oi = 0; oi < order.length; oi++) {
     var row = map[order[oi]];
-    lines.push(row.selector + ' { ' + row.property + ': ' + row.value + ' !important; }');
+    var outVal = normalizeCssValueForProperty(row.property, row.value);
+    lines.push(row.selector + ' { ' + row.property + ': ' + outVal + ' !important; }');
   }
   return lines.join('\\n');
 }
@@ -3375,7 +3892,9 @@ function buildPersistedChainSetsForVariation(v) {
     var row = stateChangeToChainSet(sourceStateChanges[si]);
     if (row) overlay.push(row);
   }
-  return mergeGranularChainSets(mergeGranularChainSets(base, sessionExtra), overlay);
+  var merged = mergeGranularChainSets(mergeGranularChainSets(base, sessionExtra), overlay);
+  for (var mi = 0; mi < merged.length; mi++) normalizeChainSetRowUnits(merged[mi]);
+  return merged;
 }
 
 /**
@@ -3704,12 +4223,15 @@ function duplicateSelectedEl() {
     clone.setAttribute('data-vve-instance', generateVveInstanceId());
   } catch(_) {}
   if (activeVarId) {
-    appendSessionStructuralChainRow(activeVarId, {
+    var dupRow = {
       selector: anchorSel,
       type: 'insert',
       action: 'after',
       html: clone.outerHTML,
-    });
+    };
+    appendSessionStructuralChainRow(activeVarId, dupRow);
+    markStructuralRowApplied(dupRow);
+    logStructuralStateChange(dupRow, 'Duplicated via toolbar', 'Duplicate inserted', selectedEl);
   }
   selectedEl.parentNode.insertBefore(clone, selectedEl.nextSibling);
   saveCurrentVariationHtml();
@@ -3725,23 +4247,27 @@ function toggleHideSelectedEl() {
     selectedEl.style.visibility = '';
     selectedEl.removeAttribute('data-vve-hidden');
     if (activeVarId) {
-      appendSessionStructuralChainRow(activeVarId, {
+      var showRow = {
         selector: hidSel,
         type: 'style',
         property: 'visibility',
         value: '',
-      });
+      };
+      appendSessionStructuralChainRow(activeVarId, showRow);
+      logStructuralStateChange(showRow, 'Shown via toolbar', 'Visibility restored', selectedEl);
     }
   } else {
     selectedEl.style.visibility = 'hidden';
     selectedEl.setAttribute('data-vve-hidden', '1');
     if (activeVarId) {
-      appendSessionStructuralChainRow(activeVarId, {
+      var hideRow = {
         selector: hidSel,
         type: 'style',
         property: 'visibility',
         value: 'hidden',
-      });
+      };
+      appendSessionStructuralChainRow(activeVarId, hideRow);
+      logStructuralStateChange(hideRow, 'Hidden via toolbar', 'Visibility set to hidden', selectedEl);
     }
   }
   saveCurrentVariationHtml();
@@ -3752,7 +4278,11 @@ function deleteSelectedEl() {
   if (!selectedEl || !selectedEl.parentNode) return;
   var delSel = buildSelector(selectedEl);
   selectedEl.remove();
-  if (activeVarId) appendSessionStructuralChainRow(activeVarId, { selector: delSel, type: 'remove' });
+  if (activeVarId) {
+    var delRow = { selector: delSel, type: 'remove' };
+    appendSessionStructuralChainRow(activeVarId, delRow);
+    logStructuralStateChange(delRow, 'Deleted via toolbar', 'Element removed', null);
+  }
   saveCurrentVariationHtml();
   recomputeEditorDirty();
   deselectElement();
@@ -4653,19 +5183,25 @@ function recordReorderAfterDrag(movedEl) {
   var prev = movedEl.previousElementSibling;
   var next = movedEl.nextElementSibling;
   if (prev) {
-    appendSessionStructuralChainRow(activeVarId, {
+    var reorderAfterRow = {
       selector: buildSelector(movedEl),
       type: 'reorder',
       targetSelector: buildSelector(prev),
       action: 'after',
-    });
+    };
+    appendSessionStructuralChainRow(activeVarId, reorderAfterRow);
+    markStructuralRowApplied(reorderAfterRow);
+    logStructuralStateChange(reorderAfterRow, 'Reordered via drag', 'Moved after sibling', movedEl);
   } else if (next) {
-    appendSessionStructuralChainRow(activeVarId, {
+    var reorderBeforeRow = {
       selector: buildSelector(movedEl),
       type: 'reorder',
       targetSelector: buildSelector(next),
       action: 'before',
-    });
+    };
+    appendSessionStructuralChainRow(activeVarId, reorderBeforeRow);
+    markStructuralRowApplied(reorderBeforeRow);
+    logStructuralStateChange(reorderBeforeRow, 'Reordered via drag', 'Moved before sibling', movedEl);
   }
 }
 
@@ -4946,12 +5482,15 @@ function insertHtml(html) {
     }
     if (firstEl) selectElement(firstEl);
     if (activeVarId) {
-      appendSessionStructuralChainRow(activeVarId, {
+      var insertRow = {
         selector: anchorSel,
         type: 'insert',
         action: 'after',
         html: htmlStr,
-      });
+      };
+      appendSessionStructuralChainRow(activeVarId, insertRow);
+      markStructuralRowApplied(insertRow);
+      logStructuralStateChange(insertRow, 'Added component/section', 'Inserted new element', firstEl || selectedEl);
     }
     saveCurrentVariationHtml();
     recomputeEditorDirty();
@@ -5041,6 +5580,14 @@ document.getElementById('comp-search').addEventListener('input', function() {
     renderSidebar(this.value);
   }
 });
+var btnAddElement = document.getElementById('btn-add-element');
+if (btnAddElement) {
+  btnAddElement.addEventListener('click', function(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    toggleSectionComponentsPanel();
+  });
+}
 
 // \u2500\u2500 Save / Close \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 document.getElementById('btn-save').addEventListener('click', handleSave);
@@ -5081,11 +5628,21 @@ function handleSave() {
 }
 
 function handleClose() {
+  clearPersistedActiveVariationForData(experimentData);
   clearVisualEditorLocalStorage();
   // Unsaved-changes UX lives in the parent (PlatformVisualEditorV2); avoid double confirm here.
   send('close-editor', {});
 }
 
+// Defensive cleanup: if parent closes/unmounts the editor shell without
+// invoking handleClose(), clear persisted VVE keys on unload as well.
+window.addEventListener('pagehide', function() {
+  clearVisualEditorLocalStorage();
+});
+window.addEventListener('beforeunload', function() {
+  clearVisualEditorLocalStorage();
+});
+
 // \u2500\u2500 Keyboard shortcuts \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 function isNativeEditableTarget(target) {
   if (!target || target.nodeType !== 1) return false;
@@ -5107,10 +5664,7 @@ document.addEventListener('keydown', function(e) {
     e.preventDefault();
     runEditorUndo();
   }
-  if (meta && e.shiftKey && k === 'z') {
-    e.preventDefault();
-    runEditorRedo();
-  }
+  // Redo is intentionally hidden/disabled in this editor flow.
   if (meta && e.key === 's') { e.preventDefault(); handleSave(); }
   if (e.key === 'Escape') {
     var openTips = document.querySelectorAll('.ve-pl-tip.is-tip-open');
@@ -5130,11 +5684,17 @@ document.addEventListener('keydown', function(e) {
   }
 });
 function runEditorUndo() {
-  var target = getLatestHistoryUndoTarget();
-  if (target) {
-    removeHistoryItem(target.source, target.idx);
+  // Undo only unsaved in-session edits; do not remove persisted history rows.
+  if (!isDirty) return;
+
+  // 1) Prefer live unsaved change stack (stateChanges shown in History tab).
+  var liveTarget = getLatestLiveUndoTarget();
+  if (liveTarget) {
+    removeHistoryItem('live', liveTarget.idx);
     return;
   }
+
+  // 2) Fallback to Vvveb internal undo stack (e.g. structural drag/drop ops).
   if (!(typeof Vvveb !== 'undefined' && Vvveb.Undo)) return;
   Vvveb.Undo.undo();
   saveCurrentVariationHtml();
@@ -5157,11 +5717,10 @@ document.getElementById('btn-undo').addEventListener('click', function(e) {
   e.stopPropagation();
   runEditorUndo();
 });
-document.getElementById('btn-redo').addEventListener('click', function(e) {
-  e.preventDefault();
-  e.stopPropagation();
-  runEditorRedo();
-});
+var btnRedo = document.getElementById('btn-redo');
+if (btnRedo) {
+  btnRedo.style.display = 'none';
+}
 
 function layoutLoadingTooltip(host) {
   var tip = host.querySelector('.ve-pl-tooltip');
@@ -5237,6 +5796,7 @@ function registerCROSections() {
 
 window.addEventListener('load', function() {
   registerCROSections();
+  bindViewportControls();
   switchSectionComponentsTab(currentSectionComponentsTab);
   renderElementsTree(document.getElementById('comp-search').value);
   vvvebReady = true;
@@ -5944,8 +6504,32 @@ ${runtimePreflightScript}
 var TARGET_ORIGIN=${JSON.stringify(origin)};
 var TARGET_PAGE_URL=${JSON.stringify(targetUrl)};
 var EMPTY_JSON_DATA="data:application/json;charset=utf-8,%7B%7D";
-function isSkippable(raw){if(!raw||typeof raw!=="string")return true;return raw.startsWith("data:")||raw.startsWith("blob:")||raw.startsWith("javascript:")||raw.startsWith("#")||raw.startsWith("http")||raw.startsWith("//");}
-function toAbsoluteOriginUrl(raw){if(isSkippable(raw))return raw;try{var base=raw.startsWith("/")?TARGET_ORIGIN:TARGET_PAGE_URL;var abs=new URL(raw,base);if(abs.origin!==TARGET_ORIGIN)return raw;return abs.toString();}catch(_){return raw;}}
+var _proxyCtx=(function(){try{return new URL(window.location.href);}catch(_){return null;}})();
+var PROXY_ROOT="/api/conversion-proxy";
+var PROXY_PASSWORD=_proxyCtx?_proxyCtx.searchParams.get("password")||"":"";
+var PROXY_BASE_URL=_proxyCtx?_proxyCtx.searchParams.get("conversionProxyBaseUrl")||"":"";
+var PROXY_TRACKING_MARKERS=_proxyCtx?_proxyCtx.searchParams.get("trackingMarkers")||"":"";
+var PROXY_STRICT_FREEZE=_proxyCtx?_proxyCtx.searchParams.get("strictObserverFreeze")||"":"";
+var PROXY_UPSTREAM_MODE=_proxyCtx?_proxyCtx.searchParams.get("proxy")||"":"";
+function isSkippable(raw){if(!raw||typeof raw!=="string")return true;return raw.startsWith("data:")||raw.startsWith("blob:")||raw.startsWith("javascript:")||raw.startsWith("#");}
+function toProxyNetworkUrl(raw){
+  if(isSkippable(raw))return raw;
+  try{
+    var base=raw.startsWith("/")?TARGET_ORIGIN:TARGET_PAGE_URL;
+    var abs=new URL(raw,base);
+    if(abs.origin!==TARGET_ORIGIN)return raw;
+    var prox=new URL(PROXY_ROOT,window.location.origin);
+    prox.searchParams.set("password",PROXY_PASSWORD||"");
+    prox.searchParams.set("url",abs.toString());
+    if(PROXY_BASE_URL)prox.searchParams.set("conversionProxyBaseUrl",PROXY_BASE_URL);
+    if(PROXY_TRACKING_MARKERS)prox.searchParams.set("trackingMarkers",PROXY_TRACKING_MARKERS);
+    if(PROXY_STRICT_FREEZE)prox.searchParams.set("strictObserverFreeze",PROXY_STRICT_FREEZE);
+    if(PROXY_UPSTREAM_MODE)prox.searchParams.set("proxy",PROXY_UPSTREAM_MODE);
+    return prox.toString();
+  }catch(_){
+    return raw;
+  }
+}
 function resolveUrl(s){try{return new URL(s,window.location.href);}catch(_){return null;}}
 function isNestedMalformedProxy(u){if(!u)return false;var p=u.pathname||"";if(p==="/api/conversion-proxy"||p.indexOf("/api/conversion-proxy/")===0)return false;return p.indexOf("api/conversion-proxy")!==-1;}
 function skipNestedProxyNetwork(s){var u=typeof s==="string"?resolveUrl(s):null;return u&&isNestedMalformedProxy(u);}
@@ -5958,9 +6542,9 @@ if(window.fetch){
       var rawUrl=typeof input==="string"?input:(input&&input.url?String(input.url):"");
       if(rawUrl&&skipNestedProxyNetwork(rawUrl))return emptyJsonFetchResponse();
       if(typeof input==="string"){
-        input=toAbsoluteOriginUrl(input);
+        input=toProxyNetworkUrl(input);
       }else if(input&&input.url){
-        var next=toAbsoluteOriginUrl(input.url);
+        var next=toProxyNetworkUrl(input.url);
         if(next!==input.url){input=new Request(next,input);}
       }
       afterUrl=typeof input==="string"?input:(input&&input.url?String(input.url):"");
@@ -5970,8 +6554,22 @@ if(window.fetch){
       try{
         var u=afterUrl?resolveUrl(afterUrl):null;
         var sameOrigin=!!(u&&u.origin===TARGET_ORIGIN);
-        var likelyThirdPartyBg=!sameOrigin||!!(u&&/(^|\\/)apps?(\\/|$)|(^|\\/)a(\\/|$)/.test(u.pathname||""));
-        if(window.__CONVERSION_EDITOR_ACTIVE__&&likelyThirdPartyBg){
+        var reqMethod=(init&&init.method?String(init.method):(input&&input.method?String(input.method):"GET")).toUpperCase();
+        var isSafeMethod=reqMethod==="GET"||reqMethod==="HEAD";
+        var path=(u&&u.pathname?u.pathname:"").toLowerCase();
+        var qs=(u&&u.search?u.search:"").toLowerCase();
+        var likelyBackgroundEndpoint=!!(u&&(
+          /(^|\\/)apps?(\\/|$)|(^|\\/)a(\\/|$)/.test(path)||
+          path==="/cart"||
+          path==="/cart.js"||
+          path.indexOf("/cart/")===0||
+          path.indexOf("/recommendations/")===0||
+          path.indexOf("/search/suggest")===0||
+          qs.indexOf("sections=")!==-1||
+          qs.indexOf("section_id=")!==-1
+        ));
+        var likelyThirdPartyBg=!sameOrigin||likelyBackgroundEndpoint;
+        if(window.__CONVERSION_EDITOR_ACTIVE__&&isSafeMethod&&likelyThirdPartyBg){
           console.warn("[conversion-proxy] suppressed fetch failure",{url:afterUrl,error:err&&err.message?err.message:String(err)});
           return new Response("{}",{status:200,headers:{"Content-Type":"application/json; charset=utf-8"}});
         }
@@ -5980,7 +6578,7 @@ 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.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]=toProxyNetworkUrl(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;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);