@accelerated-agency/visual-editor 0.5.7 → 0.5.8

package/dist/vite.cjs

@@ -415,7 +415,7 @@ html,body{height:100%;overflow:hidden;font-family:var(--font-sans);font-size:13p
   overflow:visible
 }
 /* Toolbar layout sections */
-.tb-left{display:flex;align-items:center;gap:0;flex-shrink:0}
+.tb-left{display:flex;align-items:center;gap:0;flex:1;min-width:0;max-width:min(560px,46vw);margin-right:8px}
 .tb-center{display:flex;align-items:center;gap:4px;flex:1;justify-content:center}
 .tb-right{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-left:auto}
 /* Logo */
@@ -437,7 +437,7 @@ html,body{height:100%;overflow:hidden;font-family:var(--font-sans);font-size:13p
 /* 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-3btns{display:flex;align-items:center;gap:2px;padding:8px 4px;background:#F0F0F0;border-radius:7px; height: 30px;width: auto;}
 .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;
@@ -541,7 +541,7 @@ box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.20), 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1p
 }
 .tb-dev-menu .vp-preset-btn:hover,.tb-dev-menu .vp-preset-btn.active{background:#f4f4f5}
 /* 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{width:28px;height:25px;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)}
 .tb-dk-btn.active{background:#FFFFFF}
 /* Dark separator */
@@ -708,6 +708,15 @@ box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.20), 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1p
   background: var(--bg-primary-default, #262626)!important;
   color: var(--text-primary-default, #FFF)!important;
 }
+#dom-tree-root .dt-row[draggable="true"]{cursor:grab}
+#dom-tree-root .dt-row.dt-dragging{opacity:.55;cursor:grabbing}
+#dom-tree-root .dt-row.dt-drop-before::after,
+#dom-tree-root .dt-row.dt-drop-after::after{
+  content:'';position:absolute;left:8px;right:8px;height:2px;background:#6366f1;pointer-events:none;z-index:1
+}
+#dom-tree-root .dt-row.dt-drop-before::after{top:0}
+#dom-tree-root .dt-row.dt-drop-after::after{bottom:0}
+#dom-tree-root .dt-row.dt-drop-invalid{cursor:not-allowed;opacity:.45}
 .dt-chev{
   width:16px;height:16px;flex-shrink:0;border:none;background:transparent;
   cursor:pointer;color:var(--text-3);display:flex;align-items:center;justify-content:center;
@@ -756,6 +765,21 @@ flex: 1;
 }
 #no-url .nu-icon{font-size:48px;opacity:.3}
 
