@merittdev/horus-lens 0.0.1

package/dist/chunk-DU7HNRF4.js

@@ -0,0 +1,1644 @@
+import {
+  LENS_OVERLAY_HOST_ID,
+  LensClient
+} from "./chunk-S6S3ZZQA.js";
+
+// ../browser/dist/index.js
+var DEFAULT_PARAM_NAME = "lens";
+var GATE_STORAGE_KEY = "lens:active";
+var LEGACY_PARAM_NAME = "lense";
+var LEGACY_STORAGE_KEY = "lense:active";
+var TRUTHY = /* @__PURE__ */ new Set(["", "true", "1", "on", "yes"]);
+var FALSY = /* @__PURE__ */ new Set(["false", "0", "off", "no"]);
+function hasWindow() {
+  return typeof window !== "undefined" && typeof document !== "undefined";
+}
+function readParam(paramName) {
+  try {
+    const params = new URLSearchParams(window.location.search);
+    const value = params.get(paramName);
+    if (value !== null) return value;
+    if (paramName === DEFAULT_PARAM_NAME) return params.get(LEGACY_PARAM_NAME);
+    return null;
+  } catch {
+    return null;
+  }
+}
+function readStorage() {
+  try {
+    const s = window.sessionStorage;
+    return s.getItem(GATE_STORAGE_KEY) === "1" || s.getItem(LEGACY_STORAGE_KEY) === "1";
+  } catch {
+    return false;
+  }
+}
+function writeStorage(active) {
+  try {
+    if (active) window.sessionStorage.setItem(GATE_STORAGE_KEY, "1");
+    else window.sessionStorage.removeItem(GATE_STORAGE_KEY);
+  } catch {
+  }
+}
+function evaluateGate(paramName = DEFAULT_PARAM_NAME) {
+  if (!hasWindow()) return false;
+  const raw = readParam(paramName);
+  if (raw !== null) {
+    const value = raw.trim().toLowerCase();
+    if (FALSY.has(value)) {
+      writeStorage(false);
+      return false;
+    }
+    if (TRUTHY.has(value)) {
+      writeStorage(true);
+      return true;
+    }
+  }
+  return readStorage();
+}
+function isGateActive(paramName = DEFAULT_PARAM_NAME) {
+  if (!hasWindow()) return false;
+  const raw = readParam(paramName);
+  if (raw !== null) {
+    const value = raw.trim().toLowerCase();
+    if (FALSY.has(value)) return false;
+    if (TRUTHY.has(value)) return true;
+  }
+  return readStorage();
+}
+function clearGate() {
+  if (!hasWindow()) return;
+  writeStorage(false);
+}
+function detectBrowser(ua = navigator.userAgent) {
+  if (/Edg\//.test(ua)) return "Edge";
+  if (/OPR\/|Opera/.test(ua)) return "Opera";
+  if (/Firefox\//.test(ua)) return "Firefox";
+  if (/Chrome\//.test(ua) && !/Chromium/.test(ua)) return "Chrome";
+  if (/Chromium\//.test(ua)) return "Chromium";
+  if (/Safari\//.test(ua) && /Version\//.test(ua)) return "Safari";
+  return "Browser";
+}
+function detectOs(ua = navigator.userAgent) {
+  if (/Windows NT/.test(ua)) return "Windows";
+  if (/Mac OS X|Macintosh/.test(ua)) return "macOS";
+  if (/Android/.test(ua)) return "Android";
+  if (/iPhone|iPad|iPod/.test(ua)) return "iOS";
+  if (/Linux/.test(ua)) return "Linux";
+  return "Unknown";
+}
+function viewport() {
+  return {
+    width: window.innerWidth || document.documentElement.clientWidth || 0,
+    height: window.innerHeight || document.documentElement.clientHeight || 0
+  };
+}
+function currentRoute() {
+  return (window.location.pathname || "/") + (window.location.search || "");
+}
+function el(tag, props = {}, children = []) {
+  const node = document.createElement(tag);
+  if (props.class) node.className = props.class;
+  if (props.text !== void 0) node.textContent = props.text;
+  if (props.html !== void 0) node.innerHTML = props.html;
+  if (props.title) node.title = props.title;
+  if (props.ariaLabel) node.setAttribute("aria-label", props.ariaLabel);
+  if (props.type && "type" in node) node.type = props.type;
+  if (props.placeholder && "placeholder" in node) {
+    node.placeholder = props.placeholder;
+  }
+  if (props.attrs) {
+    for (const [k, v] of Object.entries(props.attrs)) node.setAttribute(k, v);
+  }
+  if (props.style) Object.assign(node.style, props.style);
+  if (props.on) {
+    for (const [event, handler] of Object.entries(props.on)) {
+      if (handler) node.addEventListener(event, handler);
+    }
+  }
+  for (const child of children) {
+    if (child === null || child === void 0 || child === false) continue;
+    node.append(child);
+  }
+  return node;
+}
+function clear(node) {
+  while (node.firstChild) node.removeChild(node.firstChild);
+}
+var Annotator = class {
+  constructor(host) {
+    this.host = host;
+  }
+  host;
+  layer = null;
+  chips = null;
+  draft = null;
+  startX = 0;
+  startY = 0;
+  active = false;
+  dragging = false;
+  annotations = [];
+  renderedRects = [];
+  sessionBase = 0;
+  onExit = null;
+  get isActive() {
+    return this.active;
+  }
+  get count() {
+    return this.annotations.length;
+  }
+  list() {
+    return this.annotations.map((a) => ({ ...a, viewport: { ...a.viewport } }));
+  }
+  clear() {
+    this.annotations = [];
+    for (const rect of this.renderedRects) rect.remove();
+    this.renderedRects = [];
+  }
+  start(onExit) {
+    if (this.active) return;
+    this.active = true;
+    this.onExit = onExit;
+    this.sessionBase = this.annotations.length;
+    this.layer = el("div", { class: "lens-annotate" });
+    this.layer.addEventListener("pointerdown", this.onDown);
+    this.chips = el("div", { class: "lens-annotate-chips" }, [
+      el("span", { class: "lens-annotate-chips__label", text: "Drag to mark an area" }),
+      el("button", {
+        class: "lens-pick-chip__btn",
+        text: "Cancel",
+        on: { click: () => this.cancel() }
+      }),
+      el("button", {
+        class: "lens-pick-chip__btn lens-pick-chip__btn--primary",
+        text: "Done",
+        on: { click: () => this.exit() }
+      })
+    ]);
+    this.host.append(this.layer, this.chips);
+    window.addEventListener("keydown", this.onKey, true);
+  }
+  /** Discard rectangles drawn during this session, then exit. */
+  cancel() {
+    const removed = this.renderedRects.splice(this.sessionBase);
+    for (const rect of removed) rect.remove();
+    this.annotations.splice(this.sessionBase);
+    this.exit();
+  }
+  exit() {
+    if (!this.active) return;
+    this.active = false;
+    this.dragging = false;
+    window.removeEventListener("keydown", this.onKey, true);
+    window.removeEventListener("pointermove", this.onMove, true);
+    window.removeEventListener("pointerup", this.onUp, true);
+    if (this.draft) {
+      this.draft.remove();
+      this.draft = null;
+    }
+    if (this.layer) {
+      this.layer.removeEventListener("pointerdown", this.onDown);
+      this.layer.remove();
+      this.layer = null;
+    }
+    if (this.chips) {
+      this.chips.remove();
+      this.chips = null;
+    }
+    const exit = this.onExit;
+    this.onExit = null;
+    exit?.();
+  }
+  onDown = (e) => {
+    e.preventDefault();
+    this.dragging = true;
+    this.startX = e.clientX;
+    this.startY = e.clientY;
+    this.draft = el("div", { class: "lens-rect" });
+    this.host.append(this.draft);
+    this.position(this.draft, e.clientX, e.clientY);
+    window.addEventListener("pointermove", this.onMove, true);
+    window.addEventListener("pointerup", this.onUp, true);
+  };
+  onMove = (e) => {
+    if (this.dragging && this.draft) this.position(this.draft, e.clientX, e.clientY);
+  };
+  onUp = (e) => {
+    window.removeEventListener("pointermove", this.onMove, true);
+    window.removeEventListener("pointerup", this.onUp, true);
+    this.dragging = false;
+    const x = Math.min(this.startX, e.clientX);
+    const y = Math.min(this.startY, e.clientY);
+    const width = Math.abs(e.clientX - this.startX);
+    const height = Math.abs(e.clientY - this.startY);
+    if (this.draft) {
+      this.draft.remove();
+      this.draft = null;
+    }
+    if (width < 6 || height < 6) return;
+    const rect = el("div", { class: "lens-rect" });
+    Object.assign(rect.style, {
+      left: `${x}px`,
+      top: `${y}px`,
+      width: `${width}px`,
+      height: `${height}px`
+    });
+    this.host.append(rect);
+    this.renderedRects.push(rect);
+    this.annotations.push({
+      kind: "rect",
+      x,
+      y,
+      width,
+      height,
+      viewport: { width: window.innerWidth, height: window.innerHeight }
+    });
+  };
+  position(node, curX, curY) {
+    const x = Math.min(this.startX, curX);
+    const y = Math.min(this.startY, curY);
+    Object.assign(node.style, {
+      left: `${x}px`,
+      top: `${y}px`,
+      width: `${Math.abs(curX - this.startX)}px`,
+      height: `${Math.abs(curY - this.startY)}px`
+    });
+  }
+  onKey = (e) => {
+    if (e.key !== "Escape") return;
+    e.preventDefault();
+    e.stopPropagation();
+    this.exit();
+  };
+};
+var svg = (inner) => `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${inner}</svg>`;
+var iconEye = svg(
+  '<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>'
+);
+var iconCrosshair = svg(
+  '<circle cx="12" cy="12" r="8"/><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/>'
+);
+var iconClose = svg('<line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/>');
+var iconMark = svg(
+  '<rect x="3" y="3" width="18" height="18" rx="2" stroke-dasharray="4 3"/>'
+);
+var iconCopy = svg(
+  '<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/>'
+);
+var iconCheck = svg('<polyline points="20 6 9 17 4 12"/>');
+var iconSend = svg('<line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>');
+var iconRecord = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="12" cy="12" r="6" fill="#ef4444"/></svg>`;
+var iconStop = `<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>`;
+var INCLUDE_ITEMS = [
+  { key: "replay", label: "Replay" },
+  { key: "console", label: "Console" },
+  { key: "network", label: "Network" },
+  { key: "errors", label: "Errors" },
+  { key: "screenshot", label: "Screenshot" }
+];
+var Panel = class {
+  constructor(cb) {
+    this.cb = cb;
+    this.body = el("div", { class: "lens-panel__body" });
+    this.root = el("div", { class: "lens-panel", attrs: { role: "dialog", "aria-label": "Report an issue" } }, [
+      el("div", { class: "lens-panel__head" }, [
+        el("div", { class: "lens-panel__title", text: "Report an issue" }),
+        el("button", {
+          class: "lens-panel__x",
+          ariaLabel: "Close",
+          html: iconClose,
+          on: { click: () => this.cb.onClose() }
+        })
+      ]),
+      this.body
+    ]);
+    this.renderForm();
+  }
+  cb;
+  root;
+  body;
+  textarea;
+  submitBtn;
+  autoCloseTimer = null;
+  submitting = false;
+  /** Selected capture toggles; every flag starts ON. Persists across refresh. */
+  include = {
+    replay: true,
+    console: true,
+    network: true,
+    errors: true,
+    screenshot: true
+  };
+  /** Re-render the compose view (chips reflect latest target / annotations). */
+  refresh() {
+    if (!this.submitting) this.renderForm();
+  }
+  focus() {
+    this.textarea?.focus();
+  }
+  destroy() {
+    if (this.autoCloseTimer) clearTimeout(this.autoCloseTimer);
+    this.root.remove();
+  }
+  renderForm() {
+    const prior = this.textarea?.value ?? "";
+    clear(this.body);
+    this.textarea = el("textarea", {
+      class: "lens-textarea",
+      placeholder: "What's wrong? Describe the issue\u2026",
+      ariaLabel: "Issue description"
+    });
+    this.textarea.value = prior;
+    this.body.append(
+      this.textarea,
+      this.buildContext(),
+      this.buildIncludes(),
+      this.buildChips(),
+      this.buildActions()
+    );
+  }
+  /** Static, non-interactive page context: route · browser · os · viewport. */
+  buildContext() {
+    const s = this.cb.getStats();
+    const parts = [
+      truncate(s.route || s.url, 40),
+      `${s.browser} \xB7 ${s.os}`,
+      `${s.viewport.width}\xD7${s.viewport.height}`
+    ];
+    const nodes = [];
+    parts.forEach((part, i) => {
+      if (i > 0) nodes.push(el("span", { class: "lens-context__dot", text: "\xB7" }));
+      nodes.push(el("span", { class: "lens-context__item", text: part }));
+    });
+    return el("div", { class: "lens-context", title: s.url }, nodes);
+  }
+  /** Real toggles ("switch"): which captured data to attach. All ON by default. */
+  buildIncludes() {
+    const s = this.cb.getStats();
+    const counts = {
+      console: s.console,
+      network: s.network,
+      errors: s.errors
+    };
+    const toggles = INCLUDE_ITEMS.map((item) => this.buildToggle(item.key, item.label, counts[item.key]));
+    return el("div", { class: "lens-includes" }, [
+      el("span", { class: "lens-includes__label", text: "Include:" }),
+      ...toggles
+    ]);
+  }
+  buildToggle(key, label, count) {
+    const on = this.include[key];
+    const btn = el("button", {
+      class: `lens-tgl${on ? " is-on" : ""}`,
+      attrs: { type: "button", role: "switch", "aria-checked": String(on) },
+      html: `<span class="lens-tgl__check" aria-hidden="true">${iconCheck}</span>`
+    });
+    btn.append(el("span", { class: "lens-tgl__label", text: label }));
+    if (typeof count === "number" && count > 0) {
+      btn.append(el("span", { class: "lens-tgl__count", text: String(count) }));
+    }
+    btn.addEventListener("click", () => {
+      const next = !this.include[key];
+      this.include[key] = next;
+      btn.classList.toggle("is-on", next);
+      btn.setAttribute("aria-checked", String(next));
+    });
+    return btn;
+  }
+  /** Removable context chips: annotations, retained recording, picked element. */
+  buildChips() {
+    const row = el("div", { class: "lens-chips" });
+    const annCount = this.cb.getAnnotationCount();
+    if (annCount > 0) {
+      row.append(chip(`${annCount} annotation${annCount === 1 ? "" : "s"}`));
+    }
+    const recording = this.cb.getRecording();
+    if (recording) {
+      const recChip = el("span", { class: "lens-chip lens-chip--ok lens-chip--rec" }, [
+        el("span", { text: `recording \u2713 ${formatDuration(recording.durationMs)}` }),
+        el("button", {
+          class: "lens-chip__x",
+          ariaLabel: "Discard recording",
+          text: "\xD7",
+          on: { click: () => this.cb.onDiscardRecording() }
+        })
+      ]);
+      row.append(recChip);
+    }
+    const target = this.cb.getTarget();
+    if (target) {
+      const label = target.domPath || target.tagName || "element";
+      const targetChip = el("span", { class: "lens-chip lens-chip--target", title: label }, [
+        el("span", { class: "lens-chip__code", text: truncate(label, 40) }),
+        el("button", {
+          class: "lens-chip__x",
+          ariaLabel: "Remove element",
+          text: "\xD7",
+          on: { click: () => this.cb.onRemoveTarget() }
+        })
+      ]);
+      row.append(targetChip);
+    }
+    row.style.display = row.childElementCount > 0 ? "" : "none";
+    return row;
+  }
+  buildActions() {
+    const mark = el("button", {
+      class: "lens-abtn lens-abtn--ghost lens-abtn--compact",
+      html: iconMark + "<span>Mark area</span>",
+      on: { click: () => this.cb.onMarkArea() }
+    });
+    const record = el("button", {
+      class: "lens-abtn lens-abtn--ghost lens-abtn--compact",
+      html: iconRecord + "<span>Record steps</span>",
+      on: { click: () => this.cb.onRecordSteps() }
+    });
+    const cancel = el("button", {
+      class: "lens-abtn lens-abtn--ghost",
+      text: "Cancel",
+      on: { click: () => this.cb.onClose() }
+    });
+    this.submitBtn = el("button", {
+      class: "lens-abtn lens-abtn--primary lens-abtn--submit",
+      html: iconSend + "<span>Submit</span>",
+      on: { click: () => void this.submit() }
+    });
+    return el("div", { class: "lens-actions" }, [
+      el("div", { class: "lens-actions__row lens-actions__secondary" }, [mark, record]),
+      el("div", { class: "lens-actions__row lens-actions__primary" }, [cancel, this.submitBtn])
+    ]);
+  }
+  async submit() {
+    if (this.submitting) return;
+    const comment = this.textarea.value.trim();
+    this.submitting = true;
+    this.submitBtn.disabled = true;
+    this.submitBtn.innerHTML = "<span>Submitting\u2026</span>";
+    try {
+      const { reportId } = await this.cb.onSubmit(comment, { ...this.include });
+      this.renderSuccess(reportId);
+    } catch (err) {
+      this.renderError(err instanceof Error ? err.message : "Something went wrong");
+    } finally {
+      this.submitting = false;
+    }
+  }
+  renderSuccess(reportId) {
+    clear(this.body);
+    const idPill = el("div", { class: "lens-idpill" }, [
+      el("span", { text: reportId }),
+      el("button", {
+        ariaLabel: "Copy report id",
+        html: iconCopy,
+        on: {
+          click: (e) => {
+            const btn = e.currentTarget;
+            void copy(reportId).then(() => {
+              btn.innerHTML = iconCheck;
+              setTimeout(() => btn.innerHTML = iconCopy, 1200);
+            });
+          }
+        }
+      })
+    ]);
+    this.body.append(
+      el("div", { class: "lens-state" }, [
+        el("div", { class: "lens-state__badge lens-state__badge--ok", html: iconCheck }),
+        el("div", { class: "lens-state__title", text: "Report submitted" }),
+        el("div", { class: "lens-state__msg", text: "Thanks \u2014 the team can see the full context." }),
+        idPill
+      ])
+    );
+    this.autoCloseTimer = setTimeout(() => this.cb.onClose(), 2500);
+  }
+  renderError(message) {
+    clear(this.body);
+    this.body.append(
+      el("div", { class: "lens-state" }, [
+        el("div", { class: "lens-state__badge lens-state__badge--err", html: iconClose }),
+        el("div", { class: "lens-state__title", text: "Submission failed" }),
+        el("div", { class: "lens-state__msg", text: truncate(message, 120) }),
+        el("div", { class: "lens-actions" }, [
+          el("button", {
+            class: "lens-abtn lens-abtn--ghost",
+            text: "Cancel",
+            on: { click: () => this.cb.onClose() }
+          }),
+          el("button", {
+            class: "lens-abtn lens-abtn--primary",
+            text: "Retry",
+            on: { click: () => this.renderForm() }
+          })
+        ])
+      ])
+    );
+  }
+};
+function chip(text, title, extra) {
+  return el("span", { class: `lens-chip${extra ? " " + extra : ""}`, text, title: title ?? text });
+}
+function truncate(value, max) {
+  return value.length > max ? value.slice(0, max - 1) + "\u2026" : value;
+}
+function formatDuration(ms) {
+  const total = Math.max(0, Math.round(ms / 1e3));
+  const m = Math.floor(total / 60);
+  const s = total % 60;
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+async function copy(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch {
+  }
+}
+var ElementPicker = class {
+  constructor(layer, rootHost) {
+    this.layer = layer;
+    this.rootHost = rootHost;
+    this.tag = el("div", { class: "lens-highlight__tag" });
+    this.highlight = el("div", { class: "lens-highlight" }, [this.tag]);
+    this.hint = el("div", { class: "lens-pick-chip" }, [
+      el("span", { class: "lens-pick-chip__label", text: "Tap an element" }),
+      el("button", {
+        class: "lens-pick-chip__btn",
+        text: "Cancel",
+        on: { click: () => this.cancel() }
+      })
+    ]);
+    this.layer.append(this.highlight, this.hint);
+    this.hide();
+  }
+  layer;
+  rootHost;
+  highlight;
+  tag;
+  hint;
+  current = null;
+  active = false;
+  onPick = null;
+  onCancel = null;
+  get isActive() {
+    return this.active;
+  }
+  start(onPick, onCancel) {
+    if (this.active) return;
+    this.active = true;
+    this.onPick = onPick;
+    this.onCancel = onCancel;
+    this.current = null;
+    this.hint.style.display = "";
+    window.addEventListener("pointermove", this.onMove, true);
+    window.addEventListener("pointerdown", this.onDown, true);
+    window.addEventListener("pointerup", this.onUp, true);
+    window.addEventListener("click", this.onClick, true);
+    window.addEventListener("keydown", this.onKey, true);
+  }
+  stop() {
+    if (!this.active) return;
+    this.active = false;
+    this.current = null;
+    this.onPick = null;
+    this.onCancel = null;
+    this.hide();
+    window.removeEventListener("pointermove", this.onMove, true);
+    window.removeEventListener("pointerdown", this.onDown, true);
+    window.removeEventListener("pointerup", this.onUp, true);
+    window.removeEventListener("click", this.onClick, true);
+    window.removeEventListener("keydown", this.onKey, true);
+  }
+  cancel() {
+    const cancel = this.onCancel;
+    this.stop();
+    cancel?.();
+  }
+  hide() {
+    this.highlight.style.display = "none";
+    this.hint.style.display = "none";
+  }
+  isOverlayEvent(e) {
+    return e.composedPath().includes(this.rootHost);
+  }
+  isCoarse() {
+    return typeof window.matchMedia === "function" && window.matchMedia("(pointer: coarse)").matches;
+  }
+  elementAt(x, y) {
+    const found = document.elementFromPoint(x, y);
+    if (!found || found === this.rootHost) return null;
+    return found;
+  }
+  highlightElement(target) {
+    this.current = target;
+    const rect = target.getBoundingClientRect();
+    Object.assign(this.highlight.style, {
+      display: "block",
+      left: `${rect.left}px`,
+      top: `${rect.top}px`,
+      width: `${rect.width}px`,
+      height: `${rect.height}px`
+    });
+    this.tag.textContent = describe(target);
+  }
+  confirm(target) {
+    const pick = this.onPick;
+    this.suppressNextClick();
+    this.stop();
+    pick?.(target);
+  }
+  suppressNextClick() {
+    const swallow = (e) => {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      cleanup();
+    };
+    const cleanup = () => {
+      window.removeEventListener("click", swallow, true);
+      clearTimeout(timer);
+    };
+    window.addEventListener("click", swallow, { capture: true });
+    const timer = setTimeout(cleanup, 500);
+  }
+  onMove = (e) => {
+    if (this.isOverlayEvent(e)) return;
+    if (this.isCoarse()) return;
+    const target = this.elementAt(e.clientX, e.clientY);
+    if (!target || target === this.current) return;
+    this.highlightElement(target);
+  };
+  onDown = (e) => {
+    if (this.isOverlayEvent(e)) return;
+    e.preventDefault();
+    e.stopImmediatePropagation();
+  };
+  onUp = (e) => {
+    if (this.isOverlayEvent(e)) return;
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    const target = this.elementAt(e.clientX, e.clientY);
+    if (this.isCoarse()) {
+      if (target && target === this.current) {
+        this.confirm(target);
+      } else if (target) {
+        this.highlightElement(target);
+      }
+      return;
+    }
+    const chosen = target ?? this.current;
+    if (chosen) this.confirm(chosen);
+  };
+  onClick = (e) => {
+    if (this.isOverlayEvent(e)) return;
+    e.preventDefault();
+    e.stopImmediatePropagation();
+  };
+  onKey = (e) => {
+    if (e.key !== "Escape") return;
+    e.preventDefault();
+    e.stopPropagation();
+    this.cancel();
+  };
+};
+function describe(elem) {
+  const tag = elem.tagName.toLowerCase();
+  const id = elem.id ? `#${elem.id}` : "";
+  const cls = typeof elem.className === "string" && elem.className.trim() ? "." + elem.className.trim().split(/\s+/).slice(0, 2).join(".") : "";
+  return `${tag}${id}${cls}`;
+}
+var OVERLAY_CSS = (
+  /* css */
+  `
+:host {
+  all: initial;
+  --lens-accent: #6366f1;
+  --lens-accent-strong: #4f46e5;
+  --lens-radius: 8px;
+  --lens-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --lens-z: 2147483000;
+  font-family: var(--lens-font);
+  line-height: 1.4;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.lens-layer {
+  position: fixed;
+  inset: 0;
+  z-index: var(--lens-z);
+  pointer-events: none;
+  font-family: var(--lens-font);
+}
+.lens-layer > * { pointer-events: auto; }
+
+/* ---------------- Pill ---------------- */
+.lens-pill {
+  position: fixed;
+  bottom: calc(12px + env(safe-area-inset-bottom));
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: calc(100vw - 16px);
+  flex-wrap: wrap;
+  justify-content: center;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px;
+  border-radius: 999px;
+  background: rgba(20, 20, 23, 0.82);
+  -webkit-backdrop-filter: blur(12px) saturate(180%);
+  backdrop-filter: blur(12px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  color: #f4f4f5;
+  user-select: none;
+  transition: opacity 150ms ease, transform 150ms ease;
+}
+.lens-pill__dot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  margin-left: 4px;
+  border-radius: 999px;
+  color: #a5b4fc;
+}
+.lens-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 30px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: #e4e4e7;
+  font-family: var(--lens-font);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 150ms ease, color 150ms ease;
+}
+.lens-btn:hover { background: rgba(255, 255, 255, 0.1); }
+.lens-btn:focus-visible { outline: 2px solid var(--lens-accent); outline-offset: 1px; }
+.lens-btn--primary { background: var(--lens-accent); color: #fff; }
+.lens-btn--primary:hover { background: var(--lens-accent-strong); }
+.lens-btn--icon { width: 30px; padding: 0; justify-content: center; }
+.lens-btn--icon.is-active { background: var(--lens-accent); color: #fff; }
+.lens-pill__sep {
+  width: 1px;
+  height: 18px;
+  background: rgba(255, 255, 255, 0.14);
+  margin: 0 2px;
+}
+
+/* ---------------- Picker highlight ---------------- */
+.lens-highlight {
+  position: fixed;
+  z-index: calc(var(--lens-z) - 2);
+  pointer-events: none;
+  border: 2px solid var(--lens-accent);
+  background: rgba(99, 102, 241, 0.14);
+  border-radius: 3px;
+  transition: all 60ms linear;
+  display: none;
+}
+.lens-highlight__tag {
+  position: absolute;
+  top: -22px;
+  left: -2px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: var(--lens-accent);
+  color: #fff;
+  font: 500 11px/1.5 var(--lens-font);
+  white-space: nowrap;
+}
+.lens-hint {
+  position: fixed;
+  bottom: 64px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 6px 12px;
+  border-radius: 999px;
+  background: rgba(20, 20, 23, 0.9);
+  color: #e4e4e7;
+  font-size: 12px;
+  font-weight: 500;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+  pointer-events: none;
+}
+
+/* ---------------- Annotation layer ---------------- */
+.lens-annotate {
+  position: fixed;
+  inset: 0;
+  z-index: calc(var(--lens-z) - 1);
+  cursor: crosshair;
+  background: rgba(15, 15, 20, 0.04);
+  touch-action: none;
+}
+.lens-rect {
+  position: fixed;
+  border: 2px solid var(--lens-accent);
+  background: rgba(99, 102, 241, 0.1);
+  border-radius: 3px;
+  pointer-events: none;
+}
+
+/* ---------------- Panel ---------------- */
+.lens-panel {
+  position: fixed;
+  right: 20px;
+  bottom: 64px;
+  width: min(520px, calc(100vw - 40px));
+  max-width: 520px;
+  max-height: calc(100vh - 96px);
+  display: flex;
+  flex-direction: column;
+  border-radius: 14px;
+  background: #ffffff;
+  color: #18181b;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  transform-origin: bottom right;
+  animation: lens-in 150ms ease;
+}
+@keyframes lens-in {
+  from { opacity: 0; transform: translateY(6px) scale(0.98); }
+  to { opacity: 1; transform: none; }
+}
+.lens-panel__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+}
+.lens-panel__title { font-size: 14px; font-weight: 600; }
+.lens-panel__x {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: #52525b;
+  cursor: pointer;
+  transition: background 150ms ease;
+}
+.lens-panel__x:hover { background: rgba(0, 0, 0, 0.06); }
+.lens-panel__body {
+  padding: 14px 16px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.lens-textarea {
+  width: 100%;
+  min-height: 120px;
+  resize: vertical;
+  padding: 10px 12px;
+  border-radius: var(--lens-radius);
+  border: 1px solid rgba(0, 0, 0, 0.14);
+  background: #fafafa;
+  color: inherit;
+  font-family: var(--lens-font);
+  font-size: 13px;
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+}
+.lens-textarea:focus {
+  outline: none;
+  border-color: var(--lens-accent);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
+}
+/* ---- Context row: static, non-interactive page facts (muted, dot-joined) ---- */
+.lens-context {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  font-size: 11.5px;
+  line-height: 1.4;
+  color: #71717a;
+}
+.lens-context__item { white-space: nowrap; }
+.lens-context__dot { opacity: 0.55; }
+
+/* ---- Include row: real toggles (role=switch) for which data to attach ---- */
+.lens-includes {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+.lens-includes__label {
+  font-size: 11.5px;
+  font-weight: 600;
+  color: #71717a;
+  margin-right: 2px;
+}
+.lens-tgl {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  border: 1px solid rgba(0, 0, 0, 0.14);
+  background: #fafafa;
+  color: #a1a1aa;
+  font-family: var(--lens-font);
+  font-size: 11.5px;
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+  opacity: 0.75;
+  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease;
+}
+.lens-tgl:hover { opacity: 1; }
+.lens-tgl:focus-visible { outline: 2px solid var(--lens-accent); outline-offset: 1px; }
+.lens-tgl__check { display: none; align-items: center; }
+.lens-tgl__check svg { width: 13px; height: 13px; }
+.lens-tgl__count { font-weight: 500; opacity: 0.75; font-variant-numeric: tabular-nums; }
+.lens-tgl.is-on {
+  opacity: 1;
+  color: var(--lens-accent-strong);
+  border-color: rgba(99, 102, 241, 0.5);
+  background: #eef2ff;
+}
+.lens-tgl.is-on .lens-tgl__check { display: inline-flex; }
+
+.lens-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.lens-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  max-width: 100%;
+  padding: 3px 9px;
+  border-radius: 999px;
+  background: #f4f4f5;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  color: #3f3f46;
+  font-size: 11.5px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.lens-chip--ok { color: #15803d; background: #f0fdf4; border-color: rgba(21, 128, 61, 0.18); }
+.lens-chip--target {
+  max-width: 100%;
+  background: #eef2ff;
+  border-color: rgba(99, 102, 241, 0.25);
+  color: var(--lens-accent-strong);
+}
+.lens-chip__code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.lens-chip__x {
+  display: inline-flex;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  padding: 0;
+  opacity: 0.7;
+  font-size: 13px;
+  line-height: 1;
+}
+.lens-chip__x:hover { opacity: 1; }
+/* ---- Actions: secondary row (mark / record) then primary row (cancel / submit) ---- */
+.lens-actions { display: flex; flex-direction: column; gap: 8px; }
+.lens-actions__row { display: flex; align-items: center; gap: 8px; }
+/* Mark area / Record steps split the row evenly, one line, never wrap. */
+.lens-actions__secondary .lens-abtn { flex: 1; min-width: 0; justify-content: center; }
+/* Submit always fills remaining width; Cancel stays intrinsic. */
+.lens-actions__primary .lens-abtn--submit { flex: 1; }
+.lens-abtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 34px;
+  padding: 0 14px;
+  border-radius: var(--lens-radius);
+  border: 1px solid transparent;
+  font-family: var(--lens-font);
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background 150ms ease, border-color 150ms ease, opacity 150ms ease;
+}
+.lens-abtn span { white-space: nowrap; }
+.lens-abtn--compact { padding: 0 10px; font-size: 12px; }
+.lens-abtn svg { flex: none; }
+.lens-abtn--ghost { background: transparent; border-color: rgba(0, 0, 0, 0.14); color: #3f3f46; }
+.lens-abtn--ghost:hover { background: rgba(0, 0, 0, 0.04); }
+.lens-abtn--primary { background: var(--lens-accent); color: #fff; }
+.lens-abtn--primary:hover { background: var(--lens-accent-strong); }
+.lens-abtn:disabled { opacity: 0.55; cursor: default; }
+.lens-abtn:focus-visible { outline: 2px solid var(--lens-accent); outline-offset: 1px; }
+
+.lens-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 26px 18px;
+  text-align: center;
+}
+.lens-state__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 999px;
+}
+.lens-state__badge--ok { background: #dcfce7; color: #16a34a; }
+.lens-state__badge--err { background: #fee2e2; color: #dc2626; }
+.lens-state__title { font-size: 14px; font-weight: 600; }
+.lens-state__msg { font-size: 12.5px; color: #52525b; }
+.lens-idpill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px;
+  border-radius: 8px;
+  background: #f4f4f5;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+}
+.lens-idpill button {
+  border: 0;
+  background: transparent;
+  color: #52525b;
+  cursor: pointer;
+  display: inline-flex;
+  padding: 2px;
+  border-radius: 4px;
+}
+.lens-idpill button:hover { background: rgba(0, 0, 0, 0.06); color: #18181b; }
+
+@media (prefers-color-scheme: dark) {
+  .lens-panel { background: #1c1c1f; color: #f4f4f5; border-color: rgba(255, 255, 255, 0.1); }
+  .lens-panel__head { border-bottom-color: rgba(255, 255, 255, 0.08); }
+  .lens-panel__x { color: #a1a1aa; }
+  .lens-panel__x:hover { background: rgba(255, 255, 255, 0.08); }
+  .lens-textarea { background: #26262a; border-color: rgba(255, 255, 255, 0.14); color: #f4f4f5; }
+  .lens-context { color: #a1a1aa; }
+  .lens-includes__label { color: #a1a1aa; }
+  .lens-tgl { background: #26262a; border-color: rgba(255, 255, 255, 0.12); color: #a1a1aa; }
+  .lens-tgl.is-on { background: rgba(99, 102, 241, 0.18); border-color: rgba(99, 102, 241, 0.55); color: #c7d2fe; }
+  .lens-chip { background: #26262a; border-color: rgba(255, 255, 255, 0.08); color: #d4d4d8; }
+  .lens-chip--ok { color: #4ade80; background: rgba(34, 197, 94, 0.12); border-color: rgba(74, 222, 128, 0.22); }
+  .lens-chip--target { background: rgba(99, 102, 241, 0.16); color: #c7d2fe; }
+  .lens-abtn--ghost { border-color: rgba(255, 255, 255, 0.16); color: #d4d4d8; }
+  .lens-abtn--ghost:hover { background: rgba(255, 255, 255, 0.06); }
+  .lens-state__msg { color: #a1a1aa; }
+  .lens-idpill { background: #26262a; border-color: rgba(255, 255, 255, 0.1); }
+  .lens-idpill button { color: #a1a1aa; }
+  .lens-idpill button:hover { background: rgba(255, 255, 255, 0.08); color: #f4f4f5; }
+}
+
+/* ---------------- Floating action chips (picker / annotator) ---------------- */
+.lens-pick-chip, .lens-annotate-chips {
+  position: fixed;
+  top: calc(16px + env(safe-area-inset-top));
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: var(--lens-z);
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  max-width: calc(100vw - 24px);
+  padding: 6px 6px 6px 14px;
+  border-radius: 999px;
+  background: rgba(20, 20, 23, 0.92);
+  -webkit-backdrop-filter: blur(12px) saturate(180%);
+  backdrop-filter: blur(12px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
+  color: #f4f4f5;
+  font-size: 13px;
+  font-weight: 500;
+}
+.lens-annotate-chips { z-index: var(--lens-z); }
+
+/* Stacking inside the shadow layer: the panel, pill and floating chips always
+   sit above the annotation layer/rects and picker highlight, so marked areas
+   never paint over interactive UI. */
+.lens-panel, .lens-pill, .lens-recchip { z-index: var(--lens-z); }
+.lens-pick-chip__label, .lens-annotate-chips__label { white-space: nowrap; }
+.lens-pick-chip__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 30px;
+  padding: 0 14px;
+  border: 0;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.12);
+  color: #f4f4f5;
+  font-family: var(--lens-font);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 150ms ease;
+}
+.lens-pick-chip__btn:hover { background: rgba(255, 255, 255, 0.2); }
+.lens-pick-chip__btn--primary { background: var(--lens-accent); }
+.lens-pick-chip__btn--primary:hover { background: var(--lens-accent-strong); }
+
+/* ---------------- Recording chip ---------------- */
+.lens-rec-chip {
+  position: fixed;
+  top: calc(16px + env(safe-area-inset-top));
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: var(--lens-z);
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  max-width: calc(100vw - 24px);
+  padding: 6px 6px 6px 14px;
+  border-radius: 999px;
+  background: rgba(20, 20, 23, 0.92);
+  -webkit-backdrop-filter: blur(12px) saturate(180%);
+  backdrop-filter: blur(12px) saturate(180%);
+  border: 1px solid rgba(239, 68, 68, 0.4);
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
+  color: #f4f4f5;
+  font-size: 13px;
+  font-weight: 600;
+}
+.lens-rec-chip__dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: #ef4444;
+  animation: lens-pulse 1.2s ease-in-out infinite;
+}
+@keyframes lens-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.4; transform: scale(0.7); }
+}
+.lens-rec-chip__time { font-variant-numeric: tabular-nums; min-width: 34px; }
+.lens-rec-chip__stop {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 30px;
+  padding: 0 14px;
+  border: 0;
+  border-radius: 999px;
+  background: #ef4444;
+  color: #fff;
+  font-family: var(--lens-font);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 150ms ease;
+}
+.lens-rec-chip__stop:hover { background: #dc2626; }
+.lens-chip--rec { gap: 6px; }
+
+/* ---------------- Coarse pointers (touch): \u226544px targets ---------------- */
+@media (pointer: coarse) {
+  .lens-btn { height: 44px; padding: 0 16px; }
+  .lens-btn--icon { width: 44px; }
+  .lens-pill__dot { width: 40px; height: 40px; }
+  .lens-abtn { height: 44px; }
+  .lens-tgl { min-height: 40px; padding: 4px 14px; }
+  .lens-panel__x { width: 44px; height: 44px; }
+  .lens-chip__x { min-width: 32px; min-height: 32px; align-items: center; justify-content: center; }
+  .lens-pick-chip__btn, .lens-rec-chip__stop { height: 40px; padding: 0 18px; }
+}
+
+/* ---------------- Bottom sheet under 640px ---------------- */
+@media (max-width: 640px) {
+  .lens-panel {
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    max-width: 100%;
+    max-height: 85dvh;
+    border-radius: 16px 16px 0 0;
+    overflow-y: auto;
+    padding-bottom: env(safe-area-inset-bottom);
+    animation: lens-sheet-in 180ms ease;
+  }
+  @keyframes lens-sheet-in {
+    from { opacity: 0; transform: translateY(16px); }
+    to { opacity: 1; transform: none; }
+  }
+  .lens-textarea { font-size: 16px; }
+}
+`
+);
+var ROOT_ID = LENS_OVERLAY_HOST_ID;
+var RECORDING_MAX_MS = 12e4;
+var Overlay = class {
+  constructor(deps) {
+    this.deps = deps;
+    this.host = el("div", { attrs: { id: ROOT_ID } });
+    this.shadow = this.host.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = OVERLAY_CSS;
+    this.shadow.append(style);
+    this.layer = el("div", { class: "lens-layer" });
+    this.shadow.append(this.layer);
+    this.picker = new ElementPicker(this.layer, this.host);
+    this.annotator = new Annotator(this.layer);
+    this.layer.append(this.buildPill());
+    document.documentElement.append(this.host);
+    window.addEventListener("keydown", this.onGlobalKey, true);
+  }
+  deps;
+  host;
+  shadow;
+  layer;
+  pickBtn;
+  picker;
+  annotator;
+  panel = null;
+  target = null;
+  destroyed = false;
+  recordingChip = null;
+  recordingTimerEl = null;
+  recordingInterval = null;
+  recordingStartTs = 0;
+  /** Duration of a retained (stopped, not yet submitted/discarded) recording. */
+  recordedDurationMs = null;
+  buildPill() {
+    this.pickBtn = el("button", {
+      class: "lens-btn lens-btn--icon",
+      ariaLabel: "Pick an element",
+      title: "Pick an element",
+      html: iconCrosshair,
+      on: { click: () => this.togglePicker() }
+    });
+    return el("div", { class: "lens-pill", attrs: { role: "toolbar", "aria-label": "Lens" } }, [
+      el("span", { class: "lens-pill__dot", html: iconEye }),
+      el("button", {
+        class: "lens-btn",
+        text: "Report issue",
+        on: { click: () => this.open() }
+      }),
+      this.pickBtn,
+      el("span", { class: "lens-pill__sep" }),
+      el("button", {
+        class: "lens-btn lens-btn--icon",
+        ariaLabel: "Close Lens",
+        title: "Close Lens",
+        html: iconClose,
+        on: { click: () => this.dismiss() }
+      })
+    ]);
+  }
+  open() {
+    if (this.destroyed) return;
+    this.stopPicker();
+    if (!this.panel) {
+      this.panel = new Panel({
+        getStats: () => this.deps.snapshotStats(),
+        getTarget: () => this.target,
+        getAnnotationCount: () => this.annotator.count,
+        getRecording: () => this.recordedDurationMs !== null ? { durationMs: this.recordedDurationMs } : null,
+        onRemoveTarget: () => {
+          this.target = null;
+          this.panel?.refresh();
+        },
+        onMarkArea: () => this.startAnnotating(),
+        onRecordSteps: () => this.startRecording(),
+        onDiscardRecording: () => this.discardRecording(),
+        onClose: () => this.close(),
+        onSubmit: (comment, include) => this.submit(comment, include)
+      });
+      this.layer.append(this.panel.root);
+    }
+    this.panel.root.style.display = "";
+    this.panel.refresh();
+    this.panel.focus();
+  }
+  close() {
+    if (this.panel) {
+      this.panel.destroy();
+      this.panel = null;
+    }
+  }
+  toggle() {
+    if (this.panel && this.panel.root.style.display !== "none") this.close();
+    else this.open();
+  }
+  togglePicker() {
+    if (this.picker.isActive) {
+      this.stopPicker();
+      return;
+    }
+    this.close();
+    this.pickBtn.classList.add("is-active");
+    this.picker.start(
+      (elem) => {
+        this.pickBtn.classList.remove("is-active");
+        this.target = this.deps.client.captureTarget(elem);
+        this.open();
+      },
+      () => this.pickBtn.classList.remove("is-active")
+    );
+  }
+  stopPicker() {
+    if (this.picker.isActive) this.picker.stop();
+    this.pickBtn.classList.remove("is-active");
+  }
+  startAnnotating() {
+    if (this.panel) this.panel.root.style.display = "none";
+    this.annotator.start(() => {
+      if (this.panel) {
+        this.panel.root.style.display = "";
+        this.panel.refresh();
+      }
+    });
+  }
+  startRecording() {
+    if (this.deps.client.isRecording()) return;
+    this.recordedDurationMs = null;
+    this.deps.client.startRecording();
+    this.recordingStartTs = Date.now();
+    if (this.panel) this.panel.root.style.display = "none";
+    this.showRecordingChip();
+  }
+  stopRecording() {
+    const result = this.deps.client.stopRecording();
+    this.recordedDurationMs = result?.durationMs ?? Date.now() - this.recordingStartTs;
+    this.hideRecordingChip();
+    if (this.panel) {
+      this.panel.root.style.display = "";
+      this.panel.refresh();
+    } else {
+      this.open();
+    }
+  }
+  discardRecording() {
+    this.deps.client.discardRecording();
+    this.recordedDurationMs = null;
+    this.panel?.refresh();
+  }
+  showRecordingChip() {
+    this.recordingTimerEl = el("span", { class: "lens-rec-chip__time", text: "0:00" });
+    this.recordingChip = el("div", { class: "lens-rec-chip" }, [
+      el("span", { class: "lens-rec-chip__dot" }),
+      el("span", { class: "lens-rec-chip__label", text: "Recording" }),
+      this.recordingTimerEl,
+      el("button", {
+        class: "lens-rec-chip__stop",
+        html: iconStop + "<span>Stop</span>",
+        on: { click: () => this.stopRecording() }
+      })
+    ]);
+    this.layer.append(this.recordingChip);
+    this.recordingInterval = setInterval(() => this.tickRecording(), 250);
+  }
+  tickRecording() {
+    const elapsed = Date.now() - this.recordingStartTs;
+    if (this.recordingTimerEl) this.recordingTimerEl.textContent = formatDuration(elapsed);
+    if (elapsed >= RECORDING_MAX_MS) this.stopRecording();
+  }
+  hideRecordingChip() {
+    if (this.recordingInterval) {
+      clearInterval(this.recordingInterval);
+      this.recordingInterval = null;
+    }
+    if (this.recordingChip) {
+      this.recordingChip.remove();
+      this.recordingChip = null;
+    }
+    this.recordingTimerEl = null;
+  }
+  async submit(comment, include) {
+    const annotations = this.annotator.list();
+    const result = await this.deps.client.submitReport({
+      comment: comment || void 0,
+      annotations,
+      target: this.target ?? void 0,
+      excludeFromScreenshot: this.host,
+      include
+    });
+    this.target = null;
+    this.annotator.clear();
+    this.recordedDurationMs = null;
+    this.deps.client.discardRecording();
+    return result;
+  }
+  dismiss() {
+    this.deps.onDismiss();
+    this.destroy();
+  }
+  onGlobalKey = (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.shiftKey && (e.key === "l" || e.key === "L")) {
+      e.preventDefault();
+      this.toggle();
+    }
+  };
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    window.removeEventListener("keydown", this.onGlobalKey, true);
+    this.stopPicker();
+    if (this.deps.client.isRecording()) this.deps.client.stopRecording();
+    this.hideRecordingChip();
+    if (this.annotator.isActive) this.annotator.exit();
+    this.annotator.clear();
+    this.close();
+    this.host.remove();
+  }
+};
+function mountOverlay(deps) {
+  return new Overlay(deps);
+}
+function processQueue() {
+  const result = { open: false };
+  if (typeof window === "undefined") return result;
+  const queue = window.Lens?.q;
+  if (!queue) return result;
+  for (const entry of queue) {
+    const args = Array.from(entry);
+    const command = args[0];
+    const payload = args[1];
+    switch (command) {
+      case "init":
+        if (typeof payload === "string" || payload && typeof payload === "object") {
+          result.init = payload;
+        }
+        break;
+      case "identify":
+        if (payload && typeof payload === "object") {
+          result.identify = payload;
+        }
+        break;
+      case "app":
+        if (payload && typeof payload === "object") {
+          result.app = payload;
+        }
+        break;
+      case "open":
+        result.open = true;
+        break;
+    }
+  }
+  if (window.Lens) window.Lens.q = [];
+  return result;
+}
+function installGlobal(browser) {
+  if (typeof window === "undefined") return;
+  const dispatch = (...args) => {
+    if (!browser) return;
+    const command = args[0];
+    const payload = args[1];
+    switch (command) {
+      case "identify":
+        if (payload && typeof payload === "object") {
+          browser.client.setApp({ user: payload });
+        }
+        break;
+      case "app":
+        if (payload && typeof payload === "object") {
+          browser.client.setApp(payload);
+        }
+        break;
+      case "open":
+        browser.open();
+        break;
+      case "init":
+        break;
+    }
+  };
+  window.Lens = dispatch;
+}
+function applyContext(browser, commands) {
+  if (commands.identify) browser.client.setApp({ user: commands.identify });
+  if (commands.app) browser.client.setApp(commands.app);
+  if (commands.open) browser.open();
+}
+var DEFAULT_CDN_URL = "https://cdn.lens.dev/browser.js";
+function loaderSnippet(options) {
+  const cdn = options.cdnUrl ?? DEFAULT_CDN_URL;
+  return `<script>
+(function(w,d,s,u,i){
+  w.Lens=w.Lens||function(){(w.Lens.q=w.Lens.q||[]).push(arguments)};
+  w.Lens('init', i);
+  var g=d.createElement(s); g.async=1; g.src=u;
+  var f=d.getElementsByTagName(s)[0]; f.parentNode.insertBefore(g,f);
+})(window,document,'script','${cdn}','${options.accessId}');
+</script>`;
+}
+var LOADER_SNIPPET = loaderSnippet({ accessId: "lai_YOUR_ACCESS_ID" });
+function hasDom() {
+  return typeof window !== "undefined" && typeof document !== "undefined";
+}
+function scriptAccessId() {
+  const tag = document.querySelector("script[data-lens-id]");
+  return tag?.getAttribute("data-lens-id") ?? void 0;
+}
+function resolveConfig(options, commands) {
+  const { accessId: optAccessId, paramName: _p, force: _f, ...rest } = options;
+  let queuedConfig = {};
+  let queuedAccessId;
+  if (typeof commands.init === "string") {
+    queuedAccessId = commands.init;
+  } else if (commands.init && typeof commands.init === "object") {
+    queuedConfig = commands.init;
+    if (typeof commands.init.accessId === "string") queuedAccessId = commands.init.accessId;
+  }
+  const accessId = optAccessId ?? scriptAccessId() ?? queuedAccessId;
+  if (!accessId) return null;
+  const config = { ...queuedConfig, ...rest, accessId };
+  return { accessId, config };
+}
+function boot(options = {}) {
+  if (!hasDom()) return null;
+  const commands = processQueue();
+  const paramName = options.paramName ?? DEFAULT_PARAM_NAME;
+  const active = options.force === true || evaluateGate(paramName);
+  if (!active) {
+    installGlobal(null);
+    return null;
+  }
+  const resolved = resolveConfig(options, commands);
+  if (!resolved) {
+    if (options.debug) console.warn("[lens] no accessId \u2014 overlay not booted");
+    installGlobal(null);
+    return null;
+  }
+  const client = new LensClient(resolved.config);
+  client.start();
+  const snapshotStats = () => ({
+    url: window.location.href,
+    route: currentRoute(),
+    browser: detectBrowser(),
+    os: detectOs(),
+    viewport: viewport(),
+    replay: resolved.config.replay !== false,
+    // Console / network / error counts are not exposed by the public core API.
+    console: null,
+    network: null,
+    errors: null
+  });
+  let overlay = null;
+  const browser = {
+    client,
+    open: () => overlay?.open(),
+    close: () => overlay?.close(),
+    destroy: () => {
+      overlay?.destroy();
+      overlay = null;
+      client.stop();
+      clearGate();
+      installGlobal(null);
+    }
+  };
+  overlay = mountOverlay({
+    client,
+    snapshotStats,
+    onDismiss: () => {
+      client.stop();
+      clearGate();
+      installGlobal(null);
+    }
+  });
+  installGlobal(browser);
+  applyContext(browser, commands);
+  return browser;
+}
+function autoBoot() {
+  if (!hasDom()) return null;
+  const hasQueuedInit = Array.from(window.Lens?.q ?? []).some(
+    (entry) => entry[0] === "init"
+  );
+  const hasScriptId = !!document.querySelector("script[data-lens-id]");
+  if (!hasQueuedInit && !hasScriptId) return null;
+  if (!isGateActive()) return null;
+  return boot();
+}
+if (hasDom()) autoBoot();
+
+export {
+  isGateActive,
+  processQueue,
+  installGlobal,
+  DEFAULT_CDN_URL,
+  loaderSnippet,
+  LOADER_SNIPPET,
+  boot,
+  autoBoot
+};
+//# sourceMappingURL=chunk-DU7HNRF4.js.map