makethisbetter 1.1.1 → 1.1.2

package/dist/makethisbetter.esm.js

@@ -410,12 +410,12 @@ class wt {
             <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
           </svg>
         </div>
-        <button class="mtb-clarify-skip">${L(t.clarify.skip)}</button>
+        <button class="mtb-clarify-skip">${T(t.clarify.skip)}</button>
       </div>
       <div class="mtb-clarify-messages"></div>
       <div class="mtb-clarify-footer">
-        <input class="mtb-clarify-input" type="text" placeholder="${L(t.clarify.placeholder)}" />
-        <button class="mtb-clarify-send" disabled>${L(t.clarify.send)}</button>
+        <input class="mtb-clarify-input" type="text" placeholder="${T(t.clarify.placeholder)}" />
+        <button class="mtb-clarify-send" disabled>${T(t.clarify.send)}</button>
       </div>
     `;
   }
@@ -495,7 +495,7 @@ class wt {
     this.destroyed = !0, this.stopPolling(), this.doneTimer !== null && (clearTimeout(this.doneTimer), this.doneTimer = null), this.el.remove();
   }
 }
-function L(i) {
+function T(i) {
   return i.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
 }
 const kt = 5e3;
@@ -563,7 +563,7 @@ function Y(i, t = {}) {
   const e = t.width || Ct(i), s = t.height || Mt(i);
   return { width: e, height: s };
 }
-function Tt() {
+function Lt() {
   let i, t;
   try {
     t = process;
@@ -573,7 +573,7 @@ function Tt() {
   return e && (i = parseInt(e, 10), Number.isNaN(i) && (i = 1)), i || window.devicePixelRatio || 1;
 }
 const d = 16384;
-function Lt(i) {
+function Tt(i) {
   (i.width > d || i.height > d) && (i.width > d && i.height > d ? i.width > i.height ? (i.height *= d / i.width, i.width = d) : (i.width *= d / i.height, i.height = d) : i.width > d ? (i.height *= d / i.width, i.width = d) : (i.width *= d / i.height, i.height = d));
 }
 function C(i) {
@@ -589,7 +589,7 @@ function C(i) {
 async function At(i) {
   return Promise.resolve().then(() => new XMLSerializer().serializeToString(i)).then(encodeURIComponent).then((t) => `data:image/svg+xml;charset=utf-8,${t}`);
 }
-async function Pt(i, t, e) {
+async function Dt(i, t, e) {
   const s = "http://www.w3.org/2000/svg", r = document.createElementNS(s, "svg"), n = document.createElementNS(s, "foreignObject");
   return r.setAttribute("width", `${t}`), r.setAttribute("height", `${e}`), r.setAttribute("viewBox", `0 0 ${t} ${e}`), n.setAttribute("width", "100%"), n.setAttribute("height", "100%"), n.setAttribute("x", "0"), n.setAttribute("y", "0"), n.setAttribute("externalResourcesRequired", "true"), r.appendChild(n), n.appendChild(i), At(r);
 }
@@ -599,18 +599,18 @@ const h = (i, t) => {
   const e = Object.getPrototypeOf(i);
   return e === null ? !1 : e.constructor.name === t.name || h(e, t);
 };
-function Rt(i) {
+function Pt(i) {
   const t = i.getPropertyValue("content");
   return `${i.cssText} content: '${t.replace(/'|"/g, "")}';`;
 }
