@treelocator/runtime 0.1.7 → 0.2.0

package/dist/adapters/phoenix/__tests__/parsePhoenixComments.test.js

@@ -0,0 +1,218 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { describe, it, expect, beforeEach } from "vitest";
+import { findPrecedingPhoenixComments, phoenixMatchesToServerComponents, parsePhoenixServerComponents } from "../parsePhoenixComments";
+describe("parsePhoenixComments", () => {
+  let container;
+  beforeEach(() => {
+    container = document.createElement("div");
+  });
+  describe("findPrecedingPhoenixComments", () => {
+    it("parses @caller comment", () => {
+      container.innerHTML = `
+        <!-- @caller lib/app_web/home_live.ex:20 -->
+        <header>Content</header>
+      `;
+      const header = container.querySelector("header");
+      const matches = findPrecedingPhoenixComments(header);
+      expect(matches).toHaveLength(1);
+      expect(matches[0]).toMatchObject({
+        name: "@caller",
+        filePath: "lib/app_web/home_live.ex",
+        line: 20,
+        type: "caller"
+      });
+    });
+    it("parses component comment", () => {
+      container.innerHTML = `
+        <!-- <AppWeb.CoreComponents.header> lib/app_web/core_components.ex:123 -->
+        <header>Content</header>
+      `;
+      const header = container.querySelector("header");
+      const matches = findPrecedingPhoenixComments(header);
+      expect(matches).toHaveLength(1);
+      expect(matches[0]).toMatchObject({
+        name: "AppWeb.CoreComponents.header",
+        filePath: "lib/app_web/core_components.ex",
+        line: 123,
+        type: "component"
+      });
+    });
+    it("ignores closing tag comments", () => {
+      container.innerHTML = `
+        <!-- </AppWeb.CoreComponents.header> -->
+        <header>Content</header>
+      `;
+      const header = container.querySelector("header");
+      const matches = findPrecedingPhoenixComments(header);
+      expect(matches).toHaveLength(0);
+    });
+    it("finds multiple preceding comments in correct order", () => {
+      container.innerHTML = `
+        <!-- @caller lib/app_web/home_live.ex:20 -->
+        <!-- <AppWeb.CoreComponents.header> lib/app_web/core_components.ex:123 -->
+        <header>Content</header>
+      `;
+      const header = container.querySelector("header");
+      const matches = findPrecedingPhoenixComments(header);
+      expect(matches).toHaveLength(2);
+      // Should be ordered from outermost to innermost
+      expect(matches[0].name).toBe("@caller");
+      expect(matches[0].line).toBe(20);
+      expect(matches[1].name).toBe("AppWeb.CoreComponents.header");
+      expect(matches[1].line).toBe(123);
+    });
+    it("stops at non-comment element node", () => {
+      container.innerHTML = `
+        <div>Other element</div>
+        <!-- <AppWeb.CoreComponents.header> lib/app_web/core_components.ex:123 -->
+        <header>Content</header>
+      `;
+      const header = container.querySelector("header");
+      const matches = findPrecedingPhoenixComments(header);
+
+      // Should only find the comment between the div and header
+      expect(matches).toHaveLength(1);
+      expect(matches[0].name).toBe("AppWeb.CoreComponents.header");
+    });
+    it("skips whitespace text nodes", () => {
+      container.innerHTML = `
+        <!-- @caller lib/app_web/home_live.ex:20 -->
+
+        <header>Content</header>
+      `;
+      const header = container.querySelector("header");
+      const matches = findPrecedingPhoenixComments(header);
+
+      // Should find the comment despite whitespace text node
+      expect(matches).toHaveLength(1);
+      expect(matches[0].name).toBe("@caller");
+    });
+    it("stops at non-whitespace text node", () => {
+      container.innerHTML = `
+        <!-- @caller lib/app_web/home_live.ex:20 -->
+        Some text
+        <header>Content</header>
+      `;
+      const header = container.querySelector("header");
+      const matches = findPrecedingPhoenixComments(header);
+
+      // Should stop at the text node, not finding the comment
+      expect(matches).toHaveLength(0);
+    });
+    it("returns empty array if no preceding comments", () => {
+      container.innerHTML = `<header>Content</header>`;
+      const header = container.querySelector("header");
+      const matches = findPrecedingPhoenixComments(header);
+      expect(matches).toHaveLength(0);
+    });
+    it("ignores non-Phoenix comments", () => {
+      container.innerHTML = `
+        <!-- Regular HTML comment -->
+        <header>Content</header>
+      `;
+      const header = container.querySelector("header");
+      const matches = findPrecedingPhoenixComments(header);
+      expect(matches).toHaveLength(0);
+    });
+    it("finds Phoenix comments and ignores non-Phoenix comments", () => {
+      container.innerHTML = `
+        <!-- Regular comment -->
+        <!-- @caller lib/app_web/home_live.ex:20 -->
+        <!-- Another regular comment -->
+        <!-- <AppWeb.CoreComponents.header> lib/app_web/core_components.ex:123 -->
+        <header>Content</header>
+      `;
+      const header = container.querySelector("header");
+      const matches = findPrecedingPhoenixComments(header);
+
+      // Should only find the 2 Phoenix comments
+      expect(matches).toHaveLength(2);
+      expect(matches[0].name).toBe("@caller");
+      expect(matches[1].name).toBe("AppWeb.CoreComponents.header");
+    });
+  });
+  describe("phoenixMatchesToServerComponents", () => {
+    it("converts matches to ServerComponentInfo format", () => {
+      container.innerHTML = `
+        <!-- @caller lib/app_web/home_live.ex:20 -->
+        <!-- <AppWeb.CoreComponents.button> lib/app_web/core_components.ex:456 -->
+        <button>Click</button>
+      `;
+      const button = container.querySelector("button");
+      const matches = findPrecedingPhoenixComments(button);
+      const serverComponents = phoenixMatchesToServerComponents(matches);
+      expect(serverComponents).toHaveLength(2);
+      expect(serverComponents[0]).toEqual({
+        name: "@caller",
+        filePath: "lib/app_web/home_live.ex",
+        line: 20,
+        type: "caller"
+      });
+      expect(serverComponents[1]).toEqual({
+        name: "AppWeb.CoreComponents.button",
+        filePath: "lib/app_web/core_components.ex",
+        line: 456,
+        type: "component"
+      });
+    });
+  });
+  describe("parsePhoenixServerComponents", () => {
+    it("returns ServerComponentInfo array when comments found", () => {
+      container.innerHTML = `
+        <!-- @caller lib/app_web/home_live.ex:48 -->
+        <!-- <AppWeb.CoreComponents.button> lib/app_web/core_components.ex:456 -->
+        <button data-phx-loc="458">Click Me</button>
+      `;
+      const button = container.querySelector("button");
+      const result = parsePhoenixServerComponents(button);
+      expect(result).not.toBeNull();
+      expect(result).toHaveLength(2);
+      expect(result[0]).toEqual({
+        name: "@caller",
+        filePath: "lib/app_web/home_live.ex",
+        line: 48,
+        type: "caller"
+      });
+      expect(result[1]).toEqual({
+        name: "AppWeb.CoreComponents.button",
+        filePath: "lib/app_web/core_components.ex",
+        line: 456,
+        type: "component"
+      });
+    });
+    it("returns null when no comments found", () => {
+      container.innerHTML = `<button>Click Me</button>`;
+      const button = container.querySelector("button");
+      const result = parsePhoenixServerComponents(button);
+      expect(result).toBeNull();
+    });
+    it("handles nested structure with multiple components", () => {
+      container.innerHTML = `
+        <!-- @caller lib/app_web/home_live.ex:20 -->
+        <!-- <AppWeb.CoreComponents.header> lib/app_web/core_components.ex:123 -->
+        <header data-phx-loc="125" class="p-5">
+          <!-- @caller lib/app_web/home_live.ex:48 -->
+          <!-- <AppWeb.CoreComponents.button> lib/app_web/core_components.ex:456 -->
+          <button data-phx-loc="458" class="px-2">Click</button>
+        </header>
+      `;
+      const header = container.querySelector("header");
+      const headerResult = parsePhoenixServerComponents(header);
+      expect(headerResult).not.toBeNull();
+      expect(headerResult).toHaveLength(2);
+      expect(headerResult[0].name).toBe("@caller");
+      expect(headerResult[0].line).toBe(20);
+      expect(headerResult[1].name).toBe("AppWeb.CoreComponents.header");
+      const button = container.querySelector("button");
+      const buttonResult = parsePhoenixServerComponents(button);
+      expect(buttonResult).not.toBeNull();
+      expect(buttonResult).toHaveLength(2);
+      expect(buttonResult[0].name).toBe("@caller");
+      expect(buttonResult[0].line).toBe(48);
+      expect(buttonResult[1].name).toBe("AppWeb.CoreComponents.button");
+    });
+  });
+});

