browsertrack 0.2.1 → 0.2.3

package/dist/client/index.cjs

@@ -133,7 +133,8 @@ function redactUrl(rawUrl) {
 function getSemanticSelector(element, options = {}) {
   if (!element || !element.tagName) return "unknown";
   const maxClasses = options.maxClasses ?? 2;
-  const testId = element.getAttribute("data-testid") || element.getAttribute("data-test") || element.getAttribute("data-cy") || element.getAttribute("data-qa");
+  const maxParentDepth = options.maxParentDepth ?? 3;
+  const testId = element.getAttribute("data-testid") || element.getAttribute("data-test") || element.getAttribute("data-cy") || element.getAttribute("data-qa") || element.getAttribute("data-component");
   if (testId) {
     return `[data-testid="${testId}"]`;
   }
@@ -141,34 +142,122 @@ function getSemanticSelector(element, options = {}) {
   if (id && !/^[0-9]+$/.test(id) && !/[0-9a-f]{8}-[0-9a-f]{4}/i.test(id)) {
     return `#${id}`;
   }
+  const tag = element.tagName.toLowerCase();
   const ariaLabel = element.getAttribute("aria-label");
-  if (ariaLabel && ariaLabel.length < 30) {
-    return `${element.tagName.toLowerCase()}[aria-label="${ariaLabel}"]`;
+  if (ariaLabel && ariaLabel.length < 40) {
+    return `${tag}[aria-label="${ariaLabel}"]`;
+  }
+  const role = element.getAttribute("role");
+  if (role && !["presentation", "none"].includes(role)) {
+    const roleSelector = `${tag}[role="${role}"]`;
+    if (tag === "button" || tag === "a" || tag === "nav" || tag === "dialog") {
+      return roleSelector;
+    }
   }
   const nameAttr = element.getAttribute("name");
   if (nameAttr) {
-    return `${element.tagName.toLowerCase()}[name="${nameAttr}"]`;
-  }
-  const tag = element.tagName.toLowerCase();
-  const classList = Array.from(element.classList || []).filter((c) => !c.startsWith("css-") && !c.startsWith("_") && !/^[a-z0-9]{5,}$/i.test(c)).slice(0, maxClasses);
+    return `${tag}[name="${nameAttr}"]`;
+  }
+  const titleAttr = element.getAttribute("title");
+  if (titleAttr && titleAttr.length < 30) {
+    return `${tag}[title="${titleAttr}"]`;
+  }
+  const rawClassList = Array.from(element.classList || []);
+  const classList = rawClassList.filter(
+    (c) => !c.startsWith("css-") && !c.startsWith("_") && !/^[a-z0-9]{5,}$/i.test(c) && // filter dynamic hashed utility classes
+    !c.includes(":") && // Tailwind pseudo-class prefixes (hover:, md:, etc.)
+    !c.includes("[")
+    // Tailwind arbitrary value classes
+  ).slice(0, maxClasses);
   if (classList.length > 0) {
     const classStr = classList.map((c) => `.${c}`).join("");
     return `${tag}${classStr}`;
   }
-  if (element.parentElement && element.parentElement !== document.body && element.parentElement !== document.documentElement) {
-    const parentSelector = getSemanticSelector(element.parentElement, { maxClasses: 1 });
-    if (parentSelector && parentSelector !== "unknown" && !parentSelector.includes(">")) {
-      return `${parentSelector} > ${tag}`;
+  const hasParent = element.parentElement && (typeof document === "undefined" || element.parentElement !== document.body && element.parentElement !== document.documentElement);
+  if (hasParent) {
+    let suffix = "";
+    if (element.parentElement.children && element.parentElement.children.length > 1) {
+      const sameTagSiblings = Array.from(element.parentElement.children).filter(
+        (child) => child.tagName && child.tagName.toLowerCase() === tag
+      );
+      if (sameTagSiblings.length > 1) {
+        const index = sameTagSiblings.indexOf(element) + 1;
+        if (index > 0) {
+          suffix = `:nth-of-type(${index})`;
+        }
+      }
+    }
+    if (maxParentDepth > 0) {
+      const parentSelector = getSemanticSelector(element.parentElement, {
+        maxClasses: 1,
+        maxParentDepth: maxParentDepth - 1
+      });
+      if (parentSelector && parentSelector !== "unknown" && parentSelector !== "body" && parentSelector !== "html") {
+        return `${parentSelector} > ${tag}${suffix}`;
+      }
+    }
+    if (suffix) {
+      return `${tag}${suffix}`;
     }
   }
   return tag;
 }
+function resolveMeaningfulTarget(element) {
+  if (!element || typeof element !== "object") {
+    return element;
+  }
+  const el = element;
+  const isSvg = el.tagName.toLowerCase() === "svg" || el.namespaceURI?.includes("svg");
+  if (isSvg || el.closest?.("svg")) {
+    const interactiveParent = el.closest?.(
+      'button, a, [role="button"], [role="link"], [role="tab"], summary, label, [data-testid], [data-component]'
+    );
+    if (interactiveParent) return interactiveParent;
+    const svgEl = isSvg ? el : el.closest?.("svg");
+    if (svgEl) return svgEl;
+  }
+  const leafTags = ["span", "i", "em", "b", "strong", "small", "mark", "code"];
+  const tag = el.tagName.toLowerCase();
+  if (leafTags.includes(tag) && !el.id && !el.getAttribute("data-testid") && !el.getAttribute("data-component") && !el.getAttribute("aria-label")) {
+    const interactiveParent = el.closest?.(
+      'button, a, [role="button"], [role="link"], [role="tab"], [role="menuitem"], summary, label, [data-testid], [data-component]'
+    );
+    if (interactiveParent) return interactiveParent;
+  }
+  return el;
+}
 function truncate(str, maxLength = 200) {
   if (!str) return "";
   if (str.length <= maxLength) return str;
   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;
@@ -218,7 +307,9 @@ function resolveReactComponent(el) {
       }
     }
     let curr = hostFiber;
-    while (curr) {
+    let depth = 0;
+    while (curr && depth < 50) {
+      depth++;
       const type = curr.type;
       const name = getReactComponentName(type);
       if (name && !name.startsWith("html:") && name !== "Fragment") {
@@ -273,7 +364,9 @@ function resolveVueComponent(el) {
       const sourceFile = type.__file;
       const hierarchy = [];
       let curr = vueParent;
-      while (curr) {
+      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)) {
@@ -310,7 +403,9 @@ function resolveVueComponent(el) {
 function resolveSvelteComponent(el) {
   try {
     let curr = el;
-    while (curr) {
+    let depth = 0;
+    while (curr && depth < 50) {
+      depth++;
       const meta = curr.__svelte_meta;
       if (meta && meta.loc) {
         return {
@@ -849,12 +944,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) {
@@ -890,26 +989,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);
@@ -946,31 +1051,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;
@@ -1358,15 +1470,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) {
@@ -1391,17 +1506,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 {
     }
   }
@@ -1459,12 +1574,19 @@ var NoteInspector = class {
     __publicField(this, "savedNotes", []);
     __publicField(this, "showMarkers", true);
     __publicField(this, "isHidden", false);
+    __publicField(this, "isToolbarCollapsed", 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;
+    try {
+      if (typeof window !== "undefined" && window.sessionStorage) {
+        this.isToolbarCollapsed = window.sessionStorage.getItem("bt_toolbar_collapsed") === "true";
+      }
+    } catch {
+    }
     this.options = {
       shortcut: "Alt+Click",
       maskSelectors: ['input[type="password"]', "[data-sensitive]"],
@@ -1592,11 +1714,28 @@ var NoteInspector = class {
       this.shadowRoot = this.container.attachShadow({ mode: "open" });
       const style = document.createElement("style");
       style.textContent = `
-        :host {
-          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-          color-scheme: dark;
+        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+
+        :host, :host *, :host *::before, :host *::after {
+          box-sizing: border-box;
           -webkit-font-smoothing: antialiased;
           -moz-osx-font-smoothing: grayscale;
+          text-rendering: optimizeLegibility;
+        }
+
+        :host {
+          font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+          color-scheme: dark;
+          letter-spacing: -0.012em;
+        }
+
+        button, input, textarea, select {
+          font-family: inherit;
+          letter-spacing: inherit;
+        }
+
+        code, pre, kbd, .bt-mono, .bt-badge, .bt-region-badge, .bt-target-pill, .bt-component-pill {
+          font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
         }
         
         /* 1. Element Highlight Overlay */
@@ -1830,7 +1969,7 @@ var NoteInspector = class {
           pointer-events: auto;
           z-index: 2147483646;
           user-select: none;
-          transition: all 0.2s ease;
+          transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
         }
 
         .bt-toolbar-btn {
@@ -1891,6 +2030,86 @@ var NoteInspector = class {
           margin: 0 2px;
         }
 
+        .bt-toolbar-collapse-btn {
+          background: transparent;
+          border: none;
+          color: #64748b;
+          font-size: 11px;
+          font-weight: 700;
+          padding: 6px 8px;
+          border-radius: 20px;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          transition: all 0.15s ease;
+          font-family: inherit;
+        }
+
+        .bt-toolbar-collapse-btn:hover {
+          background: #1e293b;
+          color: #f8fafc;
+        }
+
+        /* Collapsed Toolbar State */
+        .bt-toolbar.bt-toolbar-collapsed {
+          padding: 0;
+          background: transparent;
+          border: none;
+          box-shadow: none;
+        }
+
+        .bt-toolbar.bt-toolbar-collapsed .bt-toolbar-btn,
+        .bt-toolbar.bt-toolbar-collapsed .bt-toolbar-divider,
+        .bt-toolbar.bt-toolbar-collapsed .bt-toolbar-collapse-btn {
+          display: none !important;
+        }
+
+        .bt-toolbar-trigger {
+          display: none;
+          background: #0f172a;
+          border: 1px solid #334155;
+          border-radius: 30px;
+          padding: 6px 14px;
+          color: #38bdf8;
+          font-size: 12px;
+          font-weight: 600;
+          cursor: pointer;
+          align-items: center;
+          gap: 8px;
+          box-shadow: 0 10px 25px -3px rgba(0,0,0,0.6), 0 4px 6px -4px rgba(0,0,0,0.4);
+          transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+          font-family: inherit;
+          user-select: none;
+        }
+
+        .bt-toolbar.bt-toolbar-collapsed .bt-toolbar-trigger {
+          display: inline-flex;
+        }
+
+        .bt-toolbar-trigger:hover {
+          background: #1e293b;
+          color: #ffffff;
+          transform: translateY(-2px);
+          box-shadow: 0 12px 28px -3px rgba(0,0,0,0.7);
+          border-color: #38bdf8;
+        }
+
+        .bt-pulse-dot {
+          width: 7px;
+          height: 7px;
+          border-radius: 50%;
+          background: #38bdf8;
+          box-shadow: 0 0 8px #38bdf8;
+          display: inline-block;
+          animation: bt-dot-pulse 2s infinite;
+        }
+
+        @keyframes bt-dot-pulse {
+          0%, 100% { opacity: 1; transform: scale(1); }
+          50% { opacity: 0.4; transform: scale(0.85); }
+        }
+
         /* 5. Modals & Popover Card */
         .bt-modal-backdrop {
           position: fixed;
@@ -2301,8 +2520,13 @@ var NoteInspector = class {
   createToolbar() {
     if (!this.shadowRoot || this.toolbarElement) return;
     this.toolbarElement = document.createElement("div");
-    this.toolbarElement.className = "bt-toolbar";
+    this.toolbarElement.className = `bt-toolbar ${this.isToolbarCollapsed ? "bt-toolbar-collapsed" : ""}`;
     this.toolbarElement.innerHTML = `
+      <button class="bt-toolbar-trigger" id="bt-toolbar-expand" title="Expand BrowserTrack toolbar (Alt+T)">
+        <span class="bt-pulse-dot"></span>
+        <span>\u26A1 BrowserTrack</span>
+        <span class="bt-count-pill" id="bt-notes-count-collapsed">0</span>
+      </button>
       <button class="bt-toolbar-btn" id="bt-mode-element" title="Inspect element (or hold Alt+Click)">
         <span>\u{1F3AF}</span> Element
       </button>
@@ -2320,12 +2544,26 @@ var NoteInspector = class {
       <button class="bt-toolbar-btn active" id="bt-toggle-notes" title="Toggle visible note markers on screen">
         <span>\u{1F4CC}</span> Notes <span class="bt-count-pill" id="bt-notes-count">0</span>
       </button>
+      <div class="bt-toolbar-divider"></div>
+      <button class="bt-toolbar-collapse-btn" id="bt-toolbar-collapse" title="Collapse toolbar (Alt+T)">
+        <span>\u276F</span>
+      </button>
     `;
+    const btnExpand = this.toolbarElement.querySelector("#bt-toolbar-expand");
+    const btnCollapse = this.toolbarElement.querySelector("#bt-toolbar-collapse");
     const btnElement = this.toolbarElement.querySelector("#bt-mode-element");
     const btnRegion = this.toolbarElement.querySelector("#bt-mode-region");
     const btnPage = this.toolbarElement.querySelector("#bt-mode-page");
     const btnFlow = this.toolbarElement.querySelector("#bt-mode-flow");
     const btnToggleNotes = this.toolbarElement.querySelector("#bt-toggle-notes");
+    btnExpand.onclick = (e) => {
+      e.stopPropagation();
+      this.toggleToolbarCollapse(false);
+    };
+    btnCollapse.onclick = (e) => {
+      e.stopPropagation();
+      this.toggleToolbarCollapse(true);
+    };
     btnElement.onclick = (e) => {
       e.stopPropagation();
       this.setMode(this.activeMode === "element" ? "idle" : "element");
@@ -2354,6 +2592,17 @@ var NoteInspector = class {
     };
     this.shadowRoot.appendChild(this.toolbarElement);
   }
+  toggleToolbarCollapse(force) {
+    if (!this.toolbarElement) return;
+    this.isToolbarCollapsed = typeof force === "boolean" ? force : !this.isToolbarCollapsed;
+    this.toolbarElement.classList.toggle("bt-toolbar-collapsed", this.isToolbarCollapsed);
+    try {
+      if (typeof window !== "undefined" && window.sessionStorage) {
+        window.sessionStorage.setItem("bt_toolbar_collapsed", String(this.isToolbarCollapsed));
+      }
+    } catch {
+    }
+  }
   updateToolbarState() {
     if (!this.toolbarElement) return;
     const btnElement = this.toolbarElement.querySelector("#bt-mode-element");
@@ -2377,11 +2626,15 @@ var NoteInspector = class {
   }
   updateToolbarCount() {
     if (!this.toolbarElement) return;
+    const openCount = this.savedNotes.filter((n) => n.status === "OPEN").length;
     const countEl = this.toolbarElement.querySelector("#bt-notes-count");
     if (countEl) {
-      const openCount = this.savedNotes.filter((n) => n.status === "OPEN").length;
       countEl.textContent = String(openCount);
     }
+    const countCollapsedEl = this.toolbarElement.querySelector("#bt-notes-count-collapsed");
+    if (countCollapsedEl) {
+      countCollapsedEl.textContent = String(openCount);
+    }
   }
   renderMarkers() {
     const root = this.ensureContainer();
@@ -2389,9 +2642,15 @@ var NoteInspector = class {
     this.markersContainer.innerHTML = "";
     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") {
@@ -2431,6 +2690,10 @@ var NoteInspector = class {
       }
       const rect = targetEl ? targetEl.getBoundingClientRect() : note.target?.boundingRect;
       if (rect) {
+        const isOffscreen = targetEl && (rect.bottom < 0 || rect.top > window.innerHeight || rect.right < 0 || rect.left > window.innerWidth);
+        if (isOffscreen) {
+          return;
+        }
         const pin = document.createElement("div");
         pin.className = markerClass;
         pin.setAttribute("data-note-id", note.id);
@@ -2616,65 +2879,90 @@ var NoteInspector = class {
   }
   setupListeners() {
     const onMouseMove = (e) => {
-      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") {
-        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 rawTarget = document.elementFromPoint(e.clientX, e.clientY);
+          const target = rawTarget ? resolveMeaningfulTarget(rawTarget) : null;
+          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.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");
+      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 rawTarget = this.hoveredElement || document.elementFromPoint(e.clientX, e.clientY);
+          const target = rawTarget ? resolveMeaningfulTarget(rawTarget) : null;
+          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.altKey && (e.key === "t" || e.key === "T")) {
+          e.preventDefault();
+          this.toggleToolbarCollapse();
+          return;
+        }
+        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 });
@@ -2751,6 +3039,11 @@ var NoteInspector = class {
           this.regionBox.appendChild(badge);
         }
         badge.textContent = `Region: ${Math.round(width)} \xD7 ${Math.round(height)} px`;
+        if (top < 32) {
+          badge.style.top = "4px";
+        } else {
+          badge.style.top = "-26px";
+        }
       };
       this.regionOverlay.onmouseup = (e) => {
         if (!this.isDraggingRegion) return;
@@ -2809,6 +3102,18 @@ var NoteInspector = class {
     const selector = getSemanticSelector(el);
     const label = this.activeScenario ? `\u{1F3AC} Step ${this.activeScenario.stepNumber} \xB7 ${selector}` : selector;
     badge.textContent = `${label} (${Math.round(rect.width)} \xD7 ${Math.round(rect.height)} px)`;
+    if (rect.top < 32) {
+      badge.style.top = `${rect.height + 4}px`;
+    } else {
+      badge.style.top = "-26px";
+    }
+    if (rect.left + 260 > window.innerWidth) {
+      badge.style.left = "auto";
+      badge.style.right = "0";
+    } else {
+      badge.style.left = "0";
+      badge.style.right = "auto";
+    }
   }
   hideHighlight() {
     if (this.highlightOverlay) {
@@ -2951,10 +3256,11 @@ var NoteInspector = class {
       btnNextStep.disabled = true;
       if (btnSave) btnSave.disabled = true;
       if (btnFinishFlow) btnFinishFlow.disabled = true;
+      closeModal();
       try {
         await options.onSave(message, action);
-      } finally {
-        closeModal();
+      } catch {
+        this.showToast("Failed to save note", "\u26A0\uFE0F");
       }
     };
     if (btnSave) {
@@ -2981,8 +3287,12 @@ var NoteInspector = class {
     const selector = noteType === "page" ? "body" : getSemanticSelector(targetEl);
     let screenshotDataUrl;
     try {
-      const snap = await this.screenshotDriver.captureElement(targetEl);
-      if (snap.ok) {
+      const snapPromise = this.screenshotDriver.captureElement(targetEl);
+      const timeoutPromise = new Promise(
+        (resolve) => setTimeout(() => resolve({ ok: false }), 800)
+      );
+      const snap = await Promise.race([snapPromise, timeoutPromise]);
+      if (snap && snap.ok && snap.dataUrl) {
         screenshotDataUrl = snap.dataUrl;
       }
     } catch {
@@ -3037,9 +3347,16 @@ var NoteInspector = class {
   async saveRegionVisualNote(region, message, scenario) {
     let screenshotDataUrl;
     try {
-      const snap = await this.screenshotDriver.captureElement(document.body || document.documentElement);
-      if (snap.ok && snap.dataUrl) {
-        screenshotDataUrl = await this.cropDataUrl(snap.dataUrl, region);
+      const centerX = region.x + region.width / 2;
+      const centerY = region.y + region.height / 2;
+      const targetElement = document.elementFromPoint(centerX, centerY) || document.body;
+      const snapPromise = this.screenshotDriver.captureElement(targetElement);
+      const timeoutPromise = new Promise(
+        (resolve) => setTimeout(() => resolve({ ok: false }), 800)
+      );
+      const snap = await Promise.race([snapPromise, timeoutPromise]);
+      if (snap && snap.ok && snap.dataUrl) {
+        screenshotDataUrl = snap.dataUrl;
       }
     } catch {
     }
@@ -3136,7 +3453,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;