@primestyleai/tryon 5.9.0 → 5.9.1

package/dist/react/index.js

@@ -1488,12 +1488,22 @@ const STYLES = `
   }
   .ps-tryon-v2-processing-label {
     position: absolute; bottom: 1vw; left: 50%; transform: translateX(-50%);
-    z-index: 5; font-size: 0.65vw; font-weight: 500;
-    color: var(--ps-accent); letter-spacing: 0.06em;
-    background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
-    padding: 0.25vw 0.8vw; border-radius: 2vw;
+    z-index: 5; font-size: 0.7vw; font-weight: 600;
+    color: #fff; letter-spacing: 0.05em;
+    background: rgba(0,0,0,0.72); backdrop-filter: blur(10px);
+    padding: 0.6vw 0.9vw; border-radius: 0.6vw;
+    display: flex; flex-direction: column; align-items: center; gap: 0.5vw;
+    min-width: 14vw;
+    box-shadow: 0 0.4vw 1.5vw rgba(0,0,0,0.35);
+  }
+  .ps-tryon-v2-processing-label > span:first-child {
     animation: ps-loading-pulse 2s ease-in-out infinite;
   }
+  .ps-tryon-v2-processing-label .ps-tryon-progress-ring-track { stroke: rgba(255,255,255,0.18); }
+  .ps-tryon-v2-processing-label .ps-tryon-progress-ring-fill  { stroke: var(--ps-accent-light); }
+  .ps-tryon-v2-processing-label .ps-tryon-progress-eta        { color: #fff; }
+  .ps-tryon-v2-processing-label .ps-tryon-progress-bar-wrap   { background: rgba(255,255,255,0.18); }
+  .ps-tryon-v2-processing-label .ps-tryon-progress-pct        { color: var(--ps-accent-light); }
 
   /* "I don't know" link */
   .ps-tryon-v2-dontknow {
@@ -2086,6 +2096,26 @@ const STYLES = `
   .ps-tryon-progress-section {
     display: flex; align-items: center; gap: 0.63vw; width: 100%; max-width: 18vw; margin-bottom: 0.83vw;
   }
+  /* Shared progress layout used inside StageCycler (desktop) and
+     MobileScanningView — row of ring + bar + percent, same tokens. */
+  .ps-tryon-progress-wrap {
+    display: flex; align-items: center; gap: 10px;
+    width: 100%; max-width: 320px; margin-top: 16px;
+  }
+  .ps-tryon-progress-wrap .ps-tryon-progress-bar-wrap {
+    flex: 1; height: 4px; border-radius: 3px; overflow: hidden;
+    position: relative; background: var(--ps-border-color);
+  }
+  .ps-tryon-progress-wrap .ps-tryon-progress-bar-fill {
+    height: 100%; width: 0%;
+    background: linear-gradient(90deg, var(--ps-accent), var(--ps-accent-light));
+    border-radius: 3px; transition: width 0.3s ease;
+  }
+  .ps-tryon-progress-wrap .ps-tryon-progress-pct {
+    font-size: 11px; font-weight: 700; color: var(--ps-accent);
+    min-width: 30px; text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
   .ps-tryon-progress-bar-wrap {
     flex: 1; height: 0.31vw; background: var(--ps-border-color); border-radius: 3px; overflow: hidden;
     position: relative;
@@ -7451,17 +7481,71 @@ function MobileSkeleton({ landmarks, w, h }) {
     }
   );
 }
