vite-plugin-specter 0.1.0

package/dist/index.cjs

@@ -0,0 +1,786 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  getClientScript: () => getClientScript,
+  specter: () => specter
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/client.ts
+function getClientScript(options) {
+  const activateShortcut = options.shortcuts?.activate ?? "ctrl+alt+z";
+  return `(function() {
+  'use strict';
+  if (window.__specter) return; window.__specter = true;
+
+  // \u2500\u2500\u2500 State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  let fiActive = false;
+  let measureMode = false;
+  let pinEl = null;
+  let lastHovered = null;
+  let optionHeld = false;
+  const selectedEls = [];
+  const selectedBadges = [];
+
+  const ACTIVATE = ${JSON.stringify(activateShortcut)};
+
+  // \u2500\u2500\u2500 Tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  const 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',
+    borderRadius: '8px',
+    maxWidth: '560px',
+    boxShadow: '0 8px 32px rgba(0,0,0,0.5)',
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-word',
+    display: 'none',
+    border: '1px solid rgba(255,255,255,0.08)',
+  });
+  document.body.appendChild(tooltip);
+
+  // Measure overlay
+  const measureOverlay = document.createElement('div');
+  Object.assign(measureOverlay.style, {
+    position: 'fixed',
+    inset: '0',
+    zIndex: '2147483645',
+    pointerEvents: 'none',
+    display: 'none',
+  });
+  document.body.appendChild(measureOverlay);
+
+  // \u2500\u2500\u2500 Pill \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  const pill = document.createElement('div');
+  Object.assign(pill.style, {
+    position: 'fixed',
+    bottom: '16px',
+    left: '16px',
+    zIndex: '2147483647',
+    display: 'none',
+    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',
+    fontSize: '11px',
+    color: '#e8e8e8',
+    cursor: 'default',
+    userSelect: 'none',
+    transition: 'max-width 0.2s ease',
+    overflow: 'hidden',
+    maxWidth: '32px',
+    boxShadow: '0 4px 16px rgba(0,0,0,0.4)',
+  });
+
+  const pillIcon = document.createElement('span');
+  pillIcon.textContent = '\u26A1';
+  Object.assign(pillIcon.style, { fontSize: '13px', flexShrink: '0' });
+
+  const pillText = document.createElement('span');
+  Object.assign(pillText.style, { visibility: 'hidden', whiteSpace: 'nowrap', color: '#aaa' });
+
+  const pillClose = document.createElement('span');
+  pillClose.textContent = '\xD7';
+  pillClose.title = 'Close Inspekt';
+  Object.assign(pillClose.style, {
+    cursor: 'pointer',
+    color: '#666',
+    fontSize: '15px',
+    lineHeight: '1',
+    visibility: 'hidden',
+    flexShrink: '0',
+    padding: '0 2px',
+  });
+  pillClose.addEventListener('click', (e) => { e.stopPropagation(); deactivate(); });
+
+  pill.appendChild(pillIcon);
+  pill.appendChild(pillText);
+  pill.appendChild(pillClose);
+  document.body.appendChild(pill);
+
+  pill.addEventListener('mouseenter', () => {
+    clearMeasureOverlay();
+    hideTooltip();
+    expandPill();
+  });
+  pill.addEventListener('mouseleave', () => {
+    if (selectedEls.length === 0 && !pinEl) collapsePill();
+  });
+
+  function expandPill(text) {
+    pill.style.maxWidth = '700px';
+    pillText.style.visibility = 'visible';
+    pillClose.style.visibility = 'visible';
+    if (text) {
+      pillText.textContent = text;
+      return;
+    }
+    if (selectedEls.length > 0) {
+      pillText.textContent = \`\${selectedEls.length} selected \xB7 Cmd+C \u2192 copy all \xB7 Esc \u2192 clear\`;
+    } else if (measureMode) {
+      pillText.textContent = 'Measure \xB7 hover \u2192 distances \xB7 M \u2192 pin \xB7 Cmd+C \u2192 copy \xB7 Option \u2192 toggle mode';
+    } else {
+      pillText.textContent = 'Properties \xB7 hover \u2192 inspect \xB7 P \u2192 pick \xB7 Cmd+C \u2192 copy \xB7 Option \u2192 measure mode';
+    }
+  }
+
+  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();
+    }
+  }
+
+  function flashMode() {
+    const text = measureMode ? '\u2B21 Measure mode' : '\u25C9 Properties mode';
+    expandPill(text);
+    setTimeout(() => {
+      if (!pill.matches(':hover') && selectedEls.length === 0 && !pinEl) collapsePill();
+      else if (selectedEls.length > 0 || pinEl) expandPill();
+    }, 1200);
+  }
+
+  // \u2500\u2500\u2500 Activate / Deactivate \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function activate() {
+    fiActive = true;
+    measureMode = false;
+    pill.style.display = 'flex';
+    collapsePill();
+  }
+
+  function deactivate() {
+    fiActive = false;
+    measureMode = false;
+    optionHeld = false;
+    lastHovered = null;
+    clearSelection();
+    clearPin();
+    pill.style.display = 'none';
+    hideTooltip();
+    clearMeasureOverlay();
+  }
+
+  // \u2500\u2500\u2500 Helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function hideTooltip() { tooltip.style.display = 'none'; }
+
+  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;
+    if (left + tw > vw - margin) left = x - tw - 16;
+    if (top + th > vh - margin) top = y - th - 16;
+    if (left < margin) left = margin;
+    if (top < margin) top = margin;
+    tooltip.style.left = left + 'px';
+    tooltip.style.top = top + 'px';
+  }
+
+  function toHex(r, g, b) {
+    return '#' + [r, g, b].map(v => 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.]+))?\\)/);
+    if (!m) return { hex: str, alpha: 1 };
+    const [, r, g, b, a = '1'] = m;
+    return { hex: toHex(r, g, b), alpha: parseFloat(a) };
+  }
+
+  function colorLabel(str) {
+    const c = parseColor(str);
+    if (!c) return null;
+    if (c.alpha < 1) return \`\${c.hex} (\${Math.round(c.alpha * 100)}% opacity)\`;
+    return c.hex;
+  }
+
+  function getComponentName(el) {
+    for (const key of Object.keys(el)) {
+      if (key.startsWith('__reactFiber$') || key.startsWith('__reactInternalInstance$')) {
+        let fiber = el[key];
+        while (fiber) {
+          const name = 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;
+    }
+    return null;
+  }
+
+  function getMatchingRules(el) {
+    const results = [];
+    try {
+      for (const sheet of document.styleSheets) {
+        let rules;
+        try { rules = sheet.cssRules; } catch { continue; }
+        if (!rules) continue;
+        for (const rule of rules) {
+          if (rule.type !== 1) continue;
+          const 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};\`);
+              }
+              if (props.length) results.push(\`\${sel} {\\n\${props.join('\\n')}\\n}\`);
+            }
+          } catch {}
+        }
+      }
+    } catch {}
+    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();
+      if (cur.id) { part += '#' + cur.id; parts.unshift(part); break; }
+      if (cur.classList.length) part += '.' + Array.from(cur.classList).slice(0, 2).join('.');
+      parts.unshift(part);
+      cur = cur.parentElement;
+    }
+    return parts.join(' > ');
+  }
+
+  // \u2500\u2500\u2500 Build info \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  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)}\xD7\${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 ? '\u2026' : ''}"\`);
+
+    const ff = cs.fontFamily.split(',')[0].replace(/['"]/g, '').trim();
+    lines.push(\`font: \${ff} \${cs.fontWeight} \${cs.fontSize}/\${cs.lineHeight}\`);
+
+    const color = colorLabel(cs.color);
+    if (color) lines.push(\`color: \${color}\`);
+
+    const bg = colorLabel(cs.backgroundColor);
+    if (bg) lines.push(\`bg: \${bg}\`);
+
+    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}\`);
+
+    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}\`);
+
+    if (cs.borderRadius && cs.borderRadius !== '0px') lines.push(\`radius: \${cs.borderRadius}\`);
+
+    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);
+    }
+
+    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;
+  }
+
+  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' + '\u2500'.repeat(40) + '\\n\\n');
+  }
+
+  // \u2500\u2500\u2500 Multi-select \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function makeBadge(el, index) {
+    const rect = el.getBoundingClientRect();
+    const 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',
+      color: '#fff',
+      fontSize: '10px',
+      fontWeight: '700',
+      fontFamily: 'ui-monospace, monospace',
+      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%)',
+    });
+    document.body.appendChild(badge);
+    return badge;
+  }
+
+  function rebuildBadges() {
+    selectedBadges.forEach(b => b.remove());
+    selectedBadges.length = 0;
+    selectedEls.forEach((el, i) => {
+      selectedBadges.push(makeBadge(el, i));
+    });
+  }
+
+  function toggleSelection(el) {
+    const idx = selectedEls.indexOf(el);
+    if (idx >= 0) {
+      selectedEls.splice(idx, 1);
+    } else {
+      selectedEls.push(el);
+    }
+    rebuildBadges();
+    updatePillForSelection();
+  }
+
+  function clearSelection() {
+    selectedEls.length = 0;
+    selectedBadges.forEach(b => b.remove());
+    selectedBadges.length = 0;
+  }
+
+  // \u2500\u2500\u2500 Measure mode \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  let pinHighlight = null;
+
+  function clearPin() {
+    if (pinHighlight) { pinHighlight.remove(); pinHighlight = null; }
+    pinEl = null;
+  }
+
+  function clearMeasureOverlay() {
+    measureOverlay.innerHTML = '';
+    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',
+      pointerEvents: 'none',
+    });
+    if (isHoriz) {
+      Object.assign(line.style, {
+        left: Math.min(x1, x2) + 'px', top: (y1 - 0.5) + 'px',
+        width: Math.abs(x2 - x1) + 'px', height: '1px',
+      });
+    } else {
+      Object.assign(line.style, {
+        left: (x1 - 0.5) + 'px', top: Math.min(y1, y2) + 'px',
+        width: '1px', height: Math.abs(y2 - y1) + 'px',
+      });
+    }
+    measureOverlay.appendChild(line);
+
+    if (label && label !== '0px') {
+      const lbl = document.createElement('div');
+      lbl.textContent = label;
+      Object.assign(lbl.style, {
+        position: 'absolute',
+        background: '#e53e3e',
+        color: '#fff',
+        fontSize: '10px',
+        fontFamily: 'ui-monospace, monospace',
+        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';
+        lbl.style.transform = 'translateX(-50%)';
+      } else {
+        const cy = (Math.min(y1, y2) + Math.max(y1, y2)) / 2;
+        lbl.style.left = (x1 + 6) + 'px';
+        lbl.style.top = cy + '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; }
+        }
+      }
+
+      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;
+    }
+
+    measureOverlay.style.display = 'block';
+    const tag = targetEl.tagName.toLowerCase();
+    const rect = targetEl.getBoundingClientRect();
+    return \`\u2B21 Measure  (M \u2192 pin element)\\n<\${tag}> \${Math.round(rect.width)}\xD7\${Math.round(rect.height)}\`;
+  }
+
+  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);
+
+    const lines = ['\u2B21 Measure  (Cmd+C \u2192 copy)'];
+    lines.push(\`From: <\${fTag}>\${fComp ? ' ' + fComp : ''} \${Math.round(fr.width)}\xD7\${Math.round(fr.height)}\`);
+    lines.push(\`To:   <\${tTag}>\${tComp ? ' ' + tComp : ''} \${Math.round(tr.width)}\xD7\${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;
+
+    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;
+      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\`);
+    } 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;
+      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'})\`);
+      }
+      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\`);
+      }
+      if (vGap === 0 && hGap === 0) lines.push('Elements overlap');
+    }
+
+    measureOverlay.style.display = 'block';
+    return lines.join('\\n');
+  }
+
+  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)}\xD7\${Math.round(fr.height)}\${fText ? ' "' + fText + '"' : ''}\`);
+    lines.push(\`  selector: \${getSelector(fromEl)}\`);
+    lines.push(\`To:   <\${tTag}>\${tComp ? ' ' + tComp : ''} \${Math.round(tr.width)}\xD7\${Math.round(tr.height)}\${tText ? ' "' + tText + '"' : ''}\`);
+    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\`);
+    } 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\`);
+      if (vGap === 0 && hGap === 0) lines.push('Elements overlap');
+    }
+    return lines.join('\\n');
+  }
+
+  // \u2500\u2500\u2500 Shortcut parser \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  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));
+    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();
+    return eKey === key || (key === 'period' && eKey === '.');
+  }
+
+  // \u2500\u2500\u2500 Mouse \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function onMouseMove(e) {
+    if (!fiActive) return;
+    const target = e.target;
+    if (!target || target === pill || pill.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;
+      positionTooltip(e.clientX, e.clientY);
+    } else {
+      clearMeasureOverlay();
+      tooltip.textContent = buildInfo(target);
+      positionTooltip(e.clientX, e.clientY);
+    }
+  }
+
+  // \u2500\u2500\u2500 Keyboard \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function isInputFocused() {
+    const el = document.activeElement;
+    return !!el && (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.isContentEditable);
+  }
+
+  document.addEventListener('keydown', (e) => {
+    if (matchesActivate(e)) {
+      e.preventDefault();
+      if (fiActive) deactivate(); else activate();
+      return;
+    }
+
+    if (!fiActive) return;
+
+    // Option tap (keydown only \u2014 actual toggle fires on keyup)
+    if (e.key === 'Alt' && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
+      optionHeld = true;
+      return;
+    }
+
+    // Cmd+C \u2014 copy
+    if ((e.metaKey || e.ctrlKey) && e.key === 'c' && !e.shiftKey && !e.altKey) {
+      e.preventDefault();
+      let text;
+      if (selectedEls.length > 0) {
+        text = buildMultiSelectCopyText();
+      } else if (measureMode && pinEl && lastHovered && lastHovered !== pinEl) {
+        text = buildMeasureCopyText(pinEl, lastHovered);
+      } else if (lastHovered) {
+        text = buildCopyText(lastHovered);
+      }
+      if (text) navigator.clipboard.writeText(text).catch(() => {});
+      return;
+    }
+
+    if (isInputFocused()) return;
+
+    // P \u2014 pick/unpick element (multi-select), Properties mode only
+    if (e.key === 'p' || e.key === 'P') {
+      if (measureMode || !lastHovered) return;
+      toggleSelection(lastHovered);
+      return;
+    }
+
+    // M \u2014 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 \xB7 hover another element \xB7 Cmd+C \u2192 copy \xB7 Esc \u2192 clear');
+      }
+      return;
+    }
+
+    // Escape cascade: pin \u2192 selection \u2192 exit
+    if (e.key === 'Escape') {
+      if (pinEl) {
+        clearPin();
+        clearMeasureOverlay();
+        hideTooltip();
+        updatePillForSelection();
+      } else if (selectedEls.length > 0) {
+        clearSelection();
+        collapsePill();
+      } else {
+        deactivate();
+      }
+      return;
+    }
+  }, true);
+
+  document.addEventListener('keyup', (e) => {
+    if (!fiActive) return;
+    if (e.key === 'Alt' && optionHeld) {
+      optionHeld = false;
+      measureMode = !measureMode;
+      clearMeasureOverlay();
+      if (!measureMode) clearPin();
+      hideTooltip();
+      flashMode();
+    }
+  }, true);
+
+  document.addEventListener('mousemove', onMouseMove, { passive: true });
+
+  console.log('%c\u{1F47B} Specter \u2014 Ctrl+Option+Z to toggle', 'color:#aaa;font-size:11px;');
+})();`;
+}
+
+// src/index.ts
+function specter(options = {}) {
+  return {
+    name: "vite-plugin-specter",
+    apply: "serve",
+    transformIndexHtml(html) {
+      const script = getClientScript(options);
+      return html.replace("</body>", `<script>
+${script}
+</script>
+</body>`);
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getClientScript,
+  specter
+});