aetherx-ui-inspector 1.2.0 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aetherx-ui-inspector",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Universal dev-only UI inspector with live editing and feedback clipboard",
   "type": "module",
   "main": "index.js",

package/src/core.js

@@ -76,6 +76,35 @@ export function init() {
     document.body.style.marginRight = width + 'px'
   }
 
+  // Hides hover overlay and resets selected badge back to its default top position
+  function hideHoverOverlay() {
+    hoverOverlay.style.display = 'none'
+    const selBadge = overlay.querySelector('.di-overlay-badge')
+    if (selBadge) {
+      selBadge.style.top = '-22px'
+      selBadge.style.borderRadius = '4px 4px 0 0'
+    }
+  }
+
+  // Repositions both badges so they never collide when elements are above/below each other
+  function repositionBadges(hovEl) {
+    if (!selectedEl || !hovEl) return
+    const sR = selectedEl.getBoundingClientRect()
+    const hR = hovEl.getBoundingClientRect()
+    const hovAbove = (hR.top + hR.bottom) / 2 < (sR.top + sR.bottom) / 2
+
+    const hovBadge = hoverOverlay.querySelector('.di-overlay-badge')
+    if (hovBadge) {
+      hovBadge.style.top          = hovAbove ? '-22px'              : 'calc(100% + 2px)'
+      hovBadge.style.borderRadius = hovAbove ? '4px 4px 0 0'        : '0 0 4px 4px'
+    }
+    const selBadge = overlay.querySelector('.di-overlay-badge')
+    if (selBadge) {
+      selBadge.style.top          = hovAbove ? 'calc(100% + 2px)'   : '-22px'
+      selBadge.style.borderRadius = hovAbove ? '0 0 4px 4px'        : '4px 4px 0 0'
+    }
+  }
+
   // Animates overlay position updates over `ms` to cover CSS transition duration
   function animateOverlayUpdate(ms = 260) {
     if (!selectedEl) return
@@ -103,7 +132,7 @@ export function init() {
     selectedOriginals = null
     activeTab = 'element'
     overlay.style.display = 'none'
-    hoverOverlay.style.display = 'none'
+    hideHoverOverlay()
     hideSpacing(spacingContainer)
     setElementBar(null)
     stopInspect(true)
@@ -114,7 +143,7 @@ export function init() {
     inspecting = true
     cog.classList.add('active')
     document.body.classList.add('di-inspect-mode')
-    hoverOverlay.style.display = 'none'
+    hideHoverOverlay()
     hideSpacing(spacingContainer)
     // Mark re-inspect button as active if panel is open
     const reinspectBtn = document.getElementById('di-reinspect-btn')
@@ -143,7 +172,7 @@ export function init() {
   function selectElement(el) {
     textEditCleanup()
     activeTab = 'element'
-    hoverOverlay.style.display = 'none'
+    hideHoverOverlay()
     hideSpacing(spacingContainer)
 
     // Stop inspect mode without hiding the selected-element overlay
@@ -458,30 +487,32 @@ export function init() {
   document.addEventListener('mousemove', (e) => {
     if (inspecting || !selectedEl) {
       if (hoverOverlay.style.display !== 'none') {
-        hoverOverlay.style.display = 'none'
+        hideHoverOverlay()
         hideSpacing(spacingContainer)
       }
-      tooltip.style.display = 'none'
+      // Don't touch the tooltip here — inspect-mode handler owns it when inspecting
+      if (!inspecting) tooltip.style.display = 'none'
       return
     }
     const el = e.target
     if (isInspectorElement(el)) {
-      hoverOverlay.style.display = 'none'
+      hideHoverOverlay()
       hideSpacing(spacingContainer)
       tooltip.style.display = 'none'
       return
     }
     if (el === selectedEl) {
       // Hovering the selected element itself — show its tooltip, no spacing lines
-      hoverOverlay.style.display = 'none'
+      hideHoverOverlay()
       hideSpacing(spacingContainer)
       const styles = getElementStyles(el)
       renderTooltip(tooltip, styles, e.clientX, e.clientY)
       return
     }
-    // Hovering a different element — show spacing measurements, hide tooltip
+    // Hovering a different element — show spacing measurements, reposition badges
     updateHoverOverlay(hoverOverlay, el)
     updateSpacing(spacingContainer, selectedEl, el)
+    repositionBadges(el)
     tooltip.style.display = 'none'
   })
 
@@ -529,7 +560,7 @@ export function init() {
       hideBoxModel(bm)
     }
     // Clear hover overlay, spacing, and tooltip on scroll (positions are stale)
-    hoverOverlay.style.display = 'none'
+    hideHoverOverlay()
     hideSpacing(spacingContainer)
     tooltip.style.display = 'none'
   }, true)