@aylith/inspekt-core 0.4.0

package/dist/index.js

@@ -0,0 +1,3222 @@
+// src/detection/vue-detector.ts
+function fromVue3(el) {
+  let cmp = el.__vueParentComponent;
+  while (cmp) {
+    const file = cmp.type?.__file;
+    if (file) {
+      const name = cmp.type?.__name ?? cmp.type?.name ?? fileNameOf(file);
+      return {
+        filePath: file,
+        line: 1,
+        column: 1,
+        componentName: name,
+        rawPath: `${file}:1:1:${name}`
+      };
+    }
+    cmp = cmp.parent ?? null;
+  }
+  return null;
+}
+function fromVue2(el) {
+  let vm = el.__vue__;
+  while (vm) {
+    const file = vm.$options?.__file;
+    if (file) {
+      const name = vm.$options?.name ?? vm.$options?._componentTag ?? fileNameOf(file);
+      return {
+        filePath: file,
+        line: 1,
+        column: 1,
+        componentName: name,
+        rawPath: `${file}:1:1:${name}`
+      };
+    }
+    vm = vm.$parent ?? null;
+  }
+  return null;
+}
+function fileNameOf(path) {
+  return path.split("/").pop()?.replace(/\.\w+$/, "") ?? "Unknown";
+}
+function vueSourceFor(element) {
+  const el = element;
+  return fromVue3(el) ?? fromVue2(el);
+}
+
+// src/detection/source-detector.ts
+var SOURCE_ATTRIBUTE = "data-insp-path";
+function parseSourceAttribute(value) {
+  const parts = value.split(":");
+  if (parts.length < 2) return null;
+  let filePath;
+  let rest;
+  if (/^[A-Z]$/i.test(parts[0] ?? "") && parts[1]?.startsWith("\\")) {
+    filePath = `${parts[0]}:${parts[1]}`;
+    rest = parts.slice(2);
+  } else {
+    filePath = parts[0];
+    rest = parts.slice(1);
+  }
+  const line = parseInt(rest[0] ?? "", 10);
+  const column = parseInt(rest[1] ?? "", 10);
+  const componentName = rest[2] ?? filePath.split("/").pop()?.replace(/\.\w+$/, "") ?? "Unknown";
+  if (isNaN(line)) return null;
+  return {
+    filePath,
+    line,
+    column: isNaN(column) ? 1 : column,
+    componentName,
+    rawPath: value
+  };
+}
+function findSourceAttribute(element) {
+  return element.getAttribute(SOURCE_ATTRIBUTE);
+}
+function findClosestSource(element) {
+  let current = element;
+  while (current) {
+    const attrValue = findSourceAttribute(current);
+    if (attrValue) {
+      const source = parseSourceAttribute(attrValue);
+      if (source) return { element: current, source };
+    }
+    current = current.parentElement;
+  }
+  const vueSource = vueSourceFor(element);
+  if (vueSource) return { element, source: vueSource };
+  return null;
+}
+function elementToInspected(domElement, source, pathMapping = {}, detectionSource = "attribute") {
+  let resolvedPath = source.filePath;
+  for (const [containerPath, hostPath] of Object.entries(pathMapping)) {
+    if (resolvedPath.startsWith(containerPath)) {
+      resolvedPath = resolvedPath.replace(containerPath, hostPath);
+      break;
+    }
+  }
+  return {
+    filePath: resolvedPath,
+    line: source.line,
+    column: source.column,
+    componentName: source.componentName,
+    rawPath: source.rawPath,
+    domElement,
+    tagName: domElement.tagName.toLowerCase(),
+    classList: Array.from(domElement.classList),
+    id: domElement.id || null,
+    boundingRect: domElement.getBoundingClientRect(),
+    ancestors: [],
+    children: [],
+    props: null,
+    framework: detectionSource === "fiber" ? "react" : "unknown",
+    detectionSource
+  };
+}
+
+// src/highlight/highlighter.ts
+var HIGHLIGHT_ATTR = "data-inspekt-highlight";
+var Highlighter = class {
+  highlights = /* @__PURE__ */ new Map();
+  config;
+  constructor(config) {
+    this.config = config;
+  }
+  highlight(element, type = "selected") {
+    if (this.highlights.has(element)) {
+      this.unhighlight(element);
+    }
+    const state = {
+      element,
+      originalOutline: element.style.outline,
+      originalOutlineOffset: element.style.outlineOffset,
+      originalBoxShadow: element.style.boxShadow,
+      type
+    };
+    this.highlights.set(element, state);
+    element.setAttribute(HIGHLIGHT_ATTR, type);
+    switch (type) {
+      case "selected":
+        element.style.outline = `2px solid ${this.config.color}`;
+        element.style.outlineOffset = "2px";
+        if (this.config.style === "glow") {
+          element.style.boxShadow = `0 0 8px 2px ${this.config.color}40`;
+        }
+        break;
+      case "hovered":
+        element.style.outline = "2px dashed #a855f7";
+        element.style.outlineOffset = "2px";
+        break;
+      case "border":
+        element.style.outline = `1px solid ${this.config.color}60`;
+        element.style.outlineOffset = "0px";
+        break;
+    }
+  }
+  unhighlight(element) {
+    const state = this.highlights.get(element);
+    if (!state) return;
+    element.style.outline = state.originalOutline;
+    element.style.outlineOffset = state.originalOutlineOffset;
+    element.style.boxShadow = state.originalBoxShadow;
+    element.removeAttribute(HIGHLIGHT_ATTR);
+    this.highlights.delete(element);
+  }
+  unhighlightAll() {
+    for (const [element] of this.highlights) {
+      this.unhighlight(element);
+    }
+  }
+  updateConfig(config) {
+    this.config = config;
+  }
+};
+
+// src/highlight/bounding-boxes.ts
+var BoundingBoxOverlay = class {
+  constructor(shadowRoot) {
+    this.shadowRoot = shadowRoot;
+    this.container = document.createElement("div");
+    this.container.className = "inspekt-bbox-layer";
+    this.shadowRoot.appendChild(this.container);
+  }
+  shadowRoot;
+  container;
+  boxes = [];
+  mounted = false;
+  rafHandle = null;
+  resizeObserver = null;
+  mutationObserver = null;
+  enable() {
+    if (this.mounted) return;
+    this.mounted = true;
+    this.scan();
+    window.addEventListener("scroll", this.scheduleRepaint, true);
+    window.addEventListener("resize", this.scheduleRepaint);
+    this.resizeObserver = new ResizeObserver(this.scheduleRepaint);
+    for (const { el } of this.boxes) this.resizeObserver.observe(el);
+    this.mutationObserver = new MutationObserver(this.scheduleRescan);
+    this.mutationObserver.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["data-insp-path"]
+    });
+  }
+  disable() {
+    if (!this.mounted) return;
+    this.mounted = false;
+    window.removeEventListener("scroll", this.scheduleRepaint, true);
+    window.removeEventListener("resize", this.scheduleRepaint);
+    this.resizeObserver?.disconnect();
+    this.mutationObserver?.disconnect();
+    this.resizeObserver = null;
+    this.mutationObserver = null;
+    if (this.rafHandle !== null) cancelAnimationFrame(this.rafHandle);
+    this.rafHandle = null;
+    this.clear();
+  }
+  destroy() {
+    this.disable();
+    this.container.remove();
+  }
+  clear() {
+    this.container.innerHTML = "";
+    this.boxes = [];
+  }
+  scan() {
+    this.clear();
+    const seen = /* @__PURE__ */ new Set();
+    const nodes = document.querySelectorAll("[data-insp-path]");
+    for (const node of nodes) {
+      const hit = findClosestSource(node);
+      if (!hit || seen.has(hit.element)) continue;
+      seen.add(hit.element);
+      this.boxes.push(this.makeBox(hit.element, hit.source));
+    }
+    this.repaint();
+  }
+  makeBox(el, source) {
+    const box = document.createElement("div");
+    box.className = "inspekt-bbox";
+    const label = document.createElement("span");
+    label.className = "inspekt-bbox-label";
+    label.textContent = `${source.componentName} \xB7 ${fileTail(source.filePath)}:${source.line}`;
+    box.appendChild(label);
+    this.container.appendChild(box);
+    return { el, box, label, source };
+  }
+  scheduleRepaint = () => {
+    if (this.rafHandle !== null) return;
+    this.rafHandle = requestAnimationFrame(() => {
+      this.rafHandle = null;
+      this.repaint();
+    });
+  };
+  scheduleRescan = () => {
+    if (this.rafHandle !== null) cancelAnimationFrame(this.rafHandle);
+    this.rafHandle = requestAnimationFrame(() => {
+      this.rafHandle = null;
+      this.scan();
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+        for (const { el } of this.boxes) this.resizeObserver.observe(el);
+      }
+    });
+  };
+  repaint() {
+    for (const binding of this.boxes) {
+      const rect = binding.el.getBoundingClientRect();
+      if (rect.width === 0 || rect.height === 0) {
+        binding.box.style.display = "none";
+        continue;
+      }
+      binding.box.style.display = "";
+      binding.box.style.transform = `translate(${rect.left}px, ${rect.top}px)`;
+      binding.box.style.width = `${rect.width}px`;
+      binding.box.style.height = `${rect.height}px`;
+    }
+  }
+};
+function fileTail(path) {
+  return path.split("/").pop() ?? path;
+}
+
+// src/snippet/snippet-resolver.ts
+var CACHE_LIMIT = 100;
+var cache = /* @__PURE__ */ new Map();
+function cacheKey(opts) {
+  return `${opts.filePath}:${opts.line}:${opts.context ?? 5}`;
+}
+function lruTouch(key, value) {
+  cache.delete(key);
+  cache.set(key, value);
+  if (cache.size > CACHE_LIMIT) {
+    const oldest = cache.keys().next().value;
+    if (oldest !== void 0) cache.delete(oldest);
+  }
+}
+async function fetchFromDevServer(opts) {
+  if (!opts.serverUrl) return null;
+  const fetcher = opts.fetcher ?? fetch;
+  const url = new URL("/__inspekt/snippet", opts.serverUrl);
+  url.searchParams.set("file", opts.filePath);
+  url.searchParams.set("line", String(opts.line));
+  url.searchParams.set("context", String(opts.context ?? 5));
+  try {
+    const res = await fetcher(url.toString(), { method: "GET" });
+    if (!res.ok) return null;
+    const data = await res.json();
+    return { ...data, source: "devserver" };
+  } catch {
+    return null;
+  }
+}
+async function resolveSnippet(opts) {
+  const key = cacheKey(opts);
+  if (cache.has(key)) {
+    return cache.get(key) ?? null;
+  }
+  const stat = opts.staticSnippets?.[opts.filePath];
+  if (stat) {
+    const startLine = stat.startLine ?? 1;
+    const snippet = {
+      startLine,
+      endLine: startLine + stat.lines.length - 1,
+      targetLine: opts.line,
+      lines: stat.lines,
+      language: stat.language,
+      source: "devserver"
+    };
+    lruTouch(key, snippet);
+    return snippet;
+  }
+  const fromServer = await fetchFromDevServer(opts);
+  if (fromServer) {
+    lruTouch(key, fromServer);
+    return fromServer;
+  }
+  if (opts.sourceMapEnabled) {
+    try {
+      const mod = await import("./sourcemap-resolver-3PQ6R6PU.js");
+      const fromMap = await mod.resolveFromSourceMap({
+        filePath: opts.filePath,
+        line: opts.line,
+        context: opts.context,
+        fetcher: opts.fetcher
+      });
+      if (fromMap) {
+        lruTouch(key, fromMap);
+        return fromMap;
+      }
+    } catch {
+    }
+  }
+  lruTouch(key, null);
+  return null;
+}
+
+// src/highlight/prism.ts
+import Prism from "prismjs";
+import "prismjs/components/prism-markup.js";
+import "prismjs/components/prism-clike.js";
+import "prismjs/components/prism-javascript.js";
+import "prismjs/components/prism-jsx.js";
+import "prismjs/components/prism-typescript.js";
+import "prismjs/components/prism-tsx.js";
+import "prismjs/components/prism-css.js";
+import "prismjs/components/prism-json.js";
+function resolveGrammarKey(lang) {
+  switch ((lang || "").toLowerCase()) {
+    case "js":
+    case "jsx":
+    case "mjs":
+    case "cjs":
+      return "jsx";
+    case "ts":
+    case "tsx":
+      return "tsx";
+    case "javascript":
+      return "javascript";
+    case "typescript":
+      return "typescript";
+    case "json":
+      return "json";
+    case "css":
+    case "scss":
+    case "less":
+      return "css";
+    case "html":
+    case "htm":
+    case "xml":
+    case "svg":
+    case "markup":
+      return "markup";
+    default:
+      return "plain";
+  }
+}
+function tokenizeToLines(code, lang) {
+  const key = resolveGrammarKey(lang);
+  const grammar = key === "plain" ? void 0 : Prism.languages[key];
+  if (!grammar) {
+    return code.split("\n").map((text) => ({ tokens: [{ text, type: "" }] }));
+  }
+  const tokens = Prism.tokenize(code, grammar);
+  return splitTokensIntoLines(tokens);
+}
+function splitTokensIntoLines(nodes) {
+  const lines = [{ tokens: [] }];
+  const current = () => lines[lines.length - 1].tokens;
+  function visit(node, parentType) {
+    if (typeof node === "string") {
+      pushText(node, parentType);
+      return;
+    }
+    if (Array.isArray(node)) {
+      for (const n of node) visit(n, parentType);
+      return;
+    }
+    const type = parentType ? `${parentType} ${node.type}` : node.type;
+    visit(node.content, type);
+  }
+  function pushText(text, type) {
+    let buf = text;
+    while (buf.length > 0) {
+      const nl = buf.indexOf("\n");
+      if (nl === -1) {
+        if (buf.length > 0) current().push({ text: buf, type });
+        return;
+      }
+      const before = buf.slice(0, nl);
+      if (before.length > 0) current().push({ text: before, type });
+      lines.push({ tokens: [] });
+      buf = buf.slice(nl + 1);
+    }
+  }
+  for (const n of nodes) visit(n, "");
+  return lines;
+}
+
+// src/components/tooltip.ts
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  offset,
+  shift
+} from "@floating-ui/dom";
+var counter = 0;
+function attachTooltip(trigger, content, opts = {}) {
+  const enterDelay = opts.enterDelay ?? 200;
+  const leaveDelay = opts.leaveDelay ?? 80;
+  const placement = opts.placement ?? "top";
+  const offsetPx = opts.offsetPx ?? 8;
+  const root = opts.root ?? document.body;
+  const isRich = typeof content !== "string";
+  let bubble = null;
+  let enterTimer = null;
+  let leaveTimer = null;
+  let cleanupAutoUpdate = null;
+  const id = `inspekt-tooltip-${++counter}`;
+  function show() {
+    if (bubble) return;
+    bubble = document.createElement("div");
+    bubble.className = "inspekt-tooltip";
+    bubble.id = id;
+    bubble.setAttribute("role", "tooltip");
+    bubble.style.position = "fixed";
+    bubble.style.top = "0";
+    bubble.style.left = "0";
+    bubble.style.zIndex = "2147483647";
+    if (typeof content === "string") {
+      bubble.textContent = content;
+    } else {
+      bubble.classList.add("inspekt-tooltip--rich");
+      bubble.appendChild(content);
+    }
+    root.appendChild(bubble);
+    cleanupAutoUpdate = autoUpdate(trigger, bubble, update);
+    if (isRich) {
+      bubble.addEventListener("mouseenter", cancelLeave);
+      bubble.addEventListener("mouseleave", scheduleHide);
+    }
+  }
+  function hide() {
+    if (!bubble) return;
+    cleanupAutoUpdate?.();
+    cleanupAutoUpdate = null;
+    bubble.remove();
+    bubble = null;
+  }
+  function update() {
+    if (!bubble) return;
+    void computePosition(trigger, bubble, {
+      placement,
+      strategy: "fixed",
+      middleware: [offset(offsetPx), flip(), shift({ padding: 6 })]
+    }).then(({ x, y }) => {
+      if (!bubble || !bubble.isConnected) return;
+      bubble.style.left = `${Math.round(x)}px`;
+      bubble.style.top = `${Math.round(y)}px`;
+    });
+  }
+  function scheduleShow() {
+    cancelLeave();
+    if (enterTimer) clearTimeout(enterTimer);
+    enterTimer = setTimeout(() => {
+      enterTimer = null;
+      show();
+    }, enterDelay);
+  }
+  function scheduleHide() {
+    if (enterTimer) {
+      clearTimeout(enterTimer);
+      enterTimer = null;
+    }
+    if (leaveTimer) clearTimeout(leaveTimer);
+    leaveTimer = setTimeout(() => {
+      leaveTimer = null;
+      hide();
+    }, leaveDelay);
+  }
+  function cancelLeave() {
+    if (leaveTimer) {
+      clearTimeout(leaveTimer);
+      leaveTimer = null;
+    }
+  }
+  function onKey(e) {
+    if (e.key === "Escape") hide();
+  }
+  trigger.setAttribute("aria-describedby", id);
+  trigger.addEventListener("mouseenter", scheduleShow);
+  trigger.addEventListener("mouseleave", scheduleHide);
+  trigger.addEventListener("focus", scheduleShow);
+  trigger.addEventListener("blur", scheduleHide);
+  trigger.addEventListener("keydown", onKey);
+  return function detach() {
+    if (enterTimer) clearTimeout(enterTimer);
+    if (leaveTimer) clearTimeout(leaveTimer);
+    trigger.removeEventListener("mouseenter", scheduleShow);
+    trigger.removeEventListener("mouseleave", scheduleHide);
+    trigger.removeEventListener("focus", scheduleShow);
+    trigger.removeEventListener("blur", scheduleHide);
+    trigger.removeEventListener("keydown", onKey);
+    trigger.removeAttribute("aria-describedby");
+    hide();
+  };
+}
+
+// src/popover/popover.ts
+var ICON_COPY = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>`;
+var ICON_HTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>`;
+var ICON_CONSOLE = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>`;
+var ICON_INFO = `<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9.5"/><line x1="12" y1="11" x2="12" y2="16.5"/><circle cx="12" cy="7.8" r="0.6" fill="currentColor" stroke="none"/></svg>`;
+var DEFAULT_SNIPPET_CONFIG = {
+  context: 5,
+  defaultExpanded: false,
+  sourceMapEnabled: false
+};
+var Popover = class {
+  constructor(shadowRoot) {
+    this.shadowRoot = shadowRoot;
+    this.container = document.createElement("div");
+    this.container.className = "inspekt-popover";
+    this.container.style.display = "none";
+    this.shadowRoot.appendChild(this.container);
+  }
+  shadowRoot;
+  container;
+  visible = false;
+  pinned = false;
+  snippetConfig = { ...DEFAULT_SNIPPET_CONFIG };
+  /** Lock the popover in place — hover/move handlers will not reposition or
+   *  hide it until {@link unpin} is called. Clicks set this; Escape clears it. */
+  pin() {
+    this.pinned = true;
+  }
+  unpin() {
+    this.pinned = false;
+  }
+  isPinned() {
+    return this.pinned;
+  }
+  configureSnippet(config) {
+    this.snippetConfig = { ...this.snippetConfig, ...config };
+  }
+  /**
+   * Fallback popover for Standalone-on-an-unbuilt-page: no source attrs,
+   * no React fibers — so we show DOM info (selector, classes, id) plus a
+   * minimal action set. Keeps Inspekt useful as a pure inspection tool.
+   */
+  showDom(domElement, position, onCopySelector, onCopyHtml, onConsoleLog) {
+    this.container.innerHTML = "";
+    const selector = computeSelector(domElement);
+    const header = document.createElement("div");
+    header.className = "inspekt-popover-header";
+    const eyebrow = document.createElement("div");
+    eyebrow.className = "inspekt-popover-path-dir inspekt-popover-path-dir-row";
+    const eyebrowText = document.createElement("span");
+    eyebrowText.textContent = "DOM element";
+    eyebrow.appendChild(eyebrowText);
+    const infoBadge = document.createElement("span");
+    infoBadge.className = "inspekt-info-badge";
+    infoBadge.setAttribute("tabindex", "0");
+    infoBadge.setAttribute("aria-label", "Why no source data?");
+    infoBadge.innerHTML = `${ICON_INFO}<span class="inspekt-info-badge-label">No source</span>`;
+    attachTooltip(
+      infoBadge,
+      "No Inspekt source data on this page. Build with the Inspekt plugin (Vite, Webpack, Rspack, esbuild) to get editor-jump and file paths.",
+      { root: this.shadowRoot, enterDelay: 100 }
+    );
+    eyebrow.appendChild(infoBadge);
+    const sel = document.createElement("div");
+    sel.className = "inspekt-popover-path-file";
+    sel.textContent = selector;
+    header.appendChild(eyebrow);
+    header.appendChild(sel);
+    this.container.appendChild(header);
+    const actionsBar = document.createElement("div");
+    actionsBar.className = "inspekt-popover-actions";
+    const copyBtn = document.createElement("button");
+    copyBtn.className = "inspekt-popover-action";
+    copyBtn.setAttribute("aria-label", "Copy CSS selector");
+    copyBtn.innerHTML = ICON_COPY;
+    attachTooltip(copyBtn, "Copy CSS selector", {
+      root: this.shadowRoot
+    });
+    copyBtn.addEventListener("click", async (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const ok = await onCopySelector(selector);
+      this.showToast(ok ? "Copied" : "Copy failed");
+      setTimeout(() => this.hide(), 700);
+    });
+    actionsBar.appendChild(copyBtn);
+    const htmlBtn = document.createElement("button");
+    htmlBtn.className = "inspekt-popover-action";
+    htmlBtn.setAttribute("aria-label", "Copy HTML");
+    htmlBtn.innerHTML = ICON_HTML;
+    attachTooltip(htmlBtn, "Copy HTML (outerHTML)", {
+      root: this.shadowRoot
+    });
+    htmlBtn.addEventListener("click", async (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const ok = await onCopyHtml(domElement.outerHTML);
+      this.showToast(ok ? "HTML copied" : "Copy failed");
+      setTimeout(() => this.hide(), 700);
+    });
+    actionsBar.appendChild(htmlBtn);
+    const logBtn = document.createElement("button");
+    logBtn.className = "inspekt-popover-action";
+    logBtn.setAttribute("aria-label", "console.log this element");
+    logBtn.innerHTML = ICON_CONSOLE;
+    attachTooltip(logBtn, "console.log this element", {
+      root: this.shadowRoot
+    });
+    logBtn.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onConsoleLog();
+      this.showToast("Logged to console");
+      setTimeout(() => this.hide(), 700);
+    });
+    actionsBar.appendChild(logBtn);
+    this.container.appendChild(actionsBar);
+    this.positionAt(position.x, position.y);
+    this.container.style.display = "block";
+    this.visible = true;
+  }
+  /** Brief feedback toast attached to the shadow root. */
+  showToast(message) {
+    const existing = this.shadowRoot.querySelector(".inspekt-popover-toast");
+    if (existing) existing.remove();
+    const toast = document.createElement("div");
+    toast.className = "inspekt-popover-toast";
+    toast.textContent = message;
+    this.shadowRoot.appendChild(toast);
+    setTimeout(() => toast.remove(), 1200);
+  }
+  show(element, actions, position) {
+    this.container.innerHTML = "";
+    const header = document.createElement("div");
+    header.className = "inspekt-popover-header";
+    const pathDir = document.createElement("div");
+    pathDir.className = "inspekt-popover-path-dir";
+    const parts = element.filePath.split("/");
+    pathDir.textContent = parts.slice(0, -1).join("/") + "/";
+    const pathFile = document.createElement("div");
+    pathFile.className = "inspekt-popover-path-file";
+    pathFile.textContent = `${parts[parts.length - 1]}:${element.line}`;
+    header.appendChild(pathDir);
+    header.appendChild(pathFile);
+    this.container.appendChild(header);
+    const snippetSection = this.buildSnippetSection(element);
+    this.container.appendChild(snippetSection);
+    const actionsBar = document.createElement("div");
+    actionsBar.className = "inspekt-popover-actions";
+    for (const action of actions) {
+      const btn = document.createElement("button");
+      btn.className = "inspekt-popover-action";
+      btn.setAttribute("aria-label", action.label);
+      btn.innerHTML = action.icon;
+      attachTooltip(btn, action.label, {
+        root: this.shadowRoot
+      });
+      btn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        action.handler(element);
+        this.hide();
+      });
+      actionsBar.appendChild(btn);
+    }
+    this.container.appendChild(actionsBar);
+    this.positionAt(position.x, position.y);
+    this.container.style.display = "block";
+    this.visible = true;
+  }
+  buildSnippetSection(element) {
+    const section = document.createElement("div");
+    section.className = "inspekt-snippet";
+    section.hidden = true;
+    const initialState = this.snippetConfig.defaultExpanded ? "expanded" : "collapsed";
+    section.dataset["state"] = initialState;
+    const toggle = document.createElement("button");
+    toggle.type = "button";
+    toggle.className = "inspekt-snippet-toggle";
+    toggle.textContent = initialState === "collapsed" ? "Show source \u25BE" : "Hide source \u25B4";
+    const body = document.createElement("div");
+    body.className = "inspekt-snippet-body";
+    if (initialState === "collapsed") body.hidden = true;
+    section.appendChild(toggle);
+    section.appendChild(body);
+    void this.resolveAndMountSnippet(section, toggle, body, element, initialState);
+    return section;
+  }
+  async resolveAndMountSnippet(section, toggle, body, element, initialState) {
+    const snippet = await resolveSnippet({
+      filePath: element.filePath,
+      line: element.line,
+      serverUrl: this.snippetConfig.serverUrl,
+      context: this.snippetConfig.context,
+      sourceMapEnabled: this.snippetConfig.sourceMapEnabled,
+      staticSnippets: this.snippetConfig.staticSnippets
+    });
+    if (!snippet) {
+      section.remove();
+      return;
+    }
+    element.snippet = snippet;
+    section.hidden = false;
+    let rendered = false;
+    const expand = () => {
+      section.dataset["state"] = "expanded";
+      body.dataset["state"] = "expanded";
+      body.hidden = false;
+      toggle.textContent = "Hide source \u25B4";
+      if (!rendered) {
+        rendered = true;
+        body.innerHTML = "";
+        body.appendChild(this.renderSnippet(snippet));
+      }
+      requestAnimationFrame(() => {
+        const target = body.querySelector(".inspekt-line-target");
+        target?.scrollIntoView({ block: "center", inline: "nearest" });
+      });
+    };
+    const collapse = () => {
+      section.dataset["state"] = "collapsed";
+      body.dataset["state"] = "collapsed";
+      body.hidden = true;
+      toggle.textContent = "Show source \u25BE";
+    };
+    toggle.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (section.dataset["state"] === "collapsed") expand();
+      else collapse();
+    });
+    if (initialState === "expanded") expand();
+  }
+  renderSnippet(snippet) {
+    const pre = document.createElement("pre");
+    pre.className = "inspekt-snippet-pre";
+    pre.dataset["language"] = snippet.language;
+    const highlighted = tokenizeToLines(snippet.lines.join("\n"), snippet.language);
+    snippet.lines.forEach((rawText, index) => {
+      const lineNumber = snippet.startLine + index;
+      const isTarget = lineNumber === snippet.targetLine;
+      const lineEl = document.createElement("span");
+      lineEl.className = isTarget ? "inspekt-line inspekt-line-target" : "inspekt-line";
+      const num = document.createElement("span");
+      num.className = "inspekt-line-no";
+      num.textContent = String(lineNumber);
+      lineEl.appendChild(num);
+      const code = document.createElement("span");
+      code.className = "inspekt-line-code";
+      const tokens = highlighted[index]?.tokens;
+      if (!tokens || tokens.length === 0) {
+        code.textContent = rawText;
+      } else {
+        for (const tok of tokens) {
+          if (!tok.type) {
+            code.appendChild(document.createTextNode(tok.text));
+          } else {
+            const span = document.createElement("span");
+            span.className = `token ${tok.type}`;
+            span.textContent = tok.text;
+            code.appendChild(span);
+          }
+        }
+      }
+      lineEl.appendChild(code);
+      pre.appendChild(lineEl);
+      pre.appendChild(document.createTextNode("\n"));
+    });
+    return pre;
+  }
+  hide() {
+    this.container.style.display = "none";
+    this.visible = false;
+    this.pinned = false;
+  }
+  isVisible() {
+    return this.visible;
+  }
+  positionAt(x, y) {
+    const padding = 8;
+    const vpWidth = window.innerWidth;
+    const vpHeight = window.innerHeight;
+    this.container.style.display = "block";
+    this.container.style.left = "0px";
+    this.container.style.top = "0px";
+    const rect = this.container.getBoundingClientRect();
+    let left = x;
+    let top = y + 10;
+    if (left + rect.width + padding > vpWidth) {
+      left = vpWidth - rect.width - padding;
+    }
+    if (left < padding) left = padding;
+    if (top + rect.height + padding > vpHeight) {
+      top = y - rect.height - 10;
+    }
+    if (top < padding) top = padding;
+    this.container.style.left = `${left}px`;
+    this.container.style.top = `${top}px`;
+  }
+  destroy() {
+    this.container.remove();
+  }
+};
+function computeSelector(el) {
+  const tag = el.tagName.toLowerCase();
+  if (el.id) return `${tag}#${el.id}`;
+  const classes = Array.from(el.classList).slice(0, 2);
+  if (classes.length) return `${tag}.${classes.join(".")}`;
+  return tag;
+}
+
+// src/overlay/overlay.ts
+var MAX_VISIBLE_BADGES = 200;
+var Overlay = class {
+  constructor(shadowRoot) {
+    this.shadowRoot = shadowRoot;
+    this.container = document.createElement("div");
+    this.container.className = "inspekt-overlay";
+    this.container.style.display = "none";
+    this.shadowRoot.appendChild(this.container);
+  }
+  shadowRoot;
+  badges = [];
+  mutationObserver = null;
+  intersectionObserver = null;
+  debounceTimer = null;
+  container;
+  visible = false;
+  show() {
+    this.visible = true;
+    this.container.style.display = "block";
+    this.scan();
+    this.startObserving();
+  }
+  hide() {
+    this.visible = false;
+    this.container.style.display = "none";
+    this.clear();
+    this.stopObserving();
+  }
+  toggle() {
+    if (this.visible) this.hide();
+    else this.show();
+  }
+  isVisible() {
+    return this.visible;
+  }
+  scan() {
+    this.clear();
+    const elements = document.querySelectorAll(
+      "[data-insp-path], [data-insp-path]"
+    );
+    const detected = new Set(elements);
+    const outermost = [];
+    for (const el of elements) {
+      let parent = el.parentElement;
+      let isNested = false;
+      while (parent) {
+        if (detected.has(parent)) {
+          isNested = true;
+          break;
+        }
+        parent = parent.parentElement;
+      }
+      if (!isNested) outermost.push(el);
+    }
+    const toRender = outermost.slice(0, MAX_VISIBLE_BADGES);
+    this.intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          const badge = this.badges.find((b) => b.element === entry.target);
+          if (!badge) continue;
+          if (entry.isIntersecting) {
+            badge.visible = true;
+            badge.badgeElement.style.display = "block";
+            this.positionBadge(badge.badgeElement, badge.element);
+          } else {
+            badge.visible = false;
+            badge.badgeElement.style.display = "none";
+          }
+        }
+      },
+      { rootMargin: "50px" }
+    );
+    for (const el of toRender) {
+      const attrValue = findSourceAttribute(el);
+      if (!attrValue) continue;
+      const source = parseSourceAttribute(attrValue);
+      if (!source) continue;
+      this.createBadge(el, source.componentName);
+    }
+  }
+  createBadge(element, componentName) {
+    const badge = document.createElement("div");
+    badge.className = "inspekt-badge";
+    badge.textContent = componentName;
+    badge.addEventListener("click", (e) => {
+      e.stopPropagation();
+      element.dispatchEvent(
+        new CustomEvent("inspekt:badge-click", {
+          bubbles: true,
+          detail: { element }
+        })
+      );
+    });
+    badge.addEventListener("mouseenter", () => {
+      element.dispatchEvent(
+        new CustomEvent("inspekt:badge-hover", {
+          bubbles: true,
+          detail: { element }
+        })
+      );
+    });
+    badge.addEventListener("mouseleave", () => {
+      element.dispatchEvent(
+        new CustomEvent("inspekt:badge-leave", {
+          bubbles: true,
+          detail: { element }
+        })
+      );
+    });
+    this.container.appendChild(badge);
+    this.positionBadge(badge, element);
+    const badgeEntry = { element, componentName, badgeElement: badge, visible: true };
+    this.badges.push(badgeEntry);
+    this.intersectionObserver?.observe(element);
+  }
+  positionBadge(badge, target) {
+    const rect = target.getBoundingClientRect();
+    const badgeHeight = 18;
+    const badgeWidth = badge.offsetWidth || 60;
+    const scrollX = window.scrollX;
+    const scrollY = window.scrollY;
+    let left = rect.left + scrollX;
+    let top = rect.top + scrollY - badgeHeight - 2;
+    const vpWidth = window.innerWidth;
+    if (left + badgeWidth > vpWidth + scrollX) {
+      left = vpWidth + scrollX - badgeWidth - 4;
+    }
+    if (left < scrollX + 4) {
+      left = scrollX + 4;
+    }
+    if (top < scrollY) {
+      top = rect.bottom + scrollY + 2;
+    }
+    badge.style.left = `${left}px`;
+    badge.style.top = `${top}px`;
+  }
+  updatePositions() {
+    for (const { badgeElement, element, visible } of this.badges) {
+      if (visible) {
+        this.positionBadge(badgeElement, element);
+      }
+    }
+  }
+  startObserving() {
+    this.mutationObserver = new MutationObserver(() => {
+      if (this.debounceTimer) clearTimeout(this.debounceTimer);
+      this.debounceTimer = setTimeout(() => this.scan(), 100);
+    });
+    this.mutationObserver.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+    window.addEventListener("scroll", this.handleScrollResize, true);
+    window.addEventListener("resize", this.handleScrollResize);
+  }
+  stopObserving() {
+    this.mutationObserver?.disconnect();
+    this.mutationObserver = null;
+    this.intersectionObserver?.disconnect();
+    this.intersectionObserver = null;
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+      this.debounceTimer = null;
+    }
+    window.removeEventListener("scroll", this.handleScrollResize, true);
+    window.removeEventListener("resize", this.handleScrollResize);
+  }
+  handleScrollResize = () => {
+    if (this.debounceTimer) clearTimeout(this.debounceTimer);
+    this.debounceTimer = setTimeout(() => this.updatePositions(), 16);
+  };
+  clear() {
+    this.intersectionObserver?.disconnect();
+    for (const { badgeElement } of this.badges) {
+      badgeElement.remove();
+    }
+    this.badges = [];
+  }
+  destroy() {
+    this.hide();
+    this.container.remove();
+  }
+};
+
+// src/actions/built-in.ts
+var EDITOR_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>`;
+var COPY_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;
+var GITHUB_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg>`;
+var CONSOLE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/></svg>`;
+function createOpenEditorAction(serverUrl, editor, customEditors = []) {
+  return {
+    id: "open-editor",
+    label: "Open in Editor",
+    icon: EDITOR_ICON,
+    handler(element) {
+      const url = `${serverUrl}/__inspekt/open`;
+      const body = JSON.stringify({
+        file: element.filePath,
+        line: element.line,
+        column: element.column,
+        editor
+      });
+      fetch(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body
+      }).catch(() => {
+        const protocol = editorProtocol(editor, element, customEditors);
+        if (protocol) window.open(protocol, "_blank");
+      });
+    }
+  };
+}
+function createCopyPathAction() {
+  return {
+    id: "copy-path",
+    label: "Copy Path",
+    icon: COPY_ICON,
+    handler(element) {
+      const text = `${element.filePath}:${element.line}`;
+      navigator.clipboard.writeText(text).catch(() => {
+        const textarea = document.createElement("textarea");
+        textarea.value = text;
+        textarea.style.position = "fixed";
+        textarea.style.opacity = "0";
+        document.body.appendChild(textarea);
+        textarea.select();
+        document.execCommand("copy");
+        document.body.removeChild(textarea);
+      });
+    }
+  };
+}
+function createOpenGithubAction(repo, branch) {
+  return {
+    id: "open-github",
+    label: "Open on GitHub",
+    icon: GITHUB_ICON,
+    handler(element) {
+      if (!repo) return;
+      const url = `https://github.com/${repo}/blob/${branch}/${element.filePath}#L${element.line}`;
+      window.open(url, "_blank");
+    }
+  };
+}
+function createConsoleLogAction() {
+  return {
+    id: "console-log",
+    label: "Log to Console",
+    icon: CONSOLE_ICON,
+    handler(element) {
+      console.group(`[Inspekt] ${element.componentName}`);
+      console.log("File:", `${element.filePath}:${element.line}:${element.column}`);
+      console.log("Element:", element.domElement);
+      console.log("Tag:", element.tagName);
+      if (element.props) console.log("Props:", element.props);
+      console.groupEnd();
+    }
+  };
+}
+function editorProtocol(editor, element, customEditors = []) {
+  const { filePath, line, column } = element;
+  for (const ce of customEditors) {
+    if (ce.value === editor) {
+      return ce.urlTemplate.replace(/\{file\}/g, encodeURIComponent(filePath)).replace(/\{line\}/g, String(line)).replace(/\{column\}/g, String(column));
+    }
+  }
+  switch (editor) {
+    case "vscode":
+      return `vscode://file/${filePath}:${line}:${column}`;
+    case "vscode-insiders":
+      return `vscode-insiders://file/${filePath}:${line}:${column}`;
+    case "cursor":
+      return `cursor://file/${filePath}:${line}:${column}`;
+    case "windsurf":
+      return `windsurf://file/${filePath}:${line}:${column}`;
+    case "webstorm":
+      return `webstorm://open?file=${filePath}&line=${line}&column=${column}`;
+    case "phpstorm":
+      return `phpstorm://open?file=${filePath}&line=${line}&column=${column}`;
+    case "idea":
+      return `idea://open?file=${filePath}&line=${line}&column=${column}`;
+    case "zed":
+      return `zed://file/${filePath}:${line}:${column}`;
+    case "sublime":
+      return `subl://open?url=file://${filePath}&line=${line}&column=${column}`;
+    // JetBrains family — query-string shape, same as webstorm/phpstorm/idea.
+    case "pycharm":
+      return `pycharm://open?file=${filePath}&line=${line}&column=${column}`;
+    case "rubymine":
+      return `rubymine://open?file=${filePath}&line=${line}&column=${column}`;
+    case "goland":
+      return `goland://open?file=${filePath}&line=${line}&column=${column}`;
+    case "clion":
+      return `clion://open?file=${filePath}&line=${line}&column=${column}`;
+    case "rider":
+      return `rider://open?file=${filePath}&line=${line}&column=${column}`;
+    // VS Code family
+    case "vscodium":
+      return `vscodium://file/${filePath}:${line}:${column}`;
+    // AI editors — VS Code fork URL shape. Trae/Antigravity/Qoder/CodeBuddy
+    // are inferred (vendor docs don't enumerate the file-open scheme); we
+    // surface this in the UI as "(unverified)" so users can test before
+    // committing.
+    case "trae":
+      return `trae://file/${filePath}:${line}:${column}`;
+    case "kiro":
+      return `kiro://file/${filePath}:${line}:${column}`;
+    case "antigravity":
+      return `antigravity://file/${filePath}:${line}:${column}`;
+    case "pearai":
+      return `pearai://file/${filePath}:${line}:${column}`;
+    case "qoder":
+      return `qoder://file/${filePath}:${line}:${column}`;
+    case "codebuddy":
+      return `codebuddy://file/${filePath}:${line}:${column}`;
+    default:
+      return `vscode://file/${filePath}:${line}:${column}`;
+  }
+}
+
+// src/tree-panel/tree-panel.ts
+var TreePanel = class {
+  constructor(shadowRoot, options) {
+    this.shadowRoot = shadowRoot;
+    this.options = options;
+    this.container = document.createElement("div");
+    this.container.className = `inspekt-tree-panel inspekt-tree-${options.position}`;
+    this.container.style.display = "none";
+    this.shadowRoot.appendChild(this.container);
+    this.buildUI();
+  }
+  shadowRoot;
+  options;
+  container;
+  visible = false;
+  searchInput = null;
+  treeContainer = null;
+  filter = "";
+  buildUI() {
+    const header = document.createElement("div");
+    header.className = "inspekt-tree-header";
+    const title = document.createElement("span");
+    title.className = "inspekt-tree-title";
+    title.textContent = "Component Tree";
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "inspekt-tree-close";
+    closeBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`;
+    closeBtn.addEventListener("click", () => this.hide());
+    header.appendChild(title);
+    header.appendChild(closeBtn);
+    this.container.appendChild(header);
+    const searchWrap = document.createElement("div");
+    searchWrap.className = "inspekt-tree-search";
+    this.searchInput = document.createElement("input");
+    this.searchInput.type = "text";
+    this.searchInput.placeholder = "Filter components...";
+    this.searchInput.className = "inspekt-tree-search-input";
+    this.searchInput.addEventListener("input", () => {
+      this.filter = this.searchInput.value.toLowerCase();
+      this.renderCurrentTree();
+    });
+    searchWrap.appendChild(this.searchInput);
+    this.container.appendChild(searchWrap);
+    this.treeContainer = document.createElement("div");
+    this.treeContainer.className = "inspekt-tree-content";
+    this.container.appendChild(this.treeContainer);
+    const resizeHandle = document.createElement("div");
+    resizeHandle.className = `inspekt-tree-resize inspekt-tree-resize-${this.options.position === "right" ? "left" : "right"}`;
+    this.container.appendChild(resizeHandle);
+    this.setupResize(resizeHandle);
+  }
+  currentTree = null;
+  show() {
+    this.visible = true;
+    this.container.style.display = "flex";
+  }
+  hide() {
+    this.visible = false;
+    this.container.style.display = "none";
+  }
+  toggle() {
+    if (this.visible) this.hide();
+    else this.show();
+  }
+  isVisible() {
+    return this.visible;
+  }
+  updateTree(tree) {
+    this.currentTree = tree;
+    this.renderCurrentTree();
+  }
+  selectElement(element) {
+    if (!this.treeContainer) return;
+    const nodes = this.treeContainer.querySelectorAll(".inspekt-tree-node");
+    for (const node of nodes) {
+      node.classList.remove("inspekt-tree-node-selected");
+      const path = node.getAttribute("data-path");
+      if (path === `${element.filePath}:${element.line}`) {
+        node.classList.add("inspekt-tree-node-selected");
+        node.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      }
+    }
+  }
+  renderCurrentTree() {
+    if (!this.treeContainer) return;
+    this.treeContainer.innerHTML = "";
+    if (!this.currentTree) {
+      const empty = document.createElement("div");
+      empty.className = "inspekt-tree-empty";
+      empty.textContent = "No component tree detected";
+      this.treeContainer.appendChild(empty);
+      return;
+    }
+    const fragment = document.createDocumentFragment();
+    this.renderNode(this.currentTree, fragment, 0);
+    this.treeContainer.appendChild(fragment);
+  }
+  renderNode(node, parent, depth) {
+    if (this.filter && !this.matchesFilter(node)) return;
+    const row = document.createElement("div");
+    row.className = "inspekt-tree-node";
+    row.setAttribute("data-path", `${node.filePath ?? ""}:${node.line ?? ""}`);
+    row.style.paddingLeft = `${depth * 16 + 8}px`;
+    const hasChildren = node.children.length > 0;
+    const arrow = document.createElement("span");
+    arrow.className = "inspekt-tree-arrow";
+    if (hasChildren) {
+      arrow.innerHTML = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>`;
+      arrow.classList.add("inspekt-tree-arrow-expanded");
+    }
+    row.appendChild(arrow);
+    const name = document.createElement("span");
+    name.className = "inspekt-tree-name";
+    name.textContent = node.name;
+    row.appendChild(name);
+    if (this.options.showLineNumbers && node.line) {
+      const line = document.createElement("span");
+      line.className = "inspekt-tree-line";
+      line.textContent = `:${node.line}`;
+      row.appendChild(line);
+    }
+    if (this.options.showProps && node.props) {
+      const propsEl = document.createElement("span");
+      propsEl.className = "inspekt-tree-props";
+      const entries = Object.entries(node.props).slice(0, 3);
+      propsEl.textContent = entries.map(([k, v]) => `${k}=${JSON.stringify(v)}`).join(" ");
+      row.appendChild(propsEl);
+    }
+    row.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.options.onSelect(node);
+      if (hasChildren) {
+        const childContainer = row.nextElementSibling;
+        if (childContainer?.classList.contains("inspekt-tree-children")) {
+          const isCollapsed = childContainer.classList.toggle("inspekt-tree-collapsed");
+          arrow.classList.toggle("inspekt-tree-arrow-collapsed", isCollapsed);
+          arrow.classList.toggle("inspekt-tree-arrow-expanded", !isCollapsed);
+        }
+      }
+      this.treeContainer.querySelectorAll(".inspekt-tree-node-selected").forEach((n) => n.classList.remove("inspekt-tree-node-selected"));
+      row.classList.add("inspekt-tree-node-selected");
+    });
+    row.addEventListener("mouseenter", () => this.options.onHover(node));
+    row.addEventListener("mouseleave", () => this.options.onHover(null));
+    parent.appendChild(row);
+    if (hasChildren) {
+      const childContainer = document.createElement("div");
+      childContainer.className = "inspekt-tree-children";
+      for (const child of node.children) {
+        this.renderNode(child, childContainer, depth + 1);
+      }
+      parent.appendChild(childContainer);
+    }
+  }
+  matchesFilter(node) {
+    if (node.name.toLowerCase().includes(this.filter)) return true;
+    return node.children.some((child) => this.matchesFilter(child));
+  }
+  setupResize(handle) {
+    let startX;
+    let startWidth;
+    const isRight = this.options.position === "right";
+    const onMouseMove = (e) => {
+      const dx = e.clientX - startX;
+      const newWidth = isRight ? startWidth - dx : startWidth + dx;
+      this.container.style.width = `${Math.max(200, Math.min(600, newWidth))}px`;
+    };
+    const onMouseUp = () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+      this.container.style.userSelect = "";
+    };
+    handle.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      startX = e.clientX;
+      startWidth = this.container.offsetWidth;
+      this.container.style.userSelect = "none";
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    });
+  }
+  destroy() {
+    this.container.remove();
+  }
+};
+
+// src/adapters/react.ts
+var FIBER_KEY_PREFIX = "__reactFiber$";
+var INTERNAL_KEY_PREFIX = "__reactInternalInstance$";
+function getFiberFromElement(element) {
+  for (const key of Object.keys(element)) {
+    if (key.startsWith(FIBER_KEY_PREFIX) || key.startsWith(INTERNAL_KEY_PREFIX)) {
+      return element[key];
+    }
+  }
+  return null;
+}
+function isUserComponent(fiber) {
+  const tag = fiber["tag"];
+  return tag === 0 || tag === 1 || tag === 11 || tag === 14 || tag === 15;
+}
+function getComponentName(fiber) {
+  const type = fiber["type"];
+  if (!type) return "Unknown";
+  if (typeof type === "function") {
+    return type.displayName ?? type.name ?? "Anonymous";
+  }
+  if (typeof type === "object") {
+    const render = type["render"];
+    if (render) return render.displayName ?? render.name ?? "ForwardRef";
+    const innerType = type["type"];
+    if (innerType) return innerType.displayName ?? innerType.name ?? "Memo";
+  }
+  if (typeof type === "string") return type;
+  return "Unknown";
+}
+function getProps(fiber) {
+  const memoizedProps = fiber["memoizedProps"];
+  if (!memoizedProps) return null;
+  const cleaned = {};
+  for (const [key, value] of Object.entries(memoizedProps)) {
+    if (key === "children") continue;
+    if (typeof value === "function") {
+      cleaned[key] = `[Function: ${value.name || "anonymous"}]`;
+    } else if (typeof value === "object" && value !== null) {
+      cleaned[key] = "[Object]";
+    } else {
+      cleaned[key] = value;
+    }
+  }
+  return Object.keys(cleaned).length > 0 ? cleaned : null;
+}
+function getSourceFromFiber(fiber) {
+  const debugSource = fiber["_debugSource"];
+  if (debugSource) {
+    return {
+      filePath: debugSource["fileName"] ?? "",
+      line: debugSource["lineNumber"] ?? 0,
+      column: debugSource["columnNumber"] ?? 0
+    };
+  }
+  const stateNode = fiber["stateNode"];
+  if (stateNode && stateNode instanceof HTMLElement) {
+    const attr = findSourceAttribute(stateNode);
+    if (attr) {
+      const parsed = parseSourceAttribute(attr);
+      if (parsed) return { filePath: parsed.filePath, line: parsed.line, column: parsed.column };
+    }
+  }
+  return null;
+}
+function fiberToNode(fiber, depth) {
+  if (!isUserComponent(fiber)) return null;
+  const name = getComponentName(fiber);
+  const source = getSourceFromFiber(fiber);
+  const stateNode = fiber["stateNode"];
+  const domElement = stateNode instanceof HTMLElement ? stateNode : findDomElement(fiber);
+  const node = {
+    name,
+    filePath: source?.filePath ?? null,
+    line: source?.line ?? null,
+    column: source?.column ?? null,
+    domElement,
+    props: getProps(fiber),
+    children: [],
+    framework: "react",
+    depth
+  };
+  let child = fiber["child"];
+  while (child) {
+    const childNode = fiberToNode(child, depth + 1);
+    if (childNode) {
+      node.children.push(childNode);
+    } else {
+      const grandchildren = collectUserChildren(child, depth + 1);
+      node.children.push(...grandchildren);
+    }
+    child = child["sibling"];
+  }
+  return node;
+}
+function collectUserChildren(fiber, depth) {
+  const result = [];
+  let child = fiber["child"];
+  while (child) {
+    const node = fiberToNode(child, depth);
+    if (node) {
+      result.push(node);
+    } else {
+      result.push(...collectUserChildren(child, depth));
+    }
+    child = child["sibling"];
+  }
+  return result;
+}
+function findDomElement(fiber) {
+  let current = fiber;
+  while (current) {
+    const stateNode = current["stateNode"];
+    if (stateNode instanceof HTMLElement) return stateNode;
+    current = current["child"];
+  }
+  return null;
+}
+function findRootFiber(container) {
+  for (const key of Object.keys(container)) {
+    if (key.startsWith("__reactContainer$")) {
+      return container[key];
+    }
+  }
+  const root = container["_reactRootContainer"];
+  if (root) {
+    const internalRoot = root["_internalRoot"];
+    if (internalRoot) {
+      return internalRoot["current"];
+    }
+  }
+  return null;
+}
+var reactAdapter = {
+  name: "react",
+  detect() {
+    const root = document.getElementById("root") ?? document.getElementById("app") ?? document.querySelector("[data-reactroot]");
+    if (!root) return false;
+    for (const key of Object.keys(root)) {
+      if (key.startsWith("__reactContainer$") || key.startsWith(FIBER_KEY_PREFIX) || key.startsWith(INTERNAL_KEY_PREFIX)) {
+        return true;
+      }
+    }
+    return !!root["_reactRootContainer"];
+  },
+  getComponentTree(root) {
+    const rootFiber = findRootFiber(root);
+    if (!rootFiber) return null;
+    const appFiber = rootFiber["child"];
+    if (!appFiber) return null;
+    return fiberToNode(appFiber, 0);
+  },
+  getComponentAtElement(element) {
+    const fiber = getFiberFromElement(element);
+    if (!fiber) return null;
+    let current = fiber;
+    while (current) {
+      if (isUserComponent(current)) {
+        return fiberToNode(current, 0);
+      }
+      current = current["return"];
+    }
+    return null;
+  },
+  getAncestors(element) {
+    const fiber = getFiberFromElement(element);
+    if (!fiber) return [];
+    const ancestors = [];
+    let current = fiber["return"];
+    while (current) {
+      if (isUserComponent(current)) {
+        const node = fiberToNode(current, 0);
+        if (node) {
+          node.children = [];
+          ancestors.push(node);
+        }
+      }
+      current = current["return"];
+    }
+    return ancestors;
+  }
+};
+
+// src/adapters/vue.ts
+var VUE_KEY = "__vue__";
+var VUE3_KEY = "__vue_app__";
+var VUE_PARENT_KEY = "__vueParentComponent";
+function getVueInstance(element) {
+  const vue3 = element[VUE_PARENT_KEY];
+  if (vue3) return vue3;
+  const vue2 = element[VUE_KEY];
+  if (vue2) return vue2;
+  return null;
+}
+function getComponentName2(instance) {
+  if (instance.type) {
+    return instance.type.name ?? instance.type.__name ?? "Anonymous";
+  }
+  if (instance.$options) {
+    return instance.$options.name ?? instance.$options._componentTag ?? "Anonymous";
+  }
+  return "Unknown";
+}
+function getFilePath(instance) {
+  if (instance.type?.__file) return instance.type.__file;
+  if (instance.$options?.__file) return instance.$options.__file;
+  return null;
+}
+function getElement(instance) {
+  if (instance.subTree?.el instanceof HTMLElement) return instance.subTree.el;
+  if (instance.$el instanceof HTMLElement) return instance.$el;
+  return null;
+}
+function getProps2(instance) {
+  const raw = instance.props ?? instance.$props;
+  if (!raw || Object.keys(raw).length === 0) return null;
+  const cleaned = {};
+  for (const [key, value] of Object.entries(raw)) {
+    if (typeof value === "function") {
+      cleaned[key] = `[Function]`;
+    } else if (typeof value === "object" && value !== null) {
+      cleaned[key] = "[Object]";
+    } else {
+      cleaned[key] = value;
+    }
+  }
+  return cleaned;
+}
+function instanceToNode(instance, depth) {
+  const name = getComponentName2(instance);
+  const file = getFilePath(instance);
+  const el = getElement(instance);
+  let filePath = file;
+  let line = null;
+  if (el) {
+    const attr = findSourceAttribute(el);
+    if (attr) {
+      const source = parseSourceAttribute(attr);
+      if (source) {
+        filePath = source.filePath;
+        line = source.line;
+      }
+    }
+  }
+  return {
+    name,
+    filePath,
+    line,
+    column: null,
+    domElement: el,
+    props: getProps2(instance),
+    children: [],
+    framework: "vue",
+    depth
+  };
+}
+var vueAdapter = {
+  name: "vue",
+  detect() {
+    const root = document.getElementById("app") ?? document.getElementById("root");
+    if (!root) return false;
+    return !!(root[VUE3_KEY] || root[VUE_KEY]);
+  },
+  getComponentTree(root) {
+    const rootNode = {
+      name: "App",
+      filePath: null,
+      line: null,
+      column: null,
+      domElement: root,
+      props: null,
+      children: [],
+      framework: "vue",
+      depth: 0
+    };
+    function walkDOM(el, parent, depth) {
+      for (const child of Array.from(el.children)) {
+        if (!(child instanceof HTMLElement)) continue;
+        const instance = getVueInstance(child);
+        if (instance) {
+          const node = instanceToNode(instance, depth);
+          parent.children.push(node);
+          walkDOM(child, node, depth + 1);
+        } else {
+          walkDOM(child, parent, depth);
+        }
+      }
+    }
+    walkDOM(root, rootNode, 1);
+    return rootNode.children.length > 0 ? rootNode : null;
+  },
+  getComponentAtElement(element) {
+    const instance = getVueInstance(element);
+    if (!instance) return null;
+    return instanceToNode(instance, 0);
+  },
+  getAncestors(element) {
+    const ancestors = [];
+    let instance = getVueInstance(element);
+    while (instance) {
+      const parent = instance.parent ?? instance.$parent;
+      if (parent) {
+        ancestors.push(instanceToNode(parent, 0));
+      }
+      instance = parent ?? null;
+    }
+    return ancestors;
+  }
+};
+
+// src/adapters/svelte.ts
+var SVELTE_CONTEXT_KEY = "__svelte_meta";
+function getSvelteContext(element) {
+  return element[SVELTE_CONTEXT_KEY];
+}
+function getComponentNameFromFile(file) {
+  const parts = file.split("/");
+  const filename = parts[parts.length - 1] ?? "";
+  return filename.replace(/\.svelte$/, "");
+}
+var svelteAdapter = {
+  name: "svelte",
+  detect() {
+    return document.querySelector(`[class*="svelte-"]`) !== null || document.querySelector("[data-svelte-h]") !== null;
+  },
+  getComponentTree(root) {
+    const rootNode = {
+      name: "App",
+      filePath: null,
+      line: null,
+      column: null,
+      domElement: root,
+      props: null,
+      children: [],
+      framework: "svelte",
+      depth: 0
+    };
+    function walkDOM(el, parent, depth) {
+      for (const child of Array.from(el.children)) {
+        if (!(child instanceof HTMLElement)) continue;
+        const attr = findSourceAttribute(child);
+        if (attr) {
+          const source = parseSourceAttribute(attr);
+          if (source) {
+            const node = {
+              name: source.componentName,
+              filePath: source.filePath,
+              line: source.line,
+              column: source.column,
+              domElement: child,
+              props: null,
+              children: [],
+              framework: "svelte",
+              depth
+            };
+            parent.children.push(node);
+            walkDOM(child, node, depth + 1);
+            continue;
+          }
+        }
+        const ctx = getSvelteContext(child);
+        if (ctx?.loc?.file) {
+          const node = {
+            name: getComponentNameFromFile(ctx.loc.file),
+            filePath: ctx.loc.file,
+            line: ctx.loc.line ?? null,
+            column: ctx.loc.column ?? null,
+            domElement: child,
+            props: null,
+            children: [],
+            framework: "svelte",
+            depth
+          };
+          parent.children.push(node);
+          walkDOM(child, node, depth + 1);
+          continue;
+        }
+        walkDOM(child, parent, depth);
+      }
+    }
+    walkDOM(root, rootNode, 1);
+    return rootNode.children.length > 0 ? rootNode : null;
+  },
+  getComponentAtElement(element) {
+    const attr = findSourceAttribute(element);
+    if (attr) {
+      const source = parseSourceAttribute(attr);
+      if (source) {
+        return {
+          name: source.componentName,
+          filePath: source.filePath,
+          line: source.line,
+          column: source.column,
+          domElement: element,
+          props: null,
+          children: [],
+          framework: "svelte",
+          depth: 0
+        };
+      }
+    }
+    const ctx = getSvelteContext(element);
+    if (ctx?.loc?.file) {
+      return {
+        name: getComponentNameFromFile(ctx.loc.file),
+        filePath: ctx.loc.file,
+        line: ctx.loc.line ?? null,
+        column: ctx.loc.column ?? null,
+        domElement: element,
+        props: null,
+        children: [],
+        framework: "svelte",
+        depth: 0
+      };
+    }
+    return null;
+  },
+  getAncestors(element) {
+    const ancestors = [];
+    let current = element.parentElement;
+    while (current) {
+      const node = this.getComponentAtElement(current);
+      if (node) ancestors.push(node);
+      current = current.parentElement;
+    }
+    return ancestors;
+  }
+};
+
+// src/adapters/solid.ts
+var SOLID_DEV_KEY = "_$owner";
+function getSolidOwner(element) {
+  return element[SOLID_DEV_KEY];
+}
+var solidAdapter = {
+  name: "solid",
+  detect() {
+    return document.querySelector("[data-hk]") !== null || !!document["_$HY"];
+  },
+  getComponentTree(root) {
+    const rootNode = {
+      name: "App",
+      filePath: null,
+      line: null,
+      column: null,
+      domElement: root,
+      props: null,
+      children: [],
+      framework: "solid",
+      depth: 0
+    };
+    function walkDOM(el, parent, depth) {
+      for (const child of Array.from(el.children)) {
+        if (!(child instanceof HTMLElement)) continue;
+        const attr = findSourceAttribute(child);
+        if (attr) {
+          const source = parseSourceAttribute(attr);
+          if (source) {
+            const node = {
+              name: source.componentName,
+              filePath: source.filePath,
+              line: source.line,
+              column: source.column,
+              domElement: child,
+              props: null,
+              children: [],
+              framework: "solid",
+              depth
+            };
+            parent.children.push(node);
+            walkDOM(child, node, depth + 1);
+            continue;
+          }
+        }
+        const owner = getSolidOwner(child);
+        if (owner?.componentName || owner?.name) {
+          const node = {
+            name: owner.componentName ?? owner.name ?? "Component",
+            filePath: owner.sourceMap?.file ?? null,
+            line: owner.sourceMap?.line ?? null,
+            column: owner.sourceMap?.column ?? null,
+            domElement: child,
+            props: null,
+            children: [],
+            framework: "solid",
+            depth
+          };
+          parent.children.push(node);
+          walkDOM(child, node, depth + 1);
+          continue;
+        }
+        walkDOM(child, parent, depth);
+      }
+    }
+    walkDOM(root, rootNode, 1);
+    return rootNode.children.length > 0 ? rootNode : null;
+  },
+  getComponentAtElement(element) {
+    const attr = findSourceAttribute(element);
+    if (attr) {
+      const source = parseSourceAttribute(attr);
+      if (source) {
+        return {
+          name: source.componentName,
+          filePath: source.filePath,
+          line: source.line,
+          column: source.column,
+          domElement: element,
+          props: null,
+          children: [],
+          framework: "solid",
+          depth: 0
+        };
+      }
+    }
+    const owner = getSolidOwner(element);
+    if (owner?.componentName || owner?.name) {
+      return {
+        name: owner.componentName ?? owner.name ?? "Component",
+        filePath: owner.sourceMap?.file ?? null,
+        line: owner.sourceMap?.line ?? null,
+        column: owner.sourceMap?.column ?? null,
+        domElement: element,
+        props: null,
+        children: [],
+        framework: "solid",
+        depth: 0
+      };
+    }
+    return null;
+  },
+  getAncestors(element) {
+    const ancestors = [];
+    let current = element.parentElement;
+    while (current) {
+      const node = this.getComponentAtElement(current);
+      if (node) ancestors.push(node);
+      current = current.parentElement;
+    }
+    return ancestors;
+  }
+};
+
+// src/adapters/generic.ts
+function buildTreeFromDOM(element, depth) {
+  const nodes = [];
+  for (const child of Array.from(element.children)) {
+    if (!(child instanceof HTMLElement)) continue;
+    if (child.tagName === "INSPEKT-ROOT") continue;
+    if (child.tagName === "SCRIPT" || child.tagName === "STYLE") continue;
+    const attr = findSourceAttribute(child);
+    if (attr) {
+      const source = parseSourceAttribute(attr);
+      if (source) {
+        const node = {
+          name: source.componentName,
+          filePath: source.filePath,
+          line: source.line,
+          column: source.column,
+          domElement: child,
+          props: null,
+          children: buildTreeFromDOM(child, depth + 1),
+          framework: "unknown",
+          depth
+        };
+        nodes.push(node);
+        continue;
+      }
+    }
+    nodes.push(...buildTreeFromDOM(child, depth));
+  }
+  return nodes;
+}
+var genericAdapter = {
+  name: "generic",
+  detect() {
+    return document.querySelector("[data-insp-path], [data-insp-path]") !== null;
+  },
+  getComponentTree(root) {
+    const children = buildTreeFromDOM(root, 1);
+    if (children.length === 0) return null;
+    return {
+      name: "Root",
+      filePath: null,
+      line: null,
+      column: null,
+      domElement: root,
+      props: null,
+      children,
+      framework: "unknown",
+      depth: 0
+    };
+  },
+  getComponentAtElement(element) {
+    const attr = findSourceAttribute(element);
+    if (!attr) return null;
+    const source = parseSourceAttribute(attr);
+    if (!source) return null;
+    return {
+      name: source.componentName,
+      filePath: source.filePath,
+      line: source.line,
+      column: source.column,
+      domElement: element,
+      props: null,
+      children: buildTreeFromDOM(element, 1),
+      framework: "unknown",
+      depth: 0
+    };
+  },
+  getAncestors(element) {
+    const ancestors = [];
+    let current = element.parentElement;
+    while (current) {
+      const attr = findSourceAttribute(current);
+      if (attr) {
+        const source = parseSourceAttribute(attr);
+        if (source) {
+          ancestors.push({
+            name: source.componentName,
+            filePath: source.filePath,
+            line: source.line,
+            column: source.column,
+            domElement: current,
+            props: null,
+            children: [],
+            framework: "unknown",
+            depth: 0
+          });
+        }
+      }
+      current = current.parentElement;
+    }
+    return ancestors;
+  }
+};
+
+// src/adapters/index.ts
+var adapters = [
+  reactAdapter,
+  vueAdapter,
+  svelteAdapter,
+  solidAdapter
+];
+function detectAdapter() {
+  for (const adapter of adapters) {
+    if (adapter.detect()) return adapter;
+  }
+  return genericAdapter;
+}
+
+// src/styles.ts
+var STYLES = (
+  /* css */
+  `
+  :host {
+    all: initial;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    z-index: 2147483647;
+    pointer-events: none;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: 13px;
+    line-height: 1.4;
+  }
+
+  *, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  /* Theme variables */
+  :host {
+    --dl-bg: #1e1e2e;
+    --dl-bg-hover: #313244;
+    --dl-text: #cdd6f4;
+    --dl-text-dim: #a6adc8;
+    --dl-border: #45475a;
+    --dl-accent: #3b82f6;
+    --dl-accent-dim: #3b82f640;
+    --dl-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+    --dl-radius: 8px;
+  }
+
+  :host(.inspekt-light) {
+    --dl-bg: #ffffff;
+    --dl-bg-hover: #f1f5f9;
+    --dl-text: #1e293b;
+    --dl-text-dim: #64748b;
+    --dl-border: #e2e8f0;
+    --dl-accent: #3b82f6;
+    --dl-accent-dim: #3b82f620;
+    --dl-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  }
+
+  /* Popover */
+  .inspekt-popover {
+    position: fixed;
+    background: var(--dl-bg);
+    border: 1px solid var(--dl-border);
+    border-radius: var(--dl-radius);
+    box-shadow: var(--dl-shadow);
+    color: var(--dl-text);
+    min-width: 200px;
+    max-width: 400px;
+    overflow: hidden;
+    pointer-events: auto;
+    z-index: 2147483647;
+    animation: inspekt-fade-in 0.15s ease;
+  }
+
+  @keyframes inspekt-fade-in {
+    from { opacity: 0; transform: translateY(4px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  .inspekt-popover-header {
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--dl-border);
+  }
+
+  .inspekt-popover-path-dir {
+    font-size: 11px;
+    color: var(--dl-text-dim);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .inspekt-popover-path-file {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--dl-text);
+  }
+
+  .inspekt-popover-actions {
+    display: flex;
+    gap: 2px;
+    padding: 6px 8px;
+  }
+
+  /* Snippet section */
+  .inspekt-snippet {
+    border-bottom: 1px solid var(--dl-border);
+  }
+
+  .inspekt-snippet-toggle {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 6px 12px;
+    background: transparent;
+    border: none;
+    color: var(--dl-text-dim);
+    font-size: 11px;
+    font-weight: 500;
+    cursor: pointer;
+    font-family: inherit;
+    text-align: left;
+    pointer-events: auto;
+  }
+
+  .inspekt-snippet-toggle:hover {
+    background: var(--dl-bg-hover);
+    color: var(--dl-text);
+  }
+
+  .inspekt-snippet-body {
+    padding: 0;
+    max-width: 600px;
+    max-height: 240px;
+    overflow: auto;
+    border-top: 1px solid var(--dl-border);
+  }
+
+  .inspekt-snippet-pre {
+    margin: 0;
+    padding: 8px 0;
+    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace;
+    font-size: 12px;
+    line-height: 1.5;
+    color: var(--dl-text);
+    background: transparent;
+    white-space: pre;
+    tab-size: 2;
+  }
+
+  .inspekt-line {
+    display: inline-flex;
+    align-items: baseline;
+    padding: 0 12px 0 0;
+  }
+
+  .inspekt-line-target {
+    background: var(--dl-accent-dim);
+    border-left: 2px solid var(--dl-accent);
+    padding-left: 10px;
+  }
+
+  .inspekt-line:not(.inspekt-line-target) {
+    padding-left: 12px;
+  }
+
+  .inspekt-line-no {
+    display: inline-block;
+    min-width: 30px;
+    text-align: right;
+    color: var(--dl-text-dim);
+    margin-right: 10px;
+    user-select: none;
+    flex-shrink: 0;
+  }
+
+  .inspekt-line-code {
+    white-space: pre;
+  }
+
+  .inspekt-snippet-skeleton,
+  .inspekt-snippet-empty {
+    padding: 12px;
+    font-size: 11px;
+    color: var(--dl-text-dim);
+    text-align: center;
+    font-style: italic;
+  }
+
+  .inspekt-popover-action {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--dl-text-dim);
+    cursor: pointer;
+    transition: all 0.15s ease;
+    pointer-events: auto;
+  }
+
+  .inspekt-popover-action:hover {
+    background: var(--dl-bg-hover);
+    color: var(--dl-text);
+  }
+
+  .inspekt-popover-action:active {
+    transform: scale(0.92);
+  }
+
+  .inspekt-popover-action svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  /* Popover toast \u2014 brief feedback after Copy / console.log actions */
+  .inspekt-popover-toast {
+    position: fixed;
+    bottom: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 6px 14px;
+    background: var(--dl-text);
+    color: var(--dl-bg);
+    font: 500 12px/1.4 inherit;
+    border-radius: 999px;
+    box-shadow: var(--dl-shadow);
+    pointer-events: none;
+    z-index: 2147483647;
+    animation: inspekt-toast 1.2s ease;
+  }
+  @keyframes inspekt-toast {
+    0% { opacity: 0; transform: translate(-50%, 6px); }
+    15%, 80% { opacity: 1; transform: translate(-50%, 0); }
+    100% { opacity: 0; transform: translate(-50%, 0); }
+  }
+
+  /* Info badge \u2014 small pill rendered in the DOM-fallback popover header.
+     Shows an info icon + "No source" label so users see it without hover. */
+  .inspekt-info-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 8px 2px 6px;
+    border-radius: 999px;
+    background: var(--dl-bg-hover);
+    color: var(--dl-text-dim);
+    font-size: 10.5px;
+    font-weight: 500;
+    letter-spacing: 0.01em;
+    line-height: 1.4;
+    cursor: help;
+    flex-shrink: 0;
+    margin-left: 8px;
+    border: 1px solid var(--dl-border);
+    text-transform: none;
+  }
+  .inspekt-info-badge:hover,
+  .inspekt-info-badge:focus-visible {
+    color: var(--dl-text);
+    border-color: var(--dl-accent);
+    outline: none;
+  }
+  .inspekt-info-badge svg { display: block; }
+  .inspekt-info-badge-label {
+    white-space: nowrap;
+  }
+  .inspekt-popover-path-dir-row {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  /* Tooltip (replaces native title="") */
+  .inspekt-tooltip {
+    position: fixed;
+    max-width: 280px;
+    padding: 6px 10px;
+    background: var(--dl-bg);
+    color: var(--dl-text);
+    border: 1px solid var(--dl-border);
+    border-radius: 6px;
+    box-shadow: var(--dl-shadow);
+    font-size: 12px;
+    line-height: 1.4;
+    pointer-events: none;
+    z-index: 2147483647;
+    opacity: 0;
+    animation: inspekt-tt-in 120ms ease-out forwards;
+  }
+  .inspekt-tooltip--rich {
+    pointer-events: auto;
+    max-width: 320px;
+    padding: 10px 12px;
+  }
+  @keyframes inspekt-tt-in {
+    from { opacity: 0; transform: translateY(2px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+
+  /* Wider source snippet body when accordion is expanded (1.5\xD7 collapsed) */
+  .inspekt-snippet-body[data-state='expanded'] {
+    max-width: 900px;
+  }
+
+  /* Prism syntax tokens \u2014 neutral palette mapped to theme variables. */
+  .inspekt-snippet-pre .token.comment,
+  .inspekt-snippet-pre .token.prolog,
+  .inspekt-snippet-pre .token.doctype,
+  .inspekt-snippet-pre .token.cdata { color: var(--dl-text-dim); font-style: italic; }
+  .inspekt-snippet-pre .token.punctuation { color: var(--dl-text-dim); }
+  .inspekt-snippet-pre .token.namespace { opacity: 0.7; }
+  .inspekt-snippet-pre .token.property,
+  .inspekt-snippet-pre .token.tag,
+  .inspekt-snippet-pre .token.constant,
+  .inspekt-snippet-pre .token.symbol,
+  .inspekt-snippet-pre .token.deleted { color: #e06c75; }
+  .inspekt-snippet-pre .token.boolean,
+  .inspekt-snippet-pre .token.number { color: #d19a66; }
+  .inspekt-snippet-pre .token.selector,
+  .inspekt-snippet-pre .token.attr-name,
+  .inspekt-snippet-pre .token.string,
+  .inspekt-snippet-pre .token.char,
+  .inspekt-snippet-pre .token.builtin,
+  .inspekt-snippet-pre .token.inserted { color: #98c379; }
+  .inspekt-snippet-pre .token.operator,
+  .inspekt-snippet-pre .token.entity,
+  .inspekt-snippet-pre .token.url,
+  .inspekt-snippet-pre .language-css .token.string,
+  .inspekt-snippet-pre .style .token.string { color: #56b6c2; }
+  .inspekt-snippet-pre .token.atrule,
+  .inspekt-snippet-pre .token.attr-value,
+  .inspekt-snippet-pre .token.keyword { color: #c678dd; }
+  .inspekt-snippet-pre .token.function,
+  .inspekt-snippet-pre .token.class-name { color: #61afef; }
+  .inspekt-snippet-pre .token.regex,
+  .inspekt-snippet-pre .token.important,
+  .inspekt-snippet-pre .token.variable { color: #d19a66; }
+  .inspekt-snippet-pre .token.important,
+  .inspekt-snippet-pre .token.bold { font-weight: bold; }
+  .inspekt-snippet-pre .token.italic { font-style: italic; }
+
+  /* Overlay badges */
+  .inspekt-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+  }
+
+  .inspekt-badge {
+    position: absolute;
+    background: var(--dl-accent);
+    color: #fff;
+    font-size: 10px;
+    font-weight: 600;
+    padding: 1px 6px;
+    border-radius: 4px;
+    white-space: nowrap;
+    pointer-events: auto;
+    cursor: pointer;
+    opacity: 0.9;
+    transition: opacity 0.15s ease;
+    z-index: 2147483646;
+  }
+
+  .inspekt-badge:hover {
+    opacity: 1;
+  }
+
+  /* Pulse animation for selected highlight */
+  @keyframes inspekt-pulse {
+    0%, 100% { box-shadow: 0 0 0 0 var(--dl-accent-dim); }
+    50% { box-shadow: 0 0 8px 4px var(--dl-accent-dim); }
+  }
+
+  /* Tree Panel */
+  .inspekt-tree-panel {
+    position: fixed;
+    top: 0;
+    height: 100vh;
+    width: 320px;
+    background: var(--dl-bg);
+    border-left: 1px solid var(--dl-border);
+    color: var(--dl-text);
+    display: flex;
+    flex-direction: column;
+    pointer-events: auto;
+    z-index: 2147483647;
+    box-shadow: var(--dl-shadow);
+    animation: inspekt-slide-in 0.2s ease;
+  }
+
+  .inspekt-tree-right { right: 0; border-left: 1px solid var(--dl-border); border-right: none; }
+  .inspekt-tree-left { left: 0; border-right: 1px solid var(--dl-border); border-left: none; }
+
+  @keyframes inspekt-slide-in {
+    from { opacity: 0; transform: translateX(20px); }
+    to { opacity: 1; transform: translateX(0); }
+  }
+
+  .inspekt-tree-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--dl-border);
+    flex-shrink: 0;
+  }
+
+  .inspekt-tree-title {
+    font-weight: 600;
+    font-size: 13px;
+  }
+
+  .inspekt-tree-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--dl-text-dim);
+    cursor: pointer;
+  }
+
+  .inspekt-tree-close:hover {
+    background: var(--dl-bg-hover);
+    color: var(--dl-text);
+  }
+
+  .inspekt-tree-search {
+    padding: 6px 12px;
+    border-bottom: 1px solid var(--dl-border);
+    flex-shrink: 0;
+  }
+
+  .inspekt-tree-search-input {
+    width: 100%;
+    padding: 5px 8px;
+    border: 1px solid var(--dl-border);
+    border-radius: 6px;
+    background: var(--dl-bg-hover);
+    color: var(--dl-text);
+    font-size: 12px;
+    outline: none;
+    font-family: inherit;
+  }
+
+  .inspekt-tree-search-input:focus {
+    border-color: var(--dl-accent);
+  }
+
+  .inspekt-tree-search-input::placeholder {
+    color: var(--dl-text-dim);
+  }
+
+  .inspekt-tree-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 4px 0;
+    scrollbar-width: thin;
+    scrollbar-color: var(--dl-border) transparent;
+  }
+
+  .inspekt-tree-content::-webkit-scrollbar { width: 6px; }
+  .inspekt-tree-content::-webkit-scrollbar-thumb { background: var(--dl-border); border-radius: 3px; }
+
+  .inspekt-tree-node {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 8px;
+    cursor: pointer;
+    min-height: 26px;
+    transition: background 0.1s ease;
+  }
+
+  .inspekt-tree-node:hover {
+    background: var(--dl-bg-hover);
+  }
+
+  .inspekt-tree-node-selected {
+    background: var(--dl-accent-dim) !important;
+  }
+
+  .inspekt-tree-arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+    transition: transform 0.15s ease;
+  }
+
+  .inspekt-tree-arrow svg { color: var(--dl-text-dim); }
+
+  .inspekt-tree-arrow-expanded { transform: rotate(0deg); }
+  .inspekt-tree-arrow-collapsed { transform: rotate(-90deg); }
+
+  .inspekt-tree-name {
+    font-size: 12px;
+    font-weight: 500;
+    color: #c792ea;
+  }
+
+  :host(.inspekt-light) .inspekt-tree-name {
+    color: #7c3aed;
+  }
+
+  .inspekt-tree-line {
+    font-size: 11px;
+    color: var(--dl-text-dim);
+    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace;
+  }
+
+  .inspekt-tree-props {
+    font-size: 10px;
+    color: var(--dl-text-dim);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 120px;
+    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace;
+  }
+
+  .inspekt-tree-children.inspekt-tree-collapsed {
+    display: none;
+  }
+
+  .inspekt-tree-empty {
+    padding: 16px;
+    text-align: center;
+    color: var(--dl-text-dim);
+    font-size: 12px;
+  }
+
+  /* Resize handle */
+  .inspekt-tree-resize {
+    position: absolute;
+    top: 0;
+    width: 4px;
+    height: 100%;
+    cursor: col-resize;
+  }
+
+  .inspekt-tree-resize-left { left: 0; }
+  .inspekt-tree-resize-right { right: 0; }
+
+  .inspekt-tree-resize:hover {
+    background: var(--dl-accent);
+    opacity: 0.5;
+  }
+
+  /* Bounding-box overlay \u2014 view mode & "Show bounding boxes" toggle */
+  .inspekt-bbox-layer {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 2147483646;
+  }
+  .inspekt-bbox {
+    position: fixed;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    border: 1.5px dashed var(--dl-accent, oklch(0.62 0.18 285));
+    background: oklch(0.62 0.18 285 / 0.05);
+    pointer-events: none;
+    will-change: transform, width, height;
+    border-radius: 2px;
+  }
+  .inspekt-bbox-label {
+    position: absolute;
+    top: -18px;
+    left: 0;
+    font: 500 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    color: #fff;
+    background: var(--dl-accent, oklch(0.55 0.18 285));
+    padding: 2px 5px;
+    border-radius: 3px 3px 3px 0;
+    white-space: nowrap;
+    pointer-events: none;
+    max-width: 280px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`
+);
+
+// src/components/rich-select.ts
+import {
+  autoUpdate as autoUpdate2,
+  computePosition as computePosition2,
+  flip as flip2,
+  offset as offset2,
+  shift as shift2,
+  size
+} from "@floating-ui/dom";
+function createRichSelect(opts) {
+  let current = opts.value;
+  let listEl = null;
+  let activeIndex = -1;
+  let cleanupAutoUpdate = null;
+  const tooltipDetachers = [];
+  const trigger = document.createElement("button");
+  trigger.type = "button";
+  trigger.className = "inspekt-rich-select-trigger";
+  trigger.setAttribute("aria-haspopup", "listbox");
+  trigger.setAttribute("aria-expanded", "false");
+  if (opts.ariaLabel) trigger.setAttribute("aria-label", opts.ariaLabel);
+  opts.anchor.replaceChildren(trigger);
+  renderTrigger();
+  trigger.addEventListener("click", (e) => {
+    e.preventDefault();
+    if (listEl) close();
+    else open();
+  });
+  trigger.addEventListener("keydown", (e) => {
+    if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      open();
+    }
+  });
+  function renderTrigger() {
+    trigger.innerHTML = "";
+    const item = opts.items.find((i) => i.value === current) ?? opts.items[0];
+    if (!item) return;
+    trigger.appendChild(renderIcon(item));
+    const labelEl = document.createElement("span");
+    labelEl.className = "rs-label";
+    labelEl.textContent = item.label;
+    trigger.appendChild(labelEl);
+  }
+  function renderIcon(item) {
+    if (item.icon) {
+      if (/^<svg|^<\?xml/.test(item.icon.trim())) {
+        const wrap = document.createElement("span");
+        wrap.className = "rs-icon";
+        wrap.innerHTML = item.icon;
+        return wrap;
+      }
+      const img = document.createElement("img");
+      img.className = "rs-icon";
+      img.src = item.icon;
+      img.alt = "";
+      return img;
+    }
+    const tile = document.createElement("span");
+    tile.className = "inspekt-rich-select-item-letter";
+    tile.textContent = (item.label[0] ?? "?").toUpperCase();
+    return tile;
+  }
+  function open() {
+    if (listEl) return;
+    listEl = document.createElement("div");
+    listEl.className = "inspekt-rich-select-list";
+    listEl.setAttribute("role", "listbox");
+    let lastGroup;
+    opts.items.forEach((item, i) => {
+      if (item.group && item.group !== lastGroup) {
+        const header = document.createElement("div");
+        header.className = "inspekt-rich-select-group-header";
+        header.setAttribute("role", "presentation");
+        header.textContent = item.group;
+        listEl.appendChild(header);
+      }
+      lastGroup = item.group;
+      const row = document.createElement("div");
+      row.className = "inspekt-rich-select-item";
+      if (item.action) row.classList.add("inspekt-rich-select-item-action");
+      row.setAttribute("role", "option");
+      row.dataset["value"] = item.value;
+      if (!item.action && item.value === current) row.dataset["selected"] = "true";
+      row.appendChild(renderIcon(item));
+      const body = document.createElement("div");
+      body.className = "inspekt-rich-select-item-body";
+      const labelEl = document.createElement("span");
+      labelEl.className = "inspekt-rich-select-item-label";
+      labelEl.textContent = item.label;
+      body.appendChild(labelEl);
+      if (item.hint) {
+        const hintEl = document.createElement("span");
+        hintEl.className = "inspekt-rich-select-item-hint";
+        hintEl.textContent = item.hint;
+        body.appendChild(hintEl);
+      }
+      row.appendChild(body);
+      row.addEventListener("mouseenter", () => setActive(i));
+      row.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (item.action) {
+          close();
+          item.action();
+          return;
+        }
+        select(item.value);
+      });
+      if (item.popover) {
+        tooltipDetachers.push(
+          attachTooltip(row, item.popover(), {
+            enterDelay: opts.popoverDelay ?? 50,
+            leaveDelay: 200,
+            placement: opts.popoverPlacement ?? "top"
+          })
+        );
+      }
+      listEl.appendChild(row);
+    });
+    listEl.style.position = "fixed";
+    listEl.style.top = "0";
+    listEl.style.left = "0";
+    document.body.appendChild(listEl);
+    cleanupAutoUpdate = autoUpdate2(trigger, listEl, updateListPosition);
+    trigger.setAttribute("aria-expanded", "true");
+    setActive(opts.items.findIndex((i) => i.value === current));
+    document.addEventListener("mousedown", onOutside, true);
+    document.addEventListener("keydown", onKey, true);
+  }
+  function close() {
+    if (!listEl) return;
+    for (const d of tooltipDetachers) d();
+    tooltipDetachers.length = 0;
+    cleanupAutoUpdate?.();
+    cleanupAutoUpdate = null;
+    listEl.remove();
+    listEl = null;
+    trigger.setAttribute("aria-expanded", "false");
+    document.removeEventListener("mousedown", onOutside, true);
+    document.removeEventListener("keydown", onKey, true);
+  }
+  function updateListPosition() {
+    if (!listEl) return;
+    const list = listEl;
+    const triggerWidth = trigger.getBoundingClientRect().width;
+    list.style.minWidth = `${triggerWidth}px`;
+    void computePosition2(trigger, list, {
+      placement: "bottom-start",
+      strategy: "fixed",
+      middleware: [
+        offset2(4),
+        flip2(),
+        shift2({ padding: 8 }),
+        size({
+          apply({ availableHeight }) {
+            list.style.maxHeight = `${Math.max(160, availableHeight - 8)}px`;
+          },
+          padding: 8
+        })
+      ]
+    }).then(({ x, y }) => {
+      list.style.left = `${Math.round(x)}px`;
+      list.style.top = `${Math.round(y)}px`;
+    });
+  }
+  function setActive(i) {
+    if (!listEl) return;
+    activeIndex = i;
+    const rows = listEl.querySelectorAll(".inspekt-rich-select-item");
+    rows.forEach((r, idx) => {
+      if (idx === i) r.dataset["active"] = "true";
+      else delete r.dataset["active"];
+    });
+  }
+  function select(value) {
+    if (value !== current) {
+      current = value;
+      renderTrigger();
+      opts.onChange(value);
+    }
+    close();
+  }
+  function onOutside(e) {
+    const t = e.target;
+    if (listEl?.contains(t) || trigger.contains(t)) return;
+    if (t instanceof Element && t.closest(".inspekt-tooltip")) {
+      setTimeout(close, 0);
+      return;
+    }
+    close();
+  }
+  function onKey(e) {
+    if (!listEl) return;
+    if (e.key === "Escape") {
+      e.preventDefault();
+      close();
+      trigger.focus();
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActive(Math.min(opts.items.length - 1, activeIndex + 1));
+      return;
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActive(Math.max(0, activeIndex - 1));
+      return;
+    }
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      const item = opts.items[activeIndex];
+      if (!item) return;
+      if (item.action) {
+        close();
+        item.action();
+      } else {
+        select(item.value);
+      }
+      return;
+    }
+    if (e.key.length === 1) {
+      const ch = e.key.toLowerCase();
+      const next = opts.items.findIndex((it) => it.label.toLowerCase().startsWith(ch));
+      if (next >= 0) setActive(next);
+    }
+  }
+  return {
+    setValue(value) {
+      current = value;
+      renderTrigger();
+    },
+    getValue() {
+      return current;
+    },
+    destroy() {
+      close();
+      trigger.remove();
+    }
+  };
+}
+
+// src/index.ts
+var DEFAULT_OPTIONS = {
+  // Default preserves the legacy click-mod behavior: page interactions never
+  // intercepted unless Ctrl+Alt is held. Empty array = always-on hover.
+  requireModifiers: ["ctrl", "alt"],
+  showBoundingBoxes: false,
+  shortcut: { key: "click", modifiers: ["ctrl", "alt"] },
+  toggleShortcut: { key: "i", modifiers: ["ctrl", "alt"] },
+  theme: "auto",
+  highlight: {
+    color: "#3b82f6",
+    style: "glow",
+    animation: "pulse"
+  },
+  badge: {
+    show: true,
+    position: "auto",
+    showPath: false
+  },
+  borders: false,
+  actions: ["open-editor", "copy-path", "open-github", "console-log"],
+  editor: "cursor",
+  editorPathBase: "",
+  githubRepo: "",
+  githubBranch: "main",
+  pathMapping: {},
+  treePanel: {
+    enabled: true,
+    position: "right",
+    showProps: true,
+    showLineNumbers: true
+  },
+  sourceAttribute: "data-insp-path",
+  serverUrl: "",
+  defaultSnippetExpanded: false,
+  snippetContext: 5,
+  sourceMapEnabled: false,
+  customEditors: []
+};
+function createInspekt(userOptions = {}) {
+  const options = { ...DEFAULT_OPTIONS, ...userOptions };
+  let capabilityTeardown = null;
+  if (userOptions.highlight) options.highlight = { ...DEFAULT_OPTIONS.highlight, ...userOptions.highlight };
+  if (userOptions.badge) options.badge = { ...DEFAULT_OPTIONS.badge, ...userOptions.badge };
+  if (userOptions.treePanel) options.treePanel = { ...DEFAULT_OPTIONS.treePanel, ...userOptions.treePanel };
+  if (userOptions.shortcut) options.shortcut = { ...DEFAULT_OPTIONS.shortcut, ...userOptions.shortcut };
+  if (userOptions.toggleShortcut) options.toggleShortcut = { ...DEFAULT_OPTIONS.toggleShortcut, ...userOptions.toggleShortcut };
+  let enabled = false;
+  const listeners = /* @__PURE__ */ new Map();
+  const customActions = /* @__PURE__ */ new Map();
+  const host = document.createElement("inspekt-root");
+  const shadow = host.attachShadow({ mode: "open" });
+  const style = document.createElement("style");
+  style.textContent = STYLES;
+  shadow.appendChild(style);
+  applyTheme(host, options.theme);
+  const highlighter = new Highlighter(options.highlight);
+  const popover = new Popover(shadow);
+  popover.configureSnippet({
+    serverUrl: options.serverUrl || void 0,
+    context: options.snippetContext,
+    defaultExpanded: options.defaultSnippetExpanded,
+    sourceMapEnabled: options.sourceMapEnabled,
+    staticSnippets: options.staticSnippets
+  });
+  const overlay = new Overlay(shadow);
+  const bboxOverlay = new BoundingBoxOverlay(shadow);
+  const adapter = detectAdapter();
+  let treePanel = null;
+  if (options.treePanel.enabled) {
+    treePanel = new TreePanel(shadow, {
+      position: options.treePanel.position,
+      showProps: options.treePanel.showProps,
+      showLineNumbers: options.treePanel.showLineNumbers,
+      onSelect(node) {
+        if (node.domElement) {
+          highlighter.unhighlightAll();
+          highlighter.highlight(node.domElement, "selected");
+          node.domElement.scrollIntoView({ behavior: "smooth", block: "center" });
+        }
+        emit("tree-select", node);
+      },
+      onHover(node) {
+        highlighter.unhighlightAll();
+        if (node?.domElement) {
+          highlighter.highlight(node.domElement, "hovered");
+        }
+      }
+    });
+  }
+  function refreshTree() {
+    if (!treePanel) return;
+    const root = document.getElementById("root") ?? document.getElementById("app") ?? document.body;
+    const tree = adapter.getComponentTree(root);
+    treePanel.updateTree(tree);
+  }
+  function getActions() {
+    const builtInMap = {
+      "open-editor": () => createOpenEditorAction(options.serverUrl, options.editor, options.customEditors),
+      "copy-path": () => createCopyPathAction(),
+      "open-github": () => createOpenGithubAction(options.githubRepo, options.githubBranch),
+      "console-log": () => createConsoleLogAction()
+    };
+    const result = [];
+    for (const id of options.actions) {
+      const factory = builtInMap[id];
+      if (factory) {
+        result.push(factory());
+      }
+    }
+    for (const action of customActions.values()) {
+      result.push(action);
+    }
+    return result;
+  }
+  function modifiersOk(e) {
+    return options.requireModifiers.every((mod) => {
+      switch (mod) {
+        case "ctrl":
+          return e.ctrlKey || e.metaKey;
+        case "alt":
+          return e.altKey;
+        case "shift":
+          return e.shiftKey;
+        case "meta":
+          return e.metaKey;
+      }
+    });
+  }
+  function handleClick(e) {
+    if (!enabled) return;
+    const clickTarget = e.target;
+    const isInsideInspekt = clickTarget?.tagName === "INSPEKT-ROOT";
+    if (popover.isPinned() && !isInsideInspekt) {
+      popover.unpin();
+      popover.hide();
+      highlighter.unhighlightAll();
+    }
+    if (e.shiftKey && e.altKey && !e.ctrlKey && !e.metaKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      const target2 = e.target;
+      const result2 = findClosestSource(target2);
+      if (result2) {
+        const inspected = elementToInspected(result2.element, result2.source, options.pathMapping);
+        const editorAction = getActions().find((a) => a.id === "open-editor");
+        if (editorAction) editorAction.handler(inspected);
+        emit("action", "open-editor", inspected);
+      }
+      return;
+    }
+    if (!modifiersOk(e)) return;
+    const target = e.target;
+    const result = findClosestSource(target);
+    const isFallback = !result && isFallbackTarget(target);
+    if (!result && !isFallback) return;
+    e.preventDefault();
+    e.stopPropagation();
+    if (result) {
+      const inspected = elementToInspected(result.element, result.source, options.pathMapping);
+      highlighter.unhighlightAll();
+      highlighter.highlight(result.element, "selected");
+      popover.show(inspected, getActions(), { x: e.clientX, y: e.clientY });
+      popover.pin();
+      treePanel?.selectElement(inspected);
+      emit("inspect", inspected);
+    } else if (isFallback) {
+      showDomFallback(target, e.clientX, e.clientY);
+      popover.pin();
+    }
+  }
+  function showDomFallback(el, x, y) {
+    highlighter.unhighlightAll();
+    highlighter.highlight(el, "selected");
+    popover.showDom(
+      el,
+      { x, y },
+      async (selector) => copyToClipboard(selector),
+      async (html) => copyToClipboard(html),
+      () => {
+        console.log("[Inspekt]", el);
+      }
+    );
+  }
+  async function copyToClipboard(text) {
+    if (navigator.clipboard?.writeText) {
+      try {
+        await navigator.clipboard.writeText(text);
+        return true;
+      } catch {
+      }
+    }
+    try {
+      const ta = document.createElement("textarea");
+      ta.value = text;
+      ta.style.cssText = "position:fixed;top:-1000px;left:-1000px;opacity:0;pointer-events:none;";
+      document.body.appendChild(ta);
+      ta.focus();
+      ta.select();
+      const ok = document.execCommand("copy");
+      ta.remove();
+      return ok;
+    } catch {
+      return false;
+    }
+  }
+  function handleKeydown(e) {
+    if (matchesShortcut(e, options.toggleShortcut)) {
+      e.preventDefault();
+      instance.toggle();
+      return;
+    }
+    if (e.key === "Escape" && popover.isVisible()) {
+      popover.unpin();
+      popover.hide();
+      highlighter.unhighlightAll();
+    }
+    if (e.key === "o" && e.ctrlKey && e.altKey) {
+      e.preventDefault();
+      overlay.toggle();
+    }
+    if (e.key === "t" && e.ctrlKey && e.altKey) {
+      e.preventDefault();
+      if (treePanel) {
+        treePanel.toggle();
+        if (treePanel.isVisible()) refreshTree();
+      }
+    }
+  }
+  function matchesShortcut(e, shortcut) {
+    if (e.key.toLowerCase() !== shortcut.key.toLowerCase()) return false;
+    const needCtrl = shortcut.modifiers.includes("ctrl");
+    const needAlt = shortcut.modifiers.includes("alt");
+    const needShift = shortcut.modifiers.includes("shift");
+    const needMeta = shortcut.modifiers.includes("meta");
+    return (needCtrl ? e.ctrlKey || e.metaKey : true) && (needAlt ? e.altKey : true) && (needShift ? e.shiftKey : true) && (needMeta ? e.metaKey : true);
+  }
+  function handleMouseMove(e) {
+    if (!enabled) return;
+    if (popover.isPinned()) return;
+    if (!modifiersOk(e)) {
+      highlighter.unhighlightAll();
+      popover.hide();
+      return;
+    }
+    const target = e.target;
+    const result = findClosestSource(target);
+    highlighter.unhighlightAll();
+    if (result) {
+      highlighter.highlight(result.element, "selected");
+      const inspected = elementToInspected(result.element, result.source, options.pathMapping);
+      popover.show(inspected, getActions(), { x: e.clientX, y: e.clientY });
+      treePanel?.selectElement(inspected);
+      emit("inspect", inspected);
+    } else if (isFallbackTarget(target)) {
+      showDomFallback(target, e.clientX, e.clientY);
+    } else {
+      popover.hide();
+    }
+  }
+  function isFallbackTarget(el) {
+    if (!el) return false;
+    if (el === document.body || el === document.documentElement) return false;
+    if (el.tagName === "INSPEKT-ROOT") return false;
+    return true;
+  }
+  function emit(event, ...args) {
+    const handlers = listeners.get(event);
+    if (handlers) {
+      for (const handler of handlers) {
+        handler(...args);
+      }
+    }
+  }
+  function applyTheme(el, theme) {
+    el.classList.remove("inspekt-light", "inspekt-dark");
+    if (theme === "auto") {
+      const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      if (!isDark) el.classList.add("inspekt-light");
+    } else if (theme === "light") {
+      el.classList.add("inspekt-light");
+    }
+  }
+  const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+  const themeHandler = () => applyTheme(host, options.theme);
+  mediaQuery.addEventListener("change", themeHandler);
+  document.addEventListener("inspekt:settings-update", ((e) => {
+    const newSettings = e.detail;
+    Object.assign(options, newSettings);
+    if (newSettings.highlight) highlighter.updateConfig(options.highlight);
+    applyTheme(host, options.theme);
+    if (enabled) {
+      if (options.showBoundingBoxes === true) bboxOverlay.enable();
+      else bboxOverlay.disable();
+    }
+  }));
+  const instance = {
+    enable() {
+      if (enabled) return;
+      enabled = true;
+      document.body.appendChild(host);
+      document.addEventListener("click", handleClick, true);
+      document.addEventListener("keydown", handleKeydown, true);
+      document.addEventListener("mousemove", handleMouseMove);
+      window.__INSPEKT__ = { version: "0.1.0", options };
+      document.dispatchEvent(new CustomEvent("inspekt:status", { detail: { enabled: true } }));
+      void import("./capability-probe-AKVKYSDE.js").then(({ watchCapabilities }) => {
+        if (!enabled) return;
+        capabilityTeardown = watchCapabilities({
+          serverUrl: options.serverUrl || void 0,
+          sourceMapEnabled: options.sourceMapEnabled
+        });
+      });
+      if (treePanel && options.treePanel.enabled) {
+        setTimeout(() => refreshTree(), 100);
+      }
+      if (options.showBoundingBoxes) {
+        bboxOverlay.enable();
+      }
+      emit("enable");
+    },
+    disable() {
+      if (!enabled) return;
+      enabled = false;
+      popover.hide();
+      overlay.hide();
+      treePanel?.hide();
+      bboxOverlay.disable();
+      highlighter.unhighlightAll();
+      capabilityTeardown?.();
+      capabilityTeardown = null;
+      document.removeEventListener("click", handleClick, true);
+      document.removeEventListener("keydown", handleKeydown, true);
+      document.removeEventListener("mousemove", handleMouseMove);
+      host.remove();
+      document.dispatchEvent(new CustomEvent("inspekt:status", { detail: { enabled: false } }));
+      emit("disable");
+    },
+    toggle() {
+      if (enabled) instance.disable();
+      else instance.enable();
+    },
+    destroy() {
+      instance.disable();
+      popover.destroy();
+      overlay.destroy();
+      treePanel?.destroy();
+      bboxOverlay.destroy();
+      mediaQuery.removeEventListener("change", themeHandler);
+      listeners.clear();
+      customActions.clear();
+      delete window.__INSPEKT__;
+    },
+    registerAction(action) {
+      customActions.set(action.id, action);
+    },
+    unregisterAction(id) {
+      customActions.delete(id);
+    },
+    on(event, handler) {
+      if (!listeners.has(event)) listeners.set(event, /* @__PURE__ */ new Set());
+      listeners.get(event).add(handler);
+    },
+    off(event, handler) {
+      listeners.get(event)?.delete(handler);
+    }
+  };
+  return instance;
+}
+export {
+  attachTooltip,
+  createInspekt,
+  createRichSelect,
+  tokenizeToLines
+};
+//# sourceMappingURL=index.js.map