@primestyleai/tryon 5.9.1 → 5.10.0

package/dist/react/components/ConfirmMeasurementsModal.d.ts

@@ -0,0 +1,22 @@
+import type { TranslateFn } from "../../i18n";
+import type { Profile } from "../types";
+/**
+ * Confirmation modal shown before the "Find My Best Fit" fast path fires a
+ * recommendation against the user's stored profile. The user sees exactly
+ * what measurements we're about to send (and in which unit system) so they
+ * can catch an imperial vs metric mismatch before the API call.
+ *
+ * - Proceed → parent runs `recommendForProduct`
+ * - Edit / close-X → parent returns to the basics step with the profile
+ *   values intact, ready to be edited and resubmitted.
+ *
+ * Reuses the existing `.ps-confirm-overlay` / `.ps-confirm-modal` CSS already
+ * shipped for `DeleteConfirmModal` in `MySizingProfilesView` — same visual
+ * language, no new CSS class to maintain.
+ */
+export declare function ConfirmMeasurementsModal({ profile, onProceed, onEdit, t, }: {
+    profile: Profile;
+    onProceed: () => void;
+    onEdit: () => void;
+    t: TranslateFn;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react/index.js

@@ -655,7 +655,8 @@ async function recommendForProduct(input) {
     sections: sectionsMap,
     profileId: profile.id,
     fromCache: false,
-    raw: result
+    raw: result,
+    found: result.found
   };
 }
 async function estimateFullMeasurements(args) {
@@ -714,6 +715,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;
 }
@@ -2099,21 +2106,21 @@ const STYLES = `
   /* 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 {
@@ -2141,25 +2148,25 @@ const STYLES = `
     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;
   }
@@ -7246,6 +7253,92 @@ function ProfileDetailModal({
     document.body
   );
 }