package/dist/adapters/phoenix/detectPhoenix.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Detect if Phoenix LiveView is present on the page.
+ *
+ * Checks for multiple signals:
+ * 1. window.liveSocket - Phoenix LiveView JS client
+ * 2. data-phx-* attributes in the DOM
+ * 3. Phoenix debug comment patterns
+ *
+ * Returns true if any signal indicates Phoenix LiveView is running.
+ */
+export declare function detectPhoenix(): boolean;

package/dist/adapters/phoenix/detectPhoenix.js

@@ -0,0 +1,38 @@
+/**
+ * Detect if Phoenix LiveView is present on the page.
+ *
+ * Checks for multiple signals:
+ * 1. window.liveSocket - Phoenix LiveView JS client
+ * 2. data-phx-* attributes in the DOM
+ * 3. Phoenix debug comment patterns
+ *
+ * Returns true if any signal indicates Phoenix LiveView is running.
+ */
+export function detectPhoenix() {
+  // Check 1: Look for LiveView socket (most reliable)
+  if (typeof window !== "undefined" && window.liveSocket) {
+    return true;
+  }
+
+  // Check 2: Look for Phoenix data attributes in the DOM
+  if (typeof document !== "undefined") {
+    // Phoenix LiveView adds data-phx-main or data-phx-session to the main LiveView container
+    if (document.querySelector("[data-phx-main], [data-phx-session]")) {
+      return true;
+    }
+
+    // Check 3: Quick scan for Phoenix debug comments (first 50 comments)
+    // This is useful when debug_heex_annotations is enabled
+    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_COMMENT, null);
+    let count = 0;
+    while (walker.nextNode() && count < 50) {
+      const text = walker.currentNode.textContent;
+      // Look for Phoenix-specific comment patterns
+      if (text?.includes("@caller") || text?.includes("<App")) {
+        return true;
+      }
+      count++;
+    }
+  }
+  return false;
+}

