@firstlook-uat/sdk 0.2.0 → 0.3.0

package/dist/firstlook.es.js

@@ -1,11 +1,11 @@
-const y = [
+const T = [
   'input[type="password"]',
   "[data-sensitive]",
   "[data-mask]",
   ".uat-mask"
 ];
-function S(a) {
-  var t, e, s, i, n, o, c, l, h, d;
+function C(a) {
+  var t, e, s, i, n, o, l, c, d, h, p;
   if (!a.endpoint)
     throw new Error("[FirstLook] 'endpoint' is required. Set your Supabase ingest-session URL.");
   return {
@@ -19,17 +19,18 @@ function S(a) {
       tapCount: ((t = a.triggers) == null ? void 0 : t.tapCount) ?? 5,
       deepLink: ((e = a.triggers) == null ? void 0 : e.deepLink) ?? !0,
       shake: ((s = a.triggers) == null ? void 0 : s.shake) ?? !0,
-      customCheck: (i = a.triggers) == null ? void 0 : i.customCheck
+      keyboard: ((i = a.triggers) == null ? void 0 : i.keyboard) ?? !0,
+      customCheck: (n = a.triggers) == null ? void 0 : n.customCheck
     },
     security: {
-      watermark: ((n = a.security) == null ? void 0 : n.watermark) ?? !0,
-      maskSelectors: ((o = a.security) == null ? void 0 : o.maskSelectors) ?? y
+      watermark: ((o = a.security) == null ? void 0 : o.watermark) ?? !0,
+      maskSelectors: ((l = a.security) == null ? void 0 : l.maskSelectors) ?? T
     },
     recording: {
       domSnapshot: ((c = a.recording) == null ? void 0 : c.domSnapshot) ?? !0,
-      voice: ((l = a.recording) == null ? void 0 : l.voice) ?? !0,
+      voice: ((d = a.recording) == null ? void 0 : d.voice) ?? !0,
       maxDuration: ((h = a.recording) == null ? void 0 : h.maxDuration) ?? 600,
-      snapshotInterval: ((d = a.recording) == null ? void 0 : d.snapshotInterval) ?? 1e3
+      snapshotInterval: ((p = a.recording) == null ? void 0 : p.snapshotInterval) ?? 1e3
     }
   };
 }
@@ -44,7 +45,7 @@ function w() {
     touchSupport: "ontouchstart" in window || navigator.maxTouchPoints > 0
   };
 }
-class T {
+class q {
   constructor() {
     this.listeners = /* @__PURE__ */ new Map();
   }
@@ -75,7 +76,7 @@ class T {
     this.listeners.clear();
   }
 }
-class C {
+class I {
   constructor(t) {
     this.events = t, this.quests = [], this.results = [], this.currentIndex = -1, this.sessionStartTime = 0, this.blocked = !1, this.pendingFeedbacks = [];
   }
@@ -112,8 +113,10 @@ class C {
       status: "COMPLETED",
       timestamp: Date.now(),
       relativeTime: Date.now() - this.sessionStartTime,
-      voiceMemoBlob: e,
+      voiceMemoBlob: e == null ? void 0 : e.voiceMemo,
       logs: t,
+      comment: e == null ? void 0 : e.comment,
+      concern: (e == null ? void 0 : e.concern) ?? !1,
       feedbacks: this.drainFeedbacks()
     };
     return this.results.push(i), this.events.emit({ type: "quest:completed", questId: s.id }), this.advance(), i;
@@ -129,6 +132,7 @@ class C {
       voiceMemoBlob: s,
       logs: t,
       comment: e,
+      concern: !1,
       feedbacks: this.drainFeedbacks()
     };
     return this.results.push(n), this.events.emit({ type: "quest:failed", questId: i.id }), i.blocking ? (this.blocked = !0, this.events.emit({ type: "quest:blocked", questId: i.id })) : this.advance(), n;
@@ -157,16 +161,19 @@ function r(a, t, e) {
       typeof i == "string" ? s.appendChild(document.createTextNode(i)) : s.appendChild(i);
   return s;
 }
-function I() {
+function M() {
   return `fl_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`;
 }
-function q(a) {
+function E(a) {
   const t = Math.floor(a / 60), e = a % 60;
   return `${t.toString().padStart(2, "0")}:${e.toString().padStart(2, "0")}`;
 }
-class M {
+class R {
   constructor(t, e) {
-    this.shadowRoot = t, this.callbacks = e, this.minimized = !1, this.timerInterval = null, this.startTime = 0, this.root = document.createElement("div"), this.root.className = "fl-quest-overlay", this.shadowRoot.appendChild(this.root);
+    this.shadowRoot = t, this.callbacks = e, this.minimized = !1, this.timerInterval = null, this.startTime = 0, this.root = document.createElement("div"), this.root.className = "fl-quest-overlay";
+    for (const s of ["click", "mousedown", "mouseup", "pointerdown", "pointerup", "touchstart", "touchend"])
+      this.root.addEventListener(s, (i) => i.stopPropagation());
+    this.shadowRoot.appendChild(this.root);
   }
   renderQuest(t, e, s) {
     this.minimized = !1, this.root.className = "fl-quest-overlay", this.root.innerHTML = "";
@@ -178,64 +185,95 @@ class M {
       this.createMinimizeBtn()
     ]);
     this.root.appendChild(n);
-    const o = r("div", { className: "fl-quest-content" }), c = r("div", { className: "fl-quest-progress" });
-    for (const f of e) {
-      const m = f === "COMPLETED" ? "fl-completed" : f === "FAILED" ? "fl-failed" : f === "ACTIVE" ? "fl-active" : "";
-      c.appendChild(r("div", { className: `fl-quest-progress-dot ${m}` }));
+    const o = r("div", { className: "fl-quest-content" }), l = r("div", { className: "fl-quest-progress" });
+    for (const p of e) {
+      const g = p === "COMPLETED" ? "fl-completed" : p === "FAILED" ? "fl-failed" : p === "ACTIVE" ? "fl-active" : "";
+      l.appendChild(r("div", { className: `fl-quest-progress-dot ${g}` }));
     }
-    const l = r("div", { className: "fl-quest-body" }, [
-      c,
+    const c = r("div", { className: "fl-quest-body" }, [
+      l,
       r("p", { className: "fl-quest-description" }, [t.description]),
       r("div", { className: "fl-quest-memo-row" }, [
-        this.createButton("fl-btn fl-btn-memo", "📝 メモ", () => this.renderFeedbackModal(t.title))
+        this.createButton("fl-btn fl-btn-memo", "📝 メモを残す", () => this.renderFeedbackModal(t.title))
       ]),
       r("div", { className: "fl-quest-actions" }, [
-        this.createButton("fl-btn fl-btn-ok", "✓ OK", this.callbacks.onOk),
+        this.createButton("fl-btn fl-btn-ok", "✓ OK", () => this.renderFeedbackModal(t.title, "ok")),
+        this.createButton("fl-btn fl-btn-concern", "⚠ 気になる", () => this.renderFeedbackModal(t.title, "concern")),
         this.createButton("fl-btn fl-btn-ng", "✗ NG", this.callbacks.onNg)
       ])
     ]);
-    o.appendChild(l), s && o.appendChild(
+    o.appendChild(c), s && o.appendChild(
       r("div", { className: "fl-voice-indicator" }, [
         r("span", { className: "fl-voice-dot" }),
         "Recording..."
       ])
     );
-    const h = r("div", { className: "fl-status-bar" });
-    s && h.appendChild(
+    const d = r("div", { className: "fl-status-bar" });
+    s && d.appendChild(
       r("span", { className: "fl-status-recording" }, [
         r("span", { className: "fl-voice-dot" }),
         "REC"
       ])
     );
-    const d = r("span", { className: "fl-status-timer" }, ["00:00"]);
-    h.appendChild(d), o.appendChild(h), this.root.appendChild(o), this.startTimer(d), this.root.onclick = () => {
-      this.minimized && (this.minimized = !1, this.root.className = "fl-quest-overlay", this.root.innerHTML = "", this.root.appendChild(n), this.root.appendChild(o), this.startTimer(d));
+    const h = r("span", { className: "fl-status-timer" }, ["00:00"]);
+    d.appendChild(h), o.appendChild(d), this.root.appendChild(o), this.startTimer(h), this.root.onclick = () => {
+      this.minimized && (this.minimized = !1, this.root.className = "fl-quest-overlay", this.root.innerHTML = "", this.root.appendChild(n), this.root.appendChild(o), this.startTimer(h));
     };
   }
   renderFeedbackModal(t, e = "memo") {
-    const s = r("div", { className: "fl-feedback-modal" }), i = e === "ng", l = r("div", { className: i ? "fl-quest-header fl-quest-header-ng" : "fl-quest-header" }, [
+    const s = r("div", { className: "fl-feedback-modal" }), i = {
+      ng: "fl-quest-header fl-quest-header-ng",
+      ok: "fl-quest-header fl-quest-header-ok",
+      concern: "fl-quest-header fl-quest-header-concern",
+      memo: "fl-quest-header"
+    }, n = {
+      ng: "NG",
+      ok: "✓ OK",
+      concern: "⚠ 気になる",
+      memo: "📝"
+    }, o = {
+      ng: "fl-quest-badge fl-badge-ng",
+      ok: "fl-quest-badge fl-badge-ok",
+      concern: "fl-quest-badge fl-badge-concern",
+      memo: "fl-quest-badge"
+    }, l = r("div", { className: i[e] }, [
       r("div", { className: "fl-quest-header-left" }, [
-        r("span", { className: i ? "fl-quest-badge fl-badge-ng" : "fl-quest-badge" }, [i ? "NG" : "📝"]),
+        r("span", { className: o[e] }, [n[e]]),
         r("span", { className: "fl-quest-title" }, [t])
       ])
     ]);
     s.appendChild(l);
-    const h = r("div", { className: "fl-quest-content" }), d = document.createElement("textarea");
-    d.className = "fl-feedback-textarea fl-feedback-textarea-modal", d.placeholder = i ? "何がうまくいかなかったか教えてください..." : "気づいたことをメモ...📝", d.rows = 3, h.appendChild(d);
-    const f = r("div", { className: "fl-quest-actions fl-feedback-modal-actions" }, [
-      this.createButton("fl-btn fl-btn-finish", "送信", () => {
-        const m = d.value.trim();
-        if (!m && !i) {
-          s.remove();
-          return;
-        }
-        i ? this.callbacks.onNgWithFeedback(m) : this.callbacks.onMemo(m), s.remove();
+    const c = r("div", { className: "fl-quest-content" }), d = {
+      ng: "何がうまくいかなかったか教えてください...",
+      ok: "コメント（任意）",
+      concern: "気になった点を教えてください...",
+      memo: "気づいたことをメモ...📝"
+    }, h = document.createElement("textarea");
+    h.className = "fl-feedback-textarea fl-feedback-textarea-modal", h.placeholder = d[e], h.rows = 3, c.appendChild(h);
+    const p = "送信", g = e === "ok" ? "スキップ" : "キャンセル", f = r("div", { className: "fl-quest-actions fl-feedback-modal-actions" }, [
+      this.createButton("fl-btn fl-btn-skip", g, () => {
+        e === "ng" ? this.callbacks.onNgWithFeedback("") : e === "ok" && this.callbacks.onOkWithFeedback(""), s.remove();
       }),
-      this.createButton("fl-btn fl-btn-skip", "キャンセル", () => {
-        i && this.callbacks.onNgWithFeedback(""), s.remove();
+      this.createButton("fl-btn fl-btn-finish", p, () => {
+        const m = h.value.trim();
+        if (e === "ng")
+          this.callbacks.onNgWithFeedback(m);
+        else if (e === "ok")
+          this.callbacks.onOkWithFeedback(m);
+        else if (e === "concern") {
+          if (!m) return;
+          this.callbacks.onConcern(m);
+        } else {
+          if (!m) {
+            s.remove();
+            return;
+          }
+          this.callbacks.onMemo(m);
+        }
+        s.remove();
       })
     ]);
-    h.appendChild(f), s.appendChild(h), this.root.appendChild(s), d.focus();
+    c.appendChild(f), s.appendChild(c), this.root.appendChild(s), h.focus();
   }
   renderSummary(t, e, s) {
     this.stopTimer(), this.root.className = "fl-quest-overlay", this.root.innerHTML = "";
@@ -293,14 +331,14 @@ class M {
   startTimer(t) {
     this.stopTimer(), this.startTime || (this.startTime = Date.now()), this.timerInterval = setInterval(() => {
       const e = Math.floor((Date.now() - this.startTime) / 1e3);
-      t.textContent = q(e);
+      t.textContent = E(e);
     }, 1e3);
   }
   stopTimer() {
     this.timerInterval && (clearInterval(this.timerInterval), this.timerInterval = null);
   }
 }
-const E = 100, R = 2 * 1024 * 1024;
+const L = 100, A = 2 * 1024 * 1024;
 class D {
   constructor(t, e, s) {
     this.config = t, this.events = e, this.maskSelector = s, this.actionLogs = [], this.snapshots = [], this.snapshotTimer = null, this.startTime = 0, this.running = !1, this.handleClick = this.onClick.bind(this), this.handleScroll = this.throttle(this.onScroll.bind(this), 500), this.handleInput = this.onInput.bind(this);
@@ -333,7 +371,7 @@ class D {
     const e = t.target;
     this.addLog({
       type: "click",
-      target: x(e)
+      target: k(e)
     });
   }
   onScroll() {
@@ -345,12 +383,12 @@ class D {
   onInput(t) {
     const e = t.target;
     if (e.hasAttribute("data-fl-masked"))
-      this.addLog({ type: "input", target: x(e), value: "[MASKED]" });
+      this.addLog({ type: "input", target: k(e), value: "[MASKED]" });
     else {
       const s = e.value;
       this.addLog({
         type: "input",
-        target: x(e),
+        target: k(e),
         value: s == null ? void 0 : s.slice(0, 100)
       });
     }
@@ -368,8 +406,8 @@ class D {
       const s = t.querySelector("#firstlook-sdk-root");
       s == null || s.remove();
       const i = t.outerHTML;
-      if (i.length > R) return;
-      this.snapshots.length >= E && this.snapshots.shift(), this.snapshots.push({
+      if (i.length > A) return;
+      this.snapshots.length >= L && this.snapshots.shift(), this.snapshots.push({
         type: "dom-snapshot",
         timestamp: Date.now() - this.startTime,
         data: i
@@ -385,12 +423,12 @@ class D {
     };
   }
 }
-function x(a) {
+function k(a) {
   var n;
   const t = a.tagName.toLowerCase(), e = a.id ? `#${a.id}` : "", s = a.className && typeof a.className == "string" ? `.${a.className.trim().split(/\s+/).slice(0, 2).join(".")}` : "", i = ((n = a.textContent) == null ? void 0 : n.trim().slice(0, 30)) || "";
   return `${t}${e}${s}${i ? ` "${i}"` : ""}`;
 }
-class L {
+class N {
   constructor(t) {
     this.events = t, this.mediaRecorder = null, this.stream = null, this.chunks = [], this._recording = !1;
   }
@@ -449,7 +487,7 @@ class L {
     return "";
   }
 }
-class A {
+class F {
   constructor(t, e) {
     this.shadowRoot = t, this.config = e, this.container = null, this.refreshInterval = null, this.cachedIp = null;
   }
@@ -471,15 +509,15 @@ class A {
   renderTiles() {
     if (!this.container) return;
     this.container.innerHTML = "";
-    const t = this.cachedIp ?? "", e = (/* @__PURE__ */ new Date()).toISOString().slice(0, 19), s = t ? `${this.config.userId} | ${e} | ${t}` : `${this.config.userId} | ${e}`, i = 320, n = 80, o = Math.ceil(window.innerWidth / i) + 1, c = Math.ceil(window.innerHeight / n) + 1;
-    for (let l = 0; l < c; l++)
-      for (let h = 0; h < o; h++) {
-        const d = document.createElement("span");
-        d.className = "fl-watermark-tile", d.textContent = s, d.style.left = `${h * i}px`, d.style.top = `${l * n}px`, this.container.appendChild(d);
+    const t = this.cachedIp ?? "", e = (/* @__PURE__ */ new Date()).toISOString().slice(0, 19), s = t ? `${this.config.userId} | ${e} | ${t}` : `${this.config.userId} | ${e}`, i = 320, n = 80, o = Math.ceil(window.innerWidth / i) + 1, l = Math.ceil(window.innerHeight / n) + 1;
+    for (let c = 0; c < l; c++)
+      for (let d = 0; d < o; d++) {
+        const h = document.createElement("span");
+        h.className = "fl-watermark-tile", h.textContent = s, h.style.left = `${d * i}px`, h.style.top = `${c * n}px`, this.container.appendChild(h);
       }
   }
 }
-class N {
+class z {
   constructor(t) {
     this.selectors = t, this.observer = null, this.maskedElements = /* @__PURE__ */ new Set();
   }
@@ -517,20 +555,20 @@ class N {
       }
   }
 }
-const F = "firstlook_uat", z = 1, u = {
+const P = "firstlook_uat", O = 1, u = {
   sessions: "sessions",
   recordings: "recordings",
   annotations: "annotations",
   uploadQueue: "upload_queue"
 };
-class P {
+class Q {
   constructor() {
     this.db = null;
   }
   async open() {
     if (!this.db)
       return new Promise((t, e) => {
-        const s = indexedDB.open(F, z);
+        const s = indexedDB.open(P, O);
         s.onupgradeneeded = () => {
           const i = s.result;
           i.objectStoreNames.contains(u.sessions) || i.createObjectStore(u.sessions, { keyPath: "sessionId" }), i.objectStoreNames.contains(u.recordings) || i.createObjectStore(u.recordings, { autoIncrement: !0 }).createIndex("sessionId", "sessionId", { unique: !1 }), i.objectStoreNames.contains(u.annotations) || i.createObjectStore(u.annotations, { autoIncrement: !0 }).createIndex("sessionId", "sessionId", { unique: !1 }), i.objectStoreNames.contains(u.uploadQueue) || i.createObjectStore(u.uploadQueue, { autoIncrement: !0 });
@@ -564,15 +602,15 @@ class P {
   async getPendingUploads() {
     const t = this.ensureDb();
     return new Promise((e, s) => {
-      const o = t.transaction(u.uploadQueue, "readonly").objectStore(u.uploadQueue).openCursor(), c = [];
+      const o = t.transaction(u.uploadQueue, "readonly").objectStore(u.uploadQueue).openCursor(), l = [];
       o.onsuccess = () => {
-        const l = o.result;
-        l ? (c.push({
-          key: l.key,
-          payload: l.value.payload,
-          attempts: l.value.attempts,
-          lastAttemptAt: l.value.lastAttemptAt
-        }), l.continue()) : e(c);
+        const c = o.result;
+        c ? (l.push({
+          key: c.key,
+          payload: c.value.payload,
+          attempts: c.value.attempts,
+          lastAttemptAt: c.value.lastAttemptAt
+        }), c.continue()) : e(l);
       }, o.onerror = () => s(o.error);
     });
   }
@@ -586,10 +624,10 @@ class P {
   async incrementAttempts(t) {
     const e = this.ensureDb();
     return new Promise((s, i) => {
-      const n = e.transaction(u.uploadQueue, "readwrite"), o = n.objectStore(u.uploadQueue), c = o.get(t);
-      c.onsuccess = () => {
-        const l = c.result;
-        l && (l.attempts = (l.attempts ?? 0) + 1, l.lastAttemptAt = Date.now(), o.put(l, t));
+      const n = e.transaction(u.uploadQueue, "readwrite"), o = n.objectStore(u.uploadQueue), l = o.get(t);
+      l.onsuccess = () => {
+        const c = l.result;
+        c && (c.attempts = (c.attempts ?? 0) + 1, c.lastAttemptAt = Date.now(), o.put(c, t));
       }, n.oncomplete = () => s(), n.onerror = () => i(n.error);
     });
   }
@@ -600,10 +638,10 @@ class P {
     );
     s.objectStore(u.sessions).delete(t);
     for (const i of [u.recordings, u.annotations]) {
-      const c = s.objectStore(i).index("sessionId").openCursor(IDBKeyRange.only(t));
-      c.onsuccess = () => {
-        const l = c.result;
-        l && (l.delete(), l.continue());
+      const l = s.objectStore(i).index("sessionId").openCursor(IDBKeyRange.only(t));
+      l.onsuccess = () => {
+        const c = l.result;
+        c && (c.delete(), c.continue());
       };
     }
     return new Promise((i, n) => {
@@ -628,22 +666,22 @@ class P {
   async get(t, e) {
     const s = this.ensureDb();
     return new Promise((i, n) => {
-      const c = s.transaction(t, "readonly").objectStore(t).get(e);
-      c.onsuccess = () => i(c.result), c.onerror = () => n(c.error);
+      const l = s.transaction(t, "readonly").objectStore(t).get(e);
+      l.onsuccess = () => i(l.result), l.onerror = () => n(l.error);
     });
   }
   async getAllByIndex(t, e, s) {
     const i = this.ensureDb();
     return new Promise((n, o) => {
-      const h = i.transaction(t, "readonly").objectStore(t).index(e).getAll(s);
-      h.onsuccess = () => n(h.result), h.onerror = () => o(h.error);
+      const d = i.transaction(t, "readonly").objectStore(t).index(e).getAll(s);
+      d.onsuccess = () => n(d.result), d.onerror = () => o(d.error);
     });
   }
 }
-const k = ["#e17055", "#6c5ce7", "#00b894", "#fdcb6e", "#ffffff"];
-class O {
+const y = ["#e17055", "#6c5ce7", "#00b894", "#fdcb6e", "#ffffff"];
+class B {
   constructor(t) {
-    this.shadowRoot = t, this.overlay = null, this.canvas = null, this.ctx = null, this.drawing = !1, this.currentPath = [], this.paths = [], this.selectedColor = k[0], this.screenshotDataUrl = "";
+    this.shadowRoot = t, this.overlay = null, this.canvas = null, this.ctx = null, this.drawing = !1, this.currentPath = [], this.paths = [], this.selectedColor = y[0], this.screenshotDataUrl = "";
   }
   async open() {
     return this.screenshotDataUrl = await this.captureScreenshot(), new Promise((t) => {
@@ -655,33 +693,33 @@ class O {
         type: "text",
         placeholder: "Add a comment..."
       }), i = r("div", { className: "fl-color-picker" });
-      for (const l of k) {
-        const h = r("div", { className: `fl-color-swatch ${l === this.selectedColor ? "fl-selected" : ""}` });
-        h.style.background = l, h.onclick = () => {
-          this.selectedColor = l, i.querySelectorAll(".fl-color-swatch").forEach((d) => d.classList.remove("fl-selected")), h.classList.add("fl-selected");
-        }, i.appendChild(h);
+      for (const c of y) {
+        const d = r("div", { className: `fl-color-swatch ${c === this.selectedColor ? "fl-selected" : ""}` });
+        d.style.background = c, d.onclick = () => {
+          this.selectedColor = c, i.querySelectorAll(".fl-color-swatch").forEach((h) => h.classList.remove("fl-selected")), d.classList.add("fl-selected");
+        }, i.appendChild(d);
       }
       const n = r("button", { className: "fl-btn fl-btn-ok" }, ["Submit"]);
       n.onclick = () => {
-        const l = {
+        const c = {
           screenshotDataUrl: this.getAnnotatedImage(),
           drawings: [...this.paths],
           comment: s.value,
           timestamp: Date.now()
         };
-        this.close(), t(l);
+        this.close(), t(c);
       };
       const o = r("button", { className: "fl-btn fl-btn-ng" }, ["Cancel"]);
       o.onclick = () => {
         this.close(), t(null);
       };
-      const c = r("div", { className: "fl-annotation-toolbar" }, [
+      const l = r("div", { className: "fl-annotation-toolbar" }, [
         i,
         s,
         n,
         o
       ]);
-      this.overlay.appendChild(c), this.shadowRoot.appendChild(this.overlay), this.initCanvas();
+      this.overlay.appendChild(l), this.shadowRoot.appendChild(this.overlay), this.initCanvas();
     });
   }
   close() {
@@ -693,28 +731,28 @@ class O {
       const t = window.innerWidth, e = window.innerHeight, s = document.documentElement.cloneNode(!0), i = s.querySelector("#firstlook-sdk-root");
       i == null || i.remove();
       const n = s.querySelectorAll('[data-fl-masked], input[type="password"]');
-      for (const p of n)
-        (p instanceof HTMLInputElement || p instanceof HTMLTextAreaElement) && (p.value = "[MASKED]"), p.textContent = "[MASKED]";
-      for (const p of s.querySelectorAll("script")) p.remove();
+      for (const f of n)
+        (f instanceof HTMLInputElement || f instanceof HTMLTextAreaElement) && (f.value = "[MASKED]"), f.textContent = "[MASKED]";
+      for (const f of s.querySelectorAll("script")) f.remove();
       const o = s.querySelector("body");
       if (o) {
-        const p = window.getComputedStyle(document.body);
-        o.style.backgroundColor = p.backgroundColor, o.style.color = p.color, o.style.fontFamily = p.fontFamily, o.style.margin = "0", o.style.overflow = "hidden";
+        const f = window.getComputedStyle(document.body);
+        o.style.backgroundColor = f.backgroundColor, o.style.color = f.color, o.style.fontFamily = f.fontFamily, o.style.margin = "0", o.style.overflow = "hidden";
       }
-      const c = new XMLSerializer().serializeToString(s), l = `<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${e}">
+      const l = new XMLSerializer().serializeToString(s), c = `<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${e}">
         <foreignObject width="100%" height="100%">
-          ${c}
+          ${l}
         </foreignObject>
-      </svg>`, h = new Blob([l], { type: "image/svg+xml;charset=utf-8" }), d = URL.createObjectURL(h), f = document.createElement("canvas");
-      f.width = t * window.devicePixelRatio, f.height = e * window.devicePixelRatio;
-      const m = f.getContext("2d");
-      return m.scale(window.devicePixelRatio, window.devicePixelRatio), new Promise((p) => {
-        const g = new Image();
-        g.onload = () => {
-          m.drawImage(g, 0, 0, t, e), URL.revokeObjectURL(d), p(f.toDataURL("image/png"));
-        }, g.onerror = () => {
-          URL.revokeObjectURL(d), p(this.captureScreenshotFallback(t, e));
-        }, g.src = d;
+      </svg>`, d = new Blob([c], { type: "image/svg+xml;charset=utf-8" }), h = URL.createObjectURL(d), p = document.createElement("canvas");
+      p.width = t * window.devicePixelRatio, p.height = e * window.devicePixelRatio;
+      const g = p.getContext("2d");
+      return g.scale(window.devicePixelRatio, window.devicePixelRatio), new Promise((f) => {
+        const m = new Image();
+        m.onload = () => {
+          g.drawImage(m, 0, 0, t, e), URL.revokeObjectURL(h), f(p.toDataURL("image/png"));
+        }, m.onerror = () => {
+          URL.revokeObjectURL(h), f(this.captureScreenshotFallback(t, e));
+        }, m.src = h;
       });
     } catch {
       return this.captureScreenshotFallback(window.innerWidth, window.innerHeight);
@@ -759,7 +797,7 @@ class O {
     return ((t = this.canvas) == null ? void 0 : t.toDataURL("image/png")) || this.screenshotDataUrl;
   }
 }
-class Q {
+class H {
   constructor(t) {
     this.onShake = t, this.lastX = 0, this.lastY = 0, this.lastZ = 0, this.shakeCount = 0, this.lastShakeTime = 0, this.handler = null, this.THRESHOLD = 15, this.SHAKE_INTERVAL = 400, this.REQUIRED_SHAKES = 2;
   }
@@ -786,11 +824,11 @@ class Q {
     this.lastX = e.x, this.lastY = e.y, this.lastZ = e.z;
   }
 }
-class B {
+class U {
   constructor(t, e) {
     this.shadowRoot = t, this.events = e, this.annotations = [], this.active = !1, this.onKeydown = (s) => {
       s.ctrlKey && s.shiftKey && s.key === "R" && (s.preventDefault(), this.trigger());
-    }, this.annotationCanvas = new O(t), this.shakeTrigger = new Q(() => this.trigger());
+    }, this.annotationCanvas = new B(t), this.shakeTrigger = new H(() => this.trigger());
   }
   async start() {
     await this.shakeTrigger.start(), document.addEventListener("keydown", this.onKeydown);
@@ -813,7 +851,7 @@ class B {
     }
   }
 }
-class H {
+class j {
   constructor(t, e) {
     this.requiredTaps = t, this.onActivate = e, this.tapCount = 0, this.tapTimer = null, this.handler = null;
   }
@@ -830,30 +868,74 @@ class H {
     this.tapCount = 0, this.tapTimer && (clearTimeout(this.tapTimer), this.tapTimer = null);
   }
 }
-class U {
+const x = "firstlook:uat-active";
+class S {
   constructor(t) {
     this.onActivate = t, this.hashHandler = null;
   }
   start() {
-    this.checkUrl() && this.onActivate(), this.hashHandler = () => {
-      this.checkUrl() && this.onActivate();
+    if (this.checkUrl()) {
+      this.persist(), this.onActivate();
+      return;
+    }
+    if (this.hasPersisted()) {
+      this.onActivate();
+      return;
+    }
+    this.hashHandler = () => {
+      this.checkUrl() && (this.persist(), this.onActivate());
     }, window.addEventListener("hashchange", this.hashHandler);
   }
   stop() {
     this.hashHandler && (window.removeEventListener("hashchange", this.hashHandler), this.hashHandler = null);
   }
+  /** Clear the persisted flag (call on session end / destroy). */
+  static clearPersisted() {
+    try {
+      sessionStorage.removeItem(x);
+    } catch {
+    }
+  }
   checkUrl() {
     const t = new URLSearchParams(window.location.search);
-    return t.has("firstlook") || t.has("uat-mode");
+    return t.has("firstlook") || t.has("uat-mode") || t.get("uat") === "1";
+  }
+  persist() {
+    try {
+      sessionStorage.setItem(x, "1");
+    } catch {
+    }
+  }
+  hasPersisted() {
+    try {
+      return sessionStorage.getItem(x) === "1";
+    } catch {
+      return !1;
+    }
   }
 }
-class j {
+class $ {
+  constructor(t) {
+    this.onActivate = t, this.handler = null;
+  }
+  start() {
+    this.handler = (t) => {
+      t.key === "U" && t.shiftKey && (t.ctrlKey || t.metaKey) && (t.preventDefault(), this.onActivate());
+    }, window.addEventListener("keydown", this.handler);
+  }
+  stop() {
+    this.handler && (window.removeEventListener("keydown", this.handler), this.handler = null);
+  }
+}
+class K {
   constructor(t, e) {
     this.shadowRoot = t, this.callbacks = e, this.root = null, this.outsideClickHandler = null;
   }
   show() {
     if (this.root) return;
     this.root = r("div", { className: "fl-debug-menu" });
+    for (const e of ["click", "mousedown", "mouseup", "pointerdown", "pointerup", "touchstart", "touchend"])
+      this.root.addEventListener(e, (s) => s.stopPropagation());
     const t = [
       { icon: "▶", label: "Start Session", action: this.callbacks.onStartSession },
       { icon: "📸", label: "Report Issue", action: this.callbacks.onReportIssue },
@@ -882,7 +964,7 @@ class j {
     return this.root !== null;
   }
 }
-const $ = (
+const _ = (
   /* css */
   `
   :host {
@@ -1275,10 +1357,16 @@ const $ = (
     box-shadow: 0 2px 8px rgba(99, 110, 114, 0.3);
   }
 
-  /* === NG Voice Feedback Mode === */
+  /* === Feedback modal header variants === */
   .fl-quest-header-ng { background: linear-gradient(135deg, #e17055, #d63031); }
   .fl-badge-ng { background: rgba(255, 255, 255, 0.25); }
 
+  .fl-quest-header-ok { background: linear-gradient(135deg, #00b894, #00a381); }
+  .fl-badge-ok { background: rgba(255, 255, 255, 0.25); }
+
+  .fl-quest-header-concern { background: linear-gradient(135deg, #fdcb6e, #e17055); }
+  .fl-badge-concern { background: rgba(255, 255, 255, 0.25); }
+
   .fl-feedback-textarea {
     width: calc(100% - 32px);
     margin: 8px 16px 16px;
@@ -1294,16 +1382,25 @@ const $ = (
   .fl-feedback-textarea:focus { border-color: #6c5ce7; }
   .fl-feedback-textarea-modal { width: calc(100% - 32px); margin: 16px 16px 12px; }
 
+  /* === Concern button === */
+  .fl-btn-concern {
+    background: #fdcb6e;
+    color: #2d3436;
+    box-shadow: 0 2px 8px rgba(253, 203, 110, 0.3);
+  }
+  .fl-btn-concern:hover { box-shadow: 0 4px 12px rgba(253, 203, 110, 0.4); }
+
   /* === Memo button === */
   .fl-quest-memo-row { display: flex; margin-bottom: 10px; }
   .fl-btn-memo {
-    flex: none;
+    flex: 1;
     background: #f0f0f8;
     color: #4a4a5a;
-    font-size: 12px;
-    padding: 6px 12px;
+    font-size: 14px;
+    padding: 10px 16px;
     box-shadow: none;
-    border-radius: 8px;
+    border-radius: 10px;
+    border: 1px dashed #c8c8d8;
   }
   .fl-btn-memo:hover { background: #e4e4f0; }
 
@@ -1320,10 +1417,10 @@ const $ = (
   }
   .fl-feedback-modal-actions { padding: 0 16px 16px; }
 `
-), K = 5;
-class _ {
+), W = 5;
+class X {
   constructor() {
-    this.config = null, this.events = new T(), this.state = "idle", this.hostElement = null, this.shadowRoot = null, this.questManager = null, this.questOverlay = null, this.sessionRecorder = null, this.voiceRecorder = null, this.watermark = null, this.fieldMasker = null, this.storage = null, this.shakeReporter = null, this.debugMenu = null, this.tapTrigger = null, this.deepLinkTrigger = null, this.sessionId = null, this.sessionStartTime = 0, this.maxDurationTimer = null, this.backupTimer = null, this.isFlushing = !1;
+    this.config = null, this.events = new q(), this.state = "idle", this.hostElement = null, this.shadowRoot = null, this.questManager = null, this.questOverlay = null, this.sessionRecorder = null, this.voiceRecorder = null, this.watermark = null, this.fieldMasker = null, this.storage = null, this.shakeReporter = null, this.debugMenu = null, this.tapTrigger = null, this.deepLinkTrigger = null, this.keyboardTrigger = null, this.sessionId = null, this.sessionStartTime = 0, this.maxDurationTimer = null, this.backupTimer = null, this.isFlushing = !1;
   }
   // ----------------------------------------------------------------
   // Public API
@@ -1337,7 +1434,7 @@ class _ {
       console.warn("[FirstLook] SDK already initialized.");
       return;
     }
-    this.config = S(t), this.storage = new P(), await this.storage.open(), this.createShadowHost(), this.setupTriggers(), this.fieldMasker = new N(this.config.security.maskSelectors), this.state = "initialized", this.events.emit({ type: "sdk:initialized" }), this.flushUploadQueue(!0);
+    this.config = C(t), this.storage = new Q(), await this.storage.open(), this.createShadowHost(), this.setupTriggers(), this.fieldMasker = new z(this.config.security.maskSelectors), this.state = "initialized", this.events.emit({ type: "sdk:initialized" }), this.flushUploadQueue(!0);
   }
   /**
    * Manually activate the SDK UI (bypassing triggers).
@@ -1356,12 +1453,13 @@ class _ {
     var s;
     if (this.state !== "active")
       throw new Error("[FirstLook] Cannot start session: SDK not active. Call activate() first.");
-    (s = this.debugMenu) == null || s.hide(), this.sessionId = I(), this.sessionStartTime = Date.now(), this.questManager = new C(this.events), this.questManager.loadQuests(t), this.sessionRecorder = new D(
+    (s = this.debugMenu) == null || s.hide(), this.sessionId = M(), this.sessionStartTime = Date.now(), this.questManager = new I(this.events), this.questManager.loadQuests(t), this.sessionRecorder = new D(
       this.config,
       this.events,
       this.fieldMasker.getCombinedSelector()
-    ), this.voiceRecorder = new L(this.events), this.shakeReporter = new B(this.shadowRoot, this.events), await this.shakeReporter.start(), this.sessionRecorder.start(), this.fieldMasker.start(), this.config.recording.voice && await this.voiceRecorder.start(), this.config.security.watermark && (this.watermark = new A(this.shadowRoot, this.config), this.watermark.show()), this.questOverlay = new M(this.shadowRoot, {
-      onOk: () => this.handleQuestOk(),
+    ), this.voiceRecorder = new N(this.events), this.shakeReporter = new U(this.shadowRoot, this.events), await this.shakeReporter.start(), this.sessionRecorder.start(), this.fieldMasker.start(), this.config.recording.voice && await this.voiceRecorder.start(), this.config.security.watermark && (this.watermark = new F(this.shadowRoot, this.config), this.watermark.show()), this.questOverlay = new R(this.shadowRoot, {
+      onOkWithFeedback: (i) => this.handleQuestOk(i),
+      onConcern: (i) => this.handleConcern(i),
       onNg: () => this.handleQuestNg(),
       onNgWithFeedback: (i) => this.handleNgFeedbackSubmit(i),
       onMemo: (i) => this.handleMemo(i),
@@ -1392,9 +1490,9 @@ class _ {
    * End the current session, persist data, and trigger upload.
    */
   async endSession() {
-    var i, n, o, c, l, h, d, f, m, p, g;
+    var i, n, o, l, c, d, h, p, g, f, m;
     if (this.state !== "recording" || !this.sessionId) return null;
-    this.maxDurationTimer && (clearTimeout(this.maxDurationTimer), this.maxDurationTimer = null), this.backupTimer && (clearInterval(this.backupTimer), this.backupTimer = null), (i = this.sessionRecorder) == null || i.stop(), await ((n = this.voiceRecorder) == null ? void 0 : n.stopAsync()), (o = this.shakeReporter) == null || o.stop(), (c = this.fieldMasker) == null || c.stop(), (l = this.watermark) == null || l.hide();
+    this.maxDurationTimer && (clearTimeout(this.maxDurationTimer), this.maxDurationTimer = null), this.backupTimer && (clearInterval(this.backupTimer), this.backupTimer = null), (i = this.sessionRecorder) == null || i.stop(), await ((n = this.voiceRecorder) == null ? void 0 : n.stopAsync()), (o = this.shakeReporter) == null || o.stop(), (l = this.fieldMasker) == null || l.stop(), (c = this.watermark) == null || c.hide();
     const t = this.questManager.getResults();
     await Promise.allSettled(
       t.map(async (b) => {
@@ -1428,13 +1526,13 @@ class _ {
       endedAt: (/* @__PURE__ */ new Date()).toISOString(),
       duration: Math.floor((Date.now() - this.sessionStartTime) / 1e3),
       quests: t,
-      recordings: ((h = this.sessionRecorder) == null ? void 0 : h.getSnapshots()) ?? []
+      recordings: ((d = this.sessionRecorder) == null ? void 0 : d.getSnapshots()) ?? []
     };
-    await ((d = this.storage) == null ? void 0 : d.saveSession(e));
-    const s = ((f = this.shakeReporter) == null ? void 0 : f.getAnnotations()) ?? [];
+    await ((h = this.storage) == null ? void 0 : h.saveSession(e));
+    const s = ((p = this.shakeReporter) == null ? void 0 : p.getAnnotations()) ?? [];
     for (const b of s)
-      await ((m = this.storage) == null ? void 0 : m.saveAnnotation(this.sessionId, b));
-    return await ((p = this.storage) == null ? void 0 : p.enqueueUpload({ session: e, annotations: s })), (g = this.questOverlay) == null || g.destroy(), this.questOverlay = null, this.state = "finished", this.events.emit({ type: "session:ended", sessionId: this.sessionId }), this.flushUploadQueue(!1), e;
+      await ((g = this.storage) == null ? void 0 : g.saveAnnotation(this.sessionId, b));
+    return await ((f = this.storage) == null ? void 0 : f.enqueueUpload({ session: e, annotations: s })), (m = this.questOverlay) == null || m.destroy(), this.questOverlay = null, this.state = "finished", this.events.emit({ type: "session:ended", sessionId: this.sessionId }), this.flushUploadQueue(!1), e;
   }
   /**
    * Subscribe to SDK events.
@@ -1452,42 +1550,50 @@ class _ {
    * Completely destroy the SDK instance and clean up all resources.
    */
   destroy() {
-    var t, e, s, i, n, o, c, l, h, d;
-    this.maxDurationTimer && (clearTimeout(this.maxDurationTimer), this.maxDurationTimer = null), this.backupTimer && (clearInterval(this.backupTimer), this.backupTimer = null), (t = this.tapTrigger) == null || t.stop(), (e = this.deepLinkTrigger) == null || e.stop(), (s = this.sessionRecorder) == null || s.stop(), (i = this.shakeReporter) == null || i.stop(), (n = this.fieldMasker) == null || n.stop(), (o = this.watermark) == null || o.hide(), (c = this.questOverlay) == null || c.destroy(), (l = this.debugMenu) == null || l.hide(), (h = this.hostElement) == null || h.remove(), (d = this.storage) == null || d.close(), this.events.removeAll(), this.state = "idle";
+    var t, e, s, i, n, o, l, c, d, h, p;
+    this.maxDurationTimer && (clearTimeout(this.maxDurationTimer), this.maxDurationTimer = null), this.backupTimer && (clearInterval(this.backupTimer), this.backupTimer = null), (t = this.tapTrigger) == null || t.stop(), (e = this.deepLinkTrigger) == null || e.stop(), (s = this.keyboardTrigger) == null || s.stop(), S.clearPersisted(), (i = this.sessionRecorder) == null || i.stop(), (n = this.shakeReporter) == null || n.stop(), (o = this.fieldMasker) == null || o.stop(), (l = this.watermark) == null || l.hide(), (c = this.questOverlay) == null || c.destroy(), (d = this.debugMenu) == null || d.hide(), (h = this.hostElement) == null || h.remove(), (p = this.storage) == null || p.close(), this.events.removeAll(), this.state = "idle";
   }
   // ----------------------------------------------------------------
   // Private methods
   // ----------------------------------------------------------------
   createShadowHost() {
-    this.hostElement = document.createElement("div"), this.hostElement.id = "firstlook-sdk-root", this.hostElement.style.cssText = "position:fixed;top:0;left:0;width:0;height:0;z-index:2147483647;pointer-events:none;", document.body.appendChild(this.hostElement), this.shadowRoot = this.hostElement.attachShadow({ mode: "closed" });
+    this.hostElement = document.createElement("div"), this.hostElement.id = "firstlook-sdk-root", this.hostElement.style.cssText = "position:fixed;top:0;left:0;width:0;height:0;z-index:2147483647;", document.body.appendChild(this.hostElement), this.shadowRoot = this.hostElement.attachShadow({ mode: "closed" });
     const t = document.createElement("style");
-    t.textContent = $, this.shadowRoot.appendChild(t);
-    const e = document.createElement("div");
-    e.style.cssText = "pointer-events:auto;", this.shadowRoot.appendChild(e);
+    t.textContent = _, this.shadowRoot.appendChild(t);
   }
   setupTriggers() {
     const t = this.config.triggers;
-    this.tapTrigger = new H(t.tapCount, () => this.onActivate()), this.tapTrigger.start(), t.deepLink && (this.deepLinkTrigger = new U(() => this.onActivate()), this.deepLinkTrigger.start()), t.customCheck && t.customCheck() && this.onActivate();
+    this.tapTrigger = new j(t.tapCount, () => this.onActivate()), this.tapTrigger.start(), t.deepLink && (this.deepLinkTrigger = new S(() => this.onActivate()), this.deepLinkTrigger.start()), t.keyboard && (this.keyboardTrigger = new $(() => this.onActivate()), this.keyboardTrigger.start()), t.customCheck && t.customCheck() && this.onActivate();
   }
   onActivate() {
-    var t, e;
-    this.state === "initialized" && (this.state = "active", (t = this.tapTrigger) == null || t.stop(), (e = this.deepLinkTrigger) == null || e.stop(), this.events.emit({ type: "sdk:activated" }), this.debugMenu = new j(this.shadowRoot, {
+    var t, e, s;
+    this.state === "initialized" && (this.state = "active", (t = this.tapTrigger) == null || t.stop(), (e = this.deepLinkTrigger) == null || e.stop(), (s = this.keyboardTrigger) == null || s.stop(), this.events.emit({ type: "sdk:activated" }), this.debugMenu = new K(this.shadowRoot, {
       onStartSession: () => {
         this.events.emit({ type: "sdk:activated" });
       },
       onReportIssue: () => {
-        var s, i;
-        (i = (s = this.shakeReporter) == null ? void 0 : s.trigger) == null || i.call(s);
+        var i, n;
+        (n = (i = this.shakeReporter) == null ? void 0 : i.trigger) == null || n.call(i);
       },
       onClose: () => {
         this.destroy();
       }
     }), this.debugMenu.show());
   }
-  handleQuestOk() {
+  handleQuestOk(t) {
+    if (!this.questManager || !this.sessionRecorder) return;
+    const e = this.sessionRecorder.getActionLogs();
+    this.questManager.completeCurrentQuest(e, {
+      comment: t || void 0
+    }), this.renderCurrentQuest();
+  }
+  handleConcern(t) {
     if (!this.questManager || !this.sessionRecorder) return;
-    const t = this.sessionRecorder.getActionLogs();
-    this.questManager.completeCurrentQuest(t), this.renderCurrentQuest();
+    const e = this.sessionRecorder.getActionLogs();
+    this.questManager.completeCurrentQuest(e, {
+      comment: t,
+      concern: !0
+    }), this.renderCurrentQuest();
   }
   handleQuestNg() {
     if (!this.questManager || !this.questOverlay) return;
@@ -1539,7 +1645,7 @@ class _ {
         }
         const e = await this.storage.getPendingUploads();
         for (const s of e) {
-          if (s.attempts >= K) {
+          if (s.attempts >= W) {
             await this.storage.removeFromQueue(s.key);
             continue;
           }
@@ -1593,6 +1699,6 @@ class _ {
   }
 }
 export {
-  _ as FirstLookSDK
+  X as FirstLookSDK
 };
 //# sourceMappingURL=firstlook.es.js.map