@primestyleai/tryon 5.9.1 → 5.10.1

package/dist/react/utils/units.d.ts

@@ -4,3 +4,9 @@ export declare function kgToLbs(kg: number): number;
 export declare function lbsToKg(lbs: number): number;
 export declare function ftInToCm(ft: number, inch: number): number;
 export declare function isImperial(locale: string): boolean;
+/**
+ * Human-readable label for a unit token. Used to append a system label to
+ * primary CTAs ("Find My Best Fit (Metric)") so the user knows whether their
+ * values will be interpreted as cm/kg or in/lbs before they submit.
+ */
+export declare function getUnitLabel(unit: string | undefined | null): string;

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;
 }
@@ -10258,12 +10265,15 @@ const STYLES$1 = `
   .ps-tryon-logo-img { height: var(--ps-logo-height); width: auto; }
   .ps-tryon-header-actions { display: flex; align-items: center; gap: 0.42vw; }
   .ps-tryon-header-icon {
-    width: 2.2vw; height: 2.2vw; display: flex; align-items: center; justify-content: center;
-    border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw; background: transparent;
+    /* Pure vw sizing collapsed to ~8 px on 375 px mobile. Clamp so the icon
+       stays finger-tappable (min 30 px) while scaling up on large screens. */
+    width: clamp(30px, 2.2vw, 34px); height: clamp(30px, 2.2vw, 34px);
+    display: flex; align-items: center; justify-content: center;
+    border: 1.5px solid var(--ps-border-color); border-radius: clamp(6px, 0.52vw, 10px); background: transparent;
     cursor: pointer; color: var(--ps-text-secondary); transition: all 0.2s;
   }
   .ps-tryon-header-icon:hover { border-color: var(--ps-accent); color: var(--ps-accent); }
-  .ps-tryon-header-icon svg { stroke: currentColor; fill: none; width: 0.9vw; height: 0.9vw; }
+  .ps-tryon-header-icon svg { stroke: currentColor; fill: none; width: clamp(14px, 0.9vw, 16px); height: clamp(14px, 0.9vw, 16px); }
   .ps-tryon-close {
     width: 2.2vw; height: 2.2vw; display: flex; align-items: center; justify-content: center;
     background: none; border: none; color: var(--ps-modal-close-color, #999);
@@ -10311,7 +10321,10 @@ const STYLES$1 = `
   }
 
   .ps-tryon-lang-list {
-    max-height: min(18vw, 280px); overflow-y: auto; padding: clamp(3px, 0.31vw, 5px);
+    /* max(...) picks the larger of the two values so the dropdown is tall
+       enough to scroll through a handful of languages on any viewport.
+       Pure min(18vw, 280px) collapsed to ~67 px on 375 px mobile. */
+    max-height: max(260px, min(18vw, 280px)); overflow-y: auto; padding: clamp(3px, 0.31vw, 5px);
     scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.15) transparent;
   }
   .ps-tryon-lang-item {
@@ -11524,21 +11537,21 @@ const STYLES$1 = `
   /* 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;
+    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: 4px; border-radius: 3px; overflow: hidden;
+    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: 3px; transition: width 0.3s ease;
+    border-radius: 4px; 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-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 {
@@ -11566,25 +11579,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;
   }
@@ -12704,6 +12717,33 @@ const STYLES$1 = `
 
     /* ── Preserve existing previews and modal-wide overrides ── */
     .ps-tryon-preview { height: 320px; }
+
+    /* ── Drawer list (history / profiles / settings) ── */
+    /* Pure vw gap (0.52vw = ~2 px on mobile) crushed list rows together. */
+    .ps-tryon-drawer-list { gap: 12px !important; padding: 0 !important; }
+    .ps-tryon-drawer { padding: 16px !important; }
+
+    /* ── Profile cards inside the sizing-profiles drawer ── */
+    .ps-msp-card {
+      padding: 16px !important;
+      border-radius: 14px !important;
+    }
+    .ps-msp-card-tag { font-size: 11px !important; padding: 4px 8px !important; border-radius: 999px !important; }
+    .ps-msp-card-circle { width: 72px !important; height: 72px !important; margin: 8px auto 12px !important; }
+    .ps-msp-card-name { font-size: 16px !important; margin-bottom: 6px !important; }
+    .ps-msp-meta-row { padding: 6px 0 !important; gap: 8px !important; }
+    .ps-msp-card-meta { font-size: 12px !important; }
+    .ps-msp-card-actions { gap: 8px !important; margin-top: 10px !important; }
+    .ps-msp-card-select { font-size: 13px !important; padding: 10px 12px !important; border-radius: 8px !important; }
+    .ps-msp-card-edit, .ps-msp-card-delete { width: 36px !important; height: 36px !important; border-radius: 8px !important; }
+    .ps-msp-card-create { min-height: 120px !important; font-size: 14px !important; }
+
+    /* ── Language switcher dropdown ── */
+    /* Default min(18vw, 280px) collapsed to ~67 px on mobile — unusable. */
+    .ps-tryon-lang-list { max-height: 320px !important; }
+    .ps-tryon-lang-item { padding: 10px 14px !important; gap: 10px !important; }
+    .ps-tryon-lang-name { font-size: 14px !important; }
+    .ps-tryon-lang-code { font-size: 11px !important; }
   }
 
   @keyframes ps-mobile-slide-up {
@@ -16671,6 +16711,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,
@@ -16907,7 +17033,7 @@ function MobileSkeleton({ landmarks, w: w2, h }) {
   );
 }
 const MSC_TRYON_TARGET_SECONDS = 22;
