browsertrack 0.0.1 → 0.1.1

package/dist/chunk-SKCMT2DE.js

@@ -0,0 +1,2641 @@
+import {
+  getSemanticSelector,
+  redactUrl,
+  truncate
+} from "./chunk-6VA7GBAO.js";
+
+// packages/client/src/breadcrumbs.ts
+var BreadcrumbBuffer = class {
+  capacity;
+  buffer = [];
+  constructor(capacity = 50) {
+    this.capacity = capacity;
+  }
+  add(breadcrumb) {
+    const item = {
+      ...breadcrumb,
+      timestamp: breadcrumb.timestamp || Date.now()
+    };
+    this.buffer.push(item);
+    if (this.buffer.length > this.capacity) {
+      this.buffer.shift();
+    }
+  }
+  getRecent() {
+    return [...this.buffer];
+  }
+  clear() {
+    this.buffer = [];
+  }
+};
+
+// 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 || []);
+  let boundingRect = void 0;
+  let visible = true;
+  try {
+    const rect = el.getBoundingClientRect();
+    boundingRect = {
+      x: Math.round(rect.x),
+      y: Math.round(rect.y),
+      width: Math.round(rect.width),
+      height: Math.round(rect.height),
+      top: Math.round(rect.top),
+      left: Math.round(rect.left),
+      bottom: Math.round(rect.bottom),
+      right: Math.round(rect.right)
+    };
+    const style = window.getComputedStyle(el);
+    visible = style.display !== "none" && style.visibility !== "hidden" && style.opacity !== "0" && rect.width > 0 && rect.height > 0;
+  } catch {
+  }
+  let innerText;
+  if (tag !== "input" && tag !== "textarea" && tag !== "select") {
+    innerText = truncate(el.textContent?.trim(), 80);
+  }
+  const outerHTML = truncate(el.outerHTML?.trim(), 200);
+  return {
+    selector,
+    tag,
+    id,
+    classes,
+    boundingRect,
+    visible,
+    innerText,
+    outerHTML
+  };
+}
+function setupInteractionInterceptors(onInteraction) {
+  if (typeof document === "undefined") return () => {
+  };
+  const onClick = (event) => {
+    try {
+      const target = event.target;
+      if (!target || !(target instanceof Element)) return;
+      const summary = extractElementSummary(target);
+      const message = `click ${summary.selector}${summary.innerText ? ` ("${summary.innerText}")` : ""}`;
+      onInteraction(
+        {
+          type: "click",
+          category: "ui",
+          message,
+          timestamp: Date.now(),
+          element: summary
+        },
+        summary
+      );
+    } catch {
+    }
+  };
+  const onSubmit = (event) => {
+    try {
+      const target = event.target;
+      if (!target || !(target instanceof Element)) return;
+      const summary = extractElementSummary(target);
+      const formAction = target.getAttribute("action") || "";
+      const message = `submit form ${summary.selector}${formAction ? ` (action: ${formAction})` : ""}`;
+      onInteraction(
+        {
+          type: "submit",
+          category: "ui",
+          message,
+          timestamp: Date.now(),
+          element: summary
+        },
+        summary
+      );
+    } catch {
+    }
+  };
+  document.addEventListener("click", onClick, { capture: true, passive: true });
+  document.addEventListener("submit", onSubmit, { capture: true, passive: true });
+  return () => {
+    document.removeEventListener("click", onClick, { capture: true });
+    document.removeEventListener("submit", onSubmit, { capture: true });
+  };
+}
+
+// packages/client/src/commands/handler.ts
+var ClientCommandHandler = class {
+  screenshotDriver;
+  constructor(screenshotDriver) {
+    this.screenshotDriver = screenshotDriver;
+  }
+  async executeCommand(command) {
+    try {
+      switch (command.type) {
+        case "reload":
+          return this.handleReload(command);
+        case "navigate":
+          return this.handleNavigate(command);
+        case "get_page_state":
+          return this.handleGetPageState(command);
+        case "query_element":
+          return this.handleQueryElement(command);
+        case "capture_element":
+          return await this.handleCaptureElement(command);
+        case "check_overflow":
+          return this.handleCheckOverflow(command);
+        case "get_element_rect":
+          return this.handleGetElementRect(command);
+        case "get_element_style":
+          return this.handleGetElementStyle(command);
+        default:
+          return {
+            id: command.id,
+            ok: false,
+            error: `Unsupported command type: ${command.type}`
+          };
+      }
+    } catch (err) {
+      return {
+        id: command.id,
+        ok: false,
+        error: err?.message || "Command execution failed"
+      };
+    }
+  }
+  handleReload(command) {
+    if (typeof window !== "undefined" && window.location) {
+      setTimeout(() => {
+        window.location.reload();
+      }, 50);
+      return { id: command.id, ok: true, result: { message: "Reload initiated" } };
+    }
+    return { id: command.id, ok: false, error: "No browser window available" };
+  }
+  handleNavigate(command) {
+    const targetUrl = command.params?.url;
+    if (!targetUrl) {
+      return { id: command.id, ok: false, error: "Missing target url parameter" };
+    }
+    if (typeof window !== "undefined" && window.location) {
+      setTimeout(() => {
+        window.location.href = targetUrl;
+      }, 50);
+      return { id: command.id, ok: true, result: { message: `Navigating to ${targetUrl}` } };
+    }
+    return { id: command.id, ok: false, error: "No browser window available" };
+  }
+  handleGetPageState(command) {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      return { id: command.id, ok: false, error: "No browser document available" };
+    }
+    const activeEl = document.activeElement && document.activeElement !== document.body ? extractElementSummary(document.activeElement) : void 0;
+    return {
+      id: command.id,
+      ok: true,
+      result: {
+        url: window.location.href,
+        route: window.location.pathname + window.location.search + window.location.hash,
+        title: document.title,
+        readyState: document.readyState,
+        activeElement: activeEl
+      }
+    };
+  }
+  handleQueryElement(command) {
+    if (typeof document === "undefined") {
+      return { id: command.id, ok: false, error: "No browser document available" };
+    }
+    const selector = command.params?.selector;
+    if (!selector) {
+      return { id: command.id, ok: false, error: "Missing selector parameter" };
+    }
+    const element = document.querySelector(selector);
+    if (!element) {
+      return {
+        id: command.id,
+        ok: true,
+        result: { exists: false }
+      };
+    }
+    const summary = extractElementSummary(element);
+    return {
+      id: command.id,
+      ok: true,
+      result: {
+        exists: true,
+        visible: summary.visible,
+        tag: summary.tag,
+        id: summary.id,
+        classes: summary.classes,
+        boundingRect: summary.boundingRect,
+        innerText: summary.innerText,
+        outerHTML: summary.outerHTML
+      }
+    };
+  }
+  async handleCaptureElement(command) {
+    const selector = command.params?.selector;
+    let targetEl = null;
+    if (selector) {
+      targetEl = document.querySelector(selector);
+      if (!targetEl) {
+        return {
+          id: command.id,
+          ok: false,
+          reason: `ELEMENT_NOT_FOUND: ${selector}`,
+          error: `Element not found for selector: ${selector}`
+        };
+      }
+    } else {
+      targetEl = document.body || document.documentElement;
+    }
+    const captureRes = await this.screenshotDriver.captureElement(targetEl);
+    if (!captureRes.ok) {
+      return {
+        id: command.id,
+        ok: false,
+        reason: captureRes.reason || "CAPTURE_FAILED",
+        error: captureRes.reason || "Failed to capture element screenshot"
+      };
+    }
+    return {
+      id: command.id,
+      ok: true,
+      result: {
+        dataUrl: captureRes.dataUrl,
+        format: captureRes.format,
+        width: captureRes.width,
+        height: captureRes.height
+      }
+    };
+  }
+  handleCheckOverflow(command) {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      return { id: command.id, ok: false, error: "No browser window available" };
+    }
+    const selector = command.params?.selector;
+    if (!selector) {
+      return { id: command.id, ok: false, error: "Missing selector parameter" };
+    }
+    const el = document.querySelector(selector);
+    if (!el) {
+      return { id: command.id, ok: false, error: `Element not found: ${selector}` };
+    }
+    const rect = el.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const overflowRightPx = Math.max(0, Math.round(rect.right - vw));
+    const overflowBottomPx = Math.max(0, Math.round(rect.bottom - vh));
+    const isViewportOverflow = overflowRightPx > 0 || rect.left < 0;
+    let parentOverflow = false;
+    if (el.parentElement) {
+      parentOverflow = el.parentElement.scrollWidth > el.parentElement.clientWidth;
+    }
+    return {
+      id: command.id,
+      ok: true,
+      result: {
+        selector,
+        overflow: isViewportOverflow || parentOverflow,
+        viewportWidth: vw,
+        viewportHeight: vh,
+        rect: {
+          x: Math.round(rect.x),
+          y: Math.round(rect.y),
+          width: Math.round(rect.width),
+          height: Math.round(rect.height),
+          top: Math.round(rect.top),
+          left: Math.round(rect.left),
+          bottom: Math.round(rect.bottom),
+          right: Math.round(rect.right)
+        },
+        overflowRightPx,
+        overflowBottomPx,
+        parentOverflow
+      }
+    };
+  }
+  handleGetElementRect(command) {
+    if (typeof document === "undefined") {
+      return { id: command.id, ok: false, error: "No browser document available" };
+    }
+    const selector = command.params?.selector;
+    if (!selector) {
+      return { id: command.id, ok: false, error: "Missing selector parameter" };
+    }
+    const el = document.querySelector(selector);
+    if (!el) {
+      return { id: command.id, ok: false, error: `Element not found: ${selector}` };
+    }
+    const rect = el.getBoundingClientRect();
+    return {
+      id: command.id,
+      ok: true,
+      result: {
+        x: Math.round(rect.x),
+        y: Math.round(rect.y),
+        width: Math.round(rect.width),
+        height: Math.round(rect.height),
+        top: Math.round(rect.top),
+        left: Math.round(rect.left),
+        bottom: Math.round(rect.bottom),
+        right: Math.round(rect.right)
+      }
+    };
+  }
+  handleGetElementStyle(command) {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      return { id: command.id, ok: false, error: "No browser window available" };
+    }
+    const selector = command.params?.selector;
+    if (!selector) {
+      return { id: command.id, ok: false, error: "Missing selector parameter" };
+    }
+    const el = document.querySelector(selector);
+    if (!el) {
+      return { id: command.id, ok: false, error: `Element not found: ${selector}` };
+    }
+    const computed = window.getComputedStyle(el);
+    const properties = command.params?.properties || ["overflow", "overflowX", "overflowY", "width", "maxWidth", "display", "position"];
+    const styles = {};
+    for (const prop of properties) {
+      styles[prop] = computed.getPropertyValue(prop) || computed[prop] || "";
+    }
+    return {
+      id: command.id,
+      ok: true,
+      result: {
+        selector,
+        styles
+      }
+    };
+  }
+};
+
+// packages/client/src/config.ts
+var DEFAULT_OPTIONS = {
+  daemonUrl: "ws://127.0.0.1:7331",
+  projectId: "",
+  maxBreadcrumbs: 50,
+  captureErrors: true,
+  captureConsole: true,
+  captureNetwork: true,
+  captureNavigation: true,
+  captureInteractions: true,
+  onErrorScreenshot: true,
+  notes: {
+    enabled: true,
+    shortcut: "Alt+Click",
+    showBadges: true,
+    maskSelectors: ['input[type="password"]', "[data-sensitive]"]
+  },
+  debug: false
+};
+
+// packages/client/src/interceptors/console.ts
+function setupConsoleInterceptors(onConsole) {
+  if (typeof console === "undefined") return () => {
+  };
+  const originalError = console.error;
+  const originalWarn = console.warn;
+  function formatArgs(args) {
+    return args.map((arg) => {
+      if (arg instanceof Error) {
+        return arg.stack || `${arg.name}: ${arg.message}`;
+      }
+      if (typeof arg === "object" && arg !== null) {
+        try {
+          return JSON.stringify(arg);
+        } catch {
+          return String(arg);
+        }
+      }
+      return String(arg);
+    }).join(" ");
+  }
+  console.error = function(...args) {
+    try {
+      const message = formatArgs(args);
+      const stack = new Error().stack;
+      onConsole({
+        level: "error",
+        message,
+        stack,
+        timestamp: Date.now()
+      });
+    } catch {
+    }
+    return originalError.apply(console, args);
+  };
+  console.warn = function(...args) {
+    try {
+      const message = formatArgs(args);
+      const stack = new Error().stack;
+      onConsole({
+        level: "warn",
+        message,
+        stack,
+        timestamp: Date.now()
+      });
+    } catch {
+    }
+    return originalWarn.apply(console, args);
+  };
+  return () => {
+    console.error = originalError;
+    console.warn = originalWarn;
+  };
+}
+
+// packages/client/src/interceptors/navigation.ts
+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()
+  });
+  const originalPushState = history.pushState;
+  const originalReplaceState = history.replaceState;
+  history.pushState = function(data, unused, url) {
+    const from = currentUrl;
+    const result = originalPushState.apply(history, [data, unused, url]);
+    try {
+      const to = redactUrl(window.location.href);
+      currentUrl = to;
+      onNavigation({
+        from,
+        to,
+        type: "pushState",
+        timestamp: Date.now()
+      });
+    } catch {
+    }
+    return result;
+  };
+  history.replaceState = function(data, unused, url) {
+    const from = currentUrl;
+    const result = originalReplaceState.apply(history, [data, unused, url]);
+    try {
+      const to = redactUrl(window.location.href);
+      currentUrl = to;
+      onNavigation({
+        from,
+        to,
+        type: "replaceState",
+        timestamp: Date.now()
+      });
+    } catch {
+    }
+    return result;
+  };
+  const onPopState = () => {
+    const from = currentUrl;
+    const to = redactUrl(window.location.href);
+    currentUrl = to;
+    onNavigation({
+      from,
+      to,
+      type: "popstate",
+      timestamp: Date.now()
+    });
+  };
+  const onHashChange = () => {
+    const from = currentUrl;
+    const to = redactUrl(window.location.href);
+    currentUrl = to;
+    onNavigation({
+      from,
+      to,
+      type: "hashchange",
+      timestamp: Date.now()
+    });
+  };
+  window.addEventListener("popstate", onPopState);
+  window.addEventListener("hashchange", onHashChange);
+  return () => {
+    history.pushState = originalPushState;
+    history.replaceState = originalReplaceState;
+    window.removeEventListener("popstate", onPopState);
+    window.removeEventListener("hashchange", onHashChange);
+  };
+}
+
+// packages/client/src/interceptors/network.ts
+function setupNetworkInterceptors(onNetwork) {
+  const cleanups = [];
+  if (typeof window !== "undefined" && typeof window.fetch === "function") {
+    const originalFetch = window.fetch;
+    window.fetch = async function(input, init2) {
+      const startTime = Date.now();
+      let urlStr = "";
+      let method = "GET";
+      try {
+        if (typeof input === "string") {
+          urlStr = input;
+        } else if (input instanceof URL) {
+          urlStr = input.toString();
+        } else if (input && typeof input === "object" && "url" in input) {
+          urlStr = input.url;
+          method = input.method || "GET";
+        }
+        if (init2 && init2.method) {
+          method = init2.method.toUpperCase();
+        }
+      } catch {
+        urlStr = "unknown_url";
+      }
+      const safeUrl = redactUrl(urlStr);
+      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;
+      } catch (err) {
+        const durationMs = Date.now() - startTime;
+        const isAbort = err?.name === "AbortError";
+        onNetwork({
+          url: safeUrl,
+          method,
+          durationMs,
+          error: err?.message || "Network request failed",
+          aborted: isAbort,
+          timestamp: startTime
+        });
+        throw err;
+      }
+    };
+    cleanups.push(() => {
+      window.fetch = originalFetch;
+    });
+  }
+  if (typeof window !== "undefined" && typeof window.XMLHttpRequest === "function") {
+    const originalOpen = XMLHttpRequest.prototype.open;
+    const originalSend = XMLHttpRequest.prototype.send;
+    const originalAbort = XMLHttpRequest.prototype.abort;
+    const xhrMap = /* @__PURE__ */ new WeakMap();
+    XMLHttpRequest.prototype.open = function(...args) {
+      try {
+        const method = String(args[0] || "GET").toUpperCase();
+        const rawUrl = String(args[1] || "");
+        xhrMap.set(this, {
+          url: redactUrl(rawUrl),
+          method,
+          startTime: Date.now()
+        });
+      } catch {
+      }
+      return originalOpen.apply(this, args);
+    };
+    XMLHttpRequest.prototype.abort = function() {
+      const meta = xhrMap.get(this);
+      if (meta) {
+        meta.aborted = true;
+      }
+      return originalAbort.apply(this);
+    };
+    XMLHttpRequest.prototype.send = function(body) {
+      const meta = xhrMap.get(this) || { url: "unknown_url", method: "GET", startTime: Date.now() };
+      const onComplete = () => {
+        try {
+          const durationMs = Date.now() - meta.startTime;
+          onNetwork({
+            url: meta.url,
+            method: meta.method,
+            status: this.status,
+            statusText: this.statusText,
+            durationMs,
+            aborted: meta.aborted,
+            timestamp: meta.startTime
+          });
+        } catch {
+        }
+      };
+      const onError = () => {
+        try {
+          const durationMs = Date.now() - meta.startTime;
+          onNetwork({
+            url: meta.url,
+            method: meta.method,
+            status: this.status || 0,
+            durationMs,
+            error: "XHR Network Error",
+            aborted: meta.aborted,
+            timestamp: meta.startTime
+          });
+        } catch {
+        }
+      };
+      this.addEventListener("load", onComplete, { once: true });
+      this.addEventListener("error", onError, { once: true });
+      this.addEventListener("timeout", onError, { once: true });
+      return originalSend.apply(this, [body]);
+    };
+    cleanups.push(() => {
+      XMLHttpRequest.prototype.open = originalOpen;
+      XMLHttpRequest.prototype.send = originalSend;
+      XMLHttpRequest.prototype.abort = originalAbort;
+    });
+  }
+  return () => {
+    for (const cleanup of cleanups) {
+      try {
+        cleanup();
+      } catch {
+      }
+    }
+  };
+}
+
+// packages/client/src/interceptors/runtime.ts
+function setupRuntimeInterceptors(onRuntimeError) {
+  if (typeof window === "undefined") return () => {
+  };
+  const errorHandler = (event) => {
+    try {
+      const errorEvent = {
+        message: event.message || event.error && event.error.message || "Script error",
+        stack: event.error && event.error.stack || void 0,
+        filename: event.filename || void 0,
+        lineno: event.lineno || void 0,
+        colno: event.colno || void 0,
+        errorType: event.error && event.error.name || "Error",
+        timestamp: Date.now()
+      };
+      onRuntimeError(errorEvent, event.error);
+    } catch {
+    }
+  };
+  const unhandledRejectionHandler = (event) => {
+    try {
+      const reason = event.reason;
+      let message = "Unhandled Promise Rejection";
+      let stack;
+      let errorType = "UnhandledRejection";
+      if (reason instanceof Error) {
+        message = reason.message;
+        stack = reason.stack;
+        errorType = reason.name || "UnhandledRejection";
+      } else if (typeof reason === "string") {
+        message = reason;
+      } else if (reason && typeof reason === "object") {
+        try {
+          message = JSON.stringify(reason);
+        } catch {
+          message = String(reason);
+        }
+      }
+      const errorEvent = {
+        message,
+        stack,
+        errorType,
+        timestamp: Date.now()
+      };
+      onRuntimeError(errorEvent, reason);
+    } catch {
+    }
+  };
+  window.addEventListener("error", errorHandler);
+  window.addEventListener("unhandledrejection", unhandledRejectionHandler);
+  return () => {
+    window.removeEventListener("error", errorHandler);
+    window.removeEventListener("unhandledrejection", unhandledRejectionHandler);
+  };
+}
+
+// packages/client/src/screenshot/browser-script-driver.ts
+import { snapdom } from "@zumer/snapdom";
+var BrowserScriptScreenshotDriver = class {
+  name = "BrowserScriptScreenshotDriver";
+  async captureSelector(selector) {
+    try {
+      if (typeof document === "undefined") {
+        return { ok: false, reason: "NO_DOCUMENT_ENVIRONMENT" };
+      }
+      const el = document.querySelector(selector);
+      if (!el) {
+        return { ok: false, reason: `ELEMENT_NOT_FOUND: ${selector}` };
+      }
+      return await this.captureElement(el);
+    } catch (err) {
+      return { ok: false, reason: err?.message || "UNKNOWN_CAPTURE_ERROR" };
+    }
+  }
+  async captureElement(element) {
+    try {
+      if (typeof window === "undefined" || typeof document === "undefined") {
+        return { ok: false, reason: "NO_BROWSER_ENVIRONMENT" };
+      }
+      const rect = element.getBoundingClientRect();
+      const width = Math.max(Math.round(rect.width), 10);
+      const height = Math.max(Math.round(rect.height), 10);
+      const capturePromise = (async () => {
+        try {
+          let imgElement = void 0;
+          let format = "webp";
+          try {
+            if (typeof snapdom === "function") {
+              const captureRes = await snapdom(element, { scale: 1, embedFonts: false });
+              if (captureRes && typeof captureRes.toWebp === "function") {
+                imgElement = await captureRes.toWebp();
+              } else if (captureRes && typeof captureRes.toPng === "function") {
+                imgElement = await captureRes.toPng();
+                format = "png";
+              } else if (captureRes?.url) {
+                return {
+                  ok: true,
+                  dataUrl: captureRes.url,
+                  format: "webp",
+                  width,
+                  height
+                };
+              }
+            } else if (snapdom?.toWebp) {
+              imgElement = await snapdom.toWebp(element, {
+                scale: 1,
+                embedFonts: false
+              });
+            } else if (snapdom?.toPng) {
+              imgElement = await snapdom.toPng(element, {
+                scale: 1,
+                embedFonts: false
+              });
+              format = "png";
+            }
+          } catch {
+          }
+          if (imgElement && imgElement.src) {
+            return {
+              ok: true,
+              dataUrl: imgElement.src,
+              format: imgElement.src.startsWith("data:image/webp") ? "webp" : format,
+              width: imgElement.naturalWidth || width,
+              height: imgElement.naturalHeight || height
+            };
+          }
+        } catch (snapErr) {
+          const errMsg = String(snapErr?.message || snapErr);
+          if (errMsg.includes("CORS") || errMsg.includes("SecurityError") || errMsg.includes("tainted")) {
+            return { ok: false, reason: "CROSS_ORIGIN_RESOURCE" };
+          }
+        }
+        return await this.captureWithSvgFallback(element, width, height);
+      })();
+      const timeoutPromise = new Promise((resolve) => {
+        setTimeout(() => resolve({ ok: false, reason: "CAPTURE_TIMEOUT" }), 3e3);
+      });
+      return await Promise.race([capturePromise, timeoutPromise]);
+    } catch (err) {
+      return { ok: false, reason: err?.message || "CAPTURE_EXCEPTION" };
+    }
+  }
+  async captureWithSvgFallback(element, width, height) {
+    try {
+      const clone = element.cloneNode(true);
+      const computed = window.getComputedStyle(element);
+      let cssText = "";
+      for (let i = 0; i < computed.length; i++) {
+        const prop = computed[i];
+        cssText += `${prop}:${computed.getPropertyValue(prop)};`;
+      }
+      clone.style.cssText = cssText;
+      clone.style.margin = "0";
+      clone.style.position = "static";
+      const svg = `
+        <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
+          <foreignObject width="100%" height="100%">
+            <div xmlns="http://www.w3.org/1999/xhtml" style="width:${width}px;height:${height}px;">
+              ${clone.outerHTML}
+            </div>
+          </foreignObject>
+        </svg>
+      `.trim();
+      const svgBlob = new Blob([svg], { type: "image/svg+xml;charset=utf-8" });
+      const url = URL.createObjectURL(svgBlob);
+      return await new Promise((resolve) => {
+        const img = new Image();
+        img.onload = () => {
+          try {
+            const canvas = document.createElement("canvas");
+            canvas.width = width;
+            canvas.height = height;
+            const ctx = canvas.getContext("2d");
+            if (!ctx) {
+              URL.revokeObjectURL(url);
+              resolve({ ok: false, reason: "CANVAS_CONTEXT_UNAVAILABLE" });
+              return;
+            }
+            ctx.drawImage(img, 0, 0);
+            URL.revokeObjectURL(url);
+            let dataUrl;
+            try {
+              dataUrl = canvas.toDataURL("image/webp", 0.85);
+            } catch {
+              dataUrl = canvas.toDataURL("image/png");
+            }
+            resolve({
+              ok: true,
+              dataUrl,
+              format: dataUrl.startsWith("data:image/webp") ? "webp" : "png",
+              width,
+              height
+            });
+          } catch (e) {
+            URL.revokeObjectURL(url);
+            if (e?.name === "SecurityError" || String(e).includes("tainted")) {
+              resolve({ ok: false, reason: "CROSS_ORIGIN_RESOURCE" });
+            } else {
+              resolve({ ok: false, reason: e?.message || "CANVAS_EXPORT_FAILED" });
+            }
+          }
+        };
+        img.onerror = () => {
+          URL.revokeObjectURL(url);
+          resolve({ ok: false, reason: "IMAGE_LOAD_FAILED" });
+        };
+        img.src = url;
+      });
+    } catch (e) {
+      return { ok: false, reason: e?.message || "FALLBACK_CAPTURE_FAILED" };
+    }
+  }
+};
+
+// packages/client/src/transport/websocket.ts
+var WebSocketTransport = class {
+  wsUrl;
+  projectId;
+  debug;
+  ws = null;
+  sessionId = null;
+  queue = [];
+  maxQueueSize = 50;
+  reconnectAttempts = 0;
+  maxReconnectDelay = 1e4;
+  reconnectTimer = null;
+  commandHandler;
+  messageListeners = [];
+  isDestroyed = false;
+  constructor(options) {
+    this.wsUrl = options.url || "ws://127.0.0.1:7331";
+    this.projectId = options.projectId;
+    this.debug = !!options.debug;
+  }
+  setCommandHandler(handler) {
+    this.commandHandler = handler;
+  }
+  onMessage(listener) {
+    this.messageListeners.push(listener);
+    return () => {
+      this.messageListeners = this.messageListeners.filter((l) => l !== listener);
+    };
+  }
+  getSessionId() {
+    return this.sessionId;
+  }
+  isConnected() {
+    return this.ws !== null && this.ws.readyState === (typeof WebSocket !== "undefined" ? WebSocket.OPEN : 1);
+  }
+  connect() {
+    if (this.isDestroyed || typeof WebSocket === "undefined") return;
+    if (this.ws && (this.ws.readyState === WebSocket.CONNECTING || this.ws.readyState === WebSocket.OPEN)) {
+      return;
+    }
+    try {
+      this.ws = new WebSocket(this.wsUrl);
+      this.ws.onopen = () => {
+        this.reconnectAttempts = 0;
+        this.sendHello();
+        this.flushQueue();
+      };
+      this.ws.onmessage = async (event) => {
+        try {
+          const raw = typeof event.data === "string" ? event.data : "";
+          if (!raw) return;
+          const msg = JSON.parse(raw);
+          for (const listener of this.messageListeners) {
+            try {
+              listener(msg);
+            } catch {
+            }
+          }
+          if (msg.type === "hello_ack") {
+            this.sessionId = msg.sessionId;
+            if (this.debug) {
+              console.log("[BrowserTrack] Connected, session ID:", this.sessionId);
+            }
+            return;
+          }
+          if (msg.type === "command" && this.commandHandler) {
+            const command = msg.command;
+            const res = await this.commandHandler.executeCommand(command);
+            this.send({
+              type: "command_response",
+              sessionId: this.sessionId,
+              response: res
+            });
+          }
+        } catch {
+        }
+      };
+      this.ws.onerror = () => {
+      };
+      this.ws.onclose = () => {
+        this.ws = null;
+        this.scheduleReconnect();
+      };
+    } catch {
+      this.scheduleReconnect();
+    }
+  }
+  send(payload) {
+    const raw = JSON.stringify(payload);
+    if (this.isConnected()) {
+      try {
+        this.ws.send(raw);
+      } catch {
+        this.enqueue(raw);
+      }
+    } else {
+      this.enqueue(raw);
+    }
+  }
+  enqueue(raw) {
+    if (this.queue.length >= this.maxQueueSize) {
+      this.queue.shift();
+    }
+    this.queue.push(raw);
+  }
+  flushQueue() {
+    if (!this.isConnected()) return;
+    while (this.queue.length > 0) {
+      const item = this.queue.shift();
+      if (item) {
+        try {
+          this.ws.send(item);
+        } catch {
+          this.queue.unshift(item);
+          break;
+        }
+      }
+    }
+  }
+  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));
+    } catch {
+    }
+  }
+  scheduleReconnect() {
+    if (this.isDestroyed || this.reconnectTimer) return;
+    this.reconnectAttempts++;
+    const delay = Math.min(1e3 * Math.pow(1.5, this.reconnectAttempts), this.maxReconnectDelay);
+    this.reconnectTimer = setTimeout(() => {
+      this.reconnectTimer = null;
+      this.connect();
+    }, delay);
+  }
+  destroy() {
+    this.isDestroyed = true;
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    if (this.ws) {
+      try {
+        this.ws.close();
+      } catch {
+      }
+      this.ws = null;
+    }
+    this.queue = [];
+  }
+};
+
+// packages/client/src/notes/inspector.ts
+var NoteInspector = class {
+  transport;
+  screenshotDriver;
+  options;
+  container = null;
+  shadowRoot = null;
+  highlightOverlay = null;
+  regionOverlay = null;
+  regionBox = null;
+  regionBanner = null;
+  markersContainer = null;
+  toolbarElement = null;
+  modalOverlay = null;
+  cardOverlay = null;
+  activeMode = "idle";
+  hoveredElement = null;
+  selectedElement = null;
+  selectedRegion = null;
+  isDraggingRegion = false;
+  dragStartX = 0;
+  dragStartY = 0;
+  savedNotes = [];
+  showMarkers = true;
+  cleanups = [];
+  constructor(transport, screenshotDriver, options = {}) {
+    this.transport = transport;
+    this.screenshotDriver = screenshotDriver;
+    this.options = {
+      shortcut: "Alt+Click",
+      maskSelectors: ['input[type="password"]', "[data-sensitive]"],
+      showToolbar: true,
+      ...options
+    };
+  }
+  init() {
+    if (typeof window === "undefined" || typeof document === "undefined") return;
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", () => {
+        this.ensureContainer();
+      });
+    } else {
+      this.ensureContainer();
+    }
+    const unsubscribe = this.transport.onMessage((msg) => {
+      if (msg && msg.type === "notes_sync" && Array.isArray(msg.notes)) {
+        this.syncNotes(msg.notes);
+      }
+    });
+    this.cleanups.push(unsubscribe);
+    this.setupListeners();
+  }
+  syncNotes(notes) {
+    this.savedNotes = notes;
+    this.updateToolbarCount();
+    this.renderMarkers();
+  }
+  setMode(mode) {
+    this.activeMode = mode;
+    this.updateToolbarState();
+    if (mode === "element") {
+      this.hideRegionOverlay();
+    } else if (mode === "region") {
+      this.hideHighlight();
+      this.showRegionOverlay();
+    } else if (mode === "page") {
+      this.hideRegionOverlay();
+      this.hideHighlight();
+      this.openNoteEditor(document.body, "page");
+    } else {
+      this.hideRegionOverlay();
+      this.hideHighlight();
+    }
+  }
+  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;";
+      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;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+        }
+        
+        /* 1. Element Highlight Overlay */
+        .bt-highlight {
+          position: fixed;
+          border: 2px solid #3b82f6;
+          background: rgba(59, 130, 246, 0.16);
+          border-radius: 4px;
+          pointer-events: none;
+          transition: all 0.05s ease-out;
+          z-index: 2147483640;
+          box-sizing: border-box;
+        }
+
+        .bt-badge {
+          position: absolute;
+          top: -26px;
+          left: 0;
+          background: #0f172a;
+          color: #38bdf8;
+          border: 1px solid #3b82f6;
+          font-size: 11px;
+          font-weight: 600;
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+          padding: 2px 7px;
+          border-radius: 4px;
+          white-space: nowrap;
+          pointer-events: none;
+          box-shadow: 0 4px 6px -1px rgba(0,0,0,0.5);
+        }
+
+        /* 2. Region Selection Overlay */
+        .bt-region-overlay {
+          position: fixed;
+          inset: 0;
+          width: 100vw;
+          height: 100vh;
+          cursor: crosshair;
+          z-index: 2147483642;
+          pointer-events: auto;
+          background: rgba(15, 23, 42, 0.25);
+          user-select: none;
+        }
+
+        .bt-region-box {
+          position: fixed;
+          border: 2px dashed #38bdf8;
+          background: rgba(56, 189, 248, 0.2);
+          box-sizing: border-box;
+          pointer-events: none;
+          z-index: 2147483643;
+        }
+
+        .bt-region-badge {
+          position: absolute;
+          top: -26px;
+          left: 0;
+          background: #0f172a;
+          color: #38bdf8;
+          border: 1px solid #0284c7;
+          font-size: 11px;
+          font-weight: 600;
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+          padding: 2px 7px;
+          border-radius: 4px;
+          white-space: nowrap;
+          pointer-events: none;
+          box-shadow: 0 4px 6px -1px rgba(0,0,0,0.5);
+        }
+
+        .bt-region-banner {
+          position: fixed;
+          top: 20px;
+          left: 50%;
+          transform: translateX(-50%);
+          background: #0f172a;
+          color: #f8fafc;
+          border: 1px solid #0284c7;
+          border-radius: 30px;
+          padding: 8px 16px;
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          box-shadow: 0 10px 25px -5px rgba(0,0,0,0.6);
+          font-size: 12.5px;
+          font-weight: 500;
+          pointer-events: auto;
+          z-index: 2147483645;
+          user-select: none;
+        }
+
+        .bt-region-cancel-btn {
+          background: rgba(239, 68, 68, 0.15);
+          color: #fca5a5;
+          border: 1px solid rgba(239, 68, 68, 0.4);
+          padding: 3px 10px;
+          border-radius: 20px;
+          font-size: 11px;
+          font-weight: 600;
+          cursor: pointer;
+          transition: all 0.15s ease;
+          display: inline-flex;
+          align-items: center;
+          gap: 4px;
+          font-family: inherit;
+        }
+
+        .bt-region-cancel-btn:hover {
+          background: rgba(239, 68, 68, 0.3);
+          color: #ffffff;
+        }
+
+        /* 3. Note Markers on Page */
+        .bt-markers-layer {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 0;
+          height: 0;
+          pointer-events: none;
+          z-index: 2147483638;
+        }
+
+        .bt-note-marker {
+          position: fixed;
+          pointer-events: auto;
+          background: linear-gradient(135deg, #2563eb, #1d4ed8);
+          color: #ffffff;
+          border: 2px solid #ffffff;
+          box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 0 1px rgba(37,99,235,0.4);
+          border-radius: 999px;
+          height: 26px;
+          min-width: 26px;
+          padding: 0 7px;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          gap: 4px;
+          cursor: pointer;
+          font-size: 11px;
+          font-weight: 700;
+          user-select: none;
+          transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s ease;
+          animation: bt-pop-in 0.2s ease-out;
+          box-sizing: border-box;
+          z-index: 2147483641;
+        }
+
+        @keyframes bt-pop-in {
+          0% { transform: scale(0.6); opacity: 0; }
+          100% { transform: scale(1); opacity: 1; }
+        }
+
+        .bt-note-marker:hover {
+          transform: scale(1.15) translateY(-2px);
+          box-shadow: 0 8px 20px rgba(37,99,235,0.6), 0 0 0 2px #60a5fa;
+        }
+
+        .bt-marker-resolved {
+          background: linear-gradient(135deg, #475569, #334155);
+          border-color: #94a3b8;
+          opacity: 0.75;
+        }
+
+        .bt-region-marker-box {
+          position: fixed;
+          border: 2px dashed #0284c7;
+          background: rgba(14, 165, 233, 0.08);
+          pointer-events: none;
+          box-sizing: border-box;
+          border-radius: 6px;
+          z-index: 2147483639;
+        }
+
+        .bt-page-notes-dock {
+          position: fixed;
+          top: 16px;
+          right: 16px;
+          display: flex;
+          flex-direction: column;
+          gap: 6px;
+          pointer-events: none;
+          z-index: 2147483641;
+        }
+
+        .bt-page-note-pill {
+          background: #0f172a;
+          color: #c084fc;
+          border: 1px solid #7e22ce;
+          border-radius: 20px;
+          padding: 5px 12px;
+          font-size: 11.5px;
+          font-weight: 600;
+          display: inline-flex;
+          align-items: center;
+          gap: 6px;
+          box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+          cursor: pointer;
+          pointer-events: auto;
+          transition: all 0.15s ease;
+        }
+
+        .bt-page-note-pill:hover {
+          background: #1e1b4b;
+          transform: translateY(-1px);
+        }
+
+        /* 4. Floating Quick Toolbar */
+        .bt-toolbar {
+          position: fixed;
+          bottom: 20px;
+          right: 20px;
+          background: #0f172a;
+          border: 1px solid #334155;
+          border-radius: 30px;
+          padding: 4px 6px;
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          box-shadow: 0 10px 25px -3px rgba(0,0,0,0.6), 0 4px 6px -4px rgba(0,0,0,0.4);
+          pointer-events: auto;
+          z-index: 2147483646;
+          user-select: none;
+          transition: all 0.2s ease;
+        }
+
+        .bt-toolbar-btn {
+          background: transparent;
+          border: none;
+          color: #94a3b8;
+          font-size: 12px;
+          font-weight: 500;
+          padding: 6px 12px;
+          border-radius: 20px;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          transition: all 0.15s ease;
+          font-family: inherit;
+        }
+
+        .bt-toolbar-btn:hover {
+          background: #1e293b;
+          color: #f8fafc;
+        }
+
+        .bt-toolbar-btn.active {
+          background: #2563eb;
+          color: #ffffff;
+          font-weight: 600;
+          box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
+        }
+
+        .bt-count-pill {
+          background: rgba(255, 255, 255, 0.2);
+          color: #ffffff;
+          font-size: 10px;
+          font-weight: 700;
+          padding: 1px 6px;
+          border-radius: 10px;
+          line-height: 1.2;
+        }
+
+        .bt-toolbar-divider {
+          width: 1px;
+          height: 16px;
+          background: #334155;
+          margin: 0 2px;
+        }
+
+        /* 5. Modals & Popover Card */
+        .bt-modal-backdrop {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100vw;
+          height: 100vh;
+          background: rgba(15, 23, 42, 0.75);
+          backdrop-filter: blur(6px);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          pointer-events: auto;
+          z-index: 2147483647;
+          opacity: 1;
+          box-sizing: border-box;
+          animation: bt-fade-in 0.15s ease-out;
+        }
+
+        @keyframes bt-fade-in {
+          from { opacity: 0; transform: scale(0.98); }
+          to { opacity: 1; transform: scale(1); }
+        }
+
+        .bt-modal {
+          background: #0f172a;
+          color: #f8fafc;
+          border: 1px solid #334155;
+          border-radius: 14px;
+          padding: 20px;
+          width: 450px;
+          max-width: 92vw;
+          box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05);
+          display: flex;
+          flex-direction: column;
+          gap: 14px;
+          box-sizing: border-box;
+        }
+
+        .bt-modal-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+
+        .bt-modal-title {
+          font-size: 14.5px;
+          font-weight: 600;
+          letter-spacing: -0.01em;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          color: #f8fafc;
+        }
+
+        .bt-mode-badge {
+          font-size: 10px;
+          font-weight: 700;
+          letter-spacing: 0.05em;
+          text-transform: uppercase;
+          padding: 2px 7px;
+          border-radius: 6px;
+        }
+
+        .bt-badge-element {
+          background: rgba(59, 130, 246, 0.15);
+          color: #60a5fa;
+          border: 1px solid rgba(59, 130, 246, 0.4);
+        }
+
+        .bt-badge-region {
+          background: rgba(14, 165, 233, 0.15);
+          color: #38bdf8;
+          border: 1px solid rgba(14, 165, 233, 0.4);
+        }
+
+        .bt-badge-page {
+          background: rgba(168, 85, 247, 0.15);
+          color: #c084fc;
+          border: 1px solid rgba(168, 85, 247, 0.4);
+        }
+
+        .bt-badge-status-open {
+          background: rgba(16, 185, 129, 0.15);
+          color: #34d399;
+          border: 1px solid rgba(16, 185, 129, 0.4);
+        }
+
+        .bt-badge-status-resolved {
+          background: rgba(100, 116, 139, 0.2);
+          color: #94a3b8;
+          border: 1px solid rgba(100, 116, 139, 0.4);
+        }
+
+        .bt-close-btn {
+          background: transparent;
+          border: none;
+          color: #94a3b8;
+          font-size: 15px;
+          cursor: pointer;
+          padding: 3px 7px;
+          border-radius: 6px;
+          transition: all 0.12s ease;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bt-close-btn:hover {
+          background: #1e293b;
+          color: #ffffff;
+        }
+
+        .bt-target-pill {
+          background: #090d16;
+          color: #94a3b8;
+          border: 1px solid #1e293b;
+          border-radius: 8px;
+          padding: 8px 12px;
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+          font-size: 11.5px;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          overflow: hidden;
+        }
+
+        .bt-pill-content {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          color: #cbd5e1;
+        }
+
+        .bt-note-message-box {
+          background: #090d16;
+          border: 1px solid #1e293b;
+          border-radius: 8px;
+          padding: 12px 14px;
+          font-size: 13.5px;
+          line-height: 1.5;
+          color: #f1f5f9;
+          white-space: pre-wrap;
+          word-break: break-word;
+          max-height: 180px;
+          overflow-y: auto;
+        }
+
+        .bt-textarea {
+          background: #090d16;
+          color: #f8fafc;
+          border: 1px solid #334155;
+          border-radius: 8px;
+          padding: 12px;
+          font-size: 13.5px;
+          line-height: 1.5;
+          resize: vertical;
+          min-height: 95px;
+          outline: none;
+          box-sizing: border-box;
+          width: 100%;
+          font-family: inherit;
+          transition: border-color 0.15s ease, box-shadow 0.15s ease;
+        }
+
+        .bt-textarea::placeholder {
+          color: #64748b;
+        }
+
+        .bt-textarea:focus {
+          border-color: #3b82f6;
+          box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
+        }
+
+        .bt-modal-footer {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          gap: 12px;
+          margin-top: 2px;
+        }
+
+        .bt-kbd-hint {
+          font-size: 11px;
+          color: #64748b;
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          user-select: none;
+        }
+
+        .bt-kbd-hint kbd {
+          background: #1e293b;
+          color: #94a3b8;
+          border: 1px solid #334155;
+          border-radius: 4px;
+          padding: 1px 5px;
+          font-family: inherit;
+          font-size: 10px;
+          font-weight: 600;
+        }
+
+        .bt-modal-actions {
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          gap: 8px;
+        }
+
+        .bt-btn {
+          padding: 8px 16px;
+          border-radius: 7px;
+          font-size: 12.5px;
+          font-weight: 600;
+          cursor: pointer;
+          border: 1px solid transparent;
+          transition: all 0.15s ease;
+          font-family: inherit;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          gap: 6px;
+        }
+
+        .bt-btn-cancel {
+          background: transparent;
+          color: #94a3b8;
+        }
+        .bt-btn-cancel:hover {
+          background: #1e293b;
+          color: #f8fafc;
+        }
+
+        .bt-btn-save {
+          background: #2563eb;
+          color: #ffffff;
+          box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
+        }
+        .bt-btn-save:hover {
+          background: #1d4ed8;
+          box-shadow: 0 4px 10px rgba(37, 99, 235, 0.45);
+        }
+
+        .bt-btn-resolve {
+          background: rgba(16, 185, 129, 0.15);
+          color: #6ee7b7;
+          border: 1px solid rgba(16, 185, 129, 0.35);
+        }
+        .bt-btn-resolve:hover {
+          background: rgba(16, 185, 129, 0.3);
+          color: #ffffff;
+        }
+
+        .bt-btn-delete {
+          background: rgba(239, 68, 68, 0.15);
+          color: #fca5a5;
+          border: 1px solid rgba(239, 68, 68, 0.35);
+        }
+        .bt-btn-delete:hover {
+          background: rgba(239, 68, 68, 0.3);
+          color: #ffffff;
+        }
+      `;
+      this.shadowRoot.appendChild(style);
+      this.highlightOverlay = document.createElement("div");
+      this.highlightOverlay.className = "bt-highlight";
+      this.highlightOverlay.style.display = "none";
+      this.shadowRoot.appendChild(this.highlightOverlay);
+      this.markersContainer = document.createElement("div");
+      this.markersContainer.className = "bt-markers-layer";
+      this.shadowRoot.appendChild(this.markersContainer);
+      if (this.options.showToolbar) {
+        this.createToolbar();
+      }
+    }
+    if (this.container && !this.container.isConnected) {
+      const mountParent = document.body || document.documentElement;
+      if (mountParent) {
+        mountParent.appendChild(this.container);
+      }
+    }
+    return this.shadowRoot;
+  }
+  createToolbar() {
+    if (!this.shadowRoot || this.toolbarElement) return;
+    this.toolbarElement = document.createElement("div");
+    this.toolbarElement.className = "bt-toolbar";
+    this.toolbarElement.innerHTML = `
+      <button class="bt-toolbar-btn" id="bt-mode-element" title="Inspect element (or hold Alt+Click)">
+        <span>\u{1F3AF}</span> Element
+      </button>
+      <button class="bt-toolbar-btn" id="bt-mode-region" title="Drag to select screen region">
+        <span>\u{1F4D0}</span> Region
+      </button>
+      <button class="bt-toolbar-btn" id="bt-mode-page" title="Leave full-page note">
+        <span>\u{1F4C4}</span> Page
+      </button>
+      <div class="bt-toolbar-divider"></div>
+      <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>
+    `;
+    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 btnToggleNotes = this.toolbarElement.querySelector("#bt-toggle-notes");
+    btnElement.onclick = (e) => {
+      e.stopPropagation();
+      this.setMode(this.activeMode === "element" ? "idle" : "element");
+    };
+    btnRegion.onclick = (e) => {
+      e.stopPropagation();
+      this.setMode(this.activeMode === "region" ? "idle" : "region");
+    };
+    btnPage.onclick = (e) => {
+      e.stopPropagation();
+      this.setMode("page");
+    };
+    btnToggleNotes.onclick = (e) => {
+      e.stopPropagation();
+      this.showMarkers = !this.showMarkers;
+      btnToggleNotes.classList.toggle("active", this.showMarkers);
+      this.renderMarkers();
+    };
+    this.shadowRoot.appendChild(this.toolbarElement);
+  }
+  updateToolbarState() {
+    if (!this.toolbarElement) return;
+    const btnElement = this.toolbarElement.querySelector("#bt-mode-element");
+    const btnRegion = this.toolbarElement.querySelector("#bt-mode-region");
+    const btnPage = this.toolbarElement.querySelector("#bt-mode-page");
+    btnElement?.classList.toggle("active", this.activeMode === "element");
+    btnRegion?.classList.toggle("active", this.activeMode === "region");
+    btnPage?.classList.toggle("active", this.activeMode === "page");
+  }
+  updateToolbarCount() {
+    if (!this.toolbarElement) return;
+    const countEl = this.toolbarElement.querySelector("#bt-notes-count");
+    if (countEl) {
+      const openCount = this.savedNotes.filter((n) => n.status === "OPEN").length;
+      countEl.textContent = String(openCount);
+    }
+  }
+  renderMarkers() {
+    const root = this.ensureContainer();
+    if (!root || !this.markersContainer) return;
+    this.markersContainer.innerHTML = "";
+    if (!this.showMarkers) 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 pageNotes = [];
+    activeNotes.forEach((note, index) => {
+      if (note.type === "page") {
+        pageNotes.push(note);
+        return;
+      }
+      if (note.type === "region" && note.region) {
+        const regBox = document.createElement("div");
+        regBox.className = "bt-region-marker-box";
+        regBox.style.left = `${note.region.x}px`;
+        regBox.style.top = `${note.region.y}px`;
+        regBox.style.width = `${note.region.width}px`;
+        regBox.style.height = `${note.region.height}px`;
+        this.markersContainer.appendChild(regBox);
+        const pin = document.createElement("div");
+        pin.className = "bt-note-marker";
+        pin.style.left = `${Math.max(4, note.region.x - 12)}px`;
+        pin.style.top = `${Math.max(4, note.region.y - 12)}px`;
+        pin.title = note.message;
+        pin.innerHTML = `<span>\u{1F4D0}</span> <span>#${index + 1}</span>`;
+        pin.onclick = (e) => {
+          e.stopPropagation();
+          this.openNoteCard(note);
+        };
+        this.markersContainer.appendChild(pin);
+        return;
+      }
+      let targetEl = null;
+      if (note.target?.selector) {
+        try {
+          targetEl = document.querySelector(note.target.selector);
+        } catch {
+        }
+      }
+      const rect = targetEl ? targetEl.getBoundingClientRect() : note.target?.boundingRect;
+      if (rect) {
+        const pin = document.createElement("div");
+        pin.className = "bt-note-marker";
+        pin.setAttribute("data-note-id", note.id);
+        pin.title = note.message;
+        pin.style.left = `${Math.max(4, rect.left - 10)}px`;
+        pin.style.top = `${Math.max(4, rect.top - 12)}px`;
+        pin.innerHTML = `<span>\u{1F4DD}</span> <span>#${index + 1}</span>`;
+        pin.onclick = (e) => {
+          e.stopPropagation();
+          this.openNoteCard(note);
+        };
+        if (targetEl) {
+          pin.onmouseenter = () => this.updateHighlight(targetEl);
+          pin.onmouseleave = () => this.hideHighlight();
+        }
+        this.markersContainer.appendChild(pin);
+      }
+    });
+    if (pageNotes.length > 0) {
+      const pageDock = document.createElement("div");
+      pageDock.className = "bt-page-notes-dock";
+      pageNotes.forEach((pNote, idx) => {
+        const pill = document.createElement("div");
+        pill.className = "bt-page-note-pill";
+        pill.innerHTML = `<span>\u{1F4C4}</span> <span>Page Note (${truncate(pNote.message, 25)})</span>`;
+        pill.onclick = (e) => {
+          e.stopPropagation();
+          this.openNoteCard(pNote);
+        };
+        pageDock.appendChild(pill);
+      });
+      this.markersContainer.appendChild(pageDock);
+    }
+  }
+  updateMarkerPositions() {
+    if (!this.showMarkers || !this.markersContainer) return;
+    this.renderMarkers();
+  }
+  openNoteCard(note) {
+    const root = this.ensureContainer();
+    if (!root) return;
+    if (this.cardOverlay && this.cardOverlay.parentElement) {
+      this.cardOverlay.parentElement.removeChild(this.cardOverlay);
+      this.cardOverlay = null;
+    }
+    const backdrop = document.createElement("div");
+    backdrop.className = "bt-modal-backdrop";
+    this.cardOverlay = backdrop;
+    const badgeClass = `bt-badge-${note.type.toLowerCase()}`;
+    const statusClass = note.status === "OPEN" ? "bt-badge-status-open" : "bt-badge-status-resolved";
+    const icon = note.type === "region" ? "\u{1F4D0}" : note.type === "page" ? "\u{1F4C4}" : "\u{1F3AF}";
+    const contextText = note.type === "region" && note.region ? `Region: ${note.region.width} \xD7 ${note.region.height} px \xB7 Route: ${note.route}` : note.type === "page" ? `Page Note \xB7 Route: ${note.route}` : `${note.target?.selector || "Element"} (${note.target?.boundingRect?.width || 0}\xD7${note.target?.boundingRect?.height || 0}px) \xB7 ${note.route}`;
+    const formattedDate = new Date(note.createdAt).toLocaleString();
+    backdrop.innerHTML = `
+      <div class="bt-modal">
+        <div class="bt-modal-header">
+          <div class="bt-modal-title">
+            <span>${icon} Visual Note Details</span>
+            <span class="bt-mode-badge ${badgeClass}">${note.type.toUpperCase()}</span>
+            <span class="bt-mode-badge ${statusClass}">${note.status}</span>
+          </div>
+          <button class="bt-close-btn" id="btn-card-close" title="Close (Esc)">\u2715</button>
+        </div>
+
+        <div class="bt-target-pill" title="${contextText}">
+          <span>\u{1F3F7}\uFE0F</span>
+          <span class="bt-pill-content">${contextText}</span>
+        </div>
+
+        <div class="bt-note-message-box">${note.message}</div>
+
+        <div style="font-size: 11px; color: #64748b; display: flex; justify-content: space-between; padding: 0 2px;">
+          <span>Created: ${formattedDate}</span>
+          <span>ID: <code style="font-family: monospace; color: #94a3b8;">${note.id}</code></span>
+        </div>
+
+        <div class="bt-modal-footer">
+          <button class="bt-btn bt-btn-delete" id="btn-card-delete" title="Delete this note">
+            <span>\u{1F5D1}\uFE0F</span> Delete
+          </button>
+          <div class="bt-modal-actions">
+            <button class="bt-btn bt-btn-cancel" id="btn-card-dismiss">Close</button>
+            <button class="bt-btn ${note.status === "OPEN" ? "bt-btn-resolve" : "bt-btn-save"}" id="btn-card-resolve">
+              ${note.status === "OPEN" ? "<span>\u2705</span> Resolve Note" : "<span>\u21BA</span> Reopen"}
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+    const btnClose = backdrop.querySelector("#btn-card-close");
+    const btnDismiss = backdrop.querySelector("#btn-card-dismiss");
+    const btnResolve = backdrop.querySelector("#btn-card-resolve");
+    const btnDelete = backdrop.querySelector("#btn-card-delete");
+    const closeCard = () => {
+      if (this.cardOverlay) {
+        root.removeChild(this.cardOverlay);
+        this.cardOverlay = null;
+        this.hideHighlight();
+      }
+    };
+    btnClose.onclick = closeCard;
+    btnDismiss.onclick = closeCard;
+    backdrop.onclick = (e) => {
+      if (e.target === backdrop) closeCard();
+    };
+    btnResolve.onclick = () => {
+      if (note.status === "OPEN") {
+        this.transport.send({ type: "resolve_note", noteId: note.id });
+      } else {
+        this.transport.send({ type: "reopen_note", noteId: note.id });
+      }
+      closeCard();
+    };
+    btnDelete.onclick = () => {
+      this.transport.send({ type: "delete_note", noteId: note.id });
+      closeCard();
+    };
+    root.appendChild(backdrop);
+  }
+  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);
+          return;
+        }
+      }
+      if (!e.altKey && this.activeMode !== "element") {
+        this.hideHighlight();
+      }
+    };
+    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.setMode("idle");
+          }
+        }
+      }
+    };
+    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") {
+          this.setMode("idle");
+        }
+      }
+    };
+    const onKeyUp = (e) => {
+      if (e.key === "Alt" && !this.modalOverlay && !this.cardOverlay && this.activeMode !== "element") {
+        this.hideHighlight();
+      }
+    };
+    const onScrollOrResize = () => {
+      requestAnimationFrame(() => {
+        this.updateMarkerPositions();
+      });
+    };
+    window.addEventListener("mousemove", onMouseMove, { capture: true, passive: true });
+    window.addEventListener("click", onClick, { capture: true });
+    window.addEventListener("keydown", onKeyDown, { capture: true });
+    window.addEventListener("keyup", onKeyUp, { capture: true });
+    window.addEventListener("scroll", onScrollOrResize, { capture: true, passive: true });
+    window.addEventListener("resize", onScrollOrResize, { passive: true });
+    this.cleanups.push(() => {
+      window.removeEventListener("mousemove", onMouseMove, { capture: true });
+      window.removeEventListener("click", onClick, { capture: true });
+      window.removeEventListener("keydown", onKeyDown, { capture: true });
+      window.removeEventListener("keyup", onKeyUp, { capture: true });
+      window.removeEventListener("scroll", onScrollOrResize, { capture: true });
+      window.removeEventListener("resize", onScrollOrResize);
+    });
+  }
+  showRegionOverlay() {
+    const root = this.ensureContainer();
+    if (!root) return;
+    if (!this.regionOverlay) {
+      this.regionOverlay = document.createElement("div");
+      this.regionOverlay.className = "bt-region-overlay";
+      this.regionBox = document.createElement("div");
+      this.regionBox.className = "bt-region-box";
+      this.regionBox.style.display = "none";
+      this.regionOverlay.appendChild(this.regionBox);
+      this.regionBanner = document.createElement("div");
+      this.regionBanner.className = "bt-region-banner";
+      this.regionBanner.innerHTML = `
+        <span>\u{1F4D0} Drag rectangle on screen to select region</span>
+        <button class="bt-region-cancel-btn" id="bt-region-cancel">\u2715 Cancel (Esc)</button>
+      `;
+      const btnCancel = this.regionBanner.querySelector("#bt-region-cancel");
+      btnCancel.onclick = (e) => {
+        e.stopPropagation();
+        this.setMode("idle");
+      };
+      this.regionOverlay.appendChild(this.regionBanner);
+      this.regionOverlay.oncontextmenu = (e) => {
+        e.preventDefault();
+        this.setMode("idle");
+      };
+      this.regionOverlay.onmousedown = (e) => {
+        const path = e.composedPath ? e.composedPath() : [];
+        if (this.regionBanner && path.includes(this.regionBanner)) return;
+        if (this.toolbarElement && path.includes(this.toolbarElement)) return;
+        this.isDraggingRegion = true;
+        this.dragStartX = e.clientX;
+        this.dragStartY = e.clientY;
+        if (this.regionBox) {
+          this.regionBox.style.display = "block";
+          this.regionBox.style.left = `${e.clientX}px`;
+          this.regionBox.style.top = `${e.clientY}px`;
+          this.regionBox.style.width = "0px";
+          this.regionBox.style.height = "0px";
+        }
+      };
+      this.regionOverlay.onmousemove = (e) => {
+        if (!this.isDraggingRegion || !this.regionBox) return;
+        const currentX = e.clientX;
+        const currentY = e.clientY;
+        const left = Math.min(this.dragStartX, currentX);
+        const top = Math.min(this.dragStartY, currentY);
+        const width = Math.abs(currentX - this.dragStartX);
+        const height = Math.abs(currentY - this.dragStartY);
+        this.regionBox.style.left = `${left}px`;
+        this.regionBox.style.top = `${top}px`;
+        this.regionBox.style.width = `${width}px`;
+        this.regionBox.style.height = `${height}px`;
+        let badge = this.regionBox.querySelector(".bt-region-badge");
+        if (!badge) {
+          badge = document.createElement("div");
+          badge.className = "bt-region-badge";
+          this.regionBox.appendChild(badge);
+        }
+        badge.textContent = `Region: ${Math.round(width)} \xD7 ${Math.round(height)} px`;
+      };
+      this.regionOverlay.onmouseup = (e) => {
+        if (!this.isDraggingRegion) return;
+        this.isDraggingRegion = false;
+        const currentX = e.clientX;
+        const currentY = e.clientY;
+        const left = Math.min(this.dragStartX, currentX);
+        const top = Math.min(this.dragStartY, currentY);
+        const width = Math.abs(currentX - this.dragStartX);
+        const height = Math.abs(currentY - this.dragStartY);
+        if (width > 15 && height > 15) {
+          this.selectedRegion = {
+            x: Math.round(left),
+            y: Math.round(top),
+            width: Math.round(width),
+            height: Math.round(height)
+          };
+          this.hideRegionOverlay();
+          this.setMode("idle");
+          this.openRegionNoteEditor(this.selectedRegion);
+        } else {
+          this.hideRegionOverlay();
+          this.setMode("idle");
+        }
+      };
+    }
+    if (this.toolbarElement && this.toolbarElement.parentNode === root) {
+      root.insertBefore(this.regionOverlay, this.toolbarElement);
+    } else {
+      root.appendChild(this.regionOverlay);
+    }
+  }
+  hideRegionOverlay() {
+    this.isDraggingRegion = false;
+    if (this.regionOverlay && this.regionOverlay.parentNode) {
+      this.regionOverlay.parentNode.removeChild(this.regionOverlay);
+    }
+    if (this.regionBox) {
+      this.regionBox.style.display = "none";
+    }
+  }
+  updateHighlight(el) {
+    const root = this.ensureContainer();
+    if (!root || !this.highlightOverlay) return;
+    const rect = el.getBoundingClientRect();
+    this.highlightOverlay.style.display = "block";
+    this.highlightOverlay.style.top = `${rect.top}px`;
+    this.highlightOverlay.style.left = `${rect.left}px`;
+    this.highlightOverlay.style.width = `${rect.width}px`;
+    this.highlightOverlay.style.height = `${rect.height}px`;
+    const selector = getSemanticSelector(el);
+    const badgeText = `${selector} \xB7 ${Math.round(rect.width)}\xD7${Math.round(rect.height)}`;
+    let badge = this.highlightOverlay.querySelector(".bt-badge");
+    if (!badge) {
+      badge = document.createElement("div");
+      badge.className = "bt-badge";
+      this.highlightOverlay.appendChild(badge);
+    }
+    badge.textContent = badgeText;
+  }
+  hideHighlight() {
+    if (this.highlightOverlay) {
+      this.highlightOverlay.style.display = "none";
+    }
+  }
+  openNoteEditor(el, noteType = "element") {
+    const root = this.ensureContainer();
+    if (!root) return;
+    const targetEl = el || document.body;
+    this.selectedElement = targetEl;
+    if (noteType === "element") {
+      this.updateHighlight(targetEl);
+    }
+    this.renderNoteModal({
+      title: "Add Visual Note",
+      modeBadge: 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}`,
+      onSave: async (message) => {
+        await this.saveVisualNote(targetEl, message, noteType);
+      }
+    });
+  }
+  openRegionNoteEditor(region) {
+    this.renderNoteModal({
+      title: "Add Region Note",
+      modeBadge: "REGION",
+      pillText: `Selected Area: x:${region.x}, y:${region.y} (${region.width} \xD7 ${region.height} px)`,
+      onSave: async (message) => {
+        await this.saveRegionVisualNote(region, message);
+      }
+    });
+  }
+  renderNoteModal(options) {
+    const root = this.ensureContainer();
+    if (!root) return;
+    if (this.modalOverlay && this.modalOverlay.parentElement) {
+      this.modalOverlay.parentElement.removeChild(this.modalOverlay);
+      this.modalOverlay = null;
+    }
+    const backdrop = document.createElement("div");
+    backdrop.className = "bt-modal-backdrop";
+    this.modalOverlay = backdrop;
+    const badgeClass = `bt-badge-${options.modeBadge.toLowerCase()}`;
+    const icon = options.modeBadge === "REGION" ? "\u{1F4D0}" : options.modeBadge === "PAGE" ? "\u{1F4C4}" : "\u{1F3AF}";
+    const isMac = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+    backdrop.innerHTML = `
+      <div class="bt-modal">
+        <div class="bt-modal-header">
+          <div class="bt-modal-title">
+            <span>\u{1F4DD} ${options.title}</span>
+            <span class="bt-mode-badge ${badgeClass}">${options.modeBadge}</span>
+          </div>
+          <button class="bt-close-btn" id="btn-close" title="Close (Esc)">\u2715</button>
+        </div>
+        <div class="bt-target-pill" title="${options.pillText}">
+          <span>${icon}</span>
+          <span class="bt-pill-content">${options.pillText}</span>
+        </div>
+        <textarea class="bt-textarea" placeholder="Describe the layout issue, styling bug, or note for AI agent..." autofocus></textarea>
+        <div class="bt-modal-footer">
+          <div class="bt-kbd-hint">
+            <kbd>${isMac ? "\u2318" : "Ctrl"}+Enter</kbd> save \xB7 <kbd>Esc</kbd> cancel
+          </div>
+          <div class="bt-modal-actions">
+            <button class="bt-btn bt-btn-cancel" id="btn-cancel">Cancel</button>
+            <button class="bt-btn bt-btn-save" id="btn-save">Save Note</button>
+          </div>
+        </div>
+      </div>
+    `;
+    const textarea = backdrop.querySelector("textarea");
+    const btnClose = backdrop.querySelector("#btn-close");
+    const btnCancel = backdrop.querySelector("#btn-cancel");
+    const btnSave = backdrop.querySelector("#btn-save");
+    const closeModal = () => {
+      if (this.modalOverlay) {
+        root.removeChild(this.modalOverlay);
+        this.modalOverlay = null;
+        this.hideHighlight();
+        this.hideRegionOverlay();
+      }
+    };
+    btnClose.onclick = closeModal;
+    btnCancel.onclick = closeModal;
+    backdrop.onclick = (e) => {
+      if (e.target === backdrop) {
+        closeModal();
+      }
+    };
+    const submitNote = async () => {
+      const message = textarea.value.trim();
+      if (!message) return;
+      btnSave.textContent = "Saving...";
+      btnSave.disabled = true;
+      try {
+        await options.onSave(message);
+      } finally {
+        closeModal();
+      }
+    };
+    btnSave.onclick = submitNote;
+    textarea.onkeydown = (e) => {
+      if (e.key === "Enter" && (e.metaKey || e.ctrlKey || !e.shiftKey)) {
+        e.preventDefault();
+        submitNote();
+      }
+      if (e.key === "Escape") {
+        closeModal();
+      }
+    };
+    root.appendChild(backdrop);
+    setTimeout(() => textarea?.focus(), 50);
+  }
+  async saveVisualNote(targetEl, message, noteType = "element") {
+    const rect = targetEl.getBoundingClientRect();
+    const selector = noteType === "page" ? "body" : getSemanticSelector(targetEl);
+    let screenshotDataUrl;
+    try {
+      const snap = await this.screenshotDriver.captureElement(targetEl);
+      if (snap.ok) {
+        screenshotDataUrl = snap.dataUrl;
+      }
+    } catch {
+    }
+    const elementContext = this.extractElementContext(targetEl);
+    const target = {
+      selector,
+      boundingRect: {
+        x: Math.round(rect.x),
+        y: Math.round(rect.y),
+        width: Math.round(rect.width),
+        height: Math.round(rect.height),
+        top: Math.round(rect.top),
+        left: Math.round(rect.left),
+        bottom: Math.round(rect.bottom),
+        right: Math.round(rect.right)
+      },
+      visible: rect.width > 0 && rect.height > 0,
+      confidence: selector.startsWith("[data-test") ? "high" : selector.startsWith("#") ? "medium" : "low"
+    };
+    const notePayload = {
+      type: "create_note",
+      sessionId: this.transport.getSessionId() || "",
+      noteType,
+      message,
+      route: window.location.pathname + window.location.search,
+      url: window.location.href,
+      viewport: {
+        width: window.innerWidth,
+        height: window.innerHeight,
+        devicePixelRatio: window.devicePixelRatio || 1
+      },
+      scroll: {
+        scrollX: window.scrollX,
+        scrollY: window.scrollY
+      },
+      target,
+      elementContext,
+      screenshot: screenshotDataUrl,
+      timestamp: Date.now()
+    };
+    this.transport.send(notePayload);
+    if (this.options.onNoteCreated) {
+      this.options.onNoteCreated(notePayload);
+    }
+  }
+  async saveRegionVisualNote(region, message) {
+    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);
+      }
+    } catch {
+    }
+    const notePayload = {
+      type: "create_note",
+      sessionId: this.transport.getSessionId() || "",
+      noteType: "region",
+      message,
+      route: window.location.pathname + window.location.search,
+      url: window.location.href,
+      viewport: {
+        width: window.innerWidth,
+        height: window.innerHeight,
+        devicePixelRatio: window.devicePixelRatio || 1
+      },
+      scroll: {
+        scrollX: window.scrollX,
+        scrollY: window.scrollY
+      },
+      region,
+      screenshot: screenshotDataUrl,
+      timestamp: Date.now()
+    };
+    this.transport.send(notePayload);
+    if (this.options.onNoteCreated) {
+      this.options.onNoteCreated(notePayload);
+    }
+  }
+  async cropDataUrl(dataUrl, region) {
+    return new Promise((resolve) => {
+      const img = new Image();
+      img.onload = () => {
+        try {
+          const canvas = document.createElement("canvas");
+          canvas.width = region.width;
+          canvas.height = region.height;
+          const ctx = canvas.getContext("2d");
+          if (!ctx) {
+            resolve(dataUrl);
+            return;
+          }
+          const dpr = window.devicePixelRatio || 1;
+          ctx.drawImage(
+            img,
+            region.x * dpr,
+            region.y * dpr,
+            region.width * dpr,
+            region.height * dpr,
+            0,
+            0,
+            region.width,
+            region.height
+          );
+          resolve(canvas.toDataURL("image/webp", 0.9));
+        } catch {
+          resolve(dataUrl);
+        }
+      };
+      img.onerror = () => resolve(dataUrl);
+      img.src = dataUrl;
+    });
+  }
+  extractElementContext(el) {
+    const selector = getSemanticSelector(el);
+    const tag = el.tagName.toLowerCase();
+    const attributes = {};
+    for (let i = 0; i < el.attributes.length; i++) {
+      const attr = el.attributes[i];
+      if (attr.name === "value" && el.type === "password") {
+        attributes[attr.name] = "[REDACTED]";
+      } else {
+        attributes[attr.name] = attr.value;
+      }
+    }
+    let outerHTML = "";
+    try {
+      const clone = el.cloneNode(true);
+      for (const passInput of Array.from(clone.querySelectorAll('input[type="password"]'))) {
+        passInput.setAttribute("value", "[REDACTED]");
+      }
+      outerHTML = truncate(clone.outerHTML, 10240);
+    } catch {
+      outerHTML = truncate(el.outerHTML, 10240);
+    }
+    let parent;
+    if (el.parentElement && el.parentElement !== document.body) {
+      parent = {
+        selector: getSemanticSelector(el.parentElement),
+        tag: el.parentElement.tagName.toLowerCase()
+      };
+    }
+    return {
+      selector,
+      tag,
+      attributes,
+      outerHTML,
+      innerText: truncate(el.textContent?.trim(), 200),
+      parent
+    };
+  }
+  destroy() {
+    for (const cleanup of this.cleanups) {
+      try {
+        cleanup();
+      } catch {
+      }
+    }
+    this.cleanups = [];
+    if (this.container && this.container.parentElement) {
+      this.container.parentElement.removeChild(this.container);
+    }
+    this.container = null;
+    this.shadowRoot = null;
+    this.toolbarElement = null;
+    this.regionOverlay = null;
+    this.regionBox = null;
+    this.regionBanner = null;
+    this.markersContainer = null;
+    this.modalOverlay = null;
+    this.cardOverlay = null;
+  }
+};
+
+// packages/client/src/client.ts
+var BrowserTrackClient = class {
+  options;
+  breadcrumbs;
+  transport;
+  screenshotDriver;
+  commandHandler;
+  inspector;
+  lastElement;
+  currentRoute = "/";
+  cleanups = [];
+  isInitialized = false;
+  constructor(options = {}) {
+    this.options = {
+      ...DEFAULT_OPTIONS,
+      ...options,
+      notes: {
+        ...DEFAULT_OPTIONS.notes,
+        ...options.notes || {}
+      }
+    };
+    this.breadcrumbs = new BreadcrumbBuffer(this.options.maxBreadcrumbs);
+    this.transport = new WebSocketTransport({
+      url: this.options.daemonUrl,
+      projectId: this.options.projectId,
+      debug: this.options.debug
+    });
+    this.screenshotDriver = new BrowserScriptScreenshotDriver();
+    this.commandHandler = new ClientCommandHandler(this.screenshotDriver);
+    this.transport.setCommandHandler(this.commandHandler);
+    if (this.options.notes.enabled) {
+      this.inspector = new NoteInspector(this.transport, this.screenshotDriver, {
+        shortcut: this.options.notes.shortcut,
+        maskSelectors: this.options.notes.maskSelectors
+      });
+    }
+  }
+  init() {
+    if (this.isInitialized || typeof window === "undefined") return this;
+    this.isInitialized = true;
+    try {
+      this.currentRoute = window.location.pathname + window.location.search;
+    } catch {
+      this.currentRoute = "/";
+    }
+    this.transport.connect();
+    if (this.options.captureErrors) {
+      const cleanupRuntime = setupRuntimeInterceptors(async (errEvent) => {
+        await this.handleRuntimeError(errEvent);
+      });
+      this.cleanups.push(cleanupRuntime);
+    }
+    if (this.options.captureConsole) {
+      const cleanupConsole = setupConsoleInterceptors(async (consoleEvent) => {
+        await this.handleConsole(consoleEvent);
+      });
+      this.cleanups.push(cleanupConsole);
+    }
+    if (this.options.captureNetwork) {
+      const cleanupNetwork = setupNetworkInterceptors((netEvent) => {
+        this.handleNetwork(netEvent);
+      });
+      this.cleanups.push(cleanupNetwork);
+    }
+    if (this.options.captureNavigation) {
+      const cleanupNav = setupNavigationInterceptors((navEvent) => {
+        this.handleNavigation(navEvent);
+      });
+      this.cleanups.push(cleanupNav);
+    }
+    if (this.options.captureInteractions) {
+      const cleanupInteraction = setupInteractionInterceptors((breadcrumb, elSummary) => {
+        if (elSummary) {
+          this.lastElement = elSummary;
+        }
+        this.breadcrumbs.add(breadcrumb);
+      });
+      this.cleanups.push(cleanupInteraction);
+    }
+    if (this.inspector) {
+      this.inspector.init();
+    }
+    return this;
+  }
+  openNoteEditor(el, noteType = "element") {
+    if (this.inspector) {
+      this.inspector.openNoteEditor(el, noteType);
+    }
+  }
+  startRegionSelection() {
+    if (this.inspector) {
+      this.inspector.setMode("region");
+    }
+  }
+  startElementSelection() {
+    if (this.inspector) {
+      this.inspector.setMode("element");
+    }
+  }
+  setInspectMode(mode) {
+    if (this.inspector) {
+      this.inspector.setMode(mode);
+    }
+  }
+  async createNote(targetEl, message, noteType = "element") {
+    if (this.inspector) {
+      await this.inspector.saveVisualNote(targetEl, message, noteType);
+    }
+  }
+  async handleRuntimeError(errorEvent) {
+    this.breadcrumbs.add({
+      type: "error",
+      category: "runtime",
+      message: `${errorEvent.errorType}: ${errorEvent.message}`,
+      timestamp: errorEvent.timestamp,
+      level: "error",
+      data: {
+        filename: errorEvent.filename,
+        lineno: errorEvent.lineno,
+        colno: errorEvent.colno
+      }
+    });
+    let screenshotDataUrl;
+    if (this.options.onErrorScreenshot && this.lastElement?.selector) {
+      try {
+        const snap = await this.screenshotDriver.captureSelector(this.lastElement.selector);
+        if (snap.ok) {
+          screenshotDataUrl = snap.dataUrl;
+        }
+      } catch {
+      }
+    }
+    this.sendEvent("runtime_error", errorEvent, screenshotDataUrl);
+  }
+  async handleConsole(consoleEvent) {
+    this.breadcrumbs.add({
+      type: "console",
+      category: "console",
+      message: `console.${consoleEvent.level}: ${consoleEvent.message}`,
+      timestamp: consoleEvent.timestamp,
+      level: consoleEvent.level === "error" ? "error" : consoleEvent.level === "warn" ? "warn" : "info"
+    });
+    if (consoleEvent.level === "error" || consoleEvent.level === "warn") {
+      this.sendEvent("console", consoleEvent);
+    }
+  }
+  handleNetwork(netEvent) {
+    const isError = netEvent.status && netEvent.status >= 400 || !!netEvent.error;
+    const msg = `${netEvent.method} ${netEvent.url} -> ${netEvent.status || "ERR"} (${netEvent.durationMs}ms)`;
+    this.breadcrumbs.add({
+      type: netEvent.id?.startsWith("xhr") ? "xhr" : "fetch",
+      category: "network",
+      message: msg,
+      timestamp: netEvent.timestamp,
+      level: isError ? "error" : "info",
+      data: {
+        status: netEvent.status,
+        durationMs: netEvent.durationMs,
+        error: netEvent.error,
+        aborted: netEvent.aborted
+      }
+    });
+    this.sendEvent("fetch", netEvent);
+  }
+  handleNavigation(navEvent) {
+    this.currentRoute = navEvent.to;
+    this.breadcrumbs.add({
+      type: "navigation",
+      category: "navigation",
+      message: `navigate ${navEvent.to} (${navEvent.type})`,
+      timestamp: navEvent.timestamp,
+      level: "info",
+      data: { from: navEvent.from, to: navEvent.to, type: navEvent.type }
+    });
+    this.sendEvent("navigation", navEvent);
+  }
+  sendEvent(eventType, payload, screenshotDataUrl) {
+    if (typeof window === "undefined") return;
+    const message = {
+      type: "event",
+      sessionId: this.transport.getSessionId() || "",
+      eventType,
+      payload,
+      breadcrumbs: this.breadcrumbs.getRecent(),
+      lastElement: this.lastElement,
+      route: this.currentRoute,
+      url: window.location.href,
+      title: document.title,
+      timestamp: Date.now(),
+      screenshot: screenshotDataUrl
+    };
+    this.transport.send(message);
+  }
+  getBreadcrumbs() {
+    return this.breadcrumbs.getRecent();
+  }
+  getLastElement() {
+    return this.lastElement;
+  }
+  destroy() {
+    for (const cleanup of this.cleanups) {
+      try {
+        cleanup();
+      } catch {
+      }
+    }
+    this.cleanups = [];
+    this.transport.destroy();
+    if (this.inspector) {
+      this.inspector.destroy();
+    }
+    this.breadcrumbs.clear();
+    this.isInitialized = false;
+  }
+};
+
+// packages/client/src/index.ts
+var defaultClient = null;
+function init(options = {}) {
+  if (defaultClient) {
+    return defaultClient;
+  }
+  defaultClient = new BrowserTrackClient(options);
+  defaultClient.init();
+  return defaultClient;
+}
+function getClient() {
+  return defaultClient;
+}
+if (typeof window !== "undefined") {
+  window.__BROWSERTRACK__ = {
+    init,
+    getClient
+  };
+  try {
+    const currentScript = document.currentScript;
+    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;
+    if (autoInit) {
+      init({ daemonUrl, projectId });
+    }
+  } catch {
+  }
+}
+
+export {
+  BreadcrumbBuffer,
+  DEFAULT_OPTIONS,
+  BrowserScriptScreenshotDriver,
+  NoteInspector,
+  BrowserTrackClient,
+  init,
+  getClient
+};
+//# sourceMappingURL=chunk-SKCMT2DE.js.map