package/dist/adapters/phoenix/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Phoenix LiveView adapter for TreeLocatorJS.
+ *
+ * Parses server-side component information from Phoenix LiveView debug annotations.
+ * Requires Phoenix LiveView v1.1+ with debug_heex_annotations: true in config.
+ */
+export { parsePhoenixServerComponents, findPrecedingPhoenixComments } from "./parsePhoenixComments";
+export { detectPhoenix } from "./detectPhoenix";
+export type { ServerComponentInfo } from "../../types/ServerComponentInfo";
+export type { PhoenixCommentMatch } from "./types";

package/dist/adapters/phoenix/index.js

@@ -0,0 +1,9 @@
+/**
+ * Phoenix LiveView adapter for TreeLocatorJS.
+ *
+ * Parses server-side component information from Phoenix LiveView debug annotations.
+ * Requires Phoenix LiveView v1.1+ with debug_heex_annotations: true in config.
+ */
+
+export { parsePhoenixServerComponents, findPrecedingPhoenixComments } from "./parsePhoenixComments";
+export { detectPhoenix } from "./detectPhoenix";

package/dist/adapters/phoenix/parsePhoenixComments.d.ts

@@ -0,0 +1,35 @@
+import { ServerComponentInfo } from "../../types/ServerComponentInfo";
+import { PhoenixCommentMatch } from "./types";
+/**
+ * Find all Phoenix comment annotations immediately preceding an element.
+ * Walks backward through previous siblings until hitting a non-comment node.
+ *
+ * Returns array ordered from outermost to innermost (matching Phoenix nesting order).
+ * Example: [@caller, CoreComponents.button] where @caller is outermost.
+ *
+ * Example DOM structure:
+ * ```html
+ * <!-- @caller lib/app_web/home_live.ex:48 -->
+ * <!-- <AppWeb.CoreComponents.button> lib/app_web/core_components.ex:456 -->
+ * <button>Click Me</button>
+ * ```
+ *
+ * Would return: [
+ *   { name: "@caller", filePath: "lib/app_web/home_live.ex", line: 48, type: "caller" },
+ *   { name: "AppWeb.CoreComponents.button", filePath: "lib/app_web/core_components.ex", line: 456, type: "component" }
+ * ]
+ */
+export declare function findPrecedingPhoenixComments(element: Element): PhoenixCommentMatch[];
+/**
+ * Convert PhoenixCommentMatch[] to ServerComponentInfo[].
+ * Filters and transforms matches into the format expected by AncestryItem.
+ */
+export declare function phoenixMatchesToServerComponents(matches: PhoenixCommentMatch[]): ServerComponentInfo[];
+/**
+ * Main entry point: extract server component info from element.
+ * Returns null if no Phoenix annotations found.
+ *
+ * This function is called during ancestry collection to enrich each AncestryItem
+ * with server-side component information.
+ */
+export declare function parsePhoenixServerComponents(element: Element): ServerComponentInfo[] | null;

