@accelerated-agency/visual-editor 0.3.4 → 0.3.5

package/dist/vite.js

@@ -347,21 +347,21 @@ html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFo
 .lp-sec{border-bottom:1px solid var(--border);flex-shrink:0;padding: 24px;}
 .lp-sec-no-border{border-bottom:none!important}
 .lp-sec-hd{
-  padding:10px 12px 8px;font-size:14px;font-weight:600;
+  margin-bottom: 12px;
+  font-size:14px;font-weight:600;
   color:#404040;display:flex;align-items:center;justify-content:space-between;gap:5px
 }
 .lp-sec-hd-left{display:flex;align-items:center;gap:5px}
 #active-var-label{display:none;color:var(--accent-txt);font-size:10px;font-weight:500}
 .lp-info-icon{font-size:11px;color:var(--text-3);cursor:default;opacity:.7}
 .lp-add-btn{
-  display:none;
   background:none;border:none;color:var(--text);font-size:14px;font-weight:500;
   cursor:pointer;padding:2px 5px;border-radius:4px;transition:all .12s;flex-shrink:0
 }
 .lp-add-btn:hover{background:var(--bg-hover);color:var(--accent-txt)}
 
 /* \u2500\u2500 Variation tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-#variation-tabs{padding:2px 0 6px;display:flex;flex-direction:column; gap:8px;}
+#variation-tabs{display:flex;flex-direction:column; gap:8px;}
 .var-tab{
   border-radius: 4px;
   border: 1px solid #e5e7eb;
@@ -392,7 +392,7 @@ html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFo
 #comp-search:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.12)}
 
 /* \u2500\u2500 Left tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-.lp-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;background:#fff}
+.lp-tabs, .section-components-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;background:#fff}
 .lp-tab{
   flex:1;padding:8px 2px;text-align:center;font-size:10px;color:var(--text-3);
   cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;font-weight:600;line-height:1.15
@@ -402,10 +402,10 @@ html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFo
 .future-hidden{display:none!important}
 
 /* \u2500\u2500 Left panel body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-.lp-body{flex:1;overflow-y:auto}
-.lp-body::-webkit-scrollbar{width:3px}
-.lp-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}
-.tab-pane{display:none}.tab-pane.active{display:block}
+.lp-body, .section-components-body{flex:1;overflow-y:auto}
+.lp-body::-webkit-scrollbar, .section-components-body::-webkit-scrollbar{width:3px}
+.lp-body::-webkit-scrollbar-thumb, .section-components-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}
+.tab-pane, .section-components-tab-pane{display:none}.tab-pane.active, .section-components-tab-pane.active{display:block}
 
 /* \u2500\u2500 Component grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 .cg-hdr{padding:8px 10px 4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
@@ -617,12 +617,83 @@ select.pr-inp{cursor:pointer;background:#fff}
 }
 #states-clear:hover{border-color:#fca5a5;color:#ef4444;background:#fef2f2}
 #history-clear{
-  display:block;width:calc(100% - 24px);margin:10px 12px;
+  display:block;width:calc(100% - 24px);margin:10px 12px 8px;
   background:none;border:1px solid var(--border);border-radius:6px;
   padding:6px;font-size:11px;color:var(--text-2);cursor:pointer;font-family:inherit;
   transition:all .15s
 }
 #history-clear:hover{border-color:#fca5a5;color:#ef4444;background:#fef2f2}
+.history-timeline{
+  position:relative;
+  margin:8px 0 12px;
+  padding:0 12px 0 36px;
+}
+.history-timeline::before{
+  content:'';
+  position:absolute;
+  left:20px;
+  top:4px;
+  bottom:4px;
+  width:2px;
+  background:#eceff3;
+  border-radius:2px;
+}
+.history-item{
+  position:relative;
+  display:flex;
+  align-items:flex-start;
+  gap:10px;
+  padding:10px 8px 10px 0;
+  cursor:pointer;
+}
+.history-dot{
+  position:absolute;
+  left:-20px;
+  top:18px;
+  width:10px;
+  height:10px;
+  border-radius:50%;
+  background:#fff;
+  border:2px solid #d7dde6;
+}
+.history-card{
+  flex:1;
+  min-width:0;
+}
+.history-title{
+  font-size:14px;
+  font-weight:600;
+  color:var(--text);
+  line-height:1.3;
+}
+.history-meta{
+  margin-top:4px;
+  display:flex;
+  align-items:center;
+  gap:6px;
+  color:var(--text-2);
+  font-size:11px;
+}
+.history-avatar{
+  width:18px;
+  height:18px;
+  border-radius:50%;
+  background:#e9e5ff;
+  color:#5b47d6;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  font-size:10px;
+  font-weight:700;
+}
+.history-time{
+  margin-top:3px;
+  font-size:11px;
+  color:var(--text-3);
+}
+.history-remove{
+  margin-top:2px;
+}
 </style>
 </head>
 <body class="mode-editor">
@@ -704,7 +775,7 @@ select.pr-inp{cursor:pointer;background:#fff}
       <div class="lp-sec">
         <div class="lp-sec-hd">
           <span class="lp-sec-hd-left">Variations <span id="active-var-label"></span></span>
-          <button class="lp-add-btn" title="Add variation">+ Add</button>
+          <button class="lp-add-btn" style="display:none" title="Add variation">+ Add</button>
         </div>
         <div id="variation-tabs"></div>
       </div>
@@ -729,27 +800,39 @@ select.pr-inp{cursor:pointer;background:#fff}
           <span class="lp-sec-hd-left">Elements <i class="bi bi-info-circle lp-info-icon" title="Page elements"></i></span>
           <button class="lp-add-btn" title="Add element">+ Add</button>
         </div>
-      </div>
 
-      <!-- Search (hidden, kept for JS) -->
-      <div style="display:none">
+        <!-- Search (hidden, kept for JS) -->
+      <div>
         <input type="search" id="comp-search" placeholder="Search layers\u2026" autocomplete="off">
       </div>
 
+
       <!-- Tabs (hidden, kept for JS) -->
-      <div class="lp-tabs" style="display:none">
-        <div class="lp-tab active" onclick="switchLeftTab('elements')">Elements</div>
-        <div class="lp-tab future-hidden" onclick="switchLeftTab('components')">Components</div>
-        <div class="lp-tab future-hidden" onclick="switchLeftTab('sections')">Sections</div>
+      <div class="lp-tabs" >
+      <div class="lp-tab active" onclick="switchLeftTab('elements')">Elements</div>
+        <div class="lp-tab" onclick="switchLeftTab('dom-tree')">DOM Tree</div>
+      </div>
+
       </div>
 
       <!-- Tab content -->
       <div class="lp-body">
-        <div id="tab-elements" class="tab-pane active"><div id="dom-tree-root" class="dt-tree"></div></div>
-        <div id="tab-components" class="tab-pane future-hidden"></div>
-        <div id="tab-sections" class="tab-pane future-hidden"></div>
+        <div id="tab-dom-tree" class="tab-pane">
+        <div id="dom-tree-root" class="dt-tree">
+        </div>
+        </div>
+        <div id="tab-elements" class="tab-pane active">
+        <div id="elements-root" class="elements-tree">
+        </div>
+        </div>
       </div>
 
+      
+
+      
+
+      
+
     </div><!-- #left-panel -->
 
     <!-- Center / iframe panel -->
@@ -757,7 +840,8 @@ select.pr-inp{cursor:pointer;background:#fff}
 
       <!-- Floating toolbar for selected element (positioned over iframe) -->
       <div id="selection-floater" aria-label="Selection actions">
-        <button type="button" class="sf-btn" id="sf-drag" title="Move up/down (drag on page after activating)"><i class="bi bi-arrows-move"></i></button>
+        <button type="button" class="sf-btn" id="sf-move-up" title="Move up"><i class="bi bi-arrow-up"></i></button>
+        <button type="button" class="sf-btn" id="sf-move-down" title="Move down"><i class="bi bi-arrow-down"></i></button>
         <span class="sf-sep"></span>
         <button type="button" class="sf-btn" id="sf-resize" disabled title="Resize (coming soon)"><i class="bi bi-arrows-angle-expand"></i></button>
         <button type="button" class="sf-btn" id="sf-rotate" disabled title="Rotate (coming soon)"><i class="bi bi-arrow-repeat"></i></button>
@@ -784,13 +868,20 @@ select.pr-inp{cursor:pointer;background:#fff}
 
     <!-- Right panel -->
     <div id="right-panel">
-
+      <!-- Left-tab controls moved here -->
+      <div class="section-components-tabs">
+        <div class="lp-tab" onclick="switchSectionComponentsTab('components')">Components</div>
+        <div class="lp-tab" onclick="switchSectionComponentsTab('sections')">Sections</div>
+      </div>
+      <div class="lp-body">
+        <div id="tab-components" class="tab-pane"></div>
+        <div id="tab-sections" class="tab-pane"></div>
+      </div>
       <!-- Element badge (hidden until selection) -->
       <div id="el-info" style="display:none">
         <div id="el-info-tag"></div>
         <div id="el-info-sel"></div>
       </div>
-
       <!-- \u2500\u2500 3 main tabs \u2500\u2500 -->
       <div id="main-tabs">
         <button class="main-tab active" onclick="switchMainTab('design')">Design</button>
@@ -872,12 +963,7 @@ select.pr-inp{cursor:pointer;background:#fff}
 
       <!-- \u2500\u2500 States pane \u2500\u2500 -->
       <div id="tab-states" class="rp-pane">
-        <div id="states-list">
-          <div class="states-empty">
-            <i class="bi bi-layers"></i>
-            No changes yet \u2014 edit elements on the page to see states here
-          </div>
-        </div>
+        <div id="states-list"></div>
       </div><!-- #tab-states -->
 
       <!-- \u2500\u2500 History pane (saved DB changesets for active variation) \u2500\u2500 -->
@@ -1125,6 +1211,7 @@ var suppressClickUntil = 0;
 var dragAttachDoc     = null;
 var currentMainTab  = 'design';
 var currentLeftTab  = 'elements';
+var currentSectionComponentsTab = 'components';
 var dragHandleActive = false;
 var domTreeCollapsed = {};
 var domTreeRefreshTimer = null;
@@ -1156,6 +1243,13 @@ var stateChangesByVarId = {};
 var appliedChangesetSnapshots = {};
 /** Canonical JSON fingerprints of persisted changesets per variation (last load / finalize) */
 var baselineChangesetsByVarId = {};