-const MSC_RING_RADIUS = 20;
+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());
@@ -16930,17 +17056,17 @@ function MscTryOnProgress({ t: t2 }) {
       }
     }, 200);
     return () => clearInterval(id2);
-  }, [t2]);
+  }, []);
   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: "48", height: "48", viewBox: "0 0 48 48", "aria-hidden": "true", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "24", cy: "24", r: MSC_RING_RADIUS, className: "ps-tryon-progress-ring-track" }),
+      /* @__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: "24",
-            cy: "24",
+            cx: "32",
+            cy: "32",
             r: MSC_RING_RADIUS,
             className: "ps-tryon-progress-ring-fill",
             strokeDasharray: MSC_RING_CIRC,
@@ -16989,11 +17115,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);
@@ -17150,7 +17277,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",
           {
@@ -17185,7 +17312,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",
@@ -17218,7 +17357,7 @@ const SKELETON_CONNECTIONS = [
   ["rightKnee", "rightAnkle"]
 ];
 const TRYON_TARGET_SECONDS = 22;
-const TRYON_RING_RADIUS = 20;
+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);
@@ -17248,18 +17387,18 @@ function TryOnProgress({ t: t2, isActive }) {
       }
     }, 200);
     return () => clearInterval(id2);
-  }, [isActive, t2]);
+  }, [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: "48", height: "48", viewBox: "0 0 48 48", "aria-hidden": "true", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "24", cy: "24", r: TRYON_RING_RADIUS, className: "ps-tryon-progress-ring-track" }),
+      /* @__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: "24",
-            cy: "24",
+            cx: "32",
+            cy: "32",
             r: TRYON_RING_RADIUS,
             className: "ps-tryon-progress-ring-fill",
             strokeDasharray: TRYON_RING_CIRC,
@@ -17410,11 +17549,12 @@ 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.jsxs("div", { className: "ps-msc-stage", style: { alignSelf: "center", marginTop: "auto", marginBottom: "auto" }, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msc-stage-slot", children: [
@@ -17661,7 +17801,8 @@ function SectionDetailView({
   backLabel,
   internationalSizes,
   continueLabel,
-  renderRaw = false
+  renderRaw = false,
+  sectionFound
 }) {
   const recSize = sectionResult?.recommendedSize || "";
   const [selectedSize, setSelectedSize] = reactExports.useState(null);
@@ -17706,7 +17847,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++) {
@@ -18560,6 +18702,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,
@@ -18644,6 +18787,7 @@ function SizeResultView({
                 sectionName: entry.name,
                 section: entry.section,
                 sectionResult: entry.secResult,
+                sectionFound: entry.secResult?.found,
                 userMeasurements: entry.userMeasurements,
                 unitLbl,
                 chartUnit: resultUnit,
@@ -18693,6 +18837,7 @@ function SizeResultView({
                 sectionName: entry.name,
                 section: entry.section,
                 sectionResult: entry.secResult,
+                sectionFound: entry.secResult?.found,
                 userMeasurements: entry.userMeasurements,
                 unitLbl,
                 chartUnit: resultUnit,
@@ -18814,7 +18959,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" }),
@@ -18838,7 +18983,7 @@ function SizeResultView({
                     " →"
                   ]
                 }
-              ) : vtoExcluded ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              ) : vtoExcluded || noFit ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
                 "button",
                 {
                   className: "ps-tryon-v2-cta",
@@ -18891,6 +19036,7 @@ function SizeResultView({
                 sectionName,
                 section: singleSection,
                 sectionResult: singleResult,
+                sectionFound: sizingResult?.found,
                 userMeasurements: singleUserMeasurements,
                 unitLbl,
                 chartUnit: resultUnit,
@@ -18898,7 +19044,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,
@@ -18938,6 +19084,7 @@ function SizeResultView({
                 sectionName,
                 section: singleSection,
                 sectionResult: singleResult,
+                sectionFound: sizingResult?.found,
                 userMeasurements: singleUserMeasurements,
                 unitLbl,
                 chartUnit: resultUnit,
@@ -18945,7 +19092,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,
@@ -19321,7 +19468,7 @@ function UploadView({
     }
   ) });
 }
-const RING_RADIUS = 20;
+const RING_RADIUS = 27;
 const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
 function ProcessingView({
   previewUrl,
@@ -19366,12 +19513,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"
             }
@@ -19380,8 +19527,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,
@@ -21951,7 +22098,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,
@@ -22206,7 +22353,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: "←" }),
@@ -22396,6 +22544,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, {})
         ] }),
@@ -22730,6 +22879,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, {})
           ] })
@@ -22963,6 +23113,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);
@@ -23037,7 +23190,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();
@@ -23215,13 +23368,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) {
@@ -23245,9 +23395,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);
     }
@@ -23280,7 +23429,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(() => {
@@ -23619,7 +23788,14 @@ function PrimeStyleTryonInner({
     }
   }, [apiUrl, sizingMethod, sizingCountry, heightUnit, weightUnit, sizingUnit, sizeGuide, productTitle, dynamicFields, persistResultToProfile]);
   const handleQuickEstimate = reactExports.useCallback(async (height, weight, heightUnit2, weightUnit2, gender, age, bodyType, chestProfile, midsectionProfile, hipProfile, bodyImage) => {
-    if (!apiRef.current) return;
+    if (!apiRef.current) {
+      const msg = t2("SDK not configured. Please refresh and try again.");
+      console.warn("[ps-sdk] handleQuickEstimate BAILED — apiRef is null. API key not loaded.");
+      setErrorMessage(msg);
+      setView("error");
+      onError?.({ message: msg, code: "SDK_NOT_CONFIGURED" });
+      return;
+    }
     getApiUrl(apiUrl);
     getApiKey();
     const SKIP_ESTIMATE_KEYS = /* @__PURE__ */ new Set(["weight", "weightKg", "height", "heightCm"]);
@@ -23676,7 +23852,11 @@ function PrimeStyleTryonInner({
       apiUrl
     });
     if (!apiRef.current || !sseRef.current) {
+      const msg = t2("SDK not configured. Please refresh and try again.");
       console.warn("[ps-sdk] handleSnapSubmit BAILED — apiRef or sseRef is null. Check api init.");
+      setErrorMessage(msg);
+      setView("error");
+      onError?.({ message: msg, code: "SDK_NOT_CONFIGURED" });
       return;
     }
     const baseUrl = getApiUrl(apiUrl);
@@ -24655,6 +24835,15 @@ function PrimeStyleTryonInner({
             onCancel: () => setDeleteConfirmId(null),
             t: t2
           }
+        ),
+        confirmProfile && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ConfirmMeasurementsModal,
+          {
+            profile: confirmProfile,
+            onProceed: proceedFromConfirmProfile,
+            onEdit: cancelFromConfirmProfile,
+            t: t2
+          }
         )
       ] }) }),
       document.body