vite-plugin-specter 0.6.0 → 0.6.1

package/README.md

@@ -1,8 +1,8 @@
 # Specter
 
-**Hover any element on your dev site. See its styles. Copy to AI.**
+**Point at any element on your dev site. Mark what to change — with exact values and a source anchor — and hand it to your AI.**
 
-Specter is a Vite plugin that adds an element inspector overlay to your dev server. Toggle it on, hover any element to see its styles, component name, and spacing. Copy with one shortcut and paste into your AI assistant for one-shot edits. Specter is automatically stripped from production builds.
+Specter is a Vite plugin that overlays an element inspector on your dev server. Hover any element to see its styles, component name, and spacing; measure gaps Figma-style; mark elements as **Specs** with a plain-language note; then copy them all to your AI assistant — each one carries the exact current values and a greppable source anchor, so there's no "which element?" and no "what's the current value?". Optionally, push your Specs straight into Claude Code with `/spectify`. Specter is automatically stripped from production builds.
 
 ## Requirements
 
@@ -46,51 +46,71 @@ If you ever need Specter gone entirely, remove `specter()` from the Vite config
 
 ### Toggle on/off
 
-Press **Ctrl+Option+Z** to enter Specter mode. A small zap icon appears at the bottom-left. Press again (or Esc) to exit.
+Press **Ctrl+Option+Z** to activate Specter. A small zap icon appears at the bottom-left. Press again (or **Esc**) to hide it — your Specs are kept and reappear when you reactivate.
 
-### Inspect an element
+### Three modes
 
-Once active, just **hover** any element. A tooltip shows:
+Specter has three modes; switching mode only changes *what's shown on screen* — you can mark a Spec in any of them.
+
+| Mode | Enter | Shows |
+|------|-------|-------|
+| **Properties** (default) | — | Styles tooltip on hover |
+| **Measure** | tap **Option** | Figma-style spacing to neighbors |
+| **Comment** | **C** | Just an outline — for clean design review |
+
+### Inspect an element (Properties mode)
+
+**Hover** any element. A tooltip shows:
 
 - HTML tag + React/Vue component name + dimensions
 - Text content (truncated)
 - Font: family, weight, size, line-height
-- Color (with hex) and background
+- Color (with hex) and background — flagged `(hover)` if the value comes from a `:hover` rule
 - Padding, margin, border-radius (if non-zero)
 - Display + gap + flex direction
 
-### Copy to clipboard
+### Measure spacing (Measure mode)
+
+Tap **Option** to switch to Measure mode. Hover any element to see distances to its surrounding neighbors. Press **M** while hovering to **pin** that element, then hover another to measure the gap or inset between the two; **M** again unpins. Tap **Option** again to return to Properties.
 
-Press **Cmd+C** while hovering. The element info is copied in an AI-optimized format. Paste it into Claude, Cursor, or any AI assistant and say what you want changed.
+### Mark a Spec (and optionally annotate)
 
-### Measure mode
+Press **P** while hovering an element to mark it as a **Spec**. A note box opens on the element — type the change you want ("reduce width to 320", "tighten padding to 8px") and press **Enter**, or just leave it empty for a plain mark. Numbered badges appear on each marked element. Mark as many as you like across the page.
 
