@primestyleai/tryon 5.9.0 → 5.10.0

package/dist/storefront/primestyle-tryon.js

@@ -10080,7 +10080,8 @@ async function recommendForProduct(input) {
     sections: sectionsMap,
     profileId: profile.id,
     fromCache: false,
-    raw: result
+    raw: result,
+    found: result.found
   };
 }
 async function estimateFullMeasurements(args) {
@@ -10139,6 +10140,12 @@ async function estimateFullMeasurements(args) {
 function isImperial(locale) {
   return ["US", "UK", "AU"].includes(locale);
 }
+function getUnitLabel(unit) {
+  if (unit === "in" || unit === "inches" || unit === "lbs") return "Imperial";
+  if (unit === "cm" || unit === "kg") return "Metric";
+  if (unit === "mm") return "mm";
+  return "";
+}
 function cx(base, override) {
   return override ? `${base} ${override}` : base;
 }
@@ -10913,12 +10920,22 @@ const STYLES$1 = `
   }
   .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 {
@@ -11511,6 +11528,26 @@ const STYLES$1 = `
   .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: 12px;
+    width: 100%; max-width: 360px; margin-top: 18px;
+  }
+  .ps-tryon-progress-wrap .ps-tryon-progress-bar-wrap {
+    flex: 1; height: 6px; border-radius: 4px; 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: 4px; transition: width 0.3s ease;
+  }
+  .ps-tryon-progress-wrap .ps-tryon-progress-pct {
+    font-size: 13px; font-weight: 700; color: var(--ps-accent);
+    min-width: 36px; 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;
@@ -11536,25 +11573,25 @@ const STYLES$1 = `
     font-variant-numeric: tabular-nums;
   }
 
-  /* Circular ETA ring — 48×48 px SVG with a track + progress circle; ETA
+  /* Circular ETA ring — 64×64 px SVG with a track + progress circle; ETA
      text centered. strokeDashoffset is driven by the ticker in
      PrimeStyleTryonInner, so CSS only styles the appearance. */
   .ps-tryon-progress-ring {
-    position: relative; width: 48px; height: 48px; flex: 0 0 48px;
+    position: relative; width: 64px; height: 64px; flex: 0 0 64px;
     display: flex; align-items: center; justify-content: center;
   }
   .ps-tryon-progress-ring svg { transform: rotate(-90deg); }
   .ps-tryon-progress-ring-track {
-    fill: none; stroke: var(--ps-border-color); stroke-width: 3.5;
+    fill: none; stroke: var(--ps-border-color); stroke-width: 5;
   }
   .ps-tryon-progress-ring-fill {
-    fill: none; stroke: var(--ps-accent); stroke-width: 3.5;
+    fill: none; stroke: var(--ps-accent); stroke-width: 5;
     stroke-linecap: round;
     transition: stroke-dashoffset 0.3s ease;
   }
   .ps-tryon-progress-eta {
     position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
-    font-size: 10px; font-weight: 700; color: var(--ps-accent);
+    font-size: 13px; font-weight: 700; color: var(--ps-accent);
     font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
     pointer-events: none;
   }
@@ -16641,6 +16678,92 @@ function ProfileDetailModal({
     document.body
   );
 }
+function ConfirmMeasurementsModal({
+  profile,
+  onProceed,
+  onEdit,
+  t: t2
+}) {
+  const heightUnit = profile.heightUnit === "in" || profile.heightUnit === "ft" ? "in" : "cm";
+  const weightUnit = profile.weightUnit === "lbs" ? "lbs" : "kg";
+  const systemLabel = getUnitLabel(heightUnit);
+  const formatHeight = (h) => {
+    if (!h) return "—";
+    if (heightUnit === "in") {
+      const ft = Math.floor(h / 12);
+      const inches = Math.round(h % 12);
+      return `${ft}'${inches}"`;
+    }
+    return `${Math.round(h)} cm`;
+  };
+  const formatWeight = (w2) => {
+    if (!w2) return "—";
+    return `${Math.round(w2)} ${weightUnit}`;
+  };
+  const height = profile.height ?? profile.heightCm;
+  const weight = profile.weight ?? profile.weightKg;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-confirm-overlay", onClick: onEdit, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-confirm-modal", onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": t2("Close"),
+        onClick: onEdit,
+        style: {
+          position: "absolute",
+          top: "0.75vw",
+          right: "0.75vw",
+          width: "1.8vw",
+          height: "1.8vw",
+          borderRadius: "50%",
+          background: "transparent",
+          border: "none",
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "var(--ps-text-muted)"
+        },
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "16", height: "16", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { style: { fontWeight: 700, marginBottom: "0.4vw" }, children: t2("Confirm your measurements") }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("small", { style: { color: "var(--ps-text-muted)" }, children: systemLabel ? t2("You chose") + " " + systemLabel + ". " + t2("Review before continuing.") : t2("Review before continuing.") }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("ul", { style: {
+      listStyle: "none",
+      padding: 0,
+      margin: "0.8vw 0 0.2vw 0",
+      width: "100%",
+      textAlign: "left",
+      fontSize: "0.78vw",
+      lineHeight: 1.6
+    }, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { style: { display: "flex", justifyContent: "space-between", gap: "1vw" }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "var(--ps-text-muted)" }, children: t2("Height") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontWeight: 600 }, children: formatHeight(height) })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { style: { display: "flex", justifyContent: "space-between", gap: "1vw" }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "var(--ps-text-muted)" }, children: t2("Weight") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontWeight: 600 }, children: formatWeight(weight) })
+      ] }),
+      profile.age ? /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { style: { display: "flex", justifyContent: "space-between", gap: "1vw" }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "var(--ps-text-muted)" }, children: t2("Age") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontWeight: 600 }, children: profile.age })
+      ] }) : null,
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { style: { display: "flex", justifyContent: "space-between", gap: "1vw" }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "var(--ps-text-muted)" }, children: t2("Gender") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontWeight: 600 }, children: profile.gender === "female" ? t2("Female") : t2("Male") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-confirm-actions", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-confirm-cancel", onClick: onEdit, children: t2("Edit") }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-confirm-delete", onClick: onProceed, children: t2("Proceed") })
+    ] })
+  ] }) });
+}
 function WelcomeView({
   productImage,
   setView,
@@ -16876,17 +16999,71 @@ function MobileSkeleton({ landmarks, w: w2, h }) {
     }
   );
 }