+const MSC_TRYON_TARGET_SECONDS = 22;
+const MSC_RING_RADIUS = 20;
+const MSC_RING_CIRC = 2 * Math.PI * MSC_RING_RADIUS;
+function MscTryOnProgress({ t }) {
+  const startRef = useRef(Date.now());
+  const ringRef = useRef(null);
+  const barRef = useRef(null);
+  const etaRef = useRef(null);
+  const pctRef = useRef(null);
+  useEffect(() => {
+    startRef.current = Date.now();
+    const id = setInterval(() => {
+      const elapsed = (Date.now() - startRef.current) / 1e3;
+      const pct = Math.min(95, elapsed / MSC_TRYON_TARGET_SECONDS * 100);
+      const val = Math.round(pct);
+      if (barRef.current) barRef.current.style.width = `${val}%`;
+      if (pctRef.current) pctRef.current.textContent = `${val}%`;
+      if (ringRef.current) ringRef.current.style.strokeDashoffset = String(MSC_RING_CIRC * (1 - pct / 100));
+      if (etaRef.current) {
+        const remaining = Math.max(0, MSC_TRYON_TARGET_SECONDS - Math.floor(elapsed));
+        etaRef.current.textContent = elapsed >= MSC_TRYON_TARGET_SECONDS ? t("Finalizing...") : `~${remaining}s`;
+      }
+    }, 200);
+    return () => clearInterval(id);
+  }, [t]);
+  return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-progress-wrap", children: [
+    /* @__PURE__ */ jsxs("div", { className: "ps-tryon-progress-ring", children: [
+      /* @__PURE__ */ jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "24", cy: "24", r: MSC_RING_RADIUS, className: "ps-tryon-progress-ring-track" }),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            ref: ringRef,
+            cx: "24",
+            cy: "24",
+            r: MSC_RING_RADIUS,
+            className: "ps-tryon-progress-ring-fill",
+            strokeDasharray: MSC_RING_CIRC,
+            strokeDashoffset: MSC_RING_CIRC
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("span", { ref: etaRef, className: "ps-tryon-progress-eta", children: `~${MSC_TRYON_TARGET_SECONDS}s` })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ps-tryon-progress-bar-wrap", children: /* @__PURE__ */ jsx("div", { ref: barRef, className: "ps-tryon-progress-bar-fill" }) }),
+    /* @__PURE__ */ jsx("span", { ref: pctRef, className: "ps-tryon-progress-pct", children: "0%" })
+  ] });
+}
 function MobileScanningView({
   previewUrl,
   productImage,
   bodyLandmarks,
   sizingDone,
+  tryOnProcessing,
   onSwitchToManual,
   t
 }) {
   const displayImage = previewUrl || productImage || "";
   const isPhotoMode = !!previewUrl;
-  const stages = isPhotoMode ? [
+  const stages = tryOnProcessing ? [
+    { title: t("GENERATING TRY-ON"), desc: t("Rendering the garment on your photo."), viewfinderText: t("GENERATING") },
+    { title: t("REFINING DETAILS"), desc: t("Fine-tuning fit, drape and shadows."), viewfinderText: t("REFINING") },
+    { title: t("ALMOST THERE"), desc: t("Final compositing in progress."), viewfinderText: t("COMPOSITING") },
+    { title: t("FINISHING TOUCHES"), desc: t("Polishing the result."), viewfinderText: t("FINISHING") }
+  ] : isPhotoMode ? [
     { title: t("DETECTING POSE"), desc: t("Identifying body landmarks from your photo."), viewfinderText: t("DETECTING POSE") },
     { title: t("SCANNING FRAME"), desc: t("Our AI is mapping your proportions to calculate the perfect fit."), viewfinderText: t("SCANNING FRAME") },
     { title: t("ANALYZING BODY"), desc: t("Measuring shoulders, chest, waist and hips."), viewfinderText: t("ANALYZING") },
@@ -7504,10 +7588,13 @@ function MobileScanningView({
       ),
       isPhotoMode && bodyLandmarks && /* @__PURE__ */ jsx("div", { className: "ps-msc-pose-wrap", children: /* @__PURE__ */ jsx(MobileSkeleton, { landmarks: bodyLandmarks, w: dims.w, h: dims.h }) })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "ps-msc-stage", children: /* @__PURE__ */ jsxs("div", { className: "ps-msc-stage-slot", children: [
-      /* @__PURE__ */ jsx("div", { className: "ps-msc-stage-title", children: current.title }),
-      /* @__PURE__ */ jsx("div", { className: "ps-msc-stage-desc", children: current.desc })
-    ] }, stageIdx) }),
+    /* @__PURE__ */ jsxs("div", { className: "ps-msc-stage", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ps-msc-stage-slot", children: [
+        /* @__PURE__ */ jsx("div", { className: "ps-msc-stage-title", children: current.title }),
+        /* @__PURE__ */ jsx("div", { className: "ps-msc-stage-desc", children: current.desc })
+      ] }, stageIdx),
+      tryOnProcessing && /* @__PURE__ */ jsx(MscTryOnProgress, { t })
+    ] }),
     /* @__PURE__ */ jsx("div", { className: "ps-bpm-spacer" }),
     /* @__PURE__ */ jsx("div", { className: "ps-bpm-bottom", children: /* @__PURE__ */ jsx(
       MobileBottomTabs,
@@ -7705,6 +7792,62 @@ const SKELETON_CONNECTIONS = [
   ["rightHip", "rightKnee"],
   ["rightKnee", "rightAnkle"]
 ];
+const TRYON_TARGET_SECONDS = 22;
+const TRYON_RING_RADIUS = 20;
+const TRYON_RING_CIRC = 2 * Math.PI * TRYON_RING_RADIUS;
+function TryOnProgress({ t, isActive }) {
+  const startRef = useRef(null);
+  const ringRef = useRef(null);
+  const barRef = useRef(null);
+  const etaRef = useRef(null);
+  const pctRef = useRef(null);
+  useEffect(() => {
+    if (!isActive) {
+      startRef.current = null;
+      return;
+    }
+    startRef.current = Date.now();
+    const id = setInterval(() => {
+      const start = startRef.current || Date.now();
+      const elapsed = (Date.now() - start) / 1e3;
+      const pct = Math.min(95, elapsed / TRYON_TARGET_SECONDS * 100);
+      const val = Math.round(pct);
+      if (barRef.current) barRef.current.style.width = `${val}%`;
+      if (pctRef.current) pctRef.current.textContent = `${val}%`;
+      if (ringRef.current) {
+        ringRef.current.style.strokeDashoffset = String(TRYON_RING_CIRC * (1 - pct / 100));
+      }
+      if (etaRef.current) {
+        const remaining = Math.max(0, TRYON_TARGET_SECONDS - Math.floor(elapsed));
+        etaRef.current.textContent = elapsed >= TRYON_TARGET_SECONDS ? t("Finalizing...") : `~${remaining}s`;
+      }
+    }, 200);
+    return () => clearInterval(id);
+  }, [isActive, t]);
+  if (!isActive) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-progress-wrap", children: [
+    /* @__PURE__ */ jsxs("div", { className: "ps-tryon-progress-ring", children: [
+      /* @__PURE__ */ jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "24", cy: "24", r: TRYON_RING_RADIUS, className: "ps-tryon-progress-ring-track" }),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            ref: ringRef,
+            cx: "24",
+            cy: "24",
+            r: TRYON_RING_RADIUS,
+            className: "ps-tryon-progress-ring-fill",
+            strokeDasharray: TRYON_RING_CIRC,
+            strokeDashoffset: TRYON_RING_CIRC
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("span", { ref: etaRef, className: "ps-tryon-progress-eta", children: `~${TRYON_TARGET_SECONDS}s` })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ps-tryon-progress-bar-wrap", children: /* @__PURE__ */ jsx("div", { ref: barRef, className: "ps-tryon-progress-bar-fill" }) }),
+    /* @__PURE__ */ jsx("span", { ref: pctRef, className: "ps-tryon-progress-pct", children: "0%" })
+  ] });
+}
 function FaceOverlay({
   landmarks,
   imgWidth,
@@ -7848,10 +7991,13 @@ function StageCycler({
     return () => clearInterval(id);
   }, [isDone, active.length]);
   const current = active[idx] ?? active[0];
-  return /* @__PURE__ */ jsx("div", { className: "ps-msc-stage", style: { alignSelf: "center", marginTop: "auto", marginBottom: "auto" }, children: /* @__PURE__ */ jsxs("div", { className: "ps-msc-stage-slot", children: [
-    /* @__PURE__ */ jsx("div", { className: "ps-msc-stage-title", children: current.title }),
-    /* @__PURE__ */ jsx("div", { className: "ps-msc-stage-desc", children: current.desc })
-  ] }, `${tryOnProcessing ? "t" : "s"}-${idx}`) });
+  return /* @__PURE__ */ jsxs("div", { className: "ps-msc-stage", style: { alignSelf: "center", marginTop: "auto", marginBottom: "auto" }, children: [
+    /* @__PURE__ */ jsxs("div", { className: "ps-msc-stage-slot", children: [
+      /* @__PURE__ */ jsx("div", { className: "ps-msc-stage-title", children: current.title }),
+      /* @__PURE__ */ jsx("div", { className: "ps-msc-stage-desc", children: current.desc })
+    ] }, `${tryOnProcessing ? "t" : "s"}-${idx}`),
+    tryOnProcessing && /* @__PURE__ */ jsx(TryOnProgress, { t, isActive: !!tryOnProcessing })
+  ] });
 }
 function SkeletonOverlay({ landmarks, imgWidth, imgHeight }) {
   const W = imgWidth;
@@ -9027,6 +9173,7 @@ function SizeResultView({
         previewUrl,
         bodyLandmarks: bodyLandmarks ?? null,
         sizingDone,
+        tryOnProcessing,
         onSwitchToManual: () => setView("body-profile"),
         t
       }
@@ -9083,7 +9230,7 @@ function SizeResultView({
                 isMobile: true,
                 isTryOnImage: !!resultImageUrl,
                 showLines,
-                onToggleLines: () => setShowLines(!showLines),
+                onToggleLines: isAccessory ? void 0 : () => setShowLines(!showLines),
                 onImageLoad: handleImgLoad,
                 overlayNode: resultImageUrl && poseReady && poseLines ? /* @__PURE__ */ jsx(
                   MeasurementOverlay,
@@ -9157,7 +9304,7 @@ function SizeResultView({
             },
             onClose,
             showLines,
-            onToggleLines: () => setShowLines(!showLines),
+            onToggleLines: isAccessory ? void 0 : () => setShowLines(!showLines),
             onImageLoad: handleImgLoad,
             overlayNode: resultImageUrl && poseReady && poseLines ? /* @__PURE__ */ jsx(
               MeasurementOverlay,
@@ -9192,7 +9339,10 @@ function SizeResultView({
           /* @__PURE__ */ jsxs("div", { className: "ps-tryon-v2-bg", style: { position: "relative" }, children: [
             /* @__PURE__ */ jsx("img", { src: tryOnProcessing && previewUrl ? previewUrl : resultImageUrl || productImage, alt: productTitle, className: "ps-tryon-v2-bg-img", onLoad: handleImgLoad }),
             tryOnProcessing && bodyLandmarks && /* @__PURE__ */ jsx(SkeletonOverlay, { landmarks: bodyLandmarks, imgWidth: imgDims.w, imgHeight: imgDims.h }),
-            tryOnProcessing && /* @__PURE__ */ jsx("div", { className: "ps-tryon-v2-processing-label", children: t("Generating try-on...") }),
+            tryOnProcessing && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-v2-processing-label", children: [
+              /* @__PURE__ */ jsx("span", { children: t("Generating try-on...") }),
+              /* @__PURE__ */ jsx(TryOnProgress, { t, isActive: true })
+            ] }),
             resultImageUrl && !tryOnProcessing && poseReady && poseLines && /* @__PURE__ */ jsx(MeasurementOverlay, { lines: poseLines, fitRows: (() => {
               const all = [...sizingResult?.matchDetails || []];
               if (sizingResult?.sections) {
@@ -9209,7 +9359,7 @@ function SizeResultView({
               }).map((m) => ({ area: m.measurement, userNum: parseFloat(m.userValue) || 0, chartLabel: m.chartRange || "", fit: m.fit }));
             })(), show: showLines, imgWidth: imgDims.w, imgHeight: imgDims.h }),
             resultImageUrl && !tryOnProcessing && /* @__PURE__ */ jsxs("div", { style: { position: "absolute", bottom: "0.5vw", left: "0.5vw", zIndex: 3, display: "flex", flexDirection: "column", gap: "0.3vw" }, children: [
-              /* @__PURE__ */ jsxs("button", { className: "ps-tryon-sr-glass-btn", onClick: () => setShowLines(!showLines), children: [
+              !isAccessory && /* @__PURE__ */ jsxs("button", { className: "ps-tryon-sr-glass-btn", onClick: () => setShowLines(!showLines), children: [
                 /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", style: { marginRight: "0.3vw" }, children: [
                   /* @__PURE__ */ jsx("line", { x1: "4", y1: "9", x2: "20", y2: "9" }),
                   /* @__PURE__ */ jsx("line", { x1: "4", y1: "15", x2: "20", y2: "15" }),
@@ -9332,7 +9482,7 @@ function SizeResultView({
                 renderRaw: isAccessory,
                 isTryOnImage: !!resultImageUrl,
                 showLines,
-                onToggleLines: () => setShowLines(!showLines),
+                onToggleLines: isAccessory ? void 0 : () => setShowLines(!showLines),
                 onImageLoad: handleImgLoad,
                 overlayNode: resultImageUrl && poseReady && poseLines ? /* @__PURE__ */ jsx(
                   MeasurementOverlay,
@@ -9353,7 +9503,7 @@ function SizeResultView({
               /* @__PURE__ */ jsx("img", { src: resultImageUrl || productImage, alt: productTitle, className: "ps-tryon-v2-bg-img", onLoad: handleImgLoad }),
               resultImageUrl && poseReady && poseLines && /* @__PURE__ */ jsx(MeasurementOverlay, { lines: poseLines, fitRows: (sizingResult?.matchDetails || []).map((m) => ({ area: m.measurement, userNum: parseFloat(m.userValue) || 0, chartLabel: m.chartRange || "", fit: m.fit })), show: showLines, imgWidth: imgDims.w, imgHeight: imgDims.h }),
               resultImageUrl && !tryOnProcessing && /* @__PURE__ */ jsxs("div", { style: { position: "absolute", bottom: "0.5vw", left: "0.5vw", zIndex: 3, display: "flex", flexDirection: "column", gap: "0.3vw" }, children: [
-                /* @__PURE__ */ jsx("button", { className: "ps-tryon-sr-glass-btn", onClick: () => setShowLines(!showLines), children: showLines ? t("Hide Fit") : t("Show Fit") }),
+                !isAccessory && /* @__PURE__ */ jsx("button", { className: "ps-tryon-sr-glass-btn", onClick: () => setShowLines(!showLines), children: showLines ? t("Hide Fit") : t("Show Fit") }),
                 /* @__PURE__ */ jsx("button", { className: "ps-tryon-sr-glass-btn", onClick: handleDownload, children: t("Download") })
               ] })
             ] }),