@treelocator/runtime 0.1.5 → 0.1.7

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.7 build /Users/wende/projects/locatorjs/packages/runtime
 > concurrently pnpm:build:*
 
+[babel] 
+[babel] > @treelocator/runtime@0.1.7 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.5 build:ts /Users/wende/projects/locatorjs/packages/runtime
+[ts] > @treelocator/runtime@0.1.7 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] > 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] > @treelocator/runtime@0.1.7 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] > babel src --out-dir dist --extensions .js,.jsx,.ts,.tsx
-[babel] 
+[tailwind] 
+[tailwind] > @treelocator/runtime@0.1.7 build:tailwind /Users/wende/projects/locatorjs/packages/runtime
+[tailwind] > tailwindcss -i ./src/main.css -o ./dist/output.css
+[tailwind] 
 [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 180ms.
 [tailwind] pnpm run build:tailwind exited with code 0
-[babel] Successfully compiled 72 files with Babel (2364ms).
+[babel] Successfully compiled 72 files with Babel (691ms).
 [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/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('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.7",
   "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": "233b05abf1f13da9e1d49b73db62bb8561636618"
 }

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/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,39 @@ 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('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 +100,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 = {