@treelocator/runtime 0.4.5 → 0.4.7

package/dist/_generated_styles.js

@@ -879,10 +879,6 @@ input:where([type='file']):focus {
   left: 0.25rem;
 }
 
-.left-1\\/2 {
-  left: 50%;
-}
-
 .left-3 {
   left: 0.75rem;
 }
@@ -895,10 +891,6 @@ input:where([type='file']):focus {
   top: 0.25rem;
 }
 
-.top-1\\/2 {
-  top: 50%;
-}
-
 .z-10 {
   z-index: 10;
 }
@@ -1078,11 +1070,6 @@ input:where([type='file']):focus {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.-translate-x-1\\/2 {
-  --tw-translate-x: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .-translate-x-full {
   --tw-translate-x: -100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1093,11 +1080,6 @@ input:where([type='file']):focus {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.-translate-y-1\\/2 {
-  --tw-translate-y: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .translate-x-full {
   --tw-translate-x: 100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1475,11 +1457,6 @@ input:where([type='file']):focus {
   padding-bottom: 0px;
 }
 
-.py-0\\.5 {
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
-}
-
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -1813,22 +1790,5 @@ input:where([type='file']):focus {
 
 .ease-out {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-}
-
-.hover\\:bg-white\\/30:hover {
-  background-color: rgb(255 255 255 / 0.3);
-}
-
-.hover\\:text-gray-100:hover {
-  --tw-text-opacity: 1;
-  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
-}
-
-.group\\/tooltip:hover .group-hover\\/tooltip\\:visible {
-  visibility: visible;
-}
-
-.group\\/tooltip:hover .group-hover\\/tooltip\\:opacity-100 {
-  opacity: 1;
 }`;
 export default styles;

package/dist/functions/formatAncestryChain.d.ts

@@ -19,8 +19,10 @@ export interface AncestryItem {
 }
 export declare function collectAncestry(node: TreeNode): AncestryItem[];
 /**
- * Truncate ancestry from the bottom (clicked element) up to and including
- * the first item that has a filePath. Everything above that is discarded.
+ * Truncate ancestry to keep only the local context.
+ * - If the clicked element has no file: keep up to the first ancestor with a file.
+ * - If the clicked element has a file: keep up to the first ancestor with a DIFFERENT file.
+ * Checks both client filePath and serverComponents for file info.
  * The ancestry array is bottom-up: index 0 = clicked element, last = root.
  */
 export declare function truncateAtFirstFile(items: AncestryItem[]): AncestryItem[];

package/dist/functions/formatAncestryChain.js

@@ -123,14 +123,44 @@ function getInnermostNamedComponent(item) {
 }
 
 /**
- * Truncate ancestry from the bottom (clicked element) up to and including
- * the first item that has a filePath. Everything above that is discarded.
+ * Get the effective file path from an AncestryItem, checking both
+ * client filePath and serverComponents (Next.js RSC, Phoenix, etc.).
+ */
+function getItemFilePath(item) {
+  if (item.filePath) return item.filePath;
+  if (item.serverComponents && item.serverComponents.length > 0) {
+    const comp = item.serverComponents.find(sc => sc.type === "component");
+    if (comp) return comp.filePath;
+    return item.serverComponents[0].filePath;
+  }
+  return undefined;
+}
+
+/**
+ * Truncate ancestry to keep only the local context.
+ * - If the clicked element has no file: keep up to the first ancestor with a file.
+ * - If the clicked element has a file: keep up to the first ancestor with a DIFFERENT file.
+ * Checks both client filePath and serverComponents for file info.
  * The ancestry array is bottom-up: index 0 = clicked element, last = root.
  */
 export function truncateAtFirstFile(items) {
-  const firstWithFile = items.findIndex(item => item.filePath);
-  if (firstWithFile === -1) return items;
-  return items.slice(0, firstWithFile + 1);
+  if (items.length === 0) return items;
+  const clickedFile = getItemFilePath(items[0]);
+  if (!clickedFile) {
+    // Clicked element has no file: find first ancestor with any file
+    const firstWithFile = items.findIndex(item => getItemFilePath(item));
+    if (firstWithFile === -1) return items;
+    return items.slice(0, firstWithFile + 1);
+  }
+
+  // Clicked element has a file: find first ancestor with a different file
+  for (let i = 1; i < items.length; i++) {
+    const ancestorFile = getItemFilePath(items[i]);
+    if (ancestorFile && ancestorFile !== clickedFile) {
+      return items.slice(0, i + 1);
+    }
+  }
+  return items;
 }
 export function formatAncestryChain(items) {
   if (items.length === 0) {

package/dist/functions/formatAncestryChain.test.js

@@ -273,7 +273,7 @@ describe("formatAncestryChain", () => {
         line: 10
       }]);
     });
-    it("returns just the clicked element when it already has a filePath", () => {
+    it("when clicked element has filePath, keeps up to first different file", () => {
       const items = [{
         elementName: "button",
         componentName: "Button",
@@ -296,8 +296,66 @@ describe("formatAncestryChain", () => {
         componentName: "Button",
         filePath: "src/Button.tsx",
         line: 5
+      }, {
+        elementName: "div",
+        componentName: "Layout",
+        filePath: "src/Layout.tsx",
+        line: 10
+      }]);
+    });
+    it("keeps all items in the same file plus first different-file ancestor", () => {
+      const items = [{
+        elementName: "span",
+        componentName: "Label",
+        filePath: "src/Button.tsx",
+        line: 20
+      }, {
+        elementName: "button",
+        componentName: "Button",
+        filePath: "src/Button.tsx",
+        line: 5
+      }, {
+        elementName: "div",
+        componentName: "Layout",
+        filePath: "src/Layout.tsx",
+        line: 10
+      }, {
+        elementName: "div",
+        componentName: "App",
+        filePath: "src/App.tsx",
+        line: 1
+      }];
+      const result = truncateAtFirstFile(items);
+      expect(result).toEqual([{
+        elementName: "span",
+        componentName: "Label",
+        filePath: "src/Button.tsx",
+        line: 20
+      }, {
+        elementName: "button",
+        componentName: "Button",
+        filePath: "src/Button.tsx",
+        line: 5
+      }, {
+        elementName: "div",
+        componentName: "Layout",
+        filePath: "src/Layout.tsx",
+        line: 10
       }]);
     });
+    it("returns all items when all share the same file", () => {
+      const items = [{
+        elementName: "span",
+        filePath: "src/App.tsx",
+        line: 10
+      }, {
+        elementName: "div",
+        filePath: "src/App.tsx",
+        line: 5
+      }];
+      const result = truncateAtFirstFile(items);
+      expect(result).toEqual(items);
+    });
     it("returns all items when none have a filePath", () => {
       const items = [{
         elementName: "span",
@@ -309,6 +367,64 @@ describe("formatAncestryChain", () => {
       const result = truncateAtFirstFile(items);
       expect(result).toEqual(items);
     });
+    it("uses serverComponents file path when filePath is missing", () => {
+      const items = [{
+        elementName: "div",
+        componentName: "TurnActivityBox",
+        serverComponents: [{
+          name: "TurnActivityBox",
+          filePath: "components/MessageRow.tsx",
+          line: 921,
+          type: "component"
+        }]
+      }, {
+        elementName: "div",
+        componentName: "MessageRow",
+        serverComponents: [{
+          name: "MessageRow",
+          filePath: "components/chat/ChatViewport.tsx",
+          line: 917,
+          type: "component"
+        }]
+      }, {
+        elementName: "main",
+        componentName: "Home",
+        serverComponents: [{
+          name: "Home",
+          filePath: "app/page.tsx",
+          line: 817,
+          type: "component"
+        }]
+      }];
+      const result = truncateAtFirstFile(items);
+      expect(result).toEqual([items[0], items[1]]);
+    });
+    it("uses serverComponents when clicked element has no filePath but has serverComponents", () => {
+      const items = [{
+        elementName: "span",
+        componentName: "Button"
+      }, {
+        elementName: "div",
+        componentName: "Card",
+        serverComponents: [{
+          name: "Card",
+          filePath: "src/Card.tsx",
+          line: 10,
+          type: "component"
+        }]
+      }, {
+        elementName: "div",
+        componentName: "App",
+        serverComponents: [{
+          name: "App",
+          filePath: "src/App.tsx",
+          line: 1,
+          type: "component"
+        }]
+      }];
+      const result = truncateAtFirstFile(items);
+      expect(result).toEqual([items[0], items[1]]);
+    });
     it("returns empty array for empty input", () => {
       expect(truncateAtFirstFile([])).toEqual([]);
     });

package/dist/functions/isCombinationModifiersPressed.js

@@ -9,8 +9,12 @@ export function getMouseModifiers() {
 }
 export function isCombinationModifiersPressed(e, rightClick = false) {
   const modifiers = getMouseModifiers();
+
+  // Only require shift if it's part of the configured modifiers.
+  // Shift is used independently for truncation, so pressing it shouldn't
+  // disqualify the activation modifier combo.
   if (rightClick) {
-    return e.altKey == !!modifiers.alt && e.metaKey == !!modifiers.meta && e.shiftKey == !!modifiers.shift;
+    return e.altKey == !!modifiers.alt && e.metaKey == !!modifiers.meta && (!modifiers.shift || e.shiftKey);
   }
-  return e.altKey == !!modifiers.alt && e.ctrlKey == !!modifiers.ctrl && e.metaKey == !!modifiers.meta && e.shiftKey == !!modifiers.shift;
+  return e.altKey == !!modifiers.alt && e.ctrlKey == !!modifiers.ctrl && e.metaKey == !!modifiers.meta && (!modifiers.shift || e.shiftKey);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treelocator/runtime",
-  "version": "0.4.5",
+  "version": "0.4.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",

package/src/_generated_styles.ts

@@ -879,10 +879,6 @@ input:where([type='file']):focus {
   left: 0.25rem;
 }
 
-.left-1\\/2 {
-  left: 50%;
-}
-
 .left-3 {
   left: 0.75rem;
 }
@@ -895,10 +891,6 @@ input:where([type='file']):focus {
   top: 0.25rem;
 }
 
-.top-1\\/2 {
-  top: 50%;
-}
-
 .z-10 {
   z-index: 10;
 }
@@ -1078,11 +1070,6 @@ input:where([type='file']):focus {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.-translate-x-1\\/2 {
-  --tw-translate-x: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .-translate-x-full {
   --tw-translate-x: -100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1093,11 +1080,6 @@ input:where([type='file']):focus {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.-translate-y-1\\/2 {
-  --tw-translate-y: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .translate-x-full {
   --tw-translate-x: 100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1475,11 +1457,6 @@ input:where([type='file']):focus {
   padding-bottom: 0px;
 }
 
-.py-0\\.5 {
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
-}
-
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -1813,22 +1790,5 @@ input:where([type='file']):focus {
 
 .ease-out {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-}
-
-.hover\\:bg-white\\/30:hover {
-  background-color: rgb(255 255 255 / 0.3);
-}
-
-.hover\\:text-gray-100:hover {
-  --tw-text-opacity: 1;
-  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
-}
-
-.group\\/tooltip:hover .group-hover\\/tooltip\\:visible {
-  visibility: visible;
-}
-
-.group\\/tooltip:hover .group-hover\\/tooltip\\:opacity-100 {
-  opacity: 1;
 }`;
 export default styles;

package/src/functions/formatAncestryChain.test.ts

@@ -286,7 +286,7 @@ describe("formatAncestryChain", () => {
       ]);
     });
 
-    it("returns just the clicked element when it already has a filePath", () => {
+    it("when clicked element has filePath, keeps up to first different file", () => {
       const items: AncestryItem[] = [
         { elementName: "button", componentName: "Button", filePath: "src/Button.tsx", line: 5 },
         { elementName: "div", componentName: "Layout", filePath: "src/Layout.tsx", line: 10 },
@@ -296,9 +296,36 @@ describe("formatAncestryChain", () => {
       const result = truncateAtFirstFile(items);
       expect(result).toEqual([
         { elementName: "button", componentName: "Button", filePath: "src/Button.tsx", line: 5 },
+        { elementName: "div", componentName: "Layout", filePath: "src/Layout.tsx", line: 10 },
       ]);
     });
 
+    it("keeps all items in the same file plus first different-file ancestor", () => {
+      const items: AncestryItem[] = [
+        { elementName: "span", componentName: "Label", filePath: "src/Button.tsx", line: 20 },
+        { elementName: "button", componentName: "Button", filePath: "src/Button.tsx", line: 5 },
+        { elementName: "div", componentName: "Layout", filePath: "src/Layout.tsx", line: 10 },
+        { elementName: "div", componentName: "App", filePath: "src/App.tsx", line: 1 },
+      ];
+
+      const result = truncateAtFirstFile(items);
+      expect(result).toEqual([
+        { elementName: "span", componentName: "Label", filePath: "src/Button.tsx", line: 20 },
+        { elementName: "button", componentName: "Button", filePath: "src/Button.tsx", line: 5 },
+        { elementName: "div", componentName: "Layout", filePath: "src/Layout.tsx", line: 10 },
+      ]);
+    });
+
+    it("returns all items when all share the same file", () => {
+      const items: AncestryItem[] = [
+        { elementName: "span", filePath: "src/App.tsx", line: 10 },
+        { elementName: "div", filePath: "src/App.tsx", line: 5 },
+      ];
+
+      const result = truncateAtFirstFile(items);
+      expect(result).toEqual(items);
+    });
+
     it("returns all items when none have a filePath", () => {
       const items: AncestryItem[] = [
         { elementName: "span", componentName: "A" },
@@ -309,6 +336,34 @@ describe("formatAncestryChain", () => {
       expect(result).toEqual(items);
     });
 
+    it("uses serverComponents file path when filePath is missing", () => {
+      const items: AncestryItem[] = [
+        { elementName: "div", componentName: "TurnActivityBox", serverComponents: [{ name: "TurnActivityBox", filePath: "components/MessageRow.tsx", line: 921, type: "component" }] },
+        { elementName: "div", componentName: "MessageRow", serverComponents: [{ name: "MessageRow", filePath: "components/chat/ChatViewport.tsx", line: 917, type: "component" }] },
+        { elementName: "main", componentName: "Home", serverComponents: [{ name: "Home", filePath: "app/page.tsx", line: 817, type: "component" }] },
+      ];
+
+      const result = truncateAtFirstFile(items);
+      expect(result).toEqual([
+        items[0],
+        items[1],
+      ]);
+    });
+
+    it("uses serverComponents when clicked element has no filePath but has serverComponents", () => {
+      const items: AncestryItem[] = [
+        { elementName: "span", componentName: "Button" },
+        { elementName: "div", componentName: "Card", serverComponents: [{ name: "Card", filePath: "src/Card.tsx", line: 10, type: "component" }] },
+        { elementName: "div", componentName: "App", serverComponents: [{ name: "App", filePath: "src/App.tsx", line: 1, type: "component" }] },
+      ];
+
+      const result = truncateAtFirstFile(items);
+      expect(result).toEqual([
+        items[0],
+        items[1],
+      ]);
+    });
+
     it("returns empty array for empty input", () => {
       expect(truncateAtFirstFile([])).toEqual([]);
     });

package/src/functions/formatAncestryChain.ts

@@ -165,14 +165,47 @@ function getInnermostNamedComponent(item: AncestryItem | null | undefined): stri
 }
 
 /**
- * Truncate ancestry from the bottom (clicked element) up to and including
- * the first item that has a filePath. Everything above that is discarded.
+ * Get the effective file path from an AncestryItem, checking both
+ * client filePath and serverComponents (Next.js RSC, Phoenix, etc.).
+ */
+function getItemFilePath(item: AncestryItem): string | undefined {
+  if (item.filePath) return item.filePath;
+  if (item.serverComponents && item.serverComponents.length > 0) {
+    const comp = item.serverComponents.find((sc) => sc.type === "component");
+    if (comp) return comp.filePath;
+    return item.serverComponents[0]!.filePath;
+  }
+  return undefined;
+}
+
+/**
+ * Truncate ancestry to keep only the local context.
+ * - If the clicked element has no file: keep up to the first ancestor with a file.
+ * - If the clicked element has a file: keep up to the first ancestor with a DIFFERENT file.
+ * Checks both client filePath and serverComponents for file info.
  * The ancestry array is bottom-up: index 0 = clicked element, last = root.
  */
 export function truncateAtFirstFile(items: AncestryItem[]): AncestryItem[] {
-  const firstWithFile = items.findIndex((item) => item.filePath);
-  if (firstWithFile === -1) return items;
-  return items.slice(0, firstWithFile + 1);
+  if (items.length === 0) return items;
+
+  const clickedFile = getItemFilePath(items[0]!);
+
+  if (!clickedFile) {
+    // Clicked element has no file: find first ancestor with any file
+    const firstWithFile = items.findIndex((item) => getItemFilePath(item));
+    if (firstWithFile === -1) return items;
+    return items.slice(0, firstWithFile + 1);
+  }
+
+  // Clicked element has a file: find first ancestor with a different file
+  for (let i = 1; i < items.length; i++) {
+    const ancestorFile = getItemFilePath(items[i]!);
+    if (ancestorFile && ancestorFile !== clickedFile) {
+      return items.slice(0, i + 1);
+    }
+  }
+
+  return items;
 }
 
 export function formatAncestryChain(items: AncestryItem[]): string {

package/src/functions/isCombinationModifiersPressed.ts

@@ -16,17 +16,20 @@ export function isCombinationModifiersPressed(
 ) {
   const modifiers = getMouseModifiers();
 
+  // Only require shift if it's part of the configured modifiers.
+  // Shift is used independently for truncation, so pressing it shouldn't
+  // disqualify the activation modifier combo.
   if (rightClick) {
     return (
       e.altKey == !!modifiers.alt &&
       e.metaKey == !!modifiers.meta &&
-      e.shiftKey == !!modifiers.shift
+      (!modifiers.shift || e.shiftKey)
     );
   }
   return (
     e.altKey == !!modifiers.alt &&
     e.ctrlKey == !!modifiers.ctrl &&
     e.metaKey == !!modifiers.meta &&
-    e.shiftKey == !!modifiers.shift
+    (!modifiers.shift || e.shiftKey)
   );
 }