@treelocator/runtime 0.1.5 → 0.1.8

package/.turbo/turbo-build.log

@@ -1,30 +1,30 @@
 
-> @treelocator/runtime@0.1.5 build /Users/wende/projects/locatorjs/packages/runtime
+> @treelocator/runtime@0.1.8 build /Users/wende/projects/locatorjs/packages/runtime
 > concurrently pnpm:build:*
 
-[ts] 
-[ts] > @treelocator/runtime@0.1.5 build:ts /Users/wende/projects/locatorjs/packages/runtime
-[ts] > tsc --declaration --emitDeclarationOnly --noEmit false --outDir dist
-[ts] 
 [tailwind] 
-[tailwind] > @treelocator/runtime@0.1.5 build:tailwind /Users/wende/projects/locatorjs/packages/runtime
+[tailwind] > @treelocator/runtime@0.1.8 build:tailwind /Users/wende/projects/locatorjs/packages/runtime
 [tailwind] > tailwindcss -i ./src/main.css -o ./dist/output.css
 [tailwind] 
-[wrapImage] 
-[wrapImage] > @treelocator/runtime@0.1.5 build:wrapImage /Users/wende/projects/locatorjs/packages/runtime
-[wrapImage] > node ./scripts/wrapImage.js
-[wrapImage] 
 [babel] 
-[babel] > @treelocator/runtime@0.1.5 build:babel /Users/wende/projects/locatorjs/packages/runtime
+[babel] > @treelocator/runtime@0.1.8 build:babel /Users/wende/projects/locatorjs/packages/runtime
 [babel] > babel src --out-dir dist --extensions .js,.jsx,.ts,.tsx
 [babel] 
+[ts] 
+[ts] > @treelocator/runtime@0.1.8 build:ts /Users/wende/projects/locatorjs/packages/runtime
+[ts] > tsc --declaration --emitDeclarationOnly --noEmit false --outDir dist
+[ts] 
+[wrapImage] 
+[wrapImage] > @treelocator/runtime@0.1.8 build:wrapImage /Users/wende/projects/locatorjs/packages/runtime
+[wrapImage] > node ./scripts/wrapImage.js
+[wrapImage] 
 [wrapImage] Tree icon file generated
 [wrapImage] pnpm run build:wrapImage exited with code 0
 [tailwind] 
 [tailwind] Rebuilding...
 [tailwind] 
-[tailwind] Done in 294ms.
+[tailwind] Done in 164ms.
 [tailwind] pnpm run build:tailwind exited with code 0
-[babel] Successfully compiled 72 files with Babel (2364ms).
+[babel] Successfully compiled 72 files with Babel (409ms).
 [babel] pnpm run build:babel exited with code 0
 [ts] pnpm run build:ts exited with code 0

package/.turbo/turbo-test.log

@@ -1,18 +1,19 @@
 
-> @treelocator/runtime@0.1.2 test /Users/wende/projects/locatorjs/packages/runtime
+> @treelocator/runtime@0.1.5 test /Users/wende/projects/locatorjs/packages/runtime
 > vitest run
 
 
  RUN  v2.1.9 /Users/wende/projects/locatorjs/packages/runtime
 
- ✓ src/functions/cropPath.test.ts (2 tests) 1ms
- ✓ src/functions/evalTemplate.test.ts (1 test) 1ms
- ✓ src/functions/transformPath.test.ts (3 tests) 2ms
- ✓ src/functions/mergeRects.test.ts (1 test) 1ms
- ✓ src/functions/getUsableFileName.test.tsx (4 tests) 1ms
+ ✓ src/functions/mergeRects.test.ts (1 test) 2ms
+ ✓ src/functions/evalTemplate.test.ts (1 test) 2ms
+ ✓ src/functions/transformPath.test.ts (3 tests) 3ms
+ ✓ src/functions/getUsableFileName.test.tsx (4 tests) 3ms
+ ✓ src/functions/formatAncestryChain.test.ts (7 tests) 2ms
+ ✓ src/functions/cropPath.test.ts (2 tests) 2ms
 
- Test Files  5 passed (5)
-      Tests  11 passed (11)
-   Start at  18:29:05
-   Duration  687ms (transform 240ms, setup 0ms, collect 278ms, tests 7ms, environment 1ms, prepare 366ms)
+ Test Files  6 passed (6)
+      Tests  18 passed (18)
+   Start at  17:17:22
+   Duration  718ms (transform 282ms, setup 0ms, collect 336ms, tests 14ms, environment 1ms, prepare 463ms)
 

package/dist/adapters/HtmlElementTreeNode.d.ts

@@ -13,4 +13,5 @@ export declare class HtmlElementTreeNode implements TreeNode {
     getParent(): TreeNode | null;
     getSource(): Source | null;
     getComponent(): TreeNodeComponent | null;
+    getOwnerComponents(): TreeNodeComponent[];
 }

package/dist/adapters/HtmlElementTreeNode.js

