vite-plugin-source-locator 1.1.4 → 1.2.0

package/README.md

@@ -44,13 +44,12 @@ No `main.tsx` wiring required. The plugin auto-injects the client overlay in dev
 
 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
 
 | Shortcut | Action |
 |----------|--------|
-| Click | Open TSX (or cycle TSX/CSS) |
-| **Shift+C** | Open CSS/style directly |
+| Click | Open TSX source |
 | Esc | Cancel pick |
 
 ## Exports
@@ -80,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 |
 
@@ -108,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
@@ -162,7 +147,7 @@ sourceLocator()
 sourceLocator({ ides: ['vscode'] })
 ```
 
-The `ides` option controls which editors the server may open. The client always uses auto-detection.
+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.js

@@ -1,11 +1,5 @@
-import { DEFAULT_IDE, nextClickTarget, 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;
@@ -14,6 +8,7 @@ function getSourceEl(target, attribute, host) {
 }
 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,
@@ -22,27 +17,26 @@ async function openSourceInEditor(source, config) {
     });
     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 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);
@@ -50,33 +44,15 @@ export function startPickController(root, host, config) {
             ui.removeTooltip();
             return;
         }
-        syncSources(el);
-        ui.showSourceTooltip(el, sources.tsx, sources.css, 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 = async (e) => {
-        if (e.key === 'Escape' && pickMode) {
+    const onKeyDown = (e) => {
+        if (e.key === 'Escape' && pickMode)
             setPickMode(false);
-            return;
-        }
-        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;
-        }
     };
     const onClick = async (e) => {
         if (!pickMode || host.contains(e.target))
@@ -84,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);
-        sources = { ...sources, clickTarget: nextClickTarget(sources.clickTarget, !!sources.css) };
-        ui.showSourceTooltip(el, sources.tsx, sources.css, 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/overlay.d.ts

@@ -2,9 +2,10 @@ import type { LocatorTheme } from '../shared/index.js';
 export declare function createLocatorOverlayUi(root: ShadowRoot, onTogglePick: () => void, theme: LocatorTheme): {
     mountBadge: () => void;
     setPickActive: (active: boolean) => void;
-    showSourceTooltip: (el: Element, tsxSource: string | undefined, cssSource: string | undefined, 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,6 +1,7 @@
 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;
@@ -49,8 +50,8 @@ export function createLocatorOverlayUi(root, onTogglePick, theme) {
         if (el)
             showHighlight(el);
     };
-    const showSourceTooltip = (el, tsxSource, cssSource, x, y) => {
-        showTooltip(buildTooltipText(tsxSource, cssSource), el, x, y);
+    const showSourceTooltip = (el, source, x, y) => {
+        showTooltip(buildTooltipText(source), el, x, y);
     };
     const flashMessage = (text) => {
         if (flashTimeout)
@@ -71,26 +72,29 @@ export function createLocatorOverlayUi(root, onTogglePick, theme) {
         document.body.style.cursor = active ? 'crosshair' : '';
         if (!badgeEl)
             return;
-        badgeEl.textContent = badgeLabel(active);
+        badgeEl.textContent = active ? BADGE_LABEL_PICKING : BADGE_LABEL_IDLE;
         applyBadgeColors(active);
         if (!active)
             removeTooltip();
     };
+    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);
-        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,
@@ -98,6 +102,7 @@ export function createLocatorOverlayUi(root, onTogglePick, theme) {
         showSourceTooltip,
         flashMessage,
         removeTooltip,
+        dispose,
         getActiveEl: () => activeEl,
     };
 }

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

@@ -1 +1 @@
-export declare function buildTooltipText(tsxSource: string | undefined, cssSource: string | undefined): string;
+export declare function buildTooltipText(source: string | undefined): string;

package/dist/client/tooltip-text.js

@@ -1,23 +1,14 @@
 import { parseSourceLocation } from '../shared/index.js';
 const DEFAULT_LINE = '1';
-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) {
-    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');
-    }
-    lines.push('Click → open TSX', 'Shift+C → CSS');
-    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,7 +6,6 @@ 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;
@@ -15,4 +14,3 @@ export declare function isLocatorIde(value: string): value is LocatorIde;
 export declare function resolveIde(value: string, allowed: 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

@@ -25,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.js

@@ -19,23 +19,7 @@ function withAlpha(hex, alpha) {
 }
 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 {
+    const base = {
         badgeBackground: background,
         badgeText: accent,
         badgeActiveBackground: accent,
@@ -49,6 +33,16 @@ function buildTheme(colors, preset) {
         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 lightBase = PRESET_COLORS.light;

package/dist/vite/editor-cli.js

@@ -26,15 +26,16 @@ 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;

package/dist/vite/editors.js

@@ -1,9 +1,9 @@
 import launch from 'launch-editor';
-import { resolveIde } from '../shared/index.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) {

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 = {}) {
@@ -55,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);
@@ -63,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.4",
+  "version": "1.2.0",
   "description": "Dev-only Vite plugin: click UI elements to jump to source in your IDE",
   "license": "MIT",
   "type": "module",

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 +0,0 @@
-export declare function badgeLabel(picking: boolean): string;

package/dist/client/preference.js

@@ -1,5 +0,0 @@
-export function badgeLabel(picking) {
-    if (picking)
-        return 'Picking — Esc';
-    return 'Locator';
-}

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 };
-}