+/* \u2500\u2500 Iframe load error overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+#iframe-load-error{
+  display:none;position:absolute;inset:0;z-index:50;flex-direction:column;
+  align-items:center;justify-content:center;gap:12px;text-align:center;padding:40px;
+  background:rgba(232,236,240,.94);backdrop-filter:blur(4px)
+}
+#iframe-load-error .nu-icon{font-size:48px;color:#94a3b8}
+#iframe-load-error .ile-title{font-weight:600;font-size:15px;color:var(--text-2)}
+#iframe-load-error .ile-msg{font-size:12px;color:var(--text-3);max-width:360px;line-height:1.5;word-break:break-word}
+#iframe-load-error .ile-reload-btn{
+  margin-top:4px;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:6px;
+  border:1px solid var(--border);background:#fff;color:var(--text);font-size:13px;font-weight:500;cursor:pointer
+}
+#iframe-load-error .ile-reload-btn:hover{background:var(--bg-hover);border-color:#cbd5e1}
+
 /* \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%;
@@ -810,12 +834,32 @@ flex: 1;
 
 /* \u2500\u2500 URL bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 #url-bar{
-  flex:1;max-width:280px;background:var(--bg-sub);border:1px solid var(--border);border-radius:20px;
-  color:var(--text-2);font-size:11px;padding:4px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
+      flex: 1;
+    max-width: 100%;
+    width: 100%;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    color: var(--text-2);
+    font-size: 12px;
+    padding: 8px 8px;
+    outline: none;
+    font-family: inherit;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
+#url-bar::placeholder{color:var(--text-3)}
+#url-bar:focus{border-color:#94a3b8;color:var(--text);background:#fff}
+#url-bar:disabled{opacity:.55;cursor:not-allowed}
 
 /* \u2500\u2500 Left panel sections \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-.lp-sec{border-bottom:1px solid var(--border);flex-shrink:0;padding: 24px 16px;}
+.lp-sec{    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+    padding: 18px 16px;}
+.lp-sec-hd-url{
+       border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+    padding: 5px 16px;
+    }
 .lp-sec-no-border{border-bottom:none!important}
 .lp-sec-hd{
   margin-bottom: 12px;
@@ -1435,23 +1479,102 @@ select.pr-inp{cursor:pointer;background:#fff}
   max-width:420px;
   line-height:1.5;
 }
-@media (max-width:1100px){
-  #app,
-  #custom-css-modal{
-    display:none!important;
-  }
-  #ve-min-screen-notice{
-    display:flex;
-  }
+html.ve-editor-gated #app,
+html.ve-editor-gated #custom-css-modal{
+  display:none!important;
+}
+html.ve-editor-gated #ve-min-screen-notice{
+  display:flex;
 }
 </style>
 </head>
 <body class="mode-editor">
 <div id="ve-min-screen-notice" aria-live="polite">
   <div class="ve-min-screen-icon"><i class="bi bi-display"></i></div>
-  <div class="ve-min-screen-title">Please switch to greater or bigger screen to use Visual Editor</div>
+  <div class="ve-min-screen-title">Please switch to a larger screen to use the Visual Editor</div>
   <div class="ve-min-screen-desc">The Visual Editor requires a screen width of at least 1100px.</div>
 </div>
+<script>(function(){
+var MIN_EDITOR_WIDTH=1100;
+var ZOOM_IN_THRESHOLD=1.05;
+var ZOOM_MATCH_TOLERANCE=0.06;
+var STANDARD_BROWSER_ZOOMS=[1.25,1.33,1.5,1.67,1.75,2,2.5,3,4];
+function markUserZoomInteraction(){
+  try{sessionStorage.setItem('ve-user-zoomed','1');}catch(_){}
+}
+function hasUserZoomInteraction(){
+  try{return sessionStorage.getItem('ve-user-zoomed')==='1';}catch(_){return false;}
+}
+function matchesStandardBrowserZoom(iw,screenW){
+  if(!iw||!screenW)return false;
+  for(var i=0;i<STANDARD_BROWSER_ZOOMS.length;i++){
+    var z=STANDARD_BROWSER_ZOOMS[i];
+    var impliedFull=iw*z;
+    if(Math.abs(impliedFull-screenW)/screenW<=ZOOM_MATCH_TOLERANCE)return true;
+  }
+  return false;
+}
+function isBrowserZoomedIn(iw,screenW){
+  try{
+    if(window.visualViewport&&window.visualViewport.scale>ZOOM_IN_THRESHOLD)return true;
+  }catch(_){}
+  if(!screenW||screenW<MIN_EDITOR_WIDTH||iw>=MIN_EDITOR_WIDTH)return false;
+  if(hasUserZoomInteraction())return true;
+  return matchesStandardBrowserZoom(iw,screenW);
+}
+function updateMinScreenGate(){
+  var iw=window.innerWidth||0;
+  var gated=iw<MIN_EDITOR_WIDTH;
+  document.documentElement.classList.toggle('ve-editor-gated',gated);
+  if(!gated){
+    try{sessionStorage.removeItem('ve-user-zoomed');}catch(_){}
+    return;
+  }
+  var notice=document.getElementById('ve-min-screen-notice');
+  if(!notice)return;
+  var titleEl=notice.querySelector('.ve-min-screen-title');
+  var descEl=notice.querySelector('.ve-min-screen-desc');
+  var iconEl=notice.querySelector('.ve-min-screen-icon i');
+  if(!titleEl||!descEl||!iconEl)return;
+  var screenW=(window.screen&&(window.screen.availWidth||window.screen.width))||0;
+  var smallScreen=screenW>0&&screenW<MIN_EDITOR_WIDTH;
+  var zoomedIn=isBrowserZoomedIn(iw,screenW);
+  if(smallScreen){
+    iconEl.className='bi bi-display';
+    titleEl.textContent='Please switch to a larger screen to use the Visual Editor';
+    descEl.textContent='The Visual Editor requires a screen width of at least '+MIN_EDITOR_WIDTH+'px.';
+  }else if(zoomedIn){
+    iconEl.className='bi bi-zoom-out';
+    titleEl.textContent='You have zoomed in too much';
+    descEl.textContent='Zoom out to use the Visual Editor \u2014 press Cmd + - on Mac or Ctrl + - on Windows.';
+  }else{
+    iconEl.className='bi bi-arrows-angle-expand';
+    titleEl.textContent='Widen your browser window';
+    descEl.textContent='The Visual Editor needs at least '+MIN_EDITOR_WIDTH+'px of width. Maximize this window or resize it wider.';
+  }
+}
+function onZoomShortcut(e){
+  if(!(e.ctrlKey||e.metaKey))return;
+  var k=e.key||'';
+  if(k==='+'||k==='-'||k==='='||k==='0'||k==='_'||e.code==='Equal'||e.code==='Minus'||e.code==='NumpadAdd'||e.code==='NumpadSubtract'){
+    markUserZoomInteraction();
+    setTimeout(updateMinScreenGate,0);
+  }
+}
+function onZoomWheel(e){
+  if(!e.ctrlKey)return;
+  markUserZoomInteraction();
+  setTimeout(updateMinScreenGate,0);
+}
+document.addEventListener('keydown',onZoomShortcut,true);
+window.addEventListener('wheel',onZoomWheel,{passive:true,capture:true});
+updateMinScreenGate();
+window.addEventListener('resize',updateMinScreenGate);
+if(window.visualViewport){
+  window.visualViewport.addEventListener('resize',updateMinScreenGate);
+  window.visualViewport.addEventListener('scroll',updateMinScreenGate);
+}
+})();</script>
 <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">
@@ -1548,16 +1671,13 @@ select.pr-inp{cursor:pointer;background:#fff}
       <div class="tb-dev-3btns">
       <button class="tb-dk-btn active" id="btn-mode-editor" onclick="setMode('editor')" title="Edit mode \u2014 click elements to edit"><i class="bi bi-pencil"></i></button>
       <button class="tb-dk-btn" id="btn-mode-nav" onclick="setMode('navigate')" title="Navigate mode \u2014 interact with page normally"><i class="bi bi-cursor"></i></button>
-      <button class="tb-dk-btn" title="Comments"><i class="bi bi-chat-dots"></i></button>
+      <button class="tb-dk-btn" style="display:none" title="Comments"><i class="bi bi-chat-dots"></i></button>
       </div>
       <button class="tb-sim-btn" id="btn-simulate" onclick="simulateExperiment()">See Preview</button>
       
       <!-- btn-close: kept for JS event listener -->
       <button class="tb-fin-btn" id="btn-close">Exit Editor</button>
     </div>
-
-    <!-- url-bar: hidden, kept for JS compatibility -->
-    <div id="url-bar" style="display:none" title="">No page loaded</div>
   </div>
 
   <!-- \u2500\u2500 Main \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->
@@ -1565,7 +1685,10 @@ select.pr-inp{cursor:pointer;background:#fff}
 
     <!-- Left panel -->
     <div id="left-panel">
-
+      <div class="lp-sec-hd-url">
+      <!-- Page URL -->
+      <input type="text" id="url-bar" placeholder="Enter URL and press Enter" spellcheck="false" autocomplete="off" aria-label="Page URL" title="" />
+      </div>
       <!-- Variations -->
       <div class="lp-sec">
         <div class="lp-sec-hd">
@@ -1608,7 +1731,7 @@ select.pr-inp{cursor:pointer;background:#fff}
       <!-- Tabs (hidden, kept for JS) -->
       <div class="lp-tabs-container">
       <div class="lp-tabs">
-        <div class="lp-tab active" onclick="switchLeftTab('elements')">Elements</div>
+        <div class="lp-tab active" onclick="switchLeftTab('elements')">Added Nodes</div>
         <div class="lp-tab" onclick="switchLeftTab('dom-tree')">DOM Tree</div>
       </div>
       <button class="lp-add-btn" id="btn-add-element" title="Add element">+ Add</button>
@@ -1660,6 +1783,16 @@ select.pr-inp{cursor:pointer;background:#fff}
         <div style="font-size:12px;color:var(--text-3)">Waiting for experiment data&hellip;</div>
       </div>
 
+      <!-- Load error overlay (bad URL, fetch failure, refused to connect) -->
+      <div id="iframe-load-error" aria-live="polite">
+        <div class="nu-icon"><i class="bi bi-wifi-off"></i></div>
+        <div class="ile-title">Page failed to load</div>
+        <div class="ile-msg" id="iframe-load-error-msg">Check the URL and try again.</div>
+        <button type="button" class="ile-reload-btn" id="iframe-load-error-reload">
+          <i class="bi bi-arrow-clockwise"></i> Reload page
+        </button>
+      </div>
+
       <!-- Device frame containing the editing iframe -->
       <div id="device-frame" class="desktop">
         <iframe id="iframeId" name="iframeId" allowfullscreen></iframe>
@@ -1909,12 +2042,17 @@ function renderCroSectionThumb(sec) {
 }
 
 var BASE_COMPONENTS = [
-  { name:'Heading',    icon:'bi-type-h1',              defaultAccSection:'content', html:'<h2 style="margin:0 0 12px;font-size:28px;font-weight:700;line-height:1.2;color:#0f172a">Your Heading</h2>' },
+  { name:'Heading', icon:'bi-type-h1',              defaultAccSection:'content', html:'<h1 style="margin:0 0 12px;font-size:28px;font-weight:700;line-height:1.2;color:#0f172a">Your Heading</h1>' },
+  { name:'Heading', icon:'bi-type-h2',              defaultAccSection:'content', html:'<h2 style="margin:0 0 12px;font-size:24px;font-weight:700;line-height:1.25;color:#0f172a">Your Heading</h2>' },
+  { name:'Heading', icon:'bi-type-h3',              defaultAccSection:'content', html:'<h3 style="margin:0 0 12px;font-size:20px;font-weight:700;line-height:1.3;color:#0f172a">Your Heading</h3>' },
+  { name:'Heading', icon:'bi-type-h4',              defaultAccSection:'content', html:'<h4 style="margin:0 0 12px;font-size:18px;font-weight:600;line-height:1.35;color:#0f172a">Your Heading</h4>' },
+  { name:'Heading', icon:'bi-type-h5',              defaultAccSection:'content', html:'<h5 style="margin:0 0 12px;font-size:16px;font-weight:600;line-height:1.4;color:#0f172a">Your Heading</h5>' },
+  { name:'Heading', icon:'bi-type-h6',              defaultAccSection:'content', html:'<h6 style="margin:0 0 12px;font-size:14px;font-weight:600;line-height:1.45;color:#0f172a">Your Heading</h6>' },
   { name:'Paragraph',  icon:'bi-paragraph',             defaultAccSection:'content', html:'<p style="margin:0 0 12px;font-size:16px;line-height:1.6;color:#334155">Your text here. Click to edit.</p>' },
   { name:'Image',      icon:'bi-image',                 defaultAccSection:'image', html:'<img src="https://placehold.co/600x300/1a1a2e/a78bfa?text=Image" alt="Image" style="display:block;max-width:100%;height:auto;border-radius:8px">' },
   { name:'Button',     icon:'bi-hand-index',            defaultAccSection:'content', html:'<button type="button" style="display:inline-block;padding:10px 20px;font-size:14px;font-weight:600;line-height:1.2;color:#fff;background:#2563eb;border:none;border-radius:6px;cursor:pointer">Click me</button>' },
   { name:'Link',       icon:'bi-link-45deg',            defaultAccSection:'content', html:'<a href="#" style="font-size:16px;font-weight:500;color:#2563eb;text-decoration:underline">Link text</a>' },
-  { name:'Divider',    icon:'bi-dash-lg',               defaultAccSection:'background', html:'<hr style="margin:16px 0;border:none;border-top:1px solid #e2e8f0">' },
+  { name:'Divider',    icon:'bi-dash-lg',               defaultAccSection:'border', html:'<hr style="margin:16px 0;border:none;border-top:1px solid #e2e8f0">' },
   { name:'List',       icon:'bi-list-ul',               defaultAccSection:'content', html:'<ul style="margin:0 0 12px;padding-left:20px;font-size:16px;line-height:1.6;color:#334155"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>' },
   { name:'Video',      icon:'bi-play-circle',           defaultAccSection:'video', html:'<video controls style="display:block;width:100%;max-width:100%;border-radius:8px;background:#000"><source src="" type="video/mp4"></video>' },
   { name:'Youtube Video', icon:'bi-youtube',            defaultAccSection:'youtube', html:'<iframe data-youtube-id="" src="about:blank" title="YouTube video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="display:block;width:100%;max-width:100%;aspect-ratio:16/9;border:none;border-radius:8px;background:#000"></iframe>' },
@@ -2161,6 +2299,8 @@ var currentSectionComponentsTab = 'components';
 var dragHandleActive = false;
 var domTreeCollapsed = {};
 var domTreeRefreshTimer = null;
+var domTreeDragState = null;
+var iframeLoadErrorCheckTimer = null;
 var iframeSyncRetryTimer = null;
 var iframeSyncAttempts = 0;
 var selectionScrollWin = null;
@@ -2646,6 +2786,103 @@ function bindViewportControls() {
   applyViewportFrame();
 }
 
+function setUrlBarValue(pageUrl) {
+  var urlBar = document.getElementById('url-bar');
+  if (!urlBar) return;
+  var val = pageUrl ? String(pageUrl) : '';
+  urlBar.value = val;
+  urlBar.title = val || 'Enter a page URL and press Enter';
+}
+
+function normalizeUserPageUrl(raw) {
+  var s = String(raw || '').trim();
+  if (!s) return '';
+  if (!/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(s)) s = 'https://' + s;
+  try {
+    return new URL(s).toString();
+  } catch(_) {
+    return '';
+  }
+}
+
+function buildProxyUrlForPageUrl(pageUrl, data) {
+  data = data || experimentData || {};
+  var extraTrackingMarkers = Array.isArray(data.trackingMarkers)
+    ? data.trackingMarkers.filter(function(m) { return typeof m === 'string' && m.trim().length > 0; })
+    : [];
+  var conversionProxyBaseUrl = (typeof data.conversionProxyBaseUrl === 'string'
+    ? data.conversionProxyBaseUrl
+    : '').trim().replace(/\\/+$/, '');
+  var proxyPath = '/api/conversion-proxy';
+  var shellOrigin = '';
+  try { shellOrigin = window.location.origin || ''; } catch(_) {}
+  var onWorkerOrigin = !!(conversionProxyBaseUrl && shellOrigin === conversionProxyBaseUrl);
+  var proxyRoot = proxyPath;
+  var trackingMarkersParam = extraTrackingMarkers.length
+    ? '&trackingMarkers=' + encodeURIComponent(JSON.stringify(extraTrackingMarkers))
+    : '';
+  var conversionProxyBaseUrlParam = (!onWorkerOrigin && conversionProxyBaseUrl)
+    ? '&conversionProxyBaseUrl=' + encodeURIComponent(conversionProxyBaseUrl)
+    : '';
+  return proxyRoot + '?password=' + encodeURIComponent(data.editorPassword || '') +
+    '&url=' + encodeURIComponent(pageUrl) +
+    '&strictObserverFreeze=' + encodeURIComponent(data && data.strictObserverFreeze ? '1' : '0') +
+    conversionProxyBaseUrlParam +
+    trackingMarkersParam;
+}
+
+function navigateToUserPageUrl(rawUrl) {
+  var pageUrl = normalizeUserPageUrl(rawUrl);
+  if (!pageUrl) {
+    showEditorNotification('Enter a valid URL.', 'error', 2600);
+    setUrlBarValue(experimentData && experimentData.pageUrl);
+    return false;
+  }
+  var prevPageUrl = experimentData && experimentData.pageUrl ? String(experimentData.pageUrl) : '';
+  if (prevPageUrl === pageUrl && lastLoadedProxyUrl) {
+    setUrlBarValue(pageUrl);
+    return true;
+  }
+
+  commitStateChangesForActiveVariation();
+  clearPendingGranularChangesets();
+  varHtmlCache = {};
+  sessionStructuralChainRowsByVarId = {};
+  appliedChangesetSnapshots = {};
+  appliedStructuralChangesetKeys = {};
+  deselectElement();
+
+  experimentData = experimentData
+    ? Object.assign({}, experimentData, { pageUrl: pageUrl })
+    : { pageUrl: pageUrl };
+
+  setUrlBarValue(pageUrl);
+  showNoUrl(false);
+  loadPage(buildProxyUrlForPageUrl(pageUrl, experimentData));
+  return true;
+}
+
+function bindUrlBar() {
+  var urlBar = document.getElementById('url-bar');
+  if (!urlBar || urlBar._urlBarBound) return;
+  urlBar._urlBarBound = true;
+  urlBar.addEventListener('keydown', function(e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      navigateToUserPageUrl(urlBar.value);
+      urlBar.blur();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      setUrlBarValue(experimentData && experimentData.pageUrl);
+      urlBar.blur();
+    }
+  });
+  urlBar.addEventListener('blur', function() {
+    var canonical = experimentData && experimentData.pageUrl ? String(experimentData.pageUrl) : '';
+    if (canonical && urlBar.value.trim() !== canonical) urlBar.value = canonical;
+  });
+}
+
 // \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;
@@ -3880,34 +4117,11 @@ function handleLoadExperiment(data) {
   var pageUrl = data.pageUrl || '';
   if (!pageUrl) {
     showNoUrl(true);
+    setUrlBarValue('');
     lastLoadedProxyUrl = '';
     return;
   }
-  var extraTrackingMarkers = Array.isArray(data && data.trackingMarkers)
-    ? data.trackingMarkers.filter(function(m){return typeof m === 'string' && m.trim().length > 0;})
-    : [];
-  var conversionProxyBaseUrl = (typeof (data && data.conversionProxyBaseUrl) === 'string'
-    ? data.conversionProxyBaseUrl
-    : '').trim().replace(/\\/+$/, '');
-  var proxyPath = '/api/conversion-proxy';
-  // Page iframe must stay same-origin as /vvveb-editor for DOM selection/editing.
-  // When the shell is served from the worker (conversionProxyBaseUrl origin),
-  // use same-origin relative proxy only. Otherwise delegate upstream via query param.
-  var shellOrigin = '';
-  try { shellOrigin = window.location.origin || ''; } catch(_) {}
-  var onWorkerOrigin = !!(conversionProxyBaseUrl && shellOrigin === conversionProxyBaseUrl);
-  var proxyRoot = proxyPath;
-  var trackingMarkersParam = extraTrackingMarkers.length
-    ? '&trackingMarkers=' + encodeURIComponent(JSON.stringify(extraTrackingMarkers))
-    : '';
-  var conversionProxyBaseUrlParam = (!onWorkerOrigin && conversionProxyBaseUrl)
-    ? '&conversionProxyBaseUrl=' + encodeURIComponent(conversionProxyBaseUrl)
-    : '';
-  var proxyUrl = proxyRoot + '?password=' + encodeURIComponent(data.editorPassword || '') +
-                 '&url=' + encodeURIComponent(pageUrl) +
-                 '&strictObserverFreeze=' + encodeURIComponent(data && data.strictObserverFreeze ? '1' : '0') +
-                 conversionProxyBaseUrlParam +
-                 trackingMarkersParam;
+  var proxyUrl = buildProxyUrlForPageUrl(pageUrl, data);
 
   // Parent often re-posts load-experiment when React re-renders (new object identity) or
   // after mutations-changed. Reloading the iframe again wipes variant changesets mid-session.
@@ -3925,9 +4139,7 @@ function handleLoadExperiment(data) {
     loadStateChangesForActiveVariation();
     writePersistedActiveVariationId(activeVarId);
     renderVariationTabs();
-    var urlBarSkip = document.getElementById('url-bar');
-    urlBarSkip.textContent = pageUrl;
-    urlBarSkip.title = pageUrl;
+    setUrlBarValue(pageUrl);
     try {
       applyActiveVariationHtml();
       syncIframeInteractions('load-experiment-skip-url');
@@ -3958,9 +4170,7 @@ function handleLoadExperiment(data) {
   writePersistedActiveVariationId(activeVarId);
   renderVariationTabs();
 
-  var urlBar = document.getElementById('url-bar');
-  urlBar.textContent = pageUrl;
-  urlBar.title = pageUrl;
+  setUrlBarValue(pageUrl);
   if (currentMainTab === 'history') renderHistoryTab();
   captureBaselineFromVariations(variations);
   recomputeEditorDirty();
@@ -3969,12 +4179,128 @@ function handleLoadExperiment(data) {
 
 function showNoUrl(show) {
   document.getElementById('no-url').style.display = show ? 'flex' : 'none';
+  var urlBar = document.getElementById('url-bar');
+  if (urlBar) urlBar.disabled = !!show;
   if (show) {
+    hideIframeLoadError();
     detachIframeLoadingListeners();
     setIframePageLoadingUi(false);
   }
 }
 
+function hideIframeLoadError() {
+  if (iframeLoadErrorCheckTimer) {
+    clearTimeout(iframeLoadErrorCheckTimer);
+    iframeLoadErrorCheckTimer = null;
+  }
+  var el = document.getElementById('iframe-load-error');
+  if (el) el.style.display = 'none';
+}
+
+function showIframeLoadError(message) {
+  if (iframeLoadErrorCheckTimer) {
+    clearTimeout(iframeLoadErrorCheckTimer);
+    iframeLoadErrorCheckTimer = null;
+  }
+  var el = document.getElementById('iframe-load-error');
+  var msgEl = document.getElementById('iframe-load-error-msg');
+  if (msgEl) msgEl.textContent = message || 'Check the URL and try again.';
+  if (el) el.style.display = 'flex';
+  setIframePageLoadingUi(false);
+  detachIframeLoadingListeners();
+  deselectElement({ preserveMainTab: true });
+}
+
+function detectIframeLoadFailure(iframe, doc) {
+  if (!iframe || !iframe.src || iframe.src === 'about:blank') return null;
+
+  if (!doc) {
+    return 'Unable to load this page. The connection was refused or blocked.';
+  }
+
+  var docUrl = '';
+  try { docUrl = String(doc.URL || ''); } catch(_) {}
+  if (docUrl === 'about:blank') {
+    return 'This page could not be loaded. Check the URL and try again.';
+  }
+  if (
+    docUrl.indexOf('chrome-error://') === 0 ||
+    docUrl.indexOf('about:neterror') === 0
+  ) {
+    return 'This page could not be loaded. Check the URL and try again.';
+  }
+
+  var bodyText = '';
+  try {
+    bodyText = doc.body && doc.body.innerText ? String(doc.body.innerText).trim() : '';
+  } catch(_) {}
+
+  var bodyLower = bodyText.toLowerCase();
+  if (
+    bodyLower.indexOf('refused to connect') >= 0 ||
+    bodyLower.indexOf('err_connection_refused') >= 0 ||
+    bodyLower.indexOf('err_name_not_resolved') >= 0 ||
+    bodyLower.indexOf('err_ssl') >= 0 ||
+    bodyLower.indexOf('err_connection_timed_out') >= 0 ||
+    bodyLower.indexOf("this site can't be reached") >= 0 ||
+    bodyLower.indexOf('this site cant be reached') >= 0 ||
+    bodyLower.indexOf('unable to connect') >= 0 ||
+    bodyLower.indexOf("page isn't working") >= 0 ||
+    bodyLower.indexOf('404 not found') >= 0 && bodyLower.length < 280
+  ) {
+    return 'This page could not be loaded. Check the URL and try again.';
+  }
+
+  if (bodyText.charAt(0) === '{') {
+    try {
+      var parsed = JSON.parse(bodyText);
+      if (parsed && parsed.error) return String(parsed.error);
+    } catch(_) {}
+  }
+
+  try {
+    var ct = doc.contentType || '';
+    if (String(ct).indexOf('application/json') >= 0 && bodyText.charAt(0) === '{') {
+      var parsedCt = JSON.parse(bodyText);
+      if (parsedCt && parsedCt.error) return String(parsedCt.error);
+    }
+  } catch(_) {}
+
+  return null;
+}
+
+function scheduleIframeLoadErrorCheck(iframe) {
+  if (iframeLoadErrorCheckTimer) clearTimeout(iframeLoadErrorCheckTimer);
+  iframeLoadErrorCheckTimer = setTimeout(function() {
+    iframeLoadErrorCheckTimer = null;
+    if (!iframe || !iframe.src || iframe.src === 'about:blank') return;
+    var doc = null;
+    try { doc = iframe.contentDocument; } catch(_) {}
+    var failMsg = detectIframeLoadFailure(iframe, doc);
+    if (failMsg) showIframeLoadError(failMsg);
+  }, 450);
+}
+
+function reloadCurrentPage() {
+  hideIframeLoadError();
+  if (lastLoadedProxyUrl) {
+    loadPage(lastLoadedProxyUrl);
+    return;
+  }
+  var pageUrl = experimentData && experimentData.pageUrl;
+  if (pageUrl) navigateToUserPageUrl(pageUrl);
+}
+
+function bindIframeLoadErrorControls() {
+  var btn = document.getElementById('iframe-load-error-reload');
+  if (!btn || btn._iframeLoadErrorBound) return;
+  btn._iframeLoadErrorBound = true;
+  btn.addEventListener('click', function(e) {
+    e.preventDefault();
+    reloadCurrentPage();
+  });
+}
+
 function detachIframeLoadingListeners() {
   if (!iframeDocLoadingListeners) return;
   try {
@@ -4365,6 +4691,7 @@ function emitEditorUrlChanged(rawUrl) {
 }
 
 function loadPage(proxyUrl) {
+  hideIframeLoadError();
   showNoUrl(false);
   lastLoadedProxyUrl = proxyUrl;
   var navGen = nextIframeContentNavGen();
@@ -5529,6 +5856,149 @@ function setDomTreeStatus(mode) {
   }
 }
 
+function canDomTreeMoveElement(el) {
+  if (!el || el.nodeType !== 1 || !el.parentElement) return false;
+  var tag = (el.tagName || '').toLowerCase();
+  if (tag === 'html' || tag === 'body') return false;
+  try {
+    var doc = el.ownerDocument;
+    if (doc && (el === doc.documentElement || el === doc.body)) return false;
+  } catch(_) {}
+  return true;
+}
+
+function canDomTreeDropRelativeTo(dragEl, targetEl) {
+  if (!canDomTreeMoveElement(dragEl) || !targetEl || targetEl.nodeType !== 1) return false;
+  if (dragEl === targetEl) return false;
+  try {
+    if (dragEl.contains(targetEl) || targetEl.contains(dragEl)) return false;
+  } catch(_) {
+    return false;
+  }
+  var parent = targetEl.parentElement;
+  if (!parent) return false;
+  if (isDomTreeSkippableTagName(parent.tagName)) return false;
+  return true;
+}
+
+function moveDomTreeElementRelativeTo(dragEl, targetEl, insertBefore) {
+  if (!canDomTreeDropRelativeTo(dragEl, targetEl)) return false;
+  var parent = targetEl.parentElement;
+  if (!parent) return false;
+  var ref = insertBefore ? targetEl : targetEl.nextSibling;
+  if (dragEl.parentElement === parent && dragEl === ref) return false;
+  if (!insertBefore && dragEl.parentElement === parent && dragEl === targetEl.nextSibling) return false;
+  try {
+    parent.insertBefore(dragEl, ref);
+    return true;
+  } catch(_) {
+    return false;
+  }
+}
+
+function clearDomTreeDropIndicators() {
+  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.remove('dt-drop-before', 'dt-drop-after', 'dt-drop-invalid', 'dt-dragging');
+  }
+}
+
+function cleanupDomTreeDrag() {
+  clearDomTreeDropIndicators();
+  domTreeDragState = null;
+}
+
+function attachDomTreeDragHandlers() {
+  var root = document.getElementById('dom-tree-root');
+  if (!root || root._domTreeDragBound) return;
+  root._domTreeDragBound = true;
+
+  root.addEventListener('dragstart', function(e) {
+    if (currentMode !== 'editor') {
+      e.preventDefault();
+      return;
+    }
+    var row = e.target && e.target.closest ? e.target.closest('.dt-row') : null;
+    if (!row || !row._dtEl || (e.target.closest && e.target.closest('.dt-chev'))) {
+      e.preventDefault();
+      return;
+    }
+    if (!canDomTreeMoveElement(row._dtEl)) {
+      e.preventDefault();
+      return;
+    }
+    domTreeDragState = { el: row._dtEl, row: row };
+    row.classList.add('dt-dragging');
+    try {
+      e.dataTransfer.effectAllowed = 'move';
+      e.dataTransfer.setData('text/plain', 'dom-tree');
+    } catch(_) {}
+    suppressClickUntil = Date.now() + 300;
+  });
+
+  root.addEventListener('dragover', function(e) {
+    if (!domTreeDragState) return;
+    e.preventDefault();
+    clearDomTreeDropIndicators();
+    if (domTreeDragState.row) domTreeDragState.row.classList.add('dt-dragging');
+
+    var row = e.target && e.target.closest ? e.target.closest('.dt-row') : null;
+    if (!row || !row._dtEl) {
+      try { e.dataTransfer.dropEffect = 'none'; } catch(_) {}
+      return;
+    }
+
+    var dragEl = domTreeDragState.el;
+    var targetEl = row._dtEl;
+    if (!canDomTreeDropRelativeTo(dragEl, targetEl)) {
+      row.classList.add('dt-drop-invalid');
+      try { e.dataTransfer.dropEffect = 'none'; } catch(_) {}
+      return;
+    }
+
+    var rect = row.getBoundingClientRect();
+    var insertBefore = e.clientY < rect.top + rect.height / 2;
+    row.classList.add(insertBefore ? 'dt-drop-before' : 'dt-drop-after');
+    domTreeDragState.dropRow = row;
+    domTreeDragState.insertBefore = insertBefore;
+    try { e.dataTransfer.dropEffect = 'move'; } catch(_) {}
+  });
+
+  root.addEventListener('drop', function(e) {
+    e.preventDefault();
+    if (!domTreeDragState) return;
+
+    var dragEl = domTreeDragState.el;
+    var row = domTreeDragState.dropRow || (e.target && e.target.closest ? e.target.closest('.dt-row') : null);
+    var moved = false;
+    if (row && row._dtEl && canDomTreeDropRelativeTo(dragEl, row._dtEl)) {
+      var insertBefore = domTreeDragState.insertBefore;
+      if (insertBefore === undefined) {
+        var rect = row.getBoundingClientRect();
+        insertBefore = e.clientY < rect.top + rect.height / 2;
+      }
+      if (moveDomTreeElementRelativeTo(dragEl, row._dtEl, insertBefore)) {
+        moved = true;
+        if (activeVarId) recordReorderAfterDrag(dragEl);
+        saveCurrentVariationHtml();
+        recomputeEditorDirty();
+        selectElement(dragEl);
+        scrollIframeElementIntoView(dragEl);
+        updateSelectionToolbar();
+        scheduleDomTreeRefresh();
+      }
+    }
+    cleanupDomTreeDrag();
+    if (moved) suppressClickUntil = Date.now() + 300;
+  });
+
+  root.addEventListener('dragend', function() {
+    cleanupDomTreeDrag();
+  });
+}
+
 function domTreePathSegment(el) {
   var tag = el.tagName.toLowerCase();
   var idx = 1;
@@ -5907,6 +6377,7 @@ function renderDomTree(filterRaw) {
     row.onmouseenter = function() {
       setTreeHoverHighlight(el);
     };
+    if (canDomTreeMoveElement(el)) row.draggable = true;
     root.appendChild(row);
 
     if (!hasKids || collapsed) return;
@@ -5928,6 +6399,7 @@ function renderDomTree(filterRaw) {
   root.onmouseleave = function() {
     clearTreeHoverHighlight();
   };
+  attachDomTreeDragHandlers();
 }
 
 // \u2500\u2500 Utility helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
@@ -6356,7 +6828,7 @@ function renderVideoSection(el) {
   }
 
   html += pr('Src', '<input class="pr-inp" id="pp-video-src" type="url" value="'+esc(src)+'" placeholder="https://example.com/video.mp4">');
-  html += pr('Poster', '<input class="pr-inp" id="pp-video-poster" type="url" value="'+esc(el.getAttribute('poster')||'')+'" placeholder="https://\u2026">');
+  html += pr('Thumbnail', '<input class="pr-inp" id="pp-video-poster" type="url" value="'+esc(el.getAttribute('poster')||'')+'" placeholder="https://\u2026">');
 
   document.getElementById('acc-body-video').innerHTML = html;
 
@@ -6623,11 +7095,6 @@ function renderRightPanel(el, options) {
   // \u2500\u2500 HTML Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
   var contentHtml = '';
   if (isLinkElement(el)) contentHtml += buildAnchorContentFieldsHtml(el);
-  if (isFormControlElement(el)) {
-    contentHtml +=
-      subLbl('Value') +
-      '<textarea class="pr-inp" id="pp-value" style="width:100%;min-height:44px;margin-bottom:8px">'+esc(getFormControlValue(el))+'</textarea>';
-  }
   if (tag==='input' || tag==='textarea') {
     contentHtml +=
       subLbl('Placeholder') +
@@ -6740,17 +7207,13 @@ function renderRightPanel(el, options) {
 function wireContentFieldSync(el, sel) {
   var textInp = document.getElementById('pp-text');
   var htmlInp = document.getElementById('pp-html');
-  var valueInp = document.getElementById('pp-value');
   var syncing = false;
   function applyContentChange(changedId) {
     if (syncing) return;
     syncing = true;
     try {
       var orig = getOriginalValue(changedId, el);
-      if (changedId === 'pp-value') {
-        el.value = valueInp.value;
-        logChange(sel, 'pp-value', valueInp.value, el, orig);
-      } else if (changedId === 'pp-text') {
+      if (changedId === 'pp-text') {
         el.innerText = textInp.value;
         if (htmlInp) htmlInp.value = el.innerHTML;
         logChange(sel, 'pp-text', textInp.value, el, orig);
@@ -6763,10 +7226,6 @@ function wireContentFieldSync(el, sel) {
       syncing = false;
     }
   }
-  if (valueInp && isFormControlElement(el)) {
-    valueInp.addEventListener('input', function() { applyContentChange('pp-value'); });
-    valueInp.addEventListener('change', function() { applyContentChange('pp-value'); });
-  }
   if (textInp) {
     textInp.addEventListener('input', function() { applyContentChange('pp-text'); });
     textInp.addEventListener('change', function() { applyContentChange('pp-text'); });
@@ -7727,6 +8186,8 @@ function registerCROSections() {
 window.addEventListener('load', function() {
   registerCROSections();
   bindViewportControls();
+  bindUrlBar();
+  bindIframeLoadErrorControls();
   // switchSectionComponentsTab(currentSectionComponentsTab);
   renderElementsTree(document.getElementById('comp-search').value);
   vvvebReady = true;
@@ -7760,17 +8221,24 @@ window.addEventListener('load', function() {
     var doc = iframe.contentDocument;
     if (!doc) {
       resetIframeBindings();
-      syncIframeInteractions('iframe-load-no-doc');
+      showIframeLoadError('Unable to load this page. The connection was refused or blocked.');
       return;
     }
     var docUrl = '';
     try { docUrl = String(doc.URL || ''); } catch(_) {}
+    var immediateFail = detectIframeLoadFailure(iframe, doc);
+    if (immediateFail) {
+      showIframeLoadError(immediateFail);
+      return;
+    }
+    hideIframeLoadError();
     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') {
       resetIframeBindings();
       syncIframeInteractions('iframe-load-about-blank');
+      scheduleIframeLoadErrorCheck(iframe);
       return;
     }
     // If early-paint and final load DOM signatures match, avoid a second full apply/reset
@@ -7798,6 +8266,7 @@ window.addEventListener('load', function() {
     }
     // Always attempt sync; it has its own readiness checks + retry loop.
     syncIframeInteractions('iframe-load');
+    scheduleIframeLoadErrorCheck(iframe);
   });
 
   var sfAdd = document.getElementById('sf-add');