@treelocator/runtime 0.4.5 → 0.4.6

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,9 @@ 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 filePath: keep up to the first ancestor with a file.
+ * - If the clicked element has a filePath: keep up to the first ancestor with a DIFFERENT file.
  * 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,28 @@ 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.
+ * Truncate ancestry to keep only the local context.
+ * - If the clicked element has no filePath: keep up to the first ancestor with a file.
+ * - If the clicked element has a filePath: keep up to the first ancestor with a DIFFERENT file.
  * 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 = items[0]?.filePath;
+  if (!clickedFile) {
+    // Clicked element has no file: find first ancestor with any file
+    const firstWithFile = items.findIndex(item => item.filePath);
+    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++) {
+    if (items[i].filePath && items[i].filePath !== 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",

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.6",
   "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" },

package/src/functions/formatAncestryChain.ts

@@ -165,14 +165,31 @@ 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.
+ * Truncate ancestry to keep only the local context.
+ * - If the clicked element has no filePath: keep up to the first ancestor with a file.
+ * - If the clicked element has a filePath: keep up to the first ancestor with a DIFFERENT file.
  * 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 = items[0]?.filePath;
+
+  if (!clickedFile) {
+    // Clicked element has no file: find first ancestor with any file
+    const firstWithFile = items.findIndex((item) => item.filePath);
+    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++) {
+    if (items[i]!.filePath && items[i]!.filePath !== 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)
   );
 }