package/dist/adapters/phoenix/parsePhoenixComments.js

@@ -0,0 +1,131 @@
+/**
+ * Regex patterns for Phoenix LiveView debug annotations.
+ *
+ * These comments are added by Phoenix LiveView when configured with:
+ * config :phoenix_live_view, debug_heex_annotations: true
+ *
+ * Pattern 1 (Caller): <!-- @caller lib/app_web/home_live.ex:20 -->
+ * Pattern 2 (Component): <!-- <AppWeb.CoreComponents.header> lib/app_web/core_components.ex:123 -->
+ * Pattern 3 (Closing): <!-- </AppWeb.CoreComponents.header> -->
+ */
+const PHOENIX_CALLER_PATTERN = /^@caller\s+(.+):(\d+)$/;
+const PHOENIX_COMPONENT_PATTERN = /^<([^>]+)>\s+(.+):(\d+)$/;
+const PHOENIX_CLOSING_PATTERN = /^<\/([^>]+)>$/;
+
+/**
+ * Parse a single HTML comment node for Phoenix debug annotations.
+ * Returns null if the comment doesn't match Phoenix patterns.
+ */
+function parseCommentNode(commentNode) {
+  const text = commentNode.textContent?.trim();
+  if (!text) return null;
+
+  // Check for @caller pattern: <!-- @caller lib/app_web/home_live.ex:20 -->
+  const callerMatch = text.match(PHOENIX_CALLER_PATTERN);
+  if (callerMatch && callerMatch[1] && callerMatch[2]) {
+    return {
+      commentNode,
+      name: "@caller",
+      filePath: callerMatch[1],
+      line: parseInt(callerMatch[2], 10),
+      type: "caller"
+    };
+  }
+
+  // Check for component opening pattern: <!-- <AppWeb.CoreComponents.header> lib/app_web/core_components.ex:123 -->
+  const componentMatch = text.match(PHOENIX_COMPONENT_PATTERN);
+  if (componentMatch && componentMatch[1] && componentMatch[2] && componentMatch[3]) {
+    return {
+      commentNode,
+      name: componentMatch[1],
+      filePath: componentMatch[2],
+      line: parseInt(componentMatch[3], 10),
+      type: "component"
+    };
+  }
+
+  // Closing tags are ignored (we only care about opening tags)
+  // Example: <!-- </AppWeb.CoreComponents.header> -->
+  if (text.match(PHOENIX_CLOSING_PATTERN)) {
+    return null;
+  }
+
+  // Not a Phoenix comment
+  return null;
+}
+
+/**
+ * Find all Phoenix comment annotations immediately preceding an element.
+ * Walks backward through previous siblings until hitting a non-comment node.
+ *
+ * Returns array ordered from outermost to innermost (matching Phoenix nesting order).
+ * Example: [@caller, CoreComponents.button] where @caller is outermost.
+ *
+ * Example DOM structure:
+ * ```html
+ * <!-- @caller lib/app_web/home_live.ex:48 -->
+ * <!-- <AppWeb.CoreComponents.button> lib/app_web/core_components.ex:456 -->
+ * <button>Click Me</button>
+ * ```
+ *
+ * Would return: [
+ *   { name: "@caller", filePath: "lib/app_web/home_live.ex", line: 48, type: "caller" },
+ *   { name: "AppWeb.CoreComponents.button", filePath: "lib/app_web/core_components.ex", line: 456, type: "component" }
+ * ]
+ */
+export function findPrecedingPhoenixComments(element) {
+  const matches = [];
+  let node = element.previousSibling;
+
+  // Walk backward through siblings, collecting comment nodes
+  while (node) {
+    if (node.nodeType === Node.COMMENT_NODE) {
+      const match = parseCommentNode(node);
+      if (match) {
+        matches.push(match);
+      }
+      // Continue even if this comment didn't match - keep looking for more Phoenix comments
+    } else if (node.nodeType === Node.TEXT_NODE) {
+      // Skip whitespace text nodes
+      const text = node.textContent?.trim();
+      if (text && text.length > 0) {
+        // Hit non-whitespace text, stop searching
+        break;
+      }
+    } else {
+      // Hit another element, stop searching
+      break;
+    }
+    node = node.previousSibling;
+  }
+
+  // Reverse so outermost comes first (matches Phoenix nesting order)
+  // This makes the array order match the visual hierarchy: [@caller, Component]
+  return matches.reverse();
+}
+
+/**
+ * Convert PhoenixCommentMatch[] to ServerComponentInfo[].
+ * Filters and transforms matches into the format expected by AncestryItem.
+ */
+export function phoenixMatchesToServerComponents(matches) {
+  return matches.map(match => ({
+    name: match.name,
+    filePath: match.filePath,
+    line: match.line,
+    type: match.type
+  }));
+}
+
+/**
+ * Main entry point: extract server component info from element.
+ * Returns null if no Phoenix annotations found.
+ *
+ * This function is called during ancestry collection to enrich each AncestryItem
+ * with server-side component information.
+ */
+export function parsePhoenixServerComponents(element) {
+  const matches = findPrecedingPhoenixComments(element);
+  if (matches.length === 0) return null;
+  return phoenixMatchesToServerComponents(matches);
+}

