vite-plugin-source-locator 1.1.3 → 1.1.4

package/README.md

@@ -42,11 +42,16 @@ No `main.tsx` wiring required. The plugin auto-injects the client overlay in dev
 
 ## Pick Mode
 
-1. Click the badge (bottom-right): **Source Locator (auto) — click to pick**
+1. Click the badge (bottom-right): **Locator**
 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 (session only, resets on refresh)
+
+| Shortcut | Action |
+|----------|--------|
+| Click | Open TSX (or cycle TSX/CSS) |
+| **Shift+C** | Open CSS/style directly |
+| Esc | Cancel pick |
 
 ## Exports
 
@@ -89,7 +94,6 @@ import { initSourceLocator } from 'vite-plugin-source-locator/client'
 initSourceLocator({
   endpoint: '/__open-in-editor',
   attribute: 'data-source',
-  ides: ['auto', 'cursor', 'vscode', 'webstorm'],
   theme: {
     background: '#ffffff',
     text: '#000000',
@@ -132,7 +136,6 @@ import { initSourceLocator } from 'vite-plugin-source-locator/client'
 initSourceLocator({
   endpoint: '/__open-in-editor',
   attribute: 'data-source',
-  ides: ['auto', 'cursor', 'vscode', 'webstorm'],
   theme: 'blue',
 })
 ```
@@ -157,12 +160,9 @@ 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).
+The `ides` option controls which editors the server may open. The client always uses auto-detection.
 
 ### Explicit editor
 

package/dist/client/controller.d.ts

@@ -1,8 +1,7 @@
-import type { LocatorIde, LocatorThemeInput } from '../shared/index.js';
+import type { LocatorThemeInput } from '../shared/index.js';
 export type ClientConfig = {
     endpoint: string;
     attribute: string;
-    ides: LocatorIde[];
     theme?: LocatorThemeInput;
 };
 export declare function startPickController(root: ShadowRoot, host: Element, config: ClientConfig): () => void;

package/dist/client/controller.js

@@ -1,4 +1,4 @@
-import { nextClickTarget, nextIde, parseSourceLocation, resolveTheme } from '../shared/index.js';
+import { DEFAULT_IDE, nextClickTarget, parseSourceLocation, resolveTheme } from '../shared/index.js';
 import { findCssSource } from './css-source.js';
 import { createLocatorOverlayUi } from './overlay.js';
 const EMPTY_SOURCES = Object.freeze({
@@ -12,13 +12,13 @@ function getSourceEl(target, attribute, host) {
     const el = target.closest(`[${attribute}]`);
     return el instanceof HTMLElement ? el : null;
 }
-async function openSourceInEditor(source, config, activeIde) {
+async function openSourceInEditor(source, config) {
     const loc = parseSourceLocation(source);
     const params = new URLSearchParams({
         file: loc.file,
         line: loc.line,
         col: loc.col,
-        ide: activeIde,
+        ide: DEFAULT_IDE,
     });
     await fetch(`${config.endpoint}?${params.toString()}`);
 }
@@ -33,8 +33,7 @@ function resolveOpenSource(sources) {
 export function startPickController(root, host, config) {
     let pickMode = false;
     let sources = EMPTY_SOURCES;
-    let activeIde = config.ides[0] ?? 'auto';
-    const ui = createLocatorOverlayUi(root, () => setPickMode(!pickMode), resolveTheme(config.theme), () => activeIde);
+    const ui = createLocatorOverlayUi(root, () => setPickMode(!pickMode), resolveTheme(config.theme));
     function setPickMode(active) {
         pickMode = active;
         ui.setPickActive(active);
@@ -52,7 +51,7 @@ export function startPickController(root, host, config) {
             return;
         }
         syncSources(el);
-        ui.showSourceTooltip(el, sources.tsx, sources.css, sources.clickTarget, x, y);
+        ui.showSourceTooltip(el, sources.tsx, sources.css, x, y);
     };
     const onMouseMove = (e) => {
         if (!pickMode) {
@@ -61,17 +60,23 @@ export function startPickController(root, host, config) {
         }
         updateHover(e.target, e.clientX, e.clientY);
     };
-    const onKeyDown = (e) => {
+    const onKeyDown = async (e) => {
         if (e.key === 'Escape' && pickMode) {
             setPickMode(false);
             return;
         }
-        if (!e.shiftKey || e.key !== 'L')
+        if (e.shiftKey && e.key === 'C' && pickMode) {
+            const el = ui.getActiveEl();
+            if (!(el instanceof HTMLElement))
+                return;
+            syncSources(el);
+            if (!sources.css) {
+                ui.flashMessage('No CSS for this element');
+                return;
+            }
+            await openSourceInEditor(sources.css, config);
             return;
-        activeIde = nextIde(activeIde, config.ides);
-        if (!pickMode)
-            ui.refreshBadgeLabel();
-        ui.flashMessage(`IDE: ${activeIde}`);
+        }
     };
     const onClick = async (e) => {
         if (!pickMode || host.contains(e.target))
@@ -86,9 +91,9 @@ export function startPickController(root, host, config) {
             ui.flashMessage('No source for this element');
             return;
         }
-        await openSourceInEditor(openSource, config, activeIde);
+        await openSourceInEditor(openSource, config);
         sources = { ...sources, clickTarget: nextClickTarget(sources.clickTarget, !!sources.css) };
-        ui.showSourceTooltip(el, sources.tsx, sources.css, sources.clickTarget, e.clientX, e.clientY);
+        ui.showSourceTooltip(el, sources.tsx, sources.css, e.clientX, e.clientY);
     };
     document.addEventListener('keydown', onKeyDown);
     document.addEventListener('mousemove', onMouseMove);

package/dist/client/index.js

@@ -1,10 +1,12 @@
 import { startPickController } from './controller.js';
+import { HOST_LAYOUT } from './overlay-styles.js';
 const HOST_ID = 'source-locator-host';
 export function initSourceLocator(config) {
     if (window.__sourceLocator || document.getElementById(HOST_ID))
         return;
     const host = document.createElement('div');
     host.id = HOST_ID;
+    Object.assign(host.style, HOST_LAYOUT);
     const root = host.attachShadow({ mode: 'open' });
     document.body.appendChild(host);
     const disposeController = startPickController(root, host, config);

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

@@ -3,18 +3,25 @@ export declare const UI_IDS: {
     readonly tooltip: "source-locator-tooltip";
     readonly highlight: "source-locator-highlight";
 };
+export declare const HOST_LAYOUT: {
+    readonly position: "fixed";
+    readonly inset: "0";
+    readonly zIndex: "99999";
+    readonly pointerEvents: "none";
+};
 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 padding: "10px 14px";
+        readonly borderRadius: "8px";
+        readonly fontSize: "12px";
         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 pointerEvents: "auto";
+        readonly boxShadow: "0 2px 12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08)";
     };
     readonly tooltip: {
         readonly position: "fixed";

package/dist/client/overlay-styles.js

@@ -3,18 +3,25 @@ export const UI_IDS = {
     tooltip: 'source-locator-tooltip',
     highlight: 'source-locator-highlight',
 };
+export const HOST_LAYOUT = {
+    position: 'fixed',
+    inset: '0',
+    zIndex: '99999',
+    pointerEvents: 'none',
+};
 export const LAYOUT = {
     badge: {
         position: 'fixed',
         bottom: '12px',
         right: '12px',
-        padding: '8px 12px',
-        borderRadius: '999px',
-        fontSize: '11px',
+        padding: '10px 14px',
+        borderRadius: '8px',
+        fontSize: '12px',
         fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
         zIndex: '99999',
         cursor: 'pointer',
-        boxShadow: '0 4px 16px rgba(0, 0, 0, 0.35)',
+        pointerEvents: 'auto',
+        boxShadow: '0 2px 12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08)',
     },
     tooltip: {
         position: 'fixed',

package/dist/client/overlay.d.ts

@@ -1,9 +1,8 @@
-import type { ClickTarget, LocatorIde, LocatorTheme } from '../shared/index.js';
-export declare function createLocatorOverlayUi(root: ShadowRoot, onTogglePick: () => void, theme: LocatorTheme, getActiveIde: () => LocatorIde): {
+import type { LocatorTheme } from '../shared/index.js';
+export declare function createLocatorOverlayUi(root: ShadowRoot, onTogglePick: () => void, theme: LocatorTheme): {
     mountBadge: () => void;
     setPickActive: (active: boolean) => void;
-    refreshBadgeLabel: () => void;
-    showSourceTooltip: (el: Element, tsxSource: string | undefined, cssSource: string | undefined, clickTarget: ClickTarget, x: number, y: number) => void;
+    showSourceTooltip: (el: Element, tsxSource: string | undefined, cssSource: string | undefined, x: number, y: number) => void;
     flashMessage: (text: string) => void;
     removeTooltip: () => void;
     getActiveEl: () => Element | null;

package/dist/client/overlay.js

@@ -6,7 +6,7 @@ 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) {
+export function createLocatorOverlayUi(root, onTogglePick, theme) {
     let activeEl = null;
     let flashTimeout = null;
     let badgeEl = null;
@@ -49,8 +49,8 @@ export function createLocatorOverlayUi(root, onTogglePick, theme, getActiveIde)
         if (el)
             showHighlight(el);
     };
-    const showSourceTooltip = (el, tsxSource, cssSource, clickTarget, x, y) => {
-        showTooltip(buildTooltipText(tsxSource, cssSource, clickTarget), el, x, y);
+    const showSourceTooltip = (el, tsxSource, cssSource, x, y) => {
+        showTooltip(buildTooltipText(tsxSource, cssSource), el, x, y);
     };
     const flashMessage = (text) => {
         if (flashTimeout)
@@ -65,25 +65,22 @@ export function createLocatorOverlayUi(root, onTogglePick, theme, getActiveIde)
             return;
         badgeEl.style.background = active ? theme.badgeActiveBackground : theme.badgeBackground;
         badgeEl.style.color = active ? theme.badgeActiveText : theme.badgeText;
+        badgeEl.style.border = `1px solid ${active ? theme.badgeActiveBorder : theme.badgeBorder}`;
     };
     const setPickActive = (active) => {
         document.body.style.cursor = active ? 'crosshair' : '';
         if (!badgeEl)
             return;
-        badgeEl.textContent = badgeLabel(active, getActiveIde());
+        badgeEl.textContent = badgeLabel(active);
         applyBadgeColors(active);
         if (!active)
             removeTooltip();
     };
-    const refreshBadgeLabel = () => {
-        if (badgeEl)
-            badgeEl.textContent = badgeLabel(false, getActiveIde());
-    };
     const mountBadge = () => {
         badgeEl = document.createElement('button');
         badgeEl.id = UI_IDS.badge;
         badgeEl.type = 'button';
-        badgeEl.textContent = badgeLabel(false, getActiveIde());
+        badgeEl.textContent = badgeLabel(false);
         Object.assign(badgeEl.style, LAYOUT.badge, {
             background: theme.badgeBackground,
             color: theme.badgeText,
@@ -98,7 +95,6 @@ export function createLocatorOverlayUi(root, onTogglePick, theme, getActiveIde)
     return {
         mountBadge,
         setPickActive,
-        refreshBadgeLabel,
         showSourceTooltip,
         flashMessage,
         removeTooltip,

package/dist/client/preference.d.ts

@@ -1,2 +1 @@
-import type { LocatorIde } from '../shared/index.js';
-export declare function badgeLabel(picking: boolean, activeIde: LocatorIde): string;
+export declare function badgeLabel(picking: boolean): string;

package/dist/client/preference.js

@@ -1,7 +1,5 @@
-const BADGE_PICKING_HINT = 'Esc to cancel';
-const BADGE_IDLE_HINT = 'click to pick';
-export function badgeLabel(picking, activeIde) {
+export function badgeLabel(picking) {
     if (picking)
-        return `Pick element (${activeIde}) — ${BADGE_PICKING_HINT}`;
-    return `Source Locator (${activeIde}) — ${BADGE_IDLE_HINT}`;
+        return 'Picking — Esc';
+    return 'Locator';
 }

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

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

package/dist/client/tooltip-text.js

@@ -1,9 +1,5 @@
 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;
@@ -12,7 +8,7 @@ function formatSourceLabel(source, prefix) {
         return `${prefix}: ${label}`;
     return label;
 }
-export function buildTooltipText(tsxSource, cssSource, clickTarget) {
+export function buildTooltipText(tsxSource, cssSource) {
     const lines = [];
     if (tsxSource)
         lines.push(formatSourceLabel(tsxSource, 'TSX'));
@@ -22,7 +18,6 @@ export function buildTooltipText(tsxSource, cssSource, clickTarget) {
         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}`);
+    lines.push('Click → open TSX', 'Shift+C → CSS');
     return lines.join('\n');
 }

package/dist/shared/index.d.ts

@@ -13,7 +13,6 @@ 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;
 export declare function nextClickTarget(current: ClickTarget, hasCss: boolean): ClickTarget;

package/dist/shared/index.js

@@ -14,11 +14,6 @@ export function resolveIde(value, allowed) {
         return fallback;
     return value;
 }
-export function nextIde(current, order = IDE_ORDER) {
-    const index = order.indexOf(current);
-    const nextIndex = (index + 1) % order.length;
-    return order[nextIndex] ?? DEFAULT_IDE;
-}
 export function parseSourceLocation(raw) {
     const parts = raw.split(':');
     if (parts.length < 3)

package/dist/shared/theme.d.ts

@@ -11,6 +11,7 @@ export type LocatorTheme = {
     badgeActiveBackground: string;
     badgeActiveText: string;
     badgeBorder: string;
+    badgeActiveBorder: string;
     tooltipBackground: string;
     tooltipText: string;
     tooltipBorder: string;

package/dist/shared/theme.js

@@ -1,9 +1,10 @@
 const PRESET_COLORS = {
     default: { background: '#0f172a', text: '#f8fafc', accent: '#38bdf8' },
-    light: { background: '#ffffff', text: '#0f172a', accent: '#2563eb' },
+    light: { background: '#ffffff', text: '#111827', accent: '#2563eb' },
     dark: { background: '#000000', text: '#ffffff', accent: '#a3a3a3' },
     blue: { background: '#1e3a8a', text: '#eff6ff', accent: '#60a5fa' },
 };
+const LIGHT_BADGE_BORDER = '#d1d5db';
 const HEX_COLOR_LENGTH = 7;
 const RGB_CHANNEL_MAX = 255;
 const HIGHLIGHT_ALPHA = 0.12;
@@ -16,14 +17,31 @@ function withAlpha(hex, alpha) {
         .padStart(2, '0');
     return `${hex}${channel}`;
 }
-function buildTheme(colors) {
+function buildTheme(colors, preset) {
     const { background, text, accent } = colors;
+    if (preset === 'light') {
+        return {
+            badgeBackground: background,
+            badgeText: text,
+            badgeActiveBackground: background,
+            badgeActiveText: accent,
+            badgeBorder: LIGHT_BADGE_BORDER,
+            badgeActiveBorder: accent,
+            tooltipBackground: background,
+            tooltipText: text,
+            tooltipBorder: LIGHT_BADGE_BORDER,
+            highlightBorder: accent,
+            highlightBackground: withAlpha(accent, HIGHLIGHT_ALPHA),
+            highlightShadow: withAlpha(background, SHADOW_ALPHA),
+        };
+    }
     return {
         badgeBackground: background,
         badgeText: accent,
         badgeActiveBackground: accent,
         badgeActiveText: background,
         badgeBorder: accent,
+        badgeActiveBorder: accent,
         tooltipBackground: background,
         tooltipText: text,
         tooltipBorder: accent,
@@ -33,10 +51,10 @@ function buildTheme(colors) {
     };
 }
 export function resolveTheme(input) {
-    const base = PRESET_COLORS.default;
+    const lightBase = PRESET_COLORS.light;
     if (!input)
-        return buildTheme(base);
+        return buildTheme(lightBase, 'light');
     if (typeof input === 'string')
-        return buildTheme(PRESET_COLORS[input] ?? base);
-    return buildTheme({ ...base, ...input });
+        return buildTheme(PRESET_COLORS[input] ?? lightBase, input);
+    return buildTheme({ ...lightBase, ...input }, 'light');
 }

package/dist/vite/editor-cli.d.ts

@@ -1,4 +1,5 @@
 import type { LocatorIde } from '../shared/index.js';
 export declare function toLaunchEditorName(ide: Exclude<LocatorIde, 'auto'>): string;
 export declare function resolveCliPath(command: string): string;
+export declare function formatLaunchEditorCommand(command: string): string;
 export declare function resolveAutoEditor(): string | null;

package/dist/vite/editor-cli.js

@@ -39,6 +39,12 @@ export function resolveCliPath(command) {
         return bundlePath;
     return command;
 }
+export function formatLaunchEditorCommand(command) {
+    if (command.includes(' ')) {
+        return `"${command}"`;
+    }
+    return command;
+}
 export function resolveAutoEditor() {
     const [editor] = guessEditor();
     if (!editor)

package/dist/vite/editors.js

@@ -1,18 +1,18 @@
 import launch from 'launch-editor';
 import { resolveIde } from '../shared/index.js';
-import { resolveAutoEditor, resolveCliPath, toLaunchEditorName } from './editor-cli.js';
+import { formatLaunchEditorCommand, resolveAutoEditor, resolveCliPath, toLaunchEditorName } from './editor-cli.js';
 export function openInEditor(loc, ideParam, allowed) {
     const ide = resolveIde(ideParam, allowed);
     const spec = `${loc.file}:${loc.line}:${loc.col}`;
     if (ide === 'auto') {
         const resolved = resolveAutoEditor();
         if (resolved) {
-            launch(spec, resolved);
+            launch(spec, formatLaunchEditorCommand(resolved));
             return;
         }
         launch(spec);
         return;
     }
     const command = resolveCliPath(toLaunchEditorName(ide));
-    launch(spec, command);
+    launch(spec, formatLaunchEditorCommand(command));
 }

package/dist/vite/index.js

@@ -38,7 +38,6 @@ function sourceLocator(options = {}) {
     const clientConfig = {
         endpoint: config.endpoint,
         attribute: config.attribute,
-        ides: config.ides,
         theme: config.theme,
     };
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-source-locator",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Dev-only Vite plugin: click UI elements to jump to source in your IDE",
   "license": "MIT",
   "type": "module",
@@ -32,7 +32,7 @@
     "prepublishOnly": "npm run lint && npm run build && npm run test"
   },
   "peerDependencies": {
-    "vite": "^5.0.0"
+    "vite": "^5.0.0 || ^6.0.0"
   },
   "dependencies": {
     "@babel/core": "^7.29.7",