+function ConfirmMeasurementsModal({
+  profile,
+  onProceed,
+  onEdit,
+  t
+}) {
+  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 = (w) => {
+    if (!w) return "—";
+    return `${Math.round(w)} ${weightUnit}`;
+  };
+  const height = profile.height ?? profile.heightCm;
+  const weight = profile.weight ?? profile.weightKg;
+  return /* @__PURE__ */ jsx("div", { className: "ps-confirm-overlay", onClick: onEdit, children: /* @__PURE__ */ jsxs("div", { className: "ps-confirm-modal", onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": t("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__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "16", height: "16", children: [
+          /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+          /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { style: { fontWeight: 700, marginBottom: "0.4vw" }, children: t("Confirm your measurements") }),
+    /* @__PURE__ */ jsx("small", { style: { color: "var(--ps-text-muted)" }, children: systemLabel ? t("You chose") + " " + systemLabel + ". " + t("Review before continuing.") : t("Review before continuing.") }),
+    /* @__PURE__ */ 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__ */ jsxs("li", { style: { display: "flex", justifyContent: "space-between", gap: "1vw" }, children: [
+        /* @__PURE__ */ jsx("span", { style: { color: "var(--ps-text-muted)" }, children: t("Height") }),
+        /* @__PURE__ */ jsx("span", { style: { fontWeight: 600 }, children: formatHeight(height) })
+      ] }),
+      /* @__PURE__ */ jsxs("li", { style: { display: "flex", justifyContent: "space-between", gap: "1vw" }, children: [
+        /* @__PURE__ */ jsx("span", { style: { color: "var(--ps-text-muted)" }, children: t("Weight") }),
+        /* @__PURE__ */ jsx("span", { style: { fontWeight: 600 }, children: formatWeight(weight) })
+      ] }),
+      profile.age ? /* @__PURE__ */ jsxs("li", { style: { display: "flex", justifyContent: "space-between", gap: "1vw" }, children: [
+        /* @__PURE__ */ jsx("span", { style: { color: "var(--ps-text-muted)" }, children: t("Age") }),
+        /* @__PURE__ */ jsx("span", { style: { fontWeight: 600 }, children: profile.age })
+      ] }) : null,
+      /* @__PURE__ */ jsxs("li", { style: { display: "flex", justifyContent: "space-between", gap: "1vw" }, children: [
+        /* @__PURE__ */ jsx("span", { style: { color: "var(--ps-text-muted)" }, children: t("Gender") }),
+        /* @__PURE__ */ jsx("span", { style: { fontWeight: 600 }, children: profile.gender === "female" ? t("Female") : t("Male") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ps-confirm-actions", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: "ps-confirm-cancel", onClick: onEdit, children: t("Edit") }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "ps-confirm-delete", onClick: onProceed, children: t("Proceed") })
+    ] })
+  ] }) });
+}
 function WelcomeView({
   productImage,
   setView,
@@ -7482,7 +7575,7 @@ function MobileSkeleton({ landmarks, w, 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 }) {
   const startRef = useRef(Date.now());
@@ -7505,17 +7598,17 @@ function MscTryOnProgress({ t }) {
       }
     }, 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__ */ jsxs("svg", { width: "64", height: "64", viewBox: "0 0 64 64", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "32", cy: "32", r: MSC_RING_RADIUS, className: "ps-tryon-progress-ring-track" }),
         /* @__PURE__ */ 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,
@@ -7564,11 +7657,12 @@ function MobileScanningView({
   };
   const [stageIdx, setStageIdx] = useState(0);
   useEffect(() => {
+    const intervalMs = tryOnProcessing ? 2200 : 1500;
     const id = setInterval(() => {
       setStageIdx((i) => (i + 1) % stages.length);
-    }, 1500);
+    }, intervalMs);
     return () => clearInterval(id);
-  }, [stages.length]);
+  }, [stages.length, tryOnProcessing]);
   useEffect(() => {
     if (isPhotoMode && bodyLandmarks && stageIdx === 0) {
       setStageIdx(1);
@@ -7725,7 +7819,7 @@ function MultiSectionMobile({
       /* @__PURE__ */ 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 ? t("No fit") : sec.size || secResult.recommendedSize;
         return /* @__PURE__ */ jsxs(
           "button",
           {
@@ -7760,7 +7854,19 @@ function MultiSectionMobile({
           children: t("Continue Shopping")
         }
       )
-    ] }) : /* @__PURE__ */ 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__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ps-msr-tryon-cta",
+          onClick: onClose,
+          children: t("Continue Shopping")
+        }
+      )
+    ) : /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
@@ -7793,7 +7899,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, isActive }) {
   const startRef = useRef(null);
@@ -7823,18 +7929,18 @@ function TryOnProgress({ t, isActive }) {
       }
     }, 200);
     return () => clearInterval(id);
-  }, [isActive, t]);
+  }, [isActive]);
   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__ */ jsxs("svg", { width: "64", height: "64", viewBox: "0 0 64 64", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "32", cy: "32", r: TRYON_RING_RADIUS, className: "ps-tryon-progress-ring-track" }),
         /* @__PURE__ */ 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,
@@ -7985,11 +8091,12 @@ function StageCycler({
   }, [tryOnProcessing]);
   useEffect(() => {
     if (isDone) return;
+    const intervalMs = tryOnProcessing ? 2200 : 900;
     const id = setInterval(() => {
       setIdx((i) => Math.min(i + 1, active.length - 1));
-    }, 900);
+    }, intervalMs);
     return () => clearInterval(id);
