aetherx-ui-inspector 1.1.0 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aetherx-ui-inspector",
-  "version": "1.1.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

@@ -23,6 +23,46 @@ export function init() {
   let selectedOriginals = null
   let textEditCleanup   = () => {}
   let isCollapsed       = false
+  let activeTab         = 'element'
+
+  // ── Class stylesheet (for Class tab mode) ─────────────────────────────────
+  let classRules   = {}
+  let classStyleEl = null
+
+  function getClassStyle() {
+    if (!classStyleEl) {
+      classStyleEl = document.createElement('style')
+      classStyleEl.id = '__dev_inspector_class_rules__'
+      document.head.appendChild(classStyleEl)
+    }
+    return classStyleEl
+  }
+
+  function setClassRule(cls, prop, val) {
+    if (!classRules[cls]) classRules[cls] = {}
+    classRules[cls][prop] = val
+    rebuildClassSheet()
+  }
+
+  function removeClassRule(cls, prop) {
+    if (!classRules[cls]) return
+    delete classRules[cls][prop]
+    if (!Object.keys(classRules[cls]).length) delete classRules[cls]
+    rebuildClassSheet()
+  }
+
+  function rebuildClassSheet() {
+    getClassStyle().textContent = Object.entries(classRules)
+      .map(([cls, props]) => {
+        const rules = Object.entries(props).map(([p, v]) => `  ${p}: ${v} !important;`).join('\n')
+        return `.${cls} {\n${rules}\n}`
+      }).join('\n')
+  }
+
+  function getSelectedClass(el) {
+    if (!el) return null
+    return [...el.classList].find(c => !c.startsWith('di-') && !c.startsWith('__dev')) || null
+  }
 
   // ── Body margin sync (panel pushes page instead of covering it) ────────────
   document.body.style.transition = 'margin-right 0.22s cubic-bezier(.4,0,.2,1)'
@@ -36,12 +76,53 @@ 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
+    const end = performance.now() + ms
+    const tick = () => {
+      if (selectedEl) { updateOverlay(overlay, selectedEl); updateBoxModel(bm, selectedEl) }
+      if (performance.now() < end) requestAnimationFrame(tick)
+    }
+    requestAnimationFrame(tick)
+  }
+
   // ── State helpers ──────────────────────────────────────────────────────────
 
   function openPanel() {
     panelOpen = true
     panel.classList.add('open')
     syncBodyMargin()
+    animateOverlayUpdate()
   }
 
   function closePanel() {
@@ -49,8 +130,9 @@ export function init() {
     panel.classList.remove('open')
     selectedEl = null
     selectedOriginals = null
+    activeTab = 'element'
     overlay.style.display = 'none'
-    hoverOverlay.style.display = 'none'
+    hideHoverOverlay()
     hideSpacing(spacingContainer)
     setElementBar(null)
     stopInspect(true)
@@ -61,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')
@@ -89,7 +171,8 @@ export function init() {
 
   function selectElement(el) {
     textEditCleanup()
-    hoverOverlay.style.display = 'none'
+    activeTab = 'element'
+    hideHoverOverlay()
     hideSpacing(spacingContainer)
 
     // Stop inspect mode without hiding the selected-element overlay
@@ -123,6 +206,7 @@ export function init() {
     if (!el) {
       bar.style.display = 'none'
       label.textContent = ''
+      updateTabRow(null)
       return
     }
     const tag = el.tagName.toLowerCase()
@@ -134,6 +218,21 @@ export function init() {
       .join('')
     label.textContent = `${tag}${id}${cls}`
     bar.style.display = 'flex'
+    updateTabRow(el)
+  }
+
+  function updateTabRow(el) {
+    const tabRow   = document.getElementById('di-tab-row')
+    const classTab = document.getElementById('di-tab-class')
+    const classLabel = document.getElementById('di-tab-class-label')
+    if (!tabRow) return
+    if (!el) { tabRow.style.display = 'none'; return }
+    tabRow.style.display = 'flex'
+    const cls = getSelectedClass(el)
+    if (classLabel) classLabel.textContent = cls ? `.${cls}` : 'No class'
+    if (classTab) classTab.disabled = !cls
+    document.getElementById('di-tab-element')?.classList.toggle('active', activeTab === 'element')
+    classTab?.classList.toggle('active', activeTab === 'class')
   }
 
   function renderPanel(el) {
@@ -156,6 +255,15 @@ export function init() {
     if (footer) footer.style.display = 'flex'
     updateFeedbackCount()
 
+    const cls = getSelectedClass(el)
+    const isClassMode = activeTab === 'class' && !!cls
+    const applyStyle = isClassMode
+      ? (prop, val) => setClassRule(cls, prop, val)
+      : (prop, val) => el.style.setProperty(prop, val)
+    const clearStyle = isClassMode
+      ? (prop) => removeClassRule(cls, prop)
+      : (prop) => el.style.removeProperty(prop)
+
     textEditCleanup = renderEditPanel(
       content,
       el,
@@ -171,7 +279,8 @@ export function init() {
         tracker.remove(el, prop)
         updateFeedbackCount()
         if (selectedEl) { updateOverlay(overlay, selectedEl); updateBoxModel(bm, selectedEl) }
-      }
+      },
+      { applyStyle, clearStyle }
     )
   }
 
@@ -251,11 +360,27 @@ export function init() {
     }
   })
 
+  // ── Mode tabs ──────────────────────────────────────────────────────────────
+  document.getElementById('di-tab-element')?.addEventListener('click', () => {
+    if (activeTab === 'element') return
+    activeTab = 'element'
+    updateTabRow(selectedEl)
+    if (selectedEl) renderPanel(selectedEl)
+  })
+
+  document.getElementById('di-tab-class')?.addEventListener('click', () => {
+    if (activeTab === 'class' || !getSelectedClass(selectedEl)) return
+    activeTab = 'class'
+    updateTabRow(selectedEl)
+    if (selectedEl) renderPanel(selectedEl)
+  })
+
   // ── Collapse toggle ────────────────────────────────────────────────────────
   document.getElementById('di-collapse-btn')?.addEventListener('click', () => {
     isCollapsed = !isCollapsed
     panel.classList.toggle('collapsed', isCollapsed)
     syncBodyMargin()
+    animateOverlayUpdate()
   })
 
   // ── Resize handle (drag left edge to resize panel width) ───────────────────
@@ -281,6 +406,7 @@ export function init() {
       const newWidth = Math.min(580, Math.max(220, resizeStartWidth + dx))
       panel.style.width = newWidth + 'px'
       syncBodyMargin()
+      if (selectedEl) { updateOverlay(overlay, selectedEl); updateBoxModel(bm, selectedEl) }
     })
 
     document.addEventListener('mouseup', () => {
@@ -357,23 +483,37 @@ export function init() {
     renderTooltip(tooltip, styles, e.clientX, e.clientY)
   })
 
-  // ── Hover while selected: spacing measurements ────────────────────────────
+  // ── Hover while selected: spacing + tooltip on self ──────────────────────
   document.addEventListener('mousemove', (e) => {
     if (inspecting || !selectedEl) {
       if (hoverOverlay.style.display !== 'none') {
-        hoverOverlay.style.display = 'none'
+        hideHoverOverlay()
         hideSpacing(spacingContainer)
       }
+      // 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) || el === selectedEl) {
-      hoverOverlay.style.display = 'none'
+    if (isInspectorElement(el)) {
+      hideHoverOverlay()
+      hideSpacing(spacingContainer)
+      tooltip.style.display = 'none'
+      return
+    }
+    if (el === selectedEl) {
+      // Hovering the selected element itself — show its tooltip, no spacing lines
+      hideHoverOverlay()
       hideSpacing(spacingContainer)
+      const styles = getElementStyles(el)
+      renderTooltip(tooltip, styles, e.clientX, e.clientY)
       return
     }
+    // Hovering a different element — show spacing measurements, reposition badges
     updateHoverOverlay(hoverOverlay, el)
     updateSpacing(spacingContainer, selectedEl, el)
+    repositionBadges(el)
+    tooltip.style.display = 'none'
   })
 
   // ── Click: select element (works whenever panel is open OR inspect is active)
@@ -386,12 +526,25 @@ export function init() {
     selectElement(el)
   }, true)
 
-  // ── Escape key ─────────────────────────────────────────────────────────────
+  // ── Keyboard shortcuts ─────────────────────────────────────────────────────
   document.addEventListener('keydown', (e) => {
+    // Skip if user is typing inside an input / textarea / contenteditable
+    const tag = document.activeElement?.tagName.toLowerCase()
+    const isTyping = ['input', 'textarea', 'select'].includes(tag)
+      || document.activeElement?.isContentEditable
+
     if (e.key === 'Escape') {
       if (inspecting) stopInspect()
       else if (panelOpen) closePanel()
     }
+
+    // i — toggle inspect mode while panel is open
+    if ((e.key === 'i' || e.key === 'I') && !isTyping && !e.metaKey && !e.ctrlKey && !e.altKey) {
+      if (panelOpen) {
+        if (inspecting) stopInspect()
+        else startInspect()
+      }
+    }
   })
 
   // ── Fix 1: scroll — update overlay using fresh getBoundingClientRect ────────
@@ -406,9 +559,10 @@ export function init() {
       tooltip.style.display = 'none'
       hideBoxModel(bm)
     }
-    // Clear hover overlay and spacing on scroll (positions are stale)
-    hoverOverlay.style.display = 'none'
+    // Clear hover overlay, spacing, and tooltip on scroll (positions are stale)
+    hideHoverOverlay()
     hideSpacing(spacingContainer)
+    tooltip.style.display = 'none'
   }, true)
 
   return {
@@ -421,6 +575,9 @@ export function init() {
       bm.remove()
       hoverOverlay.remove()
       spacingContainer.remove()
+      classStyleEl?.remove()
+      classStyleEl = null
+      classRules = {}
       document.getElementById('__dev_inspector_styles__')?.remove()
       document.body.classList.remove('di-inspect-mode')
       document.body.style.marginRight = ''

package/src/editor.js

@@ -3,11 +3,14 @@ import { getElementStyles } from './inspector.js'
 
 const ALL_PROPS = [
   'color', 'background-color', 'font-size', 'font-weight', 'line-height',
-  'text-align', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
+  'font-style', 'text-align', 'text-decoration', 'text-transform', 'letter-spacing',
+  'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
   'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
+  'width', 'height', 'min-width', 'max-width', 'min-height', 'max-height',
   'border-radius', 'border-width', 'border-style', 'border-color',
-  'display', 'flex-direction', 'justify-content', 'align-items', 'gap',
-  'width', 'height', 'opacity',
+  'position', 'top', 'right', 'bottom', 'left', 'z-index',
+  'display', 'flex-direction', 'justify-content', 'align-items', 'gap', 'overflow',
+  'opacity', 'box-shadow', 'object-fit',
 ]
 
 export function captureOriginals(el) {
@@ -23,7 +26,9 @@ export function captureOriginals(el) {
   return map
 }
 
-export function renderEditPanel(panelContent, el, originals, onChange, onReset) {
+export function renderEditPanel(panelContent, el, originals, onChange, onReset, { applyStyle, clearStyle } = {}) {
+  const _apply = applyStyle || ((p, v) => el.style.setProperty(p, v))
+  const _clear = clearStyle || ((p) => el.style.removeProperty(p))
   const styles = getElementStyles(el)
   const { typography, background, spacing, border, layout, dimensions, opacity } = styles
   const cs = window.getComputedStyle(el)
@@ -86,6 +91,20 @@ export function renderEditPanel(panelContent, el, originals, onChange, onReset)
       ${resetBtn(prop)}
     </div>`
 
+  // Plain text input — for values like "none", "auto", "100%", "0 4px 8px rgba(...)"
+  const textField = (label, prop, value) => {
+    const orig = originals[prop] || ''
+    return `
+      <div class="di-field">
+        <label>${label}</label>
+        <div class="di-field-control">
+          <input class="di-input" data-prop="${prop}" data-original="${escAttr(orig)}"
+            value="${escAttr(value || '')}" placeholder="auto" />
+        </div>
+        ${resetBtn(prop)}
+      </div>`
+  }
+
   // Spacing grid cell with mini stepper
   const spacingCell = (prop, val, label) => {
     const orig = originals[prop] || ''
@@ -135,8 +154,14 @@ export function renderEditPanel(panelContent, el, originals, onChange, onReset)
       </div>
     </div>` : ''
 
+  // ── Element type flags ────────────────────────────────────────────────────
+  const isImg  = el.tagName === 'IMG'
+  const isSvg  = el instanceof SVGElement
+  const isTextEl = ['p','h1','h2','h3','h4','h5','h6','span','a','li','td','th',
+    'label','button','em','strong','small','code','pre','blockquote',
+  ].includes(el.tagName.toLowerCase())
+
   // ── Image section (Fix 1) ─────────────────────────────────────────────────
-  const isImg = el.tagName === 'IMG'
   const imgSection = isImg ? `
     ${section('Image')}
     <div style="padding:8px 16px 12px;display:flex;flex-direction:column;gap:8px;">
@@ -153,6 +178,10 @@ export function renderEditPanel(panelContent, el, originals, onChange, onReset)
     ${section('Size')}
     ${numberField('width', 'width', dimensions.width, 'px')}
     ${numberField('height', 'height', dimensions.height, 'px')}
+    ${textField('min-width', 'min-width', cs.minWidth)}
+    ${textField('max-width', 'max-width', cs.maxWidth)}
+    ${textField('min-height', 'min-height', cs.minHeight)}
+    ${textField('max-height', 'max-height', cs.maxHeight)}
   `
 
   // ── Typography ────────────────────────────────────────────────────────────
@@ -160,12 +189,19 @@ export function renderEditPanel(panelContent, el, originals, onChange, onReset)
   const typoSection = `
     ${section('Typography')}
     ${numberField('font-size', 'font-size', typography.fontSize, 'px')}
+    ${selectField('font-style', 'font-style', cs.fontStyle,
+      ['normal','italic','oblique'])}
     ${selectField('font-weight', 'font-weight', typography.fontWeight,
       ['100','200','300','400','500','600','700','800','900'])}
     ${numberField('line-height', 'line-height', typography.lineHeight, 'px')}
     ${colorField('color', 'color', typography.colorHex, origColorHex)}
     ${selectField('text-align', 'text-align', typography.textAlign,
       ['left','center','right','justify'])}
+    ${selectField('decoration', 'text-decoration', cs.textDecorationLine,
+      ['none','underline','line-through','overline'])}
+    ${selectField('transform', 'text-transform', cs.textTransform,
+      ['none','uppercase','lowercase','capitalize'])}
+    ${textField('letter-spacing', 'letter-spacing', cs.letterSpacing)}
   `
 
   // ── Background ────────────────────────────────────────────────────────────
@@ -210,7 +246,7 @@ export function renderEditPanel(panelContent, el, originals, onChange, onReset)
   const layoutSection = `
     ${section('Layout')}
     ${selectField('display', 'display', layout.display,
-      ['block','flex','grid','inline-flex','inline-block','none'])}
+      ['block','flex','grid','inline-flex','inline-block','inline','none'])}
     ${isFlex ? `
       ${selectField('direction', 'flex-direction', layout.flexDirection,
         ['row','row-reverse','column','column-reverse'])}
@@ -220,30 +256,72 @@ export function renderEditPanel(panelContent, el, originals, onChange, onReset)
         ['flex-start','flex-end','center','stretch','baseline'])}
     ` : ''}
     ${(isFlex || isGrid) ? numberField('gap', 'gap', layout.gap, 'px') : ''}
+    ${selectField('overflow', 'overflow', cs.overflow,
+      ['visible','hidden','auto','scroll','clip'])}
+  `
+
+  // ── Position ──────────────────────────────────────────────────────────────
+  const isPositioned = cs.position !== 'static'
+  const posSection = `
+    ${section('Position')}
+    ${selectField('position', 'position', cs.position,
+      ['static','relative','absolute','fixed','sticky'])}
+    ${isPositioned ? `
+      ${textField('top', 'top', cs.top)}
+      ${textField('right', 'right', cs.right)}
+      ${textField('bottom', 'bottom', cs.bottom)}
+      ${textField('left', 'left', cs.left)}
+    ` : ''}
+    ${textField('z-index', 'z-index', cs.zIndex === 'auto' ? 'auto' : cs.zIndex)}
   `
 
   // ── Misc ──────────────────────────────────────────────────────────────────
   const miscSection = `
     ${section('Misc')}
     ${numberField('opacity', 'opacity', opacity)}
+    ${textField('box-shadow', 'box-shadow', cs.boxShadow === 'none' ? '' : cs.boxShadow)}
+    ${isImg ? selectField('object-fit', 'object-fit', cs.objectFit,
+      ['fill','contain','cover','none','scale-down']) : ''}
+  `
+
+  // SVGs: show color only instead of full typography
+  const origColorHexForSvg = colorToHex(originals['color'])
+  const svgColorSection = `
+    ${section('Color')}
+    ${colorField('color', 'color', typography.colorHex, origColorHexForSvg)}
   `
 
-  panelContent.innerHTML = `
+  // Typography visibility: hidden for images, color-only for SVGs, full for everything else
+  const typoRendered = isImg ? '' : isSvg ? svgColorSection : typoSection
+
+  // Section order: text elements get typography first for quick access
+  panelContent.innerHTML = isTextEl ? `
+    ${textSection}
+    ${typoRendered}
+    ${bgSection}
+    ${sizeSection}
+    ${spacingSection}
+    ${borderSection}
+    ${layoutSection}
+    ${posSection}
+    ${miscSection}
+  ` : `
     ${imgSection}
     ${textSection}
     ${sizeSection}
-    ${typoSection}
+    ${typoRendered}
     ${bgSection}
     ${spacingSection}
     ${borderSection}
     ${layoutSection}
+    ${posSection}
     ${miscSection}
   `
 
   // ── Wire: regular inputs ───────────────────────────────────────────────────
   panelContent.querySelectorAll('.di-input[data-prop]').forEach(input => {
-    input.addEventListener('input', () => applyChange(input, el, onChange, originals))
-    input.addEventListener('change', () => applyChange(input, el, onChange, originals))
+    input.addEventListener('input', () => applyChange(input, el, onChange, originals, _apply))
+    input.addEventListener('change', () => applyChange(input, el, onChange, originals, _apply))
   })
 
   // ── Wire: color pickers ───────────────────────────────────────────────────
@@ -255,7 +333,7 @@ export function renderEditPanel(panelContent, el, originals, onChange, onReset)
     picker.addEventListener('input', () => {
       if (textBox) textBox.value = picker.value
       if (swatch) swatch.style.background = picker.value
-      applyColorChange(picker.dataset.prop, picker.value, el, onChange, originals)
+      applyColorChange(picker.dataset.prop, picker.value, el, onChange, originals, _apply)
       markResetBtn(picker.dataset.prop, picker.value, picker.dataset.original)
     })
 
@@ -265,7 +343,7 @@ export function renderEditPanel(panelContent, el, originals, onChange, onReset)
         if (/^#[0-9a-fA-F]{3,6}$/.test(val)) {
           picker.value = val
           swatch.style.background = val
-          applyColorChange(picker.dataset.prop, val, el, onChange, originals)
+          applyColorChange(picker.dataset.prop, val, el, onChange, originals, _apply)
           markResetBtn(textBox.dataset.prop, val, textBox.dataset.original)
         }
       })
@@ -281,11 +359,11 @@ export function renderEditPanel(panelContent, el, originals, onChange, onReset)
       const delta = parseFloat(btn.dataset.step)
       const current = parseFloat(input.value) || 0
       input.value = round(current + delta)
-      applyChange(input, el, onChange, originals)
+      applyChange(input, el, onChange, originals, _apply)
     })
   })
 
-  // ── Wire: arrow keys on numeric inputs (Fix 1) ────────────────────────────
+  // ── Wire: arrow keys on numeric inputs ────────────────────────────────────
   panelContent.querySelectorAll('.di-number-input').forEach(input => {
     input.addEventListener('keydown', (e) => {
       if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return
@@ -294,7 +372,7 @@ export function renderEditPanel(panelContent, el, originals, onChange, onReset)
       const delta = e.key === 'ArrowUp' ? step : -step
       const current = parseFloat(input.value) || 0
       input.value = round(current + delta)
-      applyChange(input, el, onChange, originals)
+      applyChange(input, el, onChange, originals, _apply)
     })
   })
 
@@ -302,7 +380,7 @@ export function renderEditPanel(panelContent, el, originals, onChange, onReset)
   panelContent.querySelectorAll('.di-reset-btn[data-reset-prop]').forEach(btn => {
     btn.addEventListener('click', () => {
       const prop = btn.dataset.resetProp
-      el.style.removeProperty(prop)
+      _clear(prop)
       const restored = window.getComputedStyle(el).getPropertyValue(prop).trim()
 
       const input = panelContent.querySelector(`.di-input[data-prop="${prop}"]`)
@@ -382,7 +460,7 @@ export function renderEditPanel(panelContent, el, originals, onChange, onReset)
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
-function applyChange(input, el, onChange, originals) {
+function applyChange(input, el, onChange, originals, applyStyleFn) {
   const prop = input.dataset.prop
   const unit = input.dataset.unit || ''
   const rawVal = input.value.trim()
@@ -400,14 +478,14 @@ function applyChange(input, el, onChange, originals) {
   }
 
   const oldValue = el.style.getPropertyValue(prop) || window.getComputedStyle(el).getPropertyValue(prop)
-  el.style.setProperty(prop, value)
+  applyStyleFn(prop, value)
   onChange(el, prop, oldValue, value)
   markResetBtn(prop, value, originals[prop])
 }
 
-function applyColorChange(prop, value, el, onChange, originals) {
+function applyColorChange(prop, value, el, onChange, originals, applyStyleFn) {
   const oldValue = el.style.getPropertyValue(prop) || window.getComputedStyle(el).getPropertyValue(prop)
-  el.style.setProperty(prop, value)
+  applyStyleFn(prop, value)
   onChange(el, prop, colorToHex(oldValue) || oldValue, value)
 }
 
@@ -492,6 +570,10 @@ function escHtml(str) {
   return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
 }
 
+function escAttr(str) {
+  return String(str || '').replace(/"/g, '&quot;').replace(/</g, '&lt;')
+}
+
 function camelize(str) {
   return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase())
 }

package/src/feedback.js

@@ -61,22 +61,22 @@ export function createChangeTracker() {
       grouped[selector].push({ property, from, to })
     })
 
-    const lines = ['UI Feedback Summary', '===================', '']
+    const lines = [
+      '## UI Feedback Summary',
+      '',
+      `> ${changes.length} change${changes.length === 1 ? '' : 's'} · ${new Date().toLocaleString()}`,
+      '',
+    ]
 
     Object.entries(grouped).forEach(([selector, props]) => {
-      lines.push(`[${selector}]`)
+      lines.push(`### \`${selector}\``)
       props.forEach(({ property, from, to }) => {
-        const fromDisplay = from || '(none)'
-        const toDisplay = to || '(none)'
-        lines.push(`  ${property}: ${fromDisplay} → ${toDisplay}`)
+        lines.push(`- **${property}**: \`${from || '(none)'}\` → \`${to || '(none)'}\``)
       })
       lines.push('')
     })
 
-    lines.push(`Total changes: ${changes.length}`)
-    lines.push(`Captured: ${new Date().toLocaleString()}`)
-
-    return lines.join('\n')
+    return lines.join('\n').trimEnd()
   }
 
   function remove(el, property) {

package/src/inspector.js

@@ -41,6 +41,7 @@ export function getElementStyles(el) {
   return {
     label,
     tag,
+    isSvg: el instanceof SVGElement,
     textContent,
     size: {
       width: Math.round(rect.width) + 'px',
@@ -196,7 +197,7 @@ export function updateBoxModel(bm, el) {
 }
 
 export function renderTooltip(tooltip, styles, x, y) {
-  const { label, size, typography, background, spacing, border, layout, textContent } = styles
+  const { label, size, typography, background, spacing, border, layout, textContent, isSvg } = styles
 
   const colorDot = (hex) => hex
     ? `<span class="di-swatch" style="background:${hex};"></span>`
@@ -205,6 +206,7 @@ export function renderTooltip(tooltip, styles, x, y) {
   const row = (key, val) =>
     `<div class="di-row"><span class="di-key">${key}</span><span class="di-val">${val}</span></div>`
 
+  const isImg  = styles.tag === 'img'
   const isText = ['p','h1','h2','h3','h4','h5','h6','span','a','li','td','th','label','button'].includes(styles.tag)
   const isFlex = layout.display === 'flex'
   const isGrid = layout.display === 'grid'
@@ -217,7 +219,8 @@ export function renderTooltip(tooltip, styles, x, y) {
 
   html += row('size', `${size.width} × ${size.height}`)
 
-  if (isText || typography.fontSize !== '0px') {
+  // Typography: skip for images and SVGs
+  if (!isImg && !isSvg && (isText || typography.fontSize !== '0px')) {
     html += `<div class="di-section">Typography</div>`
     html += row('font', typography.fontFamily)
     html += row('size', typography.fontSize)

package/src/ui.js

@@ -128,6 +128,7 @@ export function injectStyles() {
       min-width: 40px;
     }
     #__dev_inspector_panel__.collapsed .di-element-bar,
+    #__dev_inspector_panel__.collapsed .di-tab-row,
     #__dev_inspector_panel__.collapsed #di-panel-content,
     #__dev_inspector_panel__.collapsed .di-panel-footer,
     #__dev_inspector_panel__.collapsed .di-panel-header h3 {
@@ -702,6 +703,32 @@ export function injectStyles() {
       line-height: 1.6;
     }
 
+    /* ── Mode tabs (Element / Class) ── */
+    .di-tab-row {
+      display: flex;
+      padding: 6px 10px;
+      gap: 4px;
+      border-bottom: 1px solid #27272a;
+      flex-shrink: 0;
+      background: #18181b;
+    }
+    .di-tab {
+      padding: 4px 10px;
+      border-radius: 6px;
+      border: 1px solid transparent;
+      background: transparent;
+      color: #71717a;
+      font-size: 11px;
+      font-weight: 500;
+      cursor: pointer;
+      font-family: 'SF Mono', 'Fira Code', monospace;
+      transition: color 0.12s, background 0.12s, border-color 0.12s;
+      white-space: nowrap;
+    }
+    .di-tab:hover:not(:disabled) { color: #e4e4e7; background: #27272a; }
+    .di-tab.active { background: #27272a; border-color: #6366f1; color: #818cf8; }
+    .di-tab:disabled { opacity: 0.35; cursor: not-allowed; }
+
     /* ── Inspect cursor mode ── */
     body.di-inspect-mode * { cursor: crosshair !important; }
   `
@@ -757,6 +784,10 @@ export function createPanel() {
       <span class="di-element-label" id="di-element-label"></span>
       <button class="di-reinspect-btn" id="di-reinspect-btn">↖ Pick</button>
     </div>
+    <div class="di-tab-row" id="di-tab-row" style="display:none;">
+      <button class="di-tab active" id="di-tab-element">Element</button>
+      <button class="di-tab" id="di-tab-class"><span id="di-tab-class-label">.class</span></button>
+    </div>
     <div id="di-panel-content">
       <div class="di-panel-empty">
         <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
@@ -813,13 +844,9 @@ export function updateOverlay(overlay, el) {
       .filter(c => !c.startsWith('di-') && !c.startsWith('__dev'))
       .slice(0, 2).map(c => `.${c}`).join('')
     badge.textContent = `${tag}${id}${cls}`
-    if (rect.top < 26) {
-      badge.style.top = 'calc(100% + 2px)'
-      badge.style.borderRadius = '0 0 4px 4px'
-    } else {
-      badge.style.top = '-22px'
-      badge.style.borderRadius = '4px 4px 0 0'
-    }
+    // Selected badge always sits above the element (static position)
+    badge.style.top = '-22px'
+    badge.style.borderRadius = '4px 4px 0 0'
   }
 }
 
@@ -850,13 +877,9 @@ export function updateHoverOverlay(overlay, el) {
       .filter(c => !c.startsWith('di-') && !c.startsWith('__dev'))
       .slice(0, 2).map(c => `.${c}`).join('')
     badge.textContent = `${tag}${id}${cls}`
-    if (rect.top < 26) {
-      badge.style.top = 'calc(100% + 2px)'
-      badge.style.borderRadius = '0 0 4px 4px'
-    } else {
-      badge.style.top = '-22px'
-      badge.style.borderRadius = '4px 4px 0 0'
-    }
+    // Hover badge always sits below the highlighted element
+    badge.style.top = 'calc(100% + 2px)'
+    badge.style.borderRadius = '0 0 4px 4px'
   }
 }
 
@@ -882,28 +905,47 @@ export function updateSpacing(container, selEl, hovEl) {
   const vOverlap = sR.bottom > hR.top && hR.bottom > sR.top
   const lines = []
 
-  if (!hOverlap) {
+  if (!hOverlap && !vOverlap) {
+    // ── Diagonal: L-shaped measurement anchored at the nearest corner ─────────
+    const isBelowV = hR.top >= sR.bottom
+    const isRightH = hR.left >= sR.right
+
+    const vGap = Math.round(isBelowV ? hR.top - sR.bottom : sR.top - hR.bottom)
+    const hGap = Math.round(isRightH ? hR.left - sR.right : sR.left - hR.right)
+
+    // Corner of the L: sR's nearest horizontal edge × hR's nearest vertical edge
+    const cornerX = isRightH ? sR.right : sR.left
+    const cornerY = isBelowV ? hR.top   : hR.bottom
+
+    // Vertical segment: from sR's bottom/top down/up to cornerY
+    const vY1 = isBelowV ? sR.bottom : cornerY
+    const vY2 = isBelowV ? cornerY   : sR.top
+    if (vGap > 0) lines.push({ x: cornerX - 0.5, y: vY1, w: 1, h: vY2 - vY1, label: vGap + 'px' })
+
+    // Horizontal segment: from cornerX across to hR's nearest edge, at cornerY
+    const hX1 = isRightH ? cornerX  : hR.right
+    const hX2 = isRightH ? hR.left  : cornerX
+    if (hGap > 0) lines.push({ x: hX1, y: cornerY - 0.5, w: hX2 - hX1, h: 1, label: hGap + 'px' })
+
+  } else if (!hOverlap) {
+    // ── Side by side (vertical overlap): single horizontal gap line ───────────
     const isRight = hR.left > sR.right
     const x1 = isRight ? sR.right : hR.right
-    const x2 = isRight ? hR.left : sR.left
+    const x2 = isRight ? hR.left  : sR.left
     const gap = Math.round(x2 - x1)
     if (gap > 0) {
-      const y = vOverlap
-        ? (Math.max(sR.top, hR.top) + Math.min(sR.bottom, hR.bottom)) / 2
-        : (sR.top + sR.bottom) / 2
+      const y = (Math.max(sR.top, hR.top) + Math.min(sR.bottom, hR.bottom)) / 2
       lines.push({ x: x1, y: y - 0.5, w: x2 - x1, h: 1, label: gap + 'px' })
     }
-  }
 
-  if (!vOverlap) {
+  } else if (!vOverlap) {
+    // ── Stacked (horizontal overlap): single vertical gap line ────────────────
     const isBelow = hR.top > sR.bottom
     const y1 = isBelow ? sR.bottom : hR.bottom
-    const y2 = isBelow ? hR.top : sR.top
+    const y2 = isBelow ? hR.top    : sR.top
     const gap = Math.round(y2 - y1)
     if (gap > 0) {
-      const x = hOverlap
-        ? (Math.max(sR.left, hR.left) + Math.min(sR.right, hR.right)) / 2
-        : (sR.left + sR.right) / 2
+      const x = (Math.max(sR.left, hR.left) + Math.min(sR.right, hR.right)) / 2
       lines.push({ x: x - 0.5, y: y1, w: 1, h: y2 - y1, label: gap + 'px' })
     }
   }