package/dist/adapters/phoenix/types.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Represents a parsed Phoenix LiveView debug annotation HTML comment.
+ * Phoenix LiveView adds these comments when debug_heex_annotations: true is configured.
+ */
+export interface PhoenixCommentMatch {
+    /** The actual HTML Comment node from the DOM */
+    commentNode: Comment;
+    /** Component name (e.g., "AppWeb.CoreComponents.button") or "@caller" */
+    name: string;
+    /** File path (e.g., "lib/app_web/core_components.ex") */
+    filePath: string;
+    /** Line number */
+    line: number;
+    /** Type of annotation */
+    type: "component" | "caller";
+}

package/dist/adapters/phoenix/types.js

@@ -0,0 +1 @@
+export {};

package/dist/adapters/react/getFiberLabel.js

@@ -1,10 +1,11 @@
 import { getUsableName } from "../../functions/getUsableName";
+import { normalizeFilePath } from "../../functions/normalizeFilePath";
 export function getFiberLabel(fiber, source) {
   const name = getUsableName(fiber);
   const label = {
     label: name,
     link: source ? {
-      filePath: source.fileName,
+      filePath: normalizeFilePath(source.fileName),
       projectPath: "",
       line: source.lineNumber,
       column: source.columnNumber || 0

package/dist/components/MaybeOutline.js

@@ -1,14 +1,35 @@
 import { template as _$template } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
 import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
-var _tmpl$ = /*#__PURE__*/_$template(`<div><div class="fixed rounded border border-solid border-amber-500"style=z-index:2></div><div class="fixed text-xs font-medium rounded-md"style="z-index:3;box-shadow:0 4px 16px rgba(0, 0, 0, 0.2);font-family:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;letter-spacing:0.01em">No source found`);
+var _tmpl$ = /*#__PURE__*/_$template(`<div><div class="fixed rounded border border-solid border-amber-500"style=z-index:2></div><div class="fixed text-xs font-medium rounded-md"style="z-index:3;box-shadow:0 4px 16px rgba(0, 0, 0, 0.2);font-family:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;letter-spacing:0.01em">`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<div><div class="fixed rounded border border-solid border-gray-500"style=z-index:2></div><div class="fixed text-xs font-medium rounded-md"style="z-index:3;box-shadow:0 4px 16px rgba(0, 0, 0, 0.2);font-family:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;letter-spacing:0.01em">`);
 import { createMemo } from "solid-js";
 import { getElementInfo } from "../adapters/getElementInfo";
 import { Outline } from "./Outline";
+import { parsePhoenixServerComponents } from "../adapters/phoenix/parsePhoenixComments";
 export function MaybeOutline(props) {
   const elInfo = createMemo(() => getElementInfo(props.currentElement, props.adapterId));
+
+  // Check for Phoenix server components when client framework data is not available
+  const phoenixInfo = createMemo(() => {
+    if (elInfo()) return null; // Client framework takes precedence
+
+    // Try current element first
+    let serverComponents = parsePhoenixServerComponents(props.currentElement);
+    if (serverComponents) return serverComponents;
+
+    // Walk up the tree to find the nearest parent with Phoenix components
+    let parent = props.currentElement.parentElement;
+    while (parent && parent !== document.body) {
+      serverComponents = parsePhoenixServerComponents(parent);
+      if (serverComponents) return serverComponents;
+      parent = parent.parentElement;
+    }
+    return null;
+  });
   const box = () => props.currentElement.getBoundingClientRect();
   return _$memo(() => _$memo(() => !!elInfo())() ? _$createComponent(Outline, {
     get element() {
@@ -17,14 +38,15 @@ export function MaybeOutline(props) {
     get targets() {
       return props.targets;
     }
-  }) : (() => {
+  }) : _$memo(() => !!phoenixInfo())() ? (() => {
     var _el$ = _tmpl$(),
       _el$2 = _el$.firstChild,
       _el$3 = _el$2.nextSibling;
     _$setStyleProperty(_el$3, "padding", "4px 10px");
-    _$setStyleProperty(_el$3, "background", "rgba(120, 53, 15, 0.85)");
+    _$setStyleProperty(_el$3, "background", "rgba(79, 70, 229, 0.85)");
     _$setStyleProperty(_el$3, "color", "#fff");
     _$setStyleProperty(_el$3, "border", "1px solid rgba(255, 255, 255, 0.15)");
+    _$insert(_el$3, () => phoenixInfo().filter(sc => sc.type === "component").map(sc => sc.name.split(".").pop()).join(" > "));
     _$effect(_p$ => {
       var _v$ = box().x + "px",
         _v$2 = box().y + "px",
@@ -48,5 +70,45 @@ export function MaybeOutline(props) {
       n: undefined
     });
     return _el$;
+  })() : (() => {
+    var _el$4 = _tmpl$2(),
+      _el$5 = _el$4.firstChild,
+      _el$6 = _el$5.nextSibling;
+    _$setStyleProperty(_el$6, "padding", "4px 10px");
+    _$setStyleProperty(_el$6, "background", "rgba(75, 85, 99, 0.85)");
+    _$setStyleProperty(_el$6, "color", "#fff");
+    _$setStyleProperty(_el$6, "border", "1px solid rgba(255, 255, 255, 0.15)");
+    _$insert(_el$6, () => props.currentElement.tagName.toLowerCase(), null);
+    _$insert(_el$6, (() => {
+      var _c$ = _$memo(() => !!props.currentElement.id);
+      return () => _c$() ? `#${props.currentElement.id}` : "";
+    })(), null);
+    _$insert(_el$6, (() => {
+      var _c$2 = _$memo(() => !!props.currentElement.className);
+      return () => _c$2() ? `.${props.currentElement.className.split(" ")[0]}` : "";
+    })(), null);
+    _$effect(_p$ => {
+      var _v$7 = box().x + "px",
+        _v$8 = box().y + "px",
+        _v$9 = box().width + "px",
+        _v$0 = box().height + "px",
+        _v$1 = box().x + 4 + "px",
+        _v$10 = box().y + 4 + "px";
+      _v$7 !== _p$.e && _$setStyleProperty(_el$5, "left", _p$.e = _v$7);
+      _v$8 !== _p$.t && _$setStyleProperty(_el$5, "top", _p$.t = _v$8);
+      _v$9 !== _p$.a && _$setStyleProperty(_el$5, "width", _p$.a = _v$9);
+      _v$0 !== _p$.o && _$setStyleProperty(_el$5, "height", _p$.o = _v$0);
+      _v$1 !== _p$.i && _$setStyleProperty(_el$6, "left", _p$.i = _v$1);
+      _v$10 !== _p$.n && _$setStyleProperty(_el$6, "top", _p$.n = _v$10);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined
+    });
+    return _el$4;
   })());
 }

