@accelerated-agency/visual-editor 0.5.8 → 0.6.0

package/dist/vite.cjs

@@ -1039,24 +1039,16 @@ button.var-tab.active{
 .lp-body #tab-dom-tree, .lp-body #tab-elements{
 padding-top:4px;
 }
-.lp-body #tab-elements .dt-lbl{
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 14px;
-    letter-spacing: -0.1px;
-}
-.lp-body #tab-elements #elements-root > .dt-row{
-padding-left: 16px!important;
-}
-.lp-body #dom-tree-root .dt-lbl{
+.lp-body #dom-tree-root .dt-lbl,
+.lp-body #elements-root .dt-lbl{
 color: var(--content-subtle, #737373);
 font-style: normal;
 font-weight: 400;
-line-height: var(--font-leading-3, 12px); /* 100% */
+line-height: var(--font-leading-3, 12px);
 letter-spacing: -0.1px;
 }
-.lp-body #dom-tree-root .dt-lbl .dt-tag{
+.lp-body #dom-tree-root .dt-lbl .dt-tag,
+.lp-body #elements-root .dt-lbl .dt-tag{
     color: var(--content-strong, #171717);
     font-family: "JetBrains Mono";
     font-size: 12px;
@@ -1070,7 +1062,6 @@ padding:3px 6px;
 display:inline-block;
 margin-right:4px;
 }
-.lp-body #tab-elements .dt-row .dt-chev.dt-spacer{display:none;}
 .lp-body #tab-dom-tree .dt-row .dt-ico{display:none;}
 .lp-body, .section-components-body{flex:1;overflow-y:auto}
 .lp-body::-webkit-scrollbar, .section-components-body::-webkit-scrollbar{width:3px}
@@ -2794,6 +2785,18 @@ function setUrlBarValue(pageUrl) {
   urlBar.title = val || 'Enter a page URL and press Enter';
 }
 
+/** Keep experimentData.pageUrl and #url-bar in sync when the preview iframe navigates. */
+function applyUrlBarFromIframeUrl(pageUrl) {
+  if (!pageUrl) return;
+  var normalized = String(pageUrl);
+  if (experimentData) {
+    experimentData = Object.assign({}, experimentData, { pageUrl: normalized });
+  } else {
+    experimentData = { pageUrl: normalized };
+  }
+  setUrlBarValue(normalized);
+}
+
 function normalizeUserPageUrl(raw) {
   var s = String(raw || '').trim();
   if (!s) return '';
@@ -2879,7 +2882,9 @@ function bindUrlBar() {
   });
   urlBar.addEventListener('blur', function() {
     var canonical = experimentData && experimentData.pageUrl ? String(experimentData.pageUrl) : '';
-    if (canonical && urlBar.value.trim() !== canonical) urlBar.value = canonical;
+    if (canonical && urlBar.value.trim() !== canonical) {
+      setUrlBarValue(canonical);
+    }
   });
 }
 