+/** Monotonic timestamp key for ordering mixed live + saved history rows. */
+var vveHistorySeq = 0;
+
+function nextHistoryTimestamp() {
+  vveHistorySeq += 1;
+  return Date.now() * 1000 + vveHistorySeq;
+}
 
 // \u2500\u2500 Dirty tracking (compare DB baseline + session stateChanges vs current export) \u2500\u2500
 function beginSuppressIframeMutationDirty() {
@@ -1371,27 +1465,45 @@ function setDevice(device) {
 
 // \u2500\u2500 Left panel tab switch \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 function switchLeftTab(tab) {
+  if (tab !== 'elements' && tab !== 'dom-tree') return;
   currentLeftTab = tab;
-  var tabs = document.querySelectorAll('.lp-tab');
-  tabs[0].classList.toggle('active', tab === 'elements');
-  tabs[1].classList.toggle('active', tab === 'components');
-  tabs[2].classList.toggle('active', tab === 'sections');
-  document.getElementById('tab-elements').classList.toggle('active', tab === 'elements');
-  document.getElementById('tab-components').classList.toggle('active', tab === 'components');
-  document.getElementById('tab-sections').classList.toggle('active', tab === 'sections');
+  var tabs = document.querySelectorAll('.lp-tabs .lp-tab');
+  for (var i = 0; i < tabs.length; i++) {
+    var oc = tabs[i].getAttribute('onclick') || '';
+    tabs[i].classList.toggle('active', oc.indexOf("switchLeftTab('" + tab + "')") >= 0);
+  }
+  var paneNames = ['elements', 'dom-tree'];
+  for (var p = 0; p < paneNames.length; p++) {
+    var pane = document.getElementById('tab-' + paneNames[p]);
+    if (pane) pane.classList.toggle('active', paneNames[p] === tab);
+  }
   var inp = document.getElementById('comp-search');
   if (tab === 'elements') {
+    inp.placeholder = 'Search elements\u2026';
+    renderElementsTree(inp.value);
+  } else if (tab === 'dom-tree') {
     inp.placeholder = 'Search layers\u2026';
     renderDomTree(inp.value);
-  } else if (tab === 'sections') {
-    inp.placeholder = 'Search sections\u2026';
-    renderSidebar(inp.value);
-  } else {
-    inp.placeholder = 'Search components\u2026';
-    renderSidebar(inp.value);
   }
 }
 
+function switchSectionComponentsTab(tab) {
+  if (tab !== 'components' && tab !== 'sections') return;
+  currentSectionComponentsTab = tab;
+  var tabs = document.querySelectorAll('.section-components-tabs .lp-tab');
+  for (var i = 0; i < tabs.length; i++) {
+    var oc = tabs[i].getAttribute('onclick') || '';
+    tabs[i].classList.toggle('active', oc.indexOf("switchSectionComponentsTab('" + tab + "')") >= 0);
+  }
+  var compPane = document.getElementById('tab-components');
+  var secPane = document.getElementById('tab-sections');
+  if (compPane) compPane.classList.toggle('active', tab === 'components');
+  if (secPane) secPane.classList.toggle('active', tab === 'sections');
+  var inp = document.getElementById('comp-search');
+  if (inp) inp.placeholder = tab === 'sections' ? 'Search sections\u2026' : 'Search components\u2026';
+  renderSidebar(inp ? inp.value : '');
+}
+
 // \u2500\u2500 Accordion toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 function toggleAcc(name) {
   var sec = document.getElementById('acc-' + name);
@@ -1514,42 +1626,20 @@ function logChange(selector, inputId, value, targetEl, originalValue) {
       : (originalValue != null ? originalValue : '');
     var entry = {
       selector: selector, inputId: inputId, label: meta.label,
-      cssProp: meta.cssProp, value: value, targetEl: targetEl, originalValue: orig
+      cssProp: meta.cssProp, value: value, targetEl: targetEl, originalValue: orig, vveTs: nextHistoryTimestamp()
     };
     if (idx >= 0) { stateChanges[idx] = entry; } else { stateChanges.push(entry); }
   }
   if (currentMainTab === 'states') renderStatesTab();
+  if (currentMainTab === 'history') renderHistoryTab();
   commitStateChangesForActiveVariation();
   recomputeEditorDirty();
 }
 
 function renderStatesTab() {
   var container = document.getElementById('states-list');
-  if (!stateChanges.length) {
-    container.innerHTML = '<div class="states-empty"><i class="bi bi-layers"></i>No changes yet \u2014 edit elements on the page to see states here</div>';
-    return;
-  }
-  // Group by selector
-  var groups = {};
-  var order  = [];
-  stateChanges.forEach(function(c) {
-    if (!groups[c.selector]) { groups[c.selector] = []; order.push(c.selector); }
-    groups[c.selector].push(c);
-  });
-  var html = '<button id="states-clear" onclick="clearAllStates()"><i class="bi bi-trash3"></i> Clear all changes</button>';
-  order.forEach(function(sel) {
-    html += '<div class="state-group"><div class="state-group-sel">'+esc(sel)+'</div>';
-    groups[sel].forEach(function(c) {
-      var idx = stateChanges.indexOf(c);
-      html += '<div class="state-item">' +
-        '<span class="state-item-label">'+esc(c.label)+'</span>' +
-        '<span class="state-item-val" title="'+esc(c.value)+'">'+esc(c.value)+'</span>' +
-        '<button class="state-remove" title="Remove this change" onclick="removeStateChange('+idx+')">&#x2715;</button>' +
-      '</div>';
-    });
-    html += '</div>';
-  });
-  container.innerHTML = html;
+  if (!container) return;
+  container.innerHTML = '';
 }
 
 // Resolve a live DOM element for a state-change entry.