+const MSC_TRYON_TARGET_SECONDS = 22;
+const MSC_RING_RADIUS = 27;
+const MSC_RING_CIRC = 2 * Math.PI * MSC_RING_RADIUS;
+function MscTryOnProgress({ t: t2 }) {
+  const startRef = reactExports.useRef(Date.now());
+  const ringRef = reactExports.useRef(null);
+  const barRef = reactExports.useRef(null);
+  const etaRef = reactExports.useRef(null);
+  const pctRef = reactExports.useRef(null);
+  reactExports.useEffect(() => {
+    startRef.current = Date.now();
+    const id2 = 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 ? t2("Finalizing...") : `~${remaining}s`;
+      }
+    }, 200);
+    return () => clearInterval(id2);
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-progress-wrap", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-progress-ring", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "64", height: "64", viewBox: "0 0 64 64", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "32", cy: "32", r: MSC_RING_RADIUS, className: "ps-tryon-progress-ring-track" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "circle",
+          {
+            ref: ringRef,
+            cx: "32",
+            cy: "32",
+            r: MSC_RING_RADIUS,
+            className: "ps-tryon-progress-ring-fill",
+            strokeDasharray: MSC_RING_CIRC,
+            strokeDashoffset: MSC_RING_CIRC
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { ref: etaRef, className: "ps-tryon-progress-eta", children: `~${MSC_TRYON_TARGET_SECONDS}s` })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-progress-bar-wrap", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: barRef, className: "ps-tryon-progress-bar-fill" }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { ref: pctRef, className: "ps-tryon-progress-pct", children: "0%" })
+  ] });
+}
 function MobileScanningView({
   previewUrl,
   productImage,
   bodyLandmarks,
   sizingDone,
+  tryOnProcessing,
   onSwitchToManual,
   t: t2
 }) {
   const displayImage = previewUrl || productImage || "";
   const isPhotoMode = !!previewUrl;
-  const stages = isPhotoMode ? [
+  const stages = tryOnProcessing ? [
+    { title: t2("GENERATING TRY-ON"), desc: t2("Rendering the garment on your photo."), viewfinderText: t2("GENERATING") },
+    { title: t2("REFINING DETAILS"), desc: t2("Fine-tuning fit, drape and shadows."), viewfinderText: t2("REFINING") },
+    { title: t2("ALMOST THERE"), desc: t2("Final compositing in progress."), viewfinderText: t2("COMPOSITING") },
+    { title: t2("FINISHING TOUCHES"), desc: t2("Polishing the result."), viewfinderText: t2("FINISHING") }
+  ] : isPhotoMode ? [
     { title: t2("DETECTING POSE"), desc: t2("Identifying body landmarks from your photo."), viewfinderText: t2("DETECTING POSE") },
     { title: t2("SCANNING FRAME"), desc: t2("Our AI is mapping your proportions to calculate the perfect fit."), viewfinderText: t2("SCANNING FRAME") },
     { title: t2("ANALYZING BODY"), desc: t2("Measuring shoulders, chest, waist and hips."), viewfinderText: t2("ANALYZING") },
@@ -16905,11 +17082,12 @@ function MobileScanningView({
   };
   const [stageIdx, setStageIdx] = reactExports.useState(0);
   reactExports.useEffect(() => {
+    const intervalMs = tryOnProcessing ? 2200 : 1500;
     const id2 = setInterval(() => {
       setStageIdx((i) => (i + 1) % stages.length);
-    }, 1500);
+    }, intervalMs);
     return () => clearInterval(id2);
-  }, [stages.length]);
+  }, [stages.length, tryOnProcessing]);
   reactExports.useEffect(() => {
     if (isPhotoMode && bodyLandmarks && stageIdx === 0) {
       setStageIdx(1);
@@ -16929,10 +17107,13 @@ function MobileScanningView({
       ),
       isPhotoMode && bodyLandmarks && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-pose-wrap", children: /* @__PURE__ */ jsxRuntimeExports.jsx(MobileSkeleton, { landmarks: bodyLandmarks, w: dims.w, h: dims.h }) })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-stage", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msc-stage-slot", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-stage-title", children: current.title }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-stage-desc", children: current.desc })
-    ] }, stageIdx) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msc-stage", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msc-stage-slot", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-stage-title", children: current.title }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-stage-desc", children: current.desc })
+      ] }, stageIdx),
+      tryOnProcessing && /* @__PURE__ */ jsxRuntimeExports.jsx(MscTryOnProgress, { t: t2 })
+    ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bpm-spacer" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bpm-bottom", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       MobileBottomTabs,
@@ -17063,7 +17244,7 @@ function MultiSectionMobile({
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msr-sections", children: sectionEntries.map(({ name, secResult }) => {
         const cleanName = name.replace(/\s*[—–-]\s*.*/g, "");
         const sec = secResult;
-        const sizeValue = sec.size || secResult.recommendedSize;
+        const sizeValue = sec.found === false ? t2("No fit") : sec.size || secResult.recommendedSize;
         return /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "button",
           {
@@ -17098,7 +17279,19 @@ function MultiSectionMobile({
           children: t2("Continue Shopping")
         }
       )
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    ] }) : sizingResult?.found === false ? (
+      // Backend couldn't find a size that fits — Try-On is meaningless
+      // without a recommendation, so surface a clear terminal action.
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          className: "ps-msr-tryon-cta",
+          onClick: onClose,
+          children: t2("Continue Shopping")
+        }
+      )
+    ) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "button",
       {
         type: "button",
@@ -17130,6 +17323,62 @@ const SKELETON_CONNECTIONS = [
   ["rightHip", "rightKnee"],
   ["rightKnee", "rightAnkle"]
 ];
+const TRYON_TARGET_SECONDS = 22;
+const TRYON_RING_RADIUS = 27;
+const TRYON_RING_CIRC = 2 * Math.PI * TRYON_RING_RADIUS;
+function TryOnProgress({ t: t2, isActive }) {
+  const startRef = reactExports.useRef(null);
+  const ringRef = reactExports.useRef(null);
+  const barRef = reactExports.useRef(null);
+  const etaRef = reactExports.useRef(null);
+  const pctRef = reactExports.useRef(null);
+  reactExports.useEffect(() => {
+    if (!isActive) {
+      startRef.current = null;
+      return;
+    }
+    startRef.current = Date.now();
+    const id2 = 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 ? t2("Finalizing...") : `~${remaining}s`;
+      }
+    }, 200);
+    return () => clearInterval(id2);
+  }, [isActive]);
+  if (!isActive) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-progress-wrap", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-progress-ring", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "64", height: "64", viewBox: "0 0 64 64", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "32", cy: "32", r: TRYON_RING_RADIUS, className: "ps-tryon-progress-ring-track" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "circle",
+          {
+            ref: ringRef,
+            cx: "32",
+            cy: "32",
+            r: TRYON_RING_RADIUS,
+            className: "ps-tryon-progress-ring-fill",
+            strokeDasharray: TRYON_RING_CIRC,
+            strokeDashoffset: TRYON_RING_CIRC
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { ref: etaRef, className: "ps-tryon-progress-eta", children: `~${TRYON_TARGET_SECONDS}s` })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-progress-bar-wrap", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: barRef, className: "ps-tryon-progress-bar-fill" }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { ref: pctRef, className: "ps-tryon-progress-pct", children: "0%" })
+  ] });
+}
 function FaceOverlay({
   landmarks,
   imgWidth,
@@ -17267,16 +17516,20 @@ function StageCycler({
   }, [tryOnProcessing]);
   reactExports.useEffect(() => {
     if (isDone) return;
+    const intervalMs = tryOnProcessing ? 2200 : 900;
     const id2 = setInterval(() => {
       setIdx((i) => Math.min(i + 1, active.length - 1));
-    }, 900);
+    }, intervalMs);
     return () => clearInterval(id2);
-  }, [isDone, active.length]);
+  }, [isDone, active.length, tryOnProcessing]);
   const current = active[idx] ?? active[0];
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-stage", style: { alignSelf: "center", marginTop: "auto", marginBottom: "auto" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msc-stage-slot", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-stage-title", children: current.title }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-stage-desc", children: current.desc })
-  ] }, `${tryOnProcessing ? "t" : "s"}-${idx}`) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msc-stage", style: { alignSelf: "center", marginTop: "auto", marginBottom: "auto" }, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msc-stage-slot", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-stage-title", children: current.title }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-stage-desc", children: current.desc })
+    ] }, `${tryOnProcessing ? "t" : "s"}-${idx}`),
+    tryOnProcessing && /* @__PURE__ */ jsxRuntimeExports.jsx(TryOnProgress, { t: t2, isActive: !!tryOnProcessing })
+  ] });
 }
 function SkeletonOverlay({ landmarks, imgWidth, imgHeight }) {
   const W2 = imgWidth;
@@ -17515,7 +17768,8 @@ function SectionDetailView({
   backLabel,
   internationalSizes,
   continueLabel,
-  renderRaw = false
+  renderRaw = false,
+  sectionFound
 }) {
   const recSize = sectionResult?.recommendedSize || "";
   const [selectedSize, setSelectedSize] = reactExports.useState(null);
@@ -17560,7 +17814,8 @@ function SectionDetailView({
     const hasBadFit = details.some((d) => BAD_FIT.test(d.fit || ""));
     return hasBadFit ? t2("Not Recommended") : t2("Your Selection");
   }, [isRecommended, sectionResult, t2]);
-  const displaySizeLabel = selectedCountry && isRecommended && internationalSizes && internationalSizes[selectedCountry] ? internationalSizes[selectedCountry] : displaySize;
+  const noFitMessage = t2("We couldn't find a size that fits for this product");
+  const displaySizeLabel = sectionFound === false ? noFitMessage : selectedCountry && isRecommended && internationalSizes && internationalSizes[selectedCountry] ? internationalSizes[selectedCountry] : displaySize;
   const columnUnits = reactExports.useMemo(() => {
     const units = [];
     for (let i = 0; i < section.headers.length; i++) {
@@ -18414,6 +18669,7 @@ function SizeResultView({
   const allDone = hasPhoto ? sizingDone && tryOnDone : sizingDone;
   const isMobile = useIsMobile();
   const isAccessory = measurementType === "face" || measurementType === "head";
+  const noFit = sizingResult?.found === false;
   const vtoExcluded = measurementType === "foot";
   console.log("[PS-SDK] SizeResultView render:", {
     hasPhoto,
@@ -18452,6 +18708,7 @@ function SizeResultView({
         previewUrl,
         bodyLandmarks: bodyLandmarks ?? null,
         sizingDone,
+        tryOnProcessing,
         onSwitchToManual: () => setView("body-profile"),
         t: t2
       }
@@ -18497,6 +18754,7 @@ function SizeResultView({
                 sectionName: entry.name,
                 section: entry.section,
                 sectionResult: entry.secResult,
+                sectionFound: entry.secResult?.found,
                 userMeasurements: entry.userMeasurements,
                 unitLbl,
                 chartUnit: resultUnit,
@@ -18508,7 +18766,7 @@ function SizeResultView({
                 isMobile: true,
                 isTryOnImage: !!resultImageUrl,
                 showLines,
-                onToggleLines: () => setShowLines(!showLines),
+                onToggleLines: isAccessory ? void 0 : () => setShowLines(!showLines),
                 onImageLoad: handleImgLoad,
                 overlayNode: resultImageUrl && poseReady && poseLines ? /* @__PURE__ */ jsxRuntimeExports.jsx(
                   MeasurementOverlay,
@@ -18546,6 +18804,7 @@ function SizeResultView({
                 sectionName: entry.name,
                 section: entry.section,
                 sectionResult: entry.secResult,
+                sectionFound: entry.secResult?.found,
                 userMeasurements: entry.userMeasurements,
                 unitLbl,
                 chartUnit: resultUnit,
@@ -18582,7 +18841,7 @@ function SizeResultView({
             },
             onClose,
             showLines,
-            onToggleLines: () => setShowLines(!showLines),
+            onToggleLines: isAccessory ? void 0 : () => setShowLines(!showLines),
             onImageLoad: handleImgLoad,
             overlayNode: resultImageUrl && poseReady && poseLines ? /* @__PURE__ */ jsxRuntimeExports.jsx(
               MeasurementOverlay,
@@ -18617,7 +18876,10 @@ function SizeResultView({
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-v2-bg", style: { position: "relative" }, children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: tryOnProcessing && previewUrl ? previewUrl : resultImageUrl || productImage, alt: productTitle, className: "ps-tryon-v2-bg-img", onLoad: handleImgLoad }),
             tryOnProcessing && bodyLandmarks && /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonOverlay, { landmarks: bodyLandmarks, imgWidth: imgDims.w, imgHeight: imgDims.h }),
-            tryOnProcessing && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-v2-processing-label", children: t2("Generating try-on...") }),
+            tryOnProcessing && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-v2-processing-label", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t2("Generating try-on...") }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TryOnProgress, { t: t2, isActive: true })
+            ] }),
             resultImageUrl && !tryOnProcessing && poseReady && poseLines && /* @__PURE__ */ jsxRuntimeExports.jsx(MeasurementOverlay, { lines: poseLines, fitRows: (() => {
               const all = [...sizingResult?.matchDetails || []];
               if (sizingResult?.sections) {
@@ -18634,7 +18896,7 @@ function SizeResultView({
               }).map((m2) => ({ area: m2.measurement, userNum: parseFloat(m2.userValue) || 0, chartLabel: m2.chartRange || "", fit: m2.fit }));
             })(), show: showLines, imgWidth: imgDims.w, imgHeight: imgDims.h }),
             resultImageUrl && !tryOnProcessing && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { position: "absolute", bottom: "0.5vw", left: "0.5vw", zIndex: 3, display: "flex", flexDirection: "column", gap: "0.3vw" }, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "ps-tryon-sr-glass-btn", onClick: () => setShowLines(!showLines), children: [
+              !isAccessory && /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "ps-tryon-sr-glass-btn", onClick: () => setShowLines(!showLines), children: [
                 /* @__PURE__ */ jsxRuntimeExports.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__ */ jsxRuntimeExports.jsx("line", { x1: "4", y1: "9", x2: "20", y2: "9" }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "4", y1: "15", x2: "20", y2: "15" }),
@@ -18664,7 +18926,7 @@ function SizeResultView({
               return /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: `ps-tryon-sr-card-v2${isLast ? " ps-full" : ""}`, onClick: () => setActiveSection(name), style: { animationDelay: `${idx * 0.07}s` }, children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-sr-card-v2-text", children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-sr-card-v2-label", children: name.replace(/\s*[—–-]\s*.*/g, "") }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-sr-card-v2-value", children: sec.size || secResult.recommendedSize }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-sr-card-v2-value", children: sec.found === false ? t2("No fit") : sec.size || secResult.recommendedSize }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-sr-card-v2-rec", children: t2("recommended") })
                 ] }),
                 sectionImg && /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: sectionImg, alt: name, className: "ps-tryon-sr-card-v2-img" }),
@@ -18688,7 +18950,7 @@ function SizeResultView({
                     " →"
                   ]
                 }
-              ) : vtoExcluded ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              ) : vtoExcluded || noFit ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
                 "button",
                 {
                   className: "ps-tryon-v2-cta",
@@ -18741,6 +19003,7 @@ function SizeResultView({
                 sectionName,
                 section: singleSection,
                 sectionResult: singleResult,
+                sectionFound: sizingResult?.found,
                 userMeasurements: singleUserMeasurements,
                 unitLbl,
                 chartUnit: resultUnit,
@@ -18748,7 +19011,7 @@ function SizeResultView({
                 onBack: resultImageUrl ? onClose || (() => setView("body-profile")) : () => setView("body-profile"),
                 backLabel: t2("Back"),
                 internationalSizes: sizingResult?.internationalSizes,
-                onTryOn: resultImageUrl || vtoExcluded ? void 0 : handleSingleTryOn,
+                onTryOn: resultImageUrl || vtoExcluded || noFit ? void 0 : handleSingleTryOn,
                 continueLabel: resultImageUrl ? t2("Continue Shopping") : void 0,
                 tryOnProcessing,
                 productImage: resultImageUrl || productImage,
@@ -18757,7 +19020,7 @@ function SizeResultView({
                 renderRaw: isAccessory,
                 isTryOnImage: !!resultImageUrl,
                 showLines,
-                onToggleLines: () => setShowLines(!showLines),
+                onToggleLines: isAccessory ? void 0 : () => setShowLines(!showLines),
                 onImageLoad: handleImgLoad,
                 overlayNode: resultImageUrl && poseReady && poseLines ? /* @__PURE__ */ jsxRuntimeExports.jsx(
                   MeasurementOverlay,
@@ -18778,7 +19041,7 @@ function SizeResultView({
               /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: resultImageUrl || productImage, alt: productTitle, className: "ps-tryon-v2-bg-img", onLoad: handleImgLoad }),
               resultImageUrl && poseReady && poseLines && /* @__PURE__ */ jsxRuntimeExports.jsx(MeasurementOverlay, { lines: poseLines, fitRows: (sizingResult?.matchDetails || []).map((m2) => ({ area: m2.measurement, userNum: parseFloat(m2.userValue) || 0, chartLabel: m2.chartRange || "", fit: m2.fit })), show: showLines, imgWidth: imgDims.w, imgHeight: imgDims.h }),
               resultImageUrl && !tryOnProcessing && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { position: "absolute", bottom: "0.5vw", left: "0.5vw", zIndex: 3, display: "flex", flexDirection: "column", gap: "0.3vw" }, children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "ps-tryon-sr-glass-btn", onClick: () => setShowLines(!showLines), children: showLines ? t2("Hide Fit") : t2("Show Fit") }),
+                !isAccessory && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "ps-tryon-sr-glass-btn", onClick: () => setShowLines(!showLines), children: showLines ? t2("Hide Fit") : t2("Show Fit") }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "ps-tryon-sr-glass-btn", onClick: handleDownload, children: t2("Download") })
               ] })
             ] }),
@@ -18788,6 +19051,7 @@ function SizeResultView({
                 sectionName,
                 section: singleSection,
                 sectionResult: singleResult,
+                sectionFound: sizingResult?.found,
                 userMeasurements: singleUserMeasurements,
                 unitLbl,
                 chartUnit: resultUnit,
@@ -18795,7 +19059,7 @@ function SizeResultView({
                 onBack: resultImageUrl ? onClose || (() => setView("body-profile")) : () => setView("body-profile"),
                 backLabel: t2("Back"),
                 internationalSizes: sizingResult?.internationalSizes,
-                onTryOn: resultImageUrl || vtoExcluded ? void 0 : handleSingleTryOn,
+                onTryOn: resultImageUrl || vtoExcluded || noFit ? void 0 : handleSingleTryOn,
                 continueLabel: resultImageUrl ? t2("Continue Shopping") : void 0,
                 tryOnProcessing,
                 t: t2,
@@ -19171,7 +19435,7 @@ function UploadView({
     }
   ) });
 }
-const RING_RADIUS = 20;
+const RING_RADIUS = 27;
 const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
 function ProcessingView({
   previewUrl,
@@ -19216,12 +19480,12 @@ function ProcessingView({
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-progress-section", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-progress-ring", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 48 48", width: "48", height: "48", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 64 64", width: "64", height: "64", "aria-hidden": "true", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "circle",
             {
-              cx: "24",
-              cy: "24",
+              cx: "32",
+              cy: "32",
               r: RING_RADIUS,
               className: "ps-tryon-progress-ring-track"
             }
@@ -19230,8 +19494,8 @@ function ProcessingView({
             "circle",
             {
               ref: ringCb,
-              cx: "24",
-              cy: "24",
+              cx: "32",
+              cy: "32",
               r: RING_RADIUS,
               className: "ps-tryon-progress-ring-fill",
               strokeDasharray: RING_CIRCUMFERENCE,
@@ -21801,7 +22065,7 @@ function BodyProfileView({
               hidePhotoOptions: hasActiveProfileWithMeasurements,
               onNext: hasActiveProfileWithMeasurements && onUseActiveProfile ? onUseActiveProfile : handleNext,
               canProceed: true,
-              fastPathLabel: hasActiveProfileWithMeasurements ? t2("Find My Best Fit") : void 0,
+              fastPathLabel: hasActiveProfileWithMeasurements ? t2("Find My Best Fit") + (getUnitLabel(hUnit) ? ` (${getUnitLabel(hUnit)})` : "") : void 0,
               activeProfileName: hasActiveProfileWithMeasurements ? activeProfileName : null,
               onStartFresh,
               error,
@@ -22056,7 +22320,8 @@ function BodyProfileView({
       !(isMobile && step === "basics") && (() => {
         const useProfileFast = step === "basics" && hasActiveProfileWithMeasurements && !!onUseActiveProfile;
         const handleClick = useProfileFast ? onUseActiveProfile : handleNext;
-        const label = useProfileFast ? t2("Find My Best Fit") : isLastStep ? t2("Find My Size") : t2("Next");
+        const unitSuffix = getUnitLabel(hUnit) ? ` (${getUnitLabel(hUnit)})` : "";
+        const label = useProfileFast ? t2("Find My Best Fit") + unitSuffix : isLastStep ? t2("Find My Size") + unitSuffix : t2("Next");
         return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-bp-nav", children: [
           step !== "basics" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "ps-bp-back-btn", onClick: handleBackStep, type: "button", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-bp-back-arrow", children: "←" }),
@@ -22246,6 +22511,7 @@ function AccessorySizeView({
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-bpm-bottom", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", className: "ps-bpm-next-btn", onClick: handleManualSubmit, children: [
           t2("Find My Size"),
+          getUnitLabel(sizingUnit) ? ` (${getUnitLabel(sizingUnit)})` : "",
           " ",
           /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowRightIcon, {})
         ] }),
@@ -22580,6 +22846,7 @@ function AccessorySizeView({
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", {}),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "ps-bp-next-btn", onClick: handleManualSubmit, type: "button", children: [
             t2("Find My Size"),
+            getUnitLabel(sizingUnit) ? ` (${getUnitLabel(sizingUnit)})` : "",
             " ",
             /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowRightIcon, {})
           ] })
@@ -22813,6 +23080,9 @@ function PrimeStyleTryonInner({
   const [sizingUnit, setSizingUnit] = reactExports.useState(imperial ? "in" : "cm");
   const [heightUnit, setHeightUnit] = reactExports.useState(imperial ? "in" : "cm");
   const [weightUnit, setWeightUnit] = reactExports.useState(imperial ? "lbs" : "kg");
+  reactExports.useEffect(() => {
+    if (detectMeasurementType(productTitle) === "foot") setSizingUnit("cm");
+  }, [productTitle]);
   const formRef = reactExports.useRef({});
   const [formGender, setFormGender] = reactExports.useState("male");
   const [formKey, setFormKey] = reactExports.useState(0);
@@ -22887,7 +23157,7 @@ function PrimeStyleTryonInner({
         { at: 75, text: t2("Refining details...") },
         { at: 90, text: t2("Almost there...") }
       ];
-      const RING_CIRCUMFERENCE2 = 2 * Math.PI * 20;
+      const RING_CIRCUMFERENCE2 = 2 * Math.PI * 27;
       progressIntervalRef.current = setInterval(() => {
         if (completedRef.current) return;
         const startTs = progressStartTsRef.current || Date.now();
@@ -23065,13 +23335,10 @@ function PrimeStyleTryonInner({
     [activeProfileId, profiles, apiUrl, productImage, productTitle, effectiveProductId, setActiveProfileId$1]
   );
   const snapSubmitRef = reactExports.useRef(null);
-  const handleUseActiveProfile = reactExports.useCallback(async () => {
-    const p2 = profiles.find((x2) => x2.id === activeProfileId);
-    if (!p2) return;
+  const [confirmProfile, setConfirmProfile] = reactExports.useState(null);
+  const runRecommendWithProfile = reactExports.useCallback(async (p2) => {
     const profileHeight = p2.height ?? p2.heightCm ?? 0;
     const profileWeight = p2.weight ?? p2.weightKg ?? 0;
-    const hasIdentity = profileHeight > 0 && profileWeight > 0;
-    if (!hasIdentity) return;
     const hasStored = !!p2.measurements && Object.keys(p2.measurements).length > 0;
     const storedPhoto = p2.photoBase64;
     if (!hasStored && storedPhoto && profileHeight > 0 && snapSubmitRef.current) {
@@ -23095,9 +23362,8 @@ function PrimeStyleTryonInner({
     }
     setSizingResult(null);
     setSizingLoading(true);
-    const hasStoredMeasurements = !!p2.measurements && Object.keys(p2.measurements).length > 0;
-    setEstimationDone(hasStoredMeasurements);
-    if (hasStoredMeasurements) {
+    setEstimationDone(hasStored);
+    if (hasStored) {
       setPreviewUrl(null);
       setBodyLandmarks(null);
     }
@@ -23130,7 +23396,27 @@ function PrimeStyleTryonInner({
       setEstimationDone(true);
     }).catch(() => {
     }).finally(() => setSizingLoading(false));
-  }, [profiles, activeProfileId, effectiveProductId, productTitle, productImage, sizeGuideData, apiUrl]);
+  }, [effectiveProductId, productTitle, productImage, sizeGuideData, apiUrl, previewUrl]);
+  const handleUseActiveProfile = reactExports.useCallback(async () => {
+    const p2 = profiles.find((x2) => x2.id === activeProfileId);
+    if (!p2) return;
+    const profileHeight = p2.height ?? p2.heightCm ?? 0;
+    const profileWeight = p2.weight ?? p2.weightKg ?? 0;
+    const hasIdentity = profileHeight > 0 && profileWeight > 0;
+    if (!hasIdentity) return;
+    setConfirmProfile(p2);
+  }, [profiles, activeProfileId]);
+  const proceedFromConfirmProfile = reactExports.useCallback(() => {
+    if (!confirmProfile) return;
+    const p2 = confirmProfile;
+    setConfirmProfile(null);
+    void runRecommendWithProfile(p2);
+  }, [confirmProfile, runRecommendWithProfile]);
+  const cancelFromConfirmProfile = reactExports.useCallback(() => {
+    setConfirmProfile(null);
+    setFormKey((k2) => k2 + 1);
+    setView("body-profile");
+  }, []);
   const applyProfileRef = reactExports.useRef(() => {
   });
   const handleOpen = reactExports.useCallback(() => {
@@ -24505,6 +24791,15 @@ function PrimeStyleTryonInner({
             onCancel: () => setDeleteConfirmId(null),
             t: t2
           }
+        ),
+        confirmProfile && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ConfirmMeasurementsModal,
+          {
+            profile: confirmProfile,
+            onProceed: proceedFromConfirmProfile,
+            onEdit: cancelFromConfirmProfile,
+            t: t2
+          }
         )
       ] }) }),
       document.body