@oddsquad/vite-plugin-lit 0.2.3 → 0.4.0

package/lib/runtime/source-overlay/overlay-element.js

@@ -3,383 +3,387 @@
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-import { BUILTIN_EDITORS, resolveEditor } from './editors.js';
-import { defaultResolver, findSourceAtPoint, findSourceHost, } from './source-host.js';
-import { buildSpotlightClipPath } from './mask-path.js';
-import { OVERLAY_HTML } from './template.js';
-import { observeEdgeInsets } from '../edge-panel.js';
-import { subscribeOverride } from '../overrides.js';
-import { injectTokens } from '../../tokens.js';
-import { idOf } from '../timeline/identity.js';
-import { INSPECT_OVERLAY_TOGGLE_CHANNEL, INSPECT_DATA_CHANNEL, } from '../../../types/inspector.js';
+import {BUILTIN_EDITORS, resolveEditor} from './editors.js';
+import {
+  defaultResolver,
+  findSourceAtPoint,
+  findSourceHost,
+} from './source-host.js';
+import {buildSpotlightClipPath} from './mask-path.js';
+import {OVERLAY_HTML} from './template.js';
+import {observeEdgeInsets} from '../edge-panel.js';
+import {subscribeOverride} from '../overrides.js';
+import {injectTokens} from '../../tokens.js';
+import {idOf} from '../timeline/identity.js';
+import {
+  INSPECT_OVERLAY_TOGGLE_CHANNEL,
+  INSPECT_DATA_CHANNEL,
+} from '../../../types/inspector.js';
 class LitSourceOverlay extends HTMLElement {
-    #active = false;
-    #hot;
-    #options = {};
-    #editor = BUILTIN_EDITORS.vscode;
-    #resolver = defaultResolver;
-    #dialog;
-    #mask;
-    #highlight;
-    #tooltip;
-    #tag;
-    #path;
-    #info = null;
-    #targetEl = null;
-    #throttleTimer;
-    #scrollTimer;
-    #resizeObserver;
-    #cursorStyle = null;
-    // Whether the Vite HMR WebSocket is currently connected. Used to suppress the
-    // editor-URL-scheme fallback once the dev server is gone — otherwise a failed
-    // open-in-editor fetch would navigate the tab to `vscode://…`.
-    #connected = true;
-    #lastMouseX = 0;
-    #lastMouseY = 0;
-    #edgeDispose;
-    #overrideSubscribed = false;
-    constructor() {
-        super();
-        const root = this.attachShadow({ mode: 'closed' });
-        root.innerHTML = OVERLAY_HTML;
-        this.#dialog = root.getElementById('overlay');
-        this.#mask = root.getElementById('mask');
-        this.#highlight = root.getElementById('highlight');
-        this.#tooltip = root.getElementById('tooltip');
-        this.#tag = root.getElementById('tag');
-        this.#path = root.getElementById('path');
-        root.getElementById('open').addEventListener('click', (e) => {
-            e.stopPropagation();
-            if (this.#info !== null)
-                this.#select(this.#info, true);
-        });
-        root.getElementById('copy').addEventListener('click', (e) => {
-            e.stopPropagation();
-            if (this.#info === null)
-                return;
-            const text = `${this.#normalizePath(this.#info.source.filePath)}:${this.#info.source.lineNumber}`;
-            navigator.clipboard?.writeText(text);
-        });
-        this.#dialog.addEventListener('cancel', (e) => e.preventDefault());
-    }
-    connectedCallback() {
-        injectTokens();
-        document.addEventListener('mousemove', this.#onTrackMouse, true);
-        document.addEventListener('keydown', this.#onKeyDown, true);
-        const hot = import.meta.hot;
-        this.#hot = hot;
-        hot?.on('vite:beforeFullReload', () => this.deactivate());
-        hot?.on('vite:ws:disconnect', () => (this.#connected = false));
-        hot?.on('vite:ws:connect', () => (this.#connected = true));
+  #active = false;
+  #hot;
+  #options = {};
+  #editor = BUILTIN_EDITORS.vscode;
+  #resolver = defaultResolver;
+  #dialog;
+  #mask;
+  #highlight;
+  #tooltip;
+  #tag;
+  #path;
+  #info = null;
+  #targetEl = null;
+  #throttleTimer;
+  #scrollTimer;
+  #resizeObserver;
+  #cursorStyle = null;
+  // Whether the Vite HMR WebSocket is currently connected. Used to suppress the
+  // editor-URL-scheme fallback once the dev server is gone — otherwise a failed
+  // open-in-editor fetch would navigate the tab to `vscode://…`.
+  #connected = true;
+  #lastMouseX = 0;
+  #lastMouseY = 0;
+  #edgeDispose;
+  #overrideSubscribed = false;
+  #hotOff;
+  constructor() {
+    super();
+    const root = this.attachShadow({mode: 'closed'});
+    root.innerHTML = OVERLAY_HTML;
+    this.#dialog = root.getElementById('overlay');
+    this.#mask = root.getElementById('mask');
+    this.#highlight = root.getElementById('highlight');
+    this.#tooltip = root.getElementById('tooltip');
+    this.#tag = root.getElementById('tag');
+    this.#path = root.getElementById('path');
+    root.getElementById('open').addEventListener('click', (e) => {
+      e.stopPropagation();
+      if (this.#info !== null) this.#select(this.#info, true);
+    });
+    root.getElementById('copy').addEventListener('click', (e) => {
+      e.stopPropagation();
+      if (this.#info === null) return;
+      const text = `${this.#normalizePath(this.#info.source.filePath)}:${this.#info.source.lineNumber}`;
+      void navigator.clipboard?.writeText(text);
+    });
+    this.#dialog.addEventListener('cancel', (e) => e.preventDefault());
+  }
+  connectedCallback() {
+    injectTokens();
+    document.addEventListener('mousemove', this.#onTrackMouse, true);
+    document.addEventListener('keydown', this.#onKeyDown, true);
+    const hot = import.meta.hot;
+    this.#hot = hot;
+    if (hot !== undefined && this.#hotOff === undefined) {
+      // Removed again in disconnectedCallback, so a re-attached overlay
+      // doesn't stack duplicates and a detached one stops reacting.
+      const handlers = [
+        ['vite:beforeFullReload', () => this.deactivate()],
+        ['vite:ws:disconnect', () => (this.#connected = false)],
+        ['vite:ws:connect', () => (this.#connected = true)],
         // Toggle from the Vite DevTools command/shortcut (handler runs server-side).
-        hot?.on(INSPECT_OVERLAY_TOGGLE_CHANNEL, () => this.toggle());
-        // Keep the (bottom-fixed) tooltip clear of the Vite DevTools edge panel.
-        this.#edgeDispose = observeEdgeInsets((insets) => {
-            this.style.setProperty('--edge-bottom', `${insets.bottom}px`);
-        });
-        // Apply the panel's editor override live (and on load). Merge so other
-        // configured options (key, throttle, …) survive.
-        if (!this.#overrideSubscribed) {
-            this.#overrideSubscribed = true;
-            subscribeOverride(hot, (o) => {
-                if (o.sourceOverlayEditor !== undefined) {
-                    this.#options = { ...this.#options, editor: o.sourceOverlayEditor };
-                    this.#editor = resolveEditor(o.sourceOverlayEditor);
-                }
-            });
+        [INSPECT_OVERLAY_TOGGLE_CHANNEL, () => this.toggle()],
+      ];
+      for (const [event, cb] of handlers) hot.on(event, cb);
+      this.#hotOff = () => {
+        for (const [event, cb] of handlers) hot.off(event, cb);
+      };
+    }
+    // Keep the (bottom-fixed) tooltip clear of the Vite DevTools edge panel.
+    this.#edgeDispose = observeEdgeInsets((insets) => {
+      this.style.setProperty('--edge-bottom', `${insets.bottom}px`);
+    });
+    // Apply the panel's editor override live (and on load). Merge so other
+    // configured options (key, throttle, …) survive.
+    if (!this.#overrideSubscribed) {
+      this.#overrideSubscribed = true;
+      subscribeOverride(hot, (o) => {
+        if (o.sourceOverlayEditor !== undefined) {
+          this.#options = {...this.#options, editor: o.sourceOverlayEditor};
+          this.#editor = resolveEditor(o.sourceOverlayEditor);
         }
+      });
     }
-    disconnectedCallback() {
-        document.removeEventListener('mousemove', this.#onTrackMouse, true);
-        document.removeEventListener('keydown', this.#onKeyDown, true);
-        this.deactivate();
-        this.#edgeDispose?.();
-        this.#edgeDispose = undefined;
+  }
+  disconnectedCallback() {
+    document.removeEventListener('mousemove', this.#onTrackMouse, true);
+    document.removeEventListener('keydown', this.#onKeyDown, true);
+    this.deactivate();
+    this.#edgeDispose?.();
+    this.#edgeDispose = undefined;
+    this.#hotOff?.();
+    this.#hotOff = undefined;
+  }
+  configure(options) {
+    this.#options = options;
+    this.#editor = resolveEditor(options.editor);
+  }
+  activate() {
+    if (this.#active) return;
+    this.#active = true;
+    this.#dialog.showModal();
+    this.#mask.style.background = 'rgba(0,0,0,0.35)';
+    // The overlay is pointer-events:none, so the cursor reflects the hovered
+    // page element. Force a crosshair while inspecting. The closed shadow DOM
+    // tooltip is unaffected, so its buttons keep their own pointer cursor.
+    if (this.#cursorStyle === null) {
+      this.#cursorStyle = document.createElement('style');
+      this.#cursorStyle.textContent = '*{cursor:crosshair !important}';
     }
-    configure(options) {
-        this.#options = options;
-        this.#editor = resolveEditor(options.editor);
+    document.head.append(this.#cursorStyle);
+    document.addEventListener('mousemove', this.#onMouseMove, true);
+    document.addEventListener('click', this.#onClick, true);
+    window.addEventListener('scroll', this.#onScrollOrResize, {passive: true});
+    window.addEventListener('resize', this.#onScrollOrResize, {passive: true});
+    void this.#resolveAt(this.#lastMouseX, this.#lastMouseY);
+  }
+  deactivate() {
+    if (!this.#active) return;
+    this.#active = false;
+    this.#dialog.close();
+    this.#mask.style.background = 'rgba(0,0,0,0)';
+    this.#cursorStyle?.remove();
+    document.removeEventListener('mousemove', this.#onMouseMove, true);
+    document.removeEventListener('click', this.#onClick, true);
+    window.removeEventListener('scroll', this.#onScrollOrResize);
+    window.removeEventListener('resize', this.#onScrollOrResize);
+    if (this.#throttleTimer !== undefined) {
+      clearTimeout(this.#throttleTimer);
+      this.#throttleTimer = undefined;
     }
-    activate() {
-        if (this.#active)
-            return;
-        this.#active = true;
-        this.#dialog.showModal();
-        this.#mask.style.background = 'rgba(0,0,0,0.35)';
-        // The overlay is pointer-events:none, so the cursor reflects the hovered
-        // page element. Force a crosshair while inspecting. The closed shadow DOM
-        // tooltip is unaffected, so its buttons keep their own pointer cursor.
-        if (this.#cursorStyle === null) {
-            this.#cursorStyle = document.createElement('style');
-            this.#cursorStyle.textContent = '*{cursor:crosshair !important}';
-        }
-        document.head.append(this.#cursorStyle);
-        document.addEventListener('mousemove', this.#onMouseMove, true);
-        document.addEventListener('click', this.#onClick, true);
-        window.addEventListener('scroll', this.#onScrollOrResize, { passive: true });
-        window.addEventListener('resize', this.#onScrollOrResize, { passive: true });
-        this.#resolveAt(this.#lastMouseX, this.#lastMouseY);
+    if (this.#scrollTimer !== undefined) {
+      clearTimeout(this.#scrollTimer);
+      this.#scrollTimer = undefined;
     }
-    deactivate() {
-        if (!this.#active)
-            return;
-        this.#active = false;
-        this.#dialog.close();
-        this.#mask.style.background = 'rgba(0,0,0,0)';
-        this.#cursorStyle?.remove();
-        document.removeEventListener('mousemove', this.#onMouseMove, true);
-        document.removeEventListener('click', this.#onClick, true);
-        window.removeEventListener('scroll', this.#onScrollOrResize);
-        window.removeEventListener('resize', this.#onScrollOrResize);
-        if (this.#throttleTimer !== undefined) {
-            clearTimeout(this.#throttleTimer);
-            this.#throttleTimer = undefined;
-        }
-        if (this.#scrollTimer !== undefined) {
-            clearTimeout(this.#scrollTimer);
-            this.#scrollTimer = undefined;
-        }
-        this.#clearTarget();
+    this.#clearTarget();
+  }
+  toggle() {
+    if (this.#active) this.deactivate();
+    else this.activate();
+  }
+  #normalizePath(filePath) {
+    const root = this.#options.workspaceRoot;
+    if (root !== undefined && filePath.startsWith(root)) {
+      const rest = filePath.slice(root.length);
+      return rest.startsWith('/') ? rest.slice(1) : rest;
     }
-    toggle() {
-        if (this.#active)
-            this.deactivate();
-        else
-            this.activate();
+    return filePath;
+  }
+  async #openInEditor(filePath, lineNumber) {
+    const path = this.#normalizePath(filePath);
+    const endpoint = this.#options.openInEditorPath ?? '/__lit-open-in-editor';
+    try {
+      const params = new URLSearchParams({
+        file: path,
+        line: String(lineNumber),
+      });
+      const res = await fetch(`${endpoint}?${params.toString()}`);
+      if (res.ok) return;
+    } catch {
+      // Fall back to editor URL schemes (e.g. StackBlitz previews).
     }
-    #normalizePath(filePath) {
-        const root = this.#options.workspaceRoot;
-        if (root !== undefined && filePath.startsWith(root)) {
-            const rest = filePath.slice(root.length);
-            return rest.startsWith('/') ? rest.slice(1) : rest;
-        }
-        return filePath;
+    // Skip the URL-scheme fallback when the dev server is gone: a fetch failure
+    // there means "server quit", not "no endpoint", and navigating the tab to
+    // `vscode://…` on shutdown is jarring and unwanted.
+    if (!this.#connected) return;
+    window.open(this.#editor.url(path, lineNumber), '_self');
+  }
+  #updateHighlightRect() {
+    if (this.#targetEl === null) return;
+    const rect = this.#targetEl.getBoundingClientRect();
+    const raw = getComputedStyle(this)
+      .getPropertyValue('--lit-devtools-radius')
+      .trim();
+    const r = parseFloat(raw) || 6;
+    // The tinted box hugs the element's exact rect — that's the boundary being
+    // picked; only the spotlight cutout gets the breathing room of `r`.
+    this.#highlight.style.display = 'block';
+    this.#highlight.style.left = `${rect.left}px`;
+    this.#highlight.style.top = `${rect.top}px`;
+    this.#highlight.style.width = `${rect.width}px`;
+    this.#highlight.style.height = `${rect.height}px`;
+    this.#mask.style.clipPath = buildSpotlightClipPath(
+      rect.left - r,
+      rect.top - r,
+      rect.width + 2 * r,
+      rect.height + 2 * r,
+      r
+    );
+  }
+  #showTooltip() {
+    if (this.#info === null) return;
+    this.#tag.textContent = `<${this.#info.tagName}>`;
+    this.#path.textContent = `${this.#normalizePath(this.#info.source.filePath)}:${this.#info.source.lineNumber}`;
+    this.#tooltip.style.display = 'flex';
+  }
+  #clearTarget() {
+    this.#targetEl = null;
+    this.#info = null;
+    this.#highlight.style.display = 'none';
+    this.#highlight.style.left = '0';
+    this.#highlight.style.top = '0';
+    this.#highlight.style.width = '0';
+    this.#highlight.style.height = '0';
+    this.#mask.style.clipPath = 'none';
+    this.#tooltip.style.display = 'none';
+    if (this.#resizeObserver !== undefined) {
+      this.#resizeObserver.disconnect();
+      this.#resizeObserver = undefined;
     }
-    async #openInEditor(filePath, lineNumber) {
-        const path = this.#normalizePath(filePath);
-        const endpoint = this.#options.openInEditorPath ?? '/__lit-open-in-editor';
-        try {
-            const params = new URLSearchParams({
-                file: path,
-                line: String(lineNumber),
-            });
-            const res = await fetch(`${endpoint}?${params.toString()}`);
-            if (res.ok)
-                return;
-        }
-        catch {
-            // Fall back to editor URL schemes (e.g. StackBlitz previews).
-        }
-        // Skip the URL-scheme fallback when the dev server is gone: a fetch failure
-        // there means "server quit", not "no endpoint", and navigating the tab to
-        // `vscode://…` on shutdown is jarring and unwanted.
-        if (!this.#connected)
-            return;
-        window.open(this.#editor.url(path, lineNumber), '_self');
+  }
+  #shouldSkip(el) {
+    if (el === this.#dialog || this.#dialog.contains(el)) return true;
+    if (el.tagName === 'IFRAME') return true;
+    // Never target devtools' own injected elements (indicator, overlay).
+    const tag = el.tagName.toLowerCase();
+    if (tag === 'lit-source-overlay' || tag.startsWith('lit-devtools-')) {
+      return true;
     }
-    #updateHighlightRect() {
-        if (this.#targetEl === null)
-            return;
-        const rect = this.#targetEl.getBoundingClientRect();
-        const raw = getComputedStyle(this)
-            .getPropertyValue('--lit-devtools-radius')
-            .trim();
-        const r = parseFloat(raw) || 6;
-        // The tinted box hugs the element's exact rect — that's the boundary being
-        // picked; only the spotlight cutout gets the breathing room of `r`.
-        this.#highlight.style.display = 'block';
-        this.#highlight.style.left = `${rect.left}px`;
-        this.#highlight.style.top = `${rect.top}px`;
-        this.#highlight.style.width = `${rect.width}px`;
-        this.#highlight.style.height = `${rect.height}px`;
-        this.#mask.style.clipPath = buildSpotlightClipPath(rect.left - r, rect.top - r, rect.width + 2 * r, rect.height + 2 * r, r);
+    const exclude = this.#options.exclude;
+    return exclude !== undefined && exclude(el);
+  }
+  async #resolveAt(x, y) {
+    this.#lastMouseX = x;
+    this.#lastMouseY = y;
+    const el = findSourceAtPoint(x, y, this.#dialog);
+    if (el === null || this.#shouldSkip(el)) {
+      this.#clearTarget();
+      return;
     }
-    #showTooltip() {
-        if (this.#info === null)
-            return;
-        this.#tag.textContent = `<${this.#info.tagName}>`;
-        this.#path.textContent = `${this.#normalizePath(this.#info.source.filePath)}:${this.#info.source.lineNumber}`;
-        this.#tooltip.style.display = 'flex';
+    const host = findSourceHost(el);
+    if (host === null) {
+      this.#clearTarget();
+      return;
     }
-    #clearTarget() {
-        this.#targetEl = null;
-        this.#info = null;
-        this.#highlight.style.display = 'none';
-        this.#highlight.style.left = '0';
-        this.#highlight.style.top = '0';
-        this.#highlight.style.width = '0';
-        this.#highlight.style.height = '0';
-        this.#mask.style.clipPath = 'none';
-        this.#tooltip.style.display = 'none';
-        if (this.#resizeObserver !== undefined) {
-            this.#resizeObserver.disconnect();
-            this.#resizeObserver = undefined;
-        }
+    if (host === this.#targetEl && this.#info !== null) {
+      this.#updateHighlightRect();
+      return;
     }
-    #shouldSkip(el) {
-        if (el === this.#dialog || this.#dialog.contains(el))
-            return true;
-        if (el.tagName === 'IFRAME')
-            return true;
-        // Never target devtools' own injected elements (indicator, overlay).
-        const tag = el.tagName.toLowerCase();
-        if (tag === 'lit-source-overlay' || tag.startsWith('lit-devtools-')) {
-            return true;
-        }
-        const exclude = this.#options.exclude;
-        return exclude !== undefined && exclude(el);
+    this.#targetEl = host;
+    if (this.#resizeObserver === undefined) {
+      this.#resizeObserver = new ResizeObserver(() =>
+        this.#updateHighlightRect()
+      );
+    } else {
+      this.#resizeObserver.disconnect();
     }
-    async #resolveAt(x, y) {
-        this.#lastMouseX = x;
-        this.#lastMouseY = y;
-        const el = findSourceAtPoint(x, y, this.#dialog);
-        if (el === null || this.#shouldSkip(el)) {
-            this.#clearTarget();
-            return;
-        }
-        const host = findSourceHost(el);
-        if (host === null) {
-            this.#clearTarget();
-            return;
-        }
-        if (host === this.#targetEl && this.#info !== null) {
-            this.#updateHighlightRect();
-            return;
-        }
-        this.#targetEl = host;
-        if (this.#resizeObserver === undefined) {
-            this.#resizeObserver = new ResizeObserver(() => this.#updateHighlightRect());
-        }
-        else {
-            this.#resizeObserver.disconnect();
-        }
-        this.#resizeObserver.observe(host);
-        const resolved = await this.#resolver.resolveElementInfo(el);
-        if (resolved === null) {
-            this.#clearTarget();
-            return;
-        }
-        this.#info = resolved;
-        this.#updateHighlightRect();
-        this.#showTooltip();
+    this.#resizeObserver.observe(host);
+    const resolved = await this.#resolver.resolveElementInfo(el);
+    if (resolved === null) {
+      this.#clearTarget();
+      return;
     }
-    #onTrackMouse = (event) => {
-        this.#lastMouseX = event.clientX;
-        this.#lastMouseY = event.clientY;
-    };
-    #onKeyDown = (event) => {
-        if ((event.metaKey || event.ctrlKey) && event.shiftKey && !event.altKey) {
-            const pressed = event.key.toLowerCase();
-            const hotkey = (this.#options.key ?? 'e').toLowerCase();
-            if (pressed === hotkey) {
-                event.preventDefault();
-                this.toggle();
-            }
-        }
-        if (this.#active && event.key === 'Escape') {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    };
-    #onMouseMove = (event) => {
-        if (!this.#active)
-            return;
-        // Keep the current selection while hovering the tooltip so its buttons stay
-        // clickable — the tooltip isn't a source element, so re-resolving here would
-        // clear the target and hide the panel out from under the pointer.
-        if (this.#pointInTooltip(event.clientX, event.clientY))
-            return;
-        const throttleMs = this.#options.throttleMs ?? 50;
-        if (this.#throttleTimer !== undefined)
-            return;
-        this.#throttleTimer = setTimeout(() => {
-            this.#throttleTimer = undefined;
-            // Resolve against the latest pointer position (kept current by
-            // #onTrackMouse), not the coords captured when this timer was scheduled
-            // ~throttleMs ago — otherwise the highlight lags the cursor during
-            // continuous movement.
-            const x = this.#lastMouseX;
-            const y = this.#lastMouseY;
-            if (this.#pointInTooltip(x, y))
-                return;
-            this.#resolveAt(x, y);
-        }, throttleMs);
-    };
-    #select(info, openInEditor = false) {
-        const target = this.#targetEl;
-        // Cancel the whole selection mode on any deliberate pick, before acting —
-        // the editor may open via a URL scheme that doesn't navigate this tab away,
-        // so we can't rely on the open outcome to dismiss the inspector.
-        this.deactivate();
-        this.#options.onSelect?.(info);
-        if (openInEditor) {
-            this.#openInEditor(info.source.filePath, info.source.lineNumber);
-            return;
-        }
-        // Report the picked element to the DevTools panel, which selects it in the
-        // Components tree. Identity matches the inspector runtime via idOf().
-        if (target !== null) {
-            this.#hot?.send(INSPECT_DATA_CHANNEL, { type: 'pick', id: idOf(target) });
-            this.#openDevtoolsPanel();
-        }
+    this.#info = resolved;
+    this.#updateHighlightRect();
+    this.#showTooltip();
+  }
+  #onTrackMouse = (event) => {
+    this.#lastMouseX = event.clientX;
+    this.#lastMouseY = event.clientY;
+  };
+  #onKeyDown = (event) => {
+    if ((event.metaKey || event.ctrlKey) && event.shiftKey && !event.altKey) {
+      const pressed = event.key.toLowerCase();
+      const hotkey = (this.#options.key ?? 's').toLowerCase();
+      if (pressed === hotkey) {
+        event.preventDefault();
+        this.toggle();
+      }
     }
-    /**
-     * Bring the Lit DevTools dock entry to the front so a pick is visible even
-     * when the panel was closed. The panel mirrors this from its own
-     * `inspector-activate` handler, but only once its iframe is mounted — and the
-     * @vitejs/devtools shell does not mount that iframe until the entry has been
-     * opened at least once. This overlay always runs on the page, so calling
-     * `switchEntry` here covers the cold-start case where no panel exists yet to
-     * receive the `pick` message.
-     */
-    #openDevtoolsPanel() {
-        try {
-            const ctx = window.__VITE_DEVTOOLS_CLIENT_CONTEXT__;
-            ctx?.docks?.switchEntry?.('lit-devtools');
-        }
-        catch {
-            // Not running inside the DevTools shell — ignore.
-        }
+    if (this.#active && event.key === 'Escape') {
+      event.preventDefault();
+      event.stopPropagation();
     }
-    #pointInTooltip(x, y) {
-        if (this.#tooltip.style.display === 'none')
-            return false;
-        const r = this.#tooltip.getBoundingClientRect();
-        return x >= r.left && x <= r.right && y >= r.top && y <= r.bottom;
+  };
+  #onMouseMove = (event) => {
+    if (!this.#active) return;
+    // Keep the current selection while hovering the tooltip so its buttons stay
+    // clickable — the tooltip isn't a source element, so re-resolving here would
+    // clear the target and hide the panel out from under the pointer.
+    if (this.#pointInTooltip(event.clientX, event.clientY)) return;
+    const throttleMs = this.#options.throttleMs ?? 50;
+    if (this.#throttleTimer !== undefined) return;
+    this.#throttleTimer = setTimeout(() => {
+      this.#throttleTimer = undefined;
+      // Resolve against the latest pointer position (kept current by
+      // #onTrackMouse), not the coords captured when this timer was scheduled
+      // ~throttleMs ago — otherwise the highlight lags the cursor during
+      // continuous movement.
+      const x = this.#lastMouseX;
+      const y = this.#lastMouseY;
+      if (this.#pointInTooltip(x, y)) return;
+      void this.#resolveAt(x, y);
+    }, throttleMs);
+  };
+  #select(info, openInEditor = false) {
+    const target = this.#targetEl;
+    // Cancel the whole selection mode on any deliberate pick, before acting —
+    // the editor may open via a URL scheme that doesn't navigate this tab away,
+    // so we can't rely on the open outcome to dismiss the inspector.
+    this.deactivate();
+    this.#options.onSelect?.(info);
+    if (openInEditor) {
+      void this.#openInEditor(info.source.filePath, info.source.lineNumber);
+      return;
     }
-    #onClick = (event) => {
-        if (!this.#active || this.#info === null)
-            return;
-        // Clicks on the tooltip panel are handled by its own buttons (open/copy).
-        // The overlay's shadow root is closed, so we detect this by hit-rect rather
-        // than inspecting the event path, and let the event reach those buttons.
-        if (this.#pointInTooltip(event.clientX, event.clientY))
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        this.#select(this.#info, event.metaKey || event.ctrlKey);
-    };
-    #onScrollOrResize = () => {
-        if (this.#scrollTimer !== undefined)
-            clearTimeout(this.#scrollTimer);
-        this.#scrollTimer = setTimeout(() => {
-            this.#scrollTimer = undefined;
-            if (this.#targetEl !== null) {
-                this.#updateHighlightRect();
-            }
-        }, 50);
-    };
+    // Report the picked element to the DevTools panel, which selects it in the
+    // Components tree. Identity matches the inspector runtime via idOf().
+    if (target !== null) {
+      this.#hot?.send(INSPECT_DATA_CHANNEL, {type: 'pick', id: idOf(target)});
+      this.#openDevtoolsPanel();
+    }
+  }
+  /**
+   * Bring the Lit DevTools dock entry to the front so a pick is visible even
+   * when the panel was closed. The panel mirrors this from its own
+   * `inspector-activate` handler, but only once its iframe is mounted — and the
+   * @vitejs/devtools shell does not mount that iframe until the entry has been
+   * opened at least once. This overlay always runs on the page, so calling
+   * `switchEntry` here covers the cold-start case where no panel exists yet to
+   * receive the `pick` message.
+   */
+  #openDevtoolsPanel() {
+    try {
+      const ctx = window.__VITE_DEVTOOLS_CLIENT_CONTEXT__;
+      void ctx?.docks?.switchEntry?.('lit-devtools');
+    } catch {
+      // Not running inside the DevTools shell — ignore.
+    }
+  }
+  #pointInTooltip(x, y) {
+    if (this.#tooltip.style.display === 'none') return false;
+    const r = this.#tooltip.getBoundingClientRect();
+    return x >= r.left && x <= r.right && y >= r.top && y <= r.bottom;
+  }
+  #onClick = (event) => {
+    if (!this.#active || this.#info === null) return;
+    // Clicks on the tooltip panel are handled by its own buttons (open/copy).
+    // The overlay's shadow root is closed, so we detect this by hit-rect rather
+    // than inspecting the event path, and let the event reach those buttons.
+    if (this.#pointInTooltip(event.clientX, event.clientY)) return;
+    event.preventDefault();
+    event.stopPropagation();
+    this.#select(this.#info, event.metaKey || event.ctrlKey);
+  };
+  #onScrollOrResize = () => {
+    if (this.#scrollTimer !== undefined) clearTimeout(this.#scrollTimer);
+    this.#scrollTimer = setTimeout(() => {
+      this.#scrollTimer = undefined;
+      if (this.#targetEl !== null) {
+        this.#updateHighlightRect();
+      }
+    }, 50);
+  };
 }
 customElements.define('lit-source-overlay', LitSourceOverlay);
 export const initSourceOverlay = (initOptions = {}) => {
-    if (typeof window === 'undefined')
-        return;
-    const el = document.createElement('lit-source-overlay');
-    el.configure(initOptions);
-    document.body.append(el);
+  if (typeof window === 'undefined') return;
+  const el = document.createElement('lit-source-overlay');
+  el.configure(initOptions);
+  document.body.append(el);
 };
 export const toggleSourceOverlay = () => {
-    const el = document.querySelector('lit-source-overlay');
-    el?.toggle();
+  const el = document.querySelector('lit-source-overlay');
+  el?.toggle();
 };
-//# sourceMappingURL=overlay-element.js.map
+//# sourceMappingURL=overlay-element.js.map