@firstlook-uat/sdk 0.2.0

package/dist/firstlook.es.js

@@ -0,0 +1,1598 @@
+const y = [
+  'input[type="password"]',
+  "[data-sensitive]",
+  "[data-mask]",
+  ".uat-mask"
+];
+function S(a) {
+  var t, e, s, i, n, o, c, l, h, d;
+  if (!a.endpoint)
+    throw new Error("[FirstLook] 'endpoint' is required. Set your Supabase ingest-session URL.");
+  return {
+    projectId: a.projectId,
+    apiKey: a.apiKey,
+    userId: a.userId,
+    role: a.role,
+    context: a.context ?? {},
+    endpoint: a.endpoint,
+    triggers: {
+      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
+    },
+    security: {
+      watermark: ((n = a.security) == null ? void 0 : n.watermark) ?? !0,
+      maskSelectors: ((o = a.security) == null ? void 0 : o.maskSelectors) ?? y
+    },
+    recording: {
+      domSnapshot: ((c = a.recording) == null ? void 0 : c.domSnapshot) ?? !0,
+      voice: ((l = a.recording) == null ? void 0 : l.voice) ?? !0,
+      maxDuration: ((h = a.recording) == null ? void 0 : h.maxDuration) ?? 600,
+      snapshotInterval: ((d = a.recording) == null ? void 0 : d.snapshotInterval) ?? 1e3
+    }
+  };
+}
+function w() {
+  return {
+    userAgent: navigator.userAgent,
+    platform: navigator.platform,
+    language: navigator.language,
+    screenWidth: window.screen.width,
+    screenHeight: window.screen.height,
+    pixelRatio: window.devicePixelRatio,
+    touchSupport: "ontouchstart" in window || navigator.maxTouchPoints > 0
+  };
+}
+class T {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Map();
+  }
+  on(t, e) {
+    return this.listeners.has(t) || this.listeners.set(t, /* @__PURE__ */ new Set()), this.listeners.get(t).add(e), () => this.off(t, e);
+  }
+  off(t, e) {
+    var s;
+    (s = this.listeners.get(t)) == null || s.delete(e);
+  }
+  emit(t) {
+    var e, s;
+    (e = this.listeners.get(t.type)) == null || e.forEach((i) => {
+      try {
+        i(t);
+      } catch (n) {
+        console.error("[FirstLook] Event listener error:", n);
+      }
+    }), (s = this.listeners.get("*")) == null || s.forEach((i) => {
+      try {
+        i(t);
+      } catch (n) {
+        console.error("[FirstLook] Event listener error:", n);
+      }
+    });
+  }
+  removeAll() {
+    this.listeners.clear();
+  }
+}
+class C {
+  constructor(t) {
+    this.events = t, this.quests = [], this.results = [], this.currentIndex = -1, this.sessionStartTime = 0, this.blocked = !1, this.pendingFeedbacks = [];
+  }
+  loadQuests(t) {
+    this.quests = [...t].sort((e, s) => e.order - s.order), this.results = [], this.currentIndex = -1, this.blocked = !1;
+  }
+  startSession(t) {
+    this.sessionStartTime = t, this.advance();
+  }
+  getCurrentQuest() {
+    return this.blocked || this.currentIndex < 0 || this.currentIndex >= this.quests.length ? null : this.quests[this.currentIndex];
+  }
+  getStatus() {
+    return {
+      total: this.quests.length,
+      completed: this.results.filter((t) => t.status === "COMPLETED").length,
+      failed: this.results.filter((t) => t.status === "FAILED").length,
+      current: this.currentIndex,
+      isBlocked: this.blocked,
+      isFinished: this.currentIndex >= this.quests.length
+    };
+  }
+  getQuestStatuses() {
+    return this.quests.map((t, e) => {
+      const s = this.results.find((i) => i.questId === t.id);
+      return s ? s.status : e === this.currentIndex && !this.blocked ? "ACTIVE" : this.blocked && e >= this.currentIndex ? "BLOCKED" : "PENDING";
+    });
+  }
+  completeCurrentQuest(t, e) {
+    const s = this.getCurrentQuest();
+    if (!s) return null;
+    const i = {
+      questId: s.id,
+      status: "COMPLETED",
+      timestamp: Date.now(),
+      relativeTime: Date.now() - this.sessionStartTime,
+      voiceMemoBlob: e,
+      logs: t,
+      feedbacks: this.drainFeedbacks()
+    };
+    return this.results.push(i), this.events.emit({ type: "quest:completed", questId: s.id }), this.advance(), i;
+  }
+  failCurrentQuest(t, e, s) {
+    const i = this.getCurrentQuest();
+    if (!i) return null;
+    const n = {
+      questId: i.id,
+      status: "FAILED",
+      timestamp: Date.now(),
+      relativeTime: Date.now() - this.sessionStartTime,
+      voiceMemoBlob: s,
+      logs: t,
+      comment: e,
+      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;
+  }
+  addFeedback(t) {
+    this.pendingFeedbacks.push(t);
+  }
+  getResults() {
+    return [...this.results];
+  }
+  drainFeedbacks() {
+    const t = this.pendingFeedbacks;
+    return this.pendingFeedbacks = [], t;
+  }
+  advance() {
+    this.currentIndex++, this.currentIndex < this.quests.length && this.events.emit({ type: "quest:started", questId: this.quests[this.currentIndex].id });
+  }
+}
+function r(a, t, e) {
+  const s = document.createElement(a);
+  if (t)
+    for (const [i, n] of Object.entries(t))
+      i === "className" ? s.className = n : s.setAttribute(i, n);
+  if (e)
+    for (const i of e)
+      typeof i == "string" ? s.appendChild(document.createTextNode(i)) : s.appendChild(i);
+  return s;
+}
+function I() {
+  return `fl_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`;
+}
+function q(a) {
+  const t = Math.floor(a / 60), e = a % 60;
+  return `${t.toString().padStart(2, "0")}:${e.toString().padStart(2, "0")}`;
+}
+class M {
+  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);
+  }
+  renderQuest(t, e, s) {
+    this.minimized = !1, this.root.className = "fl-quest-overlay", this.root.innerHTML = "";
+    const i = e.indexOf("ACTIVE"), n = r("div", { className: "fl-quest-header" }, [
+      r("div", { className: "fl-quest-header-left" }, [
+        r("span", { className: "fl-quest-badge" }, [`Q${i + 1}/${e.length}`]),
+        r("span", { className: "fl-quest-title" }, [t.title])
+      ]),
+      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 l = r("div", { className: "fl-quest-body" }, [
+      c,
+      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))
+      ]),
+      r("div", { className: "fl-quest-actions" }, [
+        this.createButton("fl-btn fl-btn-ok", "✓ OK", this.callbacks.onOk),
+        this.createButton("fl-btn fl-btn-ng", "✗ NG", this.callbacks.onNg)
+      ])
+    ]);
+    o.appendChild(l), 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(
+      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));
+    };
+  }
+  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" }, [
+      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: "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();
+      }),
+      this.createButton("fl-btn fl-btn-skip", "キャンセル", () => {
+        i && this.callbacks.onNgWithFeedback(""), s.remove();
+      })
+    ]);
+    h.appendChild(f), s.appendChild(h), this.root.appendChild(s), d.focus();
+  }
+  renderSummary(t, e, s) {
+    this.stopTimer(), this.root.className = "fl-quest-overlay", this.root.innerHTML = "";
+    const i = r("div", { className: "fl-summary" }, [
+      r("div", { className: "fl-summary-icon" }, [t === s ? "🎉" : "📋"]),
+      r("div", { className: "fl-summary-title" }, [
+        t === s ? "All Quests Complete!" : "Session Complete"
+      ]),
+      r("div", { className: "fl-summary-subtitle" }, [
+        `${t + e} of ${s} quests attempted`
+      ]),
+      r("div", { className: "fl-summary-stats" }, [
+        this.createStat(t.toString(), "Passed", "fl-ok"),
+        this.createStat(e.toString(), "Failed", "fl-ng")
+      ]),
+      this.createButton("fl-btn fl-btn-finish", "Finish & Upload", this.callbacks.onFinish)
+    ]);
+    this.root.appendChild(i);
+  }
+  renderBlocked(t) {
+    this.stopTimer(), this.root.className = "fl-quest-overlay", this.root.innerHTML = "";
+    const e = r("div", { className: "fl-summary" }, [
+      r("div", { className: "fl-summary-icon" }, ["🛑"]),
+      r("div", { className: "fl-summary-title" }, ["Blocked"]),
+      r("div", { className: "fl-summary-subtitle" }, [
+        `Quest "${t}" is blocking. Session halted.`
+      ]),
+      this.createButton("fl-btn fl-btn-finish", "Finish & Upload", this.callbacks.onFinish)
+    ]);
+    this.root.appendChild(e);
+  }
+  destroy() {
+    this.stopTimer(), this.root.remove();
+  }
+  createMinimizeBtn() {
+    const t = r("button", { className: "fl-quest-minimize-btn" }, ["−"]);
+    return t.onclick = (e) => {
+      e.stopPropagation(), this.minimized = !0, this.root.className = "fl-quest-overlay fl-minimized", this.root.innerHTML = "";
+      const s = r("span", { className: "fl-minimize-icon" }, ["🔍"]);
+      this.root.appendChild(s), this.callbacks.onMinimize();
+    }, t;
+  }
+  createButton(t, e, s) {
+    const i = r("button", { className: t });
+    return i.textContent = e, i.onclick = (n) => {
+      n.stopPropagation(), s();
+    }, i;
+  }
+  createStat(t, e, s) {
+    return r("div", { className: "fl-stat" }, [
+      r("div", { className: `fl-stat-value ${s}` }, [t]),
+      r("div", { className: "fl-stat-label" }, [e])
+    ]);
+  }
+  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);
+    }, 1e3);
+  }
+  stopTimer() {
+    this.timerInterval && (clearInterval(this.timerInterval), this.timerInterval = null);
+  }
+}
+const E = 100, R = 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);
+  }
+  start() {
+    this.running || (this.running = !0, this.startTime = Date.now(), this.actionLogs = [], this.snapshots = [], document.addEventListener("click", this.handleClick, { capture: !0, passive: !0 }), document.addEventListener("scroll", this.handleScroll, { capture: !0, passive: !0 }), document.addEventListener("input", this.handleInput, { capture: !0, passive: !0 }), this.config.recording.domSnapshot && (this.captureSnapshot(), this.snapshotTimer = setInterval(
+      () => this.captureSnapshot(),
+      this.config.recording.snapshotInterval
+    )), this.events.emit({ type: "recording:started" }));
+  }
+  stop() {
+    this.running && (this.running = !1, document.removeEventListener("click", this.handleClick, { capture: !0 }), document.removeEventListener("scroll", this.handleScroll, { capture: !0 }), document.removeEventListener("input", this.handleInput, { capture: !0 }), this.snapshotTimer && (clearInterval(this.snapshotTimer), this.snapshotTimer = null), this.captureSnapshot(), this.events.emit({ type: "recording:stopped" }));
+  }
+  getActionLogs() {
+    return [...this.actionLogs];
+  }
+  getSnapshots() {
+    return [...this.snapshots];
+  }
+  getElapsedMs() {
+    return this.running ? Date.now() - this.startTime : 0;
+  }
+  addLog(t) {
+    this.actionLogs.push({
+      ...t,
+      timestamp: Date.now() - this.startTime
+    });
+  }
+  onClick(t) {
+    const e = t.target;
+    this.addLog({
+      type: "click",
+      target: x(e)
+    });
+  }
+  onScroll() {
+    this.addLog({
+      type: "scroll",
+      value: `${window.scrollX},${window.scrollY}`
+    });
+  }
+  onInput(t) {
+    const e = t.target;
+    if (e.hasAttribute("data-fl-masked"))
+      this.addLog({ type: "input", target: x(e), value: "[MASKED]" });
+    else {
+      const s = e.value;
+      this.addLog({
+        type: "input",
+        target: x(e),
+        value: s == null ? void 0 : s.slice(0, 100)
+      });
+    }
+  }
+  captureSnapshot() {
+    try {
+      const t = document.documentElement.cloneNode(!0);
+      if (this.maskSelector) {
+        const n = t.querySelectorAll(this.maskSelector);
+        for (const o of n)
+          (o instanceof HTMLInputElement || o instanceof HTMLTextAreaElement) && (o.value = "***"), o.textContent = "***";
+      }
+      const e = t.querySelectorAll("script");
+      for (const n of e) n.remove();
+      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({
+        type: "dom-snapshot",
+        timestamp: Date.now() - this.startTime,
+        data: i
+      });
+    } catch {
+    }
+  }
+  throttle(t, e) {
+    let s = 0;
+    return (...i) => {
+      const n = Date.now();
+      n - s >= e && (s = n, t(...i));
+    };
+  }
+}
+function x(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 {
+  constructor(t) {
+    this.events = t, this.mediaRecorder = null, this.stream = null, this.chunks = [], this._recording = !1;
+  }
+  get recording() {
+    return this._recording;
+  }
+  async start() {
+    if (!this._recording)
+      try {
+        this.stream = await navigator.mediaDevices.getUserMedia({ audio: !0 });
+        const t = this.getSupportedMimeType(), e = t ? { mimeType: t } : {};
+        this.mediaRecorder = new MediaRecorder(this.stream, e), this.chunks = [], this.mediaRecorder.ondataavailable = (s) => {
+          s.data.size > 0 && this.chunks.push(s.data);
+        }, this.mediaRecorder.start(1e3), this._recording = !0;
+      } catch (t) {
+        console.warn("[FirstLook] Voice recording unavailable:", t), this.events.emit({
+          type: "error",
+          error: new Error(`Voice recording failed: ${t.message}`)
+        });
+      }
+  }
+  async stopAsync() {
+    return !this._recording || !this.mediaRecorder ? null : new Promise((t) => {
+      this.mediaRecorder.onstop = () => {
+        var s;
+        const e = this.chunks.length > 0 ? new Blob(this.chunks, { type: ((s = this.mediaRecorder) == null ? void 0 : s.mimeType) || "audio/webm" }) : null;
+        this.cleanup(), t(e);
+      }, this.mediaRecorder.stop();
+    });
+  }
+  async captureSnippet(t = 1e4) {
+    return await this.start(), new Promise((e) => {
+      setTimeout(async () => {
+        const s = await this.stopAsync();
+        e(s);
+      }, t);
+    });
+  }
+  cleanup() {
+    if (this._recording = !1, this.stream) {
+      for (const t of this.stream.getTracks())
+        t.stop();
+      this.stream = null;
+    }
+    this.mediaRecorder = null, this.chunks = [];
+  }
+  getSupportedMimeType() {
+    const t = [
+      "audio/webm;codecs=opus",
+      "audio/webm",
+      "audio/ogg;codecs=opus",
+      "audio/mp4"
+    ];
+    for (const e of t)
+      if (typeof MediaRecorder < "u" && MediaRecorder.isTypeSupported(e)) return e;
+    return "";
+  }
+}
+class A {
+  constructor(t, e) {
+    this.shadowRoot = t, this.config = e, this.container = null, this.refreshInterval = null, this.cachedIp = null;
+  }
+  show() {
+    this.container || (this.container = document.createElement("div"), this.container.className = "fl-watermark", this.renderTiles(), this.shadowRoot.appendChild(this.container), this.fetchIp().then(() => this.renderTiles()), this.refreshInterval = setInterval(() => this.renderTiles(), 6e4));
+  }
+  hide() {
+    this.container && (this.container.remove(), this.container = null), this.refreshInterval && (clearInterval(this.refreshInterval), this.refreshInterval = null);
+  }
+  async fetchIp() {
+    if (!this.cachedIp)
+      try {
+        const t = await fetch("https://api.ipify.org?format=text");
+        t.ok && (this.cachedIp = await t.text());
+      } catch {
+        this.cachedIp = "N/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);
+      }
+  }
+}
+class N {
+  constructor(t) {
+    this.selectors = t, this.observer = null, this.maskedElements = /* @__PURE__ */ new Set();
+  }
+  start() {
+    this.scanAndMark(), this.observer = new MutationObserver(() => this.scanAndMark()), this.observer.observe(document.body, {
+      childList: !0,
+      subtree: !0,
+      attributes: !0,
+      attributeFilter: ["type", "class", "data-sensitive", "data-mask"]
+    });
+  }
+  stop() {
+    var t;
+    (t = this.observer) == null || t.disconnect(), this.observer = null;
+    for (const e of this.maskedElements)
+      e.removeAttribute("data-fl-masked");
+    this.maskedElements.clear();
+  }
+  isMasked(t) {
+    return t.hasAttribute("data-fl-masked");
+  }
+  getCombinedSelector() {
+    return this.selectors.join(", ");
+  }
+  scanAndMark() {
+    const t = this.getCombinedSelector();
+    if (t)
+      try {
+        const e = document.querySelectorAll(t);
+        for (const s of e)
+          this.maskedElements.has(s) || (s.setAttribute("data-fl-masked", "true"), this.maskedElements.add(s));
+        for (const s of this.maskedElements)
+          document.contains(s) || this.maskedElements.delete(s);
+      } catch {
+      }
+  }
+}
+const F = "firstlook_uat", z = 1, u = {
+  sessions: "sessions",
+  recordings: "recordings",
+  annotations: "annotations",
+  uploadQueue: "upload_queue"
+};
+class P {
+  constructor() {
+    this.db = null;
+  }
+  async open() {
+    if (!this.db)
+      return new Promise((t, e) => {
+        const s = indexedDB.open(F, z);
+        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 });
+        }, s.onsuccess = () => {
+          this.db = s.result, t();
+        }, s.onerror = () => e(s.error);
+      });
+  }
+  async saveSession(t) {
+    await this.put(u.sessions, t);
+  }
+  async getSession(t) {
+    return this.get(u.sessions, t);
+  }
+  async saveRecording(t, e) {
+    await this.put(u.recordings, { sessionId: t, ...e });
+  }
+  async saveAnnotation(t, e) {
+    await this.put(u.annotations, { sessionId: t, ...e });
+  }
+  async getAnnotations(t) {
+    return this.getAllByIndex(u.annotations, "sessionId", t);
+  }
+  async enqueueUpload(t) {
+    await this.put(u.uploadQueue, {
+      payload: t,
+      createdAt: Date.now(),
+      attempts: 0
+    });
+  }
+  async getPendingUploads() {
+    const t = this.ensureDb();
+    return new Promise((e, s) => {
+      const o = t.transaction(u.uploadQueue, "readonly").objectStore(u.uploadQueue).openCursor(), c = [];
+      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);
+      }, o.onerror = () => s(o.error);
+    });
+  }
+  async removeFromQueue(t) {
+    const e = this.ensureDb();
+    return new Promise((s, i) => {
+      const o = e.transaction(u.uploadQueue, "readwrite").objectStore(u.uploadQueue).delete(t);
+      o.onsuccess = () => s(), o.onerror = () => i(o.error);
+    });
+  }
+  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));
+      }, n.oncomplete = () => s(), n.onerror = () => i(n.error);
+    });
+  }
+  async clearSession(t) {
+    const s = this.ensureDb().transaction(
+      [u.sessions, u.recordings, u.annotations],
+      "readwrite"
+    );
+    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());
+      };
+    }
+    return new Promise((i, n) => {
+      s.oncomplete = () => i(), s.onerror = () => n(s.error);
+    });
+  }
+  close() {
+    var t;
+    (t = this.db) == null || t.close(), this.db = null;
+  }
+  ensureDb() {
+    if (!this.db) throw new Error("[FirstLook] Storage not opened. Call open() first.");
+    return this.db;
+  }
+  async put(t, e) {
+    const s = this.ensureDb();
+    return new Promise((i, n) => {
+      const o = s.transaction(t, "readwrite");
+      o.objectStore(t).put(e), o.oncomplete = () => i(), o.onerror = () => n(o.error);
+    });
+  }
+  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);
+    });
+  }
+  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 k = ["#e17055", "#6c5ce7", "#00b894", "#fdcb6e", "#ffffff"];
+class O {
+  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 = "";
+  }
+  async open() {
+    return this.screenshotDataUrl = await this.captureScreenshot(), new Promise((t) => {
+      this.overlay = r("div", { className: "fl-annotation-overlay" });
+      const e = r("div", { className: "fl-annotation-canvas-wrap" });
+      this.canvas = document.createElement("canvas"), this.canvas.className = "fl-annotation-canvas", e.appendChild(this.canvas), this.overlay.appendChild(e);
+      const s = r("input", {
+        className: "fl-annotation-comment",
+        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);
+      }
+      const n = r("button", { className: "fl-btn fl-btn-ok" }, ["Submit"]);
+      n.onclick = () => {
+        const l = {
+          screenshotDataUrl: this.getAnnotatedImage(),
+          drawings: [...this.paths],
+          comment: s.value,
+          timestamp: Date.now()
+        };
+        this.close(), t(l);
+      };
+      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" }, [
+        i,
+        s,
+        n,
+        o
+      ]);
+      this.overlay.appendChild(c), this.shadowRoot.appendChild(this.overlay), this.initCanvas();
+    });
+  }
+  close() {
+    var t;
+    (t = this.overlay) == null || t.remove(), this.overlay = null, this.canvas = null, this.ctx = null, this.paths = [], this.currentPath = [];
+  }
+  async captureScreenshot() {
+    try {
+      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();
+      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 c = new XMLSerializer().serializeToString(s), l = `<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${e}">
+        <foreignObject width="100%" height="100%">
+          ${c}
+        </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;
+      });
+    } catch {
+      return this.captureScreenshotFallback(window.innerWidth, window.innerHeight);
+    }
+  }
+  captureScreenshotFallback(t, e) {
+    const s = document.createElement("canvas");
+    s.width = t, s.height = e;
+    const i = s.getContext("2d"), n = window.getComputedStyle(document.body);
+    return i.fillStyle = n.backgroundColor || "#ffffff", i.fillRect(0, 0, t, e), i.fillStyle = "#333", i.font = "14px sans-serif", i.fillText(`URL: ${window.location.href}`, 20, 30), i.fillText(`Time: ${(/* @__PURE__ */ new Date()).toISOString()}`, 20, 50), i.fillText("(SVG capture unavailable — metadata view)", 20, 70), s.toDataURL("image/png");
+  }
+  initCanvas() {
+    if (!this.canvas) return;
+    const t = new Image();
+    t.onload = () => {
+      const e = window.innerWidth * 0.9, s = window.innerHeight * 0.7, i = Math.min(e / t.width, s / t.height, 1);
+      this.canvas.width = t.width * i, this.canvas.height = t.height * i, this.ctx = this.canvas.getContext("2d"), this.ctx.drawImage(t, 0, 0, this.canvas.width, this.canvas.height), this.canvas.addEventListener("pointerdown", this.onDrawStart.bind(this)), this.canvas.addEventListener("pointermove", this.onDrawMove.bind(this)), this.canvas.addEventListener("pointerup", this.onDrawEnd.bind(this)), this.canvas.addEventListener("pointerleave", this.onDrawEnd.bind(this));
+    }, t.src = this.screenshotDataUrl;
+  }
+  onDrawStart(t) {
+    this.drawing = !0;
+    const e = this.canvas.getBoundingClientRect();
+    this.currentPath = [{ x: t.clientX - e.left, y: t.clientY - e.top }];
+  }
+  onDrawMove(t) {
+    if (!this.drawing || !this.ctx) return;
+    const e = this.canvas.getBoundingClientRect(), s = { x: t.clientX - e.left, y: t.clientY - e.top };
+    if (this.currentPath.push(s), this.ctx.strokeStyle = this.selectedColor, this.ctx.lineWidth = 3, this.ctx.lineCap = "round", this.ctx.lineJoin = "round", this.currentPath.length >= 2) {
+      const i = this.currentPath[this.currentPath.length - 2];
+      this.ctx.beginPath(), this.ctx.moveTo(i.x, i.y), this.ctx.lineTo(s.x, s.y), this.ctx.stroke();
+    }
+  }
+  onDrawEnd() {
+    this.drawing && this.currentPath.length > 0 && this.paths.push({
+      points: [...this.currentPath],
+      color: this.selectedColor,
+      width: 3
+    }), this.drawing = !1, this.currentPath = [];
+  }
+  getAnnotatedImage() {
+    var t;
+    return ((t = this.canvas) == null ? void 0 : t.toDataURL("image/png")) || this.screenshotDataUrl;
+  }
+}
+class Q {
+  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;
+  }
+  async start() {
+    if (typeof DeviceMotionEvent.requestPermission == "function")
+      try {
+        if (await DeviceMotionEvent.requestPermission() !== "granted") return;
+      } catch {
+        return;
+      }
+    this.handler = this.onMotion.bind(this), window.addEventListener("devicemotion", this.handler, { passive: !0 });
+  }
+  stop() {
+    this.handler && (window.removeEventListener("devicemotion", this.handler), this.handler = null);
+  }
+  onMotion(t) {
+    const e = t.accelerationIncludingGravity;
+    if (!e || e.x == null || e.y == null || e.z == null) return;
+    const s = Math.abs(e.x - this.lastX), i = Math.abs(e.y - this.lastY), n = Math.abs(e.z - this.lastZ);
+    if (s + i + n > this.THRESHOLD) {
+      const o = Date.now();
+      o - this.lastShakeTime < this.SHAKE_INTERVAL ? (this.shakeCount++, this.shakeCount >= this.REQUIRED_SHAKES && (this.shakeCount = 0, this.onShake())) : this.shakeCount = 1, this.lastShakeTime = o;
+    }
+    this.lastX = e.x, this.lastY = e.y, this.lastZ = e.z;
+  }
+}
+class B {
+  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());
+  }
+  async start() {
+    await this.shakeTrigger.start(), document.addEventListener("keydown", this.onKeydown);
+  }
+  stop() {
+    this.shakeTrigger.stop(), document.removeEventListener("keydown", this.onKeydown);
+  }
+  getAnnotations() {
+    return [...this.annotations];
+  }
+  async trigger() {
+    if (!this.active) {
+      this.active = !0;
+      try {
+        const t = await this.annotationCanvas.open();
+        t && (this.annotations.push(t), this.events.emit({ type: "report:submitted" }));
+      } finally {
+        this.active = !1;
+      }
+    }
+  }
+}
+class H {
+  constructor(t, e) {
+    this.requiredTaps = t, this.onActivate = e, this.tapCount = 0, this.tapTimer = null, this.handler = null;
+  }
+  start() {
+    this.handler = this.onTap.bind(this), document.addEventListener("pointerdown", this.handler, { passive: !0 });
+  }
+  stop() {
+    this.handler && (document.removeEventListener("pointerdown", this.handler), this.handler = null), this.reset();
+  }
+  onTap(t) {
+    this.tapCount++, this.tapTimer && clearTimeout(this.tapTimer), this.tapCount >= this.requiredTaps ? (this.reset(), this.onActivate()) : this.tapTimer = setTimeout(() => this.reset(), 800);
+  }
+  reset() {
+    this.tapCount = 0, this.tapTimer && (clearTimeout(this.tapTimer), this.tapTimer = null);
+  }
+}
+class U {
+  constructor(t) {
+    this.onActivate = t, this.hashHandler = null;
+  }
+  start() {
+    this.checkUrl() && this.onActivate(), this.hashHandler = () => {
+      this.checkUrl() && this.onActivate();
+    }, window.addEventListener("hashchange", this.hashHandler);
+  }
+  stop() {
+    this.hashHandler && (window.removeEventListener("hashchange", this.hashHandler), this.hashHandler = null);
+  }
+  checkUrl() {
+    const t = new URLSearchParams(window.location.search);
+    return t.has("firstlook") || t.has("uat-mode");
+  }
+}
+class j {
+  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" });
+    const t = [
+      { icon: "▶", label: "Start Session", action: this.callbacks.onStartSession },
+      { icon: "📸", label: "Report Issue", action: this.callbacks.onReportIssue },
+      { icon: "✖", label: "Close SDK", action: this.callbacks.onClose }
+    ];
+    for (const e of t) {
+      const s = r("button", { className: "fl-debug-menu-item" }, [
+        r("span", { className: "fl-debug-menu-item-icon" }, [e.icon]),
+        e.label
+      ]);
+      s.onclick = (i) => {
+        i.stopPropagation(), this.hide(), e.action();
+      }, this.root.appendChild(s);
+    }
+    this.shadowRoot.appendChild(this.root), setTimeout(() => {
+      this.outsideClickHandler = (e) => {
+        this.root && !this.root.contains(e.target) && this.hide();
+      }, document.addEventListener("click", this.outsideClickHandler, { capture: !0 });
+    }, 100);
+  }
+  hide() {
+    var t;
+    (t = this.root) == null || t.remove(), this.root = null, this.outsideClickHandler && (document.removeEventListener("click", this.outsideClickHandler, { capture: !0 }), this.outsideClickHandler = null);
+  }
+  get visible() {
+    return this.root !== null;
+  }
+}
+const $ = (
+  /* css */
+  `
+  :host {
+    all: initial;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: 14px;
+    color: #1a1a2e;
+    line-height: 1.5;
+  }
+
+  * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  /* === Quest Overlay === */
+  .fl-quest-overlay {
+    position: fixed;
+    bottom: 24px;
+    right: 24px;
+    z-index: 2147483647;
+    width: 360px;
+    max-width: calc(100vw - 48px);
+    background: #ffffff;
+    border-radius: 16px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
+    overflow: hidden;
+    animation: fl-slide-up 0.3s ease-out;
+    border: 1px solid rgba(0, 0, 0, 0.06);
+  }
+
+  .fl-quest-overlay.fl-minimized {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #6c5ce7;
+    box-shadow: 0 4px 16px rgba(108, 92, 231, 0.4);
+  }
+
+  .fl-quest-overlay.fl-minimized .fl-quest-content {
+    display: none;
+  }
+
+  .fl-quest-overlay.fl-minimized .fl-minimize-icon {
+    display: block;
+    color: #fff;
+    font-size: 24px;
+  }
+
+  .fl-minimize-icon {
+    display: none;
+  }
+
+  @keyframes fl-slide-up {
+    from { transform: translateY(20px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+  }
+
+  .fl-quest-header {
+    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
+    color: #fff;
+    padding: 14px 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  }
+
+  .fl-quest-header-left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .fl-quest-badge {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 12px;
+    padding: 2px 10px;
+    font-size: 11px;
+    font-weight: 600;
+    white-space: nowrap;
+    letter-spacing: 0.5px;
+  }
+
+  .fl-quest-title {
+    font-size: 14px;
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .fl-quest-minimize-btn {
+    background: rgba(255, 255, 255, 0.2);
+    border: none;
+    color: #fff;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    flex-shrink: 0;
+    transition: background 0.15s;
+  }
+
+  .fl-quest-minimize-btn:hover {
+    background: rgba(255, 255, 255, 0.3);
+  }
+
+  .fl-quest-body {
+    padding: 16px;
+  }
+
+  .fl-quest-description {
+    font-size: 14px;
+    color: #4a4a5a;
+    margin-bottom: 16px;
+    line-height: 1.6;
+  }
+
+  .fl-quest-progress {
+    display: flex;
+    gap: 4px;
+    margin-bottom: 16px;
+  }
+
+  .fl-quest-progress-dot {
+    height: 4px;
+    flex: 1;
+    border-radius: 2px;
+    background: #e0e0e0;
+    transition: background 0.3s;
+  }
+
+  .fl-quest-progress-dot.fl-completed { background: #00b894; }
+  .fl-quest-progress-dot.fl-failed { background: #e17055; }
+  .fl-quest-progress-dot.fl-active { background: #6c5ce7; }
+
+  .fl-quest-actions {
+    display: flex;
+    gap: 10px;
+  }
+
+  .fl-btn {
+    flex: 1;
+    padding: 10px 16px;
+    border-radius: 10px;
+    border: none;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: transform 0.1s, box-shadow 0.15s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+  }
+
+  .fl-btn:active { transform: scale(0.97); }
+
+  .fl-btn-ok {
+    background: #00b894;
+    color: #fff;
+    box-shadow: 0 2px 8px rgba(0, 184, 148, 0.3);
+  }
+  .fl-btn-ok:hover { box-shadow: 0 4px 12px rgba(0, 184, 148, 0.4); }
+
+  .fl-btn-ng {
+    background: #e17055;
+    color: #fff;
+    box-shadow: 0 2px 8px rgba(225, 112, 85, 0.3);
+  }
+  .fl-btn-ng:hover { box-shadow: 0 4px 12px rgba(225, 112, 85, 0.4); }
+
+  /* === Voice recording indicator === */
+  .fl-voice-indicator {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    background: #fff3f0;
+    border-top: 1px solid rgba(225, 112, 85, 0.1);
+    font-size: 12px;
+    color: #e17055;
+  }
+
+  .fl-voice-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #e17055;
+    animation: fl-pulse 1.2s ease-in-out infinite;
+  }
+
+  @keyframes fl-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.3; }
+  }
+
+  /* === Annotation overlay === */
+  .fl-annotation-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 2147483647;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    animation: fl-fade-in 0.2s ease-out;
+  }
+
+  @keyframes fl-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  .fl-annotation-canvas-wrap {
+    position: relative;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  }
+
+  .fl-annotation-canvas {
+    display: block;
+    cursor: crosshair;
+    max-width: 90vw;
+    max-height: 70vh;
+  }
+
+  .fl-annotation-toolbar {
+    display: flex;
+    gap: 8px;
+    margin-top: 16px;
+    align-items: center;
+  }
+
+  .fl-annotation-toolbar .fl-btn {
+    flex: none;
+    padding: 10px 20px;
+  }
+
+  .fl-annotation-comment {
+    width: 300px;
+    padding: 10px 14px;
+    border-radius: 10px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    background: rgba(255, 255, 255, 0.15);
+    color: #fff;
+    font-size: 14px;
+    outline: none;
+    backdrop-filter: blur(4px);
+    transition: border-color 0.15s;
+  }
+
+  .fl-annotation-comment::placeholder { color: rgba(255, 255, 255, 0.5); }
+  .fl-annotation-comment:focus { border-color: #a29bfe; }
+
+  .fl-color-picker { display: flex; gap: 4px; }
+
+  .fl-color-swatch {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border: 2px solid transparent;
+    cursor: pointer;
+    transition: transform 0.1s;
+  }
+  .fl-color-swatch:hover { transform: scale(1.15); }
+  .fl-color-swatch.fl-selected {
+    border-color: #fff;
+    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.6);
+  }
+
+  /* === Watermark === */
+  .fl-watermark {
+    position: fixed;
+    inset: 0;
+    z-index: 2147483640;
+    pointer-events: none;
+    overflow: hidden;
+    opacity: 0.03;
+  }
+
+  .fl-watermark-tile {
+    position: absolute;
+    font-size: 12px;
+    font-family: monospace;
+    color: #000;
+    white-space: nowrap;
+    transform: rotate(-30deg);
+    user-select: none;
+  }
+
+  /* === Debug Menu === */
+  .fl-debug-menu {
+    position: fixed;
+    bottom: 100px;
+    right: 24px;
+    z-index: 2147483646;
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
+    padding: 8px;
+    min-width: 200px;
+    animation: fl-slide-up 0.2s ease-out;
+    border: 1px solid rgba(0, 0, 0, 0.06);
+  }
+
+  .fl-debug-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 14px;
+    border: none;
+    background: none;
+    width: 100%;
+    text-align: left;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 14px;
+    color: #1a1a2e;
+    transition: background 0.15s;
+  }
+  .fl-debug-menu-item:hover { background: #f0f0f8; }
+
+  .fl-debug-menu-item-icon {
+    font-size: 18px;
+    width: 24px;
+    text-align: center;
+  }
+
+  /* === Session status bar === */
+  .fl-status-bar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 16px;
+    background: #f8f8fc;
+    border-top: 1px solid rgba(0, 0, 0, 0.04);
+    font-size: 11px;
+    color: #888;
+  }
+
+  .fl-status-recording {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: #e17055;
+  }
+
+  .fl-status-timer {
+    margin-left: auto;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* === Completion summary === */
+  .fl-summary { padding: 20px 16px; text-align: center; }
+  .fl-summary-icon { font-size: 48px; margin-bottom: 12px; }
+  .fl-summary-title { font-size: 18px; font-weight: 700; color: #1a1a2e; margin-bottom: 4px; }
+  .fl-summary-subtitle { font-size: 13px; color: #888; margin-bottom: 16px; }
+  .fl-summary-stats { display: flex; justify-content: center; gap: 24px; margin-bottom: 16px; }
+  .fl-stat { text-align: center; }
+  .fl-stat-value { font-size: 24px; font-weight: 700; }
+  .fl-stat-value.fl-ok { color: #00b894; }
+  .fl-stat-value.fl-ng { color: #e17055; }
+  .fl-stat-label { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
+
+  .fl-btn-finish {
+    background: #6c5ce7;
+    color: #fff;
+    width: 100%;
+    box-shadow: 0 2px 8px rgba(108, 92, 231, 0.3);
+  }
+
+  .fl-btn-skip {
+    background: #636e72;
+    color: #fff;
+    box-shadow: 0 2px 8px rgba(99, 110, 114, 0.3);
+  }
+
+  /* === NG Voice Feedback Mode === */
+  .fl-quest-header-ng { background: linear-gradient(135deg, #e17055, #d63031); }
+  .fl-badge-ng { background: rgba(255, 255, 255, 0.25); }
+
+  .fl-feedback-textarea {
+    width: calc(100% - 32px);
+    margin: 8px 16px 16px;
+    padding: 10px 12px;
+    border-radius: 8px;
+    border: 1px solid #ddd;
+    font-size: 13px;
+    font-family: inherit;
+    resize: vertical;
+    outline: none;
+    transition: border-color 0.15s;
+  }
+  .fl-feedback-textarea:focus { border-color: #6c5ce7; }
+  .fl-feedback-textarea-modal { width: calc(100% - 32px); margin: 16px 16px 12px; }
+
+  /* === Memo button === */
+  .fl-quest-memo-row { display: flex; margin-bottom: 10px; }
+  .fl-btn-memo {
+    flex: none;
+    background: #f0f0f8;
+    color: #4a4a5a;
+    font-size: 12px;
+    padding: 6px 12px;
+    box-shadow: none;
+    border-radius: 8px;
+  }
+  .fl-btn-memo:hover { background: #e4e4f0; }
+
+  /* === Feedback modal === */
+  .fl-feedback-modal {
+    position: absolute;
+    inset: 0;
+    background: #fff;
+    border-radius: 16px;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    animation: fl-fade-in 0.15s ease-out;
+  }
+  .fl-feedback-modal-actions { padding: 0 16px 16px; }
+`
+), K = 5;
+class _ {
+  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;
+  }
+  // ----------------------------------------------------------------
+  // Public API
+  // ----------------------------------------------------------------
+  /**
+   * Initialize the SDK with configuration.
+   * This does NOT activate the UI — it only sets up triggers.
+   */
+  async init(t) {
+    if (this.state !== "idle") {
+      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);
+  }
+  /**
+   * Manually activate the SDK UI (bypassing triggers).
+   */
+  activate() {
+    if (this.state !== "initialized") {
+      console.warn("[FirstLook] Cannot activate: SDK not initialized or already active.");
+      return;
+    }
+    this.onActivate();
+  }
+  /**
+   * Start a UAT session with a list of quests.
+   */
+  async startSession(t) {
+    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(
+      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(),
+      onNg: () => this.handleQuestNg(),
+      onNgWithFeedback: (i) => this.handleNgFeedbackSubmit(i),
+      onMemo: (i) => this.handleMemo(i),
+      onFinish: () => this.endSession(),
+      onMinimize: () => {
+      }
+    }), this.questManager.startSession(this.sessionStartTime), this.renderCurrentQuest();
+    const e = this.config.recording.maxDuration;
+    return e > 0 && (this.maxDurationTimer = setTimeout(() => this.endSession(), e * 1e3)), this.backupTimer = setInterval(() => this.backupSession(), 3e4), this.state = "recording", this.events.emit({ type: "session:started", sessionId: this.sessionId }), this.sessionId;
+  }
+  /**
+   * Fetch quest definitions from the API and start a session.
+   */
+  async startSessionFromRemote(t) {
+    if (this.state !== "active")
+      throw new Error("[FirstLook] Cannot start session: SDK not active. Call activate() first.");
+    if (!this.config)
+      throw new Error("[FirstLook] SDK not initialized.");
+    const e = this.config.endpoint.replace(/\/ingest-session$/, ""), s = await fetch(`${e}/export-quests?id=${encodeURIComponent(t)}`, {
+      headers: { "X-API-Key": this.config.apiKey }
+    });
+    if (!s.ok)
+      throw new Error(`[FirstLook] Failed to fetch quest set: ${s.status}`);
+    const n = (await s.json()).quests;
+    return this.startSession(n);
+  }
+  /**
+   * End the current session, persist data, and trigger upload.
+   */
+  async endSession() {
+    var i, n, o, c, l, h, d, f, m, p, g;
+    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();
+    const t = this.questManager.getResults();
+    await Promise.allSettled(
+      t.map(async (b) => {
+        if (b.voiceMemoBlob) {
+          try {
+            b.voiceMemoBase64 = await this.blobToBase64(b.voiceMemoBlob);
+          } catch {
+          }
+          delete b.voiceMemoBlob;
+        }
+        await Promise.allSettled(
+          b.feedbacks.map(async (v) => {
+            if (v.voiceMemoBlob) {
+              try {
+                v.voiceMemoBase64 = await this.blobToBase64(v.voiceMemoBlob);
+              } catch {
+              }
+              delete v.voiceMemoBlob;
+            }
+          })
+        );
+      })
+    );
+    const e = {
+      sessionId: this.sessionId,
+      projectId: this.config.projectId,
+      userId: this.config.userId,
+      role: this.config.role,
+      deviceInfo: w(),
+      startedAt: new Date(this.sessionStartTime).toISOString(),
+      endedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      duration: Math.floor((Date.now() - this.sessionStartTime) / 1e3),
+      quests: t,
+      recordings: ((h = this.sessionRecorder) == null ? void 0 : h.getSnapshots()) ?? []
+    };
+    await ((d = this.storage) == null ? void 0 : d.saveSession(e));
+    const s = ((f = this.shakeReporter) == null ? void 0 : f.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;
+  }
+  /**
+   * Subscribe to SDK events.
+   */
+  on(t, e) {
+    return this.events.on(t, e);
+  }
+  /**
+   * Get current SDK state.
+   */
+  getState() {
+    return this.state;
+  }
+  /**
+   * 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";
+  }
+  // ----------------------------------------------------------------
+  // 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" });
+    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);
+  }
+  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();
+  }
+  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, {
+      onStartSession: () => {
+        this.events.emit({ type: "sdk:activated" });
+      },
+      onReportIssue: () => {
+        var s, i;
+        (i = (s = this.shakeReporter) == null ? void 0 : s.trigger) == null || i.call(s);
+      },
+      onClose: () => {
+        this.destroy();
+      }
+    }), this.debugMenu.show());
+  }
+  handleQuestOk() {
+    if (!this.questManager || !this.sessionRecorder) return;
+    const t = this.sessionRecorder.getActionLogs();
+    this.questManager.completeCurrentQuest(t), this.renderCurrentQuest();
+  }
+  handleQuestNg() {
+    if (!this.questManager || !this.questOverlay) return;
+    const t = this.questManager.getCurrentQuest();
+    t && this.questOverlay.renderFeedbackModal(t.title, "ng");
+  }
+  handleNgFeedbackSubmit(t) {
+    if (!this.questManager || !this.sessionRecorder) return;
+    const e = this.sessionRecorder.getActionLogs();
+    this.questManager.failCurrentQuest(e, t || void 0), this.renderCurrentQuest();
+  }
+  handleMemo(t) {
+    if (!this.questManager || !t) return;
+    const e = {
+      comment: t,
+      timestamp: Date.now(),
+      relativeTime: Date.now() - this.sessionStartTime
+    };
+    this.questManager.addFeedback(e);
+  }
+  renderCurrentQuest() {
+    var s;
+    if (!this.questManager || !this.questOverlay) return;
+    const t = this.questManager.getStatus();
+    if (t.isBlocked) {
+      const i = this.questManager.getCurrentQuest();
+      this.questOverlay.renderBlocked((i == null ? void 0 : i.title) ?? "Unknown");
+      return;
+    }
+    if (t.isFinished) {
+      this.questOverlay.renderSummary(t.completed, t.failed, t.total);
+      return;
+    }
+    const e = this.questManager.getCurrentQuest();
+    e && this.questOverlay.renderQuest(
+      e,
+      this.questManager.getQuestStatuses(),
+      ((s = this.voiceRecorder) == null ? void 0 : s.recording) ?? !1
+    );
+  }
+  async flushUploadQueue(t) {
+    if (!(!this.storage || !this.config || this.isFlushing)) {
+      this.isFlushing = !0;
+      try {
+        if (t) {
+          const s = navigator.connection;
+          if (s && s.type && s.type !== "wifi" && s.effectiveType !== "4g")
+            return;
+        }
+        const e = await this.storage.getPendingUploads();
+        for (const s of e) {
+          if (s.attempts >= K) {
+            await this.storage.removeFromQueue(s.key);
+            continue;
+          }
+          if (s.attempts > 0) {
+            const i = Math.pow(2, s.attempts) * 1e3, n = s.lastAttemptAt ?? 0;
+            if (Date.now() - n < i)
+              continue;
+          }
+          try {
+            (await fetch(this.config.endpoint, {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+                "X-API-Key": this.config.apiKey
+              },
+              body: JSON.stringify(s.payload)
+            })).ok ? await this.storage.removeFromQueue(s.key) : await this.storage.incrementAttempts(s.key);
+          } catch {
+            await this.storage.incrementAttempts(s.key);
+          }
+        }
+      } finally {
+        this.isFlushing = !1;
+      }
+    }
+  }
+  async backupSession() {
+    var t;
+    if (!(!this.storage || !this.sessionId || !this.config || !this.sessionRecorder))
+      try {
+        const e = {
+          sessionId: this.sessionId,
+          projectId: this.config.projectId,
+          userId: this.config.userId,
+          role: this.config.role,
+          deviceInfo: w(),
+          startedAt: new Date(this.sessionStartTime).toISOString(),
+          duration: Math.floor((Date.now() - this.sessionStartTime) / 1e3),
+          quests: ((t = this.questManager) == null ? void 0 : t.getResults()) ?? [],
+          recordings: this.sessionRecorder.getSnapshots()
+        };
+        await this.storage.saveSession(e);
+      } catch {
+      }
+  }
+  blobToBase64(t) {
+    return new Promise((e, s) => {
+      const i = new FileReader();
+      i.onloadend = () => e(i.result), i.onerror = () => s(i.error), i.readAsDataURL(t);
+    });
+  }
+}
+export {
+  _ as FirstLookSDK
+};
+//# sourceMappingURL=firstlook.es.js.map