package/dist/components/Runtime.js

@@ -64,7 +64,7 @@ function Runtime(props) {
     if (!element) {
       const target = e.target;
       if (target && (target instanceof HTMLElement || target instanceof SVGElement)) {
-        element = target instanceof SVGElement ? target.closest('svg') ?? target : target;
+        element = target instanceof SVGElement ? target.closest('[data-locatorjs-id], [data-locatorjs]') ?? target.closest('svg') ?? target : target;
       }
     }
     if (element && !isLocatorsOwnElement(element)) {

package/dist/functions/formatAncestryChain.d.ts

@@ -1,4 +1,5 @@
 import { TreeNode } from "../types/TreeNode";
+import { ServerComponentInfo } from "../types/ServerComponentInfo";
 export interface OwnerComponentInfo {
     name: string;
     filePath?: string;
@@ -13,6 +14,8 @@ export interface AncestryItem {
     nthChild?: number;
     /** All owner components from outermost (Sidebar) to innermost (GlassPanel) */
     ownerComponents?: OwnerComponentInfo[];
+    /** Server-side components (Phoenix LiveView, Rails, Next.js RSC, etc.) */
+    serverComponents?: ServerComponentInfo[];
 }
 export declare function collectAncestry(node: TreeNode): AncestryItem[];
 export declare function formatAncestryChain(items: AncestryItem[]): string;