@treelocator/runtime 0.1.8 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treelocator/runtime",
-  "version": "0.1.8",
+  "version": "0.3.0",
   "description": "TreeLocatorJS runtime for component ancestry tracking. Alt+click any element to copy its component tree to clipboard. Exposes window.__treelocator__ API for browser automation (Playwright, Puppeteer, Selenium, Cypress).",
   "keywords": [
     "locator",
@@ -53,7 +53,8 @@
   "devDependencies": {
     "@babel/cli": "^7.25.9",
     "@babel/core": "^7.26.0",
-    "@treelocator/dev-config": "^0.1.0",
+    "@tailwindcss/forms": "^0.5.11",
+    "@treelocator/dev-config": "^0.3.0",
     "@types/jsdom": "^21.1.7",
     "babel-preset-solid": "^1.9.2",
     "concurrently": "^9.1.0",
@@ -72,5 +73,5 @@
     "directory": "packages/runtime"
   },
   "license": "MIT",
-  "gitHead": "69fb05167bd689b2e3602fcbc74a70912695f136"
+  "gitHead": "afc8a534284e818665bb4d03b7fa940ec5ad5880"
 }

package/src/adapters/createTreeNode.ts

@@ -1,22 +1,63 @@
 import { TreeNode } from "../types/TreeNode";
 import { ReactTreeNodeElement } from "./react/reactAdapter";
 import { JSXTreeNodeElement } from "./jsx/jsxAdapter";
+import { SvelteTreeNodeElement } from "./svelte/svelteAdapter";
+import { VueTreeNodeElement } from "./vue/vueAdapter";
 import {
   detectJSX,
   detectReact,
+  detectSvelte,
+  detectVue,
 } from "@locator/shared";
