aetherx-ui-inspector 1.0.0

package/index.js

@@ -0,0 +1,15 @@
+import { init } from './src/core.js'
+
+// Auto-init: just importing this file is enough.
+// Only mounts if NODE_ENV is not 'production'.
+if (typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') {
+  if (typeof window !== 'undefined') {
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => init())
+    } else {
+      init()
+    }
+  }
+}
+
+export { init }

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "aetherx-ui-inspector",
+  "version": "1.0.0",
+  "description": "Universal dev-only UI inspector with live editing and feedback clipboard",
+  "type": "module",
+  "main": "index.js",
+  "module": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./react": "./react/index.jsx",
+    "./vue": "./vue/index.vue",
+    "./auto": "./index.js"
+  },
+  "files": [
+    "src",
+    "react",
+    "vue",
+    "index.js"
+  ],
+  "keywords": [
+    "dev",
+    "inspector",
+    "ui",
+    "debug",
+    "design",
+    "feedback",
+    "css"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "vue": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": { "optional": true },
+    "vue": { "optional": true }
+  }
+}

package/react/index.jsx

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from 'react'
+import { init } from '../src/core.js'
+
+/**
+ * React wrapper for dev-inspector.
+ *
+ * Usage (e.g. in app/layout.jsx or _app.jsx):
+ *   import DevInspector from 'dev-inspector/react'
+ *   ...
+ *   {process.env.NODE_ENV === 'development' && <DevInspector />}
+ */
+export default function DevInspector() {
+  const instanceRef = useRef(null)
+
+  useEffect(() => {
+    instanceRef.current = init()
+    return () => {
+      instanceRef.current?.destroy()
+    }
+  }, [])
+
+  return null
+}

package/src/core.js

