@loupfeed/core 0.1.0

package/dist/index.cjs

@@ -0,0 +1,942 @@
+'use strict';
+
+// src/dsn.ts
+var PATH_RE = /^\/o\/([^/]+)\/p\/([^/]+)\/?$/;
+function parseDsn(dsn) {
+  let url;
+  try {
+    url = new URL(dsn);
+  } catch {
+    throw new Error(`[loupfeed] Invalid DSN: ${JSON.stringify(dsn)}`);
+  }
+  const publicKey = url.username;
+  if (!publicKey) {
+    throw new Error("[loupfeed] DSN is missing its public key: https://<PUBLIC_KEY>@host/o/<org>/p/<project>");
+  }
+  const match = PATH_RE.exec(url.pathname);
+  const orgId = match?.[1];
+  const projectId = match?.[2];
+  if (!orgId || !projectId) {
+    throw new Error(`[loupfeed] DSN path must be /o/<org>/p/<project>, got ${JSON.stringify(url.pathname)}`);
+  }
+  const protocol = url.protocol.replace(/:$/, "");
+  return {
+    raw: dsn,
+    protocol,
+    publicKey,
+    host: url.hostname,
+    port: url.port,
+    orgId,
+    projectId,
+    baseUrl: `${protocol}://${url.host}`
+  };
+}
+function apiBase(dsn) {
+  return `${dsn.baseUrl}/api/${encodeURIComponent(dsn.orgId)}/${encodeURIComponent(dsn.projectId)}`;
+}
+function eventsUrl(dsn) {
+  return `${apiBase(dsn)}/events`;
+}
+function replaysUrl(dsn) {
+  return `${apiBase(dsn)}/replays`;
+}
+function manifestsUrl(dsn) {
+  return `${apiBase(dsn)}/manifests`;
+}
+function resolveUrl(dsn) {
+  return `${apiBase(dsn)}/resolve`;
+}
+
+// src/transport.ts
+function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+function makeFetchTransport(dsn, opts = {}) {
+  const headers = {
+    "content-type": "application/json",
+    // Non-secret, project-scoped ingest key (doc 06 §Auth on ingest).
+    "x-loupfeed-key": dsn.publicKey
+  };
+  const pending = /* @__PURE__ */ new Set();
+  async function post(url, body, attempt = 0) {
+    try {
+      const res = await fetch(url, { method: "POST", headers, body, keepalive: true });
+      if (res.status >= 500 && attempt < 2) {
+        await delay(200 * (attempt + 1));
+        return post(url, body, attempt + 1);
+      }
+      return res;
+    } catch (err) {
+      if (attempt < 2) {
+        await delay(200 * (attempt + 1));
+        return post(url, body, attempt + 1);
+      }
+      throw err;
+    }
+  }
+  function track(p) {
+    pending.add(p);
+    void p.catch(() => void 0).finally(() => pending.delete(p));
+    return p;
+  }
+  async function send(event) {
+    return track(
+      post(eventsUrl(dsn), JSON.stringify(event)).then(async (res) => {
+        if (!res.ok) {
+          const text = await res.text().catch(() => "");
+          throw new Error(`[loupfeed] ingest responded ${res.status} ${text}`.trim());
+        }
+        const data = await res.json().catch(() => ({}));
+        if (opts.debug) console.debug("[loupfeed] sent event", data.eventId ?? event.eventId);
+        return data.eventId ?? event.eventId;
+      })
+    );
+  }
+  async function sendReplay(buffer2) {
+    const body = JSON.stringify({
+      replayId: buffer2.replayId,
+      durationMs: buffer2.durationMs,
+      kind: buffer2.kind ?? "rrweb",
+      events: buffer2.events,
+      frames: buffer2.frames,
+      viewport: buffer2.viewport,
+      video: buffer2.video,
+      mimeType: buffer2.mimeType
+    });
+    const res = await post(replaysUrl(dsn), body);
+    if (!res.ok) {
+      const text = await res.text().catch(() => "");
+      throw new Error(`[loupfeed] replay upload ${res.status} ${text}`.trim());
+    }
+    const data = await res.json().catch(() => ({}));
+    return {
+      replayId: data.replayId ?? buffer2.replayId,
+      durationMs: data.durationMs ?? buffer2.durationMs
+    };
+  }
+  async function flush(timeout) {
+    const all = Promise.allSettled([...pending]).then(() => true);
+    if (!timeout) return all;
+    return Promise.race([all, delay(timeout).then(() => false)]);
+  }
+  return { send, sendReplay, flush };
+}
+
+// src/selector.ts
+var rootEl = null;
+function setSelectorRoot(el) {
+  rootEl = el;
+}
+function getSelectorRoot() {
+  return rootEl;
+}
+function defaultRoot() {
+  if (rootEl) return rootEl;
+  return typeof document !== "undefined" ? document.body : null;
+}
+function selectorFor(el) {
+  const tagged = el.closest("[data-fb-id]");
+  if (tagged) {
+    return `[data-fb-id="${tagged.getAttribute("data-fb-id")}"]`;
+  }
+  const root = defaultRoot();
+  const parts = [];
+  let cur = el;
+  while (cur && cur !== root) {
+    const node = cur;
+    const parent = node.parentElement;
+    if (!parent) break;
+    const tag = node.tagName.toLowerCase();
+    const sameTag = Array.from(parent.children).filter((c) => c.tagName === node.tagName);
+    let segment = tag;
+    if (sameTag.length > 1) {
+      segment += `:nth-of-type(${sameTag.indexOf(node) + 1})`;
+    }
+    parts.unshift(segment);
+    cur = parent;
+  }
+  return parts.join(" > ");
+}
+function resolveSelector(selector) {
+  const root = defaultRoot();
+  if (!root || !selector) return null;
+  try {
+    return root.querySelector(selector);
+  } catch {
+    return null;
+  }
+}
+function snapshotElement(el) {
+  const r = el.getBoundingClientRect();
+  const idEl = el.closest("[data-fb]");
+  const elementId = idEl?.getAttribute("data-fb") ?? void 0;
+  const text = (el.textContent ?? "").trim().slice(0, 80);
+  return {
+    selector: selectorFor(el),
+    elementId,
+    tagName: el.tagName.toLowerCase(),
+    text: text || void 0,
+    rect: { x: r.x, y: r.y, w: r.width, h: r.height }
+  };
+}
+
+// src/env.ts
+function isBrowser() {
+  return typeof window !== "undefined" && typeof document !== "undefined";
+}
+function nowIso() {
+  return (/* @__PURE__ */ new Date()).toISOString();
+}
+function uuid() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    const v = c === "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+}
+
+// src/version.ts
+var SDK_VERSION = "0.0.0";
+
+// src/event.ts
+function normalizeTags(tags) {
+  const out = {};
+  for (const [k, v] of Object.entries(tags)) {
+    if (v === null || v === void 0) continue;
+    out[k] = v;
+  }
+  return out;
+}
+function buildEvent(client, input, scope) {
+  const options = client.getOptions();
+  let element;
+  if (input.element) {
+    element = snapshotElement(input.element);
+  } else if (input.elementId || input.elementInfo) {
+    element = {
+      selector: input.elementInfo?.selector ?? "",
+      elementId: input.elementId ?? input.elementInfo?.elementId,
+      tagName: input.elementInfo?.tagName,
+      text: input.elementInfo?.text,
+      rect: input.elementInfo?.rect
+    };
+  } else {
+    element = { selector: "" };
+  }
+  const event = {
+    eventId: uuid(),
+    timestamp: nowIso(),
+    release: options.release ?? "",
+    environment: options.environment ?? "production",
+    text: input.text,
+    element,
+    sdk: { name: "loupfeed", version: SDK_VERSION }
+  };
+  if (scope.user) event.user = scope.user;
+  const tags = normalizeTags(scope.tags);
+  if (Object.keys(tags).length) event.tags = tags;
+  if (Object.keys(scope.contexts).length) event.contexts = { ...scope.contexts };
+  if (scope.breadcrumbs.length) event.breadcrumbs = scope.breadcrumbs;
+  if (options.autoContext !== false && isBrowser()) {
+    event.request = { url: window.location.href };
+    const device = {
+      viewport: {
+        width: window.innerWidth,
+        height: window.innerHeight,
+        dpr: window.devicePixelRatio
+      }
+    };
+    event.contexts = { ...event.contexts ?? {}, device };
+  }
+  if (options.beforeSend) {
+    return options.beforeSend(event);
+  }
+  return event;
+}
+
+// src/scope.ts
+var DEFAULT_MAX_BREADCRUMBS = 50;
+var Scope = class _Scope {
+  constructor() {
+    this._tags = {};
+    this._contexts = {};
+    this._breadcrumbs = [];
+    this._maxBreadcrumbs = DEFAULT_MAX_BREADCRUMBS;
+  }
+  setUser(user) {
+    this._user = user ?? void 0;
+    return this;
+  }
+  getUser() {
+    return this._user;
+  }
+  setTag(key, value) {
+    this._tags[key] = value;
+    return this;
+  }
+  setTags(tags) {
+    Object.assign(this._tags, tags);
+    return this;
+  }
+  setContext(key, data) {
+    if (data === null) {
+      delete this._contexts[key];
+    } else {
+      this._contexts[key] = data;
+    }
+    return this;
+  }
+  addBreadcrumb(breadcrumb, maxBreadcrumbs) {
+    const crumb = { ...breadcrumb, timestamp: breadcrumb.timestamp ?? nowIso() };
+    this._breadcrumbs.push(crumb);
+    const limit = maxBreadcrumbs ?? this._maxBreadcrumbs;
+    if (this._breadcrumbs.length > limit) {
+      this._breadcrumbs.splice(0, this._breadcrumbs.length - limit);
+    }
+    return this;
+  }
+  setMaxBreadcrumbs(n) {
+    this._maxBreadcrumbs = n;
+    return this;
+  }
+  clearBreadcrumbs() {
+    this._breadcrumbs = [];
+    return this;
+  }
+  clone() {
+    const c = new _Scope();
+    c._user = this._user;
+    c._tags = { ...this._tags };
+    c._contexts = Object.fromEntries(
+      Object.entries(this._contexts).map(([k, v]) => [k, { ...v }])
+    );
+    c._breadcrumbs = [...this._breadcrumbs];
+    c._maxBreadcrumbs = this._maxBreadcrumbs;
+    return c;
+  }
+  getScopeData() {
+    return {
+      user: this._user,
+      tags: { ...this._tags },
+      contexts: Object.fromEntries(
+        Object.entries(this._contexts).map(([k, v]) => [k, { ...v }])
+      ),
+      breadcrumbs: [...this._breadcrumbs]
+    };
+  }
+};
+var globalScope;
+var scopeStack = [];
+function getGlobalScope() {
+  if (!globalScope) globalScope = new Scope();
+  return globalScope;
+}
+function getCurrentScope() {
+  return scopeStack[scopeStack.length - 1] ?? getGlobalScope();
+}
+function withScope(cb) {
+  const child = getCurrentScope().clone();
+  scopeStack.push(child);
+  try {
+    return cb(child);
+  } finally {
+    scopeStack.pop();
+  }
+}
+function setUser(user) {
+  getCurrentScope().setUser(user);
+}
+function setContext(key, data) {
+  getCurrentScope().setContext(key, data);
+}
+function setTag(key, value) {
+  getCurrentScope().setTag(key, value);
+}
+function setTags(tags) {
+  getCurrentScope().setTags(tags);
+}
+function addBreadcrumb(breadcrumb) {
+  getCurrentScope().addBreadcrumb(breadcrumb);
+}
+
+// src/replay.ts
+var FULL_SNAPSHOT = 2;
+var META = 4;
+var stopFn = null;
+var starting = false;
+var buffer = [];
+var checkpoints = [];
+var replayOptions = {};
+var bufferMs = 6e4;
+var MAX_BYTES = 5e6;
+function configureRecorder(opts) {
+  replayOptions = opts.replay ?? {};
+  if (typeof opts.replayBufferSeconds === "number") bufferMs = Math.max(5, opts.replayBufferSeconds) * 1e3;
+}
+function rrwebOptions(emit) {
+  const o = replayOptions;
+  return {
+    emit,
+    checkoutEveryNms: bufferMs,
+    // periodic full snapshots bound the buffer
+    // —— masking: privacy by DEFAULT (mask everything, opt out deliberately) ——
+    maskAllInputs: o.maskAllInputs !== false,
+    maskInputOptions: { password: true },
+    // passwords always, non-overridable
+    maskTextSelector: o.maskAllText !== false ? "*" : o.maskTextSelector,
+    blockSelector: o.blockSelector ?? "[data-fb-block],[data-private]",
+    recordCanvas: false,
+    collectFonts: false
+  };
+}
+function bytes() {
+  let n = 0;
+  for (const e of buffer) n += e.__sz ?? 0;
+  return n;
+}
+function enforce() {
+  while (checkpoints.length > 2) {
+    const dropBefore = checkpoints[1];
+    buffer = buffer.slice(dropBefore);
+    checkpoints = checkpoints.slice(1).map((i) => i - dropBefore);
+  }
+  while (checkpoints.length > 1 && bytes() > MAX_BYTES) {
+    const dropBefore = checkpoints[1];
+    buffer = buffer.slice(dropBefore);
+    checkpoints = checkpoints.slice(1).map((i) => i - dropBefore);
+  }
+}
+async function loadRrweb() {
+  try {
+    return await import('rrweb');
+  } catch {
+    return null;
+  }
+}
+async function startAsync() {
+  if (!isBrowser() || stopFn || starting) return;
+  starting = true;
+  if (document.readyState === "loading") {
+    await new Promise((r) => document.addEventListener("DOMContentLoaded", () => r(), { once: true }));
+  }
+  const rr = await loadRrweb();
+  const record = rr?.record;
+  if (typeof record !== "function") {
+    starting = false;
+    console.warn("[loupfeed] rrweb not available \u2014 session replay disabled. Install it: `npm i rrweb`.");
+    return;
+  }
+  buffer = [];
+  checkpoints = [];
+  const emit = (event, _isCheckout) => {
+    if (event.type === FULL_SNAPSHOT) {
+      const prev = buffer.length - 1;
+      const start = prev >= 0 && buffer[prev]?.type === META ? prev : buffer.length;
+      checkpoints.push(start);
+    }
+    try {
+      event.__sz = JSON.stringify(event).length;
+    } catch {
+      event.__sz = 256;
+    }
+    buffer.push(event);
+    enforce();
+  };
+  stopFn = record(rrwebOptions(emit)) ?? null;
+  starting = false;
+}
+var replay = {
+  start() {
+    void startAsync();
+  },
+  stop() {
+    stopFn?.();
+    stopFn = null;
+    buffer = [];
+    checkpoints = [];
+  },
+  isRecording() {
+    return stopFn != null || starting;
+  },
+  /** Freeze the rolling buffer for the current event. */
+  snapshot() {
+    if (buffer.length === 0 || checkpoints.length === 0) {
+      return { replayId: "", durationMs: 0, kind: "rrweb", events: [] };
+    }
+    const events = buffer.map((e) => {
+      const { __sz, ...rest } = e;
+      return rest;
+    });
+    const first = events[0];
+    const last = events[events.length - 1];
+    const durationMs = Math.max(0, (last?.timestamp ?? 0) - (first?.timestamp ?? 0));
+    return { replayId: uuid(), durationMs, kind: "rrweb", events };
+  }
+};
+var activeRecorder = replay;
+function setReplayRecorder(recorder) {
+  activeRecorder = recorder ?? replay;
+}
+function getActiveRecorder() {
+  return activeRecorder;
+}
+
+// src/client.ts
+var Client = class {
+  constructor(options) {
+    this.options = options;
+    this.dsn = parseDsn(options.dsn);
+    this.transport = options.transport ?? makeFetchTransport(this.dsn, { debug: options.debug });
+    if (typeof options.maxBreadcrumbs === "number") {
+      getGlobalScope().setMaxBreadcrumbs(options.maxBreadcrumbs);
+    }
+  }
+  getOptions() {
+    return this.options;
+  }
+  getDsn() {
+    return this.dsn;
+  }
+  getTransport() {
+    return this.transport;
+  }
+  async captureFeedback(input) {
+    const event = buildEvent(this, input, getCurrentScope().getScopeData());
+    if (!event) {
+      if (this.options.debug) console.warn("[loupfeed] event dropped by beforeSend");
+      return "";
+    }
+    await this.maybeAttachReplay(event);
+    if (this.options.debug) console.debug("[loupfeed] capture", event);
+    try {
+      return await this.transport.send(event);
+    } catch (err) {
+      console.error("[loupfeed] failed to send feedback", err);
+      return event.eventId;
+    }
+  }
+  async maybeAttachReplay(event) {
+    const rate = this.options.replaysSampleRate ?? 0;
+    const recorder = getActiveRecorder();
+    if (rate <= 0 || !this.transport.sendReplay || !recorder.isRecording()) return;
+    if (Math.random() > rate) return;
+    try {
+      const buffer2 = await recorder.snapshot();
+      if (!buffer2 || !buffer2.events?.length && !buffer2.frames?.length && !buffer2.video) return;
+      const { replayId, durationMs } = await this.transport.sendReplay(buffer2);
+      if (replayId) event.replay = { replayId, durationMs };
+    } catch (err) {
+      if (this.options.debug) console.warn("[loupfeed] replay upload failed", err);
+    }
+  }
+  async flush(timeout) {
+    return this.transport.flush(timeout);
+  }
+  async close(timeout) {
+    const res = await this.transport.flush(timeout);
+    this.transport.close?.();
+    return res;
+  }
+};
+
+// src/sdk.ts
+var currentClient;
+function init(options) {
+  const client = new Client(options);
+  currentClient = client;
+  const replayEnabled = (options.replaysSampleRate ?? 0) > 0 || options.replay != null;
+  if (replayEnabled) {
+    configureRecorder({ replay: options.replay, replayBufferSeconds: options.replayBufferSeconds });
+    replay.start();
+  }
+  if (options.debug) {
+    console.debug("[loupfeed] initialized", {
+      org: client.dsn.orgId,
+      project: client.dsn.projectId,
+      host: client.dsn.host,
+      release: options.release,
+      environment: options.environment
+    });
+  }
+  return client;
+}
+function getClient() {
+  return currentClient;
+}
+async function captureFeedback(input) {
+  const client = currentClient;
+  if (!client) {
+    console.warn("[loupfeed] captureFeedback() called before init(); ignoring.");
+    return "";
+  }
+  return client.captureFeedback(input);
+}
+async function close(timeout) {
+  if (!currentClient) return true;
+  const res = await currentClient.close(timeout);
+  currentClient = void 0;
+  return res;
+}
+
+// src/overlay/styles.ts
+function overlayCss(accent) {
+  return `
+:host { all: initial; }
+* { box-sizing: border-box; }
+
+.lf-highlight {
+  position: fixed;
+  pointer-events: none;
+  border: 2px solid ${accent};
+  border-radius: 3px;
+  background: ${accent}1f;
+  box-shadow: 0 0 0 1px rgba(255,255,255,.45);
+  z-index: 1;
+  transition: left .05s, top .05s, width .05s, height .05s;
+  display: none;
+}
+.lf-label {
+  position: absolute;
+  top: -22px;
+  left: -2px;
+  font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: #fff;
+  background: ${accent};
+  padding: 1px 6px;
+  border-radius: 3px;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.lf-launcher {
+  position: fixed;
+  right: 16px;
+  bottom: 16px;
+  pointer-events: auto;
+  font: 600 13px/1 ui-sans-serif, system-ui, -apple-system, sans-serif;
+  color: #fff;
+  background: ${accent};
+  border: none;
+  border-radius: 999px;
+  padding: 10px 16px;
+  cursor: pointer;
+  box-shadow: 0 4px 14px rgba(0,0,0,.25);
+}
+.lf-launcher[data-active="true"] { background: #111; }
+.lf-launcher:hover { filter: brightness(1.06); }
+
+.lf-popup {
+  position: fixed;
+  pointer-events: auto;
+  width: 280px;
+  background: #fff;
+  color: #111;
+  border-radius: 10px;
+  box-shadow: 0 10px 40px rgba(0,0,0,.3);
+  padding: 12px;
+  font: 400 13px/1.5 ui-sans-serif, system-ui, -apple-system, sans-serif;
+  display: none;
+  z-index: 2;
+}
+.lf-popup[data-open="true"] { display: block; }
+.lf-target {
+  font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: ${accent};
+  margin-bottom: 6px;
+  word-break: break-all;
+}
+.lf-popup textarea {
+  width: 100%;
+  min-height: 64px;
+  resize: vertical;
+  border: 1px solid #dcdce3;
+  border-radius: 6px;
+  padding: 8px;
+  font: inherit;
+  outline: none;
+}
+.lf-popup textarea:focus { border-color: ${accent}; }
+.lf-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
+.lf-btn {
+  font: 600 12px/1 ui-sans-serif, system-ui, -apple-system, sans-serif;
+  border-radius: 6px;
+  padding: 7px 12px;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+.lf-btn-primary { background: ${accent}; color: #fff; }
+.lf-btn-primary:disabled { opacity: .6; cursor: default; }
+.lf-btn-ghost { background: transparent; color: #555; border-color: #dcdce3; }
+.lf-sent { color: #16a34a; font-weight: 600; padding: 6px 2px; }
+`;
+}
+
+// src/overlay/index.ts
+function noopController() {
+  return {
+    open() {
+    },
+    close() {
+    },
+    toggleInspect() {
+    },
+    isInspecting() {
+      return false;
+    },
+    destroy() {
+    }
+  };
+}
+function createOverlay(opts = {}) {
+  if (!isBrowser()) return noopController();
+  const accent = opts.accentColor ?? "#6d28d9";
+  const zIndex = opts.zIndex ?? 2147483600;
+  const root = opts.root ?? document.body;
+  const submit = opts.onSubmit ?? ((input) => void captureFeedback(input));
+  const showLauncher = opts.launcher !== false;
+  setSelectorRoot(root);
+  const host = document.createElement("div");
+  host.setAttribute("data-loupfeed", "overlay");
+  host.style.cssText = `position:fixed;inset:0;pointer-events:none;z-index:${zIndex};`;
+  const shadow = host.attachShadow({ mode: "open" });
+  const style = document.createElement("style");
+  style.textContent = overlayCss(accent);
+  shadow.append(style);
+  const highlight = document.createElement("div");
+  highlight.className = "lf-highlight";
+  const label = document.createElement("div");
+  label.className = "lf-label";
+  highlight.append(label);
+  shadow.append(highlight);
+  const popup = document.createElement("div");
+  popup.className = "lf-popup";
+  shadow.append(popup);
+  let launcher = null;
+  if (showLauncher) {
+    launcher = document.createElement("button");
+    launcher.type = "button";
+    launcher.className = "lf-launcher";
+    launcher.textContent = "Feedback";
+    launcher.addEventListener("click", () => toggleInspect());
+    shadow.append(launcher);
+  }
+  document.body.append(host);
+  let state = "idle";
+  let current = null;
+  function describe(elm) {
+    const tag = elm.tagName.toLowerCase();
+    const id = elm.closest("[data-fb]")?.getAttribute("data-fb");
+    return id ? `${tag} \xB7 ${id}` : tag;
+  }
+  function setHighlight(elm) {
+    if (!elm) {
+      highlight.style.display = "none";
+      return;
+    }
+    const r = elm.getBoundingClientRect();
+    highlight.style.display = "block";
+    highlight.style.left = `${r.left}px`;
+    highlight.style.top = `${r.top}px`;
+    highlight.style.width = `${r.width}px`;
+    highlight.style.height = `${r.height}px`;
+    label.textContent = describe(elm);
+  }
+  function onMove(e) {
+    if (state !== "inspect") return;
+    const el = document.elementFromPoint(e.clientX, e.clientY);
+    if (!el || el === host) {
+      current = null;
+      setHighlight(null);
+      return;
+    }
+    current = el;
+    setHighlight(el);
+  }
+  function onClick(e) {
+    if (state !== "inspect") return;
+    if (e.target === host) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const target = current ?? document.elementFromPoint(e.clientX, e.clientY);
+    if (!target || target === host) return;
+    openCompose(target);
+  }
+  function onKey(e) {
+    if (e.key !== "Escape") return;
+    if (state === "compose") {
+      closeCompose();
+      enterInspect();
+    } else if (state === "inspect") {
+      exitInspect();
+    }
+  }
+  function enterInspect() {
+    state = "inspect";
+    if (launcher) launcher.dataset.active = "true";
+    document.addEventListener("mousemove", onMove, true);
+    document.addEventListener("click", onClick, true);
+    document.addEventListener("keydown", onKey, true);
+  }
+  function exitInspect() {
+    state = "idle";
+    current = null;
+    setHighlight(null);
+    if (launcher) launcher.dataset.active = "false";
+    document.removeEventListener("mousemove", onMove, true);
+    document.removeEventListener("click", onClick, true);
+    document.removeEventListener("keydown", onKey, true);
+  }
+  function button(text, cls) {
+    const b = document.createElement("button");
+    b.type = "button";
+    b.className = cls;
+    b.textContent = text;
+    return b;
+  }
+  function positionPopup(r) {
+    const margin = 8;
+    const w = 280;
+    let left = r.left;
+    let top = r.bottom + margin;
+    if (left + w > window.innerWidth - margin) left = window.innerWidth - w - margin;
+    if (left < margin) left = margin;
+    if (top + 168 > window.innerHeight) top = Math.max(margin, r.top - 168);
+    popup.style.left = `${left}px`;
+    popup.style.top = `${top}px`;
+  }
+  function openCompose(target) {
+    state = "compose";
+    current = target;
+    setHighlight(target);
+    document.removeEventListener("mousemove", onMove, true);
+    document.removeEventListener("click", onClick, true);
+    const info = snapshotElement(target);
+    popup.innerHTML = "";
+    const targetLine = document.createElement("div");
+    targetLine.className = "lf-target";
+    targetLine.textContent = info.elementId ? `${info.tagName} \xB7 ${info.elementId}` : info.tagName ?? "element";
+    const textarea = document.createElement("textarea");
+    textarea.placeholder = "What's wrong with this element?";
+    const row = document.createElement("div");
+    row.className = "lf-row";
+    const cancel = button("Cancel", "lf-btn lf-btn-ghost");
+    const send = button("Send", "lf-btn lf-btn-primary");
+    row.append(cancel, send);
+    popup.append(targetLine, textarea, row);
+    positionPopup(target.getBoundingClientRect());
+    popup.dataset.open = "true";
+    setTimeout(() => textarea.focus(), 0);
+    cancel.addEventListener("click", () => {
+      closeCompose();
+      enterInspect();
+    });
+    send.addEventListener("click", () => {
+      void submitCompose(target, textarea, send);
+    });
+  }
+  async function submitCompose(target, textarea, send) {
+    const text = textarea.value.trim();
+    if (!text) {
+      textarea.focus();
+      return;
+    }
+    send.disabled = true;
+    try {
+      await submit({ text, element: target });
+    } catch {
+    }
+    popup.innerHTML = '<div class="lf-sent">Sent \u2713</div>';
+    setTimeout(() => {
+      closeCompose();
+      exitInspect();
+    }, 900);
+  }
+  function closeCompose() {
+    popup.dataset.open = "false";
+    popup.innerHTML = "";
+    if (state === "compose") state = "idle";
+    setHighlight(null);
+  }
+  function toggleInspect() {
+    if (state === "idle") enterInspect();
+    else {
+      closeCompose();
+      exitInspect();
+    }
+  }
+  function open() {
+    if (state === "idle") enterInspect();
+  }
+  function close2() {
+    closeCompose();
+    exitInspect();
+  }
+  function isInspecting() {
+    return state !== "idle";
+  }
+  function destroy() {
+    close2();
+    host.remove();
+  }
+  return { open, close: close2, toggleInspect, isInspecting, destroy };
+}
+var active = null;
+function mountOverlay(opts) {
+  const controller = createOverlay(opts);
+  active = controller;
+  return () => {
+    controller.destroy();
+    if (active === controller) active = null;
+  };
+}
+var overlay = {
+  open() {
+    active?.open();
+  },
+  close() {
+    active?.close();
+  },
+  toggleInspect() {
+    active?.toggleInspect();
+  },
+  isInspecting() {
+    return active?.isInspecting() ?? false;
+  }
+};
+
+exports.Client = Client;
+exports.SDK_VERSION = SDK_VERSION;
+exports.Scope = Scope;
+exports.addBreadcrumb = addBreadcrumb;
+exports.captureFeedback = captureFeedback;
+exports.close = close;
+exports.eventsUrl = eventsUrl;
+exports.getActiveRecorder = getActiveRecorder;
+exports.getClient = getClient;
+exports.getCurrentScope = getCurrentScope;
+exports.getGlobalScope = getGlobalScope;
+exports.getSelectorRoot = getSelectorRoot;
+exports.init = init;
+exports.makeFetchTransport = makeFetchTransport;
+exports.manifestsUrl = manifestsUrl;
+exports.mountOverlay = mountOverlay;
+exports.overlay = overlay;
+exports.parseDsn = parseDsn;
+exports.replay = replay;
+exports.replaysUrl = replaysUrl;
+exports.resolveSelector = resolveSelector;
+exports.resolveUrl = resolveUrl;
+exports.selectorFor = selectorFor;
+exports.setContext = setContext;
+exports.setReplayRecorder = setReplayRecorder;
+exports.setSelectorRoot = setSelectorRoot;
+exports.setTag = setTag;
+exports.setTags = setTags;
+exports.setUser = setUser;
+exports.snapshotElement = snapshotElement;
+exports.withScope = withScope;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map