@treelocator/runtime 0.4.1 → 0.4.6

package/dist/components/MaybeOutline.js

@@ -1,11 +1,11 @@
 import { template as _$template } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
 import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
-var _tmpl$ = /*#__PURE__*/_$template(`<div><div class="fixed rounded border border-solid border-amber-500"style=z-index:2></div><div class="fixed text-xs font-medium rounded-md"style="z-index:3;box-shadow:0 4px 16px rgba(0, 0, 0, 0.2);font-family:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;letter-spacing:0.01em">`),
-  _tmpl$2 = /*#__PURE__*/_$template(`<div><div class="fixed rounded border border-solid border-gray-500"style=z-index:2></div><div class="fixed text-xs font-medium rounded-md"style="z-index:3;box-shadow:0 4px 16px rgba(0, 0, 0, 0.2);font-family:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;letter-spacing:0.01em">`);
+var _tmpl$ = /*#__PURE__*/_$template(`<div><div style=z-index:2></div><div class="fixed text-xs font-medium rounded-md"style="z-index:3;box-shadow:0 4px 16px rgba(0, 0, 0, 0.2);font-family:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;letter-spacing:0.01em">`);
 import { createMemo } from "solid-js";
 import { getElementInfo } from "../adapters/getElementInfo";
 import { Outline } from "./Outline";
