browsertrack 0.2.0 → 0.2.2

package/dist/client/index.cjs

@@ -28,7 +28,9 @@ __export(src_exports, {
   DEFAULT_OPTIONS: () => DEFAULT_OPTIONS,
   NoteInspector: () => NoteInspector,
   getClient: () => getClient,
-  init: () => init
+  init: () => init,
+  resolveComponentSource: () => resolveComponentSource,
+  shouldHideUIFromUrl: () => shouldHideUIFromUrl
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -167,12 +169,252 @@ function truncate(str, maxLength = 200) {
   return str.slice(0, maxLength) + "...";
 }
 
+// packages/core/src/safety.ts
+function safeJsonStringify(val, fallback = "{}") {
+  if (val === void 0) return fallback;
+  try {
+    const seen = /* @__PURE__ */ new WeakSet();
+    return JSON.stringify(val, (key, value) => {
+      if (typeof value === "object" && value !== null) {
+        if (seen.has(value)) {
+          return "[Circular]";
+        }
+        seen.add(value);
+      }
+      if (typeof value === "bigint") {
+        return value.toString();
+      }
+      return value;
+    });
+  } catch {
+    try {
+      return JSON.stringify(String(val));
+    } catch {
+      return fallback;
+    }
+  }
+}
+
+// packages/client/src/source/resolver.ts
+function resolveComponentSource(el) {
+  if (!el || typeof el !== "object") return void 0;
+  const reactInfo = resolveReactComponent(el);
+  if (reactInfo) return reactInfo;
+  const vueInfo = resolveVueComponent(el);
+  if (vueInfo) return vueInfo;
+  const svelteInfo = resolveSvelteComponent(el);
+  if (svelteInfo) return svelteInfo;
+  if (el.tagName && el.tagName.includes("-")) {
+    return {
+      framework: "web-component",
+      componentName: el.tagName.toLowerCase(),
+      hierarchy: [el.tagName.toLowerCase()]
+    };
+  }
+  const attrInfo = resolveDataAttributeComponent(el);
+  if (attrInfo) return attrInfo;
+  return void 0;
+}
+function resolveReactComponent(el) {
+  try {
+    const fiberKey = Object.keys(el).find(
+      (key) => key.startsWith("__reactFiber$") || key.startsWith("__reactInternalInstance$")
+    );
+    if (!fiberKey) return void 0;
+    const hostFiber = el[fiberKey];
+    if (!hostFiber) return void 0;
+    let sourceFile;
+    let sourceLine;
+    let sourceColumn;
+    let componentName;
+    const hierarchy = [];
+    let props;
+    if (hostFiber._debugSource) {
+      sourceFile = hostFiber._debugSource.fileName;
+      sourceLine = hostFiber._debugSource.lineNumber;
+      sourceColumn = hostFiber._debugSource.columnNumber;
+    }
+    if (hostFiber._debugOwner) {
+      const ownerType = hostFiber._debugOwner.type;
+      componentName = getReactComponentName(ownerType);
+      if (!sourceFile && hostFiber._debugOwner._debugSource) {
+        sourceFile = hostFiber._debugOwner._debugSource.fileName;
+        sourceLine = hostFiber._debugOwner._debugSource.lineNumber;
+        sourceColumn = hostFiber._debugOwner._debugSource.columnNumber;
+      }
+    }
+    let curr = hostFiber;
+    let depth = 0;
+    while (curr && depth < 50) {
+      depth++;
+      const type = curr.type;
+      const name = getReactComponentName(type);
+      if (name && !name.startsWith("html:") && name !== "Fragment") {
+        if (!componentName) {
+          componentName = name;
+        }
+        if (!hierarchy.includes(name)) {
+          hierarchy.unshift(name);
+        }
+        if (!sourceFile && curr._debugSource) {
+          sourceFile = curr._debugSource.fileName;
+          sourceLine = curr._debugSource.lineNumber;
+          sourceColumn = curr._debugSource.columnNumber;
+        }
+        if (!props && curr.memoizedProps && typeof curr.memoizedProps === "object") {
+          props = sanitizeProps(curr.memoizedProps);
+        }
+      }
+      curr = curr.return;
+    }
+    if (!componentName && !sourceFile) {
+      return void 0;
+    }
+    return {
+      framework: "react",
+      componentName,
+      sourceFile: normalizeFilePath(sourceFile),
+      sourceLine,
+      sourceColumn,
+      hierarchy: hierarchy.length > 0 ? hierarchy : componentName ? [componentName] : void 0,
+      props
+    };
+  } catch {
+    return void 0;
+  }
+}
+function getReactComponentName(type) {
+  if (!type) return void 0;
+  if (typeof type === "string") return void 0;
+  if (type.displayName) return type.displayName;
+  if (type.name) return type.name;
+  if (type.render?.displayName) return type.render.displayName;
+  if (type.render?.name) return type.render.name;
+  return void 0;
+}
+function resolveVueComponent(el) {
+  try {
+    const vueParent = el.__vueParentComponent || el.__vnode?.ctx;
+    if (vueParent) {
+      const type = vueParent.type || {};
+      const componentName = type.name || type.__name || type.displayName || "AnonymousComponent";
+      const sourceFile = type.__file;
+      const hierarchy = [];
+      let curr = vueParent;
+      let depth = 0;
+      while (curr && depth < 50) {
+        depth++;
+        const cType = curr.type || {};
+        const cName = cType.name || cType.__name || cType.displayName;
+        if (cName && !hierarchy.includes(cName)) {
+          hierarchy.unshift(cName);
+        }
+        curr = curr.parent;
+      }
+      return {
+        framework: "vue",
+        componentName,
+        sourceFile: normalizeFilePath(sourceFile),
+        hierarchy: hierarchy.length > 0 ? hierarchy : [componentName],
+        props: vueParent.props ? sanitizeProps(vueParent.props) : void 0
+      };
+    }
+    const vue2Instance = el.__vue__;
+    if (vue2Instance) {
+      const options = vue2Instance.$options || {};
+      const componentName = options.name || options._componentTag || "VueComponent";
+      const sourceFile = options.__file;
+      return {
+        framework: "vue",
+        componentName,
+        sourceFile: normalizeFilePath(sourceFile),
+        hierarchy: [componentName],
+        props: vue2Instance.$props ? sanitizeProps(vue2Instance.$props) : void 0
+      };
+    }
+    return void 0;
+  } catch {
+    return void 0;
+  }
+}
+function resolveSvelteComponent(el) {
+  try {
+    let curr = el;
+    let depth = 0;
+    while (curr && depth < 50) {
+      depth++;
+      const meta = curr.__svelte_meta;
+      if (meta && meta.loc) {
+        return {
+          framework: "svelte",
+          sourceFile: normalizeFilePath(meta.loc.file),
+          sourceLine: meta.loc.line,
+          sourceColumn: meta.loc.column,
+          componentName: meta.loc.file ? getBaseNameWithoutExt(meta.loc.file) : void 0,
+          hierarchy: meta.loc.file ? [getBaseNameWithoutExt(meta.loc.file)] : void 0
+        };
+      }
+      curr = curr.parentElement;
+    }
+    return void 0;
+  } catch {
+    return void 0;
+  }
+}
+function resolveDataAttributeComponent(el) {
+  try {
+    const compEl = el.closest("[data-component], [data-component-name], [data-source-file]");
+    if (!compEl) return void 0;
+    const componentName = compEl.getAttribute("data-component") || compEl.getAttribute("data-component-name") || void 0;
+    const sourceFile = compEl.getAttribute("data-source-file") || void 0;
+    const lineAttr = compEl.getAttribute("data-source-line");
+    const sourceLine = lineAttr ? parseInt(lineAttr, 10) : void 0;
+    if (!componentName && !sourceFile) return void 0;
+    return {
+      framework: "vanilla",
+      componentName,
+      sourceFile: normalizeFilePath(sourceFile),
+      sourceLine: isNaN(sourceLine) ? void 0 : sourceLine,
+      hierarchy: componentName ? [componentName] : void 0
+    };
+  } catch {
+    return void 0;
+  }
+}
+function normalizeFilePath(filePath) {
+  if (!filePath) return void 0;
+  const cleaned = filePath.split("?")[0];
+  return cleaned;
+}
+function getBaseNameWithoutExt(filePath) {
+  const parts = filePath.split("/");
+  const last = parts[parts.length - 1] || filePath;
+  return last.split(".")[0] || last;
+}
+function sanitizeProps(props) {
+  const result = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (key.startsWith("__") || typeof value === "function") continue;
+    if (value === null || value === void 0) {
+      result[key] = value;
+    } else if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+      result[key] = value;
+    } else if (Array.isArray(value)) {
+      result[key] = `Array(${value.length})`;
+    } else if (typeof value === "object") {
+      result[key] = "[Object]";
+    }
+  }
+  return result;
+}
+
 // packages/client/src/interceptors/interaction.ts
 function extractElementSummary(el) {
   const selector = getSemanticSelector(el);
   const tag = el.tagName.toLowerCase();
   const id = el.id || void 0;
   const classes = Array.from(el.classList || []);
+  const componentSource = resolveComponentSource(el);
   let boundingRect = void 0;
   let visible = true;
   try {
@@ -204,7 +446,8 @@ function extractElementSummary(el) {
     boundingRect,
     visible,
     innerText,
-    outerHTML
+    outerHTML,
+    componentSource
   };
 }
 function setupInteractionInterceptors(onInteraction) {
@@ -522,10 +765,62 @@ var DEFAULT_OPTIONS = {
     enabled: true,
     shortcut: "Alt+Click",
     showBadges: true,
+    showToolbar: true,
     maskSelectors: ['input[type="password"]', "[data-sensitive]"]
   },
+  hidden: false,
+  hideQueryParam: void 0,
   debug: false
 };
+var HIDE_VALUES = /* @__PURE__ */ new Set(["0", "false", "hidden", "hide", "off", "none", "disabled", "ui_off", "silent"]);
+function shouldHideUIFromUrl(customParam, searchString) {
+  let search = searchString;
+  if (search === void 0) {
+    if (typeof window === "undefined" || !window.location) return false;
+    search = window.location.search;
+  }
+  if (!search) return false;
+  try {
+    const params = new URLSearchParams(search);
+    if (customParam) {
+      const customKeys = Array.isArray(customParam) ? customParam : [customParam];
+      for (const key of customKeys) {
+        if (params.has(key)) {
+          const val = (params.get(key) || "").toLowerCase().trim();
+          if (val === "" || val === "1" || val === "true" || HIDE_VALUES.has(val)) {
+            return true;
+          }
+        }
+      }
+    }
+    for (const flag of ["no_bt", "no_browsertrack", "hide_bt", "hide_browsertrack"]) {
+      if (params.has(flag)) {
+        const val = (params.get(flag) || "").toLowerCase().trim();
+        if (val === "" || val === "1" || val === "true" || val === "yes") {
+          return true;
+        }
+      }
+    }
+    if (params.has("bt")) {
+      const val = (params.get("bt") || "").toLowerCase().trim();
+      if (HIDE_VALUES.has(val)) return true;
+    }
+    if (params.has("browsertrack")) {
+      const val = (params.get("browsertrack") || "").toLowerCase().trim();
+      if (HIDE_VALUES.has(val)) return true;
+    }
+    if (params.has("bt_ui")) {
+      const val = (params.get("bt_ui") || "").toLowerCase().trim();
+      if (HIDE_VALUES.has(val) || val === "0" || val === "false") return true;
+    }
+    if (params.has("bt_hide")) {
+      const val = (params.get("bt_hide") || "").toLowerCase().trim();
+      if (val === "" || val === "1" || val === "true") return true;
+    }
+  } catch {
+  }
+  return false;
+}
 
 // packages/client/src/interceptors/console.ts
 function setupConsoleInterceptors(onConsole) {
@@ -586,12 +881,16 @@ function setupConsoleInterceptors(onConsole) {
 function setupNavigationInterceptors(onNavigation) {
   if (typeof window === "undefined" || typeof history === "undefined") return () => {
   };
-  let currentUrl = redactUrl(window.location.href);
-  onNavigation({
-    to: currentUrl,
-    type: "initial",
-    timestamp: Date.now()
-  });
+  let currentUrl = "";
+  try {
+    currentUrl = redactUrl(window.location.href);
+    onNavigation({
+      to: currentUrl,
+      type: "initial",
+      timestamp: Date.now()
+    });
+  } catch {
+  }
   const originalPushState = history.pushState;
   const originalReplaceState = history.replaceState;
   history.pushState = function(data, unused, url) {
@@ -627,26 +926,32 @@ function setupNavigationInterceptors(onNavigation) {
     return result;
   };
   const onPopState = () => {
-    const from = currentUrl;
-    const to = redactUrl(window.location.href);
-    currentUrl = to;
-    onNavigation({
-      from,
-      to,
-      type: "popstate",
-      timestamp: Date.now()
-    });
+    try {
+      const from = currentUrl;
+      const to = redactUrl(window.location.href);
+      currentUrl = to;
+      onNavigation({
+        from,
+        to,
+        type: "popstate",
+        timestamp: Date.now()
+      });
+    } catch {
+    }
   };
   const onHashChange = () => {
-    const from = currentUrl;
-    const to = redactUrl(window.location.href);
-    currentUrl = to;
-    onNavigation({
-      from,
-      to,
-      type: "hashchange",
-      timestamp: Date.now()
-    });
+    try {
+      const from = currentUrl;
+      const to = redactUrl(window.location.href);
+      currentUrl = to;
+      onNavigation({
+        from,
+        to,
+        type: "hashchange",
+        timestamp: Date.now()
+      });
+    } catch {
+    }
   };
   window.addEventListener("popstate", onPopState);
   window.addEventListener("hashchange", onHashChange);
@@ -683,31 +988,38 @@ function setupNetworkInterceptors(onNetwork) {
         urlStr = "unknown_url";
       }
       const safeUrl = redactUrl(urlStr);
+      let response;
       try {
-        const response = await originalFetch.apply(window, [input, init2]);
-        const durationMs = Date.now() - startTime;
-        onNetwork({
-          url: safeUrl,
-          method,
-          status: response.status,
-          statusText: response.statusText,
-          durationMs,
-          timestamp: startTime
-        });
-        return response;
+        response = await originalFetch.apply(window, [input, init2]);
       } catch (err) {
-        const durationMs = Date.now() - startTime;
+        const durationMs2 = Date.now() - startTime;
         const isAbort = err?.name === "AbortError";
+        try {
+          onNetwork({
+            url: safeUrl,
+            method,
+            durationMs: durationMs2,
+            error: err?.message || "Network request failed",
+            aborted: isAbort,
+            timestamp: startTime
+          });
+        } catch {
+        }
+        throw err;
+      }
+      const durationMs = Date.now() - startTime;
+      try {
         onNetwork({
           url: safeUrl,
           method,
+          status: response.status,
+          statusText: response.statusText,
           durationMs,
-          error: err?.message || "Network request failed",
-          aborted: isAbort,
           timestamp: startTime
         });
-        throw err;
+      } catch {
       }
+      return response;
     };
     cleanups.push(() => {
       window.fetch = originalFetch;
@@ -1095,15 +1407,18 @@ var WebSocketTransport = class {
     }
   }
   send(payload) {
-    const raw = JSON.stringify(payload);
-    if (this.isConnected()) {
-      try {
-        this.ws.send(raw);
-      } catch {
+    try {
+      const raw = safeJsonStringify(payload);
+      if (this.isConnected()) {
+        try {
+          this.ws.send(raw);
+        } catch {
+          this.enqueue(raw);
+        }
+      } else {
         this.enqueue(raw);
       }
-    } else {
-      this.enqueue(raw);
+    } catch {
     }
   }
   enqueue(raw) {
@@ -1128,17 +1443,17 @@ var WebSocketTransport = class {
   }
   sendHello() {
     if (typeof window === "undefined") return;
-    const hello = {
-      type: "hello",
-      origin: window.location.origin,
-      url: window.location.href,
-      title: document.title,
-      userAgent: navigator.userAgent,
-      timestamp: Date.now(),
-      projectId: this.projectId
-    };
     try {
-      this.ws.send(JSON.stringify(hello));
+      const hello = {
+        type: "hello",
+        origin: window.location.origin,
+        url: window.location.href,
+        title: document.title,
+        userAgent: navigator.userAgent,
+        timestamp: Date.now(),
+        projectId: this.projectId
+      };
+      this.ws.send(safeJsonStringify(hello));
     } catch {
     }
   }
@@ -1195,13 +1510,18 @@ var NoteInspector = class {
     __publicField(this, "dragStartY", 0);
     __publicField(this, "savedNotes", []);
     __publicField(this, "showMarkers", true);
+    __publicField(this, "isHidden", false);
     __publicField(this, "cleanups", []);
     this.transport = transport;
     this.screenshotDriver = screenshotDriver;
+    const hiddenByQuery = shouldHideUIFromUrl(options.hideQueryParam);
+    this.isHidden = options.hidden === true || hiddenByQuery;
+    this.showMarkers = options.showBadges !== false && !this.isHidden;
     this.options = {
       shortcut: "Alt+Click",
       maskSelectors: ['input[type="password"]', "[data-sensitive]"],
       showToolbar: true,
+      showBadges: true,
       ...options
     };
   }
@@ -1279,12 +1599,48 @@ var NoteInspector = class {
       this.hideHighlight();
     }
   }
+  isVisible() {
+    return !this.isHidden;
+  }
+  setVisible(visible) {
+    this.isHidden = !visible;
+    this.showMarkers = this.options.showBadges !== false && !this.isHidden;
+    if (this.container) {
+      this.container.style.display = this.isHidden ? "none" : "block";
+    }
+    if (this.toolbarElement) {
+      this.toolbarElement.style.display = this.isHidden ? "none" : "flex";
+    } else if (!this.isHidden && this.options.showToolbar !== false) {
+      this.createToolbar();
+    }
+    if (this.isHidden) {
+      this.hideHighlight();
+      this.hideRegionOverlay();
+      if (this.modalOverlay && this.shadowRoot) {
+        this.shadowRoot.removeChild(this.modalOverlay);
+        this.modalOverlay = null;
+      }
+      if (this.cardOverlay && this.shadowRoot) {
+        this.shadowRoot.removeChild(this.cardOverlay);
+        this.cardOverlay = null;
+      }
+      if (this.markersContainer) {
+        this.markersContainer.innerHTML = "";
+      }
+    } else {
+      this.renderMarkers();
+      this.updateToolbarCount();
+    }
+  }
   ensureContainer() {
     if (typeof document === "undefined") return null;
     if (!this.container) {
       this.container = document.createElement("div");
       this.container.id = "browsertrack-inspector-host";
       this.container.style.cssText = "all: initial; position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: 2147483647; pointer-events: none;";
+      if (this.isHidden) {
+        this.container.style.display = "none";
+      }
       this.shadowRoot = this.container.attachShadow({ mode: "open" });
       const style = document.createElement("style");
       style.textContent = `
@@ -1727,6 +2083,22 @@ var NoteInspector = class {
           color: #cbd5e1;
         }
 
+        .bt-component-pill {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          background: rgba(15, 23, 42, 0.95);
+          border: 1px solid rgba(99, 102, 241, 0.35);
+          border-radius: 6px;
+          padding: 6px 10px;
+          font-size: 11.5px;
+          color: #c7d2fe;
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
         .bt-scenario-stepper {
           display: flex;
           align-items: center;
@@ -1966,7 +2338,7 @@ var NoteInspector = class {
       this.toastContainer = document.createElement("div");
       this.toastContainer.className = "bt-toast-container";
       this.shadowRoot.appendChild(this.toastContainer);
-      if (this.options.showToolbar) {
+      if (this.options.showToolbar && !this.isHidden) {
         this.createToolbar();
       }
     }
@@ -2067,11 +2439,17 @@ var NoteInspector = class {
     const root = this.ensureContainer();
     if (!root || !this.markersContainer) return;
     this.markersContainer.innerHTML = "";
-    if (!this.showMarkers) return;
+    if (!this.showMarkers || this.isHidden) return;
     const currentPath = window.location.pathname;
-    const activeNotes = this.savedNotes.filter(
-      (n) => n.status === "OPEN" && (n.route === currentPath || !n.route || n.route === "/" || window.location.href.includes(n.route))
-    );
+    const activeNotes = this.savedNotes.filter((n) => {
+      if (n.status !== "OPEN") return false;
+      if (!n.route) return true;
+      if (n.route === currentPath) return true;
+      if (n.route.includes("#") || n.route.includes("?")) {
+        return window.location.href.includes(n.route);
+      }
+      return false;
+    });
     const pageNotes = [];
     activeNotes.forEach((note, index) => {
       if (note.type === "page") {
@@ -2198,6 +2576,13 @@ var NoteInspector = class {
 
         ${scenarioStepsHtml}
 
+        ${note.elementContext?.componentSource?.componentName ? `<div class="bt-component-pill" title="${note.elementContext.componentSource.sourceFile ? note.elementContext.componentSource.sourceFile + (note.elementContext.componentSource.sourceLine ? ":" + note.elementContext.componentSource.sourceLine : "") : note.elementContext.componentSource.componentName}">
+                <span>\u{1F9EC}</span>
+                <span style="font-weight: 600; color: #a5b4fc;">&lt;${note.elementContext.componentSource.componentName}&gt;</span>
+                ${note.elementContext.componentSource.sourceFile ? `<span style="color: #64748b; font-size: 11px; margin-left: 4px;">${note.elementContext.componentSource.sourceFile}${note.elementContext.componentSource.sourceLine ? ":" + note.elementContext.componentSource.sourceLine : ""}</span>` : ""}
+                ${note.elementContext.componentSource.framework ? `<span class="bt-mode-badge" style="background: rgba(99, 102, 241, 0.15); color: #818cf8; margin-left: auto; font-size: 10px;">${note.elementContext.componentSource.framework.toUpperCase()}</span>` : ""}
+              </div>` : ""}
+
         <div class="bt-target-pill" title="${contextText}">
           <span>\u{1F3F7}\uFE0F</span>
           <span class="bt-pill-content">${contextText}</span>
@@ -2289,65 +2674,83 @@ var NoteInspector = class {
   }
   setupListeners() {
     const onMouseMove = (e) => {
-      if (this.modalOverlay || this.cardOverlay || this.isDraggingRegion || this.activeMode === "region") return;
-      const path = e.composedPath ? e.composedPath() : [];
-      if (this.container && path.includes(this.container)) {
-        this.hideHighlight();
-        return;
-      }
-      if (e.altKey || this.activeMode === "element") {
-        const target = document.elementFromPoint(e.clientX, e.clientY);
-        if (target && target !== this.container && !this.container?.contains(target)) {
-          this.hoveredElement = target;
-          this.updateHighlight(target);
+      try {
+        if (this.isHidden || this.modalOverlay || this.cardOverlay || this.isDraggingRegion || this.activeMode === "region") return;
+        const path = e.composedPath ? e.composedPath() : [];
+        if (this.container && path.includes(this.container)) {
+          this.hideHighlight();
           return;
         }
-      }
-      if (!e.altKey && this.activeMode !== "element") {
-        this.hideHighlight();
+        if (e.altKey || this.activeMode === "element") {
+          const target = document.elementFromPoint(e.clientX, e.clientY);
+          if (target && target !== this.container && !this.container?.contains(target)) {
+            this.hoveredElement = target;
+            this.updateHighlight(target);
+            return;
+          }
+        }
+        if (!e.altKey && this.activeMode !== "element") {
+          this.hideHighlight();
+        }
+      } catch {
       }
     };
     const onClick = (e) => {
-      if (this.modalOverlay || this.cardOverlay) return;
-      const path = e.composedPath ? e.composedPath() : [];
-      if (this.container && path.includes(this.container)) {
-        return;
-      }
-      if (this.activeMode === "region") return;
-      if (e.altKey || this.activeMode === "element") {
-        e.preventDefault();
-        e.stopPropagation();
-        const target = this.hoveredElement || document.elementFromPoint(e.clientX, e.clientY);
-        if (target && target !== this.container && !this.container?.contains(target)) {
-          this.selectedElement = target;
-          this.openNoteEditor(target, "element");
-          if (this.activeMode === "element" && !this.activeScenario) {
-            this.setMode("idle");
+      try {
+        if (this.isHidden || this.modalOverlay || this.cardOverlay) return;
+        const path = e.composedPath ? e.composedPath() : [];
+        if (this.container && path.includes(this.container)) {
+          return;
+        }
+        if (this.activeMode === "region") return;
+        if (e.altKey || this.activeMode === "element") {
+          e.preventDefault();
+          e.stopPropagation();
+          const target = this.hoveredElement || document.elementFromPoint(e.clientX, e.clientY);
+          if (target && target !== this.container && !this.container?.contains(target)) {
+            this.selectedElement = target;
+            this.openNoteEditor(target, "element");
+            if (this.activeMode === "element" && !this.activeScenario) {
+              this.setMode("idle");
+            }
           }
         }
+      } catch {
       }
     };
     const onKeyDown = (e) => {
-      if (e.key === "Escape") {
-        if (this.cardOverlay && this.cardOverlay.parentElement && this.shadowRoot) {
-          this.shadowRoot.removeChild(this.cardOverlay);
-          this.cardOverlay = null;
-        } else if (this.activeMode === "region" || this.activeMode === "element") {
-          if (!this.activeScenario) {
-            this.setMode("idle");
+      try {
+        if (e.key === "Escape") {
+          if (this.cardOverlay && this.cardOverlay.parentElement && this.shadowRoot) {
+            this.shadowRoot.removeChild(this.cardOverlay);
+            this.cardOverlay = null;
+          } else if (this.activeMode === "region" || this.activeMode === "element") {
+            if (!this.activeScenario) {
+              this.setMode("idle");
+            }
           }
         }
+      } catch {
       }
     };
     const onKeyUp = (e) => {
-      if (e.key === "Alt" && !this.modalOverlay && !this.cardOverlay && this.activeMode !== "element") {
-        this.hideHighlight();
+      try {
+        if (e.key === "Alt" && !this.modalOverlay && !this.cardOverlay && this.activeMode !== "element") {
+          this.hideHighlight();
+        }
+      } catch {
       }
     };
     const onScrollOrResize = () => {
-      requestAnimationFrame(() => {
-        this.updateMarkerPositions();
-      });
+      try {
+        requestAnimationFrame(() => {
+          try {
+            this.updateMarkerPositions();
+          } catch {
+          }
+        });
+      } catch {
+      }
     };
     window.addEventListener("mousemove", onMouseMove, { capture: true, passive: true });
     window.addEventListener("click", onClick, { capture: true });
@@ -2496,10 +2899,12 @@ var NoteInspector = class {
     if (noteType === "element") {
       this.updateHighlight(targetEl);
     }
+    const comp = noteType === "element" ? resolveComponentSource(targetEl) : void 0;
+    const compPrefix = comp?.componentName ? `\u{1F9EC} <${comp.componentName}>${comp.sourceFile ? " (" + comp.sourceFile + (comp.sourceLine ? ":" + comp.sourceLine : "") + ")" : ""} \xB7 ` : "";
     this.renderNoteModal({
       title: this.activeScenario ? `Step ${this.activeScenario.stepNumber}: ${this.activeScenario.title}` : "Add Visual Note",
       modeBadge: this.activeScenario ? `STEP ${this.activeScenario.stepNumber}` : noteType.toUpperCase(),
-      pillText: noteType === "page" ? `Page Viewport: ${window.innerWidth} \xD7 ${window.innerHeight} px` : `${getSemanticSelector(targetEl)} (${Math.round(targetEl.getBoundingClientRect().width)}\xD7${Math.round(targetEl.getBoundingClientRect().height)}) \xB7 Viewport: ${window.innerWidth}\xD7${window.innerHeight}`,
+      pillText: noteType === "page" ? `Page Viewport: ${window.innerWidth} \xD7 ${window.innerHeight} px` : `${compPrefix}${getSemanticSelector(targetEl)} (${Math.round(targetEl.getBoundingClientRect().width)}\xD7${Math.round(targetEl.getBoundingClientRect().height)}) \xB7 Viewport: ${window.innerWidth}\xD7${window.innerHeight}`,
       onSave: async (message, action) => {
         let scenarioParam;
         if (action === "next_step" && !this.activeScenario) {
@@ -2769,12 +3174,14 @@ var NoteInspector = class {
     if (innerText && innerText.length > 200) {
       innerText = truncate(innerText, 200);
     }
+    const componentSource = resolveComponentSource(el);
     return {
       selector,
       tag: el.tagName.toLowerCase(),
       attributes,
       outerHTML,
       innerText,
+      componentSource,
       parent: el.parentElement ? {
         selector: getSemanticSelector(el.parentElement),
         tag: el.parentElement.tagName.toLowerCase()
@@ -2805,7 +3212,11 @@ var NoteInspector = class {
           region.width,
           region.height
         );
-        resolve(canvas.toDataURL("image/png"));
+        try {
+          resolve(canvas.toDataURL("image/png"));
+        } catch {
+          resolve(dataUrl);
+        }
       };
       img.onerror = () => resolve(dataUrl);
       img.src = dataUrl;
@@ -2857,7 +3268,11 @@ var BrowserTrackClient = class {
     if (this.options.notes.enabled) {
       this.inspector = new NoteInspector(this.transport, this.screenshotDriver, {
         shortcut: this.options.notes.shortcut,
-        maskSelectors: this.options.notes.maskSelectors
+        maskSelectors: this.options.notes.maskSelectors,
+        showToolbar: this.options.notes.showToolbar,
+        showBadges: this.options.notes.showBadges,
+        hidden: this.options.hidden,
+        hideQueryParam: this.options.hideQueryParam
       });
     }
   }
@@ -2923,6 +3338,14 @@ var BrowserTrackClient = class {
       this.inspector.setMode("element");
     }
   }
+  isUIVisible() {
+    return this.inspector ? this.inspector.isVisible() : false;
+  }
+  setUIVisible(visible) {
+    if (this.inspector) {
+      this.inspector.setVisible(visible);
+    }
+  }
   setInspectMode(mode) {
     if (this.inspector) {
       this.inspector.setMode(mode);
@@ -3063,8 +3486,10 @@ if (typeof window !== "undefined") {
     const autoInit = currentScript?.getAttribute("data-auto-init") !== "false";
     const daemonUrl = currentScript?.getAttribute("data-daemon-url") || void 0;
     const projectId = currentScript?.getAttribute("data-project-id") || void 0;
+    const hidden = currentScript?.getAttribute("data-hidden") === "true";
+    const hideQueryParam = currentScript?.getAttribute("data-hide-query-param") || void 0;
     if (autoInit) {
-      init({ daemonUrl, projectId });
+      init({ daemonUrl, projectId, hidden, hideQueryParam });
     }
   } catch {
   }
@@ -3077,5 +3502,7 @@ if (typeof window !== "undefined") {
   DEFAULT_OPTIONS,
   NoteInspector,
   getClient,
-  init
+  init,
+  resolveComponentSource,
+  shouldHideUIFromUrl
 });