@@ -4674,15 +4679,10 @@ function parseEditorUrlPayload(rawUrl) {
 var lastEditorUrlPayloadKey = '';
 function emitEditorUrlChangedPayload(payload) {
   if (!payload) return;
+  if (payload.url) applyUrlBarFromIframeUrl(payload.url);
   var key = String(payload.url || '') + '|' + String(payload.password || '');
   if (key === lastEditorUrlPayloadKey) return;
   lastEditorUrlPayloadKey = key;
-  try {
-    console.info('[V2 iframe-url]', {
-      url: payload.url || '',
-      passwordPresent: !!payload.password,
-    });
-  } catch(_) {}
   send('editor-url-changed', payload);
 }
 function emitEditorUrlChanged(rawUrl) {
@@ -6191,17 +6191,12 @@ function renderElementsTree(filterRaw) {
     return 'bi bi-square';
   }
 
-  function labelFor(el) {
-    var tag = (el.tagName || '').toLowerCase();
-    return tag.toUpperCase();
-  }
-
   var nodes = collectEditorInsertedElements(doc);
 
   root.innerHTML = '';
   for (var i = 0; i < nodes.length; i++) {
     var el = nodes[i];
-    var lblText = labelFor(el);
+    var lblText = domTreeLabelFor(el);
     if (filterText && lblText.toLowerCase().indexOf(filterText) < 0) continue;
 
     var row = document.createElement('div');
@@ -6220,7 +6215,7 @@ function renderElementsTree(filterRaw) {
 
     var lbl = document.createElement('div');
     lbl.className = 'dt-lbl';
-    lbl.textContent = lblText;
+    setDomTreeLabelContent(lbl, el);
     lbl.title = buildSelector(el);
 
     row.appendChild(spacer);
@@ -6245,11 +6240,35 @@ function renderElementsTree(filterRaw) {
   };
 }
 
+function domTreeLabelClassExcluded(className) {
+  var c = String(className || '');
+  return !c || c === 'vve-selected' || c === 'vve-tree-hover' || c.indexOf('vve-') === 0;
+}
+
+function domTreeLabelClassString(el) {
+  if (!el) return '';
+  try {
+    if (el.classList && el.classList.length) {
+      var out = [];
+      for (var i = 0; i < el.classList.length; i++) {
+        var cls = el.classList[i];
+        if (!domTreeLabelClassExcluded(cls)) out.push(cls);
+      }
+      return out.join(' ');
+    }
+  } catch(_) {}
+  var cn = el.className;
+  if (cn && typeof cn === 'object' && cn.baseVal != null) cn = String(cn.baseVal);
+  return typeof cn === 'string' ? cn : '';
+}
+
 function domTreeLabelSuffix(el) {
   if (el.id != null && el.id !== '') return '#' + String(el.id).slice(0, 40);
-  var cn = el.className && typeof el.className === 'string' ? el.className.trim() : '';
+  var cn = domTreeLabelClassString(el).trim();
   if (cn) {
-    var parts = cn.split(/s+/).filter(function(x) { return x.indexOf('vve-') !== 0; }).slice(0, 2).join('.');
+    var parts = cn.split(/s+/).filter(function(x) {
+      return x && !domTreeLabelClassExcluded(x);
+    }).slice(0, 2).join('.');
     if (parts) return '.' + parts.slice(0, 56);
   }
   return '';
@@ -8202,14 +8221,8 @@ window.addEventListener('load', function() {
     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 || {};
-      try {
-        console.info('[V2 iframe-url bridge]', {
-          url: payload.url || '',
-          passwordPresent: !!payload.password,
-        });
-      } catch(_) {}
+      if (payload.url) applyUrlBarFromIframeUrl(payload.url);
       emitEditorUrlChangedPayload({
         url: payload.url || undefined,
         password: payload.password || undefined,

package/dist/vite.js

@@ -1031,24 +1031,16 @@ button.var-tab.active{
 .lp-body #tab-dom-tree, .lp-body #tab-elements{
 padding-top:4px;
 }
-.lp-body #tab-elements .dt-lbl{
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 14px;
-    letter-spacing: -0.1px;
-}
-.lp-body #tab-elements #elements-root > .dt-row{
-padding-left: 16px!important;
-}
-.lp-body #dom-tree-root .dt-lbl{
+.lp-body #dom-tree-root .dt-lbl,
+.lp-body #elements-root .dt-lbl{
 color: var(--content-subtle, #737373);
 font-style: normal;
 font-weight: 400;
-line-height: var(--font-leading-3, 12px); /* 100% */
+line-height: var(--font-leading-3, 12px);
 letter-spacing: -0.1px;
 }
-.lp-body #dom-tree-root .dt-lbl .dt-tag{
+.lp-body #dom-tree-root .dt-lbl .dt-tag,
+.lp-body #elements-root .dt-lbl .dt-tag{
     color: var(--content-strong, #171717);
     font-family: "JetBrains Mono";
     font-size: 12px;
@@ -1062,7 +1054,6 @@ padding:3px 6px;
 display:inline-block;
 margin-right:4px;
 }
-.lp-body #tab-elements .dt-row .dt-chev.dt-spacer{display:none;}
 .lp-body #tab-dom-tree .dt-row .dt-ico{display:none;}
 .lp-body, .section-components-body{flex:1;overflow-y:auto}
 .lp-body::-webkit-scrollbar, .section-components-body::-webkit-scrollbar{width:3px}
@@ -2786,6 +2777,18 @@ function setUrlBarValue(pageUrl) {
   urlBar.title = val || 'Enter a page URL and press Enter';
 }
 
+/** Keep experimentData.pageUrl and #url-bar in sync when the preview iframe navigates. */
+function applyUrlBarFromIframeUrl(pageUrl) {
+  if (!pageUrl) return;
+  var normalized = String(pageUrl);
+  if (experimentData) {
+    experimentData = Object.assign({}, experimentData, { pageUrl: normalized });
+  } else {
+    experimentData = { pageUrl: normalized };
+  }
+  setUrlBarValue(normalized);
+}
+
 function normalizeUserPageUrl(raw) {
   var s = String(raw || '').trim();
   if (!s) return '';
@@ -2871,7 +2874,9 @@ function bindUrlBar() {
   });
   urlBar.addEventListener('blur', function() {
     var canonical = experimentData && experimentData.pageUrl ? String(experimentData.pageUrl) : '';
-    if (canonical && urlBar.value.trim() !== canonical) urlBar.value = canonical;
+    if (canonical && urlBar.value.trim() !== canonical) {
+      setUrlBarValue(canonical);
+    }
   });
 }
 
@@ -4666,15 +4671,10 @@ function parseEditorUrlPayload(rawUrl) {
 var lastEditorUrlPayloadKey = '';
 function emitEditorUrlChangedPayload(payload) {
   if (!payload) return;
+  if (payload.url) applyUrlBarFromIframeUrl(payload.url);
   var key = String(payload.url || '') + '|' + String(payload.password || '');
   if (key === lastEditorUrlPayloadKey) return;
   lastEditorUrlPayloadKey = key;
-  try {
-    console.info('[V2 iframe-url]', {
-      url: payload.url || '',
-      passwordPresent: !!payload.password,
-    });
-  } catch(_) {}
   send('editor-url-changed', payload);
 }
 function emitEditorUrlChanged(rawUrl) {
@@ -6183,17 +6183,12 @@ function renderElementsTree(filterRaw) {
     return 'bi bi-square';
   }
 
-  function labelFor(el) {
-    var tag = (el.tagName || '').toLowerCase();
-    return tag.toUpperCase();
-  }
-
   var nodes = collectEditorInsertedElements(doc);
 
   root.innerHTML = '';
   for (var i = 0; i < nodes.length; i++) {
     var el = nodes[i];
-    var lblText = labelFor(el);
+    var lblText = domTreeLabelFor(el);
     if (filterText && lblText.toLowerCase().indexOf(filterText) < 0) continue;
 
     var row = document.createElement('div');
@@ -6212,7 +6207,7 @@ function renderElementsTree(filterRaw) {
 
     var lbl = document.createElement('div');
     lbl.className = 'dt-lbl';
-    lbl.textContent = lblText;
+    setDomTreeLabelContent(lbl, el);
     lbl.title = buildSelector(el);
 
     row.appendChild(spacer);
@@ -6237,11 +6232,35 @@ function renderElementsTree(filterRaw) {
   };
 }
 
+function domTreeLabelClassExcluded(className) {
+  var c = String(className || '');
+  return !c || c === 'vve-selected' || c === 'vve-tree-hover' || c.indexOf('vve-') === 0;
+}
+
+function domTreeLabelClassString(el) {
+  if (!el) return '';
+  try {
+    if (el.classList && el.classList.length) {
+      var out = [];
+      for (var i = 0; i < el.classList.length; i++) {
+        var cls = el.classList[i];
+        if (!domTreeLabelClassExcluded(cls)) out.push(cls);
+      }
+      return out.join(' ');
+    }
+  } catch(_) {}
+  var cn = el.className;
+  if (cn && typeof cn === 'object' && cn.baseVal != null) cn = String(cn.baseVal);
+  return typeof cn === 'string' ? cn : '';
+}
+
 function domTreeLabelSuffix(el) {
   if (el.id != null && el.id !== '') return '#' + String(el.id).slice(0, 40);
-  var cn = el.className && typeof el.className === 'string' ? el.className.trim() : '';
+  var cn = domTreeLabelClassString(el).trim();
   if (cn) {
-    var parts = cn.split(/s+/).filter(function(x) { return x.indexOf('vve-') !== 0; }).slice(0, 2).join('.');
+    var parts = cn.split(/s+/).filter(function(x) {
+      return x && !domTreeLabelClassExcluded(x);
+    }).slice(0, 2).join('.');
     if (parts) return '.' + parts.slice(0, 56);
   }
   return '';
@@ -8194,14 +8213,8 @@ window.addEventListener('load', function() {
     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 || {};
-      try {
-        console.info('[V2 iframe-url bridge]', {
-          url: payload.url || '',
-          passwordPresent: !!payload.password,
-        });
-      } catch(_) {}
+      if (payload.url) applyUrlBarFromIframeUrl(payload.url);
       emitEditorUrlChangedPayload({
         url: payload.url || undefined,
         password: payload.password || undefined,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@accelerated-agency/visual-editor",
-  "version": "0.5.8",
+  "version": "0.6.0",
   "private": false,
   "description": "Conversion visual editor as a reusable React package",
   "type": "module",