@@ -18,7 +18,7 @@ export class HtmlElementTreeNode {
   getChildren() {
     const children = Array.from(this.element.children);
     return children.map(child => {
-      if (child instanceof HTMLElement) {
+      if (child instanceof HTMLElement || child instanceof SVGElement) {
         // @ts-ignore
         return new this.constructor(child);
       } else {
@@ -40,4 +40,7 @@ export class HtmlElementTreeNode {
   getComponent() {
     throw new Error("Method not implemented.");
   }
+  getOwnerComponents() {
+    return [];
+  }
 }

package/dist/adapters/adapterApi.d.ts

@@ -8,7 +8,7 @@ export type ElementInfo = {
 };
 export type FullElementInfo = {
     thisElement: ElementInfo;
-    htmlElement: HTMLElement;
+    htmlElement: HTMLElement | SVGElement;
     parentElements: ElementInfo[];
     componentBox: SimpleDOMRect;
     componentsLabels: LabelData[];

package/dist/adapters/jsx/getExpressionData.d.ts

@@ -1,2 +1,2 @@
 import type { ExpressionInfo, FileStorage } from "@locator/shared";
-export declare function getExpressionData(target: HTMLElement, fileData: FileStorage | null): ExpressionInfo | null;
+export declare function getExpressionData(target: Element, fileData: FileStorage | null): ExpressionInfo | null;

package/dist/adapters/jsx/getExpressionData.js

@@ -1,8 +1,12 @@
 import { parseDataId, parseDataPath } from "../../functions/parseDataId";
 export function getExpressionData(target, fileData) {
+  // Use getAttribute instead of dataset to support both HTML and SVG elements
+  const dataLocatorjs = target.getAttribute("data-locatorjs");
+  const dataLocatorjsId = target.getAttribute("data-locatorjs-id");
+
   // First check for data-locatorjs (path-based, for server components)
-  if (target.dataset.locatorjs) {
-    const parsed = parseDataPath(target.dataset.locatorjs);
+  if (dataLocatorjs) {
+    const parsed = parseDataPath(dataLocatorjs);
     if (parsed) {
       const [, line, column] = parsed;
 
@@ -33,8 +37,8 @@ export function getExpressionData(target, fileData) {
   }
 
   // Fall back to data-locatorjs-id (ID-based, traditional approach)
-  if (target.dataset.locatorjsId && fileData) {
-    const [, id] = parseDataId(target.dataset.locatorjsId);
+  if (dataLocatorjsId && fileData) {
+    const [, id] = parseDataId(dataLocatorjsId);
     const expData = fileData.expressions[Number(id)];
     if (expData) {
       return expData;

package/dist/adapters/jsx/getJSXComponentBoundingBox.d.ts

@@ -1,5 +1,5 @@
 import type { FileStorage } from "@locator/shared";
 import type { SimpleDOMRect } from "../../types/types";
-export declare function getJSXComponentBoundingBox(found: HTMLElement, locatorData: {
+export declare function getJSXComponentBoundingBox(found: Element, locatorData: {
     [filename: string]: FileStorage;
 }, componentFolder: string, componentId: number): SimpleDOMRect;

package/dist/adapters/jsx/getJSXComponentBoundingBox.js

@@ -9,19 +9,24 @@ export function getJSXComponentBoundingBox(found, locatorData, componentFolder,
     if (!parent) {
       return;
     }
-    if (parent instanceof HTMLElement) {
+    // Support both HTMLElement and SVGElement
+    if (parent instanceof HTMLElement || parent instanceof SVGElement) {
+      // Use getAttribute instead of dataset to support both HTML and SVG elements
+      const dataLocatorjs = parent.getAttribute("data-locatorjs");
+      const dataLocatorjsId = parent.getAttribute("data-locatorjs-id");
+
       // Check for either data-locatorjs (path-based) or data-locatorjs-id (ID-based)
-      if (parent.dataset.locatorjs || parent.dataset.locatorjsId) {
+      if (dataLocatorjs || dataLocatorjsId) {
         let fileFullPath;
-        if (parent.dataset.locatorjs) {
-          const parsed = parseDataPath(parent.dataset.locatorjs);
+        if (dataLocatorjs) {
+          const parsed = parseDataPath(dataLocatorjs);
           if (!parsed) {
             goParent(parent);
             return;
           }
           [fileFullPath] = parsed;
-        } else if (parent.dataset.locatorjsId) {
-          [fileFullPath] = parseDataId(parent.dataset.locatorjsId);
+        } else if (dataLocatorjsId) {
+          [fileFullPath] = parseDataId(dataLocatorjsId);
         } else {
           goParent(parent);
           return;

package/dist/adapters/jsx/jsxAdapter.js

@@ -5,10 +5,13 @@ import { getExpressionData } from "./getExpressionData";
 import { getJSXComponentBoundingBox } from "./getJSXComponentBoundingBox";
 export function getElementInfo(target) {
   const found = target.closest("[data-locatorjs-id], [data-locatorjs]");
-  if (found && found instanceof HTMLElement && found.dataset && (found.dataset.locatorjsId || found.dataset.locatorjs || found.dataset.locatorjsStyled)) {
-    const dataId = found.dataset.locatorjsId;
-    const dataPath = found.dataset.locatorjs;
-    const styledDataId = found.dataset.locatorjsStyled;
+
+  // Support both HTMLElement and SVGElement
+  // SVG elements don't have dataset, so use getAttribute instead
+  const dataId = found?.getAttribute("data-locatorjs-id");
+  const dataPath = found?.getAttribute("data-locatorjs");
+  const styledDataId = found?.getAttribute("data-locatorjs-styled");
+  if (found && (found instanceof HTMLElement || found instanceof SVGElement) && (dataId || dataPath || styledDataId)) {
     if (!dataId && !dataPath) {
       return null;
     }
@@ -89,8 +92,9 @@ export function getElementInfo(target) {
 }
 export class JSXTreeNodeElement extends HtmlElementTreeNode {
   getSource() {
-    const dataId = this.element.dataset.locatorjsId;
-    const dataPath = this.element.dataset.locatorjs;
+    // Use getAttribute instead of dataset to support both HTML and SVG elements
+    const dataId = this.element.getAttribute("data-locatorjs-id");
+    const dataPath = this.element.getAttribute("data-locatorjs");
     if (!dataId && !dataPath) {
       return null;
     }
@@ -131,8 +135,9 @@ export class JSXTreeNodeElement extends HtmlElementTreeNode {
     return null;
   }
   getComponent() {
-    const dataId = this.element.dataset.locatorjsId;
-    const dataPath = this.element.dataset.locatorjs;
+    // Use getAttribute instead of dataset to support both HTML and SVG elements
+    const dataId = this.element.getAttribute("data-locatorjs-id");
+    const dataPath = this.element.getAttribute("data-locatorjs");
     if (!dataId && !dataPath) {
       return null;
     }

package/dist/adapters/react/reactAdapter.d.ts

@@ -5,7 +5,16 @@ import { HtmlElementTreeNode } from "../HtmlElementTreeNode";
 export declare function getElementInfo(found: HTMLElement): FullElementInfo | null;
 export declare class ReactTreeNodeElement extends HtmlElementTreeNode {
     getSource(): Source | null;
+    private fiberToTreeNodeComponent;
     getComponent(): TreeNodeComponent | null;
+    /**
+     * Traverse the _debugOwner chain to collect all owner components.
+     * This finds wrapper components (like Sidebar) that don't render their own DOM elements
+     * but wrap other components (like GlassPanel) that do.
+     *
+     * Returns array from outermost owner (Sidebar) to innermost (GlassPanel).
+     */
+    getOwnerComponents(): TreeNodeComponent[];
 }
 declare const reactAdapter: AdapterObject;
 export default reactAdapter;

package/dist/adapters/react/reactAdapter.js

@@ -63,23 +63,61 @@ export class ReactTreeNodeElement extends HtmlElementTreeNode {
     }
     return null;
   }
+  fiberToTreeNodeComponent(fiber) {
+    const fiberLabel = getFiberLabel(fiber, findDebugSource(fiber)?.source);
+    return {
+      label: fiberLabel.label,
+      callLink: fiberLabel.link && {
+        fileName: fiberLabel.link.filePath,
+        lineNumber: fiberLabel.link.line,
+        columnNumber: fiberLabel.link.column,
+        projectPath: fiberLabel.link.projectPath
+      } || undefined
+    };
+  }
   getComponent() {
     const fiber = findFiberByHtmlElement(this.element, false);
     const componentFiber = fiber?._debugOwner;
     if (componentFiber) {
-      const fiberLabel = getFiberLabel(componentFiber, findDebugSource(componentFiber)?.source);
-      return {
-        label: fiberLabel.label,
-        callLink: fiberLabel.link && {
-          fileName: fiberLabel.link.filePath,
-          lineNumber: fiberLabel.link.line,
-          columnNumber: fiberLabel.link.column,
-          projectPath: fiberLabel.link.projectPath
-        } || undefined
-      };
+      return this.fiberToTreeNodeComponent(componentFiber);
     }
     return null;
   }
+
+  /**
+   * Traverse the _debugOwner chain to collect all owner components.
+   * This finds wrapper components (like Sidebar) that don't render their own DOM elements
+   * but wrap other components (like GlassPanel) that do.
+   *
+   * Returns array from outermost owner (Sidebar) to innermost (GlassPanel).
+   */
+  getOwnerComponents() {
+    const fiber = findFiberByHtmlElement(this.element, false);
+    if (!fiber) return [];
+
+    // Get the parent DOM element's owner to know when to stop
+    const parentElement = this.element.parentElement;
+    let parentOwnerFiber = null;
+    if (parentElement) {
+      const parentFiber = findFiberByHtmlElement(parentElement, false);
+      parentOwnerFiber = parentFiber?._debugOwner || null;
+    }
+    const components = [];
+    let currentFiber = fiber._debugOwner;
+
+    // Traverse up the _debugOwner chain until we hit the parent's owner or run out
+    while (currentFiber) {
+      // Stop if we've reached the parent DOM element's owner component
+      if (parentOwnerFiber && currentFiber === parentOwnerFiber) {
+        break;
+      }
+      components.push(this.fiberToTreeNodeComponent(currentFiber));
+      currentFiber = currentFiber._debugOwner || null;
+    }
+
+    // Reverse so outermost (Sidebar) comes first, innermost (GlassPanel) last
+    return components.reverse();
+  }
 }
 function getTree(element) {
   const originalRoot = new ReactTreeNodeElement(element);

package/dist/components/Runtime.js

@@ -39,14 +39,36 @@ function Runtime(props) {
     setHoldingModKey(e.altKey);
   }
   function mouseOverListener(e) {
-    const target = e.target;
-    if (target && target instanceof HTMLElement) {
-      if (isLocatorsOwnElement(target)) {
-        return;
+    // Also update modifier state
+    setHoldingModKey(e.altKey);
+
+    // Use elementsFromPoint to find elements including ones with pointer-events-none
+    const elementsAtPoint = document.elementsFromPoint(e.clientX, e.clientY);
+
+    // Find the topmost element with locator data for highlighting
+    let element = null;
+    for (const el of elementsAtPoint) {
+      if (isLocatorsOwnElement(el)) {
+        continue;
+      }
+      if (el instanceof HTMLElement || el instanceof SVGElement) {
+        const withLocator = el.closest('[data-locatorjs-id], [data-locatorjs]');
+        if (withLocator) {
+          element = withLocator;
+          break;
+        }
+      }
+    }
+
+    // Fallback to e.target
+    if (!element) {
+      const target = e.target;
+      if (target && (target instanceof HTMLElement || target instanceof SVGElement)) {
+        element = target instanceof SVGElement ? target.closest('[data-locatorjs-id], [data-locatorjs]') ?? target.closest('svg') ?? target : target;
       }
-      setCurrentElement(target);
-      // Also update modifier state
-      setHoldingModKey(e.altKey);
+    }
+    if (element && !isLocatorsOwnElement(element)) {
+      setCurrentElement(element);
     }
   }
   function mouseDownUpListener(e) {
@@ -62,31 +84,59 @@ function Runtime(props) {
     if (!e.altKey && !isCombinationModifiersPressed(e) && !locatorActive()) {
       return;
     }
-    const target = e.target;
-    if (target && target instanceof HTMLElement) {
-      if (target.shadowRoot) {
-        return;
+
+    // Use elementsFromPoint to find all elements at click position,
+    // including ones with pointer-events-none (like canvas overlays)
+    const elementsAtPoint = document.elementsFromPoint(e.clientX, e.clientY);
+
+    // Find the topmost element with locator data
+    let element = null;
+    for (const el of elementsAtPoint) {
+      if (isLocatorsOwnElement(el)) {
+        continue;
       }
-      if (isLocatorsOwnElement(target)) {
-        return;
+      if (el instanceof HTMLElement || el instanceof SVGElement) {
+        // Check if this element or its closest ancestor has locator data
+        const withLocator = el.closest('[data-locatorjs-id], [data-locatorjs]');
+        if (withLocator) {
+          element = withLocator;
+          break;
+        }
       }
-      e.preventDefault();
-      e.stopPropagation();
+    }
 
-      // Copy ancestry to clipboard on alt+click
-      const treeNode = createTreeNode(target, props.adapterId);
-      if (treeNode) {
-        const ancestry = collectAncestry(treeNode);
-        const formatted = formatAncestryChain(ancestry);
-        navigator.clipboard.writeText(formatted).then(() => {
-          setToastMessage("Copied to clipboard");
-        });
+    // Fallback to e.target if elementsFromPoint didn't find anything
+    if (!element) {
+      const target = e.target;
+      if (target && (target instanceof HTMLElement || target instanceof SVGElement)) {
+        element = target instanceof SVGElement ? target.closest('[data-locatorjs-id], [data-locatorjs]') ?? target.closest('svg') ?? target : target;
       }
+    }
+    if (!element) {
+      return;
+    }
+    if (element instanceof HTMLElement && element.shadowRoot) {
+      return;
+    }
+    if (isLocatorsOwnElement(element)) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
 
-      // Deactivate toggle after click
-      if (locatorActive()) {
-        setLocatorActive(false);
-      }
+    // Copy ancestry to clipboard on alt+click
+    const treeNode = createTreeNode(element, props.adapterId);
+    if (treeNode) {
+      const ancestry = collectAncestry(treeNode);
+      const formatted = formatAncestryChain(ancestry);
+      navigator.clipboard.writeText(formatted).then(() => {
+        setToastMessage("Copied to clipboard");
+      });
+    }
+
+    // Deactivate toggle after click
+    if (locatorActive()) {
+      setLocatorActive(false);
     }
   }
   function scrollListener() {

package/dist/functions/formatAncestryChain.d.ts

@@ -1,4 +1,9 @@
 import { TreeNode } from "../types/TreeNode";
+export interface OwnerComponentInfo {
+    name: string;
+    filePath?: string;
+    line?: number;
+}
 export interface AncestryItem {
     elementName: string;
     componentName?: string;
@@ -6,6 +11,8 @@ export interface AncestryItem {
     line?: number;
     id?: string;
     nthChild?: number;
+    /** All owner components from outermost (Sidebar) to innermost (GlassPanel) */
+    ownerComponents?: OwnerComponentInfo[];
 }
 export declare function collectAncestry(node: TreeNode): AncestryItem[];
 export declare function formatAncestryChain(items: AncestryItem[]): string;

package/dist/functions/formatAncestryChain.js

@@ -19,6 +19,13 @@ function getNthChildIfAmbiguous(element) {
   const index = siblings.indexOf(element);
   return index + 1; // 1-indexed for CSS nth-child compatibility
 }
+function treeNodeComponentToOwnerInfo(comp) {
+  return {
+    name: comp.label,
+    filePath: comp.callLink?.fileName,
+    line: comp.callLink?.lineNumber
+  };
+}
 export function collectAncestry(node) {
   const items = [];
   let current = node;
@@ -28,7 +35,6 @@ export function collectAncestry(node) {
       current = current.getParent();
       continue;
     }
-    const component = current.getComponent();
     const source = current.getSource();
     const item = {
       elementName: current.name
@@ -47,11 +53,27 @@ export function collectAncestry(node) {
         }
       }
     }
-    if (component) {
-      item.componentName = component.label;
-      if (component.callLink) {
-        item.filePath = component.callLink.fileName;
-        item.line = component.callLink.lineNumber;
+
+    // Get all owner components (from outermost like Sidebar to innermost like GlassPanel)
+    const ownerComponents = current.getOwnerComponents();
+    const outermost = ownerComponents[0];
+    if (outermost) {
+      item.ownerComponents = ownerComponents.map(treeNodeComponentToOwnerInfo);
+      // Use outermost component as the primary component name
+      item.componentName = outermost.label;
+      if (outermost.callLink) {
+        item.filePath = outermost.callLink.fileName;
+        item.line = outermost.callLink.lineNumber;
+      }
+    } else {
+      // Fallback to single component if getOwnerComponents not available
+      const component = current.getComponent();
+      if (component) {
+        item.componentName = component.label;
+        if (component.callLink) {
+          item.filePath = component.callLink.fileName;
+          item.line = component.callLink.lineNumber;
+        }
       }
     }
     if (!item.filePath && source) {
@@ -88,7 +110,12 @@ export function formatAncestryChain(items) {
       selector += `#${item.id}`;
     }
     let description = selector;
-    if (item.componentName) {
+
+    // Show all owner components if available (Sidebar > GlassPanel)
+    if (item.ownerComponents && item.ownerComponents.length > 0) {
+      const componentChain = item.ownerComponents.map(c => c.name).join(" > ");
+      description = `${selector} in ${componentChain}`;
+    } else if (item.componentName) {
       description = `${selector} in ${item.componentName}`;
     }
     const location = item.filePath ? ` at ${item.filePath}:${item.line}` : "";

package/dist/functions/formatAncestryChain.test.js

@@ -78,4 +78,45 @@ describe("formatAncestryChain", () => {
     const result = formatAncestryChain([]);
     expect(result).toBe("");
   });
+  it("shows all owner components when ownerComponents is provided", () => {
+    const items = [{
+      elementName: "div",
+      id: "sidebar-panel",
+      componentName: "Sidebar",
+      filePath: "src/components/game/Sidebar.jsx",
+      line: 78,
+      ownerComponents: [{
+        name: "Sidebar",
+        filePath: "src/components/game/Sidebar.jsx",
+        line: 78
+      }, {
+        name: "GlassPanel",
+        filePath: "src/components/common/GlassPanel.jsx",
+        line: 39
+      }]
+    }, {
+      elementName: "div",
+      componentName: "App",
+      filePath: "src/App.jsx",
+      line: 104
+    }];
+    const result = formatAncestryChain(items);
+    expect(result).toBe(`div in App at src/App.jsx:104
+    └─ div#sidebar-panel in Sidebar > GlassPanel at src/components/game/Sidebar.jsx:78`);
+  });
+  it("shows single owner component without arrow when only one in chain", () => {
+    const items = [{
+      elementName: "button",
+      componentName: "Button",
+      ownerComponents: [{
+        name: "Button",
+        filePath: "src/Button.tsx",
+        line: 10
+      }],
+      filePath: "src/Button.tsx",
+      line: 10
+    }];
+    const result = formatAncestryChain(items);
+    expect(result).toBe("button in Button at src/Button.tsx:10");
+  });
 });

package/dist/types/TreeNode.d.ts

@@ -8,6 +8,12 @@ export interface TreeNode {
     getChildren(): TreeNode[];
     getSource(): Source | null;
     getComponent(): TreeNodeComponent | null;
+    /**
+     * Get all owner components in the ownership chain.
+     * For React: traverses _debugOwner chain until hitting parent DOM element's owner.
+     * Returns array from outermost (user's component like Sidebar) to innermost (wrapper like GlassPanel).
+     */
+    getOwnerComponents(): TreeNodeComponent[];
 }
 export type TreeNodeComponent = {
     label: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treelocator/runtime",
-  "version": "0.1.5",
+  "version": "0.1.8",
   "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",
@@ -72,5 +72,5 @@
     "directory": "packages/runtime"
   },
   "license": "MIT",
-  "gitHead": "49e1500d0dee128e4e7b549a012f406cb0b55568"
+  "gitHead": "69fb05167bd689b2e3602fcbc74a70912695f136"
 }

package/src/adapters/HtmlElementTreeNode.ts

@@ -25,9 +25,9 @@ export class HtmlElementTreeNode implements TreeNode {
     const children = Array.from(this.element.children);
     return children
       .map((child) => {
-        if (child instanceof HTMLElement) {
+        if (child instanceof HTMLElement || child instanceof SVGElement) {
           // @ts-ignore
-          return new this.constructor(child);
+          return new this.constructor(child as HTMLElement);
         } else {
           return null;
         }
@@ -48,4 +48,7 @@ export class HtmlElementTreeNode implements TreeNode {
   getComponent(): TreeNodeComponent | null {
     throw new Error("Method not implemented.");
   }
+  getOwnerComponents(): TreeNodeComponent[] {
+    return [];
+  }
 }

package/src/adapters/adapterApi.ts

@@ -10,7 +10,7 @@ export type ElementInfo = {
 
 export type FullElementInfo = {
   thisElement: ElementInfo;
-  htmlElement: HTMLElement;
+  htmlElement: HTMLElement | SVGElement;
   parentElements: ElementInfo[];
   componentBox: SimpleDOMRect;
   componentsLabels: LabelData[];

package/src/adapters/jsx/getExpressionData.ts

@@ -2,12 +2,16 @@ import type { ExpressionInfo, FileStorage } from "@locator/shared";
 import { parseDataId, parseDataPath } from "../../functions/parseDataId";
 
 export function getExpressionData(
-  target: HTMLElement,
+  target: Element,
   fileData: FileStorage | null
 ): ExpressionInfo | null {
+  // Use getAttribute instead of dataset to support both HTML and SVG elements
+  const dataLocatorjs = target.getAttribute("data-locatorjs");
+  const dataLocatorjsId = target.getAttribute("data-locatorjs-id");
+
   // First check for data-locatorjs (path-based, for server components)
-  if (target.dataset.locatorjs) {
-    const parsed = parseDataPath(target.dataset.locatorjs);
+  if (dataLocatorjs) {
+    const parsed = parseDataPath(dataLocatorjs);
     if (parsed) {
       const [, line, column] = parsed;
 
@@ -35,8 +39,8 @@ export function getExpressionData(
   }
 
   // Fall back to data-locatorjs-id (ID-based, traditional approach)
-  if (target.dataset.locatorjsId && fileData) {
-    const [, id] = parseDataId(target.dataset.locatorjsId);
+  if (dataLocatorjsId && fileData) {
+    const [, id] = parseDataId(dataLocatorjsId);
     const expData = fileData.expressions[Number(id)];
     if (expData) {
       return expData;

package/src/adapters/jsx/getJSXComponentBoundingBox.ts

@@ -5,32 +5,37 @@ import type { SimpleDOMRect } from "../../types/types";
 import { getExpressionData } from "./getExpressionData";
 
 export function getJSXComponentBoundingBox(
-  found: HTMLElement,
+  found: Element,
   locatorData: { [filename: string]: FileStorage },
   componentFolder: string,
   componentId: number
 ): SimpleDOMRect {
   let composedBox: SimpleDOMRect = found.getBoundingClientRect();
   // Currently it works well only for components with one root element, but for components with multiple root elements we would need to track instance ids.
-  function goParent(current: HTMLElement) {
+  function goParent(current: Element) {
     const parent = current.parentNode;
     if (!parent) {
       return;
     }
-    if (parent instanceof HTMLElement) {
+    // Support both HTMLElement and SVGElement
+    if (parent instanceof HTMLElement || parent instanceof SVGElement) {
+      // Use getAttribute instead of dataset to support both HTML and SVG elements
+      const dataLocatorjs = parent.getAttribute("data-locatorjs");
+      const dataLocatorjsId = parent.getAttribute("data-locatorjs-id");
+
       // Check for either data-locatorjs (path-based) or data-locatorjs-id (ID-based)
-      if (parent.dataset.locatorjs || parent.dataset.locatorjsId) {
+      if (dataLocatorjs || dataLocatorjsId) {
         let fileFullPath: string;
 
-        if (parent.dataset.locatorjs) {
-          const parsed = parseDataPath(parent.dataset.locatorjs);
+        if (dataLocatorjs) {
+          const parsed = parseDataPath(dataLocatorjs);
           if (!parsed) {
             goParent(parent);
             return;
           }
           [fileFullPath] = parsed;
-        } else if (parent.dataset.locatorjsId) {
-          [fileFullPath] = parseDataId(parent.dataset.locatorjsId);
+        } else if (dataLocatorjsId) {
+          [fileFullPath] = parseDataId(dataLocatorjsId);
         } else {
           goParent(parent);
           return;

package/src/adapters/jsx/jsxAdapter.ts

@@ -20,17 +20,17 @@ import { getJSXComponentBoundingBox } from "./getJSXComponentBoundingBox";
 export function getElementInfo(target: HTMLElement): FullElementInfo | null {
   const found = target.closest("[data-locatorjs-id], [data-locatorjs]");
 
+  // Support both HTMLElement and SVGElement
+  // SVG elements don't have dataset, so use getAttribute instead
+  const dataId = found?.getAttribute("data-locatorjs-id");
+  const dataPath = found?.getAttribute("data-locatorjs");
+  const styledDataId = found?.getAttribute("data-locatorjs-styled");
+
   if (
     found &&
-    found instanceof HTMLElement &&
-    found.dataset &&
-    (found.dataset.locatorjsId ||
-      found.dataset.locatorjs ||
-      found.dataset.locatorjsStyled)
+    (found instanceof HTMLElement || found instanceof SVGElement) &&
+    (dataId || dataPath || styledDataId)
   ) {
-    const dataId = found.dataset.locatorjsId;
-    const dataPath = found.dataset.locatorjs;
-    const styledDataId = found.dataset.locatorjsStyled;
 
     if (!dataId && !dataPath) {
       return null;
@@ -135,8 +135,9 @@ export function getElementInfo(target: HTMLElement): FullElementInfo | null {
 
 export class JSXTreeNodeElement extends HtmlElementTreeNode {
   getSource(): Source | null {
-    const dataId = this.element.dataset.locatorjsId;
-    const dataPath = this.element.dataset.locatorjs;
+    // Use getAttribute instead of dataset to support both HTML and SVG elements
+    const dataId = this.element.getAttribute("data-locatorjs-id");
+    const dataPath = this.element.getAttribute("data-locatorjs");
 
     if (!dataId && !dataPath) {
       return null;
@@ -184,8 +185,9 @@ export class JSXTreeNodeElement extends HtmlElementTreeNode {
     return null;
   }
   getComponent(): TreeNodeComponent | null {
-    const dataId = this.element.dataset.locatorjsId;
-    const dataPath = this.element.dataset.locatorjs;
+    // Use getAttribute instead of dataset to support both HTML and SVG elements
+    const dataId = this.element.getAttribute("data-locatorjs-id");
+    const dataPath = this.element.getAttribute("data-locatorjs");
 
     if (!dataId && !dataPath) {
       return null;

package/src/adapters/react/reactAdapter.ts

@@ -81,30 +81,68 @@ export class ReactTreeNodeElement extends HtmlElementTreeNode {
     }
     return null;
   }
+
+  private fiberToTreeNodeComponent(fiber: Fiber): TreeNodeComponent {
+    const fiberLabel = getFiberLabel(fiber, findDebugSource(fiber)?.source);
+    return {
+      label: fiberLabel.label,
+      callLink:
+        (fiberLabel.link && {
+          fileName: fiberLabel.link.filePath,
+          lineNumber: fiberLabel.link.line,
+          columnNumber: fiberLabel.link.column,
+          projectPath: fiberLabel.link.projectPath,
+        }) ||
+        undefined,
+    };
+  }
+
   getComponent(): TreeNodeComponent | null {
     const fiber = findFiberByHtmlElement(this.element, false);
     const componentFiber = fiber?._debugOwner;
 
     if (componentFiber) {
-      const fiberLabel = getFiberLabel(
-        componentFiber,
-        findDebugSource(componentFiber)?.source
-      );
-
-      return {
-        label: fiberLabel.label,
-        callLink:
-          (fiberLabel.link && {
-            fileName: fiberLabel.link.filePath,
-            lineNumber: fiberLabel.link.line,
-            columnNumber: fiberLabel.link.column,
-            projectPath: fiberLabel.link.projectPath,
-          }) ||
-          undefined,
-      };
+      return this.fiberToTreeNodeComponent(componentFiber);
     }
     return null;
   }
+
+  /**
+   * Traverse the _debugOwner chain to collect all owner components.
+   * This finds wrapper components (like Sidebar) that don't render their own DOM elements
+   * but wrap other components (like GlassPanel) that do.
+   *
+   * Returns array from outermost owner (Sidebar) to innermost (GlassPanel).
+   */
+  getOwnerComponents(): TreeNodeComponent[] {
+    const fiber = findFiberByHtmlElement(this.element, false);
+    if (!fiber) return [];
+
+    // Get the parent DOM element's owner to know when to stop
+    const parentElement = this.element.parentElement;
+    let parentOwnerFiber: Fiber | null = null;
+    if (parentElement) {
+      const parentFiber = findFiberByHtmlElement(parentElement, false);
+      parentOwnerFiber = parentFiber?._debugOwner || null;
+    }
+
+    const components: TreeNodeComponent[] = [];
+    let currentFiber = fiber._debugOwner;
+
+    // Traverse up the _debugOwner chain until we hit the parent's owner or run out
+    while (currentFiber) {
+      // Stop if we've reached the parent DOM element's owner component
+      if (parentOwnerFiber && currentFiber === parentOwnerFiber) {
+        break;
+      }
+
+      components.push(this.fiberToTreeNodeComponent(currentFiber));
+      currentFiber = currentFiber._debugOwner || null;
+    }
+
+    // Reverse so outermost (Sidebar) comes first, innermost (GlassPanel) last
+    return components.reverse();
+  }
 }
 
 function getTree(element: HTMLElement): TreeState | null {

package/src/components/Runtime.tsx

@@ -48,15 +48,41 @@ function Runtime(props: RuntimeProps) {
   }
 
   function mouseOverListener(e: MouseEvent) {
-    const target = e.target;
-    if (target && target instanceof HTMLElement) {
-      if (isLocatorsOwnElement(target)) {
-        return;
+    // Also update modifier state
+    setHoldingModKey(e.altKey);
+
+    // Use elementsFromPoint to find elements including ones with pointer-events-none
+    const elementsAtPoint = document.elementsFromPoint(e.clientX, e.clientY);
+
+    // Find the topmost element with locator data for highlighting
+    let element: HTMLElement | null = null;
+    for (const el of elementsAtPoint) {
+      if (isLocatorsOwnElement(el as HTMLElement)) {
+        continue;
+      }
+      if (el instanceof HTMLElement || el instanceof SVGElement) {
+        const withLocator = el.closest('[data-locatorjs-id], [data-locatorjs]');
+        if (withLocator) {
+          element = withLocator as HTMLElement;
+          break;
+        }
+      }
+    }
+
+    // Fallback to e.target
+    if (!element) {
+      const target = e.target;
+      if (target && (target instanceof HTMLElement || target instanceof SVGElement)) {
+        element = target instanceof SVGElement
+          ? (target.closest('[data-locatorjs-id], [data-locatorjs]') as HTMLElement | null) ??
+            (target.closest('svg') as HTMLElement | null) ??
+            (target as unknown as HTMLElement)
+          : target;
       }
+    }
 
-      setCurrentElement(target);
-      // Also update modifier state
-      setHoldingModKey(e.altKey);
+    if (element && !isLocatorsOwnElement(element)) {
+      setCurrentElement(element);
     }
   }
 
@@ -76,33 +102,66 @@ function Runtime(props: RuntimeProps) {
       return;
     }
 
-    const target = e.target;
-    if (target && target instanceof HTMLElement) {
-      if (target.shadowRoot) {
-        return;
+    // Use elementsFromPoint to find all elements at click position,
+    // including ones with pointer-events-none (like canvas overlays)
+    const elementsAtPoint = document.elementsFromPoint(e.clientX, e.clientY);
+
+    // Find the topmost element with locator data
+    let element: Element | null = null;
+    for (const el of elementsAtPoint) {
+      if (isLocatorsOwnElement(el as HTMLElement)) {
+        continue;
       }
+      if (el instanceof HTMLElement || el instanceof SVGElement) {
+        // Check if this element or its closest ancestor has locator data
+        const withLocator = el.closest('[data-locatorjs-id], [data-locatorjs]');
+        if (withLocator) {
+          element = withLocator;
+          break;
+        }
+      }
+    }
 
-      if (isLocatorsOwnElement(target)) {
-        return;
+    // Fallback to e.target if elementsFromPoint didn't find anything
+    if (!element) {
+      const target = e.target;
+      if (target && (target instanceof HTMLElement || target instanceof SVGElement)) {
+        element = target instanceof SVGElement
+          ? (target.closest('[data-locatorjs-id], [data-locatorjs]') as Element | null) ??
+            (target.closest('svg') as Element | null) ??
+            target
+          : target;
       }
+    }
 
-      e.preventDefault();
-      e.stopPropagation();
+    if (!element) {
+      return;
+    }
 
-      // Copy ancestry to clipboard on alt+click
-      const treeNode = createTreeNode(target, props.adapterId);
-      if (treeNode) {
-        const ancestry = collectAncestry(treeNode);
-        const formatted = formatAncestryChain(ancestry);
-        navigator.clipboard.writeText(formatted).then(() => {
-          setToastMessage("Copied to clipboard");
-        });
-      }
+    if (element instanceof HTMLElement && element.shadowRoot) {
+      return;
+    }
 
-      // Deactivate toggle after click
-      if (locatorActive()) {
-        setLocatorActive(false);
-      }
+    if (isLocatorsOwnElement(element as HTMLElement)) {
+      return;
+    }
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    // Copy ancestry to clipboard on alt+click
+    const treeNode = createTreeNode(element as HTMLElement, props.adapterId);
+    if (treeNode) {
+      const ancestry = collectAncestry(treeNode);
+      const formatted = formatAncestryChain(ancestry);
+      navigator.clipboard.writeText(formatted).then(() => {
+        setToastMessage("Copied to clipboard");
+      });
+    }
+
+    // Deactivate toggle after click
+    if (locatorActive()) {
+      setLocatorActive(false);
     }
   }
 

package/src/functions/formatAncestryChain.test.ts

@@ -91,4 +91,50 @@ describe("formatAncestryChain", () => {
     const result = formatAncestryChain([]);
     expect(result).toBe("");
   });
+
+  it("shows all owner components when ownerComponents is provided", () => {
+    const items: AncestryItem[] = [
+      {
+        elementName: "div",
+        id: "sidebar-panel",
+        componentName: "Sidebar",
+        filePath: "src/components/game/Sidebar.jsx",
+        line: 78,
+        ownerComponents: [
+          {
+            name: "Sidebar",
+            filePath: "src/components/game/Sidebar.jsx",
+            line: 78,
+          },
+          {
+            name: "GlassPanel",
+            filePath: "src/components/common/GlassPanel.jsx",
+            line: 39,
+          },
+        ],
+      },
+      { elementName: "div", componentName: "App", filePath: "src/App.jsx", line: 104 },
+    ];
+
+    const result = formatAncestryChain(items);
+    expect(result).toBe(
+      `div in App at src/App.jsx:104
+    └─ div#sidebar-panel in Sidebar > GlassPanel at src/components/game/Sidebar.jsx:78`
+    );
+  });
+
+  it("shows single owner component without arrow when only one in chain", () => {
+    const items: AncestryItem[] = [
+      {
+        elementName: "button",
+        componentName: "Button",
+        ownerComponents: [{ name: "Button", filePath: "src/Button.tsx", line: 10 }],
+        filePath: "src/Button.tsx",
+        line: 10,
+      },
+    ];
+
+    const result = formatAncestryChain(items);
+    expect(result).toBe("button in Button at src/Button.tsx:10");
+  });
 });

package/src/functions/formatAncestryChain.ts

@@ -1,4 +1,10 @@
-import { TreeNode, TreeNodeElement } from "../types/TreeNode";
+import { TreeNode, TreeNodeComponent, TreeNodeElement } from "../types/TreeNode";
+
+export interface OwnerComponentInfo {
+  name: string;
+  filePath?: string;
+  line?: number;
+}
 
 export interface AncestryItem {
   elementName: string;
@@ -7,6 +13,8 @@ export interface AncestryItem {
   line?: number;
   id?: string;
   nthChild?: number; // 1-indexed, only set when there are ambiguous siblings
+  /** All owner components from outermost (Sidebar) to innermost (GlassPanel) */
+  ownerComponents?: OwnerComponentInfo[];
 }
 
 // Elements to exclude from ancestry (not useful for debugging)
@@ -36,6 +44,16 @@ function getNthChildIfAmbiguous(element: Element): number | undefined {
   return index + 1; // 1-indexed for CSS nth-child compatibility
 }
 
+function treeNodeComponentToOwnerInfo(
+  comp: TreeNodeComponent
+): OwnerComponentInfo {
+  return {
+    name: comp.label,
+    filePath: comp.callLink?.fileName,
+    line: comp.callLink?.lineNumber,
+  };
+}
+
 export function collectAncestry(node: TreeNode): AncestryItem[] {
   const items: AncestryItem[] = [];
   let current: TreeNode | null = node;
@@ -47,7 +65,6 @@ export function collectAncestry(node: TreeNode): AncestryItem[] {
       continue;
     }
 
-    const component = current.getComponent();
     const source = current.getSource();
 
     const item: AncestryItem = {
@@ -68,11 +85,26 @@ export function collectAncestry(node: TreeNode): AncestryItem[] {
       }
     }
 
-    if (component) {
-      item.componentName = component.label;
-      if (component.callLink) {
-        item.filePath = component.callLink.fileName;
-        item.line = component.callLink.lineNumber;
+    // Get all owner components (from outermost like Sidebar to innermost like GlassPanel)
+    const ownerComponents = current.getOwnerComponents();
+    const outermost = ownerComponents[0];
+    if (outermost) {
+      item.ownerComponents = ownerComponents.map(treeNodeComponentToOwnerInfo);
+      // Use outermost component as the primary component name
+      item.componentName = outermost.label;
+      if (outermost.callLink) {
+        item.filePath = outermost.callLink.fileName;
+        item.line = outermost.callLink.lineNumber;
+      }
+    } else {
+      // Fallback to single component if getOwnerComponents not available
+      const component = current.getComponent();
+      if (component) {
+        item.componentName = component.label;
+        if (component.callLink) {
+          item.filePath = component.callLink.fileName;
+          item.line = component.callLink.lineNumber;
+        }
       }
     }
 
@@ -116,7 +148,12 @@ export function formatAncestryChain(items: AncestryItem[]): string {
     }
 
     let description = selector;
-    if (item.componentName) {
+
+    // Show all owner components if available (Sidebar > GlassPanel)
+    if (item.ownerComponents && item.ownerComponents.length > 0) {
+      const componentChain = item.ownerComponents.map((c) => c.name).join(" > ");
+      description = `${selector} in ${componentChain}`;
+    } else if (item.componentName) {
       description = `${selector} in ${item.componentName}`;
     }
 

package/src/types/TreeNode.ts

@@ -9,6 +9,12 @@ export interface TreeNode {
   getChildren(): TreeNode[];
   getSource(): Source | null;
   getComponent(): TreeNodeComponent | null;
+  /**
+   * Get all owner components in the ownership chain.
+   * For React: traverses _debugOwner chain until hitting parent DOM element's owner.
+   * Returns array from outermost (user's component like Sidebar) to innermost (wrapper like GlassPanel).
+   */
+  getOwnerComponents(): TreeNodeComponent[];
 }
 
 export type TreeNodeComponent = {