@@ -0,0 +1,398 @@
+import { injectStyles, createCogButton, createOverlay, createTooltip, createPanel, createBoxModelOverlay, updateOverlay, showCopiedFlash } from './ui.js'
+import { isInspectorElement, getElementStyles, renderTooltip, updateBoxModel, hideBoxModel } from './inspector.js'
+import { renderEditPanel, captureOriginals } from './editor.js'
+import { createChangeTracker, copyToClipboard } from './feedback.js'
+
+export function init() {
+  if (document.getElementById('__dev_inspector__')) return
+
+  injectStyles()
+
+  const cog      = createCogButton()
+  const overlay  = createOverlay()
+  const tooltip  = createTooltip()
+  const panel    = createPanel()
+  const bm       = createBoxModelOverlay()
+  const tracker  = createChangeTracker()
+
+  let inspecting        = false
+  let panelOpen         = false
+  let selectedEl        = null
+  let selectedOriginals = null
+  let textEditCleanup   = () => {}
+  let isCollapsed       = false
+
+  // ── Body margin sync (panel pushes page instead of covering it) ────────────
+  document.body.style.transition = 'margin-right 0.22s cubic-bezier(.4,0,.2,1)'
+
+  function syncBodyMargin() {
+    if (!panelOpen) {
+      document.body.style.marginRight = ''
+      return
+    }
+    const width = isCollapsed ? 40 : panel.offsetWidth
+    document.body.style.marginRight = width + 'px'
+  }
+
+  // ── State helpers ──────────────────────────────────────────────────────────
+
+  function openPanel() {
+    panelOpen = true
+    panel.classList.add('open')
+    syncBodyMargin()
+  }
+
+  function closePanel() {
+    panelOpen = false
+    panel.classList.remove('open')
+    selectedEl = null
+    selectedOriginals = null
+    overlay.style.display = 'none'
+    setElementBar(null)
+    stopInspect(true)
+    syncBodyMargin()
+  }
+
+  function startInspect() {
+    inspecting = true
+    cog.classList.add('active')
+    document.body.classList.add('di-inspect-mode')
+    // Mark re-inspect button as active if panel is open
+    const reinspectBtn = document.getElementById('di-reinspect-btn')
+    if (reinspectBtn) reinspectBtn.classList.add('active')
+  }
+
+  function stopInspect(clearSelected = false) {
+    inspecting = false
+    cog.classList.remove('active')
+    document.body.classList.remove('di-inspect-mode')
+    tooltip.style.display = 'none'
+    hideBoxModel(bm)
+
+    const reinspectBtn = document.getElementById('di-reinspect-btn')
+    if (reinspectBtn) reinspectBtn.classList.remove('active')
+
+    if (clearSelected || !selectedEl) {
+      overlay.style.display = 'none'
+      overlay.classList.remove('selected')
+    } else {
+      // Re-show box model for the still-selected element
+      updateBoxModel(bm, selectedEl)
+    }
+  }
+
+  function selectElement(el) {
+    textEditCleanup()
+
+    // Stop inspect mode without hiding the selected-element overlay
+    inspecting = false
+    cog.classList.remove('active')
+    document.body.classList.remove('di-inspect-mode')
+    tooltip.style.display = 'none'
+    const reinspectBtn = document.getElementById('di-reinspect-btn')
+    if (reinspectBtn) reinspectBtn.classList.remove('active')
+
+    selectedEl = el
+    selectedOriginals = captureOriginals(el)
+
+    // Show green border overlay + box model on selected element
+    overlay.classList.remove('selected')
+    overlay.classList.add('selected')
+    updateOverlay(overlay, el)
+    updateBoxModel(bm, el)
+
+    // Update element bar
+    setElementBar(el)
+
+    renderPanel(el)
+    openPanel()
+  }
+
+  function setElementBar(el) {
+    const bar = document.getElementById('di-element-bar')
+    const label = document.getElementById('di-element-label')
+    if (!bar || !label) return
+    if (!el) {
+      bar.style.display = 'none'
+      label.textContent = ''
+      return
+    }
+    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('')
+    label.textContent = `${tag}${id}${cls}`
+    bar.style.display = 'flex'
+  }
+
+  function renderPanel(el) {
+    textEditCleanup()
+    const content = document.getElementById('di-panel-content')
+    const footer  = document.getElementById('di-panel-footer')
+
+    if (!el) {
+      content.innerHTML = `
+        <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">
+            <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+          </svg>
+          <p>Click any element on the page to inspect and edit it</p>
+        </div>`
+      if (footer) footer.style.display = 'none'
+      return
+    }
+
+    if (footer) footer.style.display = 'flex'
+    updateFeedbackCount()
+
+    textEditCleanup = renderEditPanel(
+      content,
+      el,
+      selectedOriginals,
+      // onChange
+      (el, prop, from, to) => {
+        tracker.track(el, prop, from, to)
+        updateFeedbackCount()
+        if (selectedEl) { updateOverlay(overlay, selectedEl); updateBoxModel(bm, selectedEl) }
+      },
+      // onReset
+      (el, prop, restoredVal) => {
+        tracker.remove(el, prop)
+        updateFeedbackCount()
+        if (selectedEl) { updateOverlay(overlay, selectedEl); updateBoxModel(bm, selectedEl) }
+      }
+    )
+  }
+
+  let changesLogOpen = false
+
+  function updateFeedbackCount() {
+    const count = tracker.count()
+    const countEl  = document.getElementById('di-feedback-count')
+    const toggleEl = document.getElementById('di-changes-toggle')
+    const arrowEl  = document.getElementById('di-toggle-arrow')
+
+    if (countEl) {
+      countEl.textContent = count > 0
+        ? `${count} change${count === 1 ? '' : 's'} tracked`
+        : 'No changes yet'
+    }
+    if (toggleEl) toggleEl.classList.toggle('has-changes', count > 0)
+
+    // Re-render log content if it's currently open
+    if (changesLogOpen) renderChangesLog()
+
+    // Close log automatically if all changes cleared
+    if (count === 0 && changesLogOpen) {
+      changesLogOpen = false
+      const log = document.getElementById('di-changes-log')
+      if (log) log.style.display = 'none'
+      if (arrowEl) arrowEl.classList.remove('open')
+    }
+  }
+
+  function renderChangesLog() {
+    const list = document.getElementById('di-changes-list')
+    if (!list) return
+
+    const changes = tracker.getAll()
+    if (changes.length === 0) { list.innerHTML = ''; return }
+
+    // Group by selector
+    const grouped = {}
+    changes.forEach(({ selector, property, from, to }) => {
+      if (!grouped[selector]) grouped[selector] = []
+      grouped[selector].push({ property, from, to })
+    })
+
+    list.innerHTML = Object.entries(grouped).map(([selector, props]) => `
+      <div class="di-change-group">
+        <div class="di-change-selector">${selector}</div>
+        ${props.map(({ property, from, to }) => `
+          <div class="di-change-row">
+            <span class="di-change-prop">${property}</span>
+            <span class="di-change-from">${from || '—'}</span>
+            <span class="di-change-arrow">→</span>
+            <span class="di-change-to">${to || '—'}</span>
+          </div>`).join('')}
+      </div>`).join('')
+  }
+
+  // ── Cog button ─────────────────────────────────────────────────────────────
+  cog.addEventListener('click', () => {
+    if (panelOpen) {
+      closePanel()
+    } else {
+      openPanel()
+      startInspect()
+    }
+  })
+
+  // ── Panel close button ─────────────────────────────────────────────────────
+  document.getElementById('di-close-panel')?.addEventListener('click', closePanel)
+
+  // ── Fix 2: Re-inspect button ───────────────────────────────────────────────
+  document.getElementById('di-reinspect-btn')?.addEventListener('click', () => {
+    if (inspecting) {
+      stopInspect()
+    } else {
+      startInspect()
+    }
+  })
+
+  // ── Collapse toggle ────────────────────────────────────────────────────────
+  document.getElementById('di-collapse-btn')?.addEventListener('click', () => {
+    isCollapsed = !isCollapsed
+    panel.classList.toggle('collapsed', isCollapsed)
+    syncBodyMargin()
+  })
+
+  // ── Resize handle (drag left edge to resize panel width) ───────────────────
+  const resizeHandle = document.getElementById('di-resize-handle')
+  if (resizeHandle) {
+    let isResizing = false
+    let resizeStartX = 0
+    let resizeStartWidth = 0
+
+    resizeHandle.addEventListener('mousedown', (e) => {
+      isResizing = true
+      resizeStartX = e.clientX
+      resizeStartWidth = panel.offsetWidth
+      resizeHandle.classList.add('dragging')
+      document.body.style.cursor = 'ew-resize'
+      document.body.style.userSelect = 'none'
+      e.preventDefault()
+    })
+
+    document.addEventListener('mousemove', (e) => {
+      if (!isResizing) return
+      const dx = resizeStartX - e.clientX // drag left = wider
+      const newWidth = Math.min(580, Math.max(220, resizeStartWidth + dx))
+      panel.style.width = newWidth + 'px'
+      syncBodyMargin()
+    })
+
+    document.addEventListener('mouseup', () => {
+      if (!isResizing) return
+      isResizing = false
+      resizeHandle.classList.remove('dragging')
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+    })
+  }
+
+  // ── Mouse wheel on changes log ────────────────────────────────────────────
+  panel.addEventListener('wheel', (e) => {
+    const log = document.getElementById('di-changes-log')
+    if (log && log.contains(e.target) && log.style.display !== 'none') {
+      log.scrollTop += e.deltaY
+      e.stopPropagation()
+      e.preventDefault()
+      return
+    }
+  }, { passive: false, capture: true })
+
+  // ── Mouse wheel scroll ────────────────────────────────────────────────────
+  // #di-panel-content is the direct flex child that scrolls.
+  // We intercept wheel on the whole panel and drive scrollTop manually so
+  // the event never reaches the page underneath.
+  panel.addEventListener('wheel', (e) => {
+    const content = document.getElementById('di-panel-content')
+    if (!content) return
+    content.scrollTop += e.deltaY
+    e.stopPropagation()
+    e.preventDefault()
+  }, { passive: false })
+
+  // ── Changes log toggle (Fix 3) ─────────────────────────────────────────────
+  document.getElementById('di-changes-toggle')?.addEventListener('click', () => {
+    if (tracker.count() === 0) return
+    changesLogOpen = !changesLogOpen
+    const log   = document.getElementById('di-changes-log')
+    const arrow = document.getElementById('di-toggle-arrow')
+    if (log)   log.style.display = changesLogOpen ? 'block' : 'none'
+    if (arrow) arrow.classList.toggle('open', changesLogOpen)
+    if (changesLogOpen) renderChangesLog()
+  })
+
+  // ── Copy feedback ──────────────────────────────────────────────────────────
+  document.getElementById('di-copy-feedback')?.addEventListener('click', async () => {
+    const text = tracker.formatAsText()
+    const ok = await copyToClipboard(text)
+    showCopiedFlash(ok ? 'Feedback copied to clipboard!' : 'Copy failed — check browser permissions')
+  })
+
+  // ── Clear changes ──────────────────────────────────────────────────────────
+  document.getElementById('di-clear-changes')?.addEventListener('click', () => {
+    tracker.clear()
+    updateFeedbackCount()
+    if (selectedEl) renderPanel(selectedEl)
+  })
+
+  // ── Mouse move: hover highlight ────────────────────────────────────────────
+  document.addEventListener('mousemove', (e) => {
+    if (!inspecting) return
+    const el = e.target
+    if (isInspectorElement(el)) {
+      if (!selectedEl) overlay.style.display = 'none'
+      tooltip.style.display = 'none'
+      hideBoxModel(bm)
+      return
+    }
+    overlay.classList.remove('selected')
+    updateOverlay(overlay, el)
+    updateBoxModel(bm, el)
+    const styles = getElementStyles(el)
+    renderTooltip(tooltip, styles, e.clientX, e.clientY)
+  })
+
+  // ── Click: select element ──────────────────────────────────────────────────
+  document.addEventListener('click', (e) => {
+    if (!inspecting) return
+    const el = e.target
+    if (isInspectorElement(el)) return
+    e.preventDefault()
+    e.stopPropagation()
+    selectElement(el)
+  }, true)
+
+  // ── Escape key ─────────────────────────────────────────────────────────────
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      if (inspecting) stopInspect()
+      else if (panelOpen) closePanel()
+    }
+  })
+
+  // ── Fix 1: scroll — update overlay using fresh getBoundingClientRect ────────
+  // Since overlay is position:fixed, getBoundingClientRect gives us exactly what we need.
+  document.addEventListener('scroll', () => {
+    if (selectedEl && panelOpen) {
+      updateOverlay(overlay, selectedEl)
+      updateBoxModel(bm, selectedEl)
+    }
+    if (inspecting) {
+      overlay.style.display = 'none'
+      tooltip.style.display = 'none'
+      hideBoxModel(bm)
+    }
+  }, true)
+
+  return {
+    destroy() {
+      textEditCleanup()
+      cog.remove()
+      overlay.remove()
+      tooltip.remove()
+      panel.remove()
+      document.getElementById('__dev_inspector_styles__')?.remove()
+      document.body.classList.remove('di-inspect-mode')
+      document.body.style.marginRight = ''
+      document.body.style.transition = ''
+      bm.remove()
+    }
+  }
+}