vite-plugin-source-locator 1.0.0 → 1.1.2

package/README.md

@@ -42,11 +42,11 @@ No `main.tsx` wiring required. The plugin auto-injects the client overlay in dev
 
 ## Pick Mode
 
-1. Click the badge (bottom-right): **Source Locator (cursor) — click to pick**
+1. Click the badge (bottom-right): **Source Locator (auto) — click to pick**
 2. Hover elements — blue highlight + file paths in tooltip
 3. Click to open source — cycles **TSX → CSS → TSX** when both exist
 4. **Esc** — cancel pick mode
-5. **Shift+L** — cycle IDE: cursor → vscode → webstorm
+5. **Shift+L** — cycle IDE (session only, resets on refresh)
 
 ## Exports
 
@@ -63,7 +63,7 @@ sourceLocator({
   enabled: true,
   endpoint: '/__open-in-editor',
   attribute: 'data-source',
-  ides: ['cursor', 'vscode', 'webstorm'],
+  ides: ['auto', 'cursor', 'vscode', 'webstorm'],
   theme: 'light',
 })
 ```
@@ -89,7 +89,7 @@ import { initSourceLocator } from 'vite-plugin-source-locator/client'
 initSourceLocator({
   endpoint: '/__open-in-editor',
   attribute: 'data-source',
-  ides: ['cursor', 'vscode', 'webstorm'],
+  ides: ['auto', 'cursor', 'vscode', 'webstorm'],
   theme: {
     background: '#ffffff',
     text: '#000000',
@@ -132,19 +132,60 @@ import { initSourceLocator } from 'vite-plugin-source-locator/client'
 initSourceLocator({
   endpoint: '/__open-in-editor',
   attribute: 'data-source',
-  ides: ['cursor', 'vscode', 'webstorm'],
+  ides: ['auto', 'cursor', 'vscode', 'webstorm'],
   theme: 'blue',
 })
 ```
 
