@primestyleai/tryon 5.10.194 → 5.10.196

package/dist/primestyle-tryon.js

@@ -1,7 +1,7 @@
 "use client";
-import { c as l, A as c, S as h, i as u, a as m } from "./index-BiotPzcm.js";
-import { P as x, b as w, T as C, d as k, e as U, r as S } from "./index-BiotPzcm.js";
-function d() {
+import { c as l, A as c, s as h, t as u, i as m, a as g, S as y } from "./index-8lZs7T93.js";
+import { P as C, b as S, T as k, d as E, e as U, r as I } from "./index-8lZs7T93.js";
+function p() {
   const i = document.querySelector(
     'meta[property="og:image"]'
   );
@@ -9,9 +9,9 @@ function d() {
   const t = document.querySelectorAll(
     'script[type="application/ld+json"]'
   );
-  for (const s of t)
+  for (const r of t)
     try {
-      const r = JSON.parse(s.textContent || ""), o = p(r);
+      const s = JSON.parse(r.textContent || ""), o = d(s);
       if (o) return o;
     } catch {
     }
@@ -26,21 +26,21 @@ function d() {
     ".woocommerce-product-gallery img",
     ".product-media img"
   ];
-  for (const s of e) {
-    const r = document.querySelector(s);
-    if (r) {
-      const o = r.src || r.dataset.src || r.dataset.zoom;
+  for (const r of e) {
+    const s = document.querySelector(r);
+    if (s) {
+      const o = s.src || s.dataset.src || s.dataset.zoom;
       if (o) return o;
     }
   }
   return null;
 }
-function p(i) {
+function d(i) {
   if (!i || typeof i != "object") return null;
   if (Array.isArray(i)) {
     for (const e of i) {
-      const s = p(e);
-      if (s) return s;
+      const r = d(e);
+      if (r) return r;
     }
     return null;
   }
@@ -50,14 +50,14 @@ function p(i) {
     if (typeof e == "string") return e;
     if (Array.isArray(e) && typeof e[0] == "string") return e[0];
     if (e && typeof e == "object") {
-      const s = e;
-      if (typeof s.url == "string") return s.url;
-      if (typeof s.contentUrl == "string") return s.contentUrl;
+      const r = e;
+      if (typeof r.url == "string") return r.url;
+      if (typeof r.contentUrl == "string") return r.contentUrl;
     }
   }
-  return Array.isArray(t["@graph"]) ? p(t["@graph"]) : null;
+  return Array.isArray(t["@graph"]) ? d(t["@graph"]) : null;
 }
-function g() {
+function b() {
   return `
     :host {
       display: inline-block;
@@ -440,9 +440,9 @@ const n = {
   x: '<svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',
   alert: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>'
 };
-class b extends HTMLElement {
+class v extends HTMLElement {
   constructor() {
-    super(), this.apiClient = null, this.sseClient = null, this.sseUnsubscribe = null, this.state = "idle", this.selectedFile = null, this.previewUrl = null, this.resultImageUrl = null, this.errorMessage = null, this.currentJobId = null, this.productImageUrl = null, this.t = l(), this.buttonStyles = {}, this.modalStyles = {}, this.savedScrollY = 0, this.shadow = this.attachShadow({ mode: "open" });
+    super(), this.apiClient = null, this.sseClient = null, this.sseUnsubscribe = null, this.state = "idle", this.selectedFile = null, this.previewUrl = null, this.resultImageUrl = null, this.errorMessage = null, this.currentJobId = null, this.productImageUrl = null, this.productViewReportedFor = null, this.t = l(), this.buttonStyles = {}, this.modalStyles = {}, this.savedScrollY = 0, this.shadow = this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
     return [
@@ -452,6 +452,7 @@ class b extends HTMLElement {
       "button-text",
       "locale",
       "show-powered-by",
+      "clarity-project-id",
       "button-styles",
       "modal-styles"
     ];
@@ -462,15 +463,15 @@ class b extends HTMLElement {
   disconnectedCallback() {
     this.cleanup();
   }
-  attributeChangedCallback(t, e, s) {
-    if ((t === "api-key" || t === "api-url") && this.initApi(), t === "locale" && (this.t = l(s || void 0)), t === "product-image" && (this.productImageUrl = s), t === "button-styles")
+  attributeChangedCallback(t, e, r) {
+    if ((t === "api-key" || t === "api-url") && this.initApi(), t === "locale" && (this.t = l(r || void 0)), t === "product-image" && (this.productImageUrl = r), t === "button-styles")
       try {
-        this.buttonStyles = JSON.parse(s);
+        this.buttonStyles = JSON.parse(r);
       } catch {
       }
     if (t === "modal-styles")
       try {
-        this.modalStyles = JSON.parse(s);
+        this.modalStyles = JSON.parse(r);
       } catch {
       }
     this.isConnected && this.render();
@@ -492,7 +493,7 @@ class b extends HTMLElement {
   }
   /** Open the try-on modal */
   open() {
-    this.state = "upload", this.lockBodyScroll(), this.render(), this.emit("ps:open");
+    this.reportEvent("SDK_OPENED", { metadata: { component: "PrimeStyleTryonElement" } }), this.state = "upload", this.tagClarity("upload"), this.lockBodyScroll(), this.render(), this.emit("ps:open");
   }
   /** Close the try-on modal */
   close() {
@@ -500,7 +501,7 @@ class b extends HTMLElement {
   }
   /** Detect product image from the current page */
   detectProduct() {
-    const t = d();
+    const t = p();
     return t && (this.productImageUrl = t, this.emit("ps:product-detected", { imageUrl: t })), t;
   }
   // ── Private ─────────────────────────────────
@@ -517,12 +518,12 @@ class b extends HTMLElement {
         this.modalStyles = JSON.parse(e);
       } catch {
       }
-    const s = this.getAttribute("locale");
-    s && (this.t = l(s)), this.productImageUrl = this.getAttribute("product-image") || null, this.productImageUrl || (this.productImageUrl = d(), this.productImageUrl && this.emit("ps:product-detected", { imageUrl: this.productImageUrl })), this.initApi();
+    const r = this.getAttribute("locale");
+    r && (this.t = l(r)), this.productImageUrl = this.getAttribute("product-image") || null, this.productImageUrl || (this.productImageUrl = p(), this.productImageUrl && this.emit("ps:product-detected", { imageUrl: this.productImageUrl })), this.initApi(), this.reportProductView();
   }
   initApi() {
     const t = this.getAttribute("api-key") || void 0, e = this.getAttribute("api-url") || void 0;
-    this.apiClient = new c(t, e), this.sseClient = new h(this.apiClient.getStreamUrl());
+    this.apiClient = new c(t, e), this.sseClient = null;
   }
   cleanup() {
     this.state !== "idle" && this.unlockBodyScroll(), this.sseUnsubscribe && (this.sseUnsubscribe(), this.sseUnsubscribe = null), this.sseClient && (this.sseClient.disconnect(), this.sseClient = null), this.previewUrl && URL.revokeObjectURL(this.previewUrl);
@@ -532,6 +533,42 @@ class b extends HTMLElement {
       new CustomEvent(t, { bubbles: !0, composed: !0, detail: e })
     );
   }
+  get eventProductContext() {
+    return {
+      productId: this.getAttribute("product-id") || this.productImageUrl || void 0,
+      productTitle: this.getAttribute("product-title") || document.title || void 0,
+      productUrl: typeof window < "u" ? window.location.href : void 0
+    };
+  }
+  reportProductView() {
+    const t = `${this.eventProductContext.productId || ""}|${this.eventProductContext.productUrl || ""}`;
+    !t.trim() || this.productViewReportedFor === t || (this.productViewReportedFor = t, this.tagClarity("idle"), this.reportEvent("PRODUCT_VIEW", { metadata: { component: "PrimeStyleTryonElement" } }));
+  }
+  tagClarity(t, e) {
+    const r = {
+      projectId: this.getAttribute("clarity-project-id"),
+      ...this.eventProductContext,
+      view: t,
+      jobId: e,
+      source: "custom-element-sdk"
+    };
+    h(r), u(r);
+  }
+  reportEvent(t, e = {}) {
+    this.apiClient?.reportEvent({
+      eventType: t,
+      ...this.eventProductContext,
+      ...e
+    }).catch(() => {
+    });
+  }
+  reportClientError(t) {
+    this.apiClient?.reportClientError({
+      ...this.eventProductContext,
+      ...t
+    }).catch(() => {
+    });
+  }
   get buttonText() {
     return this.getAttribute("button-text") || this.t("Virtual Try-On");
   }
@@ -542,11 +579,11 @@ class b extends HTMLElement {
   render() {
     this.shadow.innerHTML = "";
     const t = document.createElement("style");
-    t.textContent = g(), this.shadow.appendChild(t);
+    t.textContent = b(), this.shadow.appendChild(t);
     const e = this.createButton();
     if (this.shadow.appendChild(e), this.state !== "idle") {
-      const s = this.createModal();
-      this.shadow.appendChild(s), requestAnimationFrame(() => s.classList.add("ps-open"));
+      const r = this.createModal();
+      this.shadow.appendChild(r), requestAnimationFrame(() => r.classList.add("ps-open"));
     }
     this.applyButtonStyles(), this.applyModalStyles();
   }
@@ -556,19 +593,19 @@ class b extends HTMLElement {
   }
   createModal() {
     const t = document.createElement("div");
-    t.className = "ps-overlay", t.addEventListener("click", (a) => {
+    t.className = "ps-overlay", t.setAttribute("data-clarity-unmask", "true"), t.addEventListener("click", (a) => {
       a.target === t && this.close();
     });
     const e = document.createElement("div");
-    e.className = "ps-modal";
-    const s = document.createElement("div");
-    s.className = "ps-header", s.innerHTML = `
+    e.className = "ps-modal", e.setAttribute("data-clarity-unmask", "true");
+    const r = document.createElement("div");
+    r.className = "ps-header", r.innerHTML = `
       <span class="ps-header-title">${this.t("Virtual Try-On")}</span>
     `;
-    const r = document.createElement("button");
-    r.className = "ps-close", r.innerHTML = n.x, r.addEventListener("click", () => this.close()), s.appendChild(r), e.appendChild(s);
+    const s = document.createElement("button");
+    s.className = "ps-close", s.innerHTML = n.x, s.addEventListener("click", () => this.close()), r.appendChild(s), e.appendChild(r);
     const o = document.createElement("div");
-    switch (o.className = "ps-body", this.state) {
+    switch (o.className = "ps-body", o.setAttribute("data-clarity-unmask", "true"), this.state) {
       case "upload":
         o.appendChild(this.createUploadView());
         break;
@@ -593,32 +630,32 @@ class b extends HTMLElement {
     if (this.selectedFile && this.previewUrl) {
       const e = document.createElement("div");
       e.className = "ps-preview";
-      const s = document.createElement("img");
-      s.src = this.previewUrl, s.alt = this.t("Your photo"), e.appendChild(s);
-      const r = document.createElement("button");
-      r.className = "ps-preview-remove", r.textContent = "×", r.addEventListener("click", () => {
+      const r = document.createElement("img");
+      r.src = this.previewUrl, r.alt = this.t("Your photo"), e.appendChild(r);
+      const s = document.createElement("button");
+      s.className = "ps-preview-remove", s.textContent = "×", s.addEventListener("click", () => {
         this.resetUpload(), this.render();
-      }), e.appendChild(r), t.appendChild(e);
+      }), e.appendChild(s), t.appendChild(e);
       const o = document.createElement("button");
       o.className = "ps-submit", o.textContent = this.t("Try It On"), o.addEventListener("click", () => this.handleSubmit()), t.appendChild(o);
     } else {
       const e = document.createElement("div");
       e.className = "ps-upload-zone";
-      const s = document.createElement("input");
-      s.type = "file", s.accept = "image/jpeg,image/png,image/webp", s.addEventListener("change", (r) => {
-        const o = r.target.files?.[0];
+      const r = document.createElement("input");
+      r.type = "file", r.accept = "image/jpeg,image/png,image/webp", r.addEventListener("change", (s) => {
+        const o = s.target.files?.[0];
         o && this.handleFileSelect(o);
       }), e.innerHTML = `
         <svg class="ps-upload-icon" viewBox="0 0 24 24">${n.upload.replace(/<\/?svg[^>]*>/g, "")}</svg>
         <p class="ps-upload-text">${this.t("Drop your photo here or click to upload")}</p>
         <p class="ps-upload-hint">${this.t("JPEG, PNG or WebP (max 10MB)")}</p>
-      `, e.appendChild(s), e.addEventListener("click", () => s.click()), e.addEventListener("dragover", (r) => {
-        r.preventDefault(), e.classList.add("ps-drag-over");
+      `, e.appendChild(r), e.addEventListener("click", () => r.click()), e.addEventListener("dragover", (s) => {
+        s.preventDefault(), e.classList.add("ps-drag-over");
       }), e.addEventListener("dragleave", () => {
         e.classList.remove("ps-drag-over");
-      }), e.addEventListener("drop", (r) => {
-        r.preventDefault(), e.classList.remove("ps-drag-over");
-        const o = r.dataTransfer?.files?.[0];
+      }), e.addEventListener("drop", (s) => {
+        s.preventDefault(), e.classList.remove("ps-drag-over");
+        const o = s.dataTransfer?.files?.[0];
         o && this.handleFileSelect(o);
       }), t.appendChild(e);
     }
@@ -640,12 +677,12 @@ class b extends HTMLElement {
     }
     const e = document.createElement("div");
     e.className = "ps-result-actions";
-    const s = document.createElement("button");
-    s.className = "ps-btn-download", s.textContent = this.t("Download"), s.addEventListener("click", () => this.handleDownload()), e.appendChild(s);
     const r = document.createElement("button");
-    return r.className = "ps-btn-retry", r.textContent = this.t("Try Another"), r.addEventListener("click", () => {
+    r.className = "ps-btn-download", r.textContent = this.t("Download"), r.addEventListener("click", () => this.handleDownload()), e.appendChild(r);
+    const s = document.createElement("button");
+    return s.className = "ps-btn-retry", s.textContent = this.t("Try Another"), s.addEventListener("click", () => {
       this.resetUpload(), this.state = "upload", this.render();
-    }), e.appendChild(r), t.appendChild(e), t;
+    }), e.appendChild(s), t.appendChild(e), t;
   }
   createErrorView() {
     const t = document.createElement("div");
@@ -660,55 +697,97 @@ class b extends HTMLElement {
   }
   // ── Handlers ────────────────────────────────
   handleFileSelect(t) {
-    if (!u(t)) {
-      this.errorMessage = this.t("Please upload a JPEG, PNG, or WebP image."), this.state = "error", this.render();
+    if (!m(t)) {
+      this.errorMessage = this.t("Please upload a JPEG, PNG, or WebP image."), this.state = "error", this.reportClientError({
+        message: "Invalid image file type",
+        code: "INVALID_FILE",
+        component: "PrimeStyleTryonElement",
+        view: "upload",
+        severity: "low",
+        metadata: { fileType: t.type, fileSize: t.size }
+      }), this.render();
       return;
     }
     if (t.size > 10 * 1024 * 1024) {
-      this.errorMessage = this.t("Image must be under 10MB."), this.state = "error", this.render();
+      this.errorMessage = this.t("Image must be under 10MB."), this.state = "error", this.reportClientError({
+        message: "Image file too large",
+        code: "FILE_TOO_LARGE",
+        component: "PrimeStyleTryonElement",
+        view: "upload",
+        severity: "low",
+        metadata: { fileType: t.type, fileSize: t.size }
+      }), this.render();
       return;
     }
-    this.selectedFile = t, this.previewUrl = URL.createObjectURL(t), this.emit("ps:upload", { file: t }), this.render();
+    this.selectedFile = t, this.previewUrl = URL.createObjectURL(t), this.reportEvent("PHOTO_UPLOADED", {
+      metadata: { fileType: t.type, fileSize: t.size, component: "PrimeStyleTryonElement" }
+    }), this.emit("ps:upload", { file: t }), this.render();
   }
   async handleSubmit() {
-    if (!this.selectedFile || !this.apiClient || !this.sseClient) {
-      this.errorMessage = this.t("SDK not configured. Please provide an API key."), this.state = "error", this.render();
+    if (!this.selectedFile || !this.apiClient) {
+      this.errorMessage = this.t("SDK not configured. Please provide an API key."), this.state = "error", this.reportClientError({
+        message: this.errorMessage,
+        code: this.apiClient ? "PHOTO_MISSING" : "SDK_NOT_CONFIGURED",
+        component: "PrimeStyleTryonElement",
+        view: "upload",
+        severity: this.apiClient ? "low" : "high"
+      }), this.render();
       return;
     }
     if (!this.productImageUrl) {
-      this.errorMessage = this.t("No product image found. Please set the product-image attribute."), this.state = "error", this.render();
+      this.errorMessage = this.t("No product image found. Please set the product-image attribute."), this.state = "error", this.reportClientError({
+        message: this.errorMessage,
+        code: "PRODUCT_IMAGE_MISSING",
+        component: "PrimeStyleTryonElement",
+        view: "upload",
+        severity: "medium"
+      }), this.render();
       return;
     }
-    this.state = "processing", this.render();
+    this.state = "processing", this.tagClarity("processing"), this.render();
     try {
-      const t = await m(this.selectedFile), e = await this.apiClient.submitTryOn(
+      const t = await g(this.selectedFile), e = await this.apiClient.submitTryOn(
         t,
         this.productImageUrl
       );
-      this.currentJobId = e.jobId, this.emit("ps:processing", { jobId: e.jobId }), this.sseUnsubscribe = this.sseClient.onJob(
+      this.currentJobId = e.jobId, this.tagClarity("processing", e.jobId), this.emit("ps:processing", { jobId: e.jobId }), this.sseClient?.disconnect(), this.sseClient = new y(e.streamUrl || this.apiClient.getStreamUrl(e.jobId)), this.sseUnsubscribe = this.sseClient.onJob(
         e.jobId,
-        (s) => this.handleVtoUpdate(s)
+        (r) => this.handleVtoUpdate(r)
       ), this.startPolling(e.jobId);
     } catch (t) {
       const e = t instanceof Error ? t.message : this.t("Failed to start try-on");
-      this.errorMessage = e, this.state = "error", this.emit("ps:error", { message: e, code: t?.code }), this.render();
+      this.errorMessage = e, this.state = "error", this.reportClientError({
+        message: e,
+        code: t?.code || "TRYON_SUBMIT_FAILED",
+        stack: t instanceof Error ? t.stack : void 0,
+        component: "PrimeStyleTryonElement",
+        view: "processing",
+        severity: "medium"
+      }), this.emit("ps:error", { message: e, code: t?.code }), this.render();
     }
   }
   handleVtoUpdate(t) {
-    t.status === "completed" && t.imageUrl ? (this.state !== "result" || this.resultImageUrl?.startsWith("data:") && !t.imageUrl.startsWith("data:")) && (this.resultImageUrl = t.imageUrl, this.state = "result", this.emit("ps:complete", {
+    t.status === "completed" && t.imageUrl ? (this.state !== "result" || this.resultImageUrl?.startsWith("data:") && !t.imageUrl.startsWith("data:")) && (this.resultImageUrl = t.imageUrl, this.state = "result", this.tagClarity("result", t.galleryId), this.emit("ps:complete", {
       jobId: t.galleryId,
       imageUrl: t.imageUrl
-    }), this.render()) : t.status === "failed" && (this.errorMessage = t.error || this.t("Try-on generation failed"), this.state = "error", this.emit("ps:error", { message: this.errorMessage }), this.render());
+    }), this.render()) : t.status === "failed" && (this.errorMessage = t.error || this.t("Try-on generation failed"), this.state = "error", this.tagClarity("error", t.galleryId), this.reportClientError({
+      message: this.errorMessage,
+      code: "TRYON_GENERATION_FAILED",
+      component: "PrimeStyleTryonElement",
+      view: "processing",
+      severity: "medium",
+      jobId: t.galleryId
+    }), this.emit("ps:error", { message: this.errorMessage }), this.render());
   }
   startPolling(t) {
     let e = 0;
-    const s = 60, r = setInterval(async () => {
-      if (e++, e > s || this.state === "result" || this.state === "idle") {
-        clearInterval(r);
+    const r = 60, s = setInterval(async () => {
+      if (e++, e > r || this.state === "result" || this.state === "idle") {
+        clearInterval(s);
         return;
       }
       if (!this.apiClient) {
-        clearInterval(r);
+        clearInterval(s);
         return;
       }
       try {
@@ -719,13 +798,13 @@ class b extends HTMLElement {
           imageUrl: o.imageUrl,
           error: null,
           timestamp: Date.now()
-        }), clearInterval(r)) : o.status === "failed" && (this.state === "processing" && this.handleVtoUpdate({
+        }), clearInterval(s)) : o.status === "failed" && (this.state === "processing" && this.handleVtoUpdate({
           galleryId: t,
           status: "failed",
           imageUrl: null,
           error: o.message,
           timestamp: Date.now()
-        }), clearInterval(r));
+        }), clearInterval(s));
       } catch {
       }
     }, 2e3);
@@ -734,8 +813,8 @@ class b extends HTMLElement {
     if (!this.resultImageUrl) return;
     const t = document.createElement("a");
     t.href = this.resultImageUrl, t.download = `primestyle-tryon-${Date.now()}.png`, t.target = "_blank", this.resultImageUrl.startsWith("data:") ? t.click() : fetch(this.resultImageUrl).then((e) => e.blob()).then((e) => {
-      const s = URL.createObjectURL(e);
-      t.href = s, t.click(), setTimeout(() => URL.revokeObjectURL(s), 100);
+      const r = URL.createObjectURL(e);
+      t.href = r, t.click(), setTimeout(() => URL.revokeObjectURL(r), 100);
     }).catch(() => {
       window.open(this.resultImageUrl, "_blank");
     });
@@ -770,9 +849,9 @@ class b extends HTMLElement {
       iconColor: "--ps-btn-icon-color",
       boxShadow: "--ps-btn-shadow"
     };
-    for (const [s, r] of Object.entries(e)) {
-      const o = this.buttonStyles[s];
-      o && this.style.setProperty(r, o);
+    for (const [r, s] of Object.entries(e)) {
+      const o = this.buttonStyles[r];
+      o && this.style.setProperty(s, o);
     }
   }
   applyModalStyles() {
@@ -808,26 +887,26 @@ class b extends HTMLElement {
       successColor: "--ps-success-color",
       logoHeight: "--ps-logo-height"
     };
-    for (const [e, s] of Object.entries(t)) {
-      const r = this.modalStyles[e];
-      r && this.style.setProperty(s, r);
+    for (const [e, r] of Object.entries(t)) {
+      const s = this.modalStyles[e];
+      s && this.style.setProperty(r, s);
     }
   }
 }
-typeof window < "u" && !customElements.get("primestyle-tryon") && customElements.define("primestyle-tryon", b);
+typeof window < "u" && !customElements.get("primestyle-tryon") && customElements.define("primestyle-tryon", v);
 export {
   c as ApiClient,
-  x as PrimeStyleError,
-  b as PrimeStyleTryon,
-  w as SUPPORTED_LOCALES,
-  h as SseClient,
-  C as TRANSLATION_KEYS,
-  k as checkAgeBeforeUpload,
-  m as compressImage,
+  C as PrimeStyleError,
+  v as PrimeStyleTryon,
+  S as SUPPORTED_LOCALES,
+  y as SseClient,
+  k as TRANSLATION_KEYS,
+  E as checkAgeBeforeUpload,
+  g as compressImage,
   l as createT,
   U as detectLanguage,
-  d as detectProductImage,
-  u as isValidImageFile,
-  S as registerLocale
+  p as detectProductImage,
+  m as isValidImageFile,
+  I as registerLocale
 };
 //# sourceMappingURL=primestyle-tryon.js.map