@@ -37,6 +37,9 @@ export function MaybeOutline(props) {
     },
     get targets() {
       return props.targets;
+    },
+    get dashed() {
+      return props.dashed;
     }
   }) : _$memo(() => !!phoenixInfo())() ? (() => {
     var _el$ = _tmpl$(),
@@ -48,18 +51,20 @@ export function MaybeOutline(props) {
     _$setStyleProperty(_el$3, "border", "1px solid rgba(255, 255, 255, 0.15)");
     _$insert(_el$3, () => phoenixInfo().filter(sc => sc.type === "component").map(sc => sc.name.split(".").pop()).join(" > "));
     _$effect(_p$ => {
-      var _v$ = box().x + "px",
-        _v$2 = box().y + "px",
-        _v$3 = box().width + "px",
-        _v$4 = box().height + "px",
-        _v$5 = box().x + 4 + "px",
-        _v$6 = box().y + 4 + "px";
-      _v$ !== _p$.e && _$setStyleProperty(_el$2, "left", _p$.e = _v$);
-      _v$2 !== _p$.t && _$setStyleProperty(_el$2, "top", _p$.t = _v$2);
-      _v$3 !== _p$.a && _$setStyleProperty(_el$2, "width", _p$.a = _v$3);
-      _v$4 !== _p$.o && _$setStyleProperty(_el$2, "height", _p$.o = _v$4);
-      _v$5 !== _p$.i && _$setStyleProperty(_el$3, "left", _p$.i = _v$5);
-      _v$6 !== _p$.n && _$setStyleProperty(_el$3, "top", _p$.n = _v$6);
+      var _v$ = `fixed rounded border ${props.dashed ? "border-dashed" : "border-solid"} border-amber-500`,
+        _v$2 = box().x + "px",
+        _v$3 = box().y + "px",
+        _v$4 = box().width + "px",
+        _v$5 = box().height + "px",
+        _v$6 = box().x + 4 + "px",
+        _v$7 = box().y + 4 + "px";
+      _v$ !== _p$.e && _$className(_el$2, _p$.e = _v$);
+      _v$2 !== _p$.t && _$setStyleProperty(_el$2, "left", _p$.t = _v$2);
+      _v$3 !== _p$.a && _$setStyleProperty(_el$2, "top", _p$.a = _v$3);
+      _v$4 !== _p$.o && _$setStyleProperty(_el$2, "width", _p$.o = _v$4);
+      _v$5 !== _p$.i && _$setStyleProperty(_el$2, "height", _p$.i = _v$5);
+      _v$6 !== _p$.n && _$setStyleProperty(_el$3, "left", _p$.n = _v$6);
+      _v$7 !== _p$.s && _$setStyleProperty(_el$3, "top", _p$.s = _v$7);
       return _p$;
     }, {
       e: undefined,
@@ -67,11 +72,12 @@ export function MaybeOutline(props) {
       a: undefined,
       o: undefined,
       i: undefined,
-      n: undefined
+      n: undefined,
+      s: undefined
     });
     return _el$;
   })() : (() => {
-    var _el$4 = _tmpl$2(),
+    var _el$4 = _tmpl$(),
       _el$5 = _el$4.firstChild,
       _el$6 = _el$5.nextSibling;
     _$setStyleProperty(_el$6, "padding", "4px 10px");
@@ -88,18 +94,20 @@ export function MaybeOutline(props) {
       return () => _c$2() ? `.${props.currentElement.getAttribute('class').split(" ")[0]}` : "";
     })(), null);
     _$effect(_p$ => {
-      var _v$7 = box().x + "px",
-        _v$8 = box().y + "px",
-        _v$9 = box().width + "px",
-        _v$0 = box().height + "px",
-        _v$1 = box().x + 4 + "px",
-        _v$10 = box().y + 4 + "px";
-      _v$7 !== _p$.e && _$setStyleProperty(_el$5, "left", _p$.e = _v$7);
-      _v$8 !== _p$.t && _$setStyleProperty(_el$5, "top", _p$.t = _v$8);
-      _v$9 !== _p$.a && _$setStyleProperty(_el$5, "width", _p$.a = _v$9);
-      _v$0 !== _p$.o && _$setStyleProperty(_el$5, "height", _p$.o = _v$0);
-      _v$1 !== _p$.i && _$setStyleProperty(_el$6, "left", _p$.i = _v$1);
-      _v$10 !== _p$.n && _$setStyleProperty(_el$6, "top", _p$.n = _v$10);
+      var _v$8 = `fixed rounded border ${props.dashed ? "border-dashed" : "border-solid"} border-gray-500`,
+        _v$9 = box().x + "px",
+        _v$0 = box().y + "px",
+        _v$1 = box().width + "px",
+        _v$10 = box().height + "px",
+        _v$11 = box().x + 4 + "px",
+        _v$12 = box().y + 4 + "px";
+      _v$8 !== _p$.e && _$className(_el$5, _p$.e = _v$8);
+      _v$9 !== _p$.t && _$setStyleProperty(_el$5, "left", _p$.t = _v$9);
+      _v$0 !== _p$.a && _$setStyleProperty(_el$5, "top", _p$.a = _v$0);
+      _v$1 !== _p$.o && _$setStyleProperty(_el$5, "width", _p$.o = _v$1);
+      _v$10 !== _p$.i && _$setStyleProperty(_el$5, "height", _p$.i = _v$10);
+      _v$11 !== _p$.n && _$setStyleProperty(_el$6, "left", _p$.n = _v$11);
+      _v$12 !== _p$.s && _$setStyleProperty(_el$6, "top", _p$.s = _v$12);
       return _p$;
     }, {
       e: undefined,
@@ -107,7 +115,8 @@ export function MaybeOutline(props) {
       a: undefined,
       o: undefined,
       i: undefined,
-      n: undefined
+      n: undefined,
+      s: undefined
     });
     return _el$4;
   })());

package/dist/components/Outline.d.ts