+## IDE Setup
+
+IDE opening works on **macOS, Windows, and Linux** via [`launch-editor`](https://github.com/vitejs/launch-editor).
+
+### Auto detection (default)
+
+By default, `ides` includes `'auto'` as the first entry. In `auto` mode, the plugin detects your open IDE:
+
+1. `LAUNCH_EDITOR` / `REACT_EDITOR` environment variable
+2. Running editor process (VS Code, Cursor, WebStorm, etc.)
+3. `VISUAL` / `EDITOR` environment variable
+
+No CLI on `PATH` is required if the editor is already running.
+
+```typescript
+// auto-detect open IDE (default)
+sourceLocator()
+
+// VS Code only
+sourceLocator({ ides: ['vscode'] })
+
+// auto + manual override with Shift+L (session only)
+sourceLocator({ ides: ['auto', 'vscode'] })
+```
+
+The first entry in `ides` is the default. Shift+L cycles through the list in memory (resets on page refresh).
+
+### Explicit editor
+
+When not using `auto`, the editor CLI should be on your `PATH`:
+
+| IDE | CLI command |
+|-----|-------------|
+| Cursor | `cursor` |
+| VS Code | `code` |
+| WebStorm | `webstorm` |
+
+Override with environment variables:
+
+- `LAUNCH_EDITOR=code`
+- `REACT_EDITOR=code`
+
 ## Adding a New IDE
 
 1. Extend `LocatorIde` and `IDE_ORDER` in `src/shared/index.ts`
-2. Add entry to `EDITORS` in `src/vite/editors.ts`
+2. Use a [launch-editor supported editor name](https://github.com/vitejs/launch-editor#supported-editors) as the new `LocatorIde` value
 
 ## Limitations
 
-- macOS only for IDE opening
 - Dev only — no production impact
 - JSX/TSX only for `data-source` injection
 - CSS line 1 only (no source-map line mapping yet)

package/dist/client/controller.js

@@ -1,20 +1,24 @@
-import { nextClickTarget, parseSourceLocation, resolveTheme } from '../shared/index.js';
+import { nextClickTarget, nextIde, parseSourceLocation, resolveTheme } from '../shared/index.js';
 import { findCssSource } from './css-source.js';
 import { createLocatorOverlayUi } from './overlay.js';
-import { cycleStoredIde, getStoredIde } from './preference.js';
+const EMPTY_SOURCES = Object.freeze({
+    tsx: undefined,
+    css: undefined,
+    clickTarget: 'tsx',
+});
 function getSourceEl(target, attribute, host) {
     if (!target || host.contains(target) || target === host)
         return null;
     const el = target.closest(`[${attribute}]`);
     return el instanceof HTMLElement ? el : null;
 }
-async function openSourceInEditor(source, config) {
+async function openSourceInEditor(source, config, activeIde) {
     const loc = parseSourceLocation(source);
     const params = new URLSearchParams({
         file: loc.file,
         line: loc.line,
         col: loc.col,
-        ide: getStoredIde(),
+        ide: activeIde,
     });
     await fetch(`${config.endpoint}?${params.toString()}`);
 }
@@ -24,29 +28,30 @@ function readElementSources(el, attribute) {
     return { tsx, css, clickTarget: 'tsx' };
 }
 function resolveOpenSource(sources) {
-    if (sources.clickTarget === 'css')
-        return sources.css;
-    return sources.tsx;
+    return sources[sources.clickTarget];
 }
 export function startPickController(root, host, config) {
     let pickMode = false;
-    let sources = { tsx: undefined, css: undefined, clickTarget: 'tsx' };
-    const ui = createLocatorOverlayUi(root, () => setPickMode(!pickMode), resolveTheme(config.theme));
+    let sources = EMPTY_SOURCES;
+    let activeIde = config.ides[0] ?? 'auto';
+    const ui = createLocatorOverlayUi(root, () => setPickMode(!pickMode), resolveTheme(config.theme), () => activeIde);
     function setPickMode(active) {
         pickMode = active;
         ui.setPickActive(active);
         if (!active)
-            sources = { tsx: undefined, css: undefined, clickTarget: 'tsx' };
+            sources = EMPTY_SOURCES;
     }
+    const syncSources = (el) => {
+        if (el !== ui.getActiveEl())
+            sources = readElementSources(el, config.attribute);
+    };
     const updateHover = (target, x, y) => {
         const el = getSourceEl(target, config.attribute, host);
         if (!el) {
             ui.removeTooltip();
             return;
         }
-        if (el !== ui.getActiveEl()) {
-            sources = readElementSources(el, config.attribute);
-        }
+        syncSources(el);
         ui.showSourceTooltip(el, sources.tsx, sources.css, sources.clickTarget, x, y);
     };
     const onMouseMove = (e) => {
@@ -63,10 +68,10 @@ export function startPickController(root, host, config) {
         }
         if (!e.shiftKey || e.key !== 'L')
             return;
-        const next = cycleStoredIde(config.ides);
+        activeIde = nextIde(activeIde, config.ides);
         if (!pickMode)
             ui.refreshBadgeLabel();
-        ui.flashMessage(`IDE: ${next}`);
+        ui.flashMessage(`IDE: ${activeIde}`);
     };
     const onClick = async (e) => {
         if (!pickMode || host.contains(e.target))
@@ -74,19 +79,15 @@ export function startPickController(root, host, config) {
         e.preventDefault();
         e.stopPropagation();
         const el = getSourceEl(e.target, config.attribute, host);
-        if (!el) {
-            ui.flashMessage('No source for this element');
-            return;
-        }
-        if (el !== ui.getActiveEl())
-            sources = readElementSources(el, config.attribute);
-        const openSource = resolveOpenSource(sources);
-        if (!openSource) {
+        if (el)
+            syncSources(el);
+        const openSource = el && resolveOpenSource(sources);
+        if (!el || !openSource) {
             ui.flashMessage('No source for this element');
             return;
         }
-        await openSourceInEditor(openSource, config);
-        sources.clickTarget = nextClickTarget(sources.clickTarget, !!sources.css);
+        await openSourceInEditor(openSource, config, activeIde);
+        sources = { ...sources, clickTarget: nextClickTarget(sources.clickTarget, !!sources.css) };
         ui.showSourceTooltip(el, sources.tsx, sources.css, sources.clickTarget, e.clientX, e.clientY);
     };
     document.addEventListener('keydown', onKeyDown);

package/dist/client/css-source.js

@@ -1,14 +1,17 @@
 import { formatSourceLocation } from '../shared/index.js';
+const SELECTOR_ID_BONUS = 100;
+const SELECTOR_CLASS_BONUS = 50;
+const SELECTOR_CLASS_MATCH_BONUS = 200;
 function scoreSelector(selector, element) {
     let score = selector.length;
     if (selector.includes('#'))
-        score += 100;
+        score += SELECTOR_ID_BONUS;
     if (selector.includes('.'))
-        score += 50;
+        score += SELECTOR_CLASS_BONUS;
     if (element instanceof HTMLElement) {
         element.classList.forEach((cls) => {
             if (selector.includes(`.${cls}`))
-                score += 200;
+                score += SELECTOR_CLASS_MATCH_BONUS;
         });
     }
     return score;

package/dist/client/overlay-styles.d.ts

@@ -0,0 +1,40 @@
+export declare const UI_IDS: {
+    readonly badge: "source-locator-badge";
+    readonly tooltip: "source-locator-tooltip";
+    readonly highlight: "source-locator-highlight";
+};
+export declare const LAYOUT: {
+    readonly badge: {
+        readonly position: "fixed";
+        readonly bottom: "12px";
+        readonly right: "12px";
+        readonly padding: "8px 12px";
+        readonly borderRadius: "999px";
+        readonly fontSize: "11px";
+        readonly fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace";
+        readonly zIndex: "99999";
+        readonly cursor: "pointer";
+        readonly boxShadow: "0 4px 16px rgba(0, 0, 0, 0.35)";
+    };
+    readonly tooltip: {
+        readonly position: "fixed";
+        readonly padding: "8px 12px";
+        readonly borderRadius: "8px";
+        readonly fontSize: "12px";
+        readonly fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace";
+        readonly zIndex: "99999";
+        readonly pointerEvents: "none";
+        readonly boxShadow: "0 8px 24px rgba(0, 0, 0, 0.45)";
+        readonly maxWidth: "420px";
+        readonly whiteSpace: "pre";
+        readonly lineHeight: "1.5";
+    };
+    readonly highlight: {
+        readonly position: "fixed";
+        readonly borderWidth: "2px";
+        readonly borderStyle: "solid";
+        readonly borderRadius: "4px";
+        readonly pointerEvents: "none";
+        readonly zIndex: "99998";
+    };
+};

package/dist/client/overlay-styles.js

@@ -0,0 +1,40 @@
+export const UI_IDS = {
+    badge: 'source-locator-badge',
+    tooltip: 'source-locator-tooltip',
+    highlight: 'source-locator-highlight',
+};
+export const LAYOUT = {
+    badge: {
+        position: 'fixed',
+        bottom: '12px',
+        right: '12px',
+        padding: '8px 12px',
+        borderRadius: '999px',
+        fontSize: '11px',
+        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+        zIndex: '99999',
+        cursor: 'pointer',
+        boxShadow: '0 4px 16px rgba(0, 0, 0, 0.35)',
+    },
+    tooltip: {
+        position: 'fixed',
+        padding: '8px 12px',
+        borderRadius: '8px',
+        fontSize: '12px',
+        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+        zIndex: '99999',
+        pointerEvents: 'none',
+        boxShadow: '0 8px 24px rgba(0, 0, 0, 0.45)',
+        maxWidth: '420px',
+        whiteSpace: 'pre',
+        lineHeight: '1.5',
+    },
+    highlight: {
+        position: 'fixed',
+        borderWidth: '2px',
+        borderStyle: 'solid',
+        borderRadius: '4px',
+        pointerEvents: 'none',
+        zIndex: '99998',
+    },
+};

package/dist/client/overlay.d.ts

@@ -1,5 +1,5 @@
-import type { ClickTarget, LocatorTheme } from '../shared/index.js';
-export declare function createLocatorOverlayUi(root: ShadowRoot, onTogglePick: () => void, theme: LocatorTheme): {
+import type { ClickTarget, LocatorIde, LocatorTheme } from '../shared/index.js';
+export declare function createLocatorOverlayUi(root: ShadowRoot, onTogglePick: () => void, theme: LocatorTheme, getActiveIde: () => LocatorIde): {
     mountBadge: () => void;
     setPickActive: (active: boolean) => void;
     refreshBadgeLabel: () => void;

package/dist/client/overlay.js

@@ -1,73 +1,12 @@
-import { parseSourceLocation } from '../shared/index.js';
+import { LAYOUT, UI_IDS } from './overlay-styles.js';
 import { badgeLabel } from './preference.js';
-const UI_IDS = {
-    badge: 'source-locator-badge',
-    tooltip: 'source-locator-tooltip',
-    highlight: 'source-locator-highlight',
-};
-const LAYOUT = {
-    badge: {
-        position: 'fixed',
-        bottom: '12px',
-        right: '12px',
-        padding: '8px 12px',
-        borderRadius: '999px',
-        fontSize: '11px',
-        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
-        zIndex: '99999',
-        cursor: 'pointer',
-        boxShadow: '0 4px 16px rgba(0, 0, 0, 0.35)',
-    },
-    tooltip: {
-        position: 'fixed',
-        padding: '8px 12px',
-        borderRadius: '8px',
-        fontSize: '12px',
-        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
-        zIndex: '99999',
-        pointerEvents: 'none',
-        boxShadow: '0 8px 24px rgba(0, 0, 0, 0.45)',
-        maxWidth: '420px',
-        whiteSpace: 'pre',
-        lineHeight: '1.5',
-    },
-    highlight: {
-        position: 'fixed',
-        borderWidth: '2px',
-        borderStyle: 'solid',
-        borderRadius: '4px',
-        pointerEvents: 'none',
-        zIndex: '99998',
-    },
-};
-function formatSourceLabel(source, prefix) {
-    const { file, line } = parseSourceLocation(source);
-    const name = file.split('/').pop() ?? file;
-    const label = line !== '1' ? `${name}:${line}` : name;
-    if (prefix)
-        return `${prefix}: ${label}`;
-    return label;
-}
-function buildTooltipText(tsxSource, cssSource, clickTarget) {
-    const lines = [];
-    if (tsxSource)
-        lines.push(formatSourceLabel(tsxSource, 'TSX'));
-    if (cssSource)
-        lines.push(formatSourceLabel(cssSource, 'CSS'));
-    if (!cssSource) {
-        lines.push('Click → open TSX');
-        return lines.join('\n');
-    }
-    if (clickTarget === 'tsx') {
-        lines.push('Click → open TSX');
-        lines.push('Click again → open CSS');
-        return lines.join('\n');
-    }
-    lines.push('Click → open CSS');
-    lines.push('Click again → open TSX');
-    return lines.join('\n');
-}
-export function createLocatorOverlayUi(root, onTogglePick, theme) {
+import { buildTooltipText } from './tooltip-text.js';
+const HIGHLIGHT_PADDING = 2;
+const TOOLTIP_CURSOR_OFFSET = 16;
+const FLASH_DURATION_MS = 1500;
+const FLASH_HORIZONTAL_OFFSET = 80;
+const FLASH_BOTTOM_OFFSET = 80;
+export function createLocatorOverlayUi(root, onTogglePick, theme, getActiveIde) {
     let activeEl = null;
     let flashTimeout = null;
     let badgeEl = null;
@@ -83,10 +22,10 @@ export function createLocatorOverlayUi(root, onTogglePick, theme) {
         const highlight = document.createElement('div');
         highlight.id = UI_IDS.highlight;
         Object.assign(highlight.style, LAYOUT.highlight, {
-            top: `${rect.top - 2}px`,
-            left: `${rect.left - 2}px`,
-            width: `${rect.width + 4}px`,
-            height: `${rect.height + 4}px`,
+            top: `${rect.top - HIGHLIGHT_PADDING}px`,
+            left: `${rect.left - HIGHLIGHT_PADDING}px`,
+            width: `${rect.width + HIGHLIGHT_PADDING * 2}px`,
+            height: `${rect.height + HIGHLIGHT_PADDING * 2}px`,
             borderColor: theme.highlightBorder,
             background: theme.highlightBackground,
             boxShadow: `0 0 0 1px ${theme.highlightShadow}`,
@@ -99,8 +38,8 @@ export function createLocatorOverlayUi(root, onTogglePick, theme) {
         tooltip.id = UI_IDS.tooltip;
         tooltip.textContent = text;
         Object.assign(tooltip.style, LAYOUT.tooltip, {
-            top: `${y + 16}px`,
-            left: `${x + 16}px`,
+            top: `${y + TOOLTIP_CURSOR_OFFSET}px`,
+            left: `${x + TOOLTIP_CURSOR_OFFSET}px`,
             background: theme.tooltipBackground,
             color: theme.tooltipText,
             border: `1px solid ${theme.tooltipBorder}`,
@@ -116,8 +55,10 @@ export function createLocatorOverlayUi(root, onTogglePick, theme) {
     const flashMessage = (text) => {
         if (flashTimeout)
             clearTimeout(flashTimeout);
-        showTooltip(text, null, window.innerWidth / 2 - 80, window.innerHeight - 80);
-        flashTimeout = setTimeout(removeTooltip, 1500);
+        const x = window.innerWidth / 2 - FLASH_HORIZONTAL_OFFSET;
+        const y = window.innerHeight - FLASH_BOTTOM_OFFSET;
+        showTooltip(text, null, x, y);
+        flashTimeout = setTimeout(removeTooltip, FLASH_DURATION_MS);
     };
     const applyBadgeColors = (active) => {
         if (!badgeEl)
@@ -129,20 +70,20 @@ export function createLocatorOverlayUi(root, onTogglePick, theme) {
         document.body.style.cursor = active ? 'crosshair' : '';
         if (!badgeEl)
             return;
-        badgeEl.textContent = badgeLabel(active);
+        badgeEl.textContent = badgeLabel(active, getActiveIde());
         applyBadgeColors(active);
         if (!active)
             removeTooltip();
     };
     const refreshBadgeLabel = () => {
         if (badgeEl)
-            badgeEl.textContent = badgeLabel(false);
+            badgeEl.textContent = badgeLabel(false, getActiveIde());
     };
     const mountBadge = () => {
         badgeEl = document.createElement('button');
         badgeEl.id = UI_IDS.badge;
         badgeEl.type = 'button';
-        badgeEl.textContent = badgeLabel(false);
+        badgeEl.textContent = badgeLabel(false, getActiveIde());
         Object.assign(badgeEl.style, LAYOUT.badge, {
             background: theme.badgeBackground,
             color: theme.badgeText,

package/dist/client/preference.d.ts

@@ -1,5 +1,2 @@
 import type { LocatorIde } from '../shared/index.js';
-export declare function getStoredIde(): LocatorIde;
-export declare function setStoredIde(ide: LocatorIde): void;
-export declare function cycleStoredIde(order: LocatorIde[]): LocatorIde;
-export declare function badgeLabel(picking: boolean): string;
+export declare function badgeLabel(picking: boolean, activeIde: LocatorIde): string;

package/dist/client/preference.js

@@ -1,19 +1,7 @@
-import { DEFAULT_IDE, STORAGE_KEY, isLocatorIde, nextIde } from '../shared/index.js';
-export function getStoredIde() {
-    const stored = localStorage.getItem(STORAGE_KEY) ?? DEFAULT_IDE;
-    return isLocatorIde(stored) ? stored : DEFAULT_IDE;
-}
-export function setStoredIde(ide) {
-    localStorage.setItem(STORAGE_KEY, ide);
-}
-export function cycleStoredIde(order) {
-    const next = nextIde(getStoredIde(), order);
-    setStoredIde(next);
-    return next;
-}
-export function badgeLabel(picking) {
-    const ide = getStoredIde();
+const BADGE_PICKING_HINT = 'Esc to cancel';
+const BADGE_IDLE_HINT = 'click to pick';
+export function badgeLabel(picking, activeIde) {
     if (picking)
-        return `Pick element (${ide}) — Esc to cancel`;
-    return `Source Locator (${ide}) — click to pick`;
+        return `Pick element (${activeIde}) — ${BADGE_PICKING_HINT}`;
+    return `Source Locator (${activeIde}) — ${BADGE_IDLE_HINT}`;
 }

package/dist/client/source-panel.d.ts

@@ -0,0 +1,11 @@
+import type { LocatorTheme } from '../shared/index.js';
+export type SourcePanelPayload = {
+    file: string;
+    line: string;
+    col: string;
+    content: string;
+};
+export declare function createSourcePanel(root: ShadowRoot, theme: LocatorTheme): {
+    showSourcePanel: (payload: SourcePanelPayload) => void;
+    removePanel: () => void | undefined;
+};

package/dist/client/source-panel.js

@@ -0,0 +1,113 @@
+const PANEL_ID = 'source-locator-panel';
+function fileBasename(file) {
+    return file.split('/').pop() ?? file;
+}
+function escapeHtml(text) {
+    return text
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}
+export function createSourcePanel(root, theme) {
+    const removePanel = () => root.getElementById(PANEL_ID)?.remove();
+    const showSourcePanel = (payload) => {
+        removePanel();
+        const lineNumber = Math.max(1, Number.parseInt(payload.line, 10) || 1);
+        const lines = payload.content.split('\n');
+        const panel = document.createElement('div');
+        panel.id = PANEL_ID;
+        Object.assign(panel.style, {
+            position: 'fixed',
+            left: '0',
+            right: '0',
+            bottom: '0',
+            height: '40vh',
+            minHeight: '200px',
+            maxHeight: '480px',
+            display: 'flex',
+            flexDirection: 'column',
+            background: theme.tooltipBackground,
+            borderTop: `2px solid ${theme.tooltipBorder}`,
+            boxShadow: '0 -8px 32px rgba(0, 0, 0, 0.45)',
+            zIndex: '100000',
+            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+            fontSize: '12px',
+        });
+        const header = document.createElement('div');
+        Object.assign(header.style, {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '8px 12px',
+            borderBottom: `1px solid ${theme.tooltipBorder}`,
+            color: theme.tooltipText,
+            flexShrink: '0',
+        });
+        const title = document.createElement('span');
+        title.textContent = `${fileBasename(payload.file)}:${payload.line}:${payload.col}`;
+        const closeBtn = document.createElement('button');
+        closeBtn.type = 'button';
+        closeBtn.textContent = '×';
+        closeBtn.setAttribute('aria-label', 'Close source panel');
+        Object.assign(closeBtn.style, {
+            background: 'transparent',
+            border: 'none',
+            color: theme.badgeText,
+            fontSize: '20px',
+            lineHeight: '1',
+            cursor: 'pointer',
+            padding: '0 4px',
+        });
+        closeBtn.addEventListener('click', removePanel);
+        header.appendChild(title);
+        header.appendChild(closeBtn);
+        const body = document.createElement('div');
+        Object.assign(body.style, {
+            flex: '1',
+            overflow: 'auto',
+            margin: '0',
+        });
+        const pre = document.createElement('pre');
+        Object.assign(pre.style, {
+            margin: '0',
+            padding: '8px 0',
+            color: theme.tooltipText,
+        });
+        const highlightedLineId = 'source-locator-panel-highlight';
+        lines.forEach((lineText, index) => {
+            const lineEl = document.createElement('div');
+            const lineNum = index + 1;
+            const isTarget = lineNum === lineNumber;
+            Object.assign(lineEl.style, {
+                display: 'flex',
+                padding: '0 12px',
+                background: isTarget ? theme.highlightBackground : 'transparent',
+                borderLeft: isTarget ? `3px solid ${theme.highlightBorder}` : '3px solid transparent',
+            });
+            if (isTarget)
+                lineEl.id = highlightedLineId;
+            const num = document.createElement('span');
+            num.textContent = String(lineNum).padStart(4, ' ');
+            Object.assign(num.style, {
+                flexShrink: '0',
+                width: '48px',
+                color: theme.badgeText,
+                opacity: '0.7',
+                userSelect: 'none',
+            });
+            const code = document.createElement('span');
+            code.innerHTML = escapeHtml(lineText) || ' ';
+            lineEl.appendChild(num);
+            lineEl.appendChild(code);
+            pre.appendChild(lineEl);
+        });
+        body.appendChild(pre);
+        panel.appendChild(header);
+        panel.appendChild(body);
+        root.appendChild(panel);
+        requestAnimationFrame(() => {
+            root.getElementById(highlightedLineId)?.scrollIntoView({ block: 'center' });
+        });
+    };
+    return { showSourcePanel, removePanel };
+}

package/dist/client/tooltip-text.d.ts

@@ -0,0 +1,2 @@
+import type { ClickTarget } from '../shared/index.js';
+export declare function buildTooltipText(tsxSource: string | undefined, cssSource: string | undefined, clickTarget: ClickTarget): string;

package/dist/client/tooltip-text.js

@@ -0,0 +1,28 @@
+import { parseSourceLocation } from '../shared/index.js';
+const DEFAULT_LINE = '1';
+const CLICK_PROMPT_ORDER = {
+    tsx: ['TSX', 'CSS'],
+    css: ['CSS', 'TSX'],
+};
+function formatSourceLabel(source, prefix) {
+    const { file, line } = parseSourceLocation(source);
+    const name = file.split('/').pop() ?? file;
+    const label = line !== DEFAULT_LINE ? `${name}:${line}` : name;
+    if (prefix)
+        return `${prefix}: ${label}`;
+    return label;
+}
+export function buildTooltipText(tsxSource, cssSource, clickTarget) {
+    const lines = [];
+    if (tsxSource)
+        lines.push(formatSourceLabel(tsxSource, 'TSX'));
+    if (cssSource)
+        lines.push(formatSourceLabel(cssSource, 'CSS'));
+    if (!cssSource) {
+        lines.push('Click → open TSX');
+        return lines.join('\n');
+    }
+    const [first, second] = CLICK_PROMPT_ORDER[clickTarget];
+    lines.push(`Click → open ${first}`, `Click again → open ${second}`);
+    return lines.join('\n');
+}

package/dist/shared/index.d.ts

@@ -1,6 +1,6 @@
 export type { LocatorTheme, LocatorThemeInput, LocatorThemeOverride, LocatorThemePreset, } from './theme.js';
 export { resolveTheme } from './theme.js';
-export type LocatorIde = 'cursor' | 'vscode' | 'webstorm';
+export type LocatorIde = 'auto' | 'cursor' | 'vscode' | 'webstorm';
 export type SourceLocation = {
     file: string;
     line: string;
@@ -9,10 +9,10 @@ export type SourceLocation = {
 export type ClickTarget = 'tsx' | 'css';
 export declare const SOURCE_ATTR = "data-source";
 export declare const OPEN_ENDPOINT = "/__open-in-editor";
-export declare const STORAGE_KEY = "locator-ide";
 export declare const DEFAULT_IDE: LocatorIde;
 export declare const IDE_ORDER: LocatorIde[];
 export declare function isLocatorIde(value: string): value is LocatorIde;
+export declare function resolveIde(value: string, allowed: LocatorIde[]): LocatorIde;
 export declare function nextIde(current: LocatorIde, order?: LocatorIde[]): LocatorIde;
 export declare function parseSourceLocation(raw: string): SourceLocation;
 export declare function formatSourceLocation(loc: SourceLocation): string;

package/dist/shared/index.js

@@ -1,12 +1,19 @@
 export { resolveTheme } from './theme.js';
 export const SOURCE_ATTR = 'data-source';
 export const OPEN_ENDPOINT = '/__open-in-editor';
-export const STORAGE_KEY = 'locator-ide';
-export const DEFAULT_IDE = 'cursor';
-export const IDE_ORDER = ['cursor', 'vscode', 'webstorm'];
+export const DEFAULT_IDE = 'auto';
+export const IDE_ORDER = ['auto', 'cursor', 'vscode', 'webstorm'];
 export function isLocatorIde(value) {
     return IDE_ORDER.includes(value);
 }
+export function resolveIde(value, allowed) {
+    const fallback = allowed[0] ?? DEFAULT_IDE;
+    if (!isLocatorIde(value))
+        return fallback;
+    if (!allowed.includes(value))
+        return fallback;
+    return value;
+}
 export function nextIde(current, order = IDE_ORDER) {
     const index = order.indexOf(current);
     const nextIndex = (index + 1) % order.length;
@@ -14,16 +21,21 @@ export function nextIde(current, order = IDE_ORDER) {
 }
 export function parseSourceLocation(raw) {
     const parts = raw.split(':');
-    const col = parts.pop();
-    const line = parts.pop();
-    const file = parts.join(':');
-    return { file, line, col };
+    if (parts.length < 3)
+        return { file: raw, line: '1', col: '1' };
+    const col = parts.pop() ?? '1';
+    const line = parts.pop() ?? '1';
+    return { file: parts.join(':'), line, col };
 }
 export function formatSourceLocation(loc) {
     return `${loc.file}:${loc.line}:${loc.col}`;
 }
+const CLICK_TARGET_TRANSITION = {
+    tsx: 'css',
+    css: 'tsx',
+};
 export function nextClickTarget(current, hasCss) {
     if (!hasCss)
         return 'tsx';
-    return current === 'tsx' ? 'css' : 'tsx';
+    return CLICK_TARGET_TRANSITION[current];
 }

package/dist/shared/theme.js

@@ -4,10 +4,14 @@ const PRESET_COLORS = {
     dark: { background: '#000000', text: '#ffffff', accent: '#a3a3a3' },
     blue: { background: '#1e3a8a', text: '#eff6ff', accent: '#60a5fa' },
 };
+const HEX_COLOR_LENGTH = 7;
+const RGB_CHANNEL_MAX = 255;
+const HIGHLIGHT_ALPHA = 0.12;
+const SHADOW_ALPHA = 0.8;
 function withAlpha(hex, alpha) {
-    if (!hex.startsWith('#') || hex.length !== 7)
+    if (!hex.startsWith('#') || hex.length !== HEX_COLOR_LENGTH)
         return hex;
-    const channel = Math.round(alpha * 255)
+    const channel = Math.round(alpha * RGB_CHANNEL_MAX)
         .toString(16)
         .padStart(2, '0');
     return `${hex}${channel}`;
@@ -24,19 +28,15 @@ function buildTheme(colors) {
         tooltipText: text,
         tooltipBorder: accent,
         highlightBorder: accent,
-        highlightBackground: withAlpha(accent, 0.12),
-        highlightShadow: withAlpha(background, 0.8),
+        highlightBackground: withAlpha(accent, HIGHLIGHT_ALPHA),
+        highlightShadow: withAlpha(background, SHADOW_ALPHA),
     };
 }
-function isThemePreset(value) {
-    return typeof value === 'string';
-}
 export function resolveTheme(input) {
+    const base = PRESET_COLORS.default;
     if (!input)
-        return buildTheme(PRESET_COLORS.default);
-    if (isThemePreset(input)) {
-        const preset = PRESET_COLORS[input] ?? PRESET_COLORS.default;
-        return buildTheme(preset);
-    }
-    return buildTheme({ ...PRESET_COLORS.default, ...input });
+        return buildTheme(base);
+    if (typeof input === 'string')
+        return buildTheme(PRESET_COLORS[input] ?? base);
+    return buildTheme({ ...base, ...input });
 }

package/dist/vite/babel-plugin.d.ts

@@ -3,16 +3,17 @@ import * as t from '@babel/types';
 type BabelOptions = {
     attribute: string;
 };
+type BabelState = {
+    file: {
+        opts: {
+            filename?: string;
+        };
+    };
+};
 export declare function babelPluginAddSourceAttr(_: unknown, opts: BabelOptions): {
     name: string;
     visitor: {
-        JSXOpeningElement(path: NodePath<t.JSXOpeningElement>, state: {
-            file: {
-                opts: {
-                    filename?: string;
-                };
-            };
-        }): void;
+        JSXOpeningElement(path: NodePath<t.JSXOpeningElement>, state: BabelState): void;
     };
 };
 export {};

package/dist/vite/babel-plugin.js

@@ -1,4 +1,5 @@
 import * as t from '@babel/types';
+const COLUMN_OFFSET = 1;
 function hasSourceAttr(attributes, attribute) {
     return attributes.some((attr) => t.isJSXAttribute(attr) && attr.name.name === attribute);
 }
@@ -17,7 +18,8 @@ export function babelPluginAddSourceAttr(_, opts) {
                     return;
                 if (hasSourceAttr(path.node.attributes, attribute))
                     return;
-                const value = `${filename}:${loc.start.line}:${loc.start.column + 1}`;
+                // Babel columns are 0-indexed; editors expect 1-indexed columns.
+                const value = `${filename}:${loc.start.line}:${loc.start.column + COLUMN_OFFSET}`;
                 path.node.attributes.push(createSourceAttr(attribute, value));
             },
         },

package/dist/vite/editors.d.ts

@@ -1,2 +1,2 @@
-import type { SourceLocation } from '../shared/index.js';
-export declare function openInEditor(loc: SourceLocation, ideParam: string): void;
+import type { LocatorIde, SourceLocation } from '../shared/index.js';
+export declare function openInEditor(loc: SourceLocation, ideParam: string, allowed: LocatorIde[]): void;

package/dist/vite/editors.js

@@ -1,64 +1,11 @@
-import { execFileSync } from 'node:child_process';
-import { existsSync } from 'node:fs';
-import { DEFAULT_IDE, isLocatorIde } from '../shared/index.js';
-function createVscodeForkEditor(id, cliCandidates) {
-    return {
-        id,
-        cliCandidates,
-        openWithCli(cli, loc) {
-            execFileSync(cli, ['-r', '-g', `${loc.file}:${loc.line}:${loc.col}`], { stdio: 'ignore' });
-        },
-        openWithUrl(loc) {
-            execFileSync('open', [`${id}://file/${loc.file}:${loc.line}:${loc.col}`], { stdio: 'ignore' });
-        },
-    };
-}
-const EDITORS = [
-    createVscodeForkEditor('cursor', [
-        '/Applications/Cursor.app/Contents/Resources/app/bin/cursor',
-        'cursor',
-    ]),
-    createVscodeForkEditor('vscode', [
-        '/Applications/Visual Studio Code.app/Contents/Resources/app/bin/code',
-        'code',
-    ]),
-    {
-        id: 'webstorm',
-        cliCandidates: ['/Applications/WebStorm.app/Contents/MacOS/webstorm', 'webstorm'],
-        openWithCli(cli, loc) {
-            execFileSync(cli, ['--line', loc.line, loc.file], { stdio: 'ignore' });
-        },
-        openWithUrl(loc) {
-            const uri = `webstorm://open?file=${encodeURIComponent(loc.file)}&line=${loc.line}`;
-            execFileSync('open', [uri], { stdio: 'ignore' });
-        },
-    },
-];
-function canRun(command) {
-    try {
-        execFileSync('which', [command], { stdio: 'ignore' });
-        return true;
-    }
-    catch {
-        return false;
-    }
-}
-function resolveCli(candidates) {
-    const appPath = candidates.find((path) => path.includes('/') && existsSync(path));
-    if (appPath)
-        return appPath;
-    return candidates.filter((path) => !path.includes('/')).find((path) => canRun(path)) ?? null;
-}
-function findEditor(ide) {
-    return EDITORS.find((entry) => entry.id === ide) ?? EDITORS[0];
-}
-export function openInEditor(loc, ideParam) {
-    const ide = isLocatorIde(ideParam) ? ideParam : DEFAULT_IDE;
-    const editor = findEditor(ide);
-    const cli = resolveCli(editor.cliCandidates);
-    if (cli) {
-        editor.openWithCli(cli, loc);
+import launch from 'launch-editor';
+import { resolveIde } from '../shared/index.js';
+export function openInEditor(loc, ideParam, allowed) {
+    const ide = resolveIde(ideParam, allowed);
+    const spec = `${loc.file}:${loc.line}:${loc.col}`;
+    if (ide === 'auto') {
+        launch(spec);
         return;
     }
-    editor.openWithUrl(loc);
+    launch(spec, ide);
 }

package/dist/vite/index.js

@@ -1,7 +1,7 @@
 import { existsSync } from 'node:fs';
 import { isAbsolute, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { DEFAULT_IDE, IDE_ORDER, OPEN_ENDPOINT, SOURCE_ATTR } from '../shared/index.js';
+import { IDE_ORDER, OPEN_ENDPOINT, SOURCE_ATTR } from '../shared/index.js';
 import { babelPluginAddSourceAttr } from './babel-plugin.js';
 import { openInEditor } from './editors.js';
 const VIRTUAL_CLIENT_ID = 'virtual:source-locator-client';
@@ -16,18 +16,19 @@ function resolveOptions(options = {}) {
         theme: options.theme,
     };
 }
-function readQuery(url) {
+function readQuery(url, defaultIde) {
     const parsed = new URL(url, 'http://localhost');
     return {
         file: parsed.searchParams.get('file'),
         line: parsed.searchParams.get('line') ?? '1',
         col: parsed.searchParams.get('col') ?? '1',
-        ide: parsed.searchParams.get('ide') ?? DEFAULT_IDE,
+        ide: parsed.searchParams.get('ide') ?? defaultIde,
     };
 }
 function resolveFilePath(file, root) {
-    if (file.startsWith('/src/'))
-        return resolve(root, file.slice(1));
+    const viteDevMatch = file.match(/^\/src\/(.+)$/);
+    if (viteDevMatch)
+        return resolve(root, 'src', viteDevMatch[1]);
     if (isAbsolute(file))
         return file;
     return resolve(root, file);
@@ -55,7 +56,7 @@ function sourceLocator(options = {}) {
         },
         configureServer(server) {
             server.middlewares.use(config.endpoint, (req, res) => {
-                const { file, line, col, ide } = readQuery(req.url ?? '');
+                const { file, line, col, ide } = readQuery(req.url ?? '', config.ides[0] ?? 'auto');
                 if (!file) {
                     res.writeHead(400);
                     res.end('missing file');
@@ -68,7 +69,7 @@ function sourceLocator(options = {}) {
                         res.end('file not found');
                         return;
                     }
-                    openInEditor({ file: resolvedFile, line, col }, ide);
+                    openInEditor({ file: resolvedFile, line, col }, ide, config.ides);
                     res.writeHead(200, { 'Content-Type': 'text/plain' });
                     res.end('ok');
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-source-locator",
-  "version": "1.0.0",
+  "version": "1.1.2",
   "description": "Dev-only Vite plugin: click UI elements to jump to source in your IDE",
   "license": "MIT",
   "type": "module",
@@ -25,10 +25,11 @@
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json",
-    "clean": "rm -rf dist",
+    "clean": "node -e \"require('fs').rmSync('dist', { recursive: true, force: true })\"",
+    "lint": "eslint .",
     "test": "vitest run",
     "test:watch": "vitest",
-    "prepublishOnly": "npm run build && npm run test"
+    "prepublishOnly": "npm run lint && npm run build && npm run test"
   },
   "peerDependencies": {
     "vite": "^5.0.0"
@@ -36,14 +37,19 @@
   "dependencies": {
     "@babel/core": "^7.29.7",
     "@babel/traverse": "^7.29.7",
-    "@babel/types": "^7.29.7"
+    "@babel/types": "^7.29.7",
+    "launch-editor": "^2.14.1"
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.4",
     "@types/babel__core": "^7.20.5",
     "@types/babel__traverse": "^7.20.7",
     "@types/node": "^20.12.12",
+    "eslint": "^9.39.4",
+    "globals": "^15.15.0",
     "happy-dom": "^15.11.7",
     "typescript": "^5.4.5",
+    "typescript-eslint": "^8.62.0",
     "vite": "^5.2.11",
     "vitest": "^2.1.8"
   },