vite-plugin-source-locator 1.1.3 → 1.2.0

package/README.md

@@ -42,11 +42,15 @@ 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
+3. Click to open the TSX source file in your IDE
 4. **Esc** — cancel pick mode
-5. **Shift+L** — cycle IDE (session only, resets on refresh)
+
+| Shortcut | Action |
+|----------|--------|
+| Click | Open TSX source |
+| Esc | Cancel pick |
 
 ## Exports
 
@@ -75,7 +79,7 @@ Control overlay colors (badge, tooltip, highlight). Presets or custom colors:
 | Preset | Look |
 |--------|------|
 | `'default'` | Dark slate + cyan accent |
-| `'light'` | White background + blue accent |
+| `'light'` | White background + blue accent (also used when `theme` is omitted) |
 | `'dark'` | Black background + white/gray text |
 | `'blue'` | Navy background + light blue accent |
 
@@ -89,7 +93,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',
@@ -104,20 +107,6 @@ initSourceLocator({
 | `text` | Tooltip text |
 | `accent` | Borders, highlight, badge label |
 
-## CSS Detection
-
-When an element has styles from a project `.css` file (e.g. `index.css` custom classes like `.glass`), the tooltip shows:
-
-```
-components/DashboardStats.tsx
-CSS: index.css
-Click → TSX | next: CSS
-```
-
-Click cycles between opening the TSX and CSS file.
-
-**Limitation:** Tailwind utility classes (`bg-slate-950`, etc.) are injected as inline `<style>` tags with no `.css` href — no CSS file is shown for those. CSS detection works for external `.css` stylesheets only. CSS opens at line 1 in v1.
-
 ## MFE Safety
 
 - **Idempotent** — `window.__sourceLocator` guard: multiple bundles loading the locator mount only one overlay
@@ -132,7 +121,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 +145,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 browser client always sends `ide=auto`; the server resolves that via `resolveIde` against your `ides` list.
 
 ### Explicit editor
 
@@ -190,7 +175,6 @@ REACT_EDITOR=/Applications/Visual Studio Code.app/Contents/Resources/app/bin/cod
 
 - Dev only — no production impact
 - JSX/TSX only for `data-source` injection
-- CSS line 1 only (no source-map line mapping yet)
 
 ## License
 

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,49 +1,42 @@
-import { nextClickTarget, nextIde, parseSourceLocation, resolveTheme } from '../shared/index.js';
-import { findCssSource } from './css-source.js';
+import { DEFAULT_IDE, parseSourceLocation, resolveTheme } from '../shared/index.js';
 import { createLocatorOverlayUi } from './overlay.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, activeIde) {
+async function openSourceInEditor(source, config) {
     const loc = parseSourceLocation(source);
+    // Client always sends ide=auto; server resolveIde + plugin ides config pick the editor.
     const params = new URLSearchParams({
         file: loc.file,
         line: loc.line,
         col: loc.col,
-        ide: activeIde,
+        ide: DEFAULT_IDE,
     });
     await fetch(`${config.endpoint}?${params.toString()}`);
 }
-function readElementSources(el, attribute) {
-    const tsx = el.getAttribute(attribute) ?? undefined;
-    const css = findCssSource(el);
-    return { tsx, css, clickTarget: 'tsx' };
-}
-function resolveOpenSource(sources) {
-    return sources[sources.clickTarget];
+function readComponentSource(el, attribute) {
+    return el.getAttribute(attribute) ?? undefined;
 }
 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);
+    let componentSource;
+    const ui = createLocatorOverlayUi(root, () => setPickMode(!pickMode), resolveTheme(config.theme));
     function setPickMode(active) {
+        if (active)
+            document.addEventListener('mousemove', onMouseMove);
+        else
+            document.removeEventListener('mousemove', onMouseMove);
         pickMode = active;
         ui.setPickActive(active);
         if (!active)
-            sources = EMPTY_SOURCES;
+            componentSource = undefined;
     }
-    const syncSources = (el) => {
+    const syncSource = (el) => {
         if (el !== ui.getActiveEl())
-            sources = readElementSources(el, config.attribute);
+            componentSource = readComponentSource(el, config.attribute);
     };
     const updateHover = (target, x, y) => {
         const el = getSourceEl(target, config.attribute, host);
@@ -51,27 +44,15 @@ export function startPickController(root, host, config) {
             ui.removeTooltip();
             return;
         }
-        syncSources(el);
-        ui.showSourceTooltip(el, sources.tsx, sources.css, sources.clickTarget, x, y);
+        syncSource(el);
+        ui.showSourceTooltip(el, componentSource, x, y);
     };
     const onMouseMove = (e) => {
-        if (!pickMode) {
-            ui.removeTooltip();
-            return;
-        }
         updateHover(e.target, e.clientX, e.clientY);
     };
     const onKeyDown = (e) => {
-        if (e.key === 'Escape' && pickMode) {
+        if (e.key === 'Escape' && pickMode)
             setPickMode(false);
-            return;
-        }
-        if (!e.shiftKey || e.key !== 'L')
-            return;
-        activeIde = nextIde(activeIde, config.ides);
-        if (!pickMode)
-            ui.refreshBadgeLabel();
-        ui.flashMessage(`IDE: ${activeIde}`);
     };
     const onClick = async (e) => {
         if (!pickMode || host.contains(e.target))
@@ -79,24 +60,23 @@ export function startPickController(root, host, config) {
         e.preventDefault();
         e.stopPropagation();
         const el = getSourceEl(e.target, config.attribute, host);
-        if (el)
-            syncSources(el);
-        const openSource = el && resolveOpenSource(sources);
-        if (!el || !openSource) {
+        if (!el)
+            return;
+        syncSource(el);
+        if (!componentSource) {
             ui.flashMessage('No source for this element');
             return;
         }
-        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);
+        await openSourceInEditor(componentSource, config);
+        ui.showSourceTooltip(el, componentSource, e.clientX, e.clientY);
     };
     document.addEventListener('keydown', onKeyDown);
-    document.addEventListener('mousemove', onMouseMove);
     document.addEventListener('click', onClick, true);
     ui.mountBadge();
     return () => {
+        setPickMode(false);
         document.removeEventListener('keydown', onKeyDown);
-        document.removeEventListener('mousemove', onMouseMove);
         document.removeEventListener('click', onClick, true);
+        ui.dispose();
     };
 }

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,11 +1,11 @@
-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, source: string | undefined, x: number, y: number) => void;
     flashMessage: (text: string) => void;
     removeTooltip: () => void;
+    dispose: () => void;
     getActiveEl: () => Element | null;
 };
 export type LocatorOverlayUi = ReturnType<typeof createLocatorOverlayUi>;

package/dist/client/overlay.js

@@ -1,12 +1,13 @@
 import { LAYOUT, UI_IDS } from './overlay-styles.js';
-import { badgeLabel } from './preference.js';
 import { buildTooltipText } from './tooltip-text.js';
+const BADGE_LABEL_IDLE = 'Locator';
+const BADGE_LABEL_PICKING = 'Picking — Esc';
 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) {
+export function createLocatorOverlayUi(root, onTogglePick, theme) {
     let activeEl = null;
     let flashTimeout = null;
     let badgeEl = null;
@@ -49,8 +50,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, source, x, y) => {
+        showTooltip(buildTooltipText(source), el, x, y);
     };
     const flashMessage = (text) => {
         if (flashTimeout)
@@ -65,43 +66,43 @@ 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 = active ? BADGE_LABEL_PICKING : BADGE_LABEL_IDLE;
         applyBadgeColors(active);
         if (!active)
             removeTooltip();
     };
-    const refreshBadgeLabel = () => {
-        if (badgeEl)
-            badgeEl.textContent = badgeLabel(false, getActiveIde());
+    const dispose = () => {
+        if (flashTimeout)
+            clearTimeout(flashTimeout);
+        flashTimeout = null;
+        removeTooltip();
     };
     const mountBadge = () => {
         badgeEl = document.createElement('button');
         badgeEl.id = UI_IDS.badge;
         badgeEl.type = 'button';
-        badgeEl.textContent = badgeLabel(false, getActiveIde());
-        Object.assign(badgeEl.style, LAYOUT.badge, {
-            background: theme.badgeBackground,
-            color: theme.badgeText,
-            border: `1px solid ${theme.badgeBorder}`,
-        });
+        badgeEl.textContent = BADGE_LABEL_IDLE;
+        Object.assign(badgeEl.style, LAYOUT.badge);
         badgeEl.addEventListener('click', (event) => {
             event.stopPropagation();
             onTogglePick();
         });
         root.appendChild(badgeEl);
+        applyBadgeColors(false);
     };
     return {
         mountBadge,
         setPickActive,
-        refreshBadgeLabel,
         showSourceTooltip,
         flashMessage,
         removeTooltip,
+        dispose,
         getActiveEl: () => activeEl,
     };
 }

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(source: string | undefined): string;

package/dist/client/tooltip-text.js

@@ -1,28 +1,14 @@
 import { parseSourceLocation } from '../shared/index.js';
 const DEFAULT_LINE = '1';
-const CLICK_PROMPT_ORDER = {
-    tsx: ['TSX', 'CSS'],
-    css: ['CSS', 'TSX'],
-};
-function formatSourceLabel(source, prefix) {
+function formatSourceLabel(source) {
     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;
+    if (line !== DEFAULT_LINE)
+        return `${name}:${line}`;
+    return name;
 }
-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');
+export function buildTooltipText(source) {
+    if (!source)
+        return 'No source for this element';
+    return `${formatSourceLabel(source)}\nClick → open`;
 }

package/dist/shared/index.d.ts

@@ -6,14 +6,11 @@ export type SourceLocation = {
     line: string;
     col: string;
 };
-export type ClickTarget = 'tsx' | 'css';
 export declare const SOURCE_ATTR = "data-source";
 export declare const OPEN_ENDPOINT = "/__open-in-editor";
 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)
@@ -30,12 +25,3 @@ export function parseSourceLocation(raw) {
 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 CLICK_TARGET_TRANSITION[current];
-}

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,15 @@ function withAlpha(hex, alpha) {
         .padStart(2, '0');
     return `${hex}${channel}`;
 }
-function buildTheme(colors) {
+function buildTheme(colors, preset) {
     const { background, text, accent } = colors;
-    return {
+    const base = {
         badgeBackground: background,
         badgeText: accent,
         badgeActiveBackground: accent,
         badgeActiveText: background,
         badgeBorder: accent,
+        badgeActiveBorder: accent,
         tooltipBackground: background,
         tooltipText: text,
         tooltipBorder: accent,
@@ -31,12 +33,22 @@ function buildTheme(colors) {
         highlightBackground: withAlpha(accent, HIGHLIGHT_ALPHA),
         highlightShadow: withAlpha(background, SHADOW_ALPHA),
     };
+    if (preset !== 'light')
+        return base;
+    return {
+        ...base,
+        badgeText: text,
+        badgeActiveBackground: background,
+        badgeActiveText: accent,
+        badgeBorder: LIGHT_BADGE_BORDER,
+        tooltipBorder: LIGHT_BADGE_BORDER,
+    };
 }
 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

@@ -26,19 +26,26 @@ function buildCliCandidates() {
     };
 }
 const CLI_CANDIDATES = buildCliCandidates();
+const isPathLike = (value) => value.includes('/') || value.includes('\\');
 export function toLaunchEditorName(ide) {
     return IDE_LAUNCH_NAMES[ide];
 }
 export function resolveCliPath(command) {
-    if ((command.includes('/') || command.includes('\\')) && existsSync(command)) {
+    if (isPathLike(command) && existsSync(command)) {
         return command;
     }
     const candidates = CLI_CANDIDATES[command] ?? [command];
-    const bundlePath = candidates.find((path) => (path.includes('/') || path.includes('\\')) && existsSync(path));
+    const bundlePath = candidates.find((path) => isPathLike(path) && existsSync(path));
     if (bundlePath)
         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 { formatSourceLocation, resolveIde } from '../shared/index.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}`;
+    const spec = formatSourceLocation(loc);
     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

@@ -1,5 +1,5 @@
 import { existsSync } from 'node:fs';
-import { isAbsolute, resolve } from 'node:path';
+import { isAbsolute, relative, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { IDE_ORDER, OPEN_ENDPOINT, SOURCE_ATTR } from '../shared/index.js';
 import { babelPluginAddSourceAttr } from './babel-plugin.js';
@@ -25,12 +25,25 @@ function readQuery(url, defaultIde) {
         ide: parsed.searchParams.get('ide') ?? defaultIde,
     };
 }
+function isInsideRoot(resolved, root) {
+    const rel = relative(root, resolved);
+    return rel !== '' && !rel.startsWith('..') && !isAbsolute(rel);
+}
+function isAllowedRequest(req) {
+    const origin = req.headers.origin;
+    const host = req.headers.host;
+    if (origin && host && new URL(origin).host !== host)
+        return false;
+    if (req.headers['sec-fetch-site'] === 'cross-site')
+        return false;
+    return true;
+}
 function resolveFilePath(file, root) {
     const viteDevMatch = file.match(/^\/src\/(.+)$/);
     if (viteDevMatch)
         return resolve(root, 'src', viteDevMatch[1]);
     if (isAbsolute(file))
-        return file;
+        return resolve(file);
     return resolve(root, file);
 }
 function sourceLocator(options = {}) {
@@ -38,7 +51,6 @@ function sourceLocator(options = {}) {
     const clientConfig = {
         endpoint: config.endpoint,
         attribute: config.attribute,
-        ides: config.ides,
         theme: config.theme,
     };
     return {
@@ -56,6 +68,11 @@ function sourceLocator(options = {}) {
         },
         configureServer(server) {
             server.middlewares.use(config.endpoint, (req, res) => {
+                if (!isAllowedRequest(req)) {
+                    res.writeHead(403);
+                    res.end('forbidden');
+                    return;
+                }
                 const { file, line, col, ide } = readQuery(req.url ?? '', config.ides[0] ?? 'auto');
                 if (!file) {
                     res.writeHead(400);
@@ -64,6 +81,11 @@ function sourceLocator(options = {}) {
                 }
                 try {
                     const resolvedFile = resolveFilePath(file, server.config.root);
+                    if (!isInsideRoot(resolvedFile, server.config.root)) {
+                        res.writeHead(403);
+                        res.end('outside project');
+                        return;
+                    }
                     if (!existsSync(resolvedFile)) {
                         res.writeHead(404);
                         res.end('file not found');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-source-locator",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "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",

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

@@ -1 +0,0 @@
-export declare function findCssSource(element: Element): string | undefined;

package/dist/client/css-source.js

@@ -1,60 +0,0 @@
-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 += SELECTOR_ID_BONUS;
-    if (selector.includes('.'))
-        score += SELECTOR_CLASS_BONUS;
-    if (element instanceof HTMLElement) {
-        element.classList.forEach((cls) => {
-            if (selector.includes(`.${cls}`))
-                score += SELECTOR_CLASS_MATCH_BONUS;
-        });
-    }
-    return score;
-}
-function isProjectStylesheet(href) {
-    return href.includes('.css') && (href.includes('localhost') || href.includes('/src/'));
-}
-function hrefToFile(href) {
-    const url = new URL(href, window.location.origin);
-    return decodeURIComponent(url.pathname);
-}
-export function findCssSource(element) {
-    let bestScore = -1;
-    let bestFile;
-    Array.from(document.styleSheets).forEach((sheet) => {
-        const href = sheet.href ?? '';
-        if (!href || !isProjectStylesheet(href))
-            return;
-        let rules;
-        try {
-            rules = sheet.cssRules;
-        }
-        catch {
-            return;
-        }
-        Array.from(rules).forEach((rule) => {
-            if (!(rule instanceof CSSStyleRule))
-                return;
-            try {
-                if (!element.matches(rule.selectorText))
-                    return;
-            }
-            catch {
-                return;
-            }
-            const score = scoreSelector(rule.selectorText, element);
-            if (score <= bestScore)
-                return;
-            bestScore = score;
-            bestFile = hrefToFile(href);
-        });
-    });
-    if (!bestFile)
-        return undefined;
-    return formatSourceLocation({ file: bestFile, line: '1', col: '1' });
-}

package/dist/client/preference.d.ts

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

package/dist/client/preference.js

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

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

@@ -1,11 +0,0 @@
-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

@@ -1,113 +0,0 @@
-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 };
-}