+import { detectPhoenix } from "./phoenix/detectPhoenix";
+
+/**
+ * Fallback React detection: check if any DOM element has __reactFiber$ keys.
+ * Works without React DevTools extension (where detectReact() fails because
+ * the renderers Map is empty).
+ */
+function hasReactFiberKeys(element: HTMLElement): boolean {
+  return Object.keys(element).some((k) => k.startsWith("__reactFiber$"));
+}
 
 export function createTreeNode(
   element: HTMLElement,
   adapterId?: string
 ): TreeNode | null {
-  // Check for React adapter
-  if (adapterId === "react" || detectReact()) {
+  // Check for explicit adapter ID first
+  if (adapterId === "react") {
+    return new ReactTreeNodeElement(element);
+  }
+  if (adapterId === "svelte") {
+    return new SvelteTreeNodeElement(element);
+  }
+  if (adapterId === "vue") {
+    return new VueTreeNodeElement(element);
+  }
+  if (adapterId === "jsx") {
+    return new JSXTreeNodeElement(element);
+  }
+
+  // Auto-detect framework
+  if (detectSvelte()) {
+    return new SvelteTreeNodeElement(element);
+  }
+
+  if (detectVue()) {
+    return new VueTreeNodeElement(element);
+  }
+
+  if (detectReact() || hasReactFiberKeys(element)) {
     return new ReactTreeNodeElement(element);
   }
 
   // Check for JSX adapter (babel plugin) - check if element has data-locatorjs-id
-  if (adapterId === "jsx" || detectJSX() || element.dataset.locatorjsId) {
+  if (detectJSX() || element.dataset.locatorjsId) {
+    return new JSXTreeNodeElement(element);
+  }
+
+  // Check for Phoenix LiveView (uses JSX adapter as fallback for pure Phoenix apps)
+  if (detectPhoenix()) {
     return new JSXTreeNodeElement(element);
   }
 

package/src/adapters/nextjs/parseNextjsDataAttributes.ts

@@ -0,0 +1,112 @@
+import { ServerComponentInfo } from "../../types/ServerComponentInfo";
+import { normalizeFilePath } from "../../functions/normalizeFilePath";
+
+/**
+ * Parse Next.js server component data from data-locatorjs attribute.
+ *
+ * Format: data-locatorjs="/path/to/app/layout.tsx:27:4"
+ *
+ * The @treelocator/webpack-loader adds these attributes to elements
+ * rendered by Next.js Server Components.
+ */
+
+/**
+ * Extract component name from file path.
+ * Examples:
+ *   - "/apps/next-16/app/layout.tsx:27:4" → "RootLayout"
+ *   - "/apps/next-16/app/page.tsx:5:4" → "Home"
+ *   - "/apps/next-16/app/components/Header.tsx:10:2" → "Header"
+ */
+function extractComponentName(filePath: string): string {
+  // Remove line:column suffix
+  const pathOnly = filePath.split(":")[0] || filePath;
+
+  // Get filename without extension
+  const fileName = pathOnly.split("/").pop()?.replace(/\.(tsx?|jsx?)$/, "") || "Unknown";
+
+  // Common Next.js conventions:
+  // - "layout" → "RootLayout" or "Layout"
+  // - "page" → Component name (we don't know it, so use "Page")
+  // - Others → Use as-is
+  if (fileName === "layout") {
+    return "RootLayout";
+  } else if (fileName === "page") {
+    return "Page";
+  }
+
+  return fileName;
+}
+
+/**
+ * Parse a data-locatorjs attribute value.
+ * Format: "/path/to/file.tsx:line:column"
+ * Returns ServerComponentInfo or null if parsing fails.
+ */
+function parseDataLocatorjsValue(value: string): ServerComponentInfo | null {
+  if (!value) return null;
+
+  // Split by ":" to get [filePath, line, column]
+  const parts = value.split(":");
+  if (parts.length < 2) return null;
+
+  // Last two parts are column and line (in reverse order)
+  const column = parts.pop();
+  const line = parts.pop();
+
+  // Everything else is the file path (which may contain colons on Windows)
+  const filePath = parts.join(":");
+
+  if (!filePath || !line) return null;
+
+  const componentName = extractComponentName(filePath);
+  const normalizedPath = normalizeFilePath(filePath);
+
+  return {
+    name: componentName,
+    filePath: normalizedPath,
+    line: parseInt(line, 10),
+    type: "component",
+  };
+}
+
+/**
+ * Get the data-locatorjs attribute from the current element only.
+ * Returns array with single component info, or empty array if not found.
+ *
+ * We only look at the current element because the tree structure already
+ * shows the hierarchy - each parent element will have its own server component.
+ *
+ * Example DOM:
+ * ```html
+ * <html data-locatorjs="/app/layout.tsx:27:4">        <!-- RootLayout -->
+ *   <body data-locatorjs="/app/layout.tsx:28:6">      <!-- RootLayout -->
+ *     <div data-locatorjs="/app/page.tsx:5:4">        <!-- Page -->
+ *       <button>Click</button>
+ *     </div>
+ *   </body>
+ * </html>
+ * ```
+ *
+ * For the div, returns: [{ name: "Page", filePath: "/app/page.tsx", line: 5 }]
+ * The tree structure will show: html (RootLayout) > body (RootLayout) > div (Page)
+ */
+export function collectNextjsServerComponents(element: Element): ServerComponentInfo[] {
+  const value = element.getAttribute("data-locatorjs");
+  if (!value) return [];
+
+  const info = parseDataLocatorjsValue(value);
+  return info ? [info] : [];
+}
+
+/**
+ * Main entry point: extract Next.js server component info from element.
+ * Returns null if no data-locatorjs attribute found.
+ *
+ * This function is called during ancestry collection to enrich each AncestryItem
+ * with server-side Next.js component information.
+ */
+export function parseNextjsServerComponents(element: Element): ServerComponentInfo[] | null {
+  const components = collectNextjsServerComponents(element);
+  if (components.length === 0) return null;
+  return components;
+}

package/src/adapters/phoenix/__tests__/parsePhoenixComments.test.ts

@@ -0,0 +1,264 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { describe, it, expect, beforeEach } from "vitest";
+import {
+  findPrecedingPhoenixComments,
+  phoenixMatchesToServerComponents,
+  parsePhoenixServerComponents,
+} from "../parsePhoenixComments";
+
+describe("parsePhoenixComments", () => {
+  let container: HTMLDivElement;
+
+  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/src/adapters/phoenix/detectPhoenix.ts

@@ -0,0 +1,44 @@
+/**
+ * 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(): boolean {
+  // Check 1: Look for LiveView socket (most reliable)
+  if (typeof window !== "undefined" && (window as any).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/src/adapters/phoenix/index.ts

@@ -0,0 +1,11 @@
+/**
+ * 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/src/adapters/phoenix/parsePhoenixComments.ts

@@ -0,0 +1,140 @@
+import { ServerComponentInfo } from "../../types/ServerComponentInfo";
+import { PhoenixCommentMatch } from "./types";
+
+/**
+ * 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: Comment): PhoenixCommentMatch | null {
+  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: Element
+): PhoenixCommentMatch[] {
+  const matches: PhoenixCommentMatch[] = [];
+  let node: Node | null = element.previousSibling;
+
+  // Walk backward through siblings, collecting comment nodes
+  while (node) {
+    if (node.nodeType === Node.COMMENT_NODE) {
+      const match = parseCommentNode(node as Comment);
+      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: PhoenixCommentMatch[]
+): ServerComponentInfo[] {
+  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: Element
+): ServerComponentInfo[] | null {
+  const matches = findPrecedingPhoenixComments(element);
+  if (matches.length === 0) return null;
+  return phoenixMatchesToServerComponents(matches);
+}

package/src/adapters/phoenix/types.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";
+}