-  }, [isDone, active.length]);
+  }, [isDone, active.length, tryOnProcessing]);
   const current = active[idx] ?? active[0];
   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: [
@@ -8236,7 +8343,8 @@ function SectionDetailView({
   backLabel,
   internationalSizes,
   continueLabel,
-  renderRaw = false
+  renderRaw = false,
+  sectionFound
 }) {
   const recSize = sectionResult?.recommendedSize || "";
   const [selectedSize, setSelectedSize] = useState(null);
@@ -8281,7 +8389,8 @@ function SectionDetailView({
     const hasBadFit = details.some((d) => BAD_FIT.test(d.fit || ""));
     return hasBadFit ? t("Not Recommended") : t("Your Selection");
   }, [isRecommended, sectionResult, t]);
-  const displaySizeLabel = selectedCountry && isRecommended && internationalSizes && internationalSizes[selectedCountry] ? internationalSizes[selectedCountry] : displaySize;
+  const noFitMessage = t("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 = useMemo(() => {
     const units = [];
     for (let i = 0; i < section.headers.length; i++) {
@@ -9135,6 +9244,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,
@@ -9219,6 +9329,7 @@ function SizeResultView({
                 sectionName: entry.name,
                 section: entry.section,
                 sectionResult: entry.secResult,
+                sectionFound: entry.secResult?.found,
                 userMeasurements: entry.userMeasurements,
                 unitLbl,
                 chartUnit: resultUnit,
@@ -9268,6 +9379,7 @@ function SizeResultView({
                 sectionName: entry.name,
                 section: entry.section,
                 sectionResult: entry.secResult,
+                sectionFound: entry.secResult?.found,
                 userMeasurements: entry.userMeasurements,
                 unitLbl,
                 chartUnit: resultUnit,
@@ -9389,7 +9501,7 @@ function SizeResultView({
               return /* @__PURE__ */ jsxs("button", { className: `ps-tryon-sr-card-v2${isLast ? " ps-full" : ""}`, onClick: () => setActiveSection(name), style: { animationDelay: `${idx * 0.07}s` }, children: [
                 /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-card-v2-text", children: [
                   /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-card-v2-label", children: name.replace(/\s*[—–-]\s*.*/g, "") }),
-                  /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-card-v2-value", children: sec.size || secResult.recommendedSize }),
+                  /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-card-v2-value", children: sec.found === false ? t("No fit") : sec.size || secResult.recommendedSize }),
                   /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-card-v2-rec", children: t("recommended") })
                 ] }),
                 sectionImg && /* @__PURE__ */ jsx("img", { src: sectionImg, alt: name, className: "ps-tryon-sr-card-v2-img" }),
@@ -9413,7 +9525,7 @@ function SizeResultView({
                     " →"
                   ]
                 }
-              ) : vtoExcluded ? /* @__PURE__ */ jsxs(
+              ) : vtoExcluded || noFit ? /* @__PURE__ */ jsxs(
                 "button",
                 {
                   className: "ps-tryon-v2-cta",
@@ -9466,6 +9578,7 @@ function SizeResultView({
                 sectionName,
                 section: singleSection,
                 sectionResult: singleResult,
+                sectionFound: sizingResult?.found,
                 userMeasurements: singleUserMeasurements,
                 unitLbl,
                 chartUnit: resultUnit,
@@ -9473,7 +9586,7 @@ function SizeResultView({
                 onBack: resultImageUrl ? onClose || (() => setView("body-profile")) : () => setView("body-profile"),
                 backLabel: t("Back"),
                 internationalSizes: sizingResult?.internationalSizes,
-                onTryOn: resultImageUrl || vtoExcluded ? void 0 : handleSingleTryOn,
+                onTryOn: resultImageUrl || vtoExcluded || noFit ? void 0 : handleSingleTryOn,
                 continueLabel: resultImageUrl ? t("Continue Shopping") : void 0,
                 tryOnProcessing,
                 productImage: resultImageUrl || productImage,
@@ -9513,6 +9626,7 @@ function SizeResultView({
                 sectionName,
                 section: singleSection,
                 sectionResult: singleResult,
+                sectionFound: sizingResult?.found,
                 userMeasurements: singleUserMeasurements,
                 unitLbl,
                 chartUnit: resultUnit,
@@ -9520,7 +9634,7 @@ function SizeResultView({
                 onBack: resultImageUrl ? onClose || (() => setView("body-profile")) : () => setView("body-profile"),
                 backLabel: t("Back"),
                 internationalSizes: sizingResult?.internationalSizes,
-                onTryOn: resultImageUrl || vtoExcluded ? void 0 : handleSingleTryOn,
+                onTryOn: resultImageUrl || vtoExcluded || noFit ? void 0 : handleSingleTryOn,
                 continueLabel: resultImageUrl ? t("Continue Shopping") : void 0,
                 tryOnProcessing,
                 t,
@@ -9896,7 +10010,7 @@ function UploadView({
     }
   ) });
 }
-const RING_RADIUS = 20;
+const RING_RADIUS = 27;
 const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
 function ProcessingView({
   previewUrl,
@@ -9941,12 +10055,12 @@ function ProcessingView({
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "ps-tryon-progress-section", children: [
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-progress-ring", children: [
-        /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 48 48", width: "48", height: "48", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 64 64", width: "64", height: "64", "aria-hidden": "true", children: [
           /* @__PURE__ */ jsx(
             "circle",
             {
-              cx: "24",
-              cy: "24",
+              cx: "32",
+              cy: "32",
               r: RING_RADIUS,
               className: "ps-tryon-progress-ring-track"
             }
@@ -9955,8 +10069,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,
@@ -12526,7 +12640,7 @@ function BodyProfileView({
               hidePhotoOptions: hasActiveProfileWithMeasurements,
               onNext: hasActiveProfileWithMeasurements && onUseActiveProfile ? onUseActiveProfile : handleNext,
               canProceed: true,
-              fastPathLabel: hasActiveProfileWithMeasurements ? t("Find My Best Fit") : void 0,
+              fastPathLabel: hasActiveProfileWithMeasurements ? t("Find My Best Fit") + (getUnitLabel(hUnit) ? ` (${getUnitLabel(hUnit)})` : "") : void 0,
               activeProfileName: hasActiveProfileWithMeasurements ? activeProfileName : null,
               onStartFresh,
               error,
@@ -12781,7 +12895,8 @@ function BodyProfileView({
       !(isMobile && step === "basics") && (() => {
         const useProfileFast = step === "basics" && hasActiveProfileWithMeasurements && !!onUseActiveProfile;
         const handleClick = useProfileFast ? onUseActiveProfile : handleNext;
-        const label = useProfileFast ? t("Find My Best Fit") : isLastStep ? t("Find My Size") : t("Next");
+        const unitSuffix = getUnitLabel(hUnit) ? ` (${getUnitLabel(hUnit)})` : "";
+        const label = useProfileFast ? t("Find My Best Fit") + unitSuffix : isLastStep ? t("Find My Size") + unitSuffix : t("Next");
         return /* @__PURE__ */ jsxs("div", { className: "ps-bp-nav", children: [
           step !== "basics" ? /* @__PURE__ */ jsxs("button", { className: "ps-bp-back-btn", onClick: handleBackStep, type: "button", children: [
             /* @__PURE__ */ jsx("span", { className: "ps-bp-back-arrow", children: "←" }),
@@ -12971,6 +13086,7 @@ function AccessorySizeView({
       /* @__PURE__ */ jsxs("div", { className: "ps-bpm-bottom", children: [
         /* @__PURE__ */ jsxs("button", { type: "button", className: "ps-bpm-next-btn", onClick: handleManualSubmit, children: [
           t("Find My Size"),
+          getUnitLabel(sizingUnit) ? ` (${getUnitLabel(sizingUnit)})` : "",
           " ",
           /* @__PURE__ */ jsx(ArrowRightIcon, {})
         ] }),
@@ -13305,6 +13421,7 @@ function AccessorySizeView({
           /* @__PURE__ */ jsx("div", {}),
           /* @__PURE__ */ jsxs("button", { className: "ps-bp-next-btn", onClick: handleManualSubmit, type: "button", children: [
             t("Find My Size"),
+            getUnitLabel(sizingUnit) ? ` (${getUnitLabel(sizingUnit)})` : "",
             " ",
             /* @__PURE__ */ jsx(ArrowRightIcon, {})
           ] })
@@ -13538,6 +13655,9 @@ function PrimeStyleTryonInner({
   const [sizingUnit, setSizingUnit] = useState(imperial ? "in" : "cm");
   const [heightUnit, setHeightUnit] = useState(imperial ? "in" : "cm");
   const [weightUnit, setWeightUnit] = useState(imperial ? "lbs" : "kg");
+  useEffect(() => {
+    if (detectMeasurementType(productTitle) === "foot") setSizingUnit("cm");
+  }, [productTitle]);
   const formRef = useRef({});
   const [formGender, setFormGender] = useState("male");
   const [formKey, setFormKey] = useState(0);
@@ -13612,7 +13732,7 @@ function PrimeStyleTryonInner({
         { at: 75, text: t("Refining details...") },
         { at: 90, text: t("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();
@@ -13790,13 +13910,10 @@ function PrimeStyleTryonInner({
     [activeProfileId, profiles, apiUrl, productImage, productTitle, effectiveProductId, setActiveProfileId$1]
   );
   const snapSubmitRef = useRef(null);
-  const handleUseActiveProfile = useCallback(async () => {
-    const p = profiles.find((x) => x.id === activeProfileId);
-    if (!p) return;
+  const [confirmProfile, setConfirmProfile] = useState(null);
+  const runRecommendWithProfile = useCallback(async (p) => {
     const profileHeight = p.height ?? p.heightCm ?? 0;
     const profileWeight = p.weight ?? p.weightKg ?? 0;
-    const hasIdentity = profileHeight > 0 && profileWeight > 0;
-    if (!hasIdentity) return;
     const hasStored = !!p.measurements && Object.keys(p.measurements).length > 0;
     const storedPhoto = p.photoBase64;
     if (!hasStored && storedPhoto && profileHeight > 0 && snapSubmitRef.current) {
@@ -13820,9 +13937,8 @@ function PrimeStyleTryonInner({
     }
     setSizingResult(null);
     setSizingLoading(true);
-    const hasStoredMeasurements = !!p.measurements && Object.keys(p.measurements).length > 0;
-    setEstimationDone(hasStoredMeasurements);
-    if (hasStoredMeasurements) {
+    setEstimationDone(hasStored);
+    if (hasStored) {
       setPreviewUrl(null);
       setBodyLandmarks(null);
     }
@@ -13855,7 +13971,27 @@ function PrimeStyleTryonInner({
       setEstimationDone(true);
     }).catch(() => {
     }).finally(() => setSizingLoading(false));
-  }, [profiles, activeProfileId, effectiveProductId, productTitle, productImage, sizeGuideData, apiUrl]);
+  }, [effectiveProductId, productTitle, productImage, sizeGuideData, apiUrl, previewUrl]);
+  const handleUseActiveProfile = useCallback(async () => {
+    const p = profiles.find((x) => x.id === activeProfileId);
+    if (!p) return;
+    const profileHeight = p.height ?? p.heightCm ?? 0;
+    const profileWeight = p.weight ?? p.weightKg ?? 0;
+    const hasIdentity = profileHeight > 0 && profileWeight > 0;
+    if (!hasIdentity) return;
+    setConfirmProfile(p);
+  }, [profiles, activeProfileId]);
+  const proceedFromConfirmProfile = useCallback(() => {
+    if (!confirmProfile) return;
+    const p = confirmProfile;
+    setConfirmProfile(null);
+    void runRecommendWithProfile(p);
+  }, [confirmProfile, runRecommendWithProfile]);
+  const cancelFromConfirmProfile = useCallback(() => {
+    setConfirmProfile(null);
+    setFormKey((k) => k + 1);
+    setView("body-profile");
+  }, []);
   const applyProfileRef = useRef(() => {
   });
   const handleOpen = useCallback(() => {
@@ -15230,6 +15366,15 @@ function PrimeStyleTryonInner({
             onCancel: () => setDeleteConfirmId(null),
             t
           }
+        ),
+        confirmProfile && /* @__PURE__ */ jsx(
+          ConfirmMeasurementsModal,
+          {
+            profile: confirmProfile,
+            onProceed: proceedFromConfirmProfile,
+            onEdit: cancelFromConfirmProfile,
+            t
+          }
         )
       ] }) }),
       document.body

package/dist/react/recommendForProduct.d.ts

@@ -27,6 +27,10 @@ export interface RecommendForProductResult {
     fromCache: boolean;
     /** Full sizing result for downstream use */
     raw?: SizingResult;
+    /** True when the backend found a real fit. False when the user's body is
+     *  outside every row in the size chart — hosts should suppress their
+     *  "Recommended: X" badge and surface a "size unavailable" message. */
+    found?: boolean;
 }
 /**
  * Headless auto-sizing — given a product and an active profile, returns the