@accelerated-agency/visual-editor 0.5.9 → 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}
@@ -6200,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');
@@ -6229,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);
@@ -6254,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 '';

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}
@@ -6192,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');
@@ -6221,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);
@@ -6246,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 '';

package/package.json

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