@primestyleai/tryon 3.6.4 → 3.6.6

package/dist/react/index.js

@@ -261,11 +261,11 @@ function PrimeStyleTryonInner({
   const progressBarRef = useRef(null);
   const progressTextRef = useRef(null);
   const progressStatusRef = useRef(null);
+  const progressIntervalRef = useRef(null);
   useEffect(() => {
     if (view === "processing") {
+      if (progressIntervalRef.current) return;
       progressRef.current = 0;
-      if (progressBarRef.current) progressBarRef.current.style.width = "0%";
-      if (progressTextRef.current) progressTextRef.current.textContent = "0%";
       const statuses = [
         { at: 0, text: "Preparing your image..." },
         { at: 15, text: "Analyzing body proportions..." },
@@ -274,7 +274,7 @@ function PrimeStyleTryonInner({
         { at: 75, text: "Refining details..." },
         { at: 90, text: "Almost there..." }
       ];
-      const interval = setInterval(() => {
+      progressIntervalRef.current = setInterval(() => {
         const p = progressRef.current;
         if (p >= 100) return;
         const increment = p < 30 ? 1.2 : p < 60 ? 0.8 : p < 80 ? 0.4 : p < 95 ? 0.15 : 0;
@@ -287,7 +287,15 @@ function PrimeStyleTryonInner({
           if (status) progressStatusRef.current.textContent = status.text;
         }
       }, 200);
-      return () => clearInterval(interval);
+      return () => {
+        clearInterval(progressIntervalRef.current);
+        progressIntervalRef.current = null;
+      };
+    } else {
+      if (progressIntervalRef.current) {
+        clearInterval(progressIntervalRef.current);
+        progressIntervalRef.current = null;
+      }
     }
   }, [view]);
   useEffect(() => {
@@ -814,6 +822,7 @@ function PrimeStyleTryonInner({
   function UploadView() {
     return /* @__PURE__ */ jsx(Fragment, { children: selectedFile && previewUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-preview", cn.preview), children: [
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-preview-blur", style: { backgroundImage: `url(${previewUrl})` } }),
         /* @__PURE__ */ jsx("img", { src: previewUrl, alt: "Your photo", className: cn.previewImage }),
         /* @__PURE__ */ jsx("button", { onClick: handleRemovePreview, className: cx("ps-tryon-preview-remove", cn.removeButton), children: "×" })
       ] }),
@@ -1070,6 +1079,17 @@ function PrimeStyleTryonInner({
     ] }, `form-${formGender}-${sizingUnit}-${heightUnit}-${sizingCountry}-${formKey}`);
   }
   function ProcessingView() {
+    const barCb = useCallback((el) => {
+      progressBarRef.current = el;
+      if (el) el.style.width = `${Math.round(progressRef.current)}%`;
+    }, []);
+    const pctCb = useCallback((el) => {
+      progressTextRef.current = el;
+      if (el) el.textContent = `${Math.round(progressRef.current)}%`;
+    }, []);
+    const statusCb = useCallback((el) => {
+      progressStatusRef.current = el;
+    }, []);
     return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-processing", children: [
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-processing-image-wrap", children: [
         previewUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1080,10 +1100,10 @@ function PrimeStyleTryonInner({
         /* @__PURE__ */ jsx("div", { className: "ps-tryon-scan-overlay" })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-progress-section", children: [
-        /* @__PURE__ */ jsx("div", { className: "ps-tryon-progress-bar-wrap", children: /* @__PURE__ */ jsx("div", { ref: progressBarRef, className: "ps-tryon-progress-bar-fill" }) }),
-        /* @__PURE__ */ jsx("span", { ref: progressTextRef, className: "ps-tryon-progress-pct", children: "0%" })
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-progress-bar-wrap", children: /* @__PURE__ */ jsx("div", { ref: barCb, className: "ps-tryon-progress-bar-fill" }) }),
+        /* @__PURE__ */ jsx("span", { ref: pctCb, className: "ps-tryon-progress-pct", children: "0%" })
       ] }),
-      /* @__PURE__ */ jsx("div", { ref: progressStatusRef, className: cx("ps-tryon-processing-text", cn.processingText), children: "Preparing your image..." }),
+      /* @__PURE__ */ jsx("div", { ref: statusCb, className: cx("ps-tryon-processing-text", cn.processingText), children: "Preparing your image..." }),
       /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-processing-sub", cn.processingSubText), children: "This usually takes 15-25 seconds" })
     ] });
   }
@@ -1456,8 +1476,16 @@ const STYLES = `
   .ps-tryon-upload svg { color: var(--ps-upload-icon-color, #bb945c); margin-bottom: clamp(7px, 0.63vw, 12px); }
   .ps-tryon-upload-text { font-size: clamp(10px, 0.73vw, 14px); color: var(--ps-upload-color, #fff); margin: 0 0 clamp(2px, 0.21vw, 4px); }
   .ps-tryon-upload-hint { font-size: clamp(9px, 0.63vw, 12px); color: #999; margin: 0; }
-  .ps-tryon-preview { position: relative; margin-bottom: clamp(2px, 0.21vw, 4px); }
-  .ps-tryon-preview img { width: 100%; border-radius: clamp(8px, 0.63vw, 12px); display: block; }
+  .ps-tryon-preview {
+    position: relative; margin-bottom: clamp(2px, 0.21vw, 4px);
+    height: clamp(280px, 20vw, 380px); border-radius: clamp(8px, 0.63vw, 12px);
+    overflow: hidden; background: #0a0a0a;
+  }
+  .ps-tryon-preview-blur {
+    position: absolute; inset: -20px; background-size: cover; background-position: center;
+    filter: blur(25px) brightness(0.4); transform: scale(1.2);
+  }
+  .ps-tryon-preview img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; }
   .ps-tryon-preview-remove {
     position: absolute; top: clamp(5px, 0.42vw, 8px); right: clamp(5px, 0.42vw, 8px); width: clamp(20px, 1.46vw, 28px); height: clamp(20px, 1.46vw, 28px);
     border-radius: 50%; background: rgba(0,0,0,0.6); border: none; color: white;
@@ -1860,6 +1888,7 @@ const STYLES = `
     .ps-tryon-modal-wide { max-width: 100%; }
     .ps-tryon-modal > :last-child { flex: 1; }
     .ps-tryon-header { border-radius: 0; }
+    .ps-tryon-preview { height: 320px; }
   }
   @media (max-width: 720px) {
     .ps-tryon-result-split { flex-direction: column; }

package/package.json

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