aetherx-ui-inspector 1.2.1 → 1.3.0

package/package.json

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

package/src/core.js

@@ -1,8 +1,12 @@
 import { injectStyles, createCogButton, createOverlay, createTooltip, createPanel, createBoxModelOverlay, updateOverlay, showCopiedFlash, createHoverOverlay, updateHoverOverlay, createSpacingOverlay, hideSpacing, updateSpacing } from './ui.js'
-import { isInspectorElement, getElementStyles, renderTooltip, updateBoxModel, hideBoxModel } from './inspector.js'
+import { isInspectorElement, getElementStyles, getVueComponent, renderTooltip, updateBoxModel, hideBoxModel } from './inspector.js'
 import { renderEditPanel, captureOriginals } from './editor.js'
 import { createChangeTracker, copyToClipboard } from './feedback.js'
 
+const isLocalhost = ['localhost', '127.0.0.1', '::1'].includes(location.hostname)
+  || location.hostname.endsWith('.local')
+  || /^\d+\.\d+\.\d+\.\d+$/.test(location.hostname) // any IP (dev servers)
+
 export function init() {
   if (document.getElementById('__dev_inspector__')) return
 
@@ -207,6 +211,7 @@ export function init() {
       bar.style.display = 'none'
       label.textContent = ''
       updateTabRow(null)
+      updateVueBar(null)
       return
     }
     const tag = el.tagName.toLowerCase()
@@ -219,6 +224,7 @@ export function init() {
     label.textContent = `${tag}${id}${cls}`
     bar.style.display = 'flex'
     updateTabRow(el)
+    updateVueBar(el)
   }
 
   function updateTabRow(el) {
@@ -235,6 +241,32 @@ export function init() {
     classTab?.classList.toggle('active', activeTab === 'class')
   }
 
+  function updateVueBar(el) {
+    const bar     = document.getElementById('di-vue-bar')
+    const nameEl  = document.getElementById('di-vue-comp-name')
+    const vscodeBtn = document.getElementById('di-vscode-btn')
+    if (!bar) return
+    const comp = el ? getVueComponent(el) : null
+    if (!comp) { bar.style.display = 'none'; return }
+    bar.style.display = 'flex'
+    if (nameEl) nameEl.textContent = `<${comp.name}>`
+    if (vscodeBtn) {
+      // Prefer vite-plugin-vue-inspector annotation (path:line:col) for exact jump
+      const vInspector = el.closest?.('[data-v-inspector]')?.dataset?.vInspector
+      let fileTarget = null
+      if (vInspector) fileTarget = `vscode://file/${vInspector}`
+      else if (comp.file) fileTarget = `vscode://file/${comp.file}`
+
+      if (isLocalhost && fileTarget) {
+        vscodeBtn.style.display = 'flex'
+        vscodeBtn.dataset.href = fileTarget
+      } else {
+        vscodeBtn.style.display = 'none'
+        delete vscodeBtn.dataset.href
+      }
+    }
+  }
+
   function renderPanel(el) {
     textEditCleanup()
     const content = document.getElementById('di-panel-content')
@@ -360,6 +392,13 @@ export function init() {
     }
   })
 
+  // ── VS Code link ───────────────────────────────────────────────────────────
+  document.getElementById('di-vscode-btn')?.addEventListener('click', () => {
+    const btn = document.getElementById('di-vscode-btn')
+    const href = btn?.dataset?.href
+    if (href) window.open(href)
+  })
+
   // ── Mode tabs ──────────────────────────────────────────────────────────────
   document.getElementById('di-tab-element')?.addEventListener('click', () => {
     if (activeTab === 'element') return

package/src/inspector.js

@@ -18,6 +18,20 @@ export function isInspectorElement(el) {
   return false
 }
 
+export function getVueComponent(el) {
+  let node = el
+  while (node && node !== document.documentElement) {
+    const instance = node.__vueParentComponent
+    if (instance?.type && typeof instance.type === 'object') {
+      const name = instance.type.__name || instance.type.name || null
+      const file = instance.type.__file || null
+      if (name || file) return { name: name || 'Anonymous', file }
+    }
+    node = node.parentElement
+  }
+  return null
+}
+
 export function getElementStyles(el) {
   const cs = window.getComputedStyle(el)
   const rect = el.getBoundingClientRect()
@@ -43,6 +57,7 @@ export function getElementStyles(el) {
     tag,
     isSvg: el instanceof SVGElement,
     textContent,
+    vueComponent: getVueComponent(el),
     size: {
       width: Math.round(rect.width) + 'px',
       height: Math.round(rect.height) + 'px',
@@ -197,7 +212,7 @@ export function updateBoxModel(bm, el) {
 }
 
 export function renderTooltip(tooltip, styles, x, y) {
-  const { label, size, typography, background, spacing, border, layout, textContent, isSvg } = styles
+  const { label, size, typography, background, spacing, border, layout, textContent, isSvg, vueComponent } = styles
 
   const colorDot = (hex) => hex
     ? `<span class="di-swatch" style="background:${hex};"></span>`
@@ -213,6 +228,15 @@ export function renderTooltip(tooltip, styles, x, y) {
 
   let html = `<div class="di-tag">${label}</div>`
 
+  if (vueComponent) {
+    html += `<div class="di-section">Vue</div>`
+    html += row('component', `<span class="di-vue-name">&lt;${vueComponent.name}&gt;</span>`)
+    if (vueComponent.file) {
+      const fileName = vueComponent.file.replace(/\\/g, '/').split('/').pop()
+      html += row('file', fileName)
+    }
+  }
+
   if (textContent) {
     html += row('text', `"${textContent.length > 28 ? textContent.slice(0,28)+'…' : textContent}"`)
   }

package/src/ui.js

@@ -99,6 +99,7 @@ export function injectStyles() {
       vertical-align: middle;
       margin-right: 4px;
     }
+    #__dev_inspector_tooltip__ .di-vue-name { color: #a78bfa; font-weight: 600; }
 
     /* ── Side edit panel ── */
     #__dev_inspector_panel__ {
@@ -128,6 +129,7 @@ export function injectStyles() {
       min-width: 40px;
     }
     #__dev_inspector_panel__.collapsed .di-element-bar,
+    #__dev_inspector_panel__.collapsed .di-vue-bar,
     #__dev_inspector_panel__.collapsed .di-tab-row,
     #__dev_inspector_panel__.collapsed #di-panel-content,
     #__dev_inspector_panel__.collapsed .di-panel-footer,
@@ -242,6 +244,47 @@ export function injectStyles() {
     .di-reinspect-btn:hover { border-color: #6366f1; color: #818cf8; background: #1e1e2e; }
     .di-reinspect-btn.active { border-color: #6366f1; color: #818cf8; background: #1e1e2e; }
 
+    /* ── Vue component bar ── */
+    .di-vue-bar {
+      padding: 5px 16px;
+      border-bottom: 1px solid #27272a;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-shrink: 0;
+      background: #16162a;
+    }
+    .di-vue-icon { font-size: 11px; color: #7c3aed; flex-shrink: 0; }
+    .di-vue-comp-name {
+      flex: 1;
+      font-family: 'SF Mono', monospace;
+      font-size: 11px;
+      color: #a78bfa;
+      font-weight: 600;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .di-vscode-btn {
+      flex-shrink: 0;
+      padding: 3px 8px;
+      background: #1e2433;
+      border: 1px solid #1e3a5f;
+      border-radius: 6px;
+      color: #5b9bd5;
+      font-size: 10px;
+      font-weight: 500;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      transition: border-color 0.12s, color 0.12s, background 0.12s;
+      font-family: system-ui, sans-serif;
+      white-space: nowrap;
+    }
+    .di-vscode-btn:hover { border-color: #007acc; color: #fff; background: #007acc; }
+    .di-vscode-btn svg { flex-shrink: 0; }
+
     .di-panel-empty {
       flex: 1;
       display: flex;
@@ -784,6 +827,16 @@ 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-vue-bar" id="di-vue-bar" style="display:none;">
+      <span class="di-vue-icon">⬡</span>
+      <span class="di-vue-comp-name" id="di-vue-comp-name"></span>
+      <button class="di-vscode-btn" id="di-vscode-btn" style="display:none;" title="Open in VS Code">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z"/>
+        </svg>
+        Open in VS Code
+      </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>
@@ -827,6 +880,20 @@ export function createBoxModelOverlay() {
   return container
 }
 
+function getVueBadgeLabel(el) {
+  const instance = el.__vueParentComponent
+  if (instance?.type && typeof instance.type === 'object') {
+    const name = instance.type.__name || instance.type.name
+    if (name) return `<${name}>`
+  }
+  const tag = el.tagName.toLowerCase()
+  const id = el.id ? `#${el.id}` : ''
+  const cls = [...el.classList]
+    .filter(c => !c.startsWith('di-') && !c.startsWith('__dev'))
+    .slice(0, 2).map(c => `.${c}`).join('')
+  return `${tag}${id}${cls}`
+}
+
 // Fix 1: use raw viewport coords (fixed positioning needs no scrollY offset)
 export function updateOverlay(overlay, el) {
   if (!el) { overlay.style.display = 'none'; return }
@@ -838,12 +905,7 @@ export function updateOverlay(overlay, el) {
   overlay.style.height = rect.height + 'px'
   const badge = overlay.querySelector('.di-overlay-badge')
   if (badge) {
-    const tag = el.tagName.toLowerCase()
-    const id = el.id ? `#${el.id}` : ''
-    const cls = [...el.classList]
-      .filter(c => !c.startsWith('di-') && !c.startsWith('__dev'))
-      .slice(0, 2).map(c => `.${c}`).join('')
-    badge.textContent = `${tag}${id}${cls}`
+    badge.textContent = getVueBadgeLabel(el)
     // Selected badge always sits above the element (static position)
     badge.style.top = '-22px'
     badge.style.borderRadius = '4px 4px 0 0'
@@ -871,12 +933,7 @@ export function updateHoverOverlay(overlay, el) {
   overlay.style.height = rect.height + 'px'
   const badge = overlay.querySelector('.di-overlay-badge')
   if (badge) {
-    const tag = el.tagName.toLowerCase()
-    const id = el.id ? `#${el.id}` : ''
-    const cls = [...el.classList]
-      .filter(c => !c.startsWith('di-') && !c.startsWith('__dev'))
-      .slice(0, 2).map(c => `.${c}`).join('')
-    badge.textContent = `${tag}${id}${cls}`
+    badge.textContent = getVueBadgeLabel(el)
     // Hover badge always sits below the highlighted element
     badge.style.top = 'calc(100% + 2px)'
     badge.style.borderRadius = '0 0 4px 4px'