-function Dt(i, t) {
+function Rt(i, t) {
   return V(t).map((e) => {
     const s = i.getPropertyValue(e), r = i.getPropertyPriority(e);
     return `${e}: ${s}${r ? " !important" : ""};`;
   }).join(" ");
 }
 function _t(i, t, e, s) {
-  const r = `.${i}:${t}`, n = e.cssText ? Rt(e) : Dt(e, s);
+  const r = `.${i}:${t}`, n = e.cssText ? Pt(e) : Rt(e, s);
   return document.createTextNode(`${r}{${n}}`);
 }
 function I(i, t, e, s) {
@@ -646,14 +646,14 @@ function It(i) {
   const t = /\.([^./]*?)$/g.exec(i);
   return t ? t[1] : "";
 }
-function D(i) {
+function R(i) {
   const t = It(i).toLowerCase();
   return $t[t] || "";
 }
 function Ot(i) {
   return i.split(/,/)[1];
 }
-function P(i) {
+function D(i) {
   return i.search(/^(data:)/) !== -1;
 }
 function Ft(i, t) {
@@ -707,7 +707,7 @@ async function zt(i, t) {
     const a = n.toDataURL();
     return C(a);
   }
-  const e = i.poster, s = D(e), r = await _(e, s, t);
+  const e = i.poster, s = R(e), r = await _(e, s, t);
   return C(r);
 }
 async function Bt(i, t) {
@@ -788,11 +788,11 @@ function Zt(i) {
 }
 function te(i) {
   const t = [];
-  return i.replace(K, (e, s, r) => (t.push(r), e)), t.filter((e) => !P(e));
+  return i.replace(K, (e, s, r) => (t.push(r), e)), t.filter((e) => !D(e));
 }
 async function ee(i, t, e, s, r) {
   try {
-    const n = e ? Et(t, e) : t, o = D(t);
+    const n = e ? Et(t, e) : t, o = R(t);
     let a;
     return r || (a = await _(n, o, s)), i.replace(Zt(t), `$1${a}$3`);
   } catch {
@@ -833,9 +833,9 @@ async function se(i, t) {
 }
 async function re(i, t) {
   const e = h(i, HTMLImageElement);
-  if (!(e && !P(i.src)) && !(h(i, SVGImageElement) && !P(i.href.baseVal)))
+  if (!(e && !D(i.src)) && !(h(i, SVGImageElement) && !D(i.href.baseVal)))
     return;
-  const s = e ? i.src : i.href.baseVal, r = await _(s, D(s), t);
+  const s = e ? i.src : i.href.baseVal, r = await _(s, R(s), t);
   await new Promise((n, o) => {
     i.onload = n, i.onerror = t.onImageErrorHandler ? (...l) => {
       try {
@@ -913,12 +913,12 @@ async function ae(i, t) {
         p(r.cssRules || []).forEach((n, o) => {
           if (n.type === CSSRule.IMPORT_RULE) {
             let a = o + 1;
-            const l = n.href, c = U(l).then((u) => z(u, t)).then((u) => B(u).forEach((T) => {
+            const l = n.href, c = U(l).then((u) => z(u, t)).then((u) => B(u).forEach((L) => {
               try {
-                r.insertRule(T, T.startsWith("@import") ? a += 1 : r.cssRules.length);
+                r.insertRule(L, L.startsWith("@import") ? a += 1 : r.cssRules.length);
               } catch (it) {
                 console.error("Error inserting rule from remote css", {
-                  rule: T,
+                  rule: L,
                   error: it
                 });
               }
@@ -987,11 +987,11 @@ async function ue(i, t) {
 }
 async function pe(i, t = {}) {
   const { width: e, height: s } = Y(i, t), r = await M(i, t, !0);
-  return await ue(r, t), await Z(r, t), oe(r, t), await Pt(r, e, s);
+  return await ue(r, t), await Z(r, t), oe(r, t), await Dt(r, e, s);
 }
 async function fe(i, t = {}) {
-  const { width: e, height: s } = Y(i, t), r = await pe(i, t), n = await C(r), o = document.createElement("canvas"), a = o.getContext("2d"), l = t.pixelRatio || Tt(), c = t.canvasWidth || e, u = t.canvasHeight || s;
-  return o.width = c * l, o.height = u * l, t.skipAutoScale || Lt(o), o.style.width = `${c}`, o.style.height = `${u}`, t.backgroundColor && (a.fillStyle = t.backgroundColor, a.fillRect(0, 0, o.width, o.height)), a.drawImage(n, 0, 0, o.width, o.height), o;
+  const { width: e, height: s } = Y(i, t), r = await pe(i, t), n = await C(r), o = document.createElement("canvas"), a = o.getContext("2d"), l = t.pixelRatio || Lt(), c = t.canvasWidth || e, u = t.canvasHeight || s;
+  return o.width = c * l, o.height = u * l, t.skipAutoScale || Tt(o), o.style.width = `${c}`, o.style.height = `${u}`, t.backgroundColor && (a.fillStyle = t.backgroundColor, a.fillRect(0, 0, o.width, o.height)), a.drawImage(n, 0, 0, o.width, o.height), o;
 }
 async function me(i, t = {}) {
   return (await fe(i, t)).toDataURL();
@@ -1095,7 +1095,7 @@ class Ee {
     this.unsubscribe?.(), this.unsubscribe = null;
   }
 }
-const Se = 3, Ce = 1e3, Me = 3, Te = 5e3, Le = 500, Ae = 500, Pe = 300, Re = /* @__PURE__ */ new Set([
+const Se = 3, Ce = 1e3, Me = 3, Le = 5e3, Te = 500, Ae = 500, De = 300, Pe = /* @__PURE__ */ new Set([
   "A",
   "BUTTON",
   "INPUT",
@@ -1104,7 +1104,7 @@ const Se = 3, Ce = 1e3, Me = 3, Te = 5e3, Le = 500, Ae = 500, Pe = 300, Re = /*
   "LABEL",
   "SUMMARY",
   "DETAILS"
-]), De = /* @__PURE__ */ new Set([
+]), Re = /* @__PURE__ */ new Set([
   "button",
   "link",
   "checkbox",
@@ -1127,7 +1127,7 @@ const Se = 3, Ce = 1e3, Me = 3, Te = 5e3, Le = 500, Ae = 500, Pe = 300, Re = /*
   "internal server error"
 ], v = class v {
   constructor(t) {
-    this.clickHistory = [], this.unsubscribeErrors = null, this.active = !1, this.errorCount = 0, this.deadClickCount = 0, this.cooldownUntil = 0, this.navTimestamps = [], this.boundPopstateHandler = null, this.originalPushState = null, this.originalReplaceState = null, this.installedPushState = null, this.installedReplaceState = null, this.boundSubmitHandler = null, this.boundInvalidHandler = null, this.errorPageUrls = /* @__PURE__ */ new Set(), this.pendingObservers = [], this.onFrustration = t, this.boundClickHandler = (e) => this.handleClick(e);
+    this.clickHistory = [], this.unsubscribeErrors = null, this.active = !1, this.errorCount = 0, this.deadClickCount = 0, this.cooldownUntil = 0, this.navTimestamps = [], this.boundPopstateHandler = null, this.originalPushState = null, this.originalReplaceState = null, this.installedPushState = null, this.installedReplaceState = null, this.boundSubmitHandler = null, this.boundInvalidHandler = null, this.errorPageUrls = /* @__PURE__ */ new Set(), this.domObserver = null, this.pendingDomChecks = 0, this.lastMutationAt = -1, this.onFrustration = t, this.boundClickHandler = (e) => this.handleClick(e);
   }
   start() {
     this.active || (this.active = !0, document.addEventListener("click", this.boundClickHandler, !0), this.unsubscribeErrors = et.subscribe((t) => {
@@ -1135,11 +1135,7 @@ const Se = 3, Ce = 1e3, Me = 3, Te = 5e3, Le = 500, Ae = 500, Pe = 300, Re = /*
     }), this.startNavigationTracking(), this.startFormTracking(), this.checkErrorPage());
   }
   stop() {
-    if (this.active) {
-      this.active = !1, document.removeEventListener("click", this.boundClickHandler, !0), this.unsubscribeErrors?.(), this.unsubscribeErrors = null, this.clickHistory = [], this.stopNavigationTracking(), this.stopFormTracking(), this.errorPageUrls.clear();
-      for (const t of this.pendingObservers) t.disconnect();
-      this.pendingObservers = [];
-    }
+    this.active && (this.active = !1, document.removeEventListener("click", this.boundClickHandler, !0), this.unsubscribeErrors?.(), this.unsubscribeErrors = null, this.clickHistory = [], this.stopNavigationTracking(), this.stopFormTracking(), this.errorPageUrls.clear(), this.disconnectDomObserver());
   }
   startNavigationTracking() {
     this.boundPopstateHandler = () => this.handleNavigation(), window.addEventListener("popstate", this.boundPopstateHandler), this.originalPushState = history.pushState.bind(history), this.originalReplaceState = history.replaceState.bind(history);
@@ -1182,13 +1178,13 @@ const Se = 3, Ce = 1e3, Me = 3, Te = 5e3, Le = 500, Ae = 500, Pe = 300, Re = /*
   handleNavigation() {
     const t = Date.now();
     this.navTimestamps.push(t);
-    const e = t - Te;
+    const e = t - Le;
     this.navTimestamps = this.navTimestamps.filter((s) => s > e), this.navTimestamps.length >= Me && (this.navTimestamps = [], this.emitIfReady({
       signal: "rapid_navigation",
       timestamp: t
     })), setTimeout(() => {
       this.active && this.checkErrorPage();
-    }, Pe);
+    }, De);
   }
   handleFormSubmit(t) {
     const e = t.target;
@@ -1198,7 +1194,7 @@ const Se = 3, Ce = 1e3, Me = 3, Te = 5e3, Le = 500, Ae = 500, Pe = 300, Re = /*
         target: y(e),
         timestamp: Date.now()
       });
-    }, Le));
+    }, Te));
   }
   handleFormInvalid(t) {
     const e = t.target;
@@ -1237,26 +1233,32 @@ const Se = 3, Ce = 1e3, Me = 3, Te = 5e3, Le = 500, Ae = 500, Pe = 300, Re = /*
       }
     }
   }
+  // One shared observer for all in-flight dead-click checks, connected only
+  // while at least one check is pending — a full-page observer per click was
+  // too heavy on mutation-busy pages.
   checkDeadClickDom(t, e) {
-    if (!this.looksInteractive(t)) return;
-    let s = !1;
-    const r = new MutationObserver(() => {
-      s = !0;
-    });
-    r.observe(document.body, {
-      childList: !0,
-      subtree: !0,
-      attributes: !0,
-      characterData: !0
-    }), this.pendingObservers.push(r), setTimeout(() => {
-      r.disconnect();
-      const n = this.pendingObservers.indexOf(r);
-      n >= 0 && this.pendingObservers.splice(n, 1), !s && this.active && this.emitIfReady({
+    this.looksInteractive(t) && (this.pendingDomChecks++, this.ensureDomObserver(), setTimeout(() => {
+      this.pendingDomChecks--;
+      const s = this.lastMutationAt >= e;
+      this.pendingDomChecks === 0 && this.disconnectDomObserver(), !s && this.active && this.emitIfReady({
         signal: "dead_click_dom",
         target: y(t),
         timestamp: e
       });
-    }, Ae);
+    }, Ae));
+  }
+  ensureDomObserver() {
+    this.domObserver || (this.domObserver = new MutationObserver(() => {
+      this.lastMutationAt = Date.now();
+    }), this.domObserver.observe(document.body, {
+      childList: !0,
+      subtree: !0,
+      attributes: !0,
+      characterData: !0
+    }));
+  }
+  disconnectDomObserver() {
+    this.domObserver?.disconnect(), this.domObserver = null;
   }
   looksInteractive(t) {
     if (window.getComputedStyle(t).cursor === "pointer") return !0;
@@ -1268,9 +1270,9 @@ const Se = 3, Ce = 1e3, Me = 3, Te = 5e3, Le = 500, Ae = 500, Pe = 300, Re = /*
     return !1;
   }
   isInteractive(t) {
-    if (Re.has(t.tagName)) return !0;
+    if (Pe.has(t.tagName)) return !0;
     const e = t.getAttribute("role");
-    return !!(e && De.has(e) || t.hasAttribute("onclick") || t.hasAttribute("tabindex") || t.contentEditable === "true" || window.getComputedStyle(t).cursor === "pointer" || t.closest('a, button, [role="button"], [role="link"], label'));
+    return !!(e && Re.has(e) || t.hasAttribute("onclick") || t.hasAttribute("tabindex") || t.contentEditable === "true" || window.getComputedStyle(t).cursor === "pointer" || t.closest('a, button, [role="button"], [role="link"], label'));
   }
   isWidgetElement(t) {
     const e = document.getElementById("mtb-widget-host");
@@ -1285,7 +1287,7 @@ const Se = 3, Ce = 1e3, Me = 3, Te = 5e3, Le = 500, Ae = 500, Pe = 300, Re = /*
   }
 };
 v.COOLDOWN_MS = 6e4;
-let R = v;
+let P = v;
 function y(i) {
   const t = i.tagName.toLowerCase(), e = i.id ? `#${i.id}` : "", s = i.className && typeof i.className == "string" ? "." + i.className.trim().split(/\s+/).slice(0, 2).join(".") : "", r = i.textContent?.trim().slice(0, 30) ?? "";
   return `<${t}${e}${s}>${r ? ` "${r}"` : ""}`;
@@ -1328,7 +1330,7 @@ class Oe {
     }
     e && s.append("feedback[screenshot]", e, "screenshot.png");
     const r = await this.authHeaders();
-    return (await this.fetchWithRetry(`${this.apiUrl}/widget/feedbacks`, {
+    return r["X-Idempotency-Key"] = Fe(), (await this.fetchWithRetry(`${this.apiUrl}/widget/feedbacks`, {
       method: "POST",
       headers: r,
       body: s
@@ -1369,7 +1371,10 @@ class Oe {
 function W(i) {
   return i <= 0 ? Promise.resolve() : new Promise((t) => setTimeout(t, i));
 }
-function Fe(i, t, e, s, r, n) {
+function Fe() {
+  return typeof crypto < "u" && typeof crypto.randomUUID == "function" ? crypto.randomUUID() : `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 12)}`;
+}
+function je(i, t, e, s, r, n) {
   return {
     description: i,
     ...t,
@@ -1387,7 +1392,7 @@ function Fe(i, t, e, s, r, n) {
     recording_duration: n?.duration
   };
 }
-const je = {
+const Ue = {
   tab: "Feedback",
   toolbar: {
     markup: "Mark up",
@@ -1440,7 +1445,7 @@ const je = {
     send: "Send",
     skip: "Skip"
   }
-}, Ue = {
+}, ze = {
   tab: "反馈",
   toolbar: {
     markup: "标注",
@@ -1493,7 +1498,7 @@ const je = {
     send: "发送",
     skip: "跳过"
   }
-}, ze = {
+}, Be = {
   tab: "フィードバック",
   toolbar: {
     markup: "マークアップ",
@@ -1546,7 +1551,7 @@ const je = {
     send: "送信",
     skip: "スキップ"
   }
-}, Be = {
+}, qe = {
   tab: "피드백",
   toolbar: {
     markup: "마크업",
@@ -1599,7 +1604,7 @@ const je = {
     send: "보내기",
     skip: "건너뛰기"
   }
-}, qe = {
+}, We = {
   tab: "Comentarios",
   toolbar: {
     markup: "Anotar",
@@ -1652,7 +1657,7 @@ const je = {
     send: "Enviar",
     skip: "Omitir"
   }
-}, We = {
+}, Ne = {
   tab: "Avis",
   toolbar: {
     markup: "Annoter",
@@ -1705,7 +1710,7 @@ const je = {
     send: "Envoyer",
     skip: "Passer"
   }
-}, Ne = {
+}, Ve = {
   tab: "Feedback",
   toolbar: {
     markup: "Markieren",
@@ -1759,28 +1764,28 @@ const je = {
     skip: "Überspringen"
   }
 }, k = {
-  en: je,
-  "zh-CN": Ue,
-  ja: ze,
-  ko: Be,
-  es: qe,
-  fr: We,
-  de: Ne
+  en: Ue,
+  "zh-CN": ze,
+  ja: Be,
+  ko: qe,
+  es: We,
+  fr: Ne,
+  de: Ve
 };
-function Ve(i) {
+function Ye(i) {
   if (k[i]) return k[i];
   const t = i.split("-")[0];
   return k[t] ? k[t] : k.en;
 }
-const Ye = 60, Xe = "https://cdn.jsdelivr.net/npm/rrweb@2/dist/rrweb.min.js";
+const Xe = 60, Ge = "https://cdn.jsdelivr.net/npm/rrweb@2.1.0/dist/rrweb.min.js", Ke = "sha384-6qZKf9GE/E2uhA8IdLwXsQiLN/jVx8mhA0i04rQ1aHLrs2URo3ivHlSbaccG59zt";
 let E = null;
-function Ge() {
-  return E || (E = Ke().catch(() => Je()), E);
+function Je() {
+  return E || (E = Qe().catch(() => Ze()), E);
 }
-async function Ke() {
+async function Qe() {
   return (await import("rrweb")).record;
 }
-function Je() {
+function Ze() {
   return new Promise((i, t) => {
     const e = globalThis;
     if (e.rrweb?.record) {
@@ -1788,18 +1793,18 @@ function Je() {
       return;
     }
     const s = document.createElement("script");
-    s.src = Xe, s.onload = () => {
+    s.src = Ge, s.integrity = Ke, s.crossOrigin = "anonymous", s.onload = () => {
       const r = globalThis;
       r.rrweb?.record ? i(r.rrweb.record) : t(new Error("rrweb global not found after script load"));
     }, s.onerror = () => t(new Error("Failed to load rrweb from CDN")), document.head.appendChild(s);
   });
 }
-class Qe {
+class ti {
   constructor(t, e) {
     this.events = [], this.stopFn = null, this.startedAt = 0, this.timer = null, this.clickHandler = null, this.stopped = !1, this.shadow = t, this.onMaxReached = e;
   }
   async start() {
-    const t = await Ge();
+    const t = await Je();
     this.startedAt = Date.now(), this.stopped = !1, this.stopFn = t({
       emit: (e) => {
         this.stopped || this.events.push(e);
@@ -1812,7 +1817,7 @@ class Qe {
       });
     }, document.addEventListener("click", this.clickHandler, !0), this.timer = setTimeout(() => {
       this.onMaxReached?.();
-    }, Ye * 1e3);
+    }, Xe * 1e3);
   }
   stop() {
     return this.stopped = !0, this.stopFn?.(), this.stopFn = null, this.cleanupTimer(), this.cleanupClickHandler(), {
@@ -1837,7 +1842,7 @@ class Qe {
     s.style.left = `${t}px`, s.style.top = `${e}px`, this.shadow.append(s), s.addEventListener("animationend", () => s.remove());
   }
 }
-class Ze {
+class ei {
   constructor(t, e, s, r) {
     this.intervalId = null, this.getDuration = s, this.el = t.el("div", "mtb-record-bar"), this.el.innerHTML = `
       <span class="mtb-record-dot"></span>
@@ -1853,12 +1858,12 @@ class Ze {
     this.intervalId && (clearInterval(this.intervalId), this.intervalId = null), this.el.remove();
   }
 }
-class ti {
+class ii {
   constructor() {
     this.session = null, this.bar = null, this.result = null;
   }
   async start(t, e, s) {
-    this.session = new Qe(t, s), this.bar = new Ze(
+    this.session = new ti(t, s), this.bar = new ei(
       t,
       e,
       () => this.session?.getDuration() ?? 0,
@@ -1880,7 +1885,7 @@ class ti {
 }
 class N {
   constructor(t) {
-    this.tab = null, this.pet = null, this.toolbar = null, this.session = null, this.popup = null, this.clarify = null, this.success = null, this.frustrationPrompt = null, this.frustrationDetector = null, this.mode = "idle", this.currentAnnotation = null, this.recordingManager = null, this.config = t, this.messages = Ve(t.locale ?? "en"), this.apiClient = new Oe(t.projectKey, t.apiUrl, void 0, t.userToken, t.userTokenFn), this.consoleCollector = new Ee(), this.consoleCollector.start(), this.buildUI(), t.frustrationDetection !== !1 && (this.frustrationDetector = new R(() => this.handleFrustration()), this.frustrationDetector.start());
+    this.tab = null, this.pet = null, this.toolbar = null, this.session = null, this.popup = null, this.clarify = null, this.success = null, this.frustrationPrompt = null, this.frustrationDetector = null, this.mode = "idle", this.currentAnnotation = null, this.recordingManager = null, this.config = t, this.messages = Ye(t.locale ?? "en"), this.apiClient = new Oe(t.projectKey, t.apiUrl, void 0, t.userToken, t.userTokenFn), this.consoleCollector = new Ee(), this.consoleCollector.start(), this.buildUI(), t.frustrationDetection !== !1 && (this.frustrationDetector = new P(() => this.handleFrustration()), this.frustrationDetector.start());
   }
   buildUI() {
     this.shadow = new rt(this.config.theme ?? "auto"), (this.config.entryMode ?? "button") === "pet" ? this.pet = new ot(this.shadow, this.messages, () => this.handleTabClick()) : this.tab = new nt(
@@ -1916,8 +1921,10 @@ class N {
     });
   }
   handleToolbarModeChange(t) {
-    t === "record" ? (this.mode = "recording", this.session?.destroy(), this.session = null, this.recordingManager = new ti(), this.recordingManager.start(this.shadow, this.messages, () => {
+    t === "record" ? (this.mode = "recording", this.session?.destroy(), this.session = null, this.recordingManager = new ii(), this.recordingManager.start(this.shadow, this.messages, () => {
       this.recordingManager && (this.recordingManager.stop(), this.showPopup(window.innerWidth / 2, window.innerHeight / 2, this.messages.record.timer_label));
+    }).catch(() => {
+      this.mode === "recording" && (this.toolbar?.setMode("markup"), this.handleToolbarModeChange("markup"));
     })) : (this.recordingManager?.destroy(), this.recordingManager = null, this.session || (this.session = new H(this.shadow, this.messages, (e, s) => {
       this.currentAnnotation = e, this.showPopup(e.x, e.y, s);
     })), this.mode = "annotating");
@@ -1938,7 +1945,7 @@ class N {
     const e = this.currentAnnotation, s = this.recordingManager?.getRecording() ?? void 0, [r, n] = await Promise.all([
       be(e ? [e] : []),
       Promise.resolve(_e())
-    ]), o = Fe(
+    ]), o = je(
       t,
       n,
       this.consoleCollector.getErrors(),
@@ -1981,7 +1988,7 @@ class N {
   }
 }
 let f = null;
-const ei = {
+const si = {
   init(i) {
     f && (f.destroy(), f = null), document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", () => {
       f = new N(i);
@@ -1991,8 +1998,8 @@ const ei = {
     f?.destroy(), f = null;
   }
 };
-typeof window < "u" && (window.MakeThisBetter = ei);
+typeof window < "u" && (window.MakeThisBetter = si);
 export {
-  ei as MakeThisBetter
+  si as MakeThisBetter
 };
 //# sourceMappingURL=makethisbetter.esm.js.map