-Tap **Option** to switch to Measure mode. Hover any element to see distance measurements to its surrounding neighbors (like Figma's spacing view). Tap **Option** again to return to Properties mode.
+### Comment mode
 
-### Pin an element
+Press **C** for Comment mode: the props/measure overlays hide and you get just a hover outline — good for talking through a design without visual noise. Specs still capture full properties underneath, so a Comment-mode Spec copies exactly like any other.
 
-In Measure mode, press **M** while hovering to pin that element. Then hover any other element to measure the gap or inset between the two. Press **Cmd+C** to copy the measurement. Press **Esc** to clear the pin.
+### Specs side panel
 
-### Multi-select
+Press **L** to open the Specs review panel. It lists every Spec; hover a row to scroll to and highlight its element; edit or delete notes inline. Specs survive a reload (saved to `localStorage` per URL).
 
-Press **P** while hovering an element to pick it. Numbered badges appear on each picked element. Press **Cmd+C** to copy all selected elements at once. Press **Esc** to clear the selection.
+### Copy to your AI
 
-### Annotate a change (skip the re-explaining)
+Press **Cmd+C**:
 
-Press **N** while hovering an element to attach a change note to it. A small field opens on the element — type what you want ("reduce width to 320", "tighten padding to 8px"), press **Enter** to save. The element is added to the selection and its badge shows a chip with your note. Annotate as many issues across the page as you like, then press **Cmd+C** once.
+- **With Specs marked** → copies **all** of them at once. Each block leads with your `✏️ CHANGE:` note (if any).
+- **With nothing marked** → copies the hovered element's properties (or, in Measure mode, the measurement).
 
-Each element's copied block now leads with your instruction:
+The copied format is lean and AI-ready — the current values plus a `find:` line that anchors the element in your source (test-id → id → aria-label → unique text → class → CSS path), so the assistant greps straight to the code:
 
 ```
-[Specter 1/3]
-✏️ CHANGE: reduce width to 320, tighten vertical padding
-<button>.btn-primary Button 200×48
-font: Inter 600 14/20
-padding: 12px 20px
-...
+[Specter 1/2]
+✏️ CHANGE: tighten the vertical padding to 8px
+<button> .btn-primary "Book a demo" 200×48
+find: .btn-primary
+font: Inter 600 14/20  ·  color: #fff  ·  bg: #4f46e5  ·  padding: 12px 20px  ·  radius: 10px  ·  display: inline-flex
+
+---
+
+[Specter 2/2]
+✏️ CHANGE: make this text darker — it fails contrast
+<p> .hero-sub "Analytics that…" 560×57
+find: .hero-sub
+font: Inter 400 19/28.5  ·  color: #c7cbd1
 ```
 
-So when you paste into your AI assistant, it already knows both *what* to change and *which element* — no follow-up typing. Notes are ephemeral (cleared on **Esc** or when you toggle Specter off).
+Paste into Claude, Cursor, or any AI assistant — the instructions travel with the elements, so there's nothing left to explain.
 
 ## Shortcut reference
 
@@ -98,36 +118,39 @@ So when you paste into your AI assistant, it already knows both *what* to change
 |--------|----------|
 | Toggle Specter | **Ctrl+Option+Z** |
 | Inspect element | Hover (while active) |
-| Copy properties | **Cmd+C** |
-| Switch to Measure mode | **Option** (tap) |
-| Pin element for measuring | **M** (in Measure mode) |
-| Pick element (multi-select) | **P** (in Properties mode) |
-| Annotate a change | **N** (in Properties mode) |
-| Clear pin / clear selection | **Esc** |
-| Exit Specter | **Esc** (when nothing selected/pinned) |
+| Mark a Spec (+ optional note) | **P** |
+| Copy (all Specs, or hovered element) | **Cmd+C** |
+| Measure mode (toggle) | **Option** (tap) |
+| Pin / unpin for measuring | **M** (in Measure mode) |
+| Comment mode (toggle) | **C** |
+| Specs panel (toggle) | **L** |
+| Close panel / hide Specter | **Esc** |
 
-## Workflow with AI assistants
+## Optional: push Specs straight to Claude Code (`/spectify`)
+
+Instead of copy-paste, Specter can auto-sync your Specs to a local bridge that Claude Code reads on demand. Enable it in your Vite config:
+
+```ts
+specter({ claudeBridge: true })
+```
 
-1. Toggle Specter (Ctrl+Option+Z)
-2. Hover the element you want to change
-3. Either press **Cmd+C** to copy its properties, or press **N** to annotate the exact change you want first
-4. Repeat **N** on every element you want to change, then **Cmd+C** once to copy them all
-5. Paste into your AI assistant's chat — the instructions travel with the elements, so there's nothing left to explain
+With it on, every Spec you mark auto-syncs (watch for the sync dot in the panel) to a local bridge at `http://127.0.0.1:8787`. Run the bridge (`node node_modules/vite-plugin-specter/mcp-bridge/server.mjs`, or register it in your project's `.mcp.json` so your IDE launches it), then in Claude Code run **`/spectify`** — it pulls whatever's currently synced and implements it. See [`mcp-bridge/`](https://github.com/setugk/vite-plugin-specter/tree/main/mcp-bridge) for setup. One bridge can serve several projects; `/spectify <port>` scopes to one.
 
-No more "which element?", no more "what's the current value?", and now no more re-typing the change. One paste gives your assistant everything it needs.
+`claudeBridge` is **off by default** — the shipped plugin never opens a connection unless you enable it.
 
 ## Configuration
 
 ```ts
-specter()                              // Default shortcuts
-specter({ shortcuts: { activate: 'ctrl+shift+i' } }) // Custom activate shortcut
+specter()                                             // defaults
+specter({ shortcuts: { activate: 'ctrl+shift+i' } })  // custom activate shortcut
+specter({ claudeBridge: true })                       // enable the Claude Code bridge
 ```
 
 The `activate` shortcut accepts any combination of `ctrl`, `alt`, `shift`, `meta`/`cmd`, and a key. Default is `ctrl+alt+z`.
 
 ## Optional: `data-style` attribute
 
-Tag elements with `data-style="keyName"` to show the style object key in the inspector:
+Tag elements with `data-style="keyName"` to surface the style-object key in the inspector and the copied output:
 
 ```jsx
 <h1 data-style="pageTitle">Welcome</h1>

package/dist/client.js

@@ -14,6 +14,7 @@
   var TIP_BG = '#292B32';
   var GREEN = '#22C55E';
   var LABEL = '#8B8D94';
+  var BADGE_IDLE = '#6B6D75'; // panel row-number badges sit greyscale; the hovered row's badge colors to PURPLE
   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 PENCIL = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path><path d="m15 5 4 4"></path></svg>';
@@ -1326,9 +1327,10 @@
       badge.textContent = String(i + 1);
       Object.assign(badge.style, {
         flexShrink: '0', width: '20px', height: '20px', borderRadius: '999px',
-        background: PURPLE, color: '#fff', fontSize: '11px', fontWeight: '700',
-        border: '2px solid #fff', boxSizing: 'border-box',
+        background: BADGE_IDLE, color: '#fff', fontSize: '11px', fontWeight: '700',
+        border: '1px solid #fff', boxSizing: 'border-box',
         display: 'flex', alignItems: 'center', justifyContent: 'center',
+        transition: 'background 0.12s ease',
       });
       var content = document.createElement('div');
       Object.assign(content.style, { flex: '1', minWidth: '0', display: 'flex', flexDirection: 'column', gap: '6px', paddingRight: '30px' });
@@ -1450,12 +1452,14 @@
         note.addEventListener('click', function (e) { if (spec.note) { e.stopPropagation(); spec._expanded = !spec._expanded; renderPanel(); } });
         row.addEventListener('mouseenter', function () {
           row.style.background = 'rgba(255,255,255,0.05)';
+          badge.style.background = PURPLE;
           editBtn.style.display = delBtn.style.display = 'flex';
           actions.style.background = 'linear-gradient(to right, rgba(52,54,60,0) 0, rgba(52,54,60,1) 22px)';
           if (visible) { highlightSpec = spec; revealSpec(spec); }
         });
         row.addEventListener('mouseleave', function () {
           row.style.background = 'transparent';
+          badge.style.background = BADGE_IDLE;
           editBtn.style.display = delBtn.style.display = 'none';
           actions.style.background = 'transparent';
           if (highlightSpec === spec) highlightSpec = null;

package/dist/extension-chrome/content.js

@@ -14,6 +14,7 @@
   var TIP_BG = '#292B32';
   var GREEN = '#22C55E';
   var LABEL = '#8B8D94';
+  var BADGE_IDLE = '#6B6D75'; // panel row-number badges sit greyscale; the hovered row's badge colors to PURPLE
   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 PENCIL = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path><path d="m15 5 4 4"></path></svg>';
@@ -1326,9 +1327,10 @@
       badge.textContent = String(i + 1);
       Object.assign(badge.style, {
         flexShrink: '0', width: '20px', height: '20px', borderRadius: '999px',
-        background: PURPLE, color: '#fff', fontSize: '11px', fontWeight: '700',
-        border: '2px solid #fff', boxSizing: 'border-box',
+        background: BADGE_IDLE, color: '#fff', fontSize: '11px', fontWeight: '700',
+        border: '1px solid #fff', boxSizing: 'border-box',
         display: 'flex', alignItems: 'center', justifyContent: 'center',
+        transition: 'background 0.12s ease',
       });
       var content = document.createElement('div');
       Object.assign(content.style, { flex: '1', minWidth: '0', display: 'flex', flexDirection: 'column', gap: '6px', paddingRight: '30px' });
@@ -1450,12 +1452,14 @@
         note.addEventListener('click', function (e) { if (spec.note) { e.stopPropagation(); spec._expanded = !spec._expanded; renderPanel(); } });
         row.addEventListener('mouseenter', function () {
           row.style.background = 'rgba(255,255,255,0.05)';
+          badge.style.background = PURPLE;
           editBtn.style.display = delBtn.style.display = 'flex';
           actions.style.background = 'linear-gradient(to right, rgba(52,54,60,0) 0, rgba(52,54,60,1) 22px)';
           if (visible) { highlightSpec = spec; revealSpec(spec); }
         });
         row.addEventListener('mouseleave', function () {
           row.style.background = 'transparent';
+          badge.style.background = BADGE_IDLE;
           editBtn.style.display = delBtn.style.display = 'none';
           actions.style.background = 'transparent';
           if (highlightSpec === spec) highlightSpec = null;

package/dist/extension-chrome/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Specter",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Element inspector for AI-assisted development. Ctrl+Option+Z to activate.",
   "icons": {
     "16": "icons/icon16.png",

package/dist/extension-firefox/content.js

@@ -14,6 +14,7 @@
   var TIP_BG = '#292B32';
   var GREEN = '#22C55E';
   var LABEL = '#8B8D94';
+  var BADGE_IDLE = '#6B6D75'; // panel row-number badges sit greyscale; the hovered row's badge colors to PURPLE
   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 PENCIL = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path><path d="m15 5 4 4"></path></svg>';
@@ -1326,9 +1327,10 @@
       badge.textContent = String(i + 1);
       Object.assign(badge.style, {
         flexShrink: '0', width: '20px', height: '20px', borderRadius: '999px',
-        background: PURPLE, color: '#fff', fontSize: '11px', fontWeight: '700',
-        border: '2px solid #fff', boxSizing: 'border-box',
+        background: BADGE_IDLE, color: '#fff', fontSize: '11px', fontWeight: '700',
+        border: '1px solid #fff', boxSizing: 'border-box',
         display: 'flex', alignItems: 'center', justifyContent: 'center',
+        transition: 'background 0.12s ease',
       });
       var content = document.createElement('div');
       Object.assign(content.style, { flex: '1', minWidth: '0', display: 'flex', flexDirection: 'column', gap: '6px', paddingRight: '30px' });
@@ -1450,12 +1452,14 @@
         note.addEventListener('click', function (e) { if (spec.note) { e.stopPropagation(); spec._expanded = !spec._expanded; renderPanel(); } });
         row.addEventListener('mouseenter', function () {
           row.style.background = 'rgba(255,255,255,0.05)';
+          badge.style.background = PURPLE;
           editBtn.style.display = delBtn.style.display = 'flex';
           actions.style.background = 'linear-gradient(to right, rgba(52,54,60,0) 0, rgba(52,54,60,1) 22px)';
           if (visible) { highlightSpec = spec; revealSpec(spec); }
         });
         row.addEventListener('mouseleave', function () {
           row.style.background = 'transparent';
+          badge.style.background = BADGE_IDLE;
           editBtn.style.display = delBtn.style.display = 'none';
           actions.style.background = 'transparent';
           if (highlightSpec === spec) highlightSpec = null;

package/dist/extension-firefox/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Specter",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Element inspector for AI-assisted development. Ctrl+Option+Z to activate.",
   "browser_specific_settings": {
     "gecko": {

package/dist/index.cjs

@@ -46,6 +46,7 @@ function getClientScript(options) {
   var TIP_BG = '#292B32';
   var GREEN = '#22C55E';
   var LABEL = '#8B8D94';
+  var BADGE_IDLE = '#6B6D75'; // panel row-number badges sit greyscale; the hovered row's badge colors to PURPLE
   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 PENCIL = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path><path d="m15 5 4 4"></path></svg>';
@@ -1358,9 +1359,10 @@ function getClientScript(options) {
       badge.textContent = String(i + 1);
       Object.assign(badge.style, {
         flexShrink: '0', width: '20px', height: '20px', borderRadius: '999px',
-        background: PURPLE, color: '#fff', fontSize: '11px', fontWeight: '700',
-        border: '2px solid #fff', boxSizing: 'border-box',
+        background: BADGE_IDLE, color: '#fff', fontSize: '11px', fontWeight: '700',
+        border: '1px solid #fff', boxSizing: 'border-box',
         display: 'flex', alignItems: 'center', justifyContent: 'center',
+        transition: 'background 0.12s ease',
       });
       var content = document.createElement('div');
       Object.assign(content.style, { flex: '1', minWidth: '0', display: 'flex', flexDirection: 'column', gap: '6px', paddingRight: '30px' });
@@ -1482,12 +1484,14 @@ function getClientScript(options) {
         note.addEventListener('click', function (e) { if (spec.note) { e.stopPropagation(); spec._expanded = !spec._expanded; renderPanel(); } });
         row.addEventListener('mouseenter', function () {
           row.style.background = 'rgba(255,255,255,0.05)';
+          badge.style.background = PURPLE;
           editBtn.style.display = delBtn.style.display = 'flex';
           actions.style.background = 'linear-gradient(to right, rgba(52,54,60,0) 0, rgba(52,54,60,1) 22px)';
           if (visible) { highlightSpec = spec; revealSpec(spec); }
         });
         row.addEventListener('mouseleave', function () {
           row.style.background = 'transparent';
+          badge.style.background = BADGE_IDLE;
           editBtn.style.display = delBtn.style.display = 'none';
           actions.style.background = 'transparent';
           if (highlightSpec === spec) highlightSpec = null;

package/dist/index.js

@@ -19,6 +19,7 @@ function getClientScript(options) {
   var TIP_BG = '#292B32';
   var GREEN = '#22C55E';
   var LABEL = '#8B8D94';
+  var BADGE_IDLE = '#6B6D75'; // panel row-number badges sit greyscale; the hovered row's badge colors to PURPLE
   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 PENCIL = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path><path d="m15 5 4 4"></path></svg>';
@@ -1331,9 +1332,10 @@ function getClientScript(options) {
       badge.textContent = String(i + 1);
       Object.assign(badge.style, {
         flexShrink: '0', width: '20px', height: '20px', borderRadius: '999px',
-        background: PURPLE, color: '#fff', fontSize: '11px', fontWeight: '700',
-        border: '2px solid #fff', boxSizing: 'border-box',
+        background: BADGE_IDLE, color: '#fff', fontSize: '11px', fontWeight: '700',
+        border: '1px solid #fff', boxSizing: 'border-box',
         display: 'flex', alignItems: 'center', justifyContent: 'center',
+        transition: 'background 0.12s ease',
       });
       var content = document.createElement('div');
       Object.assign(content.style, { flex: '1', minWidth: '0', display: 'flex', flexDirection: 'column', gap: '6px', paddingRight: '30px' });
@@ -1455,12 +1457,14 @@ function getClientScript(options) {
         note.addEventListener('click', function (e) { if (spec.note) { e.stopPropagation(); spec._expanded = !spec._expanded; renderPanel(); } });
         row.addEventListener('mouseenter', function () {
           row.style.background = 'rgba(255,255,255,0.05)';
+          badge.style.background = PURPLE;
           editBtn.style.display = delBtn.style.display = 'flex';
           actions.style.background = 'linear-gradient(to right, rgba(52,54,60,0) 0, rgba(52,54,60,1) 22px)';
           if (visible) { highlightSpec = spec; revealSpec(spec); }
         });
         row.addEventListener('mouseleave', function () {
           row.style.background = 'transparent';
+          badge.style.background = BADGE_IDLE;
           editBtn.style.display = delBtn.style.display = 'none';
           actions.style.background = 'transparent';
           if (highlightSpec === spec) highlightSpec = null;

package/extension/content.js

@@ -14,6 +14,7 @@
   var TIP_BG = '#292B32';
   var GREEN = '#22C55E';
   var LABEL = '#8B8D94';
+  var BADGE_IDLE = '#6B6D75'; // panel row-number badges sit greyscale; the hovered row's badge colors to PURPLE
   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 PENCIL = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path><path d="m15 5 4 4"></path></svg>';
@@ -1326,9 +1327,10 @@
       badge.textContent = String(i + 1);
       Object.assign(badge.style, {
         flexShrink: '0', width: '20px', height: '20px', borderRadius: '999px',
-        background: PURPLE, color: '#fff', fontSize: '11px', fontWeight: '700',
-        border: '2px solid #fff', boxSizing: 'border-box',
+        background: BADGE_IDLE, color: '#fff', fontSize: '11px', fontWeight: '700',
+        border: '1px solid #fff', boxSizing: 'border-box',
         display: 'flex', alignItems: 'center', justifyContent: 'center',
+        transition: 'background 0.12s ease',
       });
       var content = document.createElement('div');
       Object.assign(content.style, { flex: '1', minWidth: '0', display: 'flex', flexDirection: 'column', gap: '6px', paddingRight: '30px' });
@@ -1450,12 +1452,14 @@
         note.addEventListener('click', function (e) { if (spec.note) { e.stopPropagation(); spec._expanded = !spec._expanded; renderPanel(); } });
         row.addEventListener('mouseenter', function () {
           row.style.background = 'rgba(255,255,255,0.05)';
+          badge.style.background = PURPLE;
           editBtn.style.display = delBtn.style.display = 'flex';
           actions.style.background = 'linear-gradient(to right, rgba(52,54,60,0) 0, rgba(52,54,60,1) 22px)';
           if (visible) { highlightSpec = spec; revealSpec(spec); }
         });
         row.addEventListener('mouseleave', function () {
           row.style.background = 'transparent';
+          badge.style.background = BADGE_IDLE;
           editBtn.style.display = delBtn.style.display = 'none';
           actions.style.background = 'transparent';
           if (highlightSpec === spec) highlightSpec = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-specter",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Inspect elements and Figma-style measure spacing in your vibe-coded Vite projects. Give your AI exactly what it needs to make the right change.",
   "author": "Setu Kathawate <dev@setugk.com>",
   "homepage": "https://github.com/setugk/vite-plugin-specter#readme",