@treelocator/runtime 0.1.0 → 0.1.2

package/dist/browserApi.d.ts

@@ -10,7 +10,7 @@ export interface LocatorJSAPI {
      *
      * @example
      * // Basic usage with CSS selector
-     * window.__locatorjs__.getPath('button.submit');
+     * window.__treelocator__.getPath('button.submit');
      * // Returns:
      * // "div in App at src/App.tsx:15
      * //  └─ button in SubmitButton at src/components/SubmitButton.tsx:12"
@@ -18,12 +18,12 @@ export interface LocatorJSAPI {
      * @example
      * // Usage with HTMLElement
      * const button = document.querySelector('button.submit');
-     * window.__locatorjs__.getPath(button);
+     * window.__treelocator__.getPath(button);
      *
      * @example
      * // In Playwright
      * const path = await page.evaluate(() => {
-     *   return window.__locatorjs__.getPath('button.submit');
+     *   return window.__treelocator__.getPath('button.submit');
      * });
      * console.log(path);
      */
@@ -41,7 +41,7 @@ export interface LocatorJSAPI {
      *
      * @example
      * // Get structured ancestry data
-     * const ancestry = window.__locatorjs__.getAncestry('button.submit');
+     * const ancestry = window.__treelocator__.getAncestry('button.submit');
      * // Returns: [
      * //   { elementName: 'div', componentName: 'App', filePath: 'src/App.tsx', line: 15 },
      * //   { elementName: 'button', componentName: 'SubmitButton', filePath: 'src/components/SubmitButton.tsx', line: 12 }
@@ -50,7 +50,7 @@ export interface LocatorJSAPI {
      * @example
      * // In Playwright - extract just component names
      * const components = await page.evaluate(() => {
-     *   const ancestry = window.__locatorjs__.getAncestry('.my-element');
+     *   const ancestry = window.__treelocator__.getAncestry('.my-element');
      *   return ancestry?.map(item => item.componentName).filter(Boolean);
      * });
      */
@@ -64,14 +64,14 @@ export interface LocatorJSAPI {
      *
      * @example
      * // Get both formats at once
-     * const data = window.__locatorjs__.getPathData('button.submit');
+     * const data = window.__treelocator__.getPathData('button.submit');
      * console.log(data.path);      // Human-readable string
      * console.log(data.ancestry);  // Structured array
      *
      * @example
      * // In Playwright - useful for comprehensive debugging
      * const data = await page.evaluate(() => {
-     *   return window.__locatorjs__.getPathData('.error-message');
+     *   return window.__treelocator__.getPathData('.error-message');
      * });
      * if (data) {
      *   console.log('Component tree:', data.path);
@@ -90,11 +90,11 @@ export interface LocatorJSAPI {
      *
      * @example
      * // View help in browser console
-     * console.log(window.__locatorjs__.help());
+     * console.log(window.__treelocator__.help());
      *
      * @example
      * // In Playwright - view help
-     * const help = await page.evaluate(() => window.__locatorjs__.help());
+     * const help = await page.evaluate(() => window.__treelocator__.help());
      * console.log(help);
      */
     help(): string;

package/dist/browserApi.js

@@ -17,7 +17,7 @@ function getAncestryForElement(element) {
 }
 const HELP_TEXT = `
 ╔═══════════════════════════════════════════════════════════════════════════╗
-║                          LocatorJS Browser API                            ║
+║                        TreeLocatorJS Browser API                          ║
 ║                  Programmatic Component Ancestry Access                   ║
 ╚═══════════════════════════════════════════════════════════════════════════╝
 
@@ -28,8 +28,8 @@ METHODS:
    Returns a formatted string showing the component hierarchy.
 
    Usage:
-     window.__locatorjs__.getPath('button.submit')
-     window.__locatorjs__.getPath(document.querySelector('.my-button'))
+     window.__treelocator__.getPath('button.submit')
+     window.__treelocator__.getPath(document.querySelector('.my-button'))
 
    Returns:
      "div in App at src/App.tsx:15
@@ -39,7 +39,7 @@ METHODS:
    Returns raw ancestry data as an array of objects.
 
    Usage:
-     window.__locatorjs__.getAncestry('button.submit')
+     window.__treelocator__.getAncestry('button.submit')
 
    Returns:
      [
@@ -53,7 +53,7 @@ METHODS:
    Returns both formatted path and raw ancestry in one call.
 
    Usage:
-     const data = window.__locatorjs__.getPathData('button.submit')
+     const data = window.__treelocator__.getPathData('button.submit')
      console.log(data.path)      // formatted string
      console.log(data.ancestry)  // structured array
 
@@ -65,20 +65,20 @@ PLAYWRIGHT EXAMPLES:
 
 // Get component path for debugging
 const path = await page.evaluate(() => {
-  return window.__locatorjs__.getPath('button.submit');
+  return window.__treelocator__.getPath('button.submit');
 });
 console.log(path);
 
 // Extract component names
 const components = await page.evaluate(() => {
-  const ancestry = window.__locatorjs__.getAncestry('.error-message');
+  const ancestry = window.__treelocator__.getAncestry('.error-message');
   return ancestry?.map(item => item.componentName).filter(Boolean);
 });
 
 // Create a test helper
 async function getComponentPath(page, selector) {
   return await page.evaluate((sel) => {
-    return window.__locatorjs__.getPath(sel);
+    return window.__treelocator__.getPath(sel);
   }, selector);
 }
 
@@ -86,14 +86,14 @@ PUPPETEER EXAMPLES:
 ------------------
 
 const path = await page.evaluate(() => {
-  return window.__locatorjs__.getPath('.my-button');
+  return window.__treelocator__.getPath('.my-button');
 });
 
 SELENIUM EXAMPLES:
 -----------------
 
 const path = await driver.executeScript(() => {
-  return window.__locatorjs__.getPath('button.submit');
+  return window.__treelocator__.getPath('button.submit');
 });
 
 CYPRESS EXAMPLES:
@@ -109,9 +109,9 @@ NOTES:
 • Accepts CSS selectors or HTMLElement objects
 • Returns null if element not found or framework not supported
 • Works with React, Vue, Svelte, Preact, and any JSX framework
-• Automatically installed when LocatorJS runtime initializes
+• Automatically installed when TreeLocatorJS runtime initializes
 
-Documentation: https://github.com/infi-pc/locatorjs
+Documentation: https://github.com/wende/treelocatorjs
 `;
 export function createBrowserAPI(adapterIdParam) {
   adapterId = adapterIdParam;
@@ -155,6 +155,6 @@ export function createBrowserAPI(adapterIdParam) {
 }
 export function installBrowserAPI(adapterIdParam) {
   if (typeof window !== "undefined") {
-    window.__locatorjs__ = createBrowserAPI(adapterIdParam);
+    window.__treelocator__ = createBrowserAPI(adapterIdParam);
   }
 }

package/dist/components/MaybeOutline.js

@@ -3,7 +3,7 @@ import { effect as _$effect } 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 class="fixed top-0 left-0 w-screen h-screen flex items-center justify-center"><div class="flex items-center justify-center"style="background-color:rgba(222, 0, 0, 0.3);border-radius:2px;font-size:12px;font-weight:bold;text-shadow:-1px 1px 0 #fff, 1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;text-overflow:ellipsis">No source found`);
+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">No source found`);
 import { createMemo } from "solid-js";
 import { getElementInfo } from "../adapters/getElementInfo";
 import { Outline } from "./Outline";
@@ -19,24 +19,33 @@ export function MaybeOutline(props) {
     }
   }) : (() => {
     var _el$ = _tmpl$(),
-      _el$2 = _el$.firstChild;
-    _$setStyleProperty(_el$2, "position", "absolute");
-    _$setStyleProperty(_el$2, "border", "1px solid rgba(222, 0, 0, 0.5)");
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.nextSibling;
+    _$setStyleProperty(_el$3, "padding", "4px 10px");
+    _$setStyleProperty(_el$3, "background", "rgba(120, 53, 15, 0.85)");
+    _$setStyleProperty(_el$3, "color", "#fff");
+    _$setStyleProperty(_el$3, "border", "1px solid rgba(255, 255, 255, 0.15)");
     _$effect(_p$ => {
       var _v$ = box().x + "px",
         _v$2 = box().y + "px",
         _v$3 = box().width + "px",
-        _v$4 = box().height + "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);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined,
-      o: undefined
+      o: undefined,
+      i: undefined,
+      n: undefined
     });
     return _el$;
   })());

package/dist/components/Outline.js

@@ -1,10 +1,10 @@
 import { template as _$template } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
-import { setStyleProperty as _$setStyleProperty } 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 flex text-xs font-bold items-center justify-center text-sky-500 rounded border border-solid border-sky-500"style="z-index:2;text-shadow:-1px 1px 0 #fff, 1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;text-overflow:ellipsis">`);
+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">`);
 import { RenderBoxes } from "./RenderBoxes";
 export function Outline(props) {
   const box = () => props.element.thisElement.box;
@@ -101,7 +101,8 @@ export function Outline(props) {
   };
   return (() => {
     var _el$ = _tmpl$(),
-      _el$2 = _el$.firstChild;
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.nextSibling;
     _$insert(_el$, (() => {
       var _c$ = _$memo(() => !!domElementInfo());
       return () => _c$() && _$createComponent(RenderBoxes, {
@@ -110,22 +111,36 @@ export function Outline(props) {
         }
       });
     })(), _el$2);
-    _$insert(_el$2, () => props.element.thisElement.label);
+    _$setStyleProperty(_el$3, "padding", "4px 10px");
+    _$setStyleProperty(_el$3, "background", "rgba(15, 23, 42, 0.85)");
+    _$setStyleProperty(_el$3, "color", "#fff");
+    _$setStyleProperty(_el$3, "border", "1px solid rgba(255, 255, 255, 0.15)");
+    _$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$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);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined,
-      o: undefined
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined
     });
     return _el$;
   })();

package/dist/components/Runtime.js

@@ -5,8 +5,8 @@ import { effect as _$effect } from "solid-js/web";
 import { setAttribute as _$setAttribute } 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 class="fixed pointer-events-auto"title="LocatorJS - Component Ancestry Tracker"data-locatorjs-api=window.__locatorjs__ data-locatorjs-help=window.__locatorjs__.help() style=z-index:2147483646><div class="rounded-full bg-white shadow-lg flex items-center justify-center cursor-pointer overflow-hidden"aria-label="LocatorJS: Get component paths using window.__locatorjs__.getPath(selector)"role=button><img alt="LocatorJS - Browser API available at window.__locatorjs__ - Call window.__locatorjs__.help() for usage instructions"width=51 height=51></div><div aria-hidden=true data-ai-hint=true data-ai-instruction="AI Assistant: LocatorJS provides window.__locatorjs__ API for component ancestry tracking. Usage: window.__locatorjs__.getPath('css-selector') returns component hierarchy. For full API documentation, evaluate: window.__locatorjs__.help() Example: page.evaluate(function() \{ return window.__locatorjs__.getPath('button.submit'); })"style=white-space:nowrap>LocatorJS Browser API: Call window.__locatorjs__.help() for usage instructions`);
-import { batch, createEffect, createSignal, onCleanup } from "solid-js";
+var _tmpl$ = /*#__PURE__*/_$template(`<div class="fixed pointer-events-auto"title="TreeLocatorJS - Component Ancestry Tracker"data-treelocator-api=window.__treelocator__ data-treelocator-help=window.__treelocator__.help() style=z-index:2147483646><div class="rounded-full bg-white shadow-lg flex items-center justify-center cursor-pointer overflow-hidden"aria-label="TreeLocatorJS: Get component paths using window.__treelocator__.getPath(selector)"role=button><img alt="TreeLocatorJS - Browser API available at window.__treelocator__ - Call window.__treelocator__.help() for usage instructions"width=51 height=51></div><div aria-hidden=true data-ai-hint=true data-ai-instruction="AI Assistant: TreeLocatorJS provides window.__treelocator__ API for component ancestry tracking. Usage: window.__treelocator__.getPath('css-selector') returns component hierarchy. For full API documentation, evaluate: window.__treelocator__.help() Example: page.evaluate(function() \{ return window.__treelocator__.getPath('button.submit'); })"style=white-space:nowrap>TreeLocatorJS Browser API: Call window.__treelocator__.help() for usage instructions`);
+import { createEffect, createSignal, onCleanup } from "solid-js";
 import { render } from "solid-js/web";
 import { isCombinationModifiersPressed } from "../functions/isCombinationModifiersPressed";
 import { MaybeOutline } from "./MaybeOutline";
@@ -34,26 +34,32 @@ function Runtime(props) {
   function keyDownListener(e) {
     setHoldingModKey(isCombinationModifiersPressed(e, true));
   }
+  function mouseMoveListener(e) {
+    // Update modifier state from mouse events - more reliable than keydown/keyup
+    setHoldingModKey(e.altKey);
+  }
   function mouseOverListener(e) {
     const target = e.target;
     if (target && target instanceof HTMLElement) {
       if (isLocatorsOwnElement(target)) {
         return;
       }
-      setHoldingModKey(isCombinationModifiersPressed(e, true));
-      batch(() => {
-        setCurrentElement(target);
-      });
+      setCurrentElement(target);
+      // Also update modifier state
+      setHoldingModKey(e.altKey);
     }
   }
   function mouseDownUpListener(e) {
-    if (isCombinationModifiersPressed(e) || locatorActive()) {
+    // Update modifier state
+    setHoldingModKey(e.altKey);
+    if (e.altKey || locatorActive()) {
       e.preventDefault();
       e.stopPropagation();
     }
   }
   function clickListener(e) {
-    if (!isCombinationModifiersPressed(e) && !locatorActive()) {
+    // Check altKey directly for more reliable first-click detection
+    if (!e.altKey && !isCombinationModifiersPressed(e) && !locatorActive()) {
       return;
     }
     const target = e.target;
@@ -99,6 +105,9 @@ function Runtime(props) {
     root.addEventListener("mouseover", mouseOverListener, {
       capture: true
     });
+    root.addEventListener("mousemove", mouseMoveListener, {
+      capture: true
+    });
     root.addEventListener("keydown", keyDownListener);
     root.addEventListener("keyup", keyUpListener);
     root.addEventListener("click", clickListener, {

package/dist/components/Toast.js

@@ -1,23 +1,13 @@
 import { template as _$template } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
-import { setAttribute as _$setAttribute } from "solid-js/web";
-import { effect as _$effect } from "solid-js/web";
 import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
-var _tmpl$ = /*#__PURE__*/_$template(`<div style="z-index:99999;background-color:rgba(56, 189, 248, 0.5);pointer-events:none">`),
-  _tmpl$2 = /*#__PURE__*/_$template(`<div style=z-index:100000;pointer-events:none><img alt=Tree>`),
-  _tmpl$3 = /*#__PURE__*/_$template(`<div style="background-color:#111827;border-radius:8px;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1);font-size:14px;z-index:100000;pointer-events:auto">`);
-import { createSignal, onCleanup, onMount } from "solid-js";
+var _tmpl$ = /*#__PURE__*/_$template(`<div style="background-color:#111827;border-radius:8px;box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1);font-size:14px;z-index:100000;pointer-events:none">`);
+import { onCleanup, onMount } from "solid-js";
 import { Portal } from "solid-js/web";
-import TREE_ICON from "../_generated_tree_icon";
 export function Toast(props) {
   let timeoutId;
-  const [flashOpacity, setFlashOpacity] = createSignal(1);
   onMount(() => {
-    // Start flash fade after a brief moment so it's visible
-    setTimeout(() => {
-      setFlashOpacity(0);
-    }, 100);
     timeoutId = setTimeout(() => {
       props.onClose();
     }, 1500);
@@ -30,39 +20,15 @@ export function Toast(props) {
       return document.body;
     },
     get children() {
-      return [(() => {
-        var _el$ = _tmpl$();
-        _$setStyleProperty(_el$, "position", "fixed");
-        _$setStyleProperty(_el$, "top", "0");
-        _$setStyleProperty(_el$, "left", "0");
-        _$setStyleProperty(_el$, "right", "0");
-        _$setStyleProperty(_el$, "bottom", "0");
-        _$setStyleProperty(_el$, "width", "100vw");
-        _$setStyleProperty(_el$, "height", "100vh");
-        _$setStyleProperty(_el$, "transition", "opacity 0.3s ease-out");
-        _$effect(_$p => _$setStyleProperty(_el$, "opacity", flashOpacity()));
-        return _el$;
-      })(), (() => {
-        var _el$2 = _tmpl$2(),
-          _el$3 = _el$2.firstChild;
-        _$setStyleProperty(_el$2, "position", "fixed");
-        _$setStyleProperty(_el$2, "bottom", "16px");
-        _$setStyleProperty(_el$2, "left", "16px");
-        _$setAttribute(_el$3, "src", TREE_ICON);
-        _$setStyleProperty(_el$3, "width", "32px");
-        _$setStyleProperty(_el$3, "height", "32px");
-        return _el$2;
-      })(), (() => {
-        var _el$4 = _tmpl$3();
-        _$setStyleProperty(_el$4, "position", "fixed");
-        _$setStyleProperty(_el$4, "bottom", "16px");
-        _$setStyleProperty(_el$4, "left", "50%");
-        _$setStyleProperty(_el$4, "transform", "translateX(-50%)");
-        _$setStyleProperty(_el$4, "color", "white");
-        _$setStyleProperty(_el$4, "padding", "8px 16px");
-        _$insert(_el$4, () => props.message);
-        return _el$4;
-      })()];
+      var _el$ = _tmpl$();
+      _$setStyleProperty(_el$, "position", "fixed");
+      _$setStyleProperty(_el$, "bottom", "16px");
+      _$setStyleProperty(_el$, "left", "50%");
+      _$setStyleProperty(_el$, "transform", "translateX(-50%)");
+      _$setStyleProperty(_el$, "color", "white");
+      _$setStyleProperty(_el$, "padding", "8px 16px");
+      _$insert(_el$, () => props.message);
+      return _el$;
     }
   });
 }

package/dist/initRuntime.js

@@ -15,7 +15,7 @@ export function initRuntime({
     return;
   }
 
-  // Install browser API on window.__locatorjs__
+  // Install browser API on window.__treelocator__
   installBrowserAPI(adapter);
 
   // add style tag to head

package/dist/output.css

@@ -1164,6 +1164,11 @@ select {
   border-style: solid;
 }
 
+.border-amber-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
+}
+
 .border-blue-500 {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@treelocator/runtime",
-  "version": "0.1.0",
-  "description": "TreeLocatorJS runtime for component ancestry tracking. Alt+click any element to copy its component tree to clipboard. Exposes window.__locatorjs__ API for browser automation (Playwright, Puppeteer, Selenium, Cypress).",
+  "version": "0.1.2",
+  "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",
     "locatorjs",
@@ -71,5 +71,5 @@
     "directory": "packages/runtime"
   },
   "license": "MIT",
-  "gitHead": "e7aff23b5a8461ba254e2f60e7bdb25081d7be50"
+  "gitHead": "afc8a534284e818665bb4d03b7fa940ec5ad5880"
 }

package/src/browserApi.ts

@@ -16,7 +16,7 @@ export interface LocatorJSAPI {
    *
    * @example
    * // Basic usage with CSS selector
-   * window.__locatorjs__.getPath('button.submit');
+   * window.__treelocator__.getPath('button.submit');
    * // Returns:
    * // "div in App at src/App.tsx:15
    * //  └─ button in SubmitButton at src/components/SubmitButton.tsx:12"
@@ -24,12 +24,12 @@ export interface LocatorJSAPI {
    * @example
    * // Usage with HTMLElement
    * const button = document.querySelector('button.submit');
-   * window.__locatorjs__.getPath(button);
+   * window.__treelocator__.getPath(button);
    *
    * @example
    * // In Playwright
    * const path = await page.evaluate(() => {
-   *   return window.__locatorjs__.getPath('button.submit');
+   *   return window.__treelocator__.getPath('button.submit');
    * });
    * console.log(path);
    */
@@ -48,7 +48,7 @@ export interface LocatorJSAPI {
    *
    * @example
    * // Get structured ancestry data
-   * const ancestry = window.__locatorjs__.getAncestry('button.submit');
+   * const ancestry = window.__treelocator__.getAncestry('button.submit');
    * // Returns: [
    * //   { elementName: 'div', componentName: 'App', filePath: 'src/App.tsx', line: 15 },
    * //   { elementName: 'button', componentName: 'SubmitButton', filePath: 'src/components/SubmitButton.tsx', line: 12 }
@@ -57,7 +57,7 @@ export interface LocatorJSAPI {
    * @example
    * // In Playwright - extract just component names
    * const components = await page.evaluate(() => {
-   *   const ancestry = window.__locatorjs__.getAncestry('.my-element');
+   *   const ancestry = window.__treelocator__.getAncestry('.my-element');
    *   return ancestry?.map(item => item.componentName).filter(Boolean);
    * });
    */
@@ -72,14 +72,14 @@ export interface LocatorJSAPI {
    *
    * @example
    * // Get both formats at once
-   * const data = window.__locatorjs__.getPathData('button.submit');
+   * const data = window.__treelocator__.getPathData('button.submit');
    * console.log(data.path);      // Human-readable string
    * console.log(data.ancestry);  // Structured array
    *
    * @example
    * // In Playwright - useful for comprehensive debugging
    * const data = await page.evaluate(() => {
-   *   return window.__locatorjs__.getPathData('.error-message');
+   *   return window.__treelocator__.getPathData('.error-message');
    * });
    * if (data) {
    *   console.log('Component tree:', data.path);
@@ -98,11 +98,11 @@ export interface LocatorJSAPI {
    *
    * @example
    * // View help in browser console
-   * console.log(window.__locatorjs__.help());
+   * console.log(window.__treelocator__.help());
    *
    * @example
    * // In Playwright - view help
-   * const help = await page.evaluate(() => window.__locatorjs__.help());
+   * const help = await page.evaluate(() => window.__treelocator__.help());
    * console.log(help);
    */
   help(): string;
@@ -130,7 +130,7 @@ function getAncestryForElement(element: HTMLElement): AncestryItem[] | null {
 
 const HELP_TEXT = `
 ╔═══════════════════════════════════════════════════════════════════════════╗
-║                          LocatorJS Browser API                            ║
+║                        TreeLocatorJS Browser API                          ║
 ║                  Programmatic Component Ancestry Access                   ║
 ╚═══════════════════════════════════════════════════════════════════════════╝
 
@@ -141,8 +141,8 @@ METHODS:
    Returns a formatted string showing the component hierarchy.
 
    Usage:
-     window.__locatorjs__.getPath('button.submit')
-     window.__locatorjs__.getPath(document.querySelector('.my-button'))
+     window.__treelocator__.getPath('button.submit')
+     window.__treelocator__.getPath(document.querySelector('.my-button'))
 
    Returns:
      "div in App at src/App.tsx:15
@@ -152,7 +152,7 @@ METHODS:
    Returns raw ancestry data as an array of objects.
 
    Usage:
-     window.__locatorjs__.getAncestry('button.submit')
+     window.__treelocator__.getAncestry('button.submit')
 
    Returns:
      [
@@ -166,7 +166,7 @@ METHODS:
    Returns both formatted path and raw ancestry in one call.
 
    Usage:
-     const data = window.__locatorjs__.getPathData('button.submit')
+     const data = window.__treelocator__.getPathData('button.submit')
      console.log(data.path)      // formatted string
      console.log(data.ancestry)  // structured array
 
@@ -178,20 +178,20 @@ PLAYWRIGHT EXAMPLES:
 
 // Get component path for debugging
 const path = await page.evaluate(() => {
-  return window.__locatorjs__.getPath('button.submit');
+  return window.__treelocator__.getPath('button.submit');
 });
 console.log(path);
 
 // Extract component names
 const components = await page.evaluate(() => {
-  const ancestry = window.__locatorjs__.getAncestry('.error-message');
+  const ancestry = window.__treelocator__.getAncestry('.error-message');
   return ancestry?.map(item => item.componentName).filter(Boolean);
 });
 
 // Create a test helper
 async function getComponentPath(page, selector) {
   return await page.evaluate((sel) => {
-    return window.__locatorjs__.getPath(sel);
+    return window.__treelocator__.getPath(sel);
   }, selector);
 }
 
@@ -199,14 +199,14 @@ PUPPETEER EXAMPLES:
 ------------------
 
 const path = await page.evaluate(() => {
-  return window.__locatorjs__.getPath('.my-button');
+  return window.__treelocator__.getPath('.my-button');
 });
 
 SELENIUM EXAMPLES:
 -----------------
 
 const path = await driver.executeScript(() => {
-  return window.__locatorjs__.getPath('button.submit');
+  return window.__treelocator__.getPath('button.submit');
 });
 
 CYPRESS EXAMPLES:
@@ -222,9 +222,9 @@ NOTES:
 • Accepts CSS selectors or HTMLElement objects
 • Returns null if element not found or framework not supported
 • Works with React, Vue, Svelte, Preact, and any JSX framework
-• Automatically installed when LocatorJS runtime initializes
+• Automatically installed when TreeLocatorJS runtime initializes
 
-Documentation: https://github.com/infi-pc/locatorjs
+Documentation: https://github.com/wende/treelocatorjs
 `;
 
 export function createBrowserAPI(
@@ -283,6 +283,6 @@ export function createBrowserAPI(
 
 export function installBrowserAPI(adapterIdParam?: AdapterId): void {
   if (typeof window !== "undefined") {
-    (window as any).__locatorjs__ = createBrowserAPI(adapterIdParam);
+    (window as any).__treelocator__ = createBrowserAPI(adapterIdParam);
   }
 }

package/src/components/MaybeOutline.tsx

@@ -21,23 +21,32 @@ export function MaybeOutline(props: {
           targets={props.targets}
         />
       ) : (
-        <div class="fixed top-0 left-0 w-screen h-screen flex items-center justify-center">
+        <div>
+          {/* Element outline box */}
           <div
-            class="flex items-center justify-center"
+            class="fixed rounded border border-solid border-amber-500"
             style={{
-              position: "absolute",
+              "z-index": 2,
               left: box().x + "px",
               top: box().y + "px",
               width: box().width + "px",
               height: box().height + "px",
-              "background-color": "rgba(222, 0, 0, 0.3)",
-              border: "1px solid rgba(222, 0, 0, 0.5)",
-              "border-radius": "2px",
-              "font-size": "12px",
-              "font-weight": "bold",
-              "text-shadow":
-                "-1px 1px 0 #fff, 1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff",
-              "text-overflow": "ellipsis",
+            }}
+          />
+          {/* Glass morphism label */}
+          <div
+            class="fixed text-xs font-medium rounded-md"
+            style={{
+              "z-index": 3,
+              left: box().x + 4 + "px",
+              top: box().y + 4 + "px",
+              padding: "4px 10px",
+              background: "rgba(120, 53, 15, 0.85)",
+              color: "#fff",
+              border: "1px solid rgba(255, 255, 255, 0.15)",
+              "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",
             }}
           >
             No source found

package/src/components/Outline.tsx

@@ -128,17 +128,35 @@ export function Outline(props: {
     <>
       <div>
         {domElementInfo() && <RenderBoxes allBoxes={domElementInfo()!} />}
+        {/* Element outline box */}
         <div
-          class="fixed flex text-xs font-bold items-center justify-center text-sky-500 rounded border border-solid border-sky-500"
+          class="fixed rounded border border-solid border-sky-500"
           style={{
             "z-index": 2,
             left: box().x + "px",
             top: box().y + "px",
             width: box().width + "px",
             height: box().height + "px",
-            "text-shadow":
-              "-1px 1px 0 #fff, 1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff",
+          }}
+        />
+        {/* Glass morphism label */}
+        <div
+          class="fixed text-xs font-medium rounded-md"
+          style={{
+            "z-index": 3,
+            left: box().x + 4 + "px",
+            top: box().y + 4 + "px",
+            padding: "4px 10px",
+            background: "rgba(15, 23, 42, 0.85)",
+            color: "#fff",
+            border: "1px solid rgba(255, 255, 255, 0.15)",
+            "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",
+            "max-width": box().width - 8 + "px",
+            overflow: "hidden",
             "text-overflow": "ellipsis",
+            "white-space": "nowrap",
           }}
         >
           {props.element.thisElement.label}

package/src/components/Runtime.tsx

@@ -1,5 +1,5 @@
 import { Targets } from "@locator/shared";
-import { batch, createEffect, createSignal, onCleanup } from "solid-js";
+import { createEffect, createSignal, onCleanup } from "solid-js";
 import { render } from "solid-js/web";
 import { AdapterId } from "../consts";
 import { isCombinationModifiersPressed } from "../functions/isCombinationModifiersPressed";
@@ -42,6 +42,11 @@ function Runtime(props: RuntimeProps) {
     setHoldingModKey(isCombinationModifiersPressed(e, true));
   }
 
+  function mouseMoveListener(e: MouseEvent) {
+    // Update modifier state from mouse events - more reliable than keydown/keyup
+    setHoldingModKey(e.altKey);
+  }
+
   function mouseOverListener(e: MouseEvent) {
     const target = e.target;
     if (target && target instanceof HTMLElement) {
@@ -49,23 +54,25 @@ function Runtime(props: RuntimeProps) {
         return;
       }
 
-      setHoldingModKey(isCombinationModifiersPressed(e, true));
-
-      batch(() => {
-        setCurrentElement(target);
-      });
+      setCurrentElement(target);
+      // Also update modifier state
+      setHoldingModKey(e.altKey);
     }
   }
 
   function mouseDownUpListener(e: MouseEvent) {
-    if (isCombinationModifiersPressed(e) || locatorActive()) {
+    // Update modifier state
+    setHoldingModKey(e.altKey);
+
+    if (e.altKey || locatorActive()) {
       e.preventDefault();
       e.stopPropagation();
     }
   }
 
   function clickListener(e: MouseEvent) {
-    if (!isCombinationModifiersPressed(e) && !locatorActive()) {
+    // Check altKey directly for more reliable first-click detection
+    if (!e.altKey && !isCombinationModifiersPressed(e) && !locatorActive()) {
       return;
     }
 
@@ -117,6 +124,9 @@ function Runtime(props: RuntimeProps) {
     root.addEventListener("mouseover", mouseOverListener as EventListener, {
       capture: true,
     });
+    root.addEventListener("mousemove", mouseMoveListener as EventListener, {
+      capture: true,
+    });
     root.addEventListener("keydown", keyDownListener as EventListener);
     root.addEventListener("keyup", keyUpListener as EventListener);
     root.addEventListener("click", clickListener as EventListener, {
@@ -175,9 +185,9 @@ function Runtime(props: RuntimeProps) {
       <div
         class="fixed pointer-events-auto"
         style={{ "z-index": "2147483646", bottom: "20px", right: "20px" }}
-        title="LocatorJS - Component Ancestry Tracker"
-        data-locatorjs-api="window.__locatorjs__"
-        data-locatorjs-help="window.__locatorjs__.help()"
+        title="TreeLocatorJS - Component Ancestry Tracker"
+        data-treelocator-api="window.__treelocator__"
+        data-treelocator-help="window.__treelocator__.help()"
       >
         <div
           class="rounded-full bg-white shadow-lg flex items-center justify-center cursor-pointer overflow-hidden"
@@ -192,12 +202,12 @@ function Runtime(props: RuntimeProps) {
           onMouseEnter={(e) => e.currentTarget.style.transform = "scale(1.25)"}
           onMouseLeave={(e) => e.currentTarget.style.transform = "scale(1)"}
           onClick={() => setLocatorActive(!locatorActive())}
-          aria-label="LocatorJS: Get component paths using window.__locatorjs__.getPath(selector)"
+          aria-label="TreeLocatorJS: Get component paths using window.__treelocator__.getPath(selector)"
           role="button"
         >
           <img
             src={treeIconUrl}
-            alt="LocatorJS - Browser API available at window.__locatorjs__ - Call window.__locatorjs__.help() for usage instructions"
+            alt="TreeLocatorJS - Browser API available at window.__treelocator__ - Call window.__treelocator__.help() for usage instructions"
             width={51}
             height={51}
           />
@@ -216,9 +226,9 @@ function Runtime(props: RuntimeProps) {
           }}
           aria-hidden="true"
           data-ai-hint="true"
-          data-ai-instruction="AI Assistant: LocatorJS provides window.__locatorjs__ API for component ancestry tracking. Usage: window.__locatorjs__.getPath('css-selector') returns component hierarchy. For full API documentation, evaluate: window.__locatorjs__.help() Example: page.evaluate(function() { return window.__locatorjs__.getPath('button.submit'); })"
+          data-ai-instruction="AI Assistant: TreeLocatorJS provides window.__treelocator__ API for component ancestry tracking. Usage: window.__treelocator__.getPath('css-selector') returns component hierarchy. For full API documentation, evaluate: window.__treelocator__.help() Example: page.evaluate(function() { return window.__treelocator__.getPath('button.submit'); })"
         >
-          LocatorJS Browser API: Call window.__locatorjs__.help() for usage instructions
+          TreeLocatorJS Browser API: Call window.__treelocator__.help() for usage instructions
         </div>
       </div>
     </>

package/src/components/Toast.tsx

@@ -1,17 +1,10 @@
-import { createSignal, onCleanup, onMount } from "solid-js";
+import { onCleanup, onMount } from "solid-js";
 import { Portal } from "solid-js/web";
-import TREE_ICON from "../_generated_tree_icon";
 
 export function Toast(props: { message: string; onClose: () => void }) {
   let timeoutId: ReturnType<typeof setTimeout>;
-  const [flashOpacity, setFlashOpacity] = createSignal(1);
 
   onMount(() => {
-    // Start flash fade after a brief moment so it's visible
-    setTimeout(() => {
-      setFlashOpacity(0);
-    }, 100);
-
     timeoutId = setTimeout(() => {
       props.onClose();
     }, 1500);
@@ -23,43 +16,6 @@ export function Toast(props: { message: string; onClose: () => void }) {
 
   return (
     <Portal mount={document.body}>
-      {/* Flash overlay */}
-      <div
-        style={{
-          position: "fixed",
-          top: "0",
-          left: "0",
-          right: "0",
-          bottom: "0",
-          width: "100vw",
-          height: "100vh",
-          "z-index": 99999,
-          "background-color": "rgba(56, 189, 248, 0.5)",
-          opacity: flashOpacity(),
-          transition: "opacity 0.3s ease-out",
-          "pointer-events": "none",
-        }}
-      />
-      {/* Tree icon in bottom left */}
-      <div
-        style={{
-          position: "fixed",
-          bottom: "16px",
-          left: "16px",
-          "z-index": 100000,
-          "pointer-events": "none",
-        }}
-      >
-        <img
-          src={TREE_ICON}
-          alt="Tree"
-          style={{
-            width: "32px",
-            height: "32px",
-          }}
-        />
-      </div>
-      {/* Toast message */}
       <div
         style={{
           position: "fixed",
@@ -73,7 +29,7 @@ export function Toast(props: { message: string; onClose: () => void }) {
           "box-shadow": "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
           "font-size": "14px",
           "z-index": 100000,
-          "pointer-events": "auto",
+          "pointer-events": "none",
         }}
       >
         {props.message}

package/src/global.d.ts

@@ -7,7 +7,7 @@ declare global {
     __REACT_DEVTOOLS_GLOBAL_HOOK__: ReactDevtoolsHook;
     __LOCATOR_DATA__: { [filename: string]: FileStorage };
     /**
-     * LocatorJS Browser API
+     * TreeLocatorJS Browser API
      *
      * Provides programmatic access to component ancestry information.
      * Works with browser automation tools like Playwright, Puppeteer, Selenium, etc.
@@ -15,7 +15,7 @@ declare global {
      * @example
      * // In Playwright
      * const path = await page.evaluate(() => {
-     *   return window.__locatorjs__.getPath('button.submit');
+     *   return window.__treelocator__.getPath('button.submit');
      * });
      * console.log(path);
      *
@@ -23,9 +23,9 @@ declare global {
      * // Get raw ancestry data
      * const ancestry = await page.evaluate(() => {
      *   const element = document.querySelector('button.submit');
-     *   return window.__locatorjs__.getAncestry(element);
+     *   return window.__treelocator__.getAncestry(element);
      * });
      */
-    __locatorjs__: LocatorJSAPI;
+    __treelocator__: LocatorJSAPI;
   }
 }

package/src/initRuntime.ts

@@ -19,7 +19,7 @@ export function initRuntime({
     return;
   }
 
-  // Install browser API on window.__locatorjs__
+  // Install browser API on window.__treelocator__
   installBrowserAPI(adapter);
 
   // add style tag to head

package/.turbo/turbo-build.log

@@ -1,30 +0,0 @@
-
-> @treelocator/runtime@0.1.0 build /Users/wende/projects/locatorjs/packages/runtime
-> concurrently pnpm:build:*
-
-[tailwind] 
-[tailwind] > @treelocator/runtime@0.1.0 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.0 build:wrapImage /Users/wende/projects/locatorjs/packages/runtime
-[wrapImage] > node ./scripts/wrapImage.js
-[wrapImage] 
-[ts] 
-[ts] > @treelocator/runtime@0.1.0 build:ts /Users/wende/projects/locatorjs/packages/runtime
-[ts] > tsc --declaration --emitDeclarationOnly --noEmit false --outDir dist
-[ts] 
-[babel] 
-[babel] > @treelocator/runtime@0.1.0 build:babel /Users/wende/projects/locatorjs/packages/runtime
-[babel] > babel src --out-dir dist --extensions .js,.jsx,.ts,.tsx
-[babel] 
-[wrapImage] Tree icon file generated
-[wrapImage] pnpm run build:wrapImage exited with code 0
-[tailwind] 
-[tailwind] Rebuilding...
-[tailwind] 
-[tailwind] Done in 176ms.
-[tailwind] pnpm run build:tailwind exited with code 0
-[babel] Successfully compiled 71 files with Babel (552ms).
-[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 +0,0 @@
-
-> @locator/runtime@0.5.1 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/getUsableFileName.test.tsx (4 tests) 1ms
- ✓ src/functions/transformPath.test.ts (3 tests) 1ms
- ✓ src/functions/evalTemplate.test.ts (1 test) 1ms
- ✓ src/functions/mergeRects.test.ts (1 test) 1ms
-
- Test Files  5 passed (5)
-      Tests  11 passed (11)
-   Start at  23:44:31
-   Duration  573ms (transform 266ms, setup 0ms, collect 341ms, tests 7ms, environment 1ms, prepare 391ms)
-

package/.turbo/turbo-ts.log

@@ -1,4 +0,0 @@
-
-> @locator/runtime@0.5.1 ts /Users/wende/projects/locatorjs/packages/runtime
-> tsc --noEmit
-

package/LICENSE

@@ -1,22 +0,0 @@
-MIT License
-
-Copyright (c) 2025 Krzysztof Wende
-Copyright (c) 2023 Michael Musil (original LocatorJS)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.