@@ -21,5 +21,6 @@ export type AllBoxes = {
 export declare function Outline(props: {
     element: FullElementInfo;
     targets: Targets;
+    dashed?: boolean;
 }): import("solid-js").JSX.Element;
 export {};

package/dist/components/Outline.js

@@ -1,10 +1,11 @@
 import { template as _$template } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
 import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
-var _tmpl$ = /*#__PURE__*/_$template(`<div><div class="fixed rounded border border-solid border-sky-500"style=z-index:2></div><div class="fixed text-xs font-medium rounded-md"style="z-index:3;box-shadow:0 4px 16px rgba(0, 0, 0, 0.2);font-family:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;letter-spacing:0.01em;text-overflow:ellipsis;white-space:nowrap">`);
+var _tmpl$ = /*#__PURE__*/_$template(`<div><div style=z-index:2></div><div class="fixed text-xs font-medium rounded-md"style="z-index:3;box-shadow:0 4px 16px rgba(0, 0, 0, 0.2);font-family:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;letter-spacing:0.01em;text-overflow:ellipsis;white-space:nowrap">`);
 import { RenderBoxes } from "./RenderBoxes";
 export function Outline(props) {
   const box = () => props.element.thisElement.box;
@@ -118,20 +119,22 @@ export function Outline(props) {
     _$setStyleProperty(_el$3, "overflow", "hidden");
     _$insert(_el$3, () => props.element.thisElement.label);
     _$effect(_p$ => {
-      var _v$ = box().x + "px",
-        _v$2 = box().y + "px",
-        _v$3 = box().width + "px",
-        _v$4 = box().height + "px",
-        _v$5 = box().x + 4 + "px",
-        _v$6 = box().y + 4 + "px",
-        _v$7 = box().width - 8 + "px";
-      _v$ !== _p$.e && _$setStyleProperty(_el$2, "left", _p$.e = _v$);
-      _v$2 !== _p$.t && _$setStyleProperty(_el$2, "top", _p$.t = _v$2);
-      _v$3 !== _p$.a && _$setStyleProperty(_el$2, "width", _p$.a = _v$3);
-      _v$4 !== _p$.o && _$setStyleProperty(_el$2, "height", _p$.o = _v$4);
-      _v$5 !== _p$.i && _$setStyleProperty(_el$3, "left", _p$.i = _v$5);
-      _v$6 !== _p$.n && _$setStyleProperty(_el$3, "top", _p$.n = _v$6);
-      _v$7 !== _p$.s && _$setStyleProperty(_el$3, "max-width", _p$.s = _v$7);
+      var _v$ = `fixed rounded border ${props.dashed ? "border-dashed" : "border-solid"} border-sky-500`,
+        _v$2 = box().x + "px",
+        _v$3 = box().y + "px",
+        _v$4 = box().width + "px",
+        _v$5 = box().height + "px",
+        _v$6 = box().x + 4 + "px",
+        _v$7 = box().y + 4 + "px",
+        _v$8 = box().width - 8 + "px";
+      _v$ !== _p$.e && _$className(_el$2, _p$.e = _v$);
+      _v$2 !== _p$.t && _$setStyleProperty(_el$2, "left", _p$.t = _v$2);
+      _v$3 !== _p$.a && _$setStyleProperty(_el$2, "top", _p$.a = _v$3);
+      _v$4 !== _p$.o && _$setStyleProperty(_el$2, "width", _p$.o = _v$4);
+      _v$5 !== _p$.i && _$setStyleProperty(_el$2, "height", _p$.i = _v$5);
+      _v$6 !== _p$.n && _$setStyleProperty(_el$3, "left", _p$.n = _v$6);
+      _v$7 !== _p$.s && _$setStyleProperty(_el$3, "top", _p$.s = _v$7);
+      _v$8 !== _p$.h && _$setStyleProperty(_el$3, "max-width", _p$.h = _v$8);
       return _p$;
     }, {
       e: undefined,
@@ -140,7 +143,8 @@ export function Outline(props) {
       o: undefined,
       i: undefined,
       n: undefined,
-      s: undefined
+      s: undefined,
+      h: undefined
     });
     return _el$;
   })();

package/dist/components/Runtime.js

@@ -16,15 +16,24 @@ import { isCombinationModifiersPressed } from "../functions/isCombinationModifie
 import { MaybeOutline } from "./MaybeOutline";
 import { isLocatorsOwnElement } from "../functions/isLocatorsOwnElement";
 import { Toast } from "./Toast";
-import { collectAncestry, formatAncestryChain } from "../functions/formatAncestryChain";
+import { collectAncestry, formatAncestryChain, truncateAtFirstFile } from "../functions/formatAncestryChain";
 import { enrichAncestryWithSourceMaps } from "../functions/enrichAncestrySourceMaps";
 import { createTreeNode } from "../adapters/createTreeNode";
 import treeIconUrl from "../_generated_tree_icon";
 import { createDejitterRecorder } from "../dejitter/recorder";
 import { RecordingOutline } from "./RecordingOutline";
 import { RecordingResults } from "./RecordingResults";
+const DEJITTER_CONFIG = {
+  selector: '[data-treelocator-recording]',
+  props: ['opacity', 'transform', 'boundingRect', 'width', 'height'],
+  sampleRate: 15,
+  maxDuration: 30000,
+  idleTimeout: 0,
+  mutations: true
+};
 function Runtime(props) {
   const [holdingModKey, setHoldingModKey] = createSignal(false);
+  const [holdingShift, setHoldingShift] = createSignal(false);
   const [currentElement, setCurrentElement] = createSignal(null);
   const [toastMessage, setToastMessage] = createSignal(null);
   const [locatorActive, setLocatorActive] = createSignal(false);
@@ -86,13 +95,16 @@ function Runtime(props) {
   }
   function keyUpListener(e) {
     setHoldingModKey(isCombinationModifiersPressed(e));
+    setHoldingShift(e.shiftKey);
   }
   function keyDownListener(e) {
     setHoldingModKey(isCombinationModifiersPressed(e, true));
+    setHoldingShift(e.shiftKey);
   }
   function mouseMoveListener(e) {
     // Update modifier state from mouse events - more reliable than keydown/keyup
     setHoldingModKey(e.altKey);
+    setHoldingShift(e.shiftKey);
   }
   function findElementAtPoint(e) {
     const elementsAtPoint = document.elementsFromPoint(e.clientX, e.clientY);
@@ -134,14 +146,7 @@ function Runtime(props) {
     element.setAttribute('data-treelocator-recording', 'true');
     setRecordedElement(element);
     dejitterInstance = createDejitterRecorder();
-    dejitterInstance.configure({
-      selector: '[data-treelocator-recording]',
-      props: ['opacity', 'transform', 'boundingRect', 'width', 'height'],
-      sampleRate: 15,
-      maxDuration: 30000,
-      idleTimeout: 0,
-      mutations: true
-    });
+    dejitterInstance.configure(DEJITTER_CONFIG);
     dejitterInstance.start();
     startInteractionTracker();
     setRecordingState('recording');
@@ -251,14 +256,7 @@ function Runtime(props) {
       element.setAttribute('data-treelocator-recording', 'true');
       setRecordedElement(element);
       dejitterInstance = createDejitterRecorder();
-      dejitterInstance.configure({
-        selector: '[data-treelocator-recording]',
-        props: ['opacity', 'transform', 'boundingRect', 'width', 'height'],
-        sampleRate: 15,
-        maxDuration: 30000,
-        idleTimeout: 0,
-        mutations: true
-      });
+      dejitterInstance.configure(DEJITTER_CONFIG);
       dejitterInstance.start();
       setRecordingState('recording');
       setReplaying(true);
@@ -349,6 +347,9 @@ function Runtime(props) {
     setRecordedElement(null);
     setViewingPrevious(false);
     setRecordingState('idle');
+    try {
+      localStorage.removeItem(STORAGE_KEY);
+    } catch {}
   }
   function hasPreviousRecording() {
     return loadFromStorage().previous !== null;
@@ -408,6 +409,7 @@ function Runtime(props) {
   }
   function mouseOverListener(e) {
     setHoldingModKey(e.altKey);
+    setHoldingShift(e.shiftKey);
 
     // Don't update hovered element while recording -- highlight is sticky
     if (recordingState() === 'recording') return;
@@ -456,7 +458,12 @@ function Runtime(props) {
     // Copy ancestry to clipboard on alt+click
     const treeNode = createTreeNode(element, props.adapterId);
     if (treeNode) {
-      const ancestry = collectAncestry(treeNode);
+      let ancestry = collectAncestry(treeNode);
+
+      // Alt+Shift: keep from bottom up to the first element with a file, discard above
+      if (e.shiftKey) {
+        ancestry = truncateAtFirstFile(ancestry);
+      }
 
       // Write immediately with component names (preserves user gesture for clipboard API)
       const formatted = formatAncestryChain(ancestry);
@@ -513,6 +520,8 @@ function Runtime(props) {
     root.addEventListener("scroll", scrollListener);
   }
   onCleanup(() => {
+    stopReplay();
+    stopInteractionTracker();
     for (const root of roots) {
       root.removeEventListener("keyup", keyUpListener);
       root.removeEventListener("keydown", keyDownListener);
@@ -540,6 +549,9 @@ function Runtime(props) {
     },
     get targets() {
       return props.targets;
+    },
+    get dashed() {
+      return holdingShift();
     }
   }) : null), _$memo(() => _$memo(() => !!(recordingState() === 'recording' && recordedElement()))() ? _$createComponent(RecordingOutline, {
     get element() {

package/dist/dejitter/recorder.js

@@ -1,4 +1,3 @@
-// @ts-nocheck
 /**
  * Dejitter — Animation frame recorder & jank detector (vendored)
  *

package/dist/functions/formatAncestryChain.d.ts

@@ -18,4 +18,11 @@ export interface AncestryItem {
     serverComponents?: ServerComponentInfo[];
 }
 export declare function collectAncestry(node: TreeNode): AncestryItem[];
+/**
+ * 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[];
 export declare function formatAncestryChain(items: AncestryItem[]): string;

package/dist/functions/formatAncestryChain.js

@@ -121,6 +121,31 @@ function getInnermostNamedComponent(item) {
   }
   return undefined;
 }
+
+/**
+ * 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) {
+  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) {
     return "";

package/dist/functions/formatAncestryChain.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { formatAncestryChain } from "./formatAncestryChain";
+import { formatAncestryChain, truncateAtFirstFile } from "./formatAncestryChain";
 describe("formatAncestryChain", () => {
   it("uses component name only at component boundaries", () => {
     const items = [{
@@ -239,4 +239,136 @@ describe("formatAncestryChain", () => {
     └─ GlassPanel in Sidebar at src/Sidebar.tsx:20`);
     });
   });
+  describe("truncateAtFirstFile", () => {
+    it("keeps from clicked element up to first ancestor with filePath", () => {
+      // Bottom-up: clicked element first, root last
+      const items = [{
+        elementName: "span",
+        componentName: "Button"
+      }, {
+        elementName: "div",
+        componentName: "Card"
+      }, {
+        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: "Button"
+      }, {
+        elementName: "div",
+        componentName: "Card"
+      }, {
+        elementName: "div",
+        componentName: "Layout",
+        filePath: "src/Layout.tsx",
+        line: 10
+      }]);
+    });
+    it("when clicked element has filePath, keeps up to first different file", () => {
+      const items = [{
+        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: "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 = [{
+        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",
+        componentName: "A"
+      }, {
+        elementName: "div",
+        componentName: "B"
+      }];
+      const result = truncateAtFirstFile(items);
+      expect(result).toEqual(items);
+    });
+    it("returns empty array for empty input", () => {
+      expect(truncateAtFirstFile([])).toEqual([]);
+    });
+  });
 });

package/dist/functions/getUsableName.js

@@ -1,24 +1,3 @@
-// function printDebugOwnerTree(fiber: Fiber): string | null {
-//   let current: Fiber | null = fiber || null;
-//   let results = [];
-//   while (current) {
-//     results.push(getUsableName(current));
-//     current = current._debugOwner || null;
-//   }
-//   console.log('DEBUG OWNER: ', results);
-//   return null;
-// }
-// function printReturnTree(fiber: Fiber): string | null {
-//   let current: Fiber | null = fiber || null;
-//   let results = [];
-//   while (current) {
-//     results.push(getUsableName(current));
-//     current = current.return || null;
-//   }
-//   console.log('RETURN: ', results);
-//   return null;
-// }
-
 export function getUsableName(fiber) {
   if (!fiber) {
     return "Not found";

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/dist/output.css

@@ -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));
@@ -1175,6 +1157,12 @@ input:where([type='file']):focus {
   overflow: scroll;
 }
 
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .text-ellipsis {
   text-overflow: ellipsis;
 }
@@ -1231,6 +1219,10 @@ input:where([type='file']):focus {
   border-style: solid;
 }
 
+.border-dashed {
+  border-style: dashed;
+}
+
 .border-amber-500 {
   --tw-border-opacity: 1;
   border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
@@ -1465,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;
@@ -1803,21 +1790,4 @@ 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;
 }