@primestyleai/tryon 5.10.195 → 5.10.196

package/dist/react/types.d.ts

@@ -264,6 +264,8 @@ export interface PrimeStyleTryonProps {
     style?: CSSProperties;
     /** Optional portal target for modal/dropdown overlays. */
     portalContainer?: Element | DocumentFragment | null;
+    /** Optional Microsoft Clarity project id. Defaults to PrimeStyleAI's SDK replay project. */
+    clarityProjectId?: string;
     onOpen?: () => void;
     onClose?: () => void;
     onUpload?: (file: File) => void;

package/dist/replay.d.ts

@@ -0,0 +1,9 @@
+import type { ApiClient } from "./api-client";
+interface StartSdkReplayInput {
+    client: ApiClient;
+    productId?: string;
+    productTitle?: string;
+    productUrl?: string;
+}
+export declare function startSdkReplay(input: StartSdkReplayInput): () => void;
+export {};

package/dist/storefront/primestyle-tryon.js

@@ -9396,6 +9396,16 @@ function getDeviceHint() {
   return "desktop";
 }
 const DEFAULT_API_URL = "http://localhost:4000";
+function isShopifyProxyBase(baseUrl) {
+  return /\/apps\/primestyle(?:\/|$)/.test(baseUrl) || /\/api\/proxy(?:\/|$)/.test(baseUrl);
+}
+function getShopDomain$2() {
+  if (typeof window === "undefined") return null;
+  const w2 = window;
+  if (w2.Shopify?.shop) return w2.Shopify.shop;
+  const hostname = window.location.hostname;
+  return hostname.endsWith(".myshopify.com") ? hostname : null;
+}
 class ApiClient {
   constructor(apiKey, apiUrl) {
     this.apiKey = apiKey || void 0;
@@ -9547,6 +9557,26 @@ class ApiClient {
     }
     return res.json();
   }
+  async reportReplayChunk(input) {
+    const shopifyProxy = isShopifyProxyBase(this.baseUrl);
+    const shopDomain = shopifyProxy ? getShopDomain$2() : null;
+    const url = shopifyProxy && shopDomain ? `${this.baseUrl}/events/replay` : `${this.baseUrl}/api/v1/tryon/replay`;
+    const headers = shopifyProxy && shopDomain ? jsonHeaders() : this.headers;
+    const body = shopifyProxy && shopDomain ? { shopDomain, ...input } : input;
+    const res = await fetch(url, {
+      method: "POST",
+      headers,
+      body: JSON.stringify(body)
+    });
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({}));
+      throw new PrimeStyleError(
+        data.message || "Failed to report SDK replay",
+        "REPLAY_REPORT_FAILED"
+      );
+    }
+    return res.json();
+  }
   getStreamUrl(jobId) {
     const streamPath = jobId ? `/api/v1/tryon/stream/${encodeURIComponent(jobId)}` : "/api/v1/tryon/stream";
     const streamUrl = `${this.baseUrl}${streamPath}`;
@@ -13212,7 +13242,7 @@ const STYLES = `
   }
 
   /* ── Product photo strip (single-garment, below the size card) ──
-     Three thumbnails per row, evenly spaced, auto-advances. Lives at
+     Two thumbnails per row, evenly spaced, auto-advances. Lives at
      the bottom of the right panel as decoration / entertainment. */
   .ps-tryon-photo-strip {
     margin-top: 0.65vw;
@@ -13231,17 +13261,16 @@ const STYLES = `
   }
   .ps-tryon-photo-strip-row {
     display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 0.45vw;
     animation: ps-tryon-photo-strip-fade 0.5s ease;
   }
   .ps-tryon-photo-strip-row.ps-count-1 {
-    grid-template-columns: minmax(0, calc((100% - 0.9vw) / 3));
+    grid-template-columns: minmax(0, calc((100% - 0.45vw) / 2));
     justify-content: center;
   }
   .ps-tryon-photo-strip-row.ps-count-2 {
-    grid-template-columns: repeat(2, minmax(0, calc((100% - 0.9vw) / 3)));
-    justify-content: center;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
   .ps-tryon-photo-strip-cell {
     position: relative;
@@ -13302,13 +13331,14 @@ const STYLES = `
       gap: 8px;
     }
     .ps-tryon-photo-strip-row {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
+      grid-template-columns: repeat(2, minmax(0, 1fr));
     }
     .ps-tryon-photo-strip-row.ps-count-1 {
-      grid-template-columns: minmax(0, calc((100% - 16px) / 3));
+      grid-template-columns: minmax(0, calc((100% - 8px) / 2));
+      justify-content: center;
     }
     .ps-tryon-photo-strip-row.ps-count-2 {
-      grid-template-columns: repeat(2, minmax(0, calc((100% - 16px) / 3)));
+      grid-template-columns: repeat(2, minmax(0, 1fr));
     }
     .ps-tryon-photo-strip-cell {
       aspect-ratio: 1 / 1; border-radius: 12px;
@@ -22553,16 +22583,16 @@ const STYLES = `
     }
     .ps-tryon-photo-strip-row {
       display: grid !important;
-      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
+      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
       gap: 8px !important;
     }
     .ps-tryon-photo-strip-row.ps-count-1 {
-      grid-template-columns: minmax(0, calc((100% - 16px) / 3)) !important;
+      grid-template-columns: minmax(0, calc((100% - 8px) / 2)) !important;
       justify-content: center !important;
     }
     .ps-tryon-photo-strip-row.ps-count-2 {
-      grid-template-columns: repeat(2, minmax(0, calc((100% - 16px) / 3))) !important;
-      justify-content: center !important;
+      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+      justify-content: stretch !important;
     }
     .ps-tryon-photo-strip-cell {
       aspect-ratio: 1 / 1 !important;
@@ -23236,6 +23266,232 @@ const STYLES = `
     }
   }
 `;
+const RRWEB_SCRIPT_URL = "https://cdn.jsdelivr.net/npm/rrweb@2.0.1/dist/rrweb.min.js";
+const CHUNK_SIZE = 20;
+const FLUSH_MS = 2500;
+const MAX_EVENT_JSON_BYTES = 5e6;
+const MAX_CHUNK_JSON_BYTES = 6e6;
+let globalSequence = 0;
+let rrwebLoadPromise = null;
+function estimateJsonBytes(value) {
+  try {
+    return JSON.stringify(value).length;
+  } catch {
+    return MAX_EVENT_JSON_BYTES + 1;
+  }
+}
+function canRecord() {
+  return typeof window !== "undefined" && typeof document !== "undefined";
+}
+function getLoadedRrwebRecord() {
+  const rrweb = window.rrweb;
+  return typeof rrweb?.record === "function" ? rrweb.record : null;
+}
+function loadRrwebRecord() {
+  const loaded = getLoadedRrwebRecord();
+  if (loaded) return Promise.resolve(loaded);
+  if (rrwebLoadPromise) return rrwebLoadPromise;
+  rrwebLoadPromise = new Promise((resolve) => {
+    const script = document.createElement("script");
+    script.src = RRWEB_SCRIPT_URL;
+    script.async = true;
+    script.crossOrigin = "anonymous";
+    script.onload = () => resolve(getLoadedRrwebRecord());
+    script.onerror = () => resolve(null);
+    document.head.appendChild(script);
+  });
+  return rrwebLoadPromise;
+}
+function startSdkReplay(input) {
+  if (!canRecord()) return () => {
+  };
+  const sessionId = getOrCreateSessionId();
+  const queue = [];
+  let stopped = false;
+  let timer = null;
+  let stopRecord;
+  const flush = (all = false) => {
+    if (timer) {
+      window.clearTimeout(timer);
+      timer = null;
+    }
+    if (!queue.length) return;
+    do {
+      const events = [];
+      let chunkBytes = 0;
+      while (queue.length && events.length < CHUNK_SIZE) {
+        const event = queue[0];
+        const eventBytes = estimateJsonBytes(event);
+        if (events.length && chunkBytes + eventBytes > MAX_CHUNK_JSON_BYTES) break;
+        events.push(queue.shift());
+        chunkBytes += eventBytes;
+        if (chunkBytes >= MAX_CHUNK_JSON_BYTES) break;
+      }
+      if (!events.length) events.push(queue.shift());
+      const sequence = globalSequence++;
+      void input.client.reportReplayChunk({
+        sessionId,
+        sequence,
+        events,
+        productId: input.productId,
+        productTitle: input.productTitle,
+        productUrl: input.productUrl,
+        deviceHint: getDeviceHint()
+      }).catch((error) => {
+        console.warn("[ps-sdk:replay] failed to upload replay chunk", error);
+      });
+    } while (all && queue.length);
+    if (queue.length) scheduleFlush(0);
+  };
+  const scheduleFlush = (delay = FLUSH_MS) => {
+    if (stopped || timer) return;
+    timer = window.setTimeout(flush, delay);
+  };
+  void loadRrwebRecord().then((record) => {
+    if (!record || stopped) return;
+    stopRecord = record({
+      emit(event) {
+        if (stopped) return;
+        if (estimateJsonBytes(event) > MAX_EVENT_JSON_BYTES) return;
+        queue.push(event);
+        if (queue.length >= CHUNK_SIZE) flush();
+        else scheduleFlush();
+      },
+      checkoutEveryNms: 1e4,
+      maskAllInputs: false,
+      maskInputOptions: {
+        password: true,
+        email: true,
+        tel: true
+      },
+      blockClass: "ps-replay-block",
+      blockSelector: "body > *:not([data-ps-tryon-portal]):not(.ps-tryon-root)",
+      inlineStylesheet: true,
+      inlineImages: true,
+      collectFonts: false,
+      recordCanvas: false,
+      recordCrossOriginIframes: false,
+      slimDOMOptions: {
+        script: true,
+        comment: true,
+        headFavicon: true,
+        headMetaDescKeywords: true,
+        headMetaSocial: true,
+        headMetaRobots: true,
+        headMetaHttpEquiv: true,
+        headMetaAuthorship: true,
+        headMetaVerification: true
+      },
+      sampling: {
+        mousemove: 80,
+        mouseInteraction: true,
+        scroll: 150,
+        media: 800,
+        input: "last"
+      },
+      errorHandler(error) {
+        console.warn("[ps-sdk:replay] recorder error", error);
+      }
+    });
+  });
+  return () => {
+    stopped = true;
+    if (timer) {
+      window.clearTimeout(timer);
+      timer = null;
+    }
+    try {
+      stopRecord?.();
+    } catch {
+    }
+    flush(true);
+  };
+}
+var define_process_env_default = {};
+const SCRIPT_ID_PREFIX = "ps-clarity-script";
+const DEFAULT_PROJECT_ID = "wwb75cfm2z";
+let initializedProjectId = null;
+function cleanProjectId(value) {
+  const trimmed = String(value || "").trim();
+  if (!trimmed) return null;
+  return /^[a-z0-9]+$/i.test(trimmed) ? trimmed : null;
+}
+function readEnvProjectId() {
+  let id2 = "";
+  try {
+    id2 = define_process_env_default.NEXT_PUBLIC_PRIMESTYLE_CLARITY_PROJECT_ID ?? "";
+  } catch {
+  }
+  if (!id2) {
+    try {
+      id2 = define_process_env_default.NEXT_PUBLIC_CLARITY_PROJECT_ID ?? "";
+    } catch {
+    }
+  }
+  return cleanProjectId(id2);
+}
+function readWindowProjectId() {
+  if (typeof window === "undefined") return null;
+  const w2 = window;
+  return cleanProjectId(w2.PrimeStyleAIClarityProjectId || w2.PRIMESTYLE_CLARITY_PROJECT_ID);
+}
+function resolveSdkClarityProjectId(projectId) {
+  return cleanProjectId(projectId) || readWindowProjectId() || readEnvProjectId() || DEFAULT_PROJECT_ID;
+}
+function getClarity() {
+  if (typeof window === "undefined") return null;
+  const clarity = window.clarity;
+  return typeof clarity === "function" ? clarity : null;
+}
+function installClarity(projectId) {
+  if (typeof window === "undefined" || typeof document === "undefined") return null;
+  const scriptId = `${SCRIPT_ID_PREFIX}-${projectId}`;
+  if (!document.getElementById(scriptId)) {
+    ((c, l2, a, r2, i) => {
+      c[a] = c[a] || function(...args) {
+        const queued = c[a];
+        (queued.q = queued.q || []).push(args);
+      };
+      const script = l2.createElement(r2);
+      const firstScript = l2.getElementsByTagName(r2)[0];
+      script.id = scriptId;
+      script.async = true;
+      script.src = "https://www.clarity.ms/tag/" + i;
+      firstScript?.parentNode?.insertBefore(script, firstScript);
+    })(window, document, "clarity", "script", projectId);
+  }
+  return getClarity();
+}
+function setTag(key, value) {
+  const clarity = getClarity();
+  if (!clarity || value === void 0 || value === null || value === "") return;
+  try {
+    clarity("set", key, String(value).slice(0, 512));
+  } catch {
+  }
+}
+function tagSdkClaritySession(input = {}) {
+  const sessionId = getOrCreateSessionId();
+  setTag("ps_session", sessionId);
+  setTag("ps_sdk_session", sessionId);
+  setTag("ps_product_id", input.productId || void 0);
+  setTag("ps_product_title", input.productTitle || void 0);
+  setTag("ps_product_url", input.productUrl || void 0);
+  setTag("ps_sdk_view", input.view || void 0);
+  setTag("ps_tryon_job_id", input.jobId || void 0);
+  setTag("ps_source", input.source || void 0);
+}
+function startSdkClarity(input = {}) {
+  if (typeof window === "undefined" || typeof document === "undefined") return false;
+  const projectId = resolveSdkClarityProjectId(input.projectId);
+  {
+    initializedProjectId = initializedProjectId || projectId;
+    installClarity(initializedProjectId);
+  }
+  if (!getClarity()) return false;
+  tagSdkClaritySession(input);
+  return true;
+}
 function CameraIcon$1({ size = 18 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" }),
@@ -24422,8 +24678,8 @@ function MultiSectionMobile({
     sizeGuide ? null : null
   ] });
 }
-const PER_SLIDE = 3;
-const CYCLE_MS = 4e3;
+const PER_SLIDE = 2;
+const CYCLE_MS = 2500;
 function ProductPhotoCarouselCard({
   photos,
   items,
@@ -34727,6 +34983,7 @@ function PrimeStyleTryonInner({
   continueShoppingLabel,
   backToProductPageLabel,
   sizeGuideData,
+  clarityProjectId,
   initialView,
   initialBodyProfileStep
 }) {
@@ -35135,6 +35392,30 @@ function PrimeStyleTryonInner({
       if (pollingRef.current) clearInterval(pollingRef.current);
     };
   }, [apiUrl]);
+  const sdkReplayOpen = view !== "idle";
+  reactExports.useEffect(() => {
+    if (!sdkReplayOpen) return void 0;
+    const client = apiRef.current;
+    if (!client) return void 0;
+    return startSdkReplay({
+      client,
+      productId: effectiveProductId,
+      productTitle: restoredProductTitle || productTitle,
+      productUrl: restoredProductUrl || effectiveProductUrl
+    });
+  }, [sdkReplayOpen, effectiveProductId, effectiveProductUrl, productTitle, restoredProductTitle, restoredProductUrl]);
+  reactExports.useEffect(() => {
+    if (!sdkReplayOpen) return;
+    startSdkClarity({
+      projectId: clarityProjectId,
+      productId: effectiveProductId,
+      productTitle: restoredProductTitle || productTitle,
+      productUrl: restoredProductUrl || effectiveProductUrl,
+      view,
+      jobId: currentTryOnJobIdRef.current,
+      source: shouldUseShopifyCartAttribution(apiUrl) ? "shopify-sdk" : "sdk"
+    });
+  }, [apiUrl, clarityProjectId, effectiveProductId, effectiveProductUrl, productTitle, restoredProductTitle, restoredProductUrl, sdkReplayOpen, view]);
   const reportSdkEvent = reactExports.useCallback((eventType, input = {}) => {
     if (shouldUseShopifyCartAttribution(apiUrl)) return;
     const client = apiRef.current;
@@ -36814,6 +37095,14 @@ function PrimeStyleTryonInner({
         }
       );
       currentTryOnJobIdRef.current = response.jobId;
+      tagSdkClaritySession({
+        productId: effectiveProductId,
+        productTitle: restoredProductTitle || productTitle,
+        productUrl: restoredProductUrl || effectiveProductUrl,
+        view,
+        jobId: response.jobId,
+        source: shouldUseShopifyCartAttribution(apiUrl) ? "shopify-sdk" : "sdk"
+      });
       if (response.modelImageId) modelImageIdRef.current = response.modelImageId;
       onProcessing?.(response.jobId);
       const usePollingOnly = shouldUseShopifyCartAttribution(apiUrl);
@@ -36859,7 +37148,7 @@ function PrimeStyleTryonInner({
       setView("error");
       onError?.({ message, code });
     }
-  }, [selectedFile, productImage, effectiveProductImages, garmentReferenceImage, garmentDetailImage, productTitle, productCategory, productSubcategory, resolvedProductFitType, productType, productTagsList, productDescription, productMaterial, measurementType, sizingResult, sizeGuide, apiUrl, onProcessing, onError, handleVtoUpdate, reportSdkClientError, t2, view]);
+  }, [selectedFile, productImage, effectiveProductImages, garmentReferenceImage, garmentDetailImage, effectiveProductId, effectiveProductUrl, productTitle, restoredProductTitle, restoredProductUrl, productCategory, productSubcategory, resolvedProductFitType, productType, productTagsList, productDescription, productMaterial, measurementType, sizingResult, sizeGuide, apiUrl, onProcessing, onError, handleVtoUpdate, reportSdkClientError, t2, view]);
   reactExports.useEffect(() => {
     if (view !== "size-result") {
       autoTryOnFiredRef.current = false;
@@ -37957,7 +38246,7 @@ function PrimeStyleTryonInner({
         return null;
     }
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cx("ps-tryon-root", cn.root || className), style: { visibility: cssReady ? "visible" : "hidden", ...cssVars, ...style }, suppressHydrationWarning: true, "data-ps-tryon": true, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cx("ps-tryon-root", cn.root || className), style: { visibility: cssReady ? "visible" : "hidden", ...cssVars, ...style }, suppressHydrationWarning: true, "data-ps-tryon": true, "data-clarity-unmask": "true", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "button",
       {
@@ -37971,7 +38260,7 @@ function PrimeStyleTryonInner({
       }
     ),
     view !== "idle" && resolvedPortalContainer && reactDomExports.createPortal(
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx("ps-tryon-overlay", cn.overlay), style: cssVars, "data-ps-tryon-portal": true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cx(`ps-tryon-modal${view === "result" && resultImageUrl && sizingResult || view === "size-result" || view === "estimation-review" || view === "body-profile" || view === "profiles" || view === "no-chart" || view === "photo-guide" || view === "error" ? " ps-tryon-modal-wide" : ""}`, cn.modal), onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx("ps-tryon-overlay", cn.overlay), style: cssVars, "data-ps-tryon-portal": true, "data-clarity-unmask": "true", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cx(`ps-tryon-modal${view === "result" && resultImageUrl && sizingResult || view === "size-result" || view === "estimation-review" || view === "body-profile" || view === "profiles" || view === "no-chart" || view === "photo-guide" || view === "error" ? " ps-tryon-modal-wide" : ""}`, cn.modal), onClick: (e) => e.stopPropagation(), "data-clarity-unmask": "true", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cx("ps-tryon-header ps-tryon-header-minimal", cn.header), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "a",
@@ -38129,7 +38418,7 @@ function PrimeStyleTryonInner({
           resolvedPortalContainer
         ),
         view !== "body-profile" && view !== "processing" && !(view === "size-result" && sizeGuide?.sections && Object.keys(sizeGuide.sections).length > 1) && /* @__PURE__ */ jsxRuntimeExports.jsx(Stepper, { view, stepIndex }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: bodyRef, className: cx("ps-tryon-body", cn.body), style: { position: "relative", overflow: drawer ? "hidden" : void 0 }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: bodyRef, className: cx("ps-tryon-body", cn.body), style: { position: "relative", overflow: drawer ? "hidden" : void 0 }, "data-clarity-unmask": "true", children: [
           showBackButton && /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "ps-tryon-back-btn", onClick: handleBack, children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "18", height: "12", viewBox: "0 0 18 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "17", y1: "6", x2: "1", y2: "6" }),
@@ -38777,7 +39066,8 @@ function buildPropsFromDataAttrs(data) {
     sizingCountry: data.sizingCountry,
     showPoweredBy: data.showPoweredBy === "true",
     buttonStyles: parseJsonAttr(data.buttonStyles, void 0),
-    modalStyles: parseJsonAttr(data.modalStyles, void 0)
+    modalStyles: parseJsonAttr(data.modalStyles, void 0),
+    clarityProjectId: data.clarityProjectId
   };
   console.log(`${TAG} built props`, props);
   return props;

package/dist/types.d.ts

@@ -12,6 +12,8 @@ export interface PrimeStyleConfig {
     locale?: string;
     /** Show "Powered by PrimeStyle" badge (defaults to true) */
     showPoweredBy?: boolean;
+    /** Microsoft Clarity project id for SDK session replay. Defaults to PrimeStyleAI's SDK replay project. */
+    clarityProjectId?: string;
 }
 /** Button customization options */
 export interface ButtonStyles {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primestyleai/tryon",
-  "version": "5.10.195",
+  "version": "5.10.196",
   "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
   "type": "module",
   "main": "dist/primestyle-tryon.js",