vite-plugin-specter 0.1.2 → 0.2.0

package/dist/client.js

@@ -2,41 +2,55 @@
   'use strict';
   if (window.__specter) return; window.__specter = true;
 
-  // ─── State ────────────────────────────────────────────────────────────────
-  let fiActive = false;
-  let measureMode = false;
-  let pinEl = null;
-  let lastHovered = null;
-  let optionHeld = false;
-  const selectedEls = [];
-  const selectedBadges = [];
+  // ─── Constants ──────────────────────────────────────────────────────────────
+  var PURPLE = '#AD24D3';
+  var RED = '#ED3E61';
+  var TIP_BG = '#292B32';
+  var GREEN = '#22C55E';
+  var LABEL = '#8B8D94';
+  var MONO = "'JetBrains Mono', 'SF Mono', 'Fira Code', monospace";
+  var ZAP = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>';
+  var ACTIVATE = "ctrl+alt+z";
 
-  const ACTIVATE = "ctrl+alt+z";
+  // ─── State ────────────────────────────────────────────────────────────────
+  var fiActive = false;
+  var measureMode = false;
+  var pinEl = null;
+  var pinHighlight = null;
+  var lastHovered = null;
+  var optionHeld = false;
+  var pillExpanded = false;
+  var sideRight = false;
+  var outlinedEl = null;
+  var prevOutline = '';
+  var measureHL = null;
+  var copiedTimer = null;
+  var flashTimer = null;
+  var lastMouse = { x: 0, y: 0 };
+  var selectedEls = [];
+  var selectedBadges = [];
 
   // ─── Tooltip ──────────────────────────────────────────────────────────────
-  const tooltip = document.createElement('div');
+  var tooltip = document.createElement('div');
   Object.assign(tooltip.style, {
     position: 'fixed',
     zIndex: '2147483646',
     pointerEvents: 'none',
-    fontFamily: 'ui-monospace, "Cascadia Code", "Fira Code", monospace',
-    fontSize: '12px',
-    lineHeight: '1.6',
-    background: '#1a1a1a',
-    color: '#e8e8e8',
-    padding: '12px 16px',
+    fontFamily: MONO,
+    fontSize: '13px',
+    lineHeight: '20px',
+    background: TIP_BG,
+    color: '#FFFFFF',
+    padding: '24px',
     borderRadius: '8px',
-    maxWidth: '560px',
-    boxShadow: '0 8px 32px rgba(0,0,0,0.5)',
-    whiteSpace: 'pre-wrap',
-    wordBreak: 'break-word',
+    maxWidth: '480px',
+    boxShadow: '0 4px 16px rgba(0,0,0,0.3)',
     display: 'none',
-    border: '1px solid rgba(255,255,255,0.08)',
   });
   document.body.appendChild(tooltip);
 
   // Measure overlay
