browsertrack 0.2.0 → 0.2.1

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,220 @@ function truncate(str, maxLength = 200) {
   return str.slice(0, maxLength) + "...";
 }
 
+// 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;
+    while (curr) {
+      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;
+      while (curr) {
+        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;
+    while (curr) {
+      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 +414,8 @@ function extractElementSummary(el) {
     boundingRect,
     visible,
     innerText,
-    outerHTML
+    outerHTML,
+    componentSource
   };
 }
 function setupInteractionInterceptors(onInteraction) {
@@ -522,10 +733,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) {
@@ -1195,13 +1458,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 +1547,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 +2031,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 +2286,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,7 +2387,7 @@ 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))
@@ -2198,6 +2518,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,7 +2616,7 @@ var NoteInspector = class {
   }
   setupListeners() {
     const onMouseMove = (e) => {
-      if (this.modalOverlay || this.cardOverlay || this.isDraggingRegion || this.activeMode === "region") return;
+      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();
@@ -2308,7 +2635,7 @@ var NoteInspector = class {
       }
     };
     const onClick = (e) => {
-      if (this.modalOverlay || this.cardOverlay) return;
+      if (this.isHidden || this.modalOverlay || this.cardOverlay) return;
       const path = e.composedPath ? e.composedPath() : [];
       if (this.container && path.includes(this.container)) {
         return;
@@ -2496,10 +2823,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 +3098,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()
@@ -2857,7 +3188,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 +3258,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 +3406,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 +3422,7 @@ if (typeof window !== "undefined") {
   DEFAULT_OPTIONS,
   NoteInspector,
   getClient,
-  init
+  init,
+  resolveComponentSource,
+  shouldHideUIFromUrl
 });

package/dist/client/index.d.ts

@@ -1,4 +1,4 @@
-import { B as Breadcrumb, i as ElementSummary, b as ClientCommand, d as CommandResponse, v as VisualNote, R as RegionContext } from '../notes-BMnonq46.js';
+import { B as Breadcrumb, j as ElementSummary, b as ClientCommand, d as CommandResponse, w as VisualNote, R as RegionContext, f as ComponentSourceInfo } from '../commands-fjuqKzkm.js';
 
 interface BrowserDiagClientOptions {
     daemonUrl?: string;
@@ -14,16 +14,32 @@ interface BrowserDiagClientOptions {
         enabled?: boolean;
         shortcut?: string;
         showBadges?: boolean;
+        showToolbar?: boolean;
         maskSelectors?: string[];
     };
+    /**
+     * Hide visible BrowserTrack UI (toolbar dock, pins, hover overlay) by default.
+     */
+    hidden?: boolean;
+    /**
+     * Custom query parameter(s) used to hide the UI (e.g. 'e2e', 'no_ui', 'clean').
+     * Built-in query params like ?bt=0, ?bt=false, ?bt=hidden, ?browsertrack=false, ?no_bt are supported automatically.
+     */
+    hideQueryParam?: string | string[];
     debug?: boolean;
 }
-declare const DEFAULT_OPTIONS: Required<Omit<BrowserDiagClientOptions, 'notes'>> & {
+declare const DEFAULT_OPTIONS: Required<Omit<BrowserDiagClientOptions, 'notes' | 'hideQueryParam'>> & {
+    hideQueryParam?: string | string[];
     notes: Required<NonNullable<BrowserDiagClientOptions['notes']>>;
 };
+/**
+ * Checks if the tool's visible UI should be hidden based on URL search query parameters.
+ */
+declare function shouldHideUIFromUrl(customParam?: string | string[], searchString?: string): boolean;
 
 declare class BrowserTrackClient {
-    options: Required<Omit<BrowserDiagClientOptions, 'notes'>> & {
+    options: Required<Omit<BrowserDiagClientOptions, 'notes' | 'hideQueryParam'>> & {
+        hideQueryParam?: string | string[];
         notes: Required<NonNullable<BrowserDiagClientOptions['notes']>>;
     };
     private breadcrumbs;
@@ -40,6 +56,8 @@ declare class BrowserTrackClient {
     openNoteEditor(el?: HTMLElement, noteType?: 'element' | 'page'): void;
     startRegionSelection(): void;
     startElementSelection(): void;
+    isUIVisible(): boolean;
+    setUIVisible(visible: boolean): void;
     setInspectMode(mode: 'element' | 'region' | 'page' | 'idle'): void;
     createNote(targetEl: HTMLElement, message: string, noteType?: 'element' | 'page'): Promise<void>;
     private handleRuntimeError;
@@ -140,6 +158,9 @@ interface InspectorOptions {
     shortcut?: string;
     maskSelectors?: string[];
     showToolbar?: boolean;
+    showBadges?: boolean;
+    hidden?: boolean;
+    hideQueryParam?: string | string[];
     onNoteCreated?: (note: Partial<VisualNote>) => void;
 }
 interface ActiveScenarioState {
@@ -157,6 +178,7 @@ interface ActiveScenarioState {
  * 5. Real-time Saved Note & Step Markers (pins with step sequencing numbers)
  * 6. Interactive Note & Step Detail Card (with previous/next step walk-through navigation)
  * 7. Floating quick dock / toolbar in bottom-right corner with Notes count and Flow controls
+ * 8. Automatic invisibility via query parameter (?bt=0, ?bt=false, ?bt=hidden, ?no_bt, custom query params)
  */
 declare class NoteInspector {
     private transport;
@@ -183,6 +205,7 @@ declare class NoteInspector {
     private dragStartY;
     private savedNotes;
     private showMarkers;
+    private isHidden;
     private cleanups;
     constructor(transport: WebSocketTransport, screenshotDriver: ScreenshotDriver, options?: InspectorOptions);
     init(): void;
@@ -191,6 +214,8 @@ declare class NoteInspector {
     startScenario(title?: string): void;
     finishScenario(): void;
     setMode(mode: NoteInspectMode): void;
+    isVisible(): boolean;
+    setVisible(visible: boolean): void;
     private ensureContainer;
     private createToolbar;
     private updateToolbarState;
@@ -221,10 +246,17 @@ declare class NoteInspector {
     destroy(): void;
 }
 
+/**
+ * Resolves framework component metadata, source file paths, line numbers,
+ * and component hierarchy directly from a live DOM element.
+ * Supports React (Fiber), Vue 2 & 3, Svelte, Custom Elements, and standard data attributes.
+ */
+declare function resolveComponentSource(el: HTMLElement): ComponentSourceInfo | undefined;
+
 /**
  * Initializes the BrowserTrack client.
  */
 declare function init(options?: BrowserDiagClientOptions): BrowserTrackClient;
 declare function getClient(): BrowserTrackClient | null;
 
-export { type ActiveScenarioState, BreadcrumbBuffer, type BrowserDiagClientOptions, BrowserScriptScreenshotDriver, BrowserTrackClient, DEFAULT_OPTIONS, type InspectorOptions, type NoteInspectMode, NoteInspector, type ScreenshotDriver, type ScreenshotResult, getClient, init };
+export { type ActiveScenarioState, BreadcrumbBuffer, type BrowserDiagClientOptions, BrowserScriptScreenshotDriver, BrowserTrackClient, DEFAULT_OPTIONS, type InspectorOptions, type NoteInspectMode, NoteInspector, type ScreenshotDriver, type ScreenshotResult, getClient, init, resolveComponentSource, shouldHideUIFromUrl };

package/dist/client/index.js

@@ -5,8 +5,10 @@ import {
   DEFAULT_OPTIONS,
   NoteInspector,
   getClient,
-  init
-} from "../chunk-WB7ZKWK7.js";
+  init,
+  resolveComponentSource,
+  shouldHideUIFromUrl
+} from "../chunk-INXDWPJW.js";
 import "../chunk-6VA7GBAO.js";
 export {
   BreadcrumbBuffer,
@@ -15,6 +17,8 @@ export {
   DEFAULT_OPTIONS,
   NoteInspector,
   getClient,
-  init
+  init,
+  resolveComponentSource,
+  shouldHideUIFromUrl
 };
 //# sourceMappingURL=index.js.map