@@ -1628,7 +1718,9 @@ function removeStateChange(idx) {
   stateChanges.splice(idx, 1);
   commitStateChangesForActiveVariation();
   renderStatesTab();
+  if (currentMainTab === 'history') renderHistoryTab();
   recomputeEditorDirty();
+  scheduleDomTreeRefresh();
 }
 
 function clearAllStates() {
@@ -1639,7 +1731,9 @@ function clearAllStates() {
   stateChanges = [];
   commitStateChangesForActiveVariation();
   renderStatesTab();
+  if (currentMainTab === 'history') renderHistoryTab();
   recomputeEditorDirty();
+  scheduleDomTreeRefresh();
 }
 
 // \u2500\u2500 History tab (saved changesets from DB for active variation) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
@@ -1812,61 +1906,169 @@ function historyEntryValuePreview(entry) {
   return '';
 }
 
+function getHistoryTimestampValue(raw, fallback) {
+  var n = Number(raw);
+  if (Number.isFinite(n) && n > 0) return n;
+  return fallback;
+}
+
+function historyTimestampForChangeset(entry, idx) {
+  var base = idx + 1;
+  if (!entry) return base;
+  return getHistoryTimestampValue(
+    entry.vveTs != null ? entry.vveTs : (entry.timestamp != null ? entry.timestamp : entry.ts),
+    base,
+  );
+}
+
+function historyTimestampForStateChange(change, idx) {
+  return getHistoryTimestampValue(change && change.vveTs, idx + 1);
+}
+
+function formatHistoryTimestamp(ts) {
+  if (!Number.isFinite(ts) || ts <= 0) return '';
+  var ms = ts > 9999999999999 ? Math.floor(ts / 1000) : ts;
+  var d = new Date(ms);
+  if (isNaN(d.getTime())) return '';
+  return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+}
+
+function formatHistoryRelativeTime(ts) {
+  if (!Number.isFinite(ts) || ts <= 0) return '';
+  var ms = ts > 9999999999999 ? Math.floor(ts / 1000) : ts;
+  var diff = Math.max(0, Date.now() - ms);
+  var sec = Math.floor(diff / 1000);
+  if (sec < 5) return 'just now';
+  if (sec < 60) return sec + ' seconds ago';
+  var min = Math.floor(sec / 60);
+  if (min < 60) return min + ' minute' + (min === 1 ? '' : 's') + ' ago';
+  var hr = Math.floor(min / 60);
+  if (hr < 24) return hr + ' hour' + (hr === 1 ? '' : 's') + ' ago';
+  var day = Math.floor(hr / 24);
+  return day + ' day' + (day === 1 ? '' : 's') + ' ago';
+}
+
+function getUnifiedHistoryItems() {
+  var out = [];
+  var v = getActiveVariationForHistory();
+  var saved = v ? parseVariationChangesets(v) : [];
+  for (var i = 0; i < saved.length; i++) {
+    var e = saved[i];
+    out.push({
+      source: 'saved',
+      idx: i,
+      selector: (e && e.selector) || '(unknown)',
+      label: historyEntryTypeLabel(e),
+      value: historyEntryValuePreview(e),
+      ts: historyTimestampForChangeset(e, i),
+      tsLabel: formatHistoryTimestamp(historyTimestampForChangeset(e, i)),
+      actor: 'Saved changeset',
+    });
+  }
+  var live = stateChanges || [];
+  for (var j = 0; j < live.length; j++) {
+    var c = live[j];
+    if (!c) continue;
+    var ts = historyTimestampForStateChange(c, j + saved.length);
+    out.push({
+      source: 'live',
+      idx: j,
+      selector: c.selector || '(unknown)',
+      label: c.label || 'Live change',
+      value: c.value != null ? String(c.value).slice(0, 120) : '',
+      ts: ts,
+      tsLabel: formatHistoryTimestamp(ts),
+      actor: 'You',
+    });
+  }
+  out.sort(function(a, b) {
+    if (b.ts !== a.ts) return b.ts - a.ts;
+    if (a.source !== b.source) return a.source === 'live' ? -1 : 1;
+    return b.idx - a.idx;
+  });
+  return out;
+}
+
 function renderHistoryTab() {
   var container = document.getElementById('history-list');
   if (!container) return;
-  var v = getActiveVariationForHistory();
-  var arr = v ? parseVariationChangesets(v) : [];
-  if (!arr.length) {
+  var items = getUnifiedHistoryItems();
+  if (!items.length) {
     container.innerHTML =
-      '<div class="states-empty"><i class="bi bi-clock-history"></i>No saved changesets for this variation \u2014 use Finalize to persist edits to the server</div>';
+      '<div class="states-empty"><i class="bi bi-clock-history"></i>No changes yet</div>';
     return;
   }
-  var groups = {};
-  var order = [];
-  for (var gi = 0; gi < arr.length; gi++) {
-    var entry = arr[gi];
-    var sel = entry.selector || '(unknown)';
-    if (!groups[sel]) {
-      groups[sel] = [];
-      order.push(sel);
-    }
-    groups[sel].push({ entry: entry, idx: gi });
-  }
   var html =
-    '<button type="button" id="history-clear" onclick="clearAllHistoryChangesets()"><i class="bi bi-trash3"></i> Clear all saved changes</button>';
-  order.forEach(function(sel) {
-    html += '<div class="state-group"><div class="state-group-sel">' + esc(sel) + '</div>';
-    groups[sel].forEach(function(item) {
-      var lab = historyEntryTypeLabel(item.entry);
-      var val = historyEntryValuePreview(item.entry);
-      html +=
-        '<div class="state-item" role="button" tabindex="0" title="Jump to element in iframe" onclick="focusHistoryChangeset(' +
-        item.idx +
-        ')">' +
-        '<span class="state-item-idx" style="opacity:0.55;font-size:10px;min-width:2.2em;display:inline-block" title="Order in saved changesets">#' +
-        item.idx +
-        '</span>' +
-        '<span class="state-item-label">' +
-        esc(lab) +
-        '</span>' +
-        '<span class="state-item-val" title="' +
-        esc(val) +
-        '">' +
-        esc(val) +
-        '</span>' +
-        '<button type="button" class="state-remove" title="Remove this saved row (#' +
-        item.idx +
-        ')" onclick="removeHistoryChangeset(' +
-        item.idx +
-        ', event)">&#x2715;</button>' +
-        '</div>';
-    });
-    html += '</div>';
-  });
+    '<button type="button" id="history-clear" onclick="clearAllUnifiedHistory()"><i class="bi bi-trash3"></i> Clear all changes</button>';
+  html += '<div class="history-timeline">';
+  for (var i = 0; i < items.length; i++) {
+    var it = items[i];
+    var title = 'Edit - ' + (it.label || 'Change');
+    var avatarLabel = it.source === 'live' ? 'Y' : 'S';
+    var timeText = formatHistoryRelativeTime(it.ts) || (it.tsLabel || '');
+    html +=
+      '<div class="history-item" role="button" tabindex="0" title="Jump to element in iframe" onclick="focusHistoryItem(&quot;' +
+      esc(it.source) +
+      '&quot;,' +
+      it.idx +
+      ')">' +
+      '<span class="history-dot"></span>' +
+      '<div class="history-card">' +
+      '<div class="history-title">' + esc(title) + '</div>' +
+      '<div class="history-meta">' +
+      '<span class="history-avatar">' + esc(avatarLabel) + '</span>' +
+      '<span>' + esc(it.actor || 'Editor') + '</span>' +
+      '</div>' +
+      '<div class="history-time">' + esc(timeText || 'n/a') + '</div>' +
+      '</div>' +
+      '<button type="button" class="state-remove history-remove" title="Remove this change" onclick="removeHistoryItem(&quot;' +
+      esc(it.source) +
+      '&quot;,' +
+      it.idx +
+      ', event)">&#x2715;</button>' +
+      '</div>';
+  }
+  html += '</div>';
   container.innerHTML = html;
 }
 
+function focusHistoryItem(source, idx) {
+  if (source === 'live') {
+    var change = stateChanges[idx];
+    if (!change || !change.selector) return;
+    try {
+      var iframe = document.getElementById('iframeId');
+      var iframeDoc = iframe && iframe.contentDocument;
+      if (!iframeDoc) return;
+      var el = querySelectorResolved(iframeDoc, change.selector);
+      if (!el) return;
+      selectElement(el);
+      try {
+        el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
+      } catch(_) {
+        el.scrollIntoView();
+      }
+    } catch(_) {}
+    return;
+  }
+  focusHistoryChangeset(idx);
+}
+
+function removeHistoryItem(source, idx, evt) {
+  if (source === 'live') {
+    if (evt && evt.stopPropagation) evt.stopPropagation();
+    removeStateChange(idx);
+    if (currentMainTab === 'history') renderHistoryTab();
+    return;
+  }
+  removeHistoryChangeset(idx, evt);
+}
+
+function getLatestHistoryUndoTarget() {
+  var list = getUnifiedHistoryItems();
+  return list.length ? list[0] : null;
+}
+
 function changesetListHasStructural(arr) {
   if (!arr || !arr.length) return false;
   for (var i = 0; i < arr.length; i++) {
@@ -1978,6 +2180,12 @@ function clearAllHistoryChangesets() {
   softReloadEditorIframe();
 }
 
+function clearAllUnifiedHistory() {
+  clearAllStates();
+  clearAllHistoryChangesets();
+  if (currentMainTab === 'history') renderHistoryTab();
+}
+
 // \u2500\u2500 Persisted active variation (survives iframe / full page reload) \u2500\u2500\u2500\u2500\u2500\u2500\u2500
 /** All Visual Editor iframe keys in localStorage use this prefix \u2014 cleared on close. */
 var VVE_LOCAL_STORAGE_PREFIX = 'vve:';
@@ -2331,7 +2539,7 @@ function runConsistencyReconcile() {
   var doc = iframe && iframe.contentDocument;
   if (!doc || !doc.body) return;
   var variation = variations.find(function(v) { return v._id === activeVarId; });
-  var cs = parseVariationChangesets(variation);
+  var cs = buildPersistedChainSetsForVariation(variation);
   if (!cs.length || changesetsHaveBodySnapshot(cs)) return;
   var granular = filterGranularChangesetEntries(cs);
   var unresolved = countUnresolvedGranularSelectors(doc, granular);
@@ -2591,6 +2799,7 @@ function mergeGranularChainSets(baseList, overlayList) {
 function appendSessionStructuralChainRow(varId, row) {
   if (!varId || !row) return;
   if (!sessionStructuralChainRowsByVarId[varId]) sessionStructuralChainRowsByVarId[varId] = [];
+  if (row.vveTs == null) row.vveTs = nextHistoryTimestamp();
   sessionStructuralChainRowsByVarId[varId].push(row);
 }
 
@@ -2598,33 +2807,33 @@ function appendSessionStructuralChainRow(varId, row) {
 function stateChangeToChainSet(c) {
   if (!c || !c.selector) return null;
   if (c.cssProp) {
-    return { selector: c.selector, type: 'style', property: c.cssProp, value: c.value };
+    return { selector: c.selector, type: 'style', property: c.cssProp, value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
   }
   switch (c.inputId) {
     case 'pp-text':
-      return { selector: c.selector, type: 'content', value: c.value };
+      return { selector: c.selector, type: 'content', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     case 'pp-html':
-      return { selector: c.selector, type: 'content', html: c.value };
+      return { selector: c.selector, type: 'content', html: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     case 'pp-cls':
-      return { selector: c.selector, type: 'attribute', attribute: 'class', value: c.value };
+      return { selector: c.selector, type: 'attribute', attribute: 'class', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     case 'pp-id':
-      return { selector: c.selector, type: 'attribute', attribute: 'id', value: c.value };
+      return { selector: c.selector, type: 'attribute', attribute: 'id', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     case 'pp-href':
-      return { selector: c.selector, type: 'attribute', attribute: 'href', value: c.value };
+      return { selector: c.selector, type: 'attribute', attribute: 'href', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     case 'pp-target':
-      return { selector: c.selector, type: 'attribute', attribute: 'target', value: c.value };
+      return { selector: c.selector, type: 'attribute', attribute: 'target', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     case 'pp-src':
-      return { selector: c.selector, type: 'attribute', attribute: 'src', value: c.value };
+      return { selector: c.selector, type: 'attribute', attribute: 'src', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     case 'pp-alt':
-      return { selector: c.selector, type: 'attribute', attribute: 'alt', value: c.value };
+      return { selector: c.selector, type: 'attribute', attribute: 'alt', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     case 'pp-ph':
-      return { selector: c.selector, type: 'attribute', attribute: 'placeholder', value: c.value };
+      return { selector: c.selector, type: 'attribute', attribute: 'placeholder', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     case 'pp-css':
-      return { selector: c.selector, type: 'attribute', attribute: 'style', value: c.value };
+      return { selector: c.selector, type: 'attribute', attribute: 'style', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     case 'pp-mob-css':
-      return { selector: c.selector, type: 'attribute', attribute: 'data-mobile-css', value: c.value };
+      return { selector: c.selector, type: 'attribute', attribute: 'data-mobile-css', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     case 'pp-tab-css':
-      return { selector: c.selector, type: 'attribute', attribute: 'data-tablet-css', value: c.value };
+      return { selector: c.selector, type: 'attribute', attribute: 'data-tablet-css', value: c.value, vveTs: c.vveTs || nextHistoryTimestamp() };
     default:
       return null;
   }
@@ -2912,7 +3121,7 @@ function applyActiveVariationHtml() {
   if (!iframeDoc || !iframeDoc.body) return;
 
   var variation = variations.find(function(v) { return v._id === activeVarId; });
-  var cs = parseVariationChangesets(variation);
+  var cs = buildPersistedChainSetsForVariation(variation);
   refreshPersistentChangesetStyleTagForActiveVariation();
 
   beginSuppressIframeMutationDirty();
@@ -2970,7 +3179,7 @@ function applyVariationGranularOnly(iframeDoc) {
   if (!activeVarId || !iframeDoc || !iframeDoc.body) return;
   if (varHtmlCache[activeVarId]) return;
   var variation = variations.find(function(v) { return v._id === activeVarId; });
-  var cs = parseVariationChangesets(variation);
+  var cs = buildPersistedChainSetsForVariation(variation);
   if (!cs.length || changesetsHaveBodySnapshot(cs)) return;
   beginSuppressIframeMutationDirty();
   try {
@@ -2989,7 +3198,7 @@ function reapplyActiveVariationGranular(iframeDoc) {
   if (!activeVarId || !iframeDoc || !iframeDoc.body) return;
   if (varHtmlCache[activeVarId]) return;
   var variation = variations.find(function(v) { return v._id === activeVarId; });
-  var cs = parseVariationChangesets(variation);
+  var cs = buildPersistedChainSetsForVariation(variation);
   if (!cs.length || changesetsHaveBodySnapshot(cs)) return;
   beginSuppressIframeMutationDirty();
   try {
@@ -3033,7 +3242,7 @@ function startIframeContentApplyWatcher(navGen, prevDocRef) {
 
       if (doc.readyState === 'loading') {
         var variation = variations.find(function(v) { return v._id === activeVarId; });
-        var cs0 = parseVariationChangesets(variation);
+        var cs0 = buildPersistedChainSetsForVariation(variation);
         if (!cs0.length || changesetsHaveBodySnapshot(cs0)) return;
         var granular = filterGranularChangesetEntries(cs0);
         if (!granular.length) return;
@@ -3079,8 +3288,9 @@ function selectElement(el) {
   document.getElementById('no-sel').style.display = 'none';
   renderRightPanel(el);
   updateSelectionToolbar();
-  if (currentLeftTab === 'elements') {
-    var dr = document.getElementById('dom-tree-root');
+  if (currentLeftTab === 'elements' || currentLeftTab === 'dom-tree') {
+    var treeRootId = currentLeftTab === 'elements' ? 'elements-root' : 'dom-tree-root';
+    var dr = document.getElementById(treeRootId);
     if (dr && dr.querySelector('.dt-row')) syncDomTreeSelection();
     else scheduleDomTreeRefresh();
   }
@@ -3343,27 +3553,32 @@ function deleteSelectedEl() {
 }
 
 function syncDomTreeSelection() {
-  var root = document.getElementById('dom-tree-root');
-  if (!root) return;
-  var rows = root.querySelectorAll('.dt-row');
-  for (var i = 0; i < rows.length; i++) {
-    rows[i].classList.toggle('dt-selected', !!(selectedEl && rows[i]._dtEl === selectedEl));
-  }
-  if (!selectedEl) return;
-  var found = null;
-  for (var j = 0; j < rows.length; j++) {
-    if (rows[j]._dtEl === selectedEl) { found = rows[j]; break; }
+  var roots = ['dom-tree-root', 'elements-root'];
+  for (var r = 0; r < roots.length; r++) {
+    var root = document.getElementById(roots[r]);
+    if (!root) continue;
+    var rows = root.querySelectorAll('.dt-row');
+    for (var i = 0; i < rows.length; i++) {
+      rows[i].classList.toggle('dt-selected', !!(selectedEl && rows[i]._dtEl === selectedEl));
+    }
+    if (!selectedEl) continue;
+    var found = null;
+    for (var j = 0; j < rows.length; j++) {
+      if (rows[j]._dtEl === selectedEl) { found = rows[j]; break; }
+    }
+    if (found) found.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
   }
-  if (found) found.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
 }
 
 function scheduleDomTreeRefresh() {
-  if (currentLeftTab !== 'elements') return;
+  if (currentLeftTab !== 'elements' && currentLeftTab !== 'dom-tree') return;
   if (domTreeRefreshTimer) clearTimeout(domTreeRefreshTimer);
   domTreeRefreshTimer = setTimeout(function() {
     domTreeRefreshTimer = null;
     var inp = document.getElementById('comp-search');
-    renderDomTree(inp ? inp.value : '');
+    var q = inp ? inp.value : '';
+    if (currentLeftTab === 'elements') renderElementsTree(q);
+    else if (currentLeftTab === 'dom-tree') renderDomTree(q);
   }, 150);
 }
 
@@ -3386,6 +3601,129 @@ function domTreePathSegment(el) {
   return tag + '[' + idx + ']';
 }
 
+function renderElementsTree(filterRaw) {
+  var filterText = (filterRaw || '').toLowerCase().trim();
+  var root = document.getElementById('elements-root');
+  if (!root) return;
+  var iframe = document.getElementById('iframeId');
+  var doc = iframe && iframe.contentDocument;
+  if (!isIframeDomReady(iframe, doc)) {
+    root.innerHTML = '<div class="dt-muted">Load a page to see the elements.</div>';
+    return;
+  }
+
+  function skippable(el) {
+    return isDomTreeSkippableTagName(el.tagName);
+  }
+
+  function nodeIcon(tag) {
+    tag = (tag || '').toLowerCase();
+    if (/^h[1-6]$/.test(tag)) return 'bi bi-type-h1';
+    if (tag === 'a') return 'bi bi-link-45deg';
+    if (tag === 'img') return 'bi bi-image';
+    if (tag === 'section' || tag === 'main' || tag === 'article' || tag === 'header' || tag === 'footer' || tag === 'nav') return 'bi bi-layout-three-columns';
+    if (tag === 'button' || tag === 'input' || tag === 'select' || tag === 'textarea') return 'bi bi-ui-radios';
+    if (tag === 'ul' || tag === 'ol') return 'bi bi-list-ul';
+    if (tag === 'li') return 'bi bi-dot';
+    if (tag === 'svg') return 'bi bi-bezier2';
+    if (tag === 'p' || tag === 'span') return 'bi bi-text-left';
+    return 'bi bi-square';
+  }
+
+  function labelFor(el) {
+    var tag = (el.tagName || '').toLowerCase();
+    return tag.toUpperCase();
+  }
+
+  function isListableNode(el) {
+    if (!el || el.nodeType !== 1) return false;
+    if (skippable(el)) return false;
+    var tag = (el.tagName || '').toLowerCase();
+    if (tag !== 'svg') {
+      var p = el.parentElement;
+      while (p) {
+        if ((p.tagName || '').toLowerCase() === 'svg') return false;
+        p = p.parentElement;
+      }
+    }
+    return true;
+  }
+
+  var nodes = [];
+  var i, cursor;
+  try {
+    cursor = doc.createTreeWalker(doc.body, NodeFilter.SHOW_ELEMENT, null);
+  } catch(_) {
+    cursor = null;
+  }
+  if (cursor) {
+    while (cursor.nextNode()) {
+      var node = cursor.currentNode;
+      if (isListableNode(node)) nodes.push(node);
+      if (nodes.length > 4000) break;
+    }
+  } else {
+    function collectFlat(el) {
+      if (!el || !el.children) return;
+      for (var j = 0; j < el.children.length; j++) {
+        var c = el.children[j];
+        if (!isListableNode(c)) continue;
+        nodes.push(c);
+        if (nodes.length > 4000) return;
+        collectFlat(c);
+        if (nodes.length > 4000) return;
+      }
+    }
+    collectFlat(doc.body);
+  }
+
+  root.innerHTML = '';
+  for (i = 0; i < nodes.length; i++) {
+    var el = nodes[i];
+    var lblText = labelFor(el);
+    if (filterText && lblText.toLowerCase().indexOf(filterText) < 0) continue;
+
+    var row = document.createElement('div');
+    row.className = 'dt-row';
+    row._dtEl = el;
+    if (el === selectedEl) row.classList.add('dt-selected');
+    row.style.paddingLeft = '4px';
+
+    var spacer = document.createElement('button');
+    spacer.type = 'button';
+    spacer.className = 'dt-chev dt-spacer';
+
+    var ico = document.createElement('div');
+    ico.className = 'dt-ico';
+    ico.innerHTML = '<i class="' + nodeIcon(el.tagName) + '"></i>';
+
+    var lbl = document.createElement('div');
+    lbl.className = 'dt-lbl';
+    lbl.textContent = lblText;
+    lbl.title = buildSelector(el);
+
+    row.appendChild(spacer);
+    row.appendChild(ico);
+    row.appendChild(lbl);
+    row.onclick = (function(targetEl) {
+      return function() { selectElementFromTree(targetEl); };
+    })(el);
+    row.onmouseenter = (function(targetEl) {
+      return function() { setTreeHoverHighlight(targetEl); };
+    })(el);
+    root.appendChild(row);
+  }
+
+  if (!root.querySelector('.dt-row')) {
+    root.innerHTML = filterText
+      ? '<div class="dt-muted">No elements match your search.</div>'
+      : '<div class="dt-muted">No elements found.</div>';
+  }
+  root.onmouseleave = function() {
+    clearTreeHoverHighlight();
+  };
+}
+
 function renderDomTree(filterRaw) {
   var filterText = (filterRaw || '').toLowerCase().trim();
   var root = document.getElementById('dom-tree-root');
@@ -4124,6 +4462,20 @@ function recordReorderAfterDrag(movedEl) {
   }
 }
 
+function moveSelectedElByDirection(direction) {
+  if (!selectedEl || !selectedEl.parentElement) return;
+  var p = selectedEl.parentElement;
+  var sibling = direction < 0 ? selectedEl.previousElementSibling : selectedEl.nextElementSibling;
+  if (!sibling) return;
+  if (direction < 0) p.insertBefore(selectedEl, sibling);
+  else p.insertBefore(sibling, selectedEl);
+  recordReorderAfterDrag(selectedEl);
+  saveCurrentVariationHtml();
+  recomputeEditorDirty();
+  scheduleDomTreeRefresh();
+  updateSelectionToolbar();
+}
+
 function attachDragReposition() {
   try {
     var iframe = document.getElementById('iframeId');
@@ -4310,7 +4662,9 @@ function syncIframeInteractions(reason) {
     scheduleConsistencyReconcile();
     bindSelectionToolbarScroll();
     var inp = document.getElementById('comp-search');
-    renderDomTree(inp ? inp.value : '');
+    var q = inp ? inp.value : '';
+    if (currentLeftTab === 'elements') renderElementsTree(q);
+    else if (currentLeftTab === 'dom-tree') renderDomTree(q);
     updateSelectionToolbar();
     recomputeEditorDirty();
   } catch(_) {}
@@ -4474,8 +4828,11 @@ function renderSidebar(filter) {
 }
 
 document.getElementById('comp-search').addEventListener('input', function() {
-  if (currentLeftTab === 'elements') renderDomTree(this.value);
-  else renderSidebar(this.value);
+  if (currentLeftTab === 'elements') renderElementsTree(this.value);
+  else if (currentLeftTab === 'dom-tree') renderDomTree(this.value);
+  if (currentSectionComponentsTab === 'components' || currentSectionComponentsTab === 'sections') {
+    renderSidebar(this.value);
+  }
 });
 
 // \u2500\u2500 Save / Close \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
@@ -4541,19 +4898,11 @@ document.addEventListener('keydown', function(e) {
   var k = (e.key || '').toLowerCase();
   if (meta && !e.shiftKey && k === 'z') {
     e.preventDefault();
-    if (typeof Vvveb !== 'undefined' && Vvveb.Undo) {
-      Vvveb.Undo.undo();
-      saveCurrentVariationHtml();
-      recomputeEditorDirty();
-    }
+    runEditorUndo();
   }
   if (meta && e.shiftKey && k === 'z') {
     e.preventDefault();
-    if (typeof Vvveb !== 'undefined' && Vvveb.Undo) {
-      Vvveb.Undo.redo();
-      saveCurrentVariationHtml();
-      recomputeEditorDirty();
-    }
+    runEditorRedo();
   }
   if (meta && e.key === 's') { e.preventDefault(); handleSave(); }
   if (e.key === 'Escape') {
@@ -4573,8 +4922,39 @@ document.addEventListener('keydown', function(e) {
     if (selectedEl) deselectElement();
   }
 });
-document.getElementById('btn-undo').addEventListener('click', function() { if (typeof Vvveb !== 'undefined' && Vvveb.Undo) Vvveb.Undo.undo(); });
-document.getElementById('btn-redo').addEventListener('click', function() { if (typeof Vvveb !== 'undefined' && Vvveb.Undo) Vvveb.Undo.redo(); });
+function runEditorUndo() {
+  var target = getLatestHistoryUndoTarget();
+  if (target) {
+    removeHistoryItem(target.source, target.idx);
+    return;
+  }
+  if (!(typeof Vvveb !== 'undefined' && Vvveb.Undo)) return;
+  Vvveb.Undo.undo();
+  saveCurrentVariationHtml();
+  recomputeEditorDirty();
+  scheduleDomTreeRefresh();
+  updateSelectionToolbar();
+}
+
+function runEditorRedo() {
+  if (!(typeof Vvveb !== 'undefined' && Vvveb.Undo)) return;
+  Vvveb.Undo.redo();
+  saveCurrentVariationHtml();
+  recomputeEditorDirty();
+  scheduleDomTreeRefresh();
+  updateSelectionToolbar();
+}
+
+document.getElementById('btn-undo').addEventListener('click', function(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  runEditorUndo();
+});
+document.getElementById('btn-redo').addEventListener('click', function(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  runEditorRedo();
+});
 
 function layoutLoadingTooltip(host) {
   var tip = host.querySelector('.ve-pl-tooltip');
@@ -4650,8 +5030,8 @@ function registerCROSections() {
 
 window.addEventListener('load', function() {
   registerCROSections();
-  renderSidebar();
-  renderDomTree(document.getElementById('comp-search').value);
+  switchSectionComponentsTab(currentSectionComponentsTab);
+  renderElementsTree(document.getElementById('comp-search').value);
   vvvebReady = true;
   bindLoadingTooltipPositioning();
 
@@ -4704,12 +5084,22 @@ window.addEventListener('load', function() {
     syncIframeInteractions('iframe-load');
   });
 
-  document.getElementById('sf-drag').addEventListener('click', function(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!selectedEl) return;
-    setDragHandleActive(!dragHandleActive);
-  });
+  var sfMoveUp = document.getElementById('sf-move-up');
+  if (sfMoveUp) {
+    sfMoveUp.addEventListener('click', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      moveSelectedElByDirection(-1);
+    });
+  }
+  var sfMoveDown = document.getElementById('sf-move-down');
+  if (sfMoveDown) {
+    sfMoveDown.addEventListener('click', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      moveSelectedElByDirection(1);
+    });
+  }
   document.getElementById('sf-dup').addEventListener('click', function(e) {
     e.preventDefault();
     e.stopPropagation();