-  const measureOverlay = document.createElement('div');
+  var measureOverlay = document.createElement('div');
   Object.assign(measureOverlay.style, {
     position: 'fixed',
     inset: '0',
@@ -47,102 +61,156 @@
   document.body.appendChild(measureOverlay);
 
   // ─── Pill ─────────────────────────────────────────────────────────────────
-  const pill = document.createElement('div');
-  Object.assign(pill.style, {
+  var pillWrap = document.createElement('div');
+  Object.assign(pillWrap.style, {
     position: 'fixed',
-    bottom: '16px',
-    left: '16px',
+    bottom: '4px',
+    left: '4px',
     zIndex: '2147483647',
+    padding: '12px',
     display: 'none',
+    boxSizing: 'border-box',
+  });
+
+  var pill = document.createElement('div');
+  Object.assign(pill.style, {
+    display: 'flex',
     alignItems: 'center',
     gap: '8px',
-    background: '#1a1a1a',
-    border: '1px solid rgba(255,255,255,0.12)',
-    borderRadius: '20px',
-    padding: '6px 10px 6px 8px',
-    fontFamily: 'ui-monospace, "Cascadia Code", "Fira Code", monospace',
+    background: PURPLE,
+    borderRadius: '16px',
+    height: '32px',
+    padding: '0 9px',
+    fontFamily: MONO,
     fontSize: '11px',
-    color: '#e8e8e8',
+    fontWeight: '400',
+    color: '#fff',
     cursor: 'default',
     userSelect: 'none',
-    transition: 'max-width 0.2s ease',
+    boxShadow: '0 4px 12px rgba(173,36,211,0.4)',
     overflow: 'hidden',
     maxWidth: '32px',
-    boxShadow: '0 4px 16px rgba(0,0,0,0.4)',
+    transition: 'max-width 0.2s ease',
+    boxSizing: 'border-box',
+    whiteSpace: 'nowrap',
   });
 
-  const pillIcon = document.createElement('span');
-  pillIcon.textContent = '⚡';
-  Object.assign(pillIcon.style, { fontSize: '13px', flexShrink: '0' });
+  var iconBtn = document.createElement('div');
+  Object.assign(iconBtn.style, {
+    position: 'relative',
+    width: '14px',
+    height: '14px',
+    flexShrink: '0',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  });
 
-  const pillText = document.createElement('span');
-  Object.assign(pillText.style, { visibility: 'hidden', whiteSpace: 'nowrap', color: '#aaa' });
+  var zapEl = document.createElement('span');
+  zapEl.innerHTML = ZAP;
+  Object.assign(zapEl.style, {
+    position: 'absolute',
+    display: 'flex',
+    transition: 'transform 0.4s ease, opacity 0.2s ease',
+  });
 
-  const pillClose = document.createElement('span');
-  pillClose.textContent = '×';
-  pillClose.title = 'Close Inspekt';
-  Object.assign(pillClose.style, {
-    cursor: 'pointer',
-    color: '#666',
-    fontSize: '15px',
+  var closeEl = document.createElement('span');
+  closeEl.textContent = '×';
+  Object.assign(closeEl.style, {
+    position: 'absolute',
+    fontSize: '17px',
     lineHeight: '1',
-    visibility: 'hidden',
+    opacity: '0',
+    transition: 'opacity 0.2s ease',
+    cursor: 'pointer',
+  });
+  closeEl.addEventListener('click', function (e) { e.stopPropagation(); deactivate(); });
+
+  iconBtn.appendChild(zapEl);
+  iconBtn.appendChild(closeEl);
+
+  var pillText = document.createElement('span');
+  Object.assign(pillText.style, { display: 'none', color: '#f3d9fb' });
+
+  var chevron = document.createElement('span');
+  chevron.textContent = '›';
+  chevron.title = 'Move to other side';
+  Object.assign(chevron.style, {
+    display: 'none',
+    cursor: 'pointer',
+    color: '#fff',
+    fontSize: '14px',
     flexShrink: '0',
     padding: '0 2px',
+    opacity: '0.8',
   });
-  pillClose.addEventListener('click', (e) => { e.stopPropagation(); deactivate(); });
+  chevron.addEventListener('click', function (e) { e.stopPropagation(); moveSide(); });
 
-  pill.appendChild(pillIcon);
+  pill.appendChild(iconBtn);
   pill.appendChild(pillText);
-  pill.appendChild(pillClose);
-  document.body.appendChild(pill);
+  pill.appendChild(chevron);
+  pillWrap.appendChild(pill);
+  document.body.appendChild(pillWrap);
 
-  pill.addEventListener('mouseenter', () => {
+  pillWrap.addEventListener('mouseenter', function () {
     clearMeasureOverlay();
+    clearMeasureTargetHL();
     hideTooltip();
     expandPill();
+    zapEl.style.transform = 'rotate(360deg)';
+    zapEl.style.opacity = '0';
+    closeEl.style.opacity = '1';
   });
-  pill.addEventListener('mouseleave', () => {
+  pillWrap.addEventListener('mouseleave', function () {
     if (selectedEls.length === 0 && !pinEl) collapsePill();
+    zapEl.style.transform = 'rotate(0deg)';
+    zapEl.style.opacity = '1';
+    closeEl.style.opacity = '0';
   });
 
-  function expandPill(text) {
-    pill.style.maxWidth = '700px';
-    pillText.style.visibility = 'visible';
-    pillClose.style.visibility = 'visible';
-    if (text) {
-      pillText.textContent = text;
-      return;
+  function moveSide() {
+    sideRight = !sideRight;
+    if (sideRight) {
+      pillWrap.style.left = 'auto';
+      pillWrap.style.right = '4px';
+      chevron.textContent = '‹';
+    } else {
+      pillWrap.style.right = 'auto';
+      pillWrap.style.left = '4px';
+      chevron.textContent = '›';
     }
+  }
+
+  function expandPill(text) {
+    pill.style.maxWidth = '760px';
+    pillText.style.display = 'inline';
+    chevron.style.display = 'inline';
+    pillExpanded = true;
+    if (text) { pillText.textContent = text; return; }
     if (selectedEls.length > 0) {
-      pillText.textContent = `${selectedEls.length} selected · Cmd+C → copy all · Esc → clear`;
+      pillText.textContent = selectedEls.length + ' selected · Cmd+C copy all · Esc clear';
     } else if (measureMode) {
-      pillText.textContent = 'Measure · hover → distances · M → pin · Cmd+C → copy · Option → toggle mode';
+      pillText.textContent = 'Measure · hover distances · M pin · Cmd+C copy · Option toggle';
     } else {
-      pillText.textContent = 'Properties · hover → inspect · P → pick · Cmd+C → copy · Option → measure mode';
+      pillText.textContent = 'Properties · hover inspect · P pick · Cmd+C copy · Option measure';
     }
   }
 
   function collapsePill() {
     pill.style.maxWidth = '32px';
-    pillText.style.visibility = 'hidden';
-    pillClose.style.visibility = 'hidden';
-  }
-
-  function updatePillForSelection() {
-    if (selectedEls.length > 0) {
-      expandPill();
-    } else if (!pill.matches(':hover')) {
-      collapsePill();
-    }
+    pillText.style.display = 'none';
+    chevron.style.display = 'none';
+    pillExpanded = false;
   }
 
   function flashMode() {
-    const text = measureMode ? '⬡ Measure mode' : '◉ Properties mode';
+    if (pillExpanded && pillWrap.matches(':hover')) return;
+    var text = measureMode ? '⬡ Measure mode' : '◉ Properties mode';
     expandPill(text);
-    setTimeout(() => {
-      if (!pill.matches(':hover') && selectedEls.length === 0 && !pinEl) collapsePill();
-      else if (selectedEls.length > 0 || pinEl) expandPill();
+    clearTimeout(flashTimer);
+    flashTimer = setTimeout(function () {
+      if (!pillWrap.matches(':hover') && selectedEls.length === 0 && !pinEl) collapsePill();
+      else expandPill();
     }, 1200);
   }
 
@@ -150,7 +218,8 @@
   function activate() {
     fiActive = true;
     measureMode = false;
-    pill.style.display = 'flex';
+    pillWrap.style.display = 'block';
+    document.body.style.cursor = 'crosshair';
     collapsePill();
   }
 
@@ -161,7 +230,10 @@
     lastHovered = null;
     clearSelection();
     clearPin();
-    pill.style.display = 'none';
+    clearHoverOutline();
+    clearMeasureTargetHL();
+    pillWrap.style.display = 'none';
+    document.body.style.cursor = '';
     hideTooltip();
     clearMeasureOverlay();
   }
@@ -169,15 +241,19 @@
   // ─── Helpers ──────────────────────────────────────────────────────────────
   function hideTooltip() { tooltip.style.display = 'none'; }
 
+  function esc(s) {
+    return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  }
+
   function positionTooltip(x, y) {
     tooltip.style.display = 'block';
-    const tw = tooltip.offsetWidth;
-    const th = tooltip.offsetHeight;
-    const vw = window.innerWidth;
-    const vh = window.innerHeight;
-    const margin = 16;
-    let left = x + 16;
-    let top = y + 16;
+    var tw = tooltip.offsetWidth;
+    var th = tooltip.offsetHeight;
+    var vw = window.innerWidth;
+    var vh = window.innerHeight;
+    var margin = 16;
+    var left = x + 16;
+    var top = y + 16;
     if (left + tw > vw - margin) left = x - tw - 16;
     if (top + th > vh - margin) top = y - th - 16;
     if (left < margin) left = margin;
@@ -187,204 +263,335 @@
   }
 
   function toHex(r, g, b) {
-    return '#' + [r, g, b].map(v => Math.round(v).toString(16).padStart(2, '0')).join('');
+    return '#' + [r, g, b].map(function (v) { return Math.round(v).toString(16).padStart(2, '0'); }).join('');
   }
 
   function parseColor(str) {
     if (!str || str === 'transparent' || str === 'rgba(0, 0, 0, 0)') return null;
-    const m = str.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+    var m = str.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
     if (!m) return { hex: str, alpha: 1 };
-    const [, r, g, b, a = '1'] = m;
-    return { hex: toHex(r, g, b), alpha: parseFloat(a) };
+    return { hex: toHex(m[1], m[2], m[3]), alpha: m[4] !== undefined ? parseFloat(m[4]) : 1 };
   }
 
   function colorLabel(str) {
-    const c = parseColor(str);
+    var c = parseColor(str);
     if (!c) return null;
-    if (c.alpha < 1) return `${c.hex} (${Math.round(c.alpha * 100)}% opacity)`;
+    if (c.alpha < 1) return c.hex + ' (' + Math.round(c.alpha * 100) + '% opacity)';
     return c.hex;
   }
 
+  function colorObj(str) {
+    var c = parseColor(str);
+    if (!c) return null;
+    return { raw: str, hex: c.hex, alpha: c.alpha, label: colorLabel(str) };
+  }
+
+  function edge(t, r, b, l) {
+    if ([t, r, b, l].every(function (v) { return v === '0px'; })) return null;
+    return { value: t + ' ' + r + ' ' + b + ' ' + l };
+  }
+
+  function weightName(w) {
+    var m = { '100': 'Thin', '200': 'ExtraLight', '300': 'Light', '400': 'Regular', '500': 'Medium', '600': 'Semibold', '700': 'Bold', '800': 'ExtraBold', '900': 'Black', 'normal': 'Regular', 'bold': 'Bold' };
+    return m[w] || w;
+  }
+
+  function swatch(hex) {
+    return '<span style="display:inline-block;width:9px;height:9px;border-radius:2px;background:' + hex + ';margin-right:6px;vertical-align:middle;border:1px solid rgba(255,255,255,0.2)"></span>';
+  }
+
   function getComponentName(el) {
-    for (const key of Object.keys(el)) {
+    for (var key in el) {
       if (key.startsWith('__reactFiber$') || key.startsWith('__reactInternalInstance$')) {
-        let fiber = el[key];
+        var fiber = el[key];
         while (fiber) {
-          const name = fiber.type?.displayName || fiber.type?.name;
+          var name = (fiber.type && (fiber.type.displayName || fiber.type.name));
           if (name && name.length > 3 && /^[A-Z]/.test(name)) return name;
           fiber = fiber.return;
         }
       }
     }
     if (el.__vueParentComponent) {
-      const name = el.__vueParentComponent.type?.name || el.__vueParentComponent.type?.__name;
-      if (name && name.length > 3) return name;
+      var vname = el.__vueParentComponent.type && (el.__vueParentComponent.type.name || el.__vueParentComponent.type.__name);
+      if (vname && vname.length > 3) return vname;
     }
     return null;
   }
 
   function getMatchingRules(el) {
-    const results = [];
+    var results = [];
     try {
-      for (const sheet of document.styleSheets) {
-        let rules;
-        try { rules = sheet.cssRules; } catch { continue; }
+      for (var s = 0; s < document.styleSheets.length; s++) {
+        var sheet = document.styleSheets[s];
+        var rules;
+        try { rules = sheet.cssRules; } catch (e) { continue; }
         if (!rules) continue;
-        for (const rule of rules) {
+        for (var r = 0; r < rules.length; r++) {
+          var rule = rules[r];
           if (rule.type !== 1) continue;
-          const sel = rule.selectorText;
+          var sel = rule.selectorText;
           if (!sel) continue;
           if (/^[*,]|^:root|^html|^body$|^::before|^::after/.test(sel.trim())) continue;
           try {
             if (el.matches(sel)) {
-              const props = [];
-              for (let i = 0; i < rule.style.length; i++) {
-                const prop = rule.style[i];
-                const val = rule.style.getPropertyValue(prop);
-                if (val) props.push(`  ${prop}: ${val};`);
+              var props = [];
+              for (var i = 0; i < rule.style.length; i++) {
+                var prop = rule.style[i];
+                var val = rule.style.getPropertyValue(prop);
+                if (val) props.push('  ' + prop + ': ' + val + ';');
               }
-              if (props.length) results.push(`${sel} {\n${props.join('\n')}\n}`);
+              if (props.length) results.push(sel + ' {\n' + props.join('\n') + '\n}');
             }
-          } catch {}
+          } catch (e) {}
         }
       }
-    } catch {}
+    } catch (e) {}
     return results;
   }
 
   function getSelector(el) {
-    const parts = [];
-    let cur = el;
-    for (let i = 0; i < 3 && cur && cur !== document.body; i++) {
-      let part = cur.tagName.toLowerCase();
+    var parts = [];
+    var cur = el;
+    for (var i = 0; i < 3 && cur && cur !== document.body; i++) {
+      var part = cur.tagName.toLowerCase();
       if (cur.id) { part += '#' + cur.id; parts.unshift(part); break; }
-      if (cur.classList.length) part += '.' + Array.from(cur.classList).slice(0, 2).join('.');
+      var cls = Array.prototype.slice.call(cur.classList).filter(function (c) { return c.indexOf('__specter') !== 0; });
+      if (cls.length) {
+        part += '.' + cls.slice(0, 2).join('.');
+      } else if (cur.parentElement) {
+        var sameTag = Array.prototype.slice.call(cur.parentElement.children).filter(function (c) { return c.tagName === cur.tagName; });
+        if (sameTag.length > 1) {
+          part += ':nth-child(' + (Array.prototype.indexOf.call(cur.parentElement.children, cur) + 1) + ')';
+        }
+      }
       parts.unshift(part);
       cur = cur.parentElement;
     }
     return parts.join(' > ');
   }
 
-  // ─── Build info ───────────────────────────────────────────────────────────
+  // ─── Structured data model ──────────────────────────────────────────────────
   function buildInfo(el) {
-    const cs = getComputedStyle(el);
-    const rect = el.getBoundingClientRect();
-    const tag = el.tagName.toLowerCase();
-    const comp = getComponentName(el);
-    const dataStyle = el.dataset?.style;
-    const lines = [];
-
-    let header = `<${tag}>`;
-    if (comp) header += ` ${comp}`;
-    if (dataStyle) header += ` [${dataStyle}]`;
-    header += ` ${Math.round(rect.width)}×${Math.round(rect.height)}`;
-    lines.push(header);
-
-    const text = el.textContent?.trim().slice(0, 40);
-    if (text) lines.push(`"${text}${el.textContent.trim().length > 40 ? '…' : ''}"`);
+    var cs = getComputedStyle(el);
+    var rect = el.getBoundingClientRect();
+    var ff = cs.fontFamily.split(',')[0].replace(/['"]/g, '').trim();
+    var raw = el.textContent ? el.textContent.trim() : '';
+    return {
+      el: el,
+      tag: el.tagName.toLowerCase(),
+      component: getComponentName(el),
+      styleKey: el.dataset ? el.dataset.style : null,
+      width: Math.round(rect.width),
+      height: Math.round(rect.height),
+      text: raw.slice(0, 40),
+      textTrunc: raw.length > 40,
+      font: { family: ff, weight: cs.fontWeight, size: cs.fontSize, lineHeight: cs.lineHeight },
+      color: colorObj(cs.color),
+      bg: colorObj(cs.backgroundColor),
+      padding: edge(cs.paddingTop, cs.paddingRight, cs.paddingBottom, cs.paddingLeft),
+      margin: edge(cs.marginTop, cs.marginRight, cs.marginBottom, cs.marginLeft),
+      radius: (cs.borderRadius && cs.borderRadius !== '0px') ? cs.borderRadius : null,
+      display: ['flex', 'grid', 'inline-flex', 'inline-grid'].indexOf(cs.display) >= 0 ? cs.display : null,
+      gap: (cs.gap && cs.gap !== 'normal') ? cs.gap : null,
+      flexDir: (cs.display.indexOf('flex') >= 0 && cs.flexDirection !== 'row') ? cs.flexDirection : null,
+      rules: getMatchingRules(el),
+    };
+  }
 
-    const ff = cs.fontFamily.split(',')[0].replace(/['"]/g, '').trim();
-    lines.push(`font: ${ff} ${cs.fontWeight} ${cs.fontSize}/${cs.lineHeight}`);
+  function row(label, val) {
+    return '<div style="display:flex;margin-bottom:8px"><span style="color:' + LABEL + ';min-width:76px;flex-shrink:0">' + label + '</span><span style="color:#fff;word-break:break-word">' + val + '</span></div>';
+  }
 
-    const color = colorLabel(cs.color);
-    if (color) lines.push(`color: ${color}`);
+  function buildHumanDisplay(data) {
+    var h = '';
+    var id = '<span style="color:#fff">&lt;' + data.tag + '&gt;</span>';
+    if (data.component) id += ' <span style="color:#E0A3F5;font-weight:600">' + esc(data.component) + '</span>';
+    if (data.styleKey) id += ' <span style="color:' + LABEL + '">.' + esc(data.styleKey) + '</span>';
+    id += ' <span style="color:' + LABEL + '">' + data.width + '×' + data.height + '</span>';
+    h += '<div style="margin-bottom:8px">' + id + '</div>';
+    if (data.text) h += '<div style="color:' + LABEL + ';font-style:italic;margin-bottom:8px">"' + esc(data.text) + (data.textTrunc ? '…' : '') + '"</div>';
+    h += '<div style="height:8px"></div>';
+    h += row('Font', esc(data.font.family) + ' · ' + weightName(data.font.weight) + ' · ' + data.font.size + '/' + data.font.lineHeight);
+    if (data.color) h += row('Color', swatch(data.color.hex) + data.color.label);
+    if (data.bg) h += row('Bg', swatch(data.bg.hex) + data.bg.label);
+    if (data.padding) h += row('Padding', data.padding.value);
+    if (data.margin) h += row('Margin', data.margin.value);
+    if (data.radius) h += row('Radius', data.radius);
+    if (data.display) {
+      var d = data.display;
+      if (data.gap) d += ' · gap ' + data.gap;
+      if (data.flexDir) d += ' · ' + data.flexDir;
+      h += row('Display', d);
+    }
+    return h;
+  }
 
-    const bg = colorLabel(cs.backgroundColor);
-    if (bg) lines.push(`bg: ${bg}`);
+  function buildLLMClipboard(data) {
+    var lines = ['[Specter]'];
+    var head = '<' + data.tag + '>';
+    if (data.component) head += ' ' + data.component;
+    if (data.styleKey) head += ' .' + data.styleKey;
+    head += ' ' + data.width + '×' + data.height;
+    lines.push(head);
+    if (data.text) lines.push('"' + data.text + (data.textTrunc ? '…' : '') + '"');
+    lines.push('font: ' + data.font.family + ' ' + data.font.weight + ' ' + data.font.size + '/' + data.font.lineHeight);
+    if (data.color) lines.push('color: ' + data.color.label);
+    if (data.bg) lines.push('bg: ' + data.bg.label);
+    if (data.padding) lines.push('padding: ' + data.padding.value);
+    if (data.margin) lines.push('margin: ' + data.margin.value);
+    if (data.radius) lines.push('radius: ' + data.radius);
+    if (data.display) {
+      var d = 'display: ' + data.display;
+      if (data.gap) d += '  gap: ' + data.gap;
+      if (data.flexDir) d += '  dir: ' + data.flexDir;
+      lines.push(d);
+    }
+    lines.push('selector: ' + getSelector(data.el));
+    var out = lines.join('\n');
+    if (data.rules && data.rules.length) out += '\n\n--- CSS Rules ---\n' + data.rules.join('\n\n');
+    return out;
+  }
 
-    const [pt, pr, pb, pl] = [cs.paddingTop, cs.paddingRight, cs.paddingBottom, cs.paddingLeft];
-    if ([pt, pr, pb, pl].some(v => v !== '0px')) lines.push(`padding: ${pt} ${pr} ${pb} ${pl}`);
+  function buildMultiSelectCopyText() {
+    return selectedEls.map(function (el, i) {
+      var body = buildLLMClipboard(buildInfo(el));
+      return body.replace('[Specter]', '[Specter ' + (i + 1) + '/' + selectedEls.length + ']');
+    }).join('\n\n' + Array(41).join('─') + '\n\n');
+  }
 
-    const [mt, mr, mb, ml] = [cs.marginTop, cs.marginRight, cs.marginBottom, cs.marginLeft];
-    if ([mt, mr, mb, ml].some(v => v !== '0px')) lines.push(`margin: ${mt} ${mr} ${mb} ${ml}`);
+  function linesToHTML(str) {
+    return str.split('\n').map(function (l) {
+      return '<div style="margin-bottom:4px;color:#fff">' + esc(l) + '</div>';
+    }).join('');
+  }
 
-    if (cs.borderRadius && cs.borderRadius !== '0px') lines.push(`radius: ${cs.borderRadius}`);
+  // ─── Hover outline ──────────────────────────────────────────────────────────
+  function setHoverOutline(el) {
+    if (outlinedEl === el) return;
+    clearHoverOutline();
+    if (!el) return;
+    outlinedEl = el;
+    prevOutline = el.style.outline;
+    el.style.outline = '2px solid ' + PURPLE;
+    el.style.outlineOffset = '-1px';
+  }
 
-    const disp = cs.display;
-    if (['flex','grid','inline-flex','inline-grid'].includes(disp)) {
-      let d = `display: ${disp}`;
-      if (cs.gap && cs.gap !== 'normal') d += `  gap: ${cs.gap}`;
-      if (disp.includes('flex') && cs.flexDirection !== 'row') d += `  dir: ${cs.flexDirection}`;
-      lines.push(d);
+  function clearHoverOutline() {
+    if (outlinedEl) {
+      outlinedEl.style.outline = prevOutline;
+      outlinedEl = null;
     }
-
-    return lines.join('\n');
   }
 
-  function buildCopyText(el) {
-    const info = buildInfo(el);
-    const rules = getMatchingRules(el);
-    let out = `[Specter]\n${info}\n  selector: ${getSelector(el)}`;
-    if (rules.length) out += `\n\n--- CSS Rules ---\n${rules.join('\n\n')}`;
-    return out;
+  // ─── Copied feedback ────────────────────────────────────────────────────────
+  function showCopied() {
+    tooltip.innerHTML = '<div style="color:' + GREEN + ';font-weight:600;display:flex;align-items:center;gap:6px"><span>✓</span><span>Copied!</span></div>';
+    tooltip.style.display = 'block';
+    clearTimeout(copiedTimer);
+    copiedTimer = setTimeout(function () {
+      if (fiActive && lastHovered) reRenderTooltip();
+      else hideTooltip();
+    }, 1200);
   }
 
-  function buildMultiSelectCopyText() {
-    return selectedEls.map((el, i) => {
-      const info = buildInfo(el);
-      const rules = getMatchingRules(el);
-      let out = `[Inspekt ${i + 1}/${selectedEls.length}]\n${info}\n  selector: ${getSelector(el)}`;
-      if (rules.length) out += `\n\n--- CSS Rules ---\n${rules.join('\n\n')}`;
-      return out;
-    }).join('\n\n' + '─'.repeat(40) + '\n\n');
+  function reRenderTooltip() {
+    if (measureMode) {
+      var text = (pinEl && pinEl !== lastHovered) ? measureBetween(pinEl, lastHovered) : measureToNeighbor(lastHovered);
+      tooltip.innerHTML = linesToHTML(text);
+    } else {
+      tooltip.innerHTML = buildHumanDisplay(buildInfo(lastHovered));
+    }
+    positionTooltip(lastMouse.x, lastMouse.y);
   }
 
   // ─── Multi-select ─────────────────────────────────────────────────────────
   function makeBadge(el, index) {
-    const rect = el.getBoundingClientRect();
-    const badge = document.createElement('div');
+    var rect = el.getBoundingClientRect();
+    var badge = document.createElement('div');
     badge.textContent = String(index + 1);
     Object.assign(badge.style, {
       position: 'fixed',
-      left: rect.left + 'px',
-      top: rect.top + 'px',
-      width: '18px',
-      height: '18px',
-      background: '#9b59b6',
+      left: (rect.left - 4) + 'px',
+      top: (rect.top - 4) + 'px',
+      width: '20px',
+      height: '20px',
+      background: PURPLE,
       color: '#fff',
-      fontSize: '10px',
+      fontSize: '11px',
       fontWeight: '700',
-      fontFamily: 'ui-monospace, monospace',
+      fontFamily: MONO,
       borderRadius: '50%',
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
       zIndex: '2147483644',
       pointerEvents: 'none',
-      boxShadow: '0 1px 4px rgba(0,0,0,0.4)',
-      transform: 'translate(-50%, -50%)',
+      boxShadow: '0 2px 6px rgba(0,0,0,0.3)',
     });
     document.body.appendChild(badge);
     return badge;
   }
 
   function rebuildBadges() {
-    selectedBadges.forEach(b => b.remove());
+    selectedBadges.forEach(function (b) { b.remove(); });
     selectedBadges.length = 0;
-    selectedEls.forEach((el, i) => {
+    selectedEls.forEach(function (el, i) {
       selectedBadges.push(makeBadge(el, i));
     });
   }
 
   function toggleSelection(el) {
-    const idx = selectedEls.indexOf(el);
+    var idx = selectedEls.indexOf(el);
     if (idx >= 0) {
       selectedEls.splice(idx, 1);
+      el.style.outline = '';
     } else {
       selectedEls.push(el);
+      el.style.outline = '2px solid ' + PURPLE;
+      el.style.outlineOffset = '-1px';
     }
     rebuildBadges();
     updatePillForSelection();
   }
 
   function clearSelection() {
+    selectedEls.forEach(function (el) { el.style.outline = ''; });
     selectedEls.length = 0;
-    selectedBadges.forEach(b => b.remove());
+    selectedBadges.forEach(function (b) { b.remove(); });
     selectedBadges.length = 0;
   }
 
-  // ─── Measure mode ─────────────────────────────────────────────────────────
-  let pinHighlight = null;
+  function updatePillForSelection() {
+    if (selectedEls.length > 0) expandPill();
+    else if (!pillWrap.matches(':hover')) collapsePill();
+  }
+
+  // ─── Pin (measure) ──────────────────────────────────────────────────────────
+  function setPin(el) {
+    pinEl = el;
+    updatePinHL();
+  }
+
+  function updatePinHL() {
+    if (!pinEl) return;
+    var r = pinEl.getBoundingClientRect();
+    if (!pinHighlight) {
+      pinHighlight = document.createElement('div');
+      Object.assign(pinHighlight.style, {
+        position: 'fixed',
+        border: '2px dashed ' + RED,
+        background: 'rgba(237,62,97,0.05)',
+        boxSizing: 'border-box',
+        pointerEvents: 'none',
+        zIndex: '2147483643',
+      });
+      document.body.appendChild(pinHighlight);
+    }
+    pinHighlight.style.left = r.left + 'px';
+    pinHighlight.style.top = r.top + 'px';
+    pinHighlight.style.width = r.width + 'px';
+    pinHighlight.style.height = r.height + 'px';
+  }
 
   function clearPin() {
     if (pinHighlight) { pinHighlight.remove(); pinHighlight = null; }
@@ -396,14 +603,51 @@
     measureOverlay.style.display = 'none';
   }
 
-  function drawLine(x1, y1, x2, y2, label) {
-    const isHoriz = Math.abs(y2 - y1) < 1;
-    const line = document.createElement('div');
-    Object.assign(line.style, {
-      position: 'absolute',
-      background: '#e53e3e',
+  function showMeasureTargetHL(el) {
+    clearMeasureTargetHL();
+    var r = el.getBoundingClientRect();
+    measureHL = document.createElement('div');
+    Object.assign(measureHL.style, {
+      position: 'fixed',
+      left: r.left + 'px',
+      top: r.top + 'px',
+      width: r.width + 'px',
+      height: r.height + 'px',
+      background: 'rgba(173,36,211,0.08)',
+      border: '1.5px solid ' + PURPLE,
+      boxSizing: 'border-box',
       pointerEvents: 'none',
+      zIndex: '2147483643',
     });
+    document.body.appendChild(measureHL);
+  }
+
+  function clearMeasureTargetHL() {
+    if (measureHL) { measureHL.remove(); measureHL = null; }
+  }
+
+  // ─── Measurement drawing ────────────────────────────────────────────────────
+  function cap(x, y, mainHoriz) {
+    var c = document.createElement('div');
+    Object.assign(c.style, { position: 'absolute', background: RED, pointerEvents: 'none' });
+    if (mainHoriz) {
+      c.style.left = (x - 0.5) + 'px';
+      c.style.top = (y - 4) + 'px';
+      c.style.width = '1px';
+      c.style.height = '8px';
+    } else {
+      c.style.left = (x - 4) + 'px';
+      c.style.top = (y - 0.5) + 'px';
+      c.style.width = '8px';
+      c.style.height = '1px';
+    }
+    measureOverlay.appendChild(c);
+  }
+
+  function drawLine(x1, y1, x2, y2, label) {
+    var isHoriz = Math.abs(y2 - y1) < 1;
+    var line = document.createElement('div');
+    Object.assign(line.style, { position: 'absolute', background: RED, pointerEvents: 'none' });
     if (isHoriz) {
       Object.assign(line.style, {
         left: Math.min(x1, x2) + 'px', top: (y1 - 0.5) + 'px',
@@ -416,156 +660,149 @@
       });
     }
     measureOverlay.appendChild(line);
+    cap(x1, y1, isHoriz);
+    cap(x2, y2, isHoriz);
 
     if (label && label !== '0px') {
-      const lbl = document.createElement('div');
+      var lbl = document.createElement('div');
       lbl.textContent = label;
       Object.assign(lbl.style, {
         position: 'absolute',
-        background: '#e53e3e',
+        background: RED,
         color: '#fff',
         fontSize: '10px',
-        fontFamily: 'ui-monospace, monospace',
+        fontFamily: MONO,
         padding: '1px 4px',
         borderRadius: '3px',
         pointerEvents: 'none',
         whiteSpace: 'nowrap',
       });
       if (isHoriz) {
-        const cx = (Math.min(x1, x2) + Math.max(x1, x2)) / 2;
-        lbl.style.left = cx + 'px';
-        lbl.style.top = (y1 - 14) + 'px';
+        var cxl = (Math.min(x1, x2) + Math.max(x1, x2)) / 2;
+        lbl.style.left = cxl + 'px';
+        lbl.style.top = (y1 - 16) + 'px';
         lbl.style.transform = 'translateX(-50%)';
       } else {
-        const cy = (Math.min(y1, y2) + Math.max(y1, y2)) / 2;
+        var cyl = (Math.min(y1, y2) + Math.max(y1, y2)) / 2;
         lbl.style.left = (x1 + 6) + 'px';
-        lbl.style.top = cy + 'px';
+        lbl.style.top = cyl + 'px';
         lbl.style.transform = 'translateY(-50%)';
       }
       measureOverlay.appendChild(lbl);
     }
   }
 
-  function highlightEl(el, color) {
-    const rect = el.getBoundingClientRect();
-    const hl = document.createElement('div');
-    Object.assign(hl.style, {
-      position: 'fixed',
-      left: rect.left + 'px', top: rect.top + 'px',
-      width: rect.width + 'px', height: rect.height + 'px',
-      border: `2px solid ${color}`,
-      borderRadius: '2px',
-      pointerEvents: 'none',
-      zIndex: '2147483644',
-      boxSizing: 'border-box',
-    });
-    document.body.appendChild(hl);
-    return hl;
-  }
-
-  function measureToNeighbor(targetEl) {
-    clearMeasureOverlay();
-    const tr = targetEl.getBoundingClientRect();
-    let measured = false;
-    let cur = targetEl.parentElement;
-
-    for (let depth = 0; depth < 3 && cur && !measured; depth++) {
-      const children = Array.from(cur.children).filter(c => c !== targetEl && c.offsetParent !== null);
-      if (children.length === 0) { cur = cur.parentElement; continue; }
-
-      const closest = { top: null, bottom: null, left: null, right: null };
-      const gaps = { top: Infinity, bottom: Infinity, left: Infinity, right: Infinity };
-
-      for (const sib of children) {
-        const sr = sib.getBoundingClientRect();
-        if (sr.bottom <= tr.top) {
-          const g = tr.top - sr.bottom;
-          if (g < gaps.top) { gaps.top = g; closest.top = sib; }
-        }
-        if (sr.top >= tr.bottom) {
-          const g = sr.top - tr.bottom;
-          if (g < gaps.bottom) { gaps.bottom = g; closest.bottom = sib; }
-        }
-        if (sr.right <= tr.left) {
-          const g = tr.left - sr.right;
-          if (g < gaps.left) { gaps.left = g; closest.left = sib; }
-        }
-        if (sr.left >= tr.right) {
-          const g = sr.left - tr.right;
-          if (g < gaps.right) { gaps.right = g; closest.right = sib; }
-        }
+  // ─── Neighbor computation (parent-first w/ container fallback) ───────────────
+  function edgeToAncestor(targetEl, tr, dir) {
+    var cur = targetEl.parentElement;
+    var ctx = 'parent';
+    for (var i = 0; i < 4 && cur && cur !== document.body; i++) {
+      var pr = cur.getBoundingClientRect();
+      var gap;
+      if (dir === 'top') gap = tr.top - pr.top;
+      else if (dir === 'bottom') gap = pr.bottom - tr.bottom;
+      else if (dir === 'left') gap = tr.left - pr.left;
+      else gap = pr.right - tr.right;
+      if (gap > 0.5) {
+        var ed;
+        if (dir === 'top') ed = pr.top;
+        else if (dir === 'bottom') ed = pr.bottom;
+        else if (dir === 'left') ed = pr.left;
+        else ed = pr.right;
+        return { gap: gap, ctx: ctx, edge: ed };
       }
-
-      if (closest.top || closest.bottom || closest.left || closest.right) {
-        measured = true;
-        const cx = (tr.left + tr.right) / 2;
-        const cy = (tr.top + tr.bottom) / 2;
-        if (closest.top) drawLine(cx, closest.top.getBoundingClientRect().bottom, cx, tr.top, Math.round(gaps.top) + 'px');
-        if (closest.bottom) drawLine(cx, tr.bottom, cx, closest.bottom.getBoundingClientRect().top, Math.round(gaps.bottom) + 'px');
-        if (closest.left) drawLine(closest.left.getBoundingClientRect().right, cy, tr.left, cy, Math.round(gaps.left) + 'px');
-        if (closest.right) drawLine(tr.right, cy, closest.right.getBoundingClientRect().left, cy, Math.round(gaps.right) + 'px');
-      } else {
-        const pr = cur.getBoundingClientRect();
-        const cx = (tr.left + tr.right) / 2;
-        const cy = (tr.top + tr.bottom) / 2;
-        const gT = tr.top - pr.top, gB = pr.bottom - tr.bottom;
-        const gL = tr.left - pr.left, gR = pr.right - tr.right;
-        if (gT > 0) drawLine(cx, pr.top, cx, tr.top, Math.round(gT) + 'px');
-        if (gB > 0) drawLine(cx, tr.bottom, cx, pr.bottom, Math.round(gB) + 'px');
-        if (gL > 0) drawLine(pr.left, cy, tr.left, cy, Math.round(gL) + 'px');
-        if (gR > 0) drawLine(tr.right, cy, pr.right, cy, Math.round(gR) + 'px');
-        measured = true;
-      }
-
       cur = cur.parentElement;
+      ctx = 'container';
     }
+    return null;
+  }
+
+  function computeNeighbors(targetEl, tr) {
+    var out = { top: null, bottom: null, left: null, right: null };
+    var parent = targetEl.parentElement;
+    if (parent) {
+      var sibs = Array.prototype.slice.call(parent.children).filter(function (c) { return c !== targetEl && c.offsetParent !== null; });
+      sibs.forEach(function (sib) {
+        var sr = sib.getBoundingClientRect();
+        if (sr.bottom <= tr.top) { var g = tr.top - sr.bottom; if (!out.top || g < out.top.gap) out.top = { gap: g, ctx: 'sibling', edge: sr.bottom }; }
+        if (sr.top >= tr.bottom) { var g2 = sr.top - tr.bottom; if (!out.bottom || g2 < out.bottom.gap) out.bottom = { gap: g2, ctx: 'sibling', edge: sr.top }; }
+        if (sr.right <= tr.left) { var g3 = tr.left - sr.right; if (!out.left || g3 < out.left.gap) out.left = { gap: g3, ctx: 'sibling', edge: sr.right }; }
+        if (sr.left >= tr.right) { var g4 = sr.left - tr.right; if (!out.right || g4 < out.right.gap) out.right = { gap: g4, ctx: 'sibling', edge: sr.left }; }
+      });
+    }
+    ['top', 'bottom', 'left', 'right'].forEach(function (k) { if (!out[k]) out[k] = edgeToAncestor(targetEl, tr, k); });
+    return out;
+  }
 
+  function measureToNeighbor(targetEl) {
+    clearMeasureOverlay();
+    var tr = targetEl.getBoundingClientRect();
+    var dirs = computeNeighbors(targetEl, tr);
+    var cx = (tr.left + tr.right) / 2;
+    var cy = (tr.top + tr.bottom) / 2;
+    if (dirs.top) drawLine(cx, dirs.top.edge, cx, tr.top, Math.round(dirs.top.gap) + 'px');
+    if (dirs.bottom) drawLine(cx, tr.bottom, cx, dirs.bottom.edge, Math.round(dirs.bottom.gap) + 'px');
+    if (dirs.left) drawLine(dirs.left.edge, cy, tr.left, cy, Math.round(dirs.left.gap) + 'px');
+    if (dirs.right) drawLine(tr.right, cy, dirs.right.edge, cy, Math.round(dirs.right.gap) + 'px');
     measureOverlay.style.display = 'block';
-    const tag = targetEl.tagName.toLowerCase();
-    const rect = targetEl.getBoundingClientRect();
-    return `⬡ Measure  (M → pin element)\n<${tag}> ${Math.round(rect.width)}×${Math.round(rect.height)}`;
+    var tag = targetEl.tagName.toLowerCase();
+    var lines = ['⬡ Measure  (M pin · Cmd+C copy)', '<' + tag + '> ' + Math.round(tr.width) + '×' + Math.round(tr.height)];
+    ['top', 'right', 'bottom', 'left'].forEach(function (k) {
+      if (dirs[k]) lines.push(k + ': ' + Math.round(dirs[k].gap) + 'px (to ' + dirs[k].ctx + ')');
+    });
+    return lines.join('\n');
+  }
+
+  function buildNeighborCopyText(el) {
+    var tr = el.getBoundingClientRect();
+    var dirs = computeNeighbors(el, tr);
+    var lines = ['[Specter Measure]', '<' + el.tagName.toLowerCase() + '> ' + Math.round(tr.width) + '×' + Math.round(tr.height), 'selector: ' + getSelector(el)];
+    ['top', 'right', 'bottom', 'left'].forEach(function (k) {
+      if (dirs[k]) lines.push(k + ': ' + Math.round(dirs[k].gap) + 'px (to ' + dirs[k].ctx + ')');
+    });
+    return lines.join('\n');
   }
 
   function measureBetween(fromEl, toEl) {
     clearMeasureOverlay();
-    const fr = fromEl.getBoundingClientRect();
-    const tr = toEl.getBoundingClientRect();
-    const fTag = fromEl.tagName.toLowerCase(), tTag = toEl.tagName.toLowerCase();
-    const fComp = getComponentName(fromEl), tComp = getComponentName(toEl);
+    var fr = fromEl.getBoundingClientRect();
+    var tr = toEl.getBoundingClientRect();
+    var fTag = fromEl.tagName.toLowerCase(), tTag = toEl.tagName.toLowerCase();
+    var fComp = getComponentName(fromEl), tComp = getComponentName(toEl);
 
-    const lines = ['⬡ Measure  (Cmd+C → copy)'];
-    lines.push(`From: <${fTag}>${fComp ? ' ' + fComp : ''} ${Math.round(fr.width)}×${Math.round(fr.height)}`);
-    lines.push(`To:   <${tTag}>${tComp ? ' ' + tComp : ''} ${Math.round(tr.width)}×${Math.round(tr.height)}`);
+    var lines = ['⬡ Measure  (Cmd+C copy)'];
+    lines.push('From: <' + fTag + '>' + (fComp ? ' ' + fComp : '') + ' ' + Math.round(fr.width) + '×' + Math.round(fr.height));
+    lines.push('To:   <' + tTag + '>' + (tComp ? ' ' + tComp : '') + ' ' + Math.round(tr.width) + '×' + Math.round(tr.height));
 
-    const fromContainsTo = fr.left <= tr.left && fr.top <= tr.top && fr.right >= tr.right && fr.bottom >= tr.bottom;
-    const toContainsFrom = tr.left <= fr.left && tr.top <= fr.top && tr.right >= fr.right && tr.bottom >= fr.bottom;
+    var fromContainsTo = fr.left <= tr.left && fr.top <= tr.top && fr.right >= tr.right && fr.bottom >= tr.bottom;
+    var toContainsFrom = tr.left <= fr.left && tr.top <= fr.top && tr.right >= fr.right && tr.bottom >= fr.bottom;
 
     if (fromContainsTo || toContainsFrom) {
-      const outer = fromContainsTo ? fr : tr;
-      const inner = fromContainsTo ? tr : fr;
-      const cx = (inner.left + inner.right) / 2, cy = (inner.top + inner.bottom) / 2;
-      const iT = inner.top - outer.top, iB = outer.bottom - inner.bottom;
-      const iL = inner.left - outer.left, iR = outer.right - inner.right;
+      var outer = fromContainsTo ? fr : tr;
+      var inner = fromContainsTo ? tr : fr;
+      var cx = (inner.left + inner.right) / 2, cy = (inner.top + inner.bottom) / 2;
+      var iT = inner.top - outer.top, iB = outer.bottom - inner.bottom;
+      var iL = inner.left - outer.left, iR = outer.right - inner.right;
       if (iT > 0) drawLine(cx, outer.top, cx, inner.top, Math.round(iT) + 'px');
       if (iB > 0) drawLine(cx, inner.bottom, cx, outer.bottom, Math.round(iB) + 'px');
       if (iL > 0) drawLine(outer.left, cy, inner.left, cy, Math.round(iL) + 'px');
       if (iR > 0) drawLine(inner.right, cy, outer.right, cy, Math.round(iR) + 'px');
-      lines.push(`inset: ${Math.round(iT)}px ${Math.round(iR)}px ${Math.round(iB)}px ${Math.round(iL)}px`);
+      lines.push('inset: ' + Math.round(iT) + 'px ' + Math.round(iR) + 'px ' + Math.round(iB) + 'px ' + Math.round(iL) + 'px');
     } else {
-      const vGap = fr.bottom <= tr.top ? tr.top - fr.bottom : tr.bottom <= fr.top ? fr.top - tr.bottom : 0;
-      const hGap = fr.right <= tr.left ? tr.left - fr.right : tr.right <= fr.left ? fr.left - tr.right : 0;
-      const cx = (fr.left + fr.right) / 2, cy = (fr.top + fr.bottom) / 2;
+      var vGap = fr.bottom <= tr.top ? tr.top - fr.bottom : tr.bottom <= fr.top ? fr.top - tr.bottom : 0;
+      var hGap = fr.right <= tr.left ? tr.left - fr.right : tr.right <= fr.left ? fr.left - tr.right : 0;
+      var cx2 = (fr.left + fr.right) / 2, cy2 = (fr.top + fr.bottom) / 2;
       if (vGap > 0) {
-        const y1 = fr.bottom <= tr.top ? fr.bottom : tr.bottom;
-        const y2 = fr.bottom <= tr.top ? tr.top : fr.top;
-        drawLine(cx, y1, cx, y2, Math.round(vGap) + 'px');
-        lines.push(`vertical gap: ${Math.round(vGap)}px (${fr.bottom <= tr.top ? 'From above To' : 'To above From'})`);
+        var y1 = fr.bottom <= tr.top ? fr.bottom : tr.bottom;
+        var y2 = fr.bottom <= tr.top ? tr.top : fr.top;
+        drawLine(cx2, y1, cx2, y2, Math.round(vGap) + 'px');
+        lines.push('vertical gap: ' + Math.round(vGap) + 'px');
       }
       if (hGap > 0) {
-        const x1 = fr.right <= tr.left ? fr.right : tr.right;
-        const x2 = fr.right <= tr.left ? tr.left : fr.left;
-        drawLine(x1, cy, x2, cy, Math.round(hGap) + 'px');
-        lines.push(`horizontal gap: ${Math.round(hGap)}px`);
+        var x1 = fr.right <= tr.left ? fr.right : tr.right;
+        var x2 = fr.right <= tr.left ? tr.left : fr.left;
+        drawLine(x1, cy2, x2, cy2, Math.round(hGap) + 'px');
+        lines.push('horizontal gap: ' + Math.round(hGap) + 'px');
       }
       if (vGap === 0 && hGap === 0) lines.push('Elements overlap');
     }
@@ -575,28 +812,26 @@
   }
 
   function buildMeasureCopyText(fromEl, toEl) {
-    const fr = fromEl.getBoundingClientRect(), tr = toEl.getBoundingClientRect();
-    const fromContainsTo = fr.left <= tr.left && fr.top <= tr.top && fr.right >= tr.right && fr.bottom >= tr.bottom;
-    const toContainsFrom = tr.left <= fr.left && tr.top <= fr.top && tr.right >= fr.right && tr.bottom >= fr.bottom;
-    const fTag = fromEl.tagName.toLowerCase(), tTag = toEl.tagName.toLowerCase();
-    const fComp = getComponentName(fromEl), tComp = getComponentName(toEl);
-    const fText = fromEl.textContent?.trim().slice(0, 40);
-    const tText = toEl.textContent?.trim().slice(0, 40);
-
-    const lines = ['[Inspekt Measure]'];
-    lines.push(`From: <${fTag}>${fComp ? ' ' + fComp : ''} ${Math.round(fr.width)}×${Math.round(fr.height)}${fText ? ' "' + fText + '"' : ''}`);
-    lines.push(`  selector: ${getSelector(fromEl)}`);
-    lines.push(`To:   <${tTag}>${tComp ? ' ' + tComp : ''} ${Math.round(tr.width)}×${Math.round(tr.height)}${tText ? ' "' + tText + '"' : ''}`);
-    lines.push(`  selector: ${getSelector(toEl)}`);
+    var fr = fromEl.getBoundingClientRect(), tr = toEl.getBoundingClientRect();
+    var fromContainsTo = fr.left <= tr.left && fr.top <= tr.top && fr.right >= tr.right && fr.bottom >= tr.bottom;
+    var toContainsFrom = tr.left <= fr.left && tr.top <= fr.top && tr.right >= fr.right && tr.bottom >= fr.bottom;
+    var fTag = fromEl.tagName.toLowerCase(), tTag = toEl.tagName.toLowerCase();
+    var fComp = getComponentName(fromEl), tComp = getComponentName(toEl);
+
+    var lines = ['[Specter Measure]'];
+    lines.push('From: <' + fTag + '>' + (fComp ? ' ' + fComp : '') + ' ' + Math.round(fr.width) + '×' + Math.round(fr.height));
+    lines.push('  selector: ' + getSelector(fromEl));
+    lines.push('To:   <' + tTag + '>' + (tComp ? ' ' + tComp : '') + ' ' + Math.round(tr.width) + '×' + Math.round(tr.height));
+    lines.push('  selector: ' + getSelector(toEl));
 
     if (fromContainsTo || toContainsFrom) {
-      const outer = fromContainsTo ? fr : tr, inner = fromContainsTo ? tr : fr;
-      lines.push(`inset: ${Math.round(inner.top - outer.top)}px ${Math.round(outer.right - inner.right)}px ${Math.round(outer.bottom - inner.bottom)}px ${Math.round(inner.left - outer.left)}px`);
+      var outer = fromContainsTo ? fr : tr, inner = fromContainsTo ? tr : fr;
+      lines.push('inset: ' + Math.round(inner.top - outer.top) + 'px ' + Math.round(outer.right - inner.right) + 'px ' + Math.round(outer.bottom - inner.bottom) + 'px ' + Math.round(inner.left - outer.left) + 'px');
     } else {
-      const vGap = fr.bottom <= tr.top ? tr.top - fr.bottom : tr.bottom <= fr.top ? fr.top - tr.bottom : 0;
-      const hGap = fr.right <= tr.left ? tr.left - fr.right : tr.right <= fr.left ? fr.left - tr.right : 0;
-      if (vGap > 0) lines.push(`vertical gap: ${Math.round(vGap)}px (${fr.bottom <= tr.top ? 'From above To' : 'To above From'})`);
-      if (hGap > 0) lines.push(`horizontal gap: ${Math.round(hGap)}px`);
+      var vGap = fr.bottom <= tr.top ? tr.top - fr.bottom : tr.bottom <= fr.top ? fr.top - tr.bottom : 0;
+      var hGap = fr.right <= tr.left ? tr.left - fr.right : tr.right <= fr.left ? fr.left - tr.right : 0;
+      if (vGap > 0) lines.push('vertical gap: ' + Math.round(vGap) + 'px');
+      if (hGap > 0) lines.push('horizontal gap: ' + Math.round(hGap) + 'px');
       if (vGap === 0 && hGap === 0) lines.push('Elements overlap');
     }
     return lines.join('\n');
@@ -604,51 +839,55 @@
 
   // ─── Shortcut parser ──────────────────────────────────────────────────────
   function matchesActivate(e) {
-    const parts = ACTIVATE.toLowerCase().split('+');
-    const needCtrl = parts.includes('ctrl');
-    const needAlt = parts.includes('alt');
-    const needShift = parts.includes('shift');
-    const needMeta = parts.includes('meta') || parts.includes('cmd');
-    const key = parts.find(p => !['ctrl','alt','shift','meta','cmd'].includes(p));
+    var parts = ACTIVATE.toLowerCase().split('+');
+    var needCtrl = parts.indexOf('ctrl') >= 0;
+    var needAlt = parts.indexOf('alt') >= 0;
+    var needShift = parts.indexOf('shift') >= 0;
+    var needMeta = parts.indexOf('meta') >= 0 || parts.indexOf('cmd') >= 0;
+    var key = parts.filter(function (p) { return ['ctrl', 'alt', 'shift', 'meta', 'cmd'].indexOf(p) < 0; })[0];
     if (needCtrl !== e.ctrlKey) return false;
     if (needAlt !== e.altKey) return false;
     if (needShift !== e.shiftKey) return false;
     if (needMeta !== e.metaKey) return false;
     if (!key) return false;
-    const eKey = e.key.toLowerCase();
-    const eCode = e.code.toLowerCase();
-    return eKey === key || eCode === `key${key}` || (key === 'period' && (eKey === '.' || eCode === 'period'));
+    var eKey = e.key.toLowerCase();
+    var eCode = e.code.toLowerCase();
+    return eKey === key || eCode === 'key' + key || (key === 'period' && (eKey === '.' || eCode === 'period'));
   }
 
   // ─── Mouse ────────────────────────────────────────────────────────────────
   function onMouseMove(e) {
     if (!fiActive) return;
-    const target = e.target;
-    if (!target || target === pill || pill.contains(target)) return;
+    lastMouse.x = e.clientX; lastMouse.y = e.clientY;
+    var target = e.target;
+    if (!target || target === pillWrap || pillWrap.contains(target)) return;
     if (target === tooltip || tooltip.contains(target)) return;
 
     lastHovered = target;
 
     if (measureMode) {
-      const text = (pinEl && pinEl !== target)
-        ? measureBetween(pinEl, target)
-        : measureToNeighbor(target);
-      tooltip.textContent = text;
+      clearHoverOutline();
+      showMeasureTargetHL(target);
+      var text = (pinEl && pinEl !== target) ? measureBetween(pinEl, target) : measureToNeighbor(target);
+      tooltip.innerHTML = linesToHTML(text);
       positionTooltip(e.clientX, e.clientY);
+      if (pinEl) updatePinHL();
     } else {
       clearMeasureOverlay();
-      tooltip.textContent = buildInfo(target);
+      clearMeasureTargetHL();
+      setHoverOutline(target);
+      tooltip.innerHTML = buildHumanDisplay(buildInfo(target));
       positionTooltip(e.clientX, e.clientY);
     }
   }
 
   // ─── Keyboard ─────────────────────────────────────────────────────────────
   function isInputFocused() {
-    const el = document.activeElement;
+    var el = document.activeElement;
     return !!el && (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.isContentEditable);
   }
 
-  document.addEventListener('keydown', (e) => {
+  document.addEventListener('keydown', function (e) {
     if (matchesActivate(e)) {
       e.preventDefault();
       if (fiActive) deactivate(); else activate();
@@ -657,51 +896,48 @@
 
     if (!fiActive) return;
 
-    // Option tap (keydown only — actual toggle fires on keyup)
     if (e.key === 'Alt' && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
       optionHeld = true;
       return;
     }
 
-    // Cmd+C — copy
     if ((e.metaKey || e.ctrlKey) && e.key === 'c' && !e.shiftKey && !e.altKey) {
       e.preventDefault();
-      let text;
+      var text;
       if (selectedEls.length > 0) {
         text = buildMultiSelectCopyText();
       } else if (measureMode && pinEl && lastHovered && lastHovered !== pinEl) {
         text = buildMeasureCopyText(pinEl, lastHovered);
+      } else if (measureMode && lastHovered) {
+        text = buildNeighborCopyText(lastHovered);
       } else if (lastHovered) {
-        text = buildCopyText(lastHovered);
+        text = buildLLMClipboard(buildInfo(lastHovered));
       }
-      if (text) navigator.clipboard.writeText(text).catch(() => {});
+      if (text) navigator.clipboard.writeText(text).then(showCopied).catch(function () {});
       return;
     }
 
     if (isInputFocused()) return;
 
-    // P — pick/unpick element (multi-select), Properties mode only
     if (e.key === 'p' || e.key === 'P') {
       if (measureMode || !lastHovered) return;
+      clearHoverOutline();
       toggleSelection(lastHovered);
       return;
     }
 
-    // M — pin element for measure-from, Measure mode only
     if (e.key === 'm' || e.key === 'M') {
       if (!measureMode || !lastHovered) return;
       if (pinEl) {
         clearPin();
         collapsePill();
       } else {
-        pinEl = lastHovered;
-        pinHighlight = highlightEl(pinEl, '#9b59b6');
-        expandPill('Pinned · hover another element · Cmd+C → copy · Esc → clear');
+        setPin(lastHovered);
+        expandPill('Pinned · hover another element · Cmd+C copy · Esc clear');
       }
       return;
     }
 
-    // Escape cascade: pin → selection → exit
     if (e.key === 'Escape') {
       if (pinEl) {
         clearPin();
@@ -718,12 +954,14 @@
     }
   }, true);
 
-  document.addEventListener('keyup', (e) => {
+  document.addEventListener('keyup', function (e) {
     if (!fiActive) return;
     if (e.key === 'Alt' && optionHeld) {
       optionHeld = false;
       measureMode = !measureMode;
       clearMeasureOverlay();
+      clearHoverOutline();
+      clearMeasureTargetHL();
       if (!measureMode) clearPin